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"
              multiple
              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> -->
          <div class="inputWrap"  v-if="$route.query.type != 2">
    <button class="inputWrapButton"
            @click="onClickBtn">导入</button>
    <input type="file"
           multiple
         
           @change="onChange"
           ref='file'

           class="inputmultiple" />
  </div>
        <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 placeholder="请输入项目编码"/>
          </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" placeholder="请输入项目名称"/>
          </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" placeholder="请输入项目简称"/>
          </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>批量数：{{item.number}}</span>
              <span :style="item.state == 1?'':'color:red;'" v-show='$route.query.type!=3'>{{item.state == 0?'未匹配':item.state == 2?'匹配完成':'匹配中'}}</span>
            </div>
            <div class="table_header_right">
              <Button type="primary" size="small" :disabled="item.state==0?false:true" @click="del(item,index)" v-if="$route.query.type!=2">删除</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" max-height="450">
                  <template slot="match_state" slot-scope="{row}">
                      <span>{{row.state == 0?'未匹配':row.state == 2?'匹配完成':'匹配中'}}</span>
                  </template>
              </Table>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
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: 70 },
            { title: "区域", key: "region", align: "center", minWidth: 70 },
             { title: "楼栋", key: "house", align: "center", minWidth: 70 },
              { title: "单元", key: "unit", align: "center", minWidth: 70 },
               { title: "楼层", key: "layer", align: "center", minWidth: 70 },
            { title: "房间号", key: "number", align: "center", minWidth: 70 }
      ],
      showType: false,
      headers: { Authorization: localStorage.getItem("token") },
      //进入页面需要获取的数值
      infoNumber:[],
      cut_order_id:'',
      del_id:[],
      number:[],
      region:[],
      cut_order_product_id:'',
      uploadData_type:true,
    };
  },
  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,
            filterable:true,
          placeholder: "请选择",
          serverName: "region",
          optionName:'region',
          optionValue:'region',
          option: [
          ...this.region
          ]
      },
      {
          title: "房号",
          name: "Select",
          value: "",
          placeholder: "请选择",
           filterable:true,
          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,
         project_number:this.formData.project_number}
    },
    set_tableColumns(){
        return [...this.tableColumns,
               ...this.add_tableColumns,
               { title: "匹配状态", key: "match_state", align: "center", minWidth: 140 ,slot:'match_state'}
        ]
    }
  },
  methods: {
       saveData(){
         if(!this.formData.project_number){
                this.$Message.warning('请填写项目编码！')
         }else{
          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: 70
        };
                  this.tableData=res.data.data;
                for(let i in this.tableData[0]){
                 if(i!== 'state'&&i!=='region'&&i!=='unit'&&i!=='number'&&i!=='layer'&&i!=='house'){
                      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:()=>{}
            })
      },
          objToForm (obj) {
      let Form = new FormData();
      for (let i in obj) {
        Form.append(i, obj[i]);
      }
      return Form;
    },
    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: 70
        };
                  this.tableData=res.data.data;
                for(let i in this.tableData[0]){
                 if(i!== 'state'&&i!=='region'&&i!=='unit'&&i!=='number'&&i!=='layer'&&i!=='house'){
                      obj.title = i;
                      obj.key = i;
                      this.add_tableColumns.push(JSON.parse(JSON.stringify(obj))) 
                 }

             };
             this.$forceUpdate();
              })
    },
    // handleBeforeUpload(e) {
    //   console.log(this.uploadData_type)
    //     if(this.uploadData_type){
    //       this.uploadData.type = 3
    //     }else{
    //       this.uploadData.type = 4
    //     }
    //     return false
    // },
    //  uploadError(err) {
    //   this.$Message.error(err.msg || "导入失败");
    // },
  // async 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.project_abbreviation = res.data.abbreviation;
  //       this.formData.start_time =this.func.replaceDate(res.data.crt_time);
  //       this.uploadData_type = false;
  //       this.uploadData.project_number = res.data.project_number;
  //       console.log(this.uploadData.project_number)
  //       this.$forceUpdate();
  //        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();
        }
    },
     async onChange (e) {
      let fileList = e.target.files;
       for (let i in fileList) {
        if (!isNaN(Number(i))) {
          this.headers["Content-Type"] = "application/x-www-form-urlencoded";
            let data = this.objToForm({
              ...this.uploadData,
              your_file: fileList[i],
            });
      
            await axios({
              url: this.$store.state.ip + '/api/cut_order_room_import',
              headers: this.headers,
              method: "post",
              data,
            }).then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("导入成功");
         this.cut_order_id = res.data.data.cut_order_id;
        this.formData.project_number = res.data.data.project_number;
        this.formData.product_name = res.data.data.project_name;
        this.formData.id = res.data.data.cut_order_id;
        this.formData.project_abbreviation = res.data.data.abbreviation;
        this.formData.start_time =this.func.replaceDate(res.data.data.crt_time);
        this.uploadData_type = false;
        this.uploadData.project_number = res.data.data.project_number;
        this.$forceUpdate();
         if(this.infoNumber.length == 0){
             this.infoNumber.push(res.data.data.children)
             this.infoNumber[0].showType = false
        }else{
            this.infoNumber.push(res.data.data.children);
        this.infoNumber.forEach((item,index)=>{
          if(item.cut_order_product_id == res.data.data.children.cut_order_product_id){
              this.infoNumber.pop();
              this.infoNumber.splice(index,1,res.data.data.children)
          }
        })}
              }
            })
            // await setTimeout(() => { }, 1000);
        }
      }
        },
    //点击事件
    onClickBtn () {
      this.$refs.file.click()
    }
  },
};
</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;
}
.inputWrapButton {
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  user-select: none;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  color: #fff;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
  outline: 0;
  border: none;
  cursor: pointer;
  transition: color 0.2s linear, background-color 0.2s linear,
    border 0.2s linear, box-shadow 0.2s linear;
  &:hover {
    background-color: #70b1f7;
  }
}
.inputWrap {
  position: relative;
  display: inline-block;
}
.inputmultiple {
  width: 100%;
  height: 100%;
  display: none;
  user-select: none;
}
</style>