vue2-client 1.7.10 → 1.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",

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

@@ -96,7 +96,6 @@
             <div
               v-for="(columnItem, index) in form.column"
               :key="index"
-              class="column_item"
               draggable="true"
               @dragend="handleDragEnd($event, columnItem)"
               @dragenter="handleDragEnter($event, columnItem)"
@@ -105,8 +104,8 @@
               <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
                 <span class="dragTips">拖到此处放置</span>
               </a-row>
-              <a-row :gutter="24">
-                <a-col :span="8">
+              <a-row :gutter="24" class="column_item">
+                <a-col :span="7">
                   <span style="font-weight: bold">
                     {{ columnItem.title }}
                   </span>
@@ -116,7 +115,7 @@
                     {{ columnItem.key }}
                   </span>
                 </a-col>
-                <a-col :span="7">
+                <a-col :span="8">
                   <a-tooltip>
                     <template slot="title">
                       查询表单项
@@ -147,6 +146,12 @@
                     </template>
                     <a-tag :color="columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
                   </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      字段组存储
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray.includes('group') ? '#82A0D8' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="crown" /></a-tag>
+                  </a-tooltip>
                 </a-col>
                 <a-col :span="1">
                   <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
@@ -655,7 +660,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.column_item :hover {
+.column_item:hover {
   background-color:rgba(64, 169, 255,0.25);
 }
 .dragTips{

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

@@ -66,7 +66,7 @@
             </a-form-model-item>
           </a-card>
         </a-col>
-        <a-col :span="9">
+        <a-col v-show="!dataMode.group && (dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition)" :span="9">
           <a-card v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition" :bodyStyle="bodyStyle" title="核心配置">
             <template v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.sqlQueryCondition">
               <a-divider style="font-size: 14px;margin-top: 0">表单配置</a-divider>
@@ -193,7 +193,7 @@
             </template>
           </a-card>
         </a-col>
-        <a-col v-if="item.formType" :span="9">
+        <a-col v-if="!dataMode.group && item.formType && (((dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')) || (dataMode.table && item.formType !== 'file' && item.formType !== 'image') || selectDataShow)" :span="9">
           <a-card :bodyStyle="bodyStyle" title="扩展属性">
             <template v-if="(dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')">
               <a-divider style="font-size: 14px;margin-top: 0">提示相关</a-divider>
@@ -307,6 +307,101 @@
             </template>
           </a-card>
         </a-col>
+        <a-col :span="18" v-if="dataMode.group">
+          <a-card :bodyStyle="bodyStyle" title="数据字段">
+            <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 item.column"
+              :key="index"
+              draggable="true"
+              @dragend="handleDragEnd($event, columnItem)"
+              @dragenter="handleDragEnter($event, columnItem)"
+              @dragstart="handleDragStart($event, columnItem)"
+              @dragover.prevent="handleDragOver($event, columnItem)">
+              <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
+                <span class="dragTips">拖到此处放置</span>
+              </a-row>
+              <a-row :gutter="24" class="column_item">
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.title }}
+                  </span>
+                </a-col>
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.key }}
+                  </span>
+                </a-col>
+                <a-col :span="8">
+                  <a-tooltip>
+                    <template slot="title">
+                      查询表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && 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 && 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 && 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 && 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 && columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      字段JSON存储
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('group') ? '#82A0D8' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="crown" /></a-tag>
+                  </a-tooltip>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
+                </a-col>
+              </a-row>
+            </div>
+          </a-card>
+        </a-col>
       </a-row>
       <a-alert
         v-if="dataModeArrayData.length === 0"
@@ -333,6 +428,7 @@
         style="margin-top: 5px"
         type="info"/>
     </a-form-model>
+    <create-query-item ref="queryItem" @getColumn="getColumnItem" @itemHandle="itemHandleItem"/>
   </a-modal>
 </template>
 
