jili2/application/admin/view/quality_form/selectforms.html

{extend name="common/common2" /}
{block name="main"}

<style>
    .disableFirstLevel .el-cascader-panel .el-scrollbar:first-child.el-checkbox {
        display: none;
    }

</style>
<div class="row" id="vue-plan">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">检查项<span class="text-danger">*</span></label>
                        <div class="col-sm-6">

                                <el-cascader
                                        v-model="value"
                                        :options="options"
                                        :props="{ multiple: true }"
                                        clearable
                                        filterable
                                        size='small'
                                        collapse-tags
                                        @change="changeLabel"
                                        popper-class="disableFirstLevel"
                                >
                                </el-cascader>

                        </div>
                    </div>

                    <input type="hidden" id="list">
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button class="btn btn-primary" id="bbb" onclick="saveSelect()"  target-form="form-horizontal" type="button">确 定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var idx = {$idx};
    var lists = [];
    var ids = localStorage.getItem("selectids")?JSON.parse(localStorage.getItem("selectids")):[];


    var vm = new Vue({
        el: '#vue-plan',
        data: function() {
            return {
                props: { multiple: true },
                options:{:json_encode($quality_cate)},
                value:[],
                shareScopeEnd: [],
        }
        },
        watch: {
            value(val){


            }
        },
        methods: {
            changeLabel(val) {
                // 是否与上次的类型相同
                let changeFlag = false
                let nowItem =[]
                let firstItem =[]
                if (this.shareScopeEnd.length == 0) {
                    this.value = val
                } else {
                    // 与原数组比对
                    this.value.forEach((item) => {
                        if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
                        changeFlag = true
                        firstItem.push(item)
                    }
                })
                }
                if (changeFlag  && firstItem.length) {
                    this.value=firstItem
                }
                this.shareScopeEnd = this.value
                var ll = [];
                this.shareScopeEnd.forEach((item) => {
                    ll.push(item[2])

            })
                $("#list").val(ll.join(','));
            },

        }
    })

    function saveSelect() {
        var ll = $("#list").val();
        if(!ll){
           alert('未选择检查项')
            return false;
        }
        $.post('{:url("QualityForm/getCate")}',{id:ll},function (res) {
            ll = res.data;
            parent.layer.closeAll();
            parent.vm.selectForm(idx,ll);
        },'json')


    }

</script>
{/block}