newcpms/ui/src/views/sems/month/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="checkMonth">
        <el-date-picker
          v-model="queryParams.checkMonth"
          type="month"
          placeholder="选择日期"
          value-format="yyyy-MM"
          @keyup.enter.native="handleQuery">
        </el-date-picker>
      </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="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['sems:month:add']"
        >{{ $t('新增') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['sems:month:edit']"
        >{{ $t('修改') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['sems:month:remove']"
        >{{ $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:month:edit']"-->
<!--        >{{ $t('导入') }}</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['sems:month:export']"-->
<!--        >{{ $t('导出') }}</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          size="mini"
          :disabled="multiple"
          @click="approveHandle('')"
        >{{ $t('申请报告') }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="monthList" @selection-change="handleSelectionChange" :height="clientHeight"
              border>
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column :label="$t('装置名称')" align="center" prop="plantCode" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('审核状态')" align="center" prop="approveStatus" :formatter="approveStatusFormat"
                       :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('检查年月')" align="center" prop="checkMonth" width="100">

      </el-table-column>
      <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true"/>
      <el-table-column header-align="center" align="center" :label="$t('压力容器')">
        <el-table-column :label="$t('容器单元')" align="center" prop="rqUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('容器本体')" align="center" prop="rqSelf" :formatter="rqSelfFormat"/>
        <el-table-column :label="$t('安全附件')" align="center" prop="rqSafe" :formatter="rqSafeFormat"/>
        <el-table-column :label="$t('安全保护装置')" align="center" prop="rqProtect" :formatter="rqProtectFormat"/>
        <el-table-column :label="$t('测量调控装置，紧急切断阀')" align="center" prop="rqControl" :formatter="rqControlFormat"/>
        <el-table-column :label="$t('附属仪器仪表')" align="center" prop="rqIns" :formatter="rqInsFormat"/>
        <el-table-column :label="$t('有无泄漏')" align="center" prop="rqOut" :formatter="rqOutFormat"/>
        <el-table-column :label="$t('其它异常情况描述')" align="center" prop="rqOther" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('容器备注')" align="center" prop="rqRemark" :show-overflow-tooltip="true"/>
      </el-table-column>
      <el-table-column header-align="center" align="center" :label="$t('压力管道')">
        <el-table-column :label="$t('管道区域/单元')" align="center" prop="gdUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道宏观')" align="center" prop="gdSelf" :formatter="gdSelfFormat"/>
        <el-table-column :label="$t('安全附件')" align="center" prop="gdSafe" :formatter="gdSafeFormat"/>
        <el-table-column :label="$t('测量调控装置')" align="center" prop="gdControl" :formatter="gdControlFormat"/>
        <el-table-column :label="$t('附属仪器仪表')" align="center" prop="gdIns" :formatter="gdInsFormat"/>
        <el-table-column :label="$t('有无泄漏')" align="center" prop="gdOut" :formatter="gdOutFormat"/>
        <el-table-column :label="$t('其它异常情况描述')" align="center" prop="gdOther" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道备注')" align="center" prop="gdRemark" :show-overflow-tooltip="true"/>
      </el-table-column>
      <el-table-column header-align="center" align="center" :label="$t('锅炉')">
        <el-table-column :label="$t('锅炉区域/单元')" align="center" prop="glUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('承压部件')" align="center" prop="glPressure" :formatter="glPressureFormat"/>
        <el-table-column :label="$t('安全附件')" align="center" prop="glSafe" :formatter="glSafeFormat"/>
        <el-table-column :label="$t('仪表及联锁保护装置')" align="center" prop="glIns" :formatter="glInsFormat"/>
        <el-table-column :label="$t('燃烧器')" align="center" prop="glBurn" :formatter="glBurnFormat"/>
        <el-table-column :label="$t('人员')+$t('证书')" align="center" prop="glCer" :formatter="glCerFormat"/>
        <el-table-column :label="$t('水质化验')" align="center" prop="glWater" :formatter="glWaterFormat"/>
        <el-table-column :label="$t('其它异常情况描述')" align="center" prop="glOther" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('锅炉')+$t('备注')" align="center" prop="glRemark" :show-overflow-tooltip="true"/>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="260"
                       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-hasPermi="['sems:month:edit']"
          >{{ $t('修改') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleRecord(scope.row)"
            v-hasPermi="['sems:month:edit']"
          >{{ $t('巡检记录') }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            v-if="scope.row.approveStatus == 8"
            @click="downloadHandle(scope.row)"
          >{{ $t('下载月度检查记录') }}</el-button>

<!--          <el-button type="text" size="mini" v-else @click="approveHandle(scope.row)">-->
<!--            申请生成报告</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['sems:month:remove']"-->
<!--          >{{ $t('删除') }}</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <form ref="downloadForm" :action="downloadAction" target="FORMSUBMIT">
      <input name="id" v-model="downloadForm.id" hidden/>
      <input name="approveId" v-model="downloadForm.approveId" hidden/>
    </form>

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

    <!-- 添加或修改月度检查对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item :label="$t('装置名称')" prop="plantCode">
          <el-select v-model="form.plantCode" :placeholder="$t('请选择')+ $t('装置')" filterable clearable @change="handleCommand" size="small">
            <el-option
              v-for="dict in plantOptions"
              :key="dict.name"
              :label="dict.name"
              :value="dict.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('检查年月')" prop="checkMonth">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.checkMonth"
                          type="month"
                          value-format="yyyy-MM"
                          :placeholder="$t('请选择') + $t('检查年月')">
          </el-date-picker>
        </el-form-item>

        <el-checkbox v-model="ylrq" @change="ylrqChange" style="padding-left: 70px">{{ $t('压力容器') }}</el-checkbox>
        <el-checkbox v-model="ylgd" @change="ylgdChange">{{ $t('压力管道') }}</el-checkbox>
        <el-checkbox v-model="gl" @change="glChange">{{ $t('锅炉') }}</el-checkbox>

        <el-collapse v-model="activeNames">
          <el-collapse-item :title="$t('压力容器')" name="1" :style="{display:showYlrq}">
            <el-form-item :label="$t('容器单元')" prop="rqUnit">
              <el-select v-model="form.rqUnit" :placeholder="$t('请选择')+ $t('容器单元')" filterable clearable size="small">
                <el-option
                  v-for="dict in unitOptions"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('容器本体')" prop="rqSelf">
              <el-select v-model="form.rqSelf" :placeholder="$t('请选择') + $t('容器本体')">
                <el-option
                  v-for="dict in rqSelfOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('安全附件')" prop="rqSafe">
              <el-select v-model="form.rqSafe" :placeholder="$t('请选择') + $t('安全附件')">
                <el-option
                  v-for="dict in rqSafeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('安全保护装置')" prop="rqProtect">
              <el-select v-model="form.rqProtect" :placeholder="$t('请选择') + $t('安全保护装置')">
                <el-option
                  v-for="dict in rqProtectOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('测量调控装置，紧急切断阀')" label-width="200px" prop="rqControl">
              <el-select v-model="form.rqControl" :placeholder="$t('请选择') + $t('测量调控装置，紧急切断阀')">
                <el-option
                  v-for="dict in rqControlOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('附属仪器仪表')" prop="rqIns">
              <el-select v-model="form.rqIns" :placeholder="$t('请选择') + $t('附属仪器仪表')">
                <el-option
                  v-for="dict in rqInsOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('有无泄漏')" prop="rqOut">
              <el-select v-model="form.rqOut" :placeholder="$t('请选择') + $t('有无泄漏')">
                <el-option
                  v-for="dict in rqOutOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('其它异常情况描述')" prop="rqOther">
              <el-input v-model="form.rqOther" :placeholder="$t('请输入') + $t('其它异常情况描述')"/>
            </el-form-item>
            <el-form-item :label="$t('容器备注')" prop="rqRemark">
              <el-input v-model="form.rqRemark" :placeholder="$t('请输入') + $t('容器备注')"/>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item :title="$t('压力管道')" name="2" :style="{display:showYlgd}">
            <el-form-item :label="$t('管道区域/单元')" prop="gdUnit">
              <el-select v-model="form.gdUnit" :placeholder="$t('请选择')+ $t('管道区域/单元')" filterable clearable size="small">
                <el-option
                  v-for="dict in unitOptions"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('管道宏观')" prop="gdSelf">
              <el-select v-model="form.gdSelf" :placeholder="$t('请选择') + $t('管道宏观')">
                <el-option
                  v-for="dict in gdSelfOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('安全附件')" prop="gdSafe">
              <el-select v-model="form.gdSafe" :placeholder="$t('请选择') + $t('安全附件')">
                <el-option
                  v-for="dict in gdSafeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('测量调控装置')" prop="gdControl">
              <el-select v-model="form.gdControl" :placeholder="$t('请选择') + $t('测量调控装置')">
                <el-option
                  v-for="dict in gdControlOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('附属仪器仪表')" prop="gdIns">
              <el-select v-model="form.gdIns" :placeholder="$t('请选择') + $t('附属仪器仪表')">
                <el-option
                  v-for="dict in gdInsOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('有无泄漏')" prop="gdOut">
              <el-select v-model="form.gdOut" :placeholder="$t('请选择') + $t('有无泄漏')">
                <el-option
                  v-for="dict in gdOutOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('其它异常情况描述')" prop="gdOther">
              <el-input v-model="form.gdOther" :placeholder="$t('请输入') + $t('其它异常情况描述')"/>
            </el-form-item>
            <el-form-item :label="$t('管道备注')" prop="gdRemark">
              <el-input v-model="form.gdRemark" :placeholder="$t('请输入') + $t('管道备注')"/>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item :title="$t('锅炉')" name="3" :style="{display:showGl}">
            <el-form-item :label="$t('锅炉区域/单元')" prop="glUnit">
              <el-select v-model="form.glUnit" :placeholder="$t('请选择')+ $t('锅炉区域/单元')" filterable clearable size="small">
                <el-option
                  v-for="dict in unitOptions"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('承压部件')" prop="glPressure">
              <el-select v-model="form.glPressure" :placeholder="$t('请选择') + $t('承压部件')">
                <el-option
                  v-for="dict in glPressureOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('安全附件')" prop="glSafe">
              <el-select v-model="form.glSafe" :placeholder="$t('请选择') + $t('安全附件')">
                <el-option
                  v-for="dict in glSafeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('仪表及联锁保护装置')" prop="glIns">
              <el-select v-model="form.glIns" :placeholder="$t('请选择') + $t('仪表及联锁保护装置')">
                <el-option
                  v-for="dict in glInsOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('燃烧器')" prop="glBurn">
              <el-select v-model="form.glBurn" :placeholder="$t('请选择') + $t('燃烧器')">
                <el-option
                  v-for="dict in glBurnOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('人员')+$t('证书')" prop="glCer">
              <el-select v-model="form.glCer" :placeholder="$t('请选择') + $t('人员')+ $t('证书')">
                <el-option
                  v-for="dict in glCerOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('水质化验')" prop="glWater">
              <el-select v-model="form.glWater" :placeholder="$t('请选择') + $t('水质化验')">
                <el-option
                  v-for="dict in glWaterOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('其它异常情况描述')" prop="glOther">
              <el-input v-model="form.glOther" :placeholder="$t('请输入') + $t('其它异常情况描述')"/>
            </el-form-item>
            <el-form-item :label="$t('锅炉')+$t('备注')" prop="glRemark">
              <el-input v-model="form.glRemark" :placeholder="$t('请输入') + $t('锅炉')+ $t('备注')"/>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
        <el-form-item :label="$t('备注')" prop="remarks">
          <el-input v-model="form.remarks" :placeholder="$t('请输入') + $t('备注')"/>
        </el-form-item>
        <el-form-item :label="$t('归属部门')" prop="deptId">
          <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
                      :placeholder="$t('请选择') + $t('归属部门')"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('确 定') }}</el-button>
        <el-button @click="cancel">{{ $t('取 消') }}</el-button>
      </div>
    </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">
          {{ $t('将文件拖到此处，或') }}
          <em>{{ $t('点击上传') }}</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/>
          {{ $t('是否更新已经存在的用户数据') }}
          <el-link type="info" style="font-size:12px" @click="importTemplate">{{ $t('下载模板') }}</el-link>
        </div>
        <div class="el-upload__tip" style="color:#ff0000" slot="tip">{{ $t('提示：仅允许导入“xls”或“xlsx”格式文件！') }}</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">{{ $t('确定') }}</el-button>
        <el-button @click="upload.open = false">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
    <!-- 巡检记录对话框 -->
    <el-dialog v-dialogDrag :title="recordTitle" :visible.sync="recordOpen" width="1000px" append-to-body>
      <el-form :inline="true" :model="recordQueryParams">
        <el-form-item>
          <el-button type="primary" @click="addRecord()">{{ $t('新增') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="recordLoading" :data="patrolList" border>
        <el-table-column :label="$t('设备位号')" align="center" prop="devno" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.devno" :placeholder="$t('请输入')+ $t('设备位号')"/>
            <span v-else>{{ scope.row.devno }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('日期')" align="center" prop="startDate" width="100">
          <template slot-scope="scope">
            <el-date-picker
              clearable size="small" style="width: 200px"
              v-if="scope.row.isEdit"
              v-model="scope.row.startDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('请选择')+ $t('日期')">
            </el-date-picker>
            <span v-else>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('关闭日期')" align="center" prop="endDate" width="100">
          <template slot-scope="scope">
            <el-date-picker
              clearable size="small" style="width: 200px"
              v-if="scope.row.isEdit"
              v-model="scope.row.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('请选择')+ $t('关闭日期')">
            </el-date-picker>
            <span v-else>{{ parseTime(scope.row.endDate, '{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="inspector" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.inspector" :placeholder="$t('请输入')+ $t('巡检人')"/>
            <span v-else>{{ scope.row.inspector }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('处理方法')" align="center" prop="approach" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.approach" :placeholder="$t('请输入')+ $t('处理方法')"/>
            <span v-else>{{ scope.row.approach }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('处理单位')" align="center" prop="dealUnit" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.dealUnit" :placeholder="$t('请输入')+ $t('处理单位')"/>
            <span v-else>{{ scope.row.dealUnit }}</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" fixed="right" width="120"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.isEdit" @click="saveRecord(scope.row)">{{
                $t('保存')
              }}
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.isEdit" @click="cancelRecord(scope.row, scope.$index)">
              {{ $t('取消') }}
            </el-button>
            <el-button v-if="!scope.row.isEdit" @click="editRecord(scope.row)" type="text" size="mini">{{
                $t('编辑')
              }}
            </el-button>
            <el-button v-if="!scope.row.isEdit" type="text" size="small" @click="deleteRecord(scope.row)">{{
                $t('删除')
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <month-approve v-if="approveVisible" ref="monthApprove" @refreshDataList="getList"></month-approve>
  </div>
</template>

<script>
import {listMonth, getMonth, delMonth, addMonth, updateMonth, exportMonth, importTemplate} from "@/api/sems/month";
import {listPatrol, getPatrol, delPatrol, addPatrol, updatePatrol} from "@/api/sems/patrol";
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 {listUnit, mylistPlant} from "@/api/system/plant";
import MonthApprove from "./monthapprove";

export default {
  name: "Month",
  components: {Treeselect, MonthApprove},
  data() {
    return {
      // 遮罩层
      loading: true,
      recordLoading: true,
      approveVisible: false,
      showYlrq: 'none',
      showYlgd: 'none',
      showGl: 'none',
      ylrq: false,
      ylgd: false,
      gl: false,
      // 选中数组
      ids: [],
      dataListSelections: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 月度检查表格数据
      monthList: [],
      // 月度检查巡检记录表格数据
      patrolList: [],
      // 弹出层标题
      title: "",
      recordTitle: "",
      // 部门树选项
      deptOptions: undefined,
      clientHeight: 300,
      // 是否显示弹出层
      open: false,
      recordOpen: false,
      // 容器本体字典
      rqSelfOptions: [],
      // 安全附件字典
      rqSafeOptions: [],
      // 安全保护装置字典
      rqProtectOptions: [],
      // 测量调控装置，紧急切断阀字典
      rqControlOptions: [],
      // 附属仪器仪表字典
      rqInsOptions: [],
      // 有无泄漏字典
      rqOutOptions: [],
      // 管道宏观字典
      gdSelfOptions: [],
      // 安全附件字典
      gdSafeOptions: [],
      // 测量调控装置字典
      gdControlOptions: [],
      // 附属仪器仪表字典
      gdInsOptions: [],
      // 有无泄漏字典
      gdOutOptions: [],
      // 承压部件字典
      glPressureOptions: [],
      // 安全附件字典
      glSafeOptions: [],
      // 仪表及联锁保护装置字典
      glInsOptions: [],
      // 燃烧器字典
      glBurnOptions: [],
      // 人员证书字典
      glCerOptions: [],
      // 水质化验字典
      glWaterOptions: [],
      plantOptions: [],
      unitOptions: [],
      plantIds: [],
      approveStatusOptions: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/sems/month/importData"
      },
      // 查询参数
      queryParams: {
        plantCode:null,
        checkMonth:null,
        approveStatus:null,
        pageNum: 1,
        pageSize: 20,
      },
      // 查询巡检记录参数
      recordQueryParams: {
        pageNum: 1,
        pageSize: 20,
        reportId: null
      },
      // 表单参数
      form: {},
      recordForm: {},
      //下载参数
      downloadForm: {
        id: ''
      },
      downloadAction: process.env.VUE_APP_BASE_API + '/sems/month/exportPDF',
      // 表单校验
      rules: {},
      //新增修改窗口内容是否展开
      activeNames: [],
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    //设置表格高度对应屏幕高度
    this.$nextTick(() => {
      this.clientHeight = document.body.clientHeight - 250
    })
    this.getList();
    this.getTreeselect();
    this.getDicts("ABNORMALITY").then(response => {
      this.rqSelfOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.rqSafeOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.rqProtectOptions = response.data;
    });
    this.getDicts("INTACT").then(response => {
      this.rqControlOptions = response.data;
    });
    this.getDicts("INTACT").then(response => {
      this.rqInsOptions = response.data;
    });
    this.getDicts("WITH_WITHOUT").then(response => {
      this.rqOutOptions = response.data;
    });
    this.getDicts("ABNORMALITY").then(response => {
      this.gdSelfOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.gdSafeOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.gdControlOptions = response.data;
    });
    this.getDicts("INTACT").then(response => {
      this.gdInsOptions = response.data;
    });
    this.getDicts("WITH_WITHOUT").then(response => {
      this.gdOutOptions = response.data;
    });
    this.getDicts("ABNORMALITY").then(response => {
      this.glPressureOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.glSafeOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.glInsOptions = response.data;
    });
    this.getDicts("INTACT").then(response => {
      this.glBurnOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.glCerOptions = response.data;
    });
    this.getDicts("CONFORM").then(response => {
      this.glWaterOptions = response.data;
    });
    this.getDicts("spec_approve_status").then(response => {
      this.approveStatusOptions = response.data;
    });
    let plantParams = {
      pType: 1
    }
    mylistPlant(plantParams).then(response => {
      this.plantOptions = response.data;
    });
  },
  methods: {
    /** 查询月度检查列表 */
    getList() {
      this.loading = true;
      listMonth(this.queryParams).then(response => {
        this.monthList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleCommand(plantIds) {
      this.plantIds = []
      this.plantIds.push(plantIds)
      this.getUnitList()
    },
    //获取账号对应单元
    getUnitList() {
      let unitParams = {
        plantIds: this.plantIds
      }
      listUnit(unitParams).then(response => {
        this.unitOptions = response;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 容器本体字典翻译
    rqSelfFormat(row, column) {
      return this.selectDictLabel(this.rqSelfOptions, row.rqSelf);
    },
    // 安全附件字典翻译
    rqSafeFormat(row, column) {
      return this.selectDictLabel(this.rqSafeOptions, row.rqSafe);
    },
    // 安全保护装置字典翻译
    rqProtectFormat(row, column) {
      return this.selectDictLabel(this.rqProtectOptions, row.rqProtect);
    },
    // 测量调控装置，紧急切断阀字典翻译
    rqControlFormat(row, column) {
      return this.selectDictLabel(this.rqControlOptions, row.rqControl);
    },
    // 附属仪器仪表字典翻译
    rqInsFormat(row, column) {
      return this.selectDictLabel(this.rqInsOptions, row.rqIns);
    },
    // 有无泄漏字典翻译
    rqOutFormat(row, column) {
      return this.selectDictLabel(this.rqOutOptions, row.rqOut);
    },
    // 管道宏观字典翻译
    gdSelfFormat(row, column) {
      return this.selectDictLabel(this.gdSelfOptions, row.gdSelf);
    },
    // 安全附件字典翻译
    gdSafeFormat(row, column) {
      return this.selectDictLabel(this.gdSafeOptions, row.gdSafe);
    },
    // 测量调控装置字典翻译
    gdControlFormat(row, column) {
      return this.selectDictLabel(this.gdControlOptions, row.gdControl);
    },
    // 附属仪器仪表字典翻译
    gdInsFormat(row, column) {
      return this.selectDictLabel(this.gdInsOptions, row.gdIns);
    },
    // 有无泄漏字典翻译
    gdOutFormat(row, column) {
      return this.selectDictLabel(this.gdOutOptions, row.gdOut);
    },
    // 承压部件字典翻译
    glPressureFormat(row, column) {
      return this.selectDictLabel(this.glPressureOptions, row.glPressure);
    },
    // 安全附件字典翻译
    glSafeFormat(row, column) {
      return this.selectDictLabel(this.glSafeOptions, row.glSafe);
    },
    // 仪表及联锁保护装置字典翻译
    glInsFormat(row, column) {
      return this.selectDictLabel(this.glInsOptions, row.glIns);
    },
    // 燃烧器字典翻译
    glBurnFormat(row, column) {
      return this.selectDictLabel(this.glBurnOptions, row.glBurn);
    },
    // 人员证书字典翻译
    glCerFormat(row, column) {
      return this.selectDictLabel(this.glCerOptions, row.glCer);
    },
    // 水质化验字典翻译
    glWaterFormat(row, column) {
      return this.selectDictLabel(this.glWaterOptions, row.glWater);
    },
    // 申请状态字典翻译
    approveStatusFormat(row, column) {
      return this.selectDictLabel(this.approveStatusOptions, row.approveStatus);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        plantCode: null,
        approveStatus: 0,
        checkMonth: null,
        rqUnit: null,
        rqSelf: null,
        rqSafe: null,
        rqProtect: null,
        rqControl: null,
        rqIns: null,
        rqOut: null,
        rqOther: null,
        gdUnit: null,
        gdSelf: null,
        gdSafe: null,
        gdControl: null,
        gdIns: null,
        gdOut: null,
        gdOther: null,
        glPressure: null,
        glSafe: null,
        glIns: null,
        glBurn: null,
        glCer: null,
        glWater: null,
        glOther: null,
        approveTime: null,
        buildDate: null,
        approveId: null,
        rqRemark: null,
        gdRemark: null,
        glRemark: null,
        glUnit: null,
        remarks: null,
        deptId: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null
      };
      this.resetForm("form");
    },
    // 巡检记录表单重置
    recordReset() {
      this.recordForm = {
        id: null,
        reportId: null,
        devno: null,
        startDate: null,
        endDate: null,
        problem: null,
        inspector: null,
        approach: null,
        dealUnit: null,
        remarks: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null
      };
      this.resetForm("recordForm");
    },
    /** 搜索按钮操作 */
    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
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.activeNames = [];
      this.open = true;
      this.title = this.$t('添加') + this.$t('月度检查');
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      var rows = row ? [row] : 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.resetCheckBox();
      this.activeNames = [];
      const id = row.id || this.ids
      getMonth(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = this.$t('修改') + this.$t('月度检查');
        this.judgeShowCheckBox();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMonth(this.form).then(response => {
              this.msgSuccess(this.$t('修改成功'));
              this.open = false;
              this.getList();
            });
          } else {
            addMonth(this.form).then(response => {
              this.msgSuccess(this.$t('新增成功'));
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      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.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function () {
        return delMonth(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess(this.$t('删除成功'));
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有月度检查数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function () {
        return exportMonth(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = this.$t('用户导入');
      this.upload.open = true;
    },
    /** 巡检记录按钮操作 */
    handleRecord(row) {
      this.recordReset();
      this.recordLoading = true;
      this.recordQueryParams.reportId = row.id
      listPatrol(this.recordQueryParams).then(response => {
        response.rows.forEach(element => {
          element["isEdit"] = false
        });
        response.rows.forEach(element => {
          element["isAdd"] = false
        });
        this.patrolList = response.rows;
        this.recordLoading = false;
        this.recordOpen = true;
        this.recordTitle = this.$t('巡检记录');
      });
    },
    /** 新增巡检记录按钮操作 */
    addRecord() {
      this.patrolList.push({
        reportId: this.recordQueryParams.reportId,
        devno: '',
        startDate: '',
        endDate: '',
        problem: '',
        inspector: '',
        approach: '',
        dealUnit: '',
        remarks: '',
        isEdit: true,
        isAdd: true
      });
    },
    /** 保存巡检记录按钮操作 */
    saveRecord(row) {
      row.isEdit = false;
      var that = this;
      that.recordLoading = true;
      this.recordForm = row;
      this.recordForm.reportId = this.recordQueryParams.reportId;
      if (row.isAdd == true) {
        addPatrol(this.recordForm).then(response => {
          this.msgSuccess(this.$t('新增成功'));
          this.recordOpen = false;
          this.getList();
        });
      } else {
        updatePatrol(this.recordForm).then(response => {
          this.msgSuccess(this.$t('修改成功'));
          this.recordOpen = false;
          this.getList();
        });
      }
    },
    /** 取消巡检记录按钮操作 */
    cancelRecord(row, index) {
      // 如果是新增的数据
      if (row.isAdd) {
        this.patrolList.splice(index, 1)
      } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
          row[i] = row.oldRow[i]
        }
        row.isEdit = false
      }
    },
    /** 修改巡检记录按钮操作 */
    editRecord(row) {
      // 备份原始数据
      row['oldRow'] = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        row.isEdit = true;
      })
    },
    /** 删除巡检记录按钮操作 */
    deleteRecord(row) {
      const ids = row.id || this.ids;
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function () {
        return delPatrol(ids);
      }).then(() => {
        this.recordOpen = false;
        this.getList();
        this.msgSuccess(this.$t('删除成功'));
      })
    },
    //下载月度检查记录
    downloadHandle(row) {
      this.downloadForm.id = row.id;
      this.downloadForm.approveId = row.approveId;
      this.$nextTick(() => {
        this.$refs['downloadForm'].submit()
      })
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, this.$t('导入结果'), {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //提交报告
    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.monthApprove.init(rows)
      })
    },

    //判断修改时多选框是否选中
    judgeShowCheckBox() {
      if (this.form.rqUnit != null ||
        this.form.rqSelf != null ||
        this.form.rqSafe != null ||
        this.form.rqProtect != null ||
        this.form.rqControl != null ||
        this.form.rqIns != null ||
        this.form.rqOut != null ||
        this.form.rqOther != null ||
        this.form.rqRemark != null) {
        this.showYlrq = 'block';
        this.ylrq = true;
      }
      if (this.form.gdUnit != null ||
        this.form.gdSelf != null ||
        this.form.gdSafe != null ||
        this.form.gdControl != null ||
        this.form.gdIns != null ||
        this.form.gdOut != null ||
        this.form.gdOther != null ||
        this.form.gdRemark != null) {
        this.showYlgd = 'block';
        this.ylgd = true;
      }
      if (this.form.glPressure != null ||
        this.form.glSafe != null ||
        this.form.glIns != null ||
        this.form.glBurn != null ||
        this.form.glCer != null ||
        this.form.glWater != null ||
        this.form.glOther != null ||
        this.form.glRemark != null ||
        this.form.glUnit != null) {
        this.showGl = 'block';
        this.gl = true;
      }
    },
    resetCheckBox() {
      this.showGl = 'none';
      this.gl = false;
      this.showYlgd = 'none';
      this.ylgd = false;
      this.showYlrq = 'none';
      this.ylrq = false;
    },
    ylrqChange() {
      if (this.ylrq == true) {
        //显示折叠面板
        this.showYlrq = 'block';
      } else {
        this.showYlrq = 'none';
        //关闭时清除折叠面板数据
        this.resetYlrq();
      }
    },
    ylgdChange() {
      if (this.ylgd == true) {
        this.showYlgd = 'block';
      } else {
        this.showYlgd = 'none';
        this.resetYlgd();
      }
    },
    glChange() {
      if (this.gl == true) {
        this.showGl = 'block';
      } else {
        this.showGl = 'none';
        this.resetGl();
      }
    },
    //重置压力容器数据
    resetYlrq() {
      this.form.rqUnit = null;
      this.form.rqSelf = null;
      this.form.rqSafe = null;
      this.form.rqProtect = null;
      this.form.rqControl = null;
      this.form.rqIns = null;
      this.form.rqOut = null;
      this.form.rqOther = null;
      this.form.rqRemark = null;
    },
    resetYlgd() {
      this.form.gdUnit = null;
      this.form.gdSelf = null;
      this.form.gdSafe = null;
      this.form.gdControl = null;
      this.form.gdIns = null;
      this.form.gdOut = null;
      this.form.gdOther = null;
      this.form.gdRemark = null;
    },
    resetGl() {
      this.form.glPressure = null;
      this.form.glSafe = null;
      this.form.glIns = null;
      this.form.glBurn = null;
      this.form.glCer = null;
      this.form.glWater = null;
      this.form.glOther = null;
      this.form.glRemark = null;
      this.form.glUnit = null;
    }
  }
};
</script>

<style>
.el-collapse-item__header {
  font-weight: bolder;
}
</style>