<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="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['device: repairOrder:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="repairOrderList">
      <el-table-column width="55" align="center" border />
      <!-- 序号 -->
      <el-table-column
        type="index"
        width="90"
        align="center"
        :index="indexMethod"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        label="维修单号"
        align="center"
        prop="workCode"
        width="200"
        fixed
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleView(scope.row)"
            >{{ scope.row.workCode }}</el-button
          >
        </template>
      </el-table-column>
      <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="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"
        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>

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

    <!-- 查看维修工单详情对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openView"
      width="1000px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-tabs type="border-card">
          <el-tab-pane label="报修基本信息">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="报修单编号">{{
                form.orderCode
              }}</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.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.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-tab-pane>

          <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.workStartTime
              }}</el-descriptions-item>
              <el-descriptions-item label="维修结束时间">{{
                form.workEndTime
              }}</el-descriptions-item>
              <el-descriptions-item label="维修实际开始停机时间">{{
                form.actualDownStartTime
              }}</el-descriptions-item>
              <el-descriptions-item label="维修实际结束停机时间">{{
                form.actualDownEndTime
              }}</el-descriptions-item>

              <el-descriptions-item label="维修人（负责人）">{{
                form.workPerson
              }}</el-descriptions-item>
              <el-descriptions-item label="维修人联系方式">{{
                form.workConnection
              }}</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.workCostTime
              }}</el-descriptions-item>
              <el-descriptions-item label="维修费用">{{
                form.workCost
              }}</el-descriptions-item>
              <el-descriptions-item label="故障原因">{{
                form.orderDesc
              }}</el-descriptions-item>
              <el-descriptions-item label="维修后原因分析">{{
                form.workReason
              }}</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="standardName" label="标准名称" width="180">
              </el-table-column>
              <el-table-column prop="standardType" label="标准类型" width="100">
              </el-table-column>
              <el-table-column prop="detailReach" label="是否达标" width="50">
              </el-table-column>
              <el-table-column prop="actualValue" label="实际值" width="50">
              </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-column prop="detailUnit" label="故障图片">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import {
  listRepairOrder,
  getRepairOrder,
  delRepairOrder,
  addRepairOrder,
  updateRepairOrder,
  applyOutsource,
  writeRepairOrder,
} from "@/api/device/repairOrder";
import { Message } from "element-ui";

export default {
  name: "RepairOrderReport",
  dicts: ["device_repair_status"],
  data() {
    return {
      //维修前照片
      urlBeforeLists: [],
      //维修后照片
      urlAfterLists: [],
      //选择设备维修班组
      teamOption: [],
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 维修工单表格数据
      repairOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示填写维修记录弹出层
      openView: 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: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 生成表头序号
    indexMethod(index) {
      return index + 1;
    },
    /** 查询维修工单列表 */
    getList() {
      this.loading = true;
      listRepairOrder(this.queryParams).then((response) => {
        this.repairOrderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 返回按钮
    cancel() {
      this.openView = false;
    },

    // 表单重置
    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();
    },

    /** 查询按钮操作 */
    handleView(row) {
      this.reset();
      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 = response.data.detailList;
        //检查项遍历
        var standards = [];
        this.detailList.forEach((item1) => {
          //检查项名字
          item1.standardList.forEach((item) => {
            var standard = {};
            standard.itemName = item1.itemName;
            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.openView = true;
        this.title = "查看维修工单";
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "device/repairOrder/export",
        {
          ...this.queryParams,
        },
        ` repairOrder_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

