员工加角色

src/api/company/staff/index.js

@@ -84,3 +84,11 @@ export function resetPassword(data){
     data
   })
 }
+
+// 获取角色列表
+export function getRoleList(){
+  return request({
+    url: '/company/staff/roleList',
+    method: 'get'
+  })
+}

src/views/company/staff/form/StaffForm.vue

@@ -65,12 +65,12 @@
         <el-row :gutter="2">
           <el-col :span="12">
             <el-form-item v-if="formData.id === undefined" label="登录账号" prop="loginAccount">
-              <el-input v-model="formData.loginAccount" placeholder="请输入登录账号" maxlength="16" />
+              <el-input v-model="formData.loginAccount" placeholder="请输入登录账号" maxlength="16"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="formData.id === undefined" label="登录密码" prop="password">
-              <el-input v-model="formData.password" placeholder="请输入登录密码" type="password" maxlength="16" show-password />
+              <el-input v-model="formData.password" placeholder="请输入登录密码" type="password" maxlength="16" show-password/>
             </el-form-item>
           </el-col>
         </el-row>
@@ -85,6 +85,22 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-form-item label="员工角色" prop="roleIds">
+          <el-select
+            style="width: 100%"
+            filterable
+            clearable
+            v-model="formData.roleIds" multiple placeholder="请选择员工角色"
+          >
+            <el-option
+              v-for="(item, index) in roleList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="家庭住址" prop="address">
           <el-input v-model="formData.address" placeholder="请输入家庭住址"/>
         </el-form-item>
@@ -157,7 +173,7 @@ export default {
         workNo: undefined,
         name: undefined,
         tel: undefined,
-        sex: "1",
+        sex: '1',
         address: undefined,
         workDate: undefined,
         workYear: undefined,
@@ -169,7 +185,8 @@ export default {
         fileUrls: undefined,
         loginAccount: undefined,
         password: undefined,
-        labelsArray: undefined
+        labelsArray: undefined,
+        roleIds: undefined
       },
       // 表单校验
       formRules: {
@@ -193,11 +210,11 @@ export default {
         education: [{ required: true, message: '学历不能为空', trigger: 'blur' }],
         loginAccount: [
           { required: true, message: '登录账号不能为空', trigger: 'blur' },
-          { min: 6, max: 20, message: '登录账号长度在6~20个字符', trigger: 'blur'}
+          { min: 6, max: 20, message: '登录账号长度在6~20个字符', trigger: 'blur' }
         ],
         password: [
           { required: true, message: '登录密码不能为空', trigger: 'blur' },
-          { min: 6, max: 20, message: "登录密码长度在6~20个字符", trigger: 'blur'},
+          { min: 6, max: 20, message: '登录密码长度在6~20个字符', trigger: 'blur' },
           {
             pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\-])\S{6,}$/,
             message: '登录密码必须由大小写字母、数字、特殊字符组成',
@@ -208,10 +225,16 @@ export default {
         joinedDate: [{ required: true, message: '入职日期不能为空', trigger: 'blur' }]
       },
       labelOptions: [],
-      nowDate: new Date()
+      nowDate: new Date(),
+      roleList: []
     }
   },
   methods: {
+    // 获取角色列表
+    async listRoles() {
+      const res = await StaffApi.getRoleList()
+      this.roleList = res.data
+    },
     /** 获取标签 */
     async listLabels() {
       try {
@@ -227,10 +250,11 @@ export default {
       this.dialogVisible = true
       this.dialogTitle = id ? '修改员工信息' : '新增员工信息'
       await this.listLabels()
+      await this.listRoles()
       this.reset()
       // 修改时，设置数据
       if (id) {
-        this.formData.id = id;
+        this.formData.id = id
         this.formLoading = true
         try {
           const res = await StaffApi.getStaff(id)
@@ -278,7 +302,7 @@ export default {
         workNo: undefined,
         name: undefined,
         tel: undefined,
-        sex: "1",
+        sex: '1',
         address: undefined,
         workDate: undefined,
         workYear: undefined,
@@ -289,17 +313,18 @@ export default {
         uniqueCode: undefined,
         fileIds: undefined,
         loginAccount: undefined,
-        password: undefined
+        password: undefined,
+        roleIds: undefined
       }
       this.resetForm('formRef')
     },
     // 获取工龄
-    getWorkYear(){
-      this.formData.workYear = this.getYearsByDate(this.formData.workDate);
+    getWorkYear() {
+      this.formData.workYear = this.getYearsByDate(this.formData.workDate)
     },
     // 获取司龄
-    getJoinedYear(){
-      this.formData.joinedYear = this.getYearsByDate(this.formData.joinedDate);
+    getJoinedYear() {
+      this.formData.joinedYear = this.getYearsByDate(this.formData.joinedDate)
     },
     // 计算输入日期至今隔了多少年
     getYearsByDate(date) {
@@ -315,7 +340,7 @@ export default {
         years--
       }
       return years >= 0 ? years : '0'
-    },
+    }
   }
 }
 </script>

src/views/company/staff/index.vue

@@ -21,8 +21,31 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="家庭住址" prop="address">
-        <el-input v-model="queryParams.address" placeholder="请输入家庭住址" clearable @keyup.enter.native="handleQuery"/>
+      <el-form-item label="员工角色" prop="roleIds">
+        <el-select
+          style="width: 100%"
+          filterable
+          clearable
+          v-model="queryParams.roleIds" multiple placeholder="请选择员工角色"
+        >
+          <el-option
+            v-for="(item, index) in roleList"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="学历" prop="education">
+        <el-select v-model="queryParams.education" placeholder="请选择学历" clearable size="small">
+          <el-option
+            v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_STAFF_EDU)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="工龄" prop="workYear">
         <el-input v-model="queryParams.workYear" placeholder="请输入工龄" clearable @keyup.enter.native="handleQuery"/>
@@ -30,9 +53,6 @@
       <el-form-item label="司龄" prop="joinedYear">
         <el-input v-model="queryParams.joinedYear" placeholder="请输入司龄" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
-      <el-form-item label="学历" prop="education">
-        <el-input v-model="queryParams.education" placeholder="请输入学历" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
       <el-form-item label="唯一推广码" prop="uniqueCode">
         <el-input v-model="queryParams.uniqueCode" placeholder="请输入唯一推广码" clearable
                   @keyup.enter.native="handleQuery"
@@ -84,6 +104,7 @@
       </el-table-column>
       <el-table-column label="工号" align="center" prop="workNo" width="180"/>
       <el-table-column label="姓名" align="center" prop="name" width="180"/>
+      <el-table-column label="角色" :show-overflow-tooltip="true" align="center" prop="roleNames" width="180"/>
       <el-table-column label="手机号" align="center" prop="tel" width="180"/>
       <el-table-column label="性别" align="center" prop="sex" width="180">
         <template v-slot="scope">
@@ -195,14 +216,22 @@ export default {
         education: null,
         content: null,
         uniqueCode: null,
-        fileIds: null
-      }
+        fileIds: null,
+        roleIds: null,
+      },
+      roleList: [],
     }
   },
   created() {
     this.getList()
+    this.listRoles()
   },
   methods: {
+    // 获取角色列表
+    async listRoles(){
+      const res = await StaffApi.getRoleList();
+      this.roleList = res.data
+    },
     // 更多操作
     handleCommand(command, index, row) {
       switch (command) {