@xmszm/core 0.0.4 → 0.0.6

package/src/table/DataTable.vue

@@ -1,154 +1,160 @@
 <script setup lang="tsx">
-import type { DataTableProps, DataTableExpose } from '../../types/components'
-import { ChevronDown, ChevronUp, Code, Funnel } from '@vicons/ionicons5'
-import { commonDialogMethod, toArray } from 'core'
-import { ellipsis } from 'core/table/utils/ellipsis'
-import dayjs from 'dayjs'
-import { uniqueId } from 'lodash-es'
-import { NButton, NTooltip } from 'naive-ui'
-import { computed, onMounted, ref, unref, watch ,isProxy, getCurrentInstance} from 'vue'
-import { useRoute } from 'vue-router'
-import FilterDialog from './FilterDialog.vue'
-import { orderEnum } from 'core'
-import { registerDirectives } from '../directives/auto-register'
-import {NDataTable} from 'naive-ui'
+import type { DataTableProps, DataTableExpose } from "../../types/components";
+import { ChevronDown, ChevronUp, Code, Funnel } from "@vicons/ionicons5";
+import { commonDialogMethod, toArray } from "core";
+import { ellipsis } from "core/table/utils/ellipsis";
+import dayjs from "dayjs";
+import { uniqueId } from "lodash-es";
+import { NButton, NTooltip } from "naive-ui";
+import {
+  computed,
+  onMounted,
+  ref,
+  unref,
+  watch,
+  isProxy,
+  getCurrentInstance,
+} from "vue";
+import { useRoute } from "vue-router";
+import FilterDialog from "./FilterDialog.vue";
+import { orderEnum } from "core";
+import { registerDirectives } from "../directives/auto-register";
+import { NDataTable, NEmpty } from "naive-ui";
 // 自动注册指令
-const instance = getCurrentInstance()
+const instance = getCurrentInstance();
 if (instance?.appContext?.app) {
-  registerDirectives(instance.appContext.app)
+  registerDirectives(instance.appContext.app);
 }
 
 const props = withDefaults(defineProps<DataTableProps>(), {
   data: () => [],
   pagination: undefined,
   columns: () => [
-      {
-        title: '测试案例',
-      },
-    ],
+    {
+      title: "测试案例",
+    },
+  ],
   oprColumns: null,
   selectColumns: null,
   defaultColumns: () => [],
   summaryColumns: null,
-  emptyText: '没有数据',
-  emptyIcon: '',
+  emptyText: "没有数据",
+  emptyIcon: "",
   isFilter: false,
   isEllipsis: true,
   virtual: () => ({}),
   singleColumn: false,
-})
-const route = useRoute()
-const FilterKey = 'filter_key'
+});
+const route = useRoute();
+const FilterKey = "filter_key";
 const emit = defineEmits<{
-  sorted: []
-}>()
+  sorted: [];
+}>();
 
 // 安全获取路由路径，如果没有路由上下文则使用默认值
 const getRoutePath = (): string => {
   try {
-    return route?.fullPath || route?.path || ''
+    return route?.fullPath || route?.path || "";
   } catch {
-    return ''
+    return "";
   }
-}
+};
 
 const _data = computed(() => {
-  console.log('table -data', props.data)
+  console.log("table -data", props.data);
 
-  return props.data
-})
+  return props.data;
+});
 function setHeadFilter(val: Record<string, any>): void {
-  window.localStorage.setItem(FilterKey, JSON.stringify(val))
+  window.localStorage.setItem(FilterKey, JSON.stringify(val));
 }
 
 function getHeadFilter(): Record<string, any> {
-  return JSON.parse(window.localStorage.getItem(FilterKey) || '{}') || {}
+  return JSON.parse(window.localStorage.getItem(FilterKey) || "{}") || {};
 }
 
-const getFilterAll = ref(getHeadFilter())
-const headDefault = ref([])
+const getFilterAll = ref(getHeadFilter());
+const headDefault = ref([]);
 
-const scrollX = ref(0)
+const scrollX = ref(0);
 
 function _summary(pageData: any[]): Record<string, { value: any }> | undefined {
-  if (!props.summaryColumns)
-    return
+  if (!props.summaryColumns) return;
   return [
     props.selectColumns,
     ...unref(props.columns || []),
     props.oprColumns,
   ]?.reduce((o: Record<string, { value: any }>, n: any) => {
     if (n?.key)
-      o[n.key] = props.summaryColumns?.(pageData)?.[n.key] || { value: null }
-    else o[uniqueId('table')] = { value: null }
-    return o
-  }, {})
+      o[n.key] = props.summaryColumns?.(pageData)?.[n.key] || { value: null };
+    else o[uniqueId("table")] = { value: null };
+    return o;
+  }, {});
 }
 
