@tongfun/tf-widget 0.1.18 → 0.1.22

package/package/t-data-list/src/t-table/table-records.vue

@@ -1,324 +1,337 @@
-<template>
-  <div ref="tableRecords" class="table-records">
-    <div class="table-wrapper">
-      <ux-grid
-        ref="dataRecordsRef"
-        v-loading="syncData.tableLoading"
-        :data="data.records"
-        size="mini"
-        column-key
-        beautify-table
-        :show-summary="showSummary && !disableSum"
-        :summary-method="summaryMethod"
-        :width-resize="true"
-        :highlight-current-row="false"
-        show-overflow="tooltip"
-        @row-click="handleRowClick"
-        @select="handleSelect"
-        @row-dblclick="handelRowDblClick"
-        @select-all="selectAll"
-      >
-        <ux-table-column :width="50" type="checkbox" fixed="left" />
-        <template v-for="(item,index) in layout">
-          <ux-table-column
-            v-if="item.visible"
-            :key="item.field"
-            :width="layout.length<8?'': '150'"
-            align="center"
-            resizable
-            :title="item.title"
-            :field="item.field"
-          >
-            <template v-slot:header="{ column }">
-              <div class="filter-slot">
-                <span class="title">{{ column.title }}</span>
-                <TableRecordsHeaderPopover
-                  :class="{'my-popover':true,'is-show-filter-icon': !!item.isShowIcon || item.isShowFilter }"
-                  :item="item"
-                  :upload-data-map="uploadDataMap"
-                  :table-filter-data="tableFilterData"
-                  @condition-change="$emit('condition-change', $event)"
-                  @filter-click="filterClick($event,index)"
-                />
-              </div>
-            </template>
-          </ux-table-column>
-        </template>
-      </ux-grid>
-      <TableRecordsSelected
-        v-if="isSelector"
-        :select-data="selectedRows"
-        :show-field="syncData.displayField"
-        @del="handleDel"
-        @clear="handleClearSelected"
-      />
-    </div>
-
-    <!-- 分页 -->
-    <div class="page-wrapper">
-      <el-pagination
-        :current-page="currentPage"
-        :page-sizes="[200, 500, 1000, 5000]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="data.total"
-        @size-change="$emit('size-change', $event)"
-        @current-change="$emit('current-change', $event)"
-      />
-    </div>
-
-  </div>
-</template>
-<script>
-import TableRecordsSelected from './table-records-selected'
-export default {
-  components: {
-    TableRecordsHeaderPopover: () => import('./table-records-header-popover.vue'),
-    TableRecordsSelected
-  },
-  props: {
-    data: {
-      type: Object,
-      default: null
-    },
-    isSelector: {
-      type: Boolean,
-      default: false
-    },
-    layout: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    sum: {
-      type: Array,
-      default: () => []
-    },
-    pageSize: {
-      type: Number,
-      default: 100
-    },
-    currentPage: {
-      type: Number,
-      default: 1
-    },
-    updateInDialog: {
-      type: Boolean,
-      default: false
-    },
-    disableSum: {
-      type: Boolean,
-      default: false
-    }
-  },
-  inject: ['selectedRows', 'ids', 'syncData', 'getDbRow', 'showSummary', 'queryType'],
-  data () {
-    return {
-      tableFilterData: {}, // 表头过滤条件的数据的存储集合
-      uploadDataMap: {}, // 真实向上发送的数据集合
-      idField: null,
-      filterSelectedId: '',
-      isSingleFilter: true,
-      displayField: ''
-    }
-  },
-  computed: {
-
-  },
-  watch: {
-    layout: {
-      handler (newVal) {
-        // 初始化绑定tableFilterData
-        // 如果tableFilterData有内容则抛出
-        if (Object.keys(this.tableFilterData).length !== 0) {
-          return
-        }
-        // 初始化tableFilterData的数据
-        newVal.length > 0 && newVal.forEach(e => {
-          if (e.isId) this.idField = e.field
-          this.$set(this.tableFilterData, e.field, { field: e.field, operator: '', value: '', fieldType: e.componentType })
-        })
-      },
-      immediate: true
-    },
-    'data.records': {
-      handler (newValue) {
-        /**
-         * 在列表的情况下,只有提交审核等几个有限的操作,数据刷新不清空已选
-         */
-        if (this.queryType === 'LIST' && this.syncData.tableSelectionClear) {
-          return this.clearSelectedRows()
-        }
-        this.syncData.tableSelectionClear = true
-
-        /**
-         * 在弹窗的所有情况和列表特殊情况(提交/审核后重新获取数据)
-         * 数据刷新后,重新勾选之前已经选择的数据
-         */
-        const xidList = this.selectedRows.map(item => item.Sid)
-        if (!xidList[0]) {
-          return
-        }
-        const currentSelectRows = newValue.filter(item => {
-          if (xidList.indexOf(item.Sid) > -1) {
-            this.selectedRows[xidList.indexOf(item.Sid)] = item
-            return true
-          }
-          return false
-        })
-        const params = currentSelectRows.map(x => {
-          return { row: x, selected: true }
-        })
-        this.$refs.dataRecordsRef.toggleRowSelection(params)
-      }
-    }
-  },
-  methods: {
-    handleClearSelected () {
-      this.$refs.dataRecordsRef.clearSelection()
-      this.clearSelectedRows()
-    },
-    filterClick (value, index) {
-      if (!this.isSingleFilter) {
-        return
-      }
-      // 重置其他页面的表头过滤显示状态
-      if (!value && this.filterSelectedId) {
-        this.layout[this.filterSelectedId].isShowFilter = false
-      }
-      this.filterSelectedId = index
-    },
-    // 清空已选
-    clearSelectedRows () {
-      this.selectedRows.splice(0, this.selectedRows.length)
-      this.ids.splice(0, this.ids.length)
-    },
-    // 列表合计
-    summaryMethod () {
-      return [this.sum]
-    },
-    handleDel (item) {
-      this.selectedRows.splice(this.selectedRows.indexOf(item), 1)
-      this.ids.splice(this.ids.indexOf(item.id), 1)
-      this.$refs.dataRecordsRef.toggleRowSelection([{ row: item, selected: false }])
-    },
-    handleRowClick (row) {
-      this.$refs.dataRecordsRef.toggleRowSelection([{ row }])
-      if (!this.ids.includes(row[this.idField])) {
-        this.selectedRows.push(row)
-        this.ids.push(row[this.idField])
-      } else {
-        this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
-        this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
-      }
-    },
-    handelRowDblClick (row) {
-      // todo:这里判断条件太多，并且条件之间有优先级,将来条件可能冲突
-      if (this.isSelector) {
-        return this.$emit('fastConfirm', row)
-      }
-      if (this.updateInDialog) {
-        return this.$emit('dbClick', row[this.idField])
-      }
-      if (this.getDbRow) {
-        return this.$emit('dbRowClick', row)
-      }
-
-      const randomStr = Math.random().toString(36).slice(8)
-      this.$router.replace(`${this.$route.path}/update/${randomStr}/${row[this.idField]}`)
-    },
-    selectAll (selection) {
-      if (selection.length > 1) {
-        // 是全选的处理方式
-        const needAddData = this.data.records.filter(e => !this.selectedRows.includes(e))
-        needAddData.forEach(e => {
-          this.selectedRows.push(e)
-          this.ids.push(e[this.idField])
-        })
-      } else {
-        // 非全选的处理方式
-        const selectedRowsCache = this.selectedRows.filter(e => !this.data.records.includes(e))
-        this.selectedRows.splice(0, this.selectedRows.length)
-        this.ids.splice(0, this.ids.length)
-        this.selectedRows.push(...selectedRowsCache)
-        this.ids.push(...selectedRowsCache.map(v => v[this.idField]))
-      }
-    },
-
-    /**
-     * 复选框被勾选
-     */
-    handleSelect (selection, row) {
-      if (!this.ids.includes(row[this.idField])) {
-        if (selection.includes(row)) {
-          this.selectedRows.push(row)
-          row[this.idField] && this.ids.push(row[this.idField])
-        }
-      } else {
-        if (!selection.includes(row)) {
-          this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
-          row[this.idField] && this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
-        }
-      }
-    }
-
-  }
-}
-</script>
-
-<style scoped lang='less'>
-  .table-records {
-    height:90vh;
-    .table-wrapper {
-      overflow: hidden;
-      display: flex;
-      ::v-deep .plTableBox{
-        .elx-table--body-wrapper{
-          height: calc(90vh - 230px );//修改以适应合计行的添加，
-          // margin-bottom: 10px;
-        }
-        .elx-table--footer-wrapper{
-          margin-top: 0px!important;
-        }
-        .elx-header--column{
-          color: #085497;
-            transition: opacity 0.5s ease-in;
-          .filter-slot{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .my-popover{
-            opacity: 0;
-            width: 0;
-            cursor: pointer;
-            transition: all 0.5s ease-out;
-          }
-          :hover .my-popover{
-            width:15px;
-            opacity: 1;
-            transition: opacity 0.5s ease-in;
-          }
-          .is-show-filter-icon{
-            width:15px;
-            opacity: 1;
-          }
-
-        }
-      }
-    }
-    .page-wrapper {
-      margin-top:5px;
-      position:relative;
-      .el-pagination {
-        position:absolute;
-        right:0;
-      }
-    }
-  }
-::v-deep .elx-table:not(.is--empty).show--foot.scroll--x .elx-table--body-wrapper{
-  overflow-x: hidden !important;
-}
-
-</style>
+<template>
+  <div ref="tableRecords" class="table-records">
+    <!-- {{ tableFilterData }} -->
+    <!-- {{ layout }} -->
+    <div class="table-wrapper">
+      <ux-grid
+        ref="dataRecordsRef"
+        v-loading="syncData.tableLoading"
+        :data="data.records"
+        size="mini"
+        column-key
+        beautify-table
+        :show-summary="showSummaryComp"
+        :summary-method="summaryMethod"
+        :width-resize="true"
+        :highlight-current-row="false"
+        show-overflow="tooltip"
+        @row-click="handleRowClick"
+        @select="handleSelect"
+        @row-dblclick="handelRowDblClick"
+        @select-all="selectAll"
+      >
+        <ux-table-column :width="50" type="checkbox" fixed="left" />
+        <template v-for="(item,index) in layout">
+          <ux-table-column
+            v-if="item.visible"
+            :key="item.field"
+            :width="layout.length<8?'': '150'"
+            align="center"
+            resizable
+            :title="item.title"
+            :field="item.field"
+          >
+            <template v-slot:header="{ column }">
+              <div class="filter-slot">
+                <span class="title">{{ column.title }}</span>
+                <TableRecordsHeaderPopover
+                  :class="{'my-popover':true,'is-show-filter-icon': !!item.isShowIcon || item.isShowFilter }"
+                  :item="item"
+                  :upload-data-map="uploadDataMap"
+                  :table-filter-data="tableFilterData"
+                  @condition-change="$emit('condition-change', $event)"
+                  @filter-click="filterClick($event,index)"
+                />
+              </div>
+            </template>
+          </ux-table-column>
+        </template>
+      </ux-grid>
+      <TableRecordsSelected
+        v-if="isSelector"
+        :select-data="selectedRows"
+        :show-field="syncData.displayField"
+        @del="handleDel"
+        @clear="handleClearSelected"
+      />
+    </div>
+
+    <!-- 分页 -->
+    <div class="page-wrapper">
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[200, 500, 1000, 5000]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="data.total"
+        @size-change="$emit('size-change', $event)"
+        @current-change="$emit('current-change', $event)"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+import TableRecordsSelected from './table-records-selected'
+export default {
+  components: {
+    TableRecordsHeaderPopover: () => import('./table-records-header-popover.vue'),
+    TableRecordsSelected
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null
+    },
+    isSelector: {
+      type: Boolean,
+      default: false
+    },
+    layout: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    sum: {
+      type: Array,
+      default: () => []
+    },
+    pageSize: {
+      type: Number,
+      default: 100
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    updateInDialog: {
+      type: Boolean,
+      default: false
+    },
+    enableSum: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['selectedRows', 'ids', 'syncData', 'getDbRow', 'showSummary', 'queryType'],
+  data () {
+    return {
+      tableFilterData: {}, // 表头过滤条件的数据的存储集合
+      uploadDataMap: {}, // 真实向上发送的数据集合
+      idField: null,
+      filterSelectedId: '',
+      isSingleFilter: true,
+      displayField: ''
+    }
+  },
+  computed: {
+    showSummaryComp () {
+      return this.queryType === 'LIST'
+    }
+  },
+  watch: {
+    layout: {
+      handler (newVal) {
+        if (Object.keys(this.tableFilterData).length !== 0) {
+          return
+        }
+        this.initTableFilterData()
+        // newVal.length > 0 && newVal.forEach(e => {
+        //   if (e.isId) this.idField = e.field
+        //   this.$set(this.tableFilterData, e.field, { field: e.field, operator: '', value: '', fieldType: e.componentType })
+        // })
+      },
+      immediate: true
+    },
+    'data.records': {
+      handler (newValue) {
+        /**
+         * 在列表的情况下,只有提交审核等几个有限的操作,数据刷新不清空已选
+         */
+        if (this.queryType === 'LIST' && this.syncData.tableSelectionClear) {
+          return this.clearSelectedRows()
+        }
+        this.syncData.tableSelectionClear = true
+
+        /**
+         * 在弹窗的所有情况和列表特殊情况(提交/审核后重新获取数据)
+         * 数据刷新后,重新勾选之前已经选择的数据
+         */
+        const xidList = this.selectedRows.map(item => item.Sid)
+        if (!xidList[0]) {
+          return
+        }
+        const currentSelectRows = newValue.filter(item => {
+          if (xidList.indexOf(item.Sid) > -1) {
+            this.selectedRows[xidList.indexOf(item.Sid)] = item
+            return true
+          }
+          return false
+        })
+        const params = currentSelectRows.map(x => {
+          return { row: x, selected: true }
+        })
+        this.$refs.dataRecordsRef.toggleRowSelection(params)
+      }
+    }
+  },
+  methods: {
+    /**
+     * 表头过滤
+     */
+    // 初始化或清空表头过滤的缓存容器
+    initTableFilterData () {
+      this.layout.length && this.layout.forEach(e => {
+        if (e.isId) this.idField = e.field
+        this.$set(this.tableFilterData, e.field, { field: e.field, operator: '', value: '', fieldType: e.componentType })
+        this.$set(e, 'isShowIcon', false)
+      })
+    },
+    // 表头过滤触发了过滤事件
+    filterClick (value, index) {
+      if (!this.isSingleFilter) {
+        return
+      }
+      // 重置其他页面的表头过滤显示状态
+      if (!value && this.filterSelectedId) {
+        this.layout[this.filterSelectedId].isShowFilter = false
+      }
+      this.filterSelectedId = index
+    },
+    handleClearSelected () {
+      this.$refs.dataRecordsRef.clearSelection()
+      this.clearSelectedRows()
+    },
+    // 清空已选
+    clearSelectedRows () {
+      this.selectedRows.splice(0, this.selectedRows.length)
+      this.ids.splice(0, this.ids.length)
+    },
+    // 列表合计
+    summaryMethod () {
+      return [this.sum]
+    },
+    handleDel (item) {
+      this.selectedRows.splice(this.selectedRows.indexOf(item), 1)
+      this.ids.splice(this.ids.indexOf(item.id), 1)
+      this.$refs.dataRecordsRef.toggleRowSelection([{ row: item, selected: false }])
+    },
+    handleRowClick (row) {
+      this.$refs.dataRecordsRef.toggleRowSelection([{ row }])
+      if (!this.ids.includes(row[this.idField])) {
+        this.selectedRows.push(row)
+        this.ids.push(row[this.idField])
+      } else {
+        this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
+        this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
+      }
+    },
+    handelRowDblClick (row) {
+      // todo:这里判断条件太多，并且条件之间有优先级,将来条件可能冲突
+      if (this.isSelector) {
+        return this.$emit('fastConfirm', row)
+      }
+      if (this.updateInDialog) {
+        return this.$emit('dbClick', row[this.idField])
+      }
+      if (this.getDbRow) {
+        return this.$emit('dbRowClick', row)
+      }
+
+      const randomStr = Math.random().toString(36).slice(8)
+      this.$router.replace(`${this.$route.path}/update/${randomStr}/${row[this.idField]}`)
+    },
+    selectAll (selection) {
+      if (selection.length > 1) {
+        // 是全选的处理方式
+        const needAddData = this.data.records.filter(e => !this.selectedRows.includes(e))
+        needAddData.forEach(e => {
+          this.selectedRows.push(e)
+          this.ids.push(e[this.idField])
+        })
+      } else {
+        // 非全选的处理方式
+        const selectedRowsCache = this.selectedRows.filter(e => !this.data.records.includes(e))
+        this.selectedRows.splice(0, this.selectedRows.length)
+        this.ids.splice(0, this.ids.length)
+        this.selectedRows.push(...selectedRowsCache)
+        this.ids.push(...selectedRowsCache.map(v => v[this.idField]))
+      }
+    },
+
+    /**
+     * 复选框被勾选
+     */
+    handleSelect (selection, row) {
+      if (!this.ids.includes(row[this.idField])) {
+        if (selection.includes(row)) {
+          this.selectedRows.push(row)
+          row[this.idField] && this.ids.push(row[this.idField])
+        }
+      } else {
+        if (!selection.includes(row)) {
+          this.selectedRows.splice(this.selectedRows.indexOf(row), 1)
+          row[this.idField] && this.ids.splice(this.ids.indexOf(row[this.idField]), 1)
+        }
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .table-records {
+    height:90vh;
+    .table-wrapper {
+      overflow: hidden;
+      display: flex;
+      ::v-deep .plTableBox{
+        .elx-table--body-wrapper{
+          height: calc(90vh - 230px );//修改以适应合计行的添加，
+          overflow-x:hidden;
+        }
+        .elx-table:not(.is--empty).show--foot.scroll--x .elx-table--body-wrapper{
+          overflow-x: hidden !important;
+        }
+        .elx-table--footer-wrapper{
+          margin-top: 0px!important;
+        }
+        .elx-header--column{
+          color: #085497;
+            transition: opacity 0.5s ease-in;
+          .filter-slot{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .my-popover{
+            opacity: 0;
+            width: 0;
+            cursor: pointer;
+            transition: all 0.5s ease-out;
+          }
+          :hover .my-popover{
+            width:15px;
+            opacity: 1;
+            transition: opacity 0.5s ease-in;
+          }
+          .is-show-filter-icon{
+            width:15px;
+            opacity: 1;
+          }
+
+        }
+      }
+    }
+    .page-wrapper {
+      margin-top:5px;
+      position:relative;
+      .el-pagination {
+        position:absolute;
+        right:0;
+      }
+    }
+  }
+</style>