lilei hai 1 ano
pai
achega
c622adbd04
Modificáronse 1 ficheiros con 61 adicións e 63 borrados
  1. 61 63
      src/views/dealerManagement/rebateBinding/categoryList.vue

+ 61 - 63
src/views/dealerManagement/rebateBinding/categoryList.vue

@@ -2,18 +2,16 @@
   <div class="categoryList-wrap">
     <a-spin :spinning="spinning" tip="Loading...">
       <ve-table
-        v-show="!showEmpty"
         border-y
+        v-show="!showEmpty"
         :scroll-width="0"
-        :max-height="tableHeight"
         :row-style-option="{clickHighlight: true}"
         :cellSelectionOption="{enable: false}"
-        :virtual-scroll-option="{enable: true}"
+        :virtual-scroll-option="{enable: false}"
         :columns="columns"
         :table-data="list"
         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>
     </a-spin>
@@ -26,6 +24,38 @@ import { commonMixin } from '@/utils/mixin'
 import { VSelect } from '@/components'
 import { dealerUpsList, dealerUpsDelete } from '@/api/dealer'
 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 {
   name: 'DetailProductList',
   mixins: [commonMixin],
@@ -54,17 +84,10 @@ export default {
         // column resize min width
         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,
@@ -108,35 +131,22 @@ export default {
         )
       }
 
+      const expendFormat = function (record, data, h) {
+        return (
+          <span style="cursor:pointer;">展开</span>
+        )
+      }
+
       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
     }
   },
   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) {
       return data.filter(s => {
@@ -159,8 +169,8 @@ export default {
     // 组装数据
     formatData (listData, queryParam) {
       // 格式化数据
-      let ret = []
-      let no = 0
+      const ret = []
+      const no = 0
       for (let i = 0; i < listData.length; i++) {
         const item = listData[i]
         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) {
           rebateDealerList.push(headDealerList)
         }
-
         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].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
@@ -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{
       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>