@neatui/nuxt 0.1.0 → 1.0.0

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

@@ -1,80 +1,70 @@
 <template>
   <div class="full" ui-scroll=":x :y">
     <!-- 桌面端 -->
-    <table ui-hide="<pad" ui-table="@b sz:l" ref="tableRef">
+    <table ui-hide="<pad" :ui-table="theme" 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 v-if="selected" min-width col-fixed="1">
+            <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="all" /><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 v-if="!col.__close" :min-width="col.fixed" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
+              <slot :name="`thead-${col.field}`" :col="col" :idx="idx">
+                <div :class="!slots.operate && idx === state.__last ? 'ar' : ''" v-bind="col.thead">
+                  <span class="ux-none" ui-flex="row rm" v-if="col.order === 0 || col.order === 1 || col.order === 2" @click="fSetOrder(col)">
+                    <span>{{ col.label }}</span>
+                    <span ui-btn="@a none xs :square" :ui-order="`@a ${col.__order}`"></span>
+                  </span>
+                  <span v-else>{{ col.label }}</span>
+                  <!-- 设置 -->
+                  <IFollowView v-if="!slots.operate && idx === state.__last" tipBoxClass="n-no">
+                    <button :ui-btn="`@a none xs :square`">
+                      <Icon name="tableloader-setting" class="co-read"></Icon>
+                    </button>
+                    <template #tips>
+                      <div class="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
+                        <IDraggable v-model:lists="state.table">
+                          <template #default="{ item: element, idx: 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"></i>
+                                </span>
+                              </label>
+                            </div>
+                          </template>
+                        </IDraggable>
+                      </div>
+                    </template>
+                  </IFollowView>
+                </div>
+              </slot>
             </th>
           </template>
-          <th v-if="slots.operate" col-fixed="r" class="fs-xs nowrap ar">
+          <th v-if="slots.operate" col-fixed="r" class="fs-ss 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>
+              <span>{{ words['operate'] || '操作' }}</span>
+              <IFollowView v-if="tools" class="lh-xs" tipBoxClass="n-no">
+                <button :ui-btn="`@a none xs :square`">
+                  <Icon name="tableloader-setting" class="co-auto o-ls fs-xs"></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="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
+                    <IDraggable v-model:lists="state.table">
+                      <template #default="{ item: element, idx: 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" />
+                            <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>
+                              <i v-if="element.fixed" class="icon icon-fixed"></i>
                             </span>
                           </label>
                         </div>
                       </template>
-                    </draggable>
+                    </IDraggable>
                   </div>
                 </template>
               </IFollowView>
@@ -85,20 +75,19 @@
       <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>
+            <td v-if="selected" 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">
+            <template v-for="(col, cid) in state.table" :key="cid">
               <td
-                v-if="!col._close"
-                :class="`${!slots.operate && idx === state._last ? 'ar' : ''}`"
+                v-if="!col.__close"
+                :class="`${!slots.operate && cid === 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" />
+                <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableRender :node="col" :data="item" /></slot>
               </td>
             </template>
             <td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
@@ -108,51 +97,45 @@
     </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>
+      <ul>
+        <li class="bg-fore r-sm my-sl nx-ms ny-sl" ui-flex="row xm">
+          <div>
+            <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="all" /><span>全选</span></label>
+          </div>
+          <div>
+            <IFollowView>
+              <button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
+              <template #tips>
+                <IDraggable v-model:lists="state.table">
+                  <template #default="{ item: element, idx: 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>
-                </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>
+                </IDraggable>
+              </template>
+            </IFollowView>
+          </div>
+        </li>
+        <li v-for="(item, idx) in lists" :key="idx" class="bg-fore r-sm my-sl n-ms">
+          <table>
+            <tbody>
+              <template v-for="(col, idx) in state.table" :key="idx">
+                <tr v-if="!col.__close">
+                  <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                  <td class="n-ss">
+                    <TableRender :node="col" :data="item" />
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <div v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></div>
+        </li>
+      </ul>
     </div>
     <div v-if="!lists.length" class="ny-ls o-mm" ui-flex="col cm">
       <div class="ac">
