|
@@ -2,18 +2,16 @@
|
|
<div class="categoryList-wrap">
|
|
<div class="categoryList-wrap">
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
<ve-table
|
|
<ve-table
|
|
- v-show="!showEmpty"
|
|
|
|
border-y
|
|
border-y
|
|
|
|
+ v-show="!showEmpty"
|
|
:scroll-width="0"
|
|
:scroll-width="0"
|
|
- :max-height="tableHeight"
|
|
|
|
:row-style-option="{clickHighlight: true}"
|
|
:row-style-option="{clickHighlight: true}"
|
|
:cellSelectionOption="{enable: false}"
|
|
:cellSelectionOption="{enable: false}"
|
|
- :virtual-scroll-option="{enable: true}"
|
|
|
|
|
|
+ :virtual-scroll-option="{enable: false}"
|
|
:columns="columns"
|
|
:columns="columns"
|
|
:table-data="list"
|
|
:table-data="list"
|
|
row-key-field-name="id"
|
|
row-key-field-name="id"
|
|
- :cell-span-option="cellSpanOption"
|
|
|
|
- :cell-style-option="cellStyleOption"
|
|
|
|
|
|
+ :expand-option="expandOption"
|
|
/>
|
|
/>
|
|
<div v-show="showEmpty" class="empty-data" :style="{height:maxHeight+'px'}"><a-empty description="暂无数据" :image="simpleImage"/></div>
|
|
<div v-show="showEmpty" class="empty-data" :style="{height:maxHeight+'px'}"><a-empty description="暂无数据" :image="simpleImage"/></div>
|
|
</a-spin>
|
|
</a-spin>
|
|
@@ -26,6 +24,38 @@ import { commonMixin } from '@/utils/mixin'
|
|
import { VSelect } from '@/components'
|
|
import { VSelect } from '@/components'
|
|
import { dealerUpsList, dealerUpsDelete } from '@/api/dealer'
|
|
import { dealerUpsList, dealerUpsDelete } from '@/api/dealer'
|
|
import { Empty } from 'ant-design-vue'
|
|
import { Empty } from 'ant-design-vue'
|
|
|
|
+// 子表格
|
|
|
|
+const ChildTableComp = {
|
|
|
|
+ name: 'ChildTableComp',
|
|
|
|
+ template: `
|
|
|
|
+ <div class="child-table-comp">
|
|
|
|
+ <ve-table
|
|
|
|
+ :row-style-option="{clickHighlight: true, stripe: true}"
|
|
|
|
+ :cellSelectionOption="{enable: false}"
|
|
|
|
+ :scroll-width="0"
|
|
|
|
+ :max-height="row.childData.length*30>300?300:row.childData.length*30"
|
|
|
|
+ row-key-field-name="id"
|
|
|
|
+ :virtual-scroll-option="{enable: true}"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :table-data="row.childData"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ `,
|
|
|
|
+ props: {
|
|
|
|
+ row: Object
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ columns: [
|
|
|
|
+ { title: '序号', field: 'no', key: 'a', width: 40, align: 'center', operationColumn: false },
|
|
|
|
+ { title: '品牌', field: 'productBrandName', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
+ { title: '一级分类', field: 'productTypeName1', key: 'e', width: 180, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
+ { title: '二级分类', field: 'productTypeName2', width: 180, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
+ { title: '三级分类', field: 'productTypeName3', width: 180, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
export default {
|
|
export default {
|
|
name: 'DetailProductList',
|
|
name: 'DetailProductList',
|
|
mixins: [commonMixin],
|
|
mixins: [commonMixin],
|
|
@@ -54,17 +84,10 @@ export default {
|
|
// column resize min width
|
|
// column resize min width
|
|
minWidth: 50
|
|
minWidth: 50
|
|
},
|
|
},
|
|
- cellSpanOption: {
|
|
|
|
- bodyCellSpan: this.bodyCellSpan
|
|
|
|
- },
|
|
|
|
- cellStyleOption: {
|
|
|
|
- bodyCellClass: ({ row, column, rowIndex }) => {
|
|
|
|
- if (column.field === 'superDealerName') {
|
|
|
|
- return 'table-body-cell-1'
|
|
|
|
- }
|
|
|
|
- if (column.field === 'productTypeName3') {
|
|
|
|
- return 'table-body-cell-2'
|
|
|
|
- }
|
|
|
|
|
|
+ expandOption: {
|
|
|
|
+ defaultExpandAllRows: false,
|
|
|
|
+ render: ({ row, column, rowIndex }, h) => {
|
|
|
|
+ return <ChildTableComp row={row} />
|
|
}
|
|
}
|
|
},
|
|
},
|
|
showEmpty: true,
|
|
showEmpty: true,
|
|
@@ -108,35 +131,22 @@ export default {
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ const expendFormat = function (record, data, h) {
|
|
|
|
+ return (
|
|
|
|
+ <span style="cursor:pointer;">展开</span>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+
|
|
const arr = [
|
|
const arr = [
|
|
- { title: '序号', field: 'no', key: 'a', width: 50, align: 'center', operationColumn: false },
|
|
|
|
- { title: '品牌', field: 'productBrandName', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
- { title: '一级分类', field: 'productTypeName1', key: 'e', width: 180, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
- { title: '二级分类', field: 'productTypeName2', width: 180, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
- { title: '三级分类', field: 'productTypeName3', width: 180, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
- { title: '上级经销商', field: 'superDealerName', width: 180, key: 'h', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
- { title: '差价归属方', field: 'rebateDealerList', width: 180, key: 'k', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return jcgsFormat(row, row[column.field], h) } },
|
|
|
|
- { title: '操作', field: 'action', width: 100, key: 's', align: 'center', fixed: 'right', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return actionFormat(row, row[column.field], h) } }
|
|
|
|
|
|
+ { field: '', key: 'x', type: 'expand', title: '品类', width: '5%', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return expendFormat(row, row[column.field], h) } },
|
|
|
|
+ { title: '上级经销商', field: 'superDealerName', width: '20%', key: 'h', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
|
|
|
|
+ { title: '差价归属方', field: 'rebateDealerList', width: '65%', key: 'k', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return jcgsFormat(row, row[column.field], h) } },
|
|
|
|
+ { title: '操作', field: 'action', width: '10%', key: 's', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return actionFormat(row, row[column.field], h) } }
|
|
]
|
|
]
|
|
return arr
|
|
return arr
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- bodyCellSpan ({ row, column, rowIndex }) {
|
|
|
|
- if (column.field === 'superDealerName' || column.field === 'rebateDealerList' || column.field === 'action') {
|
|
|
|
- if (row.rowspan) {
|
|
|
|
- return {
|
|
|
|
- rowspan: row.rowspan,
|
|
|
|
- colspan: 1
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- return {
|
|
|
|
- rowspan: 0,
|
|
|
|
- colspan: 0
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
// 筛选数据
|
|
// 筛选数据
|
|
filterData (data, queryParam) {
|
|
filterData (data, queryParam) {
|
|
return data.filter(s => {
|
|
return data.filter(s => {
|
|
@@ -159,8 +169,8 @@ export default {
|
|
// 组装数据
|
|
// 组装数据
|
|
formatData (listData, queryParam) {
|
|
formatData (listData, queryParam) {
|
|
// 格式化数据
|
|
// 格式化数据
|
|
- let ret = []
|
|
|
|
- let no = 0
|
|
|
|
|
|
+ const ret = []
|
|
|
|
+ const no = 0
|
|
for (let i = 0; i < listData.length; i++) {
|
|
for (let i = 0; i < listData.length; i++) {
|
|
const item = listData[i]
|
|
const item = listData[i]
|
|
const rebateScopeList = item.rebateScopeList ? this.filterData(item.rebateScopeList, queryParam) : [{ productBrandName: null, productTypeName1: null, productTypeName2: null, productTypeName3: null }]
|
|
const rebateScopeList = item.rebateScopeList ? this.filterData(item.rebateScopeList, queryParam) : [{ productBrandName: null, productTypeName1: null, productTypeName2: null, productTypeName3: null }]
|
|
@@ -179,24 +189,18 @@ export default {
|
|
if (headDealerList) {
|
|
if (headDealerList) {
|
|
rebateDealerList.push(headDealerList)
|
|
rebateDealerList.push(headDealerList)
|
|
}
|
|
}
|
|
-
|
|
|
|
for (let j = 0; j < rebateScopeList.length; j++) {
|
|
for (let j = 0; j < rebateScopeList.length; j++) {
|
|
- rebateScopeList[j].no = no + j + 1
|
|
|
|
- if (j == 0) {
|
|
|
|
- rebateScopeList[j].rowspan = rebateScopeList.length
|
|
|
|
- rebateScopeList[j].rebateDealerList = rebateDealerList
|
|
|
|
- }
|
|
|
|
|
|
+ rebateScopeList[j].no = j + 1
|
|
rebateScopeList[j].dealerUpsSn = item.dealerUpsSn
|
|
rebateScopeList[j].dealerUpsSn = item.dealerUpsSn
|
|
rebateScopeList[j].dealerSn = item.dealerSn
|
|
rebateScopeList[j].dealerSn = item.dealerSn
|
|
-
|
|
|
|
- if (supDealerList) {
|
|
|
|
- rebateScopeList[j].supDealerList = supDealerList
|
|
|
|
- rebateScopeList[j].superDealerName = supDealerList.parentDealer.dealerName
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
- no = no + rebateScopeList.length
|
|
|
|
- ret = ret.concat(rebateScopeList)
|
|
|
|
|
|
+ ret.push({
|
|
|
|
+ no: i + 1,
|
|
|
|
+ id: item.id,
|
|
|
|
+ superDealerName: supDealerList.parentDealer.dealerName,
|
|
|
|
+ rebateDealerList: rebateDealerList,
|
|
|
|
+ childData: rebateScopeList
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
|
|
return ret
|
|
return ret
|
|
@@ -268,13 +272,7 @@ export default {
|
|
.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.table-body-cell-no{
|
|
.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.table-body-cell-no{
|
|
padding: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
- .ve-table .ve-table-container .ve-table-content-wrapper{
|
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
|
|
|
+ .child-table-comp{
|
|
|
|
+ padding: 10px;
|
|
}
|
|
}
|
|
- .table-body-cell-1 {
|
|
|
|
- border-left: 1px solid #ddd !important;
|
|
|
|
- }
|
|
|
|
- .table-body-cell-2 {
|
|
|
|
- border-right: none !important;
|
|
|
|
- }
|
|
|
|
</style>
|
|
</style>
|