发布代码生成、更新20+表单组件，优化数据字典，gf版本更新到2.3.1

web/src/views/permission/menu/CreateDrawer.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" :mask-closable="false">
     <n-drawer-content :title="title" closable>
       <n-form
         :model="formParams"
@@ -19,12 +19,7 @@
             />
           </n-radio-group>
         </n-form-item>
-        <n-form-item
-          :label="
-            formParams.type === 1 ? '上级目录' : formParams.type === 2 ? '上级菜单' : '上级按钮'
-          "
-          path="pid"
-        >
+        <n-form-item label="上级目录" path="pid">
           <n-tree-select
             :options="optionTreeData"
             default-value="0"
@@ -37,102 +32,85 @@
           "
           path="title"
         >
-          <n-input
-            :placeholder="
-              formParams.type === 1 ? '目录名称' : formParams.type === 2 ? '菜单名称' : '按钮名称'
-            "
-            v-model:value="formParams.title"
-          />
-        </n-form-item>
-        <n-form-item label="" path="icon">
-          <div style="width: 120px">
-            <span>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                </template>
-                请填写图标编码，可以参考图标库，也可以不填使用默认图标
-              </n-tooltip>
-              <span>&nbsp;&nbsp;图标 </span>
-            </span>
-          </div>
-          <n-input placeholder="图标映射路径" v-model:value="formParams.icon" />
-        </n-form-item>
-        <n-form-item label="" path="path">
-          <div style="width: 120px">
-            <span>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                </template>
-                路由地址，如：user
-              </n-tooltip>
-              <span>&nbsp;&nbsp;路由地址 </span>
-            </span>
-          </div>
-          <n-input placeholder="路由地址" v-model:value="formParams.path" />
-        </n-form-item>
-        <n-form-item label="" path="name">
-          <div style="width: 120px">
-            <span>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                </template>
-                对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
-              </n-tooltip>
-              <span>&nbsp;&nbsp;路由别名 </span>
-            </span>
-          </div>
-          <n-input placeholder="路由别名" v-model:value="formParams.name" />
-        </n-form-item>
-        <n-form-item label="" path="component">
-          <div style="width: 120px">
-            <span>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                </template>
-                访问的组件路径，如：`/system/menu/menu`，默认在`views`目录下，默认 `LAYOUT`
-                如果是多级菜单 `ParentLayout`
-              </n-tooltip>
-              <span>&nbsp;&nbsp;组件路径 </span>
-            </span>
-          </div>
-          <n-input placeholder="组件路径" v-model:value="formParams.component" />
-        </n-form-item>
-        <n-form-item label="" path="redirect" v-show="formParams.type === 1">
-          <div style="width: 120px">
-            <span>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                </template>
-                默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
-              </n-tooltip>
-              <span>&nbsp;&nbsp;默认跳转 </span>
-            </span>
-          </div>
-          <n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
-        </n-form-item>
-        <n-divider title-placement="left">功能设置</n-divider>
-        <n-form-item label="API权限" path="permissions">
-          <n-input
-            placeholder="请输入API权限，多个权限用,分割"
-            v-model:value="formParams.permissions"
-          />
-        </n-form-item>
-        <!--        <n-form-item label="权限名称" path="permissionName">-->
-        <!--          <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
-        <!--        </n-form-item>-->
-        <n-form-item label="高亮路由" path="activeMenu">
-          <n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
-        </n-form-item>
-        <n-form-item label="排序" path="sort">
-          <n-input-number v-model:value="formParams.sort" clearable />
+          <n-input placeholder="请输入" v-model:value="formParams.title" />
         </n-form-item>
 
