BST_bigScreen/src/views/BidSystem/DeepeningOrder/changeDetail.vue

<template>
  <div class="changeDetail">
    <Toptitle title="变更">
      <slot name="titleButton">
        <Button
          @click="handleFinish()"
          type="primary"
          style="margin-right: 10px"
          >变更保存</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >取消</Button
        >
      </slot>
    </Toptitle>
    <div>
      <div class="form">
        <div class="form_content">
          <Form
            :model="formData"
            :label-width="100"
            class="form_content_header"
          >
            <FormItem label="楼幢:">
              <Select
                filterable
                clearable
                v-model="formData.building"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in building_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="单元:">
              <Select
                filterable
                clearable
                v-model="formData.unit"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in unit_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="楼层:">
              <Select
                filterable
                clearable
                v-model="formData.floor"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in floor_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="房号:">
              <Select
                filterable
                clearable
                v-model="formData.room_number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in room_number_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="产品名称:">
              <Select
                filterable
                clearable
                v-model="formData.product_title"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in product_title_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="图号:">
              <Select
                filterable
                clearable
                v-model="formData.pic_number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(_item, _index) in pic_number_list"
                  :key="_index"
                  :label="_item"
                  :value="_item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button @click="getListData" type="primary" size="small"
                >搜索</Button
              >
            </FormItem>
          </Form>
          <div class="top_search">
            <div><span>区域编码:</span>{{ formData.area_num }}</div>
            <div><span>区域名称:</span>{{ formData.area_title }}</div>
            <div><span>产品名称:</span>{{ formData.title }}</div>
            <div><span>数量:</span>{{ formData.num }}</div>
            <div><span>规格:</span>{{ formData.measure }}</div>
            <div><span>工艺属性:</span>{{ formData.process_property }}</div>
            <div><span>图号:</span>{{ formData.url_number }}</div>
            <div style="display:flex;width:auto">
              <span>图纸:</span>
              <div>
                <span
                  v-for="item in formData.url"
                  :key="item"
                  @click="checkImg(formData.url)"
                >
                  <img :src="$store.state.ip + item" alt="" style=" max-width: 100px; max-height: 100px;"/>
                </span>
              </div>
            </div>
            <div>
              <span>左右式:</span
              >{{
                formData.left_right_mode == 1
                  ? "左式"
                  : formData.left_right_mode == 2
                  ? "右式"
                  : "无"
              }}
            </div>
            <!-- <div><span>价格:</span>{{ formData.price }}</div> -->
            <div><span>备注:</span>{{ formData.remark }}</div>
          </div>
        </div>
        <div class="form_middle">
          <Form class="form_middle_content" :label-width="100">
            <FormItem label="联系单编号:">
              <Input
                placeholder="请输入单号"
                style="width: auto"
                v-model="formData.contact_order_no"
              ></Input>
            </FormItem>
            <FormItem label="原生产单编号:">
              <span
                style="width: auto"
              >{{this.$route.query.order_no}}</span>
            </FormItem>
            <FormItem label="接受部门:">
              <Select
                filterable
                clearable
                v-model="formData.depart_end"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item,index) in depart_list"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="发出部门:">
              <Select
                filterable
                clearable
                v-model="formData.depart_start"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in depart_list"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="更改性质:">
              <Input placeholder="请输入..." style="width: auto" v-model="formData.change_type"></Input>
            </FormItem>
            <FormItem label="变更原因:">
              <Input
                type="textarea"
                placeholder="请输入..."
                style="width: auto"
                v-model="formData.msg"
              ></Input>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
    <Card style="width: 100%">
      <div style="margin-left: 5px">
        <Button
          type="primary"
          size="small"
          style="width: 70px"
          @click="add_line"
          >增行</Button
        >
      </div>
      <Table :columns="tableColumns" :data="tableData" border>
        <template slot="houseSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].house"
            placeholder="楼栋"
          />
          <span v-else>{{ tableData[index].house }}</span>
        </template>
        <template slot="unitSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].unit"
            placeholder="单元"
          />
          <span v-else>{{ tableData[index].unit }}</span>
        </template>
        <template slot="layerSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].layer"
            placeholder="楼层"
          />
          <span v-else>{{ tableData[index].layer }}</span>
        </template>
        <template slot="numberSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].number"
            placeholder="房间号"
          />
          <span v-else>{{ tableData[index].number }}</span>
        </template>
        <template slot="type_titleSet" slot-scope="{ row, index }">
          <el-cascader
            v-if="row.input_state"
            v-model="tableData[index].type_id"
            size="small"
            :show-all-levels="false"
            :options="cascader_list"
            :props="{
              expandTrigger: 'hover',
              children: 'child',
              value: 'id',
              label: 'title',
              emitPath: false,
              checkStrictly: true,
            }"
            @change="handleTypeTitleChange"
          ></el-cascader>
          <!-- @change="changeProduct(tableData[index], index)" -->
          <span v-else>{{ tableData[index].type_title }}</span>
        </template>
        <template slot="titleSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].title"
            placeholder="产品"
          />
          <span v-else>{{ tableData[index].title }}</span>
        </template>
        <template slot="product_unitSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].product_unit"
            placeholder="单位"
          />
          <span v-else>{{ tableData[index].product_unit }}</span>
        </template>
        <template slot="positionSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].position"
            placeholder="位置"
          />
          <span v-else>{{ tableData[index].position }}</span>
        </template>
        <template slot="urlSet" slot-scope="{ index }">
          <div class="product-img">
            <div class="product-add">
              <div
                class="items"
                v-show="tableData[index].url.length !== 0 ? true : false"
              >
                <img
                  @click="looks(tableData[index].url)"
                  v-for="(el, idx) in tableData[index].url"
                  :key="idx"
                  :src="$store.state.ip + el"
                  alt=""
                />
              </div>
              <template style="flex">
                <div style="display: flex; justify-content: center">
                  <Icon
                    size="50"
                    @click="
                      delItems(
                        tableData[index].url.length - 1,
                        tableData[index].url
                      )
                    "
                    class="add-items"
                    type="ios-remove"
                  />
                  <div class="add-items">
                    <div class="_item">
                      <Icon size="50" type="ios-add" />
                    </div>
                    <input
                      @change="changeIpt($event, tableData[index])"
                      type="file"
                      class="ipt"
                    />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
        <template slot="url_numberSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].url_number"
            placeholder="图号"
          />
          <span v-else>{{ tableData[index].url_number }}</span>
        </template>
        <template slot="modelSet" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].model"
            placeholder="型号"
          />
          <span v-else>{{ tableData[index].model }}</span>
        </template>
         <template slot="status" slot-scope="{ index }">
          <span>{{ tableData[index].status?'新增':'变更' }}</span>
        </template>
        <template slot="long" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].long"
            placeholder="长"
          />
          <span v-else>{{ row.long }}</span>
        </template>
        <template slot="width" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].wide"
            placeholder="宽"
          />
          <span v-else>{{ tableData[index].wide }}</span>
        </template>
        <template slot="heigh" slot-scope="{ row, index }">
          <Input
            type="text"
            size="small"
            v-if="row.input_state"
            v-model="tableData[index].high"
            placeholder="高"
          />
          <span v-else>{{ tableData[index].high }}</span>
        </template>
        <template slot="set" slot-scope="{ row, index }">
          <a
            style="margin: 0 5px; color: blue"
            @click="handleSet(row, index, 1)"
            v-show="row.change_state"
            >变更</a
          >
          <a
            style="margin: 0 5px; color: blue"
            @click="handleSet(row, index, 2)"
            >复制</a
          >
          <a style="margin: 0 5px; color: red" @click="handleSet(row, index, 3)"
            >删除</a
          >
        </template>
      </Table>
      <div class="List_form_content">
        <div>
          <span style="font-size: 20px; font-weight: bold">原深化单内容</span>
        </div>
        <Table :columns="ListColumns" :data="ListData">
          <template slot="urlSet" slot-scope="{ index }">
            <div
              class="items"
              v-show="ListData[index].url.length !== 0 ? true : false"
            >
              <img
                @click="looks(ListData[index].url)"
                v-for="(el, idx) in ListData[index].url"
                :key="idx"
                :src="$store.state.ip + el"
                alt=""
                style="max-width: 40px; max-height: 40px"
              />
            </div>
          </template>
        </Table>
      </div>
    </Card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        building: "",
        unit: "",
        room_number: "",
        floor: "",
        product_title: "",
        pic_number: "",
        depart_end:'',
        depart_start:'',
        msg:'',
        contact_order_no:'',
        change_type:''
      },
      cascader_list: [],
      building_list: [],
      type: 1,
      unit_list: [],
      floor_list: [],
      room_number_list: [],
      product_title_list: [],
      pic_number_list: [],
      tableColumns: [
        {
          title: "楼栋",
          key: "house",
          align: "center",
          width: 80,
          slot: "houseSet",
          resizable: true,
        },
        {
          title: "楼单元",
          key: "unit",
          align: "center",
          width: 80,
          slot: "unitSet",
          resizable: true,
        },
        {
          title: "楼层",
          key: "layer",
          align: "center",
          width: 80,
          slot: "layerSet",
          resizable: true,
        },
        {
          title: "房间号",
          key: "number",
          align: "center",
          width: 100,
          slot: "numberSet",
          resizable: true,
        },
        {
          title: "产品分类",
          key: "title",
          align: "center",
          width: 140,
          slot: "type_titleSet",
          resizable: true,
        },
        {
          title: "产品",
          key: "title",
          align: "center",
          width: 130,
          slot: "titleSet",
          resizable: true,
        },
        {
          title: "计量单位",
          key: "product_unit",
          align: "center",
          width: 100,
          slot: "product_unitSet",
          resizable: true,
        },
        {
          title: "位置",
          key: "position",
          align: "center",
          width: 100,
          slot: "positionSet",
          resizable: true,
        },
        {
          title: "图纸",
          key: "url",
          align: "center",
          width: 120,
          slot: "urlSet",
          resizable: true,
        },
        {
          title: "图号",
          key: "url_number",
          align: "center",
          width: 120,
          slot: "url_numberSet",
          resizable: true,
        },
        {
          title: "型号",
          key: "model",
          align: "center",
          width: 120,
          slot: "modelSet",
          resizable: true,
        },
        {
          title: "长",
          key: "H",
          align: "center",
          width: 120,
          resizable: true,
          slot: "long",
        },
        {
          title: "宽",
          key: "W",
          align: "center",
          width: 120,
           slot: "width",
          resizable: true,
        },
        {
          title: "高",
          key: "T",
          align: "center",
          width: 120,
         slot: "heigh",
          resizable: true,
        },
        {
          title: "变更类型",
          key: "status",
          align: "center",
          width: 120,
          slot: "status",
          resizable: true,
        },
        this.$route.query.type == 2
          ? {
              title: "操作",
              key: "set",
              align: "center",
              minWidth: 150,
              fixed: "right",
              slot: "set",
              resizable: true,
            }
          : { width: 1 },
      ],
      tableData: [],
      ListColumns: [
        { title: "序号", align: "center", minWidth: 100, type: "index" },
        { title: "楼栋", key: "house", align: "center", minWidth: 100 },
        { title: "楼单元", key: "unit", align: "center", minWidth: 100 },
        { title: "楼层", key: "layer", align: "center", minWidth: 100 },
        { title: "房价号", key: "number", align: "center", minWidth: 100 },
        {
          title: "产品分类",
          key: "type_title",
          align: "center",
          minWidth: 100,
        },
        { title: "产品", key: "title", align: "center", minWidth: 100 },
        {
          title: "计量单位",
          key: "product_unit",
          align: "center",
          minWidth: 100,
        },
        { title: "位置", key: "position", align: "center", minWidth: 100 },
        {
          title: "图纸",
          key: "url",
          align: "center",
          minWidth: 100,
          slot: "urlSet",
        },
        { title: "图号", key: "url_number", align: "center", minWidth: 100 },
        { title: "型号", key: "model", align: "center", minWidth: 100 },
        { title: "长", key: "long", align: "center", minWidth: 100 },
        { title: "宽", key: "wide", align: "center", minWidth: 100 },
        { title: "高", key: "high", align: "center", minWidth: 100 },
        { title: "变更类型", key: "state", align: "center", minWidth: 100 },
      ],
      ListData: [],
      page_index: 1,
      page_size: 10,
    depart_list:[],
    show:false
    };
  },
  created(){
      this.axios.get("/api/basics_product_index").then((res) => {
      this.cascader_list = res.data.data;
    });
            this.axios.get('/api/employee_depart_list').then(res=>{
                this.depart_list = res.data
                let arr = [];
                this.depart_list.forEach(item=>{
                    if(item.sub.length == 0){
                        arr.push(item)
                    }
                    else{
                        item.sub.forEach(_item=>{
                            arr.push(_item)
                        })
                    }
                })
                this.depart_list =arr
               })
  },
  mounted() {
    this.initData(
      this.$route.query.order_no,
      this.$route.query.order_area_id,
      this.$route.query.order_area_product_id
    );
  },
  methods: {
      handleFinish(){
         if(this.formData.depart_end ==null||
       this.formData.depart_start == null||
       this.formData.change_type == null||
       this.formData.msg == null||
       this.formData.contact_order_no == null){
             this.$Message.error('请填写完整信息');
         }else{
          let arr = [];
          let arr1 = [];
          this.tableData.forEach(item=>{
              item.product_title = item.title
              if(item.status ==1||item.status ==0){
                  arr.push(item)
              }
          })
          this.ListData.forEach(item=>{
              item.product_title = item.title
              if(item.status ==2){
                  arr1.push(item)
              }
          })
          this.axios({
              method:'post',
              url:'/api/change_area_product_save',
              data:{
                  order_area_product_id:this.$route.query.order_area_product_id,
                  get_depart_id:this.formData.depart_end,
                  send_depart_id:this.formData.depart_start,
                  change_type:this.formData.change_type,
                  reason:this.formData.msg,
                  change_list:[...arr1,...arr],
                  contact_order_no:this.formData.contact_order_no
              }
          }).then(res=>{
              if(res.code == 200){
                  this.$Message.success(res.msg)
              }
          })
         }
      },
    add_line() {
      let arr = {
        long: "",
        high: "",
        wide: "",
        change_state: false,
        status:1,
        copy_state:true,
        check_state: false,
        explode_status: '',
        house: '',
        house_id: "",
        id: '',
        input_state: true,
        layer: '',
        model: "",
        number: '',
        order_area_id: '',
        order_area_product_id: '',
        order_no: "",
        position: "",
        price: null,
        product_id: '',
        product_unit: "",
        real_price: '',
        sign_id: "",
        status: '',
        title: "",
        type_id: '',
        type_title: "",
        unit: '',
        url: [],
        url_number: "",
        _index: '',
        _rowKey: '',
      };
      this.tableData.unshift(arr);
    },
    handleTypeTitleChange(e) {},
    changeIpt(e, row) {
      let file = e.target.files[0];
      this.postImg(file, row);
      e.target.value = null;
    },
    postImg(file, row) {
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        row.url.push(res.data.url);
      });
    },
    delItems(n, arr) {
      arr.splice(n, 1);
    },
    looks(arr) {
      // const array = [{ img_url: img }];
      const array = arr.map((v) => {
        return { img_url: v };
      });
      console.log("array :>> ", array);
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    handleSet(row, index, type) {
      switch (type) {
        case 1:
          this.tableData[index].input_state = true;
          row.input_state = true;
          this.tableData[index].status = 0;
          if (!row.check_state) {
            row.state = "变更";
            row.status = 0;
            this.ListData.push(row);
            this.tableData[index].check_state = true;
            row.check_state = true;
            console.log(this.tableData);
          } else {
            this.$Message.warning("不可重复变更！");
          }
          break;
        case 2:
          this.tableData.splice(index, 0, row);
          //  this.tableData[index+1].check_state = false
          this.tableData[index+1].status = 1;
          this.tableData[index + 1].input_state = true;
          this.tableData[index + 1].change_state = false;
          //标记是复制的数据
          this.tableData[index + 1].copy_state = true;
          console.log(row);
          break;
        case 3:
            this.confirmDelete({
        content: "确认删除么？",
        then: () => {
             let arr = this.tableData.splice(index, 1);
          if (row.copy_state) {
            return;
          } else {
            arr[0].state = "删除";
            arr[0].status =2;
            this.ListData = [...this.ListData, ...arr];
            console.log(arr);
          }
        }
            });
         
      }
    },
    getListData() {},
    goback() {
      this.$router.go(-1);
    },
    initData(order_no, order_area_id, order_area_product_id) {
      this.axios({
        method: "get",
        url: "/api/order_area_product_list",
        params: {
          order_no,
          order_area_id,
          order_area_product_id,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.detail;
        this.formData =res.data;
        this.tableData.forEach((item) => {
          item.long = item.measure.split("*")[0];
          item.wide = item.measure.split("*")[1];
          item.high = item.measure.split("*")[2];
          item.input_state = false; //是否为input框
          item.check_state = false; //是否已经变更过
          item.change_state = true; //变更操作是否存在
        });
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.changeDetail {
  overflow: auto;
  .form_content {
    border-bottom: 1px solid #a2a6b1;
    .top_search {
      display: flex;
      flex-wrap: wrap;
      div {
        width: 200px;
        font-size: 14px;
        margin: 10px;
      }
    }

    .form_content_header {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .form_middle {
      margin: 20px 0;
    .form_middle_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
.product-add {
  display: flex;
  flex-direction: column;
  .ipt {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
    top: 0;
    left: 0;
  }
  .add-items {
    width: 40px;
    height: 40px;
    border: 1px dotted #e7e7e7;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    background: #f4f5f7;
    ._item {
      width: 46px;
      height: 46px;
      background: #3764ff;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .items {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 40px;
      max-height: 40px;
    }
  }
}
.List_form_content {
  margin: 30px 0;
}
.ivu-form-item {
    margin-left: 10px;
}
</style>