yunzerwebsite/yunzerwebsiteallinone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

批量优化产品和产品分类

Browse Source
This commit is contained in:
hero920103
2026-09-12 00:44:13 +08:00
parent 184c604bee
commit 2b1874943f
33 changed files with 2595 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/views/apps/crm/contract/components/PartySelect.vue
+1 -1
View File
@@ -59,7 +59,7 @@
<el-button :icon="Plus" @click="emit('create')" />
</el-tooltip>
</div>
<div v-if="party.ref_name" class="picked-name">已关联：{{ party.ref_name }}</div>
<!-- <div v-if="party.ref_name" class="picked-name">已关联：{{ party.ref_name }}</div> -->
</template>
<!-- 签约人 -->
backend/src/views/apps/crm/contract/components/ProductList.vue
+177 -20
View File
@@ -2,29 +2,61 @@
<div class="product-list">
<el-table :data="products" border row-key="__key" :empty-text="'暂无产品，点击下方按钮添加'">
<el-table-column label="序号" type="index" width="50" align="center" />
<el-table-column label="产品名称" min-width="160">
<el-table-column label="产品类别" width="150">
<template #default="{ row }">
<el-input v-model="row.name" placeholder="请输入产品/服务名称" maxlength="100" />
</template>
</el-table-column>
<el-table-column label="产品类别" width="140">
<template #default="{ row }">
<el-select v-model="row.category" placeholder="类别">
<el-select
v-model="row.category"
filterable
clearable
placeholder="请选择分类"
style="width: 100%"
@change="() => onCategoryChange(row)"
>
<el-option
v-for="i in CONTRACT_PRODUCT_CATEGORY_OPTIONS"
:key="i.value"
:label="i.label"
:value="i.value"
v-for="c in categoryOptions"
:key="c.id"
:label="c.name"
:value="c.name"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="产品名称" min-width="210">
<template #default="{ row }">
<el-select
v-model="row.name"
filterable
allow-create
default-first-option
clearable
:disabled="!row.category"
:placeholder="row.category ? '搜索或输入产品名称' : '请先选择产品类别'"
style="width: 100%"
@focus="onProductFocus(row)"
@visible-change="(v) => { if (v) onProductFocus(row) }"
@change="(val) => onProductPick(row, val)"
>
<el-option
v-for="p in productOptions"
:key="p.id"
:label="p.product_name"
:value="p.product_name"
>
<span class="opt-name">{{ p.product_name }}</span>
<span class="opt-meta">{{ p.spec || "—" }} · ￥{{ p.price }}</span>
</el-option>
</el-select>
<!-- <div v-if="row.product_id" class="linked-tip">
已关联产品管理 #{{ row.product_id }}（成本取自产品管理）
</div> -->
</template>
</el-table-column>
<el-table-column label="规格型号" width="130">
<template #default="{ row }">
<el-input v-model="row.spec" :placeholder="specPlaceholder(row)" />
</template>
</el-table-column>
<el-table-column label="单位" width="80">
<el-table-column label="单位" width="90">
<template #default="{ row }">
<el-input v-model="row.unit" placeholder="套" maxlength="10" />
</template>
@@ -53,14 +85,29 @@
/>
</template>
</el-table-column>
<el-table-column label="成本单价（元）" width="140">
<el-table-column label="成本单价（元）" width="150">
<template #default="{ row }">
<el-tooltip content="成本单价取自产品管理，关联产品后不可修改" :disabled="!row.product_id">
<el-input-number
v-model="row.cost_price"
:min="0"
:precision="2"
:controls="false"
:disabled="!!row.product_id"
placeholder="0.00"
style="width: 100%"
/>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="税率(%)" width="110">
<template #default="{ row }">
<el-input-number
v-model="row.cost_price"
v-model="row.tax_rate"
:min="0"
:max="100"
:precision="2"
:controls="false"
placeholder="0.00"
style="width: 100%"
/>
</template>
@@ -84,7 +131,9 @@
<div class="add-row">
<el-button :icon="Plus" @click="addRow">添加产品</el-button>
<span class="add-tip">按类别自动归集：硬件 / 软件单列金额，服务、开发等计入其他</span>
<span class="add-tip">
先选产品类别，再在该分类下搜索/选择产品（自动带出规格、单位、成本、税率）；分类内无对应名称可输入新增，提交时自动建档到产品管理
</span>
</div>
<!-- 金额汇总 -->
@@ -112,7 +161,10 @@
</div>
<div class="summary-item profit">
<span class="summary-label">合同总利润</span>
<span class="summary-value" :class="{ loss: summary.total_profit < 0 }">
<span
class="summary-value"
:class="{ loss: summary.total_profit < 0 }"
>
￥{{ formatMoney(summary.total_profit) }}
</span>
</div>
@@ -122,10 +174,12 @@
</template>
<script setup>
import { computed } from "vue";
import { ref, computed, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { formatMoney } from "../../dict";
import { buildSummary } from "./utils";
import { getProductList } from "@/api/crmProduct";
import { getProductCategoryList } from "@/api/crmProductCategory";
const props = defineProps({
/** 产品行数组（父组件持有） */
@@ -134,17 +188,23 @@ const props = defineProps({
const summary = computed(() => buildSummary(props.products));
const categoryOptions = ref([]);
const productOptions = ref([]);
const activeRow = ref(null); // 当前正在操作的产品行（用于按分类过滤搜索）
let rowSeed = 0;
const addRow = () => {
props.products.push({
__key: `row_${Date.now()}_${rowSeed++}`,
name: "",
product_id: null,
category: "",
spec: "",
unit: "",
quantity: 1,
price: 0,
cost_price: 0,
tax_rate: 0,
remark: "",
});
};
@@ -157,10 +217,91 @@ const rowAmount = (row) =>
Math.round(((Number(row.quantity) || 0) * (Number(row.price) || 0) || 0) * 100) / 100;
const specPlaceholder = (row) => {
if (String(row.category) === "1") return "如：型号 / 配置";
if (String(row.category) === "4") return "如：功能模块 / 里程碑";
const cat = String(row.category || "");
if (cat.includes("硬件")) return "如：型号 / 配置";
if (cat.includes("软件") || cat.includes("开发")) return "如：功能模块 / 版本";
return "规格 / 说明";
};
/** 加载产品分类（与产品管理一致，实现类别数据同步） */
async function fetchCategories() {
try {
const res = await getProductCategoryList({ page: 1, pageSize: 200, status: 1 });
categoryOptions.value = res?.data?.list || [];
} catch (e) {
categoryOptions.value = [];
}
}
/** 切换分类：清空已选产品及带出的字段，强制「分类优先」，并重载该分类下的产品选项 */
function onCategoryChange(row) {
row.name = "";
row.product_id = null;
row.spec = "";
row.unit = "";
row.price = 0;
row.cost_price = 0;
row.tax_rate = 0;
activeRow.value = row;
ensureOptions(row);
}
/** 产品下拉聚焦 / 下拉展开：记录当前行并加载该分类下的全部产品选项 */
function onProductFocus(row) {
activeRow.value = row;
ensureOptions(row);
}
/** 按分类加载产品选项（本地 filterable 即可做到可写文字 + 模糊搜索，allow-create 支持自定义新增） */
async function ensureOptions(row) {
const cat = row.category;
if (!cat) return;
try {
const res = await getProductList({ category: cat, pageSize: 200 });
productOptions.value = res?.data?.list || [];
} catch (e) {
productOptions.value = [];
}
}
/** 选中/输入产品名称：命中产品管理则带回规格/单位/单价/成本/税率（成本只读）；分类内无此名称则可新增 */
function onProductPick(row, val) {
if (!val) {
row.product_id = null;
return;
}
const hit = productOptions.value.find((p) => p.product_name === val);
if (hit) {
row.product_id = hit.id;
row.spec = hit.spec || "";
row.unit = hit.unit || "";
row.price = hit.price || 0;
row.cost_price = hit.cost_price || 0;
row.tax_rate = hit.tax_rate || 0;
} else {
// 该分类下无此名称：标记为新增，提交时由后端自动建档到产品管理（成本可编辑）
row.product_id = null;
}
}
onMounted(() => {
fetchCategories();
// 为已加载的合同产品预置下拉选项，保证名称回显
props.products.forEach((r) => {
if (r && r.name && !productOptions.value.some((o) => o.product_name === r.name)) {
productOptions.value.push({
id: r.product_id || 0,
product_name: r.name,
category: r.category,
spec: r.spec,
unit: r.unit,
price: r.price,
cost_price: r.cost_price,
tax_rate: r.tax_rate,
});
}
});
});
</script>
<style lang="less" scoped>
@@ -170,6 +311,22 @@ const specPlaceholder = (row) => {
color: var(--el-text-color-primary);
}
.opt-name {
float: left;
}
.opt-meta {
float: right;
color: var(--el-text-color-secondary);
font-size: 12px;
}
.linked-tip {
margin-top: 2px;
font-size: 12px;
color: var(--el-color-success);
}
.add-row {
display: flex;
align-items: center;
backend/src/views/apps/crm/contract/components/create.vue
+34 -2
View File
@@ -57,12 +57,12 @@
/>
</div>
</div>
<div class="nature-tip">
<!-- <div class="nature-tip">
<el-icon><InfoFilled /></el-icon>
<span>
我方（{{ tenantName }}）已自动填入{{ ownPartyRoleLabel }}；其余各方从客户库或供应商库中搜索关联，也可点击 + 快速新建。
</span>
</div>
</div> -->
<!-- 项目关联 -->
<el-divider content-position="left">
@@ -241,6 +241,8 @@ const props = defineProps({
editData: { type: Object, default: null },
/** 打开时定位的步骤（1=合同信息 2=产品清单） */
initStep: { type: Number, default: 1 },
/** 新建合同时预设关联项目（从项目详情「合同管理」进入时使用） */
presetProject: { type: Object, default: null },
});
const emit = defineEmits(["update:visible", "success"]);
@@ -281,6 +283,18 @@ const emptyForm = () => ({
const form = reactive(emptyForm());
/**
* 日期归一化为 YYYY-MM-DD。
* 后端返回的是 RFC3339（如 2026-09-12T00:00:00+08:00），日期选择器只认年月日，
* 回显与提交前都需截断，否则后端解析失败会把日期写成 NULL。
*/
function normalizeDate(val) {
if (!val) return "";
const s = String(val).trim();
const m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
return m ? `${m[1]}-${m[2]}-${m[3]}` : s;
}
/** 参与方（甲乙丙丁）：ref_type 0=本公司 1=客户 2=供应商，非我方默认客户可切换 */
const emptyParty = (role) => ({
role,
@@ -438,6 +452,9 @@ watch(
form.status = Number(props.editData.status) || 1;
form.step = Number(props.editData.step) || 1;
form.project_id = props.editData.project_id || null;
form.sign_date = normalizeDate(props.editData.sign_date);
form.effective_date = normalizeDate(props.editData.effective_date);
form.expire_date = normalizeDate(props.editData.expire_date);
parties.value = (props.editData.parties || []).map((p) => ({ ...emptyParty(p.role), ...p }));
products.value = (props.editData.products || []).map((row, i) => ({
...row,
@@ -453,6 +470,17 @@ watch(
Object.assign(form, emptyForm());
form.contract_no = genContractNo();
projectOptions.value = [];
// 从项目详情「合同管理」进入：预设关联项目，直接按「项目合同」创建
if (props.presetProject?.id) {
form.project_id = props.presetProject.id;
form.project_name = props.presetProject.project_name || "";
projectOptions.value = [
{
id: props.presetProject.id,
project_name: form.project_name || `项目 #${props.presetProject.id}`,
},
];
}
}
// 兜底补齐参与方并写入本公司方
@@ -499,6 +527,10 @@ const prevStep = () => {
/** 组装保存 payload；数值字段统一转数字（后端 int8 解析），summary 由产品清单实时计算 */
const buildPayload = (step, status) => ({
...form,
// 日期统一按 YYYY-MM-DD 提交，避免回传 RFC3339 导致后端解析为空
sign_date: normalizeDate(form.sign_date),
effective_date: normalizeDate(form.effective_date),
expire_date: normalizeDate(form.expire_date),
our_role: Number(form.our_role) || 2,
party_count: Number(form.party_count) || 2,
parties: parties.value.map((p) => ({ ...p })),
backend/src/views/apps/crm/contract/components/utils.js
+3 -2
View File
@@ -8,6 +8,7 @@
* - 合同总金额 = 硬件 + 软件 + 其他
* - 产品总成本 = Σ (数量 × 成本单价)
* - 合同总利润 = 合同总金额 - 产品总成本
* 归类口径：分类代码 1/2 或名称含「硬件」/「软件」分别计入硬件/软件，其余计入其他（与后端一致）。
*/
const round2 = (n) => Math.round((Number(n) || 0) * 100) / 100;
@@ -25,8 +26,8 @@ export function buildSummary(products) {
const amount = round2(qty * price);
totalCost += round2(qty * costPrice);
const cat = String(row?.category || "");
if (cat === "1") hardware += amount;
else if (cat === "2") software += amount;
if (cat === "1" || cat.includes("硬件")) hardware += amount;
else if (cat === "2" || cat.includes("软件")) software += amount;
else other += amount;
});
hardware = round2(hardware);
backend/src/views/apps/crm/contract/index.vue
+22 -19
View File
@@ -3,7 +3,7 @@
<div class="page-header">
<div>
<h2>合同管理</h2>
<p>进度式创建合同，绑定项目或无头合同，管理甲乙丙丁各方与产品清单</p>
<p>进度式创建合同，绑定项目或无头合同</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
@@ -73,12 +73,19 @@
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column label="状态" width="90" align="center" fixed>
<template #default="{ row }">
<el-tag :type="contractStatusTag(row.status)" size="small">
{{ contractStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="contract_no" label="合同编号" width="150" show-overflow-tooltip />
<el-table-column label="合同名称" min-width="190" show-overflow-tooltip fixed>
<template #default="{ row }">
<span class="name-link" @click="openRow(row)">
{{ row.contract_name }}
<el-tag v-if="Number(row.status) === 1" size="small" type="warning" effect="light">草稿</el-tag>
<!-- <el-tag v-if="Number(row.status) === 1" size="small" type="warning" effect="light">草稿</el-tag> -->
</span>
</template>
</el-table-column>
@@ -95,12 +102,6 @@
{{ row.project_name || "无" }}
</template>
</el-table-column>
<el-table-column label="甲方" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ partyName(row, "party_a") }}</template>
</el-table-column>
<el-table-column label="乙方" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ partyName(row, "party_b") }}</template>
</el-table-column>
<el-table-column label="合同总金额" width="130" align="right">
<template #default="{ row }">
{{ formatMoney(row.summary?.total_amount ?? row.total_amount) }}
@@ -117,18 +118,8 @@
<el-table-column label="签订日期" width="110" align="center">
<template #default="{ row }">{{ formatDateOnly(row.sign_date) }}</template>
</el-table-column>
<el-table-column label="状态" width="90" align="center">
<el-table-column label="操作" width="190" align="center" class-name="op-col" fixed="right">
<template #default="{ row }">
<el-tag :type="contractStatusTag(row.status)" size="small">
{{ contractStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openEdit(row)">
{{ Number(row.status) === 1 ? "继续填写" : "编辑" }}
</el-button>
<!-- 状态流转：草稿 / 已完成 / 履约中 / 执行异常 / 已作废 互切 -->
<el-dropdown trigger="click" @command="(cmd) => handleChangeStatus(row, cmd)">
<el-button link type="warning" size="small">
@@ -146,6 +137,9 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button link type="primary" size="small" @click="openEdit(row)">
编辑
</el-button>
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
@@ -368,4 +362,13 @@ async function handleDelete(row) {
}
}
}
/* 操作列：强制水平居中（多按钮换行也整体居中） */
:deep(.el-table .op-col .cell) {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
}
</style>
backend/src/views/apps/crm/dict.js
+39
View File
@@ -360,6 +360,45 @@ export const productCategoryText = (val) =>
PRODUCT_CATEGORY_MAP[normalize(val)] || normalize(val) || "-";
export const productCategoryTag = (val) => PRODUCT_CATEGORY_TAG[normalize(val)] || "info";
/* =====================================================================
* 产品管理（CRM 产品台账/目录）
* 分类复用合同产品分类：1硬件/2软件/3服务/4开发/5其他
* 状态：1=启用 0=停用
* ===================================================================== */
/** 产品状态：1=启用 0=停用 */
export const PRODUCT_STATUS_OPTIONS = [
{ label: "启用", value: 1 },
{ label: "停用", value: 0 },
];
/** 产品单位 */
export const PRODUCT_UNIT_OPTIONS = [
{ label: "套", value: "套" },
{ label: "台", value: "台" },
{ label: "个", value: "个" },
{ label: "件", value: "件" },
{ label: "批", value: "批" },
{ label: "次", value: "次" },
{ label: "人月", value: "人月" },
{ label: "人天", value: "人天" },
{ label: "年", value: "年" },
];
const PRODUCT_STATUS_MAP = { 1: "启用", 0: "停用" };
const PRODUCT_STATUS_TAG = { 1: "success", 0: "info" };
export const productStatusText = (val) => PRODUCT_STATUS_MAP[normalize(val)] || "-";
export const productStatusTag = (val) => PRODUCT_STATUS_TAG[normalize(val)] || "info";
/** 税率格式化：13 -> 13% */
export function formatPercent(val) {
if (val === undefined || val === null || val === "") return "-";
const n = Number(val);
if (isNaN(n)) return String(val);
return `${n}%`;
}
/** 合同分类选项（供 el-select 遍历） */
export const contractCategoryOptions = CONTRACT_CATEGORY_OPTIONS;
export const contractStatusOptions = CONTRACT_STATUS_OPTIONS;
backend/src/views/apps/crm/product/cate.vue
+245
View File
@@ -0,0 +1,245 @@
<template>
<div class="crm-page">
<div class="page-header">
<div>
<h2>产品分类</h2>
<p>维护 CRM 产品的自定义归类，产品表单的分类下拉取自本表</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
<el-button type="primary" :icon="Plus" @click="openCreate">新增分类</el-button>
</div>
</div>
<div class="filter-bar">
<el-form :inline="true" :model="filters" @submit.prevent>
<el-form-item>
<el-input
v-model="filters.keyword"
clearable
placeholder="搜索分类名称 / 编码"
:prefix-icon="Search"
style="width: 240px"
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 120px">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column prop="name" label="分类名称" min-width="160" show-overflow-tooltip />
<el-table-column prop="code" label="分类编码" width="140" show-overflow-tooltip />
<el-table-column prop="sort" label="排序" width="90" align="center" />
<el-table-column label="状态" width="90" align="center">
<template #default="{ row }">
<el-tag :type="productStatusTag(row.status)" size="small">{{ productStatusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
<template #empty><el-empty description="暂无产品分类" :image-size="80" /></template>
</el-table>
<div class="pagination">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSearch"
@current-change="fetchList"
/>
</div>
</div>
<el-dialog
:model-value="dialogVisible"
:title="isEdit ? '编辑分类' : '新增分类'"
width="520px"
:close-on-click-modal="false"
@update:model-value="handleClose"
@opened="handleOpened"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="right">
<el-form-item label="分类名称" prop="name">
<el-input v-model="form.name" placeholder="如：服务器类 / 软件许可" maxlength="100" />
</el-form-item>
<el-form-item label="分类编码" prop="code">
<el-input v-model="form.code" placeholder="选填，如：SERVER" maxlength="50" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="9999" :controls="false" style="width: 140px" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="Number(i.value)" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注（选填）" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search, Refresh } from "@element-plus/icons-vue";
import {
getProductCategoryList,
createProductCategory,
updateProductCategory,
deleteProductCategory,
} from "@/api/crmProductCategory";
import { PRODUCT_STATUS_OPTIONS, productStatusText, productStatusTag } from "../dict";
const loading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const submitting = ref(false);
const isEdit = ref(false);
const currentId = ref(null);
const formRef = ref();
const defaultForm = () => ({
name: "",
code: "",
sort: 0,
status: 1,
remark: "",
});
const form = reactive(defaultForm());
const rules = {
name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
};
const filters = reactive({ keyword: "", status: "" });
const pagination = reactive({ page: 1, pageSize: 20, total: 0 });
onMounted(() => {
fetchList();
});
async function fetchList() {
loading.value = true;
try {
const res = await getProductCategoryList({
page: pagination.page,
pageSize: pagination.pageSize,
...filters,
});
tableData.value = res?.data?.list || [];
pagination.total = res?.data?.total || 0;
} catch (e) {
tableData.value = [];
pagination.total = 0;
ElMessage.error(e.message || "查询失败");
} finally {
loading.value = false;
}
}
function handleSearch() {
pagination.page = 1;
fetchList();
}
function resetFilters() {
filters.keyword = "";
filters.status = "";
handleSearch();
}
function openCreate() {
isEdit.value = false;
currentId.value = null;
Object.assign(form, defaultForm());
dialogVisible.value = true;
}
function openEdit(row) {
isEdit.value = true;
currentId.value = row.id;
Object.assign(form, defaultForm(), row);
form.status = Number(row.status);
if (isNaN(form.status)) form.status = 1;
form.sort = Number(row.sort) || 0;
dialogVisible.value = true;
}
function handleClose() {
dialogVisible.value = false;
}
function handleOpened() {
formRef.value?.clearValidate();
}
async function handleSubmit() {
if (!formRef.value) return;
try {
await formRef.value.validate();
} catch (e) {
return;
}
submitting.value = true;
try {
const payload = { ...form };
if (isEdit.value) {
await updateProductCategory(currentId.value, payload);
ElMessage.success("更新成功");
} else {
await createProductCategory(payload);
ElMessage.success("创建成功");
}
dialogVisible.value = false;
fetchList();
} catch (e) {
ElMessage.error(e.message || "操作失败");
} finally {
submitting.value = false;
}
}
async function handleDelete(row) {
try {
await ElMessageBox.confirm(`确定删除产品分类「${row.name}」吗？删除后不可恢复。`, "删除确认", {
type: "warning",
});
await deleteProductCategory(row.id);
ElMessage.success("删除成功");
fetchList();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
</script>
<style lang="less" scoped src="../styles/crm-page.less"></style>
backend/src/views/apps/crm/product/components/detail.vue
+94
View File
@@ -0,0 +1,94 @@
<template>
<el-drawer
:model-value="visible"
:title="product?.product_name || '产品详情'"
size="520px"
direction="rtl"
@update:model-value="handleClose"
>
<div v-if="product" class="product-detail">
<el-descriptions :column="1" border>
<el-descriptions-item label="产品编号">{{ product.product_no || "-" }}</el-descriptions-item>
<el-descriptions-item label="产品名称">{{ product.product_name }}</el-descriptions-item>
<el-descriptions-item label="产品分类">
<el-tag :type="categoryType(product.category)" size="small" effect="plain">
{{ categoryDisplay(product.category) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="规格型号">{{ product.spec || "-" }}</el-descriptions-item>
<el-descriptions-item label="单位">{{ product.unit || "-" }}</el-descriptions-item>
<el-descriptions-item label="销售单价">￥{{ formatMoney(product.price) }}</el-descriptions-item>
<el-descriptions-item label="成本单价">￥{{ formatMoney(product.cost_price) }}</el-descriptions-item>
<el-descriptions-item label="税率">{{ formatPercent(product.tax_rate) }}</el-descriptions-item>
<el-descriptions-item label="毛利">
￥{{ formatMoney((Number(product.price) || 0) - (Number(product.cost_price) || 0)) }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag :type="productStatusTag(product.status)" size="small">{{ productStatusText(product.status) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="来源项目">{{ product.project_name || "手动创建" }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ product.remark || "-" }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ formatDateTime(product.create_time) }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ formatDateTime(product.update_time) }}</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
</template>
<script setup>
import { reactive, watch } from "vue";
import {
productCategoryText,
productCategoryTag,
productStatusText,
productStatusTag,
formatMoney,
formatPercent,
formatDateTime,
} from "../../dict";
import { getProductCategoryList } from "@/api/crmProductCategory";
const props = defineProps({
visible: { type: Boolean, default: false },
product: { type: Object, default: null },
});
const emit = defineEmits(["update:visible"]);
const categoryMap = reactive({});
/** 详情分类展示：优先管理分类名称；同步写入的产品带「金额归属」编码时回退 */
function categoryDisplay(val) {
if (!val) return "-";
if (categoryMap[val]) return val;
return productCategoryText(val);
}
function categoryType(val) {
if (!val || categoryMap[val]) return "primary";
return productCategoryTag(val);
}
watch(
() => props.visible,
(val) => {
if (val && Object.keys(categoryMap).length === 0) {
getProductCategoryList({ page: 1, pageSize: 200 })
.then((res) => {
(res?.data?.list || []).forEach((c) => {
categoryMap[c.name] = c.name;
});
})
.catch(() => {});
}
}
);
function handleClose() {
emit("update:visible", false);
}
</script>
<style lang="less" scoped>
.product-detail {
padding: 4px;
}
</style>
backend/src/views/apps/crm/product/components/edit.vue
+189
View File
@@ -0,0 +1,189 @@
<template>
<el-dialog
:model-value="visible"
:title="isEdit ? '编辑产品' : '新增产品'"
width="720px"
:close-on-click-modal="false"
@update:model-value="handleClose"
@opened="handleOpened"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="right">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产品名称" prop="product_name">
<el-input v-model="form.product_name" placeholder="请输入产品名称" maxlength="100" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品编号" prop="product_no">
<el-input v-model="form.product_no" placeholder="如：P-2026-001" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品分类" prop="category">
<el-select
v-model="form.category"
filterable
allow-create
clearable
placeholder="请选择或输入分类"
style="width: 100%"
>
<el-option v-for="i in categoryOptions" :key="i.id" :label="i.name" :value="i.name" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
<el-select v-model="form.unit" filterable allow-create clearable placeholder="请选择" style="width: 100%">
<el-option v-for="i in PRODUCT_UNIT_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="规格型号" prop="spec">
<el-input v-model="form.spec" placeholder="如：型号 / 配置 / 功能模块" maxlength="255" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="销售单价" prop="price">
<el-input-number v-model="form.price" :min="0" :precision="2" :controls="false" style="width: 100%">
<template #prefix>￥</template>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="成本单价" prop="cost_price">
<el-input-number v-model="form.cost_price" :min="0" :precision="2" :controls="false" style="width: 100%">
<template #prefix>￥</template>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="税率(%)" prop="tax_rate">
<el-input-number v-model="form.tax_rate" :min="0" :max="100" :precision="2" :controls="false" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="Number(i.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注（选填）" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { createProduct, updateProduct } from "@/api/crmProduct";
import { getProductCategoryList } from "@/api/crmProductCategory";
import { PRODUCT_STATUS_OPTIONS, PRODUCT_UNIT_OPTIONS } from "../../dict";
const props = defineProps({
visible: { type: Boolean, default: false },
editData: { type: Object, default: null },
});
const emit = defineEmits(["update:visible", "success"]);
const formRef = ref();
const submitting = ref(false);
const isEdit = ref(false);
const internalId = ref(null);
const categoryOptions = ref([]);
const defaultForm = () => ({
product_name: "",
product_no: "",
category: "",
unit: "",
spec: "",
price: 0,
cost_price: 0,
tax_rate: 0,
status: 1,
remark: "",
});
const form = reactive(defaultForm());
const rules = {
product_name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
};
watch(
() => props.visible,
(val) => {
if (val) {
if (props.editData) {
isEdit.value = true;
internalId.value = props.editData.id;
Object.assign(form, defaultForm(), props.editData);
form.status = Number(props.editData.status);
if (isNaN(form.status)) form.status = 1;
} else {
isEdit.value = false;
internalId.value = null;
Object.assign(form, defaultForm());
}
fetchCategories();
}
}
);
/** 加载产品分类（用于分类下拉；取启用中的分类，允许新建时输入自定义分类） */
async function fetchCategories() {
try {
const res = await getProductCategoryList({ page: 1, pageSize: 200, status: 1 });
categoryOptions.value = res?.data?.list || [];
} catch (e) {
categoryOptions.value = [];
}
}
function handleClose() {
emit("update:visible", false);
}
function handleOpened() {
formRef.value?.clearValidate();
}
async function handleSubmit() {
if (!formRef.value) return;
try {
await formRef.value.validate();
} catch (e) {
return;
}
submitting.value = true;
try {
const payload = { ...form };
if (internalId.value) {
await updateProduct(internalId.value, payload);
ElMessage.success("更新成功");
} else {
await createProduct(payload);
ElMessage.success("创建成功");
}
emit("success");
handleClose();
} catch (e) {
ElMessage.error(e.message || "操作失败");
} finally {
submitting.value = false;
}
}
</script>
backend/src/views/apps/crm/product/index.vue
+392
View File
@@ -0,0 +1,392 @@
<template>
<div class="crm-page">
<div class="page-header">
<div>
<h2>产品管理</h2>
<p>维护可售产品台账（目录），项目生成时自动写入产品参数</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
<el-button type="primary" :icon="Plus" @click="openCreate">新增产品</el-button>
</div>
</div>
<!-- 统计卡片 -->
<div class="stat-cards">
<div class="stat-card">
<span class="stat-label">产品总数</span>
<span class="stat-value">{{ pagination.total }}</span>
</div>
<div class="stat-card">
<span class="stat-label">启用中</span>
<span class="stat-value success">{{ stats.enabled }}</span>
</div>
<div class="stat-card">
<span class="stat-label">已停用</span>
<span class="stat-value"> {{ stats.disabled }}</span>
</div>
<div class="stat-card">
<span class="stat-label">平均销售单价</span>
<span class="stat-value primary">￥{{ formatMoney(stats.avgPrice) }}</span>
</div>
</div>
<!-- 左分类 / 右数据 -->
<div class="page-body">
<!-- 左侧：产品分类 -->
<aside class="cate-panel">
<div class="cate-title">产品分类</div>
<ul class="cate-list">
<li :class="['cate-item', { active: activeCate === '' }]" @click="selectCate('')">
<span class="cate-name">全部产品</span>
</li>
<li
v-for="c in categoryOptions"
:key="c.id"
:class="['cate-item', { active: activeCate === c.name }]"
@click="selectCate(c.name)"
>
<span class="cate-name">{{ c.name }}</span>
</li>
</ul>
</aside>
<!-- 右侧：当前分类下的产品数据 -->
<section class="main-panel">
<div class="filter-bar">
<el-form :inline="true" :model="filters" @submit.prevent>
<el-form-item>
<el-input
v-model="filters.keyword"
clearable
placeholder="搜索产品名称 / 编号 / 规格"
:prefix-icon="Search"
style="width: 260px"
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 120px">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column label="产品名称" min-width="180" show-overflow-tooltip fixed>
<template #default="{ row }">
<span class="name-link" @click="openDetail(row)">{{ row.product_name }}</span>
</template>
</el-table-column>
<el-table-column prop="product_no" label="产品编号" width="130" show-overflow-tooltip />
<el-table-column label="分类" width="130" align="center">
<template #default="{ row }">
<el-tag :type="categoryType(row.category)" size="small" effect="plain">
{{ categoryDisplay(row.category) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="spec" label="规格型号" min-width="150" show-overflow-tooltip />
<el-table-column prop="unit" label="单位" width="70" align="center" />
<el-table-column label="销售单价" width="120" align="right">
<template #default="{ row }">￥{{ formatMoney(row.price) }}</template>
</el-table-column>
<el-table-column label="成本单价" width="120" align="right">
<template #default="{ row }">￥{{ formatMoney(row.cost_price) }}</template>
</el-table-column>
<el-table-column label="税率" width="80" align="center">
<template #default="{ row }">{{ formatPercent(row.tax_rate) }}</template>
</el-table-column>
<el-table-column label="状态" width="90" align="center">
<template #default="{ row }">
<el-tag :type="productStatusTag(row.status)" size="small">{{ productStatusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="来源项目" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ row.project_name || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
<template #empty><el-empty description="暂无产品" :image-size="80" /></template>
</el-table>
<div class="pagination">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSearch"
@current-change="fetchList"
/>
</div>
</div>
</section>
</div>
<ProductEdit v-model:visible="editVisible" :edit-data="currentRow" @success="fetchList" />
<ProductDetail v-model:visible="detailVisible" :product="currentRow" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search, Refresh } from "@element-plus/icons-vue";
import { getProductList, deleteProduct } from "@/api/crmProduct";
import { getProductCategoryList } from "@/api/crmProductCategory";
import ProductEdit from "./components/edit.vue";
import ProductDetail from "./components/detail.vue";
import {
PRODUCT_STATUS_OPTIONS,
productCategoryText,
productCategoryTag,
productStatusText,
productStatusTag,
formatMoney,
formatPercent,
} from "../dict";
const loading = ref(false);
const tableData = ref([]);
const editVisible = ref(false);
const detailVisible = ref(false);
const currentRow = ref(null);
const categoryOptions = ref([]);
const categoryMap = reactive({});
/** 左侧当前选中的分类值：空=全部；自定义分类=分类名称；系统分类=编码 */
const activeCate = ref("");
/** 产品分类展示：优先显示管理分类名称；同步写入的产品带「金额归属」编码时回退显示 */
function categoryDisplay(val) {
if (!val) return "-";
if (categoryMap[val]) return val;
return productCategoryText(val);
}
function categoryType(val) {
if (!val || categoryMap[val]) return "primary";
return productCategoryTag(val);
}
async function fetchCategories() {
try {
// 与「产品分类」管理界面同源同序（后端按 sort, -id 排序，pageSize 上限 200）
const res = await getProductCategoryList({ page: 1, pageSize: 200 });
const list = res?.data?.list || [];
categoryOptions.value = list;
list.forEach((c) => {
categoryMap[c.name] = c.name;
});
} catch (e) {
categoryOptions.value = [];
}
}
const stats = reactive({ enabled: 0, disabled: 0, avgPrice: 0 });
// 分类筛选由左侧面板控制，这里只保留关键词与状态
const filters = reactive({ keyword: "", status: "" });
const pagination = reactive({ page: 1, pageSize: 20, total: 0 });
onMounted(() => {
fetchCategories();
fetchList();
});
async function fetchList() {
loading.value = true;
try {
const res = await getProductList({
page: pagination.page,
pageSize: pagination.pageSize,
keyword: filters.keyword,
status: filters.status,
category: activeCate.value,
});
const list = res?.data?.list || [];
tableData.value = list;
pagination.total = res?.data?.total || 0;
// 本地汇总统计（后端按当前过滤返回，统计基于当前列表即可）
let enabled = 0;
let disabled = 0;
let priceSum = 0;
list.forEach((p) => {
if (Number(p.status) === 1) enabled++;
else disabled++;
priceSum += Number(p.price) || 0;
});
stats.enabled = enabled;
stats.disabled = disabled;
stats.avgPrice = list.length ? priceSum / list.length : 0;
} catch (e) {
tableData.value = [];
pagination.total = 0;
ElMessage.error(e.message || "查询失败");
} finally {
loading.value = false;
}
}
/** 切换左侧分类：回到第一页并重新加载对应数据 */
function selectCate(val) {
if (activeCate.value === val) return;
activeCate.value = val;
handleSearch();
}
function handleSearch() {
pagination.page = 1;
fetchList();
}
function resetFilters() {
filters.keyword = "";
filters.status = "";
activeCate.value = "";
handleSearch();
}
function openCreate() {
currentRow.value = null;
editVisible.value = true;
}
function openEdit(row) {
currentRow.value = { ...row };
editVisible.value = true;
}
function openDetail(row) {
currentRow.value = { ...row };
detailVisible.value = true;
}
async function handleDelete(row) {
try {
await ElMessageBox.confirm(`确定删除产品「${row.product_name}」吗？删除后不可恢复。`, "删除确认", {
type: "warning",
});
await deleteProduct(row.id);
ElMessage.success("删除成功");
fetchList();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
</script>
<style lang="less" scoped src="../styles/crm-page.less"></style>
<style lang="less" scoped>
.stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 12px;
.stat-card {
background: var(--el-bg-color);
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 6px;
.stat-label {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.stat-value {
font-size: 20px;
font-weight: 700;
color: var(--el-text-color-primary);
&.primary {
color: var(--el-color-primary);
}
&.success {
color: var(--el-color-success);
}
}
}
}
/* 左分类 + 右数据 */
.page-body {
display: flex;
align-items: flex-start;
gap: 12px;
}
.cate-panel {
width: 200px;
flex-shrink: 0;
background: var(--el-bg-color);
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
padding: 8px;
.cate-title {
padding: 8px 10px 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
}
.cate-list {
list-style: none;
margin: 0;
padding: 0;
}
.cate-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
margin-bottom: 2px;
border-radius: 4px;
font-size: 13px;
color: var(--el-text-color-primary);
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
&:hover {
background: var(--el-fill-color-light);
}
&.active {
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
font-weight: 600;
}
.cate-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.main-panel {
flex: 1;
min-width: 0;
}
</style>
backend/src/views/apps/crm/project/components/detail.vue
+15 -1
View File
@@ -37,6 +37,16 @@
/>
</el-tab-pane>
<!-- 合同管理（一个项目可关联多份合同，横向 Tab 切换查看） -->
<el-tab-pane :label="`合同管理 (${counts.contract})`" name="contract">
<DetailContract
ref="contractRef"
:project-id="project.id"
:project-name="project.project_name || ''"
@count="counts.contract = $event"
/>
</el-tab-pane>
<!-- 附件（链路累积：线索 + 商机 + 项目） -->
<el-tab-pane :label="`附件 (${counts.attach})`" name="attach">
<DetailAttach
@@ -73,6 +83,7 @@ import { ref, reactive, watch } from "vue";
import DetailBasic from "./detail_basic.vue";
import DetailContact from "./detail_contact.vue";
import DetailFollow from "./detail_follow.vue";
import DetailContract from "./detail_contract.vue";
import DetailAttach from "./detail_attach.vue";
import DetailDocs from "./detail_docs.vue";
import DetailLog from "./detail_log.vue";
@@ -87,10 +98,11 @@ const emit = defineEmits(["update:visible", "refresh"]);
const RELATED_TYPE = 3;
const activeTab = ref("basic");
const counts = reactive({ contact: 0, follow: 0, attach: 0, docs: 0 });
const counts = reactive({ contact: 0, follow: 0, contract: 0, attach: 0, docs: 0 });
const contactRef = ref();
const followRef = ref();
const contractRef = ref();
const attachRef = ref();
const docsRef = ref();
const logRef = ref();
@@ -102,6 +114,7 @@ watch(
activeTab.value = "basic";
counts.contact = 0;
counts.follow = 0;
counts.contract = 0;
counts.attach = 0;
counts.docs = 0;
}
@@ -117,6 +130,7 @@ function loadAll() {
if (!props.project?.id) return;
contactRef.value?.reload();
followRef.value?.reload();
contractRef.value?.reload();
attachRef.value?.reload();
docsRef.value?.reload();
logRef.value?.reload();
backend/src/views/apps/crm/project/components/detail_contract.vue
+364
View File
@@ -0,0 +1,364 @@
<template>
<div class="detail-contract">
<div class="tab-toolbar">
<el-button type="primary" size="small" :icon="Plus" @click="handleCreate">新增合同</el-button>
<!-- <span class="tip">一个项目可关联多份合同，点击上方横向 Tab 切换查看</span> -->
</div>
<div v-loading="loading">
<!-- 多个合同：横向 Tab 逐个展示合同内容 -->
<el-tabs v-if="list.length" v-model="activeId" tab-position="top" class="contract-tabs">
<el-tab-pane
v-for="c in list"
:key="c.id"
:name="String(c.id)"
>
<template #label>
<span class="tab-label">
<span class="tab-name">{{ c.contract_name }}</span>
<el-tag :type="contractStatusTag(c.status)" size="small" effect="plain">
{{ contractStatusText(c.status) }}
</el-tag>
</span>
</template>
<div class="contract-pane">
<div class="pane-head">
<div class="pane-title">
<span class="name">{{ c.contract_name }}</span>
<el-tag :type="contractStatusTag(c.status)" size="small">
{{ contractStatusText(c.status) }}
</el-tag>
<el-tag type="primary" size="small" effect="plain">
{{ ourRoleText(c.our_role) }}
</el-tag>
</div>
<div class="pane-actions">
<el-button link type="primary" size="small" @click="handleEdit(c)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleDelete(c)">删除</el-button>
</div>
</div>
<div class="pane-sub">
{{ c.contract_no || "-" }} · {{ contractCategoryText(c.contract_category) }}
</div>
<el-descriptions :column="2" border style="margin-top: 12px">
<el-descriptions-item label="签订日期">{{ formatDateOnly(c.sign_date) }}</el-descriptions-item>
<el-descriptions-item label="负责人">{{ c.owner_user_name || "-" }}</el-descriptions-item>
<el-descriptions-item label="生效日期">{{ formatDateOnly(c.effective_date) }}</el-descriptions-item>
<el-descriptions-item label="结束日期">{{ formatDateOnly(c.expire_date) }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ c.remark || "-" }}</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">各方签约主体</el-divider>
<el-table :data="c.parties || []" border size="small">
<el-table-column label="角色" width="80" align="center">
<template #default="{ row }">{{ partyLabel(row.role) }}</template>
</el-table-column>
<el-table-column label="签约主体" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ row.ref_name || "-" }}</template>
</el-table-column>
<el-table-column label="来源" width="90" align="center">
<template #default="{ row }">
<el-tag v-if="Number(row.ref_type) === 1" size="small" type="success" effect="plain">客户</el-tag>
<el-tag v-else-if="Number(row.ref_type) === 2" size="small" type="warning" effect="plain">供应商</el-tag>
<span v-else>本公司</span>
</template>
</el-table-column>
<el-table-column label="签约人" width="100">
<template #default="{ row }">{{ row.signer_name || "-" }}</template>
</el-table-column>
<el-table-column label="联系电话" width="120">
<template #default="{ row }">{{ row.signer_phone || "-" }}</template>
</el-table-column>
</el-table>
<el-divider content-position="left">产品清单</el-divider>
<el-table :data="c.products || []" border size="small">
<el-table-column type="index" label="#" width="45" align="center" />
<el-table-column prop="name" label="产品名称" min-width="140" show-overflow-tooltip />
<el-table-column label="类别" width="100" align="center">
<template #default="{ row }">
<el-tag :type="productCategoryTag(row.category)" size="small" effect="plain">
{{ productCategoryText(row.category) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" width="60" align="center" />
<el-table-column label="数量" width="80" align="right">
<template #default="{ row }">{{ row.quantity ?? "-" }}</template>
</el-table-column>
<el-table-column label="单价" width="100" align="right">
<template #default="{ row }">{{ formatMoney(row.price) }}</template>
</el-table-column>
<el-table-column label="小计" width="110" align="right">
<template #default="{ row }">
{{ formatMoney((Number(row.quantity) || 0) * (Number(row.price) || 0)) }}
</template>
</el-table-column>
<el-table-column label="备注" min-width="100" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<template #empty><el-empty description="暂无产品" :image-size="60" /></template>
</el-table>
<el-divider content-position="left">金额汇总</el-divider>
<div class="summary-grid">
<div class="summary-card">
<span class="label">合同总金额</span>
<span class="value primary">￥{{ formatMoney(summaryOf(c).total_amount) }}</span>
</div>
<div class="summary-card">
<span class="label">产品总成本</span>
<span class="value">￥{{ formatMoney(summaryOf(c).total_cost) }}</span>
</div>
<div class="summary-card">
<span class="label">合同总利润</span>
<span class="value success">￥{{ formatMoney(summaryOf(c).total_profit) }}</span>
</div>
<div class="summary-card">
<span class="label">硬件部分金额</span>
<span class="value warning">￥{{ formatMoney(summaryOf(c).hardware_amount) }}</span>
</div>
<div class="summary-card">
<span class="label">软件部分金额</span>
<span class="value primary">￥{{ formatMoney(summaryOf(c).software_amount) }}</span>
</div>
<div class="summary-card">
<span class="label">其他部分金额</span>
<span class="value">￥{{ formatMoney(summaryOf(c).other_amount) }}</span>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<el-empty v-else-if="!loading" description="暂无合同" :image-size="60">
<el-button type="primary" size="small" :icon="Plus" @click="handleCreate">新增合同</el-button>
</el-empty>
</div>
<!-- 进度式创建 / 编辑向导（新建时预设当前项目） -->
<ContractCreate
v-model:visible="createVisible"
:edit-data="editRow"
:init-step="initStep"
:preset-project="presetProject"
@success="reload"
/>
</div>
</template>
<script setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { getContractList, deleteContract } from "@/api/crmContract";
import ContractCreate from "../../contract/components/create.vue";
import { PARTY_ROLES, buildSummary } from "../../contract/components/utils";
import {
formatMoney,
formatDateOnly,
ourRoleText,
contractCategoryText,
contractStatusText,
contractStatusTag,
productCategoryText,
productCategoryTag,
} from "../../dict";
const props = defineProps({
// 关联项目ID
projectId: { type: [Number, String], default: null },
// 关联项目名称（用于新建合同时预设）
projectName: { type: String, default: "" },
});
const emit = defineEmits(["count"]);
const loading = ref(false);
const list = ref([]);
const activeId = ref("");
const createVisible = ref(false);
const editRow = ref(null);
const initStep = ref(1);
/** 新建合同时预设的关联项目 */
const presetProject = computed(() =>
props.projectId ? { id: props.projectId, project_name: props.projectName } : null
);
const partyLabel = (role) => PARTY_ROLES.find((r) => r.key === role)?.label || role || "-";
/** 金额汇总：优先后端 summary，缺失时按产品清单前端重算 */
function summaryOf(c) {
const s = c?.summary;
if (s && Object.keys(s).length) return s;
return buildSummary(c?.products || []);
}
/** 供父组件（detail.vue）在抽屉打开时调用 */
async function reload() {
if (!props.projectId) {
list.value = [];
emit("count", 0);
return;
}
loading.value = true;
try {
const res = await getContractList({ project_id: props.projectId, page: 1, pageSize: 100 });
list.value = res?.data?.list || [];
} catch (e) {
list.value = [];
} finally {
loading.value = false;
}
// 保持当前选中合同有效，失效时回落到第一份
if (!list.value.some((c) => String(c.id) === String(activeId.value))) {
activeId.value = list.value.length ? String(list.value[0].id) : "";
}
emit("count", list.value.length);
}
function handleCreate() {
editRow.value = null;
initStep.value = 1;
createVisible.value = true;
}
function handleEdit(c) {
editRow.value = { ...c };
initStep.value = Number(c.step) === 2 ? 2 : 1;
createVisible.value = true;
}
async function handleDelete(c) {
try {
await ElMessageBox.confirm(`确定删除合同「${c.contract_name}」吗？删除后不可恢复。`, "删除确认", {
type: "warning",
});
await deleteContract(c.id);
ElMessage.success("删除成功");
reload();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
defineExpose({ reload });
</script>
<style lang="less" scoped>
.tip {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.tab-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.contract-tabs {
:deep(.el-tabs__header) {
margin-right: 0;
}
:deep(.el-tabs__item) {
min-width: auto;
justify-content: center;
text-align: center;
padding: 0 14px;
height: 40px;
line-height: 40px;
}
:deep(.el-tabs__content) {
padding-left: 0;
overflow: visible;
}
}
.tab-label {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 220px;
.tab-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.contract-pane {
.pane-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.pane-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
.name {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.pane-actions {
flex-shrink: 0;
}
.pane-sub {
margin-top: 6px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
.summary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
.summary-card {
padding: 10px 14px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
background: var(--el-fill-color-extra-light);
display: flex;
flex-direction: column;
gap: 4px;
.label {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.value {
font-size: 16px;
font-weight: 700;
&.primary {
color: var(--el-color-primary);
}
&.success {
color: var(--el-color-success);
}
&.warning {
color: var(--el-color-warning);
}
}
}
}
</style>
backend/src/views/apps/crm/project/components/edit.vue
+76 -2
View File
@@ -2,7 +2,7 @@
<el-dialog
:model-value="visible"
:title="isEdit ? '编辑项目' : '新增项目'"
width="760px"
width="960px"
:close-on-click-modal="false"
@update:model-value="handleClose"
@opened="handleOpened"
@@ -98,6 +98,13 @@
</el-col>
</el-row>
</el-form>
<!-- <el-divider content-position="left">
产品清单
<span class="tip">保存项目时，产品参数将自动写入「产品管理」</span>
</el-divider>
<ProductList :products="form.products" /> -->
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
@@ -109,10 +116,12 @@
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { createProject, updateProject } from "@/api/crmPipeline";
import { getProductList } from "@/api/crmProduct";
import { getCrmCustomerList } from "@/api/crm";
import { getAllUsers } from "@/api/user";
import { useAuthStore } from "@/stores/auth";
import { PROJECT_STATUS_OPTIONS } from "../../dict";
import ProductList from "../../contract/components/ProductList.vue";
const props = defineProps({
visible: { type: Boolean, default: false },
@@ -146,10 +155,58 @@ const defaultForm = () => ({
contact_phone: "",
address: "",
remark: "",
products: [],
});
const form = reactive(defaultForm());
/** 解析项目产品清单：兼容 JSON 字符串 / 数组 / 空，并补全行内 __key（el-table 的 row-key） */
function parseProducts(val) {
let arr = [];
if (Array.isArray(val)) {
arr = val;
} else if (typeof val === "string" && val.trim()) {
try {
const parsed = JSON.parse(val);
if (Array.isArray(parsed)) arr = parsed;
} catch {
arr = [];
}
}
// 缺失 __key 时多行会被当作同一行，导致回显不出来
return arr.map((r, i) => ({
...r,
__key: r && r.__key ? r.__key : `row_${i}_${Date.now()}`,
}));
}
/**
* 兜底回显：存量项目 / 商机转化项目的 products 可能从未写入（null 或空串），
* 此时从「产品管理」回查归属本项目的产品，保证编辑时能看到产品清单。
*/
async function loadProjectProducts(projectId) {
try {
// 后端 pageSize 上限为 100
const res = await getProductList({ project_id: projectId, page: 1, pageSize: 100 });
const list = res?.data?.list || [];
form.products = list.map((p, i) => ({
__key: `row_p${p.id}_${i}`,
name: p.product_name || "",
product_id: p.id,
category: p.category || "",
spec: p.spec || "",
unit: p.unit || "",
quantity: 1,
price: Number(p.price) || 0,
cost_price: Number(p.cost_price) || 0,
tax_rate: Number(p.tax_rate) || 0,
remark: p.remark || "",
}));
} catch (e) {
form.products = [];
}
}
const rules = {
project_name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
};
@@ -163,6 +220,15 @@ watch(
internalId.value = props.editData.id;
Object.assign(form, defaultForm(), props.editData);
form.status = Number(props.editData.status) || 1;
// 解析项目已关联的产品清单（后端返回 JSON 字符串）
const rawProducts = props.editData.products;
form.products = parseProducts(rawProducts);
// 从未写入过产品清单（null / 空串，而非 "[]"）时，从产品管理回查兜底回显
const neverSet =
rawProducts === null || rawProducts === undefined || String(rawProducts).trim() === "";
if (neverSet && form.products.length === 0 && props.editData.id) {
loadProjectProducts(props.editData.id);
}
} else {
isEdit.value = false;
internalId.value = null;
@@ -220,7 +286,7 @@ async function handleSubmit() {
if (owner) form.owner_user_name = owner.name;
submitting.value = true;
try {
const payload = { ...form, amount: Number(form.amount) || 0 };
const payload = { ...form, amount: Number(form.amount) || 0, products: JSON.stringify(form.products || []) };
if (internalId.value) {
await updateProject(internalId.value, payload);
ElMessage.success("更新成功");
@@ -237,3 +303,11 @@ async function handleSubmit() {
}
}
</script>
<style lang="less" scoped>
.tip {
font-size: 12px;
color: var(--el-text-color-secondary);
margin-left: 8px;
}
</style>