@neatui/vue 2.17.2 → 2.17.3

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

@@ -0,0 +1,422 @@
+<template>
+  <div :ui-row="rows" class="n-sl-sub">
+    <template v-for="(col, idx) in state.form" :key="idx">
+      <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
+        <template v-if="col.label">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
+            <template v-if="col.label == '*'"></template>
+            <template v-else>
+              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
+              <span>{{ col.label ? col.label + ':' : '' }}</span>
+            </template>
+          </h6>
+          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
+            <template v-if="col.label == '*'"></template>
+            <template v-else>
+              <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
+              <span>{{ col.label ? col.label + ':' : '' }}</span>
+            </template>
+          </p>
+        </template>
+        <Input v-if="col.model[0] === 'Input'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="w-full" v-bind="{ ...(col.model[1] || {}) }" />
+        <Select
+          v-else-if="col.model[0] === 'Select'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></Select>
+        <SelectList
+          v-else-if="col.model[0] === 'SelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTags
+          v-else-if="col.model[0] === 'SelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectPicker
+          v-else-if="col.model[0] === 'SelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col?.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchSelect
+          v-else-if="col.model[0] === 'SearchSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelect
+          v-else-if="col.model[0] === 'MoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectList
+          v-else-if="col.model[0] === 'MoreSelectList'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectTags
+          v-else-if="col.model[0] === 'MoreSelectTags'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <MoreSelectPicker
+          v-else-if="col.model[0] === 'MoreSelectPicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SearchMoreSelect
+          v-else-if="col.model[0] === 'SearchMoreSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <PageSelect
+          v-else-if="col.model[0] === 'PageSelect'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <SelectTree
+          v-else-if="col.model[0] === 'SelectTree'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DatePicker
+          v-else-if="col.model[0] === 'DatePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <DateRangePicker
+          v-else-if="col.model[0] === 'DateRangePicker'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <ImgUpload v-else-if="col.model[0] === 'ImgUpload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Upload v-else-if="col.model[0] === 'Upload'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Textarea
+          v-else-if="col.model[0] === 'Textarea'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :rules="col.rules"
+          v-bind="{ ...(col.model[1] || {}) }"
+        ></Textarea>
+        <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Checkbox v-else-if="col.model[0] === 'Checkbox'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
+        <Cascader
+          v-else-if="col.model[0] === 'Cascader'"
+          v-model="col._data[col.field]"
+          :interacted="interacted"
+          :options="col.enums"
+          :rules="col.rules"
+          class="w-full"
+          v-bind="{ ...(col.model[1] || {}) }"
+        />
+        <template v-else>
+          <slot v-if="col.slot" :name="col.slot" :col="col"></slot>
+          <slot v-else-if="col.model[0]" :name="col.model[0]" :col="col"></slot>
+          <slot v-else :name="col.field" :col="col"></slot>
+        </template>
+      </div>
+    </template>
+    <div v-if="$slots.submit" :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
+      <div v-if="vertical">
+        <slot name="submit"></slot>
+      </div>
+      <div v-else :style="`padding-left:${state._lw + 'em'};`">
+        <slot name="submit"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { isString, isObject, isFunction, deepcopy, isArray } from '@fekit/utils';
+  import {
+    Input,
+    Switch,
+    Checkbox,
+    Textarea,
+    Select,
+    SelectList,
+    SelectTags,
+    SelectPicker,
+    SearchSelect,
+    PageSelect,
+    SelectTree,
+    MoreSelect,
+    MoreSelectList,
+    MoreSelectTags,
+    MoreSelectPicker,
+    DatePicker,
+    DateRangePicker,
+    SearchMoreSelect,
+    ImgUpload,
+    Upload,
+    Cascader,
+  } from '../../form';
+  import { Tree } from '../../display';
+
+  const route = useRoute();
+  const router = useRouter();
+
+  // 计算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;
+  }
+
+  // 入参
+  const props: any = defineProps({
+    // 用户是否交互
+    interacted: {
+      type: Boolean,
+      default: false,
+    },
+    // JSON规则
+    form: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 表单数据
+    data: {
+      type: Object as any,
+      default: () => ({}),
+    },
+    // 栅格系统
+    rows: {
+      type: String,
+      default: 'mob-24 pad-12 dpc-8',
+    },
+    // 如果表单是数组的话这里传入下标
+    idx: {
+      type: [String, Number],
+      default: '',
+    },
+    // 是否垂直排列
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  // 数据
+  const state: any = reactive({
+    form: [],
+    _lw: 6,
+  });
+
+  // 监听结构
+  const unwatchs: any = [];
+  watch(
+    [() => props.form, () => props.data, () => props.idx],
+    ([form = []]) => {
+      const wkeys: any = {};
+      const onces: any = [];
+      state.form = deepcopy(form)?.map((item: any = {}, idx: number) => {
+        // 计算Label宽度
+        const _w = clw(item.label) + 2;
+        if (_w > state._lw) {
+          state._lw = _w;
+        }
+
+        if (isObject(item)) {
+          for (const key in item) {
+            let val = item[key] || {};
+            // 处理函数
+            if (isFunction(val)) {
+              val = val(deepcopy(props.data), props.form, route, router);
+              if (isObject(val)) {
+                if (!isFunction(val.setup)) {
+                  val.setup = item[key];
+                }
+                if (!isArray(val.watch)) {
+                  val.watch = deepcopy(form).map(({ field = '' }: any = {}) => field);
+                }
+              } else {
+                val = { value: val, setup: item[key], watch: deepcopy(form).map(({ field = '' }: any = {}) => field) };
+              }
+            }
+            // 对象处理
+            if (isObject(val)) {
+              const { value = null, setup = () => {}, watch: _watch = [] } = val || {};
+              // 监听字段为空
+              if (_watch.length) {
+                _watch?.forEach((k: any) => {
+                  if (wkeys[k]) {
+                    wkeys[k].push({ idx, key, value, setup });
+                  } else {
+                    wkeys[k] = [{ idx, key, value, setup }];
+                  }
+                });
+              } else {
+                onces.push({ idx, key, value, setup });
+              }
+              item[key] = value;
+            } else {
+              item[key] = val;
+            }
+          }
+        }
+
+        // 模型处理
+        if (item.model) {
+          if (isString(item.model)) {
+            item.model = [item.model, { verify: false }];
+          }
+        } else {
+          item.model = ['', { verify: false }];
+        }
+        if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
+          item.model[1].verify = false;
+        }
+
+        // 添加ID
+        item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
+
+        // 数据路径处理
+        item._data = props.data;
+        (item.paths?.split('.') || [])?.forEach((i: any) => {
+          if (item._data[i]) {
+            item._data = item._data[i];
+          }
+        });
+        return item;
+      });
+      const runsetup = (item: any = {}) => {
+        const { idx = null, key = null, value = null, setup = null }: any = item || {};
+        if (state.form[idx] && isFunction(setup)) {
+          const v = setup(deepcopy(props.data), state.form[idx], route, router);
+          nextTick(() => {
+            if (v instanceof Promise) {
+              state.form[idx][key] = value;
+              v.then((res: any) => {
+                state.form[idx][key] = res;
+              });
+            } else {
+              state.form[idx][key] = v;
+            }
+          });
+        }
+      };
+      // 执行一次
+      onces?.forEach((item: any = {}) => {
+        runsetup(item);
+      });
+      // 监听列表
+      for (const key in wkeys) {
+        unwatchs.push(
+          watch(
+            () => props.data[key],
+            () => {
+              wkeys[key]?.forEach((item: any = {}) => {
+                runsetup(item);
+              });
+            },
+            {
+              deep: true,
+              immediate: true,
+            },
+          ),
+        );
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  // 处理
+  watch(
+    [() => state.form, () => props.data],
+    () => {
+      state.form.forEach((item: any = {}) => {
+        const { clear = false, field = '', paths = '' }: any = item;
+        if (clear) {
+          // 数据路径处理
+          let _data = props.data;
+          (paths?.split('.') || [])?.forEach((i: any) => {
+            if (_data[i]) {
+              _data = item._data[i];
+            }
+          });
+          _data[field] = isArray(_data[field]) ? [] : '';
+        }
+      });
+    },
+    { deep: true },
+  );
+
+  onBeforeUnmount(() => {
+    unwatchs?.forEach((unwatch: any) => {
+      unwatch();
+    });
+  });
+</script>

package/src/components/form/DateRangePicker@v2.vue.backup

@@ -1,224 +0,0 @@
-<template>
-  <div :ui-form="`@a type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView>
-      <Input v-bind="$props" :clearable="false" readonly v-model="state.value" @click="toggle">
-        <template #suffix><i ui-form-select=""></i></template>
-      </Input>
-      <template #tips>
-        <div ui-calendar="@a" class="w-ll">
-          <div ui-calendar-head="">
-            <div ui-flex="row lm" class="nx-ss-sub">
-              <span class="fw-auto">{{ curr.y }}-{{ curr.m }}</span>
-            </div>
-            <div ui-flex="row rm">
-              <button class="fs-xs mr-ss" ui-btn="@a main s">使用</button>
-            </div>
-          </div>
-          <ul ui-calendar-week="">
-            <li><span>日</span></li>
-            <li><span>一</span></li>
-            <li><span>二</span></li>
-            <li><span>三</span></li>
-            <li><span>四</span></li>
-            <li><span>五</span></li>
-            <li><span>六</span></li>
-          </ul>
-          <div>
-            <ul ui-calendar-days="">
-              <li
-                v-for="(item, idx) in curr.days"
-                :key="idx"
-                :class="`${item.isToday ? 'today' : item.isLastMonth || item.isNextMonth ? 'o-sl' : item.isHoliday ? 'co-risk' : ''} ${
-                  state.selected && state.selected === item.date ? 'active' : ''
-                }`"
-              >
-                <div v-if="item.day" @click="change(item)" class="pr">
-                  <span>{{ item.day }}</span>
-                  <sup style="font-size: 0.6em; margin-top: -0.3em; position: absolute; left: 100%; top: 0" v-if="item.holiday" class="lh-ss">休</sup>
-                </div>
-              </li>
-            </ul>
-          </div>
-          <div ui-calendar-foot="">
-            <div ui-flex="row lm">
-              <div ui-calendar-prev-year="" @click="prev('y')"></div>
-              <div ui-calendar-prev="" @click="prev('m')"></div>
-            </div>
-            <div ui-flex="row cm" class="nx-ss-sub">
-              <ul class="fs-xs n-sm-sub" ui-flex="row lm">
-                <li ui-btn="@a s none">年</li>
-                <li ui-btn="@a s none">月</li>
-                <li ui-btn="@a s none">日</li>
-                <li ui-btn="@a s none">时</li>
-              </ul>
-            </div>
-            <div ui-flex="row rm">
-              <div ui-calendar-next="" @click="next('m')"></div>
-              <div ui-calendar-next-year="" @click="next('y')"></div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </IFollowView>
-  </div>
-</template>
-<script setup lang="ts">
-  import { computed, reactive, toRefs } from 'vue';
-  import { idate } from '@fekit/utils';
-  import { Input } from '../form';
-  import { IFollowView } from '../basic';
-
-  // 创建日期
-  const cDate = (date: any = null) => {
-    const _date = new Date(date);
-    return date && _date instanceof Date && !isNaN(_date.getTime()) ? _date : new Date();
-  };
-  // 个位补零
-  const numfill = (num: string | number = '') => {
-    return Number(num) < 10 ? `0${num}` : num;
-  };
-  // 外部入参
-  const props = defineProps({
-    theme: { type: String, default: '@a' },
-    sz: { type: String, default: 'm' },
-    co: { type: String, default: '' },
-    block: { type: Boolean, default: true },
-    // 提示文案
-    tips: {
-      type: String,
-      default: ''
-    },
-    // 提示文案
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    // 格式
-    format: {
-      type: String,
-      default: ''
-    },
-    // 值
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    // 节假日
-    holiday: {
-      type: Object,
-      default: () => ({})
-    },
-    // 校验规则
-    rules: {
-      type: Array,
-      default: () => []
-    },
-    // 是否是示校验图标
-    verify: {
-      type: Boolean,
-      default: false
-    }
-  });
-
-  // 内部数据
-  const state: any = reactive({
-    view: 1,
-    show: 0,
-    pos: 'bl',
-    selected: '',
-    date: props.value,
-    curr: computed(() => {
-      const date = cDate(state.date);
-      const calendar = [];
-      // 年
-      const y: any = date.getFullYear();
-      // 月
-      const m: any = date.getMonth() + 1;
-      // 日
-      const d: any = date.getDate();
-      // 本月第一天星期几
-      const w = new Date(`${y}-${m}-1`).getDay();
-      // 当前月份一共几天
-      const days = new Date(y, m, 0).getDate();
-
-      // 当前
-      const curr = new Date();
-      const curr_y = curr.getFullYear();
-      const curr_m = curr.getMonth() + 1;
-      const curr_d = curr.getDate();
-
-      // 上月
-      const last = new Date(y, m - 1, 0);
-      const last_y = last.getFullYear();
-      const last_m = last.getMonth() + 1;
-
-      // 下月
-      const next = new Date(y, m + 1, 0);
-      const next_y = next.getFullYear();
-      const next_m = next.getMonth() + 1;
-      let prevdays = last.getDate();
-
-      for (let i = 0; i < w; i++) {
-        calendar.unshift({
-          date: `${last_y}-${numfill(last_m)}-${prevdays}`,
-          day: prevdays,
-          isLastMonth: 1
-        });
-        prevdays = prevdays - 1;
-      }
-      for (let i = 1; i <= days; i++) {
-        const _i = numfill(i);
-        calendar.push({
-          date: `${y}-${numfill(m)}-${_i}`,
-          day: _i,
-          isToday: curr_y === y && curr_m === m && curr_d === i,
-          isHoliday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name
-        });
-      }
-      for (let i = 1; calendar.length < 42; i++) {
-        const _i = numfill(i);
-        calendar.push({
-          date: `${next_y}-${numfill(next_m)}-${_i}`,
-          day: _i,
-          isNextMonth: 1
-        });
-      }
-      return { days: calendar, y, m, d };
-    }),
-    value: computed(() => {
-      return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
-  });
-  const { curr = {} }: any = toRefs(state);
-
-  const toggle = () => {
-    state.show = state.show ? 0 : 1;
-  };
-  const upload = (a: any = 'm', b: any = 1) => {
-    const date = cDate(state.date);
-    if (a === 'm') {
-      date.setMonth(date.getMonth() + b);
-    } else {
-      date.setFullYear(date.getFullYear() + b);
-    }
-    return date.toISOString().substring(0, 10);
-  };
-
-  // 日期前翻
-  const prev = (type: any = 'm') => {
-    state.date = upload(type, -1);
-  };
-  // 日期后翻
-  const next = (type: any = 'm') => {
-    state.date = upload(type, 1);
-  };
-
-  // 向外通信
-  const emits = defineEmits(['change']);
-  const change = (item: any) => {
-    state.selected = item.date;
-    state.date = item.date;
-    emits('change', item.date);
-  };
-</script>