关于java: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;
    });
});

服务治理表结构设计

服务治理模块实现

服务列表展现外围实现

服务记录创立、调配、解决后端外围实现

服务创立前端视图 & 外围代码

服务列表主页面视图 & 外围 js

服务创立视图 & 外围 js

服务调配

待调配服务表格数据展现

服务调配表单解决

服务解决

待处理服务记录列表信息展现

服务解决表单解决

服务反馈

待反馈服务记录列表展现

服务反馈表单解决

站内搜索