jili2/application/admin/view/common/screentemp.html

<style>

</style>
<div id="{$name}">
    <input type="hidden" id="ele-{$name}" name="{$name}" :value="value">
    <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>
                <select class="form-control" v-model="item.mid" @change="changeModule">
                    <option value="0">选择模块</option>
                    <option v-for="(item2,index2) in options" :key="index2" :value="item2.id">{{item2.title}}</option>
                </select>
            </th>
            <th>
                <img v-if="item.img" :src="item.img" style="width: 40px;height: 40px;" onclick="open_img(this)" alt="">
            </th>
        </tr>
        </tbody>
    </table>
    <a href="javascript:;" @click="addBtn" class="btn btn-primary btn-sm">添加行</a>
    <a href="javascript:;" v-if="contents.length > 1" @click="delBtn" class="btn btn-danger btn-sm">删除行</a>
</div>
<script>
    new Vue({
        el: '#{$name}',
        data: function() {
            return {
                options: {:json_encode($options)},
                contents: [],
                value: ''
            }
        },
        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-{$name}').val(this.value);
            }
        },
        created(){
            const vals = "{$val}";
            this.value = vals;
            const valss = vals?JSON.parse(vals):[];
            const cc = [];
            valss.forEach((item) => {
                let img = '';
                this.options.forEach((item2) => {
                    if(item.mid == item2.id){
                        img = item2.img;
                    }
                });
                cc.push({
                    id: item.id,
                    mid: item.mid,
                    img: img,
                })
            });
            if(cc.length == 0){
                cc.push({
                    id: 1,
                    mid: 0,
                    img: '',
                })
            }
            this.contents = cc;
            console.log('11111',this.value,this.options, this.contents);
        },
        methods:{
            addBtn(){
                const newId = this.getMaxId() + 1;
                this.contents.push({
                    id: newId,
                    mid: 0,
                    img: '',
                })
            },

            // 获取当前最大的id值
            getMaxId(){
                let id = 0;
                this.contents.forEach((item) => {
                    if(item.id > id){
                        id = item.id;
                    }
                });
                return id;
            },

            delBtn(){
                console.log('contents',this.contents);
                const maxId = this.getMaxId();
                if(maxId > 1){
                    const cc = this.contents.filter((item) => {
                        return item.id != maxId;
                    });
                    this.contents = cc;
                }
            },

            changeModule(){
                console.log('contents',this.contents);
            },

            formatContent(){
                this.contents.forEach((item) => {
                    const info = item;
                    this.options.forEach((item2) => {
                        if(item2.id == item.mid){
                            info.img = item2.img;
                        }
                    });
                })
            },
        }
    })
</script>