vue2-client 1.18.47 → 1.18.51

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

@@ -1,12 +1,7 @@
 <template>
-  <div :style="{marginBottom: !visible ? '12px':''}">
+  <div :style="{ marginBottom: !visible ? '12px' : '' }">
     <div v-if="visible && realJsonData.length > 0" class="table-page-search-wrapper">
-      <a-form-model
-        v-if="loaded"
-        ref="form"
-        :model="form"
-        :rules="rules"
-        layout="inline">
+      <a-form-model v-if="loaded" ref="form" :model="form" :rules="rules" layout="inline">
         <a-row :gutter="24" type="flex">
           <x-form-item
             v-for="item in visibleItems"
@@ -38,25 +33,25 @@
           <a-col style="margin-left: auto">
             <span
               :style="advanced ? { float: 'right', overflow: 'hidden' } : {}"
-              class="table-page-search-submitButtons">
+              class="table-page-search-submitButtons"
+            >
               <template v-if="hiddenItems.length > 0">
                 <a @click="toggleAdvanced">
-                  <span v-if="!advanced" style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye" :style="iconStyle" class="form-expand-icon"></a-icon>&nbsp;更多条件
+                  <span v-if="!advanced" style="display: inline-flex; align-items: center">
+                    <a-icon type="eye" :style="iconStyle" class="form-expand-icon"></a-icon>
+                    &nbsp;更多条件
                   </span>
-                  <span v-else style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye-invisible" :style="iconStyle" class="form-expand-icon rotated"></a-icon>&nbsp;收起更多
+                  <span v-else style="display: inline-flex; align-items: center">
+                    <a-icon type="eye-invisible" :style="iconStyle" class="form-expand-icon rotated"></a-icon>
+                    &nbsp;收起更多
                   </span>
                 </a>
-                <a-divider type="vertical"/>
+                <a-divider type="vertical" />
               </template>
               <a-space>
-                <a-button
-                  v-if="!simpleMode"
-                  htmlType="submit"
-                  type="primary"
-                  @click="onSubmit">
-                  <a-icon :style="iconStyle" type="search"></a-icon>查询
+                <a-button v-if="!simpleMode" htmlType="submit" type="primary" @click="onSubmit">
+                  <a-icon :style="iconStyle" type="search"></a-icon>
+                  查询
                 </a-button>
                 <a-button v-if="!simpleMode" @click="resetForm">重置</a-button>
                 <slot></slot>
@@ -84,7 +79,7 @@ export default {
     XFormItem
   },
   mixins: [formValidationMixin],
-  data () {
+  data() {
     return {
       // 内容加载是否完成
       loaded: false,
@@ -124,21 +119,28 @@ export default {
     ...mapState('account', { currUser: 'user' }),
     // 过滤掉仅用于新增/修改场景的表单项
     realJsonData: function () {
-      return this.formItems.filter(item => (!item.isOnlyAddOrEdit && item.type !== 'group') || (item.type === 'group' && item.groupItems.some(groupItem => !groupItem.isOnlyAddOrEdit)))
+      return this.formItems.filter(
+        item =>
+          (!item.isOnlyAddOrEdit && item.type !== 'group') ||
+          (item.type === 'group' && item.groupItems.some(groupItem => !groupItem.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 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
-        }
-      )
+        })
     },
     // 合并所有来源的表单项
     allFormItems: function () {
@@ -170,20 +172,22 @@ export default {
         ...item,
         _originalIndex: this.visibleItemCount + index
       }))
-    },
+    }
   },
