优化

src/views/system/user/index.vue

@@ -154,16 +154,18 @@
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog draggable ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="1200px" append-to-body @close="closeDialog">
+    <el-dialog draggable ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="1300px" append-to-body @close="closeDialog">
       <div class="boxDetial">
         <div class="tab_info">
           <span @click="onTab(1)" :class="{ active: type == 1 }">基本资料</span>
           <span @click="onTab(2)" :class="{ active: type == 2 }">角色信息</span>
         </div>
-        <div class="tab_content" v-if="type == 1">
-          <editInfo ref="editInfoRef" @close="dialog.visible = false" @submit="getList"></editInfo>
+        <div class="tab_content" v-show="type == 1">
+          <editInfo ref="editInfoRef" @close="dialog.visible = false" @submit="getList" @setDeptId="setDeptId"></editInfo>
+        </div>
+        <div class="tab_content" v-show="type == 2">
+          <roleInfo ref="roleInfoRef" @close="dialog.visible = false" @submit="getList"></roleInfo>
         </div>
-        <div class="tab_content" v-if="type == 2"></div>
       </div>
     </el-dialog>
 
@@ -229,6 +231,7 @@ import { getProjectByDeptId, getRoleList, optionselect } from '@/api/system/post
 import ShuttleFrame from '../../project/projectRelevancy/component/ShuttleFrame.vue';
 import { listProject } from '@/api/project/project';
 import editInfo from './comm/editInfo.vue';
+import roleInfo from './comm/roleInfo.vue';
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
@@ -248,6 +251,7 @@ const postOptions = ref<PostVO[]>([]);
 const roleOptions = ref<RoleVO[]>([]);
 const projectOptions = ref<any[]>([]);
 const editInfoRef = ref<InstanceType<typeof editInfo> | null>(null);
+const roleInfoRef = ref<InstanceType<typeof roleInfo> | null>(null);
 /*** 用户导入参数 */
 const upload = reactive<ImportOption>({
   // 是否显示弹出层（用户导入）
@@ -279,6 +283,7 @@ const queryFormRef = ref<ElFormInstance>();
 const userFormRef = ref<ElFormInstance>();
 const uploadRef = ref<ElUploadInstance>();
 const formDialogRef = ref<ElDialogInstance>();
+const deptIdRole = ref<number>();
 const type = ref(1);
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -373,7 +378,9 @@ watchEffect(
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
 );
-
+const setDeptId = (deptId: number) => {
+  deptIdRole.value = deptId;
+};
 /** 查询用户列表 */
 const getList = async () => {
   loading.value = true;
@@ -558,6 +565,7 @@ const cancel = () => {
 const handleAdd = async () => {
   reset();
   const { data } = await api.getUser();
+  type.value = 1;
   dialog.visible = true;
   dialog.title = '新增用户';
   nextTick(() => {
@@ -570,22 +578,13 @@ const handleAdd = async () => {
 /** 修改按钮操作 */
 const handleUpdate = async (row?: UserForm) => {
   reset();
-  const userId = row?.userId || ids.value[0];
-  const { data } = await api.getUser(userId);
   dialog.visible = true;
   dialog.title = '修改用户';
+  type.value = 1;
+  form.value = row;
   nextTick(() => {
     editInfoRef.value?.open(row);
   });
-  Object.assign(form.value, data.user);
-  postOptions.value = data.posts;
-  roleOptions.value = data.roles;
-  form.value.postIds = data.postIds;
-  form.value.projectRoles = data.projectRoles;
-  form.value.password = '';
-  const roleList = await getRoleList(form.value.deptId);
-
-  roleOptions.value = roleList.data;
 };
 
 const validate = () => {
@@ -693,6 +692,13 @@ const uploadCert = async () => {
 };
 const onTab = (val) => {
   type.value = val;
+  if (val == 2) {
+    let obj = editInfoRef.value?.getInfoForm();
+    form.value = obj;
+    nextTick(() => {
+      roleInfoRef.value?.open(form.value, deptIdRole.value);
+    });
+  }
 };
 </script>
 
@@ -701,7 +707,7 @@ const onTab = (val) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 600px;
+  height: 680px;
   .tab_info {
     height: 100%;
     width: 200px;