界面样式优化

快乐的昕的电脑

8 小时以前 2c7a7d3eaf692fdfd04a30b42da2d94848cdc89a

 pages/index.vue

@@ -41,12 +41,9 @@
      <scroll-view class="content">
         <view v-if="currentTab === 7" class="tab-content">
            <view class="content">
               <!--<view class="top-right">
                  <button class="refresh-btn" @click="refresh">刷新</button>
               </view>-->
               <view>
               <!--<view>
                  <h4>一台机台只能选择一条工单（多选默认为最后一条）</h4>
               </view>
               </view>-->
               <view class="section top-section">
                  <view class="form-row align-row">
                     <input v-model="machineName"
@@ -54,8 +51,10 @@
                           type="text"
                           class="machine-name-box" />
                     <view class="form-group">
                        <label class="order-label">第一步选择工单:</label>
                        <button class="print-btn" @click="isShowTab">选择工单</button>
                        <label style="float: left;margin-top: 18px;font-size: 22px;">点击按钮筛选工单状态:</label>
                        <superwei-combox :candidates="engineeringNoMapList" placeholder="请选择" v-model="engineeringNo"
                                     @select="onEngineeringNoChange" class="picker"
                                     style="padding: 7px 46px;width: 650px;margin-right: 20px;"></superwei-combox>
                     </view>
                     <view class="top-right">
                        <button class="refresh-btn" @click="refresh">刷新</button>
@@ -63,77 +62,75 @@
                  </view>
               </view>

               <!--          &lt;!&ndash; 中部：运行状态-->
               <!-- 工单选择表格 -->
               <view class="section card">
                  <uni-table border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
                  <uni-table border stripe emptyText="暂无更多数据">
                     <uni-tr>
                        <uni-th align="center" class="th" style="width: 220px;">操作</uni-th>
                        <uni-th align="center" class="th" style="width: 100px;">工序</uni-th>
                        <uni-th align="center" class="th" style="width: 170px;">工单号</uni-th>
                        <uni-th align="center" class="th" style="width: 200px;">工单号</uni-th>
                        <uni-th align="center" class="th" style="width: 150px;">产品编码</uni-th>
                        <uni-th align="center" class="th" style="width: 190px;">产品名称</uni-th>
                        <uni-th align="center" class="th" style="width: 190px;">规格</uni-th>
                        <uni-th align="center" class="th" style="width: 80px;">已生产数量</uni-th>
                        <uni-th align="center" class="th" style="width: 80px;">未生产数量</uni-th>
                        <uni-th align="center" class="th" style="width: 80px;">派工数量</uni-th>
                        <uni-th align="center" class="th" style="width: 80px;">工单数量</uni-th>
                        <uni-th align="center" class="th" style="width: 240px;">产品名称</uni-th>
                        <uni-th align="center" class="th" style="width: 200px;">规格</uni-th>
                        <uni-th align="center" class="th" style="width: 150px;">已生产数量</uni-th>
                        <uni-th align="center" class="th" style="width: 150px;">未生产数量</uni-th>
                        <uni-th align="center" class="th" style="width: 150px;">派工数量</uni-th>
                        <uni-th align="center" class="th" style="width: 150px;">工单数量</uni-th>
                        <uni-th align="center" class="th" style="width: 90px;">工单状态</uni-th>
                        <uni-th align="center" class="th" style="width: 90px;">报工人</uni-th>
                        <uni-th align="center" class="th" style="width: 90px;">选择</uni-th>
                     </uni-tr>
                     <uni-tr v-for="(item, index) in isShowTableData" :key="index">
                     <uni-tr v-for="(item, index) in tableData" :key="index">
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.procName" /><!--工序-->
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa001 }}</div><!--工单号-->
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa002 }}</div><!--产品编码-->
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa003 }}</div><!--产品名称-->
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa004 }}</div><!--规格-->
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa011" /><!--已生产数量-->
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" /><!--未生产数量-->
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--派工数量-->
                        </uni-td>
                        <uni-td align="center">
                              <input class="form-input" disabled="true" type="text" v-model="item.daa008" /><!--工单数量-->
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa018" /><!--工单状态-->
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.staffName" /><!--报工人-->
                        </uni-td>
                        <uni-td>
                           <view class="uni-group">
                              <button class="select-btn" type="default" @click="toDetail(item)">
                                 转到主界面
                           <view class="operation-btns">
                              <button 
                                 :class="getStartBtnClass(item)" 
                                 :disabled="isStartBtnDisabled(item)"
                                 @click="handleStartWork(item)">
                                 {{ getStartBtnText(item) }}
                              </button>
                              <button 
                                 class="pause-btn" 
                                 :disabled="isPauseBtnDisabled(item)"
                                 @click="handlePauseWork(item)">
                                 暂停
                              </button>
                           </view>
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.procName" />
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa001 }}</div>
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa002 }}</div>
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa003 }}</div>
                        </uni-td>
                        <uni-td align="center">
                           <div class="form-input">{{ item.daa004 }}</div>
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa011" />
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" :value="(item.daa008 || 0) - (item.daa011 || 0)" />
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa008" />
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.daa018" />
                        </uni-td>
                        <uni-td align="center">
                           <input class="form-input" disabled="true" type="text" v-model="item.staffName" />
                        </uni-td>
                     </uni-tr>
                  </uni-table>
               </view>

               <view class="bottom-section">
                  <button class="cancel-btn" @click="cancel">清空重选</button>
               </view>

               <view>
                  <!--<text style="color: red;">
                  说明:只能同时开工一个工单。选择完成，点击保存选择。系统保留选中的工单。
                  如果要重选，点击清空重选功能。
               </text>-->
               </view>
            </view>
         </view>