-  provide () {
+  provide() {
     return {
       XFormContext: this,
       // 移除必填项
       removeRequired: this.removeRequired,
       // 设置必填项
       setRequired: this.setRequired,
+      // 全局 label 宽度，确保所有表单项的 label 宽度一致
+      globalLabelWidth: this.globalLabelWidth
     }
   },
   methods: {
     // 根据flex值计算可见表单项数量
-    updateVisibleItemCount (flex) {
+    updateVisibleItemCount(flex) {
       // flex值与显示数量的映射关系
       const flexToCountMap = {
         24: 2, // 小屏：1个/行，显示2个（2行）
@@ -201,7 +205,7 @@ export default {
     },
 
     // 递归查找第一个XFormCol实例
-    findFirstXFormCol (components = this.$children) {
+    findFirstXFormCol(components = this.$children) {
       for (const component of components) {
         if (component.$options.name === 'XFormCol') {
           return component
@@ -214,7 +218,7 @@ export default {
     },
 
     // 设置flex监听
-    setupFlexWatcher () {
+    setupFlexWatcher() {
       this.$nextTick(() => {
         const firstXFormCol = this.findFirstXFormCol()
         if (firstXFormCol) {
@@ -224,7 +228,7 @@ export default {
           // 设置监听
           this._flexWatcher = this.$watch(
             () => firstXFormCol.computedFlex,
-            (newFlex) => {
+            newFlex => {
               this.updateVisibleItemCount(newFlex)
             }
           )
@@ -235,10 +239,16 @@ export default {
       })
     },
 
-    init (params) {
+    init(params) {
       const {
-        formItems, serviceName, getDataParams = {}, env = 'prod', simpleMode = false, funcData = {},
-        queryParamsName = 'localConfig', defaultQueryForm = {}
+        formItems,
+        serviceName,
+        getDataParams = {},
+        env = 'prod',
+        simpleMode = false,
+        funcData = {},
+        queryParamsName = 'localConfig',
+        defaultQueryForm = {}
       } = params
       this.mountedCount = 0
       this.queryParamsName = queryParamsName
@@ -276,9 +286,11 @@ export default {
           if (!funcData.queryFormInit.startsWith('async')) {
             funcData.queryFormInit = `async ${funcData.queryFormInit}`
           }
-          executeStrFunctionByContext(this, funcData.queryFormInit, [util, runLogic, getConfigByNameAsync]).then(res => {
-            this.form = Object.assign({}, this.form, res)
-          })
+          executeStrFunctionByContext(this, funcData.queryFormInit, [util, runLogic, getConfigByNameAsync]).then(
+            res => {
+              this.form = Object.assign({}, this.form, res)
+            }
+          )
         }
       } catch (e) {
         console.error('queryFormInit error', e)
@@ -286,7 +298,7 @@ export default {
       this.getDataParams = getDataParams
       this.loaded = true
     },
-    onItemMounted (_h) {
+    onItemMounted(_h) {
       this.mountedCount += 1
       if (this.mountedCount === this.allFormItems.length) {
         // 所有 x-from-item 挂载完成，触发父组件中的 xTable.init
@@ -294,7 +306,7 @@ export default {
       }
     },
     // 时间组件赋默认值
-    getDateRange ({ type, queryFormDefault: defaultValue, queryType, queryValueFormat: defaultFormat, name }) {
+    getDateRange({ type, queryFormDefault: defaultValue, queryType, queryValueFormat: defaultFormat, name }) {
       const formatMap = {
         yearPicker: 'YYYY',
         yearRangePicker: 'YYYY',
@@ -303,7 +315,7 @@ export default {
         datePicker: 'YYYY-MM-DD',
         rangePicker: 'YYYY-MM-DD HH:mm:ss',
         timePicker: 'HH:mm:ss',
-        timeRangePicker: 'HH:mm:ss',
+        timeRangePicker: 'HH:mm:ss'
       }
       let format = formatMap[type]
 
@@ -347,12 +359,26 @@ export default {
       }
       return [start, end]
     },
-    setFormProps (formData, item) {
+    setFormProps(formData, item) {
       formData[item.model] = undefined
       if (item.queryFormDefault) {
-        if (['datePicker', 'rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker', 'timePicker', 'timeRangePicker'].includes(item.type)) {
+        if (
+          [
+            'datePicker',
+            'rangePicker',
+            'yearPicker',
+            'monthPicker',
+            'yearRangePicker',
+            'monthRangePicker',
+            'timePicker',
+            'timeRangePicker'
+          ].includes(item.type)
+        ) {
           formData[item.model] = this.getDateRange(item)
-        } else if (['treeSelect', 'select', 'checkbox'].includes(item.type) && ['curOrgId', 'curDepId', 'curUserId'].includes(item.queryFormDefault)) {
+        } else if (
+          ['treeSelect', 'select', 'checkbox'].includes(item.type) &&
+          ['curOrgId', 'curDepId', 'curUserId'].includes(item.queryFormDefault)
+        ) {
           if (item.queryFormDefault === 'curOrgId') {
             formData[item.model] = item.type === 'select' ? this.currUser.orgid : [this.currUser.orgid]
           }
@@ -369,7 +395,11 @@ export default {
           this.defaultMap[item.model] = formData[item.model]
         }
       } else {
-        if (['datePicker', 'rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker'].includes(item.type)) {
+        if (
+          ['datePicker', 'rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker'].includes(
+            item.type
+          )
+        ) {
           if (item.queryType === 'BETWEEN') {
             formData[item.model] = []
           }
@@ -377,7 +407,9 @@ export default {
       }
       if (item.rule) {
         this.rules[item.model] = []
-        const required = item.rule.queryRequired ? item.rule.queryRequired === true || item.rule.queryRequired === 'true' : false
+        const required = item.rule.queryRequired
+          ? item.rule.queryRequired === true || item.rule.queryRequired === 'true'
+          : false
         let trigger
         let message
         if (required) {
@@ -422,36 +454,48 @@ export default {
         }
       }
     },
-    customJsValidate (rule, value, callback, item) {
+    customJsValidate(rule, value, callback, item) {
       if (item.rule.customQueryValidatorFunc) {
-        executeStrFunctionByContext(this, item.rule.customQueryValidatorFunc, [rule, value, callback, this.form, item, util, runLogic, getConfigByNameAsync])
+        executeStrFunctionByContext(this, item.rule.customQueryValidatorFunc, [
+          rule,
+          value,
+          callback,
+          this.form,
+          item,
+          util,
+          runLogic,
+          getConfigByNameAsync
+        ])
       } else {
         callback()
       }
     },
-    toggleAdvanced () {
+    toggleAdvanced() {
       this.advanced = !this.advanced
       this.$emit('toggleAdvanced')
     },
-    toggleVisible () {
+    toggleVisible() {
       this.visible = !this.visible
       return this.visible
     },
-    resetForm () {
+    resetForm() {
       this.$refs.form.resetFields()
     },
-    emitFunc (func, data, value) {
+    emitFunc(func, data, value) {
       this.$emit(func, data, value)
       this.$emit('x-form-item-emit-func', func, data, value)
     },
-    onSubmit () {
+    onSubmit() {
       this.$refs.form.validate(valid => {
         for (const key of Object.keys(this.form)) {
           if (this.form[key] === null || this.form[key] === '') {
             this.form[key] = undefined
           }
           // 树形选择框重置后会重置为[undefined],查询时为[null]
-          if (Array.isArray(this.form[key]) && (this.form[key].length === 0 || this.form[key][0] === null || this.form[key][0] === undefined)) {
+          if (
+            Array.isArray(this.form[key]) &&
+            (this.form[key].length === 0 || this.form[key][0] === null || this.form[key][0] === undefined)
+          ) {
             this.form[key] = undefined
           }
           // 如果 form 中没有值，但是有默认值
@@ -467,23 +511,36 @@ export default {
         this.$emit('onSubmit', data)
       })
     },
-    exports () {
+    exports() {
       this.$emit('exports', this.form)
     },
-    setForm (obj) {
+    setForm(obj) {
       this.form = Object.assign(this.form, obj)
     },
+    /**
+     * 主动触发表单提交
+     * 用于 queryTable 等场景，确保走相同的数据处理流程
+     * @param {Object} conditionParams - 额外的查询条件参数
+     */
+    submitForm(conditionParams = {}) {
+      // 将外部参数合并到表单中
+      if (Object.keys(conditionParams).length > 0) {
+        this.form = Object.assign({}, this.form, conditionParams)
+      }
+      // 调用现有的 onSubmit 方法，触发 emit
+      this.onSubmit()
+    }
   },
-  mounted () {
+  mounted() {
     console.log('XForm mounted, setting up flex watcher')
     this.setupFlexWatcher()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     // 清理watcher
     if (this._flexWatcher) {
       this._flexWatcher()
     }
-  },
+  }
 }
 </script>
 <style lang="less" scoped>