vue2-client 1.5.9 → 1.5.11

package/CHANGELOG.md

@@ -1,7 +1,10 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.5.6 - 1.5.7 -2022-12-05 @江超**
+**1.5.11 -2022-12-05 @江超**
+- 优化了查询配置生成界面的样式
+
+**1.5.6 - 1.5.10 -2022-12-05 @江超**
 - 修复待办界面显示异常的问题
 
 **1.5.0 - 1.5.5 -2022-12-04 @江超**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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

@@ -7,7 +7,7 @@
     @close="onClose"
   >
     <a-row :gutter="24">
-      <a-col :lg="12" :md="12" :sm="24" :xl="14" :xs="24">
+      <a-col :lg="12" :md="12" :sm="24" :xl="18" :xs="24">
         <a-form-model
           ref="businessCreateForm"
           :label-col="labelCol"
@@ -66,7 +66,33 @@
             <a-input v-model="form.orderBy" placeholder="排序字段，用别名+字段名+排序方式(可选)表示，如：u.id desc"/>
           </a-form-model-item>
           <a-form-model-item label="数据字段" prop="column">
-            <a-button type="primary" @click="addColumnItem()">增加</a-button>
+            <a-space>
+              <a-button type="primary" @click="addColumnItem()">增加</a-button>
+              <a-button icon="import" @click="$message.warn('从创意库中选择并引用高质量的通用表单项配置，敬请期待')">从创意库引入</a-button>
+            </a-space>
+            <a-row :gutter="24">
+              <a-col :span="8">
+                <span style="font-weight: bold">
+                  标签名
+                </span>
+              </a-col>
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  字段名
+                </span>
+              </a-col>
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  数据模式
+                </span>
+              </a-col>
+              <a-col :span="2">
+                <span style="font-weight: bold">
+                  操作
+                </span>
+              </a-col>
+            </a-row>
+            <a-divider style="margin: 6px 0" />
             <div
               v-for="(columnItem, index) in form.column"
               :key="index"
@@ -80,13 +106,52 @@
                 <span class="dragTips">拖到此处放置</span>
               </a-row>
               <a-row :gutter="24">
-                <a-col :span="20">
-                  <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
+                <a-col :span="8">
+                  <span style="font-weight: bold">
+                    {{ columnItem.title }}
+                  </span>
                 </a-col>
-                <a-col :span="2">
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.key }}
+                  </span>
+                </a-col>
+                <a-col :span="7">
+                  <a-tooltip>
+                    <template slot="title">
+                      查询表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('queryForm') ? 'blue' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-search" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      表格列
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('table') ? 'orange' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="table" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      新增/修改表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('addOrEditForm') ? 'green' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="form" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryItem') ? 'cyan' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="bars" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询表达式
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
+                  </a-tooltip>
+                </a-col>
+                <a-col :span="1">
                   <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
                 </a-col>
-                <a-col :span="2">
+                <a-col :span="1">
                   <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
                 </a-col>
               </a-row>
@@ -127,7 +192,7 @@
         <create-query-item ref="queryItem" @getColumn="getColumn" @itemHandle="itemHandle"/>
         <a-button type="primary" @click="view">操作</a-button>
       </a-col>
-      <a-col :lg="12" :md="12" :sm="24" :xl="10" :xs="24">
+      <a-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
         <a-card :bordered="false" size="small" style="overflow: auto" title="预览">
           <json-viewer
             :copyable="{copyText: '复制', copiedText: '已复制'}"
@@ -193,8 +258,8 @@ export default {
       ],
       // 操作按钮状态集合值
       buttonStateData: ['add', 'edit', 'delete', 'import', 'export'],
