vue2-client 1.10.6 → 1.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "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

@@ -46,6 +46,7 @@
               :disabled="itemDisabled(item)"
               :read-only="readonly(item)"
               :files="files"
+              v-bind="formItemLayoutGen"
               :style="layout === 'inline' ? { marginTop:'5px' } : undefined"
               :form="form"
               :images="images"
@@ -70,6 +71,7 @@
             :disabled="itemDisabled(item)"
             :readonly="readonly(item)"
             :files="files"
+            v-bind="formItemLayoutGen"
             :style="layout ==='inline'?{marginTop:'5px'}:undefined"
             :form="form[groupItem.model]"
             :images="images"
@@ -99,6 +101,7 @@
             :disabled="itemDisabled(formItem)"
             :readonly="readonly(formItem)"
             :files="files"
+            v-bind="formItemLayoutGen"
             :style="layout ==='inline'?{marginTop:'5px'}:undefined"
             :form="form[groupItem.model]"
             :images="images"

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

@@ -6,13 +6,14 @@ export default {
   name: 'Demo',
   components: { XAddNativeForm },
   mounted () {
-    getConfigByNameAsync('formtestForm', 'af-system').then(res => {
+    getConfigByNameAsync('bedManageCRUD', 'af-his').then(res => {
       this.$refs.xAddFrom.init(Object.assign(res, {
         modifyModelData: {
           data: {
             f_f_type: 2
           }
-        }
+        },
+        layout: 'horizontal'
       }))
     })
   },

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

@@ -3,6 +3,7 @@
   <x-form-col
     v-if="attr.type === 'input' && show"
     :occupyCol="attr.occupyCol"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -77,6 +78,7 @@
   <!-- 下拉框 -->
   <x-form-col
     v-else-if="(attr.type === 'select' || (attr.type === 'rate' && mode==='查询')) && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       v-if="!attr.showMode || mode === '查询' || attr.showMode === 'select' "
@@ -206,6 +208,7 @@
   <!-- 多选框 -->
   <x-form-col
     v-else-if="attr.type === 'checkbox' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       v-if="!attr.showMode || mode === '查询' || attr.showMode === 'select' "
@@ -291,6 +294,7 @@
   <!-- 单选框 -->
   <x-form-col
     v-else-if="attr.type === 'radio' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       v-if="!attr.showMode || attr.type === 'radio' "
@@ -344,6 +348,7 @@
   <!-- 时间 日期 框整合 -->
   <x-form-col
     v-else-if="['datePicker', 'rangePicker', 'yearPicker', 'monthPicker', 'yearRangePicker', 'monthRangePicker'].includes(attr.type) && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -360,7 +365,10 @@
     </a-form-model-item>
   </x-form-col>
   <!-- 文本域 -->
-  <x-form-col v-else-if="attr.type === 'textarea' && show" :flex="attr.flex">
+  <x-form-col
+    v-else-if="attr.type === 'textarea' && show"
+    :labelCol="labelCol"
+    :flex="attr.flex">
     <!--    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"-->
     <a-form-model-item
       :ref="attr.model"
@@ -377,6 +385,7 @@
   <!-- 文件上传 -->
   <x-form-col
     v-else-if="(attr.type === 'file' || attr.type === 'image') && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -394,6 +403,7 @@
   <!-- 省市区选择框 -->
   <x-form-col
     v-else-if="attr.type === 'citySelect' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -411,6 +421,7 @@
   <!-- 地点搜索框 -->
   <x-form-col
     v-else-if="attr.type === 'addressSearch' && show"
+    :labelCol="labelCol"
     :occupyCol="attr.occupyCol"
     :flex="attr.flex">
     <a-form-model-item
@@ -433,6 +444,7 @@
   <!-- 人员选择框 -->
   <x-form-col
     v-else-if="attr.type === 'personSetting' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -444,6 +456,7 @@
   <!-- 树形选择框 -->
   <x-form-col
     v-else-if="attr.type === 'treeSelect' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <x-tree-select
       @onChange="attr.dataChangeFunc && debouncedDataChangeFunc()"
@@ -456,6 +469,7 @@
   <!-- 列表选择框 -->
   <x-form-col
     v-else-if="attr.type === 'listSelect' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -515,6 +529,7 @@
   <!-- 评分框 -->
   <x-form-col
     v-else-if="attr.type === 'rate' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -529,6 +544,7 @@
   <!--  区间选择器  -->
   <x-form-col
     v-else-if="attr.type === 'intervalPicker' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -565,6 +581,7 @@
   <!--  车牌号选择  -->
   <x-form-col
     v-else-if="attr.type === 'licensePlate' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -592,6 +609,7 @@
   <!-- 录音 -->
   <x-form-col
     v-else-if="attr.type === 'recording' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <recording
       ref="recording"
@@ -602,6 +620,7 @@
   <!-- 表格录入 -->
   <x-form-col
     v-else-if="attr.type === 'rowEdit' && show"
+    :labelCol="labelCol"
     :flex="attr.flex">
     <a-form-model-item
       :ref="attr.model"
@@ -766,6 +785,10 @@ export default {
         () => {
           return true
         }
+    },
+    labelCol: {
+      type: Object,
+      default: () => { return { span: 8 } }
     }
   },
   provide () {

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

@@ -55,6 +55,14 @@ export default {
       type: Number,
       default: 1,
     },
+    layout: {
+      type: String,
+      default: 'horizontal',
+    },
+    labelCol: {
+      type: Object,
+      default: () => { return { span: 8 } }
+    }
   },
   computed: {
     computedFlex () {
@@ -67,16 +75,19 @@ export default {
       const columnsCount = 24 / realFlex
       // 2. 计算基准列宽
       const baseColumnWidth = (this.parentWidth / columnsCount) - ((columnsCount - 1) * 16)
-      // console.log('调试信息:', {
-      //   parentWidth: this.parentWidth,
-      //   computedFlex: realFlex,
-      //   columnsCount,
-      //   baseColumnWidth,
-      // })
       // 3. 计算label宽度
-      const labelWidth = Math.max(baseColumnWidth / 3, 80)
+      const labelWidth = Math.max(baseColumnWidth / (24 / this.labelCol.span), 80)
+      // 计算左右偏移量
+      const offset = this.labelCol.offset ? (this.labelCol.offset / 24) * 100 : 0
+      if (this.layout === 'vertical') {
+        return {
+          '--form-label-width': '',
+          '--form-offset': '',
+        }
+      }
       return {
         '--form-label-width': `${labelWidth}px`,
+        '--form-offset': `${offset}%`,
       }
     },
     computedStyles () {
@@ -138,8 +149,8 @@ export default {
     .ant-form-item-label {
       max-width: var(--form-label-width);
     }
-    .ant-form-item-control-wrapper{
-      width: calc(100% - var(--form-label-width));
+    .ant-form-item-control-wrapper {
+      width: calc(100% - var(--form-label-width) - var(--form-offset) - var(--form-offset));
     }
   }
 }

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

@@ -6,7 +6,7 @@
       title="示例表单"
       :queryParamsName="queryParamsName"
       :fixedAddForm="fixedAddForm"
-      service-name="af-scada"
+      service-name="af-revenue"
       @action="action"
       @columnClick="columnClick"
       ref="xFormTable">
@@ -25,7 +25,7 @@ export default {
   data () {
     return {
       // 查询配置文件名
-      queryParamsName: 'flowStationReportCRUD',
+      queryParamsName: 'ChargeQueryCRUD',
       // 查询配置左侧tree
       // xTreeConfigName: 'addressType',
       // 新增表单固定值

package/src/bootstrap.js

@@ -20,8 +20,8 @@ async function bootstrap ({ router, store, i18n, message }) {
   if (store) {
     await getConfigByName('webConfig', undefined, res => {
       localStorage.setItem(process.env.VUE_APP_WEB_CONFIG_KEY, JSON.stringify(res))
-      if (res.setting) {
-        Vue.$store.commit('setting/setSetting', res.setting)
+      if (res?.setting) {
+        Vue.$store.commit('setting/setSetting', res?.setting)
       }
     })
   }

package/src/router/async/router.map.js

@@ -84,9 +84,9 @@ routerResource.example = {
           path: 'default',
           name: '示例页面',
           // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue'),
-          component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
+          // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
           // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
-          // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
+          component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
           // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
           // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
           // component: () => import('@vue2-client/base-client/components/common/XReportGrid/XReportDemo.vue'),