crm/app/sys/view/talkskill/group_talkskill_label.html

{extend name="public/layout" /} {block name="title"}分类管理{/block} {block name="body"}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
		height: auto;
	}

    .layui-form-label{
        width: auto;
    }


    #data_statistics{
    	/*background: red;*/
    	width: 100%;
    	height: 300px;
    	float: left;
    }
    .tab_1{
    	width: 10%;
    }
    #echartbox_a{
    	display: block;
    	width: 40%;
    	height: 300px;
    	/*background: red;*/
    	float: left;
    }

    #data_statistics_b{
    	/*background: blue;*/
    	width: 48%;
    	height: 300px;
    	float: left;
    }
    .all{
    	width: 100%;
    	background: red;

    }

    #echartbox_b{
    	display: block;
    	width: 80%;
    	height: 400px;
    	margin:0 auto;
    }
    #data_statistics_c{
    	width: 80%;
    	margin:0 auto;
    	overflow: hidden;
    }

    #echartbox_c{
    	display: block;
    	width: 80%;
    	height: 400px;
    	margin:0 auto;
    }
    #data_statistics_d{
    	width: 80%;
    	margin:0 auto;
    	overflow: hidden;
    }

    #echartbox_d{
    	display: block;
    	width: 80%;
    	height: 400px;
    	margin:0 auto;
    }
    #data_statistics_e{
    	width: 80%;
    	margin:0 auto;
    	overflow: hidden;
    }

    .layui_fluid1{display: none;}
    .layui-nav-tabs-ul{margin-bottom: 10px;}
    .layui-nav-tab_li{float:left;padding: 0px 20px;text-align: center;cursor: pointer;line-height: 38px;height: 38px;}
    .add-layui-nav-li{background-color: #249efb;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border-radius: 2px;
}
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 2px solid #249efb !important;}



	/*//*/
    .layui_fluid1{display: none;}
    
    .layui-nav-tabs-ul{margin-bottom: 10px;padding-bottom:0;border-bottom: 1px solid #e6e6e6;overflow: hidden;}
    .layui-nav-tab_li{float:left;padding: 0px 20px;text-align: center;cursor: pointer;line-height: 38px;height: 38px;position: relative;}
    .add-layui-nav-li{color: #f3f3f3;;white-space: nowrap;text-align: center;font-size: 14px;border-radius: 2px;}
    .layui-bor-b{position: absolute;bottom:0;width:65px;left:50%;transform: translateX(-50%);height: 1px;background: #249efb;}
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 2px solid #249efb !important;}
    .layui-bor-b{display: none;}
    .add-layui-nav-li .layui-bor-b{display: block !important;}
    .layui-title-b{font-size: 20px;font-weight: bold;}
    .layui-li-box{padding-bottom: 30px;border-bottom: 1px solid #e6e6e6;}
    .woverflow{overflow: hidden;}
    .layui-bolu{color:#249efb}
    .layui-data-ul{width:100%;}
    .layui-data-ul li{float:left;width:33.33%;line-height: 40px;}
    .mdt70{margin-top:30px;}
    .width33_33{width:33.33%;}
    .wleft{float:left;}
    .mdt40{margin-top:40px;}
    .width80_{width:80%;}
    .wauto{margin:0 auto;}
    .layui-data-ul-b{height: 126px;overflow-y: auto;}
    .layui-data-ul-b li{float:left;width:33.33%;line-height: 30px;}
    .layui_box_con{display: none;height: 100%;}
	.layadmin-iframe-if{width:100%;height: 100%;position: absolute;top:56px;left:0;}
	.layui-p-bt{font-weight:bold;}
	.layui_bm{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:70%;}
	 .layui-data-ul-b li span{display: block;float:left;}



	 /*热词搜索*/
/*	.layui-form-item .layui-inline {
		display: block;
		float: left;
		width: 145px;
		height: 38px;
		line-height: 38px;
		background: #FFFFFF;
		margin-right: 16px;
	}
	
	.layui-form-item .layui-input-inline {
		width: 145px;
		height: 38px;
		line-height: 38px;
		margin-bottom: 0;
	}*/
	
/*	.layui-form-item .layui-input-inline .layui-input {
		border: 1px solid #9DB6CF;
		border-radius: 5px;
	}*/
	
	.layui-form-select dl dd.layui-this {
		background-color: #249EFB;
	}
	
	.layui-form-item div.searchBox {
		width: 320px;
		background: #FFFFFF;
		border: 1px solid #B6CADE;
		/* border-radius: 24px; */
		height: 38px;
		overflow: hidden;
		padding-left: 10px;
		position: relative;
		margin-bottom: 0px;
		/* float: right; */
	}
	
	.searchBox .inputBox {
		width: 240px;
		/* float: left; */
		height: 36px;
		line-height: 36px;
		border-width: 0;
	}
	
/*	.searchBtn {
		position: absolute;
		top: 0;
		right: 0;
		width: 51px;
		height: 38px;
		background-color: #fff;
	}*/
	
	.searchBtn img {
		position: absolute;
		width: 26px;
		top: 6px;
		left: 0;
	}
	
	.layui-btn.layui-btn-success {
		background-color: #009688;
	}
	
	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}
	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}
	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}
	.layui-bor-b {
		height: 3px;
		background-color: #249EFB;
	}
	.add-layui-nav-li {
        background-color: #249EFB !important;
        color: #fff;
    }
    .layui-tab-title .layui-this:after {
        border-bottom: none;
        border: none;
    }
    .layui-nav-tab_li {
        background-color: #F2F2F2;
        margin: 0px 5px;
    }
	.layui-btn-xs,.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}
    .layui-btn-danger,.layui-btn-danger:hover{
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}
	#data_statistics_b{
		border: 1px solid #E4E4E4;
		box-sizing: border-box;
		padding: 20px;
	}
	#data_statistics_c,#data_statistics_d,#data_statistics_e {
		border: 1px solid #E4E4E4;
		padding: 15px;
	}
	.mt15 {
		margin-top: 15px;
	}
	.goback {
		float: left;
		margin-right: 20px;
	}
	.goback a {
		color: #269efb;
	}
	.goback i {
		position: relative !important;
	}
