zdqy_firm_former/src/views/component/device/deviceDialog.vue

<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    fullscreen
    class="dialog paper-detail-dialog"
    top="0"
  >
    <div slot="title" class="dialog-title">
      <span class="dialogtitle">{{ title }}</span>
      <div>
        <ibps-toolbar :actions="toolbars" @action-event="handleActionEvent" />
      </div>
    </div>
    <div class="container">
      <div class="left" :style="{ width: initWidth }">
        <div class="form">
          <el-form
            ref="form"
            label-width="120px"
            :model="form"
            :rules="rules"
            :hide-required-asterisk="true"
          >
            <el-row type="flex" justify="center" :gutter="20">
              <el-col :span="16">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="设备验收记录：" prop="sheBeiMingChen">
                      <ibps-custom-dialog
                        v-model="form.sheBeiMingChen"
                        size="mini"
                        template-key="sbysdhk"
                        :disabled="readonly"
                        type="dialog"
                        class="custom-dialog"
                        placeholder="请选择"
                        icon="el-icon-search"
                        style="width: 100%"
                        @change-link-data="sheBeiMingChenChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称：" prop="sheBeiMingCheng">
                      <template slot="label">
                        <span class="required">设备名称：</span>
                      </template>
                      <el-input
                        v-if="!readonly"
                        v-model="form.sheBeiMingCheng"
                        size="mini"
                      />
                      <span v-else>{{ form.sheBeiMingCheng || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="建档部门：" prop="bianZhiBuMen">
                      <template slot="label">
                        <span class="required">建档部门：</span>
                      </template>
                      <ibps-user-selector
                        v-model="form.bianZhiBuMen"
                        type="position"
                        readonly-text="text"
                        :disabled="readonly"
                        :multiple="false"
                        size="mini"
                        :filter="filter"
                        filtrate
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="建档人：" prop="bianZhiRen">
                      <ibps-user-selector
                        v-model="form.bianZhiRen"
                        type="user"
                        readonly-text="text"
                        :disabled="true"
                        :multiple="false"
                        size="mini"
                        style="width: 100%"
                        :filter="filter"
                        filtrate
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="建档时间：" prop="bianZhiShiJian">
                      <template slot="label">
                        <span class="required">建档时间：</span>
                      </template>
                      <el-date-picker
                        v-if="!readonly"
                        v-model="form.bianZhiShiJian"
                        style="width: 100%"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00"
                        :readonly="readonly"
                        value-format="yyyy-MM-dd HH:mm"
                        size="mini"
                      />
                      <span v-else>{{ form.bianZhiShiJian || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col v-if="!hideSysDeviceNo" :span="8">
                    <el-form-item label="设备编号：" prop="sheBeiShiBieH">
                      <template slot="label">
                        <span>{{changeDeviceLabel ? '系统编号' : '设备编号'}}</span>
                        <el-tooltip
                          effect="dark"
                          placement="top"
                        > 
                          <div slot="content">{{changeDeviceLabel ? '系统编号' : '设备编号'}}由系统自动生成。</div>
                          <i class="el-icon-question question-icon">：</i>
                        </el-tooltip>
                      </template>
                      <span>{{ form.sheBeiShiBieH || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="原设备编号：" prop="yuanSheBeiBian">
                      <template slot="label">
                        <span class="required"
                          >{{
                            (hideSysDeviceNo || changeDeviceLabel)  ? '设备编号' : '原设备编号'
                          }}：</span
                        >
                      </template>
                      <el-input
                        v-if="!readonly"
                        v-model="form.yuanSheBeiBian"
                        size="mini"
                      />
                      <span v-else>{{ form.yuanSheBeiBian || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备状态：" prop="sheBeiZhuangTa">
                      <span>{{ showState || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="设备类型：" prop="sheBeiLeiXing">
                      <el-select
                        v-if="!readonly"
                        v-model="form.sheBeiLeiXing"
                        placeholder="请选择"
                        size="mini"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="(v, k) in typeList"
                          :key="k"
                          :label="v"
                          :value="k"
                        />
                      </el-select>
                      <span v-else>{{
                        typeList[form.sheBeiLeiXing] ||
                        form.sheBeiLeiXing ||
                        '/'
                      }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="规格型号：" prop="guiGeXingHao">
                      <template slot="label">
                        <span class="required">规格型号：</span>
                      </template>
                      <el-input
                        v-if="!readonly"
                        v-model="form.guiGeXingHao"
                        size="mini"
                      />
                      <span v-else>{{ form.guiGeXingHao || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="接收时状态：" prop="jieShouZhuangTai">
                      <template slot="label">
                        <span class="required">接收时状态：</span>
                      </template>
                      <el-select
                        v-if="!readonly"
                        v-model="form.jieShouZhuangTai"
                        placeholder="请选择"
                        size="mini"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in ['新设备', '二手或翻新设备']"
                          :key="item"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                      <span v-else>{{ form.jieShouZhuangTai || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="保管人：" prop="guanLiRen">
                      <template slot="label">
                        <span class="required">保管人：</span>
                      </template>
                      <ibps-user-selector
                        v-model="form.guanLiRen"
                        type="user"
                        readonly-text="text"
                        :disabled="readonly"
                        :multiple="false"
                        size="mini"
                        :filter="filter"
                        filtrate
                        style="width: 100%"
                        @change-link-data="changeGuanLiRen"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="放置地点：" prop="cunFangWeiZhi">
                      <template slot="label">
                        <span class="required">放置地点：</span>
                      </template>
                      <ibps-custom-dialog
                        v-model="form.cunFangWeiZhi"
                        size="mini"
                        template-key="fjxzkdd"
                        :disabled="readonly"
                        type="dialog"
                        class="custom-dialog"
                        placeholder="请选择"
                        icon="el-icon-search"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="固定资产号：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.ziChanBianHao"
                        size="mini"
                      />
                      <span v-else>{{ form.ziChanBianHao || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="厂家/品牌：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.changShang"
                        size="mini"
                      />
                      <span v-else>{{ form.changShang || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="chuChangRiQi">
                      <template slot="label">
                        <span>出厂日期</span>
                        <el-tooltip
                          effect="dark"
                          content="根据使用年限,提前一个月推送提醒"
                          placement="top"
                        >
                          <i class="el-icon-question question-icon">：</i>
                        </el-tooltip>
                      </template>
                      <el-date-picker
                        v-if="!readonly"
                        v-model="form.chuChangRiQi"
                        style="width: 100%"
                        type="date"
                        placeholder="选择日期"
                        :readonly="readonly"
                        value-format="yyyy-MM-dd"
                        size="mini"
                      />
                      <span v-else>{{ form.chuChangRiQi || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="出厂编号：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.jiShenXuHao"
                        size="mini"
                      />
                      <span v-else>{{ form.jiShenXuHao || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="供应商：">
                      <ibps-custom-dialog
                        v-model="form.shiFouQiJianH"
                        size="mini"
                        template-key="gysxxdhk"
                        :disabled="readonly"
                        type="dialog"
                        class="custom-dialog"
                        placeholder="请选择"
                        icon="el-icon-search"
                        style="width: 100%"
                        @change-link-data="shiFouQiJianHChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="供应商电话：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.lianXiFangShi"
                        size="mini"
                      />
                      <span v-else>{{ form.lianXiFangShi || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="注册证号：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.zhuCeZhengHao"
                        size="mini"
                      />
                      <span v-else>{{ form.zhuCeZhengHao || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-if="showzhuCeYouXiaoQi">
                  <el-col :span="8">
                    <el-form-item label="注册证有效期：">
                      <el-date-picker
                        v-if="!readonly"
                        v-model="form.zhuCeYouXiaoQi"
                        style="width: 100%"
                        type="date"
                        placeholder="选择日期"
                        :readonly="readonly"
                        value-format="yyyy-MM-dd"
                        size="mini"
                      />
                      <span v-else>{{ form.zhuCeYouXiaoQi || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col v-if="hasFuZeRenDianHua" :span="8">
                    <el-form-item label="负责人电话：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.fuZeRenDianHua"
                        size="mini"
                      />
                      <span v-else>{{ form.fuZeRenDianHua || '/' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="hasChangJiaLianXiRen" :span="10">
                    <el-form-item label="厂家联系人及电话：">
                      <el-input
                        v-if="!readonly"
                        v-model="form.changJiaLianXiRen"
                        size="mini"
                      />
                      <span v-else>{{ form.changJiaLianXiRen || '/' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row v-if="photos.length > 0">
                  <el-col>
                    <el-carousel
                      trigger="click"
                      height="250px"
                      indicator-position="none"
                    >
                      <el-carousel-item v-if="photos.length == 0">
                        <el-empty description="暂无图片" />
                      </el-carousel-item>
                      <template v-else>
                        <el-carousel-item v-for="item in photos" :key="item.id">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="item.url"
                            fit="contain"
                            :preview-src-list="photos.map((item) => item.url)"
                          />
                        </el-carousel-item>
                      </template>
                    </el-carousel>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="tabs">
          <el-row>
            <el-col>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="one">
                  <el-form
                    label-width="100px"
                    :model="form"
                    :hide-required-asterisk="true"
                  >
                    <el-row :gutter="20">
                      <!-- 第一列 -->
                      <el-col :span="8">
                        <el-row>
                          <el-col>
                            <el-form-item label="购进日期：">
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.gouJinRiQi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.gouJinRiQi || '/' }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="接收日期：">
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.jieShouRiQi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.jieShouRiQi || '/' }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="验收日期：">
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.yanShouRiQi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.yanShouRiQi || '/' }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="投入日期：">
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.qiYongRiQi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.qiYongRiQi || '/' }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="核查日期：">
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.biXuSheShi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.biXuSheShi || '/' }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="核查人：">
                              <ibps-user-selector
                                v-model="form.biXuDeHuanJin"
                                type="user"
                                readonly-text="text"
                                :disabled="readonly"
                                :multiple="false"
                                size="mini"
                                style="width: 100%"
                                :filter="filter"
                                filtrate
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="电源要求：">
                              <el-input
                                v-if="!readonly"
                                v-model="form.dianYuanYaoQiu"
                                size="mini"
                              />
                              <span v-else>{{
                                form.dianYuanYaoQiu || '/'
                              }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="环境要求：">
                              <el-input
                                v-if="!readonly"
                                v-model="form.huanJingYaoQiu"
                                size="mini"
                              />
                              <span v-else>{{
                                form.huanJingYaoQiu || '/'
                              }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="使用年限(年)：">
                              <el-input
                                v-if="!readonly"
                                v-model="form.heChaXiaoZhun"
                                size="mini"
                                type="number"
                              />
                              <span v-else
                                >{{ form.heChaXiaoZhun || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="资产原值(元)：">
                              <el-input
                                v-if="!readonly"
                                v-model="form.ziChanYuanZhi"
                                size="mini"
                                type="number"
                              />
                              <span v-else
                                >{{ form.ziChanYuanZhi || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <!-- 第二列 -->
                      <el-col :span="8">
                        <el-row>
                          <el-col>
                            <el-form-item label="是否维护：">
                              <el-select
                                v-if="!readonly"
                                v-model="form.shiFouWeiHu"
                                placeholder="请选择"
                                size="mini"
                                style="width: 100%"
                              >
                                <el-option
                                  v-for="item in ['是', '否']"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                />
                              </el-select>
                              <span v-else>{{ form.shiFouWeiHu || '/' }} </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="岗位/分组：">
                              <ibps-custom-dialog
                                v-model="form.weiHuFangShi"
                                size="mini"
                                :template-key="
                                  config ? 'gwzzdhkrcwh' : 'sbbqdhk'
                                "
                                multiple
                                :disabled="readonly"
                                type="dialog"
                                class="custom-dialog"
                                placeholder="请选择"
                                icon="el-icon-search"
                                style="width: 100%"
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item label="是否24H开机：">
                              <el-select
                                v-if="!readonly"
                                v-model="form.jianKongYiJu"
                                placeholder="请选择"
                                size="mini"
                                style="width: 100%"
                              >
                                <el-option
                                  v-for="item in ['是', '否']"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                />
                              </el-select>
                              <span v-else
                                >{{ form.jianKongYiJu || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.jianKongYiJu === '否'">
                          <el-col>
                            <el-form-item label="开机时间：">
                              <el-time-picker
                                v-if="!readonly"
                                v-model="form.kaiShiShiYong"
                                placeholder="任意时间点"
                                size="mini"
                                style="width: 100%"
                                value-format="HH:mm:ss"
                              />
                              <span v-else
                                >{{ form.kaiShiShiYong || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.jianKongYiJu === '否'">
                          <el-col>
                            <el-form-item label="关机时间：">
                              <el-time-picker
                                v-if="!readonly"
                                v-model="form.shiJiShiYongF"
                                placeholder="任意时间点"
                                size="mini"
                                style="width: 100%"
                                value-format="HH:mm:ss"
                              />
                              <span v-else
                                >{{ form.shiJiShiYongF || '/' }}
                              </span></el-form-item
                            >
                          </el-col>
                        </el-row>
                        <!-- <el-row>
                                                    <el-col>
                                                        <el-form-item label="是否限用：">
                                                            <el-select v-model="form.xiaoZhunWuCha" placeholder="请选择" size="mini" style="width:100%">
                                                                <el-option
                                                                    v-for="item in ['是','否']"
                                                                    :key="item"
                                                                    :label="item"
                                                                    :value="item"
                                                                />
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-if="form.xiaoZhunWuCha==='是'">
                                                    <el-col>
                                                        <el-form-item label="限用范围：">
                                                            <el-input v-model="form.caiGouHeTong" size="mini" />
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row> -->
                        <el-row>
                          <!-- todo -->
                          <el-col>
                            <el-alert
                              title="开关机时间配置说明"
                              type="success"
                              description="日保养、按需保养、这些周期，如果配置了开关机时间，在设备使用与维护时会自动带出"
                              :closable="false"
                            />
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col>
                            <el-form-item
                              :style="{ 'margin-top': '10px' }"
                              label="备注："
                            >
                              <el-input
                                v-model="form.remark"
                                size="mini"
                                type="textarea"
                                :autosize="{ maxRows: 4, minRows: 2 }"
                                v-if="!readonly"
                              />
                              <span v-else>{{ form.remark }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                      <!-- 第三列 -->
                      <el-col :span="8">
                        <el-row>
                          <el-col>
                            <el-form-item
                              label="是否校准："
                              prop="shiFouXiaoZhun"
                              label-width="140px"
                            >
                              <el-select
                                v-if="!readonly"
                                v-model="form.shiFouXiaoZhun"
                                placeholder="请选择"
                                size="mini"
                                style="width: 100%"
                              >
                                <el-option
                                  v-for="item in ['是', '否']"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                />
                              </el-select>
                              <span v-else
                                >{{ form.shiFouXiaoZhun || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.shiFouXiaoZhun === '是'">
                          <el-col>
                            <el-form-item
                              label="检定/校准周期(月)："
                              label-width="140px"
                            >
                              <el-input
                                v-if="!readonly"
                                v-model="form.xiaoZhunZQ"
                                size="mini"
                                type="number"
                                style="width: 100%"
                              />
                              <span v-else>{{ form.xiaoZhunZQ || '/' }} </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.shiFouXiaoZhun === '是'">
                          <el-col>
                            <el-form-item
                              label="检定/校准单位："
                              label-width="140px"
                            >
                              <ibps-custom-dialog
                                v-model="form.shiYongKeShi"
                                size="mini"
                                template-key="gysxxdhk"
                                :disabled="readonly"
                                type="dialog"
                                class="custom-dialog"
                                placeholder="请选择"
                                icon="el-icon-search"
                                style="width: 100%"
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.shiFouXiaoZhun === '是'">
                          <el-col>
                            <el-form-item
                              label="最近校准时间："
                              label-width="140px"
                            >
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.yiXiaoRiQi"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else>{{ form.yiXiaoRiQi || '/' }} </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.shiFouXiaoZhun === '是'">
                          <el-col>
                            <el-form-item
                              label="检定/校准有效期至："
                              label-width="140px"
                            >
                              <el-date-picker
                                v-if="!readonly"
                                v-model="form.xiaoZhunYouXia"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期"
                                :readonly="readonly"
                                value-format="yyyy-MM-dd"
                                size="mini"
                              />
                              <span v-else
                                >{{ form.xiaoZhunYouXia || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="form.shiFouXiaoZhun === '是'">
                          <el-col>
                            <el-form-item
                              label="检定/校准证书编号："
                              label-width="140px"
                            >
                              <el-input
                                v-if="!readonly"
                                v-model="form.zhengShuBianHa"
                                size="mini"
                              />
                              <span v-else
                                >{{ form.zhengShuBianHa || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-if="false">
                          <el-col>
                            <el-form-item label="校准机构：">
                              <el-input
                                v-if="!readonly"
                                v-model="form.shiWuShuoMing"
                                size="mini"
                              />
                              <span v-else
                                >{{ form.shiWuShuoMing || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row
                          v-if="form.shiFouXiaoZhun === '是' && !isSheKou"
                        >
                          <el-col>
                            <el-form-item
                              label="检定/校准参数："
                              label-width="140px"
                            >
                              <el-input
                                v-model="form.jianDingXiao"
                                size="mini"
                                type="textarea"
                                :autosize="{ maxRows: 4, minRows: 2 }"
                                v-if="!readonly"
                              />
                              <span v-else>{{ form.jianDingXiao }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row
                          v-if="form.shiFouXiaoZhun === '是' && !isSheKou"
                        >
                          <el-col>
                            <el-form-item
                              label="预期测量范围："
                              label-width="140px"
                            >
                              <el-input
                                v-model="form.ceLiangGongZuo"
                                type="textarea"
                                size="mini"
                                :autosize="{ maxRows: 4, minRows: 2 }"
                                v-if="!readonly"
                              />
                              <span v-else>{{ form.ceLiangGongZuo }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row
                          v-if="form.shiFouXiaoZhun === '是' && !isSheKou"
                        >
                          <el-col>
                            <el-form-item
                              label="U/精确度/最大允差："
                              label-width="140px"
                            >
                              <el-input
                                v-model="form.zuiDaYunCha"
                                type="textarea"
                                size="mini"
                                style="width: 100%"
                                :autosize="{ maxRows: 4, minRows: 2 }"
                                v-if="!readonly"
                              />
                              <span v-else>{{ form.zuiDaYunCha }}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row
                          v-if="form.shiFouXiaoZhun === '是' && !isSheKou"
                        >
                          <el-col>
                            <el-form-item label="修正值：" label-width="140px">
                              <el-input
                                v-if="!readonly"
                                v-model="form.xiuZhengZhiXiu"
                                size="mini"
                              />
                              <span v-else
                                >{{ form.xiuZhengZhiXiu || '/' }}
                              </span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <el-alert
                          :closable="false"
                          type="success"
                          style="margin-bottom: 20px"
                          >设备照片及相关附件</el-alert
                        >
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="设备图片：">
                          <ibps-image
                            v-model="form.beiZhu"
                            height="160"
                            width="160"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
                            multiple
                            download
                            :disabled="readonly"
                            size=""
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="附件上传：">
                          <ibps-attachment
                            v-model="form.yqzp"
                            :download="true"
                            multiple
                            accept="*"
                            :readonly="readonly"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="资质证书：">
                          <ibps-attachment
                            v-model="form.faPiao"
                            :download="true"
                            multiple
                            accept="*"
                            :readonly="readonly"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          v-if="!hidefuJianShang"
                          label="设备说明书："
                        >
                          <ibps-attachment
                            v-model="form.fuJianShang"
                            :download="true"
                            multiple
                            accept="*"
                            :readonly="readonly"
                            style="width: 100%"
                          />
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="24">
                                                <el-form-item label="说明书分类：">
                                                    <SelectType :field="{}" @change-data="changeData" />
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="文件路径：">
                                                    <span>{{ form.wenJianXiLei }}</span>
                                                </el-form-item>
                                            </el-col> -->
                    </el-row>
                  </el-form>
                </el-tab-pane>

                <el-tab-pane
                  v-for="item in tabItems"
                  :key="item.name"
                  :label="item.label"
                  :name="item.name"
                  :disabled="item.isKeepAlive && !isEdit"
                >
                  <template v-if="item.isKeepAlive">
                    <!-- 使用 v-if 配合 keep-alive 实现按需加载 -->
                    <keep-alive>
                      <component
                        :is="item.component"
                        v-if="activeName === item.name"
                        :params="form"
                        :hideSysDeviceNo="hideSysDeviceNo"
                      />
                    </keep-alive>
                  </template>
                  <template v-else>
                    <component
                      :is="item.component"
                      :ref="item.ref"
                      :readonly="readonly"
                      :list-data="form[item.data]"
                    />
                  </template>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import {
  getequipmentCard,
  saveEquipmentCard
} from '@/api/platform/device/device'
import { getImage } from '@/api/platform/file/attachment'
import { getSetting } from '@/utils/query'
export default {
  components: {
    IbpsUserSelector: () => import('@/business/platform/org/selector'),
    Maintenance: () => import('./maintenance.vue'),
    MoreDevices: () => import('./moreDevices.vue'),
    ScrappedRecord: () => import('./scrappedRecord.vue'),
    MaintenanceRecord: () => import('./maintenanceRecord.vue'),
    RepairRecord: () => import('./repairRecord.vue'),
    CalibrationCheckRecord: () => import('./calibrationCheckRecord.vue'),
    ConfirmationRecord: () => import('./ConfirmationRecord.vue'),
    PvRecord: () => import('./pvRecord.vue'),
    IbpsAttachment: () =>
      import('@/business/platform/file/attachment/selector'),
    SelectType: () => import('@/views/component/selectType.vue'),
    IbpsCustomDialog: () =>
      import('@/business/platform/data/templaterender/custom-dialog'),
    IbpsImage: () => import('@/business/platform/file/image')
  },
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default: function () {
        return {}
      }
    },
    stateList: {
      type: Object,
      default: function () {
        return { 停用: '停用', 报废: '报废', 合格: '合格' }
      }
    },
    hideSysDeviceNo: {
      type: Boolean,
      default: false
    },
    hidefuJianShang: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Object,
      default: function () {
        return {}
      }
    },
    typeList: {
      type: Object,
      default: function () {
        return {
          检验系统: '检验系统',
          通用设备: '通用设备',
          软件: '软件',
          信息系统: '信息系统'
        }
      }
    },
    hasFuZeRenDianHua: {
      type: Boolean,
      default: false
    },
    hasChangJiaLianXiRen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const { userId, position, level, deptList, setting } = this.$store.getters
    return {
      config: setting?.postJob?.allocation || false,
      tabItems: [
        {
          label: '维护项目',
          name: 'two',
          ref: 'MaintenanceRef',
          data: 'maintenanceItemPoList',
          component: 'Maintenance',
          isKeepAlive: false
        },
        {
          label: '附属设备及配件',
          name: 'three',
          ref: 'MoreDevicesRef',
          data: 'accessoriesDevicePoList',
          component: 'MoreDevices',
          isKeepAlive: false
        },
        {
          label: '使用与维护记录',
          name: 'four',
          component: 'MaintenanceRecord',
          isKeepAlive: true
        },
        {
          label: '校准记录',
          name: 'five',
          component: 'CalibrationCheckRecord',
          isKeepAlive: true
        },
        {
          label: '维修记录',
          name: 'six',
          component: 'RepairRecord',
          isKeepAlive: true
        },
        {
          label: '停用、报废记录',
          name: 'seven',
          component: 'ScrappedRecord',
          isKeepAlive: true
        },
        {
          label: '检验系统校准确认记录',
          name: 'eight',
          component: 'ConfirmationRecord',
          isKeepAlive: true
        }
        // 同步与深圳三院分支，后端暂未同步对应接口，不开放
        // { label: '性能验证记录', name: 'nine', component: 'PvRecord', isKeepAlive: true }
      ],
      filter: [
        {
          descVal: '1',
          includeSub: true,
          old: 'position',
          partyId: this.$store.getters.userInfo.employee.positions,
          partyName: '',
          scriptContent: '',
          type: 'user',
          userType: 'position'
        }
      ],
      isFirstyiXiaoRiQi: true,
      isFirstbianZhiBuMen: true,
      isSheKou: false,
      activeName: 'one',
      dialogVisible: true,
      userId: userId,
      position: position,
      deptList: deptList,
      level: level.second || level.first,
      org: level.first || '',
      loading: false,
      title: '设备档案卡',
      toolbars: [
        {
          key: 'save',
          label: '保存',
          hidden: () => {
            return this.readonly
          }
        },
        {
          key: 'cancel',
          label: '退出',
          type: 'danger',
          icon: 'ibps-icon-close'
        }
      ],
      initWidth: '1480px',
      isEdit: false,
      isFinished: false,
      preParams: {},
      Ids: [],
      showzhuCeYouXiaoQi: false,
      form: {
        gouJinRiQi: '', // 购进日期
        changShang: '', // 厂家/品牌
        guiGeXingHao: '', // 规格型号
        jieShouRiQi: '', // 接收日期
        qiYongRiQi: '', // 投入日期
        cunFangDiDian: '',
        cunFangWeiZhi: '', // 放置地点
        jieShouZhuangTai: '', // 接收时状态
        guanLiRen: '', // 保管人
        weiHuFangShi: '', // 设备分组
        bianZhiRen: '', // 建档人
        bianZhiBuMen: '', // 建档部门
        bianZhiShiJian: '', // 建档时间
        shiFouGuoShen: '',
        sheBeiLeiXing: '', // 设备类型
        sheBeiZhuangTa: '', // 设备状态
        sheBeiShiBieH: '', // 设备编号
        shiFouXiaoZhun: '', // 是否校准
        gongYingShang: '',
        shiFouQiJianH: '', // 供应商id
        lianXiFangShi: '', // 供应商电话
        xiaoZhunYouXia: '', // 校准有效期至
        chuChangRiQi: '', // 出厂日期
        sheBeiMingCheng: '', // 设备名称
        sheBeiMingChen: '', // 设备名称id
        yiXiaoRiQi: '', // 最近校准时间
        heChaXiaoZhun: '', // 使用年限
        shiJiShiYongF: '', // 关机时间
        kaiShiShiYong: '', // 开机时间
        zhengShuBianHa: '', // 校准证书编号
        xiaoZhunWuCha: '', // 是否限用
        xiaoZhunZQ: '', // 检定/校准周期
        shiYongKeShi: '', // 检定/校准单位
        yuanSheBeiBian: '', // 原设备编号
        jianKongYiJu: '', // 是否24H开机
        biXuDeHuanJin: '', // 核查人
        biXuSheShi: '', // 核查日期
        ziChanYuanZhi: '', // 资产原值
        ziChanBianHao: '', // 固定资产号
        shiFouWeiHu: '', // 是否维护
        jiShenXuHao: '', // 出厂编号
        yanShouRiQi: '', // 验收日期
        huanJingYaoQiu: '', // 环境要求
        dianYuanYaoQiu: '', // 电源要求
        zhuCeZhengHao: '', // 注册证号
        zhuCeYouXiaoQi: '', // 注册证有效期
        yqzp: '', // 附件上传
        faPiao: '', // 资质证书
        fuJianShang: '', // 设备使用说明书
        beiZhu: '', // 设备图片
        caiGouHeTong: '', // 限用范围
        zhuanYeBuMen: '',
        wenJianXiLei: '', // 附件细类
        xiLeiId: '',
        quanXianLeiXing: '',
        diDian: '',
        buMen: '', // 图片id
        ceLiangGongZuo: '', // 测量范围
        jianDingXiao: '', // 检定/校准参数
        xiuZhengZhiXiu: '', // 修正值
        zuiDaYunCha: '', // U/精确度/最大允差
        shiWuShuoMing: '', // 校准机构
        fuZeRenDianHua: '', // 负责人电话
        changJiaLianXiRen: '', // 厂家联系人及电话
        remark: ''
      },
      rules: {
        sheBeiMingCheng: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        yuanSheBeiBian: [
          { required: true, message: '原设备编号不能为空', trigger: 'blur' }
        ],
        sheBeiLeiXing: [
          { required: true, message: '设备类型不能为空', trigger: 'blur' }
        ],
        sheBeiZhuangTa: [
          { required: true, message: '设备状态不能为空', trigger: 'blur' }
        ],
        guiGeXingHao: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' }
        ],
        bianZhiBuMen: [
          { required: true, message: '建档部门不能为空', trigger: 'blur' }
        ],
        bianZhiRen: [
          { required: true, message: '建档人不能为空', trigger: 'blur' }
        ],
        bianZhiShiJian: [
          { required: true, message: '建档时间不能为空', trigger: 'blur' }
        ],
        jieShouZhuangTai: [
          { required: true, message: '接收时状态不能为空', trigger: 'blur' }
        ],
        guanLiRen: [
          { required: true, message: '保管人不能为空', trigger: 'blur' }
        ],
        cunFangWeiZhi: [
          { required: true, message: '放置地点不能为空', trigger: 'blur' }
        ],
        shiFouXiaoZhun: [
          { required: true, message: '是否校准不能为空', trigger: 'blur' }
        ]
        // chuChangRiQi: [
        //   { required: true, message: '出厂日期不能为空', trigger: 'blur' }
        // ]
      },
      changeDeviceLabel: false
    }
  },
  computed: {
    photos() {
      if (this.form.beiZhu) {
        const photos = JSON.parse(this.form.beiZhu)
        photos.forEach((item) => {
          item.url = getImage(item.id)
        })
        return photos
      }
      return []
    },
    showState() {
      return (
        this.stateList[this.form.sheBeiZhuangTa] || this.form.sheBeiZhuangTa
      )
    }
  },
  watch: {
    photos: {
      handler(val) {
        this.form.buMen = val.map((item) => item.id).join(',')
      }
    },
    'form.xiaoZhunWuCha': {
      handler(val, old) {
        if (!old) return
        if (val === '否') {
          this.form.sheBeiZhuangTa = '合格'
        } else if (val === '是') {
          this.form.caiGouHeTong = ''
          this.form.sheBeiZhuangTa = '限用'
        }
      }
    },
    'form.cunFangWeiZhi': {
      async handler(val) {
        if (!val) return
        // const sql = `select fang_jian_ming_ha from t_jjqfjb where id_='${val}'`
        const {
          variables: { data }
        } = await this.$common.request('query', {
          key: 'getRoomDataById',
          params: [val]
        })

        this.form.cunFangDiDian =
          data && data[0] ? data[0].fang_jian_ming_ha : ''
      }
    },
    // 根据最近检定时间动态计算对应有效期至
    'form.yiXiaoRiQi': {
      handler(value) {
        if (value) {
          if (this.isFirstyiXiaoRiQi) {
            this.isFirstyiXiaoRiQi = false
            return
          }
          const cycle = this.form.xiaoZhunZQ || 0
          const expiredDate = this.$common.getFormatDate(
            'string',
            10,
            this.$common.getDate('month', parseInt(cycle), value)
          )
          this.form.xiaoZhunYouXia = this.$common.getFormatDate(
            'string',
            10,
            this.$common.getDate('day', -1, expiredDate)
          )
        }
      }
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    changeGuanLiRen(key, data) {
      this.form.fuZeRenDianHua = data?.mobile
    },
    sheBeiMingChenChange(key, data) {
      this.form.sheBeiMingCheng = data.ming_cheng_str_
      this.form.guiGeXingHao = data.xing_hao_gui_ge_
      this.form.jiShenXuHao = data.chu_chang_bian_ha
      this.form.changShang = data.sheng_chan_chang_
      this.form.yuanSheBeiBian = data.she_bei_bian_hao_
    },
    // 根据供应商自动带出供应商名称和电话
    shiFouQiJianHChange(key, data) {
      this.form.lianXiFangShi = data.lian_xi_dian_hua_
      this.form.gongYingShang = data.gong_ying_shang_m
    },
    changeData(...args) {
      this.form[args[0]] = args[1]
    },
    handleClick() {},
    handleActionEvent({ key }) {
      switch (key) {
        case 'cancel':
          this.closeDialog(true)
          break
        case 'save':
          this.goSave('close')
          break
        default:
          break
      }
    },

    // 获取人员部门
    getPersonPosition(id) {
      const userList = this.$store.getters.userList
      const bianzhiUserid = userList.find((i) => i.userId === id)
      if (bianzhiUserid) {
        return bianzhiUserid.positionId
      }
    },
    isDateMoreThenSecondDay(firstTime, secondTime) {
      if (!firstTime || !secondTime) {
        return false
      }
      return new Date(firstTime).getTime() > new Date(secondTime).getTime()
    },
    async checkRequired(flag) {
      if (this.form.xiaoZhunWuCha === '是' && !this.form.caiGouHeTong) {
        throw new Error('请填写限用范围！')
      }
      if (this.form.accessoriesDevicePoList.length > 0) {
        for (let i = 0; i < this.form.accessoriesDevicePoList.length; i++) {
          const item = this.form.accessoriesDevicePoList[i]
          if (!item.mingCheng) {
            throw new Error(`附属设备及配件第${i + 1}行名称缺失！`)
          }
          if (!item.guiGeXingHao1) {
            throw new Error(`附属设备及配件第${i + 1}行规格型号缺失！`)
          }
          if (!item.danWei) {
            throw new Error(`附属设备及配件第${i + 1}行单位缺失！`)
          }
          if (!item.shuLiang) {
            throw new Error(`附属设备及配件第${i + 1}行数量缺失！`)
          }
        }
      }

      const sysDeviceNo = this.form.sheBeiShiBieH
      const originalDeviceNo = this.form.yuanSheBeiBian
      const position = this.form.diDian
      // const sql = `select count(1) as num from t_sbdj where yuan_she_bei_bian = '${originalDeviceNo}' and di_dian_ = '${position}' and she_bei_shi_bie_h <> '${sysDeviceNo}' limit 1`
      const result = await this.$common.request('query', {
        key: 'getExistDeviceNo',
        params: [originalDeviceNo, position, sysDeviceNo]
      })
      const { data = [] } = result.variables || {}
      if (data[0].num > 0) {
        throw new Error(`系统当前已经存在此原设备编号,请更换另一个编号!`)
      }

      const exFactoryTime = this.form.chuChangRiQi
      const reviceTime = this.form.jieShouRiQi
      const useTime = this.form.qiYongRiQi
      // 如果有出厂日期，则接收日期必须在出厂日期之后，投入日期必须在出厂日期之后
      // 校验接收日期是否在投入日期之前
      if (exFactoryTime && reviceTime) {
        if (this.isDateMoreThenSecondDay(exFactoryTime, reviceTime)) {
          throw new Error(`该设备的接收日期不得早于出厂日期!`)
        }
      }
      if (exFactoryTime && useTime) {
        if (this.isDateMoreThenSecondDay(exFactoryTime, useTime)) {
          throw new Error(`该设备的投入日期不得早于出厂日期!`)
        }
      }
      if (reviceTime && useTime) {
        if (this.isDateMoreThenSecondDay(reviceTime, useTime)) {
          throw new Error(`该设备的投入日期不得早于接收日期!`)
        }
      }
    },
    async goAdd() {
      try {
        this.loading = true
        this.form.sheBeiShiBieH = await this.getNextAlias()
        await saveEquipmentCard(this.form)
        this.$message.success('添加成功')
        this.closeDialog(true)
        this.loading = false
      } catch (error) {
        console.log(error)
        this.$message.warning('添加失败')
        this.loading = false
      }
    },
    async goEdit(flag) {
      try {
        this.loading = true
        await saveEquipmentCard(this.form)
        this.$message.success('修改成功')
        this.closeDialog(true)
        this.loading = false
      } catch (error) {
        this.$message.warning(error.message)
        this.loading = false
        throw new Error(error.message)
      }
    },
    goSave(flag) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            // 维护项目
            this.form.maintenanceItemPoList =
              this.$refs.MaintenanceRef?.[0]?.listDataCopy ||
              this.form.maintenanceItemPoList ||
              []
            // 附属设备及配件
            this.form.accessoriesDevicePoList =
              this.$refs.MoreDevicesRef?.[0]?.listDataCopy ||
              this.form.accessoriesDevicePoList ||
              []
            await this.checkRequired()
            if (this.isEdit) {
              this.goEdit(flag)
            } else {
              this.goAdd()
            }
          } catch (error) {
            this.$message.warning(error.message)
          }
        } else {
          return this.$message.warning('请填写必填项！')
        }
      })
    },
    // 刷新
    async goRefresh() {},
    // 关闭当前窗口
    closeDialog(needRefresh) {
      this.dialogVisible = false
      if (needRefresh) {
        this.$emit('close')
      }
    },
    generateRandomString() {
      return `JYK-${Math.floor(Math.random() * 88888) + 10000}`
    },
    getNextAlias() {
      return new Promise((resolve, reject) => {
        this.$common
          .getNextIdByAlias({
            alias: 'sbbh'
          })
          .then((response) => {
            resolve(response.data)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    async init() {
      const deviceres = await getSetting('device')
      this.changeDeviceLabel = deviceres?.changeDeviceLabel || false
      this.showzhuCeYouXiaoQi = deviceres?.showzhuCeYouXiaoQi || false
      if (this.hideSysDeviceNo || deviceres?.changeDeviceLabel) {
        this.rules.yuanSheBeiBian[0].message = '设备编号不能为空'
      }
      this.loading = true
      this.isEdit = !!(this.params && this.params.id)
      this.isSheKou = this.deptList[0].positionId === '1166372468122714112' // 判断是否是蛇口医院

      // 根据全局配置动态生成tab
      const newTab = []
      for (const key in this.tabList) {
        if (Object.hasOwnProperty.call(this.tabList, key)) {
          const newLabel = this.tabList[key]
          const t = this.tabItems.find((i) => i.label === key)
          if (t) {
            t.label = newLabel
            newTab.push(t)
          }
        }
      }
      if (newTab.length > 0) {
        this.tabItems = newTab
      }

      if (this.isEdit) {
        const { data } = await getequipmentCard({ id: this.params.id })
        this.form = data
      } else {
        this.isFirstbianZhiBuMen = false
        this.isFirstyiXiaoRiQi = false
        this.form.jieShouRiQi = dayjs().format('YYYY-MM-DD')
        this.form.qiYongRiQi = dayjs().format('YYYY-MM-DD')
        this.form.xiaoZhunWuCha = '否'
        this.form.jieShouZhuangTai = '新设备'
        this.form.bianZhiRen = this.userId
        const pos = this.position.split(',')
        this.form.bianZhiBuMen = pos[pos.length - 1]
        this.form.bianZhiShiJian = dayjs().format('YYYY-MM-DD HH:mm')
        this.form.shiFouGuoShen = '已完成'
        this.form.sheBeiLeiXing = '检验系统'
        this.form.sheBeiZhuangTa = '合格'
        this.form.shiFouXiaoZhun = '是'
        this.form.jianKongYiJu = '否'
        this.form.shiFouWeiHu = '是'
        this.form.diDian = this.level
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-detail-dialog {
  ::v-deep {
    .el-dialog__header {
      text-align: center;
    }
  }
  .dialog-title {
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      z-index: 99999999;
      position: absolute;
      right: 8vw;
    }
    .dialogtitle {
      font-size: 22px;
      font-family: SimHei;
      font-weight: bold;
      color: #222;
    }
  }
  .container {
    display: flex;
    width: 100%;
    justify-content: center;
    .el-row {
      margin: 0 !important;
    }
    .required {
      color: #606266 !important;
      &::before {
        content: '*';
        margin: 0 4px 0 -7.5px;
        color: #f56c6c;
      }
    }
    .left {
      height: calc(100vh - 100px);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      overflow-y: auto;
      .form {
        margin-left: -20px;
      }
      .item {
        width: 100%;
      }
      .title {
        margin: 16px 0 6px -16px;
      }
      .tabs {
        margin-top: 40px;
      }
      .question-icon {
        margin-left: 2px;
      }
    }
  }
}
::v-deep {
  .el-form-item__label {
    text-align: left;
    font-size: 12px !important;
  }
  .el-form-item__content {
    font-size: 12px !important;
    display: flex;
  }
  .el-table th {
    background-color: #f5f7fa !important;
  }
  .el-tabs__header {
    margin: 0 0 30px !important;
  }
  .ibps-image {
    width: 100%;
    .ibps-p-0 {
      width: 100%;
      .list-group {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }
    }
  }
}
</style>