vue2-client 1.4.64 → 1.5.0

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

@@ -1,98 +1,53 @@
 <template>
-  <a-skeleton :loading="mainLoading">
-    <template v-if="loaded">
-      <x-add-form
-        v-if="!buttonState || buttonState.add || buttonState.edit"
-        :business-title="businessTitle"
-        :business-type="businessType"
-        :fixedAddForm="fixedAddForm"
-        :json-data="formItems"
-        :service-name="serviceName"
-        :loading="loading"
-        :modify-model-data="modifyModelData"
-        :visible.sync="modelVisible"
-        @onSubmit="onAddOrModify"/>
-      <x-form
-        :is-show="isFormShow"
-        :json-data="formItems"
-        :service-name="serviceName"
-        style="margin-bottom: 14px;"
-        @onSubmit="onSubmit">
-        <slot></slot>
-      </x-form>
-      <x-table
-        ref="xTable"
-        :buttonState="buttonState"
-        :fixedQueryForm="fixedQueryForm"
-        :form="form"
-        :json-data="tableColumns"
-        :queryParams="queryParams"
-        :queryParamsName="queryParamsName"
-        :show-pagination="showPagination"
-        @action="action"
-        @loadData="loadData"
-        @selectRow="selectRow"
-        @toggleIsFormShow="toggleIsFormShow">
-        <template slot="expand">
-          <a-space>
-            <a-button v-if="!buttonState || buttonState.add" type="primary" @click="addItem">
-              <a-icon :style="iconStyle" type="plus"/>新增
-            </a-button>
-            <a-button
-              v-if="!buttonState || buttonState.edit"
-              :disabled="!isModify"
-              :loading="editDataLoading"
-              class="btn-success"
-              type="dashed"
-              @click="editItem()">
-              <a-icon :style="iconStyle" type="edit"/>修改
-            </a-button>
-            <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
-              <a-icon :style="iconStyle" type="delete"/>删除
-            </a-button>
-            <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="$refs.importExcel.importExcelHandleOpen()">
-              <a-icon :style="iconStyle" type="import" />导入
-            </a-button>
-            <a-dropdown v-if="!buttonState || buttonState.export">
-              <a-menu slot="overlay">
-                <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
-                <a-menu-item key="2" @click="handleExport(false)"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
-                <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
-              </a-menu>
-              <a-button>导出 <a-icon type="down" /> </a-button>
-            </a-dropdown>
-            <slot :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows" name="button"></slot>
-          </a-space>
-          <slot name="expand"></slot>
-        </template>
-        <!-- 底部插槽 -->
-        <template slot="footer">
-          <slot name="footer"></slot>
-        </template>
-      </x-table>
-      <!-- 上传文件 -->
-      <x-import-excel
-        ref="importExcel"
-        @ok="refreshTable"
-        :title="title"
-        :service-name="serviceName"
-        :query-params-name="queryParamsName"
-      />
-    </template>
-  </a-skeleton>
+  <div>
+    <x-add-form
+      ref="xAddForm"
+      @afterSubmit="afterAddOrEditSubmit"
+    />
+    <x-form
+      ref="xForm"
+      style="margin-bottom: 14px;"
+      @onSubmit="onSearchSubmit">
+      <slot></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="expand">
+        <slot name="expand"></slot>
+      </template>
+      <template slot="rightBtnExpand">
+        <slot name="rightBtnExpand"></slot>
+        <a-button @click="toggleIsFormShow">
+          <a-icon :style="iconStyle" type="vertical-align-top"/>
+        </a-button>
+      </template>
+      <!-- 底部插槽 -->
+      <template slot="footer">
+        <slot name="footer"></slot>
+      </template>
+    </x-table>
+  </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 { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
+import { commonApi } 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'
-import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
-import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
 
 export default {
   name: 'XFormTable',
@@ -104,59 +59,15 @@ export default {
   },
   data () {
     return {
-      // Query参数文件内容加载中
-      mainLoading: false,
-      // Query参数文件内容加载完成
-      loaded: false,
-      // 是否展示表单
-      isFormShow: true,
-      // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
-      queryParams: null,
-      // 服务名称
-      serviceName: 'af-system',
-      // 表格列集合
-      tableColumns: [],
-      // 操作按钮集合
-      buttonState: {},
-      // 表格选择列Key集合
-      selectedRowKeys: [],
-      // 表格选择Row集合
-      selectedRows: [],
-      // 选中用于修改的id
-      selectId: undefined,
-      // 表单项集合
-      formItems: [],
-      // 表单
-      form: {},
       // 图标样式
       iconStyle: {
         position: 'relative',
         top: '1px'
-      },
-      // 当前业务类型：新增，修改
-      businessType: '',
-      // 是否显示新增/修改模态框
-      modelVisible: false,
-      // 修改业务时查询的单条业务数据
-      modifyModelData: {},
-      // 是否允许修改
-      isModify: false,
-      // 是否允许删除
-      isDelete: false,
-      // 新增，修改业务执行状态
-      loading: false,
-      // 被修改数据加载状态
-      editDataLoading: false,
-      // 是否为临时表
-      isTableTemp: false
+      }
     }
   },
   computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile']),
-    businessTitle () {
-      return this.businessType + this.title
-    }
+    ...mapState('setting', ['isMobile'])
   },
   props: {
     // 业务名称
@@ -220,7 +131,7 @@ export default {
     },
     fixedQueryForm: {
       handler () {
-        this.refreshTable(true)
+        this.$refs.xTable.refresh(true)
       },
       deep: true
     },
@@ -244,322 +155,136 @@ export default {
     }
   },
   methods: {
-    refreshTable (toFirstPage = true) {
-      this.$refs.xTable.refresh(toFirstPage)
-    },
-    clearRowKeys () {
-      this.$refs.xTable.clearRowKeys()
-    },
-    setParams (res) {
-      // 深拷贝json，避免筛选列报错
-      this.tableColumns = JSON.parse(JSON.stringify(res.columnJson))
-      this.formItems = res.formJson
-      this.buttonState = res.buttonState
-      this.serviceName = res.serviceName
-      this.mainLoading = false
-      this.loaded = true
-    },
     getColumnsJson () {
-      this.form = {}
-      this.mainLoading = true
-      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
-        this.setParams(ret)
+      indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (res) => {
+        this.updateComponents(res)
       })
     },
     getColumnsJsonBySource () {
-      this.form = {}
-      this.mainLoading = true
       post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
-        this.queryParams = res
-        this.setParams(res)
+        this.updateComponents(res)
       })
     },
     getColumnJsonByLogic () {
-      this.form = {}
-      this.mainLoading = true
-      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
-        this.queryParams = ret
-        this.setParams(ret)
+      indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (res) => {
+        this.updateComponents(res)
       })
     },
