@neatui/nuxt 0.1.0

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="full-x" ui-flex="row xt">
+    <div class="mr-mm-sub my-sm-sub" ui-flex="row lm :wrap">
+      <template v-for="(item, idx) in state.limit" :key="idx">
+        <div v-if="!item._close" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">
+          <span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
+          <Input v-if="item.model[0] === 'Input'" v-model="state.param[item.field]" :block="false" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <Select v-else-if="item.model[0] === 'Select'" v-model="state.param[item.field]" :options="item.enums" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <SelectTree v-else-if="item.model[0] === 'SelectTree'" v-model="state.param[item.field]" :options="item.enums" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <Cascader v-else-if="item.model[0] === 'Cascader'" v-model="state.param[item.field]" :options="item.enums" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <MoreSelect v-else-if="item.model[0] === 'MoreSelect'" v-model="state.param[item.field]" :options="item.enums" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <SearchMoreSelect v-else-if="item.model[0] === 'SearchMoreSelect'" v-model="state.param[item.field]" :options="item.enums" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <DatePicker
+            v-else-if="item.model[0] === 'DatePicker'"
+            v-model="state.param[item.field]"
+            sz="s"
+            v-bind="{ ...(item.model[1] || {}) }"
+            @change="(val: any) => (state.param[item.field] = val)"
+          />
+          <DateRangePicker v-else-if="item.model[0] === 'DateRangePicker'" v-model="state.param[item.field]" sz="s" v-bind="{ ...(item.model[1] || {}) }" />
+          <slot v-else :name="item.field" :form="item" :data="param"></slot>
+        </div>
+      </template>
+    </div>
+    <div class="mr-sl-sub my-sm-sub nowrap" ui-hide="<pad">
+      <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" :key="idx" class="item ux-hover nowrap r-ss">
+              <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
+                <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 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 class="mr-sl-sub my-sm-sub nowrap" ui-hide=">mob">
+    <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" :key="idx" class="item ux-hover nowrap r-ss">
+            <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
+              <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 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 lang="ts" setup>
+  import { computed, reactive, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { deepcopy, isObject, isString } from '@fekit/utils';
+  import { IFollowView } from '../../basic';
+  import { Input, Select, SelectTree, 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: [],
+    param: {}
+  });
+  // 监听外部配置
+  watch(
+    () => props.limit,
+    () => {
+      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      state.limit = deepcopy(props.limit)?.map((item: any) => {
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
+          item._close = Number(_cache[item.field]?._close);
+        } else {
+          if (item.close === true || item.close === 1) {
+            item._close = 1;
+          }
+        }
+
+        // 模型处理
+        if (item.model) {
+          if (isString(item.model)) {
+            item.model = [item.model, { verify: false }];
+          }
+        } else {
+          item.model = ['', { verify: false }];
+        }
+
+        if (!item.model[1] || !isObject(item.model[1])) {
+          item.model.push({ verify: false });
+        }
+
+        // 属性处理
+        if (item.model[1].class) {
+          if (!/\bw-[sml]+/.test(item.model[1].class || '')) {
+            item.model[1].class += ' w-ms+';
+          }
+        } else {
+          item.model[1].class = 'w-ms+';
+        }
+
+        return item;
+      });
+    },
+    { deep: true, immediate: true }
+  );
+  // 缓存交互配置
+  watch(
+    [() => state.limit],
+    () => {
+      const _limit: any = {};
+      state.limit.forEach((item: any, idx: number) => {
+        if (Object.prototype.hasOwnProperty.call(item, '_close')) {
+          _limit[item.field] = { _close: item._close ? 1 : 0 };
+          if (item._close) {
+            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/index.ts

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

package/src/components/loader/TableLoader/TableColView.vue

@@ -0,0 +1,115 @@
+<template>
+  <template v-if="isArray(json.child)">
+    <div :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" v-bind="json.attrs" v-on="event(json, data)">
+      <TableColView v-for="(sub, idx) in col.child" :key="idx" :col="sub" :data="data" />
+    </div>
+  </template>
+  <template v-else-if="json.popup">
+    <IFollowView>
+      <TableColView :col="{ ...col, popup: null }" :data="data" />
+      <template #tips>
+        <TableColView :col="isFunction(col.popup) ? col.popup(data) : col.popup" :data="data" />
+      </template>
+    </IFollowView>
+  </template>
+  <template v-else>
+    <div v-if="json.model === 'Image'" :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'" ui-img="@a read :round" v-bind="json.attrs" v-on="event(json, data)">
+      <img :src="json.value || data[json.field] || DefaultImage" alt="" />
+    </div>
+    <div
+      v-else
+      :class="json?.attrs?.class?.includes('wrap') ? 'wrap' : 'nowrap'"
+      v-bind="json.attrs"
+      v-on="event(json, data)"
+      v-html="
+        json.value !== null && json.value !== undefined
+          ? isFunction(json.value)
+            ? json.value(json)
+            : json.value
+          : findEnumName(json.enums, data[json.field]) !== null && findEnumName(json.enums, data[json.field]) !== undefined
+            ? findEnumName(json.enums, data[json.field])
+            : '‐‐'
+      "
+    ></div>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { isFunction, isArray, isObject, deepcopy } from '@fekit/utils';
+  import { useRoute, useRouter } from 'vue-router';
+  import TableColView from './TableColView.vue';
+  import { IFollowView } from '../../basic';
+
+  const DefaultImage =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAACmBAMAAACipulEAAAAHlBMVEXMzMz////z8/Pf39/Z2dnS0tLq6urk5OTu7u74+PjCLuPVAAABxUlEQVRo3u2YsUsDMRSHX9Wzupn22qObVxAd7SCuV1BwvGrVtQcqjlYQHFVEVzv575qklReE9urlFTL8vqUvQz+Se3m5yyMAAAAAAAAAAAAAsFIu7rvz+DiqprxSi7itotxQi8kqOHslzqbHNAUnul3q/PJYutzi01Jn47/KSBm+jxep8yopSojqgklaV5qRDor5zsMKTru4gazTJmEtfKcyQU3Waf/UE3bGXPb7p5fDRwmnuhkWyvJEhmt/JzOiKZtyzph+6Us5O1zY0UTI2TKy5+4nl5W/M9PpT00NmEDG2dbDgiMR5w7R1ix84brycz7oyfGU6yLO3HmIGUUSzoY9m3jxqYAzsRuIt9VYwBm7Z1OTB57Owt1XfQFn649zEOg8YzctiYyz6Wpizxzxcmtunb5K1JGtR65TkdrMiCazsMOHnZ9zlx9ozHXq5XTfyBnr/ZwdPTy30Z6OJr5OfhOf6d934tPZ15mQJjrJSVN4O3mi/NEg5GzkNCVKBZy8estYeTuZdmbuDYWScDIHd29KSTmZEJ26GsUvxpEqJw/gDrvMXTuInsASvYsgeizlvaBAelZlvTUAAAAAAAAAAAAAsEp+AEDOpCBEwOONAAAAAElFTkSuQmCC';
+
+  // 通过枚举值查找枚举名
+  const findEnumName = (enums: any, val: any, join: boolean | string = ' Ι ') => {
+    // 转换核心
+    const _core = (v: any) => {
+      const { label = v }: any = enums.find(({ value = '' }: any) => value == v) || {};
+      return label;
+    };
+    // 判断枚举字典是否可用
+    if (enums && enums.find) {
+      // 兼容多种入参类型
+      if (isArray(val)) {
+        // 数组
+        const arr = val.map((i: any) => _core(i));
+        return join ? arr.join(join) : arr;
+      } else {
+        return _core(val);
+      }
+    } else {
+      return val;
+    }
+  };
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const props: any = defineProps({
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    data: {
+      type: [Object],
+      default: () => ({})
+    }
+  });
+
+  // 运行函数计算
+  const runfun = (obj: any): any => {
+    if (isArray(obj)) {
+      obj = obj.map((i: any) => runfun(i));
+    } else if (isObject(obj)) {
+      for (const k in obj) {
+        if (k !== 'event') {
+          obj[k] = runfun(obj[k]);
+        }
+      }
+    } else if (isFunction(obj)) {
+      obj = obj(deepcopy(props.data));
+    }
+    return obj;
+  };
+
+  const json = computed(() => runfun(deepcopy(props.col)));
+
+  // 事件处理
+  const event: any = (col: any, data: any): object => {
+    const _event: any = {};
+    if (isObject(col.event)) {
+      for (const key in col.event) {
+        const fun = col.event[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args: any) => {
+            return fun({ data, route, router }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
+</script>

package/src/components/loader/TableLoader/TableLoader.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="full" ui-scroll=":x :y">
+    <!-- 桌面端 -->
+    <table ui-hide="<pad" ui-table="@b sz:l" ref="tableRef">
+      <thead class="table-head-fixed">
+        <tr>
+          <th v-if="showSelectAll" col-fixed="1" min-width>
+            <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" :checked="state.isAllSelect" @change="fSelectAll" /><span></span></label>
+          </th>
+          <template v-for="(col, idx) in state.table" :key="idx">
+            <th v-if="!col._close" class="fs-xs nowrap" :min-width="col.fixed" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
+              <div :ui-flex="`row ${!slots.operate && idx === state._last ? 'rm' : 'lm'}`">
+                <span class="nl-xs" v-if="col.sort" :ui-sort="0" @click="emits('onsort', col)">{{ col.label }}</span>
+                <span class="nl-xs" v-else>{{ col.label }}</span>
+                <IFollowView v-if="!slots.operate && idx === state._last" tipBoxClass="n-no">
+                  <button :ui-btn="`@a none s :square`">
+                    <Icon name="tableloader-setting" class="co-read"></Icon>
+                  </button>
+                  <template #tips>
+                    <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
+                      <draggable
+                        v-model="state.table"
+                        :force-fallback="false"
+                        item-key="name"
+                        chosen-class="chosen"
+                        animation="200"
+                        filter=".forbid"
+                        :move="(e: any) => !e.relatedContext.element.fixed"
+                      >
+                        <template #item="{ element, index }">
+                          <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
+                            <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
+                              <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
+                              <span>
+                                {{ element.label }}
+                                <i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
+                              </span>
+                            </label>
+                          </div>
+                        </template>
+                      </draggable>
+                    </div>
+                  </template>
+                </IFollowView>
+              </div>
+            </th>
+          </template>
+          <th v-if="slots.operate" col-fixed="r" class="fs-xs nowrap ar">
+            <div ui-flex="row rm">
+              <span class="mr-sm">{{ words['operate'] || '操作' }}</span>
+              <IFollowView tipBoxClass="n-no">
+                <button :ui-btn="`@a none s :square`">
+                  <Icon name="tableloader-setting" class="co-read"></Icon>
+                </button>
+                <template #tips>
+                  <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
+                    <draggable
+                      v-model="state.table"
+                      :force-fallback="false"
+                      item-key="name"
+                      chosen-class="chosen"
+                      animation="200"
+                      filter=".forbid"
+                      :move="(e: any) => !e.relatedContext.element.fixed"
+                    >
+                      <template #item="{ element, index }">
+                        <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
+                          <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
+                            <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
+                            <span>
+                              {{ element.label }}
+                              <i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
+                            </span>
+                          </label>
+                        </div>
+                      </template>
+                    </draggable>
+                  </div>
+                </template>
+              </IFollowView>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody :ui-tbody-load="state.load">
+        <template v-if="lists.length">
+          <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item, 'td')">
+            <td v-if="showSelectAll" col-fixed="1" min-width>
+              <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
+            </td>
+            <template v-for="(col, idx) in state.table" :key="idx">
+              <td
+                v-if="!col._close"
+                :class="`${!slots.operate && idx === state._last ? 'ar' : ''}`"
+                :min-width="col.fixed"
+                :col-fixed="col.fixed"
+                :col-fixed-side="col.fixed || 'l'"
+                :data-field="col.field"
+              >
+                <slot v-if="slots[col.field]" :name="col.field"></slot>
+                <TableColView v-else :col="col" :data="item" />
+              </td>
+            </template>
+            <td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <!-- 移动端 -->
+    <div ui-hide=">mob">
+      <table class="n-sl" ui-table="@a">
+        <thead class="table-head-fixed">
+          <tr>
+            <th class="fs-xs ar ps nr-no">
+              <div ui-flex="row xm">
+                <span class="fs-xs bold">信息</span>
+                <IFollowView>
+                  <button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
+                  <template #tips>
+                    <draggable :list="state.table" :force-fallback="false" item-key="name" chosen-class="chosen" animation="200">
+                      <template #item="{ element, index }">
+                        <div class="item ux-hover nowrap r-ss" :key="index">
+                          <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
+                            <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
+                            <span>{{ element.label }}</span>
+                          </label>
+                        </div>
+                      </template>
+                    </draggable>
+                  </template>
+                </IFollowView>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody :ui-tbody-load="state.load">
+          <template v-if="lists.length">
+            <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item)">
+              <td ui-card="@a bk:line" class="mb-sl">
+                <div ui-card-body="" class="n-ss">
+                  <ul>
+                    <template v-for="(col, idx) in state.table" :key="idx">
+                      <li v-if="!col._close" :class="`${col.fixed ? 'ps z-sm' : ''}`" ui-flex="row lm">
+                        <div class="w-sl">{{ col.label }}:</div>
+                        <TableColView :col="col" :data="item" />
+                      </li>
+                    </template>
+                    <li v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></li>
+                  </ul>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="!lists.length" class="ny-ls o-mm" ui-flex="col cm">
+      <div class="ac">
+        <p><i class="icon icon-nodata fs-lm lh-ss"></i></p>
+        <p>{{ words['common.nodata'] || '暂无记录' }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, onMounted, reactive, watch, ref, nextTick, onUnmounted, useSlots } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import draggable from 'vuedraggable';
+  import { IFollowView, Icon } from '../../basic';
+  import { itable } from '@fekit/itable';
+  import TableColView from './TableColView.vue';
+  import { isFunction, isObject, deepcopy } from '@fekit/utils';
+  const route = useRoute();
+  const router = useRouter();
+  // 外部插槽
+  const slots: any = useSlots();
+  // 外部方法
+  const emits = defineEmits(['update:table', 'onsort', 'refresh']);
+
+  // 类型定义
+  interface JSONRules {
+    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);
+    sort?: boolean | (() => boolean);
+  }
+  interface Props {
+    words?: { [key: string]: any };
+    table: Array<JSONRules>;
+    lists: Array<any>;
+    showSelectAll?: boolean;
+    rows?: {
+      attrs?: { [key: string]: any };
+      event?: { [key: string]: any };
+    };
+  }
+  // 外部入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    words: () => ({}),
+    table: () => [],
+    lists: () => [],
+    showSelectAll: true,
+    rows: () => ({ attrs: {}, event: {} })
+  });
+
+  // 内部数据
+  const state: any = reactive({
+    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+    load: 0,
+    tool: 1,
+    mode: 0,
+    id: 0,
+    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], '_close')) {
+          item._close = _cache[item.field]?._close;
+        } else {
+          if (item.close === true || item.close === 1 || item.close === 'always') {
+            item._close = 1;
+          }
+        }
+        return item;
+      });
+    }),
+    table: [],
+    param: {},
+    // 列表是否全选
+    isAllSelect: computed(() => {
+      return (
+        props.lists.length &&
+        props.lists.every((item: any) => {
+          return item.__selected;
+        })
+      );
+    }),
+    // 列表是否有在选行
+    isHasSelect: computed(() => {
+      return props.lists.filter((item: any) => {
+        return item.__selected;
+      });
+    }),
+    bulk: computed(() => {
+      return props.isHasSelect.map((item: any) => {
+        return item.customerId;
+      });
+    }),
+    // 最后一列可见列
+    last: 0
+  });
+
+  watch(
+    () => props.table,
+    () => {
+      const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
+      state._last = 0;
+      state.table = deepcopy(props.table || [])
+        ?.map((item: any, idx: number) => {
+          // 缓存的显示信息
+          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
+            item._close = _cache[item.field]?._close;
+          } else {
+            if (item.close === true || item.close === 1 || item.close === 'always') {
+              item._close = 1;
+            }
+          }
+          // 缓存的排序信息
+          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_sort')) {
+            item._sort = _cache[item.field]?._sort;
+          }
+          if (!item._close) {
+            state._last = idx;
+          }
+          return item;
+        })
+        .sort((a: any, b: any) => a._sort - b._sort)
+        .sort((a: any, b: any) => {
+          const fixedOrder: any = { 1: -1, l: -1, r: 1 };
+          const aFixed = a.fixed || '';
+          const bFixed = b.fixed || '';
+          return (fixedOrder[aFixed] || 0) - (fixedOrder[bFixed] || 0);
+        });
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+  watch(
+    [() => state.table],
+    () => {
+      const _table: any = {};
+      state._last = 0;
+      state.table.forEach((item: any, idx: number) => {
+        _table[item.field] = { _sort: idx };
+        if (Object.prototype.hasOwnProperty.call(item, '_close')) {
+          _table[item.field]._close = item._close ? 1 : 0;
+        }
+        if (!item._close) {
+          state._last = idx;
+        }
+      });
+      console.log(338);
+      localStorage.setItem(`${state.name}_table`, JSON.stringify(_table));
+    },
+    { deep: true }
+  );
+
+  // 全选
+  const fSelectAll = ({ target = {} }: any = {}) => {
+    props.lists.map((item: any = {}) => {
+      item.__selected = target.checked;
+    });
+  };
+  const tableRef: any = ref(null);
+  onMounted(() => {
+    nextTick(() => {
+      if (tableRef.value) {
+        itable.listen(tableRef.value);
+      }
+    });
+  });
+  watch(
+    () => state.table,
+    () => {
+      nextTick(() => {
+        itable.listen(tableRef.value);
+      });
+    },
+    {
+      deep: true
+    }
+  );
+  onUnmounted(() => {
+    itable.remove();
+  });
+
+  // 事件处理
+  const event: any = (event: any, data: any): object => {
+    const _event: any = {};
+    if (isObject(event)) {
+      for (const key in event) {
+        const fun = event[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args: any) => {
+            return fun({ data, route, router }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
+</script>

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

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