@neatui/nuxt 0.1.0 → 1.0.1

package/src/components/loader/FormLoader/FormLoader@v3.vue.backup

@@ -1,318 +1,399 @@
 <template>
-  <slot>
-    <div class="n-sl-sub" :ui-row="rows">
-      <template v-for="(col, idx) in state.form" :key="idx">
-        <div v-if="!col.clear" :ui-flex="`${vertical ? 'col xm' : 'row xt'}`" :id="col._fid" :ui-col="col.media" v-bind="{ ...(col.attrs || {}) }">
-          <h5 v-if="vertical" class="o-ls" :style="`${col.rules?.some((validator:any) => validator.required)?'text-indent: -1em':''}`">
-            <b class="co-risk pr" style="left: 0.1em" v-if="col.rules?.some((validator:any) => validator.required)">﹡</b>{{ col.label }}:
-          </h5>
-          <p v-else class="ar nr-sm flex-fixed o-ls" :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`">
-            <b class="co-risk" v-if="col.rules?.some((validator:any) => validator.required)">﹡</b>{{ col.label }}:
-          </p>
-          <Select
-            v-if="col.model[0] === 'Select'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            v-model="col.data[col.field]"
-            :rules="col?.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></Select>
-          <SelectList
-            v-else-if="col.model[0] === 'SelectList'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            v-model="col.data[col.field]"
-            :rules="col?.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectTags
-            v-else-if="col.model[0] === 'SelectTags'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            v-model="col.data[col.field]"
-            :rules="col?.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SelectPicker
-            v-else-if="col.model[0] === 'SelectPicker'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            v-model="col.data[col.field]"
-            :rules="col?.rules"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchSelect
-            v-else-if="col.model[0] === 'SearchSelect'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelect
-            v-else-if="col.model[0] === 'MoreSelect'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectList
-            v-else-if="col.model[0] === 'MoreSelectList'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectTags
-            v-else-if="col.model[0] === 'MoreSelectTags'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <MoreSelectPicker
-            v-else-if="col.model[0] === 'MoreSelectPicker'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <SearchMoreSelect
-            v-else-if="col.model[0] === 'SearchMoreSelect'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <PageSelect
-            v-else-if="col.model[0] === 'PageSelect'"
-            class="full-w"
-            :interacted="interacted"
-            :options="col.enums"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <DatePicker
-            v-else-if="col.model[0] === 'DatePicker'"
-            class="full-w"
-            :interacted="interacted"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" :interacted="interacted" :rules="col.rules" v-model="col.data[col.field]" v-bind="{ ...(col.model[1] || {}) }" />
-          <TextArea
-            v-else-if="col.model[0] === 'TextArea'"
-            :interacted="interacted"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            v-bind="{ ...(col.model[1] || {}) }"
-          ></TextArea>
-          <Switch v-else-if="col.model[0] === 'Switch'" :interacted="interacted" :rules="col.rules" v-model="col.data[col.field]" v-bind="{ ...(col.model[1] || {}) }" />
-          <Tree v-else-if="col.model[0] === 'Tree'" :interacted="interacted" :rules="col.rules" v-model="col.data[col.field]" v-bind="{ ...(col.model[1] || {}) }" />
-          <Cascader
-            v-else-if="col.model[0] === 'Cascader'"
-            class="full-w"
-            :interacted="interacted"
-            :rules="col.rules"
-            v-model="col.data[col.field]"
-            :options="col.enums"
-            v-bind="{ ...(col.model[1] || {}) }"
-          />
-          <Input v-else class="full-w" :interacted="interacted" :rules="col.rules" v-model="col.data[col.field]" v-bind="{ ...(col.model[1] || {}) }" />
+  <div class="form-loader n-sm-sub" :data-level="level" ui-row="">
+    <template v-for="(node, i1) in $nodes" :key="i1">
+      <div v-if="!node.clear" :key="i1" class="form-loader-item" :class="node.model[0] === 'Blank' ? 'form-loader-item-none n-no' : ''" :id="node._fid" :ui-col="node.media">
+        <!-- 字段外部上面插入其它内容 -->
+        <div class="flex-fixed" v-if="node.other && node.other.mt" v-bind="node.other.mt.attrs">
+          <template v-for="(item, idx) in node?.other?.mt?.child || []">
+            <div
+              v-if="!item.clear"
+              :key="idx"
+              v-html="item.value"
+              v-bind="item.attrs"
+              v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+            ></div>
+          </template>
         </div>
-      </template>
+        <div class="flex-block" ui-flex="row lt">
+          <!-- 字段外部左边插入其他内容 -->
+          <div class="flex-fixed" v-if="node.other && node.other.ml" v-bind="node.other.ml.attrs">
+            <template v-for="(item, idx) in node?.other?.ml?.child || []">
+              <div
+                v-if="!item.clear"
+                :key="idx"
+                v-html="item.value"
+                v-bind="item.attrs"
+                v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+              ></div>
+            </template>
+          </div>
+          <!-- 字段主体 -->
+          <div class="flex-block">
+            <div
+              :id="`form${index + '' ? '-' + index : ''}-field-${node.field || '*'}`"
+              v-bind="node.attrs"
+              v-on="event({ col: node, node, data, idx: i1, fun: { fAdd, fDel, _rows } })"
+              :data-level="level"
+              data-node="child"
+            >
+              <slot :name="node.field" :node="node" :data="data">
+                <div
+                  v-if="node.label[0] !== '*'"
+                  :class="`form-loader-label ${node.vertical ? 'flex-block' : 'flex-fixed nr-sm'} o-ls nt-ss`"
+                  :style="labelcss(node)"
+                  ui-flex="row xm"
+                >
+                  <slot v-if="slots.includes(`${node.field}-label`)" :name="`${node.field}-label`"></slot>
+                  <slot v-else name="every-label" :node="node" :data="data">
+                    <template v-if="node.label[0]">
+                      <h6 class="flex-block pr o-lm" style="padding-top: 2px" v-if="node.vertical" v-bind="node.label[1]">
+                        <template v-if="node.label[0] === '*'"></template>
+                        <template v-else>
+                          <b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
+                        </template>
+                      </h6>
+                      <h6 v-else class="flex-block ar pr o-lm" style="padding-top: 2px" v-bind="node.label[1]">
+                        <template v-if="node.label[0] === '*'"></template>
+                        <template v-else>
+                          <b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
+                        </template>
+                      </h6>
+                    </template>
+                  </slot>
+                </div>
+                <div class="flex-block" ui-flex="col xm">
+                  <!-- 字段内部上边插入其他内容 -->
+                  <div class="flex-fixed" v-if="node.other && node.other.nt" v-bind="node.other.nt.attrs">
+                    <template v-for="(item, idx) in node?.other?.nt?.child || []">
+                      <div
+                        v-if="!item.clear"
+                        :key="idx"
+                        v-html="item.value"
+                        v-bind="item.attrs"
+                        v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+                      ></div>
+                    </template>
+                  </div>
+                  <div ui-flex="row lt">
+                    <!-- 字段内部左边插入其他内容 -->
+                    <div class="flex-fixed" v-if="node.other && node.other.nl" v-bind="node.other.nl.attrs">
+                      <template v-for="(item, idx) in node?.other?.nl?.child || []">
+                        <div
+                          v-if="!item.clear"
+                          :key="idx"
+                          v-html="item.value"
+                          v-bind="item.attrs"
+                          v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+                        ></div>
+                      </template>
+                    </div>
+                    <div class="flex-block">
+                      <template v-if="node.array">
+                        <template v-if="isArray(node.array.lists)">
+                          <div v-if="data[node.field].length" class="form-loader-group-array flex-block n-sm-sub" ui-row="">
+                            <div v-for="(item, i2) in data[node.field]" :key="i2" class="form-loader-array-item full">
+                              <div class="flex-fixed" v-if="node.array.other && node.array.other.ml" v-bind="node.array.other.ml.attrs">
+                                <template v-if="node.array.other.mt.child && isArray(node.array.other.mt.child)">
+                                  <div
+                                    v-for="(item, idx) in node.array.other.mt.child"
+                                    v-if="!item.clear"
+                                    :key="idx"
+                                    v-html="item.value"
+                                    v-bind="item.attrs"
+                                    v-on="event({ col: item, node, data: data[node.field], idx: i2, fun: { fAdd, fDel, _rows } })"
+                                  ></div>
+                                </template>
+                              </div>
+                              <div class="full" ui-flex="row xt">
+                                <div class="flex-fixed" v-if="node.array.other && node.array.other.ml" v-bind="node.array.other.ml.attrs">
+                                  <template v-if="node.array.other.ml.child && isArray(node.array.other.ml.child)">
+                                    <div
+                                      v-for="(item, idx) in node.array.other.ml.child"
+                                      v-if="!item.clear"
+                                      :key="idx"
+                                      v-html="item.value"
+                                      v-bind="item.attrs"
+                                      v-on="event({ col: item, node, data: data[node.field], idx: i2, fun: { fAdd, fDel, _rows } })"
+                                    ></div>
+                                  </template>
+                                </div>
+                                <div class="flex-block" v-bind="node.array.attrs">
+                                  <FormLoader
+                                    v-model:form="node.array.lists"
+                                    v-model:data="item"
+                                    :parentNode="node"
+                                    v-model:parent="data[node.field]"
+                                    v-model:fulldata="data"
+                                    :rows="rows"
+                                    :level="level + 1"
+                                    :index="i2"
+                                    :debug="debug"
+                                    :mode="mode"
+                                    :interacted="interacted"
+                                    :slots="slots"
+                                    :globalLabelWidth="lw"
+                                    :cache="cache"
+                                  >
+                                    <!-- 通用插槽 -->
+                                    <template v-slot:every-label="slotprops"><slot name="every-label" v-bind="slotprops"></slot></template>
+                                    <template v-slot:array-label="slotprops"><slot name="array-label" v-bind="slotprops"></slot></template>
+                                    <template v-slot:child-label="slotprops"><slot name="child-label" v-bind="slotprops"></slot></template>
+
+                                    <!-- Vue 3 支持动态插槽，不需要手动遍历 -->
+                                    <template v-for="slotName in slots" :key="slotName" v-slot:[slotName]="slotprops">
+                                      <slot :name="slotName" v-bind="slotprops"></slot>
+                                    </template>
+                                  </FormLoader>
+                                </div>
+                                <div class="flex-fixed" v-if="node.array.other && node.array.other.mr" v-bind="node.array.other.mr.attrs">
+                                  <template v-for="(item, idx) in node?.array?.other?.mr?.child || []">
+                                    <div
+                                      v-if="!item.clear"
+                                      :key="idx"
+                                      v-html="item.value"
+                                      v-bind="item.attrs"
+                                      v-on="event({ col: item, node, data: data[node.field], idx: i2, fun: { fAdd, fDel, _rows } })"
+                                    ></div>
+                                  </template>
+                                </div>
+                              </div>
+                              <div class="flex-fixed" v-if="node.array.other && node.array.other.ml" v-bind="node.array.other.ml.attrs">
+                                <template v-if="node.array.other.mb.child && isArray(node.array.other.mb.child)">
+                                  <div
+                                    v-for="(item, idx) in node.array.other.mb.child"
+                                    v-if="!item.clear"
+                                    :key="idx"
+                                    v-html="item.value"
+                                    v-bind="item.attrs"
+                                    v-on="event({ col: item, node, data: data[node.field], idx: i2, fun: { fAdd, fDel, _rows } })"
+                                  ></div>
+                                </template>
+                              </div>
+                            </div>
+                          </div>
+                        </template>
+                        <div v-else v-html="err(`配置错误：Field: ${node.field} 配置了属性值 [array.lists] 必须是一个数组`)"></div>
+                      </template>
+                      <template v-else-if="node.child">
+                        <template v-if="isArray(node.child)">
+                          <FormLoader
+                            class="flex-block form-loader-group-child"
+                            v-model:form="node.child"
+                            v-model:data="form._data"
+                            v-model:fulldata="data"
+                            :rows="rows"
+                            :level="level + 1"
+                            :debug="debug"
+                            :mode="mode"
+                            :interacted="interacted"
+                            :slots="slots"
+                            :globalLabelWidth="lw"
+                            :cache="cache"
+                          >
+                            <!-- 通用插槽 -->
+                            <template v-slot:every-label="slotprops"><slot name="every-label" v-bind="slotprops"></slot></template>
+                            <template v-slot:array-label="slotprops"><slot name="array-label" v-bind="slotprops"></slot></template>
+                            <template v-slot:child-label="slotprops"><slot name="child-label" v-bind="slotprops"></slot></template>
+
+                            <template v-for="slotName in slots" :key="slotName" v-slot:[slotName]="slotprops">
+                              <slot :name="slotName" v-bind="slotprops"></slot>
+                            </template>
+                          </FormLoader>
+                        </template>
+                        <div v-else v-html="err(`配置错误：Field: ${node.field} 配置了属性值 [child] 必须是一个数组`)"></div>
+                      </template>
+                      <template v-else>
+                        <FormRender v-model:node="node" v-model:data="data" :interacted="interacted" :data-field="node.field" :mode="mode">
+                          <template v-slot:[`${node.field}-value`]="slotprops">
+                            <slot :name="`${node.field}-value`" v-bind="slotprops"></slot>
+                          </template>
+                        </FormRender>
+                      </template>
+                    </div>
+                    <!-- 字段内部右边插入其他内容 -->
+                    <div class="flex-fixed" v-if="node.other && node.other.nr" v-bind="node.other.nr.attrs">
+                      <template v-for="(item, idx) in node?.other?.nr?.child || []">
+                        <div
+                          v-if="!item.clear"
+                          :key="idx"
+                          v-html="item.value"
+                          v-bind="item.attrs"
+                          v-on="event({ col: item, parentNode, node, data: parent, idx: i1, index, fun: { fAdd, fDel, _rows } })"
+                        ></div>
+                      </template>
+                    </div>
+                  </div>
+                  <!-- 字段内部下边插入其他内容 -->
+                  <div class="flex-fixed" v-if="node.other && node.other.nb" v-bind="node.other.nb.attrs">
+                    <template v-for="(item, idx) in node?.other?.nb?.child || []">
+                      <div
+                        v-if="!item.clear"
+                        :key="idx"
+                        v-html="item.value"
+                        v-bind="item.attrs"
+                        v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+                      ></div>
+                    </template>
+                  </div>
+                </div>
+              </slot>
+            </div>
+          </div>
+          <!-- 字段外部右边插入其他内容 -->
+          <div class="flex-fixed" v-if="node.other && node.other.mr && !node.other.mr.clear" v-bind="node.other.mr.attrs">
+            <template v-for="(item, idx) in node?.other?.mr?.child || []">
+              <div
+                v-if="!item.clear"
+                :key="idx"
+                v-html="item.value"
+                v-bind="item.attrs"
+                v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+              ></div>
+            </template>
+          </div>
+        </div>
+        <!-- 字段外部下边插入其他内容 -->
+        <div class="flex-fixed" v-if="node.other && node.other.mb" v-bind="node.other.mb.attrs">
+          <template v-for="(item, idx) in node?.other?.mb?.child || []">
+            <div
+              v-if="!item.clear"
+              :key="idx"
+              v-html="item.value"
+              v-bind="item.attrs"
+              v-on="event({ col: item, node, data: data[node.field], idx: i1, fun: { fAdd, fDel, _rows } })"
+            ></div>
+          </template>
+        </div>
+      </div>
+    </template>
+    <div v-if="slots.submit" class="full-x" ui-flex="row lm">
+      <div class="flex-fixed" :style="labelcss($nodes)">&nbsp;</div>
+      <div class="flex-block"><slot name="submit"></slot></div>
     </div>
-  </slot>
+  </div>
 </template>
 <script setup lang="ts">
-  import { watch, ref, reactive, onUnmounted, computed } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { isString, isObject, isFunction, deepcopy, isArray } from '@fekit/utils';
-  import {
-    Input,
-    Switch,
-    TextArea,
-    Select,
-    SelectList,
-    SelectTags,
-    SelectPicker,
-    SearchSelect,
-    PageSelect,
-    MoreSelect,
-    MoreSelectList,
-    MoreSelectTags,
-    MoreSelectPicker,
-    DatePicker,
-    SearchMoreSelect,
-    ImgUpload,
-    Cascader
-  } from '../../form';
-  import { Tree } from '../../display';
+  import { computed, reactive, useSlots, withDefaults } from 'vue';
+  import { deepcopy, isObject, isArray, isFunction } from '@fekit/utils';
 
-  const route: any = useRoute();
+  const slots = useSlots();
 
-  // 计算Label行高
-  const clh = ({ sz = '' }: any = {}) => {
-    const lhs: any = { xs: 'lh-sm', s: 'lh-mm', m: 'lh-ls', l: 'lh-ll', xl: 'lh-xl' };
-    return lhs[sz] || 'lh-ls';
-  };
-
-  // 计算Label宽度
-  function clw(label: any = '') {
-    let emWidth = 0;
-    if (isString(label)) {
-      for (let i = 0; i < label.length; i++) {
-        const char = label[i];
-        if (/^[\u4e00-\u9fa5]+$/.test(char)) {
-          emWidth += 1;
-        } else {
-          emWidth += 0.5;
-        }
-      }
-    }
-    return emWidth;
-  }
-
-  interface FormParam {
-    label: string | (() => string);
-    field: string | (() => string);
-    paths: string | (() => string);
-    model?: string | Array<any> | (() => string | Array<any>);
-    enums?: Array<any> | (() => string | Array<any>);
-    rules?: Array<any> | (() => string | Array<any>);
-    event?: Array<any> | (() => string | Array<any>);
-    attrs?: Array<any> | (() => string | Array<any>);
-    value?: any | (() => any);
-    clear?: boolean | (() => boolean);
+  interface NodeProps {
+    label?: string | ((data: any) => string);
+    field?: string | ((data: any) => string);
+    model?: string | ((data: any) => string);
+    attrs?: Record<string, any> | ((data: any) => Record<string, any>);
+    rules?: Record<string, any> | ((data: any) => Record<string, any>);
+    clear?: boolean | ((data: any) => boolean);
+    media?: string | ((data: any) => string);
   }
 
-  /**
-   * 入参说明
-   * form        表单结构
-   * data        表单数据
-   * rows        栅格系统
-   * idx         如果表单是数组的话这里传入下标
-   * vertical    是否垂直排列
-   * interacted  用户是否交互
-   */
-
-  // 类型
   interface Props {
-    form: Array<FormParam>;
+    form: NodeProps[];
     data: object;
-    rows?: string;
-    idx?: string | number;
-    vertical?: boolean;
-    interacted?: boolean;
+    level?: number | ((data: any) => number);
+    index?: number | ((data: any) => number);
   }
-  // 入参
-  const props: any = withDefaults(defineProps<Props>(), {
-    form: () => [],
+  const props = withDefaults(defineProps<Props>(), {
+    node: () => [],
     data: () => ({}),
-    rows: 'mob-24 pad-12 dpc-8',
-    idx: '',
-    vertical: false,
-    interacted: false
+    level: 0,
+    index: 0,
   });
 
-  const state: any = reactive({
-    funs: [],
-    form: [],
-    _lw: 6
+  const state = reactive({
+    globalLabelWidth: 0,
+    lw: 0,
   });
 
-  // 更新表单结构
-  watch(
-    [() => props.form, () => props.data, () => props.idx],
-    () => {
-      state.form = props.form.map((item: any) => {
-        // 计算宽度
-        const _w = clw(item.label) + 2;
-        if (_w > state._lw) {
-          state._lw = _w;
-        }
-
-        // 函数处理
-        if (isObject(item)) {
-          for (const key in item) {
-            const val = item[key] || {};
-            // 处理函数
-            if (isFunction(val)) {
-              item[key] = val(props.data, props.form, route);
-              //   console.log(250, key, val);
-              //   state.funs.push({ item, key, fun: val });
-            }
-            // 对象处理
-            // if (isObject(val) && isFunction(val.setup)) {
-            //   state.funs.push({ item, key, val: val.value, fun: val.setup });
-            // }
-          }
-        }
+  const $nodes = computed(() => {
+    const _nodes = deepcopy(props.form);
+    return _nodes.map((node: any) => {
+      return node;
+    });
+  });
 
-        // 添加ID
-        item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
+  const event = ({ col, node, data, idx = null, fun } = {}) => {
+    const _event = { ...col.event } || {};
 
-        // 模型处理
-        if (item.model) {
-          if (isString(item.model)) {
-            item.model = [item.model, { verify: false }];
+    // 代理交互
+    if (col.proxy) {
+      if (col.proxy === 'array-add-btn' && node.array) {
+        if (node.array) {
+          // 合并配置事件与代理事件
+          if (fun.fAdd) {
+            const _click = _event.click;
+            _event.click = function (...args) {
+              if (isFunction(_click)) {
+                _click.apply(this, args);
+              }
+              fun.fAdd(node, data, idx);
+            };
           }
         } else {
-          item.model = ['Input', { verify: false }];
+          console.warn('数组新增按钮代理`array-add-btn`需配置在`array`下');
         }
-        if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
-          item.model[1].verify = false;
+      }
+      if (col.proxy === 'array-del-btn') {
+        if (node.array) {
+          // 合并配置事件与代理事件
+          if (fun.fDel) {
+            const _click = _event.click;
+            _event.click = function (...args) {
+              if (isFunction(_click)) {
+                _click.apply(this, args);
+              }
+              fun.fDel(node, data, idx);
+            };
+          }
+        } else {
+          console.warn('数组删除按钮代理`array-del-btn`需配置在`array`下');
         }
+      }
 
-        // 数据路径
-        item.data = props.data;
-        (item.paths?.split('.') || [])?.forEach((i: any) => {
-          if (item.data[i]) {
-            item.data = item.data[i];
-          }
-        });
+      if (col.proxy === 'array-add-sub' && node.array) {
+        if (node.array) {
+          console.log(784, node, data);
+          // 合并配置事件与代理事件
+          // if (fun.fAdd) {
+          //   const _click = _event.click;
+          //   _event.click = function(...args) {
+          //     if (isFunction(_click)) {
+          //       _click.apply(this, args);
+          //     }
+          //     fun.fAdd(node, data[node.field], idx);
+          //   };
+          // }
+        } else {
+          console.warn('数组新增按钮代理`array-add-btn`需配置在`array`下');
+        }
+      }
+    }
 
-        // 函数处理
-        return item;
-      });
-    },
-    { deep: true, immediate: true }
-  );
+    if (isObject(_event)) {
+      for (const key in _event) {
+        const fun = _event[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args) => {
+            return fun({ node: col, data, idx, formloader: this }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
 
-  watch(
-    () => state.funs,
-    () => {
-      // 监听列表
-      // state.funs.map(({ item = {}, key = '', val = '', fun = () => {} }: any = {}) => {
-      //   console.log(280, item);
-      //   const v = fun(props.data, item, route);
-      //   if (v instanceof Promise) {
-      //     item[key] = val;
-      //     v.then((res: any) => {
-      //       item[key] = res;
-      //     });
-      //   } else {
-      //     item[key] = v;
-      //   }
-      // });
-    },
-    { deep: true, immediate: true }
-  );
+  const labelcss = (nodes: any) => {
+    if (nodes.vertical) {
+      // 竖向
+      return ``;
+    } else if (nodes.transverse) {
+      // 横向不固定宽度
+      return ``;
+    } else {
+      // 横向
+      const _w = Math.max(state.globalLabelWidth, state.lw);
+      return `width:${_w}em; max-width:50%;`;
+    }
+  };
 </script>