From b2fe86b5b65d98c96cb41b8d2f6a797ee22b24cb Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Mon, 9 Feb 2026 16:14:56 +0800
Subject: [PATCH] =?UTF-8?q?2026-02-09=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/yieldReport/com_switch_roll.vue   | 170 +++++++++++++++---
 1 file changed, 142 insertions(+), 28 deletions(-)

diff --git a/src/views/modules/yieldReport/com_switch_roll.vue b/src/views/modules/yieldReport/com_switch_roll.vue
index 9c9b4ca..2e6d437 100644
--- a/src/views/modules/yieldReport/com_switch_roll.vue
+++ b/src/views/modules/yieldReport/com_switch_roll.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="customer-css">
     <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners"
-               width="210px" style="height: 680px;" class="customer-dialog">
-      <el-form :inline="true" label-position="top" @submit.native.prevent style="height: 60px;"
-               label-width="80px">
-        <!-- 半成品卷卷号 -->
-        <el-row>
-          <el-col :span="24" style="margin-left: 35px;">
-            <el-form-item :label=labels.sfdcRoll>
-              <el-input ref="newRollNo" v-model="pageData.newRollNo" style="width: 120px;" ></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+               width="380px" class="switch-roll-dialog">
+      <div class="switch-roll-content">
+        <el-form label-position="top" @submit.native.prevent label-width="100px">
+          <!-- 半成品卷卷号 -->
+          <el-row>
+            <el-col :span="24">
+              <el-form-item :label="labels.sfdcRoll" class="form-item-enhanced">
+                <el-input ref="newRollNo" v-model="pageData.newRollNo" placeholder="请输入半成品卷卷号" size="large" clearable style="width: 100%;"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="switchRollBun">{{ buttons.confirmButton }}</el-button>
-        <el-button type="primary" @click="closeDialog" style="margin-bottom: 10px;">{{ buttons.closeButton }}</el-button>
-<!--        <el-button v-if="showDefault" @click="saveMultiLanguage()" type="primary">多语言设置</el-button>-->
+        <button class="action-btn secondary" @click="switchRollBun">{{ buttons.confirmButton }}</button>
+        <button class="action-btn secondary" @click="closeDialog">{{ buttons.closeButton }}</button>
       </span>
     </el-dialog>
 
@@ -298,23 +298,137 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/*调节页面button和input的上下间距*/
-.customer-css .customer-button{
-  margin-top: 25px;
-}
+// 切换卷对话框样式 - 参考材料上机对话框
+.switch-roll-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 8px;
+    overflow: hidden;
 
-/*调节fieldset下的样式*/
-.customer-fieldset .customer-item{
-  margin-top: -15px;
-}
+    .el-dialog__header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 18px 20px;
+
+      .el-dialog__title {
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .el-dialog__headerbtn {
+        .el-dialog__close {
+          color: #fff;
+          font-size: 18px;
+
+          &:hover {
+            color: #f0f0f0;
+          }
+        }
+      }
+    }
+
+    .el-dialog__body {
+      padding: 25px;
+      background-color: #f8f9fa;
+    }
 
-/*fieldset下table的样式*/
-.customer-fieldset /deep/ .el-table__header th.is-leaf{
-  line-height: 16px;
+    .el-dialog__footer {
+      padding: 15px 20px;
+      background-color: #fff;
+      border-top: 1px solid #e9ecef;
+    }
+  }
 }
 
-/deep/ .customer-tab .el-tabs__content{
-  padding: 0px !important;
+.switch-roll-content {
+  .form-item-enhanced {
+    margin-bottom: 20px;
+
+    ::v-deep .el-form-item__label {
+      color: #495057;
+      font-weight: 500;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    ::v-deep .el-input__inner {
+      border-radius: 6px;
+      border: 1px solid #dee2e6;
+      transition: all 0.3s;
+      height: 42px;
+      line-height: 42px;
+      font-size: 15px;
+
+      &:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+    }
+
+    ::v-deep .el-input__prefix,
+    ::v-deep .el-input__suffix {
+      line-height: 42px;
+    }
+
+    ::v-deep .el-input__icon {
+      line-height: 42px;
+    }
+  }
 }
 
+// 底部按钮样式 - 参考材料上机对话框
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 0;
+
+  .action-btn {
+    min-width: 80px;
+    padding: 6px 16px;
+    border-radius: 16px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    i {
+      font-size: 13px;
+    }
+
+    &.primary {
+      background: #17B3A3;
+      border: none;
+      color: white;
+
+      &:hover {
+        background: #13998b;
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.4);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
+
+    &.secondary {
+      background: white;
+      border: 1px solid #17B3A3;
+      color: #17B3A3;
+
+      &:hover {
+        background: #17B3A3;
+        color: white;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
 </style>