@@ -334,6 +331,10 @@
            // 自动跳转相关
            autoRedirectTimer: null,
            autoRedirectTime: 5 * 60 * 1000, // 5分钟
				
            // 工单选择页面定时刷新
            autoRefreshTimer: null,
            autoRefreshInterval: 60 * 1000, // 1分钟
         };
      },
      created() {
@@ -360,6 +361,23 @@
      onShow() {
         this.refresh();
         this.resetAutoRedirectTimer();
         // 页面显示时加载工单列表
         if (this.currentTab === 7) {
            // 默认选中“待开工、未开工、暂停”
            this.engineeringNo = '待开工、未开工、暂停';
            this.engineeringNoMapList = [
               '待开工、未开工、暂停',
               '开工',
               '完工'
            ];
            this.getWomdaaByStatus();
            // 启动定时刷新
            this.startAutoRefresh();
         }
      },
      onHide() {
         // 页面隐藏时清除定时器
         this.stopAutoRefresh();
      },
      methods: {
            onRowClick(index) {
@@ -458,6 +476,17 @@
            this.getMachineList();
            this.getPrintInfo();
            this.getWomdaaIsShow();
            // 如果当前在工单选择页面，默认加载工单列表
            if (this.currentTab === 7) {
               // 默认选中“待开工、未开工、暂停”
               this.engineeringNo = '待开工、未开工、暂停';
               this.engineeringNoMapList = [
                  '待开工、未开工、暂停',
                  '开工',
                  '完工'
               ];
               this.getWomdaaByStatus();
            }
         },
         getPrintInfo() {
            var mac = "";
@@ -659,6 +688,11 @@
            // 当切换到工单选择页面(index === 7)时自动刷新
            if (index === 7) {
               this.refresh();
               // 启动定时刷新
               this.startAutoRefresh();
            } else {
               // 离开工单选择页面时停止定时刷新
               this.stopAutoRefresh();
            }
            // 重置自动跳转计时器
            this.resetAutoRedirectTimer();
@@ -791,6 +825,120 @@
                this.productCode = item.daa002; // 产品编码
                this.productSpec = item.daa004; // 产品规格
            this.currentTab = 0;
         },
			
         // 获取开工按钮的class
         getStartBtnClass(item) {
            const isSelected = this.isShowTableData.length > 0 && this.isShowTableData[0].daa001 === item.daa001;
            if (isSelected) {
               return 'start-btn start-btn-selected'; // 当前选中的工单，绿色
            }
            return 'start-btn';
         },
			
         // 判断开工按钮是否禁用
         isStartBtnDisabled(item) {
            // 如果已经有选中的工单，且当前项不是选中的工单，则禁用
            if (this.isShowTableData.length > 0 && this.isShowTableData[0].daa001 !== item.daa001) {
               return true;
            }
            return false;
         },
			
         // 判断暂停按钮是否禁用
         isPauseBtnDisabled(item) {
            // 如果已经有选中的工单，且当前项不是选中的工单，则禁用
            if (this.isShowTableData.length > 0 && this.isShowTableData[0].daa001 !== item.daa001) {
               return true;
            }
            // 如果还没有选中任何工单，也禁用暂停按钮
            if (this.isShowTableData.length === 0) {
               return true;
            }
            return false;
         },
			
         // 获取开工按钮文本
         getStartBtnText(item) {
            const isSelected = this.isShowTableData.length > 0 && this.isShowTableData[0].daa001 === item.daa001;
            if (isSelected) {
               return '转跳到主界面';
            }
            return '开工';
         },
			
         // 处理开工
         async handleStartWork(item) {
            // 判断当前工单是否已选中
            const isSelected = this.isShowTableData.length > 0 && this.isShowTableData[0].daa001 === item.daa001;
				
            if (isSelected) {
               // 如果已选中，则跳转到主界面
               this.toDetail(item);
            } else {
               // 如果未选中，则执行开工逻辑
               let orderSelect = [{
                  orderId: item.id,
                  orderNo: item.daa001
               }];
					
               let editDate = this.formatDate(new Date());
					
               this.$post({
                  url: "/MesOrderSelect/Add",
                  data: {
                     machineNo: this.machineNo,
                     editDate: editDate,
                     item: orderSelect
                  }
               }).then(res => {
                  if (res.data.tbBillList) {
                     this.getWomdaaIsShow();
                     uni.showToast({
                        title: '开工成功',
                        icon: 'success',
                        duration: 2000
                     });
                  }
               });
            }
         },
			
         // 处理暂停（使用清空重选的逻辑）
         async handlePauseWork(item) {
            if (!this.machineNo) {
               return;
            }
				
            // 直接用 flag 判断
            if (this.hasBindedCutterFlag) {
               uni.showToast({
                  title: '当前工单已绑定刀具，不能暂停',
                  icon: 'error',
                  duration: 2000
               });
               return;
            }
				
            let editDate = this.formatDate(new Date());
            this.selectedIndexs = [];
				
            this.$post({
               url: "/MesOrderSelect/Remove",
               data: {
                  machineNo: this.machineNo,
                  editDate: editDate
               },
            }).then(res => {
               if (res.data.tbBillList > 0) {
                  this.isShowTableData = [];
                  uni.showToast({
                     title: '工单已暂停',
                     icon: 'success',
                     duration: 2000
                  });
               }
            });
         }
      },
      computed: {}
@@ -962,7 +1110,7 @@

   .top-right {
      position: absolute;
      top: 10px;
      top: -15px;
      right: 50px;
      z-index: 1000;
   }
@@ -1089,6 +1237,75 @@
      background-color: #00A2E9;
      color: white;
   }
	
   /* 操作按钮区域 */
   .operation-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
   }
	
   /* 开工按钮 */
   .start-btn {
      padding: 8px 20px;
      background-color: #00A2E9;
      color: white;
      font-size: 18px;
      font-weight: 500;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 4px rgba(0, 162, 233, 0.2);
   }
	
   .start-btn:hover:not(:disabled) {
      background-color: #0092d6;
      box-shadow: 0 4px 8px rgba(0, 162, 233, 0.3);
      transform: translateY(-1px);
   }
	
   /* 开工按钮 - 选中状态（绿色） */
   .start-btn-selected {
      background-color: #52c41a !important;
      box-shadow: 0 2px 4px rgba(82, 196, 26, 0.3) !important;
   }
	
   .start-btn-selected:hover:not(:disabled) {
      background-color: #49b015 !important;
      box-shadow: 0 4px 8px rgba(82, 196, 26, 0.4) !important;
   }
	
   /* 暂停按钮 */
   .pause-btn {
      padding: 8px 20px;
      background-color: #ff4d4f;
      color: white;
      font-size: 18px;
      font-weight: 500;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
   }
	
   .pause-btn:hover:not(:disabled) {
      background-color: #ff3336;
      box-shadow: 0 4px 8px rgba(255, 77, 79, 0.3);
      transform: translateY(-1px);
   }
	
   /* 按钮禁用状态 */
   .start-btn:disabled,
   .pause-btn:disabled {
      background-color: #d9d9d9 !important;
      color: #999 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
      opacity: 0.6;
   }

    .overlay {
        position: fixed;