-        <n-grid x-gap="24" :cols="2">
+        <n-form-item path="icon" v-if="formParams.type !== 3">
+          <IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
+          <template #label>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+              </template>
+              请填写图标编码，可以参考图标库，也可以不填使用默认图标
+            </n-tooltip>
+            菜单图标</template
+          >
+        </n-form-item>
+        <n-form-item path="path" v-if="formParams.type !== 3">
+          <n-input placeholder="路由地址" v-model:value="formParams.path" />
+          <template #label>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+              </template>
+              请路由地址，如：user
+            </n-tooltip>
+            路由地址</template
+          >
+        </n-form-item>
+        <n-form-item path="name">
+          <n-input placeholder="路由别名" v-model:value="formParams.name" />
+          <template #label>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+              </template>
+              对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
+            </n-tooltip>
+            路由别名</template
+          >
+        </n-form-item>
+        <n-form-item label="组件路径" path="component" v-if="formParams.type !== 3">
+          <n-input placeholder="组件路径" v-model:value="formParams.component" />
+          <template #feedback>
+            主目录填 `LAYOUT`;多级父目录填
+            `ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
+          >
+        </n-form-item>
+        <n-form-item label="默认跳转" path="redirect" v-if="formParams.type === 1">
+          <n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
+          <template #feedback
+            >默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
+          >
+        </n-form-item>
+        <n-divider title-placement="left">功能设置</n-divider>
+        <n-form-item label="分配权限" path="permissions">
+          <n-input
+            placeholder="请输入分配权限，多个权限用,分割"
+            v-model:value="formParams.permissions"
+          />
+          <template #label>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+              </template>
+              请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
+            </n-tooltip>
+            分配权限</template
+          >
+        </n-form-item>
+        <!--                <n-form-item label="权限名称" path="permissionName">-->
+        <!--                  <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
+        <!--                </n-form-item>-->
+        <n-form-item label="高亮路由" path="activeMenu" v-if="formParams.type !== 3">
+          <n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
+        </n-form-item>
+        <n-form-item label="菜单排序" path="sort">
+          <n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
+        </n-form-item>
+
+        <n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
           <n-gi>
             <n-form-item label="根路由" path="isRoot">
               <n-radio-group v-model:value="formParams.isRoot" name="isRoot">
@@ -159,7 +137,7 @@
           </n-gi>
         </n-grid>
 
-        <n-grid x-gap="24" :cols="2">
+        <n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
           <n-gi>
             <n-form-item label="缓存路由" path="keepAlive">
               <n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
@@ -186,7 +164,7 @@
           </n-gi>
         </n-grid>
 
-        <n-grid x-gap="24" :cols="2">
+        <n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
           <n-gi>
             <n-form-item label="是否外链" path="isFrame">
               <n-radio-group v-model:value="formParams.isFrame" name="isFrame">
@@ -200,33 +178,29 @@
             </n-form-item>
           </n-gi>
           <n-gi>
-            <n-form-item label="状态" path="status">
-              <n-radio-group v-model:value="formParams.status" name="status">
-                <n-radio-button
-                  v-for="status in statusMap"
-                  :key="status.value"
-                  :value="status.value"
-                  :label="status.label"
-                />
-              </n-radio-group>
+            <n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
+              <n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
             </n-form-item>
           </n-gi>
         </n-grid>
 
-        <n-grid x-gap="24" :cols="2">
-          <n-gi>
-            <n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === true">
-              <n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
-            </n-form-item>
-          </n-gi>
-          <n-gi />
-        </n-grid>
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="formParams.status" name="status">
+            <n-radio-button
+              v-for="status in statusMap"
+              :key="status.value"
+              :value="status.value"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
       </n-form>
 
       <template #footer>
         <n-space>
-          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
+          <n-button type="primary" :loading="subLoading" @click="formSubmit">确认添加</n-button>
           <n-button @click="handleReset">重置</n-button>
+          <n-button @click="closeDrawer">取消</n-button>
         </n-space>
       </template>
     </n-drawer-content>
@@ -235,9 +209,10 @@
 
 <script lang="ts">
   import { defineComponent, reactive, ref, toRefs } from 'vue';
-  import { TreeSelectOption, useMessage } from 'naive-ui';
+  import { FormItemRule, TreeSelectOption, useMessage } from 'naive-ui';
   import { QuestionCircleOutlined } from '@vicons/antd';
   import { EditMenu } from '@/api/system/menu';
+  import { newState } from '@/views/permission/menu/model';
 
   const menuTypes = [
     {
@@ -295,18 +270,6 @@
     return s;
   });
 
-  const rules = {
-    label: {
-      required: true,
-      message: '请输入标题',
-      trigger: 'blur',
-    },
-    path: {
-      required: true,
-      message: '请输入路径',
-      trigger: 'blur',
-    },
-  };
   export default defineComponent({
     name: 'CreateDrawer',
     components: {},
@@ -316,8 +279,7 @@
         default: '添加顶级菜单',
       },
       optionTreeData: {
-        type: Object,
-        // eslint-disable-next-line vue/require-valid-default-prop
+        type: Object || Array,
         default: [],
       },
     },
@@ -325,47 +287,42 @@
     setup(_props, context) {
       const message = useMessage();
       const formRef: any = ref(null);
-      const defaultValueRef = () => ({
-        id: 0,
-        pid: 0,
-        title: '',
-        name: '',
-        path: '',
-        label: '',
-        icon: '',
-        type: 1,
-        redirect: '',
-        permissions: '',
-        permissionName: '',
-        component: '',
-        alwaysShow: 1,
-        activeMenu: '',
-        isRoot: 0,
-        isFrame: 0,
-        frameSrc: '',
-        keepAlive: 0,
-        hidden: 0,
-        affix: 0,
-        status: 1,
-        sort: 10,
-      });
-
-      const state = reactive({
+      const state = reactive<any>({
         width: 700,
         isDrawer: false,
         subLoading: false,
-        formParams: defaultValueRef(),
+        formParams: newState(null),
         placement: 'right',
-        icon: '',
-        alertText:
-          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
       });
+      const rules = {
+        title: {
+          required: true,
+          message: '请输入名称',
+          trigger: 'blur',
+        },
+        label: {
+          required: true,
+          message: '请输入标题',
+          trigger: 'blur',
+        },
+        path: {
+          required: false,
+          message: '请输入路由地址',
+          trigger: 'blur',
+          validator: function (_rule: FormItemRule, value: any, callback: Function) {
+            if (state.formParams.type != 3 && !value) {
+              callback(new Error('请输入路由地址'));
+            }
+          },
+        },
+      };
 
       function openDrawer() {
         if (document.body.clientWidth < 700) {
           state.width = document.body.clientWidth;
         }
         state.isDrawer = true;
+        state.formParams = newState(null);
       }
 
       function closeDrawer() {
@@ -375,17 +332,17 @@
       function formSubmit() {
         formRef.value.validate((errors) => {
           if (!errors) {
-            console.log('state.formParams:' + JSON.stringify(state.formParams));
+            state.subLoading = true;
             EditMenu({ ...state.formParams })
               .then(async (_res) => {
-                console.log('_res:' + JSON.stringify(_res));
+                state.subLoading = false;
                 message.success('操作成功');
                 handleReset();
                 await context.emit('loadData');
                 closeDrawer();
               })
-              .catch((e: Error) => {
-                message.error(e.message ?? '操作失败');
+              .catch((_e: Error) => {
+                state.subLoading = false;
               });
           } else {
             message.error('请填写完整信息');
@@ -395,15 +352,14 @@
 
       function handleReset() {
         formRef.value.restoreValidation();
-        state.formParams = Object.assign(state.formParams, defaultValueRef());
+        state.formParams = newState(null);
       }
 
       // 处理选项更新
       function handleUpdateValue(
         value: string | number | Array<string | number> | null,
-        option: TreeSelectOption | null | Array<TreeSelectOption | null>
+        _option: TreeSelectOption | null | Array<TreeSelectOption | null>
       ) {
-        console.log(value, option);
         state.formParams.pid = value;
       }
 

web/src/views/permission/menu/menu.vue

@@ -1,27 +1,16 @@
 <template>
   <div>
     <div class="n-layout-page-header">
-      <n-card :bordered="false" title="菜单管理"> 在这里可以管理编辑系统下的所有菜单导航</n-card>
+      <n-card :bordered="false" title="菜单管理">
+        在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限</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: true }" :bordered="false" size="small">
           <template #header>
             <n-space>
-              <!--              <n-dropdown trigger="hover" @select="selectAddMenu" :options="addMenuOptions">-->
-              <!--                <n-button type="info" ghost icon-placement="right">-->
-              <!--                  添加菜单-->
-              <!--                  <template #icon>-->
-              <!--                    <div class="flex items-center">-->
-              <!--                      <n-icon size="14">-->
-              <!--                        <DownOutlined />-->
-              <!--                      </n-icon>-->
-              <!--                    </div>-->
-              <!--                  </template>-->
-              <!--                </n-button>-->
-              <!--              </n-dropdown>-->
-
-              <n-button type="info" ghost icon-placement="left" @click="openCreateDrawer">
+              <n-button type="info" icon-placement="left" @click="openCreateDrawer">
                 <template #icon>
                   <div class="flex items-center">
                     <n-icon size="14">
@@ -31,7 +20,7 @@
                 </template>
                 添加菜单
               </n-button>
-              <n-button type="info" ghost icon-placement="left" @click="packHandle">
+              <n-button type="primary" icon-placement="left" @click="packHandle">
                 全部{{ expandedKeys.length ? '收起' : '展开' }}
                 <template #icon>
                   <div class="flex items-center">
@@ -88,7 +77,6 @@
               }}</span>
             </n-space>
           </template>
-          <!--          <n-alert type="info" closable> 从菜单列表选择一项后，进行编辑</n-alert>-->
           <n-form
             :model="formParams"
             :rules="rules"
@@ -100,7 +88,7 @@
           >
             <n-divider title-placement="left">基本设置</n-divider>
 
-            <n-grid x-gap="24" :cols="2">
+            <n-grid cols="2 300:1 600:2">
               <n-gi>
                 <n-form-item label="类型" path="type">
                   <n-radio-group v-model:value="formParams.type" name="type">
@@ -114,16 +102,7 @@
                 </n-form-item>
               </n-gi>
               <n-gi>
-                <n-form-item
-                  :label="
-                    formParams.type === 1
-                      ? '上级目录'
-                      : formParams.type === 2
-                      ? '上级菜单'
-                      : '上级按钮'
-                  "
-                  path="pid"
-                >
+                <n-form-item label="上级目录" path="pid">
                   <n-tree-select
                     :options="optionTreeData"
                     :value="formParams.pid"
@@ -133,7 +112,7 @@
               </n-gi>
             </n-grid>
 
-            <n-grid x-gap="24" :cols="2">
+            <n-grid cols="2 300:1 600:2">
               <n-gi>
                 <n-form-item
                   :label="
@@ -145,132 +124,119 @@
                   "
                   path="title"
                 >
-                  <n-input
-                    :placeholder="
-                      formParams.type === 1
-                        ? '目录名称'
-                        : formParams.type === 2
-                        ? '菜单名称'
-                        : '按钮名称'
-                    "
-                    v-model:value="formParams.title"
-                  />
+                  <n-input placeholder="请输入" v-model:value="formParams.title" />
                 </n-form-item>
               </n-gi>
-              <n-gi>
-                <n-form-item label="" path="icon">
-                  <div style="width: 120px">
-                    <span>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                        </template>
-                        请填写图标编码，可以参考图标库，也可以不填使用默认图标
-                      </n-tooltip>
-                      <span>&nbsp;&nbsp;图标 </span>
-                    </span>
-                  </div>
-                  <n-input placeholder="图标映射路径" v-model:value="formParams.icon" />
+              <n-gi v-if="formParams.type !== 3">
+                <n-form-item path="icon">
+                  <IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
+                  <template #label>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                      </template>
+                      请填写图标编码，可以参考图标库，也可以不填使用默认图标
+                    </n-tooltip>
+                    菜单图标</template
+                  >
                 </n-form-item>
               </n-gi>
             </n-grid>
 
-            <n-grid x-gap="24" :cols="2">
-              <n-gi>
-                <n-form-item label="" path="path">
-                  <div style="width: 120px">
-                    <span>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                        </template>
-                        路由地址，如：user
-                      </n-tooltip>
-                      <span>&nbsp;&nbsp;路由地址 </span>
-                    </span>
-                  </div>
+            <n-grid cols="2 300:1 600:2">
+              <n-gi v-if="formParams.type !== 3">
+                <n-form-item path="path">
                   <n-input placeholder="路由地址" v-model:value="formParams.path" />
+                  <template #label>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                      </template>
+                      请路由地址，如：user
+                    </n-tooltip>
+                    路由地址</template
+                  >
                 </n-form-item>
               </n-gi>
               <n-gi>
-                <n-form-item label="" path="name">
-                  <div style="width: 120px">
-                    <span>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                        </template>
-                        对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
-                        则会新窗口打开
-                      </n-tooltip>
-                      <span>&nbsp;&nbsp;路由别名 </span>
-                    </span>
-                  </div>
+                <n-form-item path="name">
                   <n-input placeholder="路由别名" v-model:value="formParams.name" />
+                  <template #label>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                      </template>
+                      对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
+                      则会新窗口打开
+                    </n-tooltip>
+                    路由别名</template
+                  >
                 </n-form-item>
               </n-gi>
             </n-grid>
 
-            <n-grid x-gap="24" :cols="2">
+            <n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
               <n-gi>
-                <n-form-item label="" path="component">
-                  <div style="width: 120px">
-                    <span>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                        </template>
-                        访问的组件路径，如：`/system/menu/menu`，默认在`views`目录下，默认 `LAYOUT`
-                        如果是多级菜单 `ParentLayout`
-                      </n-tooltip>
-                      <span>&nbsp;&nbsp;组件路径 </span>
-                    </span>
-                  </div>
+                <n-form-item label="组件路径" path="component">
                   <n-input placeholder="组件路径" v-model:value="formParams.component" />
+                  <template #feedback>
+                    主目录填 `LAYOUT`;多级父目录填
+                    `ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
+                  >
                 </n-form-item>
               </n-gi>
