create-young-proj 0.7.0 → 0.9.0

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

@@ -1,18 +1,18 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:17
- * @LastEditTime: 2023-07-31 14:21:34
+ * @LastEditTime: 2023-08-25 16:55:00
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungTablePro, useFormMode, YoungDialog, YoungSelect } from '@bluesyoung/ui-vue3-element-plus';
-import type { TableHeadItem } from '@bluesyoung/ui-vue3-element-plus';
-import { deepClone, isArray } from '@bluesyoung/utils';
-import { ElButton } from 'element-plus';
+import { YoungDialog, YoungSelect, YoungTablePro, useFormMode } from '@bluesyoung/ui-vue3-element-plus'
+import type { TableHeadItem } from '@bluesyoung/ui-vue3-element-plus'
+import { deepClone, isArray } from '@bluesyoung/utils'
+import { ElButton } from 'element-plus'
 
 definePageMeta({
-  title: '菜单管理'
-});
+  title: '菜单管理',
+})
 
 const FORM_TEMP: NavArrItem = {
   breadcrumb: 0,
@@ -31,64 +31,63 @@ const FORM_TEMP: NavArrItem = {
   status: 1,
   title: '',
   updatedAt: '',
-  visible: 1
-};
+  visible: 1,
+}
 // key 的类型必须为 string 才会生效！！！
-const expandKeys = ref<Set<string>>(new Set());
+const expandKeys = ref<Set<string>>(new Set())
+
+let tempArr: string[] = []
+function getFatherAndSon(arr: NavArrItem[], num?: number): string[] {
+  if (num === 1)
+    tempArr = []
 
-let tempArr: string[] = [];
-const getFatherAndSon = (arr: NavArrItem[], num?: number): string[] => {
-  if (num === 1) {
-    tempArr = [];
-  }
   for (const item of arr) {
-    tempArr.push(item.id + '');
-    if (item.children && isArray(item.children) && item.children.length > 0) {
-      getFatherAndSon(deepClone(item.children));
-    }
+    tempArr.push(`${item.id}`)
+    if (item.children && isArray(item.children) && item.children.length > 0)
+      getFatherAndSon(deepClone(item.children))
   }
-  return tempArr;
-};
-const expandChange = (...args: any) => {
-  const [row, isOpen] = args as [NavArrItem, boolean];
-  const autoid = row.id;
+  return tempArr
+}
+function expandChange(...args: any) {
+  const [row, isOpen] = args as [NavArrItem, boolean]
+  const autoid = row.id
   if (isOpen) {
-    expandKeys.value.add(autoid + '');
-  } else {
-    const allSub = getFatherAndSon([row], 1);
-    allSub.forEach((v) => expandKeys.value.delete(v));
+    expandKeys.value.add(`${autoid}`)
+  }
+  else {
+    const allSub = getFatherAndSon([row], 1)
+    allSub.forEach(v => expandKeys.value.delete(v))
   }
-};
-const tableData = ref<NavArrItem[]>([]);
+}
+const tableData = ref<NavArrItem[]>([])
 
-const topMenuOption = ref<Partial<NavArrItem>[]>([]);
+const topMenuOption = ref<Partial<NavArrItem>[]>([])
 
 /**
  * 生成节点映射
  */
-const nodeMap = new Map<string | number, NavArrItem>();
-const generateNodeMap = (list: NavArrItem[]) => {
+const nodeMap = new Map<string, NavArrItem>()
+function 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.toString(), node)
+    if (node.children && node.children?.length > 0)
+      generateNodeMap(node.children)
   }
-};
+}
 
 /**
  * 获取节点列表
  */
-const getList = async () => {
-  const list = Object.values(await apis.get.getMenuList());
-  generateNodeMap(list);
+async function getList() {
+  const list = Object.values(await apis.get.getMenuList())
+  generateNodeMap(list)
 
-  tableData.value = list;
+  tableData.value = list
 
   topMenuOption.value = [
-    { title: '顶级目录', children: list, id: 0 }
-  ];
-};
+    { title: '顶级目录', children: list, id: 0 },
+  ]
+}
 
 const {
   isAdd,
@@ -99,155 +98,169 @@ const {
   sure,
   clear,
   formRef,
-  validForm
+  validForm,
 } = useFormMode<NavArrItem>(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.addMenuItem(v);
-      ElMessage.success('菜单添加成功！');
+      const v = deepClone(form.value)
+      await apis.post.addMenuItem(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.changeMenuItem(v);
-      ElMessage.success('菜单修改成功！');
+      const v = deepClone(form.value)
+      await apis.patch.changeMenuItem(v)
+      ElMessage.success('菜单修改成功！')
     }
-    return res;
+    return res
   },
   delCbk: async (nav: NavArrItem) => {
-    apis.delete.deleteMenu(nav.id.toString());
-    expandKeys.value.delete(nav.id.toString());
-    ElMessage.success('节点删除成功！');
+    apis.delete.deleteMenu(nav.id.toString())
+    expandKeys.value.delete(nav.id.toString())
+    ElMessage.success('节点删除成功！')
     // 框架有 bug，视图更新不及时
-    location.reload();
+    location.reload()
   },
   cgEffect: async () => {
-    await getList();
-  }
-});
+    await getList()
+  },
+})
 
 /**
  * 添加节点
  */
