From e155cb2724be10bbc040ba31d2a8867f7c882576 Mon Sep 17 00:00:00 2001
From: JinMao <jinmao88@qq.com>
Date: Sun, 29 Aug 2021 19:53:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E8=B7=AF=E7=94=B1=E7=9A=84cu?=
 =?UTF-8?q?rd=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Curd.ts                     |   2 +-
 src/utils/http/axios/checkStatus.ts |   1 -
 src/views/menu/MenuDrawer.vue       |  95 ++++++++--------
 src/views/menu/index.vue            | 116 +++++++++----------
 src/views/menu/menu.data.ts         | 165 +++++++++++++++++-----------
 5 files changed, 201 insertions(+), 178 deletions(-)

diff --git a/src/api/Curd.ts b/src/api/Curd.ts
index b56c24a6..2fd340cf 100644
--- a/src/api/Curd.ts
+++ b/src/api/Curd.ts
@@ -1,3 +1,3 @@
 import { defHttp } from '/@/utils/http/axios';
 
-export const Curd = (params) => defHttp.post({ url: '/curd', params });
+export const Curd = (params) => defHttp.post({ url: '/curd', params, headers: {} });
diff --git a/src/utils/http/axios/checkStatus.ts b/src/utils/http/axios/checkStatus.ts
index acadffaa..f3b60294 100644
--- a/src/utils/http/axios/checkStatus.ts
+++ b/src/utils/http/axios/checkStatus.ts
@@ -19,7 +19,6 @@ export function checkStatus(
   const { t } = useI18n();
   const userStore = useUserStoreWithOut();
   let errMessage = '';
-
   switch (status) {
     case 400:
       errMessage = `${msg}`;
diff --git a/src/views/menu/MenuDrawer.vue b/src/views/menu/MenuDrawer.vue
index 04025102..38024371 100644
--- a/src/views/menu/MenuDrawer.vue
+++ b/src/views/menu/MenuDrawer.vue
@@ -10,61 +10,66 @@
     <BasicForm @register="registerForm" />
   </BasicDrawer>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './menu.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Curd } from '/@/api/Curd';
 
-  import { getMenuList } from '/@/api/demo/system';
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const id = ref(0);
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 12, md: 24 },
+  });
 
-  export default defineComponent({
-    name: 'MenuDrawer',
-    components: { BasicDrawer, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    const { record } = data;
 
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
-        labelWidth: 100,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-        baseColProps: { lg: 12, md: 24 },
+    console.log(record);
+    if (unref(isUpdate)) {
+      id.value = record.id;
+      setFieldsValue({
+        ...record,
+        title: record.meta.title,
       });
+    }
 
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        resetFields();
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
+    let treeData = [{ name: '无父级', value: 0, id: 0 }];
+    const res = await Curd({ i: 'router', a: 'list' });
+    treeData = treeData.concat(res.items);
+    // console.log(treeData);
+    updateSchema({
+      field: 'parent',
+      componentProps: { treeData },
+    });
+  });
 
-        if (unref(isUpdate)) {
-          setFieldsValue({
-            ...data.record,
-          });
-        }
-        const treeData = await getMenuList();
-        updateSchema({
-          field: 'parentMenu',
-          componentProps: { treeData },
-        });
-      });
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
 
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          setDrawerProps({ confirmLoading: true });
-          // TODO custom api
-          console.log(values);
-          closeDrawer();
-          emit('success');
-        } finally {
-          setDrawerProps({ confirmLoading: false });
-        }
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values);
+      if (unref(isUpdate)) {
+        await Curd({ i: 'router', a: 'edit', id: id.value, ...values });
+      } else {
+        await Curd({ i: 'router', a: 'add', ...values });
       }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
-    },
-  });
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
 </script>
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index 651b1533..106967c5 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -26,9 +26,7 @@
     <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
 
   import { useDrawer } from '/@/components/Drawer';
@@ -36,69 +34,55 @@
   import { columns, searchFormSchema } from './menu.data';
   import { Curd } from '/@/api/Curd';
 
-  export default defineComponent({
-    name: 'MenuManagement',
-    components: { BasicTable, MenuDrawer, TableAction },
-    setup() {
-      const [registerDrawer, { openDrawer }] = useDrawer();
-      const [registerTable, { reload }] = useTable({
-        title: '菜单列表',
-        api: Curd,
-        beforeFetch: (v) => {
-          v.i = 'router';
-          v.a = 'list';
-          return v;
-        },
-        columns,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-        },
-        pagination: false,
-        striped: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        showIndexColumn: false,
-        canResize: false,
-        actionColumn: {
-          width: 80,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: undefined,
-        },
-      });
-
-      function handleCreate() {
-        openDrawer(true, {
-          isUpdate: false,
-        });
-      }
-
-      function handleEdit(record: Recordable) {
-        openDrawer(true, {
-          record,
-          isUpdate: true,
-        });
-      }
-
-      function handleDelete(record: Recordable) {
-        console.log(record);
-      }
-
-      function handleSuccess() {
-        reload();
-      }
-
-      return {
-        registerTable,
-        registerDrawer,
-        handleCreate,
-        handleEdit,
-        handleDelete,
-        handleSuccess,
-      };
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload }] = useTable({
+    title: '菜单列表',
+    api: Curd,
+    beforeFetch: (v) => {
+      v.i = 'router';
+      v.a = 'list';
+      return v;
+    },
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
     },
   });
