vue2-client 1.2.0 → 1.2.3

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

@@ -1,405 +1,407 @@
-<template>
-  <a-skeleton :loading="mainLoading">
-    <template v-if="loaded">
-      <x-add-form
-        :business-title="businessTitle"
-        :business-type="businessType"
-        :visible.sync="modelVisible"
-        :json-data="formItems"
-        :modify-model-data="modifyModelData"
-        :fixedAddForm="fixedAddForm"
-        :loading="loading"
-        @onSubmit="onAddOrModify"/>
-      <x-form
-        :json-data="formItems"
-        :is-show="isFormShow"
-        @onSubmit="onSubmit"
-        style="margin-bottom: 14px;">
-        <slot></slot>
-      </x-form>
-      <x-table
-        ref="xTable"
-        :json-data="tableColumns"
-        @toggleIsFormShow="toggleIsFormShow"
-        @selectRow="selectRow"
-        :queryParams="queryParams"
-        :queryParamsName="queryParamsName"
-        :fixedQueryForm="fixedQueryForm"
-        @loadData="loadData"
-        @action="action"
-        :form="form">
-        <template slot="expand">
-          <a-space>
-            <a-button type="primary" @click="addItem" v-if="!buttonState || buttonState.add">
-              <a-icon :style="iconStyle" type="plus"/>新增
-            </a-button>
-            <a-button
-              v-if="!buttonState || buttonState.edit"
-              :loading="editDataLoading"
-              :disabled="!isModify"
-              class="btn-success"
-              type="dashed"
-              @click="editItem">
-              <a-icon :style="iconStyle" type="edit"/>修改
-            </a-button>
-            <a-button :disabled="!isDelete" type="danger" @click="deleteItem" v-if="!buttonState || buttonState.delete">
-              <a-icon :style="iconStyle" type="delete"/>删除
-            </a-button>
-
-          </a-space>
-          <slot name="expand"></slot>
-        </template>
-      </x-table>
-    </template>
-  </a-skeleton>
-</template>
-<script>
-import XForm from '@vue2-client/base-client/components/common/XForm/XForm'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
-import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
-import { query, commonApi, addOrModify, remove } from '@vue2-client/services/api/common'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-import { mapState } from 'vuex'
-import { Modal } from 'ant-design-vue'
-import { post } from '@vue2-client/services/api/restTools'
-
-export default {
-  name: 'XFormTable',
-  components: {
-    XTable,
-    XForm,
-    XAddForm
-  },
-  data () {
-    return {
-      // Query参数文件内容加载中
-      mainLoading: false,
-      // Query参数文件内容加载完成
-      loaded: false,
-      // 是否展示表单
-      isFormShow: true,
-      // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
-      queryParams: null,
-      // 表格列集合
-      tableColumns: [],
-      // 操作按钮集合
-      buttonState: {},
-      // 表格选择列Key集合
-      selectedRowKeys: [],
-      // 表单项集合
-      formItems: [],
-      // 表单
-      form: {},
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      // 当前业务类型：新增，修改
-      businessType: '',
-      // 是否显示新增/修改模态框
-      modelVisible: false,
-      // 修改业务时查询的单条业务数据
-      modifyModelData: {},
-      // 是否允许修改
-      isModify: false,
-      // 是否允许删除
-      isDelete: false,
-      // 新增，修改业务执行状态
-      loading: false,
-      // 被修改数据加载状态
-      editDataLoading: false
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile']),
-    businessTitle () {
-      return this.businessType + this.title
-    }
-  },
-  props: {
-    // 业务名称
-    title: {
-      type: String,
-      default: ''
-    },
-    // 查询配置文件名
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    // 查询配置文件Json，用于查询配置生成器的预览
-    queryParamsJson: {
-      type: Object,
-      default: null
-    },
-    // 业务逻辑名称, 通过logic获取表单表格配置
-    logicName: {
-      type: String,
-      default: null
-    },
-    // 执行logic传递的参数
-    logicParam: {
-      type: Object,
-      default: () => {}
-    },
-    // 固定新增表单
-    fixedAddForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 固定查询表单
-    fixedQueryForm: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 预览模式
-    viewMode: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    }
-  },
-  watch: {
-    logicParam: {
-      handler () {
-        this.mainLoading = true
-        this.form = {}
-        indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
-          this.queryParams = ret
-          this.tableColumns = ret.columnJson
-          this.formItems = ret.formJson
-          this.mainLoading = false
-          this.loaded = true
-        })
-      },
-      deep: true
-    },
-    fixedQueryForm: {
-      handler () {
-        this.mainLoading = true
-        this.form = {}
-        indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
-          this.tableColumns = ret.columnJson
-          this.formItems = ret.formJson
-          this.buttonState = ret.buttonState
-          this.mainLoading = false
-          this.loaded = true
-        })
-      },
-      deep: true
-    },
-    queryParamsJson: {
-      handler () {
-        this.getColumnsJsonBySource()
-      },
-      deep: true
-    }
-  },
-  created () {
-    if (this.queryParamsName) {
-      this.getColumnsJson()
-    } else if (this.queryParamsJson) {
-      this.getColumnsJsonBySource()
-    }
-  },
-  methods: {
-    getColumnsJsonBySource () {
-      this.mainLoading = true
-      post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
-        this.queryParams = res
-        this.tableColumns = this.queryParams.columnJson
-        this.formItems = this.queryParams.formJson
-        this.buttonState = this.queryParams.buttonState
-        this.mainLoading = false
-        this.loaded = true
-      })
-    },
-    getColumnsJson () {
-      this.mainLoading = true
-      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
-        this.tableColumns = ret.columnJson
-        this.formItems = ret.formJson
-        this.buttonState = ret.buttonState
-        this.mainLoading = false
-        this.loaded = true
-      })
-    },
-    // 查询表单提交
-    onSubmit (res) {
-      if (res.valid) {
-        // 设置当前燃气公司
-        this.$emit('update:selectOrgName', res.form.orgName)
-        // 表单赋值
-        this.form = res.form
-        // commit
-        this.$emit('afterSearchSubmit', res)
-      } else {
-        return false
-      }
-    },
-    // 新增/修改数据表单提交
-    onAddOrModify (res) {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止新增')
-        return false
-      }
-      if (res.valid) {
-        this.loading = true
-        const requestParameters = {
-          queryParamsName: this.queryParamsName,
-          form: {}
-        }
-        if (this.businessType === '修改') {
-          const rowKeyValue = this.selectedRowKeys[0]
-          const key = this.tableColumns[0].dataIndex
-          const realKey = key.substring(key.indexOf('_') + 1)
-          requestParameters.form[realKey] = rowKeyValue
-        }
-        for (const key of Object.keys(res.form)) {
-          const realKey = key.substring(key.indexOf('_') + 1)
-          requestParameters.form[realKey] = res.form[key]
-        }
-        addOrModify(requestParameters).then(res => {
-          this.$message.success(this.businessType + '成功！')
-          this.loading = false
-          this.modelVisible = false
-          this.$refs.xTable.refresh(true)
-          // commit
-          this.$emit('afterSubmit', res)
-        }).catch(e => {
-          this.loading = false
-          this.modelVisible = false
-          this.$message.error(this.businessType + '失败！')
-        })
-      } else {
-        return false
-      }
-    },
-    // 刷新加载表格数据
-    loadData (requestParameters, callback) {
-      callback(query(requestParameters))
-    },
-    // 详情按钮事件
-    action (record, id) {
-      this.$emit('action', record, id)
-    },
-    // 新增业务
-    addItem () {
-      this.businessType = '新增'
-      this.modifyModelData = {}
-      this.modelVisible = true
-    },
-    // 修改业务
-    editItem () {
-      this.businessType = '修改'
-      if (!this.viewMode) {
-        const requestParameters = {
-          queryParamsName: this.queryParamsName,
-          conditionParams: {},
-          pageNo: 1,
-          pageSize: 1
-        }
-        requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
-        this.editDataLoading = true
-        query(requestParameters).then(res => {
-          this.modifyModelData = res.data[0]
-          this.modelVisible = true
-          this.editDataLoading = false
-        })
-      } else {
-        this.$message.info('预览模式禁止修改')
-      }
-    },
-    // 删除业务
-    deleteItem () {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止删除')
-        return
-      }
-      Modal.confirm({
-        title: '提示',
-        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
-        confirmLoading: this.loading,
-        zIndex: 1001,
-        onOk: () => {
-          this.loading = true
-          const requestParameters = {
-            queryParamsName: this.queryParamsName,
-            idList: this.selectedRowKeys
-          }
-          remove(requestParameters).then(res => {
-            this.loading = false
-            this.$message.success('删除成功！')
-            this.$refs.xTable.clearRowKeys()
-            this.$refs.xTable.refresh(true)
-            // commit
-            this.$emit('afterSubmit', res)
-          }).catch(e => {
-            this.loading = false
-            this.$message.error('删除失败！')
-          })
-        },
-        onCancel () {}
-      })
-    },
-    // 查询表单部分显示/隐藏切换
-    toggleIsFormShow () {
-      this.isFormShow = !this.isFormShow
-    },
-    // 控制业务操作按钮组的显示
-    selectRow (rowKeys) {
-      this.selectedRowKeys = rowKeys
-      this.isModify = this.selectedRowKeys.length === 1
-      this.isDelete = this.selectedRowKeys.length > 0
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.btn-success {
-  color: #ffffff;
-}
-.btn-success:hover {
-  color: #ffffff !important;
-}
-.btn-success:focus {
-  color: #ffffff !important;
-}
-.btn-success:enabled:hover {
-  background-color: #85CE61 !important;
-  border-color: #85CE61 !important;
-}
-.btn-success:enabled {
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.btn-success:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-.btn-warn {
-  color: #ffffff;
-}
-.btn-warn:hover {
-  color: #ffffff !important;
-}
-.btn-warn:focus {
-  color: #ffffff !important;
-}
-.btn-warn:enabled:hover {
-  background-color: #ffc833 !important;
-  border-color: #ffc833 !important;
-}
-.btn-warn:enabled {
-  background-color: #ffba00;
-  border-color: #ffba00;
-}
-.btn-warn:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-</style>
+<template>
+  <a-skeleton :loading="mainLoading">
+    <template v-if="loaded">
+      <x-add-form
+        :business-title="businessTitle"
+        :business-type="businessType"
+        :visible.sync="modelVisible"
+        :json-data="formItems"
+        :modify-model-data="modifyModelData"
+        :fixedAddForm="fixedAddForm"
+        :loading="loading"
+        @onSubmit="onAddOrModify"/>
+      <x-form
+        :json-data="formItems"
+        :is-show="isFormShow"
+        @onSubmit="onSubmit"
+        style="margin-bottom: 14px;">
+        <slot></slot>
+      </x-form>
+      <x-table
+        ref="xTable"
+        :json-data="tableColumns"
+        @toggleIsFormShow="toggleIsFormShow"
+        @selectRow="selectRow"
+        :queryParams="queryParams"
+        :queryParamsName="queryParamsName"
+        :fixedQueryForm="fixedQueryForm"
+        @loadData="loadData"
+        @action="action"
+        :form="form">
+        <template slot="expand">
+          <a-space>
+            <a-button type="primary" @click="addItem" v-if="!buttonState || buttonState.add">
+              <a-icon :style="iconStyle" type="plus"/>新增
+            </a-button>
+            <a-button
+              v-if="!buttonState || buttonState.edit"
+              :loading="editDataLoading"
+              :disabled="!isModify"
+              class="btn-success"
+              type="dashed"
+              @click="editItem">
+              <a-icon :style="iconStyle" type="edit"/>修改
+            </a-button>
+            <a-button :disabled="!isDelete" type="danger" @click="deleteItem" v-if="!buttonState || buttonState.delete">
+              <a-icon :style="iconStyle" type="delete"/>删除
+            </a-button>
+
+          </a-space>
+          <slot name="expand"></slot>
+        </template>
+      </x-table>
+    </template>
+  </a-skeleton>
+</template>
+<script>
+import XForm from '@vue2-client/base-client/components/common/XForm/XForm'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
+import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
+import { query, commonApi, addOrModify, remove } from '@vue2-client/services/api/common'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+import { mapState } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { post } from '@vue2-client/services/api/restTools'
+
+export default {
+  name: 'XFormTable',
+  components: {
+    XTable,
+    XForm,
+    XAddForm
+  },
+  data () {
+    return {
+      // Query参数文件内容加载中
+      mainLoading: false,
+      // Query参数文件内容加载完成
+      loaded: false,
+      // 是否展示表单
+      isFormShow: true,
+      // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
+      queryParams: null,
+      // 表格列集合
+      tableColumns: [],
+      // 操作按钮集合
+      buttonState: {},
+      // 表格选择列Key集合
+      selectedRowKeys: [],
+      // 表单项集合
+      formItems: [],
+      // 表单
+      form: {},
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      // 当前业务类型：新增，修改
+      businessType: '',
+      // 是否显示新增/修改模态框
+      modelVisible: false,
+      // 修改业务时查询的单条业务数据
+      modifyModelData: {},
+      // 是否允许修改
+      isModify: false,
+      // 是否允许删除
+      isDelete: false,
+      // 新增，修改业务执行状态
+      loading: false,
+      // 被修改数据加载状态
+      editDataLoading: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile']),
+    businessTitle () {
+      return this.businessType + this.title
+    }
+  },
+  props: {
+    // 业务名称
+    title: {
+      type: String,
+      default: ''
+    },
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    // 查询配置文件Json，用于查询配置生成器的预览
+    queryParamsJson: {
+      type: Object,
+      default: null
+    },
+    // 业务逻辑名称, 通过logic获取表单表格配置
+    logicName: {
+      type: String,
+      default: null
+    },
+    // 执行logic传递的参数
+    logicParam: {
+      type: Object,
+      default: () => {}
+    },
+    // 固定新增表单
+    fixedAddForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 固定查询表单
+    fixedQueryForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 预览模式
+    viewMode: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  watch: {
+    logicParam: {
+      handler () {
+        this.mainLoading = true
+        this.form = {}
+        indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
+          this.queryParams = ret
+          this.tableColumns = ret.columnJson
+          this.formItems = ret.formJson
+          this.mainLoading = false
+          this.loaded = true
+        })
+      },
+      deep: true
+    },
+    fixedQueryForm: {
+      handler () {
+        this.mainLoading = true
+        this.form = {}
+        indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
+          this.tableColumns = ret.columnJson
+          this.formItems = ret.formJson
+          this.buttonState = ret.buttonState
+          this.mainLoading = false
+          this.loaded = true
+        })
+      },
+      deep: true
+    },
+    queryParamsJson: {
+      handler () {
+        this.getColumnsJsonBySource()
+      },
+      deep: true
+    }
+  },
+  created () {
+    if (this.queryParamsName) {
+      this.getColumnsJson()
+    } else if (this.queryParamsJson) {
+      this.getColumnsJsonBySource()
+    }
+  },
+  methods: {
+    getColumnsJsonBySource () {
+      this.mainLoading = true
+      post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
+        this.queryParams = res
+        this.tableColumns = this.queryParams.columnJson
+        this.formItems = this.queryParams.formJson
+        this.buttonState = this.queryParams.buttonState
+        this.mainLoading = false
+        this.loaded = true
+      })
+    },
+    getColumnsJson () {
+      this.mainLoading = true
+      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
+        this.tableColumns = ret.columnJson
+        this.formItems = ret.formJson
+        this.buttonState = ret.buttonState
+        this.mainLoading = false
+        this.loaded = true
+      })
+    },
+    // 查询表单提交
+    onSubmit (res) {
+      if (res.valid) {
+        // 设置当前燃气公司
+        this.$emit('update:selectOrgName', res.form.orgName)
+        // 表单赋值
+        this.form = res.form
+        // commit
+        this.$emit('afterSearchSubmit', res)
+      } else {
+        return false
+      }
+    },
+    // 新增/修改数据表单提交
+    onAddOrModify (res) {
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止新增')
+        return false
+      }
+      if (res.valid) {
+        this.loading = true
+        const requestParameters = {
+          queryParamsName: this.queryParamsName,
+          form: {}
+        }
+        if (this.businessType === '修改') {
+          const rowKeyValue = this.selectedRowKeys[0]
+          const key = this.tableColumns[0].dataIndex
+          const realKey = key.substring(key.indexOf('_') + 1)
+          requestParameters.form[realKey] = rowKeyValue
+        }
+        for (const key of Object.keys(res.form)) {
+          const realKey = key.substring(key.indexOf('_') + 1)
+          requestParameters.form[realKey] = res.form[key]
+        }
+        addOrModify(requestParameters).then(res => {
+          this.$message.success(this.businessType + '成功！')
+          this.loading = false
+          this.modelVisible = false
+          this.$refs.xTable.refresh(true)
+          // commit
+          this.$emit('afterSubmit', res)
+        }).catch(e => {
+          this.loading = false
+          this.modelVisible = false
+          this.$message.error(this.businessType + '失败！')
+        })
+      } else {
+        return false
+      }
+    },
+    // 刷新加载表格数据
+    loadData (requestParameters, callback) {
+      const result = query(requestParameters)
+      this.$emit('afterQuery', result)
+      callback(result)
+    },
+    // 详情按钮事件
+    action (record, id) {
+      this.$emit('action', record, id)
+    },
+    // 新增业务
+    addItem () {
+      this.businessType = '新增'
+      this.modifyModelData = {}
+      this.modelVisible = true
+    },
+    // 修改业务
+    editItem () {
+      this.businessType = '修改'
+      if (!this.viewMode) {
+        const requestParameters = {
+          queryParamsName: this.queryParamsName,
+          conditionParams: {},
+          pageNo: 1,
+          pageSize: 1
+        }
+        requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
+        this.editDataLoading = true
+        query(requestParameters).then(res => {
+          this.modifyModelData = res.data[0]
+          this.modelVisible = true
+          this.editDataLoading = false
+        })
+      } else {
+        this.$message.info('预览模式禁止修改')
+      }
+    },
+    // 删除业务
+    deleteItem () {
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止删除')
+        return
+      }
+      Modal.confirm({
+        title: '提示',
+        content: '您本次要删除共' + this.selectedRowKeys.length + '条数据，确定操作吗？',
+        confirmLoading: this.loading,
+        zIndex: 1001,
+        onOk: () => {
+          this.loading = true
+          const requestParameters = {
+            queryParamsName: this.queryParamsName,
+            idList: this.selectedRowKeys
+          }
+          remove(requestParameters).then(res => {
+            this.loading = false
+            this.$message.success('删除成功！')
+            this.$refs.xTable.clearRowKeys()
+            this.$refs.xTable.refresh(true)
+            // commit
+            this.$emit('afterSubmit', res)
+          }).catch(e => {
+            this.loading = false
+            this.$message.error('删除失败！')
+          })
+        },
+        onCancel () {}
+      })
+    },
+    // 查询表单部分显示/隐藏切换
+    toggleIsFormShow () {
+      this.isFormShow = !this.isFormShow
+    },
+    // 控制业务操作按钮组的显示
+    selectRow (rowKeys) {
+      this.selectedRowKeys = rowKeys
+      this.isModify = this.selectedRowKeys.length === 1
+      this.isDelete = this.selectedRowKeys.length > 0
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.btn-success {
+  color: #ffffff;
+}
+.btn-success:hover {
+  color: #ffffff !important;
+}
+.btn-success:focus {
+  color: #ffffff !important;
+}
+.btn-success:enabled:hover {
+  background-color: #85CE61 !important;
+  border-color: #85CE61 !important;
+}
+.btn-success:enabled {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.btn-success:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.btn-warn {
+  color: #ffffff;
+}
+.btn-warn:hover {
+  color: #ffffff !important;
+}
+.btn-warn:focus {
+  color: #ffffff !important;
+}
+.btn-warn:enabled:hover {
+  background-color: #ffc833 !important;
+  border-color: #ffc833 !important;
+}
+.btn-warn:enabled {
+  background-color: #ffba00;
+  border-color: #ffba00;
+}
+.btn-warn:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+</style>