From 43f28a422544a3b0b4d9e630004ff4a939941c32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 7 Apr 2026 17:40:01 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(=E5=BC=82=E5=B8=B8=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E9=87=8D=E6=9E=84=E5=BC=82=E5=B8=B8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增MutiSelect组件支持下拉多选和复选框两种模式
- 重构异常管理界面，支持直接在表格中编辑异常记录
- 优化钢卷信息展示，增加刷新功能
- 修改AbnormalForm组件，使用MutiSelect替代原有单选组件
- 确保异常记录列表始终显示至少10行，方便快速添加
---
 klp-ui/src/components/MutiSelect/index.vue    | 126 +++++++-
 klp-ui/src/main.js                            |   2 +
 .../wms/coil/components/AbnormalForm.vue      |  60 +++-
 .../wms/coil/components/ExceptionManager.vue  | 277 +++++++++++++++---
 4 files changed, 397 insertions(+), 68 deletions(-)

diff --git a/klp-ui/src/components/MutiSelect/index.vue b/klp-ui/src/components/MutiSelect/index.vue
index 489547fd..a06ee71c 100644
--- a/klp-ui/src/components/MutiSelect/index.vue
+++ b/klp-ui/src/components/MutiSelect/index.vue
@@ -1,10 +1,51 @@
 <template>
-  <el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-  </el-select>
+  <div class="muti-select">
+    <!-- 下拉选择模式 -->
+    <el-select
+      v-if="type === 'select'"
+      v-model="innerValue"
+      multiple
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :clearable="clearable"
+      :allow-create="allowAdd"
+      :disabled="disabled"
+      :size="size"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <!-- 复选框模式 -->
+    <div v-else-if="type === 'checkbox'" class="checkbox-group">
+      <el-checkbox-group v-model="innerValue" @change="handleCheckboxChange">
+        <el-checkbox
+          v-for="item in options"
+          :key="item.value"
+          :label="item.value"
+          :disabled="disabled"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <!-- <el-button
+        v-if="showSelectAll && options.length > 0"
+        type="text"
+        size="small"
+        @click="toggleSelectAll"
+      >
+        {{ isAllSelected ? '取消全选' : '全选' }}
+      </el-button> -->
+    </div>
+  </div>
 </template>
 
-<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
+<!-- v-model 绑定逗号分隔的字符串，可以 props 配置是否允许新增 -->
 <script>
   export default {
     name: 'MutiSelect',
@@ -20,6 +61,34 @@
       allowAdd: {
         type: Boolean,
         default: false
+      },
+      type: {
+        type: String,
+        default: 'select' // select or checkbox
+      },
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+      filterable: {
+        type: Boolean,
+        default: true
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: 'default' // large, default, small
+      },
+      showSelectAll: {
+        type: Boolean,
+        default: true
       }
     },
     // 计算属性捕获实现双向绑定
@@ -29,12 +98,55 @@
           if (!this.value) {
             return [];
           }
-          return this.value.split(',');
+          return this.value?.split(',');
         },
         set(val) {
-          this.$emit('input', val.join(','));
+          const newValue = val?.join(',') ?? '';
+          this.$emit('input', newValue);
+          this.$emit('change', newValue);
+        }
+      },
+      // 是否全选
+      isAllSelected() {
+        return this.options.length > 0 && this.innerValue.length === this.options.length;
+      }
+    },
+    methods: {
+      // 处理选择变化
+      handleChange(val) {
+        this.$emit('change', val.join(','));
+      },
+      // 处理复选框变化
+      handleCheckboxChange(val) {
+        const newValue = val.join(',');
+        this.$emit('input', newValue);
+        this.$emit('change', newValue);
+      },
+      // 切换全选/取消全选
+      toggleSelectAll() {
+        if (this.isAllSelected) {
+          this.innerValue = [];
+        } else {
+          this.innerValue = this.options.map(item => item.value);
         }
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+  .muti-select {
+    width: 100%;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .checkbox-group .el-checkbox {
+    margin-right: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/main.js b/klp-ui/src/main.js
index 7cef69ae..c44635d5 100644
--- a/klp-ui/src/main.js
+++ b/klp-ui/src/main.js
@@ -46,6 +46,7 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 import KLPTable from '@/components/KLPUI/KLPTable/index.vue'
 import MemoInput from '@/components/MemoInput/index.vue'
+import MutiSelect from '@/components/MutiSelect/index.vue'
 import CurrentCoilNo from '@/components/KLPService/Renderer/CurrentCoilNo.vue'
 import DictSelect from '@/components/DictSelect'
 
@@ -81,6 +82,7 @@ Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('KLPTable', KLPTable)
 Vue.component('MemoInput', MemoInput)
+Vue.component('MutiSelect', MutiSelect)
 Vue.component('DictSelect', DictSelect)
 
 Vue.component('CurrentCoilNo', CurrentCoilNo)
diff --git a/klp-ui/src/views/wms/coil/components/AbnormalForm.vue b/klp-ui/src/views/wms/coil/components/AbnormalForm.vue
index dd2763af..dbb571a9 100644
--- a/klp-ui/src/views/wms/coil/components/AbnormalForm.vue
+++ b/klp-ui/src/views/wms/coil/components/AbnormalForm.vue
@@ -4,20 +4,18 @@
       <coil-selector v-model="formData.coilId"></coil-selector>
     </el-form-item>
     <el-form-item label="上下板面" prop="plateSurface">
-      <el-radio-group v-model="formData.plateSurface">
-        <el-radio-button key="top" label="上">
-          上板面
-        </el-radio-button>
-        <el-radio-button key="bottom" label="下">
-          下板面
-        </el-radio-button>
-      </el-radio-group>
+      <muti-select v-model="formData.plateSurface" :options="[
+        {label: '上板面', value: '上'},
+        {label: '下板面', value: '下'}]" type="checkbox">
+      </muti-select>
+      <!-- <el-checkbox-group v-model="formData.plateSurface">
+        <el-checkbox key="top" label="上">上板面</el-checkbox>
+        <el-checkbox key="bottom" label="下">下板面</el-checkbox>
+      </el-checkbox-group> -->
     </el-form-item>
     <el-form-item label="断面位置" prop="position">
-      <el-radio-group v-model="formData.position">
-        <el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
-          dict.label }}</el-radio-button>
-      </el-radio-group>
+      <muti-select v-model="formData.position" :options="dict.type.coil_abnormal_position" type="checkbox">
+      </muti-select>
     </el-form-item>
     <el-form-item>
       <el-alert title="异常位置为内圈算起" type="info" :closable="false" show-icon size="small" />
@@ -84,7 +82,12 @@ export default {
     return {
       rules: {
         position: [
-          { required: true, message: '请选择位置', trigger: 'change' }
+          { required: true, message: '请选择位置', trigger: 'change' },
+          { validator: this.validateArray, trigger: 'change' }
+        ],
+        plateSurface: [
+          { required: true, message: '请选择上下板面', trigger: 'change' },
+          { validator: this.validateArray, trigger: 'change' }
         ],
         startPosition: [
           { required: true, message: '请输入开始位置', trigger: ['blur', 'change'] },
@@ -106,10 +109,26 @@ export default {
   computed: {
     formData: {
       get() {
-        return this.value || {};
+        const data = this.value || {};
+        // 接收时将CSV字符串解析成数组
+        // if (data.plateSurface && typeof data.plateSurface === 'string') {
+        //   data.plateSurface = data.plateSurface?.split(',') ?? [];
+        // }
+        // if (data.position && typeof data.position === 'string') {
+        //   data.position = data.position?.split(',') ?? [];
+        // }
+        return data;
       },
       set(newVal) {
-        this.$emit('input', { ...newVal });
+        // 发送时将数组转为CSV
+        const data = { ...newVal };
+        // if (data.plateSurface && Array.isArray(data.plateSurface)) {
+        //   data.plateSurface = data.plateSurface?.join(',') ?? '';
+        // }
+        // if (data.position && Array.isArray(data.position)) {
+        //   data.position = data.position?.join(',') ?? '';
+        // }
+        this.$emit('input', data);
       }
     }
   },
@@ -129,7 +148,8 @@ export default {
       this.formData = {
         abnormalId: undefined,
         coilId: currentCoilId,
-        position: undefined,
+        position: [],
+        plateSurface: [],
         startPosition: undefined,
         endPosition: undefined,
         length: undefined,
@@ -161,6 +181,14 @@ export default {
       } else {
         callback();
       }
+    },
+    /** 校验数组 */
+    validateArray(rule, value, callback) {
+      if (!value || value.length === 0) {
+        callback(new Error('请至少选择一个选项'));
+      } else {
+        callback();
+      }
     }
   }
 };
diff --git a/klp-ui/src/views/wms/coil/components/ExceptionManager.vue b/klp-ui/src/views/wms/coil/components/ExceptionManager.vue
index 25d5a486..fb935c46 100644
--- a/klp-ui/src/views/wms/coil/components/ExceptionManager.vue
+++ b/klp-ui/src/views/wms/coil/components/ExceptionManager.vue
@@ -1,43 +1,14 @@
 <template>
   <div class="exception-container" v-loading="abnormalLoading">
     <div class="exception-section">
-      <h4 class="section-title">异常记录</h4>
-      <el-table :data="abnormalList" style="width: 100%">
-        <el-table-column label="开始位置" prop="startPosition"></el-table-column>
-        <el-table-column label="结束位置" prop="endPosition"></el-table-column>
-        <el-table-column label="长度" prop="length"></el-table-column>
-        <el-table-column label="上下版面" prop="plateSurface"></el-table-column>
-        <el-table-column label="断面位置" prop="position"></el-table-column>
-        <el-table-column label="是否为主缺陷" prop="mainMark">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="缺陷代码" prop="defectCode">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-          </template>
-        </el-table-column>
-        <el-table-column label="程度" prop="degree">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-          </template>
-        </el-table-column>
-        <el-table-column label="产线" prop="productionLine"></el-table-column>
-        <el-table-column label="备注" prop="remark"></el-table-column>
-        <el-table-column label="操作" width="120">
-          <template slot-scope="scope">
-            <el-button type="danger" plain size="mini" :loading="buttonLoading"
-              @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div class="exception-section">
-      <h4 class="section-title">钢卷信息</h4>
-      <el-descriptions :column="5">
+      <div class="section-header">
+        <h4 class="section-title">钢卷信息</h4>
+        <el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshCoilInfo"
+          :loading="coilInfoLoading">
+          刷新
+        </el-button>
+      </div>
+      <el-descriptions :column="5" v-loading="coilInfoLoading">
         <el-descriptions-item label="入场钢卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
         <el-descriptions-item label="当前钢卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
         <el-descriptions-item label="厂家原料卷号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
@@ -70,6 +41,10 @@
         <el-descriptions-item label="毛重">{{ coilInfo.grossWeight || '-' }} t</el-descriptions-item>
         <el-descriptions-item label="净重">{{ coilInfo.netWeight || '-' }} t</el-descriptions-item>
 
+        <el-descriptions-item label="生产开始时间">{{ coilInfo.productionStartTime || '-'
+          }}</el-descriptions-item>
+        <el-descriptions-item label="生产结束时间">{{ coilInfo.productionEndTime || '-'
+          }}</el-descriptions-item>
         <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
         <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
         <el-descriptions-item label="钢卷表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
@@ -78,6 +53,100 @@
     </div>
 
     <div class="exception-section">
+      <div class="section-header">
+        <h4 class="section-title">异常记录</h4>
+        <el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshAbnormalList"
+          :loading="abnormalLoading">
+          刷新
+        </el-button>
+      </div>
+      <el-table :data="abnormalList" style="width: 100%" border>
+        <el-table-column label="开始位置" prop="startPosition" width="80">
+          <template slot-scope="scope">
+            <el-input :controls="false" v-model="scope.row.startPosition" placeholder="请输入开始位置" />
+          </template>
+        </el-table-column>
+        <el-table-column label="结束位置" prop="endPosition" width="80">
+          <template slot-scope="scope">
+            <el-input :controls="false" v-model="scope.row.endPosition" placeholder="请输入结束位置" />
+          </template>
+        </el-table-column>
+        <el-table-column label="长度" prop="length" width="80">
+          <template slot-scope="scope">
+            {{ scope.row.endPosition - scope.row.startPosition }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上下版面" prop="plateSurface">
+          <template slot-scope="scope">
+            <muti-select v-model="scope.row.plateSurface" :options="[
+              { label: '上板面', value: '上' },
+              { label: '下板面', value: '下' }]" type="checkbox">
+            </muti-select>
+            <!-- <el-checkbox-group v-model="scope.row.plateSurface">
+              <el-checkbox key="top" label="上">上板面</el-checkbox>
+              <el-checkbox key="bottom" label="下">下板面</el-checkbox>
+            </el-checkbox-group> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="断面位置" prop="position">
+          <template slot-scope="scope">
+            <muti-select v-model="scope.row.position" :options="dict.type.coil_abnormal_position" type="checkbox">
+            </muti-select>
+            <!-- <el-checkbox-group v-model="scope.row.position">
+              <el-checkbox v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{ dict.label }}</el-checkbox>
+            </el-checkbox-group> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="主缺陷" prop="mainMark" width="60">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.mainMark" :true-label="1" :false-label="0"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="缺陷代码" prop="defectCode">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.defectCode" placeholder="请选择缺陷代码">
+              <el-option v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="程度" prop="degree">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.degree" placeholder="请选择程度">
+              <el-option v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="产线" prop="productionLine">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.productionLine" placeholder="请选择产线">
+              <el-option v-for="dict in dict.type.sys_lines" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template slot-scope="scope">
+            <el-button v-if="!scope.row.abnormalId" type="primary" plain size="mini" :loading="buttonLoading"
+              @click="handleSave(scope.row)">新增</el-button>
+            <template v-else>
+              <el-button type="primary" plain size="mini" :loading="buttonLoading"
+                @click="handleSave(scope.row)">变更</el-button>
+              <el-button type="danger" plain size="mini" :loading="buttonLoading"
+                @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- <div class="exception-section">
       <h4 class="section-title">新增异常</h4>
       <div class="form-container">
         <abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
@@ -86,12 +155,12 @@
           <el-button @click="resetExceptionForm" :loading="buttonLoading">重置表单</el-button>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal } from '@/api/wms/coilAbnormal'
+import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal, updateCoilAbnormal } from '@/api/wms/coilAbnormal'
 import { getMaterialCoil } from '@/api/wms/coil'
 import AbnormalForm from './AbnormalForm'
 
@@ -100,7 +169,7 @@ export default {
   components: {
     AbnormalForm
   },
-  dicts: ['coil_abnormal_code', 'coil_abnormal_degree'],
+  dicts: ['coil_abnormal_code', 'coil_abnormal_degree', 'coil_abnormal_position', 'sys_lines'],
   props: {
     coilId: {
       type: String,
@@ -123,6 +192,7 @@ export default {
       coilInfo: {},
       abnormalList: [],
       abnormalLoading: false,
+      coilInfoLoading: false,
       buttonLoading: false,
     }
   },
@@ -143,7 +213,7 @@ export default {
           this.buttonLoading = true
           addCoilAbnormal({
             ...this.exceptionForm,
-            length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
+            // length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
           }).then(response => {
             this.$message.success('异常记录添加成功')
             this.resetExceptionForm()
@@ -172,21 +242,122 @@ export default {
     },
     loadAbnormalList() {
       if (!this.coilId) {
+        // 确保至少10个空行
+        this.abnormalList = this.generateEmptyRows(10)
         return
       }
       this.abnormalLoading = true
       listCoilAbnormal({
         coilId: this.coilId
       }).then(response => {
-        this.abnormalList = response.rows || []
+        let rows = response.rows || []
+        // 确保至少10个条目
+        if (rows.length < 10) {
+          const emptyRows = this.generateEmptyRows(10 - rows.length)
+          rows = [...rows, ...emptyRows]
+        }
+        this.abnormalList = rows
       }).catch(error => {
         console.error('查询异常记录失败:', error)
         this.$message.error('查询异常记录失败: ' + (error.message || error))
+        // 失败时也要确保至少10个空行
+        this.abnormalList = this.generateEmptyRows(10)
       }).finally(() => {
         this.abnormalLoading = false
       })
     },
+    generateEmptyRows(count) {
+      const emptyRows = []
+      for (let i = 0; i < count; i++) {
+        emptyRows.push({
+          coilId: this.coilId,
+          position: '',
+          plateSurface: '',
+          startPosition: 0,
+          endPosition: 0,
+          length: 0,
+          mainMark: 0,
+          productionLine: null,
+          defectCode: null,
+          degree: null,
+          remark: null
+        })
+      }
+      return emptyRows
+    },
+    handleSave(row) {
+      // 验证数据
+      if (!row.startPosition || !row.endPosition) {
+        this.$message.error('请填写开始位置和结束位置')
+        return
+      }
+      if (row.startPosition > row.endPosition) {
+        this.$message.error('开始位置必须小于结束位置')
+        return
+      }
+      if (!row.position || row.position.length === 0) {
+        this.$message.error('请选择断面位置')
+        return
+      }
+      if (!row.plateSurface || row.plateSurface.length === 0) {
+        this.$message.error('请选择上下板面')
+        return
+      }
+      if (!row.defectCode) {
+        this.$message.error('请选择缺陷代码')
+        return
+      }
+      if (!row.degree) {
+        this.$message.error('请选择程度')
+        return
+      }
+
+      this.buttonLoading = true
+      const saveData = {
+        ...row,
+        // length: row.endPosition - row.startPosition,
+        coilId: this.coilId
+      }
+
+      if (row.abnormalId) {
+        // 调用修改接口
+        updateCoilAbnormal(saveData).then(response => {
+          this.$message.success('异常记录更新成功')
+        }).catch(error => {
+          console.error('异常记录更新失败:', error)
+          this.$message.error('异常记录更新失败: ' + (error.message || error))
+        }).finally(() => {
+          this.buttonLoading = false
+        })
+      } else {
+        // 调用新增接口
+        addCoilAbnormal(saveData).then(response => {
+          this.$message.success('异常记录添加成功')
+          // 重新加载列表以获取新的 abnormalId
+          this.loadAbnormalList()
+        }).catch(error => {
+          console.error('异常记录添加失败:', error)
+          this.$message.error('异常记录添加失败: ' + (error.message || error))
+        }).finally(() => {
+          this.buttonLoading = false
+        })
+      }
+    },
     handleDelete(row) {
+      if (!row.abnormalId) {
+        // 如果没有 abnormalId，直接从列表中移除
+        const index = this.abnormalList.indexOf(row)
+        if (index > -1) {
+          this.abnormalList.splice(index, 1)
+          // 确保列表始终有10个条目
+          if (this.abnormalList.length < 10) {
+            const emptyRows = this.generateEmptyRows(10 - this.abnormalList.length)
+            this.abnormalList = [...this.abnormalList, ...emptyRows]
+          }
+          this.$message.success('空行已移除')
+        }
+        return
+      }
       this.$modal.confirm('确认删除异常记录吗？', '删除确认', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -204,15 +375,24 @@ export default {
         })
       })
     },
+    refreshAbnormalList() {
+      this.loadAbnormalList()
+    },
+    refreshCoilInfo() {
+      this.loadCoilInfo()
+    },
     loadCoilInfo() {
       if (!this.coilId) {
         return
       }
+      this.coilInfoLoading = true
       getMaterialCoil(this.coilId).then(response => {
         this.coilInfo = response.data || {}
       }).catch(error => {
         console.error('查询钢卷信息失败:', error)
         this.$message.error('查询钢卷信息失败: ' + (error.message || error))
+      }).finally(() => {
+        this.coilInfoLoading = false
       })
     }
   }
@@ -234,13 +414,20 @@ export default {
   border: 1px solid #e4e7ed;
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
 .section-title {
-  margin: 0 0 16px 0;
+  margin: 0;
   font-size: 14px;
   font-weight: 600;
   color: #303133;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e4e7ed;
 }
 
 .exception-section:first-child {

From 7e487a487d63c3068421944b9c37686b07a32c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 8 Apr 2026 10:36:23 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(=E5=8F=91=E8=B4=A7=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E5=8F=91=E8=B4=A7=E5=8D=95=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构发货单界面布局，使用可拖拽面板组件提升用户体验。新增订单绑定、逻辑库区显示等功能，并调整页面样式。

- 使用DragResizePanel组件实现可拖拽分割布局
- 新增订单绑定、解绑和切换功能
- 在详情表格中添加逻辑库区、厂家和品质字段
- 优化左侧面板可折叠功能
- 调整页面样式和响应式布局
---
 .../src/components/DragResizePanel/index.vue  | 159 ++++++
 .../wms/delivery/components/detailTable.vue   |   6 +
 .../wms/delivery/components/planList.vue      |   8 +-
 .../src/views/wms/delivery/waybill/index.vue  | 460 +++++++++++++-----
 4 files changed, 514 insertions(+), 119 deletions(-)
 create mode 100644 klp-ui/src/components/DragResizePanel/index.vue

diff --git a/klp-ui/src/components/DragResizePanel/index.vue b/klp-ui/src/components/DragResizePanel/index.vue
new file mode 100644
index 00000000..d3e0e9a4
--- /dev/null
+++ b/klp-ui/src/components/DragResizePanel/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="drag-resize-panel" :class="{ 'vertical': direction === 'vertical' }">
+    <div class="panel-a" :style="panelAstyle">
+      <slot name="panelA"></slot>
+    </div>
+    <div class="resizer" :class="{ 'vertical-resizer': direction === 'vertical' }" @mousedown="startResize"></div>
+    <div class="panel-b" :style="panelBstyle">
+      <slot name="panelB"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DragResizePanel',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: function(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    // 设置panelA的初始大小，最大值和最小值，默认值为300px，10000px，100px
+    // panelB占据剩余空间
+    initialSize: {
+      type: Number,
+      default: 300
+    },
+    minSize: {
+      type: Number,
+      default: 100
+    },
+    maxSize: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data() {
+    return {
+      currentSize: this.initialSize,
+      isResizing: false,
+      startPosition: 0
+    };
+  },
+  computed: {
+    panelAstyle() {
+      if (this.direction === 'horizontal') {
+        return { width: this.currentSize + 'px' };
+      } else {
+        return { height: this.currentSize + 'px' };
+      }
+    },
+    panelBstyle() {
+      if (this.direction === 'horizontal') {
+        return { flex: 1 };
+      } else {
+        return { flex: 1 };
+      }
+    }
+  },
+  methods: {
+    startResize(e) {
+      e.preventDefault();
+      this.isResizing = true;
+      this.startPosition = this.direction === 'horizontal' ? e.clientX : e.clientY;
+      this.startSize = this.currentSize;
+      
+      document.addEventListener('mousemove', this.handleResize);
+      document.addEventListener('mouseup', this.stopResize);
+    },
+    handleResize(e) {
+      if (!this.isResizing) return;
+      
+      const delta = this.direction === 'horizontal' ? e.clientX - this.startPosition : e.clientY - this.startPosition;
+      const newSize = this.startSize + delta;
+      
+      if (newSize >= this.minSize && newSize <= this.maxSize) {
+        this.currentSize = newSize;
+      }
+    },
+    stopResize() {
+      this.isResizing = false;
+      document.removeEventListener('mousemove', this.handleResize);
+      document.removeEventListener('mouseup', this.stopResize);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.drag-resize-panel {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.drag-resize-panel.vertical {
+  flex-direction: column;
+}
+
+.panel-a {
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-b {
+  position: relative;
+  overflow: auto;
+}
+
+.resizer {
+  width: 4px;
+  cursor: col-resize;
+  position: relative;
+  transition: background-color 0.3s;
+  height: 100%;
+}
+
+.resizer.vertical-resizer {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.resizer:hover {
+  background-color: #409eff;
+}
+
+.resizer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 40px;
+  width: 2px;
+  background-color: #c0c4cc;
+  border-radius: 1px;
+  transition: background-color 0.3s;
+}
+
+.resizer.vertical-resizer::before {
+  width: 40px;
+  height: 2px;
+}
+
+.resizer:hover::before {
+  background-color: #409eff;
+}
+
+.resizer:active {
+  background-color: #409eff;
+}
+
+.resizer:active::before {
+  background-color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue
index 3e7b703a..cbb59e7c 100644
--- a/klp-ui/src/views/wms/delivery/components/detailTable.vue
+++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue
@@ -38,6 +38,7 @@
         <el-table-column label="切边" align="center" prop="edgeType" />
         <el-table-column label="包装" align="center" prop="packaging" />
         <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+        <el-table-column label="逻辑库区" align="center" prop="warehouseName" />
         <el-table-column label="结算方式" align="center" prop="settlementType" />
         <!-- <el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" /> -->
         <el-table-column label="卷号" align="center" prop="coilNo">
@@ -47,9 +48,11 @@
         </el-table-column>
         <el-table-column label="规格" align="center" prop="specification" />
         <el-table-column label="材质" align="center" prop="material" />
+        <el-table-column label="厂家" align="center" prop="manufacturer" />
         <el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" />
         <!-- <el-table-column label="数量" align="center" prop="quantity" /> -->
         <el-table-column label="重量" align="center" prop="weight" />
+        <el-table-column label="品质" align="center" prop="qualityStatus" />
         <!-- <el-table-column label="单价" align="center" prop="unitPrice" /> -->
         <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -241,6 +244,9 @@ export default {
           if (coil) {
             item.actualWarehouseName = coil.actualWarehouseName;
             item.surfaceTreatmentDesc = coil.surfaceTreatmentDesc;
+            item.qualityStatus = coil.qualityStatus;
+            item.warehouseName = coil.warehouseName;
+            item.manufacturer = coil.manufacturer;
           }
         });
       }
diff --git a/klp-ui/src/views/wms/delivery/components/planList.vue b/klp-ui/src/views/wms/delivery/components/planList.vue
index 3443b760..36cc3bd7 100644
--- a/klp-ui/src/views/wms/delivery/components/planList.vue
+++ b/klp-ui/src/views/wms/delivery/components/planList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <div style="padding: 10px">
     <div style="display: flex; width: 100%; gap: 5px">
       <el-input 
         v-model="planQueryParams.planName" 
@@ -17,7 +17,7 @@
       :props="planTreeProps" 
       @node-click="handlePlanSelect"
       default-expand-all 
-      style="margin-top: 10px; height: 550px; overflow: auto;"
+      style="margin-top: 10px; height: 800px; overflow: auto;"
     >
       <template slot-scope="{ node, data }">
         <span 
@@ -94,7 +94,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-  </el-card>
+  </div>
 </template>
 
 <script>
@@ -109,7 +109,7 @@ export default {
       planQueryParams: {
         planName: '',
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 30,
         planType: 0,
       },
       selectedPlan: null,
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index 9c50a074..1e8768c0 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -1,15 +1,31 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="5">
-        <PlanList ref="planList" @select="handlePlanSelect" />
-      </el-col>
+    <div class="main-container1">
+      <!-- 左侧计划列表 -->
+      <div class="left-panel-container" :style="{ width: leftWidth + 'px' }">
+        <div class="left-panel" v-show="!isLeftCollapsed">
+          <div class="panel-header">
+            <h3>发货计划</h3>
+          </div>
+          <PlanList ref="planList" @select="handlePlanSelect" />
+        </div>
+      </div>
 
-      <el-col :span="19" style="position: relative;">
-        <el-card v-if="!selectedPlan">
+      <!-- 切换按钮 -->
+      <div class="toggle-button" @click="toggleLeftPanel">
+        <el-button type="text" size="small" :icon="isLeftCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'">
+        </el-button>
+      </div>
+
+      <!-- 可拖拽分割线 -->
+      <div class="resizer" ref="resizer" @mousedown="startResize" v-show="!isLeftCollapsed"></div>
+
+      <!-- 右侧内容区域 -->
+      <div class="right-panel" :style="{ flex: 1 }">
+        <div v-if="!selectedPlan">
           <el-empty description="请先选择发货计划" />
-        </el-card>
-        <el-card v-else>
+        </div>
+        <div v-else>
           <el-form style="position: sticky; left: 0; top: 0;" :model="queryParams" ref="queryForm" size="small"
             :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item label="发货单名称" prop="waybillName">
@@ -24,86 +40,106 @@
               <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号" clearable
                 @keyup.enter.native="handleQuery" />
             </el-form-item>
+            <el-form-item label="负责人" prop="principal">
+              <el-select v-model="queryParams.principal" placeholder="请选择负责人" clearable filterable allow-create
+                @change="handleQuery">
+                <el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
               <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                 :disabled="!selectedPlan" title="请先选择发货计划">新增</el-button>
               <el-button type="success" plain icon="el-icon-refresh" size="mini" @click="handleQuery">刷新</el-button>
-              <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button> -->
-            </el-form-item>
-            <el-form-item>
-              <el-descriptions :column="2" :data="queryParams" border>
-                <el-descriptions-item label="单据总数">{{ deliveryCountTotal }}</el-descriptions-item>
-                <el-descriptions-item label="已发数量">{{ deliveryCountFinished }}</el-descriptions-item>
-              </el-descriptions>
-            </el-form-item>
-          </el-form>
-          <div style="height: calc(100vh - 204px); overflow: hidden; display: flex; flex-direction: column;">
-            <div :style="{ height: topHeight + 'px', overflow: 'auto' }">
-              <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
-                @row-click="handleRowClick">
-                <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
-                <el-table-column label="发货单名称" align="center" prop="waybillName" />
-                <el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
-                <el-table-column label="收货单位" align="center" prop="consigneeUnit" />
-                <!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
-                <el-table-column label="订单编号" align="center" prop="orderNo">
-                  <template slot-scope="scope">
-                    <span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
-                    <span v-else>{{ scope.row.principalPhone }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
-                  <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="负责人" align="center" prop="principal" width="60" />
-                <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
+              <el-button type="warning" plain icon="el-icon-download" size="mini"
+                @click="handleExportPlan">导出</el-button>
+            </el-col>
 
-                <!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
-                <el-table-column label="完成状态" align="center" prop="status" width="120">
-                  <template slot-scope="scope">
-                    <el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
-                      <el-option label="已发货" :value="1" />
-                      <el-option label="未发货" :value="0" />
-                      <el-option label="已打印" :value="2" />
-                      <el-option label="未打印" :value="3" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-                  <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-view"
-                      @click.stop="handlePrint(scope.row, 0)">打印发货单</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-view"
-                      @click.stop="handlePrint(scope.row, 1)">简单打印</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-copy"
-                      @click.stop="handleCopy(scope.row)">复制新增</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
-                      title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
-                      title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+            <el-col :span="16" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
+              <div>
+                <el-descriptions :column="2" :data="queryParams" border>
+                  <el-descriptions-item label="单据总数">{{ deliveryCountTotal }}</el-descriptions-item>
+                  <el-descriptions-item label="已发数量">{{ deliveryCountFinished }}</el-descriptions-item>
+                </el-descriptions>
+              </div>
+              <div>
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                  :limit.sync="queryParams.pageSize" @pagination="getList" />
+              </div>
+            </el-col>
+          </el-row>
 
-              <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-                :limit.sync="queryParams.pageSize" @pagination="getList" />
-            </div>
+          <div style="height: calc(100vh - 164px); overflow: hidden;">
+            <DragResizePanel direction="vertical" :initialSize="300" :minSize="100">
+              <template slot="panelA">
+                <div style="height: 100%; overflow: auto;">
+                  <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
+                    @row-click="handleRowClick">
+                    <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
+                    <el-table-column label="发货单名称" align="center" prop="waybillName" />
+                    <el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
+                    <el-table-column label="收货单位" align="center" prop="consigneeUnit" />
+                    <!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
+                    <el-table-column label="订单编号" align="center" prop="orderNo">
+                      <template slot-scope="scope">
+                        <span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
+                        <span v-else>{{ scope.row.principalPhone }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
+                      <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="负责人" align="center" prop="principal" width="60" />
+                    <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
 
-            <!-- 可拖拽的分割线 -->
-            <div class="resizer" ref="resizer" @mousedown="startResize"></div>
-
-            <div :style="{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }">
-              <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
-              <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
-            </div>
+                    <!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
+                    <el-table-column label="完成状态" align="center" prop="status" width="120">
+                      <template slot-scope="scope">
+                        <el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
+                          <el-option label="已发货" :value="1" />
+                          <el-option label="未发货" :value="0" />
+                          <el-option label="已打印" :value="2" />
+                          <el-option label="未打印" :value="3" />
+                        </el-select>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                      <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-view"
+                          @click.stop="handlePrint(scope.row, 0)">打印发货单</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-view"
+                          @click.stop="handlePrint(scope.row, 1)">简单打印</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-document-copy"
+                          @click.stop="handleCopy(scope.row)">复制新增</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
+                          title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
+                          title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </template>
+              <template slot="panelB">
+                <div style="height: 100%; overflow: auto;">
+                  <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
+                  <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
+                </div>
+              </template>
+            </DragResizePanel>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+        </div>
+      </div>
+    </div>
 
     <!-- 添加或修改发货单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -120,9 +156,6 @@
         <el-form-item label="车牌" prop="licensePlate">
           <MemoInput v-model="form.licensePlate" storageKey="licensePlate" placeholder="请输入车牌" />
         </el-form-item>
-        <el-form-item label="收货单位" prop="consigneeUnit">
-          <el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
-        </el-form-item>
         <el-form-item label="发货单位" prop="senderUnit">
           <el-input v-model="form.senderUnit" placeholder="请输入发货单位" />
         </el-form-item>
@@ -131,15 +164,47 @@
             placeholder="请选择发货时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="负责人" prop="principal">
-          <el-input v-model="form.principal" placeholder="请输入负责人" />
-        </el-form-item>
+        <!-- 如果没有绑定订单，这里是使用手机号字段来存储手填的订单编号 -->
         <el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
-          <el-input v-model="form.principalPhone" placeholder="请输入订单编号" />
+          <div style="display: flex; gap: 10px; align-items: center;">
+            <el-input v-model="form.principalPhone" placeholder="请输入订单编号" style="flex: 1;" />
+            <el-button type="primary" size="small" @click="bindOrder">绑定订单</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
-          <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled />
+          <div style="display: flex; gap: 10px; align-items: center;">
+            <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled style="flex: 1;" />
+            <el-button type="warning" size="small" @click="unbindOrder">解绑</el-button>
+            <el-button type="primary" size="small" @click="changeOrder">切换订单</el-button>
+          </div>
         </el-form-item>
+
+        <!-- 订单选择对话框 -->
+        <el-dialog title="选择订单" :visible.sync="orderDialogVisible" width="800px" append-to-body>
+          <el-input @change="loadOrderList" v-model="orderQuery" placeholder="输入关键词搜索" style="margin-bottom: 10px;" @input="handleOrderSearch" />
+          <el-table v-loading="orderLoading" :data="orderList" max-height="500px" style="width: 100%" @row-click="handleOrderSelect">
+            <el-table-column prop="orderCode" label="订单编号" />
+            <el-table-column prop="companyName" label="客户公司" />
+            <el-table-column prop="salesman" label="销售员" />
+            <el-table-column prop="contractCode" label="合同号" />
+            <el-table-column prop="deliveryDate" label="交货日期" />
+          </el-table>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="orderDialogVisible = false">取消</el-button>
+          </div>
+        </el-dialog>
+        <el-form-item label="收货单位" prop="consigneeUnit">
+          <el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
+        </el-form-item>
+
+
+        <el-form-item label="负责人" prop="principal">
+          <el-select v-model="form.principal" placeholder="请选择负责人" clearable filterable allow-create>
+            <el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -164,12 +229,14 @@ import { listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计
 import { listDeliveryPlan } from "@/api/wms/deliveryPlan";
 import { listCoilByIds } from "@/api/wms/coil";
 import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
+import { listOrder } from "@/api/crm/order";
 import MemoInput from "@/components/MemoInput";
 import DeliveryWaybillDetail from "../components/detailTable.vue";
 import WayBill from "../components/wayBill.vue";
 import PlanList from "../components/planList.vue";
 import WayBill2 from "../components/wayBill2.vue";
 import PlanSelector from "../components/planSelector.vue";
+import DragResizePanel from "@/components/DragResizePanel";
 
 export default {
   name: "DeliveryWaybill",
@@ -179,8 +246,10 @@ export default {
     WayBill,
     PlanList,
     WayBill2,
-    PlanSelector
+    PlanSelector,
+    DragResizePanel
   },
+  dicts: ['wip_pack_saleman'],
   data() {
     return {
       // 按钮loading
@@ -200,8 +269,7 @@ export default {
       // 发货单表格数据
       deliveryWaybillList: [],
       waybillId: null,
-      // 上部分高度
-      topHeight: 300,
+
       // 打印相关数据
       printDialogVisible: false,
       currentWaybill: {},
@@ -214,10 +282,17 @@ export default {
       open: false,
       // 发货计划列表
       planListOption: [],
+      // 左侧面板宽度
+      leftWidth: 260,
+      // 左侧面板是否收起
+      isLeftCollapsed: false,
+      // 拖拽相关
+      startX: 0,
+      startLeftWidth: 0,
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 50,
         waybillNo: undefined,
         waybillName: undefined,
         licensePlate: undefined,
@@ -245,11 +320,19 @@ export default {
       },
       coilList: [],
       canEdit: true,
+      // 订单列表
+      orderList: [],
+      orderLoading: false,
+      // 订单选择对话框
+      orderDialogVisible: false,
+      // 订单搜索关键词
+      orderQuery: '',
     };
   },
   created() {
     this.loadPlanList();
     this.getList();
+    this.loadOrderList();
   },
   computed: {
     /** 计算已发货数量 */
@@ -268,33 +351,59 @@ export default {
         this.planListOption = response.rows || [];
       });
     },
-    /** 开始拖拽 */
+    /** 加载订单列表 */
+    loadOrderList() {
+      this.orderLoading = true;
+      listOrder({ pageNum: 1, pageSize: 100, orderType: 1, keyword: this.orderQuery }).then(response => {
+        this.orderList = response.rows || [];
+        this.orderLoading = false;
+      }).catch(error => {
+        console.error('获取订单列表失败:', error);
+        this.orderLoading = false;
+      });
+    },
+    /** 切换左侧面板收起/展开 */
+    toggleLeftPanel() {
+      if (this.isLeftCollapsed) {
+        // 展开：恢复到原来的宽度
+        this.leftWidth = 200;
+        this.isLeftCollapsed = false;
+      } else {
+        // 收起：只隐藏内容，保留容器宽度以确保按钮可见
+        this.leftWidth = 0;
+        this.isLeftCollapsed = true;
+      }
+    },
+    /** 开始拖拽水平分割线 */
     startResize(e) {
       e.preventDefault();
+      // 如果面板是收起状态，先展开它
+      if (this.isLeftCollapsed) {
+        this.leftWidth = 200;
+        this.isLeftCollapsed = false;
+      }
       // 记录初始位置
-      const container = this.$el.querySelector('.el-card__body');
-      const containerRect = container.getBoundingClientRect();
-      this.startY = e.clientY;
-      this.startTopHeight = this.topHeight;
+      this.startX = e.clientX;
+      this.startLeftWidth = this.leftWidth;
       document.addEventListener('mousemove', this.resize);
       document.addEventListener('mouseup', this.stopResize);
     },
-    /** 拖拽中 */
+    /** 拖拽中（水平） */
     resize(e) {
-      const container = this.$el.querySelector('.el-card__body');
-      const containerRect = container.getBoundingClientRect();
       // 基于初始位置计算相对变化
-      const deltaY = e.clientY - this.startY;
-      const newHeight = this.startTopHeight + deltaY;
-      if (newHeight > 100 && newHeight < containerRect.height - 100) {
-        this.topHeight = newHeight;
+      const deltaX = e.clientX - this.startX;
+      const newWidth = this.startLeftWidth + deltaX;
+      // 限制最小宽度
+      if (newWidth > 100 && newWidth < 500) {
+        this.leftWidth = newWidth;
       }
     },
-    /** 结束拖拽 */
+    /** 结束拖拽（水平） */
     stopResize() {
       document.removeEventListener('mousemove', this.resize);
       document.removeEventListener('mouseup', this.stopResize);
     },
+
     getList() {
       this.loading = true;
       // 确保查询参数包含planId
@@ -471,6 +580,8 @@ export default {
         salesPerson: row.salesPerson,
         principal: row.principal,
         principalPhone: row.principalPhone,
+        // 车牌号
+        licensePlate: row.licensePlate,
         remark: row.remark
       };
       this.open = true;
@@ -482,10 +593,48 @@ export default {
         ...this.queryParams
       }, `deliveryWaybill_${new Date().getTime()}.xlsx`)
     },
+    handleExportPlan() {
+      this.download('wms/deliveryWaybillDetail/export', {
+        planId: this.selectedPlan.planId
+      }, `deliveryPlan_${new Date().getTime()}.xlsx`)
+    },
+    /** 绑定订单 */
+    bindOrder() {
+      this.orderDialogVisible = true;
+    },
+    /** 解绑订单 */
+    unbindOrder() {
+      this.form.orderId = undefined;
+      this.form.orderCode = undefined;
+      this.form.consigneeUnit = undefined;
+      this.form.principal = undefined;
+    },
+    /** 切换订单 */
+    changeOrder() {
+      this.orderDialogVisible = true;
+    },
+    /** 订单搜索 */
+    handleOrderSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    /** 选择订单 */
+    handleOrderSelect(row) {
+      this.form.orderId = row.orderId;
+      this.form.orderCode = row.orderCode;
+      this.form.consigneeUnit = row.companyName;
+      this.form.principal = row.salesman;
+      this.orderDialogVisible = false;
+    },
     /** 打印发货单 */
     handlePrint(row, printType) {
       this.loading = true;
       this.printType = printType || 0;
+      updateDeliveryWaybill({
+        waybillId: row.waybillId,
+        status: 2
+      }).then(() => {
+        row.status = 2;
+      });
       // 获取发货单明细
       listDeliveryWaybillDetail({
         waybillId: row.waybillId,
@@ -545,26 +694,84 @@ export default {
 </script>
 
 <style scoped>
-.plan-container {
-  padding: 10px;
-  height: 100%;
-  border-right: 1px solid #ebeef5;
+.app-container {
+  height: 100vh;
+  padding: 0;
+  overflow: hidden;
+  height: calc(100vh - 84px);
 }
 
-.plan-container h3 {
-  margin: 0 0 10px 0;
+.main-container1 {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.left-panel-container {
+  height: 100%;
+  position: relative;
+  transition: width 0.3s ease;
+  /* 移除 overflow: hidden，确保按钮不被裁剪 */
+}
+
+.left-panel {
+  height: 100%;
+  border-right: 1px solid #ebeef5;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.panel-header h3 {
+  margin: 0;
   padding: 0;
   font-size: 16px;
   font-weight: 500;
 }
 
-.resizer {
+.toggle-button {
+  position: absolute;
+  bottom: 0px;
+  z-index: 10;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 0 4px 4px 0;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: -1px;
+  /* 确保按钮始终可见 */
+  transition: all 0.3s ease;
+}
+
+.toggle-button .el-button {
+  padding: 0;
+  margin: 0;
   width: 100%;
-  height: 4px;
-  background-color: #818181;
-  cursor: row-resize;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resizer {
+  width: 4px;
+  /* background-color: #818181; */
+  cursor: col-resize;
   position: relative;
   transition: background-color 0.3s;
+  height: 100%;
 }
 
 .resizer:hover {
@@ -577,8 +784,8 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 40px;
-  height: 2px;
+  height: 40px;
+  width: 2px;
   background-color: #c0c4cc;
   border-radius: 1px;
   transition: background-color 0.3s;
@@ -595,4 +802,27 @@ export default {
 .resizer:active::before {
   background-color: #fff;
 }
+
+.right-panel {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 保留原有的垂直分割线样式 */
+.resizer.row-resizer {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.resizer.row-resizer::before {
+  width: 40px;
+  height: 2px;
+}
+
+::v-deep .el-pagination {
+  margin-top: 6px !important;
+}
 </style>

From c68a4573dc2122087e936f494bcb9e42ca334d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 8 Apr 2026 11:25:10 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(=E9=92=A2=E5=8D=B7=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E5=8F=91=E8=B4=A7=E5=8D=95=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=BB=9F=E8=AE=A1=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增发货单数量统计显示，展示已发货和未发货数量
- 添加从发货单移除钢卷的功能
- 移除不再使用的代码注释
---
 klp-ui/src/views/wms/coil/panels/base.vue | 79 +++++++++++++++--------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index 40c8bbed..0390dfcc 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -62,12 +62,16 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         <el-button icon="el-icon-download" size="mini" @click="handleNewExport" v-if="showNewExport">导出</el-button>
       </el-form-item>
+
+      <el-form-item style="float: right;" v-if="showWaybill" v-loading="loading">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="已发货数量">{{ shippedCount }}</el-descriptions-item>
+          <el-descriptions-item label="未发货数量">{{ unshippedCount }}</el-descriptions-item>
+        </el-descriptions>
+      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8" v-if="showControl">
-      <!-- <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col> -->
       <el-col :span="1.5">
         <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
           @click="handleCheck">修正</el-button>
@@ -134,11 +138,6 @@
         </template>
       </el-table-column>
       <el-table-column label="更新人" v-if="!showExportTime" align="center" prop="updateByName" />
-      <!-- <el-table-column label="二维码">
-        <template slot-scope="scope">
-          <QRCode :content="scope.row.qrcodeRecordId" :size="50" />
-        </template>
-      </el-table-column> -->
       <el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <span v-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 1 && scope.row.dataType === 1">
@@ -301,6 +300,10 @@
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCheck(scope.row)"
             v-if="showControl">修正</el-button>
           <el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
+          <el-button size="mini" v-if="showWaybill" type="text" icon="el-icon-close"
+            @click="handleRemoveFromWaybill(scope.row)">
+            移出发货单
+          </el-button>
         </template>
       </el-table-column>
     </KLPTable>
@@ -521,6 +524,7 @@ import LogTable from "@/views/wms/warehouse/components/LogTable.vue";
 import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint';
 import DragResizeBox from '@/components/DragResizeBox/index.vue';
 import ProcessFlow from '../components/ProcessFlow.vue';
+import { listDeliveryWaybillDetail, delDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
 
 export default {
   name: "MaterialCoil",
@@ -825,6 +829,9 @@ export default {
         ],
       },
       productionTimeFormVisible: false,
+      // 统计数据：已发货的数量和未发货的数量
+      shippedCount: 0,
+      unshippedCount: 0,
     };
   },
   computed: {
@@ -873,6 +880,35 @@ export default {
       // 初始化时计算一次
       this.calculateProductionDuration();
     },
+    async handleRemoveFromWaybill(row) {
+      const coilId = row.coilId;
+      // 根据id查询所在的单据明细
+      const res = await listDeliveryWaybillDetail({ coilId });
+      
+      if (res.rows.length != 1) {
+        this.$message({
+          message: '发货单查找失败',
+          type: 'error',
+        });
+        return;
+      }
+      console.log(res.rows)
+      const detailId = res.rows[0].detailId;
+      // 二次确认是否移除
+      this.$modal.confirm('确认要将该钢卷从发货单中移除吗？', {
+        title: '确认移除',
+        type: 'warning',
+        }).then(() => {
+          delDeliveryWaybillDetail(detailId).then(res => {
+            this.$message({
+              message: '移除成功',
+              type: 'success',
+            });
+            this.getList();
+        });
+      })
+      // 打开一个弹窗列出查询到的所有单据明细
+    },
     // 格式化毫秒值为xx天xx小时xx分钟
     formatDuration(milliseconds) {
       if (!milliseconds || milliseconds < 0) return '';
@@ -1022,6 +1058,14 @@ export default {
           this.total = res.total;
           this.loading = false;
         })
+        // 获取统计数据：已发货的数量和未发货的数量
+        listBoundCoil({ ...query, status: 0 }).then(res => {
+          this.unshippedCount = res.total;
+        })
+        // 获取统计数据：已发货的数量和未发货的数量
+        listBoundCoil({ ...query, status: 1 }).then(res => {
+          this.shippedCount = res.total;
+        })
         return;
       }
       listMaterialCoil(query).then(response => {
@@ -1147,25 +1191,6 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.isCheck = false;
-      this.reset();
-
-      // 如果父组件传入了 materialType，使用它作为默认值
-      if (this.querys.materialType) {
-        this.form.materialType = this.querys.materialType;
-        // 同时设置对应的 itemType
-        if (this.querys.materialType === '成品') {
-          this.form.itemType = 'product';
-        } else if (this.querys.materialType === '原料') {
-          this.form.itemType = 'raw_material';
-        }
-      }
-
-      this.open = true;
-      this.title = "添加钢卷物料";
-    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.isCheck = false;