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

<template>
  <div class="changeDetail">
    <Toptitle title="变更记录详情">
      <slot name="titleButton">
        <Button
          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">
          <div class="top_search">
            <div><span>区域编码:</span>{{ formData.area_num }}</div>
            <div><span>区域名称:</span>{{ formData.area_title }}</div>
            <div><span>产品名称:</span>{{ formData.product_title }}</div>
            <div><span>数量:</span>{{ formData.product_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;">
              <span style="width:50px">图纸:</span>
              <div>
                <span
                  v-for="item in formData.img"
                  :key="item"
                  @click="checkImg(formData.img)"
                >
                  <img :src="$store.state.ip + item" alt="" style=" max-width: 80px; max-height: 80px;"/>
                </span>
              </div>
            </div>
            <div>
              <span>左右式:</span
              >{{
                formData.fashion == 1
                  ? "左式"
                  : formData.fashion == 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="联系单编号:">
              <span>{{formData.contact_order_no}}</span>
            </FormItem>
            <FormItem label="原生产单编号:">
              <span
                style="width: auto"
              >{{this.$route.query.order_no}}</span>
            </FormItem>
            <FormItem label="接收部门:">
              <Select
                filterable
                clearable
                v-model="formData.get_depart_id"
                size="small"
                style="width: 120px"
                disabled
              >
                <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.send_depart_id"
                disabled
                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.type_title" disabled></Input>
            </FormItem>
            <FormItem label="变更原因:">
              <Input
                type="textarea"
                placeholder="请输入..."
                style="width: auto"
                v-model="formData.reason"
                disabled
              ></Input>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
    <Card style="width: 100%">
      <div style="margin-left: 5px">
        <span style="font-size: 20px; font-weight: bold">变更后深化单内容</span>
      </div>
      <Table :columns="tableColumns" :data="tableData" border>
        <template slot="urlSet" slot-scope="{ index }">
          <div class="product-img">
            <div class="product-add">
              <div
                class="items"
                v-show="tableData[index].img.length !== 0 ? true : false"
              >
                <img
                  @click="looks(tableData[index].img)"
                  v-for="(el, idx) in tableData[index].img"
                  :key="idx"
                  :src="$store.state.ip + el"
                  alt=""
                />
              </div>
            </div>
          </div>
        </template>
      </Table>
      <div class="List_form_content">
        <div>
          <span style="font-size: 20px; font-weight: bold">原深化单内容</span>
        </div>
        <Table :columns="ListColumns" :data="ListData" border>
          <template slot="urlSet" slot-scope="{ index }">
            <div
              class="items"
            >
              <img
                @click="looks(ListData[index].img)"
                v-for="(el, idx) in ListData[index].img"
                :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: {
        depart_end:'',
        depart_start:'',
        msg:'',
        contact_order_no:'',
        change_type:''
      },
      cascader_list: [],
      building_list: [],
      type: 1,
      tableColumns: [
          { 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
        }
      ],
      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 }
      ],
      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.contact_order_no
    );
  },
  methods: {
    looks(arr) {
      // const array = [{ img_url: img }];
      const array = arr.map((v) => {
        return { img_url: v };
      });
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    goback() {
      this.$router.go(-1);
    },
    initData(contact_order_no) {
      this.axios({
        method: "get",
        url: "/api/change_area_product_detail",
        params: {
         contact_order_no
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.new_list;
        this.ListData =res.data.old_list;
        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];
        });
        this.ListData.forEach(item=>{
            item.long = item.measure.split("*")[0];
          item.wide = item.measure.split("*")[1];
          item.high = item.measure.split("*")[2];
        })
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.changeDetail {
  overflow: auto;
  .form_content {
    border-bottom: 1px solid #a2a6b1;
    .top_search {
      display: flex;
      flex-wrap: wrap;
      div {
        width: 250px;
        font-size: 14px;
        margin: 10px 0px;
      }
      span{
          margin-left: 20px;
      }
    }

    .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;
  }
  .items {
    width: auto;
    height: 40px;
    margin-bottom: 10px;
  overflow: hidden;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 40px;
      max-height: 40px;
    }
  }
}
.List_form_content {
  margin: 30px 0;
}
.ivu-form-item{
    width: 250px;
}
</style>