ISCS_Ui_Admin_Base/src/views/mes/material/lockers/index.vue

<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" style="margin: 5px">
      <el-radio-button label="first">物资柜位置</el-radio-button>
      <el-radio-button label="second">物资柜列表</el-radio-button>
    </el-radio-group>
    <!-- 优化后带样式的无数据提示盒子 -->
    <div
      v-if="jobconfig.imageUrl==''"
      style="
    position: absolute;
    top: 40%;
    left: 40%;
    font-size: 18px;
    color: #666;
    text-align: center;
  "
    >
      暂无数据，请到基础数据菜单进行配置
    </div>
    <div
      style="
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
          "
      v-show="tabPosition == 'first'"
    >

      <!-- 缩放容器 -->
      <div
        ref="mapContainer"
        :style="{
              transform: `scale(${scaleFactor})`,
              transformOrigin: 'top left',
              width: '1250px',
              height: '700px',
              position: 'relative',
            }"
      >

        <img
          :style="{width:jobconfig.width+'px',height:jobconfig.height+'px'}"
          :src="jobconfig.imageUrl"
          alt=""
        />

        <!--        <img-->
        <!--          v-for="(cabinet, index) in TicketListPage"-->
        <!--          :key="cabinet.cabinetId"-->
        <!--          :style="{-->
        <!--            width: '35px',-->
        <!--            height: '35px',-->
        <!--            position: 'absolute',-->
        <!--            cursor: 'pointer',-->
        <!--            // 图标垂直居中-->
        <!--            top: `${deptXLGCenter.top - 53}px`,-->
        <!--            // 图标水平居中，动态计算偏移-->
        <!--            left: `${-->
        <!--              deptXLGCenter.left - -->
        <!--              (TicketListPage.length * 35 + (TicketListPage.length - 1) * 5) /-->
        <!--                2 +-->
        <!--              index * 40-->
        <!--            }px`,-->
        <!--          }"-->
        <!--          :src="require(`@/assets/images/${imageMap[cabinet.status]}.jpg`)"-->
        <!--          alt=""-->
        <!--          @click="handleCabinetClick(cabinet)"-->
        <!--        />-->

        <div v-for="(item, index) in jobconfigPoint.records" :key="item.id">
          <div
            class="deptXLG"
            :style="{left:item.x+'px',top:item.y+'px'}"
          >
            {{ item.entityName }}
          </div>

          <!--          // 使图标位于岗位上方-->
          <img
            v-for="(cabinet, index) in TicketListPage[item.entityId] || []"
            :key="cabinet.cabinetId"
            :style="{
        width: '35px',
        height: '35px',
        position: 'absolute',
        cursor: 'pointer',
        top: (item.y - 40) + 'px',  // 让图标浮在岗位的上方
        left: (
          item.x -
          ((TicketListPage[item.entityId] ? TicketListPage[item.entityId].length * 35 : 0) - 53) / 2 +  // 计算总宽度并居中，减去单个图标宽度，确保居中
          index * 40  // 处理图标间隔
        ) + 'px'
      }"
            :src="imageMap[cabinet.status]"
            alt=""
            @click="handleCabinetClick(cabinet)"
          />


        </div>
        <!--        左侧警告部分内容-->
        <img style="width: 40px;height: 40px;position: absolute;top:2%;right: -4%" :src="this.ExceptionTableImage"
             alt=""
             @click="showExTable"
        >
        <div v-if="exceptionTableVisible"
             style="width: 430px;height: 300px;position: absolute;top:2%;right:0;background: white "
        >
          <div style="display: flex">
            <img :src="this.ExceptionTableImage2" style="width: 20px;height: 20px;margin: 10px" alt="">
            <span style="margin: 10px">异常信息</span>
          </div>

          <el-table :data="exceptionTable">
            <el-table-column label="物资柜" prop="loanFromName"></el-table-column>
            <el-table-column label="异常类型" prop="exceptionType"></el-table-column>
            <el-table-column label="异常信息" prop="status"></el-table-column>
          </el-table>
        </div>


      </div>
    </div>
    <!-- 物资列表 -->
    <div v-if="tabPosition == 'second'" class="CabinetListcon">
      <div class="left">
        <!-- 岗位树 -->
        <div class="deptTree">
          <div class="head-container">
            <el-input
              v-model="queryParams.workstationName"
              placeholder="请输入区域名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
              @clear="handleClear"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="workstationOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="treeData"
              node-key="id"
              default-expand-all
              @node-click="handleNodeClick"
              highlight-current
            />
          </div>
        </div>
      </div>
      <div class="right">
        <el-row>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
          >
            <el-form-item label="物资柜编号" prop="cabinetId">
              <el-input
                v-model="queryParams.cabinetId"
                placeholder="请输入物资柜编号"
                clearable
                oninput="value=value.replace(/[^\d.]/g,'')"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="物资柜名称" prop="cabinetName">
              <el-input
                v-model="queryParams.cabinetName"
                placeholder="请输入物资柜名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!--            <el-form-item label="物资柜状态" prop="status">-->
            <!--              <el-select v-model="queryParams.status" placeholder="物资柜状态">-->
            <!--                <el-option-->
            <!--                  v-for="dict in dict.type.cabinet_status"-->
            <!--                  :key="dict.value"-->
            <!--                  :label="dict.label"-->
            <!--                  :value="dict.value"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <el-button
                v-no-more-click
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
              >搜索
              </el-button
              >
              <el-button
                v-no-more-click
                icon="el-icon-refresh"
                size="mini"
                @click="resetQuery"
              >重置
              </el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-no-more-click
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['iscs:cabinet:add']"
            >新增
            </el-button>
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :data="CabinetList"
          @selection-change="handleSelectionChange"
        >
          <!--          <el-table-column type="selection" width="55" align="center"/>-->
          <el-table-column label="物资柜编号" align="center" prop="cabinetId">
          </el-table-column>
          <el-table-column label="物资柜名称" prop="cabinetName" width="150"/>
          <el-table-column label="物资柜图片" prop="cabinetPicture" width="100">
            <template slot-scope="scope">
              <div class="img-box" v-if="scope.row.cabinetPicture">
                <el-image
                  style="width: 75px; height: 75px"
                  :preview-teleported="true"
                  class="images"
                  :hide-on-click-modal="true"
                  :src="scope.row.cabinetPicture"
                  :zoom-rate="1.2"
                  :preview-src-list="[scope.row.cabinetPicture]"
                  :initial-index="1"

                >
                </el-image>
                <i class="el-icon-zoom-in" id="eyeicon"></i>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="物资柜状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.cabinet_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column label="异常类型" prop="exReason" width="100">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.exception_reason"
                :value="scope.row.exReason"
              />
            </template>
          </el-table-column>
          <el-table-column label="物资柜详情" align="center">
            <template slot-scope="scope">
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                @click="handleLook(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['iscs:cabinet:edit']"
              >修改
              </el-button>
              <el-button
                v-no-more-click
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['iscs:cabinet:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 添加或修改物资柜对话框 -->
    <el-dialog :visible.sync="open" width="510px" append-to-body>
      <div slot="title" class="dialog-title">
        <i></i>
        <span class="title">{{ title }}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="物资柜编码" prop="cabinetCode">
          <el-input
            v-model="form.cabinetCode"
            placeholder="请输入物资柜编码"
            style="width: 200px; margin-right: 10px"
          />
          <el-switch
            v-model="autoGenFlag"
            active-color="#13ce66"
            active-text="自动生成"
            @change="handleAutoGenChange(autoGenFlag)"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="物资柜名称" prop="cabinetName">
          <el-input
            style="width: 348px"
            v-model="form.cabinetName"
            placeholder="请输入物资柜名称"
          />
        </el-form-item>
        <el-form-item label="所属区域" prop="workstationId">
          <treeselect
            style="width: 348px"
            v-model="form.workstationId"
            :options="marsOptions"
            :normalizer="Marsnormalizer"
            placeholder="选择所属区域"
          />
        </el-form-item>
        <el-form-item label="物资柜图片" prop="cabinetPicture">
          <ImageUploadSingle
            :limit="1"
            :value="form.cabinetPicture"
            :fileSize="5"
            @onUploaded="handleIconUplaoded"
            @onRemoved="handleIconRemoved"
          ></ImageUploadSingle>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
            style="width: 348px"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-no-more-click
          type="primary"
          @click="cancel"
          v-if="optType == 'view'"
        >返回
        </el-button>
        <el-button v-no-more-click type="primary" @click="submitForm" v-else
        >确 定
        </el-button>
        <el-button v-no-more-click @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getMaterialsCabinet,
  addMaterialsCabinet,
  updateMaterialsCabinet,
  deleteMaterialsCabinet,
  selectMaterialsCabinetById
} from '@/api/mes/material/lockers.js'

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { genCode } from '@/api/system/autocode/rule'
import { listMarsDept } from '@/api/system/marsdept'
import { listLoto } from '@/api/mes/lotoStation/lotoStation'
import { listMaterials } from '@/api/mes/material/information'
import { MaterialsLoanExceptionPage } from '@/api/mes/material/exception'
import { selectIsMapById } from '@/api/system/mapconfig'
import { getIsMapPointPage } from '@/api/system/mappoint'
import { getIsSystemAttributeByKey } from '@/api/system/configuration'

