@neatui/nuxt 0.1.0

package/src/components/loader/FormLoader@v1/FormLoader.vue

@@ -0,0 +1,506 @@
+<template>
+  <div class="form-loader n-sm-sub" :data-level="level" ui-row="">
+    <div v-for="(node, i1) in $form" v-if="!node.clear" :key="i1" class="form-loader-item" :id="node._fid" :ui-col="node.media">
+      <div v-if="node.other && node.other.prefix" ui-flex="row lm">
+        <div :style="labelcss(node)"></div>
+        <div v-for="(item, idx) in node.other.prefix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
+      </div>
+      <div :id="`form${index + '' ? '-' + index : ''}-field-${node.field || '*'}`" v-bind="node.attrs" :data-level="level" data-node="child">
+        <slot :name="node.field" v-model:node="node" v-model: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" v-model:node="node" v-model: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 v-if="node.array">
+              <el-button size="s" @click="fAdd(node, data[node.field])">
+                <span>+</span>
+              </el-button>
+            </div>
+          </div>
+          <template v-if="node.array">
+            <template v-if="isArray(node.array.lists)">
+              <div class="form-loader-group-array flex-block">
+                <div ui-row="">
+                  <div v-for="(item, i2) in data[node.field]" :key="i2" class="form-loader-array-item" :ui-col="node.array.media" v-bind="node.array.attrs">
+                    <div class="flex-block">
+                      <FormLoader
+                        v-model:form="node.array.lists"
+                        v-model:data="item"
+                        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>
+
+                        <!-- 拉圾VUE2不能直接遍历 -->
+                        <template v-if="slots[0]" v-slot:[slots[0]]="slotprops"><slot :name="slots[0]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[1]" v-slot:[slots[1]]="slotprops"><slot :name="slots[1]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[2]" v-slot:[slots[2]]="slotprops"><slot :name="slots[2]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[3]" v-slot:[slots[3]]="slotprops"><slot :name="slots[3]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[4]" v-slot:[slots[4]]="slotprops"><slot :name="slots[4]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[5]" v-slot:[slots[5]]="slotprops"><slot :name="slots[5]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[6]" v-slot:[slots[6]]="slotprops"><slot :name="slots[6]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[7]" v-slot:[slots[7]]="slotprops"><slot :name="slots[7]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[8]" v-slot:[slots[8]]="slotprops"><slot :name="slots[8]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[9]" v-slot:[slots[9]]="slotprops"><slot :name="slots[9]" v-bind="slotprops"></slot></template>
+
+                        <template v-if="slots[10]" v-slot:[slots[10]]="slotprops"><slot :name="slots[10]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[11]" v-slot:[slots[11]]="slotprops"><slot :name="slots[11]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[12]" v-slot:[slots[12]]="slotprops"><slot :name="slots[12]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[13]" v-slot:[slots[13]]="slotprops"><slot :name="slots[13]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[14]" v-slot:[slots[14]]="slotprops"><slot :name="slots[14]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[15]" v-slot:[slots[15]]="slotprops"><slot :name="slots[15]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[16]" v-slot:[slots[16]]="slotprops"><slot :name="slots[16]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[17]" v-slot:[slots[17]]="slotprops"><slot :name="slots[17]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[18]" v-slot:[slots[18]]="slotprops"><slot :name="slots[18]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[19]" v-slot:[slots[19]]="slotprops"><slot :name="slots[19]" v-bind="slotprops"></slot></template>
+
+                        <template v-if="slots[20]" v-slot:[slots[20]]="slotprops"><slot :name="slots[20]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[21]" v-slot:[slots[21]]="slotprops"><slot :name="slots[21]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[22]" v-slot:[slots[22]]="slotprops"><slot :name="slots[22]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[23]" v-slot:[slots[23]]="slotprops"><slot :name="slots[23]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[24]" v-slot:[slots[24]]="slotprops"><slot :name="slots[24]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[25]" v-slot:[slots[25]]="slotprops"><slot :name="slots[25]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[26]" v-slot:[slots[26]]="slotprops"><slot :name="slots[26]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[27]" v-slot:[slots[27]]="slotprops"><slot :name="slots[27]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[28]" v-slot:[slots[28]]="slotprops"><slot :name="slots[28]" v-bind="slotprops"></slot></template>
+                        <template v-if="slots[29]" v-slot:[slots[29]]="slotprops"><slot :name="slots[29]" v-bind="slotprops"></slot></template>
+                      </FormLoader>
+                    </div>
+                    <div class="flex-fixed" @click="fDel(data[node.field], i2)">-</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <div v-else v-html="err(`配置错误：Field: ${node.field} 配置了属性值 [array] 必须是一个数组`)"></div>
+          </template>
+          <template v-else-if="node.child">
+            <template v-if="isArray(node.child)">
+              <FormLoader
+                class="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>
+
+                <!-- 拉圾VUE2不能直接遍历 -->
+                <template v-if="slots[0]" v-slot:[slots[0]]="slotprops"><slot :name="slots[0]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[1]" v-slot:[slots[1]]="slotprops"><slot :name="slots[1]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[2]" v-slot:[slots[2]]="slotprops"><slot :name="slots[2]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[3]" v-slot:[slots[3]]="slotprops"><slot :name="slots[3]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[4]" v-slot:[slots[4]]="slotprops"><slot :name="slots[4]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[5]" v-slot:[slots[5]]="slotprops"><slot :name="slots[5]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[6]" v-slot:[slots[6]]="slotprops"><slot :name="slots[6]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[7]" v-slot:[slots[7]]="slotprops"><slot :name="slots[7]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[8]" v-slot:[slots[8]]="slotprops"><slot :name="slots[8]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[9]" v-slot:[slots[9]]="slotprops"><slot :name="slots[9]" v-bind="slotprops"></slot></template>
+
+                <template v-if="slots[10]" v-slot:[slots[10]]="slotprops"><slot :name="slots[10]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[11]" v-slot:[slots[11]]="slotprops"><slot :name="slots[11]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[12]" v-slot:[slots[12]]="slotprops"><slot :name="slots[12]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[13]" v-slot:[slots[13]]="slotprops"><slot :name="slots[13]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[14]" v-slot:[slots[14]]="slotprops"><slot :name="slots[14]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[15]" v-slot:[slots[15]]="slotprops"><slot :name="slots[15]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[16]" v-slot:[slots[16]]="slotprops"><slot :name="slots[16]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[17]" v-slot:[slots[17]]="slotprops"><slot :name="slots[17]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[18]" v-slot:[slots[18]]="slotprops"><slot :name="slots[18]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[19]" v-slot:[slots[19]]="slotprops"><slot :name="slots[19]" v-bind="slotprops"></slot></template>
+
+                <template v-if="slots[20]" v-slot:[slots[20]]="slotprops"><slot :name="slots[20]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[21]" v-slot:[slots[21]]="slotprops"><slot :name="slots[21]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[22]" v-slot:[slots[22]]="slotprops"><slot :name="slots[22]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[23]" v-slot:[slots[23]]="slotprops"><slot :name="slots[23]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[24]" v-slot:[slots[24]]="slotprops"><slot :name="slots[24]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[25]" v-slot:[slots[25]]="slotprops"><slot :name="slots[25]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[26]" v-slot:[slots[26]]="slotprops"><slot :name="slots[26]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[27]" v-slot:[slots[27]]="slotprops"><slot :name="slots[27]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[28]" v-slot:[slots[28]]="slotprops"><slot :name="slots[28]" v-bind="slotprops"></slot></template>
+                <template v-if="slots[29]" v-slot:[slots[29]]="slotprops"><slot :name="slots[29]" 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>
+        </slot>
+      </div>
+      <div v-if="node.other && node.other.suffix" ui-flex="row lm">
+        <div :style="labelcss(node)"></div>
+        <div v-for="(item, idx) in node.other.suffix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
+      </div>
+    </div>
+    <div v-if="$slots.submit" class="full-x" ui-flex="row lm">
+      <div class="flex-fixed" :style="labelcss(node)">&nbsp;</div>
+      <div class="flex-block"><slot name="submit"></slot></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { deepcopy, isArray, isFunction, isObject, isString } from '@fekit/utils';
+
+  // 根据表单结构生成数据结构
+  const _rows = (arr) => {
+    const data = {};
+    for (const node of arr) {
+      if (node.field && node.field !== '*') {
+        data[node.field] = node.child ? _rows(node.child) : node.array ? [] : '';
+      }
+    }
+    return data;
+  };
+
+  export default {
+    name: 'FormLoader',
+    components: {
+      FormRender: () => import('./FormRender.vue'),
+      FormLoader: () => import('./FormLoader.vue')
+    },
+    props: {
+      mode: {
+        type: String,
+        default: 'edit'
+      },
+      debug: {
+        type: Boolean,
+        default: false
+      },
+      form: {
+        type: Array,
+        default: () => []
+      },
+      data: {
+        type: Object,
+        default: () => ({})
+      },
+      fulldata: {
+        type: Object,
+        default: () => null
+      },
+      rows: {
+        type: String,
+        default: 'mob-24 pad-12 dpc-8'
+      },
+      interacted: {
+        type: Boolean,
+        default: false
+      },
+      array: {
+        type: Boolean,
+        default: false
+      },
+      level: {
+        type: Number,
+        default: 0
+      },
+      index: {
+        type: String | Number,
+        default: ''
+      },
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      slots: {
+        type: Array,
+        default: () => []
+      },
+      globalLabelWidth: {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        node: [],
+        lw: 0,
+        cache: {}
+      };
+    },
+    computed: {
+      $form() {
+        const form = this.form;
+        const data = this.fulldata || this.data;
+        return deepcopy(form)?.map((node = {}) => {
+          // 数据
+          if (node.field) {
+            form._data = data[node.field];
+          } else {
+            form._data = data;
+          }
+          // 清除字段
+          if (isFunction(node.clear)) {
+            node.clear = node.clear(data, node);
+            if (node.clear && data[node.field] !== '') {
+              this.cache[node.field] = data[node.field];
+              this.$set(data, node.field, '');
+            } else {
+              if (this.cache[node.field]) {
+                this.$set(data, node.field, this.cache[node.field]);
+                delete this.cache[node.field];
+              }
+            }
+          }
+
+          // 水平垂直
+          if (isFunction(node.vertical)) {
+            node.vertical = node.vertical(data, node);
+          }
+          if (!node.vertical) {
+            node.vertical = this.vertical;
+          }
+
+          // 模型处理
+          if (isFunction(node.model)) {
+            node.model = node.model(data, node);
+          }
+          if (node.model) {
+            if (isString(node.model)) {
+              node.model = [node.model, { verify: false }];
+            }
+          } else {
+            node.model = ['', { verify: false }];
+          }
+          if (!node.model[1]) {
+            node.model[1] = {};
+          }
+          if (node.model[1]) {
+            node.model[1] = {
+              verify: false,
+              clearable: true,
+              ...node.model[1]
+            };
+          }
+
+          // 枚举处理
+          if (isFunction(node.enums)) {
+            node.enums = node.enums(data, node);
+          }
+
+          // 规则处理
+          if (isFunction(node.rules)) {
+            node.rules = node.rules(data, node);
+          }
+          if (!node.rules) {
+            node.rules = [];
+          }
+
+          // 媒体查询
+          if (isFunction(node.media)) {
+            node.media = node.media(data, node);
+          }
+          if (!node.media) {
+            node.media = this.rows;
+          }
+
+          // 属性处理
+          if (isFunction(node.attrs)) {
+            node.attrs = node.attrs(data, node);
+          }
+          if (!node.attrs) {
+            node.attrs = {};
+          }
+          if (node.attrs) {
+            node.attrs = {
+              'ui-flex': node.vertical ? 'col xt' : 'row xt',
+              ...node.attrs
+            };
+          }
+
+          // 名称处理
+          if (isFunction(node.label)) {
+            node.label = node.label(data, node);
+          }
+          if (node.label) {
+            if (isString(node.label)) {
+              node.label = [node.label, { class: '', style: '' }];
+            }
+          } else {
+            node.label = ['*', { class: '', style: '' }];
+          }
+          if (!node.label[1]) {
+            node.label[1] = { class: '', style: '' };
+          }
+          node.label[0] = node.label[0] && node.label[0] !== '*' && !((node.array || node.child) && node.vertical) ? node.label[0] + ':' : node.label[0] || '';
+          this.clw(node.label[0]);
+          // 默认样式处理
+          if (node.label[1]) {
+            node.label[1].style = `${node.vertical && node?.rules?.some((v) => v.required) ? 'text-indent: -1em;' : ''} ${node.label[1] || ''}`;
+          }
+
+          // 额外内容渲染
+          if (isFunction(node.other)) {
+            node.other = node.other(data, node);
+          }
+          if (!node.other || !isObject(node.other)) {
+            node.other = {};
+          }
+          if (node.other.prefix) {
+            if (isFunction(node.other.prefix)) {
+              node.other.prefix = node.other.prefix(data, node);
+            }
+            if (isString(node.other.prefix)) {
+              node.other.prefix = [{ value: node.other.prefix, attrs: {} }];
+            }
+            if (isObject(node.other.prefix)) {
+              if (!node.other.prefix.value) {
+                node.other.prefix.value = '';
+              }
+              if (!node.other.prefix.attrs) {
+                node.other.prefix.attrs = {};
+              }
+              node.other.prefix = [node.other.prefix];
+            }
+          }
+          if (node.other.suffix) {
+            if (isFunction(node.other.suffix)) {
+              node.other.suffix = node.other.suffix(data, node);
+            }
+            if (isString(node.other.suffix)) {
+              node.other.suffix = [{ value: node.other.suffix, attrs: {} }];
+            }
+            if (isObject(node.other.suffix)) {
+              if (!node.other.suffix.value) {
+                node.other.suffix.value = '';
+              }
+              if (!node.other.suffix.attrs) {
+                node.other.suffix.attrs = {};
+              }
+              node.other.suffix = [node.other.suffix];
+            }
+          }
+          // console.log(387, node.other);
+          return node;
+        });
+      }
+    },
+    methods: {
+      // 错误提示
+      err(text) {
+        return `<p class="co-risk" ui-flex="row lm"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 1.2em; height: 1.2em;"><path d="M906.666667 759.466667L578.133333 187.733333C565.333333 164.266667 539.733333 149.333333 512 149.333333s-53.333333 14.933333-66.133333 38.4L117.333333 759.466667c-12.8 23.466667-12.8 53.333333 0 76.8 14.933333 23.466667 38.4 38.4 66.133334 38.4h657.066666c27.733333 0 53.333333-14.933333 66.133334-38.4 14.933333-23.466667 14.933333-53.333333 0-76.8z m-426.666667-366.933334c0-19.2 14.933333-32 32-32s32 14.933333 32 32v189.866667c0 19.2-14.933333 32-32 32s-32-14.933333-32-32v-189.866667zM512 744.533333c-23.466667 0-44.8-19.2-44.8-44.8 0-23.466667 19.2-44.8 44.8-44.8s44.8 19.2 44.8 44.8c0 25.6-19.2 44.8-44.8 44.8z"></path></svg>${text}</p>`;
+      },
+      clw(label = '') {
+        let _lw = 0;
+        if (isString(label)) {
+          for (let i = 0; i < label.length; i++) {
+            const char = label[i];
+            if (/^[\u4e00-\u9fa5]+$/.test(char)) {
+              _lw += 1;
+            } else {
+              _lw += 0.5;
+            }
+          }
+        }
+        _lw += 2;
+        if (_lw > this.lw) {
+          this.lw = _lw;
+        }
+      },
+      // label样式
+      labelcss(node) {
+        if (node.vertical) {
+          // 竖向
+          return ``;
+        } else if (node.transverse) {
+          // 横向不固定宽度
+          return ``;
+        } else {
+          // 横向
+          return `width:${this.globalLabelWidth || this.lw}em; max-width:50%;`;
+        }
+      },
+      // 数据预处理
+      predata() {
+        const fields = [];
+        // 补全数据字段
+        this.$form.forEach((item) => {
+          if (!fields.includes(item.field) && item.field) {
+            fields.push(item.field);
+          } else {
+            if (item.field) {
+              console.error(`表单字段重复：${item.field}`);
+            }
+          }
+          if (!this.data.hasOwnProperty(item.field) && item.field && item.field !== '*') {
+            if (item.array) {
+              this.$set(this.data, item.field, []);
+            } else if (item.child) {
+              this.$set(this.data, item.field, {});
+            } else if ((item.model[0] === 'Checkbox' && item.enums) || item.model[1]?.multiple) {
+              this.$set(this.data, item.field, []);
+            } else {
+              this.$set(this.data, item.field, '');
+            }
+          }
+        });
+      },
+      // 添加数组项
+      fAdd(node, data) {
+        const rows = _rows(node.array);
+        data?.push(rows);
+      },
+      // 删除数组项
+      fDel(data, idx) {
+        data?.splice(idx, 1);
+      },
+      isArray
+    },
+    watch: {
+      $form: {
+        handler() {
+          this.predata();
+        },
+        deep: true,
+        immediate: true
+      }
+    }
+  };
+</script>
+<style>
+  .form-loader {
+    position: relative;
+    width: 100%;
+    font-size: 12px;
+  }
+</style>