From 06dd89e20c026ed578dcbc7618f83c7b3d8f6e15 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 29 Dec 2023 15:23:29 +0800
Subject: [PATCH] 考核任务任务配置完善
---
src/views/evaluate/components/addCandidate.vue | 383 ++++++++++++++++++++++++++++--------------------------
1 files changed, 200 insertions(+), 183 deletions(-)
diff --git a/src/views/evaluate/components/addCandidate.vue b/src/views/evaluate/components/addCandidate.vue
index 45986e2..5825a94 100644
--- a/src/views/evaluate/components/addCandidate.vue
+++ b/src/views/evaluate/components/addCandidate.vue
@@ -1,206 +1,223 @@
<template>
- <el-dialog v-model="params.visible" title="新增候选人" width="60%" destroy-on-close>
- <avue-crud v-model="form" :option="option" :data="data" v-model:page="table.page" :table-loading="table.loading"
- @row-save="rowSave" @selection-change="selectionChange" @on-load="onLoad">
- <template #menu="{ row }">
- <el-popconfirm title="是否确认删除当前候选人?" @confirm="rowDel(row)">
- <template #reference>
- <el-button text plan type="primary" icon="el-icon-delete">删除</el-button>
- </template>
- </el-popconfirm>
- </template>
- </avue-crud>
+ <el-dialog v-model="props.dialogParams.visible" title="添加候选人" @close="dialogClose">
+ <div style="margin-bottom: 20px;" v-if="!form.deptId">
+ <el-alert title="请先选择部门信息" type="warning" />
+ </div>
+ <el-form :model="form" ref="formRef" :rules="rules" label-width="70px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="部门" prop="deptId">
+ <el-cascader v-model="form.deptId" :props="cascaderProps" placeholder="请选择部门" @change="deptChange" style="width: 100%;" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="候选人" prop="userId">
+ <el-select v-model="form.userId" placeholder="请选择候选人"
+ :disabled="userSelectOption.length > 0 ? false : true" @change="userSelectChange"
+ style="width: 100%;">
+ <el-option v-for="item in userSelectOption" :label="item.name" :key="item.id"
+ :value="item.id" />
+ <div class="loading-more" @click="loadMore">{{ loadingMoreText }}</div>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="职务">
+ <el-input v-model="form.postName" placeholder="请填写职务" disabled />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <el-button @click="() => props.dialogParams.visible = false">取消</el-button>
+ <el-button type="primary" @click="submit">确定</el-button>
+ </template>
</el-dialog>
</template>
<script setup>
-import { computed, getCurrentInstance, reactive, ref, watch } from 'vue';
-import _ from 'lodash'
-import { ElMessage } from 'element-plus'
-import {
- getList
-} from '@/api/system/user';
-import {
- getCandidateList,
- addCandidate,
- removeCandidate
-} from '@/api/evaluate/evaluateTask'
+import { computed, markRaw, reactive, ref, watch } from 'vue';
+import { getDeptLazyTree } from '@/api/system/dept.js'
+import { getList } from '@/api/system/user.js'
+import { addCandidate } from '@/api/evaluate/evaluateTask'
+import { ElMessage } from 'element-plus';
-const dataSourceStatus = {
- 0: '系统分配',
- 1: '手动添加'
-}
-
-const config = getCurrentInstance().appContext.config.globalProperties
-
-const $props = defineProps({
- params: {
+const props = defineProps({
+ dialogParams: {
type: Object,
- default: () => ({
- visible: false,
- type: 0,
- data: {},
- }),
- }
-})
-
-const $emit = defineEmits(['refreshTable'])
-
-const data = ref([])
-const form = ref()
-const table = reactive({
- loading: false,
- page: {
- pageSize: 10,
- currentPage: 1,
- total: 0,
+ default: () => { }
},
- selectionList: [],
})
-const option = reactive({
- height: '300',
- tip: false,
- searchShow: true,
- searchMenuSpan: 6,
- border: true,
- index: true,
- viewBtn: false,
- addBtn: true,
- editBtn: false,
- delBtn: false,
- selection: false,
- refreshBtn: false,
- dialogClickModal: false,
- menuFixed: 'right',
- labelWidth: 100,
- column: [
+const emits = defineEmits(['refresh'])
+
+const formRef = ref(null)
+
+const form = reactive({
+ userId: '',
+ userName: '',
+ deptId: '',
+ deptName: '',
+ postName: ''
+})
+
+const rules = markRaw({
+ userId: [
{
- label: '候选人姓名',
- prop: 'userId',
- type: 'select',
- dicData: [],
- props: {
- label: 'name',
- value: 'id'
- },
- control: (val, row) => {
- const { findObject } = config
- const column = findObject(option.column, 'userId') || []
- const params = column.dicData.find(item => item.id === val)
- if (!params) return
- row.deptName = params.deptName
- row.postName = params.postName
- row.userName = params.name
- },
- rules: [
- {
- required: true,
- message: '请选择候选人',
- trigger: 'blur',
- },
- ]
- },
+ required: true,
+ message: '请选择候选人',
+ trigger: 'click',
+ }
+ ],
+ deptId: [
{
- label: '部门',
- prop: 'deptName',
- type: 'input',
- disabled: true,
- },
- {
- label: '部门',
- prop: 'postName',
- type: 'input',
- disabled: true,
- },
- {
- label: '数据来源',
- prop: 'dataSource',
- type: 'input',
- display: false,
- formatter: (row) => {
- return dataSourceStatus[row.dataSource] || '系统分配'
- },
+ required: true,
+ message: '请选择部门',
+ trigger: 'click',
}
]
})
-
-const initData = () => {
- const { findObject } = config
- const column = findObject(option.column, 'userId');
- getList(1, 999999, { userType: 2 }).then(res => {
- column.dicData = res.data.data.records
- })
-}
-
-const rowSave = (row, done, loading) => {
- const { data: { id, taskName } } = $props.params
- const value = data.value.find(item => item.userId === row.userId)
- if (value) {
- ElMessage.warning('当前候选人已存在，不可重复添加！！')
- loading()
- return
- }
- addCandidate({
- evaluateTaskId: id,
- evaluateTaskName: taskName,
- ...row,
- dataSource: 1
- }).then(res => {
- ElMessage.success('新增候选人成功');
- onLoad(table.page);
- done();
- }, error => {
- loading();
- console.log(error);
- })
-}
-
-const rowDel = ({ id }) => {
- removeCandidate(id).then(res => {
- ElMessage.success('删除当前候选人成功');
- onLoad(table.page);
- }, error => {
- ElMessage.error(error);
- console.log(error);
- })
-}
-
-const selectionChange = (list) => {
- table.selectionList = list;
-}
-
-const onLoad = (page, params = {}) => {
- table.loading = true;
-
- let values = {
- evaluateTaskId: $props.params.data.id,
- ...params
- };
- getCandidateList(page.currentPage, page.pageSize, values).then(res => {
- const candidateRes = res.data.data;
- table.page.total = candidateRes.total;
- data.value = candidateRes.records;
- table.loading = false;
- });
-}
-
-watch(() => $props.params.visible, (val) => {
- val && initData();
-}, {
- deep: true,
- immediate: true
+const requestParams = reactive({
+ evaluateTaskId: '',
+ evaluateTaskName: '',
+ userId: '',
+ userName: '',
+ deptId: '',
+ deptName: '',
+ postName: ''
})
-const ids = computed(() => {
- let ids = [];
- table.selectionList.forEach(ele => {
- ids.push(ele.id);
- });
- return ids.join(',');
+// 当前部门
+const currentDeptId = ref('')
+
+// options 数据
+const userSelectOption = ref([])
+
+// 懒加载
+const isOptionsLoading = ref(false)
+
+const loadingMoreText = computed(() => {
+ if (userSelectOption.value.length >= page.total) {
+ return '数据已全部加载完成'
+ }
+ if (isOptionsLoading.value) {
+ return '加载中...'
+ }
+ if (!isOptionsLoading.value) {
+ return '点击加载更多'
+ }
+})
+// 分页
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0
+})
+
+const loadMore = async () => {
+ isOptionsLoading.value = true
+ page.current += 1
+ const res = await initUserList(currentDeptId.value)
+ userSelectOption.value = [...userSelectOption.value, ...res]
+ isOptionsLoading.value = false
+}
+
+// 初始化部门数据
+const initDept = async (parentId) => {
+ const deptResult = await getDeptLazyTree(parentId)
+ return deptResult.data.data
+}
+
+// 初始化用户列表
+const initUserList = (deptId) => {
+ return getList(
+ page.current,
+ page.size,
+ {
+ userType: 2,
+ },
+ deptId,
+ ).then(res => {
+ page.total = res.data.data.total
+ return res.data.data.records
+ })
+}
+
+// 选择部门改变
+const deptChange = async (value) => {
+ const id = value[value.length - 1]
+ currentDeptId.value = id
+ const userList = await initUserList(id)
+ userSelectOption.value = userList
+}
+
+// 级联配置
+const cascaderProps = {
+ lazy: true,
+ label: 'title',
+ value: 'id',
+ multiple: false,
+ lazyLoad: async (node, resovle) => {
+ const level = node.level || 0
+ if (level == 0) {
+ const res = await initDept(level)
+ resovle(res)
+ } else {
+ const { value } = node
+ const res = await initDept(value)
+ resovle(res)
+ }
+ },
+ leaf(node) {
+ const { hasChildren } = node
+ return !hasChildren
+ }
+}
+
+const userSelectChange = (value) => {
+ const obj = userSelectOption.value.find(item => item.id == value)
+ const { id, deptName, deptId, postName, realName } = obj
+ requestParams.userId = id
+ requestParams.deptId = deptId
+ requestParams.userName = realName
+ requestParams.deptName = deptName
+ requestParams.postName = postName
+
+ form.deptName = deptName
+ form.postName = postName
+}
+
+const submit = () => {
+ formRef.value.validate(valid => {
+ if (!valid) return ElMessage.error('添加候选人失败')
+ addCandidate(requestParams).then(res => {
+ ElMessage.success('添加候选人成功')
+ props.dialogParams.visible = false
+ emits('refresh')
+ }, error => {
+ ElMessage.error(error)
+ })
+ })
+}
+
+const dialogClose = () => {
+ formRef.value.resetFields()
+}
+
+watch(() => props.dialogParams.visible, (val) => {
+ if (!val) return
+ const { evaluateTaskId, evaluateTaskName } = props.dialogParams.taskParams
+ requestParams.evaluateTaskName = evaluateTaskName
+ requestParams.evaluateTaskId = evaluateTaskId
+}, {
+ deep: true
})
</script>
<style lang="scss" scoped>
+.loading-more {
+ text-align: center;
+ cursor: pointer;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3