vue2-client 1.5.10 → 1.5.12

package/CHANGELOG.md

@@ -1,7 +1,10 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.5.6 - 1.5.9 -2022-12-05 @江超**
+**1.5.11 - 1.5.12 -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.10",
+  "version": "1.5.12",
   "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

@@ -83,14 +83,14 @@ export default {
       post(commonApi.getColumnsJson, { queryObject: item }).then(res => {
         this.formObj = res
         this.$refs.xAddForm.init({
-          formItems: this.formObj.formJson,
-          serviceName: this.formObj.serviceName
+          formItems: res.formJson,
+          serviceName: res.serviceName
         })
-        const modifyModelData = { data: this.modifyModelData[this.formObj.groupName] }
+        const modifyModelData = { data: this.modifyModelData[res.groupName] }
         this.$refs.xAddForm.open({
           businessType: '修改',
           modifyModelData: modifyModelData,
-          title: this.title
+          title: '参数项'
         })
       })
     },

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"
-      @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>
+    <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="button">
+          <slot name="button"></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>
@@ -59,6 +62,8 @@ export default {
   },
   data () {
     return {
+      // 加载状态
+      loading: false,
       // 图标样式
       iconStyle: {
         position: 'relative',
@@ -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)
       })
@@ -196,6 +204,7 @@ export default {
         isTableTemp: this.isTableTemp,
         serviceName: res.serviceName
       })
+      this.loading = false
     },
     /**
      * 提交查询表单事件

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' }">
@@ -32,7 +32,6 @@
             </a-dropdown>
             <slot :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows" name="button"></slot>
           </a-space>
-          <slot name="expand"></slot>
         </span>
       </a-col>
       <a-col>
@@ -230,6 +229,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

package/src/base-client/plugins/AppData.js

@@ -31,10 +31,7 @@ const GetAppDataService = {
       localStorage.setItem(process.env.VUE_APP_BADGE_KEY, JSON.stringify(badgeItemArray))
     })
     // 获取省市区数据
-    await post(manageApi.getDivisionsOhChina, {}).then((res) => {
-      // 追加参数
-      localStorage.setItem(process.env.VUE_APP_DIVISIONSOHCHINA, JSON.stringify(res))
-    })
+    localStorage.setItem(process.env.VUE_APP_DIVISIONSOHCHINA, JSON.stringify([]))
   },
   // 返回树形省市区
   getDivisionsOhChinaForTree () {