export default {
  name: 'Team',
  components: {
    Treeselect
  },
  dicts: ['material_status', 'cabinet_status', 'exception_reason'],
  data() {
    return {
      jobconfig: null,//接口传递地图与宽高数据
      jobconfigPoint: null,//接口传递的岗位位置信息
      //自动生成编码
      autoGenFlag: false,
      optType: undefined,
      tabPosition: 'first', //顶部切换
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      codes: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 班组表格数据
      CabinetList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      createTime: '',
      queryParams: {
        current: 1,
        size: 10,
        workstationName: undefined,
        workstationId: undefined,
        cabinetId: null,
        cabinetName: null,
        status: null
      },
      // queryParamsList: {
      //   current: 1,
      //   size: 10,
      //   cabinetId: null,
      //   cabinetName: null,
      //   status: null,
      // },
      imageMap: {
        0: 'table_map2', //正常
        1: 'table_map1', //使用中
        2: 'table_map3' //异常
      },
      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: {
        cabinetCode: [
          { required: true, message: '物资柜编码不能为空', trigger: 'blur' }
        ],
        cabinetName: [
          { required: true, message: '物资柜名称不能为空', trigger: 'blur' }
        ]
      },
      marsOptions: [], //岗位
      TicketListPage: [], //R&R岗位

      scaleFactor: 1, // 缩放比例，初始值为1

      exceptionTableVisible: false,//地图显示异常物资柜具体信息
      exceptionTable: [],//地图异常数据table数据
      workstationOptions: [], //岗位
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      sysAttrValue: null,//从基础数据接口里拿到物资柜底图的mapId
      ExceptionTableImage: '',//列表异常的图标
      ExceptionTableImage2: ''//列表异常的图标2
    }
  },

  watch: {
    'queryParams.workstationId': function(newVal, oldVal) {
      if (newVal) {
        const data = {
          current: 1,
          size: -1,
          workstationId: this.queryParams.workstationId
        }
        getMaterialsCabinet(data).then((response) => {
          this.CabinetList = response.data.records
        })
      }
    },
    tabPosition: function(newVal, oldVal) {
      if (newVal) {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
    this.getOtherList()
    this.getExpection()
  },

  methods: {
    // 显示异常的物资柜信息
    showExTable() {
      this.exceptionTableVisible = !this.exceptionTableVisible
    },
    /** 查询物资柜信息列表 */
    getList() {
      this.loading = true
      getMaterialsCabinet(this.queryParams).then((response) => {
        this.CabinetList = response.data.records
        console.log(response, '所有物资柜')
        this.total = response.data.total
        this.loading = false
      })
      const sysAttrKey1 = 'icon.cabinet.normal'
      const sysAttrKey2 = 'icon.cabinet.borrowed'
      const sysAttrKey3 = 'icon.cabinet.abnormal'
      const sysAttrKey4 = 'sys.exception.icon'
      const sysAttrKey5 = 'sys.exception2.icon'
      Promise.all([
        getIsSystemAttributeByKey(sysAttrKey1),
        getIsSystemAttributeByKey(sysAttrKey2),
        getIsSystemAttributeByKey(sysAttrKey3),
        getIsSystemAttributeByKey(sysAttrKey4),
        getIsSystemAttributeByKey(sysAttrKey5)
      ]).then((responses) => {
        this.imageMap[0] = responses[0].data.sysAttrValue // 正常
        this.imageMap[1] = responses[1].data.sysAttrValue // 使用中
        this.imageMap[2] = responses[2].data.sysAttrValue // 异常
        this.ExceptionTableImage = responses[3].data.sysAttrValue
        this.ExceptionTableImage2 = responses[4].data.sysAttrValue
        console.log(this.imageMap, this.ExceptionTableImage, this.ExceptionTableImage2, 'imageMap')
      })
    },

    getExpection() {
      // 调用 listMaterials 接口获取所有物资的信息
      listMaterials({ pages: 1, size: -1 }).then(response => {
        const materialsData = response.data.records || []
        // 处理损坏、过期的物资
        const damagedOrExpiredMaterials = materialsData.filter(material => material.status === '1' || material.status === '2')

        const damagedOrExpiredCabinets = Array.from(new Set(damagedOrExpiredMaterials.map(material => material.cabinetName)))
        console.log(damagedOrExpiredMaterials, 'damagedOrExpiredMaterials')
        // 处理归还异常的物资
        const misplacedMaterials = materialsData.filter(material => material.status === '3')
        const misplacedCabinets = Array.from(new Set(misplacedMaterials.map(material => material.cabinetName)))
        console.log(misplacedCabinets, 'misplacedCabinets')
        // 整合归还异常的柜子信息
        const misplacedCabinetDetails = misplacedCabinets.map(cabinet => ({
          loanFromName: cabinet,
          exceptionType: '物资放错柜子',
          status: `${misplacedMaterials.filter(material => material.cabinetName === cabinet).length}件物资放错`
        }))

        // 整合损坏、过期的柜子信息
        const damagedOrExpiredCabinetDetails = damagedOrExpiredCabinets.map(cabinet => ({
          loanFromName: cabinet,
          exceptionType: '物资过期损坏',
          status: `${damagedOrExpiredMaterials.filter(material => material.cabinetName === cabinet).length}件物资过期或损坏`
        }))

        // 调用 MaterialsLoanExceptionPage 接口获取柜门未关闭的数据
        return MaterialsLoanExceptionPage({
          pages: 1,
          size: -1,
          exceptionType: 1, // 1表示柜门未关
          status: 0 // 0表示未处理
        }).then(response1 => {
          const unClosedCabinets = response1.data.records || []

          if (unClosedCabinets) {
            // 整合柜门未关闭的柜子信息
            const unClosedCabinetDetails = unClosedCabinets.map(cabinet => ({
              loanFromName: cabinet.loanFromName,
              exceptionType: '超时未关柜门',
              status: `柜门超过${this.calculateTimeDifference(cabinet.occurTime)}未关`
            }))
            // 合并所有结果
            const result = [
              ...misplacedCabinetDetails,
              ...damagedOrExpiredCabinetDetails,
              ...unClosedCabinetDetails
            ]
            const resultData = result.filter((item) => {
              return item.loanFromName !== null
            })
            this.exceptionTable = resultData

          } else {
            // 合并所有结果
            const result = [
              ...misplacedCabinetDetails,
              ...damagedOrExpiredCabinetDetails
            ]
            const resultData = result.filter((item) => {
              return item.loanFromName !== null
            })
            this.exceptionTable = resultData

          }

        })
      }).catch(error => {
        console.error('Error fetching data:', error)
      })

    },
    getOtherList() {
      const data = {
        pasge: 1,
        size: -1
      }
      getMaterialsCabinet(data).then((response) => {
        console.log(response, '所有物资柜')
        let cabinetByWorkstation = {}

        response.data.records.forEach((cabinet) => {
          if (!cabinetByWorkstation[cabinet.workstationId]) {
            cabinetByWorkstation[cabinet.workstationId] = []
          }
          cabinetByWorkstation[cabinet.workstationId].push(cabinet)
        })

        this.TicketListPage = cabinetByWorkstation

        this.total = response.data.total
        this.loading = false
      })
      listMarsDept(data).then((response) => {
        // 新增岗位单选
        const data = response.data.records.filter((item) => {
          return item.parentId == '0'
        })
        this.marsOptions = this.handleTree(data, 'workstationId', 'parentId')
        // mars岗位树数据
        this.workstationOptions = this.transformToTree(data)
        // 使用递归函数查找匹配的节点
        const selectedTreeNode = this.findNodeById(
          this.workstationOptions,
          this.queryParams.workstationId
        )
        // 调用 handleNodeClick 方法
        if (selectedTreeNode) {
          this.handleNodeClick(selectedTreeNode)
        } else {
          console.log('未找到匹配的节点')
        }
      })

      //   获取物资柜地图与物资柜对应状态的柜子图片
      const sysAttrKey = 'sys.map.cabinet'
      getIsSystemAttributeByKey(sysAttrKey).then(response => {
        console.log(response, '获取物资柜底图')
        this.sysAttrValue = response.data.sysAttrValue
        // 这里获取全局配置地图参数里的作业票地图
        selectIsMapById(this.sysAttrValue).then((res) => {
          console.log(res, '作业票地图 图片数据')
          this.jobconfig = res.data
        })
      })

      const dataMap = {
        pages: 1,
        size: -1,
        mapId: 4
      }
      getIsMapPointPage(dataMap).then((res) => {
        console.log(res, '作业票地图岗位位置信息接口')
        this.jobconfigPoint = res.data
      })
    },
    //辅助函数计算超时时间
    calculateTimeDifference(occurTime) {
      if (!occurTime) return '未知'

      // 将时间字符串转换为 Date 对象
      const occurDate = new Date(occurTime)
      if (isNaN(occurDate.getTime())) {
        console.error('Invalid date format:', occurTime)
        return '未知'
      }

      const currentTime = new Date().getTime()
      const timeDifference = (currentTime - occurDate.getTime()) / (1000 * 60) // 转换为分钟

      if (timeDifference < 1) {
        return `${(timeDifference * 60).toFixed(0)}秒`
      } else if (timeDifference < 60) {
        return `${timeDifference.toFixed(1)}分钟`
      } else {
        const hours = Math.floor(timeDifference / 60)
        const minutes = (timeDifference % 60).toFixed(0)
        return `${hours}小时${minutes}分钟`
      }
    },

    // mars岗位树点击事件
    handleNodeClick(data) {
      this.queryParams.workstationId = data.id //这里给查询传递参数
      this.queryParams.workstationName = data.label //这里给回显框显示中文
    },
    /** 转换mars岗位树数据为树形结构 */
    transformToTree(records) {
      const recordMap = {} // 创建一个 Map 以存储所有记录
      const tree = [] // 最终返回的树形结构

      // 初始化所有记录到 Map
      records.forEach((record) => {
        recordMap[record.workstationId] = {
          id: record.workstationId,
          label: record.workstationName,
          children: []
        }
      })

      // 遍历记录并构建树
      records.forEach((record) => {
        const parentId = record.parentId

        if (parentId === '0') {
          // 如果是顶层节点，直接添加到树中
          tree.push(recordMap[record.workstationId])
        } else if (recordMap[parentId]) {
          // 如果有父节点，则将当前节点加入父节点的 children 中
          recordMap[parentId].children.push(recordMap[record.workstationId])
        }
      })

      return tree
    },
    // mars岗位数深层次遍历
    findNodeById(nodes, targetId) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.id === targetId) {
          return node
        }
        if (node.children && node.children.length > 0) {
          const foundNode = this.findNodeById(node.children, targetId)
          if (foundNode) {
            return foundNode
          }
        }
      }
      return null
    },
    /** 转换mars岗位数据结构 */
    Marsnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.workstationId,
        label: node.workstationName,
        children: node.children
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 岗位查询 清除事件
    handleClear() {
      this.queryParams.workstationId = ''
      this.queryParams.workstationName = ''
      this.getList()
    },

    // 物资柜跳转详情
    handleCabinetClick(cabinet) {
      this.$router.push({
        path: '/mes/material/lockers/DetailsIndex',
        query: {
          cabinetId: cabinet.cabinetId,
          cabinetName: cabinet.cabinetName
        }
      })
      console.log(cabinet, '地图跳转详情拿到的')
    },
    // 物资柜列表跳转详情
    handleLook(row) {
      this.$router.push({
        path: '/mes/material/lockers/DetailsIndex',
        query: { cabinetId: row.cabinetId, cabinetName: row.cabinetName }
      })
      console.log('列表详情')
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        cabinetCode: '',
        cabinetName: '',
        workstationId: '',
        remark: '',
        cabinetPicture: ''
      }

      this.resetForm('form')
      this.autoGenFlag = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTime = ''
      this.queryParams.cabinetCode = null
      this.queryParams.cabinetName = null
      this.queryParams.cabinetId = null
      this.queryParams.status = null
      this.resetForm('queryForm')

      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.cabinetId)
      this.codes = selection.map((item) => item.cabinetCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.form.workstationId = null
      this.title = '新增物资柜信息'
      this.optType = 'add'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      selectMaterialsCabinetById(row.cabinetId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改物资柜信息'
        this.optType = 'edit'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.cabinetId != null) {
            updateMaterialsCabinet(this.form).then((response) => {
              console.log(response, '修改返回')
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addMaterialsCabinet(this.form).then((response) => {
              console.log(response, '新增返回')
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const cabinetIds = row.cabinetId || this.ids
      const cabinetCodes = row.cabinetCode || this.codes
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(function() {
          return deleteMaterialsCabinet(cabinetIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    //图标上传成功
    handleIconUplaoded(imgUrl) {
      this.form.cabinetPicture = imgUrl[0].url
    },
    // 图标移除
    handleIconRemoved(imgUrl) {
      this.form.cabinetPicture = null
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode('MATERIALS_CABINET').then((response) => {
          this.form.cabinetCode = response
        })
      } else {
        this.form.cabinetCode = null
      }
    }
  }
}
</script>
<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
</style>
<style scoped lang="scss">
.deptXLG {
  position: absolute;
  width: 65px;
  height: 25px;

  background: #70b26f;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}


//图片放大
.img-box {
  width: 75px;
  height: 75px;
  position: relative;

  #eyeicon {
    display: none;
  }
}

.img-box:hover {
  background: #000;

  .images {
    opacity: 0.6;
  }

  #eyeicon {
    display: block;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 100;
    color: white;
    pointer-events: none;
  }
}

.el-input-width {
  width: 380px !important;
}

.app-container {
  width: 100%;
  height: 100%;
  // background: green;
  .CabinetListcon {
    width: 100%;
    height: 100%;
    display: flex;
    // background: pink;
    .left {
      width: 15%;
      height: 100%;
      margin-right: 10px;
      // background: rgb(175, 214, 175);
      .deptTree {
        width: 100%;
        height: 90%;
        // background: rgb(199, 252, 247);
      }
    }

    .right {
      width: 83%;
      height: 100%;
      // background: yellow;
    }
  }
}
</style>