Vue.js-111_js111. net-CSDN博客

本文链接：https://blog.csdn.net/moshenkk/article/details/107219601
@{
    ViewBag.Title = "course";
    Layout = "~/Views/Shared/BackManagement.cshtml";
}
<script src="~/Scripts/vue2.6.11.js"></script>

<div class="col-xs-12" style="font-weight: 700; font-size: 20px;padding-left:30px;">教师打分</div>

<div class="col-xs-12" id="list1">
    <div class="col-xs-12" style="padding-top:15px;">
        <div class="col-md-1  col-xs-5" style="font-size: 16px; margin-left: 0.5%; text-align: center">
                班级:
            </div>
            <div class="col-md-2  col-xs-5" style="font-size: 16px;">
                 <select id="Class" class="form-control" v-model="Seachtext">
                        <option  v-for="(class2,index) in class1">{{class2.className}}</option>
                    </select>
            </div>
            <div class="col-md-1  col-xs-5" style="font-size: 16px; text-align: center">
                课程:
            </div>
            <div class="col-md-2  col-xs-5" style="font-size: 16px;">
                <select id="Class" class="form-control" v-model="Seachtext2">
                        <option  v-for="(course2,index) in course1">{{course2.courseName}}</option>
                    </select>
            </div>
            <div class="col-md-2  col-xs-2">
                <button id="Search" v-on:click="ListLoad" class="btn btn-info" style="background-color: #62a6e9">查询</button>
                <button id="Save" class="btn btn-info" style="background-color: #62a6e9" v-on:click="zc">暂存</button>
                <button id="Saveok" class="btn btn-info" style="background-color: #62a6e9" v-on:click="Submit">提交</button>
@*                <button id="BatchAdd" data-bind="click: BatchAdd" class="btn btn-info" style="background-color: #62a6e9">成绩导入</button>*@
            </div>
    </div>
    <div class="col-xs-12" style="padding-top:15px;">
    <table class="table table-bordered" style="padding-top:15px;" >
        <thead>
            <tr>
                <th style="text-align: center; width: 10%">序号</th>
                <th style="text-align: center; width: 10%">姓名</th>
                <th style="text-align: center; width: 10%">班级</th>
                <th style="text-align: center; width: 10%">课程</th>
                <th style="text-align: center; width: 10%">身份证号</th>
                <th style="text-align: center; width: 10%">平时成绩（30%）</th>
                <th style="text-align: center; width: 10%">期中成绩（30%）</th>
                <th style="text-align: center; width: 10%">期末成绩（40%）</th>
                <th style="text-align: center; width: 10%">缺勤课时数（本学期总课时数：80）</th>
                <th style="text-align: center; width: 10%">总评</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in items":key="item.SCID" v-bind:class='{active:index==IsActive}' style="cursor: pointer" v-on:click="activeFun(index,item.SCID)">
                <td style="text-align: center; width: 10%">{{index+1}}</td>
                <td style="text-align: center; width: 10%" >{{item.UserName}}</td>
                <td style="text-align: center; width: 10%" >{{item.ClassName}}</td>
                <td style="text-align: center; width: 10%" >{{item.CourseName}}</td>
                <td style="text-align: center; width: 10%" >{{item.CardID}}</td>
                <td style="text-align: center; width: 10%" >
                    <div v-if="item.state=='暂存'" >
                        <input type="number" oninput="if(value>100)value=100;if(value<0)value=0" style="width:50%;text-align:center;" v-model="item.peacetime"  />
                    </div>
                    <div v-else >
                        {{item.peacetime}}
                    </div>
                </td>
                <td style="text-align: center; width: 10%" >
                    <div v-if="item.state=='暂存'" >
                        <input type="number" oninput="if(value>100)value=100;if(value<0)value=0" style="width:50%;text-align:center;" max="100" v-model="item.Interim" />
                    </div>
                    <div v-else >
                        {{item.Interim}}
                    </div>
                </td>
                <td style="text-align: center; width: 10%" >
                    <div v-if="item.state=='暂存'" >
                        <input type="text" oninput="if(value>100)value=100;if(value<0)value=0" style="width:50%;text-align:center;" maxlength="100" v-model="item.End" />
                    </div>
                    <div v-else >
                        {{item.End}}
                    </div>
                </td>
                <td style="text-align: center; width: 10%" >{{item.total}}</td>
                <td style="text-align: center; width: 10%" >{{item.peacetime*0.3+item.Interim*0.3+item.End*0.4}}</td>
            </tr>
        </tbody>
    </table>

    </div>
</div>

<script>
    var message = {
        items: [],
        IsActive: "",
        Seachtext: "",
        SCIDs: "",
        Seachtext2: "",
        class1: [],
        course1:[]
    }
    var list = new Vue({
        el: "#list1",
        data: message,
        created: function () {
            this.ListLoad();
            this.ccc();
            this.vvv();
        },
        methods: {
            ListLoad: function () {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("SC_list")',
                    data: {
                        Seachtext: message.Seachtext, Seachtext2: message.Seachtext2, TeacherID: sessionStorage.getItem("TeachID")
                    },
                    dataType: 'json',
                    success: function (datas) {
                        message.items = datas;
                    }
                })
            },
            Submit: function () {
                var number = JSON.stringify(message.items);
                var _list = {};
                $.ajax({
                    type: 'get',
                    url: '@Url.Action("Submit")',
                    data: {
                        list: number
                    },
                    success: function () {
                        list.ListLoad();
                    }
                })
            },
            ccc: function () {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("ccc")',
                    data: {
                       TeacherID: sessionStorage.getItem("TeachID")
                    },
                    dataType: 'json',
                    success: function (datas) {
                        message.Seachtext = datas[0].className;
                        message.class1 = datas;
                        list.ListLoad();
                    }
                })
            },
            vvv: function () {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("vvv")',
                    data: {
                        TeacherID: sessionStorage.getItem("TeachID")
                    },
                    dataType: 'json',
                    success: function (datas) {
                        message.Seachtext2 = datas[0].courseName;
                        message.course1 = datas;
                        list.ListLoad();
                    }
                })
            },
            zc: function () {
                var number = JSON.stringify(message.items);
                var _list = {};
                $.ajax({
                    type: 'get',
                    url: '@Url.Action("zc")',
                    data: {
                        list: number
                    },
                    success: function (data) {
                        if (data == 1) {
                            alert("已提交无法再暂存")
                            list.ListLoad();
                        }
                        else {
                            alert("暂存成功")
                            list.ListLoad();
                        }
                    }
                })
            },
            activeFun: function (index, SCID) {
                message.SCIDs = SCID
                message.IsActive = index;
            },
            @*            storage: function () {
                if (message.SCIDs != "") {
                    $.ajax({
                        type: 'get',
                        url: '@Url.Action("storage")',
                        data: {
                            SCID: message.SCIDs,
                            peacetime: message.items[message.IsActive].peacetime,
                            Interim: message.items[message.IsActive].Interim,
                            End: message.items[message.IsActive].End
                        },
                        success: function () {
                            list.ListLoad();
                        }
                    })
                }
            }*@


        }
    })

</script>