优化表单3

package-lock.json

@@ -24,7 +24,7 @@
         "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
         "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
         "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
-        "@imengyu/imengyu-utils": "^0.0.17",
+        "@imengyu/imengyu-utils": "^0.0.20",
         "@imengyu/js-request-transform": "^0.3.7",
         "async-validator": "^4.2.5",
         "crypto-js": "^4.2.0",
@@ -3036,9 +3036,9 @@
       }
     },
     "node_modules/@imengyu/imengyu-utils": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmmirror.com/@imengyu/imengyu-utils/-/imengyu-utils-0.0.17.tgz",
-      "integrity": "sha512-cs2eB17qjIKnkQeb2j9FO2U/aevyohOr5IAIInCxr2/8QhOeHdWd+4bDmMdpxmEYEx0W+Hth8C5YUhMCJifONQ==",
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@imengyu/imengyu-utils/-/imengyu-utils-0.0.20.tgz",
+      "integrity": "sha512-pPI5fObKE9QBMZtrRrR9U/fht2boPoaC61e4tPoULkLqt8W1Mm1yk11pQgM04HbFMe9TNggoPQJc9ctR3xCOXA==",
       "license": "MIT",
       "dependencies": {
         "@imengyu/js-request-transform": "^0.3.6"

package.json

@@ -51,7 +51,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
     "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
-    "@imengyu/imengyu-utils": "^0.0.17",
+    "@imengyu/imengyu-utils": "^0.0.20",
     "@imengyu/js-request-transform": "^0.3.7",
     "async-validator": "^4.2.5",
     "crypto-js": "^4.2.0",

src/components/basic/Icon.vue

@@ -2,13 +2,14 @@
   <text 
     v-if="!iconData"
     :style="{ color: '#f00', fontSize: '16px' }"
+    :class="innerClass"
   >
      {{ icon ? `Missing icon: ${icon}` : 'Empty' }} !
   </text>
   <text 
     v-else-if="iconData.type == 'iconfont'"
     :style="style"
-    :class="['iconfont',iconData.value]"
+    :class="['iconfont', innerClass, iconData.value]"
   />
 
   <!-- #ifdef H5 || APP-PLUS -->
@@ -18,6 +19,7 @@
       ...style,
       display: 'flex'
     }"
+    :class="innerClass"
     v-html="iconData.rawSvg"
   />
   <!-- #endif -->
@@ -25,11 +27,13 @@
   <image
     v-else-if="iconData.type == 'svg' && style.color && iconData.rawSvg"
     :style="style"
+    :class="innerClass"
     :src="IconUtils.getColoredSvg(iconData.rawSvg, style.color)"
   />
   <image
     v-else-if="iconData.type == 'svg'"
     :style="style"
+    :class="innerClass"
     :src="iconData.value"
   />
   <!-- #endif -->
@@ -37,6 +41,7 @@
   <image
     v-else-if="iconData.type == 'image'"
     :style="style"
+    :class="innerClass"
     :src="iconData.value"
   />
 </template>
@@ -63,6 +68,10 @@ export interface IconProps {
    * 自定义样式
    */
   innerStyle?: object,
+  /**
+   * 自定义类名
+   */
+  innerClass?: string,
 }
 
 const theme = useTheme();
@@ -99,4 +108,10 @@ const style = computed(() => {
   };
 });
 
+defineOptions({
+  options: {
+    virtualHost: true,
+  }
+})
+
 </script>

src/components/dynamic/DynamicForm.vue

