<template>
|
<el-dialog v-model="props.params.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" v-loading="isLoading"
|
element-loading-text="数据加载中，请稍后。。。">
|
<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="isLoading || userSelectOption.length > 0 ? false : true" @change="userSelectChange"
|
style="width: 100%;">
|
<div v-loading="isLoading" element-loading-text="数据加载中，请稍后。。。">
|
<el-option v-for="item in userSelectOption" :label="item.name" :key="item.id"
|
:value="item.id" />
|
<div class="loading-more" @click="loadMore">{{ loadingMoreText }}</div>
|
</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.params.visible = false">取消</el-button>
|
<el-button type="primary" @click="submit" :loading="isLoading">确定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, markRaw, reactive, ref, watch } from 'vue';
|
import { getDeptLazyTree } from '@/api/system/dept.js'
|
import { getList } from '@/api/system/user.js'
|
import { ElMessage } from 'element-plus';
|
import { addEtaskCc } from '@/api/evaluate/evaluateTask'
|
|
const props = defineProps({
|
params: {
|
type: Object,
|
default: () => { }
|
},
|
})
|
|
const emits = defineEmits(['refresh'])
|
|
const isLoading = ref(true)
|
|
const curType = ref()
|
|
const formRef = ref(null)
|
|
const form = reactive({
|
evaluateTaskCategoryId: '',
|
userId: '',
|
userName: '',
|
deptId: '',
|
deptName: '',
|
postName: ''
|
})
|
|
|
const rules = markRaw({
|
userId: [
|
{
|
required: true,
|
message: '请选择候选人',
|
trigger: 'click',
|
}
|
],
|
deptId: [
|
{
|
required: true,
|
message: '请选择部门',
|
trigger: 'click',
|
}
|
]
|
})
|
|
const requestParams = reactive({
|
evaluateTaskCategoryId: '',
|
userId: '',
|
userName: '',
|
deptId: '',
|
deptName: '',
|
postName: ''
|
})
|
|
const currentDeptId = ref('')
|
|
|
const deptList = 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)
|
isLoading.value = false
|
return deptResult.data.data
|
}
|
|
// 初始化用户列表
|
const initUserList = (deptId) => {
|
isLoading.value = true
|
return getList(
|
page.current,
|
page.size,
|
{
|
userType: 2,
|
},
|
deptId,
|
).then(res => {
|
page.total = res.data.data.total
|
isLoading.value = false
|
return res.data.data.records
|
})
|
}
|
|
|
// 选择部门改变
|
const deptChange = async (value) => {
|
const id = value[value.length - 1]
|
currentDeptId.value = id
|
form.userId = ''
|
page.current = 1
|
const userList = await initUserList(id)
|
userSelectOption.value = userList
|
if (userList.length <= 0) ElMessage.warning('当前部门人员为空，请选择其他部门！！')
|
}
|
|
// 级联配置
|
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)
|
deptList.value = res
|
resovle(res)
|
} else {
|
const { value } = node
|
const res = await initDept(value)
|
deptList.value = res
|
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('添加候选人失败')
|
addEtaskCc(requestParams).then(res => {
|
ElMessage.success('添加候选人成功')
|
props.params.visible = false
|
emits('refreshTable', {
|
currentPage: 1,
|
pageSize: 10,
|
})
|
}, error => {
|
ElMessage.error(error)
|
})
|
})
|
}
|
|
const dialogClose = () => {
|
formRef.value.resetFields()
|
}
|
|
watch(() => props.params.visible, (val) => {
|
if (!val) return
|
const { id } = props.params.data
|
requestParams.evaluateTaskCategoryId = id
|
|
}, {
|
deep: true
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.loading-more {
|
text-align: center;
|
cursor: pointer;
|
}
|
</style>
|
