vue2-client 1.8.11 → 1.8.13

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

@@ -1,384 +1,347 @@
-<template>
-  <div>
-    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
-    <div v-show="!loading">
-      <template v-if="!loadError">
-        <x-add-form
-          ref="xAddForm"
-          @afterSubmit="onAddOrEditSubmitAfterSubmit"
-        />
-        <x-form
-          ref="xForm"
-          style="margin-bottom: 14px;"
-          @onSubmit="onSearchSubmit">
-          <slot name="formBtnExpand"></slot>
-        </x-form>
-        <x-table
-          ref="xTable"
-          :fixedQueryForm="fixedQueryForm"
-          :queryParamsName="queryParamsName"
-          :query-params-json="queryParamsJson"
-          :show-pagination="showPagination"
-          @add="add"
-          @edit="edit"
-          @afterDelete="afterDelete"
-          @action="action"
-          @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>
-          <template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
-            <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-            <a-button @click="toggleIsFormShow">
-              <a-icon :style="iconStyle" type="vertical-align-top"/>
-            </a-button>
-          </template>
-          <!-- 底部插槽 -->
-          <template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
-            <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-          </template>
-        </x-table>
-      </template>
-      <template v-else>
-        <a-empty>
-          <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
-        </a-empty>
-      </template>
-    </div>
-  </div>
-</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 { getConfigByName, getConfigByLogic, parseConfig } from '@vue2-client/services/api/common'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'XFormTable',
-  components: {
-    XTable,
-    XForm,
-    XAddForm,
-    XImportExcel
-  },
-  data () {
-    return {
-      // 加载状态
-      loading: false,
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      loadError: false,
-      // 实际查询配置内容
-      realQueryConfig: {}
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    // 业务名称
-    title: {
-      type: String,
-      default: ''
-    },
-    // 查询配置文件名
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    // 配置所属命名空间
-    serviceName: {
-      type: String,
-      default: undefined
-    },
-    // 查询配置文件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
-    },
-    // 调用logic获取数据源的追加参数
-    getDataParams: {
-      type: Object,
-      default: undefined
-    }
-  },
-  watch: {
-    logicParam: {
-      handler () {
-        this.initConfig()
-      },
-      deep: true
-    },
-    queryParamsJson: {
-      handler () {
-        this.initConfig()
-      },
-      deep: true
-    },
-    queryParamsName: {
-      handler () {
-        this.initConfig()
-      }
-    }
-  },
-  created () {
-    this.initConfig()
-  },
-  methods: {
-    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) => {
-        console.warn('getConfigBySource', res)
-        this.updateComponents(res)
-      })
-    },
-    getConfigBySource () {
-      parseConfig(this.queryParamsJson, 'CRUD_FORM', this.serviceName).then(res => {
-        this.updateComponents(res, true)
-      })
-    },
-    getColumnJsonByLogic () {
-      getConfigByLogic(this.logicName, this.logicParam, this.serviceName, (res) => {
-        this.updateComponents(res, true)
-      })
-    },
-    /**
-     * 更新子组件
-     * @param res  参数
-     * @param setQueryParams 是否设置queryParams参数
-     */
-    updateComponents (res, setQueryParams) {
-      this.realQueryConfig = res
-      if (this.$refs.xTable && this.$refs.xForm && this.$refs.xAddForm) {
-        this.$refs.xTable.init({
-          queryParams: setQueryParams ? res : null,
-          tableColumns: res.columnJson,
-          buttonState: res.buttonState,
-          title: this.title,
-          viewMode: this.viewMode,
-          isTableTemp: this.isTableTemp,
-          serviceName: this.serviceName
-        })
-        this.$refs.xForm.init({
-          formItems: res.formJson,
-          serviceName: this.serviceName,
-          getDataParams: this.getDataParams
-        })
-      }
-      this.loading = false
-    },
-    /**
-     * 提交查询表单事件
-     * @param res  参数
-     */
-    onSearchSubmit (res) {
-      if (res.valid) {
-        // 表单赋值
-        this.$refs.xTable.setQueryForm(res.form)
-        // 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)) {
-          console.log('key', this.$props[key] instanceof Object)
-          if (this.$props[key] instanceof Object) {
-            this.$props[key] = JSON.parse(props[key])
-          } else {
-            this.$props[key] = props[key]
-          }
-          num = true
-        }
-        console.log(key, props[key])
-      }
-      console.warn('activeProps', this.$props)
-      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 操作类型
-     */
-    action (record, id, actionType) {
-      this.$emit('action', record, id, actionType)
-    },
-    /**
-     * 新增按钮事件
-     */
-    add () {
-      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,
-        isTableTemp: this.isTableTemp,
-        serviceName: this.serviceName,
-        fixedAddForm: this.fixedAddForm,
-        getDataParams: this.getDataParams
-      })
-    },
-    /**
-     * 修改按钮事件
-     * @param modifyModelData 修改表单数据
-     */
-    edit (modifyModelData) {
-      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,
-        isTableTemp: this.isTableTemp,
-        serviceName: this.serviceName,
-        fixedAddForm: this.fixedAddForm,
-        getDataParams: this.getDataParams,
-        modifyModelData: modifyModelData
-      })
-    },
-    /**
-     * 删除后事件
-     * @param res
-     */
-    afterDelete (res) {
-      this.$emit('afterDelete', res)
-    },
-    /**
-     * 查询表单部分显示/隐藏切换
-     */
-    toggleIsFormShow () {
-      this.$refs.xForm.toggleVisible()
-    },
-    /**
-     * 选择列事件
-     * @param selectedRowKeys 选中列Key集合
-     * @param selectedRows 选中列
-     */
-    selectRow (selectedRowKeys, selectedRows) {
-      this.$emit('selectRow', selectedRowKeys, selectedRows)
-    },
-    /**
-     * 临时表修改
-     * @param res 参数
-     */
-    tempTableEdit (res) {
-      this.$emit('tempTableEdit', res)
-    },
-    /**
-     * 刷新表格
-     * @param toFirstPage 是否到第一页
-     */
-    refreshTable (toFirstPage = true) {
-      this.$refs.xTable.refresh(toFirstPage)
-    },
-  },
-  action: {
-    /**
-     * 实现doAction方法
-     */
-    doAction (actionType, args, data) {
-      switch (actionType) {
-        case 'refreshTable':
-          for (const item in args) {
-            console.log('item', item)
-          }
-          break
-        default:
-          break
-      }
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-
-</style>
+<template>
+  <div>
+    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
+    <div v-show="!loading">
+      <template v-if="!loadError">
+        <x-add-form
+          ref="xAddForm"
+          @afterSubmit="onAddOrEditSubmitAfterSubmit"
+        />
+        <x-form
+          ref="xForm"
+          style="margin-bottom: 14px;"
+          @onSubmit="onSearchSubmit">
+          <slot name="formBtnExpand"></slot>
+        </x-form>
+        <x-table
+          ref="xTable"
+          :fixedQueryForm="fixedQueryForm"
+          :queryParamsName="queryParamsName"
+          :query-params-json="queryParamsJson"
+          :show-pagination="showPagination"
+          @add="add"
+          @edit="edit"
+          @afterDelete="afterDelete"
+          @action="action"
+          @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>
+          <template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
+            <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+            <a-button @click="toggleIsFormShow">
+              <a-icon :style="iconStyle" type="vertical-align-top"/>
+            </a-button>
+          </template>
+          <!-- 底部插槽 -->
+          <template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
+            <slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
+          </template>
+        </x-table>
+      </template>
+      <template v-else>
+        <a-empty>
+          <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
+        </a-empty>
+      </template>
+    </div>
+  </div>
+</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 { getConfigByName, getConfigByLogic, parseConfig } from '@vue2-client/services/api/common'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'XFormTable',
+  components: {
+    XTable,
+    XForm,
+    XAddForm,
+    XImportExcel
+  },
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      loadError: false,
+      // 实际查询配置内容
+      realQueryConfig: {}
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    // 业务名称
+    title: {
+      type: String,
+      default: ''
+    },
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    // 配置所属命名空间
+    serviceName: {
+      type: String,
+      default: undefined
+    },
+    // 查询配置文件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
+    },
+    // 调用logic获取数据源的追加参数
+    getDataParams: {
+      type: Object,
+      default: undefined
+    }
+  },
+  watch: {
+    logicParam: {
+      handler () {
+        this.initConfig()
+      },
+      deep: true
+    },
+    queryParamsJson: {
+      handler () {
+        this.initConfig()
+      },
+      deep: true
+    },
+    queryParamsName: {
+      handler () {
+        this.initConfig()
+      }
+    }
+  },
+  created () {
+    this.initConfig()
+  },
+  methods: {
+    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) => {
+        this.updateComponents(res)
+      })
+    },
+    getConfigBySource () {
+      parseConfig(this.queryParamsJson, 'CRUD_FORM', this.serviceName).then(res => {
+        this.updateComponents(res, true)
+      })
+    },
+    getColumnJsonByLogic () {
+      getConfigByLogic(this.logicName, this.logicParam, this.serviceName, (res) => {
+        this.updateComponents(res, true)
+      })
+    },
+    /**
+     * 更新子组件
+     * @param res  参数
+     * @param setQueryParams 是否设置queryParams参数
+     */
+    updateComponents (res, setQueryParams) {
+      this.realQueryConfig = res
+      if (this.$refs.xTable && this.$refs.xForm && this.$refs.xAddForm) {
+        this.$refs.xTable.init({
+          queryParams: setQueryParams ? res : null,
+          tableColumns: res.columnJson,
+          buttonState: res.buttonState,
+          title: this.title,
+          viewMode: this.viewMode,
+          isTableTemp: this.isTableTemp,
+          serviceName: this.serviceName
+        })
+        this.$refs.xForm.init({
+          formItems: res.formJson,
+          serviceName: this.serviceName,
+          getDataParams: this.getDataParams
+        })
+      }
+      this.loading = false
+    },
+    /**
+     * 提交查询表单事件
+     * @param res  参数
+     */
+    onSearchSubmit (res) {
+      if (res.valid) {
+        // 表单赋值
+        this.$refs.xTable.setQueryForm(res.form)
+        // commit
+        this.$emit('afterSearchSubmit', res)
+      } else {
+        return false
+      }
+    },
+    /**
+     * 提交新增/修改表单后事件
+     */
+    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 操作类型
+     */
+    action (record, id, actionType) {
+      this.$emit('action', record, id, actionType)
+    },
+    /**
+     * 新增按钮事件
+     */
+    add () {
+      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,
+        isTableTemp: this.isTableTemp,
+        serviceName: this.serviceName,
+        fixedAddForm: this.fixedAddForm,
+        getDataParams: this.getDataParams
+      })
+    },
+    /**
+     * 修改按钮事件
+     * @param modifyModelData 修改表单数据
+     */
+    edit (modifyModelData) {
+      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,
+        isTableTemp: this.isTableTemp,
+        serviceName: this.serviceName,
+        fixedAddForm: this.fixedAddForm,
+        getDataParams: this.getDataParams,
+        modifyModelData: modifyModelData
+      })
+    },
+    /**
+     * 删除后事件
+     * @param res
+     */
+    afterDelete (res) {
+      this.$emit('afterDelete', res)
+    },
+    /**
+     * 查询表单部分显示/隐藏切换
+     */
+    toggleIsFormShow () {
+      this.$refs.xForm.toggleVisible()
+    },
+    /**
+     * 选择列事件
+     * @param selectedRowKeys 选中列Key集合
+     * @param selectedRows 选中列
+     */
+    selectRow (selectedRowKeys, selectedRows) {
+      this.$emit('selectRow', selectedRowKeys, selectedRows)
+    },
+    /**
+     * 临时表修改
+     * @param res 参数
+     */
+    tempTableEdit (res) {
+      this.$emit('tempTableEdit', res)
+    },
+    /**
+     * 刷新表格
+     * @param toFirstPage 是否到第一页
+     */
+    refreshTable (toFirstPage = true) {
+      this.$refs.xTable.refresh(toFirstPage)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>