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

feat(crm): 新增客户管理相关组件和功能

Browse Source 
新增客户信息展示、编辑组件及订单管理功能
优化客户详情页布局和交互体验
重构订单管理模块，增加客户关联功能
This commit is contained in:
砂糖
2025-12-17 10:41:16 +08:00
parent faac750ff6
commit 73ae0c0f94
13 changed files with 953 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
klp-ui/src/api/hrm/站位.txt Normal file
View File

0
klp-ui/src/views/crm/components/CoilTrace.vue Normal file
View File

200
klp-ui/src/views/crm/components/CustomerEdit.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<div>
<!-- 客户编号和保存按钮 -->
<div class="save-btn-container">
<input
class="customer-code-input"
type="text"
v-model="customer.customerCode"
placeholder="请输入客户编号"
@input="handleInputChange"
:disabled="updateLoading"
/>
<el-button
class="save-btn"
type="primary"
@click="handleSave"
:loading="updateLoading"
>
保存变更
</el-button>
</div>
<!-- 客户信息编辑表单 -->
<el-form label-position="top" :model="customer" :disabled="updateLoading">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="公司" prop="company">
<el-input
v-model="customer.companyName"
placeholder="请输入公司名称"
@input="handleInputChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" prop="contactPerson">
<el-input
v-model="customer.contactPerson"
placeholder="请输入联系人"
@input="handleInputChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户联系方式" prop="contactWay">
<el-input
v-model="customer.contactWay"
placeholder="请输入客户联系方式"
@input="handleInputChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户行业" prop="industry">
<el-select
v-model="customer.industry"
placeholder="请选择客户行业"
clearable
@change="handleInputChange"
>
<el-option
v-for="item in dict.type.customer_industry"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户等级" prop="level">
<el-select
v-model="customer.customerLevel"
placeholder="请选择客户等级"
clearable
@change="handleInputChange"
>
<el-option
v-for="item in dict.type.customer_level"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-hasPermi="['crm:customer:address']">
<el-form-item label="客户地址" prop="address">
<el-input
type="textarea"
v-model="customer.address"
placeholder="请输入客户地址"
@input="handleInputChange"
/>
</el-form-item>
</el-col>
<el-col :span="24" v-hasPermi="['crm:customer:bank']">
<el-form-item label="银行信息" prop="bankInfo">
<JSONTableInput
@change="handleInputChange"
v-model="customer.bankInfo"
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import JSONTableInput from './JSONTableInput.vue'
export default {
name: 'CustomerEdit',
components: {
JSONTableInput
},
props: {
// 客户信息对象（双向绑定）
customer: {
type: Object,
required: true,
default: () => ({})
},
// 字典数据
dict: {
type: Object,
required: true,
default: () => ({ type: {} })
},
// 更新加载状态
updateLoading: {
type: Boolean,
default: false
}
},
emits: ['detail-change', 'save-change'],
methods: {
// 输入变更事件透传
handleInputChange() {
this.$emit('detail-change')
},
// 保存按钮点击事件透传
handleSave() {
this.$emit('save-change')
}
}
}
</script>
<style scoped>
/* 客户编号输入框样式 */
.customer-code-input {
width: 300px;
height: 36px;
padding: 0 15px;
border: 1px solid #dcdfe6;
font-size: 14px;
color: #606266;
background-color: transparent;
transition: border-color 0.2s, background-color 0.2s;
outline: none;
box-sizing: border-box;
}
/* 输入框 hover 状态 */
.customer-code-input:hover {
border-color: #c0c4cc;
background-color: #f5f7fa;
}
/* 输入框 focus 状态 */
.customer-code-input:focus {
border-color: #409eff;
background-color: #fff;
}
/* 禁用状态 */
.customer-code-input:disabled {
background-color: #f5f7fa;
color: #c0c4cc;
cursor: not-allowed;
}
/* 保存变更按钮容器 */
.save-btn-container {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* 保存按钮自定义样式 */
.save-btn {
padding: 8px 20px;
font-size: 14px;
}
</style>

41
klp-ui/src/views/crm/components/CustomerInfo.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<el-descriptions :column="2" border>
<el-descriptions-item label="客户编号">
{{ customer.customerCode || '-' }}
</el-descriptions-item>
<el-descriptions-item label="公司">
{{ customer.companyName || '-' }}
</el-descriptions-item>
<el-descriptions-item label="联系人">
{{ customer.contactPerson || '-' }}
</el-descriptions-item>
<el-descriptions-item label="客户联系方式">{{ customer.contactWay || '-' }}</el-descriptions-item>
<el-descriptions-item label="客户行业">
<dict-tag :value="customer.industry" :options="dict.type.customer_industry"></dict-tag>
</el-descriptions-item>
<el-descriptions-item label="客户等级">
<dict-tag :value="customer.customerLevel" :options="dict.type.customer_level"></dict-tag>
</el-descriptions-item>
<el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ customer.address || '-' }}</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
name: 'CustomerDetail',
props: {
// 客户信息对象
customer: {
type: Object,
required: true,
default: () => ({})
},
// 字典数据
dict: {
type: Object,
required: true,
default: () => ({ type: {} })
}
}
}
</script>