-const add = () => {
-  form.value.parentId = 0;
-  isAdd.value = true;
-};
+function add() {
+  form.value.parentId = 0
+  isAdd.value = true
+}
 
 const tableHead: TableHeadItem<NavArrItem>[] = [
   {
-    prop: 'title', label: '标题', render: (row) => h('div', { class: 'inline-flex items-center justify-center' }, [
+    prop: 'title',
+    label: '标题',
+    render: row => h('div', { class: 'inline-flex items-center justify-center' }, [
       h('div', { class: row.icon }),
-      h('div', row.title)
-    ])
+      h('div', row.title),
+    ]),
   },
   {
-    prop: 'sort', label: '同级排序', aligin: 'center', render: (row, i) => h('div', {
-      class: 'flex text-2xl justify-center'
+    prop: 'sort',
+    label: '同级排序',
+    aligin: 'center',
+    render: (row, i) => h('div', {
+      class: 'flex text-2xl justify-center',
     }, [
       h('div', {
         class: 'i-ic-round-keyboard-arrow-up cursor-pointer',
         title: '向上',
         onClick: async () => {
-          const arr = nodeMap.get(row.parentId.toString())?.children || [];
-          const index = arr.findIndex((m) => m.id === row.id);
+          const arr = nodeMap.get(row.parentId.toString())?.children || []
+          const index = arr.findIndex(m => m.id === row.id)
           if (index <= 0) {
-            return ElMessage.warning('已经到最前面啦！');
-          } else {
-            const pre = arr[index - 1];
+            return ElMessage.warning('已经到最前面啦！')
+          }
+          else {
+            const pre = arr[index - 1]
 
-            const num = row.sort;
-            const preNum = pre.sort;
+            const num = row.sort
+            const preNum = pre.sort
 
             if (num !== preNum) {
-              row.sort = preNum;
-              pre.sort = num;
-            } else {
-              row.sort = num - 1;
+              row.sort = preNum
+              pre.sort = num
+            }
+            else {
+              row.sort = num - 1
             }
             await Promise.all([
               apis.patch.changeMenuItem(row),
               apis.patch.changeMenuItem(pre),
-            ]);
-            ElMessage.success('顺序修改成功！');
-            getList();
+            ])
+            ElMessage.success('顺序修改成功！')
+            getList()
           }
-        }
+        },
       }),
       h('div', {
         class: 'i-ic-round-keyboard-arrow-down cursor-pointer',
         title: '向下',
         onClick: async () => {
-          const arr = nodeMap.get(row.parentId.toString())?.children || [];
-          const index = arr.findIndex((m) => m.id === row.id);
+          const arr = nodeMap.get(row.parentId.toString())?.children || []
+          const index = arr.findIndex(m => m.id === row.id)
           if (index === arr.length - 1) {
-            return ElMessage.warning('已经到最后面啦！');
-          } else {
-            const next = arr[index + 1];
+            return ElMessage.warning('已经到最后面啦！')
+          }
+          else {
+            const next = arr[index + 1]
 
-            const num = row.sort;
-            const nextNum = next.sort;
+            const num = row.sort
+            const nextNum = next.sort
 
             if (num !== nextNum) {
-              row.sort = nextNum;
-              next.sort = num;
-            } else {
-              row.sort = num + 1;
+              row.sort = nextNum
+              next.sort = num
+            }
+            else {
+              row.sort = num + 1
             }
             await Promise.all([
               apis.patch.changeMenuItem(row),
               apis.patch.changeMenuItem(next),
-            ]);
-            ElMessage.success('顺序修改成功！');
-            getList();
+            ])
+            ElMessage.success('顺序修改成功！')
+            getList()
           }
-        }
+        },
       }),