@@ -451,6 +547,7 @@ export default {
         rule: {
           required: 'false'
         },
+        column: [],
         queryType: '=',
         formType: 'input',
         accept: undefined,
@@ -484,7 +581,11 @@ export default {
         pathKey: [{ required: true, message: '请选择上传到的扩展目录', trigger: 'blur' }]
       },
       // 字典键集合
-      option: []
+      option: [],
+      selectIndex: null,
+      ending: null,
+      dragging: null,
+      itemMap: {}
     }
   },
   mounted () {
@@ -551,6 +652,18 @@ export default {
       this.item = _item
       this.dataModeArrayData = this.item.dataModeArray
       this.flashModal()
+
+      for (const columnItem of this.item.column) {
+        this.itemMap[columnItem.key] = Object.assign({
+          key: '',
+          title: '',
+          slot: {},
+          rule: {
+            required: 'false'
+          },
+          dataModeArray: []
+        }, columnItem)
+      }
     },
     // 增加数据字段前数据处理
     addColumnItemExecute () {
@@ -720,7 +833,73 @@ export default {
         _item.slot.actionText = _item.actionText
         delete _item.actionText
       }
-    }
+    },
+    // 拖拽事件
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      if (this.ending.key === this.dragging.key) {
+        return
+      }
+      const newItems = [...this.item.column]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(this.ending)
+      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
+      // 挪移位置
+      newItems.splice(src, 1)
+      newItems.splice(dst, 0, this.dragging)
+      this.item.column = newItems
+      this.$nextTick(() => {
+        this.dragging = null
+        this.ending = null
+      })
+    },
+    handleDragOver (e) {
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      // 为需要移动的元素设置dragstart事件
+      e.dataTransfer.effectAllowed = 'move'
+      this.ending = item
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.selectIndex = index
+        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    removeColumnItem (key, index) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要删除该数据项？',
+        content: '删除的数据项无法恢复',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          delete _this.itemMap[key]
+          _this.item.column.splice(index, 1)
+        }
+      })
+    },
+    getColumnItem (callback) {
+      callback(JSON.parse(JSON.stringify(this.item.column)))
+    },
+    itemHandleItem (item, type) {
+      this.itemMap[item.key] = item
+      if (type === '新增') {
+        this.item.column.push(item)
+      } else {
+        this.$set(this.item.column, this.selectIndex, item)
+      }
+      this.$message.success(`${type}成功`)
+      this.$refs.queryItem.flashModal(false)
+    },
   }
 }
 </script>
@@ -730,4 +909,15 @@ export default {
    text-align: center;
    padding: 0 10px;
  }
+ .column_item:hover {
+   background-color:rgba(64, 169, 255,0.25);
+ }
+ .dragTips{
+   display:block;
+   text-align: center;
+   border:1px dashed rgba(64, 169, 255,0.55);
+ }
+ .dragTipsWarp{
+   padding: .5rem 2rem;
+ }
 </style>

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

@@ -19,6 +19,20 @@
         :get-data-params="getDataParams"
       />
     </a-row>
+    <a-row :gutter="16" v-for="(groupItem, groupIndex) in groupJsonData" :key="groupIndex">
+      <x-form-item
+        v-for="(item, index) in groupItem.groupItems"
+        :key="index"
+        :attr="item"
+        :disabled="itemDisabled(item)"
+        :files="files"
+        :form="form[groupItem.model]"
+        :images="images"
+        :service-name="serviceName"
+        mode="新增/修改"
+        :get-data-params="getDataParams"
+      />
+    </a-row>
     <a-row :gutter="16" v-for="(item, key) in simpleFormJsonData" :key="'row' + key">
       <a-card :title="item.name" :bordered="false" size="small">
         <x-form-item
@@ -93,6 +107,22 @@ export default {
         return item.addOrEdit && item.addOrEdit !== 'no' && item.addOrEdit !== 'silenceAdd' && item.addOrEdit !== 'version' && !this.itemDisabled(item)
       })
     },