-const _columns = ref([])
+const _columns = ref([]);
 
 watch(
   () => unref(props.columns),
   () => {
-    init()
+    init();
   },
   {
     immediate: true,
-  },
-)
+  }
+);
 
 watch(
   () => props.oprColumns,
   (v) => {
-    console.log('oprColumns', v)
-  },
-)
+    console.log("oprColumns", v);
+  }
+);
 
 function init(): void {
-  const columns = unref(props.columns || [])
-  const routePath = getRoutePath()
-  headDefault.value
-    = (routePath && getFilterAll.value?.[routePath])
-      || columns?.map((v: any, i: number) => v?.key || String(dayjs().valueOf() + i))
+  const columns = unref(props.columns || []);
+  const routePath = getRoutePath();
+  headDefault.value =
+    (routePath && getFilterAll.value?.[routePath]) ||
+    columns?.map(
+      (v: any, i: number) => v?.key || String(dayjs().valueOf() + i)
+    );
 
   const arr: any[] = props.isFilter
     ? columns.filter((item: any) => headDefault.value?.includes(item.key))
-    : [...columns]
+    : [...columns];
   if (props.selectColumns)
-    arr.unshift({ key: 'selectKey', ...props.selectColumns })
-  if (props.oprColumns)
-    arr.push(props.oprColumns)
-  let scrollNum = 0
+    arr.unshift({ key: "selectKey", ...props.selectColumns });
+  if (props.oprColumns) arr.push(props.oprColumns);
+  let scrollNum = 0;
   _columns.value = arr.reduce((o: any[], obj: any) => {
-    if (obj?.display)
-      console.log('display', obj?.display)
-    if (!(obj?.display ?? true))
-      return o
+    if (obj?.display) console.log("display", obj?.display);
+    if (!(obj?.display ?? true)) return o;
     const v: any = {
-      'align': 'center',
-      'width': 120,
+      align: "center",
+      width: 120,
       ...obj,
-      'key': obj?.key || uniqueId('table'),
-      'ellipsis':
+      key: obj?.key || uniqueId("table"),
+      ellipsis:
         obj?.ellipsis || props.isEllipsis
           ? obj?.ellipsisProp
             ? obj?.ellipsisProp(ellipsis)
             : ellipsis
           : false,
-      'ellipsis-component': 'ellipsis',
-      'title': () => {
-        const title = obj?.label || obj?.title || ''
+      "ellipsis-component": "ellipsis",
+      title: () => {
+        const title = obj?.label || obj?.title || "";
         return (
-          <div style={{ width: '100%', whiteSpace: 'pre-wrap' }}>
-            {typeof title === 'string' ? title : title?.()}
+          <div style={{ width: "100%", whiteSpace: "pre-wrap" }}>
+            {typeof title === "string" ? title : title?.()}
           </div>
-        )
+        );
       },
-    }
+    };
 
     if (obj?.sorter) {
       v.renderSorterIcon = ({ order }: { order: string }) => {
-        const { Icon, title } = orderEnum[order as keyof typeof orderEnum]
+        const { Icon, title } = orderEnum[order as keyof typeof orderEnum];
         return (
           <NTooltip>
             {{
@@ -156,62 +162,62 @@ function init(): void {
               default: () => title,
             }}
           </NTooltip>
-        )
-      }
+        );
+      };
       v.sorter = {
         multiple: 1,
-        fn: obj.sorter
-      }
+        fn: obj.sorter,
+      };
     }
 
     scrollNum += v?.width
       ? Number.parseInt(String(v?.width))
-      : (typeof v?.title === 'string' ? v?.title?.length * 30 : 0) || 0
+      : (typeof v?.title === "string" ? v?.title?.length * 30 : 0) || 0;
 
