添加刀具查询

快乐的昕的电脑

2025-10-09 cb0f0660986138df8cd2b268124edfe9c06b39e3

 components/mold.vue

@@ -1,25 +1,23 @@
<template>
   <view class="page">
      <!-- 刀具选择区 -->
      <view class="top-section">
         <view class="form-row">
      <view class="top-section-grid">
         <view class="form-cell">
            <label class="form-label">选择刀具编号：</label>
            <select v-model="selectedToolNo" class="form-select">
               <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-row">
         <view class="form-cell">
            <label class="form-label">设置使用上限：</label>
            <input class="input" type="number" v-model="useLimitInput" placeholder="每次换刀后手填" :disabled="!selectedToolNo" />
            <button class="btn-blue" @click="setUseLimit" :disabled="!selectedToolNo || !useLimitInput">保存上限</button>
         </view>
         <view class="form-row">
         <view class="form-cell">
            <label class="form-label">刀具名称：</label>
            <input class="input" v-model="toolName" placeholder="刀具带出" disabled />
         </view>
         <view class="form-row">
            <label class="form-label">规格型号：</label>
            <label class="form-label" style="margin-left: 16px;">规格型号：</label>
            <input class="input" v-model="toolModel" placeholder="刀具带出" disabled />
         </view>
      </view>
@@ -110,7 +108,7 @@
            showToolDialog: false,
            searchKey: '',
            filteredTools: [],
                useLimitInput: '',
            useLimitInput: '',
            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: '正常' }
@@ -118,10 +116,26 @@
         };
      },
      methods: {
         searchTool() {
            this.filteredTools = this.toolList.filter(t =>
               t.no.includes(this.searchKey) || t.name.includes(this.searchKey)
            );
         async fetchTools(searchKey) {
            // 实际项目中请替换为你的后端接口地址
            const res = await fetch('/api/QueryTools', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(searchKey)
            });
            const data = await res.json();
            if (data.status === 0) {
               this.filteredTools = data.data.tbBillList.map(t => ({
                  no: t.cutterId || t.no,
                  name: t.cutterName || t.name,
                  model: t.cutterModel || t.model
               }));
            } else {
               this.$showMessage(data.message || '查询失败');
            }
         },
         async searchTool() {
            await this.fetchTools(this.searchKey);
         },
         selectTool(tool) {
            this.selectedToolNo = tool.no;
@@ -143,66 +157,51 @@
            this.selectedToolNo = '';
            this.toolName = '';
            this.toolModel = '';
         },
         setUseLimit() {
            // 保存使用上限逻辑，实际应调用后端接口
            this.$showMessage('使用上限已保存（示例）');
         }
      },
      mounted() {
         // 实际应从后端加载刀具目录和使用记录
         this.filteredTools = this.toolList;
         // 页面加载时拉取全部刀具
         this.fetchTools('');
      }
   };
</script>

<style scoped>
    .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 1.2vh;
    }

    .form-label {
        width: 120px;
        font-weight: bold;
    }

    .form-select {
        width: 220px;
        padding: 1vh;
        font-size: 1.1vw;
        margin-right: 10px;
    }

    .button-row {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin: 2vh 0;
    }

   .page {
      padding: 2vh;
   .top-section-grid {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
   }

   .top-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap: 32px;
      margin-bottom: 2vh;
   }

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

   .form-label {
      width: 90px;
      font-weight: bold;
   }

   .input {
      padding: 1vh;
      font-size: 1.5vw;
      font-size: 1.1vw;
      border: 1px solid #ccc;
      width: 16vw;
      width: 10vw;
      margin-right: 8px;
   }

   .form-select {
      width: 12vw;
      padding: 1vh;
      font-size: 1.1vw;
      margin-right: 8px;
   }

   .btn-blue {
@@ -210,19 +209,32 @@
      color: white;
      border: none;
      padding: 8px 18px;
      margin-left: 10px;
      margin-left: 8px;
      border-radius: 5px;
      cursor: pointer;
   }

   .btn-disabled {
      background-color: #ccc;
   .button-row {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin: 2vh 0;
   }

   .save-btn, .cancel-btn {
      width: 28%;
      padding: 1.5vh;
      background-color: #00A2E9;
      color: white;
      font-size: 1.2vw;
      border: none;
      padding: 8px 18px;
      margin-left: 10px;
      text-align: center;
      border-radius: 5px;
      cursor: not-allowed;
   }

   .cancel-btn {
      background-color: #ccc;
      color: #333;
   }

   .dialog-overlay {
@@ -292,22 +304,6 @@
      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.2vw;
      border: none;
      text-align: center;
      border-radius: 5px;
   }

   .cancel-btn {
      background-color: #ccc;
      color: #333;
   }

   .tool-desc {