feat(wms): 新增发货相关功能及优化钢卷选择逻辑

- 新增发货计划钢卷操作记录页面
- 新增发货分级管理页面
- 新增我的钢卷管理页面
- 在钢卷发货页面增加质量状态校验
- 在基础面板组件中增加质量状态选择功能
- 优化钢卷选择器筛选参数

klp-ui/src/views/wms/coil/do/ship.vue

@@ -213,6 +213,7 @@ export default {
       // 钢卷选择器筛选参数
       coilFilters: {
         dataType: 1,
+        materialType: '成品'
       },
       coilSelectorVisible: false,
       loading: false,
@@ -301,6 +302,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      // 判断是否选择了钢卷
+      if (!this.form.coilId) {
+        this.$message.warning('请选择钢卷');
+        return;
+      }
+      // 判断钢卷的质量状态，必须是A+, A，A-, B+其中之一
+      if (!['A+', 'A', 'A-', 'B+'].includes(this.form.qualityStatus)) {
+        this.$message.warning('钢卷质量状态需在B+及以上');
+        return;
+      }
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;

klp-ui/src/views/wms/coil/panels/base.vue

@@ -99,22 +99,6 @@
           <QRCode :content="scope.row.qrcodeRecordId" :size="50" />
         </template>
       </el-table-column>
-
-      <!-- <el-table-column label="状态" v-if="showStatus" align="center" prop="status">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.status" placeholder="请选择状态" @change="handleStatusChange(scope.row)">
-            <el-option v-for="item in dict.type.product_coil_status" :key="item.value" :value="parseInt(item.value)"
-              :label="item.label" />
-          </el-select>
-        </template>
-      </el-table-column> -->
-      <!-- <el-table-column label="班组" align="center" prop="team" /> -->
-      <!-- <el-table-column label="毛重" align="center" prop="grossWeight" />
-      <el-table-column label="净重" align="center" prop="netWeight" /> -->
-      <!-- <el-table-column v-if="querys.materialType === '成品'" label="质量状态" align="center" prop="qualityStatus" />
-      <el-table-column v-if="querys.materialType === '成品'" label="切边要求" align="center" prop="trimmingRequirement" />
-      <el-table-column v-if="querys.materialType === '成品'" label="打包状态" align="center" prop="packingStatus" />
-      <el-table-column v-if="querys.materialType === '成品'" label="包装要求" align="center" prop="packagingRequirement" /> -->
       <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">
@@ -129,6 +113,14 @@
           <span v-else>—</span>
         </template>
       </el-table-column>
+      <el-table-column v-if="showGrade" label="质量状态" align="center" prop="qualityStatus">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.qualityStatus" placeholder="请选择质量状态" @change="handleGradeChange(scope.row)">
+            <el-option v-for="item in qualityStatusEnum" :key="item.value" :value="item.value"
+              :label="item.label" />
+          </el-select>
+        </template>
+      </el-table-column>
       <!-- <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -311,6 +303,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showGrade: {
+      type: Boolean,
+      default: false,
+    },
     showAbnormal: {
       type: Boolean,
       default: false,
@@ -318,6 +314,17 @@ export default {
   },
   data() {
     return {
+      qualityStatusEnum: [
+        { label: 'A+', value: 'A+' },
+        { label: 'A', value: 'A' },
+        { label: 'A-', value: 'A-' },
+        { label: 'B+', value: 'B+' },
+        { label: 'B', value: 'B' },
+        { label: 'B-', value: 'B-' },
+        { label: 'C+', value: 'C+' },
+        { label: 'C', value: 'C' },
+        { label: 'C-', value: 'C-' },
+      ],
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -486,6 +493,12 @@ export default {
         this.$message.error('溯源查询失败，请重试');
       });
     },
+    handleGradeChange(row) {
+      updateMaterialCoilSimple(row).then(res => {
+        this.$message.success('质量状态更新成功');
+        this.getList(); // 刷新列表
+      })
+    },
     /** 预览标签 */
     handlePreviewLabel(row) {
       this.labelRender.visible = true;

klp-ui/src/views/wms/delivery/components/planRecord.vue

@@ -89,7 +89,7 @@ export default {
           this.getList();
         }
       },
-      // immediate: true
+      immediate: true
     }
   },
   methods: {

klp-ui/src/views/wms/delivery/grading/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <BasePage 
+    :qrcode="qrcode" 
+    :querys="querys" 
+    :labelType="labelType" 
+    :showStatus="showStatus" 
+    :hideType="hideType" 
+    :showControl="showControl" 
+    :showGrade="showGrade"
+    />
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      qrcode: false,
+      querys: {
+        dataType: 1,
+        materialType: '成品',
+        itemType: 'product',
+        status: 0
+      },
+      labelType: '3',
+      showStatus: false,
+      hideType: true,
+      showControl: false,
+      showGrade: true
+    }
+  }
+}
+</script>

