From 4b898d43d04242e74157aedafa5e1c7d75d1abcd Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 15 Dec 2023 11:40:42 +0800
Subject: [PATCH] 评优任务页面、考核结果页面修改
---
src/views/evaluate/components/addDialog.vue | 551 +++++++++++++++++++++++++++---------------------------
1 files changed, 272 insertions(+), 279 deletions(-)
diff --git a/src/views/evaluate/components/addDialog.vue b/src/views/evaluate/components/addDialog.vue
index 6b46619..c257588 100644
--- a/src/views/evaluate/components/addDialog.vue
+++ b/src/views/evaluate/components/addDialog.vue
@@ -1,92 +1,60 @@
<template>
- <el-dialog v-model="params.visible" :title="params.title" width="60%" destroyOnClose>
- <div class="content">
- <el-form :model="addForm" label-width="130px" :rules="rules" ref="addFormRef">
- <el-form-item label="任务名称:" prop="taskName">
- <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
- </el-form-item>
- <el-form-item label="任务类别:" prop="taskType">
- <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-form-item>
- <!-- <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%;"
- placeholder="请选择候选部门"
- >
- <el-option
- v-for="dept in depts"
- :key="dept.deptId"
- :label="dept.deptName"
- :value="dept"
- ></el-option>
- </el-select>
- <div class="select-list" v-for="content in selectGroup" :key="content.deptId">
- <span>{{content.deptName}}:</span>
- <el-form-item label="候选人数:" prop="deptnumber" class="select-num">
- <el-input
- type="number"
- :min="1"
- :max="10"
- v-model="addForm.deptnumber"
- placeholder="请输入"
- ></el-input>
- </el-form-item>
- <el-form-item label="参选人:" class="select-item">
- <el-select v-model="content.users" value-key="id" multiple>
- <el-option
- v-for="employee in content.employees"
- :key="employee.id"
- :label="employee.name"
- :value="employee"
- ></el-option>
- </el-select>
- </el-form-item>
- </div>
- </el-form-item>
- <el-form-item label="候选人截止日期:" prop="candidateCutoffTime">
- <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-form-item>
- <el-form-item label="评优截止日期:" prop="evaluateCutoffTime">
- <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>
- </el-form>
- </div>
- <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>
- </span>
- </template>
- </el-dialog>
+ <el-dialog v-model="params.visible" :title="params.title" width="60%" destroyOnClose>
+ <div class="content">
+ <el-form :model="addForm" label-width="130px" :rules="rules" ref="addFormRef">
+ <el-form-item label="任务名称:" prop="taskName">
+ <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
+ </el-form-item>
+ <el-form-item label="任务类别:" prop="taskType">
+ <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-form-item>
+ <!-- <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%;" placeholder="请选择候选部门">
+ <el-option v-for="dept in depts" :key="dept.deptId" :label="dept.deptName"
+ :value="dept"></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-input-number min="1" :max="content.employees.length" v-model="content.val"
+ controls-position="right" placeholder="请输入候选人数量" class="select-num"></el-input-number>
+ <el-select v-model="content.users" value-key="id" multiple placeholder="请输入候选人">
+ <el-option v-for="employee in content.employees" :key="employee.id" :label="employee.name"
+ :value="employee"></el-option>
+ </el-select>
+ </el-form-item>
+ </div>
+ </el-form-item>
+ <el-form-item label="候选人截止日期:" prop="candidateCutoffTime">
+ <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-number min="1" :max="maxEvaluateNum" 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-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>
+ </el-form>
+ </div>
+ <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>
+ </span>
+ </template>
+ </el-dialog>
</template>
<script>
@@ -97,211 +65,236 @@
import _ from 'lodash';
export default {
- props: {
- params: {
- type: Object,
- default: () => {
+ props: {
+ params: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ title: '新增',
+ isEdit: false,
+ type: 0,
+ addForm: {},
+ };
+ },
+ },
+ },
+ data() {
return {
- visible: false,
- title: '新增',
- isEdit: false,
- type: 0,
- addForm: {},
+ depts: [],
+ selectGroup: [],
+ addForm: {
+ id: '',
+ tenantId: '',
+ taskName: '',
+ taskType: '',
+ remark: '',
+ type: '',
+ candidateNum: [],
+ candidateCutoffTime: '',
+ candidateState: '',
+ evaluateNum: '',
+ evaluateCutoffTime: '',
+ evaluateState: '',
+ createUser: '',
+ createDept: '',
+ createTime: '',
+ updateUser: '',
+ updateTime: '',
+ status: '',
+ isDeleted: '',
+ },
+ rules: {
+ taskName: [
+ { required: true, message: '请输入任务名称', trigger: 'blur' }
+ ],
+ taskType: [
+ { required: true, message: '请输入任务类别', trigger: 'blur' }
+ ],
+ remark: [
+ { required: true, message: '请输入认定标准描述', trigger: 'blur' }
+ ],
+ type: [
+ { required: true, message: '请选择评优类型', trigger: 'blur' }
+ ],
+ candidateNum: [
+ { required: true, message: '请选择候选人截止日期', trigger: 'click' }
+ ],
+ candidateCutoffTime: [
+ { required: true, message: '请选择候选人截止日期', trigger: 'click' },
+ ],
+ evaluateNum: [
+ { required: true, message: '请输入评优数量', trigger: 'click' }
+ ],
+ evaluateCutoffTime: [
+ { required: true, message: '请选择评优截止时间', trigger: 'click' },
+ ],
+ },
+ maxEvaluateNum: 0,
};
- },
},
- },
- data() {
- return {
- depts: [],
- selectGroup: [],
- addForm: {
- id: '',
- tenantId: '',
- taskName: '',
- taskType: '',
- remark: '',
- type: '',
- candidateNum: [],
- candidateCutoffTime: '',
- candidateState: '',
- evaluateNum: '',
- evaluateCutoffTime: '',
- evaluateState: '',
- createUser: '',
- createDept: '',
- createTime: '',
- updateUser: '',
- updateTime: '',
- status: '',
- isDeleted: '',
- },
- rules: {
- taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
- taskType: [{ required: true, message: '请输入任务类别', trigger: 'blur' }],
- remark: [{ required: true, message: '请输入认定标准描述', trigger: 'blur' }],
- type: [{ required: true, message: '请选择评优类型', trigger: 'blur' }],
- candidateNum: [{ required: true, message: '请选择候选人截止日期', trigger: 'click' }],
- candidateCutoffTime: [
- { required: true, message: '请选择候选人截止日期', trigger: 'click' },
- ],
- evaluateNum: [{ required: true, message: 'Please input Activity name', trigger: 'click' }],
- evaluateCutoffTime: [
- { required: true, message: 'Please input Activity name', trigger: 'click' },
- ],
- },
- };
- },
- watch: {
- 'params.visible': {
- handler(val) {
- val && this.initData(website.tenantId);
- this.addForm.type = this.params.type + '';
- if (this.params.isEdit) {
- this.addForm = this.params.addForm;
- this.addForm.type = this.params.type + '';
- }
- },
- deep: true,
- immediate: true,
+ watch: {
+ 'params.visible': {
+ handler(val) {
+ val && this.initData(website.tenantId);
+ this.addForm.type = this.params.type + '';
+ if (this.params.isEdit) {
+ this.addForm = this.params.addForm;
+ this.addForm.type = this.params.type + '';
+ }
+ },
+ deep: true,
+ immediate: true,
+ },
+ // 拦截candidateNum
+ selectGroup: {
+ handler(val) {
+ this.addForm.candidateNum = [];
+ this.maxEvaluateNum = 0;
+ val.forEach(item => {
+ const users = [];
+ item.users.forEach(user => {
+ users.push({
+ id: user.id,
+ name: user.name,
+ });
+ });
+ this.maxEvaluateNum += (item.val * 1);
+ console.log(item.val);
+ this.addForm.candidateNum.push({
+ deptId: item.deptId,
+ deptName: item.deptName,
+ val: item.val,
+ users,
+ });
+ });
+ },
+ deep: true,
+ },
},
- // 拦截candidateNum
- selectGroup: {
- handler(val) {
- this.addForm.candidateNum = [];
- val.forEach(item => {
- const users = [];
- item.users.forEach(user => {
- users.push({
- id: user.id,
- name: user.name,
+ methods: {
+ handleSubmit() {
+ this.$refs.addFormRef.validate(valid => {
+ add(this.addForm).then(
+ () => {
+ this.$message({
+ type: 'success',
+ message: '操作成功!',
+ });
+ this.refreshTable();
+ },
+ () => {
+ this.$message({
+ type: 'error',
+ message: '操作失败!',
+ });
+ }
+ );
});
- });
- this.addForm.candidateNum.push({
- deptId: item.deptId,
- deptName: item.deptName,
- val: item.users.length,
- users,
- });
- });
- },
- deep: true,
- },
- },
- methods: {
- handleSubmit() {
- this.$refs.addFormRef.validate(valid => {
- add(this.addForm).then(
- () => {
- this.$message({
- type: 'success',
- 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.refreshTable();
- },
- () => {
- this.$message({
- type: 'error',
- message: '操作失败!',
+ },
+ refreshTable() {
+ this.$emit('refreshTable', {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
});
- }
- );
- });
- },
- handleEdit() {
- this.$refs.addFormRef.validate(valid => {
- update(this.addForm).then(
- () => {
- this.$message({
- type: 'success',
- message: '操作成功!',
+ 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,
+ });
+ this.setDefaultValue(this.depts);
+ });
+ });
+ });
+ },
+ setDefaultValue(depts) {
+ const params = _.cloneDeep(this.params.addForm.candidateNum);
+ params.forEach(item => {
+ const value = depts.find(dept => item.deptId === dept.deptId);
+ item.employees = value?.employees || [];
});
- this.refreshTable();
- },
- error => {
- this.$message({
- type: 'error',
- message: error,
- });
- }
- );
- });
+ this.selectGroup = params;
+ },
},
- refreshTable() {
- this.$emit('refreshTable', {
- pageSize: 10,
- currentPage: 1,
- 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,
- });
- this.setDefaultValue(this.depts);
- });
- });
- });
- },
- setDefaultValue(depts) {
- const params = _.cloneDeep(this.params.addForm.candidateNum);
- params.forEach(item => {
- const value = depts.find(dept => item.deptId === dept.deptId);
- item.employees = value?.employees || [];
- });
- this.selectGroup = params;
- },
- },
- mounted() {},
+ mounted() { },
};
</script>
<style lang="scss" scoped>
.content {
- height: 40%;
- overflow: auto;
-}
-.select-list {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 15px;
- span {
- width: 80px;
- }
- .select-num {
- width: 250px;
- }
- .select-item {
- flex: 1;
- .el-select {
- width: 100%;
+ max-height: 400px;
+ overflow: auto;
+
+ .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;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3