From 36cf6c5a265d3300a286e2aff6058b82bca8227e Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Mon, 25 Dec 2023 10:29:43 +0800
Subject: [PATCH] 评优页面更新
---
src/views/evaluate/components/addDialog.vue | 361 +++++++++++++++++++++++++++++++-------------------
1 files changed, 223 insertions(+), 138 deletions(-)
diff --git a/src/views/evaluate/components/addDialog.vue b/src/views/evaluate/components/addDialog.vue
index 670b741..a191ae7 100644
--- a/src/views/evaluate/components/addDialog.vue
+++ b/src/views/evaluate/components/addDialog.vue
@@ -1,5 +1,5 @@
<template>
- <el-dialog v-model="params.visible" :title="params.title" width="600px" destroyOnClose>
+ <el-dialog v-model="params.visible" :rules="rules" :title="params.title" width="60%" destroy-on-close>
<div class="content">
<el-form :model="addForm" label-width="130px" :rules="rules" ref="addFormRef">
<el-form-item label="任务名称:" prop="taskName">
@@ -9,38 +9,48 @@
<el-input v-model="addForm.taskType" placeholder="请输入任务类别"></el-input>
</el-form-item>
<el-form-item label="认定标准描述:" prop="remark">
- <el-input v-model="addForm.remark" placeholder="请输入任务名称"></el-input>
+ <el-input v-model="addForm.remark" placeholder="请输入认定标准描述"></el-input>
</el-form-item>
- <el-form-item label="评优类型:" prop="type">
+ <!-- <el-form-item label="评优类型:" prop="type">
<el-select disabled v-model="addForm.type" placeholder="请选择评优类型" style="width: 100%;">
<el-option label="个人评优" value="0" />
<el-option label="部门评优" value="1" />
</el-select>
- </el-form-item>
- <el-form-item label="候选人数量:" prop="candidateNum">
- <el-select v-model="selectGroup" value-key="deptId" multiple style="width: 100%;">
- <el-option v-for="dept in depts" :key="dept.deptId" :label="dept.deptName" :value="dept">
- </el-option>
+ </el-form-item> -->
+ <el-form-item :label="params.type ? '评定人：' : '候选部门:'" prop="candidateNum">
+ <el-select v-model="selectGroup" value-key="deptId" multiple style="width: 100%;" placeholder="请选择候选部门">
+ <el-option v-for="dept in depts" :key="dept.deptId"
+ :label="dept.employees.length === 0 ? (dept.deptName + '（当前部门下员工人数为0）') : dept.deptName"
+ :value="dept" :disabled="dept.employees.length === 0"></el-option>
</el-select>
<div class="select-list">
<el-form-item v-for="content in selectGroup" :key="content.deptId" :label="content.deptName"
class="select-item">
- <el-select v-model="content.users" value-key="id" multiple>
+ <span v-if="!params.type">
+ <el-input-number min="0" :max="content.employees.length || Infinity" v-model="content.val"
+ controls-position="right" placeholder="请输入候选人数量" class="select-num"></el-input-number>
+ </span>
+ <el-select v-model="content.users" value-key="id" multiple
+ :placeholder="params.type ? '请选择评定人' : '请输入候选人'">
+ <div class="allSelected">
+ <el-checkbox @change="handleEmployeeChange($event, content)">全选</el-checkbox>
+ </div>
<el-option v-for="employee in content.employees" :key="employee.id" :label="employee.name"
- :value="employee">
- </el-option>
+ :value="employee"></el-option>
</el-select>
</el-form-item>
</div>
</el-form-item>
- <el-form-item label="候选人截止日期:" prop="candidateCutoffTime">
+ <el-form-item label="候选人截止日期:" prop="candidateCutoffTime" v-if="!params.type">
<el-date-picker v-model="addForm.candidateCutoffTime" type="datetime" placeholder="请选择截止时间"
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
</el-form-item>
<el-form-item label="评优数量:" prop="evaluateNum">
- <el-input v-model="addForm.evaluateNum" placeholder="请输入评优数量"></el-input>
+ <el-input-number min="0" :max="maxEvaluateNum || Infinity" v-model="addForm.evaluateNum"
+ controls-position="right" :placeholder="`请输入评优数量（最多不可超过${maxEvaluateNum}）`"
+ class="evaluateNum-input"></el-input-number>
</el-form-item>
- <el-form-item label="评优截止日期:" prop="evaluateCutoffTime">
+ <el-form-item label="评优截止日期:" prop="evaluateCutoffTime" v-if="params.type">
<el-date-picker v-model="addForm.evaluateCutoffTime" type="datetime" placeholder="请选择截止时间"
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
</el-form-item>
@@ -49,7 +59,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="params.visible = false">取消</el-button>
- <el-button type="primary" @click="params.isEdit ? handleEdit() : handleSubmit()">确认</el-button>
+ <el-button type="primary" @click="submitOrEdit">确认</el-button>
</span>
</template>
</el-dialog>
@@ -58,8 +68,8 @@
<script>
import website from '@/config/website';
import { getDeptTree } from '@/api/system/dept';
-import { add, update } from "@/api/evaluate/evaluateTask";
-import { getList } from '@/api/system/user.js'
+import { add, update } from '@/api/evaluate/evaluateTask';
+import { getList } from '@/api/system/user.js';
import _ from 'lodash';
export default {
@@ -72,194 +82,269 @@
title: '新增',
isEdit: false,
type: 0,
- addForm: {}
+ addForm: {},
};
- }
- }
+ },
+ },
},
data() {
return {
depts: [],
selectGroup: [],
addForm: {
- id: "",
- tenantId: "",
- taskName: "",
- taskType: "",
- remark: "",
- type: "",
+ id: '',
+ tenantId: '',
+ taskName: '',
+ taskType: '',
+ remark: '',
+ type: '',
candidateNum: [],
- candidateCutoffTime: "",
- candidateState: "",
- evaluateNum: "",
- evaluateCutoffTime: "",
- evaluateState: "",
- createUser: "",
- createDept: "",
- createTime: "",
- updateUser: "",
- updateTime: "",
- status: "",
- isDeleted: ""
+ candidateCutoffTime: '',
+ candidateState: '',
+ evaluateNum: '',
+ evaluateCutoffTime: '',
+ evaluateState: '',
+ createUser: '',
+ createDept: '',
+ createTime: '',
+ updateUser: '',
+ updateTime: '',
+ status: '',
+ isDeleted: '',
},
rules: {
taskName: [
- { required: true, message: '请输入任务名称', trigger: 'blur' },
+ { required: true, message: '请输入任务名称', trigger: 'blur' }
],
taskType: [
- { required: true, message: '请输入任务类别', trigger: 'blur' },
+ { required: true, message: '请输入任务类别', trigger: 'blur' }
],
remark: [
- { required: true, message: '请输入认定标准描述', trigger: 'blur' },
+ { required: true, message: '请输入认定标准描述', trigger: 'blur' }
],
type: [
- { required: true, message: '请选择评优类型', trigger: 'blur' },
+ { required: true, message: '请选择评优类型', trigger: 'blur' }
],
candidateNum: [
- { required: true, message: '请选择候选人截止日期', trigger: 'click' },
+ { required: true, message: '请选择候选人', trigger: 'click' }
],
candidateCutoffTime: [
{ required: true, message: '请选择候选人截止日期', trigger: 'click' },
],
evaluateNum: [
- { required: true, message: 'Please input Activity name', trigger: 'click' },
+ { required: true, message: '请输入评优数量', trigger: 'click' }
],
evaluateCutoffTime: [
- { required: true, message: 'Please input Activity name', trigger: 'click' },
+ { required: true, message: '请选择评优截止时间', trigger: 'click' },
],
- }
- }
+ },
+ maxEvaluateNum: 0,
+ };
},
watch: {
'params.visible': {
handler(val) {
val && this.initData(website.tenantId);
- this.addForm.type = this.params.type + ''
+ this.addForm = this.params.addForm;
+ val && (this.addForm.type = this.params.type + '')
if (this.params.isEdit) {
- this.addForm = this.params.addForm
- this.addForm.type = this.params.type + ''
+ this.addForm = this.params.addForm;
+ this.addForm.type = this.params.type + '';
}
},
deep: true,
- immediate: true
+ immediate: true,
},
- // 拦截candidateNum
- 'selectGroup': {
+ selectGroup: {
handler(val) {
- this.addForm.candidateNum = []
- let evaluateNums = 0
+ this.addForm.candidateNum = [];
+ this.maxEvaluateNum = 0;
val.forEach(item => {
- const users = []
- evaluateNums += item.selected?.length
- item.selected.forEach(user => {
+ const users = [];
+ item.users.forEach(user => {
users.push({
id: user.id,
- name: user.name
- })
- })
+ name: user.name,
+ });
+ });
+ if (!this.params.type) {
+ this.maxEvaluateNum += (item.val * 1);
+ } else {
+ this.maxEvaluateNum += item.users.length;
+ }
this.addForm.candidateNum.push({
deptId: item.deptId,
deptName: item.deptName,
- val: item.selected.length,
- users
- })
- })
- this.addForm.evaluateNum = evaluateNums + ''
- },
- deep: true
- }
- },
- methods: {
- handleSubmit() {
- this.$refs.addFormRef.validate((valid) => {
- add(this.addForm).then(() => {
- this.$message({
- type: "success",
- message: "操作成功!"
- });
- this.refreshTable()
- }, () => {
- this.$message({
- type: "error",
- message: "操作失败!"
+ val: this.params.type ? item.users.length : item.val,
+ users,
});
});
+ },
+ deep: true,
+ },
+ },
+ methods: {
+ submitOrEdit() {
+ const { candidateNum } = this.addForm
+ const isExist = candidateNum.find(item => item.val === void 0 || item.val === 0 || item.users.length === 0)
+ candidateNum.forEach(candidate => {
+ if (candidate.val > candidate.users.length) {
+ candidate.val = candidate.users.length
+ }
+ })
+ if (isExist) {
+ this.$message.warning(`${isExist.deptName}候选人人数不可为空或者0`)
+ } else {
+ this.params.isEdit ? this.handleEdit() : this.handleSubmit()
+ }
+ },
+ handleSubmit() {
+ this.$refs.addFormRef.validate(valid => {
+ this.params.type && (this.addForm.evaluateState = 1)
+ add(this.addForm).then(
+ () => {
+ this.$message({
+ type: 'success',
+ message: '操作成功!',
+ });
+ this.refreshTable();
+ },
+ () => {
+ this.$message({
+ type: 'error',
+ message: '操作失败!',
+ });
+ }
+ );
});
},
handleEdit() {
- this.$refs.addFormRef.validate((valid) => {
- update(this.addForm).then(() => {
- this.$message({
- type: "success",
- message: "操作成功!"
- });
- this.refreshTable()
- }, error => {
- this.$message({
- type: "error",
- message: error
- });
- });
- })
+ this.$refs.addFormRef.validate(valid => {
+ update(this.addForm).then(
+ () => {
+ this.$message({
+ type: 'success',
+ message: '操作成功!',
+ });
+ this.refreshTable();
+ },
+ error => {
+ this.$message({
+ type: 'error',
+ message: error,
+ });
+ }
+ );
+ });
},
refreshTable() {
this.$emit('refreshTable', {
pageSize: 10,
currentPage: 1,
- total: 0
- })
- this.params.visible = false
+ total: 0,
+ });
+ this.params.visible = false;
},
- initData(tenantId) {
- // 读取部门列表
- getDeptTree(tenantId).then(res => {
- const result = _.cloneDeep(res.data.data);
- let deptList = []
- result.forEach(item => {
- deptList.push(item)
- if (item.children) {
- deptList = result.concat(item.children)
- delete item.children
- }
- })
- return deptList
- }).then(deptList => {
- const depts_list = _.cloneDeep(deptList)
- this.depts = []
- depts_list.forEach(dept => {
- getList(1, 99999, {}, dept.id).then(employeeRes => {
- const { records } = employeeRes.data.data
- this.depts.push({
- deptId: dept.id,
- deptName: dept.title,
- users: [],
- employees: records
- })
+ async initData(tenantId) {
+ const deptTreeRes = await getDeptTree(tenantId)
+ let deptList = []
+ const cloneDeptTreeRes = _.cloneDeep(deptTreeRes.data.data)
+ // 扁平化deptTree
+ cloneDeptTreeRes.forEach(item => {
+ deptList.push(item);
+ if (item.children) {
+ item.children.forEach(ic => {
+ ic.title = item.title + '/' + ic.title;
+ })
+ deptList = deptList.concat(item.children);
+ delete item.children;
+ }
+ })
+ const depts_list = _.cloneDeep(deptList)
+ this.depts = []
+ for (const dept of depts_list) {
+ const employeeRes = await getList(1, 99999, { userType: 2 }, dept.id)
+ const { records } = employeeRes.data.data
+ this.depts.push({
+ deptId: dept.id,
+ deptName: dept.title,
+ users: [],
+ employees: records
+ });
+ }
+ const params = _.cloneDeep(this.params.addForm.candidateNum) || []
+ const newParams = params.map(item => {
+ const value = this.depts.find(dept => item.deptId === dept.deptId);
+ item.employees = value?.employees || [];
+ return item
+ })
+ let defaultUsers = []
+ newParams.forEach(item => {
+ const users = item.users.filter(user => item.employees.find(employee => employee.id === user.id))
+ // 判断当前item.users和users的区别
+ defaultUsers = item.users.filter(iUser => !users.includes(iUser))
+ // 改变为修改后的users
+ item.users = users
+ })
+ const resParams = newParams.filter(item => item.employees.length > 0 && item.users.length > 0)
+ this.selectGroup = resParams
+ // 是否有修改的user， 有的话去修改
+ defaultUsers.length > 0 && update(this.addForm)
+ },
+ handleEmployeeChange(val, content) {
+ if (val) {
+ content.users = []
+ content.employees.forEach(item => {
+ content.users.push({
+ id: item.id,
+ name: item.name
})
})
- })
+ } else {
+ content.users = []
+ }
}
},
- mounted() {
- // this.initData(website.tenantId);
- }
-}
+};
</script>
<style lang="scss" scoped>
.content {
- height: 400px;
+ max-height: 400px;
overflow: auto;
-}
-.select-list {
- width: 100%;
- .select-item {
- width: 100%;
- margin-top: 15px;
- .el-select {
+ .select-list {
+ width: 100%;
+
+ .select-item {
width: 100%;
+ margin-top: 15px;
+ display: flex;
+
+ .select-num {
+ flex: 2;
+ }
+
+ .el-select {
+ flex: 5;
+ margin-left: 10px;
+ }
}
}
+
+ .evaluateNum-input {
+ width: 100%;
+
+ :deep() {
+ .el-input__inner {
+ text-align: left;
+ }
+ }
+ }
+}
+
+.allSelected {
+ padding: 0 20px;
+ border-bottom: 1px solid #dcdcdc;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3