-    // 查询表单提交
-    onSubmit (res) {
+    /**
+     * 更新子组件
+     * @param res  参数
+     */
+    updateComponents (res) {
+      this.$refs.xTable.init({
+        queryParams: res,
+        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,
+        queryParamsName: this.queryParamsName,
+        serviceName: res.serviceName
+      })
+    },
+    /**
+     * 提交查询表单事件
+     * @param res  参数
+     */
+    onSearchSubmit (res) {
       if (res.valid) {
         // 表单赋值
-        this.form = res.form
+        this.$refs.xTable.setQueryForm(res.form, true)
         // commit
         this.$emit('afterSearchSubmit', res)
       } else {
         return false
       }
     },
-    // 新增/修改数据表单提交
-    onAddOrModify (res) {
-      if (this.viewMode) {
-        this.$message.info('预览模式禁止新增和修改')
-        return false
-      }
-      // 如果是临时表
-      if (this.isTableTemp) {
-        this.$emit('tempTableModify', res)
-        return
-      }
-      if (!res.valid) {
-        return false
-      }
-      this.loading = true
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        form: {},
-        businessType: this.businessType,
-        operator: this.currUser.name
-      }
-      if (this.businessType === '修改') {
-        // 将更新需要的主键值加入到表单中
-        const key = this.tableColumns[0].dataIndex
-        const realKey = this.getRealKey(key)
-        requestParameters.form[realKey] = this.selectId
-      }
-      for (const key of Object.keys(res.form)) {
-        const realKey = this.getRealKey(key)
-        requestParameters.form[realKey] = res.form[key]
-      }
-      addOrModify(requestParameters, this.serviceName).then(res => {
-        this.$message.success(this.businessType + '成功！')
-        this.loading = false
-        this.modelVisible = false
-        this.$refs.xTable.refresh(true)
-        // commit
-        this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
-      }).catch(e => {
-        this.loading = false
-        this.modelVisible = false
-        this.$message.error(this.businessType + '失败！')
-      })
-    },
-    // 刷新加载表格数据
-    loadData (requestParameters, callback) {
-      let result = {}
-      if (this.queryParamsJson) {
-        if (this.queryParamsJson.tableName.startsWith('##')) {
-          this.isTableTemp = true
-          result = this.initTempTable(requestParameters)
-        }
-      }
-      if (!this.isTableTemp) {
-        result = query(requestParameters, this.serviceName)
-      }
-      this.$emit('afterQuery', result)
-      callback(result)
-    },
-    // 详情按钮事件
+    /**
+     * 新增或修改后事件
+     * @param res  参数
+     */
+    afterAddOrEditSubmit (res) {
+      this.$refs.xTable.refresh(res.type === '新增')
+    },
+    /**
+     * 表格查询后事件
+     * @param res  参数
+     */
+    afterQuery (res) {
+      this.$emit('afterQuery', res)
+    },
+    /**
+     * 详情按钮事件
+     * @param record 本条数据
+     * @param id 数据标识
+     * @param actionType 操作类型
+     */
     action (record, id, actionType) {
       this.$emit('action', record, id, actionType)
     },