-    ])
+    ]),
   },
   { prop: 'component', label: '页面路径' },
   {
-    prop: 'visible', label: '隐藏/显示', render: (row) => h(YoungSelect, {
-      modelValue: row.visible,
-      options: [{ label: '显示', value: 1 }, { label: '隐藏', value: 0 }],
+    prop: 'visible',
+    label: '隐藏/显示',
+    render: row => h(YoungSelect, {
+      'modelValue': row.visible,
+      'options': [{ label: '显示', value: 1 }, { label: '隐藏', value: 0 }],
       'onUpdate:modelValue': async (e: number) => {
         // 状态未修改
-        if (e === row.visible) {
-          return;
-        }
+        if (e === row.visible)
+          return
 
-        row.visible = e;
-        await apis.patch.changeMenuItem({ ...row, visible: e });
-        ElMessage.success('菜单修改成功！');
-      }
-    })
+        row.visible = e
+        await apis.patch.changeMenuItem({ ...row, visible: e })
+        ElMessage.success('菜单修改成功！')
+      },
+    }),
   },
   { prop: 'creator', label: '创建时间' },
   {
-    prop: 'id', label: '操作', fixed: 'right', width: '180', render: (row) => h('div', [
+    prop: 'id',
+    label: '操作',
+    fixed: 'right',
+    width: '180',
+    render: row => h('div', [
       h(ElButton, {
         text: true,
         class: '!p-0',
         type: 'primary',
         onClick: () => edit(row),
       }, {
-        default: () => h('div', '编辑')
+        default: () => h('div', '编辑'),
       }),
       h(ElButton, {
         type: 'primary',
         class: '!p-0',
         text: true,
         onClick: () => {
-          form.value.parentId = row.id;
-          isAdd.value = true;
+          form.value.parentId = row.id
+          isAdd.value = true
         },
       }, {
-        default: () => h('div', '添加子节点')
+        default: () => h('div', '添加子节点'),
       }),
       h(ElButton, {
         text: true,
@@ -255,66 +268,78 @@ const tableHead: TableHeadItem<NavArrItem>[] = [
         type: 'danger',
         onClick: () => del(row),
       }, {
-        default: () => h('div', '删除')
-      })
-    ])
-  }
-];
+        default: () => h('div', '删除'),
+      }),
+    ]),
+  },
+]
 
-getList();
+useTabReOpen(getList)
 </script>
 
 <template>
   <ElCard>
     <div>
-      <ElButton type="primary" plain @click="add">新建菜单</ElButton>
+      <ElButton type="primary" plain @click="add">
+        新建菜单
+      </ElButton>
     </div>
-    <br />
+    <br>
     <!-- 节点列表 -->
-    <YoungTablePro :table-data="tableData" :table-head="tableHead" :tree-props="{ children: 'children' }" row-key="id"
-      :expand-row-keys="[...expandKeys]" @expand-change="expandChange" />
+    <YoungTablePro
+      :table-data="tableData" :table-head="tableHead" :tree-props="{ children: 'children' }" row-key="id"
+      :expand-row-keys="[...expandKeys]" @expand-change="expandChange"
+    />
     <!-- 添加 / 编辑 -->
     <YoungDialog width="370px" :is-add="isAdd" :diff-form="form" :is-edit="isEdit" @sure="sure" @clear="clear">
       <template #body>
         <ElForm ref="formRef" :model="form" label-width="80px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
           <ElFormItem label="上级目录">
-            <ElCascader :model-value="form.parentId" :props="{
-              label: 'title',
-              value: 'id',
-              checkStrictly: true,
-              multiple: false
-            }" :options="topMenuOption" :show-all-levels="false"
-              @update:model-value="(e: any) => form.parentId = e[e.length - 1]" />
+            <ElCascader
+              :model-value="form.parentId" :props="{
+                label: 'title',
+                value: 'id',
+                checkStrictly: true,
+                multiple: false,
+              }" :options="topMenuOption" :show-all-levels="false"
+              @update:model-value="(e: any) => form.parentId = e[e.length - 1]"
+            />
           </ElFormItem>
           <ElFormItem label="英文名称" prop="name" :rules="{ required: true, message: '请输入英文名', trigger: 'blur' }">
-            <ElInput v-model="form.name" placeholder="请输入英文名" />
+            <ElInput v-model.trim="form.name" placeholder="请输入英文名" />
           </ElFormItem>
           <ElFormItem label="标题" prop="title" :rules="{ required: true, message: '请输入页面标题', trigger: 'blur' }">
-            <ElInput v-model="form.title" placeholder="请输入页面标题" />
+            <ElInput v-model.trim="form.title" placeholder="请输入页面标题" />
           </ElFormItem>
           <ElFormItem label="图标">
             <ElSelect v-model="form.icon" class="select_icon" placeholder="请选择图标">
               <template #prefix>
                 <div :class="form.icon" />
               </template>
