@neatui/nuxt 0.1.0

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

@@ -0,0 +1,277 @@
+<template>
+  <div class="flex-block pr">
+    <template v-if="mode === 'view'">
+      <slot :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+      </slot>
+    </template>
+    <template v-else>
+      <el-input v-if="node.model[0] === 'Input'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
+      <el-input v-if="node.model[0] === 'TextArea'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }" @input="setInteracted" @blur="setInteracted" />
+      <el-select v-else-if="node.model[0] === 'Select'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+        <el-option v-for="item in node.enums" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
+      <el-radio-group v-else-if="node.model[0] === 'Radio'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+        <el-radio v-for="item in node.enums" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
+      </el-radio-group>
+      <el-checkbox-group v-else-if="node.model[0] === 'Checkbox' && node.enums" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+        <el-checkbox v-for="item in node.enums" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
+      </el-checkbox-group>
+      <el-checkbox v-else-if="node.model[0] === 'Checkbox'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-checkbox>
+      <el-switch v-else-if="node.model[0] === 'Switch'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-switch>
+      <el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-select>
+      <el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-picker>
+      <el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
+      <el-date-picker v-else-if="node.model[0] === 'DateTimePicker'" v-model="value" type="datetime" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
+      <el-cascader v-else-if="node.model[0] === 'Cascader'" v-model="value" :options="node.enums" v-bind="{ ...node.model[1] }" @input="setInteracted" @blur="setInteracted"></el-cascader>
+      <gallery-value v-else-if="node.model[0] === 'SelectImg'" :form="data" :node="node" v-bind="{ ...node.model[1] }"></gallery-value>
+      <!-- 自定义组件插槽 -->
+      <slot v-else-if="node.model[0]" :name="node.model[0]" :data="data" :node="node" :bind.sync="bind"></slot>
+      <!-- 自定义字段插槽 -->
+      <slot v-else :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+      </slot>
+      <p v-show="error.verify === 'no'" class="form-loader-verify" :data-verify-type="error.co">{{ error.tips }}</p>
+    </template>
+  </div>
+</template>
+<script>
+  import { isFunction, findEnumName } from '@fekit/utils';
+  import GalleryValue from '@/common/galleryValue';
+
+  export default {
+    components: { GalleryValue },
+    props: {
+      mode: {
+        type: String,
+        default: 'edit'
+      },
+      node: {
+        type: Object,
+        default: () => ({})
+      },
+      data: {
+        type: Object,
+        default: () => ({})
+      },
+      interacted: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        _interacted: false,
+        bind: {
+          value: null
+        },
+        error: {}
+      };
+    },
+    created() {},
+    computed: {
+      value: {
+        get() {
+          let _value = this.node?.value || null;
+          if (_value) {
+            if (isFunction(_value)) {
+              _value = _value(this.data, this.data[this.node.field], this.node);
+            }
+          } else {
+            if (this.node.field) {
+              _value = this.data[this.node.field];
+            }
+          }
+          if (_value && this.node.enums) {
+            _value = findEnumName(this.node.enums, _value);
+          }
+          return _value;
+        },
+        set(value) {
+          const _value = this.node.value;
+          if (_value) {
+            if (isFunction(_value)) {
+              this.$set(this.data, this.node.field, _value(this.data, value, this.node));
+            } else {
+              this.$set(this.data, this.node.field, value);
+            }
+          } else {
+            this.$set(this.data, this.node.field, value);
+          }
+          this.validate();
+        }
+      }
+    },
+    methods: {
+      async validate() {
+        if (this._interacted) {
+          // 提示文案
+          let tips = '';
+          // 错误类型
+          let type = '';
+          // 验证结果
+          let verify = '';
+          const value = this.data[this.node.field];
+          if (`${value}`) {
+            // 有值
+            let _err = false;
+            // 遍历校验规则
+            for (const rule of this.node.rules) {
+              if (rule && rule.validator) {
+                const yes = !(await rule.validator(value));
+                if (yes) {
+                  tips = rule.message;
+                  type = rule.type;
+                  _err = true;
+                  break;
+                }
+              }
+            }
+            verify = _err ? 'no' : 'ok';
+            // console.log(91);
+          } else {
+            // console.log(92);
+            // 无值
+            let _err = false;
+            // 遍历校验规则
+            for (const rule of this.node.rules) {
+              if (rule) {
+                tips = rule.message;
+                type = rule.type;
+                if (rule.required) {
+                  _err = true;
+                  break;
+                }
+              }
+            }
+            verify = _err ? 'no' : '';
+          }
+          if (verify !== 'no' && this.tips) {
+            tips = this.tips;
+          }
+          // 是否显示提示
+          const ontips = (verify === 'no' && tips) || this.tips ? 'show' : '';
+          // 状态颜色
+          const co = verify === 'no' ? 'co:' + type : this.co ? 'co:' + this.co : '';
+          this.error = { tips, ontips, verify, co };
+        } else {
+          this.error = { tips: this.tips, ontips: this.tips ? 'show' : '', verify: '', co: '' };
+        }
+      },
+      setInteracted() {
+        // 用户交互
+        if (!this._interacted) {
+          setTimeout(() => {
+            this._interacted = true;
+            this.validate();
+          }, 50);
+        }
+      }
+    },
+    watch: {
+      bind: {
+        handler(bind) {
+          let value = bind.value;
+          const run = this.node.value;
+          if (run) {
+            if (isFunction(run)) {
+              value = run(value);
+            } else {
+              value = run;
+            }
+          }
+          this.$set(this.data, this.node.field, value);
+          this.$set(this.bind, 'value', value);
+        },
+        deep: true
+      },
+      interacted: {
+        handler(val) {
+          this._interacted = val;
+          this.validate();
+        },
+        deep: true
+      },
+      value: {
+        handler() {
+          this.validate();
+        },
+        deep: true
+      }
+    }
+  };
+</script>
+<style>
+  .form-loader .flex-block {
+    overflow: unset !important;
+  }
+
+  .form-loader-verify {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    background: #f95850;
+    color: #fff;
+    padding: 0.2em 0.5em;
+    font-size: 0.8em;
+    border-radius: 0.3em;
+    margin-bottom: 0.3em;
+    opacity: 0.9;
+    z-index: 1;
+  }
+  .form-loader-verify[data-verify-type~='co:warn'] {
+    background: #fb9a2a;
+  }
+  .form-loader-verify::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border: 3px solid transparent;
+    border-top-color: #f95850;
+    bottom: -6px;
+    left: 0.7em;
+  }
+  .form-loader-verify[data-verify-type~='co:warn']::before {
+    border-top-color: #fb9a2a;
+  }
+
+  .form-loader .el-radio__label,
+  .form-loader .el-checkbox__label {
+    font-size: 12px;
+    padding-left: 4px;
+  }
+  .form-loader .el-textarea__inner {
+    height: auto;
+  }
+
+  .form-loader .el-select,
+  .form-loader .el-cascader {
+    display: block;
+  }
+  .form-loader .el-radio-group {
+    margin-top: 6px;
+  }
+  .form-loader .el-radio,
+  .form-loader .el-checkbox {
+    font-weight: normal;
+    color: #0e255a;
+  }
+  .form-loader .el-switch,
+  .form-loader .el-checkbox {
+    margin-top: 4px;
+  }
+  .form-loader .el-radio__label {
+    font-size: 12px;
+    padding-left: 4px;
+  }
+  .form-loader .el-checkbox__label {
+    font-size: 12px;
+    padding-left: 4px;
+  }
+
+  .form-loader .el-date-editor .el-range-separator {
+    line-height: 20px;
+  }
+</style>

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>