create-young-proj 0.7.0 → 0.9.0

package/template-nuxt-admin/pages/system/api.vue

@@ -1,28 +1,28 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:44:56
- * @LastEditTime: 2023-07-31 11:36:37
+ * @LastEditTime: 2023-08-25 16:54:08
  * @Description:
 -->
 <script lang="ts" setup>
-import { useFormMode, YoungDialog, YoungTablePro, YoungPagination, YoungSelect, useQuery, YoungSearchForm } from '@bluesyoung/ui-vue3-element-plus';
-import type { TableDataItem, TableHeadItem, SelectOptionItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus';
-import { deepClone } from '@bluesyoung/utils';
-import { ElButton, ElTag } from 'element-plus';
+import { YoungDialog, YoungPagination, YoungSearchForm, YoungSelect, YoungTablePro, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
+import type { SelectOptionItem, TableDataItem, TableHeadItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus'
+import { deepClone } from '@bluesyoung/utils'
+import { ElButton, ElTag } from 'element-plus'
 
 definePageMeta({
-  title: '接口管理'
-});
+  title: '接口管理',
+})
 
-interface Form extends ApiItem { op?: any; };
+interface Form extends ApiItem { op?: any };
 const FORM_TEMP: Form = {
   id: 0,
   path: '',
   desc: '',
   method: 'POST',
   category: '',
-  roleIds: []
-};
+  roleIds: [],
+}
 const {
   isAdd,
   isEdit,
@@ -32,33 +32,33 @@ const {
   clear,
   form,
   formRef,
-  validForm
+  validForm,
 } = useFormMode<Form>(FORM_TEMP, {
   addCbk: async () => {
-    const res = await validForm() as boolean;
+    const res = await validForm() as boolean
     if (res) {
-      const v = deepClone(form.value);
-      await apis.post.addApiItem(v);
-      ElMessage.success('新增成功！');
+      const v = deepClone(form.value)
+      await apis.post.addApiItem(v)
+      ElMessage.success('新增成功！')
     }
-    return res;
+    return res
   },
   modCbk: async () => {
-    const res = await validForm() as boolean;
+    const res = await validForm() as boolean
     if (res) {
-      const v = deepClone(form.value);
-      await apis.patch.changeApiItem(v);
-      ElMessage.success('修改成功！');
+      const v = deepClone(form.value)
+      await apis.patch.changeApiItem(v)
+      ElMessage.success('修改成功！')
     }
-    return res;
+    return res
   },
   delCbk: async (row) => {
-    await apis.delete.deleteApi(row.id.toString());
-    ElMessage.success('删除成功！');
-    query.value.pageNum = 1;
+    await apis.delete.deleteApi(row.id.toString())
+    ElMessage.success('删除成功！')
+    query.value.pageNum = 1
   },
   cgEffect: () => getList(),
-});
+})
 const tableHead: TableHeadItem<Form>[] = [
   { prop: 'id', label: '接口ID' },
   { prop: 'desc', label: '接口描述' },
@@ -66,41 +66,45 @@ const tableHead: TableHeadItem<Form>[] = [
   { prop: 'path', label: '接口路径' },
   { prop: 'creator', label: '创建信息' },
   {
-    prop: 'method', label: '接口方法', render: (row) => h(ElTag, {
+    prop: 'method',
+    label: '接口方法',
+    render: row => h(ElTag, {
       effect: 'dark',
-      type: MethodObj[row.method]
+      type: MethodObj[row.method],
     },
-      {
-        default: () => row.method
-      }
-    )
+    {
+      default: () => row.method,
+    },
+    ),
   },
   {
-    prop: 'op', label: '操作', render: (row) => h('div', [
+    prop: 'op',
+    label: '操作',
+    render: row => h('div', [
       h(ElButton, { type: 'primary', link: true, onClick: () => edit(row) }, { default: () => '编辑' }),
-      h(ElButton, { type: 'danger', link: true, onClick: () => del(row) }, { default: () => '删除' })
-    ])
-  }
-];
-const tableData = ref<TableDataItem<Form>[]>([]);
+      h(ElButton, { type: 'danger', link: true, onClick: () => del(row) }, { default: () => '删除' }),
+    ]),
+  },
+]
+const tableData = ref<TableDataItem<Form>[]>([])
 
