Crm-服务管理&统计报表

服务管理表结构设计

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">&#xe615;</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">&#xe608;</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

这里添加服务创建点击事件，修改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">&#xe615;</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">&#xe615;</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;
    });
});

服务反馈

当服务信息处理完毕后，下一步执行服务反馈处理，用于对客户服务的满意度进行收集。

待反馈服务记录列表展示

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">&#xe615;</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;
    });
});

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342