新增物资借出归还模拟页面修复部分bug

src/api/mes/material/information.js

@@ -59,3 +59,12 @@ export function updateMaterialsBinding(data) {
     data: data
   })
 }
+///dev-api/iscs/materials/updateIsMaterialById 借出/归还物资(借出参数materialsId-loanState-loanUserId)（归还参数materialsId-loanState-restitutionToId-restitutionUserId）
+//物资借出与归还
+export function updateIsMaterialById(data) {
+  return request({
+    url: '/iscs/materials/updateIsMaterialById',
+    method: 'post',
+    data: data
+  })
+}

src/views/mes/email/emailNotify/index.vue

@@ -367,7 +367,7 @@ export default {
       this.reset();
       this.open = true;
       this.isEdit = false;
-      this.title = "添加邮件模板";
+      this.title = "添加邮件提醒";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -384,7 +384,7 @@ export default {
 
         this.timeValues.reminderTime = convertTime(response.data.reminderTime);
         this.open = true;
-        this.title = "修改邮件模板";
+        this.title = "修改邮件提醒";
       });
     },
     // 时间转换

src/views/mes/material/Lending/index.vue

@@ -1,56 +1,302 @@
 <template>
   <div class="mapBox">
-    <div id="container" ref="container" style=""></div>
+    <el-select
+      style="width: 215px;margin: 20px"
+      v-model="queryParams.materialsCabinetId"
+      placeholder="请选择物资柜"
+      @change="handleCabinetChange"
+    >
+      <el-option
+        v-for="dict in cabinets"
+        :key="dict.value"
+        :label="dict.label"
+        :value="dict.value"
+      />
+    </el-select>
+    <div id="container" ref="container" style="width: 100%; height: 90vh; background-color: white;"></div>
   </div>
 </template>
+
 <script>
 import Konva from "konva";
+import { getIsMaterialsCabinets, listMaterials, updateIsMaterialById } from '@/api/mes/material/information'
+
 export default {
   name: 'Lending',
-  data(){
+  data() {
     return {
-      stage:null,
-      layer:null,
-      bgLayer:null,
-    }
+      stage: null,
+      layer: null,
+      bgLayer: null,
+      list: [], // 三号柜子的物资
+      listInCabinet: [], // 存储物资柜内的物资
+      listOutOfCabinet: [], // 存储物资柜外的物资
+      cabinets: [], // 物资所属柜
+      queryParams: {
+        current: 1,
+        size: -1,
+        materialsCabinetId: null,
+        loanState:null
+      },
+      materialElements: [], // 存储物资图标对象
+    };
   },
-  mounted(){
+  mounted() {
     this.$nextTick(() => {
-      this.initKonva()
-    })
+      this.initKonva();
+      this.materialsCabinets()
+    });
   },
