merge合併數據結構、el-autocomplete搜索、objectSpanMethod合併單元格

<template>
  <div :class="['table-panel-group','table-min-space','conllect-tables','partInfoBox',typeName+'Box']"> 
    <!-- cap-table-style -->
    <div class="cap-table-style">
    <div class="table-panel-title">
      <span class="table-panel-tit">{{tablesData.tableTitle}}</span>
    </div>
    <div class="table-panel-tbar cap-button" >
          <el-button 
            type="text"
            class="table-top-button" 
            v-if="!wfprocessid"
            @click="downloadTemplate">下載模板</el-button>
          <el-button 
            type="text"
            class="table-top-button importBtn" 
            v-if="wfprocessid"
            @click="exportTemplate">導出EXCEL</el-button>
          <vivo-file-upload 
            :on-success="importEXCEL" 
            class="importFilesBtn"
            :multi="false" 
            :before-upload="beforeUpload" 
            :action="fileUploadUrl" 
            v-if="edit&&(!wfprocessid||isSupplier)"
            >
            <el-button 
              type="text"
              class="table-top-button importBtn" 
              >導入EXCEL</el-button>
          </vivo-file-upload>
        </div>
    <div class="table-panel-containner">
      <el-table
        ref="singleTable"
        :data="infoData['partInfoData']"
        border
        fit 
        width="100%"
        class="notHoverBg InfoCollectionPartDoc"
        :header-row-class-name="singleTable"
        :span-method="objectSpanMethod"
              >
        <el-table-column :width="col.width" v-for="(col,ix) in tablesData.columns" :key='ix'
                :show-overflow-tooltip="true">
           <template slot="header" slot-scope="scope">
            <span class="table-header-required" v-if="(col.required&&isSupplier)||col.vivoRequired">*</span>{{col.name}}
          </template>
          <template slot-scope="scope">
            <el-autocomplete v-if="col.xtype=='select'" 
                v-model="scope.row[col.id]" 
                class="material-code specification selectOpenIcon is-required"
                style="width:100%;" 
                :trigger-on-focus="false" 
                :disabled="true"
                :placeholder="col.placeholder||'請選擇'" 
                :readonly="!edit">
                <div class="specification-containner" slot="prefix" v-if="scope.row[col.id]">
                    <div class="dist-common-phrase" > 
                        <a class="doc-url" :href="isSupplier?'javascript:;':scope.row.partUrl" target="_blank" :title="scope.row[col.id]">
                          {{scope.row[col.id]}}
                        </a>
                        <i class="el-icon-close" 
                            v-show="!wfprocessid" 
                            @click="deleteMaterial(scope.row,scope.$index,scope.row.partNumber)"></i>
                    </div>
                </div>
                <i class="dialog-visible el-input__icon" 
                    slot="suffix" 
                    v-else-if="!wfprocessid"  @click="dialogVisible(scope.$index)" 
                   ></i>
            </el-autocomplete>
            <template v-else-if="col.xtype=='input'">
              <span v-if="(scope.row[col.id]||edit)" :class="[{'is-required':col.required&&isSupplier},'changeVal']">
                <span>
                  <el-input v-if="edit&&(isSupplier||isAdminFlag||!col.required)&&(!(!isSupplier&&!isAdminFlag)&&col.vivoNotWrite)" v-model="scope.row[col.id]" class="pl0" placeholder="請輸入"></el-input>
                  <span v-else>
                    <template v-if="scope.row[col.id]">{{scope.row[col.id]}}</template>
                    <span v-else class="gray-bar">-</span>
                  </span>
                </span>
                <span class="beforeVal" v-if="scope.row[col.before]">{{scope.row[col.before]}}</span>
              </span>
              <span v-else class="gray-bar">-</span>
            </template>
            <template v-else-if="col.xtype=='date'">
              <span v-if="(scope.row[col.id]||edit)" :class="[{'is-required':col.required&&isSupplier},'changeVal']">
                <span>
                  <vivo-date-picker  v-if="edit&&(isSupplier||isAdminFlag)" class="pl0" v-model="scope.row[col.id]"> 
                  </vivo-date-picker>
                  <span v-else>
                    <template v-if="scope.row[col.id]">{{scope.row[col.id]}}</template>
                    <span v-else class="gray-bar">-</span>
                  </span>
                </span>

                <span class="beforeVal" v-if="scope.row[col.before]">{{scope.row[col.before]}}</span>
              </span>
              <span v-else class="gray-bar">-</span> 
            </template>
            <template v-else-if="col.xtype=='selectOption'">
              <span v-if="(scope.row[col.id]||edit)"  class="changeVal">
                <span>
                  <el-select v-if="edit&&(isSupplier||isAdminFlag)" :class="[{'is-required':col.required&&isSupplier},'pl0']" v-model="scope.row[col.id]" placeholder="請選擇">
                    <el-option
                      v-for="item in col.selectDetail"
                      :key="'option'+item"
                      :label="item"
                      :disable="!edit"
                      :value="item">
                    </el-option>
                  </el-select>
                  <span v-else>
                    <template v-if="scope.row[col.id]">{{scope.row[col.id]}}</template>
                    <span v-else class="gray-bar">-</span>
                  </span>
                </span>

                <span class="beforeVal" v-if="scope.row[col.before]">{{scope.row[col.before]}}</span>
              </span>

              <span v-else class="gray-bar">-</span>
            </template>
            <template v-else-if="col.xtype==''">
              <span v-if="scope.row[col.id]">{{scope.row[col.id]}}</span>
              <span v-else class="gray-bar">-</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操做" width="90" v-if="edit&&!wfprocessid" :fixed="toFixed">
          <template slot-scope="scope">
            <el-button
              @click="addMaterial(scope.$index,scope.row.partNumber)"
              icon="el-icon-plus"
              type="text"
              :disabled="!edit"
              class="part-icon-button inline"
            ></el-button>
            <el-button
              :disabled="!edit"
              @click.native.prevent="deleteMaterial(scope.row,scope.$index,scope.row.partNumber)"
              icon="el-icon-minus"
              type="text"
              class="part-icon-button inline"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
    <el-dialog
      :title="tablesData.popUpTitle"
      :visible.sync="dialogTableVisible"
      width="960px"
      top="20px"
      class="collectionDialog"
      :close-on-click-modal="false"
     >
      <div>
        <el-row class="componentSelection">
          <el-col :span="24"  v-if="!tablesData.getOidPath">
            
            <div class="el-autocomplete specification specification-search">
              <el-input
                v-model="searchPartCode"
                :style="{'width':tablesData.thConfig.width}"
                placeholder="請輸入查找內容"
                @input="searchFn"
              ></el-input>
            </div><span class="ml20">已選擇</span>
          </el-col>
          <el-col :span="24"  v-else>
            <el-autocomplete
              v-model="searchPartCode"
              class="specification specification-search"
                            :style="{'width':tablesData.thConfig.width}"
              :trigger-on-focus="false"
              placeholder="請輸入查詢內容"
              :hide-loading="true"
              popper-class="partSearch-dropdown"
              :fetch-suggestions="materialCodeFn"
              @select="manufacturerSelect"
            >
              <template slot-scope="{ item }">
                <div class="manufacturer-name">{{ item.fullName }}</div>
              </template>
            </el-autocomplete><span class="ml20">已選擇</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <transfer :transferData="transferData" :thConfig="tablesData.thConfig" ref="transferData"></transfer>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAddpartFn">確 定</el-button>
        <el-button @click="clearAdd">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import transfer from "@/components/info-collection/moudel/transfer-panel";
