<el-row ref="tableList">
<vxe-grid ref="xGrid" id="dataTable" :print-config="{}" :import-config="{}" :export-config="{}"
:toolbar-config="formDisable?null:tableToolbar" :columns="tableColumn" :data="tableData" :height="tableHeight"
:loading="loading" :seq-config="{startIndex:0}" @toolbar-button-click="toolbarButtonClickEvent"
:cell-class-name="cellClassName">
<template #goodsName_show="{ row }">
<table width="100%">
<tr>
<td width="80%">{{row.goodsNameCn}}</td>
<td width="20%" rowspan="2">
<i @click="findGood(row)" class="fa fa-search-plus col-geekblue fr fa-lg"></i>
</td>
</tr>
<tr>
<td>{{row.goodsNameEn}}</td>
</tr>
</table>
</template>
</vxe-grid>
</el-row>
<el-row class='editpage-footer-button' v-if="!formDisable">
<div class="show-item">
<el-button type="primary" @click="handleAddInquiry">
<i class="fa fa-plus"></i>
添加待詢價
</el-button>
<el-select v-model="supplierCode" placeholder="請選擇供應商" clearable style="width: 120px;margin-left:15px;"
@change="selectSupplier">
<el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item">
<span class="fl">{{ item.value }}</span>
<span class="fr">{{ item.label }}</span>
</el-option>
</el-select>
<el-input style="width:120px;" v-model="supplierName" placeholder="選擇供應商自動帶出" :disabled="true" clearable />
</div>
</el-row>
<vxe-grid :tree-config="tableTreeConfig" @current-change="currentChange" :row-config="{isCurrent: true, isHover: true}" resizable ref="xGrid1" :data="targetTableData" :height="targetTableHeight" :columns="targetTableColumn" :edit-config="{ trigger: 'click', enabled: !this.formDisable, mode: 'row', showStatus: true, }"> <template #goodsName_show="{ row }"> <table width="100%"> <tr> <td width="80%">{{row.goodsNameCn}}</td> </tr> <tr> <td>{{row.goodsNameEn}}</td> </tr> </table> </template> <template #remark_edit="{ row }"> <vxe-input v-model="row.remark"></vxe-input> </template> </vxe-grid>
<script> export default { name: "aa", data() { return {
supplierList: [],
formDisable: false,
tableHeight: 300, // 表格高度
loading: false,
tableData: [],
tableToolbar: {
buttons: [
{
code: "myInsert",
name: "添加商品",
icon: "fa fa-plus",
status: "primary"
},
{
code: "myDel",
name: "刪除",
icon: "fa fa-trash"
},
{
code: "import",
name: "導入",
icon: "fa fa-upload"
},
{
code: "translate",
name: "拆行",
icon: "fa fa-arrow-circle-o-right"
}
]
},
tableColumn: [
{
type: "checkbox",
width: 30,
align: "center"
},
{
type: "seq",
title: "序號",
showOverflow: true,
width: 40,
align: "center"
},
{
field: "goodsCode",
title: "商品編碼",
showOverflow: true,
width: 100,
align: "center",
sortable: true
},
{
field: "",
title: "商品名",
showOverflow: true,
width: 200,
slots: { default: "goodsName_show" }
},
{
field: "specification",
title: "規格",
showOverflow: true,
width: 80,
sortable: true
},
{
field: "unit",
title: "單位",
showOverflow: true,
width: 80,
align: "center"
},
{
field: "count",
title: "數量",
showOverflow: true,
width: 80,
align: "right",
sortable: true
},
{
field: "stockCount",
title: "庫存數量",
showOverflow: true,
width: 80,
align: "right"
},
{
field: "stockMachine",
title: "庫存價格",
showOverflow: true,
width: 80,
align: "right",
formatter: "myCount"
},
{
field: "noticePrice",
title: "賬本價格",
showOverflow: true,
width: 80,
align: "right",
formatter: "myCount"
},
{
field: "unitPrice",
title: "單價",
showOverflow: true,
width: 80,
align: "right",
sortable: true
},
{
field: "amount",
title: "金額",
showOverflow: true,
width: 80,
align: "right",
sortable: true
},
{
field: "privder",
title: "默認供應商",
showOverflow: true,
width: 100,
align: "center",
cellRender: {
name: "VXETabelCellLink",
events: { click: this.defaultLinkEvent }
}
},
{
field: "referenceUnit",
title: "參考單價",
showOverflow: true,
width: 80,
align: "right"
},
{
field: "remark",
title: "備注",
showOverflow: true,
width: 180
}
],
targetTableHeight: 300, // 表格高度
targetTableData: [],
targetTableColumn: [
{
type: "checkbox",
showOverflow: true,
width: 40,
align: "center"
},
{
field: "supplierName",
title: "供應商",
showOverflow: true,
width: 120,
align: "center"
},
{
field: "goodsCode",
title: "商品編碼",
showOverflow: true,
width: 100,
align: "center",
sortable: true
},
{
field: "goodsName",
title: "商品名",
showOverflow: true,
width: 150,
slots: { default: "goodsName_show" }
},
{
field: "spesc",
title: "規格",
showOverflow: true,
width: 80,
sortable: true
},
{
field: "unit",
title: "單位",
showOverflow: true,
width: 80
},
{
field: "count",
title: "數量",
showOverflow: true,
width: 80,
align: "right",
sortable: true
},
{
field: "remark",
title: "詢價備注",
showOverflow: true,
width: 140,
editRender: { autofocus: ".vxe-input--inner" },
slots: { edit: "remark_edit" }
}
],
tableTreeConfig: {
children: "children",
accordion: false, // 一層只允許展開一個節點
expandAll: true, // 默認是否全部展開
},
supplierCode: null,
supplierName: null,
};
},
created() {
// 供應商
this.getsupplierList();
this.loadData();
},
methods: {
// 供應商列表
getsupplierList() {
this.request({
url: "/common/supplierSelect",
method: "get",
data: {}
}).then((res) => {
this.supplierList = res.data;
console.log(res);
});
},
// 供應商選擇
selectSupplier(e) {
this.supplierCode = e.value;
this.supplierName = e.label;
},
loadData() {
this.request({
url: "/inquiry/inquiryAddGoodsListShow",
method: "post",
data: {}
}).then((res) => {
this.tableData = res.data;
});
},
// 數組去重 dedupe(array) { return Array.from(new Set(array)); }, // 添加待詢價 handleAddInquiry() { let that = this; const $grid = that.$refs.xGrid; const rows = $grid.getCheckboxRecords(); if (rows.length == 0) { that.commonMessage.message("E000027", "待詢價商品"); return; } else if (that.supplierCode == null || that.supplierCode == "") { that.commonMessage.message("E000027", "供應商"); } else { let flag = true; rows.forEach((item, index) => { if (item.isUseStorage) { that.commonMessage.message("E000029", item.goodsCode + "使用庫存"); flag = false; } else if (item.isUseBookPrice) { that.commonMessage.message("E000029", item.goodsCode + "賬本價格"); flag = false; } }); if (flag) { let obj = { supplierCode: that.supplierCode, supplierName: that.supplierName, children: rows }; if (that.targetTableData.length == 0) { that.targetTableData.push(obj); } else { let targetTableData = that.targetTableData; // 存在同名的組 if ( targetTableData.find((item) => { return item.supplierCode == obj.supplierCode; }) ) { targetTableData.forEach((val, idx) => { if (val.supplierCode == obj.supplierCode) { let childrenData = targetTableData[idx].children; let contactData = childrenData.concat(rows); let newData = that.dedupe(contactData); that.targetTableData[idx].children = newData; } }); } else { // 不存在同名的組 that.targetTableData.push(obj); this.$refs["xGrid1"].setTreeExpand(obj, true); // vxe的樹首次加載會展開，重新push值不會展開，這是需要加入展開這一行的代碼 console.log(that.targetTableData); } } } } },
} }; </script>