vue2-client 1.4.63 → 1.4.64

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

@@ -1,570 +1,565 @@
-<template>
-  <a-skeleton :loading="mainLoading">
-    <template v-if="loaded">
-      <x-add-form
-        v-if="!buttonState || buttonState.add || buttonState.edit"
-        :business-title="businessTitle"
-        :business-type="businessType"
-        :fixedAddForm="fixedAddForm"
-        :json-data="formItems"
-        :service-name="serviceName"
-        :loading="loading"
-        :modify-model-data="modifyModelData"
-        :visible.sync="modelVisible"
-        @onSubmit="onAddOrModify"/>
-      <x-form
-        :is-show="isFormShow"
-        :json-data="formItems"
-        :service-name="serviceName"
-        style="margin-bottom: 14px;"
-        @onSubmit="onSubmit">
-        <slot></slot>
-      </x-form>
-      <x-table
-        ref="xTable"
-        :buttonState="buttonState"
-        :fixedQueryForm="fixedQueryForm"
-        :form="form"
-        :json-data="tableColumns"
-        :queryParams="queryParams"
-        :queryParamsName="queryParamsName"
-        :show-pagination="showPagination"
-        @action="action"
-        @loadData="loadData"
-        @selectRow="selectRow"
-        @toggleIsFormShow="toggleIsFormShow">
-        <template slot="expand">
-          <a-space>
-            <a-button v-if="!buttonState || buttonState.add" type="primary" @click="addItem">
-              <a-icon :style="iconStyle" type="plus"/>新增
-            </a-button>
-            <a-button
-              v-if="!buttonState || buttonState.edit"
-              :disabled="!isModify"
-              :loading="editDataLoading"
-              class="btn-success"
-              type="dashed"
-              @click="editItem()">
-              <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="$refs.importExcel.importExcelHandleOpen()">
-              <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 :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows" name="button"></slot>
-          </a-space>
-          <slot name="expand"></slot>
-        </template>
-        <!-- 底部插槽 -->
-        <template slot="footer">
-          <slot name="footer"></slot>
-        </template>
-      </x-table>
-      <!-- 上传文件 -->
-      <x-import-excel
-        ref="importExcel"
-        @ok="refreshTable"
-        :title="title"
-        :service-name="serviceName"
-        :query-params-name="queryParamsName"
-      />
-    </template>
-  </a-skeleton>
-</template>
-<script>
-import XForm from '@vue2-client/base-client/components/common/XForm'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
-import XTable from '@vue2-client/base-client/components/common/XTable'
-import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
-import { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-import { mapState } from 'vuex'
-import { Modal } from 'ant-design-vue'
-import { post } from '@vue2-client/services/api/restTools'
-import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
-import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
-
-export default {
-  name: 'XFormTable',
-  components: {
-    XTable,
-    XForm,
-    XAddForm,
-    XImportExcel
-  },
-  data () {
-    return {
-      // Query参数文件内容加载中
-      mainLoading: false,
-      // Query参数文件内容加载完成
-      loaded: false,
-      // 是否展示表单
-      isFormShow: true,
-      // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
-      queryParams: null,
-      // 服务名称
-      serviceName: 'af-system',
-      // 表格列集合
-      tableColumns: [],
-      // 操作按钮集合
-      buttonState: {},
-      // 表格选择列Key集合
-      selectedRowKeys: [],
-      // 表格选择Row集合
-      selectedRows: [],
-      // 选中用于修改的id
-      selectId: undefined,
-      // 表单项集合
-      formItems: [],
-      // 表单
-      form: {},
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      // 当前业务类型：新增，修改
-      businessType: '',
-      // 是否显示新增/修改模态框
-      modelVisible: false,
-      // 修改业务时查询的单条业务数据
-      modifyModelData: {},
-      // 是否允许修改
-      isModify: false,
-      // 是否允许删除
-      isDelete: false,
-      // 新增，修改业务执行状态
-      loading: false,
-      // 被修改数据加载状态
-      editDataLoading: false,
-      // 是否为临时表
-      isTableTemp: false
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile']),
-    businessTitle () {
-      return this.businessType + this.title
-    }
-  },
-  props: {
-    // 业务名称
-    title: {
-      type: String,
-      default: ''
-    },
-    // 查询配置文件名
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    // 查询配置文件Json，用于查询配置生成器的预览
-    queryParamsJson: {
-      type: Object,
-      default: null
-    },
-    // 业务逻辑名称, 通过logic获取表单表格配置
-    logicName: {
-      type: String,
-      default: null
-    },
-    // 执行logic传递的参数
-    logicParam: {
-      type: Object,
-      default: () => {}
-    },
-    // 固定新增表单
-    fixedAddForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 固定查询表单
-    fixedQueryForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 预览模式
-    viewMode: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    },
-    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
-    showPagination: {
-      type: Boolean,
-      default: true
-    }
-  },
-  watch: {
-    logicParam: {
-      handler () {
-        this.getColumnJsonByLogic()
-      },
-      deep: true
-    },
-    fixedQueryForm: {
-      handler () {
-        if (this.queryParamsName) {
-          this.getColumnsJson()
-        } else if (this.queryParamsJson) {
-          this.getColumnsJsonBySource()
-        }
-        this.form = {}
-      },
-      deep: true
-    },
-    queryParamsJson: {
-      handler () {
-        this.getColumnsJsonBySource()
-      },
-      deep: true
-    },
-    queryParamsName: {
-      handler () {
-        this.getColumnsJson()
-      }
-    }
-  },
-  created () {
-    if (this.queryParamsName) {
-      this.getColumnsJson()
-    } else if (this.queryParamsJson) {
-      this.getColumnsJsonBySource()
-    }
-  },
-  methods: {
-    refreshTable (toFirstPage = true) {
-      this.$refs.xTable.refresh(toFirstPage)
-    },
-    clearRowKeys () {
-      this.$refs.xTable.clearRowKeys()
-    },
-    setParams (res) {
-      // 深拷贝json，避免筛选列报错
-      this.tableColumns = JSON.parse(JSON.stringify(res.columnJson))
-      this.formItems = res.formJson
-      this.buttonState = res.buttonState
-      this.serviceName = res.serviceName
-      this.mainLoading = false
-      this.loaded = true
-    },
-    getColumnsJson () {
-      this.form = {}
-      this.mainLoading = true
-      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
-        this.setParams(ret)
-      })
-    },
-    getColumnsJsonBySource () {
-      this.form = {}
-      this.mainLoading = true
-      post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
-        this.queryParams = res
-        this.setParams(res)
-      })
-    },
-    getColumnJsonByLogic () {
-      this.form = {}
-      this.mainLoading = true
-      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
-        this.queryParams = ret
-        this.setParams(ret)
-      })
-    },
-    // 查询表单提交
-    onSubmit (res) {
-      if (res.valid) {
-        // 表单赋值
-        this.form = res.form
-        // commit
-        this.$emit('afterSearchSubmit', res)
-      } else {
-        return false
-      }
-    },
-    // 新增/修改数据表单提交
-    onAddOrModify (res) {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止新增和修改')
-        return false
-      }
-      // 如果是临时表
-      if (this.isTableTemp) {
-        this.$emit('tempTableModify', res)
-        return
-      }
-      if (!res.valid) {
-        return false
-      }
-      this.loading = true
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        form: {},
-        businessType: this.businessType,
-        operator: this.currUser.name
-      }
-      if (this.businessType === '修改') {
-        // 将更新需要的主键值加入到表单中
-        const key = this.tableColumns[0].dataIndex
-        const realKey = this.getRealKey(key)
-        requestParameters.form[realKey] = this.selectId
-      }
-      for (const key of Object.keys(res.form)) {
-        const realKey = this.getRealKey(key)
-        requestParameters.form[realKey] = res.form[key]
-      }
-      addOrModify(requestParameters, this.serviceName).then(res => {
-        this.$message.success(this.businessType + '成功！')
-        this.loading = false
-        this.modelVisible = false
-        this.$refs.xTable.refresh(true)
-        // commit
-        this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
-      }).catch(e => {
-        this.loading = false
-        this.modelVisible = false
-        this.$message.error(this.businessType + '失败！')
-      })
-    },
-    // 刷新加载表格数据
-    loadData (requestParameters, callback) {
-      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.$emit('afterQuery', result)
-      callback(result)
-    },
-    // 详情按钮事件
-    action (record, id, actionType) {
-      this.$emit('action', record, id, actionType)
-    },
-    // 获取数据字段实际值
-    getRealKey (key) {
-      return key.substring(key.indexOf('_') + 1)
-    },
-    // 新增业务
-    addItem () {
-      this.businessType = '新增'
-      this.modifyModelData = {}
-      this.modelVisible = true
-    },
-    // 修改业务
-    editItem (selectId) {
-      this.businessType = '修改'
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        conditionParams: {},
-        pageNo: 1,
-        pageSize: 1
-      }
-      if (selectId === undefined) {
-        selectId = this.selectedRowKeys[0]
-      }
-      this.selectId = selectId
-      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = selectId
-      requestParameters.f_businessid = selectId
-      if (this.isTableTemp) {
-        this.$emit('tempTableEdit', requestParameters)
-        return
-      }
-      this.editDataLoading = true
-      queryWithResource(requestParameters, this.serviceName).then(res => {
-        this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
-        this.modelVisible = true
-        this.editDataLoading = false
-      })
-    },
-    // 删除业务
-    deleteItem () {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止删除')
-        return
-      }
-      Modal.confirm({
-        title: '提示',
-        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
-        confirmLoading: this.loading,
-        zIndex: 1001,
-        onOk: () => {
-          this.loading = true
-          const requestParameters = {
-            queryParamsName: this.queryParamsName,
-            idList: this.selectedRowKeys
-          }
-          remove(requestParameters, this.serviceName).then(res => {
-            this.loading = false
-            this.$message.success('删除成功！')
-            this.$refs.xTable.clearRowKeys()
-            this.$refs.xTable.refresh(true)
-            // afterDelete
-            this.$emit('afterDelete', { idList: requestParameters.idList })
-          }).catch(e => {
-            this.loading = false
-            this.$message.error('删除失败！')
-          })
-        },
-        onCancel () {}
-      })
-    },
-    // 导出选中或本页数据
-    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.$refs.xTable.selectedRows
-      } else {
-        exportData = this.$refs.xTable.dataSource
-      }
-      const data = this.formatJson(filterVal, exportData)
-      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
-    },
-    formatJson (filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    },
-    // 导出符合条件的数据
-    handleExportByQuery () {
-      const that = this
-      this.$confirm({
-        title: '是否确认导出?',
-        content: '此操作将导出当前条件下所有数据而非选中数据',
-        onOk () {
-          download({
-            queryParamsName: that.queryParamsName,
-            form: that.form,
-            type: 'exportData'
-          }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
-        },
-        onCancel () {}
-      })
-    },
-    // 查询表单部分显示/隐藏切换
-    toggleIsFormShow () {
-      this.isFormShow = !this.isFormShow
-    },
-    // 控制业务操作按钮组的显示
-    selectRow (rowKeys, rows) {
-      this.selectedRowKeys = rowKeys
-      this.selectedRows = rows
-      this.isModify = this.selectedRowKeys.length === 1
-      this.isDelete = this.selectedRowKeys.length > 0
-      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
-    },
-    // 创建临时表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
-          }
-        )
-    },
-    // 初始化临时表
-    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
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.btn-success {
-  color: #ffffff;
-}
-.btn-success:hover {
-  color: #ffffff !important;
-}
-.btn-success:focus {
-  color: #ffffff !important;
-}
-.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:hover {
-  color: #ffffff !important;
-}
-.btn-warn:focus {
-  color: #ffffff !important;
-}
-.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>
+  <a-skeleton :loading="mainLoading">
+    <template v-if="loaded">
+      <x-add-form
+        v-if="!buttonState || buttonState.add || buttonState.edit"
+        :business-title="businessTitle"
+        :business-type="businessType"
+        :fixedAddForm="fixedAddForm"
+        :json-data="formItems"
+        :service-name="serviceName"
+        :loading="loading"
+        :modify-model-data="modifyModelData"
+        :visible.sync="modelVisible"
+        @onSubmit="onAddOrModify"/>
+      <x-form
+        :is-show="isFormShow"
+        :json-data="formItems"
+        :service-name="serviceName"
+        style="margin-bottom: 14px;"
+        @onSubmit="onSubmit">
+        <slot></slot>
+      </x-form>
+      <x-table
+        ref="xTable"
+        :buttonState="buttonState"
+        :fixedQueryForm="fixedQueryForm"
+        :form="form"
+        :json-data="tableColumns"
+        :queryParams="queryParams"
+        :queryParamsName="queryParamsName"
+        :show-pagination="showPagination"
+        @action="action"
+        @loadData="loadData"
+        @selectRow="selectRow"
+        @toggleIsFormShow="toggleIsFormShow">
+        <template slot="expand">
+          <a-space>
+            <a-button v-if="!buttonState || buttonState.add" type="primary" @click="addItem">
+              <a-icon :style="iconStyle" type="plus"/>新增
+            </a-button>
+            <a-button
+              v-if="!buttonState || buttonState.edit"
+              :disabled="!isModify"
+              :loading="editDataLoading"
+              class="btn-success"
+              type="dashed"
+              @click="editItem()">
+              <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="$refs.importExcel.importExcelHandleOpen()">
+              <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 :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows" name="button"></slot>
+          </a-space>
+          <slot name="expand"></slot>
+        </template>
+        <!-- 底部插槽 -->
+        <template slot="footer">
+          <slot name="footer"></slot>
+        </template>
+      </x-table>
+      <!-- 上传文件 -->
+      <x-import-excel
+        ref="importExcel"
+        @ok="refreshTable"
+        :title="title"
+        :service-name="serviceName"
+        :query-params-name="queryParamsName"
+      />
+    </template>
+  </a-skeleton>
+</template>
+<script>
+import XForm from '@vue2-client/base-client/components/common/XForm'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
+import XTable from '@vue2-client/base-client/components/common/XTable'
+import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
+import { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+import { mapState } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { post } from '@vue2-client/services/api/restTools'
+import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
+import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
+
+export default {
+  name: 'XFormTable',
+  components: {
+    XTable,
+    XForm,
+    XAddForm,
+    XImportExcel
+  },
+  data () {
+    return {
+      // Query参数文件内容加载中
+      mainLoading: false,
+      // Query参数文件内容加载完成
+      loaded: false,
+      // 是否展示表单
+      isFormShow: true,
+      // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
+      queryParams: null,
+      // 服务名称
+      serviceName: 'af-system',
+      // 表格列集合
+      tableColumns: [],
+      // 操作按钮集合
+      buttonState: {},
+      // 表格选择列Key集合
+      selectedRowKeys: [],
+      // 表格选择Row集合
+      selectedRows: [],
+      // 选中用于修改的id
+      selectId: undefined,
+      // 表单项集合
+      formItems: [],
+      // 表单
+      form: {},
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      // 当前业务类型：新增，修改
+      businessType: '',
+      // 是否显示新增/修改模态框
+      modelVisible: false,
+      // 修改业务时查询的单条业务数据
+      modifyModelData: {},
+      // 是否允许修改
+      isModify: false,
+      // 是否允许删除
+      isDelete: false,
+      // 新增，修改业务执行状态
+      loading: false,
+      // 被修改数据加载状态
+      editDataLoading: false,
+      // 是否为临时表
+      isTableTemp: false
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile']),
+    businessTitle () {
+      return this.businessType + this.title
+    }
+  },
+  props: {
+    // 业务名称
+    title: {
+      type: String,
+      default: ''
+    },
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    // 查询配置文件Json，用于查询配置生成器的预览
+    queryParamsJson: {
+      type: Object,
+      default: null
+    },
+    // 业务逻辑名称, 通过logic获取表单表格配置
+    logicName: {
+      type: String,
+      default: null
+    },
+    // 执行logic传递的参数
+    logicParam: {
+      type: Object,
+      default: () => {}
+    },
+    // 固定新增表单
+    fixedAddForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 固定查询表单
+    fixedQueryForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 预览模式
+    viewMode: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
+    showPagination: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    logicParam: {
+      handler () {
+        this.getColumnJsonByLogic()
+      },
+      deep: true
+    },
+    fixedQueryForm: {
+      handler () {
+        this.refreshTable(true)
+      },
+      deep: true
+    },
+    queryParamsJson: {
+      handler () {
+        this.getColumnsJsonBySource()
+      },
+      deep: true
+    },
+    queryParamsName: {
+      handler () {
+        this.getColumnsJson()
+      }
+    }
+  },
+  created () {
+    if (this.queryParamsName) {
+      this.getColumnsJson()
+    } else if (this.queryParamsJson) {
+      this.getColumnsJsonBySource()
+    }
+  },
+  methods: {
+    refreshTable (toFirstPage = true) {
+      this.$refs.xTable.refresh(toFirstPage)
+    },
+    clearRowKeys () {
+      this.$refs.xTable.clearRowKeys()
+    },
+    setParams (res) {
+      // 深拷贝json，避免筛选列报错
+      this.tableColumns = JSON.parse(JSON.stringify(res.columnJson))
+      this.formItems = res.formJson
+      this.buttonState = res.buttonState
+      this.serviceName = res.serviceName
+      this.mainLoading = false
+      this.loaded = true
+    },
+    getColumnsJson () {
+      this.form = {}
+      this.mainLoading = true
+      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
+        this.setParams(ret)
+      })
+    },
+    getColumnsJsonBySource () {
+      this.form = {}
+      this.mainLoading = true
+      post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
+        this.queryParams = res
+        this.setParams(res)
+      })
+    },
+    getColumnJsonByLogic () {
+      this.form = {}
+      this.mainLoading = true
+      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
+        this.queryParams = ret
+        this.setParams(ret)
+      })
+    },
+    // 查询表单提交
+    onSubmit (res) {
+      if (res.valid) {
+        // 表单赋值
+        this.form = res.form
+        // commit
+        this.$emit('afterSearchSubmit', res)
+      } else {
+        return false
+      }
+    },
+    // 新增/修改数据表单提交
+    onAddOrModify (res) {
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止新增和修改')
+        return false
+      }
+      // 如果是临时表
+      if (this.isTableTemp) {
+        this.$emit('tempTableModify', res)
+        return
+      }
+      if (!res.valid) {
+        return false
+      }
+      this.loading = true
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        form: {},
+        businessType: this.businessType,
+        operator: this.currUser.name
+      }
+      if (this.businessType === '修改') {
+        // 将更新需要的主键值加入到表单中
+        const key = this.tableColumns[0].dataIndex
+        const realKey = this.getRealKey(key)
+        requestParameters.form[realKey] = this.selectId
+      }
+      for (const key of Object.keys(res.form)) {
+        const realKey = this.getRealKey(key)
+        requestParameters.form[realKey] = res.form[key]
+      }
+      addOrModify(requestParameters, this.serviceName).then(res => {
+        this.$message.success(this.businessType + '成功！')
+        this.loading = false
+        this.modelVisible = false
+        this.$refs.xTable.refresh(true)
+        // commit
+        this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
+      }).catch(e => {
+        this.loading = false
+        this.modelVisible = false
+        this.$message.error(this.businessType + '失败！')
+      })
+    },
+    // 刷新加载表格数据
+    loadData (requestParameters, callback) {
+      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.$emit('afterQuery', result)
+      callback(result)
+    },
+    // 详情按钮事件
+    action (record, id, actionType) {
+      this.$emit('action', record, id, actionType)
+    },
+    // 获取数据字段实际值
+    getRealKey (key) {
+      return key.substring(key.indexOf('_') + 1)
+    },
+    // 新增业务
+    addItem () {
+      this.businessType = '新增'
+      this.modifyModelData = {}
+      this.modelVisible = true
+    },
+    // 修改业务
+    editItem (selectId) {
+      this.businessType = '修改'
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        conditionParams: {},
+        pageNo: 1,
+        pageSize: 1
+      }
+      if (selectId === undefined) {
+        selectId = this.selectedRowKeys[0]
+      }
+      this.selectId = selectId
+      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = selectId
+      requestParameters.f_businessid = selectId
+      if (this.isTableTemp) {
+        this.$emit('tempTableEdit', requestParameters)
+        return
+      }
+      this.editDataLoading = true
+      queryWithResource(requestParameters, this.serviceName).then(res => {
+        this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
+        this.modelVisible = true
+        this.editDataLoading = false
+      })
+    },
+    // 删除业务
+    deleteItem () {
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止删除')
+        return
+      }
+      Modal.confirm({
+        title: '提示',
+        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
+        confirmLoading: this.loading,
+        zIndex: 1001,
+        onOk: () => {
+          this.loading = true
+          const requestParameters = {
+            queryParamsName: this.queryParamsName,
+            idList: this.selectedRowKeys
+          }
+          remove(requestParameters, this.serviceName).then(res => {
+            this.loading = false
+            this.$message.success('删除成功！')
+            this.$refs.xTable.clearRowKeys()
+            this.$refs.xTable.refresh(true)
+            // afterDelete
+            this.$emit('afterDelete', { idList: requestParameters.idList })
+          }).catch(e => {
+            this.loading = false
+            this.$message.error('删除失败！')
+          })
+        },
+        onCancel () {}
+      })
+    },
+    // 导出选中或本页数据
+    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.$refs.xTable.selectedRows
+      } else {
+        exportData = this.$refs.xTable.dataSource
+      }
+      const data = this.formatJson(filterVal, exportData)
+      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    // 导出符合条件的数据
+    handleExportByQuery () {
+      const that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          download({
+            queryParamsName: that.queryParamsName,
+            form: that.form,
+            type: 'exportData'
+          }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
+        },
+        onCancel () {}
+      })
+    },
+    // 查询表单部分显示/隐藏切换
+    toggleIsFormShow () {
+      this.isFormShow = !this.isFormShow
+    },
+    // 控制业务操作按钮组的显示
+    selectRow (rowKeys, rows) {
+      this.selectedRowKeys = rowKeys
+      this.selectedRows = rows
+      this.isModify = this.selectedRowKeys.length === 1
+      this.isDelete = this.selectedRowKeys.length > 0
+      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
+    },
+    // 创建临时表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
+          }
+        )
+    },
+    // 初始化临时表
+    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
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.btn-success {
+  color: #ffffff;
+}
+.btn-success:hover {
+  color: #ffffff !important;
+}
+.btn-success:focus {
+  color: #ffffff !important;
+}
+.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:hover {
+  color: #ffffff !important;
+}
+.btn-warn:focus {
+  color: #ffffff !important;
+}
+.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>