@@ -134,20 +134,41 @@ function dispatchReload() {
 
 //初始化默认值到模型
 function initDefaultValuesToModel() {
-  function loopItems(key: string, items: IDynamicFormItem[]) {
+  function loopItems(key: string, parentKey: string, type: string, items: IDynamicFormItem[]) {
+    let i = 0;
     for (const item of items) {
-      const currentKey = (key ? key + '.' : '') + item.name;
-      if (item.children)
-        loopItems(currentKey, item.children);
+      let currentKey = key;
+      switch (type) {
+        case 'flat-simple':
+        case 'flat-group':
+          currentKey = (parentKey ? parentKey + '.' : '') + item.name;
+          break;
+        default:
+        case 'object':
+        case 'object-group':
+          currentKey = (key ? key + '.' : '') + item.name;
+          break
+        case 'array':
+          currentKey = (parentKey ? parentKey + '.' : '') + `[${i}]`;
+          break;
+        case 'array-object':
+          currentKey = (parentKey ? parentKey + '.' : '') + `[${i}]` + item.name;
+          break;
+      }
+      if (item.children) {
+        loopItems(currentKey, key, item.type || '', item.children);
+      }
+      //console.log(currentKey);
       if (item.defaultValue !== undefined) {
         const oldValue = accessFormModel(currentKey, false, undefined);
         if (oldValue !== undefined && oldValue !== null)
           continue;
         accessFormModel(currentKey, true, item.defaultValue);
       }
+      i++;
     }
   }
-  loopItems('', finalOptions.value.formItems);
+  loopItems('', '', '', finalOptions.value.formItems);
 }
 
 //获取当前表单中可见的所有字段名

src/components/dynamic/DynamicFormControl.vue

@@ -44,17 +44,7 @@
     <!-- <text>fullName: {{item.name}}</text> -->
     <slot name="insertion">
       <template v-if="item.type === 'custom'">
-        <slot name="formCeil"
-          :name="item.fullName"
-          :item="item"
-          :model="model"
-          :onModelUpdate="onValueChanged"
-          :rawModel="rawModel"
-          :parentModel="parentModel"
-          :parent="parent"
-          :rules="item.rules"
-          :disabled="disabled"
-        />
+        <slot name="formCeil" :data="data" />
       </template>
       <template v-else-if="item.type === 'number'">
         <Stepper
@@ -242,11 +232,11 @@ import type { Rules } from 'async-validator';
 import PickerAddressField from './wrappers/PickerAddressField.vue';
 
 export interface FormCeilProps {
-  value: unknown,
+  model: unknown,
   rawModel: unknown,
   parent?: IDynamicFormItem,
   parentModel: unknown,
-  'onUpdate:value': (v: unknown) => void,
+  onModelUpdate: (v: unknown) => void,
   item: IDynamicFormItem,
   name: string,
   disabled: boolean,
@@ -350,6 +340,20 @@ const params = computed(() => {
   } as Record<string, unknown>
 })
 const label = computed(() => evaluateCallback(props.item.label) as string)
+const data = computed<FormCeilProps>(() => {
+  return {
+    name: props.name,
+    item: props.item,
+    model: props.model,
+    onModelUpdate: onValueChanged,
+    rawModel: props.rawModel,
+    parentModel: props.parentModel,
+    parent: props.parent,
+    rules: props.item.rules,
+    disabled: props.disabled,
+    additionalProps: props.item.additionalProps as Record<string, unknown>,
+  }
+})
 
 const itemRef = ref();
  
@@ -370,4 +374,9 @@ onBeforeUnmount(() => {
   props.item.beforeUnmount?.(props.model, props.rawModel, getComponentRef()); 
 })
 
+defineOptions({
+  options: {
+    virtualHost: true,
+  }
+})
 </script>

src/components/dynamic/Images/IconCheck.vue

@@ -1,3 +0,0 @@
-<template>
-  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M369.792 704.32L930.304 128 1024 223.616 369.984 896l-20.288-20.864-0.128 0.128L0 516.8 96.128 423.68l273.664 280.64z"></path></svg>
-</template>

src/components/dynamic/Images/IconDown.vue

@@ -1,3 +0,0 @@
-<template>
-  <svg  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M904 332c0-8.189-3.124-16.379-9.372-22.628-12.497-12.496-32.759-12.496-45.256 0L512 646.745 174.628 309.372c-12.497-12.496-32.758-12.496-45.255 0-12.497 12.498-12.497 32.758 0 45.256l360 360c12.497 12.496 32.758 12.496 45.255 0l360-360C900.876 348.379 904 340.189 904 332z"></path></svg>
-</template>

src/components/dynamic/Images/IconUp.vue

@@ -1,3 +0,0 @@
-<template>
-  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M904 692c0 8.189-3.124 16.379-9.372 22.628-12.497 12.496-32.759 12.496-45.256 0L512 377.255 174.628 714.628c-12.497 12.496-32.758 12.496-45.255 0-12.497-12.498-12.497-32.758 0-45.256l360-360c12.497-12.496 32.758-12.496 45.255 0l360 360C900.876 675.621 904 683.811 904 692z"></path></svg>
-</template>

src/components/dynamic/group/FormArrayGroup.vue

@@ -24,10 +24,22 @@
             @up="handleUp"
           >
             <template #child="values">
-              <slot name="child" v-bind="values" />
+              <slot name="child"
+                :item="values.item"
+                :pitem="values.pitem"
+                :kname="values.kname"
+                :model="values.model"
+                :onUpdateValue="values.onUpdateValue"
+                :isFirst="values.isFirst"
+                :isLast="values.isLast"
+              />
             </template>
             <template #itemButton="values">
-              <slot name="itemButton" v-bind="values" />
+              <slot name="itemButton"
+                :onDeleteClick="values.onDeleteClick"
+                :onUpClick="values.onUpClick"
+                :onDownClick="values.onDownClick"
+              />
             </template>
           </FormArrayGroupItem>
         </div>
@@ -56,10 +68,22 @@
             @up="handleUp"
           >
             <template #child="values">
-              <slot name="child" v-bind="values" />
+              <slot name="child"  
+                :item="values.item"
+                :pitem="values.pitem"
+                :kname="values.kname"
+                :model="values.model"
+                :onUpdateValue="values.onUpdateValue"
+                :isFirst="values.isFirst"
+                :isLast="values.isLast"
+              />
             </template>
             <template #itemButton="values">
-              <slot name="itemButton" v-bind="values" />
+              <slot name="itemButton"
+                :onDeleteClick="values.onDeleteClick"
+                :onUpClick="values.onUpClick"
+                :onDownClick="values.onDownClick"
+              />
             </template>
           </FormArrayGroupItem>
         </div>
@@ -69,7 +93,7 @@
     <!--添加按钮-->
     <slot name="addButton" :onClick="handleAdd">
       <button v-if="showAddButton" class="add dynamic-form-base-control base-button" type="button" @click="handleAdd">
-        <IconAdd /> 
+        <Icon icon="add" :size="22" /> 
         <span>添加</span>
       </button>
     </slot>
@@ -79,8 +103,8 @@
 <script lang="ts" setup>
 import { ArrayUtils } from "@imengyu/imengyu-utils";
 import FormArrayGroupItem from "./FormArrayGroupItem.vue";
-import IconAdd from "../Images/IconAdd.vue";
 import type { IDynamicFormItem, IDynamicFormObject } from "../DynamicForm";
+import Icon from "@/components/basic/Icon.vue";
 
 export interface FormArrayGroupProps {
   model: unknown[];
@@ -134,6 +158,14 @@ function handleDown(data: unknown) {
   if (index < arr.length - 1)
     ArrayUtils.downData(arr, index);
 }
+
+defineOptions({
+  options: {
+    virtualHost: true,
+    inheritAttrs: false,
+    styleIsolation: 'shared',
+  }
+})
 </script>
 
 <style lang="scss">

src/components/dynamic/group/FormArrayGroupItem.vue

@@ -34,13 +34,13 @@
   >
     <div class="nav-button-conntainer">
       <button v-if="showUpDownButton" title="上移" class="dynamic-form-base-control base-button margin" type="button" @click="$emit('up', childData)">
-        <IconUp />
+        <Icon icon="arrow-up" />
       </button>
       <button v-if="showUpDownButton" title="下移" class="dynamic-form-base-control base-button margin" type="button" @click="$emit('down', childData)">
-        <IconDown />
+        <Icon icon="arrow-down" />
       </button>
       <button v-if="showDeleteButton" title="删除" class="dynamic-form-base-control base-button delete margin" type="button" @click="$emit('delete', childData)">
-        <IconDelete />
+        <Icon icon="delete" />
       </button>
     </div>
   </slot>
@@ -49,9 +49,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import type { IDynamicFormItem, IDynamicFormObject } from "../DynamicForm";
-import IconUp from "../Images/IconUp.vue";
-import IconDown from "../Images/IconDown.vue";
-import IconDelete from "../Images/IconDelete.vue";
+import Icon from "@/components/basic/Icon.vue";
 
 defineEmits([ 'up', 'down', 'delete', 'update:childData' ]);
 defineProps({

src/components/dynamic/group/FormGroup.vue

@@ -7,11 +7,11 @@
       'plain': plain,
     }
   ]">
-    <h5 v-if="title" @click="collapsible ? collapsed = !collapsed : null">
-      <span>{{ title }}</span>
-      <view>
-        <span v-if="collapsed">点击展开更多</span>
-        <IconDown v-if="collapsible" class="collapsible-icon" />
+    <h5 v-if="title" class="title" @click="collapsible ? collapsed = !collapsed : null">
+      <span class="title-text">{{ title }}</span>
+      <view class="title-right">
+        <span class="title-right-text" v-show="collapsed">点击展开更多</span>
+        <Icon :size="22" icon="arrow-down" v-if="collapsible" innerClass="collapsible-icon" />
       </view>
     </h5>
     <Row v-if="!collapsed" :justify="(justify as any)" :gutter="gutter">
@@ -23,8 +23,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import Row from "@/components/layout/grid/Row.vue";
-import IconDown from "../Images/IconDown.vue";
-
+import Icon from "@/components/basic/Icon.vue";
 const props = defineProps({
   /**
    * 标题
@@ -72,7 +71,13 @@ const props = defineProps({
 
 const collapsed = ref(props.collapsed);
 
-
+defineOptions({
+  options: {
+    virtualHost: true,
+    inheritAttrs: false,
+    styleIsolation: 'shared',
+  }
+})
 </script>
 
 <style lang="scss">
@@ -87,7 +92,7 @@ const collapsed = ref(props.collapsed);
     }
   }
   &.collapsible {
-    h5 {
+    .title {
       cursor: pointer;
     }
   }
@@ -99,7 +104,7 @@ const collapsed = ref(props.collapsed);
     height: 16px;
   }
 
-  h5 {
+  .title {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -107,11 +112,12 @@ const collapsed = ref(props.collapsed);
     margin: 0;
     margin-bottom: 12px;
 
-    view {
+    .title-right {
       display: flex;
+      flex-direction: row;
       align-items: center;
 
-      span {
+      .title-right-text {
         font-size: 11px;
         margin-right: 10rpx;
         color: var(--dynamic-form-secondary-color);

src/components/dynamic/nest/DynamicFormItemContainer.vue

@@ -38,7 +38,7 @@
         </template>
       </DynamicFormItemNormal>
       <!--循环子条目-->
-      <DynamicFormItemContainer 
+      <DynamicFormItemContainerFuckMp 
         v-for="(child, k) in item.children"
         :key="k"
         :item="child"
@@ -66,7 +66,7 @@
       <FormGroup :title="evaluateCallback(item.label)" v-bind="(item.additionalProps as object)">
         <Row v-bind="item.rowProps">
           <!--循环子条目-->
-          <DynamicFormItemContainer 
+          <DynamicFormItemContainerFuckMp 
             v-for="(child, k) in item.children" 
             :key="k"
             :item="child"
@@ -89,7 +89,7 @@
     <FormGroup v-else-if="item.type === 'flat-group'" :title="evaluateCallback(item.label)" v-bind="(item.additionalProps as object)">
       <Row v-bind="item.rowProps">
         <!--循环子条目-->
-        <DynamicFormItemContainer 
+        <DynamicFormItemContainerFuckMp 
           v-for="(child, k) in item.children" 
           :colProps="{ ...item.childrenColProps, ...child.colProps }"
           :key="k"
@@ -106,9 +106,9 @@
           :disabled="disabled || evaluateCallback(item.disabled)"
         >
           <template #formCeil="values">
-            <slot name="formCeil" v-bind="(values as FormCeilProps)" />
+            <slot name="formCeil" :data="values.data" />
           </template>
-        </DynamicFormItemContainer>
+        </DynamicFormItemContainerFuckMp>
       </Row>
     </FormGroup>
     <!--扁平普通-->
@@ -125,7 +125,7 @@
       <template #insertion>
         <Row v-bind="item.rowProps">
           <!--循环子条目-->
-          <DynamicFormItemContainer 
+          <DynamicFormItemContainerFuckMp 
             v-for="(child, k) in item.children" 
             :key="k"
             :item="child"
@@ -142,9 +142,9 @@
             :disabled="disabled || evaluateCallback(item.disabled)"
           >
             <template #formCeil="values">
-              <slot name="formCeil" v-bind="(values as FormCeilProps)" />
+              <slot name="formCeil" :data="values.data" />
             </template>
-          </DynamicFormItemContainer>
+          </DynamicFormItemContainerFuckMp>
         </Row>
       </template>
     </DynamicFormItemNormal>
@@ -180,13 +180,17 @@
             v-bind="(item.additionalProps as IDynamicFormObject)"
           >
             <template #addButton="props">
-              <slot name="arrayButtonAdd" v-bind="props" />
+              <slot name="arrayButtonAdd" :onClick="props.onClick" />
             </template>
             <template #itemButton="props">
-              <slot name="arrayButtons" v-bind="props" />
+              <slot name="arrayButtons" 
+                :onDeleteClick="props.onDeleteClick"
+                :onUpClick="props.onUpClick"
+                :onDownClick="props.onDownClick"
+              />
             </template>
             <template #child="{ item, pitem, kname, model: child, onUpdateValue, isFirst, isLast }">
-              <DynamicFormItemContainer
+              <DynamicFormItemContainerFuckMp
                 :item="item"
                 :name="kname"
                 :rawModel="rawModel"
@@ -238,13 +242,17 @@
             v-bind="(item.additionalProps as IDynamicFormObject)"
           >
             <template #addButton="props">
-              <slot name="arrayButtonAdd" v-bind="props" />
+              <slot name="arrayButtonAdd" :onClick="props.onClick" />
             </template>
             <template #itemButton="props">
-              <slot name="arrayButtons" v-bind="props" />
+              <slot name="arrayButtons"
+                :onDeleteClick="props.onDeleteClick"
+                :onUpClick="props.onUpClick"
+                :onDownClick="props.onDownClick"
+              />
             </template>
             <template #child="{ item, pitem, kname, model: child, onUpdateValue, isFirst, isLast }">
-              <DynamicFormItemContainer
+              <DynamicFormItemContainerFuckMp
                 :item="item"
                 :name="kname"
                 :rawModel="rawModel"
@@ -277,7 +285,7 @@
       @update:model="(v: unknown) => $emit('update:model', v)"
     >
       <template #formCeil="values">
-        <slot name="formCeil" v-bind="(values as unknown as FormCeilProps)" />
+        <slot name="formCeil" :data="values.data" />
       </template>
     </DynamicFormItemNormal>
   </Col>
@@ -293,62 +301,39 @@ import Col, { type ColProps } from '@/components/layout/grid/Col.vue';
 import Row from '@/components/layout/grid/Row.vue';
 import DynamicFormCheckEmpty from './DynamicFormCheckEmpty.vue';
 import type { IDynamicFormItem, IDynamicFormItemCallback, IDynamicFormObject, IDynamicFormOptions, IDynamicFormRef, IEvaluateCallback } from '..';
+import Button from '@/components/basic/Button.vue';
+import DynamicFormItemContainerFuckMp from './DynamicFormItemContainerFuckMp.vue';
 
 /**
  * 动态表单条目包装组件，处理基础类型分支、数据传入、回调处理、事件传递。
  */
 
-const props = defineProps({
-  item: {
-    type: Object as PropType<IDynamicFormItem>,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  model: {
-    type: null
-  },
-  parent: {
-    type: Object as PropType<IDynamicFormItem>,
-    default: null,
-  },
-  parentModel: {
-    type: null
-  },
-  parentName: {
-    type: String,
-    default: null,
-  },
-  rawModel: {
-    type: Object as PropType<IDynamicFormObject>,
-    required: true,
-  },
-  colProps: {
-    type: Object as PropType<ColProps>,
-    default: null,
-  },
-  isFirst: {
-    type: Boolean,
-    default: false,
-  },
-  isLast: {
-    type: Boolean,
-    default: false,
-  },
-});
+export interface DynamicFormItemContainerProps {
+  item: IDynamicFormItem;
+  name: string;
+  disabled?: boolean;
+  model?: any;
+  rawModel?: IDynamicFormObject;
+  parent?: IDynamicFormItem;
+  parentModel?: unknown;
+  parentName?: string;
+  colProps?: ColProps;
+  isFirst?: boolean;
+  isLast: boolean;
+ }
 
+const props = withDefaults(defineProps<DynamicFormItemContainerProps>(), {
+  isFirst: false,
+  isLast: false,
+});
 const containerTypes = ['object', 'object-group', 'array-single','group-array','flat-simple','flat-group'];
 const isContainer = computed(() => props.item.type && containerTypes.includes(props.item.type));
 
 defineEmits([	'update:model' ]);
 defineSlots<{
-  formCeil(props: FormCeilProps): any,
+  formCeil(props: {
+    data: FormCeilProps;
+  }): any,
   arrayButtonAdd(props: {
     onClick: () => void;
   }): any,
@@ -402,6 +387,14 @@ function evaluateCallback<T>(val: T|IDynamicFormItemCallback<T>) {
 }
 
 provide<IEvaluateCallback>('evaluateCallback', evaluateCallback);
+
+defineOptions({
+  name: 'DynamicFormItemContainer',
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared',
+  }
+})
 </script>
 
 <style lang="scss">

src/components/dynamic/nest/DynamicFormItemContainerFuckMp.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import DynamicFormItemContainer, { type DynamicFormItemContainerProps } from './DynamicFormItemContainer.vue';
+
+defineProps<DynamicFormItemContainerProps>()
+defineEmits(['update:model'])
+defineOptions({
+  options: {
+    virtualHost: true,
+  }
+})
+</script>
+
+<template>
+  <DynamicFormItemContainer v-bind="($props as any)" @update:model="(val) => $emit('update:model', val)">
+    <template #formCeil="values">
+      <slot name="formCeil" :data="values.data" />
+    </template>
+  </DynamicFormItemContainer>
+</template>

src/components/dynamic/nest/DynamicFormRoot.vue

@@ -26,13 +26,28 @@
       :disabled="options.disabled"
     >
       <template #arrayButtonAdd="props">
-        <slot name="formArrayButtonAdd" v-bind="props" />
+        <slot name="formArrayButtonAdd" :onClick="props.onClick" />
       </template>
       <template #arrayButtons="props">
-        <slot name="formArrayButtons" v-bind="props" />
+        <slot name="formArrayButtons"
+          :onDeleteClick="props.onDeleteClick"
+          :onUpClick="props.onUpClick"
+          :onDownClick="props.onDownClick" 
+        />
       </template>
-      <template #formCeil="values">
-        <slot name="formCeil" v-bind="values" />
+      <template #formCeil="{ data }">
+        <slot name="formCeil"
+          :name="data.name"
+          :item="data.item"
+          :model="data.model"
+          :onModelUpdate="data.onModelUpdate"
+          :rawModel="data.rawModel"
+          :parentModel="data.parentModel"
+          :parent="data.parent"
+          :rules="data.item.rules"
+          :disabled="data.disabled"
+          :additionalProps="data.additionalProps"
+        />
       </template>
     </DynamicFormItemContainer>
     <slot name="endButton" />

src/components/dynamic/wrappers/PickerIdField.vue

@@ -2,6 +2,7 @@
   <PickerField 
     :columns="[ loader.data.value || [] ]"
     v-bind="$attrs"
+    :modelValue="!(modelValue instanceof Array) ? [modelValue || ''] : modelValue"
     @update:modelValue="handleUpdateModelValue"
   />
 </template>

src/components/form/Field.vue

@@ -20,7 +20,7 @@
       align="center" 
       :flex="labelFlex"
       :innerStyle="{
-        width: labelWidth,
+        width: themeContext.resolveThemeSize(labelWidth),
       }"
       :justify="selectStyleType(labelAlign, 'left', {
         left: 'flex-start',
@@ -314,7 +314,7 @@ export interface FieldProps {
   /**
    * 左侧文本的宽度
    */
-  labelWidth?: string|number;
+  labelWidth?: string|number|undefined;
   /**
    * 左侧文本对齐
    * @default 'left'
@@ -518,7 +518,7 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showWordLimit: () => propGetFormContext()?.fieldProps.value?.showWordLimit ?? false,
   clearButton: () => propGetFormContext()?.fieldProps.value?.clearButton ?? false,
   clearButtonMode: () => propGetFormContext()?.fieldProps.value?.clearButtonMode ?? 'always',
-  labelWidth: () => propGetFormContext()?.labelWidth.value ?? "left",
+  labelWidth: () => propGetFormContext()?.labelWidth.value!,
   labelAlign: () => propGetFormContext()?.labelAlign.value ?? "left",
   labelPosition: () => propGetFormContext()?.labelPosition.value ?? 'left',
   inputAlign: () => propGetFormContext()?.fieldProps.value?.inputAlign ?? "left",

src/components/form/Stepper.vue

@@ -1,5 +1,11 @@
 <template>
   <FlexRow position="relative" align="center">
+    <slot name="addonBefore">
+      <template v-if="addonBefore">
+        <text>{{ addonBefore }}</text>
+        <Width :width="prefixTextSpace" />
+      </template>
+    </slot>
     <slot name="minus" :disabled="disabled || value <= min" :onClick="minus">
       <IconButton
         :icon="minusIcon"
@@ -69,6 +75,12 @@
         @click="add"
       />
     </slot>
+    <slot name="addonAfter">
+      <template v-if="addonAfter">
+        <Width :width="prefixTextSpace" />
+        <text>{{ addonAfter }}</text>
+      </template>
+    </slot>
   </FlexRow>
 </template>
 
@@ -80,6 +92,7 @@ import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
 import { StringUtils } from '@imengyu/imengyu-utils';
 import { DynamicColor, DynamicSize, selectObjectByType } from '../theme/ThemeTools';
 import { useFieldChildValueInjector } from './FormContext';
+import Width from '../layout/space/Width.vue';
 
 export interface StepperProps {
   /**
@@ -159,6 +172,14 @@ export interface StepperProps {
    * @default 'minus-bold'
    */
   minusIcon?: string;
+  /**
+   * 组件左侧添加的文本
+   */
+  addonBefore?: string,
+  /**
+   * 组件右侧添加的文本
+   */
+  addonAfter?: string,
 }
 
 const emit = defineEmits([ 'update:modelValue' ])
@@ -247,7 +268,7 @@ const themeStyles = themeContext.useThemeStyles({
     color: DynamicColor('StepperInputTextColor', 'text.content'),
   },
 });
-
+const prefixTextSpace = computed(() => themeContext.resolveThemeSize('StepperPrefixTextSpace', 12));
 const iconSize = computed(() => {
   switch (props.size) {
     case 'small':

src/components/layout/grid/Col.vue

@@ -2,12 +2,13 @@
   <FlexView
     v-bind="props"
     direction="column"
-    :style="{
+    :innerStyle="{
       position: 'relative',
       flexBasis: pec > 0 ? `${pec}%` : undefined,
       marginLeft: offset ? `${(offset / GRID_SIZE) * 100}%` : undefined,
       maxWidth: pec > 0 ? `${pec}%` : undefined,
       flexShrink: shrink ? 1 : 0,
+      flexGrow: grow ? 1 : 0,
       ...(innerStyle || {}),
     }"
   >
@@ -41,6 +42,11 @@ export interface ColProps extends FlexProps {
    * @default false
    */
   shrink?: boolean;
+  /**
+   * 是否允许放大
+   * @default true
+   */
+  grow?: boolean;
 }
 
 defineOptions({
@@ -52,6 +58,8 @@ defineOptions({
 const props = withDefaults(defineProps<ColProps>(), {
   offset: 0,
   span: 0,
+  shrink: false,
+  grow: true,
 });
     
 const { span, offset } = toRefs(props);

src/components/layout/grid/Row.vue

@@ -2,7 +2,7 @@
   <FlexView
     v-bind="props"
     direction="row"
-    :style="{
+    :innerStyle="{
       display: inline ? 'flex-inline' : 'flex',
       flex: flex,
       flexWrap: wrap ? 'wrap' : 'nowrap',

src/pages/dig/components/TaskList.vue

@@ -4,6 +4,7 @@ import Icon from '@/components/basic/Icon.vue';
 import Text from '@/components/basic/Text.vue';
 import FlexCol from '@/components/layout/FlexCol.vue';
 import FlexRow from '@/components/layout/FlexRow.vue';
+import Height from '@/components/layout/space/Height.vue';
 import Width from '@/components/layout/space/Width.vue';
 
 defineEmits(['click'])

src/pages/dig/forms/common.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref } from 'vue';
+import { nextTick, ref, type Ref } from 'vue';
 import { showError } from '@/common/composeabe/ErrorDisplay';
 import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
 import { getVillageInfoForm } from './forms';
@@ -124,5 +124,12 @@ const { querys } = useLoadQuerys({
   if (formData) {
     formModel.value = formData as any;
   }
+
+  await nextTick();
+
+  formRef.value.initDefaultValuesToModel();
+
+  console.log(formModel.value);
+  
 });
 </script>

src/pages/dig/forms/data/common.ts

@@ -45,7 +45,7 @@ export function villageCommonContent (ref: Ref<IDynamicFormRef>, options: {
               required: true,
               message: '请输入介绍内容',
             }]
-          }]: []),
+          },
           {
             label: '来源(可选)',
             name: 'source',
@@ -54,7 +54,7 @@ export function villageCommonContent (ref: Ref<IDynamicFormRef>, options: {
             additionalProps: {
               placeholder: '如果是转载文章可以输入来源',
             },
-          },
+          }]: []),
         ],
       },
       {

src/pages/dig/forms/data/history.ts

@@ -0,0 +1,76 @@
+import { CommonInfoModel } from "@/api/inhert/VillageInfoApi";
+import type { SingleForm } from "../forms";
+import { villageCommonContent } from "./common";
+import type { FieldProps } from "@/components/form/Field.vue";
+
+export const villageInfoStoryFormItems: SingleForm = [CommonInfoModel, (r) => ({
+  formItems: [
+    {
+      label: '标题',
+      name: 'title',
+      type: 'text',
+      defaultValue: '',
+      additionalProps: {
+        placeholder: '请输入标题',
+      },
+      rules: [{
+        required: true,
+        message: '请输入标题',
+      }]
+    },
+    {
+      label: '简介',
+      name: 'intro',
+      type: 'richtext',
+      defaultValue: '',
+      additionalProps: {
+        placeholder: '请输入内容',
+      },
+      rules: [{
+        required: true,
+        message: '请输入内容',
+      }]
+    },
+    ...villageCommonContent(r, {
+      title: '掌故轶事',
+      showTitle: false,
+    }).formItems
+  ]
+})]
+
+export const villageInfoFigureFormItems: SingleForm = [CommonInfoModel, (r) => ({
+  formItems: [
+    {
+      label: '历史人物名称',
+      name: 'name',
+      type: 'text',
+      defaultValue: '',
+      additionalProps: {
+        placeholder: '请输入标题',
+      },
+      rules: [{
+        required: true,
+        message: '请输入标题',
+      }]
+    },
+    {
+      label: '历史人物简介',
+      name: 'brief',
+      type: 'richtext',
+      defaultValue: '',
+      additionalProps: {
+        placeholder: '请输入简介',
+        maxLength: 500,
+        showWordLimit: true,
+      } as FieldProps,
+      rules: [{
+        required: true,
+        message: '请输入简介',
+      }]
+    },
+    ...villageCommonContent(r, {
+      title: '历史人物',
+      showTitle: false,
+    }).formItems
+  ]
+})]

src/pages/dig/forms/data/ich.ts

@@ -111,7 +111,7 @@ export const ichFormItems : SingleForm = [CommonInfoModel, (m) => ({
           name: 'inheritor',
           type: 'richtext',
           defaultValue: '',
-          show: { callback: (_, m) => m.isInheritor === 1 },
+          show: { callback: (_, m) => m.isInheritor == 1 },
           additionalProps: {
             placeholder: '请输入传承人情况',
             maxLength: 200,
@@ -227,8 +227,7 @@ export const ichFormItems : SingleForm = [CommonInfoModel, (m) => ({
           name: 'otherInheritanceTime',
           type: 'datetime', 
           show: { callback(model, rawModel) {
-            console.log(model, rawModel);
-            return (rawModel.inheritanceTime === 150);
+            return (rawModel.inheritanceTime == 150);
           } },
           additionalProps: {
             type: 'datetime',

src/pages/dig/forms/data/travel.ts

@@ -0,0 +1,702 @@
+import VillageInfoApi, { CommonInfoModel } from "@/api/inhert/VillageInfoApi";
+import { useAliOssUploadCo } from "@/common/components/upload/AliOssUploadCo";
+import type { PickerIdFieldProps } from "@/components/dynamic/wrappers/PickerIdField";
+import type { FieldProps } from "@/components/form/Field.vue";
+import type { PickerFieldProps } from "@/components/form/PickerField.vue";
+import type { UploaderFieldProps } from "@/components/form/UploaderField.vue";
+import type { GroupForm, SingleForm } from "../forms";
+import { villageCommonContent } from "./common";
+
+export const villageInfoTravelGuideForm : SingleForm = [CommonInfoModel, () => ({
+  formItems: [
+    {
+      label: '交通基本信息', 
+      name: 'transportBasic', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        {
+          label: '入村路线', 
+          name: 'villageRoute', 
+          type: 'text', 
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入入村路线',
+          },
+          rules:  [{
+            required: true,
+            message: '请输入入村路线',
+          }] 
+        },
+        {
+          label: '距离县城', 
+          name: 'county', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { min: 0, addonAfter: 'KM' },
+          rules:  [{
+            required: true,
+            message: '请输入距离县城',
+          }] 
+        },
+        {
+          label: '距离镇区中心', 
+          name: 'town', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { min: 0, addonAfter: 'KM' },
+          rules:  [{
+            required: true,
+            message: '请输入距离镇区中心',
+          }] 
+        }, 
+        {
+          label: '距离市中心', 
+          name: 'city', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { min: 0, addonAfter: 'KM' },
+          rules:  [{
+            required: true,
+            message: '请输入距离市中心',
+          }] 
+        }
+      ]
+    },
+    {
+      label: '交通设施信息', 
+      name: 'transportFacilities', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        {
+          label: '最近高速收费站名称', 
+          name: 'tollStationName', 
+          type: 'text', 
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入最近高速收费站名称',
+          },
+          rules:  [{
+            required: true,
+            message: '请输入最近高速收费站名称',
+          }] 
+        },
+        {
+          label: '最近高速收费站名称', 
+          name: 'tollStation', 
+          type: 'text', 
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入最近高速收费站名称',
+          },
+          rules:  [] 
+        },
+        {
+          label: '距离最近火车站', 
+          name: 'trainStation', 
+          type: 'text', 
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入距离最近火车站',
+          },
+          rules:  [] 
+        },
+        //有无公交车
+        {
+          label: '有无公交车', 
+          name: 'isBus', 
+          type: 'check-box-int', 
+          defaultValue: 0,
+          additionalProps: {
+            text: '有',
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无公交车',
+            type: 'number',
+          }] 
+        },
+        {
+          label: '公交车介绍', 
+          name: 'busIntro', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.isBus == 1) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入公交车介绍',
+          },
+          rules: [{
+            required: true,
+            message: '请输入公交车介绍',
+          }] 
+        },
+        {
+          label: '其他交通方式', 
+          name: 'otherBus', 
+          type: 'text', 
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他交通方式',
+          },
+          rules:  [] 
+        }
+      ]
+    },
+    {
+      label: '图片信息', 
+      name: 'imageInfo', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        {
+          label: '景区全景图', 
+          name: 'panorama', 
+          type: 'uploader', 
+          defaultValue: '',
+          additionalProps: {
+            upload: useAliOssUploadCo('xiangyuan/travel/panorama'),
+            maxFileSize: 1024 * 1024 * 20,
+            single: true,
+          } as UploaderFieldProps,
+          rules:  [] 
+        },
+        {
+          label: '其他图', 
+          name: 'otherImage', 
+          type: 'uploader', 
+          defaultValue: '',
+          additionalProps: {
+            upload: useAliOssUploadCo('xiangyuan/travel/guide'),
+            maxFileSize: 1024 * 1024 * 20,
+            single: true,
+          } as UploaderFieldProps,
+          rules:  [] 
+        }
+      ]
+    },
+    {
+      label: '标识牌信息', 
+      name: 'signInfo', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        //解说牌
+        {
+          label: '有无解说牌', 
+          name: 'introBoard', 
+          type: 'check-box-int', 
+          defaultValue: 0,
+          additionalProps: {
+            text: '有',
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无解说牌',
+          }] 
+        },
+        {
+          label: '其他解说牌', 
+          name: 'otherIntroBoard', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.introBoard == 1) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他解说牌',
+          },
+          rules:  [] 
+        },
+        {
+          label: '有无解指示牌', 
+          name: 'indicateBoard', 
+          type: 'check-box-int', 
+          defaultValue: 0,
+          additionalProps: {
+            text: '有',
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无指示牌',
+          }] 
+        },
+        {
+          label: '其他指示牌', 
+          name: 'otherIndicateBoard', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.indicateBoard == 1) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他指示牌',
+          },
+          rules: [{
+            required: true,
+            message: '请输入其他指示牌',
+          }] 
+        },
+        {
+          label: '有无安全告示牌', 
+          name: 'safeBoard', 
+          type: 'check-box-int', 
+          defaultValue: 0,
+          additionalProps: {
+            text: '有',
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无安全告示牌',
+          }] 
+        },
+        {
+          label: '其他安全告示牌', 
+          name: 'otherSafeBoard', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.safeBoard == 1) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他安全告示牌',
+          },
+          rules: [{
+            required: true,
+            message: '请输入其他安全告示牌',
+          }] 
+        }
+      ]
+    },
+    {
+      label: '服务设施', 
+      name: 'serviceFacilities', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        {
+          label: '有无游客服务中心', 
+          name: 'visitorCenter', 
+          type: 'check-box-int', 
+          defaultValue: 0,
+          additionalProps: {
+            text: '有',
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有有无游客服务中心',
+          }] 
+        },
+        {
+          label: '游客服务中心面积', 
+          name: 'visitorCenterArea', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.visitorCenter == 1) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入游客服务中心面积',
+          },
+          rules: [{
+            required: true,
+            message: '请输入游客服务中心面积',
+          }] 
+        },
+        {
+          label: '商业设施', 
+          name: 'business',
+          type: 'select-id', 
+          additionalProps: {
+            loadData: async () => 
+            (await VillageInfoApi.getCategoryChildList(282))
+              .map((p) => ({
+                value: p.id,
+                text: p.title,
+              }))
+            ,
+          } as PickerIdFieldProps,
+          formProps: { showRightArrow: true } as FieldProps,
+          rules: [{
+            required: true,
+            message: '请选择商业设施',
+          }],
+        },
+        {
+          label: '其他商业设施', 
+          name: 'otherBusiness', 
+          type: 'text', 
+          defaultValue: '',
+          show: { callback: (_, rawModel) => (rawModel.business == 288) },
+          additionalProps: {
+            placeholder: '请输入其他商业设施',
+          },
+          rules: [{
+            required: true,
+            message: '请输入其他商业设施',
+          }] 
+        }
+      ]
+    },
+    {
+      label: '医疗与游览服务', 
+      name: 'medicalTourService', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        //医疗点
+        {
+          label: '有无医疗点', 
+          name: 'medicalPoint', 
+          type: 'select', 
+          defaultValue: 0,
+          additionalProps: {
+            columns: [[
+              { value: 0, text: '无' },
+              { value: 1, text: '有' },
+              { value: 2, text: '其他' }
+            ]],
+            singleValue: true,
+          } as PickerFieldProps,
+          formProps: {
+            showRightArrow: true,
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无医疗点',
+          }] 
+        },
+        {
+          label: '其他医疗点', 
+          name: 'otherMedicalPoint', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.medicalPoint == 2) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他医疗点',
+          },
+          rules: [{
+            required: true,
+            message: '请输入其他医疗点',
+          }] 
+        },
+        //游览车
+        {
+          label: '有无游览车', 
+          name: 'tourBus', 
+          type: 'select', 
+          defaultValue: 0,
+          additionalProps: {
+            columns: [[
+              { value: 0, text: '无' },
+              { value: 1, text: '有' },
+              { value: 2, text: '其他' }
+            ]],
+            singleValue: true,
+          } as PickerFieldProps,
+          formProps: {
+            showRightArrow: true,
+          },
+          rules:  [{
+            required: true,
+            message: '请选择有无游览车',
+          }] 
+        },
+        {
+          label: '其他游览车', 
+          name: 'otherTourBus', 
+          type: 'text', 
+          show: { callback: (_, rawModel) => (rawModel.tourBus == 2) },
+          defaultValue: '',
+          additionalProps: {
+            placeholder: '请输入其他游览车',
+          },
+          rules: [{
+            required: true,
+            message: '请输入其他游览车',
+          }] 
+        }
+      ]
+    },
+    {
+      label: '基础设施', 
+      name: 'infrastructure', 
+      type: 'flat-group', 
+      childrenColProps: {
+        span: 24,
+      },
+      children: [
+        {
+          label: '机动车停车场', 
+          name: 'parkingLot', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { min: 0, addonAfter: '辆' },
+          rules:  [] 
+        },
+        {
+          label: '分类垃圾点', 
+          name: 'garbagePoint', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { 
+            min: 0,
+            addonAfter: '处',
+          },
+          rules:  [] 
+        },
+        {
+          label: '公共卫生间', 
+          name: 'publicToilets', 
+          type: 'number', 
+          defaultValue: 0,
+          additionalProps: { min: 0, addonAfter: '处' },
+          rules:  [] 
+        }
+      ]
+    }
+  ] 
+})]
+
+export const villageInfoRouteForm : GroupForm = {
+  [1]: [CommonInfoModel, (r) => ({
+    formItems: [
+      {
+        label: '游览路线', 
+        name: 'route', 
+        type: 'text', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入游览路线',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入游览路线',
+        }] 
+      },
+      {
+        label: '路线名称', 
+        name: 'name', 
+        type: 'text', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入路线名称',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入路线名称',
+        }] 
+      },
+      {
+        label: '描述', 
+        name: 'desc', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入描述',
+          maxLength: 200,
+          showWordLimit: true, 
+        },
+        rules:  [{
+          required: true,
+          message: '请输入描述',
+        }] 
+      },
+      {
+        label: '起始点', 
+        name: 'startPoint', 
+        type: 'text', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入起始点',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入起始点',
+        }] 
+      },
+      {
+        label: '终止点', 
+        name: 'endPoint', 
+        type: 'text', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入终止点',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入终止点',
+        }] 
+      },
+      {
+        label: '预计时长', 
+        name: 'estimate', 
+        type: 'number', 
+        defaultValue: 1,
+        additionalProps: {
+          min: 1,
+          addonAfter: '小时',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入预计时长',
+        }] 
+      },
+      ...villageCommonContent(r, {
+        title: '游览路线',
+        showContent: false,
+        showTitle: false,
+      }).formItems
+    ] 
+  })],
+  [2]: [CommonInfoModel, (r) => ({
+    formItems: [
+      {
+        label: '活动标题', 
+        name: 'activity', 
+        type: 'text', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入活动标题',
+        },
+        rules:  [{
+          required: true,
+          message: '请输入活动标题',
+        }] 
+      },
+      {
+        label: '活动开始时间', 
+        name: 'startTime',
+        type: 'datetime', 
+        defaultValue: '',
+        additionalProps: {
+          type: 'datetime',
+        },
+        rules: [{
+          required: true,
+          message: '请选择活动开始时间',
+        }],
+      },
+      {
+        label: '活动结束时间', 
+        name: 'endTime',
+        type: 'datetime', 
+        defaultValue: '',
+        additionalProps: {
+          type: 'datetime',
+        },
+        rules: [{
+          required: true,
+          message: '请选择活动结束时间',
+        }],
+      },
+      {
+        label: '活动时长', 
+        name: 'duration',
+        type: 'number', 
+        defaultValue: 0,
+        additionalProps: {
+          min: 0,
+          addonAfter: '分钟',
+        },
+        rules: [{
+          required: true,
+          message: '请选择活动时长',
+        }],
+      },
+      ...villageCommonContent(r, {
+        title: '活动时间',
+        showContent: false,
+        showTitle: false,
+      }).formItems
+    ] 
+  })],
+  [3]: [CommonInfoModel, (r) => ({
+    formItems: [
+      {
+        label: '特色', 
+        name: 'advant', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入特色',
+          maxLength: 300,
+          showWordLimit: true, 
+        } as FieldProps,
+        rules:  [{
+          required: true,
+          message: '请输入特色',
+        }] 
+      },
+      {
+        label: '文化背景', 
+        name: 'intro', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入文化背景',
+          maxLength: 300,
+          showWordLimit: true, 
+        } as FieldProps,
+        rules:  [{
+          required: true,
+          message: '请输入文化背景',
+        }] 
+      },
+      {
+        label: '精彩推荐', 
+        name: 'recommend', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入精彩推荐',
+          maxLength: 300,
+          showWordLimit: true, 
+        } as FieldProps,
+        rules:  [{
+          required: true,
+          message: '请输入精彩推荐',
+        }] 
+      },
+      {
+        label: '推荐描述', 
+        name: 'reason', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入推荐描述',
+          maxLength: 300,
+          showWordLimit: true, 
+        } as FieldProps,
+        rules:  [{
+          required: true,
+          message: '请输入推荐描述',
+        }] 
+      },
+      {
+        label: '活动亮点', 
+        name: 'highlight', 
+        type: 'richtext', 
+        defaultValue: '',
+        additionalProps: {
+          placeholder: '请输入活动亮点',
+          maxLength: 300,
+          showWordLimit: true, 
+        } as FieldProps,
+        rules:  [{
+          required: true,
+          message: '请输入活动亮点',
+        }] 
+      },
+      ...villageCommonContent(r, {
+        title: '路线特色',
+        showContent: false,
+        showTitle: false,
+      }).formItems
+    ] 
+  })]
+}

