vue2-client 0.1.1 → 1.2.0

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

@@ -0,0 +1,405 @@
+<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>

package/src/base-client/components/common/XFormTable/index.js

@@ -0,0 +1,3 @@
+import XFormTable from './XFormTable'
+
+export default XFormTable

package/src/base-client/components/common/XFormTable/index.md

@@ -0,0 +1,89 @@
+# XFormTable
+
+动态查询控件，进一步整合了XTable和XForm
+
+
+## 何时使用
+
+当需要一个通用的表单，表格一体化控件时
+
+
+引用方式：
+
+```javascript
+import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
+
+export default {
+  components: {
+    XFormTable
+  }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form-table
+  title="业务名称"
+  :queryParamsName="queryParamsName">
+</x-form-table>
+```
+
+## API
+
+| 参数                 | 说明                      | 类型      | 默认值   |
+|--------------------|-------------------------|---------|-------|
+| title              | 业务名称                    | String  | ''    |
+| queryParamsName    | 查询配置JSON文件名             | String  | null  |
+| queryParamsJson    | 查询配置文件Json，用于查询配置生成器的预览 | Object  | null  |
+| logicName          | 通过logic获取表单表格配置         | String  | null  |
+| logicParam         | 执行logic传递的参数            | Object  | null  |
+| fixedQueryForm     | 固定查询表单,会和查询表单合并查询       | Object  | {}    |
+| fixedAddForm       | 固定新增表单，会和新增表单合并         | Object  | {}    |
+| isExports          | 是否显示导出按钮                | Boolean | true  |
+| viewMode           | 是否为预览模式                 | Boolean | false |
+| @action            | 表格详情列的单击事件              | event   | -     |
+| @afterSubmit       | 增删改提交后的回调方法             | event   | -     |
+| @afterSearchSubmit | 查询提交后的回调方法              | event   | -     |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-form-table
+    :queryParamsName="queryParamsName"
+    @action="toDetail">
+  </x-form-table>
+</template>
+
+<script>
+import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
+
+export default {
+  components: {
+    XFormTable
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'logQueryParams'
+    }
+  },
+  methods: {
+    toDetail (record, id) {
+      console.debug("您选择了项："+ id)
+    }
+  }
+}
+</script>
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+>