@@ -165,122 +148,167 @@
 <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 IDraggable from '../../basic/IDraggable.vue';
   import { IFollowView, Icon } from '../../basic';
   import { itable } from '@fekit/itable';
-  import TableColView from './TableColView.vue';
-  import { isFunction, isObject, deepcopy } from '@fekit/utils';
+  import TableRender from './TableRender.vue';
+  import { isFunction, isObject, hasOwnProp, deepcopy } from '@fekit/utils';
+
   const route = useRoute();
   const router = useRouter();
   // 外部插槽
   const slots: any = useSlots();
   // 外部方法
-  const emits = defineEmits(['update:table', 'onsort', 'refresh']);
+  const emits = defineEmits(['update:allSelected', 'order', '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>);
+    width?: string | (() => string);
+    fixed?: string | (() => string);
+    paths?: string | (() => string);
+    thead?: Record<string, any> | ((data: any) => Record<string, any>);
+    tbody?: Record<string, any> | ((data: any) => Record<string, any>);
+    model?: string | any[] | ((data: any) => string | any[]);
+    enums?: any[] | ((data: any) => any[]);
+    rules?: any[] | ((data: any) => any[]);
+    event?: Record<string, any> | ((data: any) => Record<string, any>);
+    attrs?: Record<string, any> | ((data: any) => Record<string, any>);
     value?: any | (() => any);
     clear?: boolean | (() => boolean);
-    sort?: boolean | (() => boolean);
+    order?: 0 | 1 | 2 | number | (() => 0 | 1 | 2 | number);
   }
+  // 表格列（在 JSONRules 基础上的运行时扩展字段）
+  type TableColumn = JSONRules & {
+    __close?: number | boolean;
+    __order?: 0 | 1 | 2 | number;
+    __sort?: number;
+    close?: boolean | number | 'always';
+    fixed?: string | number;
+    thead?: any;
+    field: any;
+    label: any;
+  };
   interface Props {
     words?: { [key: string]: any };
     table: Array<JSONRules>;
     lists: Array<any>;
-    showSelectAll?: boolean;
+    selected?: boolean;
+    tools?: boolean;
+    theme?: string;
     rows?: {
       attrs?: { [key: string]: any };
       event?: { [key: string]: any };
     };
+    allSelected?: boolean;
   }
   // 外部入参
   const props: any = withDefaults(defineProps<Props>(), {
     words: () => ({}),
     table: () => [],
     lists: () => [],
-    showSelectAll: true,
-    rows: () => ({ attrs: {}, event: {} })
+    selected: true,
+    tools: true,
+    rows: () => ({ attrs: {}, event: {} }),
+    theme: '@b sz:l',
+    allSelected: false,
   });
 
   // 内部数据
-  const state: any = reactive({
-    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
+  const state = reactive<{
+    load: number;
+    tool: number;
+    table: TableColumn[];
+    param: Record<string, any>;
+    __last: number;
+  }>({
     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: [],
+    table: [] as TableColumn[],
     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,
+  });
+
+  const name = computed(() => 'confs' + route.path?.replace(/\//g, '_')) || '';
+
+  // 全选状态
+  const all = computed({
+    get() {
+      return props.lists.every((item: any) => item.__selected === true);
+    },
+    set(value: boolean) {
+      props.lists.forEach((item: any) => {
+        item.__selected = value;
       });
-    }),
-    // 最后一列可见列
-    last: 0
+    },
   });
 
+  // 向内同步
+  watch(
+    () => props.allSelected,
+    (v) => {
+      all.value = v;
+    },
+    { immediate: true },
+  );
+  // 向外同步
+  watch(
+    () => all.value,
+    (v) => {
+      emits('update:allSelected', v);
+    },
+  );
+
+  // 前置处理
   watch(
     () => props.table,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
-      state._last = 0;
+      const _cache = JSON.parse(localStorage.getItem(`${name}_table`) || '{}');
+      state.__last = 0;
       state.table = deepcopy(props.table || [])
-        ?.map((item: any, idx: number) => {
+        ?.map((col: TableColumn, idx: number) => {
+          // 标题处理
+          if (isFunction(col.label)) {
+            col.label = col.label(props.lists);
+          }
+
+          // 表头属性处理
+          col.thead ??= {};
+          col.thead.class = (col.thead.class || '').split(/\s+/);
+          if (!col.thead.class.some((c: any) => c === 'wrap' || c === 'nowrap')) {
+            col.thead.class.push('nowrap');
+          }
+          // 如果没有以 fs- 开头的类，就加 fs-ss
+          if (!col.thead.class.some((c: string) => /^fs-/.test(c))) {
+            col.thead.class.push('fs-ss');
+          }
+
           // 缓存的显示信息
-          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
-            item._close = _cache[item.field]?._close;
+          if (_cache[col.field] && hasOwnProp(_cache[col.field], '__close')) {
+            col.__close = _cache[col.field]?.__close;
           } else {
-            if (item.close === true || item.close === 1 || item.close === 'always') {
-              item._close = 1;
+            if (col.close === true || col.close === 1 || col.close === 'always') {
+              col.__close = 1;
             }
           }
-          // 缓存的排序信息
-          if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_sort')) {
-            item._sort = _cache[item.field]?._sort;
+          // 获取缓存的表格列顺序（注意不是数据记录的排序）
+          if (_cache[col.field] && hasOwnProp(_cache[col.field], '__sort')) {
+            col.__sort = _cache[col.field]?.__sort;
           }
-          if (!item._close) {
-            state._last = idx;
+
+          // 获取本地存储的字段升降序（注意不是表格列的顺序）
+          if (col.order === 0 || col.order === 1 || col.order === 2 || (_cache[col.field] && hasOwnProp(_cache[col.field], '__order'))) {
+            col.__order = _cache[col.field]?.__order || col.order;
+          }
+
+          // 最后一列可见列
+          if (!col.__close) {
+            state.__last = idx;
           }
-          return item;
+          return col;
         })
-        .sort((a: any, b: any) => a._sort - b._sort)
+        .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 || '';
@@ -290,35 +318,33 @@
     },
     {
       deep: true,
-      immediate: 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;
+      state.__last = 0;
+      state.table.forEach((col: any, idx: number) => {
+        _table[col.field] = { __sort: idx };
+        if (hasOwnProp(col, '__close')) {
+          _table[col.field].__close = col.__close ? 1 : 0;
+        }
+        if (hasOwnProp(col, '__order')) {
+          _table[col.field].__order = col.__order;
         }
-        if (!item._close) {
-          state._last = idx;
+        if (!col.__close) {
+          state.__last = idx;
         }
       });
-      console.log(338);
-      localStorage.setItem(`${state.name}_table`, JSON.stringify(_table));
+      localStorage.setItem(`${name}_table`, JSON.stringify(_table));
     },
-    { deep: true }
+    { deep: true },
   );
 
-  // 全选
-  const fSelectAll = ({ target = {} }: any = {}) => {
-    props.lists.map((item: any = {}) => {
-      item.__selected = target.checked;
-    });
-  };
   const tableRef: any = ref(null);
   onMounted(() => {
     nextTick(() => {
@@ -334,14 +360,20 @@
         itable.listen(tableRef.value);
       });
     },
-    {
-      deep: true
-    }
+    { deep: true },
   );
   onUnmounted(() => {
     itable.remove();
   });
 
+  // 设置字段升降序
+  const fSetOrder = (col: any) => {
+    const all = state.table.filter((i: any) => i.__order && i.field !== col.field).map((i: any) => ({ field: i.field, order: i.__order }));
+    col.__order = col.__order = (col.__order + 1) % 3;
+    all.unshift({ field: col.field, order: col.__order });
+    emits('order', { field: col.field, order: col.__order }, all);
+  };
+
   // 事件处理
   const event: any = (event: any, data: any): object => {
     const _event: any = {};