springboot项目实战-销售管理系统-客户管理
发布时间
阅读量：
阅读量
接着前面的内容，我还是继续贴代码出来，
数据库
drop table if exists ap_customer;
CREATE TABLE `ap_customer` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键id',
`name` varchar(50) DEFAULT NULL COMMENT '客户名称',
`company_address` varchar(255) DEFAULT NULL COMMENT '公司地址',
`person` varchar(20) DEFAULT NULL COMMENT '联系人',
`phone` varchar(15) DEFAULT NULL COMMENT '手机',
`profession` varchar(30) DEFAULT NULL COMMENT '行业',
`province` varchar(10) DEFAULT NULL COMMENT '省份',
`city` varchar(10) DEFAULT NULL COMMENT '城市',
`user_id` bigint(20) DEFAULT NULL COMMENT '负责人id',
`customer_state` int(11) DEFAULT NULL COMMENT '客户状态：0新建完成 1跟进中 2即将成交 3成交过的',
`competitor` varchar(255) DEFAULT NULL COMMENT '竞争对手',
`note` varchar(1000) DEFAULT NULL COMMENT '客户备注',
`bank_name` varchar(255) DEFAULT NULL COMMENT '开户行',
`bank_no` varchar(255) DEFAULT NULL COMMENT '开户账号',
`bill_address` varchar(400) DEFAULT NULL COMMENT '发票地址',
`bill_person` varchar(20) DEFAULT NULL COMMENT '开票人',
`bill_phone` varchar(20) DEFAULT NULL COMMENT '发票手机号',
`bill_note` varchar(500) DEFAULT NULL COMMENT '开票备注',
`is_deleted` tinyint default 0 comment '是否删除，0正常，1删除',
PRIMARY KEY (`id`)
) COMMENT='客户表';
insert into ap_customer(name,user_id,customer_state) values ('湖南汽配厂',2,1);
insert into ap_customer(name,user_id,customer_state) values ('江南汽配厂',2,1);
springboot后端
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.17</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.shrimpking</groupId>
<artifactId>springboot-back</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-back</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.30</version>
</dependency>
<!--swagger依赖-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<!--swagger ui-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.8.1</version>
</dependency>
<!-- 验证码 -->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
<!-- jwt验证 -->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>3.10.3</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.7</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<image>
<builder>paketobuildpacks/builder-jammy-base:latest</builder>
</image>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
application.properties
server.port=8089
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=mysql123
#格式化时间
spring.jackson.date-format= yyyy-MM-dd
spring.jackson.time-zone= GMT+8
#日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#配置别名
mybatis-plus.type-aliases-package=com.shrimpking.pojo
#开启逻辑删除，标识字段
mybatis-plus.global-config.db-config.logic-delete-field=is_deleted
#删除
mybatis-plus.global-config.db-config.logic-delete-value=1
#未删除
mybatis-plus.global-config.db-config.logic-not-delete-value=0
customer.java
package com.shrimpking.pojo;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
/** * <p>
* 客户表
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("ap_customer")
@ApiModel(value="Customer对象", description="客户表")
public class Customer implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "主键id")
@TableId(value = "id", type = IdType.AUTO)
private Long id;
@ApiModelProperty(value = "客户名称")
private String name;
@ApiModelProperty(value = "公司地址")
private String companyAddress;
@ApiModelProperty(value = "联系人")
private String person;
@ApiModelProperty(value = "手机")
private String phone;
@ApiModelProperty(value = "行业")
private String profession;
@ApiModelProperty(value = "省份")
private String province;
@ApiModelProperty(value = "城市")
private String city;
@ApiModelProperty(value = "负责人id")
private Long userId;
@ApiModelProperty(value = "客户状态：0新建完成 1跟进中 2即将成交 3成交过的")
private Integer customerState;
@ApiModelProperty(value = "竞争对手")
private String competitor;
@ApiModelProperty(value = "客户备注")
private String note;
@ApiModelProperty(value = "开户行")
private String bankName;
@ApiModelProperty(value = "开户账号")
private String bankNo;
@ApiModelProperty(value = "发票地址")
private String billAddress;
@ApiModelProperty(value = "发票人")
private String billPerson;
@ApiModelProperty(value = "发票手机号")
private String billPhone;
@ApiModelProperty(value = "开票备注")
private String billNote;
@TableLogic
@ApiModelProperty(value = "是否删除，0正常，1删除")
private Integer isDeleted;
}
customerMapper.java
package com.shrimpking.mapper;
import com.shrimpking.pojo.Customer;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
/** * <p>
* 客户表 Mapper 接口
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
public interface CustomerMapper extends BaseMapper<Customer> {
}
customerMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shrimpking.mapper.CustomerMapper">
<!-- 通用查询映射结果 -->
<resultMap id="BaseResultMap" type="com.shrimpking.pojo.Customer">
<id column="id" property="id" />
<result column="name" property="name" />
<result column="company_address" property="companyAddress" />
<result column="person" property="person" />
<result column="phone" property="phone" />
<result column="profession" property="profession" />
<result column="province" property="province" />
<result column="city" property="city" />
<result column="user_id" property="userId" />
<result column="customer_state" property="customerState" />
<result column="competitor" property="competitor" />
<result column="note" property="note" />
<result column="bank_name" property="bankName" />
<result column="bank_no" property="bankNo" />
<result column="bill_address" property="billAddress" />
<result column="bill_person" property="billPerson" />
<result column="bill_phone" property="billPhone" />
<result column="bill_note" property="billNote" />
</resultMap>
<!-- 通用查询结果列 -->
<sql id="Base_Column_List">
id, name, company_address, person, phone, profession, province, city, user_id, customer_state, competitor, note, bank_name, bank_no, bill_address, bill_person, bill_phone, bill_note
</sql>
</mapper>
customerService.java
package com.shrimpking.service;
import com.shrimpking.pojo.Customer;
import com.baomidou.mybatisplus.extension.service.IService;
/** * <p>
* 客户表 服务类
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
public interface CustomerService extends IService<Customer> {
}
customerServiceImpl.java
package com.shrimpking.service.impl;
import com.shrimpking.pojo.Customer;
import com.shrimpking.mapper.CustomerMapper;
import com.shrimpking.service.CustomerService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
/** * <p>
* 客户表 服务实现类
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@Service
public class CustomerServiceImpl extends ServiceImpl<CustomerMapper, Customer> implements CustomerService {
}
customerController.java
package com.shrimpking.controller;
import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.shrimpking.pojo.Customer;
import com.shrimpking.pojo.User;
import com.shrimpking.req.CustomerParams;
import com.shrimpking.req.UserParams;
import com.shrimpking.res.Result;
import com.shrimpking.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/** * <p>
* 客户表 前端控制器
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@RestController
@RequestMapping("/customer")
public class CustomerController {
@Autowired
private CustomerService customerService;
@GetMapping("/listPage")
public Result listPage(CustomerParams customerParams){
IPage<Customer> page = new Page<>(customerParams.getCurrentPage(), customerParams.getPageSize());
LambdaQueryWrapper<Customer> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.isNotBlank(customerParams.getName()), Customer::getName, customerParams.getName());
queryWrapper.eq(ObjectUtil.isNotNull(customerParams.getCustomerState()),Customer::getCustomerState,customerParams.getCustomerState());
IPage<Customer> resultPage = this.customerService.page(page, queryWrapper);
return Result.success(resultPage);
}
@PostMapping("/save")
public Result save(@RequestBody Customer customer){
LambdaQueryWrapper<Customer> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Customer::getName,customer.getName());
int count = this.customerService.count(queryWrapper);
if(count > 0){ return Result.fail("此客户已存在");}
boolean save = this.customerService.save(customer);
if(!save) { return Result.fail("保存失败");}
return Result.success("保存成功");
}
@PostMapping("/update")
public Result update(@RequestBody Customer customer){
LambdaQueryWrapper<Customer> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Customer::getName,customer.getName());
Customer one = this.customerService.getOne(queryWrapper);
if(one != null && !one.getId().equals(customer.getId())){
return Result.fail("此客户已存在");
}
boolean update = this.customerService.updateById(customer);
if(!update){ return Result.fail("更新失败");}
return Result.success("更新成功");
}
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable("id") Long customerId){
if(ObjectUtil.isNull(customerId)){
return Result.fail("未选择客户，无法删除");
}
boolean remove = this.customerService.removeById(customerId);
if(!remove) { return Result.fail("删除失败");}
return Result.success("删除成功");
}
@GetMapping("/list")
public Result list(){
List<Customer> list = this.customerService.list();
return Result.success(list);
}
}
customerPamrms.java
package com.shrimpking.req;
import lombok.Data;
import lombok.EqualsAndHashCode;
/** * Created by IntelliJ IDEA.
* * @Author : Shrimpking
* @create 2023/11/21 18:24
*/
@EqualsAndHashCode(callSuper = true)
@Data
public class CustomerParams extends QueryParams
{
private String name;
private Integer customerState;
}
result.java
package com.shrimpking.res;
import lombok.Data;
/** * Created by IntelliJ IDEA.
* * @Author : Shrimpking
* @create 2023/11/20 16:51
*/
@Data
public class Result
{
private static final Integer SUCCESS_CODE = 200;
private static final Integer ERROR_CODE = 500;
private static final String SUCCESS_MSG = "成功";
private static final String ERROR_MSG = "失败";
private Integer code;
private String msg;
private Object data;
/** * 返回成功，默认
* @return
*/
public static Result success(){
Result result = new Result();
result.setCode(Result.SUCCESS_CODE);
result.setMsg(Result.SUCCESS_MSG);
result.setData(null);
return result;
}
/** * 返回成功，消息
* @return
*/
public static Result success(String msg){
Result result = success();
result.setMsg(msg);
return result;
}
/** * 返回成功，数据
* @return
*/
public static Result success(Object data){
Result result = success();
result.setData(data);
return result;
}
/** * 返回成功，消息和数据
* @return
*/
public static Result success(String msg,Object data){
Result result = success(msg);
result.setData(data);
return result;
}
/** * 返回失败，默认
* @return
*/
public static Result fail(){
Result result = new Result();
result.setCode(Result.ERROR_CODE);
result.setMsg(Result.ERROR_MSG);
result.setData(null);
return result;
}
/** * 返回失败，消息
* @return
*/
public static Result fail(String msg){
Result result = fail();
result.setMsg(msg);
return result;
}
/** * 返回失败，消息和数据
* @return
*/
public static Result fail(String msg,Object data){
Result result = fail(msg);
result.setData(data);
return result;
}
}
vue前端
router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name:'LoginView',
component: ()=> import('@/views/LoginView.vue'),
},
{
path: '/home',
name: 'HomeView',
redirect: '/index',
component: ()=> import('@/views/HomeView.vue'),
children:[
{
path: '/index',
name: 'IndexView',
component: ()=> import('@/views/IndexView.vue'),
meta: {
title: '首页'
}
},
{
path: '/user',
name: 'UserView',
component: ()=> import('@/views/User/UserView.vue'),
meta: {
title: '用户信息'
}
},
{
path: '/customer',
name: 'CustomerView',
component: ()=> import('@/views/Customer/CustomerView.vue'),
meta: {
title: '客户信息'
}
},
]
}
]
const router = new VueRouter({
routes
})
//路由错误时，解决问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch(err => err)
};
//白名单
const IGNORE_URLS = ['/login'];
//前置守卫
router.beforeEach((to, from, next) => {
//在白名单中，放行
if(IGNORE_URLS.includes(to.path)){
next();
}
//获取用户
let admin = JSON.parse(window.localStorage.getItem('access-admin'));
if(!admin && !IGNORE_URLS.includes(to.path)){
//没有登录 ，没有在白名单中，跳转登录
return next('/login');
}
next();
});
export default router
customerView.vue
<template>
<div class="user-area">
<el-card show="always" class="search">
<el-row>
<el-form :inline="true">
<el-form-item>
<el-input
v-model="searchForm.name"
placeholder="输入客户名称搜索"
@clear="doSearch"
@keypress.native.enter="doSearch"
clearable></el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.customerState"
placeholder="选择客户状态"
style="margin-left: 1px;"
@clear="doSearch"
clearable>
<el-option label="新建完成" value="0"></el-option>
<el-option label="跟进中" value="1"></el-option>
<el-option label="即将成交" value="2"></el-option>
<el-option label="成交过的" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-toilet-paper" @click="doClean">清空</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="addBtn">新增</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<div class="data-table">
<el-table
:data="tableData"
border
:height="tableHeight"
size="mini"
style="width: 100%">
<el-table-column
fixed
prop="id"
width="50px"
label="ID">
</el-table-column>
<el-table-column
fixed
prop="name"
label="客户名称"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="companyAddress"
label="公司地址"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="person"
label="联系人"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="phone"
label="手机"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="profession"
label="行业"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="city"
label="城市"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="userId"
label="负责人"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ userList.find(item =>item.id === scope.row.userId).name }} </span>
</template>
</el-table-column>
<el-table-column
prop="customerState"
label="客户状态"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.customerState === 0">新建完成</span>
<span v-if="scope.row.customerState === 1">跟进中</span>
<span v-if="scope.row.customerState === 2">即将成交</span>
<span v-if="scope.row.customerState === 3">成交过的</span>
</template>
</el-table-column>
<el-table-column
prop="competitor"
label="竞争对手"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="note"
label="客户备注"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="bankName"
label="开户行"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="bankNo"
label="开户行账号"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="billAddress"
label="发票地址"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="billPerson"
label="发票人"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="billPhone"
label="发票手机号"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="billNote"
label="开票备注"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" fixed="right" width="200px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="data-page">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchForm.currentPage"
:page-sizes="[2, 5, 10, 50]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!-- 新增对话框 -->
<div>
<el-dialog
:title="dialogTitle"
:visible.sync="addDialogVisible"
:close-on-click-modal="false"
width="75%"
:before-close="handleClose">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="85px"
label-position="left"
class="demo-ruleForm">
<el-row>
<el-col :span="7" :offset="1">
<el-form-item label="客户名称" prop="name">
<el-input v-model="ruleForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="公司地址" prop="companyAddress">
<el-input v-model="ruleForm.companyAddress" clearable></el-input>
</el-form-item>
<el-form-item label="联系人" prop="person">
<el-input v-model="ruleForm.person" clearable></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="ruleForm.phone" clearable></el-input>
</el-form-item>
<el-form-item label="省份" prop="province">
<el-input v-model="ruleForm.province" clearable></el-input>
</el-form-item>
<el-form-item label="城市" prop="city">
<el-input v-model="ruleForm.city" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item label="行业" prop="profession">
<el-input v-model="ruleForm.profession" clearable></el-input>
</el-form-item>
<el-form-item label="负责人" prop="userId">
<el-select v-model="ruleForm.userId" style="width: 100%;" clearable>
<el-option
v-for="item in userList"
:label="item.name"
:value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="客户状态" prop="customerState">
<el-select v-model="ruleForm.customerState" style="width: 100%;" clearable>
<el-option label="新建完成" :value="0"></el-option>
<el-option label="跟进中" :value="1"></el-option>
<el-option label="即将成交" :value="2"></el-option>
<el-option label="成交过的" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="竞争对手" prop="competitor">
<el-input v-model="ruleForm.competitor" clearable></el-input>
</el-form-item>
<el-form-item label="客户备注" prop="note">
<el-input v-model="ruleForm.province" clearable></el-input>
</el-form-item>
<el-form-item label="开户行" prop="bankName">
<el-input v-model="ruleForm.bankName" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<el-form-item label="开户行账号" prop="bankNo">
<el-input v-model="ruleForm.bankNo" clearable></el-input>
</el-form-item>
<el-form-item label="发票地址" prop="billAddress">
<el-input v-model="ruleForm.billAddress" clearable></el-input>
</el-form-item>
<el-form-item label="开票人" prop="billPerson">
<el-input v-model="ruleForm.billPerson" clearable></el-input>
</el-form-item>
<el-form-item label="发票手机号" prop="billPhone">
<el-input v-model="ruleForm.billPhone" clearable></el-input>
</el-form-item>
<el-form-item label="开票备注" prop="billNote">
<el-input v-model="ruleForm.billNote" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogReset" v-if="dialogTitle==='新增用户'">重 置</el-button>
<el-button type="primary" @click="dialogSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
export default {
name: "CustomerView",
data(){
return {
//用户列表
userList:[],
//对话框标题
dialogTitle: '',
//对话框可见
addDialogVisible: false,
//搜索区域
searchForm: {
name:'',
customerState:'',
currentPage:1,
pageSize:5,
},
//总记录数
total:0,
//表格数据
tableData:[],
//表格高度
tableHeight:0,
//新增表单
ruleForm: {
name: '',
companyAddress: '',
person: '',
phone: '',
profession: '',
province: '',
city: '',
userId: '',
customerState: '',
competitor: '',
note: '',
bankName: '',
bankNo: '',
billAddress: '',
billPerson: '',
billPhone: '',
billNote: '',
},
rules: {
name: [
{ required: true, message: '请输入客户名称', trigger: 'blur' },
],
companyAddress: [
{ required: true, message: '请输入公司地址', trigger: 'blur' },
],
userId: [
{ required: true, message: '请选择负责人', trigger: 'change' },
],
customerState: [
{ required: true, message: '请选择客户状态', trigger: 'change' },
],
}
}
},
methods: {
//获取用户列表
getUserList(){
request.get('/user/list').then(res=>{
//console.log(res)
if(res.code === 200){
this.userList = res.data;
}
})
},
//删除
handleDelete(row){
this.$confirm(`您确定要删除【${ row.name }】吗？`,'删除提示',{
confirmButtonText:'删除',
cancelButtonText:'取消',
type: 'warning'
}).then(()=>{
request.delete('/customer/delete/' + row.id)
.then(res=>{
if(res.code === 200){
this.$message.success(res.msg);
this.doSearch();
}else {
this.$message.error(res.msg);
this.doSearch();
}
});
}).catch(_=>{
this.$message.warning("已取消删除");
})
},
//编辑
handleEdit(row){
//深度拷贝
let obj = JSON.parse(JSON.stringify(row));
this.ruleForm = obj;
this.dialogTitle = '编辑客户';
this.addDialogVisible = true;
},
//新增
addBtn(){
this.ruleForm = {};
this.dialogTitle = '新增客户';
this.addDialogVisible = true;
},
//对话框提交
dialogSubmit(){
this.$refs.ruleForm.validate((valid)=>{
if(valid){
request.post(this.ruleForm.id ? '/customer/update':'/customer/save',this.ruleForm)
.then(res=>{
if(res.code === 200){
this.$message.success(res.msg);
this.handleClose();
this.doSearch();
}else {
this.$message.error(res.msg);
this.doSearch();
}
})
}
})
},
//对话框重置
dialogReset(){
this.$refs.ruleForm.resetFields();
this.ruleForm = {};
},
//对话框关闭
handleClose(){
this.dialogReset();
this.addDialogVisible = false;
},
//清空
doClean(){
this.searchForm.name = '';
this.searchForm.customerState = '';
this.doSearch();
},
//搜索
doSearch(){
this.searchForm.currentPage = 1;
this.getData();
},
//获取数据
getData(){
request.get("/customer/listPage",{
params: this.searchForm
}).then(res=>{
if(res.code === 200){
//console.log(res);
this.tableData = res.data.records;
this.searchForm.currentPage = res.data.current;
this.searchForm.pageSize = res.data.size;
this.total = res.data.total;
}else {
this.$message.error("获取数据失败！");
}
})
},
handleSizeChange(val){
this.searchForm.pageSize = val;
this.searchForm.currentPage = 1;
this.getData();
},
handleCurrentChange(val){
this.searchForm.currentPage = val;
this.getData();
}
},
created(){
//计算表格高度
this.$nextTick(()=>{
this.tableHeight = window.innerHeight - 275;
});
//获取数据
this.getData();
//获取用户列表
this.getUserList();
}
}
</script>
<style lang="scss" scoped>
.user-area{
width: 100%;
height: 100%;
margin-top: 15px;
.search{
}
.data-table{
margin-top: 15px;
}
.data-page{
text-align: left;
margin-top: 5px;
}
}
</style>
home.vue
<template>
<div>
<el-container class="home-area">
<el-header class="home-header">
<span class="header-title">销售管理系统</span>
<span class="header-user">
用户：{{ admin.name }}
<el-button type="info" icon="el-icon-switch-button" @click="exitBtn" circle></el-button>
</span>
</el-header>
<el-container class="home-main">
<el-aside class="main-aside" width="210px">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
router>
<el-menu-item index="/index">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="/user" v-if="admin.role === 1">
<template slot="title">
<i class="el-icon-menu"></i>
<span>用户管理</span>
</template>
<el-menu-item index="/user">
<i class="el-icon-mobile-phone"></i>
<span slot="title">用户信息</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/customer">
<template slot="title">
<i class="el-icon-menu"></i>
<span>客户管理</span>
</template>
<el-menu-item index="/customer">
<i class="el-icon-mobile-phone"></i>
<span slot="title">客户信息</span>
</el-menu-item>
<el-menu-item index="/follow">
<i class="el-icon-mobile-phone"></i>
<span slot="title">客户跟进</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/product">
<template slot="title">
<i class="el-icon-menu"></i>
<span>产品管理</span>
</template>
<el-menu-item index="/product">
<i class="el-icon-mobile-phone"></i>
<span slot="title">产品信息</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/order">
<template slot="title">
<i class="el-icon-menu"></i>
<span>订单管理</span>
</template>
<el-menu-item index="/order">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单信息</span>
</el-menu-item>
<el-menu-item index="/orderDetail">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单明细</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/target">
<template slot="title">
<i class="el-icon-menu"></i>
<span>目标管理</span>
</template>
<el-menu-item index="/target">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单目标</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/todo">
<template slot="title">
<i class="el-icon-menu"></i>
<span>事项管理</span>
</template>
<el-menu-item index="/todo">
<i class="el-icon-mobile-phone"></i>
<span slot="title">待办事项</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main class="main-content">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: this.$route.path}">{{ $route.meta.title }}</el-breadcrumb-item>
</el-breadcrumb>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "HomeView",
computed: {
admin(){
return JSON.parse(window.localStorage.getItem('access-admin'));
}
},
methods: {
exitBtn(){
this.$confirm('您确定要退出系统吗','退出提示',{
confirmButtonText: '退出',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
this.$message.success("退出成功");
window.localStorage.clear();
this.$router.replace('/login');
}).catch(_=>{
this.$message.warning("已取消退出");
});
}
}
}
</script>
<style lang="scss" scoped>
.home-area{
width: 100%;
height: 100vh;
.home-header{
background-color: #545c64;
.header-title{
line-height: 60px;
font-size: 28px;
font-weight: bolder;
font-family: 华文彩云,Sans-serif,serif;
color: white;
}
.header-user{
width: 280px;
float: right;
line-height: 60px;
color: white;
text-align: center;
}
}
.home-main{
height: 100%;
.main-aside{
width: 210px;
.el-menu-vertical-demo{
height: 100%;
border-right: none;
}
}
.main-content{
width: 100%;
height: 100%;
overflow: hidden;
padding: 15px;
}
}
}
</style>
全部评论 (0)
还没有任何评论哟~