修改

马宇豪

2025-05-09 cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2

 src/views/experiment/project/components/projectDialog.vue

@@ -1,235 +1,343 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="projectDialogState.title" v-model="projectDialogState.projectDialogVisible" width="70%">
            <el-form ref="ProjectFormRef" :rules="projectDialogState.projectFormRules" :model="projectDialogState.projectForm" size="default" label-width="0">
                <table class="report-table">
                    <th class="m-color b-font" style="text-align: center">***研究所/***大学<br />科学研究实验项目安全风险基础信息录入表（已开展B）</th>
                    <tr>
                        <td class="w-25 m-color">实验名称</td>
                        <td class="w-75 m-color">
                            <el-form-item prop="experimentName">
                                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentName" placeholder="请输入实验名称" />
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验类型</td>
                        <td class="w-75 m-color">

                            <el-radio-group style="text-align: center" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentType">
                                <el-radio :label="1">化学类</el-radio>
                                <el-radio :label="2">生物类</el-radio>
                                <el-radio :label="3">辐射类</el-radio>
                                <el-radio :label="4">机电类</el-radio>
                                <el-radio :label="5">特种设备类</el-radio>
                                <el-radio :label="6">其他类</el-radio>
                            </el-radio-group>
  <div class="system-menu-dialog-container">
    <el-dialog :title="projectDialogState.title" v-model="projectDialogState.projectDialogVisible" width="80%"
               :before-close="handleClose">
      <el-form ref="ProjectFormRef" :rules="projectDialogState.projectFormRules" :model="projectDialogState.projectForm"
               size="default" label-width="0">
        <table class="report-table">
          <th class="m-color b-font" style="text-align: center">材料科学姑苏实验室<br/>科学研究实验项目安全风险基础信息录入表（新立项）（带<span
              style="color: red">*</span>为必填项）
          </th>
          <tr>
            <td class="w-25 m-color required">实验名称</td>
            <td class="w-75 m-color">
              <el-form-item prop="experimentName">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.experimentName" placeholder="请输入实验名称"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">实验类型</td>
            <td class="w-75 m-color">
              <el-form-item prop="typeValue" style="display: flex;justify-content: center">
                <!--                            <el-radio-group style="text-align: center" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentType">-->
                <!--                                <el-radio :label="1">化学类</el-radio>-->
                <!--                                <el-radio :label="2">生物类</el-radio>-->
                <!--                                <el-radio :label="3">辐射类</el-radio>-->
                <!--                                <el-radio :label="4">机电类</el-radio>-->
                <!--                                <el-radio :label="5">特种设备类</el-radio>-->
                <!--                                <el-radio :label="6">其他类</el-radio>-->
                <!--                            </el-radio-group>-->
                <el-checkbox-group style="text-align: center" v-model="typeValue" class="checkTip"
                                   :disabled="projectDialogState.disabled" @change="changeList">
                  <el-checkbox v-for="item in projectDialogState.experimentTypeList" :label="item.typeId"
                               :key="item.typeId">{{ item.typeName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">部门</td>
            <td class="w-25 m-color">
              <!--                          <el-form-item prop="dep">-->
              <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.dep" />-->
              <!--                          </el-form-item>-->
              <el-form-item prop="dep">
                <el-select style="width: 100%" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.dep" clearable filterable>
                  <el-option
                      v-for="item in projectDialogState.deptList"
                      :key="item.id"
                      :value="item.depName"
                      :label="item.depName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="w-25 m-color required">立项时间</td>
            <td class="w-25 m-color">
              <el-form-item prop="createExperimentTime">
                <el-date-picker :disabled="projectDialogState.disabled" type="datetime" format="YYYY/MM/DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                v-model="projectDialogState.projectForm.createExperimentTime"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">负责人</td>
            <td class="w-25 m-color">
              <el-form-item prop="liabilityUserId">
                <el-select style="width: 100%" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserId" clearable
                           filterable @change="getLiabilityUserPhone($event)">
                  <el-option
                      v-for="item in projectDialogState.allPersonList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.personName"
                  ></el-option>
                </el-select>
                <!--                          <el-select style="width: 100%" disabled v-model="projectDialogState.projectForm.liabilityUserId" clearable filterable>-->
                <!--                            <el-option :key="userInfos.uid" :value="userInfos.uid" :label="userInfos.userName"></el-option>-->
                <!--                          </el-select>-->
              </el-form-item>
              <!--                        <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserId"/>-->
            </td>
            <td class="w-25 m-color required">电话</td>
            <td class="w-25 m-color">
              <el-form-item prop="liabilityUserPhone">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.liabilityUserPhone"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">安全负责人</td>
            <td class="w-25 m-color">
              <!--                        <el-select style="width: 100%" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" @change="getSafeLiabilityUserPhone($event)" clearable filterable>-->
              <!--                          <el-option-->
              <!--                              v-for="item in projectDialogState.allPersonList"-->
              <!--                              :key="item.id"-->
              <!--                              :value="item.id"-->
              <!--                              :label="item.personName"-->
              <!--                          ></el-option>-->
              <!--                        </el-select>-->
              <el-form-item prop="safeLiabilityUserId">
                <el-select style="width: 100%" :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUserId" clearable
                           filterable @change="getSafeLiabilityUserPhone($event)">
                  <el-option
                      v-for="item in projectDialogState.systemPersonList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.realName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!--                        <el-form-item prop="safeLiabilityUser">-->
              <!--                          <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUser" />-->
              <!--                        </el-form-item>-->
            </td>
            <td class="w-25 m-color required">电话</td>
            <td class="w-25 m-color">
              <el-form-item prop="safeLiabilityUserPhone">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.safeLiabilityUserPhone"/>
              </el-form-item>
            </td>
          </tr>
          <select-room ref="selectRoomRef" v-model:disabled="projectDialogState.disabled"
                       v-model:data="projectDialogState.projectForm.siteList"></select-room>
          <select-material ref="selectMaterialRef" v-model:disabled="projectDialogState.disabled"
                           v-model:data="projectDialogState.projectForm.stuffList"></select-material>
          <select-equipment ref="selectEquipmentRef" v-model:disabled="projectDialogState.disabled"
                            v-model:data="projectDialogState.projectForm.deviceList"></select-equipment>
          <tr>
            <td class="w-25 m-color required">实验步骤</td>
            <td class="w-75 m-color">
              <el-form-item prop="experimentStep">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.experimentStep" placeholder="请输入实验步骤"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">操作方法</td>
            <td class="w-75 m-color">
              <el-form-item prop="experimentMethod">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.experimentMethod" placeholder="请输入操作方法"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">工艺过程</td>
            <td class="w-75 m-color">
              <el-form-item prop="process">
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.process"
                          placeholder="请输入工艺过程"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">特殊/关键过程</td>
            <td class="w-75 m-color">
              <el-form-item prop="keyProcess">
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.keyProcess"
                          placeholder="请输入特殊/关键过程"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">预防措施</td>
            <td class="w-75 m-color">
              <el-form-item prop="measure">
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.measure"
                          placeholder="请输入预防措施"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">是否存在过夜、老化实验</td>
            <td class="w-25 m-color">
              <el-form-item prop="timeout">
                <el-radio-group :disabled="projectDialogState.disabled" class="checkTip"
                                v-model="projectDialogState.projectForm.timeout">
                  <el-radio :label="1">存在</el-radio>
                  <el-radio :label="2">不存在</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <td class="w-25 m-color required" v-if="projectDialogState.projectForm.timeout === 1">过夜、老化保障措施</td>
            <td class="w-25 m-color" v-if="projectDialogState.projectForm.timeout === 1">
              <el-form-item prop="timeoutManager">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.timeoutManager"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">是否在封闭条件下</td>
            <td class="w-25 m-color">
              <el-form-item prop="closed">
                <el-radio-group :disabled="projectDialogState.disabled" class="checkTip" v-model="projectDialogState.projectForm.closed">
                  <el-radio :label="1">存在</el-radio>
                  <el-radio :label="2">不存在</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <td class="w-25 m-color required" v-if="projectDialogState.projectForm.closed === 1">封闭条件保障措施</td>
            <td class="w-25 m-color" v-if="projectDialogState.projectForm.closed === 1">
              <el-form-item prop="unclosedManager">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.unclosedManager"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">实验场所防爆措施条件和设施情况</td>
            <td class="w-75 m-color">
              <el-form-item prop="explosionProof">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.explosionProof" placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">实验场所防火措施条件和设施情况</td>
            <td class="w-75 m-color">
              <el-form-item prop="fireProof">
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.fireProof"
                          placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color required">实验场所防中毒措施条件和设施情况</td>
            <td class="w-75 m-color">
              <el-form-item prop="poisonProof">
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.poisonProof"
                          placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>


                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">部门</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.dep" />
                        </td>
                        <td class="w-25 m-color">负责人</td>
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.liabilityUserId" clearable filterable>
                                <el-option
                                    v-for="item in projectDialogState.systemPersonList"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.realName"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">立项时间</td>
                        <td class="w-25 m-color">
                            <el-date-picker :disabled="projectDialogState.disabled"  type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="projectDialogState.projectForm.expectStartTime" />
                        </td>
<!--                        <td class="w-16 m-color">开展时间</td>-->
<!--                        <td class="w-16 m-color">-->
<!--                            <el-date-picker v-model="projectDialogState.projectForm.startTime" />-->
<!--                        </td>-->
                        <td class="w-25 m-color">安全负责人</td>
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeLiabilityUserId" clearable filterable>
                                <el-option
                                v-for="item in projectDialogState.allPersonList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.personName"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="text-align: center">实验场所</tr>
<!--                    <tr>-->
<!--                        <td class="w-25 m-color">楼宇</td>-->
<!--                        <td class="w-75 m-color">-->
<!--                            <el-input v-model="projectDialogState.projectForm.building" placeholder="请输入楼栋名称" />-->
<!--                        </td>-->
<!--                    </tr>-->
                    <tr>
                        <td class="w-25 m-color">房间号</td>
<!--                        <td class="w-75 m-color">-->
                        <td class="w-16 m-color">
                            <el-select :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.siteId" placeholder="请输入房间号" >
                                <el-option
                                    v-for="item in projectDialogState.allRoomList"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.room"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <select-material ref="selectMaterialRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.stuffList"></select-material>
                    <select-equipment ref="selectEquipmentRef" v-model:disabled="projectDialogState.disabled" v-model:data="projectDialogState.projectForm.deviceList"></select-equipment>
                    <tr>
                        <td class="w-25 m-color">实验步骤</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentStep" placeholder="请输入实验步骤" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">操作方法</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.experimentMethod" placeholder="请输入操作方法" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">工艺过程</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.process" placeholder="请输入工艺过程" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">特殊/关键过程</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.keyProcess" placeholder="请输入特殊/关键过程" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">是否存在过夜、老化实验</td>
                        <td class="w-25 m-color">
                            <el-radio-group :disabled="projectDialogState.disabled"  v-model="projectDialogState.projectForm.timeout">
                                <el-radio :label="1">存在</el-radio>
                                <el-radio :label="2">不存在</el-radio>
                            </el-radio-group>
                        </td>
                        <td class="w-25 m-color">过夜、老化保障措施</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.timeoutManager" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">是否在封闭条件下</td>
                        <td class="w-25 m-color">
                            <el-radio-group :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.closed">
                                <el-radio :label="1">存在</el-radio>
                                <el-radio :label="2">不存在</el-radio>
                            </el-radio-group>
                        </td>
                        <td class="w-25 m-color">封闭条件保障措施</td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.unclosedManager" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防爆措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.explosionProof" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防火措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.fireProof" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">实验场所防中毒措施条件和设施情况</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.poisonProof" placeholder="请输入" />
                        </td>
                    </tr>
          <select-danger ref="selectDangerRef" v-model:data="projectDialogState.projectForm.hazardousWasteList"
                         v-model:disabled="projectDialogState.disabled"></select-danger>
          <select-person ref="selectPersonRef" v-model:data="projectDialogState.projectForm.persons"
                         v-model:disabled="projectDialogState.disabled"></select-person>


                    <select-danger ref="selectDangerRef" v-model:data="projectDialogState.projectForm.hazardousWasteList" v-model:disabled="projectDialogState.disabled"></select-danger>
                    <select-person ref="selectPersonRef" v-model:data="projectDialogState.projectForm.persons" v-model:disabled="projectDialogState.disabled"></select-person>


<!--                    <tr>-->
<!--                        <td class="w-25 m-color">安全信息化系统使用情况</td>-->
<!--                        <td class="w-25 m-color">-->
<!--                            <el-radio-group v-model="projectDialogState.projectForm.useIT">-->
<!--                                <el-radio value="1">是</el-radio>-->
<!--                                <el-radio value="2">否</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </td>-->
<!--                        <td class="w-25 m-color">系统名称</td>-->
<!--                        <td class="w-25 m-color">-->
<!--                            <el-input v-model="projectDialogState.projectForm.systemName" placeholder="请输入" />-->
<!--                        </td>-->
<!--                    </tr>-->
                    <tr>
                        <td class="w-25 m-color">安全管理制度</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.safeManagerMethod" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="text-align: center">应急预案/应急演练</tr>
                    <tr>
                        <td class="w-25 m-color">有无预案</td>
                        <td class="w-25 m-color">
                            预案名称
                        </td>
                        <td class="w-25 m-color">是否演练</td>
                        <td class="w-25 m-color">
                            演练情况
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlan" />
                        </td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlanName" />
                        </td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrillStatus" />
                        </td>
                        <td class="w-25 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrill" />
                        </td>
                    </tr>
                    <tr class="m-color b-font" style="  text-align: center">实验人员</tr>
                    <tr>
                        <td class="w-25 m-color">实验场所是否需要分区隔断</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.partitionCondition" placeholder="请输入" />
                        </td>
                    </tr>
                    <tr>
                        <td class="w-25 m-color">其它基础信息（详细描述）</td>
                        <td class="w-75 m-color">
                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.note" placeholder="请输入" />
                        </td>
                    </tr>
                </table>
            </el-form>
            <template #footer>
          <!--                    <tr>-->
          <!--                        <td class="w-25 m-color">安全信息化系统使用情况</td>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                            <el-radio-group v-model="projectDialogState.projectForm.useIT">-->
          <!--                                <el-radio value="1">是</el-radio>-->
          <!--                                <el-radio value="2">否</el-radio>-->
          <!--                            </el-radio-group>-->
          <!--                        </td>-->
          <!--                        <td class="w-25 m-color">系统名称</td>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                            <el-input v-model="projectDialogState.projectForm.systemName" placeholder="请输入" />-->
          <!--                        </td>-->
          <!--                    </tr>-->
          <!--                    <tr class="m-color b-font" style="text-align: center">应急预案/应急演练</tr>-->
          <!--                    <tr>-->
          <!--                        <td class="w-25 m-color required">有无预案</td>-->
          <!--                        <td class="w-25 m-color required">预案名称</td>-->
          <!--                        <td class="w-25 m-color required">是否演练</td>-->
          <!--                        <td class="w-25 m-color required">演练情况</td>-->
          <!--                    </tr>-->
          <!--                    <tr>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                          <el-form-item prop="emergencyPlan">-->
          <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlan" />-->
          <!--                          </el-form-item>-->
          <!--                        </td>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                          <el-form-item prop="emergencyPlanName">-->
          <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyPlanName" />-->
          <!--                          </el-form-item>-->
          <!--                        </td>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                          <el-form-item prop="emergencyDrillStatus">-->
          <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrillStatus" />-->
          <!--                          </el-form-item>-->
          <!--                        </td>-->
          <!--                        <td class="w-25 m-color">-->
          <!--                          <el-form-item prop="emergencyDrill">-->
          <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.emergencyDrill" />-->
          <!--                          </el-form-item>-->
          <!--                        </td>-->
          <!--                    </tr>-->
          <select-emergency ref="selectEmergencyRef" v-model:disabled="projectDialogState.disabled"
                            v-model:data="projectDialogState.projectForm.emergencyList"></select-emergency>
          <tr>
            <td class="w-25 m-color required">安全管理制度</td>
            <td class="w-75 m-color">
              <el-form-item prop="safeManagerMethod">
                <el-input :disabled="projectDialogState.disabled"
                          v-model="projectDialogState.projectForm.safeManagerMethod" placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>
          <tr class="m-color b-font" style="  text-align: center">其他信息</tr>
          <tr>
            <td class="w-25 m-color required">实验场所是否需要分区隔断</td>
            <td class="w-75 m-color">
              <el-form-item prop="partitionCondition">
                <!--                            <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.partitionCondition" placeholder="请输入" />-->
                <el-radio-group :disabled="projectDialogState.disabled" class="checkTip"
                                v-model="projectDialogState.projectForm.partitionCondition">
                  <el-radio :label="0">是</el-radio>
                  <el-radio :label="1">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="w-25 m-color">其它基础信息（详细描述）</td>
            <td class="w-75 m-color">
              <el-form-item>
                <el-input :disabled="projectDialogState.disabled" v-model="projectDialogState.projectForm.note"
                          placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>
      <template #footer>
            <span class="dialog-footer" style="padding-top:10px;text-align: center !important;">
               <el-button @click="projectDialogState.projectDialogVisible = !projectDialogState.projectDialogVisible" size="default">取 消</el-button>
               <el-button type="primary" v-if="!projectDialogState.disabled" @click="onSubmitProject" size="default">确定</el-button>
               <el-button @click="projectDialogState.projectDialogVisible = !projectDialogState.projectDialogVisible"
                     size="default">取 消</el-button>
          <el-button type="primary" v-if="!projectDialogState.disabled && projectDialogState.title!= '编辑'"
                     @click="onSubmitProject" size="default">确定</el-button>
          <el-button type="primary" v-if="!projectDialogState.disabled" @click="scratchProject" plain
                     size="default">暂存</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
@@ -238,317 +346,622 @@
import {projectApi} from "/@/api/experiment/project";
import {personApi} from "/@/api/basic/person";
import {userApi} from "/@/api/systemManage/user";
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import {checkChineseName, verifyPhone} from "/@/utils/toolsValidate";
import {departmentApi} from "/@/api/systemManage/department";

const SelectEquipment = defineAsyncComponent(() => import('./selectEquipment.vue'))
const SelectMaterial = defineAsyncComponent(() => import('./selectMaterial.vue'))
const SelectEmergency = defineAsyncComponent(() => import('./selectEmergency.vue'))
const SelectDanger = defineAsyncComponent(() => import('./selectDanger.vue'))
const SelectPerson = defineAsyncComponent(() => import('./selectPerson.vue'))
const SelectRoom = defineAsyncComponent(() => import('./selectRoom.vue'))
const ProjectFormRef = ref()
const selectPersonRef = ref()
const selectEquipmentRef = ref()
const selectRoomRef = ref()
const selectMaterialRef = ref()
const selectEmergencyRef = ref()
const selectDangerRef = ref()
const typeValue = ref([])
const userInfo = useUserInfo();
const {userInfos} = storeToRefs(userInfo);

const projectDialogState = reactive<ProjectDialogType>({
    title: '',
    disabled: false,
    projectDialogVisible: false,
    projectForm:   {
        id: null,
        experimentName: "",
        experimentType: null,
        liabilityUserId: null,
        safeLiabilityUserId: null,
        dep: "",
        siteId: null,
        experimentStep: "",
        experimentMethod: "",
        process: "",
        keyProcess: "",
        timeout: null,
        timeoutManager: "",
        closed: null,
        unclosedManager: "",
        explosionProof: "",
        fireProof: "",
        poisonProof: "",
        hazardousWaste: null,
        safeManagerMethod: "",
        emergencyPlan: "",
        emergencyDrill: "",
        emergencyPlanName: "",
        emergencyDrillStatus: "",
        partitionCondition: "",
        note: "",
        expectStartTime: null,
        persons: [
        ],
        deviceList: [
        ],
        stuffList: [
        ],
        hazardousWasteList: [
        ]
    },
    projectFormRules: {
        experimentName: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
    },
    allPersonList: [],
    allRoomList: [],
    systemPersonList: [],
  title: '',
  disabled: false,
  projectDialogVisible: false,
  projectForm: {
    id: null,
    experimentName: "",
    experimentType: null,
    typeList: [],
    liabilityUser: '',
    liabilityUserId: null,
    liabilityUserPhone: '',
    safeLiabilityUser: '',
    safeLiabilityUserId: null,
    safeLiabilityUserPhone: '',
    dep: "",
    experimentStep: "",
    experimentMethod: "",
    process: "",
    keyProcess: "",
    measure: "",
    timeout: null,
    timeoutManager: "",
    closed: null,
    unclosedManager: "",
    explosionProof: "",
    fireProof: "",
    poisonProof: "",
    safeManagerMethod: "",
    emergencyList: [],
    partitionCondition: null,
    note: "",
    createExperimentTime: '',
    persons: [],
    siteList: [],
    deviceList: [],
    stuffList: [],
    hazardousWasteList: []
  },
  experimentTypeList: [
    {typeId: 1, typeName: '化学类'},
    {typeId: 2, typeName: '生物类'},
    {typeId: 3, typeName: '辐射类'},
    {typeId: 4, typeName: '机电类'},
    {typeId: 5, typeName: '特种设备类'},
    {typeId: 6, typeName: '其它类'},
  ],
  projectFormRules: {
    experimentName: [{required: true, message: '', trigger: 'blur'}],
    experimentType: [{required: true, message: '', trigger: 'blur'}],
    typeList: [{required: true, message: '', trigger: 'blur'}],
    liabilityUserId: [{required: true, message: '', trigger: 'blur'}],
    liabilityUserPhone: [{required: true, message: '', trigger: 'blur'}],
    safeLiabilityUserId: [{required: true, message: '', trigger: 'blur'}],
    safeLiabilityUserPhone: [{required: true, message: '', trigger: 'blur'}],
    dep: [{required: true, message: '', trigger: 'blur'}],
    experimentStep: [{required: true, message: '', trigger: 'blur'}],
    experimentMethod: [{required: true, message: '', trigger: 'blur'}],
    process: [{required: true, message: '', trigger: 'blur'}],
    keyProcess: [{required: true, message: '', trigger: 'blur'}],
    measure: [{required: true, message: '', trigger: 'blur'}],
    timeout: [{required: true, message: '', trigger: 'blur'}],
    timeoutManager: [{required: true, message: '', trigger: 'blur'}],
    closed: [{required: true, message: '', trigger: 'blur'}],
    unclosedManager: [{required: true, message: '', trigger: 'blur'}],
    explosionProof: [{required: true, message: '', trigger: 'blur'}],
    fireProof: [{required: true, message: '', trigger: 'blur'}],
    poisonProof: [{required: true, message: '', trigger: 'blur'}],
    safeManagerMethod: [{required: true, message: '', trigger: 'blur'}],
    emergencyList: [{required: true, message: '', trigger: 'blur'}],
    partitionCondition: [{required: true, message: '', trigger: 'blur'}],
    createExperimentTime: [{required: true, message: '', trigger: 'blur'}]
  },
  allPersonList: [],
  allRoomList: [],
  systemPersonList: [],
  deptList: []
})

const showProjectDialog = (title: string, value: ProjectType, allRoomList: RoomType []) => {
    projectDialogState.projectDialogVisible = true;
    projectDialogState.allRoomList = allRoomList
    setTimeout(() => {
        ProjectFormRef.value.clearValidate();
    });
    if(title === '新增'){
        projectDialogState.disabled = false
        projectDialogState.title = '新增';
        projectDialogState.projectForm = {
            id: null,
            experimentName: "",
            experimentType: null,
            liabilityUserId: null,
            safeLiabilityUserId: null,
            dep: "",
            siteId: null,
            experimentStep: "",
            experimentMethod: "",
            process: "",
            keyProcess: "",
            timeout: null,
            timeoutManager: "",
            closed: null,
            unclosedManager: "",
            explosionProof: "",
            fireProof: "",
            poisonProof: "",
            hazardousWaste: 1,
            safeManagerMethod: "",
            emergencyPlan: "",
            emergencyDrill: "",
            emergencyPlanName: "",
            emergencyDrillStatus: "",
            partitionCondition: "",
            note: "",
            expectStartTime: null,
            persons: [
            ],
            deviceList: [
            ],
            stuffList: [
            ],
            hazardousWasteList: [
            ]
        };
    }else{
        projectDialogState.title = '查看';
        projectDialogState.disabled = true
        for(let i in projectDialogState.projectForm) {
            if(isValidKey(i, projectDialogState.projectForm)) {
                projectDialogState.projectForm[i] = value[i];
            }
        }
    }
};
const getLiabilityUserPhone = (value: number | null) => {
  const data = projectDialogState.allPersonList.find(item => item.id === value) as AllPersonListType
  projectDialogState.projectForm.liabilityUserPhone = data.phone
  projectDialogState.projectForm.liabilityUser = data.personName
}

const isValidKey = (key: string | number | symbol, object:object): key is keyof typeof object =>{
    return key in object;
};
const getSafeLiabilityUserPhone = (value: number | null) => {
  const data = projectDialogState.systemPersonList.find(item => item.id === value) as AllPersonListType
  projectDialogState.projectForm.safeLiabilityUserPhone = data.phone
  projectDialogState.projectForm.safeLiabilityUser = data.realName
}

const onSubmitProject = () => {
    ProjectFormRef.value.validate(async(valid: boolean) => {
        if(valid){
            if(projectDialogState.title === '新增'){
                projectDialogState.projectForm.persons = selectPersonRef.value.dataList
                projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList
                projectDialogState.projectForm.stuffList = selectMaterialRef.value.dataList
                projectDialogState.projectForm.deviceList = selectEquipmentRef.value.dataList
                let res = await projectApi().addProject(projectDialogState.projectForm);
                if(res.data.code === 100){
                    emit('refresh')
                    projectDialogState.projectDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{
                let res = await projectApi().modProject(projectDialogState.projectForm)
                if(res.data.code === 100){
                    emit('refresh')
                    projectDialogState.projectDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
// const getSafeLiabilityUserPhone = (value: number)=>{
//   const data = projectDialogState.allPersonList.find(item => item.id === value) as AllPersonListType
//   projectDialogState.projectForm.safeLiabilityUserPhone = data.phone
// }

const scratchProject = async () => {
  projectDialogState.projectForm.emergencyList = projectDialogState.projectForm.emergencyList ? projectDialogState.projectForm.emergencyList.map(obj => ({
    emergencyDrill:
    obj.emergencyDrill,
    emergencyDrillStatus: obj.emergencyDrillStatus,
    emergencyPlan: obj.emergencyPlan,
    emergencyPlanName: obj.emergencyPlanName
  })) : []
  // projectDialogState.projectForm.emergencyList =  projectDialogState.projectForm.emergencyList ?   projectDialogState.projectForm.emergencyList:  []
  projectDialogState.projectForm.persons = projectDialogState.projectForm.persons ? projectDialogState.projectForm.persons : []
  // projectDialogState.projectForm.hazardousWasteList = projectDialogState.projectForm.hazardousWasteList ? projectDialogState.projectForm.hazardousWasteList:  []
  projectDialogState.projectForm.hazardousWasteList = projectDialogState.projectForm.hazardousWasteList ? projectDialogState.projectForm.hazardousWasteList.map(obj => ({
    classify: obj.classify,
    wasteStorage: obj.wasteStorage,
    handAmount: obj.handAmount
  })) : []
  // const roomList = selectRoomRef.value.dataList ? selectRoomRef.value.dataList:  []
  projectDialogState.projectForm.siteList = projectDialogState.projectForm.siteList ? projectDialogState.projectForm.siteList.map(({siteId}) => ({siteId})) : []
  projectDialogState.projectForm.stuffList = projectDialogState.projectForm.stuffList ? projectDialogState.projectForm.stuffList : []
  projectDialogState.projectForm.deviceList = projectDialogState.projectForm.deviceList ? projectDialogState.projectForm.deviceList : []
  let res = await projectApi().temporaryProject(projectDialogState.projectForm);
  if (res.data.code === 100) {
    handleClose()
    ElMessage({
      type: 'success',
      message: '暂存信息成功'
    })
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg,
    });
  }
}
const showProjectDialog = (title: string, value: ProjectType, allRoomList: RoomType []) => {
  projectDialogState.projectDialogVisible = true
  projectDialogState.allRoomList = allRoomList
  setTimeout(() => {
    ProjectFormRef.value.clearValidate();
  });
  if (title === '新增') {
    projectDialogState.disabled = false
    projectDialogState.title = '新增';
    projectDialogState.projectForm = {
      id: null,
      experimentName: "",
      experimentType: null,
      typeList: [],
      liabilityUser: '',
      liabilityUserId: null,
      liabilityUserPhone: '',
      safeLiabilityUser: '',
      safeLiabilityUserId: null,
      safeLiabilityUserPhone: '',
      dep: "",
      experimentStep: "",
      experimentMethod: "",
      process: "",
      keyProcess: "",
      measure: "",
      timeout: null,
      timeoutManager: "",
      closed: null,
      unclosedManager: "",
      explosionProof: "",
      fireProof: "",
      poisonProof: "",
      safeManagerMethod: "",
      emergencyList: [],
      partitionCondition: null,
      note: "",
      createExperimentTime: '',
      persons: [],
      siteList: [],
      deviceList: [],
      stuffList: [],
      hazardousWasteList: [],
    };
  } else if (title === '整改' || title === '编辑') {
    projectDialogState.title = title;
    projectDialogState.disabled = false
    for (let i in projectDialogState.projectForm) {
      if (isValidKey(i, projectDialogState.projectForm)) {
        projectDialogState.projectForm[i] = value[i];
      }
    }
    typeValue.value = projectDialogState.projectForm.typeList.map(item => item.typeId)
  } else {
    projectDialogState.title = '查看';
    projectDialogState.disabled = true
    for (let i in projectDialogState.projectForm) {
      if (isValidKey(i, projectDialogState.projectForm)) {
        projectDialogState.projectForm[i] = value[i];
      }
    }
    typeValue.value = projectDialogState.projectForm.typeList.map(item => item.typeId)
  }
};

const handleClose = () => {
  typeValue.value = []
  emit('refresh')
  projectDialogState.projectDialogVisible = false;
}

const isValidKey = (key: string | number | symbol, object: object): key is keyof typeof object => {
  return key in object;
};
const changeList = (val: any) => {
  const filteredNames = projectDialogState.experimentTypeList
      .filter((obj) => val.includes(obj.typeId)).map(item => {
        return {
          typeId: item.typeId,
          typeName: item.typeName
        }
      })
  projectDialogState.projectForm.typeList = filteredNames

}

const onSubmitProject = async () => {
  ProjectFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if (projectDialogState.projectForm.timeout === 2) {
        projectDialogState.projectForm.timeoutManager = ''
      } else {
        if (projectDialogState.projectForm.timeoutManager == '') {
          ElMessage({
            type: 'warning',
            message: '请填写过夜、老化保障措施',
            duration: 1000
          });
          return
        }
      }
      if (projectDialogState.projectForm.closed === 2) {
        projectDialogState.projectForm.unclosedManager = ""
      } else {
        if (projectDialogState.projectForm.unclosedManager == '') {
          ElMessage({
            type: 'warning',
            message: '请填写封闭条件保障措施',
            duration: 1000
          });
          return
        }
      }
      if (projectDialogState.title === '新增') {
        // if(checkChineseName(projectDialogState.projectForm.safeLiabilityUser) == false){
        //   ElMessage({
        //     type: 'warning',
        //     message: '安全负责人姓名格式有误',
        //     duration: 1000
        //   });
        //   return
        // }
        if (verifyPhone(projectDialogState.projectForm.safeLiabilityUserPhone) == false || verifyPhone(projectDialogState.projectForm.liabilityUserPhone) == false) {
          ElMessage({
            type: 'warning',
            message: '请输入正确的手机号',
            duration: 1000
          });
          return
        }
        if (projectDialogState.projectForm.siteList.length === 0) {
          ElMessage({
            type: 'warning',
            message: '请至少添加一处实验场所',
            duration: 1000
          });
          return
        }
        if (projectDialogState.projectForm.stuffList.length === 0) {
          ElMessage({
            type: 'warning',
            message: '请至少选择一种试剂/材料',
            duration: 1000
          });
          return
        }
        if (projectDialogState.projectForm.deviceList.length === 0) {
          ElMessage({
            type: 'warning',
            message: '请至少选择一种仪器/设备',
            duration: 1000
          });
          return
        }
        if (projectDialogState.projectForm.persons.length === 0) {
          ElMessage({
            type: 'warning',
            message: '请至少添加一名实验人员',
            duration: 1000
          });
          return
        }
        projectDialogState.projectForm.emergencyList = selectEmergencyRef.value.dataList
        projectDialogState.projectForm.persons = selectPersonRef.value.dataList
        const roomList = selectRoomRef.value.dataList
        projectDialogState.projectForm.siteList = roomList.map(({siteId}) => ({siteId}))
        projectDialogState.projectForm.stuffList = selectMaterialRef.value.dataList
        projectDialogState.projectForm.deviceList = selectEquipmentRef.value.dataList
        let res = await projectApi().addProject(projectDialogState.projectForm)
        if (res.data.code === 100) {
          handleClose()
          ElMessage({
            type: 'success',
            message: '新增成功'
          })

        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg,
          });
        }
      } else {
        projectDialogState.projectForm.siteList = selectRoomRef.value.dataList.map(obj => ({siteId: obj.siteId}))
        projectDialogState.projectForm.hazardousWasteList = selectDangerRef.value.dataList.map(obj => ({
          classify: obj.classify,
          wasteStorage: obj.wasteStorage,
          handAmount: obj.handAmount
        }))
        let res = await projectApi().modProject(projectDialogState.projectForm)
        if (res.data.code === 100) {
          handleClose()
          ElMessage({
            type: 'success',
            message: '整改已提交'
          })
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg,
          });
        }
      }
    } else {
      ElMessage({
        type: 'warning',
        message: '请完善基本信息',
      });
    }
  })
};

const getPersonList = async () => {
    let res = await userApi().getUserList({
        roleId: 1,
        usePage: false,
        pageIndex: 1,
        pageSize: 10
    });
    if(res.data.code === 100){
        debugger
        projectDialogState.systemPersonList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
  let res = await userApi().getUserList({
    pageIndex: 1,
    pageSize: 99999,
    searchParams: {
      roleId: null,
      name: '',
      realName: ''
    }
  });
  if (res.data.code === 100) {
    projectDialogState.systemPersonList = JSON.parse(JSON.stringify(res.data.data));
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    })
  }
};

const getAllPersonList = async () => {
    let res = await personApi().getAllPerson();
    if(res.data.code === 100){
        projectDialogState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
  let res = await personApi().getAllPerson();
  if (res.data.code === 100) {
    projectDialogState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    })
  }
};

const getDeptData = async () => {
  let res = await departmentApi().getDepartmentList()
  if (res.data.code === 100) {
    projectDialogState.deptList = res.data.data
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
}


const emit = defineEmits(['refresh']);

defineExpose({
    showProjectDialog,
  showProjectDialog,
});

onMounted(() => {
    getAllPersonList();
    getPersonList();
  getAllPersonList()
  getPersonList()
  getDeptData()
});
</script>

<style scoped lang="scss">
.site-layout-background {
    background: #fff;
  background: #fff;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #337ecc;
    margin: 20px 0;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #337ecc;
  margin: 20px 0;

th {
  th {
    padding: 10px 0;
    border: 1px solid #337ecc;
    border-left: none;
}
  }

tr {
  tr {
    width: 100%;
    height: 44px;
    line-height: 42px;
    border-bottom: 1px solid #ccc;

&:last-of-type {
     border-bottom: none;
 }
    &:last-of-type {
      border-bottom: none;
    }

td {
    border-right: 1px solid #ccc;
    display: inline-block;
    height: 44px;
    vertical-align: middle;
    text-align: center;
    line-height: 42px;
    td {
      border-right: 1px solid #ccc;
      display: inline-block;
      height: 44px;
      vertical-align: middle;
      text-align: center;
      line-height: 42px;

&:last-of-type {
     border-right: none;
 }
      :deep(.el-input__wrapper ) {
        box-shadow: none;
        margin-top: 6px;
      }

&.w-14 {
     width: calc((100/7)/100 * 100%);
 }
      &:last-of-type {
        border-right: none;
      }

&.w-16 {
     width: calc((100/6)/100 * 100%);
 }
      &.required {
        &::before {
          content: "*";
          display: inline-block;
          color: red;
        }
      }

&.w-18 {
     width: 16.59%;
 }
      &.w-14 {
        width: calc((100 / 7) / 100 * 100%);
      }

&.w-20 {
     width: 20%;
 }
      &.w-16 {
        width: calc((100 / 6) / 100 * 100%);
      }

&.w-25 {
     width: 25%;
 }
      &.w-18 {
        width: 16.59%;
      }

&.w-50 {
     width: 50%;
 }
      &.w-20 {
        width: 20%;
      }

&.w-75 {
     width: 75%;
 }
      &.w-25 {
        width: 25%;
      }

.ant-input {
    height: 100%;
    border: none;
    background: #f5f7fa;
}
      &.w-50 {
        width: 50%;
      }

.ant-picker {
    width: 100%;
    height: 100%;
}
}
}
      &.w-75 {
        width: 75%;
      }

.b-font {
      .ant-input {
        height: 100%;
        border: none;
        background: #f5f7fa;
      }

      .ant-picker {
        width: 100%;
        height: 100%;
      }
    }
  }

  .b-font {
    font-size: 16px;
    font-weight: bolder;
}
  }
}

.m-color {
    color: #0c4995;
  color: #0c4995;
}
:deep(.el-input__wrapper ){
    box-shadow: none;
    margin-top: 6px;
}
:deep(.el-dialog__footer){
    padding-top: 20px;

::v-deep(.el-form-item) {
  height: 100%;
  display: flex;
  justify-content: center;

  .el-form-item__content {
    display: flex;
    justify-content: center;
  }
}

.roomSelect {
  ::v-deep(.el-popper) {
    .el-select-dropdown__item {
      height: auto;
      padding: 0;

      .roomTable {
        width: 100%;
        display: flex;
        border-bottom: 1px solid #ebeef5;

        &:last-of-type {
          border-bottom: none;
        }

        & > div {
          width: 25%;
          border-right: 1px dashed #ebeef5;

          &:last-of-type {
            border-right: none;
          }

          div {
            width: 100%;
          }

          .roomTit {
            border-bottom: 1px solid #ebeef5;
          }
        }
      }
    }

    .el-select-dropdown__item.selected {
      .roomTit {
        color: #606266;
        font-weight: normal;
      }
    }
  }
}

:deep(.el-dialog__footer) {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}


</style>
<style>
.checkTip{
  .is-disabled{
    .el-checkbox__label{
      color: #606266 !important
    }
    .el-radio__label{
      color: #606266 !important
    }
    &.is-checked{
      .el-checkbox__label{
        color: #409eff !important
      }
      .el-radio__label{
        color: #409eff !important
      }
      .el-checkbox__inner{
        background-color: #409eff;
        &::after{
          border-color: #fff !important
        }
      }
      .el-radio__inner{
        background-color: #409eff !important;
        &::after{
          background-color: #fff !important
        }
      }
    }
  }
}
</style>