<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="item in workStatusOption"
            :key="item.workStatus"
            :label="item.label"
            :value="item.workStatus"
          ></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
        label="维修单号"
        align="center"
        prop="workCode"
        width="180"
      />
      <el-table-column
        label="报修单号"
        align="center"
        prop="orderCode"
        width="180"
      />
      <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="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workCostTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="维修费用" align="center" prop="workCost" />
      <el-table-column label="维修状态" align="center" prop="workStatus" >
        <template slot-scope="scope">
          {{ scope.row.workStatus == "1"?'维修结束': scope.row.workStatus == "2"?'维修中' : scope.row.workStatus == "0" ? '待维修' : '无'}}
        </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="委外单位" v-if="form.outWorkCode == null">
              <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="委外维修人员" v-if="form.outWorkCode == null">
              <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="联系方式" v-if="form.outWorkCode == null">
              <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="委外原因" v-if="form.outWorkCode == null">
              <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-row>
          <el-col :span="8">
            <el-form-item prop="workOutsourcingUnit" label="委外单位" v-if="form.outWorkCode != null">
              <el-input
                v-model="form.workOutsourcingUnit"
                placeholder="请填写委外单位"
                style="width: 195px"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="outSourcePerson" label="委外维修人员" v-if="form.outWorkCode != null">
              <el-input
                v-model="form.outSourcePerson"
                placeholder="请填写委外维修人员"
                style="width: 195px"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="workConnection" label="联系方式" v-if="form.outWorkCode != null">
              <el-input
                v-model="form.workConnection"
                placeholder="请填写委外联系方式"
                style="width: 195px"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="outSourceReason" label="委外原因" v-if="form.outWorkCode != null">
              <el-input
                v-model="form.outSourceReason"
                placeholder="请输入委外原因"
                type="textarea"
                disabled
                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="openWrite"
      width="1000px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <div class="step-margin">
          <el-steps
            :active="repairRecordSteps"
            finish-status="success"
            align-center
          >
            <el-step title="维修基本信息"></el-step>
            <el-step title="填写处理结果"></el-step>
            <el-step title="填写备件领用记录"></el-step>
          </el-steps>
        </div>
        <!-- 维修基本信息 -->
        <div v-if="this.repairRecordSteps == 0">
          <div class="classification"><h3>基本信息</h3></div>
          <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>
          <div class="classification"><h3>故障信息</h3></div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="报修单号" prop="orderCode">
                <el-input
                  v-model="form.orderCode"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维修单号" prop="orderCode">
                <el-input
                  v-model="form.workCode"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="故障时间" prop="orderBreakdownTime">
                <el-input
                  v-model="form.orderBreakdownTime"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="报修时间" prop="orderTime">
                <el-input
                  v-model="form.orderTime"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报修人" prop="orderRepairman">
                <el-input
                  v-model="form.orderRepairman"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="orderConnection">
                <el-input
                  v-model="form.orderConnection"
                  style="width: 195px"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="23">
            <el-form-item label="故障描述" prop="orderDesc">
              <el-input
                v-model="form.orderDesc"
                placeholder="请输入故障描述"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                style="width: 840px"
                disabled
              />
            </el-form-item>
          </el-col>
        </div>
        <!-- 处理结果 -->
        <div v-if="this.repairRecordSteps == 1" class="step-body" @mousemove = "handleMouseout">
          <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 :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="queryParams.workStatus"
          placeholder="请选择维修状态"
          @change="$forceUpdate()"
          clearable
          style="width: 195px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in workStatusOption"
            :key="item.workStatus"
            :label="item.label"
            :value="item.workStatus"
          ></el-option>
        </el-select>
      </el-form-item>
              </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"
                  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"
                  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-col :span="8">
              <el-form-item label="停机时长" prop="orderBreakdownTime">
                <el-input
                  v-model="form.orderBreakdownTime"
                  style="width: 195px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 使用备件领用记录 -->
        <div v-if="this.repairRecordSteps == 2" class="step-body">
          <ItemSelectSpareParts :optType="optType" :workCode="form.workCode" :equipmentCode="form.equipmentCode" v-if="form.workCode !=null"></ItemSelectSpareParts>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="this.repairRecordSteps > 0" @click="stepLast"
          >上一步</el-button
        >
        <el-button v-if="this.repairRecordSteps < 2" @click="stepNext"
          >下一步</el-button
        >
        <el-button
          v-if="this.repairRecordSteps == 2"
          type="primary"
          @click="submitForm"
          >提 交</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";

export default {
  name: " RepairOrder",
  components: { ItemSelect, ItemSelectPerson, ItemSelectSpareParts },
  data() {
    return {
      //选择设备维修班组
      teamOption: [],
      optType: undefined,
      // 步骤
      repairRecordSteps: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 维修工单表格数据
      repairOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示快速工单弹出层
      openAdd: false,
      // 是否显示修改工单弹出层
      openUpdate: false,
      // 是否显示委外申请弹出层
      openApply: 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: "不停机",
        },
      ],
      //选择维修状态
      workStatusOption: [
        {
          workStatus: "0",
          label: "待维修",
        },
        {
          workStatus: "2",
          label: "维修中",
        },
        {
          workStatus: "1",
          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: {},
    };
  },
  created() {
    this.getList();
    this.getTeamList();
  },
  methods: {
    //计算时间 结束维修时间-开始维修时间
    handleMouseout(){
      console.log("打印维修时间")
      if(this.form.workEndTime != null && this.form.workStartTime != null){
        this.form.workCostTime = this.form.workEndTime - this.form.workStartTime;
      }
    },
    // 填写维修记录步骤上一步
    stepLast() {
      this.repairRecordSteps--;
    },
    // 填写维修记录步骤下一步
    stepNext() {
      this.repairRecordSteps++;
    },
    /** 查询维修工单列表 */
    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;
      });
    },

    // 新增-取消按钮
    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;
        this.openWrite = true;
        this.title = "填写维修记录";
      });
    },
    /** 委外申请按钮操作 */
    handleApply(row) {
      this.reset();
      const workId = row.workId || this.ids;
      getRepairOrder(workId).then((response) => {
        this.form = response.data;
        this.openApply = 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() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.workId != null) {
            writeRepairOrder(this.form).then((response) => {
              this.$modal.msgSuccess("填写维修记录成功！");
              this.openWrite = false;
              this.getList();
            });
          }
        }
      });
    },
    //设备选择
    handleSelectEquipment() {
      this.$refs.itemSelect.showFlag = true;
    },
    //人员选择
    handleSelectPerson() {
      this.$refs.itemSelectPerson.showFlag = true;
    },
    //人员选择
    onItemSelectedPerson(obj) {
      this.form.workPerson = obj;
    },
    //设备选择
    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>

