DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(销售权限): 实现钢卷销售权限分配功能

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

组件现在支持根据用户权限动态显示和过滤钢卷数据，管理员可在新页面为销售分配钢卷权限
This commit is contained in:
砂糖
2025-12-18 11:51:14 +08:00
parent b7513bdd2d
commit e900aec86b
9 changed files with 749 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
klp-ui/src/components/CoilSelector/data.js Normal file
View File

@@ -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
},
]

172
klp-ui/src/components/CoilSelector/index.vue
View File

@@ -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;
}

4
klp-ui/src/components/HomeModules/StatisticGroup.vue
View File

@@ -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 {