fix Bug or add docs

src/views/comp/table/CellColumns.ts

@@ -0,0 +1,75 @@
+import { h } from 'vue';
+import { NAvatar } from 'naive-ui';
+
+export const columns = [
+  {
+    title: 'id',
+    key: 'id',
+  },
+  {
+    title: '编码',
+    key: 'no',
+  },
+  {
+    title: '名称',
+    key: 'name',
+    editComponent: 'NInput',
+    // 默认必填校验
+    editRule: true,
+    edit: true,
+    width: 200,
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(NAvatar, {
+        size: 48,
+        src: row.avatar,
+      });
+    },
+  },
+  {
+    title: '地址',
+    key: 'address',
+    editComponent: 'NSelect',
+    editComponentProps: {
+      options: [
+        {
+          label: '广东省',
+          value: 1,
+        },
+        {
+          label: '浙江省',
+          value: 2,
+        },
+      ],
+    },
+    edit: true,
+    width: 200,
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+    edit: true,
+    width: 250,
+    editComponent: 'NDatePicker',
+    editComponentProps: {
+      type: 'datetime',
+      format: 'yyyy-MM-dd HH:mm:ss',
+    },
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '停留时间',
+    key: 'time',
+  },
+];

src/views/comp/table/basic.vue

@@ -0,0 +1,121 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <BasicTable
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </BasicTable>
+  </n-card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { getTableList } from '@/api/table/list';
+  import { columns } from './basicColumns';
+  import { useDialog, useMessage } from 'naive-ui';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const message = useMessage();
+      const dialog = useDialog();
+      const actionRef = ref();
+      const state = reactive({
+        params: {
+          pageSize: 5,
+          name: 'xiaoMa',
+        },
+        actionColumn: {
+          width: 150,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: 'right',
+          align: 'center',
+          render(record) {
+            return h(TableAction, {
+              style: 'button',
+              actions: createActions(record),
+            });
+          },
+        },
+      });
+
+      function createActions(record) {
+        return [
+          {
+            label: '删除',
+            icon: 'ic:outline-delete-outline',
+            onClick: handleDelete.bind(null, record),
+            // 根据业务控制是否显示 isShow 和 auth 是并且关系
+            ifShow: () => {
+              return true;
+            },
+            // 根据权限控制是否显示: 有权限，会显示，支持多个
+            auth: ['basic_list'],
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            ifShow: () => {
+              return true;
+            },
+            auth: ['basic_list'],
+          },
+        ];
+      }
+
+      const loadDataTable = async (params) => {
+        const data = await getTableList(params);
+        return data;
+      };
+
+      function onCheckedRow(rowKeys) {
+        console.log(rowKeys);
+      }
+
+      function reloadTable() {
+        actionRef.value.reload();
+      }
+
+      function handleDelete(record) {
+        console.log(record);
+        dialog.info({
+          title: '提示',
+          content: `您想删除${record.name}`,
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            message.success('删除成功');
+          },
+          onNegativeClick: () => {},
+        });
+      }
+
+      function handleEdit(record) {
+        console.log(record);
+        message.success('您点击了编辑按钮');
+      }
+
+      return {
+        ...toRefs(state),
+        columns,
+        actionRef,
+        loadDataTable,
+        onCheckedRow,
+        reloadTable,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/comp/table/basicColumns.ts

@@ -0,0 +1,66 @@
+import { h } from 'vue';
+import { NAvatar, NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: 'id',
+    key: 'id',
+  },
+  {
+    title: '编码',
+    key: 'no',
+  },
+  {
+    title: '名称',
+    key: 'name',
+    width: 200,
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(NAvatar, {
+        size: 48,
+        src: row.avatar,
+      });
+    },
+  },
+  {
+    title: '地址',
+    key: 'address',
+    width: 200,
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+    width: 200,
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+    width: 200,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: row.status ? 'success' : 'error',
+        },
+        {
+          default: () => (row.status ? '启用' : '禁用'),
+        }
+      );
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '停留时间',
+    key: 'time',
+  },
+];

src/views/comp/table/columns.ts

