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

feat(bid): 完成物料分类体系全功能开发

Browse Source 
1. 新增物料分类删除校验，支持校验子分类和关联物料
2. 优化物料列表查询，支持按分类及其后代分类筛选
3. 重构物料详情和编辑页面，使用级联选择器选择分类
4. 新增分类管理页面，支持增删改查分类树形结构
5. 新增物料分类初始化SQL脚本，导入标准分类体系
This commit is contained in:
王文昊
2026-06-17 10:12:34 +08:00
parent 38f6246090
commit c7d4c2b0ad
9 changed files with 621 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ruoyi-ui/src/views/bid/material/detail.vue
View File

@@ -75,7 +75,16 @@
<div class="grid-item">
<span class="grid-label">所属分类</span>
<div class="grid-value-wrap">
<el-input v-if="isEditing" v-model="form.categoryName" size="small" disabled />
<el-cascader
v-if="isEditing"
v-model="form.categoryId"
:options="categoryTreeData"
:props="{ label: 'categoryName', value: 'categoryId', children: 'children', checkStrictly: true, emitPath: false }"
placeholder="请选择分类"
clearable
filterable
size="small"
style="width:100%" />
<span v-else class="grid-value" :class="{ empty: !material.categoryName }">{{ material.categoryName || '' }}</span>
</div>
</div>
@@ -142,6 +151,7 @@
<script>
import { getMaterial, updateMaterial } from "@/api/bid/material";
import { getCategoryList } from "@/api/bid/category";
import SupplierQuoteTab from "./components/SupplierQuoteTab";
import ClientQuoteTab from "./components/ClientQuoteTab";
import CompareSection from "./components/CompareSection";
@@ -156,14 +166,21 @@ export default {
form: {},
perfParams: [],
activeTab: "supplier",
isEditing: false
isEditing: false,
categoryTreeData: []
};
},
created() {
this.materialId = this.$route.query && this.$route.query.id;
this.loadMaterial();
this.loadCategories();
},
methods: {
loadCategories() {
getCategoryList().then(res => {
this.categoryTreeData = res.data || [];
});
},
loadMaterial() {
if (!this.materialId) return;
getMaterial(this.materialId).then(res => {
@@ -201,14 +218,31 @@ export default {
this.$message.success("保存成功");
this.isEditing = false;
// 更新本地数据
this.material = { ...this.material, ...saveData };
// 更新本地数据，同步分类名称显示
const categoryName = this.findCategoryName(this.form.categoryId);
this.material = { ...this.material, ...saveData, categoryName };
this.material.perfArray = this.perfParams;
} catch (error) {
this.$message.error("保存失败：" + error.message);
}
},
// 根据categoryId从分类树中查找分类名称
findCategoryName(categoryId) {
if (!categoryId) return '';
const search = (nodes) => {
for (const n of nodes) {
if (n.categoryId === categoryId) return n.categoryName;
if (n.children && n.children.length) {
const found = search(n.children);
if (found) return found;
}
}
return '';
};
return search(this.categoryTreeData);
},
// 取消编辑
handleCancel() {
this.isEditing = false;

405
ruoyi-ui/src/views/bid/material/index.vue
View File

@@ -2,75 +2,107 @@
<div class="app-container">
<!-- ═══ 标签页 ═══ -->
<el-tabs v-model="activeTab">
<!-- ═══════════ Tab 1: 物料列表（原有内容） ═══════════ -->
<!-- ═══════════ Tab 1: 物料列表（左右布局） ═══════════ -->
<el-tab-pane label="物料列表" name="list">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="物料名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="物料编码" prop="materialCode">
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="厂家/品牌" prop="brand">
<el-select v-model="queryParams.brand" placeholder="全部品牌" clearable style="width:160px" filterable>
<el-option v-for="b in brandList" :key="b" :label="b" :value="b" />
</el-select>
</el-form-item>
<el-form-item label="所属分类">
<el-select v-model="queryParams.categoryId" placeholder="全部分类" clearable style="width:160px">
<el-option v-for="c in flatCategories" :key="c.categoryId"
:label="c.categoryName" :value="c.categoryId" />
</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>
<div class="material-layout">
<!-- 左侧：分类树 -->
<div class="category-tree-panel">
<div class="tree-header">
<span class="tree-title">物料分类</span>
<el-input
v-model="treeFilter"
prefix-icon="el-icon-search"
size="mini"
placeholder="搜索分类"
clearable
style="width:140px" />
</div>
<el-tree
ref="categoryTree"
:data="categoryTreeData"
:props="{ label: 'categoryName', children: 'children' }"
node-key="categoryId"
:filter-node-method="filterNode"
:expand-on-click-node="false"
:default-expand-all="true"
highlight-current
@node-click="handleCategoryClick"
class="category-tree" />
<div class="tree-footer">
<el-button size="mini" type="text" icon="el-icon-setting" @click="activeTab='category'">管理分类</el-button>
</div>
</div>
<el-row :gutter="10" class="mb8">
<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="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-col>
</el-row>
<!-- 右侧：物料表格 -->
<div class="material-table-panel">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="物料名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="物料编码" prop="materialCode">
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="厂家/品牌" prop="brand">
<el-select v-model="queryParams.brand" placeholder="全部品牌" clearable style="width:160px" filterable>
<el-option v-for="b in brandList" :key="b" :label="b" :value="b" />
</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-table
v-loading="loading"
:data="materialList"
@selection-change="handleSelectionChange"
border stripe style="width:100%"
:header-cell-style="{ background: '#ffffff', color: '#666', fontWeight: 500, fontSize: '12px' }"
:cell-style="{ fontSize: '12px', color: '#333' }"
size="small">
<el-table-column type="selection" width="44" align="center" />
<el-table-column label="物料编码" prop="materialCode" width="120" header-align="center" align="center" />
<el-table-column label="物料名称" prop="materialName" min-width="130" :show-overflow-tooltip="true" />
<el-table-column label="分类" prop="categoryName" width="100" :show-overflow-tooltip="true" />
<el-table-column label="品牌" prop="brand" width="120" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" prop="spec" min-width="140" :show-overflow-tooltip="true" />
<el-table-column label="材质" prop="material" width="80" :show-overflow-tooltip="true" />
<el-table-column label="用途" prop="purpose" min-width="100" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" width="80">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" style="color:#f56c6c" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && total === 0" description="暂无物料数据（请检查后端接口是否正常）" />
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<el-row :gutter="10" class="mb8">
<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="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5" v-if="currentCategoryName">
<el-tag size="medium" closable @close="clearCategoryFilter" type="warning">
当前分类: {{ currentCategoryName }}
</el-tag>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="materialList"
@selection-change="handleSelectionChange"
border stripe style="width:100%"
:header-cell-style="{ background: '#ffffff', color: '#666', fontWeight: 500, fontSize: '12px' }"
:cell-style="{ fontSize: '12px', color: '#333' }"
size="small">
<el-table-column type="selection" width="44" align="center" />
<el-table-column label="物料编码" prop="materialCode" width="110" header-align="center" align="center" />
<el-table-column label="物料名称" prop="materialName" min-width="120" :show-overflow-tooltip="true" />
<el-table-column label="分类" prop="categoryName" width="90" :show-overflow-tooltip="true" />
<el-table-column label="品牌" prop="brand" width="100" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" prop="spec" min-width="120" :show-overflow-tooltip="true" />
<el-table-column label="材质" prop="material" width="70" :show-overflow-tooltip="true" />
<el-table-column label="用途" prop="purpose" min-width="80" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" width="70">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" style="color:#f56c6c" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && total === 0" description="暂无物料数据" />
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
</div>
</el-tab-pane>
<!-- ═══════════ Tab 2: 发货记录（新增） ═══════════ -->
<!-- ═══════════ Tab 2: 发货记录 ═══════════ -->
<el-tab-pane label="发货记录" name="records">
<el-select v-model="recordMaterialId" filterable placeholder="选择物料" style="width:400px" @change="loadRecords" clearable>
<el-option v-for="m in materialOptions" :key="m.materialId"
@@ -104,9 +136,49 @@
<el-empty v-if="!recordMaterialId && !recordLoading" description="请先选择物料" />
<el-empty v-if="recordMaterialId && !recordList.length && !recordLoading" description="该物料暂无发货记录" />
</el-tab-pane>
<!-- ═══════════ Tab 3: 分类管理 ═══════════ -->
<el-tab-pane label="分类管理" name="category">
<div class="category-mgmt">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddCategory(0)">新增根分类</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-refresh" size="mini" @click="loadCategories">刷新</el-button>
</el-col>
</el-row>
<el-table
:data="categoryTreeData"
row-key="categoryId"
border
size="small"
:tree-props="{ children: 'children' }"
default-expand-all
style="width:100%">
<el-table-column label="分类名称" prop="categoryName" min-width="200" />
<el-table-column label="排序" prop="sort" width="80" align="center" />
<el-table-column label="状态" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" size="mini">
{{ scope.row.status === '0' ? '正常' : '停用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="240" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAddCategory(scope.row.categoryId)">添加子级</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditCategory(scope.row)">编辑</el-button>
<el-button size="mini" type="text" style="color:#f56c6c" icon="el-icon-delete" @click="handleDeleteCategory(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
<!-- 新增/修改对话框 -->
<!-- 新增/修改物料对话框 -->
<el-dialog :title="title" :visible.sync="open" width="760px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-row>
@@ -117,10 +189,14 @@
</el-col>
<el-col :span="12">
<el-form-item label="所属分类">
<el-select v-model="form.categoryId" placeholder="请选择分类" clearable style="width:100%">
<el-option v-for="c in flatCategories" :key="c.categoryId"
:label="c.indentName" :value="c.categoryId" />
</el-select>
<el-cascader
v-model="form.categoryId"
:options="categoryTreeData"
:props="{ label: 'categoryName', value: 'categoryId', children: 'children', checkStrictly: true, emitPath: false }"
placeholder="请选择分类"
clearable
filterable
style="width:100%" />
</el-form-item>
</el-col>
</el-row>
@@ -195,12 +271,44 @@
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
<!-- 新增/修改分类对话框 -->
<el-dialog :title="categoryTitle" :visible.sync="categoryOpen" width="500px" append-to-body>
<el-form ref="categoryForm" :model="categoryForm" :rules="categoryRules" label-width="90px">
<el-form-item label="上级分类">
<el-cascader
v-model="categoryForm.parentId"
:options="categoryTreeData"
:props="{ label: 'categoryName', value: 'categoryId', children: 'children', checkStrictly: true, emitPath: false }"
placeholder="不选则为根分类"
clearable
filterable
style="width:100%" />
</el-form-item>
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="categoryForm.categoryName" placeholder="请输入分类名称" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="categoryForm.sort" :min="0" :max="999" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="categoryForm.status">
<el-radio label="0">正常</el-radio>
<el-radio label="1">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="categoryOpen = false">取消</el-button>
<el-button type="primary" @click="submitCategoryForm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listMaterial, getMaterial, addMaterial, updateMaterial, delMaterial, listManufacturer } from "@/api/bid/material";
import { getCategoryList } from "@/api/bid/category";
import { getCategoryList, addCategory, updateCategory, delCategory } from "@/api/bid/category";
import request from '@/utils/request'
export default {
@@ -212,20 +320,36 @@ export default {
queryParams: { pageNum: 1, pageSize: 10, materialName: null, materialCode: null, categoryId: null, brand: null, spec: null },
form: {},
flatCategories: [],
categoryTreeData: [],
brandList: [],
perfParams: [],
// 分类树筛选
treeFilter: "",
currentCategoryName: "",
// 发货记录
activeTab: "list",
recordMaterialId: null,
recordLoading: false,
recordList: [],
materialOptions: [],
// 分类管理
categoryOpen: false,
categoryTitle: "",
categoryForm: {},
categoryRules: {
categoryName: [{ required: true, message: "分类名称不能为空", trigger: "blur" }]
},
rules: {
materialCode: [{ required: true, message: "物料编码不能为空", trigger: "blur" }],
materialName: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
}
};
},
watch: {
treeFilter(val) {
this.$refs.categoryTree.filter(val);
}
},
created() {
this.getList();
this.loadCategories();
@@ -235,7 +359,8 @@ export default {
methods: {
loadCategories() {
getCategoryList().then(res => {
this.flatCategories = this.flattenTree(res.data || [], 0, "");
this.categoryTreeData = res.data || [];
this.flatCategories = this.flattenTree(this.categoryTreeData, 0, "");
});
},
loadBrands() {
@@ -251,6 +376,21 @@ export default {
}
return result;
},
filterNode(value, data) {
if (!value) return true;
return data.categoryName.indexOf(value) !== -1;
},
handleCategoryClick(data) {
this.queryParams.categoryId = data.categoryId;
this.currentCategoryName = data.categoryName;
this.queryParams.pageNum = 1;
this.getList();
},
clearCategoryFilter() {
this.queryParams.categoryId = null;
this.currentCategoryName = "";
this.handleQuery();
},
getList() {
this.loading = true;
listMaterial(this.queryParams).then(res => {
@@ -264,7 +404,7 @@ export default {
});
},
handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
resetQuery() { this.resetForm("queryForm"); this.handleQuery(); },
resetQuery() { this.resetForm("queryForm"); this.clearCategoryFilter(); },
handleSelectionChange(sel) { this.multiple = !sel.length; this.ids = sel.map(s => s.materialId); },
handleAdd() {
this.reset();
@@ -276,7 +416,6 @@ export default {
this.reset();
getMaterial(row.materialId).then(res => {
this.form = res.data;
// 解析性能参数JSON → table
this.perfParams = this.parsePerfParamsToArray(this.form.performanceParams);
this.open = true;
this.title = "修改物料";
@@ -297,21 +436,11 @@ export default {
removePerfRow(index) {
this.perfParams.splice(index, 1);
},
parsePerfParams(jsonStr) {
if (!jsonStr) return '-';
try {
const obj = JSON.parse(jsonStr);
const arr = Object.keys(obj).map(k => ({ name: k, value: obj[k] }));
return arr.map(p => p.name + ': ' + p.value).join('; ');
} catch { return jsonStr; }
},
parsePerfParamsToArray(jsonStr) {
if (!jsonStr) return [];
try {
// Try [{name,value,unit}] format first
const arr = JSON.parse(jsonStr);
if (Array.isArray(arr)) return arr;
// Try {key: value} format
return Object.keys(arr).map(k => ({ name: k, value: arr[k], unit: '' }));
} catch { return []; }
},
@@ -324,7 +453,6 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (!valid) return;
// 性能参数数组 → JSON string
if (this.perfParams.length) {
this.form.performanceParams = JSON.stringify(this.perfParams);
} else {
@@ -334,6 +462,38 @@ export default {
action(this.form).then(() => { this.$modal.msgSuccess("操作成功"); this.open = false; this.getList(); });
});
},
// ═══════════ 分类管理 ═══════════
handleAddCategory(parentId) {
this.categoryForm = { parentId: parentId || 0, sort: 0, status: "0" };
this.categoryTitle = "新增分类";
this.categoryOpen = true;
},
handleEditCategory(row) {
this.categoryForm = { ...row };
this.categoryTitle = "编辑分类";
this.categoryOpen = true;
},
handleDeleteCategory(row) {
this.$modal.confirm("确认删除分类「" + row.categoryName + "」？").then(() => {
return delCategory(row.categoryId);
}).then(() => {
this.$modal.msgSuccess("删除成功");
this.loadCategories();
}).catch(err => {
if (err && err.message) this.$modal.msgError(err.message);
});
},
submitCategoryForm() {
this.$refs["categoryForm"].validate(valid => {
if (!valid) return;
const action = this.categoryForm.categoryId ? updateCategory : addCategory;
action(this.categoryForm).then(() => {
this.$modal.msgSuccess("操作成功");
this.categoryOpen = false;
this.loadCategories();
});
});
},
// ═══════════ 发货记录 ═══════════
loadMaterialOptions() {
listMaterial({ pageSize: 999 }).then(r => { this.materialOptions = r.rows || [] }).catch(() => {})
@@ -350,20 +510,79 @@ export default {
},
recordStatusType(s) { return { pending: "warning", transit: "primary", history: "success" }[s] || "" },
recordStatusLabel(s) { return { pending: "待发", transit: "在途", history: "已收货" }[s] || s || "-" },
// 兼容 snake_case 和 camelCase
fmtRow(r) { return r }
}
};
</script>
<style scoped>
/* ═══ 京东主题 — 页面级变量覆盖 ═══ */
.app-container {
background: var(--bg-page);
padding: 16px 20px;
border-radius: var(--radius-base);
}
/* ═══ 左右布局 ═══ */
.material-layout {
display: flex;
gap: 12px;
align-items: flex-start;
}
.category-tree-panel {
width: 200px;
flex-shrink: 0;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 220px);
position: sticky;
top: 0;
}
.tree-header {
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.tree-title {
font-size: 13px;
font-weight: 500;
color: #333;
}
.category-tree {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.category-tree >>> .el-tree-node__content {
height: 32px;
font-size: 13px;
}
.category-tree >>> .el-tree-node.is-current > .el-tree-node__content {
background: #fef0f0;
color: #e4393c;
}
.tree-footer {
padding: 8px 12px;
border-top: 1px solid #f0f0f0;
text-align: center;
}
.material-table-panel {
flex: 1;
min-width: 0;
overflow-x: hidden;
}
/* 紧凑表格行 */
.el-table td { padding: 4px 4px !important; }
.el-table th { padding: 6px 4px !important; }
@@ -371,10 +590,6 @@ export default {
/* 圆角按钮 */
.el-button--mini { border-radius: var(--radius-base) !important; }
/* 搜索按钮（适配京东红） */
.search-btn { background: var(--brand-primary); color: #fff; border: none; border-radius: var(--radius-base); }
.search-btn:hover { background: var(--brand-primary-hover); }
/* 搜索表单样式 */
.el-form--inline .el-form-item {
margin-bottom: 16px;
@@ -422,4 +637,12 @@ export default {
.el-button + .el-button {
margin-left: 8px;
}
/* 分类管理 */
.category-mgmt {
background: #fff;
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
</style>