<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="88px"
    >
      <el-form-item label="设备编码" prop="equipmentCode">
        <el-input
          v-model="queryParams.equipmentCode"
          placeholder="请输入设备编码"
          style="width: 180px"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="equipmentName">
        <el-input
          v-model="queryParams.equipmentName"
          placeholder="请输入设备名称"
          clearable
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="equipmentTypeCode">
        <el-select
          v-model="queryParams.equipmentTypeCode"
          placeholder="请选择设备类型"
          @change="$forceUpdate()"
          clearable
          filterable
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in equipmentTypeOption"
            :key="item.equipmentTypeCode"
            :label="item.equipmentTypeName"
            :value="item.equipmentTypeCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="equipmentStatus">
        <el-select
          v-model="queryParams.equipmentStatus"
          placeholder="设备状态"
          style="width: 180px"
          clearable
        >
          <el-option
            v-for="dict in dict.type.equipment_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </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="['wms:equipment: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="['wms:equipment: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="['wms:equipment: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="['wms:equipment:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <div>
          <el-button
            type="warning"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            v-hasPermi="['wms:equipment:import']"
            >导入</el-button
          >
        </div>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="equipmentList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- 序号 -->
      <el-table-column
        type="index"
        width="90"
        align="center"
        :index="indexMethod"
        label="序号"
      />
      <el-table-column label="设备编码" align="center" prop="equipmentCode">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleView(scope.row)"
            v-hasPermi="['wms:equipment:query']"
            >{{ scope.row.equipmentCode }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="设备名称"
        align="center"
        prop="equipmentName"
        width="200"
      />
      <el-table-column
        label="是否启用"
        align="center"
        prop="status"
        width="150"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="equipmentStatus" label="设备状态" width="80">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.equipment_status"
            :value="scope.row.equipmentStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="设备类型编码"
        align="center"
        prop="equipmentTypeCode"
        width="150"
      >
      </el-table-column>
      <el-table-column
        label="设备类型名称"
        align="center"
        prop="equipmentTypeName"
        width="150"
      />
      <el-table-column
        label="所属工作中心编码"
        align="center"
        prop="workshopCode"
        width="150"
      />
      <el-table-column
        label="所属工作中心名称"
        align="center"
        prop="workshopName"
        width="150"
      />
      <el-table-column label="设备IP" align="center" prop="plcIp" width="150" />
      <el-table-column
        label="设备端口号"
        align="center"
        prop="plcPort"
        width="100"
      />
      <el-table-column
        label="单台能力工时"
        align="center"
        prop="unitWorkingHours"
        width="100"
      />
      <el-table-column label="工段" align="center" prop="workshopSection" />
      <el-table-column
        label="设备位置"
        align="center"
        prop="equipmentLocation"
      />
      <el-table-column label="工时单价" align="center" prop="hourlyUnitPrice" />
      <el-table-column
        label="规格型号"
        align="center"
        prop="equipmentSpec"
        width="120"
      />
      <el-table-column
        label="生产厂商"
        align="center"
        prop="manufacturer"
        width="200"
      />
      <el-table-column
        label="供应商"
        align="center"
        prop="supplier"
        width="200"
      />
      <el-table-column
        label="使用寿命"
        align="center"
        prop="useLife"
        width="100"
      />
      <el-table-column
        label="购买时间"
        align="center"
        prop="buyTime"
        width="200"
      />
      <el-table-column
        label="资产负责人"
        align="center"
        prop="assetHead"
        width="100"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['wms:equipment:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['wms:equipment: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="open"
      width="1000px"
      append-to-body
      v-if="open"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
        <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-step title="设备绑定备件"></el-step>
          </el-steps>
        </div>
        <!-- 维修基本信息 -->
        <div v-if="this.repairRecordSteps == 0" class="step-body">
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="设备编码" prop="equipmentCode">
                <el-input
                  v-model="form.equipmentCode"
                  placeholder="请输入设备编码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备名称" prop="equipmentName">
                <el-input
                  v-model="form.equipmentName"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规格型号" prop="equipmentSpec">
                <el-input
                  v-model="form.equipmentSpec"
                  placeholder="请输入规格型号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="设备类型" prop="equipmentTypeCode">
                <el-select
                  v-model="form.equipmentTypeCode"
                  placeholder="请选择设备类型"
                  style="width: 195px"
                >
                  <el-option
                    v-for="dict in dict.type.equ_type"
                    :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="workCenter">
                <template>
                  <el-select
                    v-model="form.workCenter"
                    filterable
                    placeholder="请选择"
                    @change="selectWorkCenter"
                    style="width: 195px"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.factoryCode"
                      :label="item.factoryName"
                      :value="item.factoryCode"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作中心编码" prop="workshopCode">
                <el-input
                  v-model="form.workshopCode"
                  placeholder="请输入所属工作中心编码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="设备IP" prop="plcIp">
                <el-input v-model="form.plcIp" placeholder="请输入设备IP" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备端口号" prop="plcPort">
                <el-input
                  v-model="form.plcPort"
                  placeholder="请输入设备端口号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备位置" prop="equipmentLocation">
                <el-input
                  v-model="form.equipmentLocation"
                  placeholder="请输入设备位置"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="工段" prop="workshopSection">
                <el-input
                  v-model="form.workshopSection"
                  placeholder="请输入工段"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单台能力工时" prop="unitWorkingHours">
                <el-input-number
                  :min="0"
                  :step="1"
                  v-model="form.unitWorkingHours"
                  style="width: 195px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工时单价" prop="hourlyUnitPrice">
                <el-input-number
                  :min="0"
                  :step="1"
                  v-model="form.hourlyUnitPrice"
                  style="width: 170px"
                />
                <span> 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="24">
              <el-form-item label="设备二维码" prop="qrFileList">
                <FileUpload v-model="form.qrFileList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="24">
              <el-form-item label="设备图片" prop="imageFileList">
                <FileUpload v-model="form.imageFileList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="24">
              <el-form-item label="设备条码" prop="barCodeFileList">
                <FileUpload v-model="form.barCodeFileList" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 设备使用情况 -->
        <div v-if="this.repairRecordSteps == 1" class="step-body">
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="设备状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择是否启用"
                  @change="$forceUpdate()"
                  clearable
                  style="width: 195px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.status"
                    :label="item.label"
                    :value="item.status"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用部门" prop="department">
                <el-input
                  v-model="form.department"
                  placeholder="请输入设备使用部门"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备负责人" prop="equipmentHeadName">
                <el-select
                  v-model="queryParams.equipmentHeadName"
                  placeholder="请选择设备负责人"
                  @change="$forceUpdate()"
                  filterable
                  clearable
                  style="width: 195px"
                  @keyup.enter.native="handleQuery"
                >
                  <el-option
                    v-for="item in equipmentHeadOption"
                    :key="item.userName"
                    :label="item.teamUserName"
                    :value="item.userName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 设备资产信息 -->
        <div v-if="this.repairRecordSteps == 2" class="step-body">
          <el-row :gutter="10" class="mb8">
            <el-col :span="8">
              <el-form-item label="生产厂商" prop="manufacturer">
                <el-input
                  v-model="form.manufacturer"
                  placeholder="请输入生产厂商"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商" prop="supplier">
                <el-input v-model="form.supplier" placeholder="请输入供应商" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买时间" prop="buyTime">
                <el-date-picker
                  v-model="form.buyTime"
                  type="datetime"
                  align="right"
                  style="width: 195px"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用寿命" prop="useLife">
                <el-input v-model="form.useLife" placeholder="请输入使用寿命" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="SAP资产号" prop="sapAsset">
                <el-input
                  v-model="form.sapAsset"
                  placeholder="请输入SAP资产号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产原值" prop="assetOriginalValue">
                <el-input-number
                  :min="0"
                  :step="1"
                  v-model="form.assetOriginalValue"
                  style="width: 170px"
                />
                <span> 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产净值" prop="netAssetValue">
                <el-input-number
                  :min="0"
                  :step="1"
                  v-model="form.netAssetValue"
                  style="width: 170px"
                />
                <span> 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产负责人" prop="assetHead">
                <el-input
                  v-model="form.assetHead"
                  placeholder="请输入资产负责人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="固定资产编号" prop="fixedAssetCode">
                <el-input
                  v-model="form.fixedAssetCode"
                  placeholder="请输入固定资产编号"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 维修基本信息 -->
        <div v-if="this.repairRecordSteps == 3" class="step-body">
          <template>
            <el-transfer
              filterable
              filter-placeholder="请输入备品备件名称"
              v-model="rightList"
              :titles="['未绑定备件列表', '已绑定备件列表']"
              :button-texts="['取消', '绑定']"
              :data="leftList"
            >
            </el-transfer>
          </template>
        </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 < 3" @click="stepNext"
          >下一步</el-button
        >
        <el-button
          v-if="this.repairRecordSteps == 3"
          type="primary"
          @click="submitForm"
          >提 交</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查询设备管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="queryOpen"
      width="1000px"
      append-to-body
      v-if="queryOpen"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
        <el-tabs type="border-card">
          <el-tab-pane label="设备基础信息">
            <el-divider content-position="center">基础信息</el-divider>
            <el-descriptions
              :column="3"
              border
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="设备编码">{{
                form.equipmentCode
              }}</el-descriptions-item>
              <el-descriptions-item label="设备名称">{{
                form.equipmentName
              }}</el-descriptions-item>
              <el-descriptions-item label="设备类型编码">{{
                form.equipmentTypeCode
              }}</el-descriptions-item>
              <el-descriptions-item label="设备类型名称">{{
                form.equipmentTypeName
              }}</el-descriptions-item>
              <el-descriptions-item label="所属工作中心">{{
                form.workCenter
              }}</el-descriptions-item>
              <el-descriptions-item label="工作中心编码">{{
                form.workshopCode
              }}</el-descriptions-item>
              <el-descriptions-item label="设备IP">{{
                form.plcIp
              }}</el-descriptions-item>
              <el-descriptions-item label="设备端口号">{{
                form.plcPort
              }}</el-descriptions-item>
              <el-descriptions-item label="设备位置">{{
                form.equipmentLocation
              }}</el-descriptions-item>
              <el-descriptions-item label="工段">{{
                form.workshopSection
              }}</el-descriptions-item>
              <el-descriptions-item label="单台能力工时">{{
                form.unitWorkingHours
              }}</el-descriptions-item>
              <el-descriptions-item label="工时单价">{{
                form.hourlyUnitPrice
              }}</el-descriptions-item>
            </el-descriptions>

            <el-divider content-position="center">设备使用状况</el-divider>
            <el-descriptions
              :column="3"
              border
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="设备状态">{{
                form.status
              }}</el-descriptions-item>
              <el-descriptions-item label="使用部门">{{
                form.department
              }}</el-descriptions-item>
              <el-descriptions-item label="设备负责人">{{
                form.equipmentHeadName
              }}</el-descriptions-item>
            </el-descriptions>

            <el-divider content-position="center">设备资产信息</el-divider>
            <el-descriptions
              :column="3"
              border
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="生产厂商">{{
                form.manufacturer
              }}</el-descriptions-item>
              <el-descriptions-item label="供应商">{{
                form.supplier
              }}</el-descriptions-item>
              <el-descriptions-item label="购买时间">{{
                form.buyTime
              }}</el-descriptions-item>

              <el-descriptions-item label="使用寿命">{{
                form.useLife
              }}</el-descriptions-item>
              <el-descriptions-item label="SAP资产号">{{
                form.sapAsset
              }}</el-descriptions-item>
              <el-descriptions-item label="资产原值">{{
                form.assetOriginalValue
              }}</el-descriptions-item>
              <el-descriptions-item label="资产净值">{{
                form.netAssetValue
              }}</el-descriptions-item>
              <el-descriptions-item label="资产负责人">{{
                form.assetHead
              }}</el-descriptions-item>
              <el-descriptions-item label="固定资产编号">{{
                form.fixedAssetCode
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="设备相关图片">
            <el-descriptions
              :column="1"
              border
              :contentStyle="CSP"
              :label-style="LSP"
            >
              <el-descriptions-item label="设备图片">
                <el-image
                  v-for="(item, index) in form.imageFileList"
                  :key="index"
                  :src="item"
                ></el-image>
              </el-descriptions-item>
              <el-descriptions-item label="设备二维码">
                <el-image
                  v-for="(item, index) in form.qrFileList"
                  :key="index"
                  :src="item"
                ></el-image>
              </el-descriptions-item>
              <el-descriptions-item label="设备条码">
                <el-image
                  v-for="(item, index) in form.barCodeFileList"
                  :key="index"
                  :src="item"
                ></el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="设备附属信息">
            <el-descriptions
              :column="2"
              border
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="成型机存料状态">{{
                form.starving
              }}</el-descriptions-item>
              <el-descriptions-item label="成型机存放物料">{{
                form.material
              }}</el-descriptions-item>
              <el-descriptions-item label="烘房是否开门">{{
                form.isOpen
              }}</el-descriptions-item>

              <el-descriptions-item label="烘房湿度">{{
                form.humidity
              }}</el-descriptions-item>
              <el-descriptions-item label="烘房压强">{{
                form.intensityOfPressure
              }}</el-descriptions-item>
              <el-descriptions-item label="烘房温度">{{
                form.temperature
              }}</el-descriptions-item>
              <el-descriptions-item label="烘房前小车数量">{{
                form.dollyNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="烘房状态">{{
                form.state
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="queryCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listEquipment,
  getEquipment,
  delEquipment,
  addEquipment,
  updateEquipment,
  getEquipmentTypeList,
  getSparePartsList,
  getRightSparePartsList,
  changeEquipmentStatus,
} from "@/api/wms/equipment";
import { getWorkCenterList, listFactory } from "@/api/wms/factory";
import { listTeamMembers } from "@/api/wms/team";
import EquipmentSpareParts from "./single.vue";
import { Message } from "element-ui";
import { getToken } from "@/utils/auth";

export default {
  name: "Equipment",
  dicts: ["sys_normal_disable", "equ_type", "equipment_status"],
  components: { EquipmentSpareParts },
  data() {
    return {
      CS: {
        "text-align": "center", //文本居中
        width: "110px",
      },
      LS: {
        "text-align": "center",
        width: "110px",
      },
      //图片
      CSP: {
        "text-align": "center", //文本居中
        width: "800px",
      },
      LSP: {
        "text-align": "center",
        width: "100px",
      },
      // 日期范围选择快捷
      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]);
            },
          },
        ],
      },
      // 导入数据
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          poolName: localStorage.getItem("USER_POOL_NAME_CURRENT"),
          Authorization: "Bearer " + getToken(),
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/wms/equipment/importFile",
      },

      // 步骤
      repairRecordSteps: 0,
      leftList: [],
      rightList: [],
      bind: undefined,
      imageFileList: [],
      qrFileList: [],
      barCodeFileList: [],
      equipmentTypeOption: [],
      equipmentHeadOption: [],
      workCenter: [],
      options1: [],
      value: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      equipmentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      queryOpen: false,
      openBindForm: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentCode: null,
        equipmentName: null,
        equipmentBrand: null,
        equipmentSpec: null,
        equipmentTypeId: null,
        equipmentTypeCode: null,
        equipmentTypeName: null,
        workshopId: null,
        workshopCode: null,
        workshopName: null,
        status: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        unitWorkingHours: null,
        workshopSection: null,
        equipmentLocation: null,
        hourlyUnitPrice: null,
      },
      queryEquipmentHeadParams: {
        pageNum: 1,
        pageSize: 10,
      },
      options: [
        {
          status: "1",
          label: "启用",
        },
        {
          status: "0",
          label: "停用",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value2: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        equipmentCode: [
          { required: true, message: "设备编码不能为空", trigger: "blur" },
        ],
        equipmentName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        equipmentTypeCode: [
          { required: true, message: "设备类型不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "设备状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    equipmentId: undefined,
  },
  created() {
    this.getList();
    this.getEquipmentType();
    this.getEquipmentHead();
    this.sparePartsList();
  },
  methods: {
    // 填写维修记录步骤上一步
    stepLast() {
      this.repairRecordSteps--;
    },
    // 填写维修记录步骤下一步
    stepNext() {
      this.repairRecordSteps++;
    },
    /**查询人员**/
    getEquipmentHead() {
      this.queryEquipmentHeadParams.pageNum = 1;
      this.queryEquipmentHeadParams.pageSize = 2000;
      listTeamMembers(this.queryHeadParams).then((response) => {
        console.log(response.rows);
        this.equipmentHeadOption = response.rows;
      });
    },
    /** 查询设备分类 */
    getEquipmentType() {
      getEquipmentTypeList().then((response) => {
        console.log(response.rows);
        this.equipmentTypeOption = response.rows;
        console.log(this.treeData1);
      });
    },
    /** 查询设备备件 */
    sparePartsList() {
      getSparePartsList(this.queryParams).then((response) => {
        for (let i in response.rows) {
          // 将返回的列表赋值于穿梭框左边列表
          this.leftList.push({
            key: response.rows[i].materialCode,
            label: response.rows[i].materialDesc,
          });
        }
        for (let i in response.selected) {
          this.rightList.push(response.selected[i].key);
          this.form.rightData = this.rightList;
        }
      });
    },
    selectWorkCenter() {
      this.form.workshopCode = this.form.workCenter;
    },
    // 生成表头序号
    indexMethod(index) {
      return index + 1;
    },
    /** 查询设备管理列表 */
    getList() {
      this.loading = true;
      listEquipment(this.queryParams).then((response) => {
        this.equipmentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    queryCancel() {
      this.queryOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        //三种不同图片
        qrFileList: null,
        imageFileList: null,
        barCodeFileList: null,
        equipmentId: null,
        equipmentCode: null,
        equipmentName: null,
        equipmentBrand: null,
        equipmentSpec: null,
        equipmentTypeId: null,
        equipmentTypeCode: null,
        equipmentTypeName: null,
        workshopId: null,
        workshopCode: null,
        workshopName: null,
        status: null,
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        unitWorkingHours: null,
        workshopSection: null,
        equipmentLocation: null,
        hourlyUnitPrice: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.equipmentId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 绑定按钮操作 */
    // handleBind() {
    //   this.$refs.itemSelectSpareParts.showFlag = true;
    // },

    // <el-col :span="1.5">
    //     <div>
    //       <el-button
    //         type="warning"
    //         plain
    //         icon="el-icon-connection"
    //         size="mini"
    //         @click="handleBind"
    //         v-hasPermi="['wms:equipment:bind']"
    //         >绑定备件</el-button
    //       >
    //       <EquipmentSpareParts
    //         ref="itemSelectSpareParts"
    //         :equipmentId="form.equipmentId"
    //       ></EquipmentSpareParts>
    //     </div>
    //   </el-col>

    /** 批量绑定按钮操作 */
    handleBind() {
      this.$refs.itemSelectSparts.showFlag = true;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      getWorkCenterList().then((response) => {
        this.options1 = response.rows;
        console.log(this.options1);
      });
      this.open = true;
      this.title = "添加设备管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const equipmentId = row.equipmentId || this.ids;
      getWorkCenterList().then((response) => {
        this.options1 = response.rows;
        console.log(this.options1);
      });
      getEquipment(equipmentId).then((response) => {
        this.form = response.data;
        for (let i in response.data.selectedData) {
          // 将返回的列表赋值于穿梭框右边列表
          this.rightList.push(response.data.selectedData[i].spareCode);
        }

        if (response.data.imageFiles != null) {
          var newFiles = [];
          response.data.imageFiles.forEach((item) => {
            var newFile = {};
            newFile.name = item.fileName;
            newFile.url = item.fileAddress;
            newFiles.push(newFile);
          });
          this.form.imageFileList = newFiles;
          console.log("55555", this.form.imageFileList);
        }
        if (response.data.qrFiles != null) {
          var newFiles = [];
          response.data.qrFiles.forEach((item) => {
            var newFile = {};
            newFile.name = item.fileName;
            newFile.url = item.fileAddress;
            newFiles.push(newFile);
          });
          this.form.qrFileList = newFiles;
        }
        if (response.data.barCodeFiles != null) {
          var newFiles = [];
          response.data.barCodeFiles.forEach((item) => {
            var newFile = {};
            newFile.name = item.fileName;
            newFile.url = item.fileAddress;
            newFiles.push(newFile);
          });
          this.form.barCodeFileList = newFiles;
        }
        this.form.workCenter = this.form.workshopCode;
        this.open = true;
        this.title = "修改设备管理";
      });
    },
    // 查询明细按钮操作
    handleView(row) {
      this.reset();
      const equipmentId = row.equipmentId || this.ids;
      getWorkCenterList().then((response) => {
        console.log(this.options1);
      });
      getEquipment(equipmentId).then((response) => {
        this.form = response.data;
        //设备图片
        if (response.data.imageFiles != null) {
          var newFiles = [];
          response.data.imageFiles.forEach((item) => {
            newFiles.push(item.fileAddress);
          });
          this.form.imageFileList = newFiles;
        }

        if (response.data.qrFiles != null) {
          var newFiles = [];
          response.data.qrFiles.forEach((item) => {
            newFiles.push(item.fileAddress);
          });
          this.form.qrFileList = newFiles;
        }

        if (response.data.barCodeFiles != null) {
          var newFiles = [];
          response.data.barCodeFiles.forEach((item) => {
            newFiles.push(item.fileAddress);
          });
          this.form.barCodeFileList = newFiles;
        }

        this.queryOpen = true;
        this.title = "查看设备信息";
        this.optType = "view";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (Array.isArray(this.form.qrFileList)) {
        this.form.qrFileList = this.listToString(this.form.qrFileList);
      }
      if (Array.isArray(this.form.imageFileList)) {
        this.form.imageFileList = this.listToString(this.form.imageFileList);
      }
      if (Array.isArray(this.form.barCodeFileList)) {
        this.form.barCodeFileList = this.listToString(
          this.form.barCodeFileList
        );
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.equipmentId != null) {
            this.form.rightData = this.rightList;
            updateEquipment(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            if (this.form.equipmentCode == null) {
              this.$message.error(
                "【设备基础信息】设备编码为空，请填写设备编码！"
              );
            } else if (this.form.equipmentName == null) {
              this.$message.error(
                "【设备基础信息】设备编名称为空，请填写设备名称！"
              );
            } else if (this.form.status == null) {
              this.$message.error(
                "【设备使用状况】设备状态为空，请选择设备状态！"
              );
            } else if (this.form.equipmentTypeCode == null) {
              this.$message.error(
                "【设备基础信息】设备类型为空，请选择设备类型！"
              );
            } else {
              this.form.rightData = this.rightList;
              addEquipment(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        }
      });
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].url + separator;
      }
      return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const equipmentIds = row.equipmentId || this.ids;
      this.$modal
        .confirm('是否确认删除设备管理编号为"' + equipmentIds + '"的数据项？')
        .then(function () {
          return delEquipment(equipmentIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "wms/equipment/export",
        {
          ...this.queryParams,
        },
        `equipment_${new Date().getTime()}.xlsx`
      );
    },

    // 导入-导入窗口打开
    handleImport() {
      this.upload.title = "设备信息导入";
      this.upload.open = true;
    },

    // 导入-文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },

    // 导入-文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      debugger;
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },

    // 导入-提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },

    // 导入-下载模板
    importTemplate() {
      this.download(
        "/wms/equipment/importTemplate",
        {},
        `equipment_template_${new Date().getTime()}.xlsx`
      );
    },

    // 设备状态修改
    handleStatusChange(row) {
      let text = row.status === "1" ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.equipmentCode + '"设备吗？')
        .then(function () {
          return changeEquipmentStatus(row.equipmentId, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
  },
};
</script>

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

.classification {
  margin-left: 452px;
}

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