切换角色

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()
 }