wang_zhuang_daping/src.mobile/views/sign.vue

<template>
    <div>
        <van-nav-bar
            title="打卡签到"
            style="position: fixed; top: 0; width: 100%"
            left-arrow
            @click-left="onClickLeft"
        />

        <van-tabs v-model="active" style="margin-top: 45px" @change="changeTab">
            <van-tab name="tab1" title="新增签到">
                <div style="margin: 5px; height: 500px">
                    <van-field
                        style="line-height: 60px; font-size: 18px"
                        v-model="value"
                        label="应急事件"
                        clickable
                        readonly
                        @click="selectClick(1)"
                        right-icon="arrow-down"
                    />
                    <van-popup v-model="showPicker" round position="bottom">
                        <van-search
                            v-if="searchFilterShow"
                            v-model="searchFilter"
                            input-align="center"
                            show-action
                            placeholder="请输入关键字"
                            @search="onSearchFilter"
                        >
                            <template #action>
                                <div @click="onSearchFilter">搜索</div>
                            </template>
                        </van-search>
                        <van-picker
                            show-toolbar
                            :columns="columnsFilter"
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                        />
                    </van-popup>

                    <van-field
                        v-model="value1"
                        label="签到点"
                        style="line-height: 40px; font-size: 16px"
                        required
                        clickable
                        readonly
                        @click="selectClick(2)"
                        right-icon="arrow-down"
                    />
                    <van-field
                        v-model="value2"
                        label="签到人"
                        style="line-height: 40px; font-size: 16px"
                        required
                        clickable
                        readonly
                        @click="selectClick(3)"
                        right-icon="arrow-down"
                    />
                </div>
                <van-row
                    type="flex"
                    justify="center"
                    style="width: 100%; background: white; position: fixed; bottom: 20px"
                >
                    <van-col span="5">
                        <van-button type="default" @click="onClickLeft">关闭</van-button>
                    </van-col>
                    <van-col span="5">
                        <van-button color="#B2568C" type="primary" @click="submitData">
                            提交
                        </van-button>
                    </van-col>
                </van-row>
            </van-tab>
            <van-tab name="tab2" title="我的签到">
                <div style="margin: 5px">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <van-cell v-for="item in list" :key="item">
                                <template #title>
                                    <van-row>
                                        <van-col span="4"> 应急事件: </van-col>
                                        <van-col span="20">&nbsp;&nbsp;{{ item.yjsj }}</van-col>
                                    </van-row>
                                    <van-row>
                                        <van-col span="4">签&nbsp;&nbsp;到&nbsp;&nbsp;点:</van-col>
                                        <van-col span="20">&nbsp;&nbsp;{{ item.qdd }}</van-col>
                                    </van-row>
                                    <van-row>
                                        <van-col span="4">签&nbsp;&nbsp;到&nbsp;&nbsp;人:</van-col>
                                        <van-col span="6">&nbsp;&nbsp;{{ item.qdr }}</van-col>
                                        <van-col span="4">签到时间:</van-col>
                                        <van-col span="10">&nbsp;&nbsp;{{ item.qdsj }}</van-col>
                                    </van-row>
                                </template>
                            </van-cell>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Toast } from 'vant'
import cookies from '../plugin/axios/util.cookies'

