Browse Source

表格多选bug修复

chenrui 3 years ago
parent
commit
3e186ba4e0
2 changed files with 128 additions and 117 deletions
  1. 53 15
      src/components/Table/index.js
  2. 75 102
      src/views/numsGoodsShelves/shelfMonitoring/list.vue

+ 53 - 15
src/components/Table/index.js

@@ -17,6 +17,10 @@ export default {
       type: [String, Function],
       type: [String, Function],
       default: 'key'
       default: 'key'
     },
     },
+    rowKeyName: {
+      type: String,
+      default: 'id'
+    },
     rowClassName: {
     rowClassName: {
       type: [String, Function],
       type: [String, Function],
       default: ''
       default: ''
@@ -55,11 +59,6 @@ export default {
       type: Object,
       type: Object,
       default: null
       default: null
     },
     },
-    /** @Deprecated */
-    showAlertInfo: {
-      type: Boolean,
-      default: false
-    },
     showPagination: {
     showPagination: {
       type: String | Boolean,
       type: String | Boolean,
       default: 'auto'
       default: 'auto'
@@ -123,7 +122,7 @@ export default {
     this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
     this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
       current: localPageNum,
       current: localPageNum,
       pageSize: this.pageSize,
       pageSize: this.pageSize,
-      pageSizeOptions:['5','10', '20', '30', '40'],
+      pageSizeOptions: ['5', '10', '20', '30', '40'],
       showTotal: total => `共 ${total} 条记录`,
       showTotal: total => `共 ${total} 条记录`,
       showSizeChanger: this.showSizeChanger
       showSizeChanger: this.showSizeChanger
     }) || false
     }) || false
