【修改】Jtable融合原STabe的功能

jero-web/src/components/jero/JImageUpload.vue

@@ -106,7 +106,6 @@
     },
     methods:{
       initFileList(paths){
-        debugger
         if(!paths || paths.length === 0){
           this.fileList = [];
           return;

jero-web/src/components/jero/JTable.vue

@@ -1,15 +1,32 @@
 <template>
   <div>
+    <div class="alert" v-if="showAlertInfo">
+      <a-alert type="info" :show-icon="true">
+        <div slot="message">
+          已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
+          <template v-for="(item, index) in needTotalList" v-if="item.needTotal">
+            {{ item.slot.title }} 总计&nbsp;
+            <a :key="index" style="font-weight: 600">
+              {{ item.customRender ? item.customRender(item.total) : item.total }}
+            </a>&nbsp;&nbsp;
+          </template>
+          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+        </div>
+      </a-alert>
+    </div>
+
     <a-table
+      :rowKey="record => record.id"
       :columns="curTableColumns"
       :dataSource="dataSource"
       :pagination="ispagination"
       :rowSelection="rowSelect"
-      v-bind="$props"
+      v-bind="$attrs"
       v-on="$listeners">
 
-      <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
-        <slot :name="slotItem" v-bind="{text, record, index}"></slot>
+      <!--处理表格的插槽-->
+      <template v-for="(slotItem) of scopedSlotsKeys" :slot="slotItem" slot-scope="record, index, indent, expanded">
+        <slot :name="slotItem" v-bind="{record, index, indent, expanded}"></slot>
       </template>
 
       <span :slot="a.slots.title" v-for="a in curTableColumns" :key="a.dataIndex">
@@ -48,12 +65,24 @@
 </template>
 
 <script>
-import { Table } from 'ant-design-vue'
+import get from 'lodash.get'
 
 export default {
   name: 'JTable',
   props: {
-    ...Table.props,
+    // 接收列
+    columns: {
+      default: []
+    },
+    // 接收数据
+    dataSource: {
+      default: []
+    },
+    // 是否显示统计弹窗，默认不显示
+    showAlertInfo: {
+      type: Boolean,
+      default: false
+    },
     isShowPage: {
       type: Boolean,
       default() {
@@ -86,7 +115,7 @@ export default {
         return {
           current: 1,
           pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
+          pageSizeOptions: ['10', '30', '50'],
           showQuickJumper: true,
           showSizeChanger: true,
           total: 0,
@@ -99,6 +128,12 @@ export default {
   },
   data() {
     return {
+      // 内部使用的 slots ，不再处理
+      usedSlots: [],
+
+      needTotalList: [],
+      selectedRows: [],
+      selectedRowKeys: [],
       curTableColumns: this.columns,
       checkedList: [],
       plainOptions: [],
@@ -139,7 +174,11 @@ export default {
         }
       }
       return slots
-    }
+    },
+    scopedSlotsKeys() {
+      debugger
+      return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
+    },
   },
   mounted() {
     // 遍历出筛选列头的所有选项
@@ -163,6 +202,9 @@ export default {
       this.checkedList.push(item.slots.title)
     })
   },
+  created() {
+    this.needTotalList = this.initTotalList(this.columns)
+  },
   methods: {
     // 用户可自行筛选列头显示的字段
     onChange(e) {
@@ -295,6 +337,36 @@ export default {
       // 解构赋值,重新定义列头List
       this.curTableColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
     },
+    onClearSelected () {
+      this.selectedRowKeys = []
+      this.selectedRows = []
+      this.updateSelect([], [])
+      this.$emit('clearAll')
+    },
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      let list = this.needTotalList
+      this.needTotalList = list.map(item => {
+        return {
+          ...item,
+          total: selectedRows.reduce((sum, val) => {
+            let total = sum + get(val, item.dataIndex)
+            return isNaN(total) ? 0 : total
+          }, 0)
+        }
+      })
+    },
+    initTotalList(columns) {
+      const totalList = []
+      columns && columns instanceof Array && columns.forEach(column => {
+        if (column.needTotal) {
+          totalList.push({ ...column,
+            total: 0
+          })
+        }
+      })
+      return totalList
+    },
   },
 }
 </script>