src/pages/dig/forms/forms.ts

@@ -22,106 +22,20 @@ import { ichFormItems } from "./data/ich";
 import { villageInfoEnvironmentForm } from "./data/environment";
 import { villageInfoRelicForm } from "./data/relic";
 import { vilElementForm } from "./data/element";
+import { villageInfoFigureFormItems, villageInfoStoryFormItems } from "./data/history";
+import { villageInfoRouteForm, villageInfoTravelGuideForm } from "./data/travel";
 
 export type SingleForm = [NewDataModel, (formRef: Ref<IDynamicFormRef>) => IDynamicFormOptions]
 export type GroupForm = Record<number, SingleForm>
 
-//TODO: 关联的文化资源ID
-
 const villageInfoForm : Record<string, GroupForm> = {
   'overview': villageInfoOverviewForm,
   'cultural': villageInfoCulture,
   'story': {
-    [0]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '标题',
-          name: 'title',
-          type: 'text',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入标题',
-          },
-          rules: [{
-            required: true,
-            message: '请输入标题',
-          }]
-        },
-        {
-          label: '简介',
-          name: 'intro',
-          type: 'richtext',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入内容',
-          },
-          rules: [{
-            required: true,
-            message: '请输入内容',
-          }]
-        },
-        {
-          label: '内容',
-          name: 'content',
-          type: 'richtext',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入内容',
-          },
-          rules: [{
-            required: true,
-            message: '请输入内容',
-          }]
-        }
-      ]
-    })],
+    [0]: villageInfoStoryFormItems
   },
   'figure': {
-    [0]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '标题',
-          name: 'name',
-          type: 'text',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入标题',
-          },
-          rules: [{
-            required: true,
-            message: '请输入标题',
-          }]
-        },
-        {
-          label: '简介',
-          name: 'brief',
-          type: 'richtext',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入简介',
-            maxLength: 500,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules: [{
-            required: true,
-            message: '请输入简介',
-          }]
-        },
-        {
-          label: '内容',
-          name: 'intro',
-          type: 'richtext',
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入内容',
-          },
-          rules: [{
-            required: true,
-            message: '请输入内容',
-          }]
-        }
-      ]
-    })],
+    [0]: villageInfoFigureFormItems,
   },
   'element': {
     [0]: vilElementForm,
@@ -151,595 +65,9 @@ const villageInfoForm : Record<string, GroupForm> = {
     [0]: ichFormItems,
   },
   'travel_guide': {
-    [0]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '入村路线', 
-          name: 'villageRoute', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入入村路线',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入入村路线',
-          }] 
-        },
-        {
-          label: '距离县城（KM）', 
-          name: 'county', 
-          type: 'number', 
-          defaultValue: '',
-          additionalProps: { min: 0 },
-          rules:  [{
-            required: true,
-            message: '请输入距离县城',
-          }] 
-        },
-        {
-          label: '距离镇区中心（KM）', 
-          name: 'town', 
-          type: 'number', 
-          defaultValue: '',
-          additionalProps: { min: 0 },
-          rules:  [{
-            required: true,
-            message: '请输入距离镇区中心',
-          }] 
-        }, 
-        {
-          label: '距离市中心（KM）', 
-          name: 'city', 
-          type: 'number', 
-          defaultValue: '',
-          additionalProps: { min: 0 },
-          rules:  [{
-            required: true,
-            message: '请输入距离市中心',
-          }] 
-        },
-        {
-          label: '最近高速收费站名称', 
-          name: 'tollStationName', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入最近高速收费站名称',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入最近高速收费站名称',
-          }] 
-        },
-        //有无公交车
-        {
-          label: '有无公交车', 
-          name: 'isBus', 
-          type: 'check-box-int', 
-          defaultValue: 0,
-          additionalProps: {
-            text: '有',
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无公交车',
-          }] 
-        },
-        {
-          label: '公交车介绍', 
-          name: 'busIntro', 
-          type: 'text', 
-          show: { callback: (_, rawModel) => (rawModel.isBus === 1) },
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入公交车介绍',
-          },
-          rules:  [] 
-        },
-        {
-          label: '最近高速收费站名称', 
-          name: 'tollStation', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入最近高速收费站名称',
-          },
-          rules:  [] 
-        },
-        {
-          label: '距离最近火车站', 
-          name: 'trainStation', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入距离最近火车站',
-          },
-          rules:  [] 
-        },
-        {
-          label: '其他交通方式', 
-          name: 'otherBus', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他交通方式',
-          },
-          rules:  [] 
-        },
-        {
-          label: '景区全景图', 
-          name: 'panorama', 
-          type: 'uploader', 
-          defaultValue: '',
-          additionalProps: {
-            upload: useAliOssUploadCo('xiangyuan/travel/panorama'),
-            maxFileSize: 1024 * 1024 * 20,
-            single: true,
-          } as UploaderFieldProps,
-          rules:  [] 
-        },
-        {
-          label: '其他图', 
-          name: 'otherImage', 
-          type: 'uploader', 
-          defaultValue: '',
-          additionalProps: {
-            upload: useAliOssUploadCo('xiangyuan/travel/guide'),
-            maxFileSize: 1024 * 1024 * 20,
-            single: true,
-          } as UploaderFieldProps,
-          rules:  [] 
-        },
-        //解说牌
-        {
-          label: '有无解说牌', 
-          name: 'introBoard', 
-          type: 'check-box-int', 
-          defaultValue: 0,
-          additionalProps: {
-            text: '有',
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无解说牌',
-          }] 
-        },
-        {
-          label: '其他解说牌', 
-          name: 'otherIntroBoard', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他解说牌',
-          },
-          rules:  [] 
-        },
-        {
-          label: '有无解指示牌', 
-          name: 'indicateBoard', 
-          type: 'check-box-int', 
-          defaultValue: 0,
-          additionalProps: {
-            text: '有',
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无指示牌',
-          }] 
-        },
-        {
-          label: '其他指示牌', 
-          name: 'otherIndicateBoard', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他指示牌',
-          },
-          rules:  [] 
-        },
-        {
-          label: '有无安全告示牌', 
-          name: 'safeBoard', 
-          type: 'check-box-int', 
-          defaultValue: 0,
-          additionalProps: {
-            text: '有',
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无安全告示牌',
-          }] 
-        },
-        {
-          label: '其他指示牌', 
-          name: 'otherSafeBoard', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他安全告示牌',
-          },
-          rules:  [] 
-        },
-        {
-          label: '有无游客服务中心', 
-          name: 'visitorCenter', 
-          type: 'check-box-int', 
-          defaultValue: 0,
-          additionalProps: {
-            text: '有',
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有有无游客服务中心',
-          }] 
-        },
-        {
-          label: '游客服务中心面积', 
-          name: 'visitorCenterArea', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入游客服务中心面积',
-          },
-          rules:  [] 
-        },
-        {
-          label: '商业设施', 
-          name: 'business',
-          type: 'select-id', 
-          additionalProps: {
-            loadData: async () => 
-            (await VillageInfoApi.getCategoryChildList(282))
-              .map((p) => ({
-                value: p.id,
-                text: p.title,
-              }))
-            ,
-          } as PickerIdFieldProps,
-          formProps: { showRightArrow: true } as FieldProps,
-          rules: [{
-            required: true,
-            message: '请选择商业设施',
-          }],
-        },
-        {
-          label: '其他商业设施', 
-          name: 'otherBusiness', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他商业设施',
-          },
-          rules:  [] 
-        },
-        //医疗点
-        {
-          label: '有无医疗点', 
-          name: 'medicalPoint', 
-          type: 'select', 
-          defaultValue: 0,
-          additionalProps: {
-            columns: [[
-              { value: 0, text: '无' },
-              { value: 1, text: '有' },
-              { value: 2, text: '其他' }
-            ]],
-            singleValue: true,
-          } as PickerFieldProps,
-          formProps: {
-            showRightArrow: true,
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无医疗点',
-          }] 
-        },
-        {
-          label: '其他医疗点', 
-          name: 'otherMedicalPoint', 
-          type: 'text', 
-          show: { callback: (_, rawModel) => (rawModel.medicalPoint === 2) },
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他医疗点',
-          },
-          rules:  [] 
-        },
-        //医疗点
-        {
-          label: '有无游览车', 
-          name: 'tourBus', 
-          type: 'select', 
-          defaultValue: 0,
-          additionalProps: {
-            columns: [[
-              { value: 0, text: '无' },
-              { value: 1, text: '有' },
-              { value: 2, text: '其他' }
-            ]],
-            singleValue: true,
-          } as PickerFieldProps,
-          formProps: {
-            showRightArrow: true,
-          },
-          rules:  [{
-            required: true,
-            message: '请选择有无游览车',
-          }] 
-        },
-        {
-          label: '其他游览车', 
-          name: 'otherTourBus', 
-          type: 'text', 
-          show: { callback: (_, rawModel) => (rawModel.tourBus === 2) },
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入其他游览车',
-          },
-          rules:  [] 
-        },
-        //
-        {
-          label: '机动车停车场（单位：辆）', 
-          name: 'parkingLot', 
-          type: 'number', 
-          defaultValue: 0,
-          additionalProps: { min: 0 },
-          rules:  [] 
-        },
-        {
-          label: '分类垃圾点（单位：处）', 
-          name: 'garbagePoint', 
-          type: 'number', 
-          defaultValue: 0,
-          additionalProps: { min: 0 },
-          rules:  [] 
-        },
-        {
-          label: '公共卫生间(单位：处）', 
-          name: 'publicToilets', 
-          type: 'number', 
-          defaultValue: 0,
-          additionalProps: { min: 0 },
-          rules:  [] 
-        },
-      ] 
-    })], 
-  },
-  'route': {
-    [1]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '游览路线', 
-          name: 'route', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入游览路线',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入游览路线',
-          }] 
-        },
-        {
-          label: '路线名称', 
-          name: 'name', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入路线名称',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入路线名称',
-          }] 
-        },
-        {
-          label: '描述', 
-          name: 'desc', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入描述',
-            maxLength: 200,
-            showWordLimit: true, 
-          },
-          rules:  [{
-            required: true,
-            message: '请输入描述',
-          }] 
-        },
-        {
-          label: '起始点', 
-          name: 'startPoint', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入起始点',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入起始点',
-          }] 
-        },
-        {
-          label: '终止点', 
-          name: 'endPoint', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入终止点',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入终止点',
-          }] 
-        },
-        {
-          label: '预计时长（小时）', 
-          name: 'estimate', 
-          type: 'number', 
-          defaultValue: 1,
-          additionalProps: {
-            min: 1,
-          },
-          rules:  [{
-            required: true,
-            message: '请输入预计时长',
-          }] 
-        },
-      ] 
-    })],
-    [2]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '活动标题', 
-          name: 'activity', 
-          type: 'text', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入活动标题',
-          },
-          rules:  [{
-            required: true,
-            message: '请输入活动标题',
-          }] 
-        },
-        {
-          label: '活动开始时间', 
-          name: 'startTime',
-          type: 'datetime', 
-          defaultValue: '',
-          additionalProps: {
-            type: 'datetime',
-          },
-          rules: [{
-            required: true,
-            message: '请选择活动开始时间',
-          }],
-        },
-        {
-          label: '活动结束时间', 
-          name: 'endTime',
-          type: 'datetime', 
-          defaultValue: '',
-          additionalProps: {
-            type: 'datetime',
-          },
-          rules: [{
-            required: true,
-            message: '请选择活动结束时间',
-          }],
-        },
-        {
-          label: '活动时长（分钟）', 
-          name: 'duration',
-          type: 'number', 
-          defaultValue: 0,
-          additionalProps: {
-            min: 0,
-          },
-          rules: [{
-            required: true,
-            message: '请选择活动时长',
-          }],
-        },
-      ] 
-    })],
-    [3]: [CommonInfoModel, () => ({
-      formItems: [
-        {
-          label: '特色', 
-          name: 'advant', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入特色',
-            maxLength: 300,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules:  [{
-            required: true,
-            message: '请输入特色',
-          }] 
-        },
-        {
-          label: '文化背景', 
-          name: 'intro', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入文化背景',
-            maxLength: 300,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules:  [{
-            required: true,
-            message: '请输入文化背景',
-          }] 
-        },
-        {
-          label: '精彩推荐', 
-          name: 'recommend', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入精彩推荐',
-            maxLength: 300,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules:  [{
-            required: true,
-            message: '请输入精彩推荐',
-          }] 
-        },
-        {
-          label: '推荐描述', 
-          name: 'reason', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入推荐描述',
-            maxLength: 300,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules:  [{
-            required: true,
-            message: '请输入推荐描述',
-          }] 
-        },
-        {
-          label: '活动亮点', 
-          name: 'highlight', 
-          type: 'richtext', 
-          defaultValue: '',
-          additionalProps: {
-            placeholder: '请输入活动亮点',
-            maxLength: 300,
-            showWordLimit: true, 
-          } as FieldProps,
-          rules:  [{
-            required: true,
-            message: '请输入活动亮点',
-          }] 
-        },
-        {
-          label: '图片视频', 
-          name: 'images', 
-          type: 'uploader', 
-          defaultValue: '',
-          additionalProps: {
-            upload: useAliOssUploadCo('xiangyuan/activity'),
-            maxFileSize: 1024 * 1024 * 20,
-            maxUploadCount: 20,
-          } as UploaderFieldProps,
-          rules:  [] 
-        },
-      ] 
-    })]
+    [0]: villageInfoTravelGuideForm, 
   },
+  'route': villageInfoRouteForm,
   'food_product': {
     [1]: villageInfoFoodProductsForm('农副产品'),
     [2]: villageInfoFoodProductsForm('食品产品'),

src/pages/user/update/profile.vue

@@ -5,6 +5,7 @@
       :model="formModel"
       :rules="rules" 
       validateTrigger="submit"
+      labelAlign="right"
       :labelWidth="140"
     >
       <!-- 头像 -->