日常 bugfix 更新

2026-02-04 13:42:27 +08:00 · 2021-07-13 10:01:31 +08:00
parent b1c730dde8
commit 18597fabd3
10 changed files with 235 additions and 191 deletions
--- a/index.html
+++ b/index.html
@@ -2,14 +2,19 @@
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+  <meta name="renderer" content="webkit"/>
+  <meta
+    name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+  />
+  <link rel="icon" href="/favicon.ico"/>
  <title><%= title %></title>
 </head>
 <body>
-  <div id="app">
+<div id="app">
  <style>
-      .app-loading-main{
+    .app-loading-main {
      display: flex;
      width: 100%;
      height: 100%;
@@ -19,19 +24,23 @@
      background-color: #f4f7f9;
      position: relative;
    }
+
    .app-loading {
      position: relative;
      -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      transform: translateY(-15px);
    }
+
    .app-loading > div {
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
      top: 0px;
      left: 0px;
-        border-radius: 100%; }
+      border-radius: 100%;
+    }
+
    .app-loading > div:first-child {
      background: #2d8cf0;
      height: 16px;
@@ -41,6 +50,7 @@
      -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
      animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    }
+
    .app-loading > div:last-child {
      position: absolute;
      border: 2px solid #2d8cf0;
@@ -54,16 +64,20 @@
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
    }
+
    @keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg) scale(1);
-          transform: rotate(0deg) scale(1); }
+        transform: rotate(0deg) scale(1);
+      }
      50% {
        -webkit-transform: rotate(180deg) scale(0.6);
-          transform: rotate(180deg) scale(0.6); }
+        transform: rotate(180deg) scale(0.6);
+      }
      100% {
        -webkit-transform: rotate(360deg) scale(1);
-          transform: rotate(360deg) scale(1); }
+        transform: rotate(360deg) scale(1);
+      }
    }
  </style>
  <div class="app-loading-main">
@@ -72,7 +86,7 @@
      <div></div>
    </div>
  </div>
-  </div>
-  <script type="module" src="/src/main.ts"></script>
+</div>
+<script type="module" src="/src/main.ts"></script>
 </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@
  </NConfigProvider>

  <transition v-if="isLock && $route.name != 'login'" name="slide-up">
-    <lockScreen/>
+    <LockScreen/>
  </transition>
 </template>

--- a/src/components/ProTable/src/ProTable.vue
+++ b/src/components/ProTable/src/ProTable.vue
@@ -267,7 +267,6 @@ export default defineComponent({
      justify-content: flex-start;
      font-size: 16px;
      font-weight: 600;
-      color: rgba(0, 0, 0, .85);
    }
  }

