马宇豪
2023-10-31 f1f40e9a28fafab5d884630b8900b11060ebe9fc
src/views/analyse/plan/components/planDialog.vue
@@ -16,37 +16,48 @@
                        </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="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-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <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%"  placeholder="负责人" clearable>
                                <el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                            <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">
                    <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%"  placeholder="评价专家" clearable>
                                <el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                            <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>
@@ -94,13 +105,17 @@
        evaluateUserId: [{ required: true, message: '请选择评价专家', trigger: 'change' }],
    },
    riskUnitList: [],
    personList: []
    personList: [],
    bsExperts: [],
    pjExperts: []
})
const showPlanDialog = (title: string, value: PlanType, riskUnitList: RiskUnitType [], personList: SystemPersonType []) => {
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();
@@ -197,6 +212,44 @@
})
</script>
<style scoped>
<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;
          .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>