vue2-client 1.6.58-single → 1.6.59-single

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.6.59 -2023-08-08 @江超**
+- XTable增加按钮组左侧扩展操作slot
+
 **1.6.58 -2023-08-08 @江超**
 - 优化XAddNativeForm的表单校验
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.6.58-single",
+  "version": "1.6.59-single",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -25,6 +25,9 @@
         @selectRow="selectRow"
         @afterQuery="afterQuery"
         @tempTableEdit="tempTableEdit">
+        <template slot="leftButton" slot-scope="{selectedRowKeys, selectedRows}">
+          <slot name="leftButton" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+        </template>
         <template slot="button" slot-scope="{selectedRowKeys, selectedRows}">
           <slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
         </template>

package/src/base-client/components/common/XTable/XTable.vue

@@ -1,506 +1,507 @@
-<template>
-  <div v-show="tableColumns.length > 0">
-    <a-row :gutter="48">
-      <a-col>
-        <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
-          <a-space>
-            <a-button v-if="!buttonState || buttonState.add" type="primary" @click="add">
-              <a-icon :style="iconStyle" type="plus"/>新增
-            </a-button>
-            <a-button
-              v-if="!buttonState || buttonState.edit"
-              :disabled="!isModify"
-              :loading="editLoading"
-              class="btn-success"
-              type="dashed"
-              @click="edit()">
-              <a-icon :style="iconStyle" type="edit"/>修改
-            </a-button>
-            <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
-              <a-icon :style="iconStyle" type="delete"/>删除
-            </a-button>
-            <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="importData">
-              <a-icon :style="iconStyle" type="import" />导入
-            </a-button>
-            <a-dropdown v-if="!buttonState || buttonState.export">
-              <a-menu slot="overlay">
-                <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
-                <a-menu-item key="2" @click="handleExport(false)"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
-                <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
-              </a-menu>
-              <a-button>导出 <a-icon type="down" /> </a-button>
-            </a-dropdown>
-            <slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-          </a-space>
-        </span>
-      </a-col>
-      <a-col>
-        <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
-          <a-button-group>
-            <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-            <a-button @click="refresh(true)">
-              <a-icon :style="iconStyle" type="reload" />
-            </a-button>
-            <table-setting v-if="columnSelectLoaded" v-model="tableColumns" />
-          </a-button-group>
-        </span>
-      </a-col>
-    </a-row>
-    <s-table
-      ref="table"
-      :alert="true"
-      :columns="tableColumns"
-      :data="loadData"
-      :rowKey="rowKey"
-      :rowSelection="rowSelection"
-      :scroll="{ x: scrollXWidth, y: scrollYHeight }"
-      :showPagination="showPagination"
-      size="default"
-    >
-      <template
-        v-for="(item, index) in tableColumns"
-        :slot="item.dataIndex"
-        slot-scope="text, record">
-        <!-- 文本溢出省略(ellipsis) -->
-        <span v-if="item.slotType === 'ellipsis'" :key="index">
-          <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
-        </span>
-        <!-- 徽标(badge) -->
-        <span v-else-if="item.slotType === 'badge'" :key="index">
-          <x-badge v-if="text !== null && text !== undefined" :badge-key="item.slotKeyMap" :value="text" />
-        </span>
-        <!-- 日期(date) -->
-        <span v-else-if="item.slotType === 'date'" :key="index">
-          {{ format(text,'yyyy-MM-dd') }}
-        </span>
-        <!-- 日期时间(datetime) -->
-        <span v-else-if="item.slotType === 'dateTime'" :key="index">
-          {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
-        </span>
-        <!-- 操作列(action) -->
-        <span v-else-if="item.slotType === 'action'" :key="index">
-          <a @click="action(record, item.dataIndex)">{{ item.slotValue }}</a>
-        </span>
-      </template>
-      <template slot="footer">
-        <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-      </template>
-    </s-table>
-    <!-- 上传文件 -->
-    <x-import-excel
-      ref="importExcel"
-      @ok="refresh(true)"
-      :title="title"
-      :service-name="serviceName"
-      :query-params-name="queryParamsName"
-    />
-  </div>
-</template>
-<script>
-import { Ellipsis, STable } from '@vue2-client/components'
-import { formatDate } from '@vue2-client/utils/util'
-import XBadge from '@vue2-client/base-client/components/common/XBadge'
-import TableSetting from '@vue2-client/components/TableSetting/TableSetting'
-import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
-import { exportData, query, queryWithResource, remove } from '@vue2-client/services/api/common'
-import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
-import { Modal } from 'ant-design-vue'
-import { post } from '@vue2-client/services/api'
-import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
-
-export default {
-  name: 'XTable',
-  components: {
-    TableSetting,
-    STable,
-    Ellipsis,
-    XBadge,
-    XImportExcel
-  },
-  data () {
-    return {
-      // 筛选列加载状态
-      columnSelectLoaded: false,
-      // 预览模式
-      viewMode: false,
-      // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
-        // 取到表格携带的表单参数
-        const requestParameters = Object.assign({}, parameter)
-        // 取到父组件传入的表单参数
-        const conditionParams = Object.assign(this.form, this.fixedQueryForm)
-        // 如果传了燃气公司字段，则进行数据处理
-        if (conditionParams.orgName) {
-          requestParameters.orgName = conditionParams.orgName
-          delete conditionParams.orgName
-        }
-        requestParameters.conditionParams = conditionParams
-        requestParameters.queryParamsName = this.queryParamsName
-        requestParameters.queryParams = this.queryParams
-        // 加载数据
-        return this.loadTableData(requestParameters)
-      },
-      rowKey: undefined,
-      // x滚动条宽度
-      scrollXWidth: 1600,
-      // y滚动条高度
-      scrollYHeight: 437,
-      // 表格选择列Key集合
-      selectedRowKeys: [],
-      // 表格选择Row集合
-      selectedRows: [],
-      // 业务标题
-      title: '',
-      // 数据列
-      tableColumns: [],
-      // 查询用表单
-      form: {},
-      // 是否允许修改
-      isModify: false,
-      // 是否允许删除
-      isDelete: false,
-      // 服务名称
-      serviceName: 'af-system',
-      // 选中用于修改的id
-      selectId: undefined,
-      // 是否为临时表
-      isTableTemp: false,
-      // 是否显示展示列抽屉
-      visible: false,
-      // 编辑按钮加载状态
-      editLoading: false,
-      // 按钮状态
-      buttonState: {},
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      }
-    }
-  },
-  props: {
-    // 查询配置文件名
-    queryParamsName: {
-      type: String,
-      default: () => {
-        return ''
-      }
-    },
-    // 查询配置文件Json
-    queryParamsJson: {
-      type: Object,
-      default: null
-    },
-    // 固定查询表单
-    fixedQueryForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
-    showPagination: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    rowSelection () {
-      return {
-        selectedRowKeys: this.selectedRowKeys,
-        onChange: this.onSelectChange
-      }
-    }
-  },
-  mounted () {},
-  methods: {
-    /**
-     * 初始化表格参数
-     */
-    init (params) {
-      const {
-        // 查询参数对象, 用于没有对应查询配置文件名时
-        queryParams,
-        tableColumns,
-        buttonState,
-        title,
-        serviceName = 'af-system',
-        viewMode
-      } = params
-      this.queryParams = queryParams
-      this.tableColumns = JSON.parse(JSON.stringify(tableColumns))
-      if (this.tableColumns.length === 0) {
-        return
-      }
-      this.buttonState = buttonState
-      this.title = title
-      this.serviceName = serviceName
-      this.viewMode = viewMode
-      this.rowKey = this.tableColumns[0].dataIndex
-      let totalWidth = 0
-      // 设置表格宽度
-      for (let i = 0; i < this.tableColumns.length; i++) {
-        const item = this.tableColumns[i]
-        if (item.slotType === 'action') {
-          item.fixed = 'right'
-          item.width = 70
-        }
-        if (item.width) {
-          totalWidth = totalWidth + item.width
-        } else {
-          totalWidth = totalWidth + 180
-        }
-      }
-      // 设置表格高度
-      const height = document.documentElement.clientHeight
-      if (height >= 1070) {
-        this.scrollYHeight = 'calc(100vh - 526px)'
-      } else {
-        this.scrollYHeight = 'calc(100vh - 398px)'
-      }
-      // 横向滚动长度大于所有宽度，才能实现固定表头
-      this.scrollXWidth = totalWidth
-      // 加载筛选列完成
-      this.columnSelectLoaded = true
-      this.setQueryForm({})
-    },
-    /**
-     * 加载表格数据
-     * @param requestParameters 请求参数
-     */
-    loadTableData (requestParameters) {
-      let result = {}
-      if (this.queryParamsJson) {
-        if (this.queryParamsJson.tableName.startsWith('##')) {
-          this.isTableTemp = true
-          result = this.initTempTable(requestParameters)
-        }
-      }
-      if (!this.isTableTemp) {
-        result = query(requestParameters, this.serviceName)
-      }
-      this.clearRowKeys()
-      this.$emit('afterQuery', result, requestParameters.conditionParams)
-      return result
-    },
-    action (record, actionType) {
-      this.$emit('action', record, record[this.getPrimaryKeyName()], actionType)
-    },
-    onSelectChange (selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-      this.isModify = this.selectedRowKeys.length === 1
-      this.isDelete = this.selectedRowKeys.length > 0
-      this.$emit('selectRow', selectedRowKeys, selectedRows)
-    },
-    /**
-     * 清除表格选中项
-     */
-    clearRowKeys () {
-      this.$refs.table.clearSelected()
-    },
-    /**
-     * 为表格附加查询条件
-     */
-    setQueryForm (form = {}) {
-      this.form = form
-      this.refresh(true)
-    },
-    /**
-     * 表格重新加载方法
-     * 如果参数为 true, 则强制刷新到第一页
-     */
-    refresh (bool) {
-      this.$refs.table.refresh(bool)
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    showDrawer () {
-      this.visible = true
-    },
-    /**
-     * 获取主键列名称
-     */
-    getPrimaryKeyName () {
-      return this.tableColumns[0].dataIndex
-    },
-    // 导出选中或本页数据
-    handleExport (isSelected) {
-      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
-      const filterVal = this.tableColumns.map(res => res.dataIndex)
-      let exportData
-      if (isSelected) {
-        exportData = this.selectedRows
-      } else {
-        exportData = this.$refs.table.localDataSource
-      }
-      const data = this.formatJson(filterVal, exportData)
-      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
-    },
-    // 导出符合条件的数据
-    handleExportByQuery () {
-      const that = this
-      const conditionParams = Object.assign(that.form, that.fixedQueryForm)
-      this.$confirm({
-        title: '是否确认导出?',
-        content: '此操作将导出当前条件下所有数据而非选中数据',
-        onOk () {
-          exportData({
-            queryParamsName: that.queryParamsName,
-            queryParams: that.queryParams,
-            form: conditionParams
-          }, that.serviceName).then(res => {
-            window.open('/res/excel/export/' + res.value)
-          })
-        },
-        onCancel () {}
-      })
-    },
-    // 新增业务
-    add () {
-      this.$emit('add')
-    },
-    // 编辑业务
-    edit (id) {
-      this.editLoading = true
-      // 组织被编辑数据
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        queryParams: this.queryParams,
-        conditionParams: {},
-        pageNo: 1,
-        pageSize: 1
-      }
-      if (!id) {
-        this.selectId = this.selectedRowKeys[0]
-      } else {
-        this.selectId = id
-      }
-      const primaryKeyName = this.getPrimaryKeyName()
-      requestParameters.conditionParams[primaryKeyName] = this.selectId
-      requestParameters.f_businessid = this.selectId
-      if (this.isTableTemp) {
-        this.$emit('tempTableEdit', requestParameters)
-        return
-      }
-      queryWithResource(requestParameters, this.serviceName).then(res => {
-        // 将更新需要的主键值加入到primaryKeyData中
-        const primaryKeyData = {}
-        primaryKeyData[primaryKeyName] = this.selectId
-        const modifyModelData = { data: res.data[0], primaryKeyData: primaryKeyData, images: res.images, files: res.files }
-        this.$emit('edit', modifyModelData)
-        this.editLoading = false
-      })
-    },
-    // 删除业务
-    deleteItem () {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止删除')
-        return
-      }
-      Modal.confirm({
-        title: '提示',
-        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
-        zIndex: 1001,
-        onOk: () => {
-          return new Promise((resolve, reject) => {
-            const requestParameters = {
-              queryParamsName: this.queryParamsName,
-              idList: this.selectedRowKeys
-            }
-            remove(requestParameters, this.serviceName).then(res => {
-              resolve(res)
-              this.$message.success('删除成功！')
-              this.refresh(true)
-              // afterDelete
-              this.$emit('afterDelete', requestParameters)
-            }).catch(e => {
-              reject(e)
-              this.$message.error('删除失败！')
-            })
-          })
-        },
-        onCancel () {}
-      })
-    },
-    // 导入业务
-    importData () {
-      this.$refs.importExcel.importExcelHandleOpen()
-    },
-    formatJson (filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    },
-    // 初始化临时表
-    async initTempTable (json) {
-      await this.createTempTable(this.queryParamsJson)
-      await this.insertTempTableData(this.queryParamsJson)
-      let result = {}
-      await post(CommonTempTable.initApplySubTable, {
-        define: json
-      }).then(res => {
-        console.log('子表临时表已创建')
-        result = res
-      })
-      return result
-    },
-    // 创建临时表sql生成
-    createTempTable (defineJson) {
-      const tableName = defineJson.tableName
-      const define = defineJson.column
-      return post(CommonTempTable.createTempTable, {
-        define: define,
-        tableName: tableName
-      }).then(res => {
-        return res
-      }, err => {
-        console.log(err)
-      })
-    },
-    // 插入临时表数据sql生成
-    insertTempTableData (defineJson) {
-      const tableName = defineJson.tableName
-      const params = {}
-      params.define = defineJson.column
-      params.applyId = defineJson.applyId
-      params.stepName = defineJson.stepName
-      params.tableName = tableName
-      return post(CommonTempTable.insertDataToTempTable, {
-        tempTableData: params
-      }).then(res => {
-        return res
-      })
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.btn-success {
-  color: #ffffff;
-}
-.btn-success:enabled:hover {
-  background-color: #85CE61 !important;
-  border-color: #85CE61 !important;
-}
-.btn-success:enabled {
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.btn-success:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-.btn-warn {
-  color: #ffffff;
-}
-.btn-warn:enabled:hover {
-  background-color: #ffc833 !important;
-  border-color: #ffc833 !important;
-}
-.btn-warn:enabled {
-  background-color: #ffba00;
-  border-color: #ffba00;
-}
-.btn-warn:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-</style>
+<template>
+  <div v-show="tableColumns.length > 0">
+    <a-row :gutter="48">
+      <a-col>
+        <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
+          <a-space>
+            <slot name="leftButton" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+            <a-button v-if="!buttonState || buttonState.add" type="primary" @click="add">
+              <a-icon :style="iconStyle" type="plus"/>新增
+            </a-button>
+            <a-button
+              v-if="!buttonState || buttonState.edit"
+              :disabled="!isModify"
+              :loading="editLoading"
+              class="btn-success"
+              type="dashed"
+              @click="edit()">
+              <a-icon :style="iconStyle" type="edit"/>修改
+            </a-button>
+            <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
+              <a-icon :style="iconStyle" type="delete"/>删除
+            </a-button>
+            <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="importData">
+              <a-icon :style="iconStyle" type="import" />导入
+            </a-button>
+            <a-dropdown v-if="!buttonState || buttonState.export">
+              <a-menu slot="overlay">
+                <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
+                <a-menu-item key="2" @click="handleExport(false)"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
+                <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
+              </a-menu>
+              <a-button>导出 <a-icon type="down" /> </a-button>
+            </a-dropdown>
+            <slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+          </a-space>
+        </span>
+      </a-col>
+      <a-col>
+        <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
+          <a-button-group>
+            <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+            <a-button @click="refresh(true)">
+              <a-icon :style="iconStyle" type="reload" />
+            </a-button>
+            <table-setting v-if="columnSelectLoaded" v-model="tableColumns" />
+          </a-button-group>
+        </span>
+      </a-col>
+    </a-row>
+    <s-table
+      ref="table"
+      :alert="true"
+      :columns="tableColumns"
+      :data="loadData"
+      :rowKey="rowKey"
+      :rowSelection="rowSelection"
+      :scroll="{ x: scrollXWidth, y: scrollYHeight }"
+      :showPagination="showPagination"
+      size="default"
+    >
+      <template
+        v-for="(item, index) in tableColumns"
+        :slot="item.dataIndex"
+        slot-scope="text, record">
+        <!-- 文本溢出省略(ellipsis) -->
+        <span v-if="item.slotType === 'ellipsis'" :key="index">
+          <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
+        </span>
+        <!-- 徽标(badge) -->
+        <span v-else-if="item.slotType === 'badge'" :key="index">
+          <x-badge v-if="text !== null && text !== undefined" :badge-key="item.slotKeyMap" :value="text" />
+        </span>
+        <!-- 日期(date) -->
+        <span v-else-if="item.slotType === 'date'" :key="index">
+          {{ format(text,'yyyy-MM-dd') }}
+        </span>
+        <!-- 日期时间(datetime) -->
+        <span v-else-if="item.slotType === 'dateTime'" :key="index">
+          {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
+        </span>
+        <!-- 操作列(action) -->
+        <span v-else-if="item.slotType === 'action'" :key="index">
+          <a @click="action(record, item.dataIndex)">{{ item.slotValue }}</a>
+        </span>
+      </template>
+      <template slot="footer">
+        <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+      </template>
+    </s-table>
+    <!-- 上传文件 -->
+    <x-import-excel
+      ref="importExcel"
+      @ok="refresh(true)"
+      :title="title"
+      :service-name="serviceName"
+      :query-params-name="queryParamsName"
+    />
+  </div>
+</template>
+<script>
+import { Ellipsis, STable } from '@vue2-client/components'
+import { formatDate } from '@vue2-client/utils/util'
+import XBadge from '@vue2-client/base-client/components/common/XBadge'
+import TableSetting from '@vue2-client/components/TableSetting/TableSetting'
+import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
+import { exportData, query, queryWithResource, remove } from '@vue2-client/services/api/common'
+import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
+import { Modal } from 'ant-design-vue'
+import { post } from '@vue2-client/services/api'
+import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
+
+export default {
+  name: 'XTable',
+  components: {
+    TableSetting,
+    STable,
+    Ellipsis,
+    XBadge,
+    XImportExcel
+  },
+  data () {
+    return {
+      // 筛选列加载状态
+      columnSelectLoaded: false,
+      // 预览模式
+      viewMode: false,
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // 取到表格携带的表单参数
+        const requestParameters = Object.assign({}, parameter)
+        // 取到父组件传入的表单参数
+        const conditionParams = Object.assign(this.form, this.fixedQueryForm)
+        // 如果传了燃气公司字段，则进行数据处理
+        if (conditionParams.orgName) {
+          requestParameters.orgName = conditionParams.orgName
+          delete conditionParams.orgName
+        }
+        requestParameters.conditionParams = conditionParams
+        requestParameters.queryParamsName = this.queryParamsName
+        requestParameters.queryParams = this.queryParams
+        // 加载数据
+        return this.loadTableData(requestParameters)
+      },
+      rowKey: undefined,
+      // x滚动条宽度
+      scrollXWidth: 1600,
+      // y滚动条高度
+      scrollYHeight: 437,
+      // 表格选择列Key集合
+      selectedRowKeys: [],
+      // 表格选择Row集合
+      selectedRows: [],
+      // 业务标题
+      title: '',
+      // 数据列
+      tableColumns: [],
+      // 查询用表单
+      form: {},
+      // 是否允许修改
+      isModify: false,
+      // 是否允许删除
+      isDelete: false,
+      // 服务名称
+      serviceName: 'af-system',
+      // 选中用于修改的id
+      selectId: undefined,
+      // 是否为临时表
+      isTableTemp: false,
+      // 是否显示展示列抽屉
+      visible: false,
+      // 编辑按钮加载状态
+      editLoading: false,
+      // 按钮状态
+      buttonState: {},
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      }
+    }
+  },
+  props: {
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 查询配置文件Json
+    queryParamsJson: {
+      type: Object,
+      default: null
+    },
+    // 固定查询表单
+    fixedQueryForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
+    showPagination: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted () {},
+  methods: {
+    /**
+     * 初始化表格参数
+     */
+    init (params) {
+      const {
+        // 查询参数对象, 用于没有对应查询配置文件名时
+        queryParams,
+        tableColumns,
+        buttonState,
+        title,
+        serviceName = 'af-system',
+        viewMode
+      } = params
+      this.queryParams = queryParams
+      this.tableColumns = JSON.parse(JSON.stringify(tableColumns))
+      if (this.tableColumns.length === 0) {
+        return
+      }
+      this.buttonState = buttonState
+      this.title = title
+      this.serviceName = serviceName
+      this.viewMode = viewMode
+      this.rowKey = this.tableColumns[0].dataIndex
+      let totalWidth = 0
+      // 设置表格宽度
+      for (let i = 0; i < this.tableColumns.length; i++) {
+        const item = this.tableColumns[i]
+        if (item.slotType === 'action') {
+          item.fixed = 'right'
+          item.width = 70
+        }
+        if (item.width) {
+          totalWidth = totalWidth + item.width
+        } else {
+          totalWidth = totalWidth + 180
+        }
+      }
+      // 设置表格高度
+      const height = document.documentElement.clientHeight
+      if (height >= 1070) {
+        this.scrollYHeight = 'calc(100vh - 526px)'
+      } else {
+        this.scrollYHeight = 'calc(100vh - 398px)'
+      }
+      // 横向滚动长度大于所有宽度，才能实现固定表头
+      this.scrollXWidth = totalWidth
+      // 加载筛选列完成
+      this.columnSelectLoaded = true
+      this.setQueryForm({})
+    },
+    /**
+     * 加载表格数据
+     * @param requestParameters 请求参数
+     */
+    loadTableData (requestParameters) {
+      let result = {}
+      if (this.queryParamsJson) {
+        if (this.queryParamsJson.tableName.startsWith('##')) {
+          this.isTableTemp = true
+          result = this.initTempTable(requestParameters)
+        }
+      }
+      if (!this.isTableTemp) {
+        result = query(requestParameters, this.serviceName)
+      }
+      this.clearRowKeys()
+      this.$emit('afterQuery', result, requestParameters.conditionParams)
+      return result
+    },
+    action (record, actionType) {
+      this.$emit('action', record, record[this.getPrimaryKeyName()], actionType)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.isModify = this.selectedRowKeys.length === 1
+      this.isDelete = this.selectedRowKeys.length > 0
+      this.$emit('selectRow', selectedRowKeys, selectedRows)
+    },
+    /**
+     * 清除表格选中项
+     */
+    clearRowKeys () {
+      this.$refs.table.clearSelected()
+    },
+    /**
+     * 为表格附加查询条件
+     */
+    setQueryForm (form = {}) {
+      this.form = form
+      this.refresh(true)
+    },
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     */
+    refresh (bool) {
+      this.$refs.table.refresh(bool)
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    showDrawer () {
+      this.visible = true
+    },
+    /**
+     * 获取主键列名称
+     */
+    getPrimaryKeyName () {
+      return this.tableColumns[0].dataIndex
+    },
+    // 导出选中或本页数据
+    handleExport (isSelected) {
+      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
+      const filterVal = this.tableColumns.map(res => res.dataIndex)
+      let exportData
+      if (isSelected) {
+        exportData = this.selectedRows
+      } else {
+        exportData = this.$refs.table.localDataSource
+      }
+      const data = this.formatJson(filterVal, exportData)
+      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
+    },
+    // 导出符合条件的数据
+    handleExportByQuery () {
+      const that = this
+      const conditionParams = Object.assign(that.form, that.fixedQueryForm)
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          exportData({
+            queryParamsName: that.queryParamsName,
+            queryParams: that.queryParams,
+            form: conditionParams
+          }, that.serviceName).then(res => {
+            window.open('/res/excel/export/' + res.value)
+          })
+        },
+        onCancel () {}
+      })
+    },
+    // 新增业务
+    add () {
+      this.$emit('add')
+    },
+    // 编辑业务
+    edit (id) {
+      this.editLoading = true
+      // 组织被编辑数据
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        queryParams: this.queryParams,
+        conditionParams: {},
+        pageNo: 1,
+        pageSize: 1
+      }
+      if (!id) {
+        this.selectId = this.selectedRowKeys[0]
+      } else {
+        this.selectId = id
+      }
+      const primaryKeyName = this.getPrimaryKeyName()
+      requestParameters.conditionParams[primaryKeyName] = this.selectId
+      requestParameters.f_businessid = this.selectId
+      if (this.isTableTemp) {
+        this.$emit('tempTableEdit', requestParameters)
+        return
+      }
+      queryWithResource(requestParameters, this.serviceName).then(res => {
+        // 将更新需要的主键值加入到primaryKeyData中
+        const primaryKeyData = {}
+        primaryKeyData[primaryKeyName] = this.selectId
+        const modifyModelData = { data: res.data[0], primaryKeyData: primaryKeyData, images: res.images, files: res.files }
+        this.$emit('edit', modifyModelData)
+        this.editLoading = false
+      })
+    },
+    // 删除业务
+    deleteItem () {
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止删除')
+        return
+      }
+      Modal.confirm({
+        title: '提示',
+        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
+        zIndex: 1001,
+        onOk: () => {
+          return new Promise((resolve, reject) => {
+            const requestParameters = {
+              queryParamsName: this.queryParamsName,
+              idList: this.selectedRowKeys
+            }
+            remove(requestParameters, this.serviceName).then(res => {
+              resolve(res)
+              this.$message.success('删除成功！')
+              this.refresh(true)
+              // afterDelete
+              this.$emit('afterDelete', requestParameters)
+            }).catch(e => {
+              reject(e)
+              this.$message.error('删除失败！')
+            })
+          })
+        },
+        onCancel () {}
+      })
+    },
+    // 导入业务
+    importData () {
+      this.$refs.importExcel.importExcelHandleOpen()
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    // 初始化临时表
+    async initTempTable (json) {
+      await this.createTempTable(this.queryParamsJson)
+      await this.insertTempTableData(this.queryParamsJson)
+      let result = {}
+      await post(CommonTempTable.initApplySubTable, {
+        define: json
+      }).then(res => {
+        console.log('子表临时表已创建')
+        result = res
+      })
+      return result
+    },
+    // 创建临时表sql生成
+    createTempTable (defineJson) {
+      const tableName = defineJson.tableName
+      const define = defineJson.column
+      return post(CommonTempTable.createTempTable, {
+        define: define,
+        tableName: tableName
+      }).then(res => {
+        return res
+      }, err => {
+        console.log(err)
+      })
+    },
+    // 插入临时表数据sql生成
+    insertTempTableData (defineJson) {
+      const tableName = defineJson.tableName
+      const params = {}
+      params.define = defineJson.column
+      params.applyId = defineJson.applyId
+      params.stepName = defineJson.stepName
+      params.tableName = tableName
+      return post(CommonTempTable.insertDataToTempTable, {
+        tempTableData: params
+      }).then(res => {
+        return res
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.btn-success {
+  color: #ffffff;
+}
+.btn-success:enabled:hover {
+  background-color: #85CE61 !important;
+  border-color: #85CE61 !important;
+}
+.btn-success:enabled {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.btn-success:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.btn-warn {
+  color: #ffffff;
+}
+.btn-warn:enabled:hover {
+  background-color: #ffc833 !important;
+  border-color: #ffc833 !important;
+}
+.btn-warn:enabled {
+  background-color: #ffba00;
+  border-color: #ffba00;
+}
+.btn-warn:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+</style>