-              <n-gi>
-                <n-form-item label="" path="redirect">
-                  <div style="width: 120px">
-                    <span>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
-                        </template>
-                        默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
-                      </n-tooltip>
-                      <span>&nbsp;&nbsp;默认跳转 </span>
-                    </span>
-                  </div>
+              <n-gi v-if="formParams.type === 1">
+                <n-form-item label="默认跳转" path="redirect">
                   <n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
+                  <template #feedback
+                    >默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
+                  >
                 </n-form-item>
               </n-gi>
             </n-grid>
 
             <n-divider title-placement="left">功能设置</n-divider>
-            <n-form-item label="排序" path="sort">
-              <n-input-number v-model:value="formParams.sort" clearable />
-            </n-form-item>
-            <n-grid x-gap="24" :cols="2">
+
+            <n-grid cols="1 ">
               <n-gi>
-                <n-form-item label="API权限" path="permissions">
+                <n-form-item label="分配权限" path="permissions">
                   <n-input
-                    placeholder="请输入API权限，多个权限用,分割"
+                    placeholder="请输入分配权限，多个权限用,分割"
                     v-model:value="formParams.permissions"
                   />
+                  <template #label>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                      </template>
+                      请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
+                    </n-tooltip>
+                    分配权限</template
+                  >
                 </n-form-item>
               </n-gi>
