vue2-client 1.6.0 → 1.6.1

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

@@ -1,289 +1,333 @@
-<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"
-        @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, commonApi } 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,
-      // 业务名称
-      title: '',
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      }
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  methods: {
-    /**
-     * 初始化组件
-     */
-    init (params) {
-      const {
-        // 业务名称
-        title = '',
-        // 查询配置文件名
-        queryParamsName,
-        // 查询配置文件Json，用于查询配置生成器的预览
-        queryParamsJson,
-        // 业务逻辑名称, 通过logic获取表单表格配置
-        logicName,
-        // 执行logic传递的参数
-        logicParam,
-        // 固定新增表单
-        fixedAddForm,
-        // 固定查询表单
-        fixedQueryForm,
-        // 预览模式
-        viewMode,
-        // 数据只有一页时是否展示分页，true：展示，auto：隐藏
-        showPagination,
-        // 调用logic获取数据源的追加参数
-        getDataParams
-      } = params
-      this.title = title
-      const otherRes = {
-        fixedQueryForm: fixedQueryForm,
-        viewMode: viewMode,
-        showPagination: showPagination,
-        getDataParams: getDataParams,
-        queryParamsName: queryParamsName,
-        queryParamsJson: queryParamsJson,
-        fixedAddForm: fixedAddForm
-      }
-      if (queryParamsName) {
-        this.getColumnsJson(queryParamsName, otherRes)
-      } else if (queryParamsJson) {
-        this.getColumnsJsonBySource(queryParamsJson, otherRes)
-      } else if (logicParam) {
-        this.getColumnJsonByLogic(logicName, logicParam, otherRes)
-      } else if (fixedQueryForm) {
-        this.$refs.xTable.setFixedQueryForm(fixedQueryForm)
-      }
-    },
-    getColumnsJson (queryParamsName, otherRes) {
-      this.loading = true
-      indexedDB.getByWeb(queryParamsName, commonApi.getColumnsJson, { str: queryParamsName }, (res) => {
-        this.updateComponents(res, null, otherRes)
-      })
-    },
-    getColumnsJsonBySource (queryParamsJson, otherRes) {
-      this.loading = true
-      post(commonApi.getColumnsJson, { queryObject: queryParamsJson }).then(res => {
-        this.updateComponents(res, true, otherRes)
-      })
-    },
-    getColumnJsonByLogic (logicName, logicParam, otherRes) {
-      this.loading = true
-      indexedDB.getByWeb(`${logicName}_${JSON.stringify(logicParam)}`, commonApi.getColumnsJson, { logic: logicName, logicParam: logicParam }, (res) => {
-        this.updateComponents(res, true, otherRes)
-      })
-    },
-    /**
-     * 更新子组件
-     * @param res  参数
-     * @param setQueryParams 是否设置queryParams参数
-     * @param otherRes 额外参数
-     */
-    updateComponents (res, setQueryParams, otherRes) {
-      this.$refs.xTable.init({
-        queryParams: setQueryParams ? res : null,
-        tableColumns: res.columnJson,
-        buttonState: res.buttonState,
-        title: this.title,
-        viewMode: otherRes.viewMode,
-        serviceName: res.serviceName,
-        queryParamsName: otherRes.queryParamsName,
-        queryParamsJson: otherRes.queryParamsJson,
-        showPagination: otherRes.showPagination,
-        fixedQueryForm: otherRes.fixedQueryForm
-      })
-      this.$refs.xForm.init({
-        formItems: res.formJson,
-        serviceName: res.serviceName,
-        getDataParams: otherRes.getDataParams
-      })
-      this.$refs.xAddForm.init({
-        queryParamsName: otherRes.queryParamsName,
-        queryParamsJson: otherRes.queryParamsJson,
-        isShow: !res.buttonState || res.buttonState.add || res.buttonState.edit,
-        formItems: res.formJson,
-        viewMode: otherRes.viewMode,
-        serviceName: res.serviceName,
-        fixedAddForm: otherRes.fixedAddForm,
-        getDataParams: otherRes.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: res.queryParamsName,
-        form: res.realForm,
-        businessType: res.businessType,
-        operator: res.currUserName
-      }
-      addOrModify(requestParameters, this.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
-      })
-    },
-    /**
-     * 修改按钮事件
-     * @param res 参数
-     */
-    edit (res) {
-      this.$refs.xAddForm.open({
-        businessType: '修改',
-        modifyModelData: res,
-        title: this.title
-      })
-    },
-    /**
-     * 删除后事件
-     * @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"
+        :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, commonApi } 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
+    },
+    // 查询配置文件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
+      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (res) => {
+        this.updateComponents(res)
+      })
+    },
+    getColumnsJsonBySource () {
+      this.loading = true
+      post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
+        this.updateComponents(res, true)
+      })
+    },
+    getColumnJsonByLogic () {
+      this.loading = true
+      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (res) => {
+        this.updateComponents(res, true)
+      })
+    },
+    /**
+     * 更新子组件
+     * @param res  参数
+     * @param setQueryParams 是否设置queryParams参数
+     */
+    updateComponents (res, setQueryParams) {
+      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,
+        form: res.realForm,
+        businessType: res.businessType,
+        operator: res.currUserName
+      }
+      addOrModify(requestParameters, this.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>