klp-ui/src/views/wms/delivery/mycoil/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="coil-selector-container">
+    <el-form :inline="true" :model="queryParams" class="search-form">
+      <el-form-item label="卷号">
+        <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="物料">
+        <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+      </el-form-item>
+      <el-form-item label="规格">
+        <memo-input storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格" clearable size="small"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="材质">
+        <muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质"
+          clearable />
+      </el-form-item>
+      <el-form-item label="厂家">
+        <muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家"
+          clearable />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 增加 row-class-name 绑定，动态设置行样式 -->
+    <el-table v-loading="loading" :data="coilList" highlight-current-row height="400px"
+      style="width: 100%" :row-class-name="tableRowClassName"> <!-- 新增行类名绑定 -->
+      <!-- 自定义列 -->
+      <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
+        :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+
+  </div>
+</template>
+
+<script>
+import { listMaterialCoil } from '@/api/wms/coil';
+import MemoInput from '@/components/MemoInput/index.vue';
+import MutiSelect from '@/components/MutiSelect/index.vue';
+
+export default {
+  name: 'CoilSelector',
+  components: {
+    MemoInput,
+    MutiSelect
+  },
+  dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
+  data() {
+    return {
+      loading: false,
+      coilList: [],
+      total: 0,
+      // 内部显隐控制变量（触发器模式下使用）
+      innerVisible: false,
+      // 选中的钢卷数据
+      selectedCoil: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        currentCoilNo: null,
+        grade: null,
+        materialType: '成品',
+        selectType: 'raw_material',
+        dataType: 1 // 只查询当前数据，不查询历史数据
+      },
+      columns: [
+        {
+          label: '卷号',
+          align: 'center',
+          prop: 'currentCoilNo',
+          showOverflowTooltip: true
+        },
+        { label: '质量状态', prop: 'qualityStatus' },
+        { label: '打包状态', prop: 'packingStatus' },
+        // 对应edgeType
+        { label: '切边要求', prop: 'edgeRequirement' },
+        // 对应packaging
+        { label: '包装要求', prop: 'packagingRequirement' },
+        {
+          label: '存储位置',
+          align: 'center',
+          prop: 'actualWarehouseName',
+          width: '120',
+          showOverflowTooltip: true
+        },
+        {
+          label: '物料',
+          align: 'center',
+          prop: 'itemName',
+          width: '100'
+        },
+        {
+          label: '规格',
+          align: 'center',
+          prop: 'specification',
+          width: '100'
+        },
+        {
+          label: '材质',
+          align: 'center',
+          prop: 'material',
+          width: '100'
+        },
+        {
+          label: '厂家',
+          align: 'center',
+          prop: 'manufacturer',
+          width: '100'
+        },
+        {
+          label: '重量(t)',
+          align: 'center',
+          prop: 'netWeight',
+          width: '100'
+        },
+        {
+          label: '库区',
+          align: 'center',
+          prop: 'warehouseName',
+          width: '120',
+          showOverflowTooltip: true
+        },
+      ],
+    };
+  },
+  computed: {
+    // 根据模式决定对话框显隐逻辑
+    dialogVisible: {
+      get() {
+        // 触发器模式：使用内部变量
+        if (this.useTrigger) {
+          return this.innerVisible;
+        }
+        // 非触发器模式：使用外部传入的visible属性
+        return this.visible;
+      },
+      set(val) {
+        if (this.useTrigger) {
+          // 触发器模式：更新内部变量
+          this.innerVisible = val;
+        } else {
+          // 非触发器模式：通知父组件更新
+          this.$emit('update:visible', val);
+        }
+      }
+    },
+    currentUserId() {
+      return this.$store.getters.id;
+    },
+    renderColumns() {
+      // 如果有自定义列配置，使用它；否则使用默认列
+      return this.coilColumn.length;
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 表格行类名动态生成 - 核心：区分权限行/禁用行
+    tableRowClassName({ row }) {
+      // 销售受限模式下，判断当前行是否有权限
+      if (this.salesRestricted && row.saleId !== this.currentUserId) {
+        return 'disabled-coil-row'; // 禁用行类名
+      }
+      return '';
+    },
+
+    // 获取钢卷列表
+    async getList() {
+      // 如果是范围模式，直接使用传入数据
+      if (this.rangeMode) {
+        this.coilList = this.rangeData || [];
+        this.total = this.coilList.length;
+        return;
+      }
+      try {
+        this.loading = true;
+        // 设置筛选条件
+        const queryPayload = {
+          ...this.queryParams,
+          ...this.filters,
+        };
+        // 处于销售视角，且my视图时，只查询当前用户的钢卷
+        console.log('this.salesRestricted', this.salesRestricted, this.currentTab, this.currentUserId);
+        if (this.salesRestricted && this.currentTab === 'my') {
+          queryPayload.saleId = this.currentUserId;
+        }
+        const response = await listMaterialCoil(queryPayload);
+        if (response.code === 200) {
+          this.coilList = response.rows || [];
+          this.total = response.total || 0;
+          // 如果有初始coilId，尝试匹配数据
+          if (this.value && !this.selectedCoil) {
+            this.matchCoilById(this.value);
+          }
+        } else {
+          this.$message.warning(`获取钢卷列表失败：${response.msg || '未知错误'}`);
+        }
+      } catch (error) {
+        console.error('获取钢卷列表异常', error);
+        this.$message.error('获取钢卷列表失败，请重试');
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    // 重置搜索条件
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        currentCoilNo: null,
+        grade: null,
+        dataType: 1,
+        selectType: 'raw_material',
+      };
+      this.getList();
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.coil-selector-container {
+  width: 100%;
+}
+
+.trigger-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+// 未选择状态样式
+.no-selection {
+  padding: 8px 12px;
+  border: 1px dashed #dcdcdc;
+  border-radius: 4px;
+  color: #999;
+  background-color: #f9f9f9;
+  width: fit-content;
+}
+
+// 已选择状态样式
+.selected-coil-info {
+  padding: 12px;
+  border: 1px solid #e6f7ff;
+  border-radius: 6px;
+  background-color: #f0f9ff;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+  width: fit-content;
+  max-width: 100%;
+
+  .info-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .label {
+      color: #666;
+      font-size: 13px;
+    }
+
+    .value {
+      color: #333;
+      font-size: 14px;
+      font-weight: 500;
+      white-space: nowrap;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .clear-selection {
+    color: #f56c6c;
+    margin-left: 12px;
+    padding: 0 8px;
+
+    &:hover {
+      color: #ff4d4f;
+      background-color: transparent;
+    }
+  }
+}
+
+// 选择按钮样式
+.select-button {
+  margin-top: 4px;
+}
+
+.search-form {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+::v-deep .el-dialog__body {
+  padding: 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+::v-deep .el-table {
+  --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
+}
+
+::v-deep .el-table__row.current-row {
+  background-color: var(--el-color-primary-light-8) !important;
+}
+
+// 核心：禁用行样式（销售权限受限）
+::v-deep .el-table .disabled-coil-row {
+  background-color: #f8f8f8 !important;
+  color: #c0c4cc !important;
+  cursor: not-allowed !important;
+
+  // 覆盖hover高亮
+  &:hover>td {
+    background-color: #f8f8f8 !important;
+  }
+
+  // 覆盖当前行高亮
+  &.current-row {
+    background-color: #f8f8f8 !important;
+  }
+
+  // 禁止单元格交互
+  td {
+    pointer-events: none;
+    user-select: none; // 禁止文本选中
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .selected-coil-info {
+    gap: 12px;
+    padding: 10px;
+  }
+
+  .info-item {
+    flex: 1 1 calc(50% - 12px);
+  }
+}
+</style>

klp-ui/src/views/wms/delivery/record/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="app-container">
+    <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="钢卷ID" prop="coilId">
+        <el-input
+          v-model="queryParams.coilId"
+          placeholder="请输入钢卷ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </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-table v-loading="loading" :data="deliveryPlanCoilOperateList">
+      <el-table-column label="钢卷号" align="center" prop="coilDetail.currentCoilNo"></el-table-column>
+      <el-table-column label="操作类型" align="center" prop="operateType" />
+      <el-table-column label="操作人" align="center" prop="createBy" />
+      <el-table-column label="操作时间" align="center" prop="createTime" />
+      <!-- <el-table-column label="操作备注" align="center" prop="remark" /> -->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listDeliveryPlanCoilOperate } from "@/api/wms/deliveryPlanCoilOperate";
+
+export default {
+  name: "DeliveryPlanCoilOperate",
+  created() {
+    this.getList();
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 发货计划钢卷操作记录表格数据
+      deliveryPlanCoilOperateList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planId: undefined,
+        coilId: undefined,
+        operateType: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  methods: {
+    /** 查询发货计划钢卷操作记录列表 */
+    getList() {
+      if (!this.planId) {
+        return
+      }
+      this.loading = true;
+      listDeliveryPlanCoilOperate(this.queryParams).then(response => {
+        this.deliveryPlanCoilOperateList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+  }
+};
+</script>