jili2/application/admin/view/quality_group/add.html

{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content" id="vuequality">
                <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-sm-2 control-label">名称<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="title" value="{$info.title|default=''}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">检查项<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
<!--                            {:widget_view('common/multiselect',['name'=>'forms','lists' => $patrol_form, 'val' => isset($info)?$info['forms']:[]])}-->

                            <input type="hidden" id="ele-forms" name="forms">
                            <el-select
                                    v-model="forms"
                                    multiple
                                    collapse-tags
                                    filterable
                                    size="small"
                                    style="width:100%"
                                    placeholder="请选择"
                                    @change="selectForms"
                            >
                                <el-option
                                        v-for="item in pforms"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id.toString()">
                                </el-option>
                            </el-select>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">关联业务</label>
                        <div class="col-sm-6">
                            <input type="hidden" id="ele-type" name="type">
                            <select v-model="type" class="form-control" @change="changeType">
                                <option :value="0">不关联业务</option>
                                <option :value="1">巡更</option>
                                <option :value="2">巡视</option>
                                <option :value="3">巡查</option>
                                <option :value="4">巡检</option>
                                <option :value="5">日常工作</option>
                                <option :value="6">设备台账</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">关联项</label>
                        <div class="col-sm-6">
                            <input type="hidden" id="ele-busids" name="busids">
                            <el-select
                                    v-model="busids"
                                    multiple
                                    collapse-tags
                                    filterable
                                    size="small"
                                    style="width:100%"
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in blists"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id.toString()">
                                </el-option>
                            </el-select>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-6">
                            <textarea name="remark" class="form-control" rows="3">{$info.remark|default=''}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-6">
                            <label class="cr-inline">
                                <input type="radio" value="1" name="enable">正常&nbsp;&nbsp;
                            </label>
                            <label class="cr-inline">
                                <input type="radio" value="0" name="enable">禁用
                            </label>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" data-layer="1" target-form="form-horizontal" type="submit">确 定</button>
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var glarr = {:json_encode($glarr)};
    var pform = {:json_encode($patrol_form)};
    {notempty name="info"}
    var info = {:json_encode($info)};
    {else /}
    var info = null;
    {/notempty}

    $(document).ready(function(){
        formSetValue("enable", {$info.enable|default=1});
        // formSetValue("type", {$info.type|default=0});
    });

    new Vue({
        el: '#vuequality',
        data: function () {
            return {
                info: info,
                initarr: glarr,
                type: 0,
                forms: [],
                busids: [],
                pforms: pform,
                blists:[]
            }
        },
        watch: {
            forms: function (newVal, oldVal) {
                $('#ele-forms').val(newVal.join(','));
            },
            busids: function (newVal, oldVal) {
                $('#ele-busids').val(newVal.join(','));
            },
            type: function (newVal, oldVal) {
                $('#ele-type').val(newVal);
            }
        },
        created: function () {
            if(this.info){
                this.type = this.info.type;
                this.changeType();
                this.forms = this.info.forms?this.info.forms.split(','):[];
                this.busids = this.info.busids?this.info.busids.split(','):[];
            }
        },
        methods: {
            selectForms(){
                console.log('forms',this.forms);
            },
            changeType(){
                this.blists = [];
                this.busids = [];
                let arr = [];
                this.initarr.forEach((item) => {
                    if((item.id) == Number(this.type)){
                        arr = item.lists;
                    }
                });
                console.log(this.initarr,arr,this.type);
                this.$nextTick(() => {
                    this.blists = JSON.parse(JSON.stringify(arr));
                })
            },
        }
    });

</script>
{/block}