jf-frock/src/views/leadMatch/roomList/edit.vue

<template>
  <div>
    <Toptitle :title="$route.query.type==1?'房间编辑':$route.query.type == 2?'房间查看':'房间新增'">
      <slot name="titleButton" class="btn_set">
          <div class="btn_set">
           <Upload
              :headers="headers"
              name="your_file"
              :data="uploadData"
              :show-upload-list="false"
              :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="handleBeforeUpload"
              :action="$store.state.ip + '/api/cut_order_room_import'"
              style="margin-right: 10px"
              v-if="$route.query.type != 2"
            >
              <Button style="margin-left:10px" type="primary">导入</Button>
            </Upload>
        <Button style="margin-left:10px" @click="$router.go(-1)">返回</Button>
        <Button style="margin-left:10px" v-if="$route.query.type != 2" @click="saveData">保存</Button>
        </div>
      </slot>
    </Toptitle>
    <div class="weight_memo_info_content">
      <div class="form_content">
        <Form :label-width="85" :model="formData">
          <FormItem label="项目编码:">
               <span  v-if="this.$route.query.type == 2">{{formData.project_number}}</span>
            <Input size='small' v-model="formData.project_number" v-else />
          </FormItem>
          <FormItem label="项目名称:">
           <span  v-if="this.$route.query.type == 2">{{formData.product_name}}</span>
            <Input v-else size='small' v-model="formData.product_name"/>
          </FormItem>
          <FormItem label="项目简称:">
             <span  v-if="this.$route.query.type == 2">{{formData.project_abbreviation}}</span>
            <Input v-else size='small' v-model="formData.project_abbreviation"/>
          </FormItem>
          <FormItem label="下单日期:">
              <span v-if="this.$route.query.type == 2">{{formData.start_time}}</span>
            <DatePicker
              type="date"
              v-model="formData.start_time"
              placeholder="年/月/日"
              v-else
              size='small'
            ></DatePicker>
          </FormItem>
        </Form>
      </div>
      <Card v-for="(item,index) in infoNumber" :key="index">
          <div class="table_header">
            <div class="table_header_left">
              <span>图号：{{item.url_number}}</span>
              <span>产品名称：{{item.product_title}}</span>
              <span :style="item.state == 1?'':'color:red;'">{{item.state == 0?'未匹配':item.state == 1?'匹配完成':'匹配中'}}</span>
            </div>
            <div class="table_header_right">
              <Button type="primary" size="small" :disabled="item.state==0?false:true" @click="del(item,index)">删除</Button>
              <div @click="show(item,index)" style="cursor: pointer;"><span style="font-size:16px;">{{item.showType?'收缩':'展开'}}</span><Icon type="md-arrow-dropright"  ref="ico" class="ico"/></div>
              <span>总计{{item.total}}条数据</span>
            </div>
          </div>
          <div v-if="item.showType">
          <div>
            <Topsearch :list="list" @searchData="initData" />
          </div>
              <Table :columns="set_tableColumns" border :data="tableData">
                  <template slot="match_state" slot-scope="{row}">
                      <span>{{row.state == 0?'未匹配':row.state == 2?'匹配完成':'匹配中'}}</span>
                  </template>
              </Table>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
         start_time: null,
        project_number:'',
        project_abbreviation:'',
        product_name:'',
        id:''
      },
      add_tableColumns:[],
      tableData:[],
      searchData: {},
      tableColumns:[
            { title: "序号", type:'index', align: "center", minWidth: 140 },
            { title: "区域", key: "region", align: "center", minWidth: 140 },
             { title: "楼栋", key: "house", align: "center", minWidth: 140 },
              { title: "单元", key: "unit", align: "center", minWidth: 140 },
               { title: "楼层", key: "layer", align: "center", minWidth: 140 },
            { title: "房间号", key: "number", align: "center", minWidth: 140 }
      ],
      showType: false,
      headers: { Authorization: localStorage.getItem("token") },//请求头
      //进入页面需要获取的数值
      infoNumber:[],
      cut_order_id:'',
      del_id:[],
      number:[],
      region:[],
      cut_order_product_id:'',
    };
  },
  created(){
   if(this.$route.query.type == 1||this.$route.query.type == 2){
          this.axios.get('/api/cut_order_detail',{params:{cut_order_id:this.$route.query.cut_order_id,order_type:2}}).then(res=>{
             this.formData.project_number = res.data.project_number;
             this.formData.product_name = res.data.project_name;
             this.formData.project_abbreviation = res.data.abbreviation;
             this.formData.start_time = this.func.replaceDate(res.data.crt_time);
             this.infoNumber = [...res.data.children];
             this.cut_order_id = res.data.cut_order_id
          })
      }
  },
  mounted(){
    
  },
  computed: {
    list() {
      return [
      {
          title: "区域名称",
          name: "Select",
          value: "",
           multiple: true,
          placeholder: "请选择",
          serverName: "region",
          optionName:'region',
          optionValue:'region',
          option: [
          ...this.region
          ]
      },
      {
          title: "房号",
          name: "Select",
          value: "",
          placeholder: "请选择",
          serverName: "number",
            optionName:'number',
          optionValue:'number',
          option: [
           ...this.number
          ]
      },
      {
          title: "匹配状态",
          name: "Select",
          value: "",
          placeholder: "请选择",
          serverName: "state",
          option: [
            { label: "匹配完成", value: 2 },
            { label: "未匹配", value: 0 },
            { label: "匹配中", value: 1 },
          ]
      }
        ];
    },
    uploadData(){
        return {type:this.infoNumber.length==0?this.$route.query.type:4}
    },
    set_tableColumns(){
        return [...this.tableColumns,
               ...this.add_tableColumns,
               { title: "匹配状态", key: "match_state", align: "center", minWidth: 140 ,slot:'match_state'}
        ]
    }
  },
  methods: {
       saveData(){
          let date = new Date();
         if(!this.formData.start_time){
             this.formData.start_time = date
         }
      this.axios.get('/api/cut_order_save',{params:{
          project_name:this.formData.product_name,
          project_number:this.formData.project_number,   
          abbreviation:this.formData.project_abbreviation,
          crt_time:this.formData.start_time,
          id:this.cut_order_id,
          }}).then(res=>{
              if(res.code ==200){
                   this.$Message.success(res.msg)
               this.axios.post('/api/cut_order_del',{cut_order_product_id:this.del_id,order_type:2,cut_order_id:this.cut_order_id})
              }  
          });
      },
       search(item){
           this.add_tableColumns = [];
          this.axios.post('/api/cut_order_open',{
              cut_order_product_id:item.cut_order_product_id,
              cut_order_id:this.cut_order_id,
              order_type:2
              }).then(res=>{ 
                  this.number = res.data.number;
                  this.region = res.data.region;
                  let obj ={
            title:'',
            key:'',
            align: "center",
             minWidth: 140
        };
                  this.tableData=res.data.data;
                for(let i in this.tableData[0]){
                 if(i.charAt(0) == 'W'){
                      obj.title = i;
                      obj.key = i;
                      this.add_tableColumns.push(JSON.parse(JSON.stringify(obj))) 
                 }

             };
             this.$forceUpdate();
              })
      },
      del(item,index){
            this.confirmDelete({
                content:'是否删除？',
                title:'房间删除',
                type:'primary',
                then:()=>{
                     this.infoNumber.splice(index,1);
                     this.del_id.push(item.cut_order_product_id) 
                },
                cancel:()=>{}
            })
      },
    initData(row) {
          this.add_tableColumns = [];
          this.axios.post('/api/cut_order_open',{
              cut_order_product_id:this.cut_order_product_id,
              cut_order_id:this.cut_order_id,
              order_type:2,
              ...row
              }).then(res=>{ 
                  let obj ={
            title:'',
            key:'',
            align: "center",
             minWidth: 140
        };
                  this.tableData=res.data.data;
                for(let i in this.tableData[0]){
                 if(i.charAt(0) == 'W'){
                      obj.title = i;
                      obj.key = i;
                      this.add_tableColumns.push(JSON.parse(JSON.stringify(obj))) 
                 }

             };
             this.$forceUpdate();
              })
    },
    handleBeforeUpload() {},
     uploadError(err) {
      this.$Message.error(err.msg || "导入失败");
    },
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success("导入成功");
         this.cut_order_id = res.data.cut_order_id;
        this.formData.project_number = res.data.project_number;
        this.formData.product_name = res.data.project_name;
        this.formData.id = res.data.cut_order_id;
        this.formData.start_time =this.func.replaceDate(res.data.crt_time);
         if(this.infoNumber.length == 0){
             this.infoNumber.push(res.data.children)
             this.infoNumber[0].showType = false
        }else{
            this.infoNumber.push(res.data.children);
        this.infoNumber.forEach((item,index)=>{
          if(item.cut_order_product_id == res.data.children.cut_order_product_id){
              this.infoNumber.pop();
              this.infoNumber.splice(index,1,res.data.children)
          }
        })}
      } else {
        this.$Message.warning(res.msg || "导入失败");
      }
      },
    show(item,index) {
        item.showType = !item.showType
        if(item.showType){           //全部未展开
            this.infoNumber.forEach(_item=>{
           _item.showType = false;
        })
             document.getElementsByClassName('ico')[index].style.transform = 'rotate(90deg)'
             this.search(item);
             this.$forceUpdate();
             this.cut_order_product_id = item.cut_order_product_id;
             item.showType = true
        }else{    //展开其中一项
             this.infoNumber.forEach(_item=>{
           _item.showType = false;
        })
            document.getElementsByClassName('ico')[index].style.transform = 'rotate(0deg)';
            this.$forceUpdate();
        }
    },
  },
};
</script>
<style scoped lang='scss'>
.weight_memo_info_content{
    height: 700px;
    overflow: auto;
}
.form_content {
  margin-top: 10px;
  /deep/.ivu-form {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /deep/.ivu-form-item {
    display: inline-block;
    width: 250px;
  }
}
.table_header {
  display: flex;
  justify-content: space-between;
  .table_header_left{
      span{
          margin: 0 20px;
      }
  }
  .table_header_right {
      width: 240px;
    display: flex;
    justify-content: space-around;
  }
}
.mate_info{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.ico{
   height:14px;
   transition: all 0.4s;
   vertical-align: middle;
}
/deep/ .ivu-card{
    border-radius: 15px;
    margin: 15px 0;
    background: rgb(236, 236, 236);
}
.btn_set{
    display: flex;
}
</style>