换模界面改为刀具管理

快乐的昕的电脑

2025-10-08 ffe32b53fdd713391a39ef6cea7d157f21ddc888

 components/mold.vue

@@ -1,322 +1,286 @@
<template>
   <view class="page">
		
      <view>
         <h4>说明:多工单模式时换模是统一的</h4>
      </view>
      <view class="refresh-btn" @click="handleRefresh">刷新</view>
      <!-- 顶部表单部分 -->
      <!-- 顶部Tab栏（如有需要可保留） -->
      <!-- 刀具选择区 -->
      <view class="top-section">
         <view class="form-group">
            <label>模具编号：</label>
            <input class="input" v-model="order.moldId" placeholder="工单带出" disabled="true" />
            <label>选择刀具编号：</label>
            <select v-model="selectedToolNo">
               <option v-for="tool in toolList" :key="tool.no" :value="tool.no">{{ tool.no }} | {{ tool.name }}</option>
            </select>
            <button class="btn-blue" @click="showToolDialog = true">刀具目录</button>
         </view>
         <view class="form-group">
            <label>使用次数：</label>
            <input class="input" v-model="order.moldInseptionQty" placeholder="模具带出" disabled="true" />
            <label>刀具名称：</label>
            <input class="input" v-model="toolName" placeholder="刀具带出" disabled />
         </view>
         <view class="form-group">
            <label>提醒保养次数：</label>
            <input class="input" v-model="order.modlLifeWorning" placeholder="模具带出" disabled="true" />
            <label>规格型号：</label>
            <input class="input" v-model="toolModel" placeholder="刀具带出" disabled />
         </view>
      </view>

      <!-- 中间状态部分，上下结构 -->
      <view class="middle-section">
         <view class="item">
            <button class="btn-disabled">换模开始（=前工单完工）</button>
            <input class="txt-inp" v-model="startTime" placeholder="输入换模开始时间" />
         </view>
         <view class="item">
            <button @click="stateCheck(1)" class="btn-blue">换模完成（点击按钮）</button>
            <input class="txt-inp" v-model="endTime" placeholder="点击换模完成写入" />
      <!-- 刀具目录弹窗 -->
      <view v-if="showToolDialog" class="dialog-overlay">
         <view class="dialog">
            <view class="form-group">
               <input v-model="searchKey" placeholder="输入刀具编码、名称模糊搜索" class="input" />
               <button class="btn-blue" @click="searchTool">搜索</button>
            </view>
            <view class="tool-list">
               <button v-for="tool in filteredTools" :key="tool.no" class="tool-btn" @click="selectTool(tool)">
                  {{ tool.no }} | {{ tool.name }}
               </button>
            </view>
            <view class="dialog-actions">
               <button class="btn-blue" @click="confirmTool">确定</button>
               <button class="btn-disabled" @click="showToolDialog = false">取消</button>
            </view>
         </view>
      </view>

      <!-- 底部保存/取消按钮 -->
      <!-- 刀具使用记录表格 -->
      <view class="table-section">
         <table>
            <thead>
               <tr>
                  <th>刀具编号</th>
                  <th>刀具名称</th>
                  <th>上刀时间</th>
                  <th>上刀计数</th>
                  <th>下刀时间</th>
                  <th>下刀计数</th>
                  <th>使用次数</th>
                  <th>使用上限</th>
                  <th>寿命比%</th>
                  <th>寿命预警值</th>
                  <th>预警状态</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="item in toolRecords" :key="item.id">
                  <td>{{ item.no }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.upTime }}</td>
                  <td>{{ item.upCount }}</td>
                  <td>{{ item.downTime }}</td>
                  <td>{{ item.downCount }}</td>
                  <td>{{ item.useCount }}</td>
                  <td>{{ item.useLimit }}</td>
                  <td>{{ item.lifePercent }}</td>
                  <td>{{ item.lifeWarn }}</td>
                  <td :class="item.warnStatus === '警告' ? 'warn' : ''">{{ item.warnStatus }}</td>
               </tr>
            </tbody>
         </table>
      </view>

      <!-- 上下刀按钮 -->
      <view class="bottom-section">
         <button class="save-btn" @click="save">保存并生效</button>
         <button class="save-btn" @click="handleUpTool">上刀提交</button>
         <button class="save-btn" @click="handleDownTool">下刀提交</button>
         <button class="cancel-btn" @click="cancel">取消</button>
      </view>

      <!-- 说明 -->
      <view class="tool-desc">
         <p style="color:red;">当前工单中，换了几次刀，就会产生几条数据。上刀时间、下刀时间在表中能看到。</p>
         <p style="color:red;">上刀时间和对应时间用生产计数器匹配，查出当时的生产数（累计计数）。</p>
         <p style="color:red;">寿命比预警值在刀具上，默认统一。</p>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         orderNo: String,
         orderId: Number,
         machineNo: String
      },
      data() {
         return {
            startTime: '',
            endTime: '',
            order: {},
            statusForm: {}
         }
      },
      created() {

         // let machine = uni.getStorageSync('machine');
         // let orderId = uni.getStorageSync('orderId');
         // let orderNo = uni.getStorageSync('orderNo');

         // if (orderId) {
         //    this.orderId = orderId;
         // } else {
         //    if (!this.orderId) {
         //       this.orderId = uni.getStorageSync('id');
         //    }

         // }

         // if (orderNo) {
         //    this.orderNo = orderNo;
         // } else {
         //    if (!this.orderNo) {
         //       this.orderNo = uni.getStorageSync('daa001');
         //    }
         // }

         // if (machine) {
         //    this.machineNo = machine;
         // } else {
         //    if (!this.machineNo) {
         //       this.machineNo = uni.getStorageSync('machineNo');
         //    }
         // }

         if (!this.orderId && !this.orderNo) {
            return;
         }

         this.getOrderById();

         this.findByOrderId();
            toolList: [
               // 示例数据，实际应从后端接口获取
               { no: 'T22050338', name: 'm1.5合金长刀', model: 'xxx' },
               { no: 'T22050337', name: 'm0.546合金长刀', model: 'yyy' }
            ],
            selectedToolNo: '',
            toolName: '',
            toolModel: '',
            showToolDialog: false,
            searchKey: '',
            filteredTools: [],
            toolRecords: [
               // 示例数据，实际应从后端接口获取
               { id: 1, no: 'T22050338', name: 'm1.5合金长刀', upTime: '7-13 9:00', upCount: 15, downTime: '7-13 19:00', downCount: 3115, useCount: 3100, useLimit: 8888, lifePercent: '34.88%', lifeWarn: '90%', warnStatus: '正常' }
            ]
         };
      },
      methods: {

         handleRefresh() {
            this.getOrderById();
            this.findByOrderId();
         searchTool() {
            this.filteredTools = this.toolList.filter(t =>
               t.no.includes(this.searchKey) || t.name.includes(this.searchKey)
            );
         },

         save() {
            if (!this.statusForm.id) {
               this.$showMessage("id为空，不允许推送");
               return;
            }

            this.$post({
               url: "/MesOrderSta/ChangeMoldTime",
               data: {
                  changeMoldStartTime: this.startTime,
                  changeMoldEndTime: this.endTime,
                  id: this.statusForm.id,
                  orderId: this.orderId,
                  machineNo: this.machineNo,
                  flag: this.flag
               }
            }).then(res => {
               if (res.data.tbBillList) {
                  this.$showMessage("保存成功");
                  this.findByOrderId();
						
                  uni.showToast({
                          icon: 'success',
                          title: '保存成功',
                          duration: 30001,
                      });
							
               } else {
                  this.$showMessage("保存失败");
                  this.cancel();
               }
            })
         selectTool(tool) {
            this.selectedToolNo = tool.no;
            this.toolName = tool.name;
            this.toolModel = tool.model;
         },
         confirmTool() {
            this.showToolDialog = false;
         },
         handleUpTool() {
            // 上刀提交逻辑，调用后端接口
            this.$showMessage('上刀提交成功（示例）');
         },
         handleDownTool() {
            // 下刀提交逻辑，调用后端接口
            this.$showMessage('下刀提交成功（示例）');
         },
         cancel() {
            this.startTime = this.statusForm.changeMoldStartTime;
            this.endTime = this.statusForm.changeMoldEndTime;
         },
         getOrderById() {
            this.$post({
               url: "/Womdaa/GetWomdaaById",
               data: {
                  orderId: this.orderId,
                  orderNo: this.orderNo
               }
            }).then(res => {
               this.order = res.data.tbBillList;
            })
         },
         findByOrderId() {
            this.$post({
               url: "/MesOrderSta/FindByOrderNo",
               data: {
                  orderId: this.orderId,
                  orderNo: this.orderNo
               }
            }).then(res => {
               this.statusForm = res.data.tbBillList;
               this.startTime = res.data.tbBillList.changeMoldStartTime;
               this.endTime = res.data.tbBillList.changeMoldEndTime;
            })
         },
         stateCheck(item) {
            switch (item) {
               case 0:
                  this.startTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
                  this.endTime = this.statusForm.changeMoldEndTime;
                  break;
               case 1:
                  this.startTime = this.statusForm.changeMoldStartTime;
                  this.endTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
                  break;
            }
            this.flag = item;
            this.selectedToolNo = '';
            this.toolName = '';
            this.toolModel = '';
         }
      },
      mounted() {
         // 实际应从后端加载刀具目录和使用记录
         this.filteredTools = this.toolList;
      }
   };
</script>

<style scoped>
   /* 页面撑满窗体 */
   .page {
      padding: 2vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
   }

   .refresh-btn {
      position: absolute;
      top: -5px;
      right: 40px;
      background-color: #00A2E9;
      color: white;
      padding: 10px 15px;
      font-size: 35px;
      border-radius: 5px;
      cursor: pointer;
   }

   .refresh-btn:disabled {
      background-color: #ccc;
   }

   /* 顶部表单部分 */
   .top-section {
      /* display: flex;
      justify-content: space-between;
      margin-bottom: 2vh; */
      display: flex;
            margin-bottom: 2vh;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-between;
            align-items: baseline;
      flex-wrap: wrap;
      margin-bottom: 2vh;
   }

   .form-group {
      display: flex;
      align-items: center;
      margin-right: 2vw;
      margin-bottom: 1.5vh;
   }

   label {
      /* margin-right: 1vw;
      font-size: 1.6vw; */
      /* Larger font size for labels */
      float: left;
            /* margin-right: 1vw; */
            font-size: 1.6vw;
            margin-top: 24px;
   }

   .input {
      padding: 1vh;
      font-size: 1.5vw;
      /* Larger font size for input fields */
      border: 1px solid #ccc;
      width: 20vw;
      /* Set relative width for input fields */
   }

   /* 中间状态部分，上下布局 */
   .middle-section {
      display: flex;
      flex-direction: column;
      margin-bottom: 4vh;
   }

   .item {
      display: flex;
      flex-direction: row;
      /* Arrange items vertically */
      align-items: flex-start;
      margin-bottom: 2vh;
   }

   button {
      width: 100%;
      /* Full width for buttons */
      padding: 1.5vh;
      font-size: 1.5vw;
      /* Larger font size for buttons */
      border: none;
      text-align: center;
   }

   .btn-disabled {
      background-color: #ccc;
      color: white;
      width: 16vw;
   }

   .btn-blue {
      background-color: #00A2E9;
      color: white;
      border: none;
      padding: 8px 18px;
      margin-left: 10px;
      border-radius: 5px;
      cursor: pointer;
   }

   input {
      margin-top: 10px;
      padding: 10px;
      font-size: 14px;
   .btn-disabled {
      background-color: #ccc;
      color: white;
      border: none;
      padding: 8px 18px;
      margin-left: 10px;
      border-radius: 5px;
      cursor: not-allowed;
   }

   .dialog-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
   }

   .dialog {
      background: #fff;
      padding: 2vh 2vw;
      border-radius: 8px;
      width: 60vw;
   }

   .tool-list {
      display: flex;
      flex-wrap: wrap;
      margin: 1vh 0;
   }

   .tool-btn {
      margin: 5px 10px 5px 0;
      padding: 8px 16px;
      background: #f5f5f5;
      border: 1px solid #ccc;
      width: 100%;
      /* 输入框撑满宽度 */
      border-radius: 4px;
      cursor: pointer;
   }

   /* 底部保存/取消按钮 */
   .bottom-section {
   .dialog-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 4vh;
      margin-bottom: 4vh;
      margin-top: 2vh;
   }

   .save-btn,
   .cancel-btn {
      width: 48%;
      /* Half-width buttons */
   .table-section {
      margin: 2vh 0;
      overflow-x: auto;
   }

   table {
      width: 100%;
      border-collapse: collapse;
   }

   th, td {
      border: 1px solid #ccc;
      padding: 8px 4px;
      text-align: center;
      font-size: 1vw;
   }

   .warn {
      color: red;
      font-weight: bold;
   }

   .bottom-section {
      display: flex;
      justify-content: space-around;
      margin-top: 2vh;
   }

   .save-btn, .cancel-btn {
      width: 28%;
      padding: 1.5vh;
      background-color: #00A2E9;
      color: white;
      font-size: 1.6vw;
      /* Larger font size for save/cancel buttons */
      font-size: 1.2vw;
      border: none;
      text-align: center;
      border-radius: 5px;
   }

   .txt-inp {
      height: 8vh;
      padding: 1vh;
      font-size: 1.5vw;
      /* Increased font size */
      width: 100%;
      /* Full width for input in middle section */
      box-sizing: border-box;
   .cancel-btn {
      background-color: #ccc;
      color: #333;
   }

   .tool-desc {
      margin-top: 2vh;
   }
</style>