From e900aec86b529815369fc48b7582d0a26a24d59f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Thu, 18 Dec 2025 11:51:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=94=80=E5=94=AE=E6=9D=83=E9=99=90):=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=92=A2=E5=8D=B7=E9=94=80=E5=94=AE=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E5=88=86=E9=85=8D=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增销售权限管理模块，包含以下功能：
1. 在用户模块添加id字段用于权限控制
2. 重构CoilSelector组件支持销售视角权限过滤
3. 新增销售权限分配页面，支持钢卷分配与移除
4. 优化表格样式和交互体验

组件现在支持根据用户权限动态显示和过滤钢卷数据，管理员可在新页面为销售分配钢卷权限
---
 klp-ui/src/assets/styles/element-ui.scss      |   4 +-
 klp-ui/src/components/CoilSelector/data.js    |  52 ++
 klp-ui/src/components/CoilSelector/index.vue  | 172 ++---
 .../components/HomeModules/StatisticGroup.vue |   4 +-
 klp-ui/src/store/getters.js                   |   1 +
 klp-ui/src/store/modules/user.js              |   7 +-
 klp-ui/src/views/index.vue                    |   3 +-
 klp-ui/src/views/wms/delivery/permi/index.vue | 586 ++++++++++++++++++
 klp-ui/src/views/wms/delivery/plan/index.vue  |   2 +-
 9 files changed, 749 insertions(+), 82 deletions(-)
 create mode 100644 klp-ui/src/components/CoilSelector/data.js
 create mode 100644 klp-ui/src/views/wms/delivery/permi/index.vue

diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss
index 7ea86558..480f6e59 100644
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -1551,8 +1551,8 @@ body {
   .el-pager li {
     margin: 0 2px;
     min-width: 30px;
-    height: 30px;
-    line-height: 30px;
+    // height: 30px;
+    // line-height: 30px;
     border-radius: 4px;
     background: $--metal-gradient-light;
     border: 1px solid $--border-color-light;
diff --git a/klp-ui/src/components/CoilSelector/data.js b/klp-ui/src/components/CoilSelector/data.js
new file mode 100644
index 00000000..85762b0e
--- /dev/null
+++ b/klp-ui/src/components/CoilSelector/data.js
@@ -0,0 +1,52 @@
+export const defaultColumns = [
+  {
+    label: '卷号',
+    align: 'center',
+    prop: 'currentCoilNo',
+    showOverflowTooltip: true
+  },
+  {
+    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
+  },
+]
\ No newline at end of file
diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue
index 20fe5010..e03cd460 100644
--- a/klp-ui/src/components/CoilSelector/index.vue
+++ b/klp-ui/src/components/CoilSelector/index.vue
@@ -24,19 +24,22 @@
             @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="物料">
-          <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+          <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" />
+          <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 />
+          <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 />
+          <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>
@@ -44,22 +47,32 @@
       </el-form>
 
       <!-- 数据表格 -->
-      <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
-        style="width: 100%">
+      <el-table v-if="!salesRestricted" v-loading="loading" :data="coilList" @row-click="handleRowClick"
+        highlight-current-row height="400px" style="width: 100%">
         <!-- 自定义列 -->
-        <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-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>
 
+      <div v-else>
+        <el-tabs type="card" v-model="currentTab" @tab-click="getList">
+          <el-tab-pane label="全部钢卷" name="all"></el-tab-pane>
+          <el-tab-pane label="我的钢卷" name="my"></el-tab-pane>
+        </el-tabs>
+
+        <!-- 增加 row-class-name 绑定，动态设置行样式 -->
+        <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" 
+          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>
+      </div>
+
       <!-- 分页 -->
-      <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getList" />
+      <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize" @pagination="getList" />
 
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取消</el-button>
@@ -72,6 +85,7 @@
 import { listMaterialCoil } from '@/api/wms/coil';
 import MemoInput from '@/components/MemoInput/index.vue';
 import MutiSelect from '@/components/MutiSelect/index.vue';
+import { defaultColumns } from './data';
 
 export default {
   name: 'CoilSelector',
@@ -117,7 +131,7 @@ export default {
       type: Boolean,
       default: false
     },
-    // 返回选择模式，不再通过list借口获取，而是传入可以选择的钢卷数据
+    // 范围选择模式，不再通过list借口获取，而是传入可以选择的钢卷数据
     rangeData: {
       type: Array,
       default: () => []
@@ -126,7 +140,12 @@ export default {
     coilColumn: {
       type: Array,
       default: () => []
-    }
+    },
+    // 销售视角：钢卷受限访问
+    salesRestricted: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -145,58 +164,8 @@ export default {
         selectType: 'raw_material',
         dataType: 1 // 只查询当前数据，不查询历史数据
       },
-      columns: [
-        {
-          label: '卷号',
-          align: 'center',
-          prop: 'currentCoilNo',
-          showOverflowTooltip: true
-        },
-        {
-          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
-        },
-      ]
+      columns: defaultColumns,
+      currentTab: 'all',
     };
   },
   computed: {
@@ -220,6 +189,9 @@ export default {
         }
       }
     },
+    currentUserId() {
+      return this.$store.getters.id;
+    },
     renderColumns() {
       // 如果有自定义列配置，使用它；否则使用默认列
       return this.coilColumn.length > 0 ? this.coilColumn : this.columns;
@@ -269,6 +241,15 @@ export default {
     }
   },
   methods: {
+    // 表格行类名动态生成 - 核心：区分权限行/禁用行
+    tableRowClassName({ row }) {
+      // 销售受限模式下，判断当前行是否有权限
+      if (this.salesRestricted && row.saleId !== this.currentUserId) {
+        return 'disabled-coil-row'; // 禁用行类名
+      }
+      return '';
+    },
+
     // 获取钢卷列表
     async getList() {
       // 如果是范围模式，直接使用传入数据
@@ -279,8 +260,17 @@ export default {
       }
       try {
         this.loading = true;
-        const params = { ...this.queryParams, ...this.filters };
-        const response = await listMaterialCoil(params);
+        // 设置筛选条件
+        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;
@@ -331,8 +321,13 @@ export default {
       this.getList();
     },
 
-    // 点击表格行选择
+    // 点击表格行选择 - 新增禁用行拦截
     handleRowClick(row) {
+      // 销售受限模式下，拦截无权限行的点击
+      if (this.salesRestricted && row.saleId !== this.currentUserId) {
+        this.$message.warning('您没有权限选择此钢卷');
+        return; // 终止后续逻辑
+      }
       this.handleSelect(row);
     },
 
@@ -342,6 +337,10 @@ export default {
         this.$message.warning('请选择有效的钢卷数据');
         return;
       }
+      if (this.salesRestricted && row.saleId != this.currentUserId) {
+        this.$message.warning('您没有权限选择此钢卷');
+        return;
+      }
       // 存储选中的钢卷数据
       this.selectedCoil = row;
       // 触发自定义事件，通知父组件选中结果（返回完整行数据）
@@ -466,6 +465,29 @@ export default {
   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;
 }
diff --git a/klp-ui/src/components/HomeModules/StatisticGroup.vue b/klp-ui/src/components/HomeModules/StatisticGroup.vue
index e7524b6a..ca77f315 100644
--- a/klp-ui/src/components/HomeModules/StatisticGroup.vue
+++ b/klp-ui/src/components/HomeModules/StatisticGroup.vue
@@ -23,8 +23,8 @@ import { listProduct } from '@/api/wms/product'
 import { listRawMaterial } from '@/api/wms/rawMaterial'
 import { listMaterialCoil } from '@/api/wms/coil'
 import { listEquipmentManagement } from '@/api/mes/eqp/equipmentManagement'
-import { listOrder } from '@/api/wms/order'
-import { listCustomer } from '@/api/wms/customer'
+import { listOrder } from '@/api/crm/order'
+import { listCustomer } from '@/api/crm/customer'
 // import { listSupplier } from '@/api/wms/supplier'
 
 export default {
diff --git a/klp-ui/src/store/getters.js b/klp-ui/src/store/getters.js
index 7af8f383..7c8d97fe 100644
--- a/klp-ui/src/store/getters.js
+++ b/klp-ui/src/store/getters.js
@@ -7,6 +7,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  id: state => state.user.id,
   name: state => state.user.name,
   avatar: state => state.user.avatar,
   introduction: state => state.user.introduction,
diff --git a/klp-ui/src/store/modules/user.js b/klp-ui/src/store/modules/user.js
index 507f1845..5b4d35ea 100644
--- a/klp-ui/src/store/modules/user.js
+++ b/klp-ui/src/store/modules/user.js
@@ -3,6 +3,7 @@ import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
   state: {
+    id: '',
     token: getToken(),
     name: '',
     avatar: '',
@@ -25,7 +26,10 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
-    }
+    },
+    SET_ID: (state, id) => {
+      state.id = id
+    },
   },
 
   actions: {
@@ -60,6 +64,7 @@ const user = {
           }
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
+          commit('SET_ID', user.userId)
           resolve(res)
         }).catch(error => {
           reject(error)
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index e4c2f545..6610732a 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -7,7 +7,8 @@
 
     <el-row :gutter="10">
       <el-col :span="18">
-        <flow-table />
+        <!-- <flow-table /> -->
+        <el-empty description="办公模块定制开发中"></el-empty>
       </el-col>
       <el-col :span="6">
         <mini-calendar />
diff --git a/klp-ui/src/views/wms/delivery/permi/index.vue b/klp-ui/src/views/wms/delivery/permi/index.vue
new file mode 100644
index 00000000..76a52652
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/permi/index.vue
@@ -0,0 +1,586 @@
+<template>
+  <!-- 销售权限 -->
+  <el-row :gutter="10" class="sales-permission-container">
+    <!-- 销售列表 -->
+    <el-col :span="3" class="sales-tree-container">
+      <div class="tree-title">销售列表</div>
+      <!-- 用树展示销售用户列表 -->
+      <el-tree ref="salesTree" :data="userTreeData" :props="treeProps" node-key="id" @node-click="handleTreeNodeClick"
+        highlight-current :expand-on-click-node="false">
+      </el-tree>
+    </el-col>
+
+    <el-col :span="21" class="coil-table-container">
+      <!-- 待分配卷表格标题 -->
+      <div class="table-title">
+        <span>待分配钢卷</span>
+        <!-- 搜索区域 -->
+        <div  style="display: flex; align-items: center; justify-content: flex-end;">
+          <el-form :inline="true" :model="queryParamsWithUnAssignedId" class="search-form">
+            <el-form-item label="卷号">
+              <el-input style="width: 100px;" v-model="queryParamsWithUnAssignedId.currentCoilNo" placeholder="输入卷号"
+                clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="物料">
+              <muti-select style="width: 100px;" v-model="queryParamsWithUnAssignedId.itemName"
+                :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+            </el-form-item>
+            <el-form-item label="规格">
+              <memo-input style="width: 100px;" storageKey="coilSpec"
+                v-model="queryParamsWithUnAssignedId.specification" placeholder="请输入规格" clearable size="small"
+                @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="材质">
+              <muti-select style="width: 100px;" v-model="queryParamsWithUnAssignedId.itemMaterial"
+                :options="dict.type.coil_material" placeholder="请选择材质" clearable />
+            </el-form-item>
+            <el-form-item label="厂家">
+              <muti-select style="width: 100px;" v-model="queryParamsWithUnAssignedId.itemManufacturer"
+                :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable />
+            </el-form-item>
+          </el-form>
+          <pagination v-show="unAssignedTotal > 0" :total="unAssignedTotal"
+            :page.sync="queryParamsWithUnAssignedId.pageNum" :limit.sync="queryParamsWithUnAssignedId.pageSize"
+            @pagination="listUnAssignedCoil" />
+          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="listUnAssignedCoil">刷新</el-button>
+        </div>
+
+      </div>
+      <!-- 上方是待分配的卷 -->
+      <KLPTable height="40vh" v-loading="unAssignedLoading" :data="unAssignedCoilList" :floatLayer="true"
+        :floatLayerConfig="floatLayerConfig">
+        <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
+          <template slot-scope="scope">
+            <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
+          </template>
+        </el-table-column>
+        <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
+          <template slot-scope="scope">
+            <coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
+          </template>
+        </el-table-column>
+        <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
+        <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+        <el-table-column label="产品类型" align="center" width="250">
+          <template slot-scope="scope">
+            <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
+            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" align="center" prop="updateTime">
+          <template slot-scope="scope">
+            {{ scope.row.updateTime }}
+          </template>
+        </el-table-column>
+        <el-table-column label="更新人" align="center" prop="updateByName" />
+        <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">
+              <el-tag type="warning" size="mini">来自母卷：{{ scope.row.parentCoilNos }}</el-tag>
+            </span>
+            <span v-else-if="scope.row.parentCoilNos && scope.row.dataType === 0">
+              <el-tag type="info" size="mini">分为子卷：{{ scope.row.parentCoilNos }}</el-tag>
+            </span>
+            <span v-else-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 2">
+              <el-tag type="success" size="mini">合并自：{{ scope.row.parentCoilNos }}</el-tag>
+            </span>
+            <span v-else>—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="handleAssign(scope.row)"
+              :disabled="!currentUser.id">分配</el-button>
+          </template>
+        </el-table-column>
+      </KLPTable>
+
+      <!-- 已分配卷区域：有选中销售才显示表格，否则显示空提示 -->
+      <div v-if="currentUser.id">
+        <!-- 已分配卷表格标题 -->
+        <div class="table-title" style="margin-top: 20px">
+          <span>已分配给 {{ currentUser.nickName || '未选择销售' }} 的钢卷</span>
+          <div style="display: flex; align-items: center; justify-content: flex-end;">
+            <!-- 搜索区域 -->
+            <el-form :inline="true" :model="queryParamsWithSalesId">
+              <el-form-item label="卷号">
+                <el-input style="width: 100px;" v-model="queryParamsWithSalesId.currentCoilNo" placeholder="请输入卷号"
+                  clearable size="small" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="物料">
+                <muti-select style="width: 100px;" v-model="queryParamsWithSalesId.itemName"
+                  :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+              </el-form-item>
+              <el-form-item label="规格">
+                <memo-input style="width: 100px;" storageKey="coilSpec" v-model="queryParamsWithSalesId.specification"
+                  placeholder="请输入规格" clearable size="small" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="材质">
+                <muti-select style="width: 100px;" v-model="queryParamsWithSalesId.itemMaterial"
+                  :options="dict.type.coil_material" placeholder="请选择材质" clearable />
+              </el-form-item>
+              <el-form-item label="厂家">
+                <muti-select style="width: 100px;" v-model="queryParamsWithSalesId.itemManufacturer"
+                  :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable />
+              </el-form-item>
+            </el-form>
+            <pagination v-show="salesTotal > 0" :total="salesTotal" :page.sync="queryParamsWithSalesId.pageNum"
+              :limit.sync="queryParamsWithSalesId.pageSize" @pagination="listSalesCoil" />
+            <el-button type="primary" size="mini" icon="el-icon-refresh" @click="listSalesCoil"
+              :disabled="!currentUser.id">刷新</el-button>
+          </div>
+
+        </div>
+        <!-- 下方是已分配的卷 -->
+        <KLPTable height="40vh" v-loading="salesLoading" :data="salesCoilList" :floatLayer="true"
+          :floatLayerConfig="floatLayerConfig">
+          <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
+            <template slot-scope="scope">
+              <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
+            </template>
+          </el-table-column>
+          <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
+            <template slot-scope="scope">
+              <coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
+            </template>
+          </el-table-column>
+          <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
+          <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+          <el-table-column label="产品类型" align="center" width="250">
+            <template slot-scope="scope">
+              <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
+              <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
+            </template>
+          </el-table-column>
+          <el-table-column label="更新时间" align="center" prop="updateTime">
+            <template slot-scope="scope">
+              {{ scope.row.updateTime }}
+            </template>
+          </el-table-column>
+          <el-table-column label="更新人" align="center" prop="updateByName" />
+          <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">
+                <el-tag type="warning" size="mini">来自母卷：{{ scope.row.parentCoilNos }}</el-tag>
+              </span>
+              <span v-else-if="scope.row.parentCoilNos && scope.row.dataType === 0">
+                <el-tag type="info" size="mini">分为子卷：{{ scope.row.parentCoilNos }}</el-tag>
+              </span>
+              <span v-else-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 2">
+                <el-tag type="success" size="mini">合并自：{{ scope.row.parentCoilNos }}</el-tag>
+              </span>
+              <span v-else>—</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button type="danger" size="mini" @click="handleRemove(scope.row)">移除</el-button>
+            </template>
+          </el-table-column>
+        </KLPTable>
+      </div>
+      <!-- 未选择销售时的空提示 -->
+      <div v-else class="empty-container">
+        <el-empty description="请先从左侧选择销售用户"></el-empty>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { listUser } from '@/api/system/user'
+import { listMaterialCoil, updateMaterialCoilSimple } from '@/api/wms/coil'
+import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import MutiSelect from "@/components/MutiSelect";
+import MemoInput from "@/components/MemoInput";
+
+export default {
+  name: 'SalesCoilPermission',
+  components: {
+    CoilNo,
+    ProductInfo,
+    RawMaterialInfo,
+    MutiSelect,
+    MemoInput
+  },
+  dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
+  data() {
+    return {
+      // 用户列表（原始数据）
+      userList: [],
+      // 树形结构用户数据
+      userTreeData: [],
+      // 树组件配置
+      treeProps: {
+        label: 'nickName',
+        children: 'children'
+      },
+      // 部门ID（销售部门）
+      deptId: '2001463253405609986',
+      // 已分配钢卷查询参数
+      queryParamsWithSalesId: {
+        selectType: 'product',
+        materialType: '成品',
+        saleId: undefined,
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 待分配钢卷查询参数
+      queryParamsWithUnAssignedId: {
+        selectType: 'product',
+        materialType: '成品',
+        saleId: -1,
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 待分配钢卷列表
+      unAssignedCoilList: [],
+      // 待分配钢卷总数
+      unAssignedTotal: 0,
+      // 已分配钢卷列表
+      salesCoilList: [],
+      // 已分配钢卷总数
+      salesTotal: 0,
+      // 当前选中的销售用户
+      currentUser: {},
+      // 浮动层配置
+      floatLayerConfig: {
+        columns: [
+          { label: '入场钢卷号', prop: 'enterCoilNo' },
+          { label: '当前钢卷号', prop: 'currentCoilNo' },
+          { label: '厂家卷号', prop: 'supplierCoilNo' },
+          { label: '逻辑库位', prop: 'warehouseName' },
+          { label: '实际库位', prop: 'actualWarehouseName' },
+          { label: '物料类型', prop: 'materialType' },
+          { label: '班组', prop: 'team' },
+          { label: '净重', prop: 'netWeight' },
+          { label: '毛重', prop: 'grossWeight' },
+          { label: '备注', prop: 'remark' },
+          { label: '质量状态', prop: 'qualityStatus' },
+          { label: '打包状态', prop: 'packingStatus' },
+          { label: '切边要求', prop: 'edgeRequirement' },
+          { label: '包装要求', prop: 'packagingRequirement' },
+          { label: '厂家', prop: 'itemManufacturer' }
+        ],
+        title: '详细信息'
+      },
+      // 拆分loading状态，分别控制两个表格
+      unAssignedLoading: false,  // 待分配表格loading
+      salesLoading: false,       // 已分配表格loading
+      // 选中的待分配钢卷
+      selectedUnAssignedCoils: [],
+      // 选中的已分配钢卷
+      selectedSalesCoils: []
+    }
+  },
+  created() {
+    this.listUser()
+    // 初始化加载待分配钢卷
+    this.listUnAssignedCoil()
+  },
+  methods: {
+    /**
+     * 获取销售用户列表并构建树形结构
+     */
+    async listUser() {
+      try {
+        const res = await listUser({ deptId: this.deptId, pageSize: 999 })
+        this.userList = res.rows || []
+        // 构建树形结构（如果用户有层级关系，这里简单处理为平级）
+        this.userTreeData = this.userList.map(user => ({
+          id: user.userId,
+          nickName: user.nickName,
+          userName: user.userName,
+          deptId: user.deptId,
+          children: [] // 如果有子级可以在这里处理
+        }))
+      } catch (error) {
+        this.$message.error('获取销售列表失败：' + error.message)
+      }
+    },
+
+    /**
+     * 树形节点点击事件
+     * @param {Object} node 选中的节点
+     */
+    handleTreeNodeClick(node) {
+      this.currentUser = node
+      console.log(node)
+      this.queryParamsWithSalesId.saleId = node.id
+      // 清空之前选中的已分配钢卷
+      this.selectedSalesCoils = []
+      // 加载该销售的已分配钢卷
+      this.listSalesCoil()
+    },
+
+    /**
+     * 获取待分配钢卷列表
+     */
+    async listUnAssignedCoil() {
+      this.unAssignedLoading = true
+      try {
+        const res = await listMaterialCoil(this.queryParamsWithUnAssignedId)
+        console.log(res)
+        this.unAssignedCoilList = res.rows || []
+        this.unAssignedTotal = res.total || 0
+      } catch (error) {
+        this.$message.error('获取待分配钢卷失败：' + error.message)
+        this.unAssignedCoilList = []
+        this.unAssignedTotal = 0
+      } finally {
+        this.unAssignedLoading = false
+      }
+    },
+
+    /**
+     * 获取已分配钢卷列表
+     */
+    async listSalesCoil() {
+      if (!this.currentUser.id) return
+
+      this.salesLoading = true
+      try {
+        const res = await listMaterialCoil(this.queryParamsWithSalesId)
+        this.salesCoilList = res.rows || []
+        this.salesTotal = res.total || 0
+      } catch (error) {
+        this.$message.error('获取已分配钢卷失败：' + error.message)
+        this.salesCoilList = []
+        this.salesTotal = 0
+      } finally {
+        this.salesLoading = false
+      }
+    },
+
+    /**
+     * 单个钢卷分配操作
+     * @param {Object} row 钢卷数据
+     */
+    async handleAssign(row) {
+      try {
+        await this.$confirm('确定要将该钢卷分配给 ' + this.currentUser.nickName + ' 吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        const res = await updateMaterialCoilSimple({
+          ...row,
+          saleId: this.currentUser.id
+        })
+
+        if (res.code === 200) {
+          this.$message.success('分配成功！')
+          // 刷新列表
+          this.listUnAssignedCoil()
+          this.listSalesCoil()
+        } else {
+          this.$message.error(res.msg || '分配失败')
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('分配操作失败：' + error.message)
+        }
+      }
+    },
+
+    /**
+     * 单个钢卷移除操作
+     * @param {Object} row 钢卷数据
+     */
+    async handleRemove(row) {
+      try {
+        await this.$confirm('确定要移除该钢卷的分配权限吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        const res = await updateMaterialCoilSimple({
+          ...row,
+          saleId: null
+        })
+
+        if (res.code === 200) {
+          this.$message.success('移除成功！')
+          // 刷新列表
+          this.listUnAssignedCoil()
+          this.listSalesCoil()
+        } else {
+          this.$message.error(res.msg || '移除失败')
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('移除操作失败：' + error.message)
+        }
+      }
+    },
+
+    /**
+     * 待分配钢卷选择事件
+     * @param {Array} val 选中的钢卷列表
+     */
+    handleUnAssignedSelectionChange(val) {
+      this.selectedUnAssignedCoils = val
+    },
+
+    /**
+     * 已分配钢卷选择事件
+     * @param {Array} val 选中的钢卷列表
+     */
+    handleSalesSelectionChange(val) {
+      this.selectedSalesCoils = val
+    },
+
+    /**
+     * 批量分配钢卷
+     */
+    async handleBatchAssign() {
+      if (this.selectedUnAssignedCoils.length === 0) {
+        return this.$message.warning('请选择要分配的钢卷！')
+      }
+
+      try {
+        await this.$confirm(
+          `确定要将选中的 ${this.selectedUnAssignedCoils.length} 个钢卷分配给 ${this.currentUser.nickName} 吗？`,
+          '批量分配',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+
+        const coilIds = this.selectedUnAssignedCoils.map(item => item.id)
+        for (const coilId of coilIds) {
+          await updateMaterialCoilSimple({
+            coilId: coilId,
+            saleId: this.currentUser.id
+          })
+        }
+
+        if (res.code === 200) {
+          this.$message.success('批量分配成功！')
+          // 刷新列表
+          this.listUnAssignedCoil()
+          this.listSalesCoil()
+          // 清空选中
+          this.selectedUnAssignedCoils = []
+        } else {
+          this.$message.error(res.msg || '批量分配失败')
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('批量分配操作失败：' + error.message)
+        }
+      }
+    },
+
+    /**
+     * 批量移除钢卷
+     */
+    async handleBatchRemove() {
+      if (this.selectedSalesCoils.length === 0) {
+        return this.$message.warning('请选择要移除的钢卷！')
+      }
+
+      try {
+        await this.$confirm(
+          `确定要移除选中的 ${this.selectedSalesCoils.length} 个钢卷的分配权限吗？`,
+          '批量移除',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+
+        const coilIds = this.selectedSalesCoils.map(item => item.id)
+        for (const coilId of coilIds) {
+          await updateMaterialCoilSimple({
+            coilId: coilId,
+            saleId: null
+          })
+        }
+
+        if (res.code === 200) {
+          this.$message.success('批量移除成功！')
+          // 刷新列表
+          this.listUnAssignedCoil()
+          this.listSalesCoil()
+          // 清空选中
+          this.selectedSalesCoils = []
+        } else {
+          this.$message.error(res.msg || '批量移除失败')
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('批量移除操作失败：' + error.message)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sales-permission-container {
+  padding: 10px;
+  height: 100%;
+}
+
+.sales-tree-container {
+  background: #f5f7fa;
+  padding: 10px;
+  border-radius: 4px;
+  height: calc(100vh - 40px);
+  overflow: auto;
+}
+
+.tree-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #303133;
+}
+
+.coil-table-container {
+  height: calc(100vh - 40px);
+  overflow: auto;
+}
+
+.table-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.batch-operation {
+  margin: 10px 0;
+  text-align: right;
+}
+
+/* 空提示容器样式 */
+.empty-container {
+  margin-top: 20px;
+  padding: 40px 0;
+  background: #fff;
+  border-radius: 4px;
+  text-align: center;
+}
+
+/* vue2的样式穿透 */
+::v-deep .el-form-item {
+  margin-bottom: 0 !important;
+}
+
+::v-deep .el-pagination {
+  margin-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/plan/index.vue b/klp-ui/src/views/wms/delivery/plan/index.vue
index 27f06f7b..75cec423 100644
--- a/klp-ui/src/views/wms/delivery/plan/index.vue
+++ b/klp-ui/src/views/wms/delivery/plan/index.vue
@@ -76,7 +76,7 @@
             <el-descriptions title="配卷">
             </el-descriptions>
             <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"
-              :filters="coilFilters" :coil-column="coilColumn" dialog-width="1200px"></coil-selector>
+              :filters="coilFilters" :coil-column="coilColumn" dialog-width="1200px" :sales-restricted="true"></coil-selector>
             <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
               <el-table :data="selectedCoilList" border highlight-current-row style="width: 100%" max-height="400px">
                 <!-- <el-table-column type="index" width="50" align="center" label="序号" /> -->