案例管理

This commit is contained in:
xiezhijun
2021-03-05 20:15:05 +08:00
parent a15e90171b
commit b4d5eabf32
16 changed files with 1147 additions and 49 deletions

View File

@ -0,0 +1,84 @@
import request from '@/utils/request'
// 查询客户案例管理列表
export function listCustomerCase(query) {
return request({
url: '/custom/customerCase/list',
method: 'get',
params: query
})
}
// 查询客户案例管理详细
export function getCustomerCase(id) {
return request({
url: '/custom/customerCase/' + id,
method: 'get'
})
}
// 新增客户案例管理
export function addCustomerCase(data) {
return request({
url: '/custom/customerCase',
method: 'post',
data: data
})
}
// 修改客户案例管理
export function updateCustomerCase(data) {
return request({
url: '/custom/customerCase',
method: 'put',
data: data
})
}
// 删除客户案例管理
export function delCustomerCase(id) {
return request({
url: '/custom/customerCase/' + id,
method: 'delete'
})
}
// 导出客户案例管理
export function exportCustomerCase(query) {
return request({
url: '/custom/customerCase/export',
method: 'get',
params: query
})
}
// 根据案例ID查询对应文件列表
export function getFileListByCaseId(caseId) {
return request({
url: '/custom/customerCase/getFileListByCaseId',
method: 'get',
params: {"caseId": caseId}
})
}
// 上传案例文件
export function uploadCseFile(data) {
return request({
url: '/custom/customerCase/uploadCseFile',
method: 'post',
data: data
})
}
// 下载案例文件
export function downCaseFile(data) {
return request({
url: '/custom/customerCase/downCaseFile',
method: 'post',
data: data
})
}

View File

@ -0,0 +1,174 @@
<template>
<!-- 选择用户对话框 -->
<el-dialog :title="title" :visible.sync="open" @closed="cancel" width="480px" append-to-body>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="60px" style="margin-top: -20px">
<el-form-item label="名字" prop="name">
<el-input
v-model.trim="queryParams.name"
placeholder="请输入名字"
clearable
size="small"
/>
</el-form-item>
<el-form-item>
<el-button
type="cyan"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!--<el-col :span="1.5">
<el-button
type="success"
size="mini"
:disabled="single"
@click="handleSelect"
>选择当前勾选用户</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="customerCenterList"
@selection-change="handleSelectionChange"
ref="customerTable"
>
<!-- <el-table-column
label="创建时间"
align="center"
prop="createTime"
width="166"
/>-->
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="客户姓名" align="center" prop="name" />
<el-table-column label="手机号" align="center" prop="phone" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:layout="'total, sizes, prev, next'"
:pageSizes="[5]"
@pagination="getList"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button
type="success"
:disabled="single"
@click="handleSelect"
>确定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</template>
<script>
import {
listCustomer,
} from "@/api/custom/customer";
export default {
name: "selectCustomer",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 选择名字数组
names:[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 客户档案表格数据
customerCenterList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 5,
name: null,
phone: null
}
};
},
created() {
this.getList();
},
computed: {
},
methods: {
showDialog(title) {
this.title = title ? title : "选择客户";
this.open = true;
},
/** 查询客户档案列表 */
getList() {
this.loading = true;
listCustomer(this.queryParams).then((response) => {
this.customerCenterList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.$refs.customerTable.clearSelection();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.names = selection.map((item) => item.name);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 选择用户操作 */
handleSelect() {
const id = this.ids[0];
const name = this.names[0];
this.cancel();
this.$emit('dealCustomerId', id, name);
},
},
};
</script>

View File

@ -0,0 +1,73 @@
<template>
<!-- 多文件下载对话框 -->
<el-dialog :title="title" :visible.sync="open" @closed="cancel" width="600px" append-to-body>
<div class="app-container">
<el-table v-loading="loading" :data="fileList">
<el-table-column label="文件名" align="center" prop="fileName" />
<el-table-column label="上传时间" align="center" prop="createTime" />
<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-download"
@click=""
>下载</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { downCaseFile } from "@/api/custom/customerCase";
export default {
name: "MuchFileDown",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
//案例id
caseId: null,
//文件列表
fileList: []
};
},
created() {
},
computed: {
},
methods: {
showDialog(title, fileList) {
this.title = title ? title : "文件列表";
this.fileList = fileList;
this.loading = false;
this.open = true;
},
// 取消按钮
cancel() {
this.open = false;
this.caseId = null;
this.fileList = [];
},
downloadFile(file){
downCaseFile(file);
}
},
};
</script>

