打印条码页面样式修改

ruoyi-ui/src/views/bas/BasProductCode/index.vue

@@ -48,31 +48,16 @@
       
       <!-- 右侧预览区域 -->
       <el-col :span="16">
-        <div class="preview-container">
-          <div class="section-header">
-            <h3>标签预览</h3>
-            <div class="header-actions">
-              <el-button
-                type="primary"
-                @click="submitForm"
-                :disabled="!showPreview"
-                :loading="submitLoading"
-                icon="el-icon-printer"
-              >
-                保存并打印
-              </el-button>
-            </div>
-          </div>
-
-          <!-- 空状态提示 -->
-          <div v-show="!showPreview" class="empty-preview">
-            <i class="el-icon-document"></i>
-            <p>点击"预览"按钮查看标签效果</p>
-          </div>
-
-          <!-- 预览显示区域 -->
-          <div v-show="showPreview" class="preview-display">
-            <div class="label-content">
+        <!-- 预览弹框 -->
+         <el-dialog
+           title="标签预览"
+           :visible.sync="showPreview"
+           width="900px"
+           :close-on-click-modal="false"
+           append-to-body
+         >
+           <div class="preview-container">
+             <div class="label-content">
               <div class="preview-box">
                 <div class="preview-content">
                   <div class="preview-row">
@@ -183,11 +168,15 @@
               </div>
             </div>
           </vue-easy-print>
-        </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="showPreview = false">关 闭</el-button>
+            <el-button type="primary" @click="submitForm" :loading="submitLoading">保存并打印</el-button>
+          </div>
+        </el-dialog>
         
         <!-- 历史数据区域 -->
-        <div class="list-container">
-          <div class="section-header">
+        <div class="list-container" style="padding-bottom: 60px;">
+          <div class="section-header" style="margin-bottom: 40px;">
             <h3>历史数据</h3>
             <div class="header-actions">
               <el-button 
@@ -209,7 +198,8 @@
             @selection-change="handleSelectionChange"
             stripe
             border
-          >
+             style="width: 100%;margin-bottom: 40px;height: 550px;"
+            >
             <el-table-column type="selection" width="55" align="center"/>
             <el-table-column 
               v-for="column in tableColumns" 
@@ -269,22 +259,22 @@ const FORM_FIELDS = [
 ]
 
 const TABLE_COLUMNS = [
-  { prop: 'model', label: '型号', width: 100 },
-  { prop: 'color', label: '颜色', width: 80 },
-  { prop: 'serial', label: '序列号', width: 120 },
-  { prop: 'v', label: '电压', width: 80 },
-  { prop: 'hz', label: '功率', width: 80 },
-  { prop: 'ph', label: '相位', width: 80 },
-  { prop: 'nW', label: '净重', width: 80 },
-  { prop: 'gW', label: '毛重', width: 80 },
+  { prop: 'model', label: '型号', width: 120 },
+  { prop: 'color', label: '颜色', width: 100 },
+  { prop: 'serial', label: '序列号', width: 150 },
+  { prop: 'v', label: '电压', width: 100 },
+  { prop: 'hz', label: '功率', width: 100 },
+  { prop: 'ph', label: '相位', width: 100 },
+  { prop: 'nW', label: '净重', width: 100 },
+  { prop: 'gW', label: '毛重', width: 100 },
   {
     prop: 'type',
     label: '状态',
-    width: 80,
+    width: 100,
     formatter: (row) => row.type === '1' ? '未打印' : '已打印'
   },
-  { prop: 'spare1', label: '订单号', width: 120 },
-  { prop: 'spare2', label: '机型', width: 100 },
+  { prop: 'spare1', label: '订单号', width: 150 },
+  { prop: 'spare2', label: '机型', width: 120 },
   { prop: 'spare3', label: '分箱', width: 100 }
 ]
 
@@ -471,7 +461,7 @@ export default {
     handleEdit(row) {
       this.form = { ...row }
       this.previewData = { ...row }
-      this.showPreview = true
+     // this.showPreview = true
     },
 
     // 删除按钮操作
@@ -616,6 +606,43 @@ export default {
   background-color: #f5f5f5;
 }
 
+.list-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.el-table {
+  margin-bottom: 20px;
+}
+
+.el-table .danger-text {
+  color: #F56C6C;
+}
+
+.el-table .danger-text:hover {
+  color: #f78989;
+}
+
 /* 容器样式 */
 .form-container,
 .list-container,
@@ -630,10 +657,36 @@ export default {
   margin-bottom: 20px;
 }
 
-.list-container {
-  margin-bottom: 20px;
-  height: 400px;
-  overflow-y: auto;
+.preview-container {
+  padding: 20px;
+}
+
+.preview-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.preview-content {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.preview-row {
+  margin-bottom: 15px;
+}
+
+.preview-label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.qrcode-container {
+  width: 180px;
+  height: 180px;
 }
 
 .list-container .el-table {