span-method

<template>

<div :class="['table-panel-group','table-min-space','conllect-tables','partInfoBox',typeName+'Box']">

<!-- cap-table-style -->

<div class="table-panel-title">

<span class="table-panel-tit">{{tablesData.tableTitle}}</span>

</div>

<div class="table-panel-containner">

<el-table

ref="singleTable"

:data="infoData['partInfoData']"

border

fit

width="100%"

class="notHoverBg"

: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">*</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">

{{scope.row[col.id]}}

</a>

<i class="el-icon-close"

v-show="!wfprocessid"

@click="deleteMaterial(scope.row,scope.$index,scope.row[col.id])"></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==''">

<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>

 

<el-dialog

:title="tablesData.popUpTitle"

:visible.sync="dialogTableVisible"

width="960px"

top="100px"

class="collectionDialog"

:close-on-click-modal="false"

>

<div>

<el-row class="componentSelection">

<el-col :span="24">

<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,

// getApproveRecord

} from "@/api/api";

export default {

data() {

return {

searchPartCode: "", //搜索框值

dialogTableVisible: false,

loadingTable: false,

partSelect:[],

pboid:this.$route.query.pboid,

columns:[],

typeName:this.$route.query.typeName,

// 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,

},

components: {

transfer

},

computed: {

sortTables() {

// addZeroDisable

if (this.infoData['partInfoData'] && this.infoData['partInfoData'].length) {

let _tableData = this.infoData['partInfoData'];

//當前表單

return _tableData.sort(this.compare("partNumber","mpnNumber")); //partNumberIndex

} else {

return null;

}

},

edit(){

  return this.$store.state.edit

}

},

created() {

if (!this.pboid||!this.$route.query.tempValue) {

  this.addMaterial(0);

}

let tablesData = require('@/scene/'+this.$route.query.typeName+'/config/tablePartInfo.js');

this.tablesData = tablesData;

if(this.typeName=='InfoCollection') this.tablesData.thConfig['width'] = "480px";

// this.columns = tablesData.columns;

this.toFixed = tablesData.toFixed || null;

},

watch:{

'infoData.partInfoData'(val){

if(!val || !val.length) {

this.addMaterial(0);

}

},

},

methods: {

singleTable(row,rowIndex){

var headerClassName = "part-tableHeader";

return headerClassName

},

//json排序

compare(partNumber,mpnNumber) {

return function(a, b) {

if (a[partNumber] && b[partNumber]) {

if(a[partNumber]==b[partNumber]){

return a[mpnNumber].localeCompare(b[mpnNumber]);

}

return a[partNumber] - b[partNumber];

}

};

},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

//合併單元格

let tableData = this.sortTables;

// let tableData = this.infoData['partInfoData']

var num = 0,index = 0;

if (columnIndex == 0 || columnIndex == 1 || columnIndex == 5) {

for (var i = 0; i < tableData.length; i++) {

if (row.partNumber == tableData[i].partNumber) {

num++;

}

}

return this.isMergeFn(tableData,rowIndex,num,'partNumber');

}

if (columnIndex == 2 || columnIndex == 3) {

for (var i = 0; i < tableData.length; i++) {

if (row.partNumber == tableData[i].partNumber && row.mpnNumber == tableData[i].mpnNumber) {

index++;

}

}

return this.isMergeFn(tableData,rowIndex,index,'mpnNumber')

}

},

 

// 是否合併單元格

isMergeFn(tableData,rowIndex,num,type){

if (num == 1) {

return {

rowspan: num,

colspan: 1

};

} else if (num > 1 && tableData && tableData[rowIndex][type]) {

if (

tableData[rowIndex - 1] &&

tableData[rowIndex][type] == tableData[rowIndex - 1][type] &&

tableData[rowIndex]['partNumber'] == tableData[rowIndex - 1]['partNumber']

) {

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;

this.transferData.SelectData.data = this.infoData['partInfoData'].filter(

item => item.partNumber

);

 

this.dialogTableVisible = true;

this.searchPartCode = "";

this.transferData.notSelectData.data = [];

},

//受影響對象直接搜索物料編碼

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;

this.poid = item.oid;

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;

loadMask.close();

} else {

loadMask.close();

this.$message.error(res.data.retMsg);

}

});

}else {

this.$message.warning("請選擇一個物料！");

}

},

reduces(arr,select){//去除已選擇的項

if(!arr) return;

let data = arr.reduce((pre,cur)=>{

if(select.every(item=>item.mpnNumber!==cur.mpnNumber)){

pre.push(cur)

}

return pre;

},[]);

return data;

},

//肯定添加行

confirmAddpartFn() {

      var selectData = this.$refs.transferData.initialData;

      var partInfoData = this.infoData['partInfoData'];

      if(selectData && selectData.length){

        selectData = selectData.filter(item=>item.partNumber);

      }

      if(partInfoData && partInfoData.length){

        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);

      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);

// }

// }

// this.materialCode = map;

// // this.geDocListFn(map);

// },

// geDocListFn(map){

// var param=map;

// if(!param) return this.$set(this.busData,'docList',[]);

    //   var loadMask = this.$loading({

    //    spinner: "vo-mask",

    //    background: "rgba(204,204,204,.5)"

// });

    //   getPartInfoData(param).then(res=>{

    //    if (res.data.retCode == "000000") {

// var result = this.parseData(res);

// this.$set(this.busData,'docList',result);//設置文檔信息顯示列表

    //      loadMask.close();

    //    } else {

    //      loadMask.close();

    //      this.$message.error(res.data.retMsg);

    //    }

    //  })

// },

//取消添加

clearAdd() {

this.$refs.transferData.initialData = null; //清除選中項

this.dialogTableVisible = false;

}

}

};

</script>

<style scoped lang="less">

@import url('../../../assets/css/collection.less');

</style>

<style lang="less">

.InfoCollectionBox{

.maginL20 {

width:380px !important;

}

.formerror{

border-radius:0;

}

}

.partSearch-dropdown{

width:480px !important;

.el-scrollbar__wrap{

margin-bottom:0 !important;

}

.manufacturer-name{

overflow: hidden;

text-overflow: ellipsis;

}

}

</style>