-  methods:{
-    initKonva(){
-      this.stage=new Konva.Stage({
-        container:this.$refs.container,
-        width:1200,
-        height:1000,
-      })
-      this.bgLayer=new Konva.Layer()
-      const bgImage=new Image()
-      bgImage.src=require('@/assets/images/table.png');
-      bgImage.onLoad=()=>{
-        const KonvaImage=new Konva.Image({
-          x:100,
-          y:25,
-          image:bgImage,
-          width:500,
-          height:500,
-          draggable:false,
+  methods: {
+    // 获取物资柜信息
+    materialsCabinets() {
+      getIsMaterialsCabinets(this.queryParams).then((response) => {
+        if (response?.data?.records) {
+          this.cabinets = response.data.records.map((item) => ({
+            value: item.cabinetId,
+            label: item.cabinetName
+          }));
+        }
+      });
+    },
+    handleCabinetChange() {
+      // 清空之前渲染的物资元素
+      this.clearMaterialsFromLayer();
+
+      // 获取柜内和柜外物资
+      Promise.all([this.getMaterialsInCabinet(), this.getMaterialsOutOfCabinet()])
+        .then(() => {
+          // 在所有数据获取完成后，统一渲染物资
+          this.addMaterialsToLayer();
+        });
+    },
+
+    getMaterialsInCabinet() {
+      this.queryParams.loanState = '1'; // 设置查询条件为物资柜内
+      return listMaterials(this.queryParams).then((res) => {
+        this.listInCabinet = res.data.records;
+      });
+    },
+
+    getMaterialsOutOfCabinet() {
+      this.queryParams.loanState = '0'; // 设置查询条件为物资柜外
+      return listMaterials(this.queryParams).then((res) => {
+        this.listOutOfCabinet = res.data.records;
+      });
+    },
+    // 初始化Konva舞台
+    initKonva() {
+      this.stage = new Konva.Stage({
+        container: this.$refs.container,
+        width: 1200,
+        height: 1000,
+      });
+
+      this.bgLayer = new Konva.Layer();
+      const bgImage = new Image();
+      bgImage.src = require('@/assets/images/table.png');
+      bgImage.onload = () => {
+        const konvaImage = new Konva.Image({
+          x: 600,
+          y: 25,
+          image: bgImage,
+          width: 500,
+          height: 700,
+          draggable: false,
         });
-        this.bgLayer.add(KonvaImage);
+        this.bgLayer.add(konvaImage);
         this.bgLayer.draw();
       };
       this.stage.add(this.bgLayer);
+    },
+
+    // 清除Konva图层中的所有物资元素
+    clearMaterialsFromLayer() {
+      if (!this.bgLayer) return;
+      const materialNodes = this.bgLayer.find('.material');
+      console.log('清除物资：', materialNodes);
+      materialNodes.forEach(node => node.destroy()); // 清除已渲染的物资元素
+      this.materialElements = []; // 清空已存储的物资图标对象
+      this.bgLayer.draw(); // 重新绘制图层
+    },
+
+    // 将物资添加到Konva图层
+    // 物资拖动结束时的处理
+    handleDragEnd(e) {
+      const materialId = e.target.getAttr('materialId'); // 获取物资ID
+      const position = e.target.getClientRect(); // 获取物资当前的位置信息
+
+      // 获取物资的原始位置状态
+      const material = e.target.getAttr('material'); // 获取物资对象
+      const isInCabinet = material.inCabinet; // 判断物资是否在柜子内（根据你存储的状态）
+
+      // 判断物资是否从柜子外进入柜子内
+      if (position.x < 600 || position.x > 1100 || position.y < 25 || position.y > 725) {
+        // 物资移出柜子
+        if (isInCabinet) {
+          // 物资从柜子内移出
+          this.updateMaterialLoan(materialId, 106);
+          material.inCabinet = false; // 更新物资状态
+        }
+      } else {
+        // 物资进入柜子区域
+        if (!isInCabinet) {
+          // 物资从柜子外进入柜子内
+          this.updateMaterialReturn(materialId, this.queryParams.materialsCabinetId, 106);
+          material.inCabinet = true; // 更新物资状态
+        }
+      }
+    },
+
+    // 将物资添加到Konva图层
+    addMaterialsToLayer() {
+      if (!this.bgLayer) return;
+
+      const itemWidth = 60;
+      const itemHeight = 60;
+      const spacing = 40;
+
+      // 清除之前的物资元素
+      this.clearMaterialsFromLayer();
+
+      // 渲染柜内物资
+      this.listInCabinet.forEach((material, index) => {
+        const x = 720 + (index % 3) * (itemWidth + spacing);
+        const y = 120 + Math.floor(index / 3) * (itemHeight + spacing);
+
+        const materialImage = new Image();
+        materialImage.src = material.materialsTypeIcon;
+        materialImage.onload = () => {
+          const group = new Konva.Group({
+            x: x,
+            y: y,
+            draggable: true,
+            name: 'material',
+            materialId: material.materialsId,
+            material: material,
+          });
+
+          const konvaMaterialImage = new Konva.Image({
+            image: materialImage,
+            width: itemWidth,
+            height: itemHeight,
+          });
+
+          const text = new Konva.Text({
+            x: 0,
+            y: itemHeight + 5,
+            text: material.materialsName,
+            fontSize: 12,
+            fill: 'black',
+            align: 'center',
+            width: itemWidth,
+          });
+
+          group.add(konvaMaterialImage);
+          group.add(text);
 
+          // 给物资设置初始的柜内状态
+          material.inCabinet = true;  // 设置物资最初处于柜子内
+
+          group.on('dragend', this.handleDragEnd); // 添加dragend事件监听
+
+          this.bgLayer.add(group);
+          this.bgLayer.draw();
+          this.materialElements.push(group);
+        };
+      });
+
+      // 渲染柜外物资
+      this.listOutOfCabinet.forEach((material, index) => {
+        const x = 50 + (index % 3) * (itemWidth + spacing); // 左侧显示柜外物资
+        const y = 120 + Math.floor(index / 3) * (itemHeight + spacing);
+
+        const materialImage = new Image();
+        materialImage.src = material.materialsTypeIcon;
+        materialImage.onload = () => {
+          const group = new Konva.Group({
+            x: x,
+            y: y,
+            draggable: true,
+            name: 'material',
+            materialId: material.materialsId,
+            material: material,
+          });
+
+          const konvaMaterialImage = new Konva.Image({
+            image: materialImage,
+            width: itemWidth,
+            height: itemHeight,
+          });
+
+          const text = new Konva.Text({
+            x: 0,
+            y: itemHeight + 5,
+            text: material.materialsName,
+            fontSize: 12,
+            fill: 'black',
+            align: 'center',
+            width: itemWidth,
+          });
+
+          group.add(konvaMaterialImage);
+          group.add(text);
+
+          // 给物资设置初始的柜外状态
+          material.inCabinet = false;  // 设置物资最初处于柜子外
+
+          group.on('dragend', this.handleDragEnd); // 添加dragend事件监听
+
+          this.bgLayer.add(group);
+          this.bgLayer.draw();
+          this.materialElements.push(group);
+        };
+      });
+    },
+
+
+    // 领取物资的方法
+    updateMaterialLoan(materialId, loanUserId) {
+      const params = {
+        materialsId: materialId,
+        loanState: 0,  // 物资状态为 "借出"
+        loanUserId: loanUserId
+      };
+
+      updateIsMaterialById(params).then(response => {
+        if (response.data.success) {
+          console.log('物资领取成功');
+        } else {
+          console.error('物资领取失败');
+        }
+      });
+    },
+
+// 归还物资的方法
+    updateMaterialReturn(materialId, restitutionToId, restitutionUserId) {
+      const params = {
+        materialsId: materialId,
+        loanState: 1,  // 物资状态为 "归还"
+        restitutionToId: restitutionToId,
+        restitutionUserId: restitutionUserId
+      };
+
+      updateIsMaterialById(params).then(response => {
+        if (response.data.success) {
+          console.log('物资归还成功');
+        } else {
+          console.error('物资归还失败');
+        }
+      });
     }
   }
-}
+};
 </script>
+
 <style scoped lang="scss">
 .mapBox {
   width: 100%;
   height: 100%;
-  background-color: #f5f5f5;
+  //background-color: pink;
 }
 </style>

src/views/mes/material/instructions/index.vue

@@ -462,6 +462,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map((item) => item.instructionsId)
+      this.multiple = !selection.length
     },
 
     /** 新增按钮操作 */

src/views/mes/material/materialinformation/index.vue

@@ -177,19 +177,19 @@
         >绑定物资
         </el-button>
       </el-col>
-      <!--      <el-col :span="1.5">-->
-      <!--        <el-button-->
-      <!--          v-no-more-click-->
-      <!--          type="danger"-->
-      <!--          plain-->
-      <!--          icon="el-icon-delete"-->
-      <!--          size="mini"-->
-      <!--          :disabled="multiple"-->
-      <!--          @click="handleDelete"-->
-      <!--          v-hasPermi="['iscs:materials:remove']"-->
-      <!--        >批量删除-->
-      <!--        </el-button>-->
-      <!--      </el-col>-->
+            <el-col :span="1.5">
+              <el-button
+                v-no-more-click
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['iscs:materials:remove']"
+              >批量删除
+              </el-button>
+            </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"

src/views/mes/material/standard/index.vue

@@ -145,7 +145,7 @@
           <el-input
             style="width: 350px"
             v-model="form.propertyName"
-            placeholder="请输入名称"
+            placeholder="请输入物资规格种类"
           />
         </el-form-item>
         <el-form-item label="备注" prop="remark">

src/views/mes/material/typeofmaterial/index.vue

@@ -440,7 +440,7 @@ export default {
       form: {
         parentId: 0,
         ancestors: '0',
-        restitutionRequired: 2, // 默认为 "不需要归还"
+        // restitutionRequired: 2, // 默认为 "不需要归还"
         status: 'y' // 默认为 "启用"
       },
       EditId: null, //编辑传递id
@@ -597,8 +597,8 @@ export default {
         this.form.parentId = null
         this.form.ancestors = 0
       }
-      this.form.restitutionRequired = 2
-      this.form.status = 'y'
+      // this.form.restitutionRequired = 2
+      // this.form.status = 'y'
       this.open = true
       this.title = '新增物资类型'
     },