View File

@ -0,0 +1,126 @@
<template>
<el-upload class="upload-demo"
ref="upload"
drag
:headers="upload.headers"
:action="upload.url"
:limit="upload.limit"
:disabled="upload.isUploading"
:file-list="upload.fileList"
:multiple="upload.multiple"
:on-change="handleFileChange"
:on-exceed="handleFileexceed"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-error="handleFileFail"
:data="upload.data"
:auto-upload="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">每个案例最多上传5个文件且每个文件不超过50M</div>
</el-upload>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
name: "DragUpload",
components: {
},
data() {
return {
upload: {
// 是否禁用上传
isUploading: false,
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/custom/customerCase/uploadCaseFile",
// 设置上传的请求头部
headers: {Authorization: 'Bearer ' + getToken()},
// 其他需要携带的数据
data:{},
//文件列表
fileList:[],
//同时上传文件上限
limit: 5,
//每个文件大小
fileSize: 1024 * 1024 * 50,
//是否支持同时选择多张
multiple: true
},
uploadResult:{
fileUrl:[],
fileName:[]
}
};
},
methods: {
uploadFile(){
if(this.upload.fileList.length > 0 && this.uploadResult.fileUrl.length != this.upload.fileList.length){
this.$refs.upload.submit();
}else{
this.$emit('callbackMethod', this.uploadResult);
}
},
uploadReset(){
this.upload.fileList = [];
this.uploadResult["fileUrl"] = [];
this.uploadResult["fileName"] = [];
},
//监控上传文件列表
handleFileChange(file, fileList) {
let sizeFlag = file.size > this.upload.fileSize;
if (sizeFlag) {
this.$message({
message: "当前文件过大",
type: "warning",
});
fileList.pop();
}
this.upload.fileList = fileList;
},
// 文件数量超过限度
handleFileexceed(file, fileList){
this.$message({
message: "最多可上传"+ this.upload.limit +"份文件",
type: "warning",
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
//this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if(response != null && response.code === 200){
this.uploadResult.fileUrl.push(response.fileUrl);
this.uploadResult.fileName.push(response.fileName);
if(this.uploadResult.fileUrl.length === this.upload.fileList.length){
//文件全部上传成功,则调用回调方法
this.$emit('callbackMethod', this.uploadResult);
}
}else{
this.upload.fileList = fileList.pop();
this.$message.error('文件上传失败,请检查文件格式');
}
},
// 文件上传失败处理
handleFileFail(err, file, fileList){
this.$message.error('文件上传失败,请检查文件格式');
this.upload.fileList = fileList.pop();
}
},
props: {
},
created() {
},
};
</script>
<style scoped>
</style>

View File