</style>

<body>
<div class="layui-fluid">
	<div class="">
		<div class="layui_fluid1"  style="display: block;">
			<div class="layui-card">
				<div class="layui-form layui-card-header layuiadmin-card-header-auto">
	                <div class="layui-form-item">
	                    <div style="float:right;">
	                    	<div class="layui-inline">
		                        <label class="layui-form-label">关键词</label>
		                        <div class="layui-input-inline">
		                            <input type="text" id="keyword" name="keyword" placeholder="请输入话术关键词" autocomplete="off" class="layui-input keyword">
		                        </div>
		                    </div>
		                    <div class="layui-inline">
		                        <label class="layui-form-label">场景</label>
		                        <div class="layui-input-inline">
					                <select name="type" lay-filter="type" id="type">
					                    <option value="">请选择场景</option>
					                    {volist name="type" id="t"}
					                    <option value="{$t.id}">{$t.label_name}</option>
					                    {/volist}
					                </select>
		                        </div>
		                    </div>
		                    <div class="layui-inline">
		                        <button class="layui-btn layuiadmin-btn-useradmin searchBtn" lay-submit lay-filter="search">
		                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
		                        </button>
		                    </div>
	                    </div>
	                    <div class="layui-inline" style="float: left;">
							{eq name="$from" value="add"}
		                    <!-- <button class="layui-btn layuiadmin-btn layui-btn-primary" id="cate_add">添加场景</button> -->
		                    <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="add">添加话术</button>
							<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="dictionary" id="dictionary">字典管理</button>
		                    <!-- <button class="layui-btn layuiadmin-btn layui-btn-primary" id="importcustomer">导入话术</button> -->
							{else/}
							<div class="goback">
								<a href="{:url('talkskill/groupCompanyTalkskill')}"><i class="layui-icon layui-icon-return"></i>
									<span>返回</span>
								</a>
							</div>
							{/eq}
		                </div>
	                </div>
				</div>
				<div class="layui-card-body">
					<table id="label-table" lay-filter="label-table"></table>
				</div>
			</div>
		</div>

	</div>
