拆分详情

2022-03-28 23:07:01 +08:00
parent 5998710e10
commit 9d55e0466f
8 changed files with 1065 additions and 194 deletions
@@ -0,0 +1,235 @@
+<template>
+  <div style="height: 100%">
+    <div class="box">
+      <a-table
+        class="table"
+        rowKey="id"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false"
+        :scroll="{x: true}"
+        :data-source="dataSource"
+        :loading="loading"
+        :columns="columns"
+        @change="tableOnChange"
+      >
+        <span slot="operation" slot-scope="record">
+                     <a v-for="(ol,index) in OperationList"
+                        @click="OperationClick(ol,record)">
+                        <span class="text">
+                               {{ol.text}}
+                        </span>
+                     </a>
+         </span>
+      </a-table>
+    </div>
+    <div class="page" v-if="dataSource.length > 0">
+      <a-pagination
+        :show-total="total => $t('total')+` ${total} `+$t('strip')"
+        show-quick-jumper
+        show-size-changer
+        :page-size.sync="pageSize"
+        :total="total"
+        @change="onChange"
+        @showSizeChange="SizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import eventBUs from '../../common/event'
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'SplitTable',
+    props: {
+      //接口
+      url: {
+        type: Object,
+        default: {}
+      },
+      // 操作按钮
+      OperationList: {
+        type: Array,
+        default: []
+      },
+      flag: {
+        type: String,
+        default: ''
+      },
+      //是否显示操作；默认不显示
+      showAction: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        jsonBody: [],
+        checkboxList: [],
+        tableAll: false,
+        indeterminate: false,
+        columns: [],
+        selectedRowKeys: [],
+        dataSource: [],
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        searchParmes: {},
+        loading: false,
+        orderBy: '1',
+        orderByField: ''
+      }
+    },
+    mounted() {
+      eventBUs.$on('searchQuery', search => {
+        Object.keys(search).forEach(res => {
+          if (search[res] instanceof Array) {
+            search[res] = search[res].join(',')
+          }
+        })
+        this.searchParmes = search
+        this.getData()
+        this.getTableList()
+      })
+      eventBUs.$on('searchReset', target => {
+        this.searchParmes = {}
+        this.selectedRowKeys = []
+        this.getData()
+        this.getTableList()
+      })
+      this.getData()
+      this.getTableList()
+    },
+    methods: {
+
+      getTextWith(text, fontStyle) {
+        var canvas = document.createElement('canvas')
+        var context = canvas.getContext('2d')
+        context.font = fontStyle || '14px' // 设置字体样式
+        var dimension = context.measureText(text)
+        return dimension.width + 40
+      },
+      getData() {
+        let params = {
+          flag: this.flag
+        }
+        getAction(this.url.tableHeader, params).then((res) => {
+          if (res.success) {
+            var jsonHead = res.result
+            this.columns = []
+            // res.db_field_txt
+            jsonHead.forEach((res, index) => {
+              this.columns.push({
+                title: res.db_field_txt,
+                dataIndex: res.db_field_name,
+                align: 'center',
+                ellipsis: true,
+                sorter: res.sort
+              })
+              if (res.click) {
+                this.columns[index].scopedSlots = {
+                  customRender: 'detailClick'
+                }
+              } else {
+                this.columns[index].scopedSlots = {
+                  customRender: 'detailText'
+                }
+              }
+            })
+            let width = 0
+            if (this.OperationList.length > 0) {
+              for (let i = 0; i < this.OperationList.length; i++) {
+                width += this.getTextWith(this.OperationList[i].text)
+              }
+            }
+            if (this.showAction) {
+              this.columns.push({
+                title: this.$t('operation'),
+                align: 'center',
+                fixed: 'right',
+                width: width,
+                scopedSlots: { customRender: 'operation' }
+              })
+            }
+          }
+        })
+      },
+      tableOnChange(pagination, filters, sorter) {
+        this.orderBy = sorter.order == 'ascend' ? '1' : '2'
+        this.orderByField = sorter.columnKey
+        this.getTableList()
+      },
+      getTableList() {
+        let pageNo = JSON.parse(JSON.stringify(this.pageNo))
+        let pageSize = JSON.parse(JSON.stringify(this.pageSize))
+        let params = {
+          ...this.searchParmes,
+          orderBy: this.orderBy,
+          orderByField: this.orderByField,
+          pageNo: pageNo + '',
+          pageSize: pageSize + ''
+        }
+        this.loading = true
+        getAction(this.url.tableList, params).then((res) => {
+          if (res.success) {
+            if (res.result.current > 1 && res.result.records.length == 0) {
+              this.pageNo = res.result.current - 1
+              this.getTableList()
+              return
+            }
+            this.dataSource = res.result.records
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.getTableList()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getTableList()
+      },
+      onSelectChange(value) {
+        this.selectedRowKeys = value
+        this.$emit('onSelectChange', value)
+      },
+      OperationClick(ol, item) {
+        this.$emit(ol.ClickEvent, item)
+      },
+      detailClick(item, index) {
+        this.$emit('detailClick', item)
+      }
+    }
+  }
+</script>
+<style>
+  .table .ant-table-column-title {
+    font-weight: bold;
+  }
+
+  .ant-table td {
+    white-space: nowrap;
+  }
+</style>
+<style scoped>
+  .box {
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow: auto;
+  }
+
+  .text {
+    margin-right: 10px;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+</style>