-      labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
+      labelCol: { span: 3 },
+      wrapperCol: { span: 18 },
       form: {
         serviceName: '',
         tableName: '',

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

@@ -7,7 +7,7 @@
     @close="onClose"
   >
     <a-row :gutter="24">
-      <a-col :lg="12" :md="12" :sm="24" :xl="14" :xs="24">
+      <a-col :lg="12" :md="12" :sm="24" :xl="18" :xs="24">
         <a-form-model
           ref="businessCreateForm"
           :label-col="labelCol"
@@ -23,6 +23,24 @@
           </a-form-model-item>
           <a-form-model-item label="数据字段" prop="column">
             <a-button type="primary" @click="addColumnItem()">增加</a-button>
+            <a-row :gutter="24">
+              <a-col :span="11">
+                <span style="font-weight: bold">
+                  标签名
+                </span>
+              </a-col>
+              <a-col :span="11">
+                <span style="font-weight: bold">
+                  字段名
+                </span>
+              </a-col>
+              <a-col :span="2">
+                <span style="font-weight: bold">
+                  操作
+                </span>
+              </a-col>
+            </a-row>
+            <a-divider style="margin: 6px 0" />
             <div
               v-for="(columnItem, index) in form.column"
               :key="index"
@@ -36,13 +54,20 @@
                 <span class="dragTips">拖到此处放置</span>
               </a-row>
               <a-row :gutter="24">
-                <a-col :span="20">
-                  <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
+                <a-col :span="11">
+                  <span style="font-weight: bold">
+                    {{ columnItem.title }}
+                  </span>
                 </a-col>
-                <a-col :span="2">
+                <a-col :span="11">
+                  <span style="font-weight: bold">
+                    {{ columnItem.key }}
+                  </span>
+                </a-col>
+                <a-col :span="1">
                   <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
                 </a-col>
-                <a-col :span="2">
+                <a-col :span="1">
                   <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
                 </a-col>
               </a-row>
@@ -80,7 +105,7 @@
         <create-simple-form-query-item ref="queryItem" @getColumn="getColumn" @itemHandle="itemHandle"/>
         <a-button type="primary" @click="view">操作</a-button>
       </a-col>
-      <a-col :lg="12" :md="12" :sm="24" :xl="10" :xs="24">
+      <a-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
         <a-card :bordered="false" size="small" style="overflow: auto" title="预览">
           <json-viewer
             :copyable="{copyText: '复制', copiedText: '已复制'}"
@@ -91,10 +116,7 @@
       </a-col>
     </a-row>
     <x-add-form
-      business-title="效果预览"
-      business-type="新增"
-      :visible.sync="modelVisible"
-      :json-data="formItems"
+      ref="xAddForm"
       @onSubmit="submit"/>
   </a-drawer>
 </template>
@@ -118,12 +140,10 @@ export default {
     return {
       // 页面宽度
       screenWidth: document.documentElement.clientWidth,
-      // 效果预览模态框是否展示
-      modelVisible: false,
       // 数据列操作类型：新增，修改
       type: '新增',
-      labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
+      labelCol: { span: 3 },
+      wrapperCol: { span: 18 },
       form: {
         group: '',
         describe: '',
@@ -152,8 +172,7 @@ export default {
         { label: '获取行信息后插槽', value: 'editQueryAfter' },
         { label: '新增/修改保存前插槽', value: 'addOrEditSaveBefore' },
         { label: '新增/修改保存后插槽', value: 'addOrEditSaveAfter' },
-      ],
-      formItems: []
+      ]
     }
   },
   mounted () {
@@ -266,9 +285,6 @@ export default {
     onClose () {
       this.$emit('update:visible', false)
     },
-    onModelClose () {
-      this.modelVisible = false
-    },
     addJoinItem () {
     },
     removeJoinItem (index) {
@@ -358,15 +374,20 @@ export default {
         if (valid) {
           this.viewHandle(() => {
             post(commonApi.getColumnsJson, { queryObject: this.result }).then(res => {
-              this.formItems = res.formJson
-              this.modelVisible = true
+              this.$refs.xAddForm.init({
+                formItems: res.formJson,
+                serviceName: res.serviceName
+              })
+              this.$refs.xAddForm.open({
+                businessType: '新增',
+                title: '效果预览'
+              })
             })
           })
         }
       })
     },
     submit () {
-      this.onModelClose()
       this.$refs.businessCreateForm.validate(valid => {
         if (valid) {
           this.viewHandle(() => {

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

@@ -7,13 +7,8 @@
     @close="onClose"
   >
     <x-add-form
-      business-title="参数设置"
-      business-type="编辑"
-      :visible.sync="editQueryVisible"
-      :json-data="formObj.formJson"
-      :modify-model-data="modifyModelDataItem"
-      :loading="loading"
-      @onSubmit="submit"/>
+      ref="xAddForm"
+      @onSubmit="onAddOrEditSubmit"/>
     <a-list
       :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
       :dataSource="columnJson.groups"
@@ -45,18 +40,11 @@ export default {
     return {
       // 页面宽度
       screenWidth: document.documentElement.clientWidth,
-      // 是否显示参数下发抽屉
-      editQueryVisible: false,
-      targetIndex: 0,
       columnJson: {},
-      editIndex: -1,
       formObj: {
         groupName: '',
         formJson: []
-      },
-      modifyModelDataItem: {},
-      // 参数设置业务执行状态
-      loading: false
+      }
     }
   },
   mounted () {
@@ -94,36 +82,37 @@ export default {
     toEdit (item) {
       post(commonApi.getColumnsJson, { queryObject: item }).then(res => {
         this.formObj = res
-        this.modifyModelDataItem = { data: this.modifyModelData[this.formObj.groupName] }
-        this.editQueryVisible = true
+        this.$refs.xAddForm.init({
+          formItems: res.formJson,
+          serviceName: res.serviceName
+        })
+        const modifyModelData = { data: this.modifyModelData[res.groupName] }
+        this.$refs.xAddForm.open({
+          businessType: '修改',
+          modifyModelData: modifyModelData,
+          title: '参数项'
+        })
       })
     },
     onClose () {
       this.$emit('update:visible', false)
     },
-    submit (res) {
-      if (res.valid) {
-        this.loading = true
-        const requestParameters = {
-          paramsJson: {}
-        }
-        requestParameters.paramsJson[this.formObj.groupName] = {}
-        for (const key of Object.keys(res.form)) {
-          const realKey = key.substring(key.indexOf('_') + 1)
-          requestParameters.paramsJson[this.formObj.groupName][realKey] = res.form[key]
-        }
-        this.$emit('onSubmit', requestParameters, result => {
-          if (result) {
-            this.$message.success('参数设置成功！')
-          } else {
-            this.$message.error('参数设置失败！')
-          }
-          this.loading = false
-          this.editQueryVisible = false
-        })
-      } else {
-        return false
+    onAddOrEditSubmit (res, callback) {
+      const requestParameters = {
+        paramsJson: {}
+      }
+      requestParameters.paramsJson[this.formObj.groupName] = {}
+      for (const key of Object.keys(res.form)) {
+        requestParameters.paramsJson[this.formObj.groupName][key] = res.form[key]
       }
+      this.$emit('onSubmit', requestParameters, result => {
+        if (result) {
+          this.$message.success('参数设置成功！')
+        } else {
+          this.$message.error('参数设置失败！')
+        }
+        callback()
+      })
     }
   }
 }

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

@@ -39,7 +39,7 @@
 import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
 import { formatDate } from '@vue2-client/utils/util'
 import { mapState } from 'vuex'
-import { addOrModify, post } from '@vue2-client/services/api'
+import { post } from '@vue2-client/services/api'
 
 export default {
     name: 'XAddForm',
@@ -52,8 +52,6 @@ export default {
         viewMode: false,
         // 是否展示
         isShow: false,
-        // 查询配置文件名
-        queryParamsName: '',
         // 内容加载是否完成
         loaded: false,
         // 业务类型
@@ -105,13 +103,12 @@ export default {
     },
     methods: {
       init (params) {
-        const { isShow = true, formItems, viewMode, isTableTemp, queryParamsName, serviceName = 'af-system' } = params
+        const { isShow = true, formItems, viewMode, isTableTemp, serviceName = 'af-system' } = params
         if (isShow) {
           this.isShow = true
           this.formItems = JSON.parse(JSON.stringify(formItems))
           this.viewMode = viewMode
           this.isTableTemp = isTableTemp
-          this.queryParamsName = queryParamsName
           this.serviceName = serviceName
         }
       },
@@ -251,24 +248,18 @@ export default {
             })
             return
           }
-          // 组织请求
-          const requestParameters = {
-            queryParamsName: this.queryParamsName,
-            form: {},
-            businessType: this.businessType,
-            operator: this.currUser.name
-          }
+          // 处理表单键问题
+          const realForm = {}
           for (const key of Object.keys(requestForm)) {
             const realKey = this.getRealKey(key)
-            requestParameters.form[realKey] = requestForm[key]
+            realForm[realKey] = requestForm[key]
           }
-          addOrModify(requestParameters, this.serviceName).then(res => {
-            this.$message.success(this.businessType + '成功！')
-            // commit
-            this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
-          }).catch(e => {
-            this.$message.error(this.businessType + '失败：' + e)
-          }).finally(() => {
+          // 交由父级处理
+          this.$emit('onSubmit', {
+            businessType: this.businessType,
+            realForm: realForm,
+            currUserName: this.currUser.name
+          }, () => {
             this.close()
           })
         })

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="visible" class="table-page-search-wrapper">
+  <div v-show="visible && realJsonData.length > 0" class="table-page-search-wrapper">
     <div v-show="advanced" ref="drawerContainer"></div>
     <a-form-model
       v-if="loaded"

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

@@ -1,42 +1,45 @@
 <template>
   <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>
+    <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></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>
   </div>
 </template>
 <script>
@@ -44,7 +47,7 @@ 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 { commonApi } from '@vue2-client/services/api/common'
+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'
@@ -59,6 +62,8 @@ export default {
   },
   data () {
     return {
+      // 加载状态
+      loading: false,
       // 图标样式
       iconStyle: {
         position: 'relative',
@@ -131,7 +136,7 @@ export default {
     },
     fixedQueryForm: {
       handler () {
-        this.$refs.xTable.refresh(true)
+        this.refreshTable(true)
       },
       deep: true
     },
@@ -156,16 +161,19 @@ export default {
   },
   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)
       })
@@ -194,9 +202,9 @@ export default {
         formItems: res.formJson,
         viewMode: this.viewMode,
         isTableTemp: this.isTableTemp,
-        queryParamsName: this.queryParamsName,
         serviceName: res.serviceName
       })
+      this.loading = false
     },
     /**
      * 提交查询表单事件
@@ -213,11 +221,26 @@ export default {
       }
     },
     /**
-     * 新增或修改后事件
-     * @param res  参数
+     * 提交新增表单事件
      */
-    afterAddOrEditSubmit (res) {
-      this.$refs.xTable.refresh(res.type === '新增')
+    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()
+      })
     },
     /**
      * 表格查询后事件
@@ -283,7 +306,14 @@ export default {
      */
     tempTableEdit (res) {
       this.$emit('tempTableEdit', res)
-    }
+    },
+    /**
+     * 刷新表格
+     * @param toFirstPage 是否到第一页
+     */
+    refreshTable (toFirstPage = true) {
+      this.$refs.xTable.refresh(toFirstPage)
+    },
   }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-show="tableColumns.length > 0">
     <a-row :gutter="48">
       <a-col>
         <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
@@ -230,6 +230,9 @@ export default {
       } = params
       this.queryParams = queryParams
       this.tableColumns = JSON.parse(JSON.stringify(tableColumns))
+      if (this.tableColumns.length === 0) {
+        return
+      }
       this.buttonState = buttonState
       this.title = title
       this.serviceName = serviceName