-    o.push(v)
-    return o
-  }, [])
-  scrollX.value = scrollNum
-  console.log('计算')
+    o.push(v);
+    return o;
+  }, []);
+  scrollX.value = scrollNum;
+  console.log("计算");
 }
 
 function filterButton(): any {
   return (
     <NButton type="info" onClick={() => filterHandle()}>
       {{
-        default: () => '筛选字段',
+        default: () => "筛选字段",
         icon: () => <Funnel />,
       }}
     </NButton>
-  )
+  );
 }
 
 function filterHandle(): void {
   const { cancel } = commonDialogMethod(
     {
-      title: '筛选字段',
+      title: "筛选字段",
       read: true,
       options: [
         {
-          key: 'filter-dialog',
+          key: "filter-dialog",
           render: () => (
             <FilterDialog
               style={{
-                width: '100%',
-                margin: '0',
+                width: "100%",
+                margin: "0",
                 padding: 0,
               }}
               filterItem={unref(props.columns || [])}
               selectItem={headDefault.value}
               defaultItem={props.defaultColumns}
               onSubmit={(v: string[]) => {
-                const routePath = getRoutePath()
+                const routePath = getRoutePath();
                 if (routePath) {
-                  getFilterAll.value[routePath] = v
-                setHeadFilter(getFilterAll.value)
+                  getFilterAll.value[routePath] = v;
+                  setHeadFilter(getFilterAll.value);
                 }
-                init()
-                cancel()
+                init();
+                cancel();
               }}
             />
           ),
@@ -221,46 +227,45 @@ function filterHandle(): void {
     {
       closable: false,
       style: {
-        width: '500px',
+        width: "500px",
       },
-    },
-  )
+    }
+  );
 }
 
 function onSorter(e: any): void {
-  console.log('onSorter', e)
-  if (!e)
-    return
-  const sortArr = toArray(e)
+  console.log("onSorter", e);
+  if (!e) return;
+  const sortArr = toArray(e);
 
   sortArr.forEach((v: any) => {
-    console.log('v', v)
-    
+    console.log("v", v);
+
     if (v?.sorter) {
       v?.sorter?.fn?.(
         (listQuery: any, pageState: any, key: string) => {
-          orderEnum[v.order as keyof typeof orderEnum]?.fn(listQuery, key)
-        pageState.fetchData()
+          orderEnum[v.order as keyof typeof orderEnum]?.fn(listQuery, key);
+          pageState.fetchData();
         },
         {
-        field: v?.columnKey,
+          field: v?.columnKey,
           value: orderEnum[v?.order as keyof typeof orderEnum]?.value,
-          isClick: !isProxy(v)
+          isClick: !isProxy(v),
         }
-      )
+      );
     }
-  })
+  });
 
-  emit('sorted')
+  emit("sorted");
 }
 
 defineExpose<DataTableExpose>({
   filterHandle,
   filterButton,
   initColumns: init,
-})
+});
 
-onMounted(() => {})
+onMounted(() => {});
 </script>
 
 <template>
@@ -282,7 +287,7 @@ onMounted(() => {})
     <!-- props.data.length > 30 -->
     <template #empty>
       <slot name="empty">
-        <n-empty>{{ emptyText }}</n-empty>
+        <NEmpty>{{ emptyText }}</NEmpty>
       </slot>
     </template>
   </NDataTable>

package/src/table/FilterDialog.vue

@@ -1,11 +1,17 @@
 <script setup>
