vue基础(遍历数据,class样式控制)

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <!-- 基础代码引入 -->
        <link rel="stylesheet" href="/projectapp/zgydtjyw/view/zysz/css/index.css" />

        <script src="/utility/lzmain.js"></script>
        <script src="/utility/lzmain-form.js"></script>

        <style type="text/css">
            @font-face {
                font-family: element-icons;
                src: url('/projectapp/fonts/sy/element-icons.woff') format("woff"),
                    url('/projectapp/fonts/sy/element-icons.ttf') format("truetype");
                font-weight: 400;
                font-display: "auto";
                font-style: normal
            }

            .dis-flex {
                display: -webkit-box;
                /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;
                /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;
                /* TWEENER - IE 10 */
                display: -webkit-flex;
                /* NEW - Chrome */
                display: flex;
                /* NEW, Spec - Opera 12.1, Firefox 20+ */
            }

            .dis-flex-cen {
                display: -webkit-box;
                /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;
                /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;
                /* TWEENER - IE 10 */
                display: -webkit-flex;
                /* NEW - Chrome */
                display: flex;
                /* NEW, Spec - Opera 12.1, Firefox 20+ */
                justify-content: center;
                align-items: center;
            }

            #selectpersonApp {
                width: 99%;
                margin: 10px 20px;
            }

            .top_row {
                font-size: 16px;
                height: 40px;
                line-height: 40px;
            }

            .top_row .personsel input,
            .first_row .personsel input,
            .center_row .personsel input {
                margin-left: 10px;
                height: 17px;
                width: 17px;
            }

            .first_row {
                /* float: left; */
                /* width: calc( 100% - 20px ); */
                font-size: 14px;
                height: 40px;
                margin-top: 10px;
                justify-content: space-between;
            }

            .first_row .personsel input,
            .center_row .personsel input {
                margin-left: 8px;
                height: 17px;
                width: 17px;
            }

            .chaxunanniu {
                display: inline-block;
                width: 61px;
                height: 30px;
                border-radius: 6px;
                color: #fff;
                text-align: center;
                line-height: 30px;
                border: 1px solid #D7D7D7;
                cursor: pointer;
                margin-left: 15px;
                margin-right: 20px;
                background-color: #02a7f0;
            }

            .center_row {
                font-size: 16px;
                padding-top: 15px;
            }

            .center_row .left_jibei {
                width: 45%;
                float: left;

            }


            .center_row span {
                margin-top: -5px;
            }

            .kongxian i {
                display: inline-block;
                width: 18px;
                height: 18px;
                border: 1px solid #000;
                vertical-align: top;
                margin-right: 8px;
            }

            .shifang i {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: #D4D9DD;
                vertical-align: top;
                margin-right: 8px;
            }

            .first_row .chongtu i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: #FFC776;
                vertical-align: top;
            }

            .first_row .chongtu2 i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: #FFF600;
                vertical-align: top;
            }

            .first_row .personsel i {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: #BCE4A8;
                vertical-align: top;
                margin-right: 8px;
            }

            .center_row .right_shuoming {
                /* width: 55%; */
                /* float: right; */
                font-size: 16px;
                /* text-align: right; */
            }


            /* 表格开始 */


            .tablebox {
                width: calc(100% - 20px);
                height: 600px;
                /* 固定高度 */
                border-bottom: 0;
                border-right: 0;
                overflow: auto;
                margin-top: 10px;
            }

            table.gridtable {
                display: table;
                width: 100%;
                table-layout: fixed;
                margin: 0 auto;
                font-family: verdana, arial, sans-serif;
                font-size: 15px;
                color: #333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: separate;
                padding-right: 5px;
                border-top: 1px solid #D7D7D7;
                border-left: 1px solid #D7D7D7;
            }

            table.gridtable thead tr th {
                padding: 8px;
                text-align: center;
                background: #E8F4FE;
                width: 130px;
                height: 50px;
                /* 控制表头固定的核心代码 */
                position: sticky;
                top: 0;
                /* 第一列最上 */
                border-right: 1px solid #D7D7D7;
                border-bottom: 1px solid #D7D7D7;
            }


            /* 控制左边固定的核心代码 */
            table.gridtable tbody td:nth-child(1),
            table.gridtable thead th:nth-child(1) {
                position: sticky;
                left: 0;
                /* 首行在左 */
                z-index: 1;
            }

            table.gridtable tbody td:nth-child(2),
            table.gridtable thead th:nth-child(2) {
                position: sticky;
                left: 130px;
                z-index: 1;
            }

            table.gridtable tbody td:nth-child(3),
            table.gridtable thead th:nth-child(3) {
                position: sticky;
                left: 260px;
                z-index: 1;
            }

            /* table.gridtable thead tr th */

            table.gridtable thead th:nth-child(1),
            table.gridtable thead th:nth-child(2),
            table.gridtable thead th:nth-child(3) {
                z-index: 2;
            }

            table.gridtable td {
                height: 55px;
                background-color: #ffffff;
                text-align: center;
                font-size: 14px;
                border-right: 1px solid #D7D7D7;
                border-bottom: 1px solid #D7D7D7;

            }

            /* 休的样式 */
            table.gridtable td.xiu_suausyes {
                width: 100%;
                height: 55px;
                line-height: 40px;
                background-color: #f2f2f2;
            }

            /* 空闲占用 */
            table.gridtable td.suausyes {
                width: 100%;
                height: 55px;
                background-color: #fff;
            }

            /* 新申请 */
            table.gridtable td.xinshenqing_suausyes {
                width: 100%;
                height: 55px;
                background-color: #BCE4A8;
                color: red;
            }

            /* 释放 */
            table.gridtable td.shifang_suausyes {
                width: 100%;
                height: 55px;
                background-color: #D4D9DD;
            }

            /* 冲突新申请 */
            table.gridtable td.ctxsq_suausyes {
                width: 100%;
                height: 55px;
                background-color: #FFC776;
            }

            /* 冲突占用 */
            table.gridtable td.ctzy_suausyes {
                width: 100%;
                height: 55px;
                background-color: #FFF600;
            }

            /* 多个 冲突(新申请) 多个5冲突(已占用) */

            /* 字體顔色 */

            table.gridtable td div .valitemColor1 {
                color: #F71414;
            }

            table.gridtable td div .valitemColor2 {
                color: #000;
            }

            table.gridtable td div .valitemColor3 {
                color: #000;
                text-decoration: underline;
            }

            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 125px;
                height: 26px;
                margin: 0 8px;
            }

            .el-input__icon {
                /* display: none; */
            }

            .el-input--prefix .el-input__inner {
                height: 35px;
                width: 125px;
            }

            .el-input--suffix .el-input__inner {
                padding-right: 0;
            }

            /* .el-icon-date:before {
content: "\e78e";
}
.el-input__icon:after{
content: "";
} */

            .el-input__prefix {
                width: 125px;
                height: 100%;
                text-align: right;
                padding-right: 10px;
            }

            .el-input__suffix-inner {
                display: none;
            }

            .el-input--prefix .el-input__inner {
                padding-left: 15px;
            }

            .explain {
                height: 30px;
                font-size: 16px;
                text-align: center;
                color: #666666;
                margin-top: 10px;
                position: absolute;
                left: 48%;
            }

            .select-l-and-l {
                background: url(/projectapp/zgydtjyw/view/zysz/images/ljt.svg) no-repeat center;
                width: 6px;
                height: 11px;
                display: inline-block;
                cursor: pointer;
                margin-right: 12px;
            }

            .select-l-and-r {
                background: url(/projectapp/zgydtjyw/view/zysz/images/rjt.svg) no-repeat center;
                width: 6px;
                height: 11px;
                display: inline-block;
                cursor: pointer;
                margin-left: 12px;
                margin-right: 30px;
            }

            .okBtn {
                color: #0075FF;
                cursor: pointer;
                border: 1px solid #dedede;
                padding: 7px 8px;
                border-radius: 4px;
            }

            .first_row_l {
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="selectpersonApp">


            <div class="first_row dis-flex-cen">
                <div class="first_row_l">

                    <span class="tittext">时间显示范围:</span>
                    <span class="select-l-and-l" @click="shangyizhou()"> </span>
                    <el-date-picker v-model="statValue" type="date" @change="dateSelect()" placeholder="选择日期">
                    </el-date-picker>至
                    <el-date-picker v-model="stopValue" type="date" @change="dateSelecttop()" placeholder="选择日期">
                    </el-date-picker>
                    <span class="select-l-and-r" @click="xiayizhou()"> </span>
                    <span @click="searchpersonAll()" class="okBtn">查询</span>
                </div>
                <div class="first_row_r dis-flex">
                    <span> <span style="color: #F71414; font-weight: bold;font-size: 17px;">A</span> 当前项目</span>
                    <span style=" margin-left: 20px;"> <span
                            style="color: #2A2A2A; font-weight: bold;font-size: 17px;">A</span> 其他项目</span>
                    <span class="kongxian dis-flex-cen" style="margin-left: 50px;"><i></i> 空闲/占用</span>
                    <span class="personsel dis-flex-cen" style="margin-left: 10px;"><i></i>新申请</span>
                    <span class="shifang dis-flex-cen" style="margin-left: 10px;"><i></i>释放</span>
                </div>
                <span class="chaxunanniu" @click="savePerson()">保存</span>
            </div>
            <div class="center_row">
                <!-- <div class="left_jibei" style="display: none;">
<span class="tittext">级别:</span>

<span class="personsel" v-for="(item, index) in jboptions" :key="index">
<input type="checkbox" v-model="jbcheckedValues" :value="item.value">
{{ item.label }}
</span>

</div> -->

            </div>
            <div class="tablebox">
                <table class="gridtable infinite-list-wrapper" class="" style="overflow:auto;">
                    <thead>
                        <tr>
                            <th v-for="(thitem, key) in stepData" :key="key">
                                {{thitem}}
                            </th>
                        </tr>
                    </thead>
                    <tbody v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled"
                        infinite-scroll-distance="10" immediate-check="false">
                        <tr v-for="(item, idx) in dataList" :key="idx">
                            <td>{{item.level_name}}</td>
                            <td>{{item.personName}}</td>
                            <td>{{item.department_name}}</td>
                            <!-- <td @click="applyMeth(tditem,idx,tdidx)" v-for="(tditem, tdidx) in item.dateArray" :key="tdidx" :class="[ifSelect ?'xinshenqing_suausyes':'','suausyes']" > -->
                            <td @click="applyMeth(idx,tditem,tdidx,$event)" ref="bgfive" :bgtest="tditem.bgcolor"
                                v-for="(tditem, tdidx) in item.dateArray" :key="tdidx"
                                :class="{'xiu_suausyes':tditem.bgcolor ==0 ,'suausyes': tditem.bgcolor==1, 'xinshenqing_suausyes':tditem.bgcolor==2 ,'shifang_suausyes': tditem.bgcolor==3, 'ctxsq_suausyes':tditem.bgcolor==4, 'ctzy_suausyes':tditem.bgcolor==5}">
                                <!-- 1空闲/占用 2 新申请 3释放 4冲突(新申请) 5冲突(已占用) -->
                                <div v-if="tditem.bgcolor ==0" class=""> 休 </div>


                                <div v-if="tditem.bgcolor==1" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                    </p>
                                </div>

                                <div v-if="tditem.bgcolor==2" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                    </p>
                                </div>

                                <div v-if="tditem.bgcolor==3" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                        </br>
                                    </p>
                                </div>
                                <div v-if="tditem.bgcolor==4" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                    </p>
                                </div>

                                <div v-if="tditem.bgcolor==5" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                    </p>
                                </div>
                                <div v-if="tditem.bgcolor==6" class="">
                                    <p v-for="(valitem, validx) in tditem.projectcode" :key="validx"
                                        :text="valitem.fontcolor">
                                        <span
                                            :class="{valitemColor1: valitem.fontcolor == 1, valitemColor2: valitem.fontcolor == 2, valitemColor3: valitem.fontcolor == 3}">
                                            {{valitem.val}} </br></span>
                                    </p>
                                </div>
                            </td>

                        </tr>
                    </tbody>
                </table>
                <p class="explain" v-if="loading">数据加载中...</p>
                <p class="explain" v-if="noMore && dataList.length != 0">没有数据了!</p>
                <p class="explain" v-if="dataList.length == 0 &&noMore">暂无数据!</p>
            </div>
        </div>
    </body>


    <script src="/projectapp/zgydtjyw/view/zysz/js/vue.js"></script>
    <script src="/projectapp/zgydtjyw/view/zysz/js/element-ui-index.js"></script>
    <script src="/projectapp/zgydtjyw/view/zysz/js/moment.min.js"></script>
    <script>
        new Vue({
            el: '#selectpersonApp',
            data() {
                return {
                    tabPosition: "top",

                    statValue: '', //开始时间
                    stopValue: '', // 结束时间
                    // 其他项目叠加
                    qitaproOptions: [{
                            label: '人员需求已通过尚未提交工时计划',
                            value: '1'
                        },
                        {
                            label: '已提交工时计划尚未审核',
                            value: '2'
                        },
                        {
                            label: '已提交工时计划调整尚未审核',
                            value: '3'
                        },
                    ],
                    qitaprocheckedValues: [],
                    // 级别
                    jboptions: [{
                            label: '高级总监',
                            value: 'gjzj'
                        },
                        {
                            label: '总监',
                            value: 'zj'
                        },
                        {
                            label: '高级经理',
                            value: 'gjj'
                        },
                        {
                            label: '经理',
                            value: 'jl'
                        },
                        {
                            label: '高级顾问',
                            value: 'gjgw'
                        },
                        {
                            label: '顾问',
                            value: 'gw'
                        }
                    ],
                    jbcheckedValues: [],


                    stepData: [], //自定义表头

                    // 下拉加载数据
                    dataList: [], //前端分页需要拼接的数组
                    loading: false, //数据请求中,开关
                    noMore: false,
                    pageNum: 1, //頁數
                    totalPages: 0, //总条数
                    tableColumns: [], //接口返回的数据
                    firstData: [], //暫存数组
                    fullscreenLoading: false, //数据加载loading
                    currentModel: null,
                    currentRow: null,
                    ifSelect: false, //是否选中数据
                    xmid: "", //项目id
                    xmbh: "", //项目编号
                    jhsq_id: "" //工时计划申请id
                }
            },
            methods: {

                // 保存
                savePerson() {
                    var _this = this
                    _this.dataList.forEach((Arrayitem, Arrayindex, Arrayobj) => {
                        if (Arrayitem.bgcolor === "6") {

                        }
                    })
                    let scerchparme = {
                        "jhsq_id": _this.jhsq_id,
                        "xmid": _this.xmid,
                        "xmbh": _this.xmbh,
                        "tableColumns": _this.dataList
                    }
                    var saveurl = '/serverapp/api/workHour/personOccupyStateGSJHTZSave'
                    var savepersonlist = $lzpost(saveurl, scerchparme).value
                    if (savepersonlist) {
                        lzalertok("保存成功")
                        lzclose()
                        top.location.reload()
                    }
                },
                // 新申请
                applyMeth(idx, item, tdidx, e) {
                    var _this = this
                    console.log("bgfive:" + e)
                    console.log("bgfive:" + e.target.getAttribute('bgtest'))
                    let bgtest = e.target.getAttribute('bgtest')
                    if (bgtest === 5) {
                        jQuery(e.currentTarget).addClass("suausyes").removeClass("ctzy_suausyes")
                        jQuery(e.currentTarget).find("p[text='1']").hide()
                    }
                    _this.dataList.forEach((item, index, obj) => {
                        if (index === idx) {
                            item.dateArray.forEach((Arrayitem, Arrayindex, Arrayobj) => {
                                if (Arrayindex === tdidx) {
                                    if (Arrayitem.bgcolor === "2") {
                                        // 新申请
                                        Arrayitem.bgcolor = "1" //空闲
                                        Arrayitem.projectcode[0].fontcolor = "0"
                                        Arrayitem.projectcode[0].val = ""
                                    } else if (!Arrayitem.projectcode[0].val) {
                                        // 释放新申请
                                        Arrayitem.bgcolor = "2"
                                        Arrayitem.projectcode[0].fontcolor = "1" //1: 当前项目
                                        Arrayitem.projectcode[0].val = _this.xmbh
                                    } else if (Arrayitem.bgcolor === "5") { //冲突
                                        // let bgfive1=_this.$refs.bgfive
                                        // console.log("bgfive1:"+bgfive1)
                                        Arrayitem.projectcode.forEach((projectcodeitem,
                                            projectcodeindex, projectcodeobj) => {
                                            if (projectcodeitem.val === _this.xmbh) {
                                                Arrayitem.bgcolor = "6" //
                                                Arrayitem.projectcode.splice(projectcodeindex,
                                                    1)
                                            }
                                        })
                                    } else if (Arrayitem.bgcolor === "6") {
                                        let parme = {
                                            "starttime": this.statValue,
                                            "endtime": this.stopValue,
                                            "jhtz_id": _this.jhsq_id,
                                            "xmid": this.xmid,
                                            "xmbh": this.xmbh
                                        }
                                        let url = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
                                        let list = $lzpost(url, parme).value
                                        let tableColumns = list.tableColumns
                                        _this.dataList[idx].dateArray[tdidx].bgcolor = tableColumns[
                                            idx].dateArray[tdidx].bgcolor
                                        _this.dataList[idx].dateArray[tdidx].projectcode =
                                            tableColumns[idx].dateArray[tdidx].projectcode


                                    }
                                }
                            })
                        }
                    })
                    console.log(_this.dataList)

                },
                // 查询
                searchpersonAll() {
                    let scerchparme = {
                        "starttime": this.statValue,
                        "endtime": this.stopValue,
                        "jhtz_id": _this.jhsq_id,
                        "xmid": this.xmid,
                        "xmbh": this.xmbh
                    }

                    console.log(scerchparme);
                    this.getSearchpersonList(scerchparme)

                },
                // 查询重新获取
                getSearchpersonList(scerchparme) {
                    this.fullscreenLoading = true

                    var _this = this
                    this.firstData = []
                    this.dataList = []
                    // var getallpersonurl = '/serverapp/api/workHour/personOccupyPlanApplicaion'
                    var getallpersonurl = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
                    var personlist = $lzpost(getallpersonurl, scerchparme).value
                    _this.firstData = personlist.tableColumns

                    _this.dataList = _this.firstData.slice(0, 11)
                    // this.set(this.dataList)
                    console.log(_this.dataList);
                    if (_this.dataList.length == 0) {
                        _this.loading = false; /*终止请求*/
                        _this.noMore = true;
                    } else {}
                    _this.totalPages = personlist.totalPages;
                    // 查询完重新获取
                    var diffDate = _this.getDiffDate(scerchparme.starttime, scerchparme.endtime)
                    console.log(diffDate);
                    _this.stepData = diffDate;
                    _this.fullscreenLoading = false
                },
                shangyizhou() {

                    let startDate = this.lastDay(this.statValue)
                    let endDate = this.lastDay(this.stopValue)
                    console.log(startDate, endDate);
                    this.statValue = startDate;
                    this.stopValue = endDate;

                    // var diffDate = this.getDiffDate(startDate, endDate)
                    // console.log(diffDate);
                    // this.stepData = diffDate

                },
                // 点击下一周
                xiayizhou() {
                    let startDate = this.nextDay(this.statValue)
                    let endDate = this.nextDay(this.stopValue)
                    this.statValue = startDate;
                    this.stopValue = endDate;

                    // var diffDate = this.getDiffDate(startDate, endDate)
                    // console.log(diffDate);
                    // this.stepData = diffDate
                },

                //前七天
                lastDay(time) {
                    let now = new Date(time); // 当前日期
                    return this.formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7))
                },
                //后七天
                nextDay(time) {
                    let now = new Date(time); // 当前日期
                    return this.formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7))
                },
                // 日期处理
                formatDate(date) {
                    let myyear = date.getFullYear();
                    let mymonth = date.getMonth() + 1;
                    let myweekday = date.getDate();
                    if (mymonth < 10) {
                        mymonth = '0' + mymonth;
                    }
                    if (myweekday < 10) {
                        myweekday = '0' + myweekday;
                    }
                    return (myyear + '-' + mymonth + '-' + myweekday);
                },

                //设置默认日期
                defaultDate(startbeg, stpend) {
                    // 获取时间
                    this.statValue = startbeg
                    this.stopValue = stpend
                    var diffDate = this.getDiffDate(startbeg, stpend)
                    // console.log(diffDate);
                    this.stepData = diffDate;
                },
                // 点选获取时间
                dateSelect() {
                    this.statValue = this.statValue.getFullYear() + '-' + (this.statValue.getMonth() + 1) + '-' + this
                        .statValue.getDate();
                },
                // 点选获取时间
                dateSelecttop() {
                    this.stopValue = this.stopValue.getFullYear() + '-' + (this.stopValue.getMonth() + 1) + '-' + this
                        .stopValue.getDate();
                },

                /**
                 ***获取两个日期间的所有日期
                 **/
                getDiffDate(start, end) {

                    var startTime = this.getDate(start);
                    var endTime = this.getDate(end);
                    var dateArr = [];
                    while ((endTime.getTime() - startTime.getTime()) > -1) {
                        var year = startTime.getFullYear();
                        var month = (startTime.getMonth() + 1).toString().length === 1 ? +(parseInt(startTime
                            .getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1);
                        var day = startTime.getDate().toString().length === 1 ? startTime.getDate() : startTime
                            .getDate();;
                        // var day = startTime.getDate()+1
                        // dateArr.push( year + "/" + month + "/" + day);
                        dateArr.push(month + "月" + day + "日");

                        startTime.setDate(startTime.getDate() + 1);
                    }
                    dateArr.unshift('级别', '姓名', '所属部门')

                    return dateArr;
                },
                getDate(datestr) {
                    var temp = datestr.split("-");
                    if (temp[1] === '01') {
                        temp[0] = parseInt(temp[0], 10) - 1;
                        temp[1] = '12';
                    } else {
                        temp[1] = parseInt(temp[1], 10) - 1;
                    }
                    var date = new Date(temp[0], temp[1], temp[2]);
                    return date;
                },

                // 下拉加載
                loadMore() {
                    // console.log(this.firstData);
                    var slicedata = []
                    // 下拉 开关
                    this.loading = true
                    setTimeout(() => {
                        this.pageNum++
                        // 根据页数继续拼接 数据
                        slicedata = this.firstData.slice((this.pageNum - 1) * 11, this.pageNum * 11)
                        this.dataList = this.dataList.concat(slicedata)

                        if (this.totalPages == this.dataList.length) {
                            this.loading = false; /*终止请求*/
                            this.noMore = true;
                            this.pageNum = 1
                        } else {
                            this.loading = false; /*继续请求*/
                        }
                    }, 2000)

                },

                // 初始化获取查询数据
                getMessageList() {
                    var _this = this
                    this.firstData = []
                    this.dataList = []
                    // 首次数据切割显示 获取所有数据的length

                    var parmes = {
                        "starttime": this.statValue,
                        "endtime": this.stopValue,
                        "jhtz_id": _this.jhsq_id,
                        "xmid": this.xmid,
                        "xmbh": this.xmbh
                        // "starttime":"2023-11-01",
                        // "endtime":"2023-11-05",
                        // "jhtz_id":"主表id",
                        // "xmid":"1722434228337119234",
                        // "xmbh":"2023-HBY-D14"
                    }
                    // var getallpersonurl = '/serverapp/api/workHour/personOccupyPlanApplicaion'
                    var getallpersonurl = '/serverapp/api/workHour/personOccupyStateGSJHTZ'
                    var personlist = $lzpost(getallpersonurl, parmes).value
                    debugger
                    _this.firstData = personlist.tableColumns

                    _this.dataList = _this.firstData.slice(0, 11)
                    // this.set(this.dataList)
                    console.log("dataList:" + _this.dataList);
                    if (_this.dataList.length == 0) {
                        _this.loading = false; /*终止请求*/
                        _this.noMore = true;
                    } else {}
                    _this.totalPages = personlist.totalPages;

                }
            },


            mounted() {
                // 日期初始化
                let startbeg = $request('starttime')
                let stpend = $request('stoptime')
                this.xmid = $request('xmid')
                this.xmbh = $request('xmbh')
                this.jhsq_id = $request('id')
                this.defaultDate(startbeg, stpend)
                // 初始化数据
                this.getMessageList();

            },
            computed: {
                disabled() {
                    return this.loading || this.noMore
                }
            },

            created() {

            },
        })
    </script>
    <script>
        function pinzhuangObj(parmaeKey, parmaeValue) {
            //数组拼装成对象
            var assembledObj = {}
            for (var l = 0; l < parmaeKey.length; l++) {
                assembledObj[parmaeKey[l]] = parmaeValue[l]
            }
            return assembledObj
        }

        function parseParams(url, params) {
            var paramsArray = []
            Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
            if (url.search(/\?/) === -1) {
                url += `?${paramsArray.join('&')}`
            } else {
                url += `&${paramsArray.join('&')}`
            }
            return url
        }
    </script>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值