@neatui/vue 1.0.0

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

@@ -0,0 +1,318 @@
+<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>
+      </template>
+    </div>
+  </slot>
+</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';
+
+  const route: any = useRoute();
+
+  // 计算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);
+  }
+
+  /**
+   * 入参说明
+   * form        表单结构
+   * data        表单数据
+   * rows        栅格系统
+   * idx         如果表单是数组的话这里传入下标
+   * vertical    是否垂直排列
+   * interacted  用户是否交互
+   */
+
+  // 类型
+  interface Props {
+    form: Array<FormParam>;
+    data: object;
+    rows?: string;
+    idx?: string | number;
+    vertical?: boolean;
+    interacted?: boolean;
+  }
+  // 入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    form: () => [],
+    data: () => ({}),
+    rows: 'mob-24 pad-12 dpc-8',
+    idx: '',
+    vertical: false,
+    interacted: false
+  });
+
+  const state: any = reactive({
+    funs: [],
+    form: [],
+    _lw: 6
+  });
+
+  // 更新表单结构
+  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 });
+            // }
+          }
+        }
+
+        // 添加ID
+        item._fid = `form-${props.idx !== '' ? props.idx + '-' : ''}field-${item.field}`;
+
+        // 模型处理
+        if (item.model) {
+          if (isString(item.model)) {
+            item.model = [item.model, { verify: false }];
+          }
+        } else {
+          item.model = ['Input', { verify: false }];
+        }
+        if (item.model[1] && !Object.prototype.hasOwnProperty.call(item.model[1], 'verify')) {
+          item.model[1].verify = false;
+        }
+
+        // 数据路径
+        item.data = props.data;
+        (item.paths?.split('.') || [])?.forEach((i: any) => {
+          if (item.data[i]) {
+            item.data = item.data[i];
+          }
+        });
+
+        // 函数处理
+        return item;
+      });
+    },
+    { deep: true, immediate: true }
+  );
+
+  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 }
+  );
+</script>

package/src/components/loader/FormLoader/index.ts

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

package/src/components/loader/LimitLoader/LimitLoader.vue.backup