-import { useThemeVars } from 'naive-ui'
-import { ref, watchEffect } from 'vue'
+import {
+  useThemeVars,
+  NCheckboxGroup,
+  NCheckbox,
+  NButton,
+  NEllipsis,
+} from "naive-ui";
+import { ref, watchEffect } from "vue";
 
 const props = defineProps({
   type: {
     type: String,
-    default: () => 'primary',
+    default: () => "primary",
   },
   filterItem: {
     type: Array,
@@ -21,98 +27,97 @@ const props = defineProps({
   },
   filterButtonKey: {
     type: Array,
-    default: () => ['all', 'selectDefault'],
+    default: () => ["all", "selectDefault"],
     // default: () => ['all', 'selectDefault','currentSelect']
   },
-})
-const emit = defineEmits(['submit'])
-const theme = useThemeVars()
-const keySelect = ref([])
+});
+const emit = defineEmits(["submit"]);
+const theme = useThemeVars();
+const keySelect = ref([]);
 
 watchEffect(() => {
-  keySelect.value = props.selectItem
-})
-const filterButton = ref([])
+  keySelect.value = props.selectItem;
+});
+const filterButton = ref([]);
 const filterOprButton = [
   {
-    key: 'all',
-    label: '全选',
-    onCheck: () => (keySelect.value = props.filterItem?.map(v => v.key)),
+    key: "all",
+    label: "全选",
+    onCheck: () => (keySelect.value = props.filterItem?.map((v) => v.key)),
     unCheck: () => (keySelect.value = []),
   },
   {
-    key: 'selectDefault',
-    label: '选中默认',
+    key: "selectDefault",
+    label: "选中默认",
     onCheck: () => (keySelect.value = props.defaultItem),
     unCheck: () => (keySelect.value = props.selectItem),
   },
   {
-    key: 'currentSelect',
-    label: '选中当前列表',
+    key: "currentSelect",
+    label: "选中当前列表",
     onCheck: () => (keySelect.value = props.selectItem),
     unCheck: () => (keySelect.value = props.selectItem),
   },
-]
+];
 watchEffect(() => {
-  filterButton.value = filterOprButton.filter(v =>
-    props.filterButtonKey.includes(v.key),
-  )
-  console.log(props.filterButtonKey)
-})
+  filterButton.value = filterOprButton.filter((v) =>
+    props.filterButtonKey.includes(v.key)
+  );
+  console.log(props.filterButtonKey);
+});
 
 function onSubmit() {
-  emit('submit', keySelect.value)
+  emit("submit", keySelect.value);
 }
 
 const checkKey = ref(
-  props.filterItem?.length === props.selectItem?.length ? ['all'] : [],
-)
+  props.filterItem?.length === props.selectItem?.length ? ["all"] : []
+);
 
 function onCheckModel(string, meta) {
-  console.log(string)
-  console.log(meta)
-  if (meta.actionType === 'uncheck') {
-    filterButton.value?.find(v => v?.key === meta.value)?.unCheck()
-    checkKey.value = []
-  }
-  else {
-    filterButton.value?.find(v => v?.key === meta.value)?.onCheck()
-    checkKey.value = [meta.value]
+  console.log(string);
+  console.log(meta);
+  if (meta.actionType === "uncheck") {
+    filterButton.value?.find((v) => v?.key === meta.value)?.unCheck();
+    checkKey.value = [];
+  } else {
+    filterButton.value?.find((v) => v?.key === meta.value)?.onCheck();
+    checkKey.value = [meta.value];
   }
 }
 </script>
 
 <template>
   <div class="filter-box">
-    <n-checkbox-group v-model:value="keySelect" class="filter-main">
-      <n-checkbox
+    <NCheckboxGroup v-model:value="keySelect" class="filter-main">
+      <NCheckbox
         v-for="item in filterItem"
         :key="item.key"
         :value="item.key"
         class="filter-item"
       >
-        <n-ellipsis style="max-width: 100px">
+        <NEllipsis style="max-width: 100px">
           {{ item.title }}
-        </n-ellipsis>
-      </n-checkbox>
-    </n-checkbox-group>
+        </NEllipsis>
+      </NCheckbox>
+    </NCheckboxGroup>
     <div class="filter-footer">
-      <n-checkbox-group
+      <NCheckboxGroup
         :type="props.type"
         :value="checkKey"
         @update:value="onCheckModel"
       >
-        <n-checkbox
+        <NCheckbox
           v-for="item in filterButton"
           :key="item.key"
           :value="item.key"
         >
           {{ item.label }}
-        </n-checkbox>
-      </n-checkbox-group>
-      <n-button class="submit-btn" :type="props.type" @click="onSubmit">
+        </NCheckbox>
+      </NCheckboxGroup>
+      <NButton class="submit-btn" :type="props.type" @click="onSubmit">
         保存
-      </n-button>
+      </NButton>
     </div>
   </div>
 </template>

package/src/utils/config.ts

@@ -14,6 +14,7 @@ interface ConfigType {
     instance: any
     inheritTheme: boolean
     themeOverrides: any
+    defaultOption: any
   }
 }
 
@@ -38,6 +39,8 @@ const config: ConfigType = {
     inheritTheme: true,
     // 主题色覆盖（当 inheritTheme 为 false 时使用）
     themeOverrides: null,
+    // Dialog 默认配置项
+    defaultOption: null,
   },
 }
 
@@ -50,9 +53,10 @@ const config: ConfigType = {
  * @param {Object} [options.dialog] - Dialog 配置
  * @param {boolean} [options.dialog.inheritTheme] - 是否继承外部定义的主题色（默认 true）
  * @param {Object} [options.dialog.themeOverrides] - 主题色覆盖（当 inheritTheme 为 false 时使用）
+ * @param {Object} [options.dialog.defaultOption] - commonDialogMethod 的默认选项配置
  * @example
  * import { setupConfig } from '@xmszm/core'
- * 
+ *
  * setupConfig({
  *   baseURL: 'https://api.example.com',
  *   hasPermission: (permission) => {
@@ -64,6 +68,13 @@ const config: ConfigType = {
  *     inheritTheme: false, // 不继承外部主题色
  *     themeOverrides: {
  *       // 自定义主题色
+ *     },
+ *     defaultOption: {
+ *       // commonDialogMethod 的默认配置
+ *       showIcon: false,
+ *       autoFocus: false,
+ *       closable: true,
+ *       closeOnEsc: true,
  *     }
  *   }
  * })
@@ -100,6 +111,9 @@ export function setupConfig(options: Partial<ConfigType> = {}) {
     if (options.dialog.themeOverrides !== undefined) {
       config.dialog.themeOverrides = options.dialog.themeOverrides
     }
+    if (options.dialog.defaultOption !== undefined) {
+      config.dialog.defaultOption = options.dialog.defaultOption
+    }
   }
 
   return config