-const getList = async () => {
-  const { list: role_list } = await apis.get.getRoleList({ noPagination: true });
+async function getList() {
+  const { list: role_list } = await apis.get.getRoleList({ noPagination: true })
   roleList.value = (role_list || []).map((item: RoleItem) => {
     return {
       label: item.name,
-      value: item.id
-    };
-  });
+      value: item.id,
+    }
+  })
 
-  const { list, pageNum, pageSize, total } = await apis.get.getApiList(query.value);
-  tableData.value = deepClone(list || []);
-  query.value.pageNum = +pageNum || 1;
-  query.value.pageSize = +pageSize || 50;
-  query.value.total = +total || 0;
-};
+  const { list, pageNum, pageSize, total } = await apis.get.getApiList(query.value)
+  tableData.value = deepClone(list || [])
+  query.value.pageNum = +pageNum || 1
+  query.value.pageSize = +pageSize || 50
+  query.value.total = +total || 0
+}
 
-type Query = BaseQuery & Partial<Form>;
+type Query = BaseQuery & Partial<Form>
 const { query, reset } = useQuery<Query>(
   {
     pageNum: 1,
@@ -109,7 +113,7 @@ const { query, reset } = useQuery<Query>(
     path: '',
   },
   getList,
-);
+)
 const queryScheme: YoungSearchScheme<Query> = {
   path: {
     type: 'input',
@@ -118,44 +122,53 @@ const queryScheme: YoungSearchScheme<Query> = {
       placeholder: '请输入接口路径',
     },
   },
-};
+}
 
-const roleList = ref<SelectOptionItem<number>[]>([]);
+const roleList = ref<SelectOptionItem<number>[]>([])
 
-getList();
+useTabReOpen(getList)
 </script>
+
 <template>
   <ElCard>
     <YoungSearchForm v-model="query" :search-scheme="queryScheme" :on-search="getList" :on-reset="reset">
       <template #btns>
-        <ElButton type="success" @click="isAdd = true">添加接口</ElButton>
+        <ElButton type="success" @click="isAdd = true">
+          添加接口
+        </ElButton>
       </template>
     </YoungSearchForm>
   </ElCard>
 
-  <br />
+  <br>
 
   <ElCard>
     <YoungTablePro :table-data="tableData" :table-head="tableHead" />
-    <YoungPagination v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
-      @page-change="getList" />
+    <YoungPagination
+      v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
+      @page-change="getList"
+    />
   </ElCard>
   <YoungDialog :is-add="isAdd" :is-edit="isEdit" :diff-form="form" width="520px" @sure="sure" @clear="clear">
     <template #body>
       <ElForm ref="formRef" :model="form" label-width="100px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
         <ElFormItem label="分组名称" prop="category" :rules="{ required: true, message: '请填写分组名称', trigger: 'blur' }">
-          <ElInput v-model="form.category" class="!w-300px" />
+          <ElInput v-model.trim="form.category" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="接口描述" prop="desc" :rules="{ required: true, message: '请填写接口描述', trigger: 'blur' }">
-          <ElInput v-model="form.desc" class="!w-300px" />
+          <ElInput v-model.trim="form.desc" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="请求方法">
-          <YoungSelect v-model="form.method" class="!w-300px"
-            :options="Object.keys(MethodObj).map((item) => ({ label: item, value: item }))" />
+          <YoungSelect
+            v-model="form.method" class="!w-300px"
+            :options="Object.keys(MethodObj).map((item) => ({ label: item, value: item }))"
+          />
         </ElFormItem>
-        <ElFormItem label="接口路径" prop="path"
-          :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }">
-          <ElInput v-model="form.path" class="!w-300px" />
+        <ElFormItem
+          label="接口路径" prop="path"
+          :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }"
+        >
+          <ElInput v-model.trim="form.path" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="关联角色">
           <YoungSelect v-model="form.roleIds" multiple placeholder="请选择角色" class="!w-300px" :options="roleList" />

package/template-nuxt-admin/pages/system/hooks/useRole.ts

