服务治理表结构设计
| t_customer_serve | 客户服务表 | |||
|---|---|---|---|---|
| 字段 | 字段类型 | 字段限度 | 字段形容 | |
| 主键 | id | int(11) | 自增 | id主键 |
| serve_type | varchar(30) | 可空 | 服务类型 | |
| overview | varchar(500) | 可空 | 概要 | |
| customer | varchar(30) | 可空 | 客户 | |
| state | varchar(20) | 可空 | 服务状态 | |
| service_request | varchar(500) | 可空 | 服务申请 | |
| create_people | varchar(100) | 可空 | 服务创建人 | |
| assigner | varchar(100) | 可空 | 服务调配人 | |
| assign_time | datetime | 可空 | 调配工夫 | |
| service_proce | varchar(500) | 可空 | 服务解决 | |
| service_proce_people | varchar(20) | 可空 | 服务解决人 | |
| service_proce_time | datetime | 可空 | 服务解决工夫 | |
| service_proce_result | varchar(500) | 可空 | 处理结果 | |
| myd | varchar(50) | 可空 | 满意度 | |
| is_valid | int(4) | 可空 | 是否无效 | |
| update_date | datetime | 可空 | 更新工夫 | |
| create_date | datetime | 可空 | 创立工夫 |
服务治理模块实现
Crm零碎增加客服零碎便于企业更好的服务与客户须要，及时满足客户对于企业信息，产品相干信息的理解，同时对于产品售后也起到好的保障。这里在实现服务治理时设置服务记录的创立，调配，解决，反馈与归档五个子模块。
服务列表展现外围实现
- CustomerServeMapper.xml
<select id="selectByParams" parameterType="com.xxxx.crm.query.CustomerServeQuery" resultType="com.xxxx.crm.vo.CustomerServe"> select c.*,d.data_dic_value as dic_value from t_customer_serve c left join t_datadic d on c.serve_type = d.id <where> c.is_valid=1 <if test="null !=customer and customer!=''"> and customer like concat('%',#{customer},'%') </if> <if test="null !=state and state!=''"> and state =#{state} </if> <if test="null !=type and type!=''"> and serve_type = #{type} </if> <if test="null !=assigner"> and assigner = #{assigner} </if> </where></select>- CustomerServeController.java
@Controller@RequestMapping("customer_serve")public class CustomerServeController extends BaseController { @Resource private CustomerServeService customerServeService; // 服务治理页面转发办法 @RequestMapping("index/{type}") public String index(@PathVariable Integer type){ if(type==1){ return "customerServe/customer_serve"; }else if(type==2){ return "customerServe/customer_serve_assign"; }else if(type==3){ return "customerServe/customer_serve_proce"; }else if(type==4){ return "customerServe/customer_serve_feed_back"; }else if(type==5){ return "customerServe/customer_serve_archive"; }else{ return ""; } } // 服务信息列表展现 @RequestMapping("list") @ResponseBody public Map<String,Object> queryCustomerServeByParams(Integer flag, HttpServletRequest request, CustomerServeQuery customerServeQuery){ if(null !=flag && flag==1){ customerServeQuery.setAssigner(LoginUserUtil.releaseUserIdFromCookie(request)); } return customerServeService.queryByParamsForTable(customerServeQuery); } // 服务增加页面转发 @RequestMapping("addCustomerServePage") public String addCustomerServePage(){ return "customerServe/customer_serve_add"; } //服务调配页面转发 @RequestMapping("addCustomerServeAssignPage") public String addCustomerServeAssignPage(Integer id, Model model){ model.addAttribute("customerServe",customerServeService.selectByPrimaryKey(id)); return "customerServe/customer_serve_assign_add"; } // 服务反馈页面转发 @RequestMapping("addCustomerServeBackPage") public String addCustomerServeBackPage(Integer id, Model model){ model.addAttribute("customerServe",customerServeService.selectByPrimaryKey(id)); return "customerServe/customer_serve_feed_back_add"; } // 服务解决页面转发 @RequestMapping("addCustomerServeProcePage") public String addCustomerServeProcePage(Integer id, Model model){ model.addAttribute("customerServe",customerServeService.selectByPrimaryKey(id)); return "customerServe/customer_serve_proce_add"; } //服务增加 调配 解决 归档解决 @RequestMapping("saveOrUpdateCustomerServe") @ResponseBody public ResultInfo saveOrUpdateCustomerServe(CustomerServe customerServe){ customerServeService.saveOrUpdateCustomerServe(customerServe); return success("操作胜利"); }服务记录创立、调配、解决后端外围实现
这里对于服务治理服务的创立，调配，解决与反馈后端代码实现放在同一个办法中进行解决，同时不便对于服务状态值对立解决，这里定义CustomerServeStatus 枚举类来实现。
- 服务状态枚举类定义
/** * 客户服务状态枚举类 */public enum CustomerServeStatus { // 创立 CREATED("fw_001"), // 调配 ASSIGNED("fw_002"), // 解决 PROCED("fw_003"), // 反馈 FEED_BACK("fw_004"), // 归档 ARCHIVED("fw_005"); private String state; CustomerServeStatus(String state) { this.state = state; } public String getState() { return state; }}- CustomerServeService.java
@Transactional(propagation = Propagation.REQUIRED)public void saveOrUpdateCustomerServe(CustomerServe customerServe){ if(null == customerServe.getId()){ /** 服务增加操作 * 1.参数校验 * 客户名 非空 * 客户类型 非空 * 2.增加默认值 * state 设置状态值 * isValid createDate updateDate * 3.执行增加 判断后果 */ AssertUtil.isTrue(StringUtils.isBlank(customerServe.getCustomer()),"请指定客户!"); AssertUtil.isTrue(null ==customerMapper.queryCustomerByName(customerServe.getCustomer()),"以后客户暂不存在!"); AssertUtil.isTrue(StringUtils.isBlank(customerServe.getServeType()),"请指定服务类型!"); customerServe.setIsValid(1); customerServe.setCreateDate(new Date()); customerServe.setUpdateDate(new Date()); customerServe.setState(CustomerServeStatus.CREATED.getState()); AssertUtil.isTrue(insertSelective(customerServe)<1,"服务记录增加失败!"); }else{ /** * 调配 解决 反馈 */ CustomerServe temp = selectByPrimaryKey(customerServe.getId()); AssertUtil.isTrue(null == temp,"待处理的服务记录不存在!"); if(customerServe.getState().equals(CustomerServeStatus.ASSIGNED.getState())){ // 服务调配 AssertUtil.isTrue(StringUtils.isBlank(customerServe.getAssigner())|| (null == userMapper.selectByPrimaryKey(Integer.parseInt(customerServe.getAssigner()))),"待调配用户不存在"); customerServe.setAssignTime(new Date()); customerServe.setUpdateDate(new Date()); AssertUtil.isTrue(updateByPrimaryKeySelective(customerServe)<1,"服务调配失败!"); } if(customerServe.getState().equals(CustomerServeStatus.PROCED.getState())){ // 服务解决 AssertUtil.isTrue(StringUtils.isBlank(customerServe.getServiceProce()),"请指定解决内容!"); customerServe.setServiceProceTime(new Date()); customerServe.setUpdateDate(new Date()); AssertUtil.isTrue(updateByPrimaryKeySelective(customerServe)<1,"服务解决失败!"); }if(customerServe.getState().equals(CustomerServeStatus.FEED_BACK.getState())){ // 服务解决 AssertUtil.isTrue(StringUtils.isBlank(customerServe.getServiceProceResult()),"请指定反馈内容!"); AssertUtil.isTrue(StringUtils.isBlank(customerServe.getMyd()),"请指定反馈满意度!"); customerServe.setUpdateDate(new Date()); customerServe.setState(CustomerServeStatus.ARCHIVED.getState()); AssertUtil.isTrue(updateByPrimaryKeySelective(customerServe)<1,"服务反馈失败!"); } }}服务创立前端视图 & 外围代码
服务列表主页面视图 & 外围js
- customer_serve.ftl
views/customerServe 目录下新建customer_serve.ftl 模板文件。
<!DOCTYPE html><html><head> <title>服务创立</title> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" > <blockquote class="layui-elem-quote quoteBox"> <form class="layui-form"> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="customer" class="layui-input searchVal" placeholder="客户" /> </div> <div class="layui-input-inline"> <select name="type" id="type"> <option value="" >请抉择</option> <option value="6">征询</option> <option value="7" >投诉</option> <option value="8" >倡议</option> </select> </div> <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon"></i> 搜寻</a> </div> </form> </blockquote> <table id="customerServeList" class="layui-table" lay-filter="customerServes"></table> <script type="text/html" id="toolbarDemo"> <a class="layui-btn layui-btn-normal addNews_btn" lay-event="add"> <i class="layui-icon"></i> 增加 </a> </script></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.js"></script></body></html>- customer.serve.js
js/customerServe 目录下新建customer.serve.js 文件，实现记录服务记录列表展现
layui.use(['table','layer',"form"],function(){ var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, table = layui.table; //服务列表展现 table.render({ elem: '#customerServeList', url : ctx+'/customer_serve/list?state=fw_001', cellMinWidth : 95, page : true, height : "full-125", limits : [10,15,20,25], limit : 10, toolbar: "#toolbarDemo", id : "customerServeListTable", cols : [[ {type: "checkbox", fixed:"left", width:50}, {field: "id", title:'编号',fixed:"true", width:80}, {field: 'customer', title: '客户名', minWidth:50, align:"center"}, {field: 'dicValue', title: '服务类型', minWidth:100, align:'center'}, {field: 'overview', title: '概要信息', align:'center'}, {field: 'createPeople', title: '创建人', minWidth:100, align:'center'}, {field: 'createDate', title: '创立工夫', align:'center',minWidth:150}, {field: 'updateDate', title: '更新工夫', align:'center',minWidth:150}, ]] }); // 多条件搜寻 $(".search_btn").on("click",function(){ table.reload("customerServeListTable",{ page: { curr: 1 //从新从第 1 页开始 }, where: { customer: $("input[name='customer']").val(), //客户名 type: $("#type").val() //服务类型 } }) });});服务创立视图 & 外围js
<img src="images\image-20200228102447560.png" alt="image-20200228102447560" style="zoom:80%;" />
这里增加服务创立点击事件，批改customer.serve.js
//头工具栏事件table.on('toolbar(customerServes)', function(obj){ switch(obj.event){ case "add": openAddCustomerServeDialog(); break; };});// 关上服务创立页面function openAddCustomerServeDialog(){ var url = ctx+"/customer_serve/addCustomerServePage"; layui.layer.open({ title : "服务治理-服务创立", type : 2, area:["700px","420px"], maxmin:true, content : url });}- customer_serve_add.ftl
views/customerServe 目录下增加customer_serve_add.ftl 文件筹备服务增加表单
<!DOCTYPE html><html><head> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" style="width:80%;"> <input name="state" type="hidden" value="fw_001"/> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">服务类型</label> <div class="layui-input-block"> <select name="serveType" id="serveType"> <option value="" >请抉择</option> <option value="6">征询</option> <option value="7" >投诉</option> <option value="8" >倡议</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">客户</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="customer" id="customer" placeholder="请输出客户姓名"> </div> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务内容</label> <div class="layui-input-block"> <textarea placeholder="请输出服务内容" name="serviceRequest" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务概要</label> <div class="layui-input-block"> <textarea placeholder="请输出服务信息" name="overview" class="layui-textarea"></textarea> </div> </div> </div> <br/> <div class="layui-form-item layui-row layui-col-xs12"> <div class="layui-input-block"> <button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCustomerServe">确认 </button> <button class="layui-btn layui-btn-lg layui-btn-normal">勾销</button> </div> </div></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.add.js"></script></body></html>- customer.serve.add.js
js/customerServe 目录下增加customer.serve.add.js 实现服务记录增加操作
layui.use(['form', 'layer','jquery_cookie'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, $ = layui.jquery_cookie($); form.on("submit(addOrUpdateCustomerServe)", function (data) { // 额定设置用户名 data.field.createPeople=$.cookie("trueName"); var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); //弹出loading $.post(ctx + "/customer_serve/saveOrUpdateCustomerServe", data.field, function (res) { if (res.code == 200) { setTimeout(function () { top.layer.close(index); top.layer.msg("操作胜利！"); layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 500); } else { layer.msg( res.msg, { icon: 5 } ); } }); return false; });});服务调配
服务调配实现将增加的服务记录调配该指定类型人员进行下一步解决操作，这里对于服务调配后端代码在后面已实现，这里次要增加前端视图与外围js。
待调配服务表格数据展现
- customer_serve_assign.ftl
views/customerServe 目录下增加customer_serve_assign.ftl 模板文件，展现要调配的服务记录
<!DOCTYPE html><html><head> <title>服务创立</title> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" > <blockquote class="layui-elem-quote quoteBox"> <form class="layui-form"> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="customer" class="layui-input searchVal" placeholder="客户" /> </div> <div class="layui-input-inline"> <select name="type" id="type"> <option value="" >请抉择</option> <option value="6">征询</option> <option value="7" >投诉</option> <option value="8" >倡议</option> </select> </div> <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon"></i> 搜寻</a> </div> </form> </blockquote> <table id="customerServeList" class="layui-table" lay-filter="customerServes"></table> <script type="text/html" id="toolbarDemo"> </script> <script id="customerServeListBar" type="text/html"> <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assign">调配</a> </script></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.assign.js"></script></body></html>- customer.serve.assign.js
js/customerServe 目录下增加customer.serve.assign.js 文件初始化服务调配表格数据
layui.use(['table','layer',"form"],function(){ var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, table = layui.table; //服务列表展现 table.render({ elem: '#customerServeList', url : ctx+'/customer_serve/list?state=fw_001', cellMinWidth : 95, page : true, height : "full-125", limits : [10,15,20,25], limit : 10, toolbar: "#toolbarDemo", id : "customerServeListTable", cols : [[ {type: "checkbox", fixed:"left", width:50}, {field: "id", title:'编号',fixed:"true", width:80}, {field: 'customer', title: '客户名', minWidth:50, align:"center"}, {field: 'dicValue', title: '服务类型', minWidth:100, align:'center'}, {field: 'overview', title: '概要信息', align:'center'}, {field: 'createPeople', title: '创建人', minWidth:100, align:'center'}, {field: 'assignTime', title: '调配工夫', minWidth:50, align:"center"}, {field: 'assigner', title: '调配人', minWidth:100, align:'center'}, {field: 'createDate', title: '创立工夫', align:'center',minWidth:150}, {field: 'updateDate', title: '更新工夫', align:'center',minWidth:150}, {title: '操作', minWidth:150, templet:'#customerServeListBar',fixed:"right",align:"center"} ]] }); // 多条件搜寻 $(".search_btn").on("click",function(){ table.reload("customerServeListTable",{ page: { curr: 1 //从新从第 1 页开始 }, where: { customer: $("input[name='customer']").val(), //客户名 type: $("#type").val() //服务类型 } }) });});批改customer.serve.assign.js 增加点击调配事件，实现调配操作
table.on("tool(customerServes)", function(obj){ var layEvent = obj.event; if(layEvent === "assign") { openCustomerAssignDialog(obj.data.id); }});function openCustomerAssignDialog(id){ var url = ctx+"/customer_serve/addCustomerServeAssignPage?id="+id; layui.layer.open({ title : "服务治理-服务调配", type : 2, area:["700px","420px"], maxmin:true, content : url });}服务调配表单解决
- customer_serve_assign_add.ftl
views/customerServe 目录下增加customer_serve_assign_add.ftl 模板文件，执行调配操作
<!DOCTYPE html><html><head> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" style="width:80%;"> <input name="id" type="hidden" value="${customerServe.id}"/> <input name="state" type="hidden" value="fw_002"/> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">服务类型</label> <div class="layui-input-block"> <select name="serveType" id="serveType" disabled="disabled"> <option value="" >请抉择</option> <option value="6" <#if customerServe.serveType=="6">selected="selected"</#if>>征询</option> <option value="7" <#if customerServe.serveType=="7">selected="selected"</#if> >投诉</option> <option value="8" <#if customerServe.serveType=="8">selected="selected"</#if>>倡议</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">客户</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="customer" id="customer" value="${(customerServe.customer)!}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务内容</label> <div class="layui-input-block"> <textarea name="serviceRequest" class="layui-textarea" readonly="readonly">${(customerServe.serviceRequest)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务概要</label> <div class="layui-input-block"> <textarea name="overview" class="layui-textarea" readonly="readonly">${(customerServe.overview)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">指派给</label> <div class="layui-input-block"> <select name="assigner" id="assigner" > <option value="">请抉择</option> </select> </div> </div> </div> <br/> <div class="layui-form-item layui-row layui-col-xs12"> <div class="layui-input-block"> <button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCustomerServe">确认 </button> <button class="layui-btn layui-btn-lg layui-btn-normal">勾销</button> </div> </div></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.assign.add.js"></script></body></html>- customer.serve.assign.add.js
js/customerServe 目录下增加customer.serve.assign.add.js文件，执行调配操作
layui.use(['form', 'layer'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery; // 初始化调配用户下拉框 $.post(ctx+"/user/queryAllCustomerManager",function (res) { for (var i = 0; i < res.length; i++) { $("#assigner").append("<option value=\"" + res[i].id + "\">" + res[i].name + "</option>"); } //从新渲染 layui.form.render("select"); }); form.on("submit(addOrUpdateCustomerServe)", function (data) { var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); //弹出loading $.post(ctx + "/customer_serve/saveOrUpdateCustomerServe", data.field, function (res) { if (res.code == 200) { setTimeout(function () { top.layer.close(index); top.layer.msg("操作胜利！"); layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 500); } else { layer.msg( res.msg, { icon: 5 } ); } }); return false; });});服务解决
当服务信息调配后，用户登录到crm零碎点击服务解决进入解决解决页面执行解决操作
待处理服务记录列表信息展现
- customer_serve_proce.ftl
views/customerServe 目录下增加customer_serve_proce.ftl 文件展现待处理服务列表。
<!DOCTYPE html><html><head> <title>服务创立</title> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" > <blockquote class="layui-elem-quote quoteBox"> <form class="layui-form"> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="customer" class="layui-input searchVal" placeholder="客户" /> </div> <div class="layui-input-inline"> <select name="type" id="type"> <option value="" >请抉择</option> <option value="6">征询</option> <option value="7" >投诉</option> <option value="8" >倡议</option> </select> </div> <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon"></i> 搜寻</a> </div> </form> </blockquote> <table id="customerServeList" class="layui-table" lay-filter="customerServes"></table> <script type="text/html" id="toolbarDemo"> </script> <script id="customerServeListBar" type="text/html"> <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assign">解决</a> </script></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.proce.js"></script></body></html>- customer.serve.proce.js
js/customerServe 目录下增加customer.serve.proce.js 文件初始化待处理服务记录表格数据
layui.use(['table','layer',"form"],function(){ var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, table = layui.table; //服务列表展现 table.render({ elem: '#customerServeList', url : ctx+'/customer_serve/list?state=fw_002', cellMinWidth : 95, page : true, height : "full-125", limits : [10,15,20,25], limit : 10, toolbar: "#toolbarDemo", id : "customerServeListTable", cols : [[ {type: "checkbox", fixed:"left", width:50}, {field: "id", title:'编号',fixed:"true", width:80}, {field: 'customer', title: '客户名', minWidth:50, align:"center"}, {field: 'dicValue', title: '服务类型', minWidth:100, align:'center'}, {field: 'overview', title: '概要信息', align:'center'}, {field: 'createPeople', title: '创建人', minWidth:100, align:'center'}, {field: 'assignTime', title: '调配工夫', minWidth:50, align:"center"}, {field: 'assigner', title: '调配人', minWidth:100, align:'center'}, {field: 'createDate', title: '创立工夫', align:'center',minWidth:150}, {field: 'updateDate', title: '更新工夫', align:'center',minWidth:150}, {title: '操作', minWidth:150, templet:'#customerServeListBar',fixed:"right",align:"center"} ]] }); // 多条件搜寻 $(".search_btn").on("click",function(){ table.reload("customerServeListTable",{ page: { curr: 1 //从新从第 1 页开始 }, where: { customer: $("input[name='customer']").val(), //客户名 type: $("#type").val() //服务类型 } }) }); table.on("tool(customerServes)", function(obj){ var layEvent = obj.event; if(layEvent === "assign") { openCustomerAssignDialog(obj.data.id); } }); function openCustomerAssignDialog(id){ var url = ctx+"/customer_serve/addCustomerServeProcePage?id="+id; layui.layer.open({ title : "服务治理-服务解决", type : 2, area:["700px","420px"], maxmin:true, content : url }); }});服务解决表单解决
- customer_serve_proce_add.ftl
views/customerServe 目录下增加customer_serve_proce_add.ftl 解决表单
<!DOCTYPE html><html><head> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" style="width:80%;"> <input name="id" type="hidden" value="${customerServe.id}"/> <input name="state" type="hidden" value="fw_003"/> <input name="man" type="hidden" value="${customerServe.assigner}"/> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">服务类型</label> <div class="layui-input-block"> <select name="serveType" id="serveType" disabled="disabled"> <option value="" >请抉择</option> <option value="6" <#if customerServe.serveType=="6">selected="selected"</#if>>征询</option> <option value="7" <#if customerServe.serveType=="7">selected="selected"</#if> >投诉</option> <option value="8" <#if customerServe.serveType=="8">selected="selected"</#if>>倡议</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">客户</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="customer" id="customer" value="${(customerServe.customer)!}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务内容</label> <div class="layui-input-block"> <textarea name="serviceRequest" class="layui-textarea" readonly="readonly">${(customerServe.serviceRequest)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务概要</label> <div class="layui-input-block"> <textarea name="overview" class="layui-textarea" readonly="readonly">${(customerServe.overview)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">指派人</label> <div class="layui-input-block"> <select name="assigner" id="assigner" disabled="disabled"> <option value="">请抉择</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">指派工夫</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="assignTime" id="assignTime" value="${(customerServe.assignTime?string("yyyy-MM-dd HH:mm:ss"))}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务解决</label> <div class="layui-input-block"> <textarea name="serviceProce" class="layui-textarea" ></textarea> </div> </div> </div> <br/> <div class="layui-form-item layui-row layui-col-xs12"> <div class="layui-input-block"> <button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCustomerServe">确认 </button> <button class="layui-btn layui-btn-lg layui-btn-normal">勾销</button> </div> </div></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.proce.add.js"></script></body></html>- customer.serve.proce.add.js
js/customerServe 目录下增加customer.serve.proce.add.js 文件实现服务解决表单提交。
layui.use(['form', 'layer','jquery_cookie'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery; $ = layui.jquery_cookie($); $.post(ctx+"/user/queryAllCustomerManager",function (res) { for (var i = 0; i < res.length; i++) { if($("input[name='man']").val() == res[i].id ){ $("#assigner").append("<option value=\"" + res[i].id + "\" selected='selected' >" + res[i].name + "</option>"); }else { $("#assigner").append("<option value=\"" + res[i].id + "\">" + res[i].name + "</option>"); } } //从新渲染 layui.form.render("select"); }); form.on("submit(addOrUpdateCustomerServe)", function (data) { var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); data.field.serviceProcePeople=$.cookie("trueName"); //弹出loading $.post(ctx + "/customer_serve/saveOrUpdateCustomerServe", data.field, function (res) { if (res.code == 200) { setTimeout(function () { top.layer.close(index); top.layer.msg("操作胜利！"); layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 500); } else { layer.msg( res.msg, { icon: 5 } ); } }); return false; });});服务反馈
当服务信息处理结束后，下一步执行服务反馈解决，用于对客户服务的满意度进行收集。
<img src="images\image-20200228113501774.png" alt="image-20200228113501774" style="zoom:80%;" />
<img src="images\image-20200228113650078.png" alt="image-20200228113650078" style="zoom:80%;" />
待反馈服务记录列表展现
- customer_serve_feed_back.ftl
views/customerServe 目录下增加customer_serve_feed_back.ftl 文件展现待反馈服务列表。
<!DOCTYPE html><html><head> <title>服务创立</title> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" > <blockquote class="layui-elem-quote quoteBox"> <form class="layui-form"> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="customer" class="layui-input searchVal" placeholder="客户" /> </div> <div class="layui-input-inline"> <select name="type" id="type"> <option value="" >请抉择</option> <option value="6">征询</option> <option value="7" >投诉</option> <option value="8" >倡议</option> </select> </div> <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon"></i> 搜寻</a> </div> </form> </blockquote> <table id="customerServeList" class="layui-table" lay-filter="customerServes"></table> <script type="text/html" id="toolbarDemo"> </script> <script id="customerServeListBar" type="text/html"> <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="back">反馈</a> </script></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.feed.back.js"></script></body></html>- customer.serve.feed.back.js
js/customerServe 目录下增加customer.serve.feed.back.js 初始化待反馈服务表格数据
layui.use(['table','layer',"form"],function(){ var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, table = layui.table; //服务列表展现 table.render({ elem: '#customerServeList', url : ctx+'/customer_serve/list?state=fw_003', cellMinWidth : 95, page : true, height : "full-125", limits : [10,15,20,25], limit : 10, toolbar: "#toolbarDemo", id : "customerServeListTable", cols : [[ {type: "checkbox", fixed:"left", width:50}, {field: "id", title:'编号',fixed:"true", width:80}, {field: 'customer', title: '客户名', minWidth:50, align:"center"}, {field: 'dicValue', title: '服务类型', minWidth:100, align:'center'}, {field: 'overview', title: '概要信息', align:'center'}, {field: 'createPeople', title: '创建人', minWidth:100, align:'center'}, {field: 'assignTime', title: '调配工夫', minWidth:50, align:"center"}, {field: 'assigner', title: '调配人', minWidth:100, align:'center'}, {field: 'serviceProcePeople', title: '解决人', minWidth:50, align:"center"}, {field: 'serviceProceTime', title: '解决人', minWidth:100, align:'center'}, {field: 'createDate', title: '创立工夫', align:'center',minWidth:150}, {field: 'updateDate', title: '更新工夫', align:'center',minWidth:150}, {title: '操作', minWidth:150, templet:'#customerServeListBar',fixed:"right",align:"center"} ]] }); // 多条件搜寻 $(".search_btn").on("click",function(){ table.reload("customerServeListTable",{ page: { curr: 1 //从新从第 1 页开始 }, where: { customer: $("input[name='customer']").val(), //客户名 type: $("#type").val() //服务类型 } }) }); table.on("tool(customerServes)", function(obj){ var layEvent = obj.event; if(layEvent === "back") { openCustomerBackDialog(obj.data.id); } }); function openCustomerBackDialog(id){ var url = ctx+"/customer_serve/addCustomerServeBackPage?id="+id; layui.layer.open({ title : "服务治理-服务反馈", type : 2, area:["700px","420px"], maxmin:true, content : url }); }});服务反馈表单解决
- customer_serve_feed_back_add.ftl
view/customerServe 目录下增加customer_serve_feed_back_add.ftl 反馈表单模板文件
<!DOCTYPE html><html><head> <#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" style="width:80%;"> <input name="id" type="hidden" value="${customerServe.id}"/> <input name="state" type="hidden" value="fw_004"/> <input name="man" type="hidden" value="${customerServe.assigner}"/> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">服务类型</label> <div class="layui-input-block"> <select name="serveType" id="serveType" disabled="disabled"> <option value="" >请抉择</option> <option value="6" <#if customerServe.serveType=="6">selected="selected"</#if>>征询</option> <option value="7" <#if customerServe.serveType=="7">selected="selected"</#if> >投诉</option> <option value="8" <#if customerServe.serveType=="8">selected="selected"</#if>>倡议</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">客户</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="customer" id="customer" value="${(customerServe.customer)!}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务内容</label> <div class="layui-input-block"> <textarea name="serviceRequest" class="layui-textarea" readonly="readonly">${(customerServe.serviceRequest)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <label class="layui-form-label">服务概要</label> <div class="layui-input-block"> <textarea name="overview" class="layui-textarea" readonly="readonly">${(customerServe.overview)!}</textarea> </div> </div> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">指派给</label> <div class="layui-input-block"> <select name="assigner" id="assigner" disabled="disabled"> <option value="">请抉择</option> </select> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">指派工夫</label> <div class="layui-input-block"> <input type="text" class="layui-input" lay-verify="required" name="assignTime" id="assignTime" value="${(customerServe.assignTime?string("yyyy-MM-dd HH:mm:ss"))}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">解决内容</label> <div class="layui-input-block"> <textarea name="serviceProce" class="layui-textarea" readonly="readonly" >${customerServe.serviceProce}</textarea> </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">解决工夫</label> <div class="layui-input-block"> <input type="text" class="layui-input" name="serviceProceTime" id="serviceProceTime" value="${(customerServe.serviceProceTime?string("yyyy-MM-dd HH:mm:ss"))}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item layui-row"> <div class="layui-col-xs6"> <label class="layui-form-label">处理结果</label> <div class="layui-input-block"> <input type="text" class="layui-input" name="serviceProceResult" id="serviceProceResult" > </div> </div> <div class="layui-col-xs6"> <label class="layui-form-label">满意度</label> <div class="layui-input-block"> <select id="myd" name="myd" > <option value="">请抉择</option> <option value="☆">☆</option> <option value="☆☆">☆☆</option> <option value="☆☆☆">☆☆☆</option> <option value="☆☆☆☆">☆☆☆☆</option> <option value="☆☆☆☆☆">☆☆☆☆☆</option> </select> </div> </div> </div> </div> <br/> <div class="layui-form-item layui-row layui-col-xs12"> <div class="layui-input-block"> <button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCustomerServe">确认 </button> <button class="layui-btn layui-btn-lg layui-btn-normal">勾销</button> </div> </div></form><script type="text/javascript" src="${ctx}/static/js/customerServe/customer.serve.feed.back.add.js"></script></body></html>- customer.serve.feed.back.add.js
js/customerServe 目录下增加customer.serve.feed.back.add.js 实现反馈表单数据提交
layui.use(['form', 'layer'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery; $.post(ctx+"/user/queryAllCustomerManager",function (res) { for (var i = 0; i < res.length; i++) { if($("input[name='man']").val() == res[i].id ){ $("#assigner").append("<option value=\"" + res[i].id + "\" selected='selected' >" + res[i].name + "</option>"); }else { $("#assigner").append("<option value=\"" + res[i].id + "\">" + res[i].name + "</option>"); } } //从新渲染 layui.form.render("select"); }); form.on("submit(addOrUpdateCustomerServe)", function (data) { var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); //弹出loading $.post(ctx + "/customer_serve/saveOrUpdateCustomerServe", data.field, function (res) { if (res.code == 200) { setTimeout(function () { top.layer.close(index); top.layer.msg("操作胜利！"); layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 500); } else { layer.msg( res.msg, { icon: 5 } ); } }); return false; });});