+
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete(record: Recordable) {
+    await Curd({ i: 'router', a: 'del', id: record.id });
+    reload();
+  }
+
+  function handleSuccess() {
+    reload();
+  }
 </script>
diff --git a/src/views/menu/menu.data.ts b/src/views/menu/menu.data.ts
index 2ed1a631..e7841adb 100644
--- a/src/views/menu/menu.data.ts
+++ b/src/views/menu/menu.data.ts
@@ -11,6 +11,12 @@ export const columns: BasicColumn[] = [
     width: 200,
     align: 'left',
   },
+  {
+    title: '菜单标题',
+    dataIndex: 'meta.title',
+    width: 200,
+    align: 'left',
+  },
   {
     title: '图标',
     dataIndex: 'icon',
@@ -30,7 +36,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '排序',
-    dataIndex: 'orderNo',
+    dataIndex: 'order_no',
     width: 50,
   },
   {
@@ -53,7 +59,7 @@ export const columns: BasicColumn[] = [
 ];
 
 const isDir = (type: string) => type === '0';
-const isMenu = (type: string) => type === '1';
+// const isMenu = (type: string) => type === '1';
 const isButton = (type: string) => type === '2';
 
 export const searchFormSchema: FormSchema[] = [
@@ -78,34 +84,40 @@ export const searchFormSchema: FormSchema[] = [
 ];
 
 export const formSchema: FormSchema[] = [
+  // {
+  //   field: 'type',
+  //   label: '菜单类型',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '目录', value: '0' },
+  //       { label: '菜单', value: '1' },
+  //       { label: '按钮', value: '2' },
+  //     ],
+  //   },
+  //   colProps: { lg: 24, md: 24 },
+  // },
   {
-    field: 'type',
-    label: '菜单类型',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '目录', value: '0' },
-        { label: '菜单', value: '1' },
-        { label: '按钮', value: '2' },
-      ],
-    },
-    colProps: { lg: 24, md: 24 },
+    field: 'name',
+    label: '菜单名称',
+    component: 'Input',
+    required: true,
   },
   {
-    field: 'menuName',
-    label: '菜单名称',
+    field: 'title',
+    label: '菜单标题',
     component: 'Input',
     required: true,
   },
 
   {
-    field: 'parentMenu',
+    field: 'parent',
     label: '上级菜单',
     component: 'TreeSelect',
     componentProps: {
       replaceFields: {
-        title: 'menuName',
+        title: 'name',
         key: 'id',
         value: 'id',
       },
@@ -114,31 +126,36 @@ export const formSchema: FormSchema[] = [
   },
 
   {
-    field: 'orderNo',
+    field: 'order_no',
     label: '排序',
+    defaultValue: 0,
     component: 'InputNumber',
+    componentProps: {
+      min: 0,
+    },
     required: true,
   },
   {
     field: 'icon',
     label: '图标',
     component: 'IconPicker',
-    required: true,
     show: ({ values }) => !isButton(values.type),
   },
 
   {
-    field: 'routePath',
+    field: 'path',
     label: '路由地址',
     component: 'Input',
     required: true,
-    show: ({ values }) => !isButton(values.type),
+    // show: ({ values }) => !isButton(values.type),
   },
+
   {
     field: 'component',
     label: '组件路径',
     component: 'Input',
-    show: ({ values }) => isMenu(values.type),
+    required: true,
+    // show: ({ values }) => isMenu(values.type),
   },
   {
     field: 'permission',
@@ -146,57 +163,75 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     show: ({ values }) => !isDir(values.type),
   },
+  // {
+  //   field: 'isRedirect',
+  //   label: '是否重定向',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: 0,
+  //   componentProps: {
+  //     options: [
+  //       { label: '是', value: 1 },
+  //       { label: '否', value: 0 },
+  //     ],
+  //   },
+  // },
+  // {
+  //   field: 'redirect',
+  //   label: '路由重定向',
+  //   component: 'Input',
+  //   show: ({ values }) => !!values.isRedirect,
+  // },
   {
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
-    defaultValue: '0',
+    defaultValue: 1,
     componentProps: {
       options: [
-        { label: '启用', value: '0' },
-        { label: '禁用', value: '1' },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
     },
   },
-  {
-    field: 'isExt',
-    label: '是否外链',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    show: ({ values }) => !isButton(values.type),
-  },
+  // {
+  //   field: 'isExt',
+  //   label: '是否外链',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: '0' },
+  //       { label: '是', value: '1' },
+  //     ],
+  //   },
+  //   show: ({ values }) => !isButton(values.type),
+  // },
 
-  {
-    field: 'keepalive',
-    label: '是否缓存',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    show: ({ values }) => isMenu(values.type),
-  },
+  // {
+  //   field: 'keepalive',
+  //   label: '是否缓存',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: '0' },
+  //       { label: '是', value: '1' },
+  //     ],
+  //   },
+  //   show: ({ values }) => isMenu(values.type),
+  // },
 
-  {
-    field: 'show',
-    label: '是否显示',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '是', value: '0' },
-        { label: '否', value: '1' },
-      ],
-    },
-    show: ({ values }) => !isButton(values.type),
-  },
+  // {
+  //   field: 'show',
+  //   label: '是否显示',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '是', value: '0' },
+  //       { label: '否', value: '1' },
+  //     ],
+  //   },
+  //   show: ({ values }) => !isButton(values.type),
+  // },
 ];