water_affairs/pages/facility/modules/dailyRecord.vue

<template>
    <view v-show="show">
        <view class="head">
            <view class="left" hover-class="navigator-hover" @click="actionShow = true">
                {{ showPage }} <text class="iconfont icon-xiangxiazhankai" style="margin-left:4px;" />
            </view>
            <time-horizon @onConfirm="dateRange" />
        </view>
        <record ref="操作记录" :w_deviceid="w_deviceid" />
        <queue ref="操作队列" :w_deviceid="w_deviceid" />
        <upload-record ref="上传记录" :w_deviceid="w_deviceid" />
        <up-line-record ref="上线记录" :w_deviceid="w_deviceid" />


        <u-action-sheet :actions="actions" cancelText="取消" :show="actionShow" @select="selectClick"
            :closeOnClickOverlay="true" :closeOnClickAction="false" @close="actionClose" />
    </view>
</template>

<script>
let page = {}
import record from "./record.vue"
import queue from "./queue.vue"
import uploadRecord from "./uploadRecord.vue"
import upLineRecord from "./upLineRecord.vue"

export default {
    components: { record, queue, uploadRecord, upLineRecord },
    name: "dailyRecord",
    props: {
        w_deviceid: String
    },
    data() {
        return {
            show: false,
            uninitialized: true,
            showPage: "操作记录",
            actionShow: false,
            actions: [{
                name: '操作记录',
                loading: false,
                disabled: true
            }, {
                name: '操作队列',
                loading: false,
                disabled: false
            }, {
                name: '上传记录',
                loading: false,
                disabled: false
            }, {
                name: '上线记录',
                loading: false,
                disabled: false
            }],
        }
    },
    methods: {
        initialize(init = false) {
            this.loadData(init)
        },
        actionClose() {
            this.actionShow = false;
            setTimeout(() => {
                this.actions.forEach(option => {
                    option.disabled = option.name == this.showPage;
                    option.loading = false;
                });
            }, 100)
        },
        selectClick(result) {
            page.show = false;
            this.showPage = result.name;
            this.actions.forEach(option => {
                option.disabled = true;
                option.loading = option.name == result.name;
                if (option.name == result.name) this.loadData()
            });
        },
        loadData(init) {
            page = this.$refs[this.showPage];
            if ((page.uninitialized && !page.show) || init) {
                page.show = true;
                page.getList(true).then(res => {
                    page.uninitialized = !res;
                    this.uninitialized = false;
                    this.actionClose()
                })
            } else if (page.show) {
                page.getList()
            } else {
                page.show = true;
                this.actionClose();
            }
        },
        dateRange(range, fun) {
            let where = page.where;
            if (where.begindate == range[0] && where.enddate == range[1]) return fun();
            this.actions.forEach(v => {
                let p = this.$refs[v.name];
                if (p) {
                    p.where.begindate = range[0];
                    p.where.enddate = range[1];
                    p.uninitialized = true;
                };
            })
            page.getList(true).then(res => {
                page.uninitialized = !res;
                fun();
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.head {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 355px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 10px;

    .left {
        color: #fff;
        font-weight: bold;
    }
}
</style>