@@ -0,0 +1,131 @@
+<template>
+  <div class="full-x" ui-flex="row xt">
+    <div ui-flex="row lm :wrap" class="mr-mm-sub my-sm-sub">
+      <template v-for="(item, idx) in state.limit" :key="idx">
+        <div v-if="item._view" ui-flex="row lm" v-bind="item.attrs">
+          <span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
+          <Select sz="s" v-if="item.model === 'Select'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
+          <Cascader sz="s" v-else-if="item.model === 'Cascader'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
+          <MoreSelect sz="s" v-else-if="item.model === 'MoreSelect'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
+          <SearchMoreSelect sz="s" v-else-if="item.model === 'SearchMoreSelect'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
+          <DatePicker v-else-if="item.model === 'DatePicker'" class="w-mm" sz="s" v-model="state.param[item.field]" @change="(val:any) => (state.param[item.field] = val)" />
+          <DateRangePicker
+            v-else-if="item.model === 'DateRangePicker'"
+            class="w-ls"
+            sz="s"
+            v-model="state.param[item.field]"
+            @change="(val:any) => (state.param[item.field] = val)"
+          />
+          <Input sz="s" v-else class="w-mm" :block="false" v-model="state.param[item.field]" />
+        </div>
+      </template>
+    </div>
+    <div ui-hide="<pad" class="mr-sl-sub my-sm-sub nowrap">
+      <IFollowView tipBoxClass="nr-no">
+        <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
+        <template v-if="state.limit.length" #tips>
+          <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+            <div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
+              <label ui-form="@a type:checkbox" class="ny-xs nx-sm">
+                <input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
+                <span>{{ item.label }}</span>
+              </label>
+            </div>
+          </div>
+        </template>
+      </IFollowView>
+      <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+    </div>
+  </div>
+  <div ui-hide=">mob" class="mr-sl-sub my-sm-sub nowrap">
+    <IFollowView tipBoxClass="nr-no">
+      <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
+      <template v-if="state.limit.length" #tips>
+        <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+          <div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
+            <label ui-form="@a type:checkbox" class="ny-xs nx-sm">
+              <input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
+              <span>{{ item.label }}</span>
+            </label>
+          </div>
+        </div>
+      </template>
+    </IFollowView>
+    <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, reactive, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { IFollowView } from '../../basic';
+  import { Input, Select, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
+  const route = useRoute();
+
+  // 外部数据
+  const props: any = defineProps({
+    words: {
+      type: Object,
+      default: () => ({})
+    },
+    limit: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    param: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  // 内部数据
+  const state: any = reactive({
+    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+    limit: computed(() => {
+      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      return (props.limit || [])?.map((item: any) => {
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_view')) {
+          item._view = _cache[item.field]?._view;
+        } else {
+          if (item.view === true || item.view === 1 || item.view === 'always') {
+            item._view = 1;
+          }
+        }
+        return item;
+      });
+    }),
+    param: {}
+  });
+  watch(
+    [() => state.limit],
+    () => {
+      const _limit: any = {};
+      state.limit.forEach((item: any, idx: number) => {
+        if (Object.prototype.hasOwnProperty.call(item, '_view')) {
+          _limit[item.field] = { _view: item._view ? 1 : 0 };
+          if (!item._view) {
+            delete state.param[item.field];
+          }
+        }
+      });
+      localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.param,
+    () => {
+      state.param = props.param;
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 重置筛选
+  const fResetLimit = () => {
+    for (const key in state.param) {
+      if (key !== 'page' && key !== 'pageSize') {
+        delete state.param[key];
+      }
+    }
+  };
+</script>

package/src/components/loader/LimitLoader/LimitLoader@v2.vue.backup

@@ -0,0 +1,174 @@
+<template>
+  <div class="full-x" ui-flex="row xt">
+    <div ui-flex="row lm :wrap" class="mr-mm-sub my-sm-sub">
+      <template v-for="(item, idx) in state.limit" :key="idx">
+        <div v-if="item._view" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">
+          <span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
+          <Select sz="s" v-if="item.model[0] === 'Select'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
+          <Cascader sz="s" v-else-if="item.model[0] === 'Cascader'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
+          <MoreSelect sz="s" v-else-if="item.model[0] === 'MoreSelect'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
+          <SearchMoreSelect sz="s" v-else-if="item.model[0] === 'SearchMoreSelect'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
+          <DatePicker
+            v-else-if="item.model[0] === 'DatePicker'"
+            sz="s"
+            v-model="state.param[item.field]"
+            @change="(val:any) => (state.param[item.field] = val)"
+            v-bind="{ ...(item.model[1] || {}) }"
+          />
+          <DateRangePicker
+            v-else-if="item.model[0] === 'DateRangePicker'"
+            sz="s"
+            v-model="state.param[item.field]"
+            @change="(val:any) => (state.param[item.field] = val)"
+            v-bind="{ ...(item.model[1] || {}) }"
+          />
+          <Input sz="s" v-else :block="false" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
+        </div>
+      </template>
+    </div>
+    <div ui-hide="<pad" class="mr-sl-sub my-sm-sub nowrap">
+      <IFollowView tipBoxClass="nr-no">
+        <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
+        <template v-if="state.limit.length" #tips>
+          <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+            <div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
+              <label ui-form="@a type:checkbox" class="ny-xs nx-sm">
+                <input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
+                <span>{{ item.label }}</span>
+              </label>
+            </div>
+          </div>
+        </template>
+      </IFollowView>
+      <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+    </div>
+  </div>
+  <div ui-hide=">mob" class="mr-sl-sub my-sm-sub nowrap">
+    <IFollowView tipBoxClass="nr-no">
+      <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
+      <template v-if="state.limit.length" #tips>
+        <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+          <div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
+            <label ui-form="@a type:checkbox" class="ny-xs nx-sm">
+              <input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
+              <span>{{ item.label }}</span>
+            </label>
+          </div>
+        </div>
+      </template>
+    </IFollowView>
+    <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, reactive, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { isString } from '@fekit/utils';
+  import { IFollowView } from '../../basic';
+  import { Input, Select, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
+  const route = useRoute();
+
+  /**
+   * 入参说明
+   *
+   * words          语言包
+   * limit          结构配置
+   * param          数据
+   */
+
+  interface LimitProps {
+    label?: string | (() => string);
+    field: 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);
+    close?: boolean;
+  }
+
+  // 类型
+  interface Props {
+    words?: { [key: string | number]: any };
+    limit: Array<LimitProps>;
+    param: any;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    words: () => ({}),
+    limit: () => [],
+    param: () => ({})
+  });
+
+  // 内部数据
+  const state: any = reactive({
+    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+    limit: computed(() => {
+      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      return (props.limit || [])?.map((item: any) => {
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_view')) {
+          item._view = _cache[item.field]?._view;
+        } else {
+          if (item.view === true || item.view === 1 || item.view === 'always') {
+            item._view = 1;
+          }
+        }
+
+        // 模型处理
+        if (item.model) {
+          if (isString(item.model)) {
+            item.model = [item.model, { verify: false }];
+          }
+        } else {
+          item.model = ['Input', { verify: false }];
+        }
+
+        // 属性处理
+        if (item.model[1].class) {
+          if (!/\bw-[sml]+/.test(item.model[1].class || '')) {
+            item.model[1].class += ' w-mm';
+          }
+        } else {
+          item.model[1].class = 'w-mm';
+        }
+
+        return item;
+      });
+    }),
+    param: {}
+  });
+  watch(
+    [() => state.limit],
+    () => {
+      const _limit: any = {};
+      state.limit.forEach((item: any, idx: number) => {
+        if (Object.prototype.hasOwnProperty.call(item, '_view')) {
+          _limit[item.field] = { _view: item._view ? 1 : 0 };
+          if (!item._view) {
+            delete state.param[item.field];
+          }
+        }
+      });
+      localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => props.param,
+    () => {
+      state.param = props.param;
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 重置筛选
+  const fResetLimit = () => {
+    for (const key in state.param) {
+      if (key !== 'page' && key !== 'pageSize') {
+        delete state.param[key];
+      }
+    }
+  };
+</script>