vue2-client 1.9.78 → 1.9.79

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

@@ -1,713 +1,713 @@
-<template>
-  <a-row type="flex" :gutter="{ xs: 8, sm: 10, md: 12, lg: 16 }">
-    <a-col
-      :xs="14"
-      :sm="14"
-      :md="12"
-      :lg="9"
-      :xl="6"
-      :xxl="5"
-      v-if="xTreeConfigName"
-      :style="{ maxWidth: '400px'}">
-      <x-tree-pro
-        :config-name="xTreeConfigName"
-        :env="env"
-        @action="action"
-        @btnFuncClick="treeBtnFuncClick"
-        @treeOnChecked="treeOnChecked"
-        ref="xtree"
-      ></x-tree-pro>
-    </a-col>
-    <a-col
-      :xs="xTreeConfigName ? 10 : 24"
-      :sm="xTreeConfigName ? 10 : 24"
-      :md="xTreeConfigName ? 12 : 24"
-      :lg="xTreeConfigName ? 15 : 24"
-      :xl="xTreeConfigName ? 18 : 24"
-      :xxl="xTreeConfigName ? 19 : 24">
-      <a-skeleton :loading="loading" :paragraph="{ rows: 4 }"/>
-      <a-row style="height: 12px" v-if="xTreeConfigName"></a-row>
-      <div v-show="!loading">
-        <template v-if="!loadError">
-          <x-add-form
-            ref="xAddForm"
-            @onLocalSubmit="onLocalSubmit"
-            @afterSubmit="onAddOrEditSubmitAfterSubmit"
-          >
-            <template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
-              <slot
-                name="groupFormItems"
-                :form="form"
-                :model="model"
-                :rules="rules"
-                :modifyModelData="modifyModelData"></slot>
-            </template>
-          </x-add-form>
-          <x-add-report
-            v-if="moveType"
-            ref="xAddReport"
-          >
-          </x-add-report>
-          <div v-if="crudTitle" class="crud_title">
-            {{ crudTitle }}
-          </div>
-          <x-form
-            ref="xForm"
-            @toggleAdvanced="toggleAdvanced"
-            @onSubmit="onSearchSubmit">
-            <slot name="formBtnExpand"></slot>
-          </x-form>
-          <x-table
-            ref="xTable"
-            :fixedQueryForm="fixedQueryForm"
-            :queryParamsName="queryParamsName"
-            :query-params-json="queryParamsJson"
-            :show-pagination="showPagination"
-            :customDelete="customDelete"
-            :extraHeight="extraHeight"
-            @add="add"
-            @move="move"
-            @edit="edit"
-            @del="del"
-            @rowChoose="rowChoose"
-            @afterDelete="afterDelete"
-            @action="action"
-            @selectRow="selectRow"
-            @afterQuery="afterQuery"
-            @columnClick="columnClick"
-            @editButtonStateDataClick="editButtonStateDataClick"
-            @importExcelOk="importExcelOk">
-            <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>
-            <template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
-              <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-              <a-tooltip title="收起查询条件" placement="bottom">
-                <a-button @click="toggleIsFormShow">
-                  <a-icon :style="iconStyle" :type="toggleIsFormIcon"/>
-                </a-button>
-              </a-tooltip>
-            </template>
-            <!-- 底部插槽 -->
-            <template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
-              <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-            </template>
-            <!--      excel导入说明插槽      -->
-            <template #importExcelSlot>
-              <slot name="importExcelSlot"></slot>
-            </template>
-          </x-table>
-        </template>
-        <template v-else>
-          <a-empty>
-            <span slot="description"> 页面配置不存在，请联系系统管理员</span>
-          </a-empty>
-        </template>
-      </div>
-    </a-col>
-  </a-row>
-</template>
-<script>
-import XForm from '@vue2-client/base-client/components/common/XForm'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
-import XAddReport from '@vue2-client/base-client/components/common/XAddReport'
-import XTable from '@vue2-client/base-client/components/common/XTable'
-import XTree from '@vue2-client/base-client/components/common/XTree'
-import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
-import {
-  getConfigByName,
-  getConfigByLogic,
-  parseConfig, runLogic, getConfigByNameAsync,
-} from '@vue2-client/services/api/common'
-import { mapState } from 'vuex'
-import XTreePro from '@vue2-client/base-client/components/common/XTree/XTreePro.vue'
-import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
-import util, { getRealKeyData } from '@vue2-client/utils/util'
-
-export default {
-  name: 'XFormTable',
-  components: {
-    XTreePro,
-    XTable,
-    XForm,
-    XTree,
-    XAddForm,
-    XAddReport,
-    XImportExcel
-  },
-  inject: ['getSelectedId', 'getSelectedData', 'getMixinData', 'getOutEnv', 'currUser'],
-  data () {
-    return {
-      // 加载状态
-      loading: false,
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      loadError: false,
-      moveType: false,
-      // 添加按钮对应的配置名
-      moveconfig: '',
-      // 实际查询配置内容
-      realQueryConfig: {},
-      toggleIsFormIcon: 'vertical-align-top',
-      table_selectedRowKeys: [],
-      table_selectedRows: []
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    // 业务名称
-    title: {
-      type: String,
-      default: ''
-    },
-    // 卡片标题
-    crudTitle: {
-      type: String,
-      default: null
-    },
-    // 查询配置文件名
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    // 配置所属命名空间
-    serviceName: {
-      type: String,
-      default: undefined
-    },
-    // 查询配置文件Json，用于查询配置生成器的预览
-    queryParamsJson: {
-      type: Object,
-      default: null
-    },
-    // xTree 配置
-    xTreeConfigName: {
-      type: String,
-      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
-      }
-    },
-    // 本地编辑模式
-    localEditMode: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    },
-    // 行选择模式
-    rowSelectMode: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    },
-    // 行选择模式-允许选中行数量，0：任意数量行，大于0：指定值数量的行
-    allowSelectRowNum: {
-      type: Number,
-      default: () => {
-        return 0
-      }
-    },
-    // 环境
-    env: {
-      type: String,
-      default: () => {
-        return 'prod'
-      }
-    },
-    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
-    showPagination: {
-      type: Boolean,
-      default: true
-    },
-    // 调用logic获取数据源的追加参数
-    getDataParams: {
-      type: Object,
-      default: undefined
-    },
-    // 可以控制组件中导出等按钮的隐藏
-    buttonState: {
-      type: Object,
-      default: undefined
-    },
-    // 是否自定义新增按钮的功能
-    customAdd: {
-      type: Boolean,
-      default: false
-    },
-    reportQueryName: {
-      type: String,
-      default: undefined,
-    },
-    // 是否自定义删除按钮的功能
-    customDelete: {
-      type: Boolean,
-      default: false
-    },
-    // 是否自定义修改按钮的功能
-    customEdit: {
-      type: Boolean,
-      default: false
-    },
-    // 是否自定义增加按钮
-    customMove: {
-      type: Boolean,
-      default: false
-    },
-    // 自适应底部边距
-    extraHeight: {
-      type: Number,
-      default: 80
-    }
-  },
-  watch: {
-    logicParam: {
-      handler () {
-        this.initConfig()
-      },
-      deep: true
-    },
-    queryParamsJson: {
-      handler () {
-        this.initConfig()
-      },
-      deep: true
-    },
-    queryParamsName: {
-      handler () {
-        this.initConfig()
-      }
-    },
-    serviceName: {
-      handler () {
-        this.initConfig()
-      }
-    }
-  },
-  methods: {
-    runLogic,
-    getRealKeyData,
-    getConfigByNameAsync,
-    getConfigByName,
-    columnClick (key, value, record) {
-      this.$emit('columnClick', key, value, record)
-    },
-    importExcelOk () {
-      this.$emit('importExcelOk')
-    },
-    initConfig () {
-      this.loading = true
-      this.loadError = false
-      if (this.queryParamsName) {
-        this.getConfig()
-      } else if (this.queryParamsJson) {
-        this.getConfigBySource()
-      } else if (this.logicName && this.logicParam) {
-        this.getColumnJsonByLogic()
-      } else {
-        this.loading = false
-        this.loadError = true
-      }
-    },
-
-    getConfig () {
-      getConfigByName(this.queryParamsName, this.serviceName, (res) => {
-        if (!res) {
-          this.loading = false
-          this.loadError = true
-          return
-        }
-        this.updateComponents(res)
-      }, this.env === 'dev')
-    },
-    getConfigBySource () {
-      parseConfig(this.queryParamsJson, 'CRUD_FORM', this.serviceName, this.env === 'dev').then(res => {
-        if (!res) {
-          this.loading = false
-          this.loadError = true
-          return
-        }
-        this.updateComponents(res, true)
-      })
-    },
-    getColumnJsonByLogic () {
-      getConfigByLogic(this.logicName, this.logicParam, this.serviceName, (res) => {
-        if (!res) {
-          this.loading = false
-          this.loadError = true
-          return
-        }
-        this.updateComponents(res, true)
-      }, this.env === 'dev')
-    },
-    /**
-     * 更新子组件
-     * @param res  参数
-     * @param setQueryParams 是否设置queryParams参数
-     */
-    updateComponents (res, setQueryParams) {
-      this.realQueryConfig = res
-      if (this.$refs.xTable && this.$refs.xForm && this.$refs.xAddForm) {
-        // 设置添加按钮对应的配置名
-        this.moveconfig = res.moveconfig
-        const initTable = () => {
-          // 初始化 xTable 子组件
-          this.$refs.xTable.init({
-            formItems: res.formJson,
-            primaryKey: res.primaryKey,
-            createdQuery: res.createdQuery,
-            queryParams: setQueryParams ? res : null,
-            tableColumns: res.columnJson,
-            buttonState: Object.assign(res.buttonState, this.buttonState),
-            buttonPermissions: res.buttonPermissions,
-            editButtonStateData: res.editButtonStateData,
-            title: this.title,
-            viewMode: this.viewMode,
-            localEditMode: this.localEditMode,
-            rowSelectMode: this.rowSelectMode,
-            allowSelectRowNum: this.allowSelectRowNum,
-            tableSummaryMap: res.tableSummaryMap,
-            serviceName: this.serviceName,
-            env: this.env,
-            form: this.$refs.xForm.form,
-            allowedCardMode: res.allowedCardMode,
-            cardModeConfig: res.cardModeConfig,
-            createdEditMode: res.createdEditMode,
-            summaryUpdate: true,
-            simpleMode: res.simpleMode
-          })
-          if (this.realQueryConfig?.funcData?.pageMounted) {
-            executeStrFunctionByContext(this, this.realQueryConfig.funcData.pageMounted, [util, runLogic, getConfigByNameAsync])
-          }
-        }
-        // 初始化 xForm 子组件
-        if (!this.localEditMode && !this.rowSelectMode) {
-          this.$refs.xForm.init({
-            formItems: res.formJson,
-            serviceName: this.serviceName,
-            getDataParams: this.getDataParams,
-            simpleMode: res.simpleMode,
-            env: this.env
-          })
-        } else {
-          // TODO 此处应删除
-          initTable()
-        }
-        // 初始化 xTable 子组件
-        // 等待 x-from-item 的 mounted 完成
-        this.$refs.xForm.$on('itemsMounted', initTable)
-      }
-      this.loading = false
-    },
-    // 自定义按钮
-    editButtonStateDataClick (functionName, rows) {
-      console.log('functionName', functionName)
-      console.log('rows', rows)
-      this.$emit(functionName, rows)
-    },
-
-    /**
-     * 提交查询表单事件
-     * @param res  参数
-     */
-    onSearchSubmit (res) {
-      if (res.valid) {
-        // 表单赋值
-        this.$refs.xTable.setQueryForm(res.form)
-        this.$refs.xTable.summaryUpdate = true
-        // commit
-        this.$emit('afterSearchSubmit', res)
-      } else {
-        return false
-      }
-    },
-    active (props) {
-      let num = false
-      for (const key in props) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (this.$props.hasOwnProperty(key)) {
-          if (this.$props[key] instanceof Object) {
-            this.$props[key] = JSON.parse(props[key])
-          } else {
-            this.$props[key] = props[key]
-          }
-          num = true
-        }
-      }
-      if (num) {
-        this.initConfig()
-      }
-    },
-    /**
-     * 提交新增/修改表单后事件
-     */
-    onAddOrEditSubmitAfterSubmit (res) {
-      this.refreshTable(res.businessType === '新增')
-      // commit
-      this.$emit('afterSubmit', res)
-    },
-    /**
-     * 表格查询后事件
-     * @param res  参数
-     * @param conditionParams 查询条件
-     */
-    afterQuery (res, conditionParams) {
-      this.$emit('afterQuery', res, conditionParams)
-    },
-    /**
-     * 详情按钮事件
-     * @param record 本条数据
-     * @param id 数据标识
-     * @param actionType 操作类型
-     * @param fun 向上级传递的事件
-     */
-    action (record, id, actionType, fun = 'action') {
-      this.$emit(fun, record, id, actionType)
-    },
-    treeOnChecked (checkedKeys, deepNodes, deepKeys) {
-      this.$emit('treeOnChecked', checkedKeys, deepNodes, deepKeys)
-    },
-    treeBtnFuncClick (index, func) {
-      this.$emit('treeBtnFuncClick', index, func)
-    },
-    /**
-     * 新增按钮事件
-     */
-    add () {
-      if (this.customAdd) {
-        this.$emit('add')
-      } else {
-        const res = this.realQueryConfig
-        this.$refs.xAddForm.init({
-          businessType: '新增',
-          title: this.title,
-          isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
-          configName: this.queryParamsName,
-          configContent: this.queryParamsJson,
-          formItems: res.formJson,
-          viewMode: this.viewMode,
-          localEditMode: this.localEditMode,
-          isHandleFormKey: this.localEditMode ? false : undefined,
-          serviceName: this.serviceName,
-          fixedAddForm: this.fixedAddForm,
-          getDataParams: this.getDataParams,
-          layout: res.xAddFormLayout || 'horizontal',
-          env: this.env
-        })
-      }
-    },
-    /**
-     * 添加按钮事件
-     */
-    move () {
-      this.moveType = true
-      this.$nextTick(
-        () => {
-          this.$refs.xAddReport.init({
-            configName: this.moveconfig,
-            selectedId: this.fixedAddForm.selected_id
-          })
-        }
-      )
-    },
-    /**
-     * 修改按钮事件
-     * @param modifyModelData 修改表单数据
-     */
-    edit (modifyModelData) {
-      if (this.customEdit) {
-        this.$emit('edit')
-      } else {
-        const res = this.realQueryConfig
-        this.$refs.xAddForm.init({
-          businessType: '修改',
-          title: this.title,
-          isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
-          configName: this.queryParamsName,
-          configContent: this.queryParamsJson,
-          formItems: res.formJson,
-          viewMode: this.viewMode,
-          localEditMode: this.localEditMode,
-          isHandleFormKey: this.localEditMode ? false : undefined,
-          serviceName: this.serviceName,
-          fixedAddForm: this.fixedAddForm,
-          getDataParams: this.getDataParams,
-          modifyModelData: modifyModelData,
-          layout: res.xAddFormLayout || 'horizontal',
-          env: this.env
-        })
-      }
-    },
-    /**
-     * 删除按钮事件
-     */
-    del (keys, callback) {
-      if (this.customDelete) {
-        this.$emit('del', keys, callback)
-      }
-    },
-    /**
-     * 删除后事件
-     * @param res
-     */
-    afterDelete (res) {
-      this.$emit('afterDelete', res)
-    },
-    /**
-     * 行选择事件
-     * @param row 选中行
-     */
-    rowChoose (row) {
-      this.$emit('rowChoose', row)
-    },
-    /**
-     * 更多条件是否展示
-     */
-    toggleAdvanced () {
-      this.$refs.xTable.setScrollYHeight({})
-    },
-    /**
-     * 查询表单部分显示/隐藏切换
-     */
-    toggleIsFormShow () {
-      this.toggleIsFormIcon = this.toggleIsFormIcon === 'vertical-align-top' ? 'vertical-align-bottom' : 'vertical-align-top'
-      this.$refs.xForm.toggleVisible()
-      this.$refs.xTable.setScrollYHeight({})
-    },
-    /**
-     * 选择列事件
-     * @param selectedRowKeys 选中列Key集合
-     * @param selectedRows 选中列
-     */
-    selectRow (selectedRowKeys, selectedRows) {
-      this.table_selectedRowKeys = selectedRowKeys
-      this.table_selectedRows = selectedRows
-      this.$emit('selectRow', selectedRowKeys, selectedRows)
-    },
-    /**
-     * 清除勾选数据
-     */
-    clearRowKeys () {
-      this.$refs.xTable.clearRowKeys()
-    },
-    /**
-     * 刷新表格
-     * @param toFirstPage 是否到第一页
-     */
-    refreshTable (toFirstPage = true) {
-      this.$refs.xTable.refresh(toFirstPage)
-    },
-    /**
-     * 刷新表格
-     * @param toFirstPage 是否到第一页
-     */
-    refresh (toFirstPage = true) {
-      this.$refs.xTable.refresh(toFirstPage)
-    },
-    /**
-     * 获取表格数据
-     */
-    getTableData () {
-      return this.$refs.xTable.getTableData()
-    },
-    /**
-     * 表单本地提交
-     */
-    onLocalSubmit (res, callback) {
-      const form = res.realForm
-      if (res.businessType === '新增') {
-        this.$refs.xTable.appendLocalData(form)
-      } else {
-        this.$refs.xTable.modifyLocalData(form['序号'], form)
-      }
-      this.$message.success(res.businessType + '成功！')
-      this.onAddOrEditSubmitAfterSubmit(res, callback)
-      if (callback) {
-        callback()
-      }
-    }
-  },
-  action: {
-    /**
-     * 实现doAction方法
-     */
-    doAction (actionType, args, data) {
-      switch (actionType) {
-        case 'refreshTable':
-          for (const item in args) {
-            console.log('item', item)
-          }
-          break
-        default:
-          break
-      }
-    }
-  },
-  mounted () {
-    this.initConfig()
-    if (this.getSelectedData && typeof this.getSelectedData === 'function') {
-      const selectedId = this.getSelectedData()
-      if (typeof selectedId === 'object') {
-        const data = JSON.parse(JSON.stringify(selectedId))
-        if (data.selectedId) {
-          data.selected_id = data.selectedId
-          delete data.selectedId
-        }
-        Object.assign(this.fixedAddForm, data)
-        Object.assign(this.fixedQueryForm, data)
-      } else {
-        Object.assign(this.fixedAddForm, { selected_id: selectedId })
-        Object.assign(this.fixedQueryForm, { selected_id: selectedId })
-      }
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.crud_title {
-  height: 32px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #000000d9;
-  line-height: 32px;
-  margin-bottom: 12px;
-}
-</style>
+<template>
+  <a-row type="flex" :gutter="{ xs: 8, sm: 10, md: 12, lg: 16 }">
+    <a-col
+      :xs="14"
+      :sm="14"
+      :md="12"
+      :lg="9"
+      :xl="6"
+      :xxl="5"
+      v-if="xTreeConfigName"
+      :style="{ maxWidth: '400px'}">
+      <x-tree-pro
+        :config-name="xTreeConfigName"
+        :env="env"
+        @action="action"
+        @btnFuncClick="treeBtnFuncClick"
+        @treeOnChecked="treeOnChecked"
+        ref="xtree"
+      ></x-tree-pro>
+    </a-col>
+    <a-col
+      :xs="xTreeConfigName ? 10 : 24"
+      :sm="xTreeConfigName ? 10 : 24"
+      :md="xTreeConfigName ? 12 : 24"
+      :lg="xTreeConfigName ? 15 : 24"
+      :xl="xTreeConfigName ? 18 : 24"
+      :xxl="xTreeConfigName ? 19 : 24">
+      <a-skeleton :loading="loading" :paragraph="{ rows: 4 }"/>
+      <a-row style="height: 12px" v-if="xTreeConfigName"></a-row>
+      <div v-show="!loading">
+        <template v-if="!loadError">
+          <x-add-form
+            ref="xAddForm"
+            @onLocalSubmit="onLocalSubmit"
+            @afterSubmit="onAddOrEditSubmitAfterSubmit"
+          >
+            <template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
+              <slot
+                name="groupFormItems"
+                :form="form"
+                :model="model"
+                :rules="rules"
+                :modifyModelData="modifyModelData"></slot>
+            </template>
+          </x-add-form>
+          <x-add-report
+            v-if="moveType"
+            ref="xAddReport"
+          >
+          </x-add-report>
+          <div v-if="crudTitle" class="crud_title">
+            {{ crudTitle }}
+          </div>
+          <x-form
+            ref="xForm"
+            @toggleAdvanced="toggleAdvanced"
+            @onSubmit="onSearchSubmit">
+            <slot name="formBtnExpand"></slot>
+          </x-form>
+          <x-table
+            ref="xTable"
+            :fixedQueryForm="fixedQueryForm"
+            :queryParamsName="queryParamsName"
+            :query-params-json="queryParamsJson"
+            :show-pagination="showPagination"
+            :customDelete="customDelete"
+            :extraHeight="extraHeight"
+            @add="add"
+            @move="move"
+            @edit="edit"
+            @del="del"
+            @rowChoose="rowChoose"
+            @afterDelete="afterDelete"
+            @action="action"
+            @selectRow="selectRow"
+            @afterQuery="afterQuery"
+            @columnClick="columnClick"
+            @editButtonStateDataClick="editButtonStateDataClick"
+            @importExcelOk="importExcelOk">
+            <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>
+            <template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
+              <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+              <a-tooltip title="收起查询条件" placement="bottom">
+                <a-button @click="toggleIsFormShow">
+                  <a-icon :style="iconStyle" :type="toggleIsFormIcon"/>
+                </a-button>
+              </a-tooltip>
+            </template>
+            <!-- 底部插槽 -->
+            <template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
+              <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+            </template>
+            <!--      excel导入说明插槽      -->
+            <template #importExcelSlot>
+              <slot name="importExcelSlot"></slot>
+            </template>
+          </x-table>
+        </template>
+        <template v-else>
+          <a-empty>
+            <span slot="description"> 页面配置不存在，请联系系统管理员</span>
+          </a-empty>
+        </template>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+<script>
+import XForm from '@vue2-client/base-client/components/common/XForm'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
+import XAddReport from '@vue2-client/base-client/components/common/XAddReport'
+import XTable from '@vue2-client/base-client/components/common/XTable'
+import XTree from '@vue2-client/base-client/components/common/XTree'
+import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
+import {
+  getConfigByName,
+  getConfigByLogic,
+  parseConfig, runLogic, getConfigByNameAsync,
+} from '@vue2-client/services/api/common'
+import { mapState } from 'vuex'
+import XTreePro from '@vue2-client/base-client/components/common/XTree/XTreePro.vue'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+import util, { getRealKeyData } from '@vue2-client/utils/util'
+
+export default {
+  name: 'XFormTable',
+  components: {
+    XTreePro,
+    XTable,
+    XForm,
+    XTree,
+    XAddForm,
+    XAddReport,
+    XImportExcel
+  },
+  inject: ['getSelectedId', 'getSelectedData', 'getMixinData', 'getOutEnv', 'currUser'],
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      loadError: false,
+      moveType: false,
+      // 添加按钮对应的配置名
+      moveconfig: '',
+      // 实际查询配置内容
+      realQueryConfig: {},
+      toggleIsFormIcon: 'vertical-align-top',
+      table_selectedRowKeys: [],
+      table_selectedRows: []
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    // 业务名称
+    title: {
+      type: String,
+      default: ''
+    },
+    // 卡片标题
+    crudTitle: {
+      type: String,
+      default: null
+    },
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    // 配置所属命名空间
+    serviceName: {
+      type: String,
+      default: undefined
+    },
+    // 查询配置文件Json，用于查询配置生成器的预览
+    queryParamsJson: {
+      type: Object,
+      default: null
+    },
+    // xTree 配置
+    xTreeConfigName: {
+      type: String,
+      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
+      }
+    },
+    // 本地编辑模式
+    localEditMode: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    // 行选择模式
+    rowSelectMode: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    // 行选择模式-允许选中行数量，0：任意数量行，大于0：指定值数量的行
+    allowSelectRowNum: {
+      type: Number,
+      default: () => {
+        return 0
+      }
+    },
+    // 环境
+    env: {
+      type: String,
+      default: () => {
+        return 'prod'
+      }
+    },
+    // 数据只有一页时是否展示分页，true：展示，auto：隐藏
+    showPagination: {
+      type: Boolean,
+      default: true
+    },
+    // 调用logic获取数据源的追加参数
+    getDataParams: {
+      type: Object,
+      default: undefined
+    },
+    // 可以控制组件中导出等按钮的隐藏
+    buttonState: {
+      type: Object,
+      default: undefined
+    },
+    // 是否自定义新增按钮的功能
+    customAdd: {
+      type: Boolean,
+      default: false
+    },
+    reportQueryName: {
+      type: String,
+      default: undefined,
+    },
+    // 是否自定义删除按钮的功能
+    customDelete: {
+      type: Boolean,
+      default: false
+    },
+    // 是否自定义修改按钮的功能
+    customEdit: {
+      type: Boolean,
+      default: false
+    },
+    // 是否自定义增加按钮
+    customMove: {
+      type: Boolean,
+      default: false
+    },
+    // 自适应底部边距
+    extraHeight: {
+      type: Number,
+      default: 80
+    }
+  },
+  watch: {
+    logicParam: {
+      handler () {
+        this.initConfig()
+      },
+      deep: true
+    },
+    queryParamsJson: {
+      handler () {
+        this.initConfig()
+      },
+      deep: true
+    },
+    queryParamsName: {
+      handler () {
+        this.initConfig()
+      }
+    },
+    serviceName: {
+      handler () {
+        this.initConfig()
+      }
+    }
+  },
+  methods: {
+    runLogic,
+    getRealKeyData,
+    getConfigByNameAsync,
+    getConfigByName,
+    columnClick (key, value, record) {
+      this.$emit('columnClick', key, value, record)
+    },
+    importExcelOk () {
+      this.$emit('importExcelOk')
+    },
+    initConfig () {
+      this.loading = true
+      this.loadError = false
+      if (this.queryParamsName) {
+        this.getConfig()
+      } else if (this.queryParamsJson) {
+        this.getConfigBySource()
+      } else if (this.logicName && this.logicParam) {
+        this.getColumnJsonByLogic()
+      } else {
+        this.loading = false
+        this.loadError = true
+      }
+    },
+
+    getConfig () {
+      getConfigByName(this.queryParamsName, this.serviceName, (res) => {
+        if (!res) {
+          this.loading = false
+          this.loadError = true
+          return
+        }
+        this.updateComponents(res)
+      }, this.env === 'dev')
+    },
+    getConfigBySource () {
+      parseConfig(this.queryParamsJson, 'CRUD_FORM', this.serviceName, this.env === 'dev').then(res => {
+        if (!res) {
+          this.loading = false
+          this.loadError = true
+          return
+        }
+        this.updateComponents(res, true)
+      })
+    },
+    getColumnJsonByLogic () {
+      getConfigByLogic(this.logicName, this.logicParam, this.serviceName, (res) => {
+        if (!res) {
+          this.loading = false
+          this.loadError = true
+          return
+        }
+        this.updateComponents(res, true)
+      }, this.env === 'dev')
+    },
+    /**
+     * 更新子组件
+     * @param res  参数
+     * @param setQueryParams 是否设置queryParams参数
+     */
+    updateComponents (res, setQueryParams) {
+      this.realQueryConfig = res
+      if (this.$refs.xTable && this.$refs.xForm && this.$refs.xAddForm) {
+        // 设置添加按钮对应的配置名
+        this.moveconfig = res.moveconfig
+        const initTable = () => {
+          // 初始化 xTable 子组件
+          this.$refs.xTable.init({
+            formItems: res.formJson,
+            primaryKey: res.primaryKey,
+            createdQuery: res.createdQuery,
+            queryParams: setQueryParams ? res : null,
+            tableColumns: res.columnJson,
+            buttonState: Object.assign(res.buttonState, this.buttonState),
+            buttonPermissions: res.buttonPermissions,
+            editButtonStateData: res.editButtonStateData,
+            title: this.title,
+            viewMode: this.viewMode,
+            localEditMode: this.localEditMode,
+            rowSelectMode: this.rowSelectMode,
+            allowSelectRowNum: this.allowSelectRowNum,
+            tableSummaryMap: res.tableSummaryMap,
+            serviceName: this.serviceName,
+            env: this.env,
+            form: this.$refs.xForm.form,
+            allowedCardMode: res.allowedCardMode,
+            cardModeConfig: res.cardModeConfig,
+            createdEditMode: res.createdEditMode,
+            summaryUpdate: true,
+            simpleMode: res.simpleMode
+          })
+          if (this.realQueryConfig?.funcData?.pageMounted) {
+            executeStrFunctionByContext(this, this.realQueryConfig.funcData.pageMounted, [util, runLogic, getConfigByNameAsync])
+          }
+        }
+        // 初始化 xForm 子组件
+        if (!this.localEditMode && !this.rowSelectMode) {
+          this.$refs.xForm.init({
+            formItems: res.formJson,
+            serviceName: this.serviceName,
+            getDataParams: this.getDataParams,
+            simpleMode: res.simpleMode,
+            env: this.env
+          })
+        } else {
+          // TODO 此处应删除
+          initTable()
+        }
+        // 初始化 xTable 子组件
+        // 等待 x-from-item 的 mounted 完成
+        this.$refs.xForm.$on('itemsMounted', initTable)
+      }
+      this.loading = false
+    },
+    // 自定义按钮
+    editButtonStateDataClick (functionName, rows) {
+      console.log('functionName', functionName)
+      console.log('rows', rows)
+      this.$emit(functionName, rows)
+    },
+
+    /**
+     * 提交查询表单事件
+     * @param res  参数
+     */
+    onSearchSubmit (res) {
+      if (res.valid) {
+        // 表单赋值
+        this.$refs.xTable.setQueryForm(res.form)
+        this.$refs.xTable.summaryUpdate = true
+        // commit
+        this.$emit('afterSearchSubmit', res)
+      } else {
+        return false
+      }
+    },
+    active (props) {
+      let num = false
+      for (const key in props) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (this.$props.hasOwnProperty(key)) {
+          if (this.$props[key] instanceof Object) {
+            this.$props[key] = JSON.parse(props[key])
+          } else {
+            this.$props[key] = props[key]
+          }
+          num = true
+        }
+      }
+      if (num) {
+        this.initConfig()
+      }
+    },
+    /**
+     * 提交新增/修改表单后事件
+     */
+    onAddOrEditSubmitAfterSubmit (res) {
+      this.refreshTable(res.businessType === '新增')
+      // commit
+      this.$emit('afterSubmit', res)
+    },
+    /**
+     * 表格查询后事件
+     * @param res  参数
+     * @param conditionParams 查询条件
+     */
+    afterQuery (res, conditionParams) {
+      this.$emit('afterQuery', res, conditionParams)
+    },
+    /**
+     * 详情按钮事件
+     * @param record 本条数据
+     * @param id 数据标识
+     * @param actionType 操作类型
+     * @param fun 向上级传递的事件
+     */
+    action (record, id, actionType, fun = 'action') {
+      this.$emit(fun, record, id, actionType)
+    },
+    treeOnChecked (checkedKeys, deepNodes, deepKeys) {
+      this.$emit('treeOnChecked', checkedKeys, deepNodes, deepKeys)
+    },
+    treeBtnFuncClick (index, func) {
+      this.$emit('treeBtnFuncClick', index, func)
+    },
+    /**
+     * 新增按钮事件
+     */
+    add () {
+      if (this.customAdd) {
+        this.$emit('add')
+      } else {
+        const res = this.realQueryConfig
+        this.$refs.xAddForm.init({
+          businessType: '新增',
+          title: this.title,
+          isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
+          configName: this.queryParamsName,
+          configContent: this.queryParamsJson,
+          formItems: res.formJson,
+          viewMode: this.viewMode,
+          localEditMode: this.localEditMode,
+          isHandleFormKey: this.localEditMode ? false : undefined,
+          serviceName: this.serviceName,
+          fixedAddForm: this.fixedAddForm,
+          getDataParams: this.getDataParams,
+          layout: res.xAddFormLayout || 'horizontal',
+          env: this.env
+        })
+      }
+    },
+    /**
+     * 添加按钮事件
+     */
+    move () {
+      this.moveType = true
+      this.$nextTick(
+        () => {
+          this.$refs.xAddReport.init({
+            configName: this.moveconfig,
+            selectedId: this.fixedAddForm.selected_id
+          })
+        }
+      )
+    },
+    /**
+     * 修改按钮事件
+     * @param modifyModelData 修改表单数据
+     */
+    edit (modifyModelData) {
+      if (this.customEdit) {
+        this.$emit('edit')
+      } else {
+        const res = this.realQueryConfig
+        this.$refs.xAddForm.init({
+          businessType: '修改',
+          title: this.title,
+          isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
+          configName: this.queryParamsName,
+          configContent: this.queryParamsJson,
+          formItems: res.formJson,
+          viewMode: this.viewMode,
+          localEditMode: this.localEditMode,
+          isHandleFormKey: this.localEditMode ? false : undefined,
+          serviceName: this.serviceName,
+          fixedAddForm: this.fixedAddForm,
+          getDataParams: this.getDataParams,
+          modifyModelData: modifyModelData,
+          layout: res.xAddFormLayout || 'horizontal',
+          env: this.env
+        })
+      }
+    },
+    /**
+     * 删除按钮事件
+     */
+    del (keys, callback) {
+      if (this.customDelete) {
+        this.$emit('del', keys, callback)
+      }
+    },
+    /**
+     * 删除后事件
+     * @param res
+     */
+    afterDelete (res) {
+      this.$emit('afterDelete', res)
+    },
+    /**
+     * 行选择事件
+     * @param row 选中行
+     */
+    rowChoose (row) {
+      this.$emit('rowChoose', row)
+    },
+    /**
+     * 更多条件是否展示
+     */
+    toggleAdvanced () {
+      this.$refs.xTable.setScrollYHeight({})
+    },
+    /**
+     * 查询表单部分显示/隐藏切换
+     */
+    toggleIsFormShow () {
+      this.toggleIsFormIcon = this.toggleIsFormIcon === 'vertical-align-top' ? 'vertical-align-bottom' : 'vertical-align-top'
+      this.$refs.xForm.toggleVisible()
+      this.$refs.xTable.setScrollYHeight({})
+    },
+    /**
+     * 选择列事件
+     * @param selectedRowKeys 选中列Key集合
+     * @param selectedRows 选中列
+     */
+    selectRow (selectedRowKeys, selectedRows) {
+      this.table_selectedRowKeys = selectedRowKeys
+      this.table_selectedRows = selectedRows
+      this.$emit('selectRow', selectedRowKeys, selectedRows)
+    },
+    /**
+     * 清除勾选数据
+     */
+    clearRowKeys () {
+      this.$refs.xTable.clearRowKeys()
+    },
+    /**
+     * 刷新表格
+     * @param toFirstPage 是否到第一页
+     */
+    refreshTable (toFirstPage = true) {
+      this.$refs.xTable.refresh(toFirstPage)
+    },
+    /**
+     * 刷新表格
+     * @param toFirstPage 是否到第一页
+     */
+    refresh (toFirstPage = true) {
+      this.$refs.xTable.refresh(toFirstPage)
+    },
+    /**
+     * 获取表格数据
+     */
+    getTableData () {
+      return this.$refs.xTable.getTableData()
+    },
+    /**
+     * 表单本地提交
+     */
+    onLocalSubmit (res, callback) {
+      const form = res.realForm
+      if (res.businessType === '新增') {
+        this.$refs.xTable.appendLocalData(form)
+      } else {
+        this.$refs.xTable.modifyLocalData(form['序号'], form)
+      }
+      this.$message.success(res.businessType + '成功！')
+      this.onAddOrEditSubmitAfterSubmit(res, callback)
+      if (callback) {
+        callback()
+      }
+    }
+  },
+  action: {
+    /**
+     * 实现doAction方法
+     */
+    doAction (actionType, args, data) {
+      switch (actionType) {
+        case 'refreshTable':
+          for (const item in args) {
+            console.log('item', item)
+          }
+          break
+        default:
+          break
+      }
+    }
+  },
+  mounted () {
+    this.initConfig()
+    if (this.getSelectedData && typeof this.getSelectedData === 'function') {
+      const selectedId = this.getSelectedData()
+      if (typeof selectedId === 'object') {
+        const data = JSON.parse(JSON.stringify(selectedId))
+        if (data.selectedId) {
+          data.selected_id = data.selectedId
+          delete data.selectedId
+        }
+        Object.assign(this.fixedAddForm, data)
+        Object.assign(this.fixedQueryForm, data)
+      } else {
+        Object.assign(this.fixedAddForm, { selected_id: selectedId })
+        Object.assign(this.fixedQueryForm, { selected_id: selectedId })
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.crud_title {
+  height: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #000000d9;
+  line-height: 32px;
+  margin-bottom: 12px;
+}
+</style>