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
      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: 100%; height: 100%"
          src="@/assets/images/marsBg.png"
          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)"
        />

        <!-- deptCCO 区域的图标 -->
        <!--        <img-->
        <!--          v-for="(cabinet, index) in COCOTicketListPage"-->
        <!--          :key="cabinet.cabinetId"-->
        <!--          :style="{-->
        <!--            width: '35px',-->
        <!--            height: '35px',-->
        <!--            position: 'absolute',-->
        <!--            cursor: 'pointer',-->
        <!--            // 图标垂直居中-->
        <!--            top: `${deptCCOCenter.top - 53}px`,-->
        <!--            // 图标水平居中，动态计算偏移-->
        <!--            left: `${-->
        <!--              deptCCOCenter.left - -->
        <!--              (COCOTicketListPage.length * 35 +-->
        <!--                (COCOTicketListPage.length - 1) * 5) /-->
        <!--                2 +-->
        <!--              index * 40-->
        <!--            }px`,-->
        <!--          }"-->
        <!--          :src="require('@/assets/images/table_map2.jpg')"-->
        <!--          alt=""-->
        <!--          @click="handleCabinetClick(cabinet)"-->
        <!--        />-->
        <div class="deptXLG">LD</div>
        <!--        <div class="deptCCO">CCO</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"
                  fit="cover"
                >
                </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";

export default {
  name: "Team",
  components: {
    Treeselect,
  },
  dicts: ["material_status", "cabinet_status",'exception_reason'],
  data() {
    return {
      //自动生成编码
      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岗位
      COCOTicketListPage: [], //CCO岗位
      scaleFactor: 1, // 缩放比例，初始值为1
      deptXLGPosition: {
        left: 500,
        top: 260,
        width: 65,
        height: 25,
      },
      deptCCOPosition: {
        left: 670,
        top: 480,
        width: 65,
        height: 25,
      },
      workstationOptions: [], //岗位
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {
    deptXLGCenter() {
      return {
        left: this.deptXLGPosition.left + this.deptXLGPosition.width / 2,
        top: this.deptXLGPosition.top + this.deptXLGPosition.height / 2,
      };
    },
    deptCCOCenter() {
      return {
        left: this.deptCCOPosition.left + this.deptCCOPosition.width / 2,
        top: this.deptCCOPosition.top + this.deptCCOPosition.height / 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();
  },

  methods: {
    /** 查询物资柜信息列表 */
    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;
      });
    },
    getOtherList() {
      const data = {
        pasge: 1,
        size: -1,
      };
      getMaterialsCabinet(data).then((response) => {
        console.log(response, "所有物资柜");
        this.TicketListPage = response.data.records.filter((item) => {
          return item.workstationId == "6";
        });
        this.COCOTicketListPage = response.data.records.filter((item) => {
          return item.workstationId == "7";
        });
        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("未找到匹配的节点");
        }
      });
    },
    // 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('是否确认删除编号为"' + cabinetCodes + '"的数据项？')
        .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;
  left: 500px;
  top: 260px;
  background: #70b26f;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.deptCCO {
  position: absolute;
  width: 65px;
  height: 25px;
  left: 670px;
  top: 480px;
  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>