@neatui/vue 1.0.0

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

@@ -0,0 +1,256 @@
+<template>
+  <slot>
+    <div :ui-row="rows" class="n-sm-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">
+            <h5 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>
+                <span>{{ col.label ? col.label + ':' : '' }}</span>
+              </template>
+            </h5>
+            <p v-else :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>
+                <span>{{ col.label ? col.label + ':' : '' }}</span>
+              </template>
+            </p>
+          </template>
+          <slot :name="col.field" :col="col" :data="col._data">
+            <div v-if="col.value" v-html="isFunction(col.value) ? col.value(col, col._data) : col.value"></div>
+            <template v-else>
+              <template v-if="col.enums">
+                <span v-if="isArray(col._data[col.field])">
+                  <template v-for="(sub, idx) in col._data[col.field]" :key="idx"> {{ idx === 0 ? '' : '、' }}{{ findByJson(col.enums || [], sub)?.label || '' }} </template>
+                </span>
+                <span v-else>{{ findByJson(col.enums || [], col._data[col.field])?.label || '‐‐' }}</span>
+              </template>
+              <template v-else>
+                <span v-if="isArray(col._data[col.field])">{{ (col._data[col.field] === 0 ? '0' : col._data[col.field]?.join('、')) || '‐‐' }}</span>
+                <span v-else>{{ (col._data[col.field] === 0 ? '0' : col._data[col.field]) || '‐‐' }}</span>
+              </template>
+            </template>
+          </slot>
+        </div>
+      </template>
+      <div :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>
+  </slot>
+</template>
+<script lang="ts" setup>
+  import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { isString, isObject, isFunction, deepcopy, isArray, findByJson } from '@fekit/utils';
+
+  const route = useRoute();
+  const router = useRouter();
+
+  // 计算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/loader/ViewLoader/index.ts

@@ -0,0 +1,2 @@
+import ViewLoader from './ViewLoader@v1.vue';
+export default ViewLoader;

package/src/components/loader/index.ts

@@ -0,0 +1,5 @@
+import FormLoader from './FormLoader';
+import LimitLoader from './LimitLoader';
+import TableLoader from './TableLoader';
+import ViewLoader from './ViewLoader';
+export { FormLoader, LimitLoader, TableLoader, ViewLoader };

package/src/components/tools/FormDraftsView.vue

