切换角色

src/views/Basic/Dept/DeptForm.vue

@@ -49,6 +49,13 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="排序" prop="sort">
+            <el-input-number v-model="formData.sort" :min="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-row :gutter="20">
         <el-col :span="24" :offset="0">
           <el-form-item label="状态" prop="remark">
@@ -78,16 +85,14 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  title: '',
   parentId: undefined,
   name: undefined,
-  sort: undefined,
+  sort: 1,
   leaderUserId: undefined,
-  phone: undefined,
-  email: undefined,
-  status: CommonStatusEnum.ENABLE
+  status: CommonStatusEnum.ENABLE,
+  remark: undefined
 })
-const formRules = reactive({
+const formRules = reactive<any>({
   parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
@@ -153,14 +158,12 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    title: '',
     parentId: undefined,
     name: undefined,
-    sort: undefined,
+    sort: 1,
     leaderUserId: undefined,
-    phone: undefined,
-    email: undefined,
-    status: CommonStatusEnum.ENABLE
+    status: CommonStatusEnum.ENABLE,
+    remark: undefined
   }
   formRef.value?.resetFields()
 }

src/views/Basic/Role/Comp/RoleEmployee.vue

@@ -42,10 +42,10 @@ const pageSize = ref(20)
 const currentPage = ref(1)
 
 const columns = ref([
-  { prop: 'nickname', label: '姓名' },
-  { prop: 'mobile', label: '手机号' },
+  { prop: 'name', label: '姓名', width: '200px' },
+  { prop: 'mobile', label: '手机号', width: '150px' },
   { prop: 'deptName', label: '部门' },
-  { prop: '', label: '角色', width: '300px' }
+  { prop: 'roles', label: '角色' }
 ])
 
 async function getList() {

src/views/Basic/User/UserForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 800px">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -37,7 +37,14 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="角色" prop="role">
-            <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
+            <el-select
+              v-model="formData.roleIds"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              :max-collapse-tags="2"
+              placeholder="请选择角色"
+            >
               <el-option
                 v-for="item in roleOptions"
                 :key="item.id"
@@ -77,6 +84,20 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="入职日期" prop="hireDate">
+            <el-date-picker
+              v-model="formData.hireDate"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期时间"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="备注">
@@ -94,6 +115,8 @@
 <script lang="ts" name="SystemUserForm" setup>
 import { CommonStatusEnum } from '@/utils/constants'
 import { defaultProps, handleTree } from '@/utils/tree'
+import { formatDate } from '@/utils/formatTime'
+
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
@@ -116,9 +139,10 @@ const formData = ref({
   sex: 1,
   remark: '',
   status: CommonStatusEnum.ENABLE,
-  roleIds: []
+  roleIds: [],
+  hireDate: ''
 })
-const formRules = {
+const formRules = ref<any>({
   username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
   nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
   password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
@@ -136,10 +160,10 @@ const formRules = {
       trigger: 'blur'
     }
   ]
-}
+})
 const formRef = ref() // 表单 Ref
 const deptList = ref<Tree[]>([]) // 树形结构
-const roleOptions = ref([])
+const roleOptions = ref<any>([])
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -202,7 +226,8 @@ const resetForm = () => {
     sex: 1,
     remark: '',
     status: CommonStatusEnum.ENABLE,
-    roleIds: []
+    roleIds: [],
+    hireDate: formatDate(new Date(), 'YYYY-MM-DD')
   }
   formRef.value?.resetFields()
 }