@@ -9,11 +9,11 @@ import type {
   TableDataItem,
   TableHeadItem,
   YoungSearchScheme,
-} from '@bluesyoung/ui-vue3-element-plus';
-import { YoungSelect, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus';
-import { deepClone } from '@bluesyoung/utils';
+} from '@bluesyoung/ui-vue3-element-plus'
+import { YoungSelect, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
+import { deepClone } from '@bluesyoung/utils'
 
-export const useRoleBase = () => {
+export function useRoleBase() {
   const FORM_TEMP: RoleItem = {
     id: 0,
     name: '',
@@ -21,42 +21,42 @@ export const useRoleBase = () => {
     desc: '',
     status: 1,
     sort: 0,
-  };
+  }
 
   const { isAdd, isEdit, edit, del, sure, clear, form, formRef, validForm } = useFormMode(
     FORM_TEMP,
     {
       addCbk: async () => {
-        const res = (await validForm()) as boolean;
+        const res = (await validForm()) as boolean
         if (res) {
-          const v = deepClone(form.value);
-          await apis.post.addRoleItem(v);
-          ElMessage.success('新增成功！');
+          const v = deepClone(form.value)
+          await apis.post.addRoleItem(v)
+          ElMessage.success('新增成功！')
         }
-        return res;
+        return res
       },
       modCbk: async () => {
-        const res = (await validForm()) as boolean;
+        const res = (await validForm()) as boolean
         if (res) {
-          const v = deepClone(form.value);
-          await apis.patch.changeRoleItem(v);
-          ElMessage.success('修改成功！');
+          const v = deepClone(form.value)
+          await apis.patch.changeRoleItem(v)
+          ElMessage.success('修改成功！')
         }
-        return res;
+        return res
       },
       delCbk: async (row) => {
-        await apis.delete.deleteRole(row.id.toString());
-        ElMessage.success('删除成功！');
-        query.value.pageNum = 1;
+        await apis.delete.deleteRole(row.id.toString())
+        ElMessage.success('删除成功！')
+        query.value.pageNum = 1
       },
       cgEffect: () => getList(),
     },
-  );
+  )
 
   const options: SelectOptionItem[] = [
     { label: '禁用', value: 0 },
     { label: '启用', value: 1 },
-  ];
+  ]
 
   const tableHead: TableHeadItem<RoleItem>[] = [
     { label: '角色ID', prop: 'id' },
@@ -67,36 +67,35 @@ export const useRoleBase = () => {
     {
       label: '启用状态',
       prop: 'status',
-      render: (row) =>
+      render: row =>
         h(YoungSelect, {
-          modelValue: row.status,
+          'modelValue': row.status,
           options,
           'onUpdate:modelValue': async (status) => {
             // 状态未修改
-            if (status === row.status) {
-              return;
-            }
+            if (status === row.status)
+              return
 
-            row.status = status as 0 | 1;
-            await apis.patch.changeRoleItem(row);
-            ElMessage.success('修改成功！');
+            row.status = status as 0 | 1
+            await apis.patch.changeRoleItem(row)
+            ElMessage.success('修改成功！')
           },
         }),
     },
-  ];
-  const tableData = ref<TableDataItem<RoleItem>[]>([]);
+  ]
+  const tableData = ref<TableDataItem<RoleItem>[]>([])
   const getList = async () => {
-    const { list, pageNum, pageSize, total } = await apis.get.getRoleList(query.value);
-    tableData.value = deepClone(list || []);
-    query.value.pageNum = +pageNum || 1;
-    query.value.pageSize = +pageSize || 50;
-    query.value.total = +total || 0;
-  };
+    const { list, pageNum, pageSize, total } = await apis.get.getRoleList(query.value)
+    tableData.value = deepClone(list || [])
+    query.value.pageNum = +pageNum || 1
+    query.value.pageSize = +pageSize || 50
+    query.value.total = +total || 0
+  }
 
   interface Query extends BaseQuery {
-    name: string;
-    keyword: string;
-    status: 0 | 1;
+    name: string
+    keyword: string
+    status: 0 | 1
   }
 
   const { query, reset } = useQuery<Query>(
@@ -109,7 +108,7 @@ export const useRoleBase = () => {
       status: 1,
     },
     getList,
-  );
+  )
 
   const queryScheme: YoungSearchScheme<Query> = {
     name: {
@@ -134,7 +133,7 @@ export const useRoleBase = () => {
       },
       options,
     },
-  };
+  }
 
   return {
     query,
@@ -153,37 +152,36 @@ export const useRoleBase = () => {
       sure,
       clear,
     }),