export default {
    name: 'Sign',
    data() {
        return {
            searchFilter: '',
            searchFilterShow: false,
            value: '',
            value1: '',
            value1Key: '',
            value2: '',
            value2Key: '',
            value2Type: '',
            page: 1,
            active: 'tab1',

            showPicker: false,
            showType: 1,
            columns: [],
            columnsFilter: [],
            yjs: [],
            qdds: [],
            qdrs: [],

            list: [],
            loading: false,
            finished: false,
            refreshing: false
        }
    },
    computed: {
        ...mapGetters(['gValue'])
    },
    watch: {
        gValue: function (n, o) {
            if (n) {
                this.querySelect()
            }
        }
    },
    mounted() {
        this.$store.dispatch('layout/gValue', null)
        this.querySelect()
    },
    methods: {
        onSearchFilter() {
            if (this.searchFilter) {
                this.columnsFilter = []
                const _this = this
                this.columns.forEach(v => {
                    if (v.text.indexOf(_this.searchFilter) > -1) {
                        _this.columnsFilter.push(v)
                    }
                })
            } else {
                this.columnsFilter = this.columns
            }
        },
        changeTab(name) {
            if (name === 'tab2') {
                this.finished = false
                this.loading = true
                this.onLoad(1)
            }
        },
        submitData() {
            const postData = {
                yxid: this.gValue,
                qdd: this.value1Key,
                qdr: this.value2Key,
                qdrtype: this.value2Type
            }
            this.$apis.requestBase('sign', postData).then(res => {
                if (res.data && res.data.code === 200) {
                    this.value2 = ''
                    this.value2Key = ''
                    this.value2Type = ''
                    this.querySelect()
                    Toast('签到成功')
                } else {
                    Toast(res.data.msg)
                }
            })
        },
        selectClick(type) {
            this.searchFilter = ''
            if (type === 1) {
                this.searchFilterShow = false
                this.columns = this.yjs
                this.columnsFilter = this.yjs
            } else if (type === 2) {
                this.searchFilterShow = false
                this.columns = this.qdds
                this.columnsFilter = this.qdds
            } else if (type === 3) {
                this.searchFilterShow = true
                this.columns = this.qdrs
                this.columnsFilter = this.qdrs
            }
            this.showType = type
            this.showPicker = true
        },
        querySelect() {
            let tmp = this.gValue
            if (!this.yjs || this.yjs.length <= 0) {
                tmp = ''
            }
            const postData = {
                yxid: tmp
            }
            this.$apis.requestBase('selectAll', postData).then(res => {
                if (res.data.qdds) {
                    this.qdds = res.data.qdds
                    const SignValue1Key = cookies.get('SignValue1Key')
                    if (SignValue1Key) {
                        this.qdds.forEach(v => {
                            if (v.value === SignValue1Key) {
                                this.value1 = v.text
                                this.value1Key = v.value
                            }
                        })
                    }
                }
                if (res.data.qdrs) {
                    this.qdrs = res.data.qdrs
                }
                if (res.data.yjs) {
                    this.yjs = res.data.yjs
                    if (this.yjs[0]) {
                        this.onConfirm(this.yjs[0])
                    }
                }
            })
        },
        onClickLeft: function () {
            this.$router.push('/')
        },
        onConfirm(value) {
            this.searchFilter = ''
            if (this.showType === 1) {
                this.$store.dispatch('layout/gValue', value.value)
                this.value = value.text
            } else if (this.showType === 2) {
                cookies.set('SignValue1Key', value.value)
                this.value1 = value.text
                this.value1Key = value.value
            } else if (this.showType === 3) {
                this.value2 = value.text
                this.value2Key = value.value
                this.value2Type = value.type
            }
            this.showPicker = false
        },
        onLoad(page) {
            // if (!this.gValue) {
            //     this.finished = true
            //     this.loading = false
            //     return
            // }
            if (page) {
                this.page = page
            }
            page = this.page
            this.page += 1

            // 查询类型 queryType
            // 演习id=gValue
            // 排序情况= columns . sort
            // 搜索情况 this.value
            const postData = {
                // yxid: this.gValue,
                page: page
            }

            this.$apis.requestBase('mysign', postData).then(res => {
                if (res.data && res.data.length > 0) {
                    if (page === 1) {
                        this.list = res.data
                    } else {
                        this.list.push(res.data)
                    }
                } else {
                    if (page === 1) {
                        this.list = []
                    }
                    this.finished = true
                }
                this.loading = false
                if (this.refreshing) {
                    this.refreshing = false
                }
            })
        },
        onRefresh() {
            this.finished = false
            this.loading = true
            this.onLoad(1)
        }
    }
}
</script>
<style lang="scss">
.van-picker-column__item--selected {
    background-color: RGBA(178, 86, 140, 0.3);
}
</style>