@@ -231,18 +230,55 @@ export default {
      * @param selectedRows
      * @param selectedRows
      */
      */
     updateSelect (selectedRowKeys, selectedRows) {
     updateSelect (selectedRowKeys, selectedRows) {
-      this.selectedRows = selectedRows
-      this.selectedRowKeys = selectedRowKeys
       const list = this.needTotalList
       const list = this.needTotalList
       this.needTotalList = list.map(item => {
       this.needTotalList = list.map(item => {
         return {
         return {
           ...item,
           ...item,
-          total: selectedRows.reduce((sum, val) => {
+          total: this.selectedRows.reduce((sum, val) => {
             const total = sum + parseInt(get(val, item.dataIndex))
             const total = sum + parseInt(get(val, item.dataIndex))
             return isNaN(total) ? 0 : total
             return isNaN(total) ? 0 : total
           }, 0)
           }, 0)
         }
         }
       })
       })
+      const obj = {
+        selectedRowKeys: this.selectedRowKeys,
+        selectedRows: this.selectedRows
+      }
+      this.$emit('rowSelection', obj)
+    },
+    onSelectChange (record, selected, selectedRows, nativeEvent) {
+      if (selected) { //  选择
+        this.selectedRows.push(record)
+      } else { //  取消
+        const selectedRowsArr = []
+        this.selectedRows.map(item => {
+          if (this.selectedRowKeys.indexOf(item[this.rowKeyName]) != -1) {
+            selectedRowsArr.push(item)
+          }
+        })
+        this.selectedRows = selectedRowsArr
+      }
+      this.updateSelect()
+    },
+    // 本页全选/取消全选
+    onSelectAllChange (selected, selectedRows, changeRows) {
+      const _this = this
+      if (selected) { //  选择
+        this.selectedRows = [...this.selectedRows, ...changeRows]
+      } else { //  取消
+        const arrId = []
+        this.selectedRows.map((item, index) => {
+          this.selectedRows.map((subItem, ind) => {
+            if (item[this.rowKeyName] == subItem[this.rowKeyName]) {
+              arrId.push(index)
+            }
+          })
+        })
+        arrId.map((item, index) => {
+          _this.selectedRows = _this.selectedRows.slice(item, item + 1)
+        })
+      }
+      this.updateSelect()
     },
     },
     /**
     /**
      * 清空 table 已选中项
      * 清空 table 已选中项
@@ -299,7 +335,6 @@ export default {
     const props = {}
     const props = {}
     const localKeys = Object.keys(this.$data)
     const localKeys = Object.keys(this.$data)
     const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
     const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
-
     Object.keys(T.props).forEach(k => {
     Object.keys(T.props).forEach(k => {
       const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
       const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
       if (localKeys.includes(localKey)) {
       if (localKeys.includes(localKey)) {
@@ -307,16 +342,19 @@ export default {
         return props[k]
         return props[k]
       }
       }
       if (k === 'rowSelection') {
       if (k === 'rowSelection') {
-        if (showAlert && this.rowSelection) {
+        if (this.rowSelection) {
           // 如果需要使用alert,则重新绑定 rowSelection 事件
           // 如果需要使用alert,则重新绑定 rowSelection 事件
-          // console.log('this.rowSelection', this.rowSelection)
           props[k] = {
           props[k] = {
             ...this.rowSelection,
             ...this.rowSelection,
-            selectedRows: this.selectedRows,
             selectedRowKeys: this.selectedRowKeys,
             selectedRowKeys: this.selectedRowKeys,
             onChange: (selectedRowKeys, selectedRows) => {
             onChange: (selectedRowKeys, selectedRows) => {
-              this.updateSelect(selectedRowKeys, selectedRows)
-              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+              this.selectedRowKeys = selectedRowKeys
+            },
+            onSelect: (record, selected, selectedRows, nativeEvent) => {
+              this.onSelectChange(record, selected, selectedRows, nativeEvent)
+            },
+            onSelectAll: (selected, selectedRows, changeRows) => {
+              this.onSelectAllChange(selected, selectedRows, changeRows)
             }
             }
           }
           }
           return props[k]
           return props[k]

+ 75 - 102
src/views/numsGoodsShelves/shelfMonitoring/list.vue

@@ -16,7 +16,7 @@
           <a-row :gutter="15">
           <a-row :gutter="15">
             <a-col :md="6" :sm="24">
             <a-col :md="6" :sm="24">
               <a-form-model-item label="货架名称" prop="hjName">
               <a-form-model-item label="货架名称" prop="hjName">
-                <a-select
+                <!-- <a-select
                   placeholder="请选择货架名称"
                   placeholder="请选择货架名称"
                   allowClear
                   allowClear
                   id="shelfMonitoringList-hjName"
                   id="shelfMonitoringList-hjName"
@@ -25,7 +25,14 @@
                   option-filter-prop="children"
                   option-filter-prop="children"
                   :filter-option="filterOption">
                   :filter-option="filterOption">
                   <a-select-option v-for="item in hjNameData" :key="item.sn" :value="item.sn">{{ item.name }}</a-select-option>
                   <a-select-option v-for="item in hjNameData" :key="item.sn" :value="item.sn">{{ item.name }}</a-select-option>
-                </a-select>
+                </a-select> -->
+                <v-select
+                  v-model="queryParam.hjName"
+                  ref="settleState"
+                  id="shelfMonitoringList-settleState"
+                  code="FINANCIAL_PAY_STATUS"
+                  placeholder="请选择货位产品状态"
+                  allowClear></v-select>
               </a-form-model-item>
               </a-form-model-item>
             </a-col>
             </a-col>
             <a-col :md="6" :sm="24">
             <a-col :md="6" :sm="24">
@@ -67,37 +74,45 @@
           </a-row>
           </a-row>
         </a-form-model>
         </a-form-model>
       </div>
       </div>
-      <div style="margin-bottom: 10px">
-        <a-button type="primary" id="shelfMonitoringList-export" @click="handleAddBack">新增调回单</a-button>
-        <span style="margin-left: 5px">
-          <template v-if="hasSelected">
-            {{ `已选 ${selectedRowKeys.length} 项` }}
+      <!-- 未选择合作商 -->
+      <div class="unChoose" v-show="!isSearch">
+        <a-icon type="exclamation-circle" theme="filled" :style="{ fontSize: '18px', color: '#ff9900', verticalAlign: 'sub', marginRight: '5px' }" />
+        <span>请选择一个货架后点击查询按钮</span>
+      </div>
+      <div v-show="isSearch">
+        <div style="margin-bottom: 10px">
+          <a-button type="primary" id="shelfMonitoringList-export" @click="handleAddBack">新增调回单</a-button>
+          <span style="margin-left: 5px">
+            <template v-if="rowSelectionInfo&&rowSelectionInfo.selectedRowKeys.length > 0">
+              {{ `已选 ${rowSelectionInfo.selectedRowKeys.length} 项` }}
+            </template>
+          </span>
+        </div>
+        <!-- 列表 -->
+        <s-table
+          class="sTable fixPagination"
+          ref="table"
+          :style="{ height: tableHeight+84.5+'px' }"
+          size="small"
+          :rowKey="(record) => record.id"
+          :columns="columns"
+          :data="loadData"
+          :rowSelection="{ columnWidth: 40 }"
+          @rowSelection="rowSelectionFun"
+          :scroll="{ y: tableHeight }"
+          :defaultLoadData="false"
+          bordered>
+          <!-- 操作 -->
+          <template slot="action" slot-scope="text, record">
+            <a-button
+              size="small"
+              type="link"
+              class="button-warning"
+              @click="handleEdit(record)"
+              id="shelfMonitoringList-warehousing-btn">出入库明细</a-button>
           </template>
           </template>
-        </span>
+        </s-table>
       </div>
       </div>
-      <!-- 列表 -->
-      <s-table
-        class="sTable fixPagination"
-        ref="table"
-        :style="{ height: tableHeight+84.5+'px' }"
-        size="small"
-        :rowKey="(record) => record.id"
-        :columns="columns"
-        :data="loadData"
-        :rowSelection="{columnWidth: 40}"
-        :scroll="{ y: tableHeight }"
-        :defaultLoadData="false"
-        bordered>
-        <!-- 操作 -->
-        <template slot="action" slot-scope="text, record">
-          <a-button
-            size="small"
-            type="link"
-            class="button-warning"
-            @click="handleEdit(record)"
-            id="shelfMonitoringList-warehousing-btn">出入库明细</a-button>
-        </template>
-      </s-table>
     </a-spin>
     </a-spin>
   </a-card>
   </a-card>
 </template>
 </template>
@@ -121,22 +136,18 @@ export default {
         settleState: undefined
         settleState: undefined
       },
       },
       rules: {
       rules: {
-        // 'hjName': [{ required: true, message: '请输入货架名称', trigger: 'change' }]
+        'hjName': [{ required: true, message: '请输入货架名称', trigger: 'change' }]
       },
       },
       disabled: false, //  查询、重置按钮是否可操作
       disabled: false, //  查询、重置按钮是否可操作
       columns: [
       columns: [
-        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
-        { title: '创建时间', dataIndex: 'createDate', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '连锁调入单号', scopedSlots: { customRender: 'allocationLinkagePutNo' }, width: '16%', align: 'center' },
-        { title: '调出对象', dataIndex: 'outTenantName', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '总款数', dataIndex: 'productTotalCategory', width: '5%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '总数量', dataIndex: 'productTotalQty', width: '5%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '总成本', dataIndex: 'productTotalCost', width: '6%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '入库时间', dataIndex: 'putWarehouseTime', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '调拨产品类型', dataIndex: 'allocationTypeDictValue', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '业务状态', dataIndex: 'stateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '财务状态', dataIndex: 'settleStateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
+        { title: '货位号', dataIndex: 'createDate', width: '13%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '绑定产品编码', dataIndex: 'allocationLinkagePutNo', width: '13%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '绑定产品名称', dataIndex: 'outTenantName', width: '18%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '货位产品状态', dataIndex: 'allocationTypeDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '当前库存', dataIndex: 'productTotalCategory', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '最大库容', dataIndex: 'productTotalQty', width: '8%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '滞销天数', dataIndex: 'productTotalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '15%', align: 'center' }
       ],
       ],
       // 加载数据方法 必须为 Promise 对象
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
       loadData: parameter => {
@@ -157,44 +168,26 @@ export default {
         })
         })
       },
       },
       hjNameData: [],
       hjNameData: [],
-      selectedRowKeys: [], // Check here to configure the default column
-      selectedRows: []
+      rowSelectionInfo: null,
+      isSearch: false
     }
     }
   },
   },
   computed: {
   computed: {
-    hasSelected () {
-      return this.selectedRowKeys.length > 0
-    },
-    rowSelection () {
-      if (this.$hasPermissions('B_financialCollectionPl')) {
-        return {
-          selectedRowKeys: this.selectedRowKeys,
-          onChange: (selectedRowKeys, selectedRows) => {
-            this.selectedRowKeys = selectedRowKeys
-          },
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
-            this.onSelectChange(record, selected, selectedRows, nativeEvent)
-          },
-          onSelectAll: (selected, selectedRows, changeRows) => {
-            this.onSelectAllChange(selected, selectedRows, changeRows)
-          },
-          getCheckboxProps: record => ({
-            props: {
-              disabled: record.settleState == 'SETTLED'
-            }
-          })
-        }
-      } else {
-        return null
-      }
-    }
+    // hasSelected () {
+    //   return this.selectedRowKeys.length > 0
+    // },
   },
   },
   methods: {
   methods: {
+    rowSelectionFun (obj) {
+      console.log('rowSelection', obj)
+      this.rowSelectionInfo = obj || null
+    },
     //  查询
     //  查询
     handleSearch () {
     handleSearch () {
       this.$refs.ruleForm.validate(valid => {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
         if (valid) {
           this.$refs.table.refresh(true)
           this.$refs.table.refresh(true)
+          this.isSearch = true
         } else {
         } else {
           console.log('error submit!!')
           console.log('error submit!!')
           return false
           return false
@@ -203,6 +196,7 @@ export default {
     },
     },
     //  重置
     //  重置
     resetSearchForm () {
     resetSearchForm () {
+      this.isSearch = false
       this.queryParam.beginDate = ''
       this.queryParam.beginDate = ''
       this.queryParam.endDate = ''
       this.queryParam.endDate = ''
       this.queryParam.outTenantSn = undefined
       this.queryParam.outTenantSn = undefined
@@ -218,34 +212,6 @@ export default {
     handleDetail (row) {
     handleDetail (row) {
       this.$router.push({ path: `/allocationManagement/chainTransferIn/detail/${row.allocationLinkagePutSn}` })
       this.$router.push({ path: `/allocationManagement/chainTransferIn/detail/${row.allocationLinkagePutSn}` })
     },
     },
-    onSelectChange (record, selected, selectedRows, nativeEvent) {
-      console.log('onSelectChange-------', record, selected, selectedRows, nativeEvent)
-      // if (selected) { //  选择
-      //   this.selectedRows.push(record)
-      // } else { //  取消
-      //   this.selectedRows = selectedRows
-      // }
-    },
-    // 本页全选/取消全选
-    onSelectAllChange (selected, selectedRows, changeRows) {
-      console.log('onSelectAllChange--------', selected, selectedRows, changeRows)
-      // const _this = this
-      // if (selected) { //  选择
-      //   this.selectedRows = [...this.selectedRows, ...changeRows]
-      // } else { //  取消
-      //   const arrId = []
-      //   this.selectedRows.map((item, index) => {
-      //     this.selectedRows.map((subItem, ind) => {
-      //       if (item.id == subItem.id) {
-      //         arrId.push(index)
-      //       }
-      //     })
-      //   })
-      //   arrId.map((item, index) => {
-      //     _this.selectedRows = _this.selectedRows.slice(item, item + 1)
-      //   })
-      // }
-    },
     filterOption (input, option) {
     filterOption (input, option) {
       return (
       return (
         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -259,7 +225,7 @@ export default {
     },
     },
     setTableH () {
     setTableH () {
       const tableSearchH = this.$refs.tableSearch.offsetHeight
       const tableSearchH = this.$refs.tableSearch.offsetHeight
-      this.tableHeight = window.innerHeight - tableSearchH - 197
+      this.tableHeight = window.innerHeight - tableSearchH - 245
     }
     }
   },
   },
   watch: {
   watch: {
@@ -292,5 +258,12 @@ export default {
 }
 }
 </script>
 </script>
 
 
-<style>
+<style lang="less">
+  .shelfMonitoringList-wrap{
+    .unChoose {
+      text-align: center;
+      margin: 240px 0 300px;
+      font-size: 16px;
+    }
+  }
 </style>
 </style>