CRM提交更新
This commit is contained in:
44
ruoyi-ui/src/api/oa/business.js
Normal file
44
ruoyi-ui/src/api/oa/business.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询CRM 商机列表
|
||||
export function listBusiness(query) {
|
||||
return request({
|
||||
url: '/oa/business/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 商机详细
|
||||
export function getBusiness(businessId) {
|
||||
return request({
|
||||
url: '/oa/business/' + businessId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增CRM 商机
|
||||
export function addBusiness(data) {
|
||||
return request({
|
||||
url: '/oa/business',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改CRM 商机
|
||||
export function updateBusiness(data) {
|
||||
return request({
|
||||
url: '/oa/business',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除CRM 商机
|
||||
export function delBusiness(businessId) {
|
||||
return request({
|
||||
url: '/oa/business/' + businessId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
ruoyi-ui/src/api/oa/clue.js
Normal file
44
ruoyi-ui/src/api/oa/clue.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询CRM 线索列表
|
||||
export function listClue(query) {
|
||||
return request({
|
||||
url: '/oa/clue/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 线索详细
|
||||
export function getClue(clueId) {
|
||||
return request({
|
||||
url: '/oa/clue/' + clueId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增CRM 线索
|
||||
export function addClue(data) {
|
||||
return request({
|
||||
url: '/oa/clue',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改CRM 线索
|
||||
export function updateClue(data) {
|
||||
return request({
|
||||
url: '/oa/clue',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除CRM 线索
|
||||
export function delClue(clueId) {
|
||||
return request({
|
||||
url: '/oa/clue/' + clueId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
52
ruoyi-ui/src/api/oa/customer.js
Normal file
52
ruoyi-ui/src/api/oa/customer.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询CRM 客户列表
|
||||
export function listCustomer(query) {
|
||||
return request({
|
||||
url: '/oa/customer/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 查询CRM 客户列表
|
||||
export function listSeaCustomer(query) {
|
||||
return request({
|
||||
url: '/oa/customer/list-sea',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 客户详细
|
||||
export function getCustomer(customerId) {
|
||||
return request({
|
||||
url: '/oa/customer/' + customerId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增CRM 客户
|
||||
export function addCustomer(data) {
|
||||
return request({
|
||||
url: '/oa/customer',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改CRM 客户
|
||||
export function updateCustomer(data) {
|
||||
return request({
|
||||
url: '/oa/customer',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除CRM 客户
|
||||
export function delCustomer(customerId) {
|
||||
return request({
|
||||
url: '/oa/customer/' + customerId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
52
ruoyi-ui/src/api/oa/followUpRecord.js
Normal file
52
ruoyi-ui/src/api/oa/followUpRecord.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询CRM 跟进记录列表
|
||||
export function listFollowUpRecord(query) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 跟进记录列表
|
||||
export function listFollowUpRecordByIds(ids) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord/listByIds/'+ids,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 跟进记录详细
|
||||
export function getFollowUpRecord(followId) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord/' + followId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增CRM 跟进记录
|
||||
export function addFollowUpRecord(data) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改CRM 跟进记录
|
||||
export function updateFollowUpRecord(data) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除CRM 跟进记录
|
||||
export function delFollowUpRecord(followId) {
|
||||
return request({
|
||||
url: '/oa/followUpRecord/' + followId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
ruoyi-ui/src/api/oa/product.js
Normal file
44
ruoyi-ui/src/api/oa/product.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询CRM 产品列表
|
||||
export function listProduct(query) {
|
||||
return request({
|
||||
url: '/oa/product/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询CRM 产品详细
|
||||
export function getProduct(productId) {
|
||||
return request({
|
||||
url: '/oa/product/' + productId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增CRM 产品
|
||||
export function addProduct(data) {
|
||||
return request({
|
||||
url: '/oa/product',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改CRM 产品
|
||||
export function updateProduct(data) {
|
||||
return request({
|
||||
url: '/oa/product',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除CRM 产品
|
||||
export function delProduct(productId) {
|
||||
return request({
|
||||
url: '/oa/product/' + productId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -162,6 +162,21 @@ export const constantRoutes = [
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/customer',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'detail/:customerId(\\d+)',
|
||||
component: () => import('@/views/oa/customer/customer/detail'),
|
||||
name: 'detail',
|
||||
meta: { title: '客户详情' ,activeMenu: '/customer' }
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/claim',
|
||||
component: Layout,
|
||||
@@ -181,6 +196,8 @@ export const constantRoutes = [
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
|
||||
442
ruoyi-ui/src/views/oa/customer/business/index.vue
Normal file
442
ruoyi-ui/src/views/oa/customer/business/index.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="商机名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入商机名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="queryParams.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商机状态" prop="statusId">
|
||||
<el-select v-model="queryParams.statusId" placeholder="请选择商机状态编号" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.business_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="businessList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="编号" align="center" prop="businessId" v-if="true"/>
|
||||
<el-table-column label="商机名称" align="center" prop="name" fixed/>
|
||||
<el-table-column label="客户姓名" align="center" prop="customerName" />
|
||||
<el-table-column label="跟进状态" align="center" prop="followUpStatus" />
|
||||
<el-table-column label="最后跟进时间" align="center" prop="contactLastTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactLastTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="下次联系时间" align="center" prop="contactNextTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactNextTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="nickName" />
|
||||
<el-table-column label="商机状态编号" align="center" prop="statusId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.business_status" :value="scope.row.statusId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预计成交日期" align="center" prop="dealTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.dealTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品总金额" align="center" prop="totalProductPrice" />
|
||||
<el-table-column label="整单折扣" align="center" prop="discountPercent" />
|
||||
<el-table-column label="商机总金额" align="center" prop="totalPrice" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="结束标注" align="center" prop="endRemark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 商机对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="商机名称" prop="name">
|
||||
<el-input v-model="form.name" 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.name"
|
||||
:value="item.customerId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最后跟进时间" prop="contactLastTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactLastTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择最后跟进时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="下次联系时间" prop="contactNextTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactNextTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择下次联系时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="form.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="statusId">
|
||||
<el-select v-model="form.statusId" placeholder="请选择商机状态编号">
|
||||
<el-option
|
||||
v-for="dict in dict.type.business_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商机总金额" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="总金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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 { listBusiness, getBusiness, delBusiness, addBusiness, updateBusiness } from "@/api/oa/business";
|
||||
import {listUser} from "@/api/system/user";
|
||||
import {listCustomer} from "@/api/oa/customer";
|
||||
import {listProduct} from "@/api/oa/product";
|
||||
|
||||
export default {
|
||||
name: "Business",
|
||||
dicts: ['business_status'],
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 商机表格数据
|
||||
businessList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
customerId: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
statusTypeId: undefined,
|
||||
statusId: undefined,
|
||||
endStatus: undefined,
|
||||
dealTime: undefined,
|
||||
totalProductPrice: undefined,
|
||||
discountPercent: undefined,
|
||||
totalPrice: undefined,
|
||||
endRemark: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
businessId: [
|
||||
{ required: true, message: "编号不能为空", trigger: "blur" }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "商机名称不能为空", trigger: "blur" }
|
||||
],
|
||||
customerId: [
|
||||
{ required: true, message: "客户编号不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
userList:[],
|
||||
customerList:[],
|
||||
productList:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getUserList();
|
||||
this.getCustomerList();
|
||||
this.getProductList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 商机列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listBusiness(this.queryParams).then(response => {
|
||||
this.businessList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getUserList() {
|
||||
listUser({pageSize: 999, pageNum: 1}).then((response) => {
|
||||
this.userList = response.rows;
|
||||
})
|
||||
},
|
||||
getCustomerList(){
|
||||
listCustomer({pageSize: 999, pageNum: 1}).then(response => {
|
||||
this.customerList = response.rows;
|
||||
})
|
||||
},
|
||||
getProductList(){
|
||||
listProduct({pageSize: 999, pageNum: 1}).then(res=>{
|
||||
this.productList = res.rows;
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
businessId: undefined,
|
||||
name: undefined,
|
||||
customerId: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
statusTypeId: undefined,
|
||||
statusId: undefined,
|
||||
endStatus: undefined,
|
||||
dealTime: undefined,
|
||||
totalProductPrice: undefined,
|
||||
discountPercent: undefined,
|
||||
totalPrice: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
updateBy: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
endRemark: 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.businessId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 商机";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const businessId = row.businessId || this.ids
|
||||
getBusiness(businessId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 商机";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.businessId != null) {
|
||||
updateBusiness(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addBusiness(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const businessIds = row.businessId || this.ids;
|
||||
this.$modal.confirm('是否确认删除CRM 商机编号为"' + businessIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delBusiness(businessIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/business/export', {
|
||||
...this.queryParams
|
||||
}, `business_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-row .el-form-item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
469
ruoyi-ui/src/views/oa/customer/clue/index.vue
Normal file
469
ruoyi-ui/src/views/oa/customer/clue/index.vue
Normal file
@@ -0,0 +1,469 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
||||
<el-form-item label="线索名" prop="clueName">
|
||||
<el-input
|
||||
v-model="queryParams.clueName"
|
||||
placeholder="请输入线索名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人姓名" prop="nickName">
|
||||
<el-input
|
||||
v-model="queryParams.nickName"
|
||||
placeholder="请输入负责人的用户编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="转化状态" prop="transformStatus">
|
||||
<el-select v-model="queryParams.transformStatus" placeholder="请选择转化状态">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
@keyup.enter.native="handleQuery"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="queryParams.industryId" placeholder="请选择所属行业" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="queryParams.level" placeholder="请选择客户等级" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="clueList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="编号" align="center" type="index" v-if="true"/>
|
||||
<el-table-column label="转化状态" align="center" prop="transformStatus">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.transformStatus===0?'warning':'success'">
|
||||
{{ scope.row.transformStatus === 0 ? '未转化' : '已转化' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="线索名称" align="center" prop="clueName" fixed/>
|
||||
<el-table-column label="所属行业" align="center" prop="industryId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.industry_type" :value="scope.row.industryId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户等级" align="center" prop="level">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_level" :value="scope.row.level"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户来源" align="center" prop="source">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_source" :value="scope.row.source"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="跟进状态" align="center" prop="followUpStatus"/>
|
||||
<el-table-column label="负责人的用户编号" align="center" prop="nickName"/>
|
||||
|
||||
<el-table-column label="详细地址" align="center" prop="detailAddress"/>
|
||||
<el-table-column label="手机号" align="center" prop="mobile"/>
|
||||
<el-table-column label="电话" align="center" prop="telephone"/>
|
||||
<el-table-column label="QQ" align="center" prop="qq"/>
|
||||
<el-table-column label="微信" align="center" prop="wechat"/>
|
||||
<el-table-column label="邮箱" align="center" prop="email"/>
|
||||
|
||||
<el-table-column label="备注" align="center" prop="remark"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 线索对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="线索名称" prop="clueName">
|
||||
<el-input v-model="form.clueName" placeholder="请输入线索名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人的用户编号" prop="ownerUserId">
|
||||
<el-select v-model="form.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ"/>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="form.industryId" placeholder="请选择所属行业">
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="form.level" placeholder="请选择客户等级">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="form.source" placeholder="请选择客户来源">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_source"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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 {listClue, getClue, delClue, addClue, updateClue} from "@/api/oa/clue";
|
||||
import {listUser} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "Clue",
|
||||
dicts: ['customer_source', 'industry_type', 'customer_level'],
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 线索表格数据
|
||||
clueList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
|
||||
options: [{
|
||||
value: '0',
|
||||
label: '未转化'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '已转化'
|
||||
}],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
clueName: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
transformStatus: undefined,
|
||||
customerId: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
},
|
||||
userList: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
clueId: [
|
||||
{required: true, message: "编号，主键自增不能为空", trigger: "blur"}
|
||||
],
|
||||
clueName: [
|
||||
{required: true, message: "线索名称不能为空", trigger: "blur"}
|
||||
],
|
||||
ownerUserId: [
|
||||
{required: true, message: "负责人的用户编号不能为空", trigger: "blur"}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getUserList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 线索列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listClue(this.queryParams).then(response => {
|
||||
this.clueList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getUserList() {
|
||||
listUser({pageSize: 999, pageNum: 1}).then((response) => {
|
||||
this.userList = response.rows;
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
clueId: undefined,
|
||||
clueName: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
transformStatus: undefined,
|
||||
customerId: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: 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.clueId)
|
||||
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 clueId = row.clueId || this.ids
|
||||
getClue(clueId).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.clueId != null) {
|
||||
updateClue(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addClue(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const clueIds = row.clueId || this.ids;
|
||||
this.$modal.confirm('是否确认删除线索编号为"' + clueIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delClue(clueIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/clue/export', {
|
||||
...this.queryParams
|
||||
}, `clue_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
212
ruoyi-ui/src/views/oa/customer/customer/detail.vue
Normal file
212
ruoyi-ui/src/views/oa/customer/customer/detail.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="user-detail-page">
|
||||
<!-- 上半部分：用户基本信息 -->
|
||||
<el-card class="user-info-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div>用户详细信息</div>
|
||||
<div>
|
||||
<el-button type="text" @click="updateCustomer">分配负责人</el-button>
|
||||
<el-button type="text" @click="openMsg">领取</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div><strong>姓名：</strong>{{ customerInfo.name }}</div>
|
||||
<div><strong>下次交谈时间：</strong>{{ parseTime(customerInfo.contactLastTime, '{y}-{m}-{d}') }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div><strong>邮箱：</strong>{{ customerInfo.email }}</div>
|
||||
<div><strong>qq：</strong>{{ customerInfo.qq }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div><strong>地址：</strong>{{ customerInfo.detailAddress }}</div>
|
||||
<div><strong>来源：</strong>{{ customerInfo.source }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
|
||||
<!-- 下半部分：标签页 -->
|
||||
<el-tabs v-model="activeTab" type="card" class="user-tabs">
|
||||
<!-- 第一个tab：跟进信息 -->
|
||||
<el-tab-pane label="跟进信息" name="followup">
|
||||
<el-table :data="followUpRecordList" style="width: 100%">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="编号" align="center" prop="followId" v-if="true"/>
|
||||
<el-table-column label="跟进类型" align="center" prop="type"/>
|
||||
<el-table-column label="跟进内容" align="center" prop="content"/>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 第二个tab：商机 -->
|
||||
<el-tab-pane label="商机" name="business">
|
||||
<el-table :data="businessList" style="width: 100%">
|
||||
<el-table-column label="商机名称" align="center" prop="name"/>
|
||||
<el-table-column label="客户姓名" align="center" prop="customerName"/>
|
||||
<el-table-column label="跟进状态" align="center" prop="followUpStatus"/>
|
||||
<el-table-column label="负责人" align="center" prop="nickName"/>
|
||||
<el-table-column label="商机状态" align="center" prop="statusId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.business_status" :value="scope.row.statusId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 第三个tab：更详细的用户信息 -->
|
||||
<el-tab-pane label="详细信息" name="moreInfo">
|
||||
<div class="more-info">
|
||||
<p><strong>更多详细信息：</strong></p>
|
||||
<p><strong>等待需求..</strong></p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 添加或修改CRM 客户对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="customerInfo" label-width="120px">
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input v-model="customerInfo.name" placeholder="请输入客户名称" disabled/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="customerInfo.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 {getCustomer, updateCustomer} from "@/api/oa/customer";
|
||||
import {listFollowUpRecordByIds} from "@/api/oa/followUpRecord";
|
||||
import {listBusiness} from "@/api/oa/business";
|
||||
import {listUser, getUserProfile} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: 'UserDetail',
|
||||
dicts: ['business_status'],
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'followup',
|
||||
// 示例用户数据
|
||||
customerInfo: {},
|
||||
open: false,
|
||||
queryParams: {
|
||||
pageSize: 100,
|
||||
pageNum: 1,
|
||||
},
|
||||
// 示例跟进信息数据
|
||||
followupData: [
|
||||
{date: '2025-03-10', content: '电话联系，确认需求', status: '已完成'},
|
||||
{date: '2025-03-12', content: '发送邮件跟进', status: '待反馈'}
|
||||
],
|
||||
// 示例商机数据
|
||||
businessList: [
|
||||
{name: '项目A', amount: '10000', stage: '洽谈中'},
|
||||
{name: '项目B', amount: '20000', stage: '合同签订'}
|
||||
],
|
||||
followUpRecordList: [],
|
||||
userList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCustomerInfo()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getCustomerInfo() {
|
||||
getCustomer(this.$route.params.customerId).then(res => {
|
||||
this.customerInfo = res.data
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listUser(this.queryParams).then(res => {
|
||||
this.userList = res.rows
|
||||
})
|
||||
this.queryParams.customerId = this.$route.params.customerId
|
||||
listBusiness(this.queryParams).then(response => {
|
||||
this.businessList = response.rows;
|
||||
console.log(this.businessList);
|
||||
if (this.businessList.length > 0) {
|
||||
const businessIds = this.businessList.map(item => item.businessId);
|
||||
listFollowUpRecordByIds(businessIds).then(response => {
|
||||
this.followUpRecordList = response.rows;
|
||||
})
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
openMsg() {
|
||||
this.$alert('确定要领取此用户吗', '领取用户', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
getUserProfile().then(response => {
|
||||
let user = response.data.user
|
||||
console.log(response.data)
|
||||
this.customerInfo.ownerUserId = user.userId
|
||||
updateCustomer(this.customerInfo).then(res => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '领取成功'
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
updateCustomer() {
|
||||
this.open = true;
|
||||
this.form = this.customerInfo
|
||||
},
|
||||
submitForm() {
|
||||
updateCustomer(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clearfix {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-detail-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
padding: 10px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
563
ruoyi-ui/src/views/oa/customer/customer/index.vue
Normal file
563
ruoyi-ui/src/views/oa/customer/customer/index.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="queryParams.industryId" placeholder="请选择所属行业" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="queryParams.level" placeholder="请选择客户等级" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="queryParams.source" placeholder="请选择客户来源" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_source"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-tabs v-model="activeTab" type="card" class="user-tabs">
|
||||
<!-- <el-tab-pane label="我的客户" name="userList1">-->
|
||||
<!-- <el-table v-loading="loading" :data="customerListOwn" @selection-change="handleSelectionChange">-->
|
||||
<!-- <el-table-column type="selection" width="55" align="center"/>-->
|
||||
<!-- <el-table-column label="序号" align="center" type="index"/>-->
|
||||
<!-- <el-table-column label="客户名称" align="center" prop="name" fixed>-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-button type="text" @click="toDetail(scope.row)">{{scope.row.name}}</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="客户等级" align="center" prop="level">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <dict-tag :options="dict.type.customer_level" :value="scope.row.level"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="客户来源" align="center" prop="source">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <dict-tag :options="dict.type.customer_source" :value="scope.row.source"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="跟进状态" align="center" prop="followUpStatus"/>-->
|
||||
<!-- <el-table-column label="最后跟进时间" align="center" prop="contactLastTime" width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{ parseTime(scope.row.contactLastTime, '{y}-{m}-{d}') }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="最后跟进内容" align="center" prop="contactLastContent"/>-->
|
||||
<!-- <el-table-column label="下次联系时间" align="center" prop="contactNextTime" width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{ parseTime(scope.row.contactNextTime, '{y}-{m}-{d}') }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column label="负责人" align="center" prop="nickName"/>-->
|
||||
<!-- <el-table-column label="所属行业" align="center" prop="industryId">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <dict-tag :options="dict.type.industry_type" :value="scope.row.industryId"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<!-- <el-table-column label="手机" align="center" prop="mobile"/>-->
|
||||
<!-- <el-table-column label="电话" align="center" prop="telephone"/>-->
|
||||
<!-- <el-table-column label="QQ" align="center" prop="qq"/>-->
|
||||
<!-- <el-table-column label="微信" align="center" prop="wechat"/>-->
|
||||
<!-- <el-table-column label="邮箱" align="center" prop="email"/>-->
|
||||
<!-- <el-table-column label="详细地址" align="center" prop="detailAddress"/>-->
|
||||
<!-- <el-table-column label="备注" align="center" prop="remark"/>-->
|
||||
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- size="mini"-->
|
||||
<!-- type="text"-->
|
||||
<!-- icon="el-icon-edit"-->
|
||||
<!-- @click="handleUpdate(scope.row)"-->
|
||||
<!-- v-hasPermi="['oa:customer:edit']"-->
|
||||
<!-- >修改-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button-->
|
||||
<!-- size="mini"-->
|
||||
<!-- type="text"-->
|
||||
<!-- icon="el-icon-delete"-->
|
||||
<!-- @click="handleDelete(scope.row)"-->
|
||||
<!-- v-hasPermi="['oa:customer:remove']"-->
|
||||
<!-- >删除-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
|
||||
<el-tab-pane label="我的客户" name="userList1">
|
||||
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="序号" align="center" type="index"/>
|
||||
<el-table-column label="客户名称" align="center" prop="name" fixed>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="toDetail(scope.row)">{{scope.row.name}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户等级" align="center" prop="level">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_level" :value="scope.row.level"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户来源" align="center" prop="source">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_source" :value="scope.row.source"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="跟进状态" align="center" prop="followUpStatus"/>
|
||||
<el-table-column label="最后跟进时间" align="center" prop="contactLastTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactLastTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后跟进内容" align="center" prop="contactLastContent"/>
|
||||
<el-table-column label="下次联系时间" align="center" prop="contactNextTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactNextTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="nickName"/>
|
||||
<el-table-column label="所属行业" align="center" prop="industryId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.industry_type" :value="scope.row.industryId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="手机" align="center" prop="mobile"/>
|
||||
<el-table-column label="电话" align="center" prop="telephone"/>
|
||||
<el-table-column label="QQ" align="center" prop="qq"/>
|
||||
<el-table-column label="微信" align="center" prop="wechat"/>
|
||||
<el-table-column label="邮箱" align="center" prop="email"/>
|
||||
<el-table-column label="详细地址" align="center" prop="detailAddress"/>
|
||||
<el-table-column label="备注" align="center" prop="remark"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 客户对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入客户名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="最后跟进时间" prop="contactLastTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactLastTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择最后跟进时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="最后跟进内容" prop="contactLastContent">
|
||||
<el-input v-model="form.contactLastContent" type="textarea" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下次联系时间" prop="contactNextTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactNextTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择下次联系时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="form.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
||||
<el-form-item label="详细地址" prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" type="textarea" placeholder="请输入详细地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ"/>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="form.industryId" placeholder="请选择所属行业">
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="form.level" placeholder="请选择客户等级">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="form.source" placeholder="请选择客户来源">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_source"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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 {listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer} from "@/api/oa/customer";
|
||||
import {listUser} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
dicts: ['customer_source', 'industry_type', 'customer_level'],
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 客户表格数据
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
},
|
||||
userList: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: "客户名称不能为空", trigger: "blur"}
|
||||
],
|
||||
|
||||
},
|
||||
activeTab: 'userList1',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getUserList();
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 查询CRM 客户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listCustomer(this.queryParams).then(response => {
|
||||
this.customerList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
},
|
||||
getUserList() {
|
||||
listUser({pageSize: 999, pageNum: 1}).then((response) => {
|
||||
this.userList = response.rows;
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
customerId: undefined,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: 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.customerId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 客户";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const customerId = row.customerId || this.ids
|
||||
getCustomer(customerId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 客户";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.customerId != null) {
|
||||
updateCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const customerIds = row.customerId || this.ids;
|
||||
this.$modal.confirm('是否确认删除客户编号为"' + customerIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delCustomer(customerIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/customer/export', {
|
||||
...this.queryParams
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
toDetail(row){
|
||||
console.log(row)
|
||||
this.$router.push('/customer/detail/'+row.customerId);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
339
ruoyi-ui/src/views/oa/customer/product/index.vue
Normal file
339
ruoyi-ui/src/views/oa/customer/product/index.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input
|
||||
v-model="queryParams.productName"
|
||||
placeholder="请输入产品名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品编码" prop="productNumber">
|
||||
<el-input
|
||||
v-model="queryParams.productNumber"
|
||||
placeholder="请输入产品编码"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类" prop="categoryId">
|
||||
<el-select v-model="queryParams.categoryId" placeholder="请选择产品分类编号" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.product_category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="产品编号" align="center" prop="productId" v-if="true"/>
|
||||
<el-table-column label="产品名称" align="center" prop="productName" />
|
||||
<el-table-column label="产品编码" align="center" prop="productNumber" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="价格" align="center" prop="price" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
<el-table-column label="产品分类" align="center" prop="categoryId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.product_category" :value="scope.row.categoryId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品描述" align="center" prop="description" />
|
||||
<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-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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 产品对话框 -->
|
||||
<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="productName">
|
||||
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品编码" prop="productNumber">
|
||||
<el-input v-model="form.productNumber" placeholder="请输入产品编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类编号" prop="categoryId">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择产品分类编号">
|
||||
<el-option
|
||||
v-for="dict in dict.type.product_category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品描述" prop="description">
|
||||
<el-input v-model="form.description" 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 { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/oa/product";
|
||||
|
||||
export default {
|
||||
name: "Product",
|
||||
dicts: ['product_category'],
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 产品表格数据
|
||||
productList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
productName: undefined,
|
||||
productNumber: undefined,
|
||||
unit: undefined,
|
||||
price: undefined,
|
||||
status: undefined,
|
||||
categoryId: undefined,
|
||||
description: undefined,
|
||||
ownerUserId: undefined,
|
||||
deleted: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
productName: [
|
||||
{ required: true, message: "产品名称不能为空", trigger: "blur" }
|
||||
],
|
||||
productNumber: [
|
||||
{ required: true, message: "产品编码不能为空", trigger: "blur" }
|
||||
],
|
||||
|
||||
|
||||
categoryId: [
|
||||
{ required: true, message: "产品分类编号不能为空", trigger: "change" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 产品列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listProduct(this.queryParams).then(response => {
|
||||
this.productList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
productId: undefined,
|
||||
productName: undefined,
|
||||
productNumber: undefined,
|
||||
unit: undefined,
|
||||
price: undefined,
|
||||
status: undefined,
|
||||
categoryId: undefined,
|
||||
description: undefined,
|
||||
ownerUserId: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
deleted: 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.productId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 产品";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const productId = row.productId || this.ids
|
||||
getProduct(productId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 产品";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.productId != null) {
|
||||
updateProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const productIds = row.productId || this.ids;
|
||||
this.$modal.confirm('是否确认删除CRM 产品编号为"' + productIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delProduct(productIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/product/export', {
|
||||
...this.queryParams
|
||||
}, `product_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
484
ruoyi-ui/src/views/oa/customer/sea/index.vue
Normal file
484
ruoyi-ui/src/views/oa/customer/sea/index.vue
Normal file
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="queryParams.industryId" placeholder="请选择所属行业" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="queryParams.level" placeholder="请选择客户等级" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="queryParams.source" placeholder="请选择客户来源" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_source"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="序号" align="center" type="index"/>
|
||||
<el-table-column label="客户名称" align="center" prop="name" fixed>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="toDetail(scope.row)">{{scope.row.name}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户等级" align="center" prop="level">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_level" :value="scope.row.level"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户来源" align="center" prop="source">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_source" :value="scope.row.source"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="跟进状态" align="center" prop="followUpStatus"/>
|
||||
<el-table-column label="最后跟进时间" align="center" prop="contactLastTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactLastTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后跟进内容" align="center" prop="contactLastContent"/>
|
||||
<el-table-column label="下次联系时间" align="center" prop="contactNextTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.contactNextTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="nickName"/>
|
||||
<el-table-column label="所属行业" align="center" prop="industryId">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.industry_type" :value="scope.row.industryId"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="手机" align="center" prop="mobile"/>
|
||||
<el-table-column label="电话" align="center" prop="telephone"/>
|
||||
<el-table-column label="QQ" align="center" prop="qq"/>
|
||||
<el-table-column label="微信" align="center" prop="wechat"/>
|
||||
<el-table-column label="邮箱" align="center" prop="email"/>
|
||||
<el-table-column label="详细地址" align="center" prop="detailAddress"/>
|
||||
<el-table-column label="备注" align="center" prop="remark"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 客户对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入客户名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="最后跟进时间" prop="contactLastTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactLastTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择最后跟进时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="最后跟进内容" prop="contactLastContent">
|
||||
<el-input v-model="form.contactLastContent" type="textarea" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下次联系时间" prop="contactNextTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.contactNextTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择下次联系时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人" prop="ownerUserId">
|
||||
<el-select v-model="form.ownerUserId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.userId"
|
||||
:label="item.nickName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
||||
<el-form-item label="详细地址" prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" type="textarea" placeholder="请输入详细地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="industryId">
|
||||
<el-select v-model="form.industryId" placeholder="请选择所属行业">
|
||||
<el-option
|
||||
v-for="dict in dict.type.industry_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="form.level" placeholder="请选择客户等级">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="form.source" placeholder="请选择客户来源">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_source"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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 {listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer, listSeaCustomer} from "@/api/oa/customer";
|
||||
import {listUser} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
dicts: ['customer_source', 'industry_type', 'customer_level'],
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 客户表格数据
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
},
|
||||
userList: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: "客户名称不能为空", trigger: "blur"}
|
||||
],
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getUserList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 客户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listSeaCustomer(this.queryParams).then(response => {
|
||||
this.customerList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getUserList() {
|
||||
listUser({pageSize: 999, pageNum: 1}).then((response) => {
|
||||
this.userList = response.rows;
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
customerId: undefined,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: 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.customerId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 客户";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const customerId = row.customerId || this.ids
|
||||
getCustomer(customerId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 客户";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.customerId != null) {
|
||||
updateCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const customerIds = row.customerId || this.ids;
|
||||
this.$modal.confirm('是否确认删除CRM 客户编号为"' + customerIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delCustomer(customerIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('oa/customer/export', {
|
||||
...this.queryParams
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
toDetail(row){
|
||||
this.$router.push({
|
||||
path: '/customer/detail/'+row.customerId,
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user