【修改】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>

jero-web/src/views/demo/list/RoleList.vue

@@ -19,23 +19,24 @@
           </a-col>
           <a-col :md="8" :sm="24">
             <span class="table-page-search-submitButtons">
-              <a-button type="primary">查询</a-button>
+              <a-button type="primary" @click="searchQuery">查询</a-button>
-              <a-button style="margin-left: 8px">重置</a-button>
+              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
             </span>
           </a-col>
         </a-row>
       </a-form>
     </div>
 
-    <s-table
+    <j-table
-      ref="table"
+      ref="jTable"
       size="default"
       :columns="columns"
-      :data="loadData"
+      :isCheck="false"
+      :dataSource="dataSource"
     >
       <div
         slot="expandedRowRender"
-        slot-scope="record"
+        slot-scope="{record}"
         style="margin: 0">
         <a-row
           :gutter="24"
@@ -51,7 +52,7 @@
           </a-col>
         </a-row>
       </div>
-      <span slot="action" slot-scope="text, record">
+      <span slot="action" slot-scope="{text, record}">
         <a @click="$refs.modal.edit(record)">编辑</a>
         <a-divider type="vertical" />
         <a-dropdown>
@@ -71,7 +72,7 @@
           </a-menu>
         </a-dropdown>
       </span>
-    </s-table>
+    </j-table>
 
     <role-modal ref="modal" @ok="handleOk"></role-modal>
 
@@ -79,24 +80,23 @@
 </template>
 
 <script>
-  import STable from '@/components/table'
+  import JTable from '@/components/jero/JTable'
   import RoleModal from './modules/RoleModal'
+  import { getAction } from '@api/manage'
+  import { filterObj } from '@/utils/util'
 
   export default {
     name: "TableList",
     components: {
-      STable,
+      JTable,
       RoleModal
     },
     data () {
       return {
         description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
-
         visible: false,
-
         form: null,
         mdl: {},
-
         // 高级搜索 展开/关闭
         advanced: false,
         // 查询参数
@@ -104,42 +104,89 @@
         // 表头
         columns: [
           {
-            title: '唯一识别码',
+            dataIndex: 'id',
-            dataIndex: 'id'
+            slots: {
+              title: '唯一识别码',
+              fixedValue: 3
+            }
           },
           {
-            title: '角色名称',
             dataIndex: 'name',
+            slots: {
+              title: '角色名称',
+              fixedValue: 3
+            }
           },
           {
-            title: '状态',
+            dataIndex: 'status',
-            dataIndex: 'status'
+            slots: {
+              title: '状态',
+              fixedValue: 3
+            }
           },
           {
-            title: '创建时间',
             dataIndex: 'createTime',
-            sorter: true
+            sorter: true,
+            slots: {
+              title: '创建时间',
+              fixedValue: 3
+            }
           }, {
             title: '操作',
             width: '150px',
             dataIndex: 'action',
             scopedSlots: { customRender: 'action' },
+            slots: {
+              fixedValue: 2,
+            }
           }
         ],
-        // 加载数据方法 必须为 Promise 对象
+        dataSource:[],
-        loadData: parameter => {
+        url: {
-          return this.$http.get('/mock/api/role', {
+          list: "/mock/api/role",
-            params: Object.assign(parameter, this.queryParam)
-          }).then(res => {
-            return res.result
-          })
         },
-
-        selectedRowKeys: [],
-        selectedRows: []
       }
     },
+    mounted() {
+      this.loadData();
+    },
     methods: {
+      // 加载数据方法 必须为 Promise 对象
+      loadData(arg) {
+        if(!this.url.list){
+          this.$message.error("请设置url.list属性!")
+          return
+        }
+        // 加载数据 若传入参数1则加载第一页的内容
+        if (arg === 1) {
+          this.$refs.jTable.ispagination.current = 1;
+        }
+        //加载数据 若传入参数1则加载第一页的内容
+        var params = this.getQueryParams();//查询条件
+        this.loading = true;
+        getAction(this.url.list, params).then((res) => {
+
+            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+            this.dataSource = res.result.data||res.result;
+            if(res.result.total) {
+              this.$refs.jTable.ispagination.total = res.result.total;
+            }else{
+              this.$refs.jTable.ispagination.total = 0;
+            }
+            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+
+          if(res.status===510){
+            this.$message.warning(res.message)
+          }
+          this.loading = false;
+        })
+
+        // return this.$http.get('/mock/api/role', {
+        //   params: Object.assign(parameter, this.queryParam)
+        // }).then(res => {
+        //   return res.result
+        // })
+      },
       handleEdit (record) {
         this.mdl = Object.assign({}, record)
 
@@ -154,7 +201,7 @@
       },
       handleOk () {
         // 新增/修改 成功时，重载列表
-        this.$refs.table.refresh()
+        this.$refs.jTable.refresh()
       },
       onChange (selectedRowKeys, selectedRows) {
         this.selectedRowKeys = selectedRowKeys
@@ -163,20 +210,33 @@
       toggleAdvanced () {
         this.advanced = !this.advanced
       },
+      getQueryParams() {
+        //获取查询条件
+        let sqp = {}
+        if(this.superQueryParams){
+          sqp['superQueryParams']=encodeURI(this.superQueryParams)
+          sqp['superQueryMatchType'] = this.superQueryMatchType
+        }
+        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
+        param.field = this.getQueryField();
+        param.pageNo = this.$refs.jTable.ispagination.current;
+        param.pageSize = this.$refs.jTable.ispagination.pageSize;
+        return filterObj(param);
+      },
+      getQueryField() {
+        var str = "id,";
+        this.columns.forEach(function (value) {
+          str += "," + value.dataIndex;
+        });
+        return str;
+      },
+      searchQuery() {
+        this.loadData(1);
+      },
+      searchReset() {
+        this.queryParam = {}
+        this.loadData(1);
+      },
     },
-    watch: {
-      /*
-      'selectedRows': function (selectedRows) {
-        this.needTotalList = this.needTotalList.map(item => {
-          return {
-            ...item,
-            total: selectedRows.reduce( (sum, val) => {
-              return sum + val[item.dataIndex]
-            }, 0)
-          }
-        })
-      }
-      */
-    }
   }
 </script>