import {
  getCollectMaterialInfo,
  getPartInfoList,
  getImportExcelModel,
  downExcelModel,
  exportExcelModel
  // getApproveRecord
} from "@/api/api";
export default {
  data() {
    return {
      searchPartCode: "", //搜索框值
      dialogTableVisible: false,
      loadingTable: false,
      partSelect:[], 
      pboid:this.$route.query.pboid,
      columns:[],
      editConfirm:true,
      typeName:this.$route.query.typeName,
      fileUploadUrl: "/Windchill/cmprest/uploadController/pluploadUpload",
      uploadFiles:"",
                checkFile:true,
      // hasSelect: [],
      tablesData:{},
      toFixed:null,
      transferData: {
        notSelectData: { // 左邊未選中
          type: "left",
          data: []
        },
        SelectData: { // 右邊選中
          type: "right",
          data: []
        }
      }
    }; 
  },
  props: {
    infoData: [Object, Array],
    wfprocessid:{
      type: String,
      default:''
    },
    headerEditPermission:Boolean,
    isSupplier:Boolean,
    isAdminFlag:Boolean,
  },
  components: {
    transfer
  },
  computed: {
    sortTables() {
      // addZeroDisable
      if (this.infoData['partInfoData'] && this.infoData['partInfoData'].length) {
        let _tableData = this.infoData['partInfoData'];
        //當前表單
        return _tableData.sort(this.compare("partNumber")); //partNumberIndex
      } else {
        return null;
      }
    },
    edit(){
        return this.$store.state.edit
    }
  },
  created() {    
    if (!this.pboid||!this.$route.query.tempValue) {
          this.addMaterial(0);
    }
    // this.infoData.partInfoData['SupplierMoldNum']='123456'
    var tableDefault = require('@/scene/'+this.$route.query.typeName+'/config/tablePartInfo.js');
    this.tablesData = tableDefault[0];
    
    if(this.typeName=='InfoCollection') this.tablesData.thConfig['width'] = "480px";
    this.toFixed = tableDefault[0].toFixed || null;
    
    setTimeout(()=>{
      if(this.infoData && this.infoData.state == "已發佈" && !isAdminFlag){
        this.editConfirm = false;
      }
    })
    
  },
  watch:{
    'infoData.partInfoData'(val){
      if(!val || !val.length) {
        this.addMaterial(0);
      }

    },
  },
  methods: {
    singleTable(row,rowIndex){
      var headerClassName = "part-tableHeader";
      return headerClassName
    },
    //判斷導入的文件格式
    checkFileExt(fileName){
      var arr = ["xlsx","xls"];
      var index = fileName.lastIndexOf(".");
      if(index == -1){return false;}
      var strMsg = fileName.slice(index+1);
      return arr.some(item=>item==strMsg);
    },
    //導入EXCEL  before
    beforeUpload(vivoupload,upload,file){
      var fileName = file.name;
      if(!this.checkFileExt(fileName)){
        this.checkFile = false;
      }else {
        this.checkFile = true;
      }
    },
    importEXCEL(data){
      var scope = this,checkFile=true;
      if(!this.checkFile){
        this.$message.error("當前導入文件格式不是xlsx");
        return;
      }
      if(!data.files.length){
        this.$message.error("請上傳導入文件");
        return;
      }
      var param = {};
      param.filePath = data.files[0].filepath;
      var loadMask = this.$loading({
          lock: false,
          spinner:"vo-mask",
          background:"rgba(204,204,204,.5)"
      });
      getImportExcelModel(param).then(res => {
        if(res.data.retCode == '000000'){
          loadMask.close();
          var data = scope.parseData(res);
          if(data.errorPart&&data.errorPart.length){
            this.$message.warning(`導入模具編碼：${JSON.stringify(data.errorPart)} 沒有數據！`);
          }
          
          if(data.moldInfo.length > 0){
            var isChange = this.reduces(data.moldInfo,this.infoData['partInfoData'],'excels');
            if(this.wfprocessid){
              if(isChange&&isChange.length) return this.$message.error("導入的數據與模板不符合，請從新上傳！");
            }
          }
          if(!this.isSupplier&&!this.isAdminFlag){//vivo用戶非管理員不寫入必填字段 
            this.vivoImportData(data.moldInfo);
          }
          this.$set(this.infoData,'partInfoData',data.moldInfo);
          if(!(data.errorPart&&data.errorPart.length))
            this.$message.success("導入成功");
        // loadMask.close();
        }else{
          this.$message({
            dangerouslyUseHTMLString:true,
            message: res.data.retMsg,
            type: 'error'
          });
          loadMask.close();
        }
      });
    },
    vivoImportData(data){
      var getRowsId=[],getRows =this.tablesData['columns'].filter(item=>item.vivoNotWrite);
      getRows.forEach(item =>getRowsId.push(item.id));
      return data.forEach(item=>{
        getRowsId.forEach(id=>{
          item[id]='';
        })
      })
    },
    exportTemplate(){
      var scope = this;
      var param = JSON.stringify(this.infoData['partInfoData']);
            //導出
      var url = "/Windchill/cmprest/uploadController/moldpart/export";
      var forms = "<form method='post' action='" + url + "'><input name='params' value='" + param +"' ></form>";
      $(forms).appendTo("body").submit().remove();
    },
    downloadTemplate(){
      // window.open("/Windchill/exporttemplate/模具信息收集上傳模板.xlsx");
      var scope = this;
      var param = "";
      var loadMask = this.$loading({
        spinner:"vo-mask",
        background:"rgba(204,204,204,.5)"
      });
      downExcelModel(param).then(res => {
        if(res.data.retCode == '000000'){
          loadMask.close();
          debugger
          var data = res.data.element;
          window.open(data);
        }else{
          loadMask.close();
          this.$message({
            dangerouslyUseHTMLString:true,
            message: res.data.retMsg,
            type: 'error'
          });
        }
      });
    },
    //json排序
    compare(property) {
      return function(a, b) {
        if (a[property] && b[property]) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
      };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //合併單元格
      let tableData = this.sortTables;
      //  let tableData  = this.objectValue[this.object.id]
      var num = 0;
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 5) {
        for (var i = 0; i < tableData.length; i++) {
          if (row.partNumber == tableData[i].partNumber) {
            //partNumberIndex
            num++;
          }
        }
        if (num == 1) {
          return {
            rowspan: num,
            colspan: 1
          };
        } else if (num > 1 && tableData && tableData[rowIndex].partNumber) {
          //partNumberIndex
          if (
            tableData[rowIndex - 1] &&
            tableData[rowIndex].partNumber == tableData[rowIndex - 1].partNumber //partNumberIndex
          ) {
            return {
              rowspan: 0,
              colspan: 0
            };
          } else {
            return {
              rowspan: num,
              colspan: 1
            };
          }
        }
      }
    },
    addMaterial(index) {
      //物料編碼 添加空行
      if(!this.infoData['partInfoData']) this.$set( this.infoData,'partInfoData',[]);
      this.infoData['partInfoData'].push({});
    },
    //刪除受影響對象行
    deleteMaterial(row, index, partNumber) {
      //partNumberIndex
      var tableData = this.infoData['partInfoData'];
            var scope = this;
      // this.$confirm("確認移除物料及相關聯供應商部件?", "提示", {
      //   confirmButtonText: "肯定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
          var result = [];
          if (partNumber) {
            //partNumberIndex
            result = tableData.filter(item => item.partNumber != partNumber); //partNumberIndex
          }else{
                        result = tableData.filter((item,num) => num != index);
                    }
          this.infoData['partInfoData'] =result;
          var addResult = result.filter(item => item.partNumber);
          // if (addResult &&addResult.length){
          //   this.merge(addResult);
          // }
          // else {
          //   this.geDocListFn("")
          // }
          
        // })
        // .catch(() => {});
    },
    //彈窗 搜索物料編碼
    dialogVisible(index, type) {
      this.mfnRadio = index;
      if(!this.tablesData.getOidPath) 
      this.transferData.SelectData.data = this.infoData['partInfoData'].filter(
        item => item.number
      );
      else this.transferData.SelectData.data = this.infoData['partInfoData'].filter(
        item => item.partNumber
      );

      this.dialogTableVisible = true;
      this.searchPartCode = "";
      this.transferData.notSelectData.data = [];
    },
    searchFn(){
      if (this.searchPartCode.length >= 4) {
        var param = { params: this.searchPartCode };
        var loadMask = this.$loading({
          spinner: "vo-mask",
          background: "rgba(204,204,204,.5)"
        });
        getCollectMaterialInfo(param,this.tablesData.getDataPath).then(res => {
          if (res.data.retCode == "000000") {
              var SelectData = this.transferData.SelectData['data'];
              var mfnArr = this.parseData(res);

              if(!mfnArr) mfnArr=[];
              mfnArr = this.reduces(mfnArr,SelectData);
              this.transferData.notSelectData['data'] = mfnArr;

              console.log(this.transferData.notSelectData, "搜索物料結果");
              loadMask.close();
            } else {
              loadMask.close();
              this.$message.error(res.data.retMsg);
            }

          // if (res.data.retCode == "000000") {
          //   var mfnArr = this.parseData(res);
          //   if (mfnArr && mfnArr.length > 0) {
          //     for (var i = 0; i < mfnArr.length; i++) {
          //       this.$set(
          //         mfnArr[i],
          //         "fullName",
          //         mfnArr[i].name + " (" + mfnArr[i].number + ")"
          //       );
          //     }
          //     cb(mfnArr);
          //   } else {
          //   }
          //   loadMask.close();
          // } else {
          //   loadMask.close();
          //   this.$message.error(res.data.retMsg);
          // }
        });
      }
    },
    //受影響對象直接搜索物料編碼
    materialCodeFn(queryString, cb) {
      if (queryString.length >= 5) {
        var param = { params: queryString };
        var loadMask = this.$loading({
          // lock: true,
          spinner: "vo-mask",
          background: "rgba(204,204,204,.5)"
        });
        getCollectMaterialInfo(param,this.tablesData.getDataPath).then(res => {
          if (res.data.retCode == "000000") {
            var mfnArr = this.parseData(res);
            if (mfnArr && mfnArr.length > 0) {
              for (var i = 0; i < mfnArr.length; i++) {
                this.$set(
                  mfnArr[i],
                  "fullName",
                  mfnArr[i].name + " (" + mfnArr[i].number + ")"
                );
              }
              cb(mfnArr);
            } else {
            }
            loadMask.close();
          } else {
            loadMask.close();
            this.$message.error(res.data.retMsg);
          }
        });
      }
    },
    //受影響對象搜索物料編碼 選中下拉值
    manufacturerSelect(item) {
      this.partNumber = item.number;
      this.mpnNumber = item.mpnNumber||null;
      this.poid = item.oid||null;
      this.confirmAddMaterialFn();
    },
    //受影響對象 確認添加
    confirmAddMaterialFn() {
      //物料搜索
      this.searchPartCode = this.partNumber; //
      if (this.poid) {
        var param = {params:this.poid};//{params:this.poid}
        var loadMask = this.$loading({
          // lock: true,
          spinner: "vo-mask",
          background: "rgba(204,204,204,.5)"
        });
          getPartInfoList(param).then(res => {
            //confirmAddMaterial
            if (res.data.retCode == "000000") {
              var SelectData = this.transferData.SelectData['data'];
              var mfnArr = this.parseData(res);

              if(!mfnArr) mfnArr=[];
              mfnArr = this.reduces(mfnArr,SelectData);
              this.transferData.notSelectData['data'] = mfnArr;

              console.log(this.transferData.notSelectData, "搜索物料結果");               loadMask.close();             } else {               loadMask.close();               this.$message.error(res.data.retMsg);             }           });       }else {         this.$message.warning("請選擇一個物料！");       }     },     reduces(arr,select,type){//去除已選擇的項       if(!arr) return;       let data = arr.reduce((pre,cur)=>{           if(type=='excels'){             if(select.every(item=>item.number!==cur.number)) pre.push(cur);           }else{             if(!this.tablesData.getOidPath){               if(select.every(item=>item.number!==cur.number)) pre.push(cur);             }             else{               if(select.every(item=>item.mpnNumber!==cur.mpnNumber)) pre.push(cur);             }           }           return pre;       },[]);       // console.log(arr,select,data);       return data;     },     //肯定添加行     confirmAddpartFn() {       var selectData = this.$refs.transferData.initialData;       var partInfoData = this.infoData['partInfoData'];             if(selectData && selectData.length){                 if(!this.tablesData.getOidPath) selectData = selectData.filter(item=>item.number);         else selectData = selectData.filter(item=>item.partNumber);             }             if(partInfoData && partInfoData.length){         if(!this.tablesData.getOidPath) partInfoData = partInfoData.filter(item=>item.number);         else partInfoData = partInfoData.filter(item=>item.partNumber);             }             if(selectData&&selectData.length&&selectData!=partInfoData){                 var addResult = this.$refs.transferData.initialData;                 this.infoData['partInfoData'] =addResult;                 // if (addResult &&addResult.length) this.merge(addResult);       }              // this.$set(this.busData,'poid',this.poid);             console.log(addResult, this.mfnRadio, "肯定添加-物料信息結果");             this.clearAdd();     },          //解析合併     merge(arr) {       const map = {};       for (const o of arr) {         const partNumber = o.partNumber;         if (!map.hasOwnProperty(partNumber)) {           map[partNumber] = [o.mpnNumber];         } else {           map[partNumber].push(o.mpnNumber);         }       }       return map;     },     //取消添加     clearAdd() {       this.$refs.transferData.initialData = null; //清除選中項       this.dialogTableVisible = false;     }   } }; </script>