<template>
|
<el-dialog v-model="params.dialogVisible" :title="params.isEdit ? '编辑' : '预览'" width="60%">
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-width="120px"
|
v-loading="isLoading"
|
element-loading-text="数据加载中"
|
ref="formRef"
|
:disabled="!params.isEdit"
|
>
|
<div class="form-content">
|
<div class="form-item">
|
<el-form-item label="被考核人部门:" prop="cDeptId">
|
<el-cascader
|
v-model="form.cDeptId"
|
:props="{
|
value: 'value',
|
label: 'title',
|
lazy: false,
|
}"
|
:options="cascaderOptions"
|
:show-all-levels="false"
|
@change="handleDeptChange"
|
style="width: 100%"
|
placeholder="请选择被考核人部门"
|
/>
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="被考核人" prop="userId">
|
<!-- <el-input v-model="form.userName" placeholder="请输入被考核人" /> -->
|
<el-select
|
v-model="form.userId"
|
placeholder="请选择被考核人"
|
@change="handleUserNameChange"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in userList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="被考核人职位:" prop="postName">
|
<el-input v-model="form.postName" disabled placeholder="请输入被考核人职位" />
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="考核人部门:" prop="cAssessorDeptId">
|
<el-cascader
|
v-model="form.cAssessorDeptId"
|
:props="{
|
value: 'value',
|
label: 'title',
|
lazy: false,
|
}"
|
:options="cascaderOptions"
|
:show-all-levels="false"
|
@change="handleAssessorDeptChange"
|
style="width: 100%"
|
placeholder="请选择考核人部门"
|
/>
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="考核人:" prop="assessorUserId">
|
<!-- <el-input v-model="form.assessorUserName" placeholder="请输入被考核人部门" /> -->
|
<el-select
|
v-model="form.assessorUserId"
|
placeholder="请选择被考核人"
|
style="width: 100%"
|
@change="handleAssessorUserChange"
|
>
|
<el-option
|
v-for="item in assessorUserList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="考核人职位:" prop="assessorPostName">
|
<el-input v-model="form.assessorPostName" disabled placeholder="请输入考核人职位" />
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="权值:" prop="weight">
|
<el-input v-model="form.weight" placeholder="请输入权值" />
|
</el-form-item>
|
</div>
|
<div class="form-item">
|
<el-form-item label="范围:" prop="rangeVal">
|
<el-input v-model="form.rangeVal" placeholder="请输入范围" />
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
<template #footer v-if="params.isEdit">
|
<el-button type="primary" icon="el-icon-edit" :disabled="isLoading" @click="infoUpdate"
|
>修改</el-button
|
>
|
<el-button icon="el-icon-close" @click="params.dialogVisible = false">取消</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { reactive, ref, watch } from 'vue';
|
import website from '@/config/website';
|
import { getDeptTree } from '@/api/system/dept';
|
import { getList as getUserList } from '@/api/system/user.js';
|
import { ElMessage } from 'element-plus';
|
import { update } from '@/api/assessment/assessmentConfig';
|
|
const props = defineProps({
|
params: {
|
type: Object,
|
default: () => {},
|
},
|
});
|
|
const emits = defineEmits(['refresh']);
|
|
const isLoading = ref(false);
|
|
const valueArr = ['id'];
|
|
const form = reactive({
|
id: '',
|
userId: '',
|
userName: '',
|
postId: '',
|
postName: '',
|
deptId: '',
|
deptName: '',
|
assessorUserId: '',
|
assessorUserName: '',
|
assessorDeptId: '',
|
assessorDeptName: '',
|
assessorPostId: '',
|
assessorPostName: '',
|
weight: '',
|
rangeVal: '',
|
cDeptId: '',
|
cAssessorDeptId: '',
|
});
|
const formRef = ref(null);
|
|
const rules = {
|
userId: [
|
{
|
required: true,
|
message: '请选择被考核人',
|
trigger: 'change',
|
},
|
],
|
assessorUserId: [
|
{
|
required: true,
|
message: '请选择考核人',
|
trigger: 'change',
|
},
|
],
|
weight: [
|
{
|
required: true,
|
message: '请输入权值',
|
trigger: 'change',
|
},
|
],
|
rangeVal: [
|
{
|
required: true,
|
message: '请输入范围',
|
trigger: 'change',
|
},
|
],
|
cDeptId: [
|
{
|
required: true,
|
message: '请选择被考核人部门',
|
trigger: 'change',
|
},
|
],
|
cAssessorDeptId: [
|
{
|
required: true,
|
message: '请选择考核人部门',
|
trigger: 'change',
|
},
|
],
|
postName: [
|
{
|
required: true,
|
message: '请填写被考核人部门',
|
trigger: 'change',
|
},
|
],
|
assessorPostName: [
|
{
|
required: true,
|
message: '请填写考核人部门',
|
trigger: 'change',
|
},
|
],
|
};
|
|
const userList = ref([]);
|
const handleDeptChange = deptId => {
|
const cdeptId = deptId[deptId.length - 1];
|
getUsers(deptId, 1);
|
form.deptId = cdeptId;
|
};
|
const handleUserNameChange = userId => {
|
const user = userList.value.find(userItem => userItem.id === userId);
|
form.userName = user.name;
|
form.postId = user.postId;
|
form.deptName = user.deptName;
|
form.postName = user.postName;
|
};
|
|
const assessorUserList = ref([]);
|
const handleAssessorDeptChange = deptId => {
|
const cdeptId = deptId[deptId.length - 1];
|
getUsers(cdeptId, 2);
|
form.assessorDeptId = cdeptId;
|
};
|
const handleAssessorUserChange = userId => {
|
const user = assessorUserList.value.find(userItem => userItem.id === userId);
|
form.assessorUserName = user.name;
|
form.assessorPostId = user.postId;
|
form.assessorDeptName = user.deptName;
|
form.assessorPostName = user.postName;
|
};
|
|
const getUsers = (deptId, type) => {
|
isLoading.value = true;
|
getUserList(
|
1,
|
1000,
|
{
|
userType: 2,
|
},
|
deptId
|
).then(usersRes => {
|
if (usersRes.data.code !== 200) return ElMessage.error('获取用户信息失败！！！');
|
if (type === 1) {
|
userList.value = usersRes.data.data.records;
|
} else {
|
assessorUserList.value = usersRes.data.data.records;
|
}
|
isLoading.value = false;
|
});
|
};
|
|
const infoUpdate = () => {
|
formRef.value.validate(valid => {
|
if (!valid) return;
|
update(form).then(res => {
|
if (res.data.code !== 200) return ElMessage.error(res.data.msg);
|
props.params.dialogVisible = false;
|
const page = {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
};
|
emits('refresh', page);
|
});
|
});
|
};
|
|
const cascaderOptions = ref([]);
|
const getDeptList = defaultParams => {
|
isLoading.value = true;
|
getDeptTree(website.tenantId).then(deptRes => {
|
const deptData = deptRes.data;
|
if (deptData.code !== 200) return ElMessage.error('获取部门信息失败！！！');
|
cascaderOptions.value = deptData.data;
|
|
Object.keys(form).forEach(key => {
|
form[key] = defaultParams[key];
|
if (key === 'cDeptId') {
|
form[key] = [cascaderOptions.value[0].value, form['deptId']];
|
handleDeptChange(form[key]);
|
}
|
if (key === 'cAssessorDeptId') {
|
form[key] = [cascaderOptions.value[0].value, form['assessorDeptId']];
|
handleAssessorDeptChange(form[key]);
|
}
|
});
|
|
isLoading.value = false;
|
});
|
};
|
|
watch(
|
() => props.params,
|
val => {
|
if (val.dialogVisible === false) return;
|
getDeptList(val);
|
},
|
{
|
deep: true,
|
immediate: true,
|
}
|
);
|
</script>
|
|
<style lang="scss" scoped>
|
.form-content {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
.form-item {
|
width: 50%;
|
}
|
}
|
</style>
|
