vue的模糊查询和下拉菜单修改信息------------学习记录

Posted 2021-12-28 king-jin

html代码
<div id="box">
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">选择信息</h3>
            </div>
                <div class="modal-body">
                    <select v-model="clselected"
                            onselect="clselected" id="cn">   //:value可以设置上value 一定要写： onselect可以将选择的value获取 绑定一个v-model通过watch监视值得改变
                        <option value="">请选择科室</option>
                        <option v-for="clinic in clinics" :value="clinic.clId">
                            clinic.clName
                        </option>
                    </select>
                        <select v-if="doname" v-model="doselected" onselect="doselected" id="dn">
                            <option value="">请选医生</option>
                            <option v-for="doctor in doctors" :value="doctor.doId">
                                doctor.doName
                            </option>
                        </select>
    <div class="modal-footer">
        <button class="btn" type="button" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn btn-primary" type="button" @click="saved" >确定</button>
    </div>
                </div>
        </div>
    <input type="text" v-model="input_value"/> //模糊查询 绑定属性通过watch来监视input里得值变化
    <table class="table table-striped">
        <thead>
        <th>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>医生姓名</td>
                <td>科室</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
        </th>
        </thead>
        <tbody>
        <tr v-show="you" v-for="guahao in entities">
            <td>guahao.id</td>
            <td>guahao.guaName</td>
            <td>guahao.guaAge</td>
            <td>guahao.guaSex</td>
            <td>guahao.doctorEntity.doName</td>
            <td>guahao.clinicEntity.clName</td>
            <td>guahao.guaTime</td>
            <td>
                <button class="btn btn-primary btn-sm" @click="modify(guahao)"  //返回当前的guahao数据
                        data-toggle="modal" data-target="#myModal">修改
                </button>
            </td>
        </tr>
        <td v-show="!you">无信息</td>
        </tbody>
    </table>

</div>
JS代码：

<script>

var vm = new Vue(
    el: "#box",
    data: 
        guahao:"",
        clinics: [],
        doctors: [],
        clselected: "",
        doselected:"",
        you: false,
        doname: false,
        input_value: "",
        entities: [
            id: "",
            guaName: "",
            guaAge: "",
            guaSex: "",
            doctorEntity: [doName: ""],
            clinicEntity: [clName: ""],
            guaTime: ""
        ]
    ,
    watch: 
        input_value: function (data) 
            if(typeof data===‘string‘)
                if(data.trim().length!==0)
                    this.search(data)
                
        ,
        clselected: function (data) 
            this.change(data)
        
    ,
    methods: 
        search: function (resdata) 
            var that = this;  //作用域不同要写that
            var guaName = resdata;
            $.ajax(
                url: "findbyname.action",
                data: name: guaName,
                dataType: "json",
                type: "post",
                success: function (res) 
                    console.log(res.guahaodanEntities);
                    if (res.guahaodanEntities.length == 0) 
                        that.$data.you = false;
                     else 
                        that.$data.you = true;
                        that.$data.entities = res.guahaodanEntities;
                    
                ,
                error: function () 
                    alert("zzzz")
                
            )
        ,
        modify: function (guahao) 
            console.log(guahao);
            var that = this;
            this.guahao = guahao;
            $.ajax(
                url: "findclinic.action",
                data: ,
                dataType: ‘json‘,
                error: function (e) 
                    alert("1111")
                    console.log(e)
                ,
                success: function (data) 
                    console.log(data);
                    data = data.clinicEntities;
                    that.$data.clinics = data;

                ,
                type: ‘POST‘
            );
        ,
        change: function (selected) 
            console.log(selected);
            this.$data.doname = true;
            var that = this;
            $.ajax(
                url: "modfd.action",
                data: "findclinicID": selected,
                dataType: ‘json‘,
                error: function (e) 
                    alert("1111")
                    console.log(e)
                ,
                success: function (data) 
                    console.log(data);
                    data = data.doctorEntities;
                    that.$data.doctors = data;
                ,
                type: ‘POST‘
            );
        ,
        saved:function () 
            var that = this;
            console.log(this.clselected);
            console.log(this.doselected);
            $.ajax(
                url: "modghd2.action",
                data: 
                    "guahaodanEntity.id":that.$data.guahao.id,
                    "clinicEntity.clId":that.$data.clselected,
                    "doctorEntity.doId":that.$data.doselected
                ,
                dataType: ‘json‘,
                error: function (e) 
                    alert("1111");
                    console.log(e)
                ,
                success: function (data) 
                    console.log(data)
                    that.guahao.doctorEntity.doName=data.doctorEntity.doName;
                    that.guahao.clinicEntity.clName=data.clinicEntity.clName;

                ,
                type: ‘POST‘
            );
        
    
)

</script>