-              <n-gi>
-                <!--                <n-form-item label="权限名称" path="permissionName">-->
-                <!--                  <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
-                <!--                </n-form-item>-->
+              <!--              <n-gi>-->
+              <!--                <n-form-item label="权限名称" path="permissionName">-->
+              <!--                  <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
+              <!--                  <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</template>-->
+              <!--                </n-form-item>-->
+              <!--              </n-gi>-->
+            </n-grid>
+
+            <n-grid cols="2 300:1 600:2">
+              <n-gi v-if="formParams.type !== 3">
                 <n-form-item label="高亮路由" path="activeMenu">
                   <n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
                 </n-form-item>
               </n-gi>
+              <n-gi>
+                <n-form-item label="菜单排序" path="sort">
+                  <n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
+                </n-form-item>
+              </n-gi>
             </n-grid>
 
-            <n-grid x-gap="24" :cols="4">
+            <n-grid cols="4 300:1 400:2 600:3 800:4" v-if="formParams.type !== 3">
               <n-gi>
                 <n-form-item label="根路由" path="isRoot">
                   <n-radio-group v-model:value="formParams.isRoot" name="isRoot">
@@ -321,19 +287,7 @@
               </n-gi>
             </n-grid>
 
-            <n-grid x-gap="24" :cols="4">
-              <n-gi>
-                <n-form-item label="是否外链" path="isFrame">
-                  <n-radio-group v-model:value="formParams.isFrame" name="isFrame">
-                    <n-radio-button
-                      v-for="switchStatus in switchStatusMap"
-                      :key="switchStatus.value"
-                      :value="switchStatus.value"
-                      :label="switchStatus.label"
-                    />
-                  </n-radio-group>
-                </n-form-item>
-              </n-gi>
+            <n-grid cols="4 300:1 400:2 600:3 800:4">
               <n-gi>
                 <n-form-item label="状态" path="status">
                   <n-radio-group v-model:value="formParams.status" name="status">
