vue2-client 1.8.218 → 1.8.220

package/package.json

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

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

@@ -23,6 +23,7 @@
           :layout="layout"
           :get-data-params="getDataParams"
           :env="env"
+          @x-form-item-emit-func="emitFunc"
         />
       </a-row>
       <a-row :gutter="16" v-for="(groupItem, groupIndex) in groupJsonData" :key="groupIndex">
@@ -409,105 +410,139 @@ export default {
       return value.addOrEdit === 'readonly'
     },
     async onSubmit () {
-      this.$refs.selectForm.validate(async valid => {
-        // 验证未通过直接返回
-        if (!valid) {
-          return false
-        }
-        this.loading = true
-        for (const key of Object.keys(this.form)) {
-          const value = this.form[key]
-          if (value === null || value === '' || (typeof value === 'object' && Object.keys(value).length === 0)) {
-            this.form[key] = undefined
-          }
-        }
-        const requestForm = Object.assign({}, this.form)
-        // 追加静默新增字段
-        if (this.businessType === '新增') {
-          for (const item of this.silenceAddJsonData) {
-            switch (item.silencePurpose) {
-              case 'createTime':
-                requestForm[item.model] = formatDate('now')
-                break
-              case 'operator':
-                requestForm[item.model] = this.currUser.name
-                break
-              case 'operatorId':
-                requestForm[item.model] = this.currUser.id
-                break
-              case 'orgId':
-                requestForm[item.model] = this.currUser.orgid
-                break
-              case 'orgName':
-                requestForm[item.model] = this.currUser.orgs
-                break
-              case 'depId':
-                requestForm[item.model] = this.currUser.depids
-                break
-              case 'depName':
-                requestForm[item.model] = this.currUser.deps
-                break
-            }
-          }
-          // 通过请求追加静默新增：自定义字段
-          for (const item of this.silenceAddJsonData.filter((item) => item.silencePurpose === 'customize')) {
-            // 获取通过logic静默新增的字段
-            requestForm[item.model] = await runLogic(item.silenceSource, requestForm, this.serviceName)
-          }
-        }
-        // 如果是临时表
-        if (this.isTableTemp) {
-          this.$emit('tempTableModify', {
-            valid: valid,
-            form: requestForm,
-            businessType: this.businessType
-          })
-          return
-        }
-        // 处理表单键问题
-        const realForm = {}
-        for (const key of Object.keys(requestForm)) {
-          const value = requestForm[key]
-          const extraFormKeyTagIndex = key.indexOf('@')
-          // 如果含有动态简易表单项，则将该项的值放入具体的动态表单配置字段中
-          if (extraFormKeyTagIndex !== -1) {
-            const extraFormKey = key.substring(0, extraFormKeyTagIndex)
-            const realKey = key.substring(extraFormKeyTagIndex + 1)
-            if (!realForm[extraFormKey]) {
-              realForm[extraFormKey] = {}
-            }
-            realForm[extraFormKey][realKey] = value
-          } else {
-            const realKey = this.isKeyHandle ? this.getRealKey(key) : key
-            realForm[realKey] = value
+      const valid = await this.validateForm()
+      if (!valid) return false
+      this.loading = true
+      const requestForm = this.prepareForm()
+      await this.appendSilenceAddFields(requestForm)
+
+      if (this.isTableTemp) {
+        this.$emit('tempTableModify', {
+          valid: valid,
+          form: requestForm,
+          businessType: this.businessType
+        })
+        return
+      }
+
+      const realForm = this.handleFormKeys(requestForm)
+      if (this.viewMode) {
+        this.$message.info('预览模式禁止新增和修改')
+        return false
+      }
+
+      if (this.$listeners.onSubmit || this.$listeners.componentDidMounted) {
+        this.$lowCodeEmit('onSubmit', {
+          businessType: this.businessType,
+          serviceName: this.serviceName,
+          realForm: realForm,
+          currUserName: this.currUser.name,
+          currUserId: this.currUser.id,
+          orgId: this.currUser.orgid
+        })
+        this.$emit('onSubmit', {
+          businessType: this.businessType,
+          serviceName: this.serviceName,
+          realForm: realForm,
+          currUserName: this.currUser.name,
+          currUserId: this.currUser.id,
+          orgId: this.currUser.orgid
+        })
+      } else {
+        this.defaultSubmit(realForm)
+      }
+    },
+
+    async asyncSubmit () {
+      return new Promise((resolve, reject) => {
+        this.$refs.selectForm.validate(async valid => {
+          if (!valid) {
+            reject(new Error('Form validation failed'))
+            return
           }
-        }
-        if (this.viewMode) {
-          this.$message.info('预览模式禁止新增和修改')
-          return false
-        }
-        if (this.$listeners.onSubmit || this.$listeners.componentDidMounted) {
-          this.$lowCodeEmit('onSubmit', {
+          this.loading = true
+          const requestForm = this.prepareForm()
+          await this.appendSilenceAddFields(requestForm)
+          resolve({
             businessType: this.businessType,
             serviceName: this.serviceName,
-            realForm: realForm,
-            currUserName: this.currUser.name,
-            currUserId: this.currUser.id,
-            orgId: this.currUser.orgid
-          })
-          // 交由父级处理
-          this.$emit('onSubmit', {
-            businessType: this.businessType,
-            serviceName: this.serviceName,
-            realForm: realForm,
+            realForm: this.handleFormKeys(requestForm),
             currUserName: this.currUser.name,
             currUserId: this.currUser.id,
             orgId: this.currUser.orgid
           })
+        })
+      })
+    },
+
+    validateForm () {
+      return new Promise((resolve) => {
+        this.$refs.selectForm.validate(valid => resolve(valid))
+      })
+    },
+
+    prepareForm () {
+      const form = { ...this.form }
+      for (const key of Object.keys(form)) {
+        const value = form[key]
+        if (value === null || value === '' || (typeof value === 'object' && Object.keys(value).length === 0)) {
+          form[key] = undefined
+        }
+      }
+      return form
+    },
+
+    async appendSilenceAddFields (form) {
+      if (this.businessType === '新增') {
+        for (const item of this.silenceAddJsonData) {
+          switch (item.silencePurpose) {
+            case 'createTime':
+              form[item.model] = formatDate('now')
+              break
+            case 'operator':
+              form[item.model] = this.currUser.name
+              break
+            case 'operatorId':
+              form[item.model] = this.currUser.id
+              break
+            case 'orgId':
+              form[item.model] = this.currUser.orgid
+              break
+            case 'orgName':
+              form[item.model] = this.currUser.orgs
+              break
+            case 'depId':
+              form[item.model] = this.currUser.depids
+              break
+            case 'depName':
+              form[item.model] = this.currUser.deps
+              break
+          }
+        }
+        for (const item of this.silenceAddJsonData.filter((item) => item.silencePurpose === 'customize')) {
+          form[item.model] = await runLogic(item.silenceSource, form, this.serviceName)
+        }
+      }
+    },
+
+    handleFormKeys (form) {
+      const realForm = {}
+      for (const key of Object.keys(form)) {
+        const value = form[key]
+        const extraFormKeyTagIndex = key.indexOf('@')
+        if (extraFormKeyTagIndex !== -1) {
+          const extraFormKey = key.substring(0, extraFormKeyTagIndex)
+          const realKey = key.substring(extraFormKeyTagIndex + 1)
+          if (!realForm[extraFormKey]) {
+            realForm[extraFormKey] = {}
+          }
+          realForm[extraFormKey][realKey] = value
         } else {
-          this.defaultSubmit(realForm)
+          const realKey = this.isKeyHandle ? this.getRealKey(key) : key
+          realForm[realKey] = value
         }
-      })
+      }
+      return realForm
     },
     // 默认提交事件
     defaultSubmit (realForm, callback) {
@@ -595,6 +630,9 @@ export default {
           this.form[item.model] = modifyModelData.data[item.model] + ''
         }
       }
+    },
+    emitFunc (func, data) {
+      this.$emit('x-form-item-emit-func', func, data)
     }
   },
   watch: {

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

@@ -6,8 +6,26 @@
     <a-form-model-item
       :ref="attr.model"
       :label="attr.name"
+      :labelCol="layout === 'inline' && attr.occupyCol?labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
+      :wrapperCol="layout === 'inline'&& attr.occupyCol? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
       :prop="attr.prop ? attr.prop : attr.model">
-      <a-input v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
+      <a-input-group v-if="attr.inputOnAfterName && attr.inputOnAfterFunc" compact>
+        <a-input
+          v-model="form[attr.model]"
+          :disabled="disabled"
+          style="width:90%"
+          :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
+        <a-button style="width:10%" type="primary" @click="emitFunc(attr.inputOnAfterFunc,form[attr.model])">
+          {{ attr.inputOnAfterName }}
+        </a-button>
+      </a-input-group>
+      <a-input
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        style="width:100%"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
+
     </a-form-model-item>
   </x-form-col>
   <!-- 下拉框 -->
@@ -90,7 +108,7 @@
         show-search
         @search="fetchFunction"
       >
-        <a-spin v-if="searching" slot="notFoundContent" size="small" />
+        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
         <a-select-option
           v-if="mode === '查询'"
           key="999999"
@@ -162,7 +180,7 @@
         allowClear
         @search="fetchFunction"
       >
-        <a-spin v-if="searching" slot="notFoundContent" size="small" />
+        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
         <a-select-option
           v-for="(item,index) in option"
           :key="index"
@@ -212,8 +230,16 @@
         v-model="form[attr.model]"
         :disabled="disabled"
         :show-time="true"
+        style="width: 100%;"
         valueFormat="YYYY-MM-DD HH:mm:ss"/>
-      <a-range-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+      <a-range-picker
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        valueFormat="YYYY-MM-DD HH:mm:ss"
+        style="width: 100%;"
+      />
     </a-form-model-item>
   </x-form-col>
   <!-- 月份选择器 -->
@@ -221,7 +247,13 @@
     v-else-if="attr.type === 'monthPicker'"
     :flex="attr.flex">
     <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
-      <a-month-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM"/>
+      <a-month-picker
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        valueFormat="YYYY-MM"
+        style="width: 100%;"
+      />
     </a-form-model-item>
   </x-form-col>
   <!-- 年份选择器 -->
@@ -237,6 +269,7 @@
         v-decorator="['year']"
         placeholder="请选择年份"
         :open="yearShowOne"
+        style="width: 100%;"
         @openChange="openChangeOne"
         @panelChange="panelChangeOne"/>
     </a-form-model-item>
@@ -251,15 +284,21 @@
         v-model="form[attr.model]"
         :disabled="disabled"
         :show-time="true"
+        style="width: 100%;"
         format="YYYY-MM-DD"
-        valueFormat="YYYY-MM-DD HH:mm:ss" />
-      <a-date-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+        valueFormat="YYYY-MM-DD HH:mm:ss"/>
+      <a-date-picker
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        style="width: 100%;"
+        :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
+        valueFormat="YYYY-MM-DD HH:mm:ss"/>
     </a-form-model-item>
   </x-form-col>
   <!-- 文本域 -->
   <a-col
     v-else-if="attr.type === 'textarea'"
-    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
     :xs="24"
     :sm="24"
     :md="24"
@@ -268,10 +307,16 @@
     :xxl="24">
     <a-form-model-item
       :labelCol="layout === 'inline'?{span:2}:undefined"
+      :wrapperCol="layout === 'inline'?{span:22}:undefined"
       :ref="attr.model"
       :label="attr.name"
       :prop="attr.prop ? attr.prop : attr.model">
-      <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
+      <a-textarea
+        v-model="form[attr.model]"
+        style="width: 100%;"
+        :disabled="disabled"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :rows="4"/>
     </a-form-model-item>
   </a-col>
   <!-- 文件上传 -->
@@ -286,6 +331,7 @@
     :xxl="24">
     <a-form-model-item
       :labelCol="layout === 'inline'?{span:2}:undefined"
+      :wrapperCol="layout === 'inline'?{span:22}:undefined"
       :ref="attr.model"
       :label="attr.name"
       :prop="attr.prop ? attr.prop : attr.model">
@@ -303,7 +349,12 @@
     v-else-if="attr.type === 'citySelect'"
     :flex="attr.flex">
     <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
-      <citySelect ref="citySelect" v-model="form[attr.model]" :contexts="attr.contexts" :value-type="attr.valueType" :default-value="form[attr.model]"></citySelect>
+      <citySelect
+        ref="citySelect"
+        v-model="form[attr.model]"
+        :contexts="attr.contexts"
+        :value-type="attr.valueType"
+        :default-value="form[attr.model]"></citySelect>
     </a-form-model-item>
   </x-form-col>
   <!-- 地点搜索框 -->
@@ -324,7 +375,7 @@
     v-else-if="attr.type === 'personSetting'"
     :flex="attr.flex">
     <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
-      <PersonSetting v-model="form[attr.model]" ></PersonSetting>
+      <PersonSetting v-model="form[attr.model]"></PersonSetting>
     </a-form-model-item>
   </x-form-col>
   <!-- 树形选择框 -->
@@ -345,7 +396,7 @@
       :ref="attr.model"
       :label="attr.name"
       :prop="attr.prop ? attr.prop : attr.model">
-      <a-rate v-model="form[attr.model]" />
+      <a-rate v-model="form[attr.model]"/>
     </a-form-model-item>
   </x-form-col>
 </template>
@@ -388,6 +439,22 @@ export default {
       searchResult: '',
       yearShowOne: false,
       optionForFunc: [],
+      labelAndWrapperCol: [{
+        labelCol: undefined,
+        wrapperCol: undefined
+      },
+        {
+          labelCol: undefined,
+          wrapperCol: undefined
+        },
+        {
+          labelCol: { span: 3 },
+          wrapperCol: { span: 21 }
+        },
+        {
+          labelCol: { span: 2 },
+          wrapperCol: { span: 22 }
+        }],
       // moment
       moment
     }
@@ -395,59 +462,70 @@ export default {
   props: {
     attr: {
       type: Object,
-      default: () => {
-        return {}
-      }
+      default:
+        () => {
+          return {}
+        }
     },
     form: {
       type: Object,
-      required: true
+      required:
+        true
     },
     disabled: {
       type: Boolean,
-      default: () => {
-        return false
-      }
+      default:
+        () => {
+          return false
+        }
     },
     mode: {
       type: String,
-      default: () => {
-        return '查询'
-      }
+      default:
+        () => {
+          return '查询'
+        }
     },
     files: {
       type: Array,
-      default: () => {
-        return []
-      }
+      default:
+        () => {
+          return []
+        }
     },
     images: {
       type: Array,
-      default: () => {
-        return []
-      }
+      default:
+        () => {
+          return []
+        }
     },
     serviceName: {
       type: String,
-      default: undefined
+      default:
+      undefined
     },
     // 调用logic获取数据源的追加参数
     getDataParams: {
       type: Object,
-      default: undefined
+      default:
+      undefined
     },
     // 布局
     layout: {
       type: String,
-      default: 'horizontal'
+      default:
+        'horizontal'
     },
     // 环境
     env: {
       type: String,
-      default: () => {
-        return 'prod'
-      }
-    },
+      default:
+        () => {
+          return 'prod'
+        }
+    }
+    ,
   },
   created () {
     this.init()
@@ -491,14 +569,26 @@ export default {
             xxl: 24
           }
         } else {
-          // 新增修改表单 vertical 模式下默认为1列
-          this.attr.flex = {
-            xs: 24,
-            sm: 24,
-            md: 24,
-            lg: 12,
-            xl: 8,
-            xxl: 8
+          if (this.attr.type === 'input' && this.attr.occupyCol) {
+            // 如果是 input 看是否配置了 占用列配置
+            this.attr.flex = {
+              xs: 8 * this.attr.occupyCol,
+              sm: 8 * this.attr.occupyCol,
+              md: 8 * this.attr.occupyCol,
+              lg: 8 * this.attr.occupyCol,
+              xl: 8 * this.attr.occupyCol,
+              xxl: 8 * this.attr.occupyCol
+            }
+          } else {
+            // 新增修改表单 vertical 模式下默认为1列
+            this.attr.flex = {
+              xs: 24,
+              sm: 24,
+              md: 24,
+              lg: 12,
+              xl: 8,
+              xxl: 8
+            }
           }
         }
       }
@@ -610,6 +700,9 @@ export default {
       } else {
         return child.child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
       }
+    },
+    emitFunc (func, data) {
+      this.$emit('x-form-item-emit-func', func, data)
     }
   }
 }