284 lines
12 KiB
Vue
284 lines
12 KiB
Vue
|
<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"></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>
|
|||
|
|
<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>
|
|||
|
|
<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" info1Field="customerCode" info4Field="companyName" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="19">
|
|||
|
|
<el-tabs v-model="activeTab" type="border-card">
|
|||
|
|
<el-tab-pane label="客户详情" name="detail">
|
|||
|
|
<!-- 客户详情区域 -->
|
|||
|
|
<el-descriptions :column="2" v-if="activeTab === 'detail'">
|
|||
|
|
<el-descriptions-item label="客户编号">
|
|||
|
|
{{ currentCustomer.customerNum }}
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="公司">
|
|||
|
|
{{ currentCustomer.company }}
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="联系人">
|
|||
|
|
{{ currentCustomer.contact }}
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="客户联系电话">{{ currentCustomer.phone }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="客户联系邮箱">{{ currentCustomer.email }}</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.level" :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>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="信息编辑" name="edit">
|
|||
|
|
<!-- 客户联系人区域 -->
|
|||
|
|
<el-form label-position="top" v-if="activeTab === 'edit'">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="客户编号" prop="customerNum">
|
|||
|
|
<el-input v-model="currentCustomer.customerNum" placeholder="请输入客户编号" @change="handleDetailChange"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="公司" prop="company">
|
|||
|
|
<el-input v-model="currentCustomer.company" placeholder="请输入公司名称" @change="handleDetailChange"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="联系人" prop="contact">
|
|||
|
|
<el-input v-model="currentCustomer.contact" placeholder="请输入联系人" @change="handleDetailChange"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="客户联系电话" prop="phone">
|
|||
|
|
<el-input v-model="currentCustomer.phone" placeholder="请输入客户联系电话" @change="handleDetailChange"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="客户联系邮箱" prop="email">
|
|||
|
|
<el-input v-model="currentCustomer.email" placeholder="请输入客户联系邮箱" @change="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.level" 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="12" v-hasPermi="['crm:customer:address']">
|
|||
|
|
<el-form-item label="客户地址" prop="address">
|
|||
|
|
<el-input v-model="currentCustomer.address" placeholder="请输入客户地址" @change="handleDetailChange"/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane label="历史订单" name="transaction">
|
|||
|
|
<!-- 客户交易记录区域 -->
|
|||
|
|
<div v-if="activeTab === 'transaction'">
|
|||
|
|
<el-descriptions :column="2">
|
|||
|
|
<el-descriptions-item label="客户总数">{{ currentCustomer.totalCount }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount }}</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount }}</el-descriptions-item>
|
|||
|
|
</el-descriptions>
|
|||
|
|
<el-table></el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</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="customerCode">
|
|||
|
|
<el-input v-model="form.customerCode" placeholder="请输入客户编码" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="公司名称" prop="companyName">
|
|||
|
|
<el-input v-model="form.companyName" placeholder="请输入公司名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="联系人" prop="contactPerson">
|
|||
|
|
<el-input v-model="form.contactPerson" placeholder="请输入联系人" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="联系方式" prop="contactWay">
|
|||
|
|
<el-input v-model="form.contactWay" placeholder="请输入联系方式" />
|
|||
|
|
</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-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-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="客户地址" prop="address">
|
|||
|
|
<el-input v-model="form.address" placeholder="请输入客户地址" />
|
|||
|
|
</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 { listCustomer, addCustomer } from '@/api/crm/customer'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'CustomerPage',
|
|||
|
|
components: {
|
|||
|
|
KLPList
|
|||
|
|
},
|
|||
|
|
dicts: ['customer_industry', 'customer_level'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
customerList: [],
|
|||
|
|
showQuery: false,
|
|||
|
|
queryParams: {
|
|||
|
|
industry: '',
|
|||
|
|
customerLevel: '',
|
|||
|
|
customerCode: '',
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
},
|
|||
|
|
total: 0,
|
|||
|
|
activeTab: 'detail',
|
|||
|
|
customerLoading: false,
|
|||
|
|
currentCustomer: {},
|
|||
|
|
open: false,
|
|||
|
|
form: {},
|
|||
|
|
buttonLoading: false,
|
|||
|
|
rules: {
|
|||
|
|
customerCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
|
|||
|
|
companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
|
|||
|
|
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
|||
|
|
contactWay: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
|
|||
|
|
industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
|
|||
|
|
customerLevel: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
|
|||
|
|
address: [{ required: true, message: '请输入客户地址', trigger: 'blur' }],
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
currentCustomerId() {
|
|||
|
|
return this.currentCustomer.customerId || undefined
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getCustomerList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toggleQuery() {
|
|||
|
|
this.showQuery = !this.showQuery
|
|||
|
|
},
|
|||
|
|
handleDetailChange() {
|
|||
|
|
// 发送网络请求更新客户信息
|
|||
|
|
},
|
|||
|
|
getCustomerList() {
|
|||
|
|
this.customerLoading = true;
|
|||
|
|
listCustomer(this.queryParams).then(response => {
|
|||
|
|
this.customerList = response.rows || [];
|
|||
|
|
this.customerLoading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 表单重置
|
|||
|
|
reset() {
|
|||
|
|
this.form = {
|
|||
|
|
customerId: undefined,
|
|||
|
|
customerCode: undefined,
|
|||
|
|
companyName: undefined,
|
|||
|
|
contactPerson: undefined,
|
|||
|
|
contactWay: undefined,
|
|||
|
|
industry: undefined,
|
|||
|
|
customerLevel: undefined,
|
|||
|
|
address: undefined,
|
|||
|
|
bankInfo: undefined,
|
|||
|
|
remark: undefined,
|
|||
|
|
createBy: undefined,
|
|||
|
|
createTime: undefined,
|
|||
|
|
updateBy: undefined,
|
|||
|
|
updateTime: undefined,
|
|||
|
|
delFlag: undefined
|
|||
|
|
};
|
|||
|
|
this.resetForm("form");
|
|||
|
|
},
|
|||
|
|
/** 新增按钮操作 */
|
|||
|
|
handleAdd() {
|
|||
|
|
this.reset();
|
|||
|
|
this.open = true;
|
|||
|
|
},
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs.form.validate(valid => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.buttonLoading = true;
|
|||
|
|
// 提交表单数据
|
|||
|
|
addCustomer(this.form).then(response => {
|
|||
|
|
this.$message({
|
|||
|
|
message: '客户录入成功',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
this.buttonLoading = false;
|
|||
|
|
this.open = false;
|
|||
|
|
this.getCustomerList();
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.buttonLoading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 取消按钮操作 */
|
|||
|
|
cancel() {
|
|||
|
|
this.reset();
|
|||
|
|
this.open = false;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style></style>
|