权限重构

src/views/system/user/index.vue

@@ -174,8 +174,6 @@
               />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="phonenumber">
               <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
@@ -186,8 +184,6 @@
               <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
               <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
@@ -198,8 +194,6 @@
               <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select v-model="form.sex" placeholder="请选择">
@@ -207,15 +201,6 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="12">
             <el-form-item label="岗位">
               <el-select v-model="form.postIds" multiple placeholder="请选择">
@@ -229,21 +214,41 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-row :gutter="20" v-for="(item, index) in form.projectRoles">
+              <el-col :span="11" :offset="0">
+                <el-form-item label="项目列表">
+                  <el-select v-model="item.projectId" placeholder="请选择">
+                    <el-option v-for="dict in projectOptions" :key="dict.id" :label="dict.shortName" :value="dict.id"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="11" :offset="0">
+                <el-form-item label="角色">
+                  <el-select v-model="item.roleIds" filterable multiple placeholder="请选择">
+                    <el-option
+                      v-for="item in roleOptions"
+                      :key="item.roleId"
+                      :label="item.roleName"
+                      :value="item.roleId"
+                      :disabled="item.status == '1'"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="1" :offset="0">
+                <el-button type="primary" circle icon="Plus" @click="handleAddProject" v-if="index == 0"></el-button>
+                <el-button type="danger" circle icon="Delete" @click="delProject(index)" v-else></el-button>
+              </el-col>
+            </el-row>
+          </el-col>
           <el-col :span="12">
-            <el-form-item label="角色" prop="roleIds">
-              <el-select v-model="form.roleIds" filterable multiple placeholder="请选择">
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :label="item.roleName"
-                  :value="item.roleId"
-                  :disabled="item.status == '1'"
-                ></el-option>
-              </el-select>
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }} </el-radio>
+              </el-radio-group>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
           <el-col :span="24">
             <el-form-item label="备注">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@@ -317,7 +322,7 @@ import { RoleVO } from '@/api/system/role/types';
 import { PostVO } from '@/api/system/post/types';
 import { globalHeaders } from '@/utils/request';
 import { to } from 'await-to-js';
-import { getRoleList, optionselect } from '@/api/system/post';
+import { getProjectByDeptId, getRoleList, optionselect } from '@/api/system/post';
 import ShuttleFrame from '../../project/projectRelevancy/component/ShuttleFrame.vue';
 
 const router = useRouter();
@@ -337,6 +342,8 @@ const enabledDeptOptions = ref<DeptTreeVO[]>([]);
 const initPassword = ref<string>('');
 const postOptions = ref<PostVO[]>([]);
 const roleOptions = ref<RoleVO[]>([]);
+const projectOptions = ref<any[]>([]);
+
 /*** 用户导入参数 */
 const upload = reactive<ImportOption>({
   // 是否显示弹出层（用户导入）
@@ -383,10 +390,15 @@ const initFormData: UserForm = {
   phonenumber: undefined,
   email: undefined,
   sex: undefined,
+  projectRoles: [
+    {
+      projectId: '',
+      roleIds: []
+    }
+  ],
   status: '0',
   remark: '',
   postIds: [],
-  roleIds: [],
   filePath: undefined
 };
 
@@ -436,8 +448,7 @@ const initData: PageData<UserForm, UserQuery> = {
         message: '请输入正确的手机号码',
         trigger: 'blur'
       }
-    ],
-    roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
+    ]
   }
 };
 const data = reactive<PageData<UserForm, UserQuery>>(initData);
@@ -494,6 +505,19 @@ const handleNodeClick = (data: DeptVO) => {
   handleQuery();
 };
 
+/** 部门选择变化 */
+const handleAddProject = () => {
+  form.value.projectRoles.push({
+    projectId: '',
+    roleIds: []
+  });
+};
+
+/** 删除项目 */
+const delProject = (index: number) => {
+  form.value.projectRoles.splice(index, 1);
+};
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -609,6 +633,13 @@ function submitFileForm() {
 /** 重置操作表单 */
 const reset = () => {
   form.value = { ...initFormData };
+  form.value.projectRoles = [
+    {
+      projectId: '',
+      roleIds: []
+    }
+  ];
+
   userFormRef.value?.resetFields();
 };
 /** 取消按钮 */
@@ -638,12 +669,34 @@ const handleUpdate = async (row?: UserForm) => {
   postOptions.value = data.posts;
   roleOptions.value = data.roles;
   form.value.postIds = data.postIds;
-  form.value.roleIds = data.user.roleIds;
+  form.value.projectRoles = data.projectRoles;
   form.value.password = '';
+  const roleList = await getRoleList(form.value.deptId);
+  const projectList = await getProjectByDeptId(form.value.deptId);
+  projectOptions.value = projectList.data;
+
+  roleOptions.value = roleList.data;
+};
+
+const validate = () => {
+  for (let i = 0; i < form.value.projectRoles.length; i++) {
+    const item = form.value.projectRoles[i];
+    if (!item.projectId || item.projectId.length === 0) {
+      proxy?.$modal.msgError(`第 ${i + 1} 行“项目列表”未填写`);
+      return false; // 阻止提交
+    }
+    if (!item.roleIds || item.roleIds.length === 0) {
+      proxy?.$modal.msgError(`第 ${i + 1} 行“角色”未填写`);
+      return false; // 阻止提交
+    }
+  }
+  return true;
 };
 
 /** 提交按钮 */
 const submitForm = () => {
+  const isValid = validate();
+  if (!isValid) return;
   userFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.userId ? await api.updateUser(form.value) : await api.addUser(form.value);
@@ -683,10 +736,18 @@ onMounted(() => {
 async function handleDeptChange(value: number | string) {
   const response = await optionselect(value);
   const roleList = await getRoleList(value);
+  const projectList = await getProjectByDeptId(value);
+  projectOptions.value = projectList.data;
+
   roleOptions.value = roleList.data;
   postOptions.value = response.data;
   form.value.postIds = [];
-  form.value.roleIds = [];
+  form.value.projectRoles = [
+    {
+      projectId: [],
+      roleIds: []
+    }
+  ];
 }
 
 const shuttleVisible = ref(false);