-              <ElOption v-for="(item, index) in MenuIconList" :key="index + 'sfjhaeoir'" :value="item.label">
+              <ElOption v-for="(item, index) in MenuIconList" :key="`${index}sfjhaeoir`" :value="item.label">
                 <div :class="item.label" />
               </ElOption>
             </ElSelect>
           </ElFormItem>
           <ElFormItem label="排序">
-            <ElInput v-model.number="form.sort" />
+            <ElInputNumber v-model.number="form.sort" />
           </ElFormItem>
           <ElFormItem label="是否显示">
             <ElRadioGroup v-model="form.visible">
-              <ElRadio :label="1">显示</ElRadio>
-              <ElRadio :label="0">隐藏</ElRadio>
+              <ElRadio :label="1">
+                显示
+              </ElRadio>
+              <ElRadio :label="0">
+                隐藏
+              </ElRadio>
             </ElRadioGroup>
           </ElFormItem>
-          <ElFormItem label="路径" prop="component" :rules="form.parentId === 0 ? {} :
-            { message: '请输入合法的路径, eg: /path/page', trigger: 'blur', validator: (_: any, v: string) => v.trim() === '' || /\/(.*)\/(.*)/.test(v) }
-            ">
-            <ElInput v-model="form.component" />
+          <ElFormItem
+            label="路径" prop="component" :rules="form.parentId === 0 ? {}
+              : { message: '请输入合法的路径, eg: /path/page', trigger: 'blur', validator: (_: any, v: string) => v.trim() === '' || /\/(.*)\/(.*)/.test(v) }
+            "
+          >
+            <ElInput v-model.trim="form.component" />
           </ElFormItem>
         </ElForm>
       </template>

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

@@ -1,16 +1,16 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:39
- * @LastEditTime: 2023-07-31 11:05:49
+ * @LastEditTime: 2023-08-25 16:55:10
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungTablePro, YoungDialog, YoungPagination, YoungSearchForm } from '@bluesyoung/ui-vue3-element-plus';
-import { useRoleApi, useRoleBase, useRoleMenu } from './hooks/useRole';
+import { YoungDialog, YoungPagination, YoungSearchForm, YoungTablePro } from '@bluesyoung/ui-vue3-element-plus'
+import { useRoleApi, useRoleBase, useRoleMenu } from './hooks/useRole'
 
 definePageMeta({
-  title: '角色管理'
-});
+  title: '角色管理',
+})
 
 const {
   query,
@@ -20,97 +20,125 @@ const {
   tableHead,
   tableData,
   baseFormRef,
-  base
-} = useRoleBase();
+  base,
+} = useRoleBase()
 
-const { showPriority, menu } = useRoleMenu();
+const { showPriority, menu } = useRoleMenu()
 
-const { showApi, api } = useRoleApi();
+const { showApi, api } = useRoleApi()
 
-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="base.isAdd = true">添加角色</ElButton>
+        <ElButton type="success" @click="base.isAdd = true">
+          添加角色
+        </ElButton>
       </template>
     </YoungSearchForm>
   </ElCard>
 
-  <br />
+  <br>
 
   <ElCard>
     <YoungTablePro :table-data="tableData" :table-head="tableHead">
       <template #operate>
         <ElTableColumn label="操作" width="300px" fixed="right">
           <template #default="scope">
-            <ElButton type="primary" link @click="base.edit(scope.row)">信息编辑</ElButton>
-            <ElButton type="primary" link @click="menu.edit(scope.row)">菜单编辑</ElButton>
-            <ElButton type="primary" link @click="api.edit(scope.row)">接口编辑</ElButton>
-            <ElButton type="danger" link @click="base.del(scope.row)">删除</ElButton>
+            <ElButton type="primary" link @click="base.edit(scope.row)">
+              信息编辑
+            </ElButton>
+            <ElButton type="primary" link @click="menu.edit(scope.row)">
+              菜单编辑
+            </ElButton>
+            <ElButton type="primary" link @click="api.edit(scope.row)">
+              接口编辑
+            </ElButton>
+            <ElButton type="danger" link @click="base.del(scope.row)">
+              删除
+            </ElButton>
           </template>
         </ElTableColumn>
       </template>
     </YoungTablePro>
-    <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="base.isAdd" :diff-form="base.form" :is-edit="base.isEdit" width="520px" @sure="base.sure"
-    @clear="base.clear">
+  <YoungDialog
+    :is-add="base.isAdd" :diff-form="base.form" :is-edit="base.isEdit" width="520px" @sure="base.sure"
+    @clear="base.clear"
+  >
     <template #body>
