添加滑条

快乐的昕的电脑

2025-10-09 274cafb66b543b8d3cfe651c3c7783dd3d3a01b5

 components/mold.vue

@@ -12,6 +12,16 @@
         <view class="form-cell">
            <label class="form-label">设置使用上限：</label>
            <input class="input" type="number" v-model="useLimitInput" placeholder="每次换刀后手填" :disabled="!selectedToolNo" />
            <!-- 滑条控件 -->
            <input type="range"
                  min="0"
                  max="10000"
                  step="1"
                  v-model="useLimitInput"
                  :disabled="!selectedToolNo"
                  class="slider"
                  style="width: 160px; margin: 0 8px;" />
            <span style="min-width: 50px; display: inline-block;">{{ useLimitInput }}</span>
            <button class="btn-blue" @click="setUseLimit" :disabled="!selectedToolNo || !useLimitInput">保存上限</button>
         </view>
         <view class="form-cell">
@@ -42,8 +52,15 @@
               </button>
            </view>
            <view class="dialog-actions">
               <button class="btn-blue" @click="confirmTool">确定</button>
               <button class="btn-disabled" @click="showToolDialog = false">取消</button>
               <div style="display: flex; align-items: center;">
                  <button class="btn-blue" @click="prevPage" :disabled="pageIndex === 1">上一页</button>
                  <span style="margin: 0 12px;">第{{ pageIndex }}页 / 共{{ totalPages }}页</span>
                  <button class="btn-blue" @click="nextPage" :disabled="pageIndex === totalPages">下一页</button>
               </div>
               <div>
                  <button class="btn-blue" @click="confirmTool">确定</button>
                  <button class="btn-disabled" @click="showToolDialog = false">取消</button>
               </div>
            </view>
         </view>
      </view>
@@ -97,11 +114,10 @@
   export default {
      data() {
         return {
            toolList: [
               // 示例数据，实际应从后端接口获取
               { no: 'T22050338', name: 'm1.5合金长刀', model: 'xxx' },
               { no: 'T22050337', name: 'm0.546合金长刀', model: 'yyy' }
            ],
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            toolList: [],
            selectedToolNo: '',
            toolName: '',
            toolModel: '',
@@ -115,11 +131,49 @@
            ]
         };
      },
      computed: {
         totalPages() {
            return Math.ceil(this.total / this.pageSize) || 1;
         }
      },
      methods: {
         searchTool() {
            this.filteredTools = this.toolList.filter(t =>
               t.no.includes(this.searchKey) || t.name.includes(this.searchKey)
            );
         async fetchTools(searchKey) {
            const res = await this.$post({
               url: '/MesCutterLedger/QueryTools',
               data: JSON.stringify({
                  searchKey,
                  pageIndex: this.pageIndex,
                  pageSize: this.pageSize
               }),
               headers: { 'Content-Type': 'application/json' }
            });
            if (res.status === 0) {
               this.filteredTools = res.data.tbBillList.map(t => ({
                  no: t.cutterId || t.no,
                  name: t.cutterName || t.name,
                  model: t.cutterModel || t.model
               }));
               this.total = res.data.total || 0; // 假设后端返回总数
            } else {
               this.$showMessage(res.message || '查询失败');
            }
         },
         //翻页
         async prevPage() {
            if (this.pageIndex > 1) {
               this.pageIndex--;
               await this.fetchTools(this.searchKey);
            }
         },
         async nextPage() {
            if (this.pageIndex < this.totalPages) {
               this.pageIndex++;
               await this.fetchTools(this.searchKey);
            }
         },
         async searchTool() {
            this.pageIndex = 1; // 搜索时重置到第一页
            await this.fetchTools(this.searchKey);
         },
         selectTool(tool) {
            this.selectedToolNo = tool.no;
@@ -141,11 +195,15 @@
            this.selectedToolNo = '';
            this.toolName = '';
            this.toolModel = '';
         },
         setUseLimit() {
            // 保存使用上限逻辑，实际应调用后端接口
            this.$showMessage('使用上限已保存（示例）');
         }
      },
      mounted() {
         // 实际应从后端加载刀具目录和使用记录
         this.filteredTools = this.toolList;
         // 页面加载时拉取全部刀具
         this.fetchTools('');
      }
   };
</script>
@@ -289,4 +347,8 @@
   .tool-desc {
      margin-top: 2vh;
   }

   .slider {
      vertical-align: middle;
   }
</style>