<template>
|
<el-dialog :title="planDialogState.title" append-to-body custom-class="newDialog" top="0" v-model="planDialogState.planDialogVisible" width="600px">
|
<el-form ref="planFormRef" :rules="planDialogState.planFormRules" :model="planDialogState.planForm" size="default"
|
label-width="120px">
|
<el-form-item label="评估时间" prop="assessTime">
|
<el-date-picker
|
:disabled="planDialogState.disabled"
|
type="datetimerange"
|
v-model="planDialogState.planForm.assessTime"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
@change="formatTime">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="风险分析单元" prop="riskUnitId">
|
<el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.riskUnitId"
|
style="width:100%" placeholder="风险分析单元" clearable>
|
<el-option v-for="item in planDialogState.riskUnitList" :key="item.id" :label="item.riskName"
|
:value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="评估计划名称" prop="assessPlanName">
|
<el-input :disabled="planDialogState.disabled" v-model="planDialogState.planForm.assessPlanName"
|
placeholder="评估计划名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="计划制定人" prop="planUserId">
|
<el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.planUserId"
|
style="width:100%" placeholder="计划制定人" clearable>
|
<el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName"
|
:value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="辨识类型" prop="identificationType">
|
<el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.identificationType"
|
style="width:100%" placeholder="辨识类型" clearable>
|
<el-option v-for="item in planDialogState.typeList" :key="item.value" :label="item.name"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="辨识专家" class="valueSelect" prop="identificationUserInsert">
|
<el-select :disabled="planDialogState.disabled" multiple v-model="planDialogState.planForm.identificationUserInsert"
|
style="width:100%" :teleported="false" placeholder="辨识专家" clearable>
|
<el-option v-for="item in planDialogState.bsExperts" :key="item.id" :label="item.realName"
|
:value="item.id">
|
<div class="valueTable">
|
<div>
|
<div>姓名：</div>
|
<span>{{ item.realName }}</span></div>
|
<div>
|
<div>专业：</div>
|
<span>{{ item.userIdentities?.map(i => i.userIdentity).join(',') }}</span></div>
|
</div>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="评价专家" class="valueSelect" prop="evaluateUserInsert">
|
<el-select :disabled="planDialogState.disabled" multiple v-model="planDialogState.planForm.evaluateUserInsert"
|
style="width:100%" :teleported="false" placeholder="评价专家" clearable>
|
<el-option v-for="item in planDialogState.pjExperts" :key="item.id" :label="item.realName"
|
:value="item.id">
|
<div class="valueTable">
|
<div>
|
<div>姓名：</div>
|
<span>{{ item.realName }}</span></div>
|
<div>
|
<div>专业：</div>
|
<span>{{ item.userIdentities?.map(i => i.userIdentity).join(',') }}</span></div>
|
</div>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="planDialogState.planDialogVisible = !planDialogState.planDialogVisible"
|
size="default">取 消</el-button>
|
<el-button v-if="!planDialogState.disabled" type="primary" @click="onSubmitPlan"
|
size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref, getCurrentInstance} from "vue";
|
import {ElMessage} from "element-plus";
|
import {planApi} from "/@/api/analyse/plan";
|
import {isValidKey} from "/@/utils/methods";
|
|
const planFormRef = ref()
|
|
const planDialogState = reactive<PlanDialogType>({
|
title: '',
|
disabled: false,
|
planDialogVisible: false,
|
planForm: {
|
riskUnitId: null,
|
planUserId: null,
|
assessPlanName: '',
|
assessTime: [],
|
identificationType: null,
|
assessStartTime: '',
|
assessEndTime: '',
|
identificationUserInsert: [],
|
evaluateUserInsert: [],
|
riskType: 2
|
},
|
planFormRules: {
|
riskUnitId: [{required: true, message: '请选择风险分析单元', trigger: 'change'}],
|
assessPlanName: [{required: true, message: '请填写评估计划名称', trigger: 'blur'}],
|
assessTime: [{required: true, message: '请选择评估时间', trigger: 'blur'}],
|
planUserId: [{required: true, message: '请选择计划制定人', trigger: 'change'}],
|
identificationType: [{required: true, message: '请选择辨识类型', trigger: 'change'}],
|
identificationUserInsert: [{required: true, message: '请选择辨识专家', trigger: 'change'}],
|
evaluateUserInsert: [{required: true, message: '请选择评价专家', trigger: 'change'}],
|
},
|
riskUnitList: [],
|
personList: [],
|
typeList: [
|
{
|
name: '线上专家',
|
value: 1
|
},
|
{
|
name: '现场专家',
|
value: 2
|
},
|
{
|
name: '线上+现场',
|
value: 3
|
}
|
],
|
bsExperts: [],
|
pjExperts: []
|
})
|
|
const showPlanDialog = (title: string, value: PlanType, riskUnitList: RiskUnitType [], personList: SystemPersonType [], bsExperts: [], pjExperts: []) => {
|
planDialogState.planDialogVisible = true;
|
planDialogState.riskUnitList = riskUnitList;
|
planDialogState.personList = personList;
|
planDialogState.bsExperts = bsExperts;
|
planDialogState.pjExperts = pjExperts;
|
planDialogState.disabled = false
|
setTimeout(() => {
|
planFormRef.value.clearValidate();
|
});
|
if (title === '新增') {
|
planDialogState.title = '新增';
|
planDialogState.planForm = {
|
riskUnitId: null,
|
planUserId: null,
|
assessPlanName: '',
|
assessTime: [],
|
identificationType: null,
|
assessStartTime: '',
|
assessEndTime: '',
|
identificationUserInsert: [],
|
evaluateUserInsert: [],
|
riskType: 2
|
}
|
} else {
|
if(title === '查看'){
|
planDialogState.title = '查看'
|
planDialogState.disabled = true
|
}else{
|
planDialogState.title = '编辑'
|
planDialogState.planForm.id = value.id
|
}
|
for (let i in planDialogState.planForm) {
|
if (isValidKey(i, planDialogState.planForm)) {
|
planDialogState.planForm[i] = value[i]
|
}
|
}
|
planDialogState.planForm.identificationUserInsert = value.identityUsers?.map(i=>i.identificationUserId)
|
planDialogState.planForm.evaluateUserInsert = value.evaluateUsers?.map(i=>i.evaluateUserId)
|
planDialogState.planForm.assessTime = [value.assessStartTime, value.assessEndTime]
|
}
|
};
|
|
const formatTime = () => {
|
planDialogState.planForm.assessStartTime = planDialogState.planForm.assessTime == [] ? '' : planDialogState.planForm.assessTime[0]
|
planDialogState.planForm.assessEndTime = planDialogState.planForm.assessTime == [] ? '' : planDialogState.planForm.assessTime[1]
|
};
|
|
const onSubmitPlan = () => {
|
planFormRef.value.validate(async (valid: boolean) => {
|
if (valid) {
|
formatTime()
|
delete planDialogState.planForm.assessTime
|
if (planDialogState.title === '新增') {
|
let res = await planApi().addPlan(planDialogState.planForm);
|
if (res.data.code === 100) {
|
emit('refresh')
|
planDialogState.planDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
} else {
|
let res = await planApi().modPlan(planDialogState.planForm)
|
if (res.data.code === 100) {
|
emit('refresh')
|
planDialogState.planDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
}
|
|
const emit = defineEmits(['refresh'])
|
|
defineExpose({
|
showPlanDialog
|
})
|
</script>
|
<style lang="scss">
|
.el-overlay .el-overlay-dialog{
|
.newDialog{
|
margin-top: -15vh !important;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
.valueSelect {
|
::v-deep(.el-popper) {
|
.el-select-dropdown__item {
|
width: 100%;
|
height: auto;
|
white-space: normal;
|
word-break: break-all;
|
word-wrap: break-word;
|
overflow: auto;
|
padding: 10px 25px;
|
border-bottom: 1px solid #ccc;
|
|
.valueTable {
|
& > div {
|
line-height: 1.5;
|
margin-bottom: 6px;
|
display: flex;
|
align-items: center;
|
|
div {
|
color: #999;
|
}
|
|
span {
|
font-weight: bolder;
|
}
|
|
&:last-of-type {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