@@ -1,67 +0,0 @@
-import { h } from 'vue';
-import { NAvatar, NButton } from 'naive-ui';
-
-export const columns = [
-  {
-    title: 'id',
-    key: 'id',
-  },
-  {
-    title: '名称',
-    key: 'name',
-  },
-  {
-    title: '头像',
-    key: 'avatar',
-    render(row) {
-      return h(NAvatar, {
-        size: 48,
-        src: row.avatar,
-      });
-    },
-  },
-  {
-    title: '地址',
-    key: 'address',
-  },
-  {
-    title: '开始日期',
-    key: 'beginTime',
-  },
-  {
-    title: '结束日期',
-    key: 'endTime',
-  },
-  {
-    title: '创建时间',
-    key: 'date',
-  },
-  {
-    title: '操作',
-    key: 'actions',
-    width: 150,
-    //简单写一下例子，不建议这么写，过段时间，这里封二次封装
-    render() {
-      return [
-        h(
-          NButton,
-          {
-            size: 'small',
-            type: 'error',
-            style: 'margin-right:10px',
-            onClick: () => {},
-          },
-          { default: () => '删除' }
-        ),
-        h(
-          NButton,
-          {
-            size: 'small',
-            onClick: () => {},
-          },
-          { default: () => '编辑' }
-        ),
-      ];
-    },
-  },
-];

src/views/comp/table/editCell.vue

@@ -0,0 +1,131 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <BasicTable
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @edit-end="editEnd"
+      @edit-change="onEditChange"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </BasicTable>
+  </n-card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { getTableList } from '@/api/table/list';
+  import { columns } from './CellColumns';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const actionRef = ref();
+      const currentEditKeyRef = ref('');
+      const state = reactive({
+        params: {
+          pageSize: 5,
+          name: 'xiaoMa',
+        },
+        actionColumn: {
+          width: 150,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: 'right',
+          align: 'center',
+          render(record) {
+            return h(TableAction, {
+              style: 'button',
+              actions: createActions(record),
+            });
+          },
+        },
+      });
+
+      function handleEdit(record) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function onEditChange({ column, value, record }) {
+        if (column.dataIndex === 'id') {
+          record.editValueRefs.name4.value = `${value}`;
+        }
+        console.log(column, value, record);
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        const pass = await record.onEdit?.(false, true);
+        if (pass) {
+          currentEditKeyRef.value = '';
+        }
+      }
+
+      function createActions(record) {
+        if (!record.editable) {
+          return [
+            {
+              label: '编辑',
+              onClick: handleEdit.bind(null, record),
+            },
+          ];
+        } else {
+          return [
+            {
+              label: '保存',
+              onClick: handleSave.bind(null, record),
+            },
+            {
+              label: '取消',
+              onClick: handleCancel.bind(null, record),
+            },
+          ];
+        }
+      }
+
+      const loadDataTable = async (params) => {
+        const data = await getTableList(params);
+        return data;
+      };
+
+      function onCheckedRow(rowKeys) {
+        console.log(rowKeys);
+      }
+
+      function reloadTable() {
+        console.log(actionRef.value);
+        actionRef.value.reload();
+      }
+
+      function editEnd({ record, index, key, value }) {
+        console.log(value);
+      }
+
+      return {
+        ...toRefs(state),
+        columns,
+        actionRef,
+        loadDataTable,
+        onCheckedRow,
+        reloadTable,
+        editEnd,
+        onEditChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/comp/table/editRow.vue

@@ -0,0 +1,131 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <BasicTable
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @edit-end="editEnd"
+      @edit-change="onEditChange"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </BasicTable>
+  </n-card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { getTableList } from '@/api/table/list';
+  import { columns } from './rowColumns';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const actionRef = ref();
+      const currentEditKeyRef = ref('');
+      const state = reactive({
+        params: {
+          pageSize: 5,
+          name: 'xiaoMa',
+        },
+        actionColumn: {
+          width: 150,
+          title: '操作',
+          key: 'action',
+          fixed: 'right',
+          align: 'center',
+          render(record) {
+            return h(TableAction, {
+              style: 'button',
+              actions: createActions(record),
+            });
+          },
+        },
+      });
+
+      function handleEdit(record) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function onEditChange({ column, value, record }) {
+        if (column.dataIndex === 'id') {
+          record.editValueRefs.name4.value = `${value}`;
+        }
+        console.log(column, value, record);
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        const pass = await record.onEdit?.(false, true);
+        if (pass) {
+          currentEditKeyRef.value = '';
+        }
+      }
+
+      function createActions(record) {
+        if (!record.editable) {
+          return [
+            {
+              label: '编辑',
+              onClick: handleEdit.bind(null, record),
+            },
+          ];
+        } else {
+          return [
+            {
+              label: '保存',
+              onClick: handleSave.bind(null, record),
+            },
+            {
+              label: '取消',
+              onClick: handleCancel.bind(null, record),
+            },
+          ];
+        }
+      }
+
+      const loadDataTable = async (params) => {
+        const data = await getTableList(params);
+        return data;
+      };
+
+      function onCheckedRow(rowKeys) {
+        console.log(rowKeys);
+      }
+
+      function reloadTable() {
+        console.log(actionRef.value);
+        actionRef.value.reload();
+      }
+
+      function editEnd({ record, index, key, value }) {
+        console.log(value);
+      }
+
+      return {
+        ...toRefs(state),
+        columns,
+        actionRef,
+        loadDataTable,
+        onCheckedRow,
+        reloadTable,
+        editEnd,
+        onEditChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/comp/table/list.vue

@@ -1,61 +0,0 @@
-<template>
-  <n-card :bordered="false" class="proCard">
-    <BasicTable
-      title="表格列表"
-      titleTooltip="这是一个提示"
-      :columns="columns"
-      :request="loadDataTable"
-      :row-key="(row) => row.id"
-      ref="actionRef"
-      @update:checked-row-keys="onCheckedRow"
-    >
-      <template #toolbar>
-        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
-      </template>
-    </BasicTable>
-  </n-card>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref } from 'vue';
-  import { BasicTable } from '@/components/Table';
-  import { getTableList } from '@/api/table/list';
-  import { columns } from './columns';
-
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-      });
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped></style>

