BST_bigScreen/src/views/leadMatch/weightMemo/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_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'

           id="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>区域：{{item.region}}</span>
              <span :style="item.state == 1?'':'color:red;'"
                    v-if="$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="search_data" />
          </div>
          <div v-for="(_item,_index) in tableData" :key="_index">
              <div class="mate_info">
                <div>匹配信息：{{_item.value}} {{_item.number}}组</div>
                <div>
                <span>总计{{_item.children.length}}条数据</span>
                <span style="margin:0 30px;cursor: pointer;" @click="showDetail(_item,_index)">{{_item.ishidden?'收缩':'展开'}}<Icon type="md-arrow-dropright"  ref="ico" class="ico_detail"/></span>
                </div>
                </div>
              <Table :columns="tableColumns" border :data="_item.children" max-height="450" v-if='_item.ishidden'>
                  <template slot="state" slot-scope="{row}">
                       <span>{{row.state ==0?'未匹配':row.state ==2?'匹配完成':'匹配中'}}</span>
                  </template>
              </Table>
          </div>
        </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:''
      },
      tableData:[],
      del_id:[],
      searchData: {},
      tableColumns:[
            { title: "序号", type:'index', align: "center", minWidth: 140 },
              { title: "部件名称", key: "part_title", align: "center", minWidth: 140 },
                { title: "行号", key: "line_number", align: "center", minWidth: 140 },
                  { title: "木皮1", key: "veneer_one", align: "center", minWidth: 140 },
                    { title: "原材料1", key: "board1", align: "center", minWidth: 140 },
                    { title: "原材料2", key: "board2", align: "center", minWidth: 140 },
                      { title: "木皮2", key: "veneer_two", align: "center", minWidth: 140 },
                        { title: "毛料尺寸", key: "wollens_size", align: "center", minWidth: 140 },
                         { title: "毛料合并的行号", key: "wool_line", align: "center", minWidth: 140 },
                          { title: "原料数量", key: "material_num", align: "center", minWidth: 140 },
                            { title: "精裁尺寸", key: "vacuum_size", align: "center", minWidth: 140 },
                              { title: "零部件数量", key: "part_num", align: "center", minWidth: 140 },
                                { title: "贴皮面积", key: "treatment_area", align: "center", minWidth: 140 },
                                { title: "精裁面积", key: "vacuum_area", align: "center", minWidth: 140 },
                                { title: "工艺要求", key: "technological_requirements", align: "center", minWidth: 140 },
                                { title: "打印芯片", key: "chip_state", align: "center", minWidth: 140 },
                                { title: "匹配状态", key: "state", align: "center", minWidth: 140,slot:'state' },
      ],
      headers: { Authorization: localStorage.getItem("token") },//请求头
      //进入页面需要获取的数值
      infoNumber:[],
      part_title:[],
      cut_size:[],
      cut_order_id:'',
      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:1}}).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];
             console.log(this.infoNumber)
             this.cut_order_id = res.data.cut_order_id
          })
      }
  },
  mounted(){
  },
  computed: {
    list() {
      return [
      {
          title: "部件名称",
          name: "Select",
          value: "",
          filterable:true,
          multiple: true,
          placeholder: "请选择",
          serverName: "part_title",
          optionName:'part_title',
          optionValue:'part_title',
          option: [
            ...this.part_title
          ]
      },
      {
          title: "精裁尺寸",
          name: "Select",
          value: "",
          placeholder: "请选择",
           filterable:true,
          serverName: "cut_size",
          optionName:'cut_size',
          optionValue:'cut_size',
          option: [
           ...this.cut_size
          ]
      },
      {
          title: "匹配状态",
          name: "Select",
          value: "",
          placeholder: "请选择",
          serverName: "state",
          option: [
            { label: "匹配中", value: 1 },
            { label: "未匹配", value: 0 },
            { label: "匹配完成", value: 2 },
          ]
      }
        ];
    },
      uploadData(){
        return {type:this.infoNumber.length==0?this.$route.query.type:4,
         project_number:this.formData.project_number}
    },
  },
  methods: {
    showDetail(row,index){
       if(row.ishidden){
        document.getElementsByClassName('ico_detail')[index].style.transform = 'rotate(0deg)'
        row.ishidden = false
        this.$forceUpdate()
       }else{
          document.getElementsByClassName('ico_detail')[index].style.transform = 'rotate(90deg)'
         row.ishidden = true
         this.$forceUpdate();
       }
    },
      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:1,cut_order_id:this.cut_order_id})
              }  
          });
         }
      },
      search_data(row){
                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:1,
              ...row
              }).then(res=>{
                  this.tableData=res.data.data;
                  this.tableData.forEach(v=>{
                    v.ishidden = fasle;
                  })
              })
      },
      search(item){
          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:1
              }).then(res=>{
                  this.tableData=res.data.data;
                  this.tableData.forEach(v=>{
                    v.ishidden=false
                  })
                  console.log(this.tableData)
                  this.part_title = res.data.part_title;
                  this.cut_size = res.data.cut_size;
                
              })
      },
      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() {

    },
   handleBeforeUpload(row) {
     
    },
     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.project_abbreviation = res.data.abbreviation;
        this.formData.id = res.data.cut_order_id;
        this.formData.start_time =this.func.replaceDate(res.data.crt_time);
        console.log(this.formData.start_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
        this.infoNumber[index].showType = !this.infoNumber[index].showType
        if(item.showType){           //全部未展开
            this.infoNumber.forEach(_item=>{
           _item.showType = false;
        })
             document.getElementsByClassName('ico')[index].style.transform = 'rotate(90deg)'
             item.showType = true
             this.$forceUpdate();
             this.cut_order_product_id = item.cut_order_product_id;
            this.search(item)
        }else{    //展开其中一项
             this.infoNumber.forEach(_item=>{
           _item.showType = false;
        })
            document.getElementsByClassName('ico')[index].style.transform = 'rotate(0deg)'
            this.tableData.forEach(v=>{
              v.ishidden = false;
            })
            this.$forceUpdate();
        }
    },
    repeatFile(){
        document.querySelector('#inputmultiple').setAttribute('type','text');
        document.querySelector('#inputmultiple').setAttribute('type','file');
    },
     async onChange (e) {
      
      let fileList =e.target.files;
      console.log(fileList)
       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_import',
              headers: this.headers,
              method: "post",
              data,
            }).then((res) => {
              console.log(res)
              this.repeatFile();
              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.project_abbreviation = res.data.data.abbreviation;
        this.formData.id = res.data.data.cut_order_id;
        this.formData.start_time =this.func.replaceDate(res.data.data.crt_time);
        console.log(this.formData.start_time)
        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)
          }
        })}

        }else{
          this.$Message.error(res.data.msg)
        }
              })
            // await setTimeout(() => { }, 1000);
        }
      }
        },
          objToForm (obj) {
      let Form = new FormData();
      for (let i in obj) {
        Form.append(i, obj[i]);
      }
      return Form;
    },
    //点击事件
    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;
}
.inputWrap {
  position: relative;
  display: inline-block;
}
#inputmultiple {
  width: 100%;
  height: 100%;
  display: none;
  user-select: none;
}
.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;
  }
}
</style>