From a622aad2cc6b12ca2deff7a9d4e433270ec97064 Mon Sep 17 00:00:00 2001
From: xieb <vip_xiaobin810@163.com>
Date: Mon, 25 Dec 2023 10:25:46 +0800
Subject: [PATCH] 系统配置
---
src/views/evaluate/components/addDialog.vue | 390 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 316 insertions(+), 74 deletions(-)
diff --git a/src/views/evaluate/components/addDialog.vue b/src/views/evaluate/components/addDialog.vue
index ad11f95..a191ae7 100644
--- a/src/views/evaluate/components/addDialog.vue
+++ b/src/views/evaluate/components/addDialog.vue
@@ -1,42 +1,77 @@
<template>
- <el-dialog v-model="params.visible" :title="params.title" width="600px" :destroy-on-close="true">
- <el-form :model="addForm" label-width="120px">
- <el-form-item label="任务名称:">
- <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
- </el-form-item>
- <el-form-item label="任务类别:">
- <el-input v-model="addForm.taskType" placeholder="请输入任务类别"></el-input>
- </el-form-item>
- <el-form-item label="认定标准描述:">
- <el-input v-model="addForm.remark" placeholder="请输入任务名称"></el-input>
- </el-form-item>
- <el-form-item label="候选人数量:">
- <ul class="select-group">
- <li>技术部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
- <li>财务部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
- <li>人事部：<el-select placeholder="请设置该部门的评选人数"></el-select></li>
- </ul>
- </el-form-item>
- <el-form-item label="候选人截止日期:">
- <el-date-picker v-model="addForm.candidateCutoffTime" type="datetime" placeholder="请选择截止时间" style="width: 100%;" />
- </el-form-item>
- <el-form-item label="候选人截止日期:">
- <el-date-picker v-model="addForm.evaluateCutoffTime" type="datetime" placeholder="请选择截止时间" style="width: 100%;" />
- </el-form-item>
- <el-form-item label="评优数量:">
- <el-input v-model="addForm.evaluateNum" placeholder="请输入评优数量"></el-input>
- </el-form-item>
- </el-form>
+ <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">
+ <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="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">
+ <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>
+ </el-select>
+ </el-form-item>
+ </div>
+ </el-form-item>
+ <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-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" 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>
+ </el-form>
+ </div>
<template #footer>
<span class="dialog-footer">
- <el-button @click="addParams.visible = false">取消</el-button>
- <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+ <el-button @click="params.visible = false">取消</el-button>
+ <el-button type="primary" @click="submitOrEdit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<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 _ from 'lodash';
+
export default {
props: {
params: {
@@ -44,65 +79,272 @@
default: () => {
return {
visible: false,
- title: '',
- addForm: {}
+ title: '新增',
+ isEdit: false,
+ type: 0,
+ addForm: {},
};
- }
- }
+ },
+ },
},
data() {
return {
- title: '新增',
+ depts: [],
+ selectGroup: [],
addForm: {
- id: "",
- tenantId: "",
- taskName: "",
- taskType: "",
- remark: "",
- candidateNum: "",
- candidateCutoffTime: "",
- candidateState: "",
- evaluateNum: "",
- evaluateCutoffTime: "",
- evaluateState: "",
- createUser: "",
- createDept: "",
- createTime: "",
- updateUser: "",
- updateTime: "",
- status: "",
- isDeleted: ""
+ 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,
+ };
},
watch: {
- 'params.addForm': {
+ 'params.visible': {
handler(val) {
- this.addForm = val;
+ val && this.initData(website.tenantId);
+ 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 + '';
+ }
},
- deep: true
- }
+ deep: true,
+ immediate: true,
+ },
+ 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,
+ });
+ });
+ 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: 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,
+ });
+ }
+ );
+ });
+ },
+ refreshTable() {
+ this.$emit('refreshTable', {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ });
+ this.params.visible = false;
+ },
+ 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 = []
+ }
+ }
+ },
+};
</script>
-<style scoped>
-.select-group {
- list-style: none;
- margin: 0;
- padding: 0;
- width: 100%;
-}
-.select-group li {
- margin-top: 15px;
+<style lang="scss" scoped>
+.content {
+ 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;
+ }
+ }
+ }
}
-.select-group li:first-child {
- margin-top: 0;
+.allSelected {
+ padding: 0 20px;
+ border-bottom: 1px solid #dcdcdc;
}
-
-
</style>
\ No newline at end of file
--
Gitblit v1.9.3