@@ -0,0 +1,308 @@
+<template>
+  <div v-if="route.query.mode === 'edit'" ui-tips="@a co:well">
+    <button ui-btn="@a s none :square" @click="state.show = state.show ? 0 : 1">
+      <i class="icon icon-draft pr"
+        ><sup v-if="state.len" class="sup">{{ state.len }}</sup></i
+      >
+    </button>
+    <div ui-tips-box="tl" class="w-xl mob:w-lln-ms" :ux-view="state.show">
+      <div class="fekit-layer-close" ui-flex="row cm" @click="state.show = 0"><i class="icon icon-close fs-xs"></i></div>
+      <h4>温馨提示</h4>
+      <p class="ny-sm" v-if="state.len">本条记录有未保存的草稿，是否使用草稿？</p>
+      <p class="ny-sm" v-else>当前没有未保存的草稿哦～</p>
+      <p v-if="state.len">
+        <span v-if="state.detail" class="ux-click co-link" @click="state.detail = 0">隐藏详情<i class="icon icon-dropdown r180"></i></span>
+        <span v-else class="ux-click co-link" @click="state.detail = 1">显示详情<i class="icon icon-dropdown"></i></span>
+      </p>
+      <ul v-if="state.detail" class="mb-sl fs-ss" ui-scroll=":y" style="max-height: 20rem">
+        <template v-for="(item, idx) in state.diffs" :key="idx">
+          <li v-if="item.label" ui-flex="row lm" class="bb-xs b-line b-solid ny-ss">
+            <span class="nx-ss r-sm mr-sm ux-hover nowrap" @click="fScrollToField(item.domId)">[{{ item.label }}]</span>
+            <span v-if="item.lhsLabel" class="nx-ss r-sm ux-hover" ui-flex="row lm" @click="fDiscardDrafts(item)">
+              <i class="icon icon-cloud co-well o-mm mr-xs"></i>
+              <span ui-omit="1">{{ item.lhsLabel }}</span>
+            </span>
+            <span v-if="item.lhsLabel && item.rhsLabel" class="nx-ss r-sm nx-ss o-mm" ui-flex="row lm">→</span>
+            <span v-if="item.rhsLabel" class="nx-ss r-sm ux-hover" ui-flex="row lm" style="max-width: 50%" @click="fConfirmDrafts(item)">
+              <i class="icon icon-draft co-risk o-mm mr-xs"></i>
+              <span ui-omit="1">{{ item.rhsLabel }}</span>
+            </span>
+          </li>
+        </template>
+      </ul>
+      <div v-if="state.len" class="mr-sl-sub mt-sl">
+        <button ui-btn="@a s main" @click="fConfirmDrafts()">使用草稿</button>
+        <button ui-btn="@a s none" @click="fDiscardDrafts()">不用了，谢谢！</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, watch, onMounted, onUnmounted, computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  import scrollTo from '@fekit/scrollto';
+  import { findEnumName } from '@/utils';
+  import { diff, deepcopy, isArray } from '@fekit/utils';
+  const emits = defineEmits(['update:data', 'confirm', 'discard']);
+  const route: any = useRoute();
+  const props: any = defineProps({
+    area: {
+      type: HTMLElement,
+      default: document.body
+    },
+    // 数据
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    // 表单
+    form: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const state: any = reactive({
+    // 辅助刷新状态用的
+    __update: false,
+    // 浏览或编辑模式
+    mode: route.query.mode,
+    // 显示隐藏本组件
+    show: 0,
+    // 是否显示详情
+    detail: 1,
+    // 本地存储的Key
+    cacheKey: computed(() => (route.query.id ? ('draft_cache' + route.path.replace(/\//g, '_')).toLocaleUpperCase() + '_' + route.query.id : '')),
+    // 云端数据
+    cloud: computed(() => props.data),
+    // 对比数据
+    diffs: computed(() => {
+      const cloud = props.data || {};
+      const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+
+      const diffs = Object.keys(local).length
+        ? (diff(cloud, local) || []).map((item: any) => {
+            const { field = '', lhs = '', rhs = '', path = [] } = item;
+
+            // 表单结构遍历
+            let _form: any = props.form || {};
+            const len = path.length;
+            path.forEach((key: any, idx: number) => {
+              const last = idx === len - 1;
+              if (last && isNaN(key) && !isNaN(field)) {
+                _form = _form[key];
+              } else {
+                if (isNaN(key)) {
+                  if (_form[key]?.child) {
+                    _form = _form[key].child;
+                  }
+                }
+              }
+            });
+
+            const { label = '', enums = null } = (isNaN(field) ? _form[field] : _form) || {};
+
+            // 数据树型遍历
+            let _cloud = cloud || {};
+            let _local = local || {};
+            path.forEach((field: any) => {
+              _cloud = _cloud[field];
+              _local = _local[field];
+            });
+
+            const _path = path.join('-');
+            const domId = '#form-field-' + (_path ? _path + '-' : '') + field;
+
+            return {
+              domId,
+              path,
+              field,
+              label,
+              lhs,
+              lhsLabel:
+                (enums ? findEnumName(enums, _cloud[field]) : !isNaN(field) && _cloud[field] ? `删除第${Number(field) + 1}条记录` : _cloud[field]) || (!isNaN(field) ? '' : '‐‐'),
+              rhs,
+              rhsLabel:
+                (enums ? findEnumName(enums, _local[field]) : !isNaN(field) && _local[field] ? `新增第${Number(field) + 1}条记录` : _local[field]) || (!isNaN(field) ? '' : '‐‐'),
+              // 辅助手动刷新
+              __update: state.__update
+            };
+          })
+        : [];
+
+      return diffs.filter((obj: any) => obj.label);
+    }),
+    len: computed(() => state.diffs?.length || 0),
+    // 修改单个字段
+    field: null
+  });
+
+  // 定位字段
+  const fScrollToField = (domId: any) => {
+    const dom = document.querySelector(domId);
+    if (dom) {
+      scrollTo({
+        el: props.area,
+        to: {
+          y: dom
+        },
+        offset: { y: -36 },
+        then() {
+          const input = dom.querySelector('input');
+          if (input) {
+            input?.focus();
+          }
+        }
+      });
+    }
+  };
+
+  // 使用草稿
+  const fConfirmDrafts = ({ field = '', path = [] }: any = {}) => {
+    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (field) {
+      state.field = field;
+      // 无限树型遍历
+      let _cloud = state.cloud || {};
+      let _local = local || {};
+      path.forEach((field: any) => {
+        _cloud = _cloud[field];
+        _local = _local[field];
+      });
+      _cloud[field] = _local[field];
+
+      emits('update:data', { ...state.cloud });
+      emits('confirm', field);
+    } else {
+      state.diffs.forEach((item: any) => {
+        const { field = '', path = [] } = item;
+        // 无限树型遍历
+        let _cloud = state.cloud || {};
+        let _local = local || {};
+        path.forEach((field: any) => {
+          _cloud = _cloud[field];
+          _local = _local[field];
+        });
+        // 判断是否为数组
+        if (isArray(_cloud) && !_local[field]) {
+          _cloud.splice(Number(field), 1);
+        } else {
+          _cloud[field] = _local[field];
+        }
+        state.show = 0;
+      });
+
+      emits('update:data', { ...state.cloud });
+      emits('confirm');
+    }
+  };
+  // 放弃草稿
+  const fDiscardDrafts = ({ field = '', path = [] }: any = {}) => {
+    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (field) {
+      // 无限树型遍历
+      let _cloud = state.cloud || {};
+      let _local = local || {};
+      path.forEach((field: any) => {
+        _cloud = _cloud[field];
+        _local = _local[field];
+      });
+      _local[field] = _cloud[field];
+
+      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      emits('discard', field);
+    } else {
+      state.diffs.forEach((item: any) => {
+        const { field = '', path = [] } = item;
+        // 无限树型遍历
+        let _cloud = state.cloud || {};
+        let _local = local || {};
+        path.forEach((field: any) => {
+          _cloud = _cloud[field];
+          _local = _local[field];
+        });
+        // 判断是否为数组
+        if (isArray(_local) && !_cloud[field]) {
+          _local.splice(Number(field), 1);
+        } else {
+          _local[field] = _cloud[field];
+        }
+        state.show = 0;
+      });
+      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      emits('discard');
+      state.show = 0;
+    }
+    setTimeout(() => {
+      state.__update = !state.__update;
+    }, 300);
+  };
+
+  // 初始化时进入页面时自动弹出
+  const timer: any = ref(null);
+  onMounted(() => {
+    timer.value = setTimeout(() => {
+      if (state.diffs.length) {
+        state.show = 1;
+      }
+    }, 1000);
+  });
+  onUnmounted(() => {
+    clearTimeout(timer.value);
+  });
+
+  // 初始化后进入页面时自动弹出
+  watch(
+    () => route.query.mode,
+    (mode: any) => {
+      clearTimeout(timer.value);
+      if (mode === 'edit') {
+        timer.value = setTimeout(() => {
+          if (state.diffs.length) {
+            state.show = 1;
+          }
+        }, 1000);
+      } else {
+        if (state.show) {
+          setTimeout(() => {
+            state.show = 0;
+          }, 300);
+        }
+      }
+    }
+  );
+
+  const timer2: any = ref(null);
+  watch(
+    () => state.diffs,
+    () => {
+      clearTimeout(timer2.value);
+      if (state.show && !state.diffs.length) {
+        timer2.value = setTimeout(() => {
+          state.show = 0;
+        }, 1000);
+      }
+    }
+  );
+
+  // 本地存储
+  watch(
+    () => props.data,
+    (edit: any, old: any) => {
+      if (edit === old) {
+        if (state.field) {
+          const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+          local[state.field] = state.cloud[state.field];
+          localStorage.setItem(state.cacheKey, JSON.stringify(local));
+          state.field = null;
+        } else {
+          localStorage.setItem(state.cacheKey, JSON.stringify(edit));
+        }
+      }
+    },
+    {
+      deep: true
+    }
+  );
+</script>