src/views/comp/table/rowColumns.ts

@@ -0,0 +1,89 @@
+import { h } from 'vue';
+import { NAvatar } from 'naive-ui';
+
+export const columns = [
+  {
+    title: 'id',
+    key: 'id',
+  },
+  {
+    title: '编码',
+    key: 'no',
+  },
+  {
+    title: '名称',
+    key: 'name',
+    editComponent: 'NInput',
+    editRow: true,
+    // 默认必填校验
+    editRule: true,
+    edit: true,
+    width: 200,
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(NAvatar, {
+        size: 48,
+        src: row.avatar,
+      });
+    },
+  },
+  {
+    title: '地址',
+    key: 'address',
+    editRow: true,
+    editComponent: 'NSelect',
+    editComponentProps: {
+      options: [
+        {
+          label: '广东省',
+          value: 1,
+        },
+        {
+          label: '浙江省',
+          value: 2,
+        },
+      ],
+    },
+    edit: true,
+    width: 200,
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+    editRow: true,
+    edit: true,
+    width: 250,
+    editComponent: 'NDatePicker',
+    editComponentProps: {
+      type: 'datetime',
+      format: 'yyyy-MM-dd HH:mm:ss',
+    },
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+    width: 200,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    editRow: true,
+    edit: true,
+    width: 100,
+    editComponent: 'NSwitch',
+    editValueMap: (value) => {
+      return value ? '启用' : '禁用';
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '停留时间',
+    key: 'time',
+  },
+];

src/views/login/index.vue

