联调

src/views/Basic/Role/RoleForm.vue

@@ -37,7 +37,7 @@ const formData = ref({
   name: ''
 })
 const formRules = reactive({
-  name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 

src/views/Basic/User/UserAssignRoleForm.vue

@@ -1,94 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="分配角色">
-    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
-      <el-form-item label="用户名称">
-        <el-input v-model="formData.username" :disabled="true" />
-      </el-form-item>
-      <el-form-item label="用户昵称">
-        <el-input v-model="formData.nickname" :disabled="true" />
-      </el-form-item>
-      <el-form-item label="角色">
-        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
-          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" name="SystemUserAssignRoleForm" setup>
-import * as PermissionApi from '@/api/system/permission'
-import * as UserApi from '@/api/system/user'
-import * as RoleApi from '@/api/system/role'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref({
-  id: undefined,
-  nickname: '',
-  username: '',
-  roleIds: []
-})
-const formRef = ref() // 表单 Ref
-const roleList = ref<any>([]) // 角色的列表
-
-/** 打开弹窗 */
-const open = async (row: UserApi.UserVO) => {
-  dialogVisible.value = true
-  resetForm()
-  // 设置数据
-  formData.value.id = row.id
-  formData.value.username = row.username
-  formData.value.nickname = row.nickname
-  // 获得角色拥有的菜单集合
-  formLoading.value = true
-  try {
-    formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
-  } finally {
-    formLoading.value = false
-  }
-  // 获得角色列表
-  roleList.value = await RoleApi.getSimpleRoleList()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef.value) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await PermissionApi.assignUserRole({
-      userId: formData.value.id,
-      roleIds: formData.value.roleIds
-    })
-    message.success(t('common.updateSuccess'))
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success', true)
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    nickname: '',
-    username: '',
-    roleIds: []
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/Basic/User/UserForm.vue

@@ -7,7 +7,7 @@
       :rules="formRules"
       label-width="80px"
     >
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="用户昵称" prop="nickname">
             <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
@@ -22,7 +22,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="归属部门" prop="deptId">
             <el-tree-select
@@ -55,7 +55,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="手机号码" prop="mobile">
             <el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" />
@@ -67,7 +67,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
             <el-input v-model="formData.username" placeholder="请输入用户名称" />
@@ -93,12 +93,11 @@
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD"
               placeholder="选择日期时间"
-              style="width: 100%"
             />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注">
             <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />