From 274cafb66b543b8d3cfe651c3c7783dd3d3a01b5 Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期四, 09 十月 2025 15:23:23 +0800
Subject: [PATCH] 添加滑条
---
components/mold.vue | 548 +++++++++++++++++++++++++++++-------------------------
1 files changed, 290 insertions(+), 258 deletions(-)
diff --git a/components/mold.vue b/components/mold.vue
index 53563b2..f855518 100644
--- a/components/mold.vue
+++ b/components/mold.vue
@@ -1,322 +1,354 @@
<template>
<view class="page">
-
- <view>
- <h4>璇存槑:澶氬伐鍗曟ā寮忔椂鎹㈡ā鏄粺涓�鐨�</h4>
- </view>
- <view class="refresh-btn" @click="handleRefresh">鍒锋柊</view>
- <!-- 椤堕儴琛ㄥ崟閮ㄥ垎 -->
- <view class="top-section">
- <view class="form-group">
- <label>妯″叿缂栧彿锛�</label>
- <input class="input" v-model="order.moldId" placeholder="宸ュ崟甯﹀嚭" disabled="true" />
+ <!-- 鍒�鍏烽�夋嫨鍖� -->
+ <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-group">
- <label>浣跨敤娆℃暟锛�</label>
- <input class="input" v-model="order.moldInseptionQty" placeholder="妯″叿甯﹀嚭" disabled="true" />
+ <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-group">
- <label>鎻愰啋淇濆吇娆℃暟锛�</label>
- <input class="input" v-model="order.modlLifeWorning" placeholder="妯″叿甯﹀嚭" disabled="true" />
+ <view class="form-cell">
+ <label class="form-label">鍒�鍏峰悕绉帮細</label>
+ <input class="input" v-model="toolName" placeholder="鍒�鍏峰甫鍑�" disabled />
+ <label class="form-label" style="margin-left: 16px;">瑙勬牸鍨嬪彿锛�</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>
- </view>
-
- <!-- 搴曢儴淇濆瓨/鍙栨秷鎸夐挳 -->
- <view class="bottom-section">
- <button class="save-btn" @click="save">淇濆瓨骞剁敓鏁�</button>
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <view class="button-row">
+ <button class="save-btn" @click="handleUpTool">涓婂垁鎻愪氦</button>
+ <button class="save-btn" @click="handleDownTool">涓嬪垁鎻愪氦</button>
<button class="cancel-btn" @click="cancel">鍙栨秷</button>
+ </view>
+
+ <!-- 鍒�鍏风洰褰曞脊绐� -->
+ <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">
+ <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>
+
+ <!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍� -->
+ <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="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: {}
- }
+ pageIndex: 1,
+ pageSize: 20,
+ total: 0,
+ toolList: [],
+ selectedToolNo: '',
+ toolName: '',
+ toolModel: '',
+ showToolDialog: false,
+ searchKey: '',
+ filteredTools: [],
+ 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: '姝ｅ父' }
+ ]
+ };
},
- 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;
+ computed: {
+ totalPages() {
+ return Math.ceil(this.total / this.pageSize) || 1;
}
-
- this.getOrderById();
-
- this.findByOrderId();
},
methods: {
-
- handleRefresh() {
- this.getOrderById();
- this.findByOrderId();
- },
-
- save() {
- if (!this.statusForm.id) {
- this.$showMessage("id涓虹┖锛屼笉鍏佽鎺ㄩ��");
- return;
+ 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 || '鏌ヨ澶辫触');
}
-
- 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();
- }
- })
+ },
+ //缈婚〉
+ 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;
+ 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;
+ this.selectedToolNo = '';
+ this.toolName = '';
+ this.toolModel = '';
},
- 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;
+ setUseLimit() {
+ // 淇濆瓨浣跨敤涓婇檺閫昏緫锛屽疄闄呭簲璋冪敤鍚庣鎺ュ彛
+ this.$showMessage('浣跨敤涓婇檺宸蹭繚瀛橈紙绀轰緥锛�');
}
+ },
+ mounted() {
+ // 椤甸潰鍔犺浇鏃舵媺鍙栧叏閮ㄥ垁鍏�
+ this.fetchTools('');
}
};
</script>
<style scoped>
- /* 椤甸潰鎾戞弧绐椾綋 */
- .page {
- padding: 2vh;
+ .top-section-grid {
display: flex;
- flex-direction: column;
- justify-content: space-between;
- box-sizing: border-box;
+ justify-content: center;
+ align-items: flex-end;
+ gap: 32px;
+ margin-bottom: 2vh;
}
- .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;
- }
-
- .form-group {
+ .form-cell {
display: flex;
align-items: center;
- 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;
+ .form-label {
+ width: 90px;
+ font-weight: bold;
}
.input {
padding: 1vh;
- font-size: 1.5vw;
- /* Larger font size for input fields */
+ font-size: 1.1vw;
border: 1px solid #ccc;
- width: 20vw;
- /* Set relative width for input fields */
+ width: 10vw;
+ margin-right: 8px;
}
- /* 涓棿鐘舵�侀儴鍒嗭紝涓婁笅甯冨眬 */
- .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;
+ .form-select {
+ width: 12vw;
+ padding: 1vh;
+ font-size: 1.1vw;
+ margin-right: 8px;
}
.btn-blue {
background-color: #00A2E9;
color: white;
+ border: none;
+ padding: 8px 18px;
+ margin-left: 8px;
+ border-radius: 5px;
+ cursor: pointer;
}
- input {
- margin-top: 10px;
- padding: 10px;
- font-size: 14px;
- border: 1px solid #ccc;
- width: 100%;
- /* 杈撳叆妗嗘拺婊″搴� */
- }
-
- /* 搴曢儴淇濆瓨/鍙栨秷鎸夐挳 */
- .bottom-section {
+ .button-row {
display: flex;
- justify-content: space-between;
- margin-top: 4vh;
- margin-bottom: 4vh;
+ justify-content: center;
+ gap: 32px;
+ margin: 2vh 0;
}
- .save-btn,
- .cancel-btn {
- width: 48%;
- /* Half-width buttons */
+ .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 */
+ .cancel-btn {
+ background-color: #ccc;
+ color: #333;
+ }
+
+ .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;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .dialog-actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2vh;
+ }
+
+ .table-section {
+ margin: 2vh 0;
+ overflow-x: auto;
+ }
+
+ table {
width: 100%;
- /* Full width for input in middle section */
- box-sizing: border-box;
+ 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;
+ }
+
+ .tool-desc {
+ margin-top: 2vh;
+ }
+
+ .slider {
+ vertical-align: middle;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3