<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="98px"
    >
      <el-form-item label="维修单号" prop="workCode">
        <el-input
          v-model="queryParams.workCode"
          placeholder="请输入维修单号"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报修单号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入报修单号"
          style="width: 200px"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备编码" prop="equipmentCode">
        <el-input
          v-model="queryParams.equipmentCode"
          placeholder="请输入设备编码"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否停机维修" prop="workDownMachine">
        <el-select
          v-model="queryParams.workDownMachine"
          placeholder="请选择是否停机"
          @change="$forceUpdate()"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in workDownMachineOption"
            :key="item.workDownMachine"
            :label="item.label"
            :value="item.workDownMachine"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="维修人员" prop="workPerson">
        <el-input
          v-model="queryParams.workPerson"
          placeholder="请输入维修人员"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="维修组" prop="workTeam">
        <el-select
          v-model="queryParams.workTeam"
          placeholder="请选择维修组"
          @change="$forceUpdate()"
          clearable
          filterable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in teamOption"
            :key="item.teamCode"
            :label="item.teamName"
            :value="item.teamCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="维修状态" prop="workStatus">
        <el-select
          v-model="queryParams.workStatus"
          placeholder="请选择维修状态"
          @change="$forceUpdate()"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.device_repair_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否委外" prop="workOutsource">
        <el-select
          v-model="queryParams.workOutsource"
          placeholder="请选择是否委外"
          @change="$forceUpdate()"
          clearable
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in workOutsourceOption"
            :key="item.workOutsource"
            :label="item.label"
            :value="item.workOutsource"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="委外工单编码" prop="outWorkCode">
        <el-input
          v-model="queryParams.outWorkCode"
          placeholder="请输入委外工单编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划维修时间" prop="workPlanTime">
        <el-date-picker
          clearable
          v-model="queryParams.workPlanTimeArray"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划停机时间" prop="workPlanDownTime">
        <el-date-picker
          clearable
          v-model="queryParams.workPlanDownTimeArray"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['device: repairOrder:add']"
          >快速工单</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['device: repairOrder:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['device: repairOrder:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['device: repairOrder:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          :disabled="single"
          plain
          icon="el-icon-document-add"
          size="mini"
          @click="handleApply"
          v-hasPermi="['device: repairOrder:apply']"
          >委外申请</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          :disabled="single"
          @click="handleWrite"
          v-hasPermi="['device: repairOrder:write']"
          >填写维修记录</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="repairOrderList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- 序号 -->
      <el-table-column
        type="index"
        width="90"
        align="center"
        :index="indexMethod"
        label="序号"
        fixed
      />
      <el-table-column
        label="维修单号"
        align="center"
        prop="workCode"
        width="200"
      />
      <el-table-column
        label="报修单号"
        align="center"
        prop="orderCode"
        width="200"
      />
      <el-table-column label="设备编码" align="center" prop="equipmentCode" />
      <el-table-column
        label="故障描述"
        align="center"
        prop="workFaultDesc"
        width="300"
      />
      <el-table-column
        label="计划维修时间"
        align="center"
        prop="workPlanTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workPlanTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否停机维修"
        align="center"
        prop="workDownMachine"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.workDownMachine == "1" ? "停机" : "不停机" }}
        </template>
      </el-table-column>
      <el-table-column
        label="计划停机时间"
        align="center"
        prop="workPlanDownTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workPlanDownTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="维修人员" align="center" prop="workPerson" />
      <el-table-column
        label="维修组编码"
        align="center"
        prop="workTeam"
        width="100"
      />
      <el-table-column
        label="维修组名称"
        align="center"
        prop="teamName"
        width="100"
      />
      <el-table-column
        label="维修组人员"
        align="center"
        prop="teamPerson"
        width="300"
      />
      <el-table-column label="是否委外" align="center" prop="workOutsource">
        <template slot-scope="scope">
          {{ scope.row.workOutsource == "1" ? "转委外" : "不委外" }}
        </template>
      </el-table-column>
      <el-table-column
        label="委外工单编码"
        align="center"
        prop="outWorkCode"
        width="180"
      />
      <el-table-column
        label="原因分析"
        align="center"
        prop="workReason"
        width="300"
      />
      <el-table-column
        label="维修开始时间"
        align="center"
        prop="workStartTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workStartTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="维修结束时间"
        align="center"
        prop="workEndTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workEndTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="维修用时"
        align="center"
        prop="workCostTime"
        width="200"
      >
      </el-table-column>
      <el-table-column label="维修费用" align="center" prop="workCost" />
      <el-table-column
        label="维修状态"
        align="center"
        prop="workStatus"
        width="150"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.device_repair_status"
            :value="scope.row.workStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="工厂编码" align="center" prop="factoryCode" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['device: repairOrder:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['device: repairOrder:remove']"
            >删除</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
      :title="title"
      :visible.sync="openAdd"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="设备编码" prop="equipmentCode">
          <el-input
            v-model="form.equipmentCode"
            placeholder="请输入设备编码"
            style="width: 280px"
          >
            <el-button
              slot="append"
              @click="handleSelectEquipment"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment">
          </ItemSelect>
        </el-form-item>
        <el-form-item label="计划维修时间" prop="workPlanTime">
          <el-date-picker
            clearable
            v-model="form.workPlanTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 280px"
            placeholder="请选择计划维修时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否停机维修" prop="workDownMachine">
          <el-radio-group v-model="form.workDownMachine">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="计划停机时间"
          prop="workPlanDownTime"
          v-if="form.workDownMachine == '1'"
        >
          <el-date-picker
            clearable
            v-model="form.workPlanDownTime"
            type="datetime"
            style="width: 280px"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择计划停机时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维修人" prop="workPerson">
          <el-input
            v-model="form.workPerson"
            placeholder="请选择维修人"
            style="width: 280px"
          >
            <el-button
              slot="append"
              @click="handleSelectPerson"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <ItemSelectPerson
            ref="itemSelectPerson"
            @onSelected="onItemSelectedPerson"
          >
          </ItemSelectPerson>
        </el-form-item>
        <el-form-item label="维修组" prop="workTeam">
          <el-select
            v-model="form.workTeam"
            placeholder="请选择维修组"
            @change="$forceUpdate()"
            clearable
            filterable
            style="width: 280px"
            @keyup.enter.native="handleQuery"
          >
            <el-option
              v-for="item in teamOption"
              :key="item.teamCode"
              :label="item.teamName"
              :value="item.teamCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障描述" prop="workFaultDesc">
          <el-input
            v-model="form.workFaultDesc"
            placeholder="请输入故障描述"
            style="width: 280px"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelAddForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改维修工单对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openUpdate"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="报修单号" prop="orderCode">
          <el-input
            v-model="form.orderCode"
            placeholder="请输入报修单号"
            style="width: 250px"
            disabled
          />
        </el-form-item>
        <el-form-item label="设备编码" prop="equipmentCode">
          <el-input
            v-model="form.equipmentCode"
            placeholder="请输入设备编码"
            style="width: 250px"
            disabled
          />
        </el-form-item>
        <el-form-item label="计划维修时间" prop="workPlanTime">
          <el-date-picker
            clearable
            v-model="form.workPlanTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 250px"
            placeholder="请选择计划维修时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否停机维修" prop="workDownMachine">
          <el-radio-group v-model="form.workDownMachine">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="计划停机时间"
          prop="workPlanDownTime"
          v-if="form.workDownMachine == '1'"
        >
          <el-date-picker
            clearable
            v-model="form.workPlanDownTime"
            type="datetime"
            style="width: 250px"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择计划停机时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维修人" prop="workPerson">
          <el-input
            v-model="form.workPerson"
            placeholder="请选择维修人"
            style="width: 250px"
          >
            <el-button
              slot="append"
              @click="handleSelectPerson"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <ItemSelectPerson
            ref="itemSelectPerson"
            @onSelected="onItemSelectedPerson"
          >
          </ItemSelectPerson>
        </el-form-item>
        <el-form-item label="维修组" prop="workTeam">
          <el-select
            v-model="form.workTeam"
            placeholder="请选择维修组"
            @change="$forceUpdate()"
            clearable
            filterable
            style="width: 250px"
            @keyup.enter.native="handleQuery"
          >
            <el-option
              v-for="item in teamOption"
              :key="item.teamCode"
              :label="item.teamName"
              :value="item.teamCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelUpdateForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 委外申请 -->
    <el-dialog
      :title="title"
      :visible.sync="openApply"
      width="1000px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="8">
            <el-form-item label="设备编码" prop="equipmentCode">
              <el-input
                v-model="form.equipmentCode"
                style="width: 195px"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input
                v-model="form.equipmentName"
                style="width: 195px"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备类型" prop="equipmentTypeName">
              <el-input
                v-model="form.equipmentTypeName"
                style="width: 195px"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="8">
            <el-form-item label="规格型号" prop="equipmentSpec">
              <el-input
                v-model="form.equipmentSpec"
                style="width: 195px"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在部门" prop="department">
              <el-input v-model="form.department" style="width: 195px" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在位置" prop="equipmentLocation">
              <el-input
                v-model="form.equipmentLocation"
                style="width: 195px"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="workOutsourcingUnit" label="委外单位">
              <el-input
                v-model="form.workOutsourcingUnit"
                placeholder="请填写委外单位"
                style="width: 195px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="outSourcePerson" label="委外维修人员">
              <el-input
                v-model="form.outSourcePerson"
                placeholder="请填写委外维修人员"
                style="width: 195px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="workConnection" label="联系方式">
              <el-input
                v-model="form.workConnection"
                placeholder="请填写委外联系方式"
                style="width: 195px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="outSourceReason" label="委外原因">
              <el-input
                v-model="form.outSourceReason"
                placeholder="请输入委外原因"
                type="textarea"
                style="width: 840px"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApplyForm">确 定</el-button>
        <el-button @click="cancelApplyForm">返 回</el-button>
      </div>
    </el-dialog>

    <!-- 委外申请查看页面 -->
    <el-dialog
      :title="title"
      :visible.sync="openApplyView"
      width="1000px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="设备编号">{{
            form.equipmentCode
          }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{
            form.equipmentName
          }}</el-descriptions-item>
          <el-descriptions-item label="设备类型">{{
            form.equipmentTypeName
          }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{
            form.equipmentLocation
          }}</el-descriptions-item>
          <el-descriptions-item label="工作中心编码">{{
            form.workshopCode
          }}</el-descriptions-item>
          <el-descriptions-item label="工作中心名称">{{
            form.workshopName
          }}</el-descriptions-item>

          <el-descriptions-item label="委外单位">{{
            form.workOutsourcingUnit
          }}</el-descriptions-item>
          <el-descriptions-item label="委外维修人员">{{
            form.outSourcePerson
          }}</el-descriptions-item>
          <el-descriptions-item label="委外联系方式">{{
            form.workConnection
          }}</el-descriptions-item>
          <el-descriptions-item label="委外原因">{{
            form.outSourceReason
          }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelApplyViewForm">返 回</el-button>
      </div>
    </el-dialog>

    <!-- 填写维修记录对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openWrite"
      width="1000px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-tabs type="border-card">
          <el-tab-pane label="维修基本信息">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="维修工单号">{{
                form.workCode
              }}</el-descriptions-item>
              <el-descriptions-item label="报修单号">{{
                form.workCode
              }}</el-descriptions-item>
              <el-descriptions-item label="设备编号">{{
                form.equipmentCode
              }}</el-descriptions-item>
              <el-descriptions-item label="设备名称">{{
                form.equipmentName
              }}</el-descriptions-item>
              <el-descriptions-item label="设备类型">{{
                form.equipmentTypeName
              }}</el-descriptions-item>
              <el-descriptions-item label="设备位置">{{
                form.equipmentLocation
              }}</el-descriptions-item>
              <el-descriptions-item label="工作中心编码">{{
                form.workshopCode
              }}</el-descriptions-item>
              <el-descriptions-item label="工作中心名称">{{
                form.workshopName
              }}</el-descriptions-item>
              <el-descriptions-item label="报修来源">{{
                form.orderSource
              }}</el-descriptions-item>
              <el-descriptions-item label="报修时间">{{
                form.orderTime
              }}</el-descriptions-item>
              <el-descriptions-item label="报修人名字">{{
                form.orderRepairmanName
              }}</el-descriptions-item>
              <el-descriptions-item label="联系方式">{{
                form.orderConnection
              }}</el-descriptions-item>
              <el-descriptions-item label="是否立即处理">{{
                form.workHandle ? "否" : "是"
              }}</el-descriptions-item>
              <el-descriptions-item label="计划维修时间">{{
                form.workPlanTime
              }}</el-descriptions-item>
              <el-descriptions-item label="是否停机维修">{{
                form.workDownMachine ? "否" : "是"
              }}</el-descriptions-item>
              <el-descriptions-item label="计划停机时间">{{
                form.workPlanDownTime
              }}</el-descriptions-item>
              <el-descriptions-item label="是否委外">{{
                form.workOutsource ? "否" : "是"
              }}</el-descriptions-item>
              <el-descriptions-item label="维修班组">{{
                form.workTeam
              }}</el-descriptions-item>
              <el-descriptions-item label="维修班组人员">{{
                form.workTeamPerson
              }}</el-descriptions-item>
              <el-descriptions-item label="故障描述">{{
                form.orderDesc
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="维修前故障图片">
                <el-image
                  v-for="(item, index) in urlBeforeLists"
                  :key="index"
                  :src="item"
                ></el-image
              ></el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="维修后故障图片">
                <el-image
                  v-for="(item, index) in urlAfterLists"
                  :key="index"
                  :src="item"
                ></el-image
              ></el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="检查项信息">
            <el-table :data="detailList" border style="width: 100%">
              <el-table-column prop="itemName" label="检查项名称" width="150">
              </el-table-column>
              <el-table-column prop="itemMethod" label="检查项方法" width="150">
              </el-table-column>
              <el-table-column prop="standardName" label="标准名称" width="150">
              </el-table-column>
              <el-table-column
                prop="detailReach"
                label="维修前是否达标"
                width="67"
              >
                <template slot-scope="scope">
                  {{ scope.row.detailReach == "1" ? "达标" : "不达标" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="repairReach"
                label="维修后是否达标"
                width="110"
              >
                <template scope="scope">
                  <el-radio-group v-model="scope.row.repairReach">
                    <el-radio label="1">达标</el-radio>
                    <el-radio label="0">不达标</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="actualValue"
                label="维修前实际值"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="repairValue"
                label="维修后实际值"
                width="100"
              >
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.repairValue"
                    v-if="scope.row.standardType == 'quantify'"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="detailUpLimit" label="上限" width="50">
              </el-table-column>
              <el-table-column prop="detailDownLimit" label="下限" width="50">
              </el-table-column>
              <el-table-column prop="detailUnit" label="单位" width="50">
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="填写维修记录">
            <el-row :gutter="10" class="mb8">
              <el-col :span="8">
                <el-form-item label="维修人" prop="workPerson">
                  <el-input
                    v-model="form.workPerson"
                    placeholder="请选择维修人"
                    style="width: 195px"
                  >
                    <el-button
                      slot="append"
                      @click="handleSelectPerson"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                  <ItemSelectPerson
                    ref="itemSelectPerson"
                    @onSelected="onItemSelectedPerson"
                  >
                  </ItemSelectPerson>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="维修状态" prop="workStatus">
                  <el-select
                    v-model="form.workStatus"
                    placeholder="请选择维修状态"
                    style="width: 195px"
                  >
                    <el-option
                      v-for="dict in dict.type.device_repair_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="维修费用" prop="workCost">
                  <el-input-number
                    :min="0"
                    :step="1"
                    v-model="form.workCost"
                    style="width: 175px"
                  />
                  <span> 元</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8">
              <el-col :span="8">
                <el-form-item label="开始时间" prop="workStartTime">
                  <el-date-picker
                    clearable
                    v-model="form.workStartTime"
                    type="datetime"
                    style="width: 195px"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="listening"
                    placeholder="请选择开始维修时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结束时间" prop="workEndTime">
                  <el-date-picker
                    clearable
                    v-model="form.workEndTime"
                    type="datetime"
                    style="width: 195px"
                    @change="listeningTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择结束维修时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="维修用时" prop="workCostTime">
                  <el-input v-model="form.workCostTime" style="width: 195px">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8">
              <el-col :span="8">
                <el-form-item label="是否停机" prop="workDownMachine">
                  <el-radio-group v-model="form.workDownMachine">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8">
              <el-col :span="24">
                <el-form-item label="原因分析" prop="workReason">
                  <el-input
                    v-model="form.workReason"
                    placeholder="请输入故障原因分析"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    style="width: 840px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="故障图片" prop="afterRepairFile">
                  <FileUpload v-model="form.afterRepairFile" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="填写备件申领记录">
            <!-- 使用备件领用记录 -->
            <ItemSelectSpareParts
              :optType="optType"
              :workCode="form.workCode"
              :equipmentCode="form.equipmentCode"
              v-if="form.workCode != null"
            ></ItemSelectSpareParts>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitWriteForm">提 交</el-button>
        <el-button @click="cancelWriteForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

	<script>
import {
  listRepairOrder,
  getRepairOrder,
  delRepairOrder,
  addRepairOrder,
  updateRepairOrder,
  applyOutsource,
  writeRepairOrder,
} from "@/api/device/repairOrder";
import { getMaintenanceTeamList } from "@/api/device/equTeam";
import ItemSelect from "./selectSingleEquipment.vue";
import ItemSelectPerson from "./selectSinglePerson.vue";
import { Message } from "element-ui";
import ItemSelectSpareParts from "./selectSpareParts.vue";
import moment from "moment";

export default {
  name: " RepairOrder",
  components: { ItemSelect, ItemSelectPerson, ItemSelectSpareParts },
  dicts: ["device_repair_status"],
  data() {
    return {
      //维修前照片
      urlBeforeLists: [],
      //维修后照片
      urlAfterLists: [],
      //选择设备维修班组
      teamOption: [],
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 维修工单表格数据
      repairOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示快速工单弹出层
      openAdd: false,
      // 是否显示修改工单弹出层
      openUpdate: false,
      // 是否显示委外申请弹出层
      openApply: false,
      // 是否显示委外申请查询弹出层
      openApplyView: false,
      // 是否显示填写维修记录弹出层
      openWrite: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        orderCode: null,
        workCode: null,
        workHandle: null,
        workPlanTime: null,
        workPlanDownTime: null,
        orderRelevance: null,
        workPerson: null,
        workTeam: null,
        workOutsource: null,
        workDownMachine: null,
        equipmentCode: null,
        workReason: null,
        workFaultDesc: null,
        workCostTime: null,
        workCost: null,
        outWorkId: null,
        outWorkCode: null,
        attr1: null,
        attr2: null,
        attr3: null,
        factoryCode: null,
        //计划维修时间组、计划停机时间组
        workPlanTimeArray: [],
        workPlanDownTimeArray: [],
      },
      //选择是否委外
      workOutsourceOption: [
        {
          workOutsource: "1",
          label: "转委外",
        },
        {
          workOutsource: "0",
          label: "不委外",
        },
      ],
      //选择是否停机
      workDownMachineOption: [
        {
          workDownMachine: "1",
          label: "停机",
        },
        {
          workDownMachine: "0",
          label: "不停机",
        },
      ],
      // 日期范围选择快捷
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        //委外申请校验
        workOutsourcingUnit: [
          { required: true, message: "委外单位不能为空", trigger: "blur" },
        ],
        outSourceReason: [
          { required: true, message: "委外原因不能为空", trigger: "blur" },
        ],
        workConnection: [
          { required: true, message: "委外联系方式不能为空", trigger: "blur" },
        ],
        outSourcePerson: [
          { required: true, message: "委外维修人员不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getTeamList();
  },
  methods: {
    //计算时间 结束维修时间-开始维修时间
    listeningTime() {
      if (this.form.workEndTime != null && this.form.workStartTime != null) {
        var time1 = moment(this.form.workStartTime);
        var time2 = moment(this.form.workEndTime);
        let duration = moment.duration(time2.diff(time1));
        let { _data } = duration;
        console.log("打印维修时间", _data);
        //拼接
        this.form.workCostTime =
          _data.years +
          "年" +
          _data.months +
          "月" +
          _data.days +
          "日" +
          _data.hours +
          "小时" +
          _data.minutes +
          "分" +
          _data.seconds +
          "秒";
      }
    },
    //计算时间 结束停机时间-开始停机时间
    // listeningDownTime() {
    //   if (this.form.actualDownEndTime != null && this.form.actualDownStartTime != null) {
    //     var time1 = moment(this.form.actualDownStartTime);
    //     var time2 = moment(this.form.actualDownEndTime);
    //     let duration = moment.duration(time2.diff(time1));
    //     let { _data } = duration;
    //     console.log("打印维修时间", _data);
    //     //拼接
    //     this.form.workCostTime =
    //       _data.years +
    //       "年" +
    //       _data.months +
    //       "月" +
    //       _data.days +
    //       "日" +
    //       _data.hours +
    //       "小时" +
    //       _data.minutes +
    //       "分" +
    //       _data.seconds +
    //       "秒";
    //   }
    // },
    /** 查询维修工单列表 */
    getList() {
      this.loading = true;
      listRepairOrder(this.queryParams).then((response) => {
        this.repairOrderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询维修工单列表 */
    getTeamList() {
      this.loading = true;
      getMaintenanceTeamList(this.queryParams).then((response) => {
        console.log(response.rows);
        this.teamOption = response.rows;
      });
    },
    // 委外申请查看页面-取消按钮
    cancelApplyViewForm() {
      this.openApplyView = false;
    },
    // 新增-取消按钮
    cancelAddForm() {
      this.openAdd = false;
      this.reset();
    },
    // 更新-取消按钮
    cancelUpdateForm() {
      this.openUpdate = false;
      this.reset();
    },
    // 委外申请-取消按钮
    cancelApplyForm() {
      this.openApply = false;
      this.reset();
    },
    // 填写维修记录-取消按钮
    cancelWriteForm() {
      this.openWrite = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workId: null,
        orderId: null,
        orderCode: null,
        workHandle: null,
        workPlanTime: null,
        workPlanDownTime: null,
        orderRelevance: null,
        workPerson: null,
        workTeam: null,
        workOutsource: null,
        workDownMachine: null,
        equipmentCode: null,
        workReason: null,
        workFaultDesc: null,
        workCostTime: null,
        workCost: null,
        outWorkId: null,
        outWorkCode: null,
        attr1: null,
        attr2: null,
        attr3: null,
        createBy: null,
        createTime: null,
        updateTime: null,
        updateBy: null,
        delFlag: null,
        factoryCode: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      //计划维修时间组、计划停机时间组
      (this.queryParams.workPlanTimeArray = []),
        (this.queryParams.workPlanDownTimeArray = []),
        this.handleQuery();
    },
    // 多选框备品备件选中数据
    handleSelectionSparePartsChange(selection) {
      this.ids = selection.map((item) => item.applyId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.workId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openAdd = true;
      this.title = "快速工单";
    },
    /** 填写按钮操作 */
    handleWrite(row) {
      this.reset();
      this.repairRecordSteps = 0;
      const workId = row.workId || this.ids;
      getRepairOrder(workId).then((response) => {
        this.form = response.data;

        //遍历response.data.beforeRepairFiles
        if (response.data.beforeRepairFiles != null) {
          var beforeNewFiles = [];
          response.data.beforeRepairFiles.forEach((item) => {
            var beforeNewFile = {};
            beforeNewFile.name = item.fileName;
            beforeNewFile.url = item.fileAddress;
            beforeNewFiles.push(beforeNewFile);
          });
          this.form.beforeRepairFiles = beforeNewFiles;

          //维修前照片
          var urlBeforeLists = [];
          beforeNewFiles.forEach((item) => {
            urlBeforeLists.push(item.url);
          });
          this.urlBeforeLists = urlBeforeLists;
        }

        //遍历response.data.afterRepairFiles
        if (response.data.afterRepairFiles != null) {
          var afterNewFiles = [];
          response.data.afterRepairFiles.forEach((item) => {
            var afterNewFile = {};
            afterNewFile.name = item.fileName;
            afterNewFile.url = item.fileAddress;
            afterNewFiles.push(afterNewFile);
          });
          this.form.afterRepairFiles = afterNewFiles;
          //维修后照片
          var urlAfterLists = [];
          afterNewFiles.forEach((item) => {
            urlAfterLists.push(item.url);
          });
          this.urlAfterLists = urlAfterLists;
        }
        this.detailList = null;
        this.detailList = response.data.detailList;
        if (this.checkList != null) {
        //检查项遍历
        var standards = [];
        this.detailList.forEach((item1) => {
          //检查项名字
          item1.standardList.forEach((item) => {
            var standard = {};
            standard.id = item.id;
            standard.itemName = item1.itemName;
            standard.itemMethod = item1.itemMethod;
            standard.standardName = item.standardName;
            standard.detailUpLimit = item.detailUpLimit;
            standard.detailDownLimit = item.detailDownLimit;
            standard.detailUnit = item.detailUnit;
            standard.detailReach = item.detailReach;
            standard.actualValue = item.actualValue;
            standard.standardType = item.standardType;
            standards.push(standard);
          });
        });
        this.detailList = standards;
        }
        this.openWrite = true;
        this.title = "填写维修记录";
      });
    },
    /** 委外申请按钮操作 */
    handleApply(row) {
      this.reset();
      const workId = row.workId || this.ids;
      getRepairOrder(workId).then((response) => {
        this.form = response.data;
        console.log("打印委外信息", this.form.workOutsourcingUnit);
        if (
          this.form.workOutsourcingUnit == null ||
          this.form.workOutsourcingUnit == ""
        ) {
          this.openApply = true;
          this.title = "委外申请";
        } else {
          this.openApplyView = true;
          this.title = "查看委外申请";
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const workId = row.workId || this.ids;
      getRepairOrder(workId).then((response) => {
        this.form = response.data;
        this.openUpdate = true;
        this.title = "修改维修工单";
      });
    },
    /** 提交委外申请 */
    submitApplyForm() {
      applyOutsource(this.form).then((response) => {
        this.$modal.msgSuccess("委外申请成功");
        this.openApply = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workId != null) {
            updateRepairOrder(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openUpdate = false;
              this.getList();
            });
          } else {
            addRepairOrder(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openAdd = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交填写维修记录按钮 */
    submitWriteForm() {
      if (Array.isArray(this.form.afterRepairFile)) {
        this.form.afterRepairFile = this.listToString(
          this.form.afterRepairFile
        );
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workId != null) {
            this.form.standardList = this.detailList;
            writeRepairOrder(this.form).then((response) => {
              this.openWrite = false;
              this.$modal.msgSuccess("填写维修记录成功！");
              this.queryParams.workStatus = null;
              this.getList();
            });
          }
        }
      });
    },
    //设备选择
    handleSelectEquipment() {
      this.$refs.itemSelect.showFlag = true;
    },
    //人员选择
    handleSelectPerson() {
      this.$refs.itemSelectPerson.showFlag = true;
    },
    //人员选择
    onItemSelectedPerson(obj) {
      console.log(obj);
      this.form.workPerson = obj[0].userName;
    },
    //设备选择
    onItemSelectedEquipment(obj) {
      this.form.equipmentCode = obj;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const workIds = row.workId || this.ids;
      this.$modal
        .confirm('是否确认删除维修工单编号为"' + workIds + '"的数据项？')
        .then(function () {
          return delRepairOrder(workIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "device/repairOrder/export",
        {
          ...this.queryParams,
        },
        ` repairOrder_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

  <style>
.step-margin {
  margin-left: 10px;
}

.classification {
  margin-left: 452px;
}

.step-body {
  margin-top: 30px;
}
</style>