-  };
-};
+  }
+}
 
-export const useRoleMenu = () => {
-  const showPriority = ref(false);
-  const currRole = ref(0);
-  const access = ref<number[]>([]);
-  const origin = ref<number[]>([]);
+export function useRoleMenu() {
+  const showPriority = ref(false)
+  const currRole = ref(0)
+  const access = ref<number[]>([])
+  const origin = ref<number[]>([])
 
   const tableHead = ref<TableHeadItem<NavArrItem>[]>([
     { label: '菜单名称', prop: 'title' },
     { label: '菜单id', prop: 'id' },
     { label: '父节点', prop: 'parentId' },
     { label: '页面路径', prop: 'component' },
-  ]);
-  const tableData = ref<TableDataItem<NavArrItem>[]>([]);
+  ])
+  const tableData = ref<TableDataItem<NavArrItem>[]>([])
 
-  const checkMap = ref<Record<number, boolean>>({});
+  const checkMap = ref<Record<number, boolean>>({})
 
   /**
    * 生成节点映射
    */
-  const nodeMap = new Map<number, NavArrItem>();
+  const nodeMap = new Map<number, NavArrItem>()
   const generateNodeMap = (list: NavArrItem[]) => {
     for (const node of list) {
-      nodeMap.set(node.id, node);
-      if (node.children && node.children?.length > 0) {
-        generateNodeMap(node.children);
-      }
+      nodeMap.set(node.id, node)
+      if (node.children && node.children?.length > 0)
+        generateNodeMap(node.children)
     }
-  };
+  }
 
   /**
    * 多级联动选择
@@ -191,57 +189,58 @@ export const useRoleMenu = () => {
   const selectChange = (item: NavArrItem) => {
     if (item.children && item.children?.length !== 0) {
       item.children.forEach((v) => {
-        checkMap.value[v.id] = checkMap.value[item.id];
-        selectChange(v);
-      });
+        checkMap.value[v.id] = checkMap.value[item.id]
+        selectChange(v)
+      })
     }
     if (checkMap.value[item.id]) {
       while (item.parentId) {
-        const tp = nodeMap.get(item.parentId);
+        const tp = nodeMap.get(item.parentId)
         if (tp) {
-          item = tp;
-          checkMap.value[item.id] = true;
-        } else {
-          break;
+          item = tp
+          checkMap.value[item.id] = true
+        }
+        else {
+          break
         }
       }
     }
-  };
+  }
 
   const edit = async (row: TableDataItem<RoleItem>) => {
-    currRole.value = row.id;
-    checkMap.value = {};
-    nodeMap.clear();
+    currRole.value = row.id
+    checkMap.value = {}
+    nodeMap.clear()
 
-    const { list, accessIds } = await apis.get.getRoleMenuTree(row.id);
+    const { list, accessIds } = await apis.get.getRoleMenuTree(row.id)
     generateNodeMap(list);
     (Array.from(accessIds) as number[]).forEach((v) => {
-      checkMap.value[v] = true;
-    });
-
-    tableData.value = deepClone(list);
-    access.value = accessIds;
-    origin.value = accessIds;
-    showPriority.value = true;
-  };
+      checkMap.value[v] = true
+    })
+
+    tableData.value = deepClone(list)
+    access.value = accessIds
+    origin.value = accessIds
+    showPriority.value = true
+  }
   const clear = () => {
-    showPriority.value = false;
-    currRole.value = 0;
-    tableData.value.length = 0;
-  };
+    showPriority.value = false
+    currRole.value = 0
+    tableData.value.length = 0
+  }
 
   const sure = async () => {
-    const before = origin.value.slice();
+    const before = origin.value.slice()
     const now = Object.entries(checkMap.value)
       .filter(([k, v]) => v)
-      .map(([k, v]) => +k);
+      .map(([k, v]) => +k)
 
-    const add = now.filter((v) => !before.includes(v));
-    const del = before.filter((v) => !now.includes(v));
-    await apis.patch.changeRoleMenu(currRole.value, add, del);
-    ElMessage.success('修改成功！');
-    clear();
-  };
+    const add = now.filter(v => !before.includes(v))
+    const del = before.filter(v => !now.includes(v))
+    await apis.patch.changeRoleMenu(currRole.value, add, del)
+    ElMessage.success('修改成功！')
+    clear()
+  }
 
   return {
     showPriority,
@@ -254,71 +253,71 @@ export const useRoleMenu = () => {
       sure,
       selectChange,
     }),
-  };
-};
+  }
+}
 
-export const useRoleApi = () => {
-  const showApi = ref(false);
-  const currRole = ref(0);
-  const access = ref<number[]>([]);
-  const origin = ref<number[]>([]);
+export function useRoleApi() {
+  const showApi = ref(false)
+  const currRole = ref(0)
+  const access = ref<number[]>([])
+  const origin = ref<number[]>([])
 
   const tableHead = ref<TableHeadItem<ApiItem>[]>([
     { prop: 'desc', label: '接口描述' },
     { prop: 'id', label: '接口ID' },
     { prop: 'method', label: '接口方法' },
     { prop: 'path', label: '请求地址' },
-  ]);
-  const tableData = ref<TableDataItem<ApiItem>[]>([]);
+  ])
+  const tableData = ref<TableDataItem<ApiItem>[]>([])
 
-  const checkMap = ref<Record<number, boolean>>({});
+  const checkMap = ref<Record<number, boolean>>({})
 
   const edit = async (row: TableDataItem<RoleItem>) => {
-    currRole.value = row.id;
-    checkMap.value = {};
+    currRole.value = row.id
+    checkMap.value = {}
 
     const { list, accessIds } = await apis.get.getRoleApis(row.id);
     (Array.from(accessIds) as number[]).forEach((v) => {
-      checkMap.value[v] = true;
-    });
+      checkMap.value[v] = true
+    })
 
     tableData.value = deepClone(
       Array.from(list)
         .map((item: any) => item.children)
         .flat(),
-    );
+    )
 
-    access.value = accessIds;
-    origin.value = accessIds;
-    showApi.value = true;
+    access.value = accessIds
+    origin.value = accessIds
+    showApi.value = true
 
-    isAll.value = tableData.value.length === access.value.length;
-  };
+    isAll.value = tableData.value.length === access.value.length
+  }
   const clear = () => {
-    showApi.value = false;
-    currRole.value = 0;
-    tableData.value.length = 0;
-  };
+    showApi.value = false
+    currRole.value = 0
+    tableData.value.length = 0
+  }
 
   const sure = async () => {
-    const before = origin.value.slice();
+    const before = origin.value.slice()
     const now = Object.entries(checkMap.value)
       .filter(([k, v]) => v)
-      .map(([k, v]) => +k);
+      .map(([k, v]) => +k)
 
-    const add = now.filter((v) => !before.includes(v));
-    const del = before.filter((v) => !now.includes(v));
-    await apis.patch.changeRoleApi(currRole.value, add, del);
-    ElMessage.success('修改成功！');
-    clear();
-  };
+    const add = now.filter(v => !before.includes(v))
+    const del = before.filter(v => !now.includes(v))
+    await apis.patch.changeRoleApi(currRole.value, add, del)
+    ElMessage.success('修改成功！')
+    clear()
+  }
 
-  const isAll = ref(false);
+  const isAll = ref(false)
   const changeAll = () => {
     tableData.value.forEach((i) => {
-      checkMap.value[i.id] = isAll.value;
-    });
-  };
+      checkMap.value[i.id] = isAll.value
+    })
+  }
 
   return {
     showApi,
@@ -332,5 +331,5 @@ export const useRoleApi = () => {
       isAll,
       changeAll,
     }),
-  };
-};
+  }
+}