newcpms/ui/src/views/sems/reportYlgd/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item :label="$t('装置名称')" prop="plantCode">
        <el-input
          v-model="queryParams.plantCode"
          :placeholder="$t('请输入') + $t('装置名称')"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('单元')" prop="unit">
        <el-input
          v-model="queryParams.unit"
          :placeholder="$t('请输入') + $t('单元')"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('申请状态')" prop="approveStatus">
        <el-select v-model="queryParams.approveStatus" :placeholder="$t('请选择') + $t('申请状态')" clearable size="small">
          <el-option
            v-for="dict in approveStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          size="mini"
          :disabled="multiple"
          @click="approveHandle('')"
        >{{ $t('申请报告') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          size="mini"
          @click="syncData"
        >{{ $t('同步数据') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          size="mini"
          @click="dialogVisible = true"
        >{{ $t('批量') + $t('下载') + $t('历史报告') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['sems:reportYlgd:edit']"
        >导入更新数据
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['sems:reportYlgd:export']"
        >{{ $t('导出') }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="reportTable" :data="reportYlgdList" @selection-change="handleSelectionChange"
              :height="clientHeight" border>
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column :label="$t('装置名称')" align="center" fixed="left" prop="plantCode" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('单元')" align="center" fixed="left" prop="unit" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('管道名称')" align="center" fixed="left" prop="devname" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('管道编号')" align="center" fixed="left" prop="devno" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('申请状态')" align="center" fixed="left" prop="approveStatus"
                       :formatter="approveStatusFormat" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('管道级别')" align="center" prop="grade" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.medium" :placeholder="$t('请输入')+$t('介质')"/>
          <span v-else>{{ scope.row.medium }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('设计压力')" align="center" prop="desPressure" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.desPressure" :placeholder="$t('请输入')+$t('设计压力')"/>
          <span v-else>{{ scope.row.desPressure }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('设计温度')" align="center" prop="desTemp" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.desTemp" :placeholder="$t('请输入')+$t('设计温度')"/>
          <span v-else>{{ scope.row.desTemp }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作压力')" align="center" prop="optPressure" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.optPressure" :placeholder="$t('请输入')+$t('操作压力')"/>
          <span v-else>{{ scope.row.optPressure }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作温度')" align="center" prop="optTemp" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.optTemp" :placeholder="$t('请输入')+$t('操作温度')"/>
          <span v-else>{{ scope.row.optTemp }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('安全状况等级')" align="center" prop="safeClass" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('下次定期检验日期')" align="center" prop="yearWarnDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.yearWarnDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('年检报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.yearReportNo" :placeholder="$t('请输入')+$t('年检报告编号')"/>
          <span v-else>{{ scope.row.yearReportNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="1" align="center" prop="pj1" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj1" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj1Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj1 != null">{{ pj1Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="2" align="center" prop="pj2" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj2" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj2Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj2 != null">{{ pj2Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="3" align="center" prop="pj3" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj3" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj3Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj3 != null">{{ pj3Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="4" align="center" prop="pj4" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj4" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj4Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj4 != null">{{ pj4Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="5" align="center" prop="pj5" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj5" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj5Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj5 != null">{{ pj5Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('安全附件仪表及检查情况')" align="center">
        <el-table-column label="6" align="center" prop="pj6" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj6" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj6Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj6 != null">{{ pj6Format(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="7" align="center" prop="pj7" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj7" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj7Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj7 != null">{{ pj7Format(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="8" align="center" prop="pj8" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj8" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj8Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj8 != null">{{ pj8Format(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="9" align="center" prop="pj9" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj9" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj9Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj9 != null">{{ pj9Format(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="10" align="center" prop="pj10" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj10" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj10Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj10 != null">{{ pj10Format(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="11" align="center" prop="pj11" :render-header="renderHeader">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.pj11" :placeholder="$t('请选择')">
              <el-option
                v-for="dict in pj11Options"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <span v-if="scope.row.isEdit === false && scope.row.pj11 != null">{{ pj11Format(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="12" align="center" prop="pj12" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj12" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj12Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj12 != null">{{ pj12Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="13" align="center" prop="pj13" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj13" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj13Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj13 != null">{{ pj13Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="14" align="center" prop="pj14" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj14" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj14Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj14 != null">{{ pj14Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="15" align="center" prop="pj15" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj15" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj15Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj15 != null">{{ pj15Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="16" align="center" prop="pj16" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj16" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj16Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj16 != null">{{ pj16Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="17" align="center" prop="pj17" :render-header="renderHeader">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.pj17" :placeholder="$t('请选择')">
            <el-option
              v-for="dict in pj17Options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.pj17 != null">{{ pj17Format(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.remarks" :placeholder="$t('请输入')+$t('备注')"/>
          <span v-else>{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('检查日期')" align="center" prop="checkDate" width="100">
        <template slot-scope="scope">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="scope.row.checkDate"
                          type="date"
                          v-if="scope.row.isEdit"
                          value-format="yyyy-MM-dd"
                          :placeholder="$t('请选择')+$t('检查日期')">
          </el-date-picker>
          <span v-else>{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('下次年度检查日期')" align="center" prop="nextCheckDate" width="100">
        <template slot-scope="scope">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="scope.row.nextCheckDate"
                          type="date"
                          v-if="scope.row.isEdit"
                          value-format="yyyy-MM-dd"
                          :placeholder="$t('请选择')+$t('下次年度检查日期')">
          </el-date-picker>
          <span v-else>{{ parseTime(scope.row.nextCheckDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('问题及处理')" align="center" prop="problem" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.problem" :placeholder="$t('请输入')+$t('问题及处理')"/>
          <span v-else>{{ scope.row.problem }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('检查结论')" align="center" prop="con" :formatter="conFormat">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.con" :placeholder="$t('请选择')+$t('检查结论')">
            <el-option
              v-for="dict in conOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          <span v-if="scope.row.isEdit === false && scope.row.con != null">{{ conFormat(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="200"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="!scope.row.isEdit"
            v-hasPermi="['sems:reportYlgd:edit']"
          >{{ $t('修改') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-tickets"
            @click="handleHistory(scope.row)"
            v-if="!scope.row.isEdit"
            v-hasPermi="['sems:reportYlgd:edit']"
          >{{ $t('历史报告') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-if="!scope.row.isEdit"
            v-hasPermi="['sems:reportYlgd:remove']"
          >{{ $t('删除') }}
          </el-button>
          <el-button
            v-hasPermi="['sems:reportYlgd:edit']"
            type="text"
            size="mini"
            v-if="scope.row.isEdit"
            @click="handleSave(scope.row)"
          >{{ $t('保存') }}
          </el-button>
          <el-button
            type="text"
            size="small"
            v-if="scope.row.isEdit"
            @click="handleCancel(scope.row, scope.$index)"
          >{{ $t('取消') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 历史报告对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="open" width="1800px" append-to-body>
      <el-table :data="historyYlgdList" border>
        <el-table-column :label="$t('生成时间')" align="center" prop="buildDate" fixed="left" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.buildDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('装置名称')" align="center" prop="plantCode" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('单元')" align="center" prop="unit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道名称')" align="center" prop="devname" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道编号')" align="center" prop="devno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道级别')" align="center" prop="grade" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计压力')" align="center" prop="desPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计温度')" align="center" prop="desTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('操作压力')" align="center" prop="optPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('操作温度')" align="center" prop="optTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('安全状况等级')" align="center" prop="safeClass" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('下次定期检验日期')" align="center" prop="nextWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.nextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('年检报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true"/>
        <el-table-column label="1" align="center" prop="pj1" :render-header="renderHeader" :formatter="pj1Format"/>
        <el-table-column label="2" align="center" prop="pj2" :render-header="renderHeader" :formatter="pj2Format"/>
        <el-table-column label="3" align="center" prop="pj3" :render-header="renderHeader" :formatter="pj3Format"/>
        <el-table-column label="4" align="center" prop="pj4" :render-header="renderHeader" :formatter="pj4Format"/>
        <el-table-column label="5" align="center" prop="pj5" :render-header="renderHeader" :formatter="pj5Format"/>
        <el-table-column :label="$t('安全附件仪表及检查情况')" align="center">
          <el-table-column label="6" align="center" prop="pj6" :render-header="renderHeader" :formatter="pj6Format"/>
          <el-table-column label="7" align="center" prop="pj7" :render-header="renderHeader" :formatter="pj7Format"/>
          <el-table-column label="8" align="center" prop="pj8" :render-header="renderHeader" :formatter="pj8Format"/>
          <el-table-column label="9" align="center" prop="pj9" :render-header="renderHeader" :formatter="pj9Format"/>
          <el-table-column label="10" align="center" prop="pj10" :render-header="renderHeader" :formatter="pj10Format"/>
          <el-table-column label="11" align="center" prop="pj11" :render-header="renderHeader" :formatter="pj11Format"/>
        </el-table-column>
        <el-table-column label="12" align="center" prop="pj12" :render-header="renderHeader" :formatter="pj12Format"/>
        <el-table-column label="13" align="center" prop="pj13" :render-header="renderHeader" :formatter="pj13Format"/>
        <el-table-column label="14" align="center" prop="pj14" :render-header="renderHeader" :formatter="pj14Format"/>
        <el-table-column label="15" align="center" prop="pj15" :render-header="renderHeader" :formatter="pj15Format"/>
        <el-table-column label="16" align="center" prop="pj16" :render-header="renderHeader" :formatter="pj16Format"/>
        <el-table-column label="17" align="center" prop="pj17" :render-header="renderHeader" :formatter="pj17Format"/>
        <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('检查日期')" align="center" prop="checkDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('下次年度检查日期')" align="center" prop="nextCheckDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.nextCheckDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('问题及处理')" align="center" prop="problem" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('检查结论')" align="center" prop="con" :formatter="conFormat"/>
        <el-table-column :label="$t('操作')" align="center" fixed="right" width="120"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button v-hasPermi="['sems:historyYlgd:export']" type="text" size="small"
                       @click="downloadReport(scope.row)">{{ $t('下载报告') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <form ref="downloadForm" :action="downloadAction" target="FORMSUBMIT">
        <input name="id" v-model="downloadForm.id" hidden/>
      </form>
    </el-dialog>
    <year-approve v-if="approveVisible" ref="yearApprove" @refreshDataList="getList"></year-approve>
    <form ref="downloadForm2" :action="downloadAction2" target="FORMSUBMIT">
      <input name="year" v-model="downloadForm2.year" hidden/>
    </form>
    <!--  批量导出年检报告的历史报告  -->
    <el-dialog
      title="选择需要导出的历史报告年份"
      :visible.sync="dialogVisible"
      width="20%">
      <el-date-picker
        v-model="exportCheckYear"
        type="year"
        placeholder="选择需要导出的历史报告年份">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="exportDataForYear">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
      <form ref="downloadFileForm" :action="upload.downloadAction" target="FORMSUBMIT">
        <input name="type" :value="upload.type" hidden/>
      </form>
    </el-dialog>
  </div>
</template>

<script>
import {
  listReportYlgd,
  getReportYlgd,
  delReportYlgd,
  addReportYlgd,
  updateReportYlgd,
  exportReportYlgd,
  importTemplate,
  syncReportYlgd
} from "@/api/sems/reportYlgd";
import {listHistoryYlgd} from "@/api/sems/historyYlgd";
import {treeselect} from "@/api/system/dept";
import {getToken} from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import YearApprove from './yearapprove'
import {exportSpecGl} from "@/api/sems/specGl";

export default {
  name: "ReportYlgd",
  components: {Treeselect, YearApprove},
  data() {
    return {
      // 用户导入参数
      upload: {
        downloadAction: process.env.VUE_APP_BASE_API + '/common/template',
        type: "reportYlgd",
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/sems/reportYlgd/importForUpdate"
      },
      exportCheckYear: null,
      dialogVisible: false,
      // 遮罩层
      loading: true,
      approveVisible: false,
      // 选中数组
      ids: [],
      dataListSelections: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 压力管道年检报告表格数据
      reportYlgdList: [],
      // 压力管道报告历史表格数据
      historyYlgdList: [],
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      clientHeight: 300,
      // 是否显示弹出层
      open: false,
      // 1字典
      pj1Options: [],
      // 2字典
      pj2Options: [],
      // 3字典
      pj3Options: [],
      // 4字典
      pj4Options: [],
      // 5字典
      pj5Options: [],
      // 6字典
      pj6Options: [],
      // 7字典
      pj7Options: [],
      // 8字典
      pj8Options: [],
      // 9字典
      pj9Options: [],
      // 10字典
      pj10Options: [],
      // 11字典
      pj11Options: [],
      // 12字典
      pj12Options: [],
      // 13字典
      pj13Options: [],
      // 14字典
      pj14Options: [],
      // 15字典
      pj15Options: [],
      // 16字典
      pj16Options: [],
      // 17字典
      pj17Options: [],
      // 检查结论字典
      conOptions: [],
      approveStatusOptions: [],
      // 查询参数
      queryParams: {
        plantCode: null,
        unit: null,
        approveStatus: null,
        pageNum: 1,
        pageSize: 20,
      },
      // 查询历史报告参数
      queryHistoryParams: {
        pageNum: 1,
        pageSize: 20,
        reportId: null,
      },
      // 表单参数
      form: {},
      //下载参数
      downloadForm: {
        id: ''
      },
      downloadForm2: {
        year: '',
      },
      downloadAction: process.env.VUE_APP_BASE_API + '/sems/historyYlgd/exportPDF',
      downloadAction2: process.env.VUE_APP_BASE_API + '/sems/historyYlgd/exportPDFForYear',
      // 表单校验
      rules: {
        devId: [
          {required: true, message: this.$t('设备id') + this.$t('不能为空'), trigger: "blur"}
        ],
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    //设置表格高度对应屏幕高度
    this.$nextTick(() => {
      this.clientHeight = document.body.clientHeight - 250
    })
    this.getList();
    this.getTreeselect();
    this.getDicts("spec_approve_status").then(response => {
      this.approveStatusOptions = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj1Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj2Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj3Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj4Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj5Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj6Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj7Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj8Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj9Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj10Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj11Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj12Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj13Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj14Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj15Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj16Options = response.data;
    });
    this.getDicts("TEST_RESULT").then(response => {
      this.pj17Options = response.data;
    });
    this.getDicts("REPORT_CON").then(response => {
      this.conOptions = response.data;
    });
  },
  methods: {
    /** 查询压力管道年检报告列表 */
    getList() {
      this.loading = true;
      listReportYlgd(this.queryParams).then(response => {
        response.rows.forEach(element => {
          element["isEdit"] = false
        });
        this.reportYlgdList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.reportTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 申请状态字典翻译
    approveStatusFormat(row, column) {
      return this.selectDictLabel(this.approveStatusOptions, row.approveStatus);
    },
    // 1字典翻译
    pj1Format(row, column) {
      return this.selectDictLabel(this.pj1Options, row.pj1);
    },
    // 2字典翻译
    pj2Format(row, column) {
      return this.selectDictLabel(this.pj2Options, row.pj2);
    },
    // 3字典翻译
    pj3Format(row, column) {
      return this.selectDictLabel(this.pj3Options, row.pj3);
    },
    // 4字典翻译
    pj4Format(row, column) {
      return this.selectDictLabel(this.pj4Options, row.pj4);
    },
    // 5字典翻译
    pj5Format(row, column) {
      return this.selectDictLabel(this.pj5Options, row.pj5);
    },
    // 6字典翻译
    pj6Format(row, column) {
      return this.selectDictLabel(this.pj6Options, row.pj6);
    },
    // 7字典翻译
    pj7Format(row, column) {
      return this.selectDictLabel(this.pj7Options, row.pj7);
    },
    // 8字典翻译
    pj8Format(row, column) {
      return this.selectDictLabel(this.pj8Options, row.pj8);
    },
    // 9字典翻译
    pj9Format(row, column) {
      return this.selectDictLabel(this.pj9Options, row.pj9);
    },
    // 10字典翻译
    pj10Format(row, column) {
      return this.selectDictLabel(this.pj10Options, row.pj10);
    },
    // 11字典翻译
    pj11Format(row, column) {
      return this.selectDictLabel(this.pj11Options, row.pj11);
    },
    // 12字典翻译
    pj12Format(row, column) {
      return this.selectDictLabel(this.pj12Options, row.pj12);
    },
    // 13字典翻译
    pj13Format(row, column) {
      return this.selectDictLabel(this.pj13Options, row.pj13);
    },
    // 14字典翻译
    pj14Format(row, column) {
      return this.selectDictLabel(this.pj14Options, row.pj14);
    },
    // 15字典翻译
    pj15Format(row, column) {
      return this.selectDictLabel(this.pj15Options, row.pj15);
    },
    // 16字典翻译
    pj16Format(row, column) {
      return this.selectDictLabel(this.pj16Options, row.pj16);
    },
    // 17字典翻译
    pj17Format(row, column) {
      return this.selectDictLabel(this.pj17Options, row.pj17);
    },
    // 检查结论字典翻译
    conFormat(row, column) {
      return this.selectDictLabel(this.conOptions, row.con);
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        devId: null,
        medium: null,
        desPressure: null,
        desTemp: null,
        optPressure: null,
        optTemp: null,
        yearReportNo: null,
        pj1: null,
        pj2: null,
        pj3: null,
        pj4: null,
        pj5: null,
        pj6: null,
        pj7: null,
        pj8: null,
        pj9: null,
        pj10: null,
        pj11: null,
        pj12: null,
        pj13: null,
        pj14: null,
        pj15: null,
        pj16: null,
        pj17: null,
        remarks: null,
        checkDate: null,
        nextCheckDate: null,
        problem: null,
        con: null,
        approveStatus: 0,
        approveTime: null,
        deptId: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.dataListSelections = selection
    },
    /** 历史报告按钮操作 */
    handleHistory(row) {
      this.queryHistoryParams.reportId = row.id;
      listHistoryYlgd(this.queryHistoryParams).then(response => {
        this.historyYlgdList = response.rows;
        this.open = true;
        this.title = row.devno + this.$t('空格') + this.$t('历史报告');
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // 备份原始数据
      row['oldRow'] = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        row.isEdit = true;
      })
    },
    /** 保存按钮操作 */
    handleSave(row) {
      row.isEdit = false;
      this.loading = true;
      this.form = row;
      updateReportYlgd(this.form).then(response => {
        this.msgSuccess(this.$t('修改成功'));
        this.getList();
      });
    },
    /** 取消按钮操作 */
    handleCancel(row, index) {
      // 还原数据
      for (const i in row.oldRow) {
        row[i] = row.oldRow[i]
      }
      row.isEdit = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function () {
        return delReportYlgd(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess(this.$t('删除成功'));
      })
    },
    //提交报告
    approveHandle(row) {
      var rows = this.dataListSelections.map(item => {
        return item
      })
      for (let i = 0; i < rows.length; i++) {
        if (rows[i].approveStatus != 0) {
          this.$alert(this.$t('当前设备正在申请中，无法重复申请'), this.$t('提示'), {
            type: 'warning'
          })
          return
        }
      }
      this.approveVisible = true
      this.$nextTick(() => {
        this.$refs.yearApprove.init(rows)
      })
    },
    // 根据压力管道台账数据进行同步
    syncData() {
      syncReportYlgd().then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        });
        this.getList();
      })
    },
    //结论备注
    renderHeader(h, {column, $index}) {
      return [
        column.label,
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                if (column.label == 1) {
                  return `安全管理情况`
                } else if (column.label == 2) {
                  return `设计图纸文档、维修记录、质量证明等资料`
                } else if (column.label == 3) {
                  return `作业人员定期培训情况`
                } else if (column.label == 4) {
                  return `管道本体及支架`
                } else if (column.label == 5) {
                  return `管道运行情况`
                } else if (column.label == 6) {
                  return `安全阀`
                } else if (column.label == 7) {
                  return `爆破片装置`
                } else if (column.label == 8) {
                  return `阻火器装置`
                } else if (column.label == 9) {
                  return `紧急切断阀`
                } else if (column.label == 10) {
                  return `压力表`
                } else if (column.label == 11) {
                  return `测温仪表`
                } else if (column.label == 12) {
                  return `电阻值测量`
                } else if (column.label == 13) {
                  return `壁厚测定`
                } else if (column.label == 14) {
                  return ``
                } else if (column.label == 15) {
                  return ``
                } else if (column.label == 16) {
                  return ``
                } else if (column.label == 17) {
                  return ``
                } else {
                  return `   `
                }
              })(),
              placement: "top"
            }
          },
          [
            h("span", {
              class: {
                "el-icon-question": true,
                "report-headerTips": true
              }
            })
          ]
        )
      ]
    },
    //下载报告
    downloadReport(row) {
      this.downloadForm.id = row.id;
      this.$nextTick(() => {
        this.$refs['downloadForm'].submit()
      })
    },
    //批量下载某年份的历史报告
    exportDataForYear() {
      //将控件时间转为年,如果未选中年份，默认当前年
      if (this.exportCheckYear == null) {
        this.exportCheckYear = Date.now();
      }
      var date = new Date(this.exportCheckYear)
      this.downloadForm2.year = date.getFullYear();
      this.$nextTick(() => {
        this.$refs['downloadForm2'].submit()
      })
      //下载完成后关闭弹窗
      this.dialogVisible = false;
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.$refs['downloadFileForm'].submit()
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if (response.data.length > 0) {
        let failrow = ''
        for (let i = 0; i < response.data.length; i++) {
          failrow += response.data[i] + ','
        }
        this.$alert(this.$t('导入成功条数:') + response.msg + '<br>' + this.$t('失败行数:') + failrow, this.$t('导入结果'), {dangerouslyUseHTMLString: true});
      } else {
        this.$alert(this.$t('导入成功条数:') + response.msg, this.$t('导入结果'), {dangerouslyUseHTMLString: true});
      }
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备压力管道年检报告数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportReportYlgd(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
};
</script>