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

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>