@@ -280,9 +279,8 @@ export default defineComponent({
      height: 18px;
      margin-left: 12px;
      font-size: 16px;
-      color: rgba(0, 0, 0, .75);
      cursor: pointer;
-
+      color:var(--text-color);
      :hover {
        color: #1890ff;
      }
--- a/src/components/ProTable/src/components/settings/ColumnSetting.vue
+++ b/src/components/ProTable/src/components/settings/ColumnSetting.vue
@@ -18,22 +18,21 @@
            </div>
          </template>
          <div class="table-toolbar-inner">
+            <n-checkbox-group v-model:value="checkList" @update:value="onChange">
              <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
                <template #item="{element, index}">
-                <div class="table-toolbar-inner-checkbox">
+                  <div class="table-toolbar-inner-checkbox" :class="{'table-toolbar-inner-checkbox-dark':getDarkTheme === true}">
                    <span class="drag-icon">
                      <n-icon size="18">
                        <DragOutlined/>
                      </n-icon>
                    </span>
-                  <n-checkbox-group v-model:value="checkList" @update:value="onChange">
                    <n-checkbox :value="element.key" :label="element.title"/>
-                  </n-checkbox-group>
                    <div class="fixed-item">
                      <n-tooltip trigger="hover" placement="bottom">
                        <template #trigger>
                          <n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
-                                class="transform -rotate-90 cursor-pointer" @click="fixedColumn(index,'left')">
+                                  class="transform -rotate-90 cursor-pointer" @click="fixedColumn(element,'left')">
                            <VerticalAlignTopOutlined/>
                          </n-icon>
                        </template>
@@ -43,7 +42,7 @@
                      <n-tooltip trigger="hover" placement="bottom">
                        <template #trigger>
                          <n-icon size="18" :color="element.fixed === 'right' ? '#2080f0':undefined"
-                                class="transform rotate-90 cursor-pointer" @click="fixedColumn(index,'right')">
+                                  class="transform rotate-90 cursor-pointer" @click="fixedColumn(element,'right')">
                            <VerticalAlignTopOutlined/>
                          </n-icon>
                        </template>
@@ -53,7 +52,7 @@
                  </div>
                </template>
              </Draggable>
-
+            </n-checkbox-group>
          </div>
        </n-popover>
      </div>
@@ -67,6 +66,7 @@ import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEf
 import { useTableContext } from '../../hooks/useTableContext';
 import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalAlignTopOutlined } from '@vicons/antd'
 import Draggable from 'vuedraggable/src/vuedraggable'
+import { useDesignSetting } from "@/hooks/setting/useDesignSetting";

 interface Options {
  title: string;
@@ -81,8 +81,11 @@ export default defineComponent({
    VerticalAlignTopOutlined
  },
  setup(props, { emit }) {
+    const { getDarkTheme } = useDesignSetting()
    const table = useTableContext();
    const columnsList = ref<Options[]>([]);
+    const cacheColumnsList = ref<Options[]>([]);
+
    const state = reactive({
      selection: false,
      checkAll: true,
@@ -108,6 +111,7 @@ export default defineComponent({
      state.checkList = checkList
      state.defaultCheckList = checkList
      columnsList.value = columns
+      cacheColumnsList.value = columns
    }

    //切换
@@ -125,18 +129,26 @@ export default defineComponent({

    //获取
    function getColumns() {
-      const newArr = []
+      let newRet = []
      table.getColumns().forEach(item => {
-        newArr.push({ ...item })
+        newRet.push({...item })
      })
-      return newArr
+      return newRet
    }

    //重置
    function resetColumns() {
      state.checkList = [...state.defaultCheckList]
      state.checkAll = true;
-      setColumns(table.getCacheColumns(true));
+      let cacheColumnsKeys:any[] = table.getCacheColumns()
+      let newColumns = cacheColumnsKeys.map(item => {
+        return {
+          ...item,
+          fixed:undefined
+        }
+      })
+      setColumns(newColumns);
+      columnsList.value = newColumns
    }

    //全选
@@ -154,6 +166,8 @@ export default defineComponent({
    //拖拽排序
    function draggableEnd(e) {
      const newColumns = toRaw(unref(columnsList))
+      console.log(newColumns);
+      columnsList.value = newColumns
      setColumns(newColumns);
    }

@@ -170,19 +184,26 @@ export default defineComponent({
    }

    //固定
-    function fixedColumn(index, fixed) {
-      let columnList = getColumns();
-      let columnInfo = columnList[index]
-      const isFixed = columnInfo.fixed === fixed ? undefined : fixed
-      columnInfo.fixed = isFixed
-      columnsList.value = columnList
-      table.setCacheColumnsField(columnInfo.key, { fixed: isFixed })
-      setColumns(columnList);
+    function fixedColumn(item, fixed) {
+      console.log('item：',item)
+      if (!state.checkList.includes(item.key)) return;
+      let columns = getColumns();
+      const isFixed = item.fixed === fixed ? undefined : fixed
+      let index = columns.findIndex(res => res.key === item.key)
+      console.log('index：',index)
+      if(index !== -1){
+        columns[index].fixed = isFixed;
+      }
+      table.setCacheColumnsField(item.key, { fixed: isFixed })
+      columnsList.value[index].fixed = isFixed
+      console.log('columnsList：',columnsList.value)
+      setColumns(columns);
    }

    return {
      ...toRefs(state),
      columnsList,
+      getDarkTheme,
      onChange,
      onCheckAll,
      onSelection,
@@ -197,12 +218,15 @@ export default defineComponent({

 <style lang="less">
 .table-toolbar {
+  &-inner-popover-title{
+    padding: 3px 0;
+  }
  &-right {
    &-icon {
      height: 18px;
      margin-left: 12px;
      font-size: 16px;
-      color: rgba(0, 0, 0, .75);
+      color:var(--text-color);
      cursor: pointer;

      :hover {
@@ -216,18 +240,15 @@ export default defineComponent({
  &-checkbox {
    display: flex;
    align-items: center;
-    padding: 8px 0;
-
+    padding: 10px 14px;
    &:hover {
      background: #e6f7ff;
    }
-
    .drag-icon {
      display: inline-flex;
      margin-right: 8px;
      cursor: move;
    }
-
    .fixed-item {
      display: flex;
      align-items: center;
@@ -243,5 +264,15 @@ export default defineComponent({
      }
    }
  }
+  &-checkbox-dark{
+    &:hover {
+      background: hsla(0, 0%, 100%, .08);
+    }
+  }
+}
+.toolbar-popover{
+  .n-popover__content{
+    padding: 0;
+  }
 }
 </style>
--- a/src/components/ProTable/src/hooks/useColumns.ts
+++ b/src/components/ProTable/src/hooks/useColumns.ts
@@ -22,10 +22,11 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
    () => unref(propsRef).columns,
    (columns) => {
      columnsRef.value = columns;
-      cacheColumns = columns?.filter((item) => !item.flag) ?? [];
+      cacheColumns = columns;
    }
  );

+
  //设置
  function setColumns(columnList: string[]) {
    const columns: any[] = cloneDeep(columnList);
@@ -36,7 +37,6 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
      return;
    }
    const cacheKeys = cacheColumns.map((item) => item.key);
-
    //针对拖拽排序
    if (!isString(columns[0])) {
      columnsRef.value = columns;
@@ -60,9 +60,9 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {

  //获取
  function getColumns() {
-    const columns = toRaw(unref(propsRef).columns);
+    let columns = toRaw(unref(getColumnsRef));
    return columns.map(item => {
-      return { title: item.title, key: item.key, fixed: item.fixed || undefined }
+      return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
    })
  }

--- a/src/components/ProTable/src/hooks/useDataSource.ts
+++ b/src/components/ProTable/src/hooks/useDataSource.ts
@@ -1,8 +1,8 @@
-import { ref, ComputedRef, unref, computed, onMounted, onBeforeMount, watchEffect, watch } from 'vue';
+import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
-import { isFunction, isBoolean } from '@/utils/is';
-import { DEFAULTPAGESIZE, APISETTING, PAGESIZES } from '../const';
+import { isBoolean } from '@/utils/is';
+import { APISETTING } from '../const';

 export function useDataSource(
  propsRef: ComputedRef<BasicTableProps>,
@@ -10,12 +10,11 @@ export function useDataSource(
    getPaginationInfo,
    setPagination,
    setLoading,
-    tableData,
-    getSelection
+    tableData
  },
-  emit: EmitType
+  emit
 ) {
-  const dataSourceRef = ref<Recordable[]>([]);
+  const dataSourceRef = ref([]);

  watchEffect(() => {
    tableData.value = unref(dataSourceRef);
@@ -33,7 +32,7 @@ export function useDataSource(
  );

  const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef);
+    const { rowKey }:any = unref(propsRef);
    return rowKey ? rowKey : () => {
      return 'key'
    };
@@ -44,25 +43,6 @@ export function useDataSource(
    if (!dataSource || dataSource.length === 0) {
      return unref(dataSourceRef);
    }
-    // if (unref(getAutoCreateKey)) {
-    //   const firstItem = dataSource[0];
-    //   const lastItem = dataSource[dataSource.length - 1];
-    //
-    //   if (firstItem && lastItem) {
-    //     if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
-    //       const data = cloneDeep(unref(dataSourceRef));
-    //       data.forEach((item) => {
-    //         if (!item[ROW_KEY]) {
-    //           item[ROW_KEY] = buildUUID();
-    //         }
-    //         if (item.children && item.children.length) {
-    //           setTableKey(item.children);
-    //         }
-    //       });
-    //       dataSourceRef.value = data;
-    //     }
-    //   }
-    // }
    return unref(dataSourceRef);
  });

@@ -77,7 +57,7 @@ export function useDataSource(
      const totalField = APISETTING.totalField
      const listField = APISETTING.listField

-      let pageParams: Recordable = {};
+      let pageParams = {};
      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;

      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
@@ -95,7 +75,7 @@ export function useDataSource(
      const resultTotal = res[totalField] || 0
      const currentPage = res[pageField]

-      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+      // 如果数据异常，需获取正确的页码再次执行
      if (resultTotal) {
        const currentTotalPage = Math.ceil(resultTotal / pageSize);
        if (page > currentTotalPage) {
@@ -138,19 +118,15 @@ export function useDataSource(
    }, 16)
  });

-  // onBeforeMount(()=> {
-  //   fetch()
-  // })
-
-  function setTableData<T = Recordable>(values: T[]) {
+  function setTableData(values) {
    dataSourceRef.value = values;
  }

-  function getDataSource<T = Recordable>() {
-    return getDataSourceRef.value as T[];
+  function getDataSource() :any[] {
+    return getDataSourceRef.value;
  }

-  async function reload(opt?: FetchParams) {
+  async function reload(opt?) {
    await fetch(opt);
  }

--- a/src/components/ProTable/src/props.ts
+++ b/src/components/ProTable/src/props.ts
@@ -23,7 +23,6 @@ export const basicProps = {
    type: [Array] as PropType<BasicColumn[]>,
    default: () => [],
    required: true,
-
  },
  request: {
    type: Function as PropType<(...arg: any[]) => Promise<any>>,
--- a/src/components/ProTable/src/types/table.ts
+++ b/src/components/ProTable/src/types/table.ts
@@ -0,0 +1,22 @@
+import type {
+  TableBaseColumn,
+} from 'naive-ui/lib/data-table/src/interface';
+
+export interface BasicColumn extends TableBaseColumn {
+
+}
+
+export interface TableActionType {
+  reload: (opt) => Promise<void>;
+  emit?: any;
+  getColumns: (opt) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
+}
+
+export interface BasicTableProps<T = any> {
+  title?: string,
+  dataSource: Function,
+  columns: any[],
+  pagination: object,
+  showPagination: boolean
+}
--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :native-scrollbar="false">
    <n-drawer-content :title="title">
      <div class="drawer">
        <n-divider title-placement="center">主题</n-divider>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,41 +2,39 @@
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "pretty": true,
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "checkJs": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "strictPropertyInitialization": false,
-    "downlevelIteration": true,
-    "noUnusedLocals": false,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "removeComments": false,
    "strictFunctionTypes": false,
+    "jsx": "preserve",
    "baseUrl": ".",
-    "types": ["vite/client", "node"],
-    "typeRoots": ["./node_modules/@types/", "./types"],
+    "allowJs": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "types": [
+      "vite/client",
+      "jest"
+    ],
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./types"
+    ],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    }
  },
  "include": [
    "src/**/*.ts",
@@ -44,9 +42,15 @@
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
-    "types/**/*.ts"
+    "types/**/*.ts",
+    "build/**/*.ts",
+    "build/**/*.d.ts",
+    "mock/**/*.ts",
+    "vite.config.ts"
  ],
  "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist",
+    "**/*.js"
  ]
 }