+    // 过滤出用于新增/修改场景的表单项
+    groupJsonData: function () {
+      return this.formItems.filter((item) => {
+        return item.type === 'group'
+      }).map((item) => {
+          item.groupItems = item.groupItems.filter((item) => {
+            return item.addOrEdit && item.addOrEdit !== 'no' && item.addOrEdit !== 'silenceAdd' && item.addOrEdit !== 'version' && !this.itemDisabled(item)
+          }).map((groupItem) => {
+            // 只保留第一个下划线后面的内容
+            groupItem.model = groupItem.model.substring(groupItem.model.indexOf('_') + 1)
+            return groupItem
+          })
+          return item
+        }
+      )
+    },
     // 过滤出用于静默新增场景的表单项
     silenceAddJsonData: function () {
       return this.formItems.filter(function (item) {
@@ -132,6 +162,15 @@ export default {
         const item = this.realJsonData[i]
         this.setFormProps(formData, item)
       }
+      // 设置表单分组项目相关参数
+      for (let i = 0; i < this.groupJsonData.length; i++) {
+        const groupItem = this.groupJsonData[i]
+        formData[groupItem.model] = {}
+        for (let j = 0; j < groupItem.groupItems.length; j++) {
+          const item = groupItem.groupItems[j]
+          this.setFormProps(formData[groupItem.model], item)
+        }
+      }
       // 设置动态简易表单项的相关参数
       for (const key in this.simpleFormJsonData) {
         for (const item of this.simpleFormJsonData[key].value) {
@@ -234,10 +273,6 @@ export default {
         if (!valid) {
           return false
         }
-        if (this.viewMode) {
-          this.$message.info('预览模式禁止新增和修改')
-          return false
-        }
         this.loading = true
         for (const key of Object.keys(this.form)) {
           if (this.form[key] === null || this.form[key] === '') {
@@ -293,6 +328,16 @@ export default {
             realForm[realKey] = value
           }
         }
+        if (this.viewMode) {
+          this.$message.info('预览模式禁止新增和修改')
+          console.log({
+            businessType: this.businessType,
+            serviceName: this.serviceName,
+            realForm: realForm,
+            currUserName: this.currUser.name
+          })
+          return false
+        }
         // 交由父级处理
         this.$emit('onSubmit', {
           businessType: this.businessType,
@@ -347,6 +392,16 @@ export default {
           this.form[item.model] = undefined
         }
       }
+      // 对分组表单进行处理
+      for (let i = 0; i < this.groupJsonData.length; i++) {
+        const item = this.groupJsonData[i]
+        try {
+          if (modifyModelData.data[item.model]) {
+            this.form[item.model] = JSON.parse(modifyModelData.data[item.model])
+          }
+        } catch (e) {
+        }
+      }
       // 追加版本号信息
       for (const item of this.versionJsonData) {
         if (!modifyModelData.data[item.model]) {

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

@@ -15,6 +15,16 @@
           :service-name="serviceName"
           :get-data-params="getDataParams"
         />
+        <div v-for="(groupItem, groupIndex) in groupJsonData" :key="groupIndex">
+          <x-form-item
+            v-for="(item, index) in groupItem.groupItems"
+            :key="index"
+            :attr="item"
+            :form="form"
+            :service-name="serviceName"
+            :get-data-params="getDataParams"
+          />
+        </div>
         <div v-show="advanced">
           <x-form-item
             v-for="(item, index) in realJsonData.slice(6)"
@@ -87,6 +97,20 @@ export default {
     realJsonData: function () {
       return this.formItems.filter(item => !item.isOnlyAddOrEdit)
     },
+    // 过滤出用于新增/修改场景的表单项
+    groupJsonData: function () {
+      return this.formItems.filter((item) => {
+        return item.type === 'group'
+      }).map((item) => {
+          item.groupItems = item.groupItems.filter(item => !item.isOnlyAddOrEdit).map((groupItem) => {
+            // 只保留第一个下划线后面的内容
+            groupItem.model = groupItem.model.substring(groupItem.model.indexOf('_') + 1)
+            return groupItem
+          })
+          return item
+        }
+      )
+    },
   },
   methods: {
     init (params) {

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

@@ -334,15 +334,6 @@ export default {
      */
     refreshTable (toFirstPage = true) {
       this.$refs.xTable.refresh(toFirstPage)
-    },
-    /**
-     * 设置固定查询表单
-     */
-    setFixedQueryForm (form, isRefreshTable) {
-      this.fixedQueryForm = form
-      if (isRefreshTable) {
-        this.refreshTable(true)
-      }
     }
   }
 }

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

@@ -324,7 +324,9 @@ export default {
      * 如果参数为 true, 则强制刷新到第一页
      */
     refresh (bool) {
-      this.$refs.table.refresh(bool)
+      this.$nextTick(() => {
+        this.$refs.table.refresh(bool)
+      })
     },
     /**
      * 格式化日期

package/src/config/CreateQueryConfig.js

@@ -25,6 +25,11 @@ module.exports = {
       label: 'SQL生成查询表达式',
       value: 'sqlQueryCondition',
       noMatch: ['file', 'image', 'textarea', 'personSetting']
+    },
+    {
+      label: '字段组存储',
+      value: 'group',
+      noMatch: ['file', 'image', 'textarea', 'personSetting']
     }
   ],
   // 表单类型

package/src/router/async/config.async.js

@@ -6,6 +6,7 @@ const routesConfig = [
   'login',
   'submitTicket',
   'settings',
+  'createQuery',
   'root',
   {
     router: 'exp404',