@@ -219,7 +219,7 @@
 
   @media (min-width: 768px) {
     .view-account {
-      background-image: url('@/assets/images/login.svg');
+      background-image: url('../../assets/images/login.svg');
       background-repeat: no-repeat;
       background-position: 50%;
       background-size: 100%;

src/views/system/menu/menu.vue

@@ -5,7 +5,6 @@
         页面数据为 Mock 示例数据，非真实数据。
       </n-card>
     </div>
-
     <n-grid class="mt-4" cols="1 s:1 m:1 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12">
       <n-gi span="1">
         <n-card :segmented="{ content: 'hard' }" :bordered="false" size="small">
@@ -35,7 +34,6 @@
               </n-button>
             </n-space>
           </template>
-
           <div class="w-full menu">
             <n-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
               <template #suffix>
@@ -61,6 +59,7 @@
                   :expandedKeys="expandedKeys"
                   style="max-height: 650px; overflow: hidden"
                   @update:selected-keys="selectedTree"
+                  @update:expanded-keys="onExpandedKeys"
                 />
               </template>
             </div>
@@ -77,7 +76,7 @@
               <span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
             </n-space>
           </template>
-          <n-alert type="info" closable> 从菜单列表选择一项后，进行编辑 </n-alert>
+          <n-alert type="info" closable> 从菜单列表选择一项后，进行编辑</n-alert>
           <n-form
             :model="formParams"
             :rules="rules"
@@ -122,17 +121,15 @@
         </n-card>
       </n-gi>
     </n-grid>
-
     <CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
   </div>
 </template>
-
 <script lang="ts">
   import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue';
   import { useMessage } from 'naive-ui';
   import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd';
   import { getMenuList } from '@/api/system/menu';
-  import { getTreeItem } from '@/utils/index';
+  import { getTreeItem } from '@/utils';
   import CreateDrawer from './CreateDrawer.vue';
 
   const rules = {
@@ -156,35 +153,49 @@
       const message = useMessage();
 
       const isAddSon = computed(() => {
-        return state.treeItemKey.length ? false : true;
+        return !state.treeItemKey.length;
       });
 
+      const addMenuOptions = ref([
+        {
+          label: '添加顶级菜单',
+          key: 'home',
+          disabled: false,
+        },
+        {
+          label: '添加子菜单',
+          key: 'son',
+          disabled: isAddSon,
+        },
+      ]);
+
+      const treeItemKey: string[] = reactive([]);
+
+      const expandedKeys: string[] = reactive([]);
+
+      const treeData: string[] = reactive([]);
+
       const state = reactive({
-        addMenuOptions: [
-          {
-            label: '添加顶级菜单',
-            key: 'home',
-            disabled: false,
-          },
-          {
-            label: '添加子菜单',
-            key: 'son',
-            disabled: isAddSon,
-          },
-        ],
         loading: true,
         subLoading: false,
         isEditMenu: false,
-        treeData: [],
-        treeItemKey: [],
         treeItemTitle: '',
-        expandedKeys: [],
-        formParams: {},
+        formParams: {
+          type: 1,
+          label: '',
+          subtitle: '',
+          path: '',
+          auth: '',
+          openType: 1,
+        },
         pattern: '',
         drawerTitle: '',
+        treeItemKey,
+        expandedKeys,
+        treeData,
       });
 
-      function selectAddMenu(key) {
+      function selectAddMenu(key: string) {
         state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${state.treeItemTitle}`;
         openCreateDrawer();
       }
@@ -194,7 +205,7 @@
         openDrawer();
       }
 
-      function selectedTree(keys) {
+      function selectedTree(keys: string[]) {
         if (keys.length) {
           const treeItem = getTreeItem(unref(state.treeData), keys[0]);
           state.treeItemKey = keys;
@@ -214,7 +225,7 @@
       }
 
       function formSubmit() {
-        formRef.value.validate((errors) => {
+        formRef.value.validate((errors: boolean) => {
           if (!errors) {
             message.error('抱歉，您没有该权限');
           } else {
@@ -227,21 +238,10 @@
         if (state.expandedKeys.length) {
           state.expandedKeys = [];
         } else {
-          state.expandedKeys = state.treeData.map((item) => item.key);
+          state.expandedKeys = state.treeData.map((item: any) => item.key);
         }
       }
 
-      function onExpandedKeys() {
-        // let key = keys[0]
-        // console.log(state.expandedKeys)
-        // if(state.expandedKeys.includes(key)){
-        //   state.expandedKeys.splice(state.expandedKeys.findIndex(item => item === key), 1)
-        //   console.log(state.expandedKeys)
-        // }else{
-        //   state.expandedKeys.push(key)
-        // }
-      }
-
       onMounted(async () => {
         const treeMenuList = await getMenuList();
         state.expandedKeys = treeMenuList.list.map((item) => item.key);
@@ -249,8 +249,13 @@
         state.loading = false;
       });
 
+      function onExpandedKeys(keys: string[]) {
+        state.expandedKeys = keys;
+      }
+
       return {
         ...toRefs(state),
+        addMenuOptions,
         createDrawerRef,
         formRef,
         rules,