@ -0,0 +1,381 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="案例信息" prop="name">
<el-input
v-model.trim="queryParams.name"
placeholder="请输入案例名称或关键字"
clearable
size="small"
/>
</el-form-item>
<el-form-item label="客户姓名" prop="customerName">
<el-input
v-model.trim="queryParams.customerName"
placeholder="请输入客户姓名"
clearable
size="small"
/>
</el-form-item>
<el-form-item>
<el-button type="cyan" 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"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['custom:customerCase:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['custom:customerCase:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['custom:customerCase:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['custom:customerCase:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="customerCaseList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="案例名称" align="center" prop="name" />
<el-table-column label="关键词" align="center" prop="keyword" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="所属客户" align="center" prop="customerName" />
<el-table-column
label="文件"
align="center"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="getFileListByCaseId(scope.row)"
>文件列表
</el-button>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="160"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['custom:customerCase:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['custom:customerCase:remove']"
>删除</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"
/>
<!-- 添加或修改客户案例管理对话框 -->
<el-dialog :title="title" :visible.sync="open" @closed="cancel" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="案例名称" prop="name">
<el-input v-model.trim="form.name" type="textarea" maxlength="50" rows = "1" show-word-limit placeholder="请输入案例名称" />
</el-form-item>
<el-form-item label="关键词" prop="keywordArray">
<el-select
v-model="form.keywordArray"
multiple
filterable
allow-create
default-first-option
placeholder="请创建案例关键词按回车创建最多20个" style="width: 100%;">
</el-select>
</el-form-item>
<el-form-item label="案例备注" prop="remark">
<el-input
type="textarea"
placeholder="请输入案例备注"
v-model.trim="form.remark"
maxlength="200"
rows = "4"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="所属客户" prop="customerId">
<el-input v-model="form.customerName" placeholder="" style="width: 60%" :readonly="true" />
<span style="margin-left: 10px"> <el-button type="primary" @click="selectCustomer">选择所属客户</el-button></span>
</el-form-item>
<el-form-item label="案例文件" prop="file" v-show="form.id == null || form.id <= 0">
<DragUpload @callbackMethod="addCustomerCase" ref="uploadCaseFile"></DragUpload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<MuchFileDown ref="muchFileDownRef"></MuchFileDown>
<SelectCustomer @dealCustomerId="dealCustomerId" ref="selectCustomerRef"></SelectCustomer>
</div>
</template>
<script>
import { listCustomerCase, getCustomerCase, delCustomerCase, addCustomerCase, updateCustomerCase, exportCustomerCase,getFileListByCaseId,downCaseFile } from "@/api/custom/customerCase";
import DragUpload from "@/components/FileUpload/DragUpload";
import SelectCustomer from "@/components/Customer/SelectCustomer";
import MuchFileDown from "@/components/FileDownload/MuchFileDown";
export default {
name: "CustomerCase",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 客户案例管理表格数据
customerCaseList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
customerName: null
},
// 表单参数
form: {
},
// 表单校验
rules: {
name: [
{ required: true, message: "案例名称不能为空", trigger: "blur" },
],
keywordArray: [
{ required: true, message: "案例关键词不能为空", trigger: "blur" },
],
}
};
},
components: {
"DragUpload": DragUpload,
"SelectCustomer":SelectCustomer,
"MuchFileDown": MuchFileDown
},
created() {
this.getList();
},
methods: {
/** 查询客户案例管理列表 */
getList() {
this.loading = true;
listCustomerCase(this.queryParams).then(response => {
this.customerCaseList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.$refs["uploadCaseFile"].uploadReset();
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
keywordArray: null,
remark: null,
customerId: null,
customerName: null,
caseFileUrl: [],
caseFileName: []
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加客户案例管理";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getCustomerCase(id).then(response => {
this.form = {
id: response.data.id,
name: response.data.name,
keywordArray: response.data.keyword.split(","),
remark: response.data.remark,
customerId: response.data.customerId,
customerName: response.data.customerName,
caseFileUrl: [],
caseFileName: []
};
this.open = true;
this.title = "修改客户案例管理";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.keyword = this.form.keywordArray.join(",");
if (this.form.id != null) {
updateCustomerCase(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
this.$refs["uploadCaseFile"].uploadFile();
}
}
});
},
addCustomerCase(fileResult){
this.form.caseFileName = fileResult.fileName;
this.form.caseFileUrl = fileResult.fileUrl;
if(this.form.caseFileUrl.length == 0){
this.$message.error('请至少选择一个文件上传');
return;
}
addCustomerCase(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.$refs["uploadCaseFile"].uploadReset();
this.getList();
}
});
},
selectCustomer(){
this.$refs['selectCustomerRef'].showDialog("选择案例所属客户");
},
dealCustomerId(customerId, customerName){
//console.log(customerId);
this.form.customerId = customerId;
this.form.customerName = customerName;
},
getFileListByCaseId(customerCase){
getFileListByCaseId(customerCase.id).then(response => {
if (response.code === 200) {
this.$refs["muchFileDownRef"].showDialog(null, response.rows);
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除客户案例管理编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delCustomerCase(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有客户案例管理数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportCustomerCase(queryParams);
}).then(response => {
this.download(response.msg);
}).catch(function() {});
}
}
};
</script>