-      <ElForm ref="baseFormRef" :model="base.form" label-width="120px"
-        :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
+      <ElForm
+        ref="baseFormRef" :model="base.form" label-width="120px"
+        :label-position="WindowSize['lt-lg'] ? 'top' : 'left'"
+      >
         <ElFormItem label="角色名称(中文)" prop="name" :rules="[{ required: true, message: '请填写角色名称', trigger: 'blur' }]">
-          <ElInput v-model="base.form.name" class="!w-300px" />
+          <ElInput v-model.trim="base.form.name" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="关键字(英文)" prop="keyword" :rules="[{ required: true, message: '请填写关键字', trigger: 'blur' }]">
-          <ElInput v-model="base.form.keyword" class="!w-300px" />
+          <ElInput v-model.trim="base.form.keyword" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="角色描述">
-          <ElInput v-model="base.form.desc" class="!w-300px" />
+          <ElInput v-model.trim="base.form.desc" class="!w-300px" />
         </ElFormItem>
       </ElForm>
     </template>
   </YoungDialog>
   <!-- 菜单编辑 -->
-  <YoungDialog real-title="菜单编辑" :diff-form="menu.checkMap" :is-edit="showPriority" top="5vh" width="1200px"
-    @sure="menu.sure" @clear="menu.clear">
+  <YoungDialog
+    real-title="菜单编辑" :diff-form="menu.checkMap" :is-edit="showPriority" top="5vh" width="1200px"
+    @sure="menu.sure" @clear="menu.clear"
+  >
     <template #body>
       <ElTable :data="menu.tableData" row-key="id" :default-expand-all="false" class="max-h-600px !overflow-y-auto">
         <ElTableColumn prop="name" label="节点名称" width="320px">
           <template #default="scope">
-            <ElCheckbox v-model="menu.checkMap[scope.row.id]" @change="menu.selectChange(scope.row)">{{
-              scope.row.title
-            }}</ElCheckbox>
+            <ElCheckbox v-model="menu.checkMap[scope.row.id]" @change="menu.selectChange(scope.row)">
+              {{
+                scope.row.title
+              }}
+            </ElCheckbox>
           </template>
         </ElTableColumn>
-        <ElTableColumn v-for="(item, index) in menu.tableHead" v-bind="item" :key="index + 'fsdjhfaer'" />
+        <ElTableColumn v-for="(item, index) in menu.tableHead" v-bind="item" :key="`${index}fsdjhfaer`" />
         <ElTableColumn prop="name" label="隐藏/显示">
           <template #default="scope">
-            <ElSwitch v-model="scope.row.visible" :active-value="1" :inactive-value="0" active-color="#409EFF"
-              inactive-color="#909399" disabled />
+            <ElSwitch
+              v-model="scope.row.visible" :active-value="1" :inactive-value="0" active-color="#409EFF"
+              inactive-color="#909399" disabled
+            />
           </template>
         </ElTableColumn>
       </ElTable>
     </template>
   </YoungDialog>
   <!-- 接口编辑 -->
-  <YoungDialog real-title="接口编辑" :diff-form="api.checkMap" :is-edit="showApi" top="5vh" width="1200px" @sure="api.sure"
-    @clear="api.clear">
+  <YoungDialog
+    real-title="接口编辑" :diff-form="api.checkMap" :is-edit="showApi" top="5vh" width="1200px" @sure="api.sure"
+    @clear="api.clear"
+  >
     <template #body>
       <ElTable :data="api.tableData" row-key="id" :default-expand-all="false" class="max-h-600px !overflow-y-auto">
         <ElTableColumn prop="name" width="100px">
           <template #header>
-            <ElCheckbox v-model="api.isAll" @change="api.changeAll">全选</ElCheckbox>
+            <ElCheckbox v-model="api.isAll" @change="api.changeAll">
+              全选
+            </ElCheckbox>
           </template>
           <template #default="scope">
-            <ElCheckbox v-model="api.checkMap[scope.row.id]">{{ scope.row.title }}</ElCheckbox>
+            <ElCheckbox v-model="api.checkMap[scope.row.id]">
+              {{ scope.row.title }}
+            </ElCheckbox>
           </template>
         </ElTableColumn>
-        <ElTableColumn v-for="(item, index) in api.tableHead" v-bind="item" :key="index + 'fsdjhfaer'" />
+        <ElTableColumn v-for="(item, index) in api.tableHead" v-bind="item" :key="`${index}fsdjhfaer`" />
       </ElTable>
     </template>
   </YoungDialog>