feat: 设置模块角色权限中数据权限70%

src/views/setting/user/role.vue

@@ -63,15 +63,19 @@
         </a-card>
       </a-col>
       <a-col flex="auto" class="full_height">
-        <a-tabs class="tabs_card" @change="handleTabChange">
+        <a-tabs v-model:active-key="currentTabsKey" class="tabs_card">
           <template #extra>
             <p style="margin-right: 10px">
               <span>{{ $t('last.updated') }}</span>
               <span>{{ roleItemInfo ? roleItemInfo.updatedAt : '' }}</span>
             </p>
-            <a-button type="primary" @click="handleSubmit">{{
-              $t('submit')
-            }}</a-button>
+            <a-button
+              v-if="currentTabsKey !== '3'"
+              type="primary"
+              @click="handleSubmit"
+            >
+              {{ $t('submit') }}</a-button
+            >
           </template>
           <a-tab-pane key="1" :title="$t('function.permission')">
             <permissionCollapse
@@ -81,37 +85,73 @@
             />
           </a-tab-pane>
           <a-tab-pane key="2" :title="$t('data.permission')">
-            Content of Tab Panel 2
+            <h4>{{ $t('data.permission.setting') }}</h4>
+            <div style="padding: 20px 0">
+              <a-radio-group v-model="dataType">
+                <a-radio :value="1">{{ $t('all.data.permission') }}</a-radio>
+                <a-radio :value="2">{{
+                  $t('customize.data.permission')
+                }}</a-radio>
+                <a-radio :value="3">{{ $t('self.data.permission') }}</a-radio>
+              </a-radio-group>
+              <a-row
+                v-if="dataType === 2"
+                :gutter="12"
+                style="margin-top: 20px"
+              >
+                <a-col :span="12">
+                  <a-card>
+                    <h4 style="margin-bottom: 10px">选择组织架构</h4>
+                    <DepartmentTree
+                      v-model:expanded-keys="expandedKeys"
+                      v-model:selected-keys="selectedKeys"
+                      :data="departmentListData"
+                      checkable
+                    />
+                  </a-card>
+                </a-col>
+                <a-col :span="12">
+                  <a-card>
+                    <h4 style="margin-bottom: 10px">选择项目</h4>
+                    <div style="margin-top: 20px"> TODO 后面再对接 </div>
+                  </a-card>
+                </a-col>
+              </a-row>
+            </div>
           </a-tab-pane>
           <a-tab-pane key="3" :title="$t('user.assignment')">
             <h4>{{ $t('user.assignment.setting') }}</h4>
-            <DataTable
-              style="margin-top: 20px"
-              :data="renderData"
-              :columns="projectColumn"
-              :loading="loading"
-              :total="total"
-              :current="current"
-              :page-size="pageSize"
-              pagination
-              @page-change="onPageChange"
-              @page-size-change="onPageSizeChange"
-            >
-              <template #realname="{ record }">
-                <span>{{ record.realname }}</span>
-                <icon-idcard v-if="record.isManager === 1" />
-              </template>
-              <template #status="{ record }">
-                <a-tag :color="record.status == 1 ? 'green' : 'red'">
-                  {{ record.status == 1 ? $t('enable') : $t('disable') }}</a-tag
-                >
-              </template>
-              <template #operate="{ record }">
-                <a-button @click="changeRole(record?.id)">{{
-                  $t('change.role')
-                }}</a-button>
-              </template>
-            </DataTable>
+            <div style="padding-bottom: 20px">
+              <DataTable
+                style="margin-top: 20px"
+                :data="renderData"
+                :columns="projectColumn"
+                :loading="loading"
+                :total="total"
+                :current="current"
+                :page-size="pageSize"
+                pagination
+                @page-change="onPageChange"
+                @page-size-change="onPageSizeChange"
+              >
+                <template #realname="{ record }">
+                  <span>{{ record.realname }}</span>
+                  <icon-idcard v-if="record.isManager === 1" />
+                </template>
+                <template #status="{ record }">
+                  <a-tag :color="record.status == 1 ? 'green' : 'red'">
+                    {{
+                      record.status == 1 ? $t('enable') : $t('disable')
+                    }}</a-tag
+                  >
+                </template>
+                <template #operate="{ record }">
+                  <a-button @click="changeRole(record?.id)">{{
+                    $t('change.role')
+                  }}</a-button>
+                </template>
+              </DataTable>
+            </div>
             <changeRoleDrawer
               v-model:visible="changeRoleDrawerVisible"
               :role-id="currentRoleActiveId"
@@ -127,7 +167,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, watch } from 'vue';
   import {
     getRoleList,
     RoleItem,
@@ -142,10 +182,14 @@
   import useDataTable from '@/composables/useDataTable';
   import type { TableColumnData } from '@arco-design/web-vue';
   import { useI18n } from 'vue-i18n';
+  import DepartmentTree from '@/components/common/DepartmentTree.vue';
+  import useDepartmentList from '@/composables/useDepartmentList';
   import permissionCollapse from './components/permission-collapse.vue';
   import roleFormDrawer from './components/role-form-drawer.vue';
   import changeRoleDrawer from './components/change-role-drawer.vue';
 
+  const { departmentListData, allDepartmentKeys } = useDepartmentList();
+
   const { loading, setLoading } = useLoading(true);
   const { t } = useI18n();
   const roleList = ref<RoleItem[]>([]);
@@ -157,6 +201,10 @@
   const permissionList = ref<any[]>([]);
   const changeRoleDrawerVisible = ref<boolean>(false);
   const selectedUserId = ref<number | null>(null);
+  const currentTabsKey = ref<string>('1');
+  const dataType = ref<number>(1);
+  const expandedKeys = ref<(string | number)[]>([]);
+  const selectedKeys = ref<(string | number)[]>([]);
   // 使用 DataTable composable
   const {
     data: renderData,
@@ -213,6 +261,7 @@
       title: t('lastLogin'),
       dataIndex: 'lastLoginTime',
       key: 'lastLoginTime',
+      align: 'center',
       render: ({ record }) => record.lastLoginTime || '-',
     },
     {
@@ -325,7 +374,13 @@
   const onRoleSubmit = () => {
     getRoleListData(false);
   };
-
+  watch(
+    allDepartmentKeys,
+    (val) => {
+      expandedKeys.value = val;
+    },
+    { immediate: true }
+  );
   function handleSubmit() {
     if (!currentRoleActiveId.value) {
       Message.warning('请先选择一个角色');
@@ -365,12 +420,6 @@
         console.error('保存角色权限失败:', error);
       });
   }
-
-  const handleTabChange = (key) => {
-    if (key === '3') {
-      // 占位注释，避免空代码块
-    }
-  };
   // 分页事件处理
   const onPageChange = (page: number) => {
     setCurrent(page);