@@ -346,8 +300,20 @@
                   </n-radio-group>
                 </n-form-item>
               </n-gi>
-              <n-gi>
-                <n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === true">
+              <n-gi v-if="formParams.type !== 3">
+                <n-form-item label="是否外链" path="isFrame">
+                  <n-radio-group v-model:value="formParams.isFrame" name="isFrame">
+                    <n-radio-button
+                      v-for="switchStatus in switchStatusMap"
+                      :key="switchStatus.value"
+                      :value="switchStatus.value"
+                      :label="switchStatus.label"
+                    />
+                  </n-radio-group>
+                </n-form-item>
+              </n-gi>
+              <n-gi v-if="formParams.type !== 3">
+                <n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
                   <n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
                 </n-form-item>
               </n-gi>
@@ -376,7 +342,7 @@
 </template>
 <script lang="ts" setup>
   import { onMounted, reactive, ref, unref } from 'vue';
-  import { TreeSelectOption, useDialog, useMessage } from 'naive-ui';
+  import { FormItemRule, TreeSelectOption, useDialog, useMessage } from 'naive-ui';
   import {
     AlignLeftOutlined,
     FormOutlined,
@@ -387,6 +353,9 @@
   import { DeleteMenu, EditMenu, getMenuList } from '@/api/system/menu';
   import { getTreeItem } from '@/utils';
   import CreateDrawer from './CreateDrawer.vue';
+  import IconSelector from '@/components/IconSelector/index.vue';
+  import { State, newState } from '@/views/permission/menu/model';
+  import { validate } from '@/utils/validateUtil';
 
   const menuTypes = [
     {
@@ -407,7 +376,7 @@
 
   const switchStatusMap = [
     {
-      value: 0,
+      value: 2,
       label: '关闭',
     },
     {
@@ -445,15 +414,25 @@
   });
 
   const rules = {
+    title: {
+      required: true,
+      message: '请输入名称',
+      trigger: 'blur',
+    },
     label: {
       required: true,
       message: '请输入标题',
       trigger: 'blur',
     },
     path: {
-      required: true,
-      message: '请输入路径',
+      required: false,
+      message: '请输入路由地址',
       trigger: 'blur',
+      validator: function (_rule: FormItemRule, value: any, callback: Function) {
+        if (formParams.type != 3 && !value) {
+          callback(new Error('请输入路由地址'));
+        }
+      },
     },
   };
 
@@ -470,41 +449,9 @@
   const treeItemTitle = ref('');
   const pattern = ref('');
   const drawerTitle = ref('');
-  const optionTreeData = ref([
-    {
-      id: 0,
-      key: 0,
-      label: '根目录',
-      pid: 0,
-      title: '根目录',
-      type: 1,
-    },
-  ]);
+  const optionTreeData = ref<any>([]);
 
-  const formParams = reactive({
-    id: 0,
-    pid: 0,
-    title: '',
-    name: '',
-    path: '',
-    label: '',
-    icon: '',
-    type: 1,
-    redirect: '',
-    permissions: '',
-    permissionName: '',
-    component: '',
-    alwaysShow: 1,
-    activeMenu: '',
-    isRoot: 0,
-    isFrame: 0,
-    frameSrc: '',
-    keepAlive: 0,
-    hidden: 0,
-    affix: 0,
-    status: 1,
-    sort: 10,
-  });
+  const formParams = reactive<State>(newState(null));
 
   function openCreateDrawer() {
     drawerTitle.value = '添加菜单';
@@ -527,23 +474,16 @@
   }
 
   function handleDel() {
-    dialog.info({
+    dialog.warning({
       title: '提示',
-      content: `您确定想删除此权限吗?`,
+      content: `您确定要删除此菜单吗?`,
       positiveText: '确定',
       negativeText: '取消',
       onPositiveClick: () => {
-        console.log('DeleteMenu formParams:' + JSON.stringify(formParams));
-        DeleteMenu({ ...formParams })
-          .then(async (_res) => {
-            console.log('_res:' + JSON.stringify(_res));
-            message.success('操作成功');
-            // handleReset();
-            await loadData();
-          })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
-          });
+        DeleteMenu({ ...formParams }).then(async (_res) => {
+          message.success('操作成功');
+          await loadData();
+        });
       },
       onNegativeClick: () => {
         message.error('已取消');
@@ -559,17 +499,15 @@
   function formSubmit() {
     formRef.value.validate((errors: boolean) => {
       if (!errors) {
-        console.log('formParams:' + JSON.stringify(formParams));
-        // message.error('抱歉，您没有该权限');
+        subLoading.value = true;
         EditMenu({ ...formParams })
           .then(async (_res) => {
-            console.log('_res:' + JSON.stringify(_res));
+            subLoading.value = false;
             message.success('操作成功');
-            // handleReset();
             await loadData();
           })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
+          .catch((_e: Error) => {
+            subLoading.value = false;
           });
       } else {
         message.error('请填写完整信息');
@@ -588,10 +526,9 @@
   // 处理选项更新
   function handleUpdateValue(
     value: string | number | Array<string | number> | null,
-    option: TreeSelectOption | null | Array<TreeSelectOption | null>
+    _option: TreeSelectOption | null | Array<TreeSelectOption | null>
   ) {
-    formParams.pid = value;
-    console.log(value, option);
+    formParams.pid = value as number;
   }
 
   onMounted(async () => {
@@ -603,8 +540,17 @@
     const keys = treeMenuList.list.map((item) => item.key);
     Object.assign(formParams, keys);
     treeData.value = [];
-    optionTreeData.value = [];
     treeData.value = treeMenuList.list;
+    optionTreeData.value = [
+      {
+        id: 0,
+        key: 0,
+        label: '根目录',
+        pid: 0,
+        title: '根目录',
+        type: 1,
+      },
+    ];
     optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
     loading.value = false;
   }
@@ -612,8 +558,4 @@
   function onExpandedKeys(keys) {
     expandedKeys.value = keys;
   }
-
-  const editConfirm = (val) => {
-    console.log(val);
-  };
 </script>

web/src/views/permission/menu/model.ts

@@ -0,0 +1,58 @@
+import { cloneDeep } from 'lodash-es';
+
+export interface State {
+  id: number;
+  pid: number;
+  title: string;
+  name: string;
+  path: string;
+  label: string;
+  icon: string;
+  type: number;
+  redirect: string;
+  permissions: string;
+  permissionName: string;
+  component: string;
+  alwaysShow: number;
+  activeMenu: string;
+  isRoot: number;
+  isFrame: number;
+  frameSrc: string;
+  keepAlive: number;
+  hidden: number;
+  affix: number;
+  status: number;
+  sort: number;
+}
+
+export const defaultState = {
+  id: 0,
+  pid: 0,
+  title: '',
+  name: '',
+  path: '',
+  label: '',
+  icon: '',
+  type: 1,
+  redirect: '',
+  permissions: '',
+  permissionName: '',
+  component: '',
+  alwaysShow: 1,
+  activeMenu: '',
+  isRoot: 0,
+  isFrame: 2,
+  frameSrc: '',
+  keepAlive: 0,
+  hidden: 0,
+  affix: 0,
+  status: 1,
+  sort: 10,
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}

web/src/views/permission/role/columns.ts

@@ -3,16 +3,27 @@ import { NTag } from 'naive-ui';
 
 export const columns = [
   {
-    title: 'id',
+    title: '角色ID',
     key: 'id',
   },
   {
     title: '角色名称',
     key: 'name',
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: 'info',
+        },
+        {
+          default: () => row.name,
+        }
+      );
+    },
   },
   {
-    title: '说明',
-    key: 'remark',
+    title: '上级角色',
+    key: 'pid',
   },
   {
     title: '是否默认角色',
@@ -29,6 +40,14 @@ export const columns = [
       );
     },
   },
+  {
+    title: '排序',
+    key: 'sort',
+  },
+  {
+    title: '备注',
+    key: 'remark',
+  },
   {
     title: '创建时间',
     key: 'createdAt',

web/src/views/permission/role/role.vue

@@ -67,6 +67,9 @@
         :label-width="80"
         class="py-4"
       >
+        <n-form-item label="上级角色" path="pid">
+          <n-input placeholder="请输入上级角色ID" v-model:value="formParams.pid" />
+        </n-form-item>
         <n-form-item label="角色名称" path="name">
           <n-input placeholder="请输入名称" v-model:value="formParams.name" />
         </n-form-item>
@@ -99,23 +102,71 @@
         </n-space>
       </template>
     </n-modal>
+
+    <n-modal
+      v-model:show="showDataModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="'修改 ' + dataForm?.name + ' 的数据权限'"
+    >
+      <n-form
+        :model="dataForm"
+        ref="dataFormRef"
+        label-placement="left"
+        :label-width="120"
+        class="py-4"
+      >
+        <n-form-item label="数据范围" path="dataScope">
+          <n-select
+            v-model:value="dataForm.dataScope"
+            :options="dataScopeOption"
+            @update:value="handleUpdateDataScopeValue"
+          />
+        </n-form-item>
+        <n-form-item label="自定义权限" path="customDept" v-if="dataForm.dataScope === 4">
+          <n-tree-select
+            multiple
+            :options="deptList"
+            :default-value="dataForm.customDept"
+            :default-expand-all="true"
+            @update:value="handleUpdateDeptValue"
+          />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showDataModal = false)">取消</n-button>
+          <n-button type="info" :loading="dataFormBtnLoading" @click="confirmDataForm"
+            >确定</n-button
+          >
+        </n-space>
+      </template>
+    </n-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { h, onMounted, reactive, ref, unref } from 'vue';
-  import { useDialog, useMessage } from 'naive-ui';
+  import { h, onMounted, reactive, ref } from 'vue';
+  import { TreeSelectOption, useDialog, useMessage, SelectOption } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
-  import { Delete, Edit, GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
+  import {
+    Delete,
+    Edit,
+    GetPermissions,
+    getRoleList,
+    UpdatePermissions,
+    DataScopeSelect,
+    DataScopeEdit,
+  } from '@/api/system/role';
   import { getMenuList } from '@/api/system/menu';
   import { columns } from './columns';
   import { PlusOutlined } from '@vicons/antd';
   import { getTreeAll } from '@/utils';
-  import { useRouter } from 'vue-router';
   import { statusOptions } from '@/enums/optionsiEnum';
-  import { copyObj } from '@/utils/array';
+  import { cloneDeep } from 'lodash-es';
+  import { getDeptList } from '@/api/org/dept';
 
-  const router = useRouter();
   const formRef: any = ref(null);
   const message = useMessage();
   const actionRef = ref();
@@ -124,13 +175,12 @@
   const showModal = ref(false);
   const formBtnLoading = ref(false);
   const formBtnLoading2 = ref(false);
-  const checkedAll = ref(false);
+  const checkedAll = ref<any>(false);
   const editRoleTitle = ref('');
   const treeData = ref([]);
   const expandedKeys = ref([]);
-  const checkedKeys = ref([]);
-
-  const updatePermissionsParams = ref({});
+  const checkedKeys = ref<any>([]);
+  const updatePermissionsParams = ref<any>({});
 
   const rules = {
     name: {
@@ -138,54 +188,51 @@
       trigger: ['blur', 'input'],
       message: '请输入名称',
     },
-    address: {
+    key: {
       required: true,
       trigger: ['blur', 'input'],
-      message: '请输入地址',
-    },
-    date: {
-      type: 'number',
-      required: true,
-      trigger: ['blur', 'change'],
-      message: '请选择日期',
+      message: '请输入角色编码',
     },
   };
-  let formParams = reactive({
+
+  const defaultState = {
     id: 0,
+    pid: 0,
+    level: 1,
+    tree: '',
     name: '',
     key: '',
     remark: null,
     status: 1,
     sort: 0,
-    dataScope: 0,
-    deptCheckStrictly: 0,
-    menuCheckStrictly: 0,
-  });
+    dataScope: 1,
+    customDept: [],
+  };
 
-  const params = reactive({
-    pageSize: 5,
-    name: 'xiaoMa',
-  });
+  let formParams = ref<any>(cloneDeep(defaultState));
 
   const actionColumn = reactive({
-    width: 250,
+    width: 320,
     title: '操作',
     key: 'action',
     fixed: 'right',
     render(record) {
       return h(TableAction, {
-        style: 'button',
+        style: 'primary',
         actions: [
           {
             label: '菜单权限',
             onClick: handleMenuAuth.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
             ifShow: () => {
-              // console.log('ifShow record:'+JSON.stringify(record))
               return record.key !== 'super';
             },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            // auth: ['basic_list'],
+          },
+          {
+            label: '数据权限',
+            onClick: handleDataAuth.bind(null, record),
+            ifShow: () => {
+              return record.key !== 'super';
+            },
           },
           {
             label: '编辑',
@@ -193,18 +240,13 @@
             ifShow: () => {
               return record.key !== 'super';
             },
-            // auth: ['basic_list'],
           },
           {
             label: '删除',
-            // icon: 'ic:outline-delete-outline',
             onClick: handleDelete.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
             ifShow: () => {
               return record.key !== 'super';
             },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            // auth: ['basic_list'],
           },
         ],
       });
@@ -212,11 +254,7 @@
   });
 
   const loadDataTable = async (res: any) => {
-    let _params = {
-      ...unref(params),
-      ...res,
-    };
-    return await getRoleList(_params);
+    return await getRoleList({ ...res });
   };
 
   function onCheckedRow(rowKeys: any[]) {
@@ -228,8 +266,6 @@
   }
 
   function confirmForm(e: any) {
-    console.log('checkedKeys.value:' + JSON.stringify(checkedKeys.value));
-    console.log('updatePermissionsParams.value:' + JSON.stringify(updatePermissionsParams.value));
     e.preventDefault();
     formBtnLoading.value = true;
     UpdatePermissions({
@@ -238,17 +274,12 @@
         menuIds:
           checkedKeys.value === undefined || checkedKeys.value == null ? [] : checkedKeys.value,
       },
-    })
-      .then((_res) => {
-        console.log('_res:' + JSON.stringify(_res));
-        message.success('操作成功');
-        reloadTable();
-        showModal.value = false;
-        formBtnLoading.value = false;
-      })
-      .catch((e: Error) => {
-        message.error(e.message ?? '操作失败');
-      });
+    }).then((_res) => {
+      message.success('操作成功');
+      reloadTable();
+      showModal.value = false;
+      formBtnLoading.value = false;
+    });
   }
 
   function confirmForm2(e) {
@@ -256,19 +287,13 @@
     formBtnLoading2.value = true;
     formRef.value.validate((errors) => {
       if (!errors) {
-        console.log('formParams:' + JSON.stringify(formParams));
-        Edit(formParams)
-          .then((_res) => {
-            console.log('_res:' + JSON.stringify(_res));
-            message.success('操作成功');
-            setTimeout(() => {
-              showModal2.value = false;
-              reloadTable();
-            });
-          })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
+        Edit(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal2.value = false;
+            reloadTable();
           });
+        });
       } else {
         message.error('请填写完整信息');
       }
@@ -278,34 +303,28 @@
 
   function addTable() {
     showModal2.value = true;
+    formParams.value = cloneDeep(defaultState);
   }
 
   function handleEdit(record: Recordable) {
-    console.log('点击了编辑', record);
     showModal2.value = true;
-    formParams = copyObj(formParams, record);
+    formParams.value = cloneDeep(record);
   }
 
   function handleDelete(record: Recordable) {
-    console.log('点击了删除', record);
     dialog.warning({
       title: '警告',
       content: '你确定要删除？',
       positiveText: '确定',
-      negativeText: '不确定',
+      negativeText: '取消',
       onPositiveClick: () => {
-        Delete(record)
-          .then((_res) => {
-            console.log('_res:' + JSON.stringify(_res));
-            message.success('操作成功');
-            reloadTable();
-          })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
-          });
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
       },
       onNegativeClick: () => {
-        // message.error('不确定');
+        // message.error('取消');
       },
     });
   }
@@ -313,12 +332,51 @@
   async function handleMenuAuth(record: Recordable) {
     editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
     const data = await GetPermissions({ ...{ id: record.id } });
-    console.log('data:' + JSON.stringify(data));
     checkedKeys.value = data.menuIds; //record.menu_keys;
     updatePermissionsParams.value.id = record.id;
     showModal.value = true;
   }
 
+  const dataScopeOption = ref<any>();
+  const deptList = ref<any>([]);
+  const dataFormRef = ref<any>();
+  const dataFormBtnLoading = ref(false);
+  const showDataModal = ref(false);
+  const dataForm = ref<any>();
+  function handleDataAuth(record: Recordable) {
+    dataForm.value = cloneDeep(record);
+    showDataModal.value = true;
+  }
+
+  function handleUpdateDataScopeValue(value: string, option: SelectOption) {}
+
+  function handleUpdateDeptValue(
+    value: string | number | Array<string | number> | null,
+    _option: TreeSelectOption | null | Array<TreeSelectOption | null>
+  ) {
+    dataForm.value.customDept = value;
+  }
+
+  function confirmDataForm(e) {
+    e.preventDefault();
+    dataFormBtnLoading.value = true;
+    dataFormRef.value.validate((errors) => {
+      if (!errors) {
+        console.log('dataForm.value:' + JSON.stringify(dataForm.value));
+        DataScopeEdit(dataForm.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showDataModal.value = false;
+            reloadTable();
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      dataFormBtnLoading.value = false;
+    });
+  }
+
   function checkedTree(keys) {
     checkedKeys.value = keys;
   }
@@ -346,10 +404,28 @@
   }
 
   onMounted(async () => {
+    await loadMenuList();
+    await loadDeptList();
+    await loadDataScopeSelect();
+  });
+
+  async function loadMenuList() {
     const treeMenuList = await getMenuList();
     expandedKeys.value = treeMenuList.list.map((item) => item.key);
     treeData.value = treeMenuList.list;
-  });
+  }
+
+  async function loadDeptList() {
+    deptList.value = await getDeptList({});
+    if (deptList.value === undefined || deptList.value === null) {
+      deptList.value = [];
+    }
+  }
+
+  async function loadDataScopeSelect() {
+    const option = await DataScopeSelect();
+    dataScopeOption.value = option.list;
+  }
 </script>
 
 <style lang="less" scoped></style>