{extend name="common/common2" /}
{block name="main"}
<style>
.select-box{
position: fixed;
z-index: 100;
width: 350px;
top: 0;
right: 0;
background-color: #ffffff;
bottom: 0;
overflow: auto;
}
.select-img{
cursor: pointer;
width: 25px;
height: 25px;
}
.select-title{
padding: 15px;
}
</style>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>{$meta_title}</h5>
<div class="ibox-tools">
<a class="toback" href="{:url('index')}">
返回上一页
</a>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-8">
<form method="post" action="{:url('add')}" class="form-horizontal">
<input type="hidden" name="id" value="{$info['id']|default='0'}">
<div class="form-group">
<label class="col-xs-3 control-label">名称<span class="text-danger">*</span></label>
<div class="col-xs-9">
<input type="text" class="form-control" name="title" value="{$info.title|default=''}">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">图片</label>
<div class="col-xs-9">
{:widget_view('common/upimg',['name'=>'img','multi'=>0,'val'=>isset($info)?$info['img']:''])}
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">备注</label>
<div class="col-xs-9">
<input type="text" class="form-control" name="remark" value="{$info.remark|default=''}">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">大屏类型<span class="text-danger">*</span></label>
<div class="col-xs-9">
<select name="type" id="screentype" class="form-control" onchange="changeType()">
<option value="1">项目大屏</option>
<option value="2">自定义大屏</option>
<option value="3">3D大屏</option>
</select>
</div>
</div>
<div class="form-group" id="screen-url">
<label class="col-xs-3 control-label">大屏链接</label>
<div class="col-xs-9">
<input type="text" class="form-control" name="url" value="{$info.url|default=''}">
</div>
</div>
<div id="vueapp-module">
<div class="form-group">
<label class="col-xs-3 control-label">模板<span class="text-danger">*</span></label>
<div class="col-xs-9">
<input type="hidden" name="tid" id="tid" value="{$info.tid|default='0'}">
<button type="button" class="btn btn-sm btn-primary" @click="selectTemp">选择模板</button>
<div v-if="ttitle">
{{ttitle}}
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">模块绑定</label>
<div class="col-xs-9">
<input type="hidden" id="ele-module" name="content" value="{$info.content|default=''}">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>绑定模块</th>
<th>预览模块</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in contents" :key="index">
<th>{{item.id}}</th>
<th>
<button type="button" class="btn btn-sm btn-primary" @click="selectModule(item)">选择模块</button>
{{item.title}}
</th>
<th>
<img v-if="item.img" :src="item.img" style="width: 40px;height: 40px;" onclick="open_img(this)" alt="">
</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="select-box" v-if="showTemp || showModule">
<div v-if="showTemp">
<div class="select-title">
选择模板
<button type="button" class="btn btn-xs pull-right btn-danger" @click="closeSelect">关闭</button>
</div>
<table class="table table-bordered">
<tr v-for="(item,index) in temps" :key="index">
<td>
<img v-if="tid == item.id" class="select-img" src="/img/dui.png" alt="" @click="sTemp(item)">
<img v-if="tid != item.id" class="select-img" src="/img/undui.png" alt="" @click="sdTemp(item)">
<img onclick="open_img(this)" :src="item.img" style="width: 50px;height: 50px" alt="">
{{item.title}}
</td>
</tr>
</table>
</div>
<div v-if="showModule">
<div class="select-title">
选择模块
<button type="button" class="btn btn-xs pull-right btn-danger" @click="closeSelect">关闭</button>
</div>
<table class="table table-bordered">
<tr v-for="(item,index) in options" :key="index">
<td>
<img v-if="curItem.mid == item.id" class="select-img" src="/img/dui.png" alt="" @click="sModule(item)">
<img v-if="curItem.mid != item.id" class="select-img" src="/img/undui.png" alt="" @click="sdModule(item)">
<img onclick="open_img(this)" :src="item.img" style="width: 50px;height: 50px" alt="">
{{item.title}}
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button class="btn btn-primary ajax-post" target-form="form-horizontal" type="submit">确 定</button>
<a href="{:url('index')}" class="btn btn-default">取 消</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script>
$(document).ready(function(){
formSetValue("tid", {$info.tid|default=0});
formSetValue("type", {$info.type|default=1});
changeType();
});
function changeType() {
var v = $('#screentype').val();
if(v == 1){
$('#vueapp-module').show();
$('#screen-url').hide();
}else{
$('#screen-url').show();
$('#vueapp-module').hide();
}
}
var options = {:json_encode($moduleList)};
var temps = {:json_encode($tempList)};
var tid = {$info.tid|default=0};
var nums = {$nums|default=0};
new Vue({
el: '#vueapp-module',
data: function() {
return {
options: options,
temps: temps,
showTemp: false,
showModule: false,
contents: [],
value: '',
tid: tid,
nums: nums,
ttitle: '',
curItem: null
}
},
computed: {
scontent() {
const vals = JSON.parse(JSON.stringify(this.contents));
return vals;
},
},
watch: {
scontent: function (newVal, oldVal) {
this.formatContent();
const vv = [];
this.contents.forEach((item) => {
vv.push({
id: item.id,
mid: item.mid,
})
});
this.value = vv.length > 0 ? JSON.stringify(vv):'';
$('#ele-module').val(this.value);
},
tid: function (newVal, oldVal) {
$('#tid').val(this.tid);
}
},
created(){
{if condition="!empty($info)"}
const vals = '{:json_encode($info["content2"])}';
{else /}
const vals = '';
{/if}
console.log(vals);
this.value = vals;
const valss = vals?JSON.parse(vals):[];
console.log(valss);
const cc = [];
valss.forEach((item) => {
let img = '';
let tti = '';
this.options.forEach((item2) => {
if(item.mid == item2.id){
img = item2.img;
tti = item2.title;
}
});
cc.push({
id: item.id,
mid: item.mid,
img: img,
title: tti,
})
});
if(this.tid > 0){
this.temps.forEach((item) => {
if(item.id == this.tid){
this.nums = item.nums;
this.ttitle = item.title;
}
});
}
if(cc.length == 0 && this.nums > 0){
let i = 1;
this.contents = [];
while (this.nums > i){
this.contents.push({
id: i,
mid: 0,
img: '',
title: '',
});
i++;
}
}
if(cc.length > 0){
this.contents = cc;
}
console.log('11111',this.value,this.options, this.contents);
},
methods:{
changeTemp(){
this.contents = [];
if(this.tid > 0){
this.temps.forEach((item) => {
if(item.id == this.tid){
this.nums = item.nums;
}
});
if(this.nums > 0){
let i = 1;
while (this.nums >= i){
this.contents.push({
id: i,
mid: 0,
img: '',
title: '',
});
i++;
}
}
}
console.log('contents',this.contents);
},
selectTemp(){
this.showTemp = true;
this.showModule = false;
},
selectModule(obj){
this.showTemp = false;
this.showModule = true;
this.curItem = obj;
},
closeSelect(){
this.showTemp = false;
this.showModule = false;
},
sdTemp(obj) {
this.tid = obj.id;
this.ttitle = obj.title;
this.changeTemp();
this.closeSelect();
},
sTemp(obj) {
this.tid = 0;
this.ttitle = '';
this.changeTemp();
this.closeSelect();
},
sdModule(obj) {
this.curItem.mid = obj.id;
this.curItem.title = obj.title;
this.curItem.img = obj.img;
this.changeModule();
this.closeSelect();
},
sModule(obj) {
this.curItem.mid = 0;
this.curItem.title = '';
this.curItem.img = '';
this.changeModule();
this.closeSelect();
},
changeModule(){
this.contents.forEach((item) => {
const info = item;
if(item.id == this.curItem.id){
info.title = this.curItem.title;
info.img = this.curItem.img;
info.mid = this.curItem.mid;
}
})
},
formatContent(){
this.contents.forEach((item) => {
const info = item;
this.options.forEach((item2) => {
if(item2.id == item.mid){
info.img = item2.img;
info.title = item2.title;
}
});
})
},
}
})
</script>
{/block}