366
klp-ui/src/views/crm/components/CustomerOrder.vue Normal file
View File

@@ -0,0 +1,366 @@
<template>
<div>
<el-descriptions :column="2" border title="订单统计">
<el-descriptions-item label="订单总数">{{ currentCustomer.totalCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount || 0 }}</el-descriptions-item>
</el-descriptions>
<el-descriptions border title="订单详情">
</el-descriptions>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="销售员" prop="salesman">
<el-input v-model="queryParams.salesman" placeholder="请输入销售员" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="orderList" height="400px" highlight-current-row @row-click="handleRowClick">
<el-table-column label="订单编号" align="center" prop="orderCode" />
<!-- <el-table-column label="客户" align="center" prop="customerId" /> -->
<el-table-column label="总金额" align="center" prop="orderAmount" />
<el-table-column label="销售员" align="center" prop="salesman" />
<el-table-column label="交货日期" align="center" prop="deliveryDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="订单状态">
<template slot-scope="scope">
<span v-if="scope.row.orderType === ORDER_TYPE['预订单']">预订单</span>
<span v-else-if="scope.row.orderType === ORDER_TYPE['正式订单']">正式订单</span>
</template>
</el-table-column>
<!-- <el-table-column v-if="orderType === ORDER_TYPE['预订单']" label="审核状态" align="center" prop="preOrderStatus">
<template slot-scope="scope">
<span v-if="scope.row.preOrderStatus === 0">待审核</span>
<span v-else-if="scope.row.preOrderStatus === 1">已审核</span>
<span v-else-if="scope.row.preOrderStatus === 2">已取消</span>
<span v-else>未知状态</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="审核人" align="center" prop="auditUser" />
<el-table-column label="审核时间" align="center" prop="auditTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column> -->
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-check"
@click="handleApprove(scope.row)"
>审批</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column> -->
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 正式订单明细列表组件 -->
<!-- <OrderDetailList ref="orderDetailList" :orderId="orderId" /> -->
<!-- 添加或修改正式订单主对话框 -->
<!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户" prop="customerId">
<el-select v-model="form.customerId" placeholder="请选择客户">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.customerCode" :value="item.customerId" />
</el-select>
</el-form-item>
<el-form-item label="订单总金额" prop="orderAmount">
<el-input v-model="form.orderAmount" placeholder="请输入订单总金额" />
</el-form-item>
<el-form-item label="销售员" prop="salesman">
<el-input v-model="form.salesman" placeholder="请输入销售员" />
</el-form-item>
<el-form-item label="交货日期" prop="deliveryDate">
<el-date-picker clearable
v-model="form.deliveryDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择交货日期">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/crm/order";
// import { listCustomer } from "@/api/crm/customer";
import OrderDetailList from '@/views/crm/components/OrderDetail.vue'
import { ORDER_TYPE } from "../js/enum";
export default {
name: "Order",
components: {
OrderDetailList
},
props: {
customer: {
type: Object,
default: undefined
},
dict: {
type: Object,
default: () => ({})
},
},
data() {
return {
ORDER_TYPE,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 正式订单主表格数据
orderList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderCode: undefined,
// orderType: ORDER_TYPE['预订单'],
customerId: undefined,
orderAmount: undefined,
salesman: undefined,
deliveryDate: undefined,
preOrderStatus: undefined,
auditUser: undefined,
auditTime: undefined,
orderStatus: undefined,
financeStatus: undefined,
unpaidAmount: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
orderId: '',
// customerList: [],
currentCustomer: {},
};
},
computed: {
customerId() {
return this.customer?.customerId;
}
},
watch: {
customerId: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.queryParams.customerId = newVal;
this.getList();
}
},
immediate: true
}
},
methods: {
/** 查询正式订单主列表 */
getList() {
if (!this.customerId) {
this.total = 0;
this.orderList = [];
return;
}
this.loading = true;
listOrder(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 查询客户列表 */
// getCustomerList() {
// listCustomer({ pageNum: 1, pageSize: 1000 }).then(response => {
// this.customerList = response.rows;
// });
// },
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 行点击事件
handleRowClick(row) {
console.log(row, '行点击')
this.orderId = row.orderId;
},
handleApprove(row) {
this.loading = true;
this.$confirm("确定审批订单吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
updateOrder({
...row,
// orderType: ORDER_TYPE['正式订单'],
}).then(response => {
this.$modal.msgSuccess("审批成功");
this.getList();
}).finally(() => {
this.loading = false;
});
});
},
// 表单重置
reset() {
this.form = {
orderId: undefined,
orderCode: undefined,
// orderType: ORDER_TYPE['预订单'],
customerId: undefined,
orderAmount: undefined,
salesman: undefined,
deliveryDate: undefined,
preOrderStatus: undefined,
auditUser: undefined,
auditTime: undefined,
orderStatus: undefined,
financeStatus: undefined,
unpaidAmount: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.orderId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加预订单";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const orderId = row.orderId || this.ids
getOrder(orderId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改预订单";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$modal.confirm('是否确认删除正式订单主编号为"' + orderIds + '"的数据项？').then(() => {
this.loading = true;
return delOrder(orderIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('crm/order/export', {
...this.queryParams
}, `order_${new Date().getTime()}.xlsx`)
}
}
};
</script>

26
klp-ui/src/views/crm/components/OrderDetail.vue
View File

@@ -1,13 +1,14 @@
<template>
<div class="app-container">
<el-empty v-if="!orderId" description="未选中订单" />
<div>
<el-empty v-if="!orderId || orderId == ''" description="未选中订单" />
<!-- <el-empty v-else-if="!orderItemList.length" description="暂无订单明细" /> -->
<div v-else>
<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-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-if="editable">新增</el-button>
<el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
</el-col>
</el-row>
@@ -18,7 +19,7 @@
<el-table-column label="特殊要求" align="center" prop="specialRequire" />
<el-table-column label="明细金额" align="center" prop="itemAmount" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="editable">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
@@ -68,9 +69,12 @@ export default {
name: "OrderItem",
props: {
orderId: {
type: [String, undefined],
required: true
}
},
editable: {
type: Boolean,
default: true
},
},
data() {
return {
@@ -98,7 +102,7 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
orderId: this.orderId,
orderId: undefined,
productType: undefined,
specRequire: undefined,
productNum: undefined,
@@ -132,10 +136,10 @@ export default {
watch: {
orderId: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
// if (newVal !== oldVal) {
this.queryParams.orderId = newVal;
this.getList();
}
// }
},
immediate: true
}
@@ -199,7 +203,7 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加正式订单明细";
this.title = "添加订单明细";
},
/** 修改按钮操作 */
handleUpdate(row) {
@@ -210,7 +214,7 @@ export default {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改正式订单明细";
this.title = "修改订单明细";
});
},
/** 提交按钮 */

0
klp-ui/src/views/crm/components/OrderEdit.vue Normal file
View File

0
klp-ui/src/views/crm/components/OrderInfo.vue Normal file
View File

0
klp-ui/src/views/crm/components/OrderRecord.vue Normal file
View File

278
klp-ui/src/views/crm/customer/index.vue
View File

@@ -1,33 +1,63 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<!-- 客户列表区域 -->
<el-col :span="5" style="border-right: 1px solid #e4e7ed;">
<div style="font-weight: 900;">客户列表</div>
<!-- 搜索区域 -->
<div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
<!-- 主搜索和添加 -->
<el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入客户编码搜索"
v-model="queryParams.customerCode" @change="getCustomerList" clearable></el-input>
<el-input
style="flex: 1;"
prefix-icon="el-icon-search"
placeholder="输入客户编码搜索"
v-model="queryParams.customerCode"
@change="getCustomerList"
clearable
></el-input>
<el-button icon="el-icon-search" @click="toggleQuery"></el-button>
<el-button type="primary" icon="el-icon-plus" style="margin-left: 0;" @click="handleAdd"></el-button>
</div>
<!-- 高级查询区域 -->
<div v-show="showQuery" style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
<!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
<!-- 客户行业和客户等级的下拉选 -->
<el-select style="width: 100px;" v-model="queryParams.industry" placeholder="客户行业" clearable
@change="getCustomerList">
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
:value="item.value" />
<el-select
style="width: 100px;"
v-model="queryParams.industry"
placeholder="客户行业"
clearable
@change="getCustomerList"
>
<el-option
v-for="item in dict.type.customer_industry"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select style="width: 100px;" v-model="queryParams.customerLevel" placeholder="客户等级" clearable
@change="getCustomerList">
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
:value="item.value" />
<el-select
style="width: 100px;"
v-model="queryParams.customerLevel"
placeholder="客户等级"
clearable
@change="getCustomerList"
>
<el-option
v-for="item in dict.type.customer_level"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<!-- 客户列表 -->
<div>
<!-- 列表区域 -->
<KLPList :listData="customerList" listKey="customerId" :loading="customerLoading" field1="customerCode"
field4="companyName" @item-click="handleItemClick">
<KLPList
:listData="customerList"
listKey="customerId"
:loading="customerLoading"
field1="customerCode"
field4="companyName"
@item-click="handleItemClick"
>
<template slot="actions" slot-scope="{ item }">
<el-button type="danger" size="mini" @click="handleDelete(item)" icon="el-icon-delete"></el-button>
</template>
@@ -35,112 +65,41 @@
</div>
</el-col>
<!-- 右侧内容区域 -->
<el-col :span="19">
<el-tabs v-model="activeTab" type="border-card" v-if="currentCustomer && currentCustomer.customerId">
<!-- 客户详情标签页 -->
<el-tab-pane label="客户详情" name="detail">
<!-- 客户详情区域 -->
<el-descriptions :column="2" border>
<el-descriptions-item label="客户编号">
{{ currentCustomer.customerCode || '-' }}
</el-descriptions-item>
<el-descriptions-item label="公司">
{{ currentCustomer.companyName || '-' }}
</el-descriptions-item>
<el-descriptions-item label="联系人">
{{ currentCustomer.contactPerson || '-' }}
</el-descriptions-item>
<el-descriptions-item label="客户联系方式">{{ currentCustomer.contactWay || '-' }}</el-descriptions-item>
<el-descriptions-item label="客户行业">
<dict-tag :value="currentCustomer.industry" :options="dict.type.customer_industry"></dict-tag>
</el-descriptions-item>
<el-descriptions-item label="客户等级">
<dict-tag :value="currentCustomer.customerLevel" :options="dict.type.customer_level"></dict-tag>
</el-descriptions-item>
<el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ currentCustomer.address || '-'
}}</el-descriptions-item>
</el-descriptions>
<CustomerDetail
:customer="currentCustomer"
:dict="dict"
/>
</el-tab-pane>
<!-- 客户编辑标签页 -->
<el-tab-pane label="信息编辑" name="edit">
<!-- 客户联系人区域 -->
<el-form label-position="top" :model="currentCustomer" :disabled="updateLoading">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="客户编号" prop="customerCode">
<el-input v-model="currentCustomer.customerCode" placeholder="请输入客户编号"
@input="handleDetailChange" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司" prop="company">
<el-input v-model="currentCustomer.companyName" placeholder="请输入公司名称" @input="handleDetailChange" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" prop="contactPerson">
<!-- 修复字段映射错误：contact → contactPerson -->
<el-input v-model="currentCustomer.contactPerson" placeholder="请输入联系人"
@input="handleDetailChange" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户联系方式" prop="contactWay">
<el-input v-model="currentCustomer.contactWay" placeholder="请输入客户联系方式"
@input="handleDetailChange" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户行业" prop="industry">
<el-select v-model="currentCustomer.industry" placeholder="请选择客户行业" clearable
@change="handleDetailChange">
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户等级" prop="level">
<el-select v-model="currentCustomer.customerLevel" placeholder="请选择客户等级" clearable
@change="handleDetailChange">
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-hasPermi="['crm:customer:address']">
<el-form-item label="客户地址" prop="address">
<el-input type="textarea" v-model="currentCustomer.address" placeholder="请输入客户地址"
@input="handleDetailChange" />
</el-form-item>
</el-col>
<el-col :span="24" v-hasPermi="['crm:customer:bank']">
<el-form-item label="银行信息" prop="bankInfo">
<JSONTableInput @change="handleDetailChange" v-model="currentCustomer.bankInfo"
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<CustomerEdit
:customer="currentCustomer"
:dict="dict"
:update-loading="updateLoading"
@detail-change="handleDetailChange"
@save-change="handleSaveChange"
/>
</el-tab-pane>
<!-- 历史订单标签页 -->
<el-tab-pane label="历史订单" name="transaction">
<!-- 客户交易记录区域 -->
<div>
<el-descriptions :column="2" border>
<el-descriptions-item label="订单总数">{{ currentCustomer.totalCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount || 0 }}</el-descriptions-item>
</el-descriptions>
<el-table :data="[]" border style="margin-top: 10px;" placeholder="暂无订单数据"></el-table>
<CustomerOrder
:customer="currentCustomer"
:dict="dict"
/>
</div>
</el-tab-pane>
</el-tabs>
<el-empty v-else style="margin-top: 20px;" description="选择客户查看详情"></el-empty>
</el-col>
</el-row>
<!-- 添加或修改客户信息对话框 -->
<!-- 添加客户对话框 -->
<el-dialog title="录入客户" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="客户编码" prop="customerCode">
@@ -157,14 +116,22 @@
</el-form-item>
<el-form-item label="所属行业" prop="industry">
<el-select v-model="form.industry" placeholder="请选择所属行业" clearable>
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
:value="item.value" />
<el-option
v-for="item in dict.type.customer_industry"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="客户等级" prop="customerLevel">
<el-select v-model="form.customerLevel" placeholder="请选择客户等级" clearable>
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
:value="item.value" />
<el-option
v-for="item in dict.type.customer_level"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="客户地址" prop="address">
@@ -174,8 +141,10 @@
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="银行信息" prop="transactionRecords">
<JSONTableInput v-model="form.bankInfo"
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
<JSONTableInput
v-model="form.bankInfo"
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -189,6 +158,9 @@
<script>
import KLPList from '@/components/KLPUI/KLPList/index.vue'
import JSONTableInput from '../components/JSONTableInput.vue'
import CustomerDetail from '../components/CustomerInfo.vue'
import CustomerEdit from '../components/CustomerEdit.vue'
import CustomerOrder from '../components/CustomerOrder.vue'
import { listCustomer, addCustomer, updateCustomer, delCustomer } from '@/api/crm/customer'
@@ -196,7 +168,10 @@ export default {
name: 'CustomerPage',
components: {
KLPList,
JSONTableInput
JSONTableInput,
CustomerDetail,
CustomerEdit,
CustomerOrder
},
dicts: ['customer_industry', 'customer_level'],
data() {
@@ -208,7 +183,7 @@ export default {
customerLevel: '',
customerCode: '',
pageNum: 1,
pageSize: 10
pageSize: 1000
},
total: 0,
activeTab: 'detail',
@@ -217,8 +192,8 @@ export default {
open: false,
form: {},
buttonLoading: false,
updateLoading: false, // 编辑请求加载状态
debounceTimer: null, // 防抖定时器
updateLoading: false,
debounceTimer: null,
rules: {
customerCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
@@ -239,7 +214,6 @@ export default {
this.getCustomerList();
},
beforeDestroy() {
// 销毁时清除防抖定时器，避免内存泄漏
clearTimeout(this.debounceTimer);
},
methods: {
@@ -247,53 +221,41 @@ export default {
this.showQuery = !this.showQuery
},
/**
* 防抖函数（通用）
* @param {Function} fn - 执行函数
* @param {Number} delay - 延迟时间(ms)
* @returns {Function} 防抖后的函数
*/
debounce(fn, delay) {
return (...args) => {
// 清除上一次定时器
if (this.debounceTimer) clearTimeout(this.debounceTimer);
// 重新设置定时器
this.debounceTimer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
},
/** 表单编辑变更 - 防抖提交 */
handleDetailChange: function () {
// 绑定防抖函数（延迟2秒，仅最后一次变更后执行）
this.debounce(async () => {
// 无客户ID或加载中，不执行
if (!this.currentCustomerId || this.updateLoading) return;
async handleSaveChange() {
if (!this.currentCustomerId || this.updateLoading) return;
try {
this.updateLoading = true;
// 深拷贝避免请求过程中数据被修改
const params = { ...this.currentCustomer };
const res = await updateCustomer(params);
this.$message({
type: 'success',
message: '客户信息更新成功'
});
// 同步列表数据（可选）
this.syncCustomerList(params);
} catch (error) {
this.$message({
type: 'error',
message: '更新失败：' + (error.msg || '服务器异常')
});
} finally {
this.updateLoading = false;
}
}, 1000)();
try {
this.updateLoading = true;
const params = { ...this.currentCustomer };
await updateCustomer(params);
this.$message({
type: 'success',
message: '客户信息更新成功'
});
this.syncCustomerList(params);
} catch (error) {
this.$message({
type: 'error',
message: '更新失败：' + (error.msg || '服务器异常')
});
} finally {
this.updateLoading = false;
}
},
handleDetailChange() {
// 仅作为事件透传，逻辑保留在主页面
},
/** 同步列表数据（避免列表和详情数据不一致） */
syncCustomerList(updatedCustomer) {
const index = this.customerList.findIndex(item => item.customerId === updatedCustomer.customerId);
if (index > -1) {
@@ -305,7 +267,7 @@ export default {
this.customerLoading = true;
listCustomer(this.queryParams).then(response => {
this.customerList = response.rows || [];
this.total = response.total || 0; // 补充总数
this.total = response.total || 0;
this.customerLoading = false;
}).catch(() => {
this.customerLoading = false;
@@ -314,12 +276,10 @@ export default {
},
handleItemClick(item) {
// 深拷贝避免原数据被直接修改
this.currentCustomer = { ...item };
this.activeTab = 'detail';
},
// 表单重置
reset() {
this.form = {
customerId: undefined,
@@ -338,10 +298,9 @@ export default {
updateTime: undefined,
delFlag: undefined
};
if (this.$refs.form) this.$refs.form.resetFields(); // 修复重置表单
if (this.$refs.form) this.$refs.form.resetFields();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
@@ -368,20 +327,17 @@ export default {
});
},
/** 取消按钮操作 */
cancel() {
this.reset();
this.open = false;
},
/** 处理删除（补充实现） */
handleDelete(item) {
this.$confirm('确定删除该客户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
// 补充删除接口调用逻辑
await delCustomer(item.customerId);
this.$message.success('删除成功');
this.getCustomerList();

211
klp-ui/src/views/crm/order/index.vue
View File

@@ -6,9 +6,9 @@
<div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
<!-- 主搜索和添加 -->
<el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入订单编号搜索"
v-model="queryParams.orderNum"></el-input>
v-model="queryParams.orderCode"></el-input>
<el-button icon="el-icon-search" @click="toggleQuery"></el-button>
<el-button type="primary" icon="el-icon-plus" style="margin-left: 0;"></el-button>
<el-button type="primary" icon="el-icon-plus" style="margin-left: 0;" @click="handleAdd"></el-button>
</div>
<div v-show="showQuery"
style="display: flex; align-items: center; gap: 5px; margin-top: 10px; flex-wrap: wrap;">
@@ -18,30 +18,46 @@
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-select style="width: 100px;" v-model="queryParams.salesman" placeholder="销售员" clearable>
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-input style="width: 100px;" v-model="queryParams.salesman" placeholder="销售员" clearable />
<el-select style="width: 100px;" v-model="queryParams.orderStatus" placeholder="订单状态" clearable>
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
:value="item.value" />
<el-option v-for="(value, key) in ORDER_STATUS" :key="value" :label="key" :value="value" />
</el-select>
<el-select style="width: 100px;" v-model="queryParams.financeStatus" placeholder="财务状态" clearable>
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
<el-option v-for="item in dict.type.finance_status" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div>
<!-- 列表区域 -->
<KLPList :listData="orderList" listKey="orderId" :loading="orderLoading" />
<KLPList :listData="orderList" listKey="orderId" :loading="orderLoading" field1="orderCode" field4="salesman"
@item-click="handleOrderClick">
<template slot="actions" slot-scope="{ item }">
<el-button type="danger" size="mini" @click="handleDelete(item)" icon="el-icon-delete"></el-button>
</template>
</KLPList>
</div>
</el-col>
<el-col :span="19">
<el-tabs v-model="activeTab" type="border-card">
<el-empty description="选择订单查看更多信息" v-if="!form.orderId"></el-empty>
<el-tabs v-model="activeTab" type="border-card" v-else>
<el-tab-pane label="订单详情" name="detail">
<div class="order-detail" v-if="activeTab === 'detail'">
<!-- 订单详情内容 -->
<el-descriptions :column="2" :border="true" title="订单基本信息" style="margin-bottom: 20px;">
<el-descriptions-item label="订单编号">{{ form.orderCode }}</el-descriptions-item>
<el-descriptions-item label="客户">{{ form.customerId }}</el-descriptions-item>
<el-descriptions-item label="销售员">{{ form.salesman }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ form.remark }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :border="true" title="订单明细" />
<OrderDetail :orderId="currentOrder.orderId" :editable="false" />
</div>
</el-tab-pane>
<el-tab-pane label="订单编辑" name="edit">
<div class="order-detail" v-if="activeTab === 'edit'">
<OrderDetail :orderId="currentOrder.orderId" />
</div>
</el-tab-pane>
<el-tab-pane label="财务状态" name="finance">
@@ -59,7 +75,7 @@
<!-- 操作记录内容 -->
</div>
</el-tab-pane>
<el-tab-pane label="钢卷追溯" name="trace">
<el-tab-pane label="钢卷追溯" name="trace">
<div class="order-trace" v-if="activeTab === 'trace'">
<!-- 钢卷追溯内容 -->
</div>
@@ -67,38 +83,203 @@
</el-tabs>
</el-col>
</el-row>
<!-- 添加或修改正式订单主对话框 -->
<el-dialog title="添加正式订单" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户" prop="customerId">
<!-- <el-input v-model="form.customerId" placeholder="请输入客户" /> -->
<el-select v-model="form.customerId" placeholder="请选择客户">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.customerCode"
:value="item.customerId" />
</el-select>
</el-form-item>
<el-form-item label="订单总金额" prop="orderAmount">
<el-input v-model="form.orderAmount" placeholder="请输入订单总金额" />
</el-form-item>
<el-form-item label="销售员" prop="salesman">
<el-input v-model="form.salesman" placeholder="请输入销售员" />
</el-form-item>
<el-form-item label="交货日期" prop="deliveryDate">
<el-date-picker clearable v-model="form.deliveryDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择交货日期">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import KLPList from '@/components/KLPUI/KLPList/index.vue'
import { listOrder, addOrder, delOrder } from "@/api/crm/order";
import { listCustomer } from "@/api/crm/customer";
import { ORDER_STATUS, ORDER_TYPE } from '../js/enum'
import OrderDetail from '../components/OrderDetail.vue';
export default {
name: 'OrderPage',
components: {
KLPList
KLPList,
OrderDetail
},
dicts: ['customer_level', 'customer_industry'],
data() {
return {
ORDER_STATUS,
ORDER_TYPE,
showQuery: false,
queryParams: {
orderNum: '',
orderCode: '',
customerId: '',
salesman: '',
orderStatus: '',
orderType: ORDER_TYPE['正式订单'],
financeStatus: ''
},
activeTab: 'detail',
currentOrder: {},
buttonLoading: false,
orderList: [],
orderLoading: false
orderLoading: false,
// 表单参数
form: {},
// 表单校验
rules: {
},
open: false,
customerList: [],
}
},
created() {
this.getList()
this.getCustomerList()
},
methods: {
toggleQuery() {
this.showQuery = !this.showQuery
},
/** 查询客户列表 */
getCustomerList() {
listCustomer({ pageNum: 1, pageSize: 1000 }).then(response => {
this.customerList = response.rows;
});
},
/** 订单列表项点击事件 */
handleOrderClick(order) {
this.currentOrder = order;
this.form = {
...order
}
this.activeTab = 'detail';
console.log('点击订单:', order)
},
/** 查询正式订单主列表 */
getList() {
this.orderLoading = true;
listOrder(this.queryParams).then(response => {
this.orderList = response.rows || [];
this.orderLoading = false;
}).catch(error => {
console.error('获取正式订单主列表失败:', error)
this.$message.error('获取数据失败')
this.orderList = []
this.orderLoading = false
})
},
// 表单重置
reset() {
this.form = {
orderId: undefined,
orderCode: undefined,
orderType: ORDER_TYPE['正式订单'],
customerId: undefined,
orderAmount: undefined,
salesman: undefined,
deliveryDate: undefined,
preOrderStatus: undefined,
auditUser: undefined,
auditTime: undefined,
orderStatus: undefined,
financeStatus: undefined,
unpaidAmount: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
},
/** 删除按钮操作 */
handleDelete(order) {
this.$confirm('确认删除订单吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrder(order.orderId).then(response => {
this.$modal.msgSuccess("删除成功");
this.getList();
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
}
}
</script>

22
klp-ui/src/views/crm/preOrder/index.vue
View File

@@ -132,7 +132,10 @@
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户" prop="customerId">
<el-input v-model="form.customerId" placeholder="请输入客户" />
<!-- <el-input v-model="form.customerId" placeholder="请输入客户" /> -->
<el-select v-model="form.customerId" placeholder="请选择客户">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.customerCode" :value="item.customerId" />
</el-select>
</el-form-item>
<el-form-item label="订单总金额" prop="orderAmount">
<el-input v-model="form.orderAmount" placeholder="请输入订单总金额" />
@@ -162,6 +165,7 @@
<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/crm/order";
import { listCustomer } from "@/api/crm/customer";
import OrderDetailList from '@/views/crm/components/OrderDetail.vue'
import { ORDER_TYPE } from "../js/enum";
@@ -213,11 +217,14 @@ export default {
form: {},
// 表单校验
rules: {
}
},
orderId: '',
customerList: [],
};
},
created() {
this.getList();
this.getCustomerList();
},
methods: {
/** 查询正式订单主列表 */
@@ -229,6 +236,12 @@ export default {
this.loading = false;
});
},
/** 查询客户列表 */
getCustomerList() {
listCustomer({ pageNum: 1, pageSize: 1000 }).then(response => {
this.customerList = response.rows;
});
},
// 取消按钮
cancel() {
this.open = false;
@@ -236,6 +249,7 @@ export default {
},
// 行点击事件
handleRowClick(row) {
console.log(row, '行点击')
this.orderId = row.orderId;
},
handleApprove(row) {
@@ -301,7 +315,7 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加正式订单主";
this.title = "添加预订单";
},
/** 修改按钮操作 */
handleUpdate(row) {
@@ -312,7 +326,7 @@ export default {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改正式订单主";
this.title = "修改预订单";
});
},
/** 提交按钮 */

0
klp-ui/src/views/hrm/站位.txt Normal file
View File