修改

马宇豪

2025-03-12 de5e674a5655cd5c8d5457d1be8182519625d265

 src/views/analyse/plan/components/planDialog.vue

@@ -1,80 +1,109 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="planDialogState.title" v-model="planDialogState.planDialogVisible" width="600px">
            <el-form ref="planFormRef" :rules="planDialogState.planFormRules" :model="planDialogState.planForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <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-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评估计划名称" prop="assessPlanName">
                            <el-input :disabled="planDialogState.disabled" v-model="planDialogState.planForm.assessPlanName" placeholder="评估计划名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                      <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"
                            popper-class="pickTime"
                            @change="formatTime">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <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-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
                        <el-form-item label="辨识专家" prop="identificationUserId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.identificationUserId" 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-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
                        <el-form-item label="评价专家" prop="evaluateUserId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.evaluateUserId" 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-col>
                </el-row>
            </el-form>
            <template #footer>
  <div class="system-menu-dialog-container">
    <el-dialog :title="planDialogState.title" v-model="planDialogState.planDialogVisible" width="600px">
      <el-form ref="planFormRef" :rules="planDialogState.planFormRules" :model="planDialogState.planForm" size="default"
               label-width="120px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <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-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="评估计划名称" prop="assessPlanName">
              <el-input :disabled="planDialogState.disabled" v-model="planDialogState.planForm.assessPlanName"
                        placeholder="评估计划名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <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"
                  popper-class="pickTime"
                  @change="formatTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <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-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <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-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
            <el-form-item label="辨识专家" 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-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
            <el-form-item label="评价专家" 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-col>
        </el-row>
      </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>
               <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>
    </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from "vue";
import {reactive, ref, getCurrentInstance} from "vue";
import {ElMessage} from "element-plus";
import {planApi} from "/@/api/analyse/plan";
import {isValidKey} from "/@/utils/methods";
@@ -82,174 +111,189 @@
const planFormRef = ref()

const planDialogState = reactive<PlanDialogType>({
    title: '',
    disabled: false,
    planDialogVisible: false,
    planForm: {
        riskUnitId: null,
        planUserId: null,
        assessPlanName: '',
        assessTime: [],
        assessStartTime: '',
        assessEndTime: '',
        identificationUserId: null,
        evaluateUserId: null,
        riskType: 2
  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
    },
    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' }],
        identificationUserId: [{ required: true, message: '请选择辨识专家', trigger: 'change' }],
        evaluateUserId: [{ required: true, message: '请选择评价专家', trigger: 'change' }],
    {
      name: '现场专家',
      value: 2
    },
    riskUnitList: [],
    personList: [],
    bsExperts: [],
    pjExperts: []
    {
      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: [],
            assessStartTime: '',
            assessEndTime: '',
            identificationUserId: null,
            evaluateUserId: null,
            riskType: 2
        };
    }else if(title === '查看'){
        planDialogState.title = '查看';
        planDialogState.disabled = true
        for(let i in planDialogState.planForm){
            if(isValidKey(i, planDialogState.planForm)){
                planDialogState.planForm[i] = value[i]
            }
        }
        planDialogState.planForm.assessTime=[value.assessStartTime, value.assessEndTime]
        console.log(value,planDialogState.planForm.assessTime,'time')
    }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.assessTime=[value.assessStartTime, value.assessEndTime]
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]
  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: '请完善基本信息',
            });
  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
  showPlanDialog
})
</script>

<style lang="scss" scoped>
    ::v-deep(.pickTime){
      position: absolute !important;
      top: 0 !important;
    }
    .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;
::v-deep(.pickTime) {
  position: absolute !important;
  top: 0 !important;
}

          .valueTable{
            &>div{
              line-height: 1.5;
              margin-bottom: 6px;
              display: flex;
              align-items: center;
.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;

              div{
                color: #999;
              }
      .valueTable {
        & > div {
          line-height: 1.5;
          margin-bottom: 6px;
          display: flex;
          align-items: center;

              span{
                font-weight: bolder;
              }
          div {
            color: #999;
          }

              &:last-of-type{
                margin-bottom: 0;
              }
            }
          span {
            font-weight: bolder;
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>