html:
点击按钮显示弹窗:
<script type="text/html" id="openProductCount">
<a href="javascript:;" class="layui-table-link" style="display: inline-block; width: 100%;" onclick="openProductCount('{{d.companyId}}')">{{d.openProductCount}}</a>
</script>
弹窗模板:
<div id="openProductBox" style="display: none; padding: 10px;">
<div style="margin-bottom: 10px;">
<span>产品名称:</span>
<div class="layui-inline">
<input type="text" autocomplete="off" placeholder="产品名称" class="layui-input" style="height:32px;" v-model="open.productName"
@keyup.enter="openQuery">
</div>
<button class="layui-btn layui-btn-sm" @click="openQuery"><i class="layui-icon layui-icon-search"></i> 查询</a>
</div>
<table id="openProductTable" lay-filter="openProductTable"></table>
</div>
js:
var table2;
function openProductCount(companyId) {
fkCompanyId = companyId;
layui.use(['table', 'form'], function() {
table2 = layui.table;
var form = layui.form;
layer.open({
type: 1,
title: '开通产品数量',
area: ['700px', '600px'], //宽高
content: $('#openProductBox'),
end: function() {
vm.query.productName = '';
},
success: function() {
table2.render({
elem: '#openProductTable',
id: 'openProductTable',
height: 480,
method: 'get', //接口http请求类型,默认:get
url: baseURL + 'unCompanyAccountInfo/queryCompanyProductMergerList', //?page=1&limit=10(该参数可通过 request 自定义)
where: {
fkCompanyId: companyId,
}, //接口的其它参数
request: {
pageName: 'page', //页码的参数名称,默认:page
limitName: 'rows', //每页数据量的参数名,默认:limit
},
response: {
statusName: 'code', //规定数据状态的字段名称,默认:code
statusCode: 200, //规定成功的状态码,默认:0
msgName: 'msg', //规定状态信息的字段名称,默认:msg
countName: 'count', //规定数据总数的字段名称,默认:count
dataName: 'resultList', //规定数据列表的字段名称,默认:data
},
page: true, //是否分页
limit: 10, //每页显示的条数
limits: [10, 20, 30], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
cols: [
[{
field: 'productName', //字段名
title: '产品名称', //标题
//width: 200,
sort: true //是否允许排序 默认:false
//fixed: 'left' //固定列
}, {
field: 'totalNumber', //字段名
title: '总次数', //标题
width: 100,
sort: true //是否允许排序 默认:false
//fixed: 'left' //固定列
}, {
field: 'lastNumber', //字段名
title: '剩余次数', //标题
width: 100,
templet: '#lastNumber',
sort: true //是否允许排序 默认:false
//fixed: 'left' //固定列
}, {
field: 'channelName', //字段名
title: '当前渠道', //标题
width: 165,
sort: true //是否允许排序 默认:false
//fixed: 'left' //固定列
}, {
field: 'fkCompanyId', //字段名
title: '状态', //标题
width: 100,
templet: function(d) {
if (d.fkCompanyId == null) {
return '<span class="layui-badge" style="cursor: pointer;" onclick="activeState(\'' + d.productId +
'\')">未激活</span>'
} else {
return '<span class="layui-badge layui-bg-green" style="cursor: pointer;">已激活</span>'
}
},
sort: true //是否允许排序 默认:false
//fixed: 'left' //固定列
}]
]
});
}
});
});
}