vue2-client 1.7.0 → 1.7.2

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

@@ -1,344 +1,356 @@
-<template>
-  <div>
-    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
-    <div v-show="!loading">
-      <x-add-form
-        ref="xAddForm"
-        :get-data-params="getDataParams"
-        @onSubmit="onAddOrEditSubmit"
-      />
-      <x-form
-        ref="xForm"
-        :get-data-params="getDataParams"
-        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="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>
-    </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 { addOrModify, getConfigUrl } from '@vue2-client/services/api/common'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-import { mapState } from 'vuex'
-import { post } from '@vue2-client/services/api/restTools'
-
-export default {
-  name: 'XFormTable',
-  components: {
-    XTable,
-    XForm,
-    XAddForm,
-    XImportExcel
-  },
-  data () {
-    return {
-      // 加载状态
-      loading: false,
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      }
-    }
-  },
-  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.getColumnJsonByLogic()
-      },
-      deep: true
-    },
-    fixedQueryForm: {
-      handler () {
-        this.$nextTick(() => {
-          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: {
-    getColumnsJson () {
-      this.loading = true
-      const url = getConfigUrl(this.serviceName)
-      indexedDB.getByWeb(this.queryParamsName, url, { configName: this.queryParamsName }, (res) => {
-        this.updateComponents(res)
-      })
-    },
-    getColumnsJsonBySource () {
-      this.loading = true
-      const url = getConfigUrl(this.serviceName)
-      post(url, { queryObject: this.queryParamsJson }).then(res => {
-        this.updateComponents(res, true)
-      })
-    },
-    getColumnJsonByLogic () {
-      this.loading = true
-      const url = getConfigUrl(this.serviceName)
-      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, url, { logic: this.logicName, logicParam: this.logicParam }, (res) => {
-        this.updateComponents(res, true)
-      })
-    },
-    /**
-     * 更新子组件
-     * @param res  参数
-     * @param setQueryParams 是否设置queryParams参数
-     */
-    updateComponents (res, setQueryParams) {
-      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: res.serviceName
-        })
-        this.$refs.xForm.init({
-          formItems: res.formJson,
-          serviceName: res.serviceName
-        })
-        this.$refs.xAddForm.init({
-          isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
-          formItems: res.formJson,
-          viewMode: this.viewMode,
-          isTableTemp: this.isTableTemp,
-          serviceName: res.serviceName
-        })
-      }
-      this.loading = false
-    },
-    /**
-     * 提交查询表单事件
-     * @param res  参数
-     */
-    onSearchSubmit (res) {
-      if (res.valid) {
-        // 表单赋值
-        this.$refs.xTable.setQueryForm(res.form)
-        // commit
-        this.$emit('afterSearchSubmit', res)
-      } else {
-        return false
-      }
-    },
-    /**
-     * 提交新增表单事件
-     */
-    onAddOrEditSubmit (res, callback) {
-      // 组织请求
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        queryParams: this.queryParamsJson,
-        form: res.realForm,
-        businessType: res.businessType,
-        operator: res.currUserName
-      }
-      addOrModify(requestParameters, res.serviceName).then(data => {
-        this.$message.success(res.businessType + '成功！')
-        this.refreshTable(res.businessType === '新增')
-        // commit
-        this.$emit('afterSubmit', { type: res.businessType, id: data.id, form: requestParameters.form })
-      }).catch(e => {
-        this.$message.error(res.businessType + '失败：' + e)
-      }).finally(() => {
-        callback()
-      })
-    },
-    /**
-     * 表格查询后事件
-     * @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 () {
-      this.$refs.xAddForm.open({
-        businessType: '新增',
-        title: this.title,
-        fixedAddForm: this.fixedAddForm
-      })
-    },
-    /**
-     * 修改按钮事件
-     * @param res 参数
-     */
-    edit (res) {
-      this.$refs.xAddForm.open({
-        businessType: '修改',
-        modifyModelData: res,
-        title: this.title,
-        fixedAddForm: this.fixedAddForm
-      })
-    },
-    /**
-     * 删除后事件
-     * @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>
+<template>
+  <div>
+    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
+    <div v-show="!loading">
+      <x-add-form
+        ref="xAddForm"
+        @onSubmit="onAddOrEditSubmit"
+      />
+      <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>
+    </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 { addOrModify, getConfigUrl } from '@vue2-client/services/api/common'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+import { mapState } from 'vuex'
+import { post } from '@vue2-client/services/api/restTools'
+
+export default {
+  name: 'XFormTable',
+  components: {
+    XTable,
+    XForm,
+    XAddForm,
+    XImportExcel
+  },
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      // 实际查询配置内容
+      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.getColumnJsonByLogic()
+      },
+      deep: true
+    },
+    fixedQueryForm: {
+      handler () {
+        this.$nextTick(() => {
+          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: {
+    getColumnsJson () {
+      this.loading = true
+      const url = getConfigUrl(this.serviceName)
+      indexedDB.getByWeb(this.queryParamsName, url, { configName: this.queryParamsName }, (res) => {
+        this.updateComponents(res)
+      })
+    },
+    getColumnsJsonBySource () {
+      this.loading = true
+      const url = getConfigUrl(this.serviceName)
+      post(url, { queryObject: this.queryParamsJson }).then(res => {
+        this.updateComponents(res, true)
+      })
+    },
+    getColumnJsonByLogic () {
+      this.loading = true
+      const url = getConfigUrl(this.serviceName)
+      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, url, { logic: this.logicName, logicParam: this.logicParam }, (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: res.serviceName
+        })
+        this.$refs.xForm.init({
+          formItems: res.formJson,
+          serviceName: res.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
+      }
+    },
+    /**
+     * 提交新增表单事件
+     */
+    onAddOrEditSubmit (res, callback) {
+      // 组织请求
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        queryParams: this.queryParamsJson,
+        form: res.realForm,
+        businessType: res.businessType,
+        operator: res.currUserName
+      }
+      addOrModify(requestParameters, res.serviceName).then(data => {
+        this.$message.success(res.businessType + '成功！')
+        this.refreshTable(res.businessType === '新增')
+        // commit
+        this.$emit('afterSubmit', { type: res.businessType, id: data.id, form: requestParameters.form })
+      }).catch(e => {
+        this.$message.error(res.businessType + '失败：' + e)
+      }).finally(() => {
+        callback()
+      })
+    },
+    /**
+     * 表格查询后事件
+     * @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,
+        formItems: res.formJson,
+        viewMode: this.viewMode,
+        isTableTemp: this.isTableTemp,
+        serviceName: res.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,
+        formItems: res.formJson,
+        viewMode: this.viewMode,
+        isTableTemp: this.isTableTemp,
+        serviceName: res.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>