</div>	
	
	
</body>
{/block} {block name="js"}
<script type="text/html" id="table-evidence-action">
	<a class="layui-btn layui-btn-xs" lay-event="share">
		{eq name="$from" value="add"}
		指派
		{else/}
		共享
		{/eq}
	</a>
	{eq name="$from" value="add"}
	{{# if(d.show == 0){ }}
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
	{{# }else{ }}
		<a class="layui-btn layui-btn-xs layui-btn-disabled" style="border: 1px solid #ccc;color: #ccc;">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled" style="border: 1px solid #ccc;color: #ccc;">删除</a>
	{{# } }}
	{/eq}
</script>
<script type="text/html" id="label_name">
	<a href="{:url('talkskill/groupTalkskillList')}?type={{d.id}}&from={$from}&root_id={$root_id}" lay-event="talkill_list" style="color: #0066CC">{{d.label_name}}</a>
</script>
<script type="text/html" id="shareCompany">
	<a href="javascript:void(0)" lay-event="assign_list" style="color: #0066CC"><i class="layui-icon">&#xe633;</i>{{d.shareCompany}}</a>
</script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'element'], function() {
		var $ = layui.$,
			form = layui.form,
			element = layui.element,
			table = layui.table;

		//添加分类
		$('#cate_add').click(function() {
			layer.prompt({
				title: ['添加', 'color:#333333;background-color:#D8E6F1;'],
				value: ''
			}, function(value, index) {
				if($.trim(value) == '') {
					layer.msg('请填写名称', {anim: 6,time: 800});
					return false;
				}
				if($.trim(value).length > 20) {
					layer.msg('场景名称超长', {anim: 6,time: 800});
					return false;
				}
				$.ajax({
					url: '{:url("talkskill/cate_talkskill_add")}',
					type: 'post',
					data: {
						name: $.trim(value)
					},
					dataType: 'json',
					success: function(res) {
						if(res.code === 0) {
							layer.msg(res.msg, {anim: 0,time: 800});
							//执行重载
							table.reload('label-table');
						} else {
							layer.msg(res.msg, {anim: 6,time: 800});
						}
					}
				});
				layer.close(index);
			});
		});
		//字典管理
		$('#dictionary').on('click',function(){
			layer.open({
				type: 2,
				title:['字典管理', 'color:#333333;background-color:#D8E6F1;'],
				content: '{:url("talkskill/dictionary")}',
				resize: false,
				area: ['80%', '80%'],
				// btn: ['确定', '取消'],
				yes: function(index, layero) {
					
				}
			});
		})
		
		
		
		
		
		$('#importcustomer').on('click', function () {
			layer.open({
				type:2,
				title:['批量导入话术', 'color:#333333;background-color:#D8E6F1;'],
				content:'{:url("talkskill/importing")}',
				resize: false,
				area:['80%', '80%'],
			});
		});
		
		var field = {};
		form.on('submit(search)', function (data) {
	        var type = $('#type').val();
	        var keyword = $('#keyword').val();
	        field['type'] = type;
	        field['keyword'] = keyword;
	        //执行重载
	        table.reload('label-table', {
	            where: field
				,page: {curr:1}
	        });
	    });

	    var active = {
			add: function() {
				layer.open({
					type: 2,
					title:['话术添加', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("talkskill/talkskilladd")}',
					resize: false,
					area: ['80%', '80%'],
					btn: ['确定', '取消'],
					yes: function(index, layero) {
						//点击确认触发 iframe 内容中的按钮提交
						var submit = layero.find('iframe').contents().find("#talkskill-submit");
						submit.click();
					}
				});
			}
		};

		//列表
		table.render({
			elem: '#label-table',
			autoSort: false,
			url: '{:url("talkskill/groupTalkskillLabel")}?root_id={$root_id}',
			cols: [
				[{
					type: 'numbers',
					field: 'id',
					width: 80,
					title: '序号',
				}, {
					align: 'center',
					title: '场景',
					templet: '#label_name'
				}, {
					field: 'talkill_count',
					align: 'center',
					title: '话术条数'
				}, {
					field: 'update_time',
					align: 'center',
					title: '更新时间'
				}, {
					align: 'center',
					title: '使用店面',
					templet: '#shareCompany'
				}, {
					title: '操作',
					width: 240,
					align: 'center',
					toolbar: '#table-evidence-action'
				}]
			],
			page: true,
			limit: 30,
			height: 'full-220',
			text: '对不起，加载出现异常！'
		});
		//监听列表
		table.on('tool(label-table)', function(obj) {

			var data = obj.data;
			if(obj.event === 'delete') {
				layer.confirm('确定要删除该场景么？',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function() {
					$.get("{:url('talkskill/cate_del')}?type=0&id=" + data.id, function(res) {
						if(res.code === 0) {
							layer.msg(res.msg, {
								anim: 0,time:800
							}, function() {
								table.reload('label-table');
							});
						} else {
							layer.msg(res.msg, {
								anim: 6,time:800
							});
						}
					});
				});
			} else if(obj.event === 'edit') {
				layer.prompt({
					title:['编辑', 'color:#333333;background-color:#D8E6F1;'],
					value: data.label_name
				}, function(value, index) {
					if($.trim(value) == data.label_name || $.trim(value) == '') {
						layer.msg('请修改名称', {anim: 6,time: 800});
						return false;
					}
					if($.trim(value).length > 20) {
						layer.msg('场景名称超长', {anim: 6,time: 800});
						return false;
					}
					$.ajax({
						url: '{:url("talkskill/dictionary_ajax_edit")}',
						type: 'post',
						data: {
							id: data.id,
							name: $.trim(value),
							type:0
						},
						dataType: 'json',
						success: function(res) {
							if(res.code === 0) {
								layer.msg(res.msg, {anim: 0,time: 800});
								//执行重载
								table.reload('label-table');
							} else {
								layer.msg(res.msg, {anim: 6,time: 800});
							}
						}
					});
					layer.close(index);
				});
			} else if(obj.event === 'share') {
				layer.open({
					type: 2,
					title:['指派店面','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("talkskill/groupAssign")}?from={$from}&id=' + obj.data.id + '&root_id={$root_id}',
					resize: false,
					area: ['50%', '72%'],
				});
			} else if(obj.event === 'assign_list') {
				layer.open({
					type: 2,
					title:['店面名称','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("talkskill/groupShareCompany")}?id=' + obj.data.id + '&from={$from}',
					resize: false,
					area: ['50%', '72%'],
				});
			}
		});
		
		$('.layui-btn.layuiadmin-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});



	});

</script>
{/block}