-    // 获取数据字段实际值
-    getRealKey (key) {
-      return key.substring(key.indexOf('_') + 1)
-    },
-    // 新增业务
-    addItem () {
-      this.businessType = '新增'
-      this.modifyModelData = {}
-      this.modelVisible = true
-    },
-    // 修改业务
-    editItem (selectId) {
-      this.businessType = '修改'
-      const requestParameters = {
-        queryParamsName: this.queryParamsName,
-        conditionParams: {},
-        pageNo: 1,
-        pageSize: 1
-      }
-      if (selectId === undefined) {
-        selectId = this.selectedRowKeys[0]
-      }
-      this.selectId = selectId
-      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = selectId
-      requestParameters.f_businessid = selectId
-      if (this.isTableTemp) {
-        this.$emit('tempTableEdit', requestParameters)
-        return
-      }
-      this.editDataLoading = true
-      queryWithResource(requestParameters, this.serviceName).then(res => {
-        this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
-        this.modelVisible = true
-        this.editDataLoading = false
+    /**
+     * 新增按钮事件
+     */
+    add () {
+      this.$refs.xAddForm.open({
+        businessType: '新增',
+        title: this.title,
+        fixedAddForm: this.fixedAddForm
       })
     },
-    // 删除业务
-    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, this.serviceName).then(res => {
-            this.loading = false
-            this.$message.success('删除成功！')
-            this.$refs.xTable.clearRowKeys()
-            this.$refs.xTable.refresh(true)
-            // afterDelete
-            this.$emit('afterDelete', { idList: requestParameters.idList })
-          }).catch(e => {
-            this.loading = false
-            this.$message.error('删除失败！')
-          })
-        },
-        onCancel () {}
+    /**
+     * 修改按钮事件
+     * @param res 参数
+     */
+    edit (res) {
+      this.$refs.xAddForm.open({
+        businessType: '修改',
+        modifyModelData: res,
+        title: this.title
       })
     },
-    // 导出选中或本页数据
-    handleExport (isSelected) {
-      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
-      const filterVal = this.tableColumns.map(res => res.dataIndex)
-      let exportData
-      if (isSelected) {
-        exportData = this.$refs.xTable.selectedRows
-      } else {
-        exportData = this.$refs.xTable.dataSource
-      }
-      const data = this.formatJson(filterVal, exportData)
-      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
-    },
-    formatJson (filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
+    /**
+     * 删除后事件
+     * @param res
+     */
+    afterDelete (res) {
+      this.$emit('afterDelete', res)
     },
-    // 导出符合条件的数据
-    handleExportByQuery () {
-      const that = this
-      this.$confirm({
-        title: '是否确认导出?',
-        content: '此操作将导出当前条件下所有数据而非选中数据',
-        onOk () {
-          download({
-            queryParamsName: that.queryParamsName,
-            form: that.form,
-            type: 'exportData'
-          }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
-        },
-        onCancel () {}
-      })
-    },
-    // 查询表单部分显示/隐藏切换
+    /**
+     * 查询表单部分显示/隐藏切换
+     */
     toggleIsFormShow () {
-      this.isFormShow = !this.isFormShow
-    },
-    // 控制业务操作按钮组的显示
-    selectRow (rowKeys, rows) {
-      this.selectedRowKeys = rowKeys
-      this.selectedRows = rows
-      this.isModify = this.selectedRowKeys.length === 1
-      this.isDelete = this.selectedRowKeys.length > 0
-      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
-    },
-    // 创建临时表sql生成
-    createTempTable (defineJson) {
-      const tableName = defineJson.tableName
-      const define = defineJson.column
-      return post(CommonTempTable.createTempTable, {
-        define: define,
-        tableName: tableName
-      })
-        .then(
-          res => {
-            return res
-          },
-          err => {
-            console.log(err)
-          }
-        )
-    },
-    // 插入临时表数据sql生成
-    insertTempTableData (defineJson) {
-      const tableName = defineJson.tableName
-      const params = {}
-      params.define = defineJson.column
-      params.applyId = defineJson.applyId
-      params.stepName = defineJson.stepName
-      params.tableName = tableName
-      return post(CommonTempTable.insertDataToTempTable, {
-        tempTableData: params
-      })
-        .then(
-          res => {
-            return res
-          }
-        )
-    },
-    // 初始化临时表
-    async initTempTable (json) {
-      await this.createTempTable(this.queryParamsJson)
-      await this.insertTempTableData(this.queryParamsJson)
-      let result = {}
-      await post(CommonTempTable.initApplySubTable, {
-        define: json
-      })
-        .then(
-          res => {
-            console.log('子表临时表已创建')
-            result = res
-          }
-        )
-      return result
+      this.$refs.xForm.toggleVisible()
+    },
+    /**
+     * 选择列事件
+     * @param res 参数
+     */
+    selectRow (res) {
+      this.$emit('selectRow', res)
+    },
+    /**
+     * 临时表修改
+     * @param res 参数
+     */
+    tempTableEdit (res) {
+      this.$emit('tempTableEdit', res)
     }
   }
 }
 </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>