water_affairs/packageA/signIn/index.vue

<template>
    <view class="container">
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                签到记录
            </block>
        </cu-custom>
        <My_listbox ref="List" :pullDown="false">
            <view class="box">
                <uni-calendar :insert="true" :lunar="true" :selected="selected" @change="calendarOnChange"
                    @monthSwitch="monthSwitch" />
            </view>
            <view class="item" v-for="item in list" :key="item.sys_signinid">
                <view class="time">
                    {{ item.signintime || '' }}
                </view>
                <view class="address">
                    <text class="iconfont icon-a-wodemendianxinxidizhi" /> {{ item.address || '' }}
                </view>
                <view class="remarks">
                    设备：{{ item.devicename || '--' }}
                </view>
                <view class="remarks">
                    说明：{{ item.remarks || '--' }}
                </view>
                <block v-if="item.attinfos">
                    <view style="height: 6px;" />
                    <my_files :attinfos="item.attinfos" />
                </block>
            </view>
            <view style="height: 22vw;" />
        </My_listbox>
        <view class="but-box">
            <view style="width: 75vw;">
                <u-button type="primary" text="签到" color="rgba(42,106,242,.7)" @click="toSignIn" />
            </view>
        </view>
    </view>
</template>

<script>
import my_files from "../../components/My_Files.vue";
import { formatTime } from "../../utils/getTime"
export default {
    name: "SignInIndex",
    components: { my_files },
    data() {
        return {
            signindate: '',
            year: "",
            month: "",
            selected: [],
            list: []
        }
    },
    onLoad() {
        this.init(formatTime().split(" ")[0])
        setTimeout(() => {
            this.$refs.List.setHeight();
        }, 350)
    },
    methods: {
        init(date) {
            this.queryDayList(date)
            let arr = date.split("-");
            this.queryMonthList(arr[0], arr[1]);
        },
        queryDayList(signindate, init = false) {
            if (this.signindate == signindate & !init) return;
            this.$Http.basic({
                "id": 20221229150101,
                "content": {
                    signindate,
                    "pageSize": 999,
                    "querysubhr": 0 //是否查看下属
                }
            }).then(res => {
                console.log("查询日打卡记录", res)
                this.signindate = signindate;
                this.list = res.data
            })
        },
        queryMonthList(year, month, init = false) {
            if (this.year == year && this.month == month && !init) return;
            this.$Http.basic({
                "id": 20221229150001,
                "content": {
                    year,
                    month
                }
            }).then(res => {
                console.log("查询月份打卡记录", res)
                this.year = year;
                this.month = month;

                this.selected = res.data.map(v => {
                    return {
                        date: v,
                        info: '打卡'
                    }
                })
            })
        },
        /* 切换日期 */
        calendarOnChange(e) {
            this.init(e.fulldate)
        },
        /* 切换年月 */
        monthSwitch({ year, month }) {
            if (this.year == year && this.month == month) return;
            this.queryMonthList(year, month)
        },
        toSignIn() {
            uni.navigateTo({
                url: "./update"
            });
            this.$Http.signInUpdate = this.update.bind(this)
        },
        update() {
            this.queryDayList(this.signindate, true)
            this.queryMonthList(this.year, this.month, true)
        },
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 355px;
    margin: 10px auto 0;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
}

.item {
    width: 355px;
    margin: 10px auto;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;

    .time {
        font-size: 12px;
    }

    .address {
        font-size: 13px;

        .iconfont {
            font-size: 13px;
            color: #333;
        }

        margin-top: 4px;
    }

    .remarks {
        font-size: 12px;
        color: #333;
        margin-top: 4px;
    }
}

.but-box {
    position: absolute;
    width: 100vw;
    bottom: 30px;
    display: flex;
    justify-content: center;

    /deep/ .u-button__text,
    /deep/.u-button__loading-text {
        font-size: 14px !important;
    }

    /deep/.u-loading-icon__spinner {
        width: 17.25px !important;
        height: 17.25px !important;
    }
}
</style>