Vent-App/pages/gasreport/components/taskBoard.vue

<template>
    <view class="taskBoard">
        <u-navbar :bgStatusImage="backPic0" :bgImage="backPic" :title="gasTitle" :safeAreaInsetTop="true" leftIcon=""
            @leftClick="handlerToggle"> </u-navbar>
        <u-list :height="708" v-if="isShow">
            <u-list-item v-for="(item, index) in indexList" :key="index">
                <u-cell icon="share" @click="getBorad(item)">
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">
                            <text>{{ item.name }}</text>
                            <text style="margin-left:10px">{{  item.checkPerson ? `(${item.checkPerson})` : '' }}</text>
                        </text>
                    </view>
                    <view slot="value" class="u-slot-title">
                        <u-tag :text="item.classType_dictText" plain size="mini"
                            :type="item.classType_dictText == '早班' ? 'success' : item.classType_dictText == '中班' ? 'warning' : 'error'">
                        </u-tag>
                    </view>
                </u-cell>
            </u-list-item>
        </u-list>
        <!-- 填报日期弹窗 -->
        <u-modal v-if="isShow" showCancelButton showConfirmButton confirmText="确定" cancelText="取消" :show="showTime"
            :title="titleTime" @confirm="confirmTime" @cancel="cancelTime">
            <view class="dialog-item" @click="getChangeTime">
                <text class="dialog-label">任务日期：</text>
                <u--input v-model="searchTime" placeholder="请选择任务日期" inputAlign="center"
                    suffixIcon="arrow-right"></u--input>
                <u-calendar :show="showCalendar" v-model="timeRan" mode="single" closeOnClickOverlay
                    @confirm="changeTime" @cancel="showCalendar = false"
                   ></u-calendar>
            </view>
        </u-modal>
        <component v-else :is="loadComponent" :taskId="taskId" @getBackBoard="getBackBoard"></component>
    </view>
</template>

<script>
import api from "@/api/api";
import taskBoardAddress from './taskBoardAddress.vue'
import moment from 'moment'
export default {
    name: 'taskBoard',
    components: {
        taskBoardAddress
    },
    props: {},

    data() {
        return {
            showTime: false,//是否显示填报日期弹窗
            titleTime: '',
            searchTime: '',//检测时间
            showCalendar: false,//控制日期选型下拉开启
            timeRan: Number(new Date()),
            isShow: true,
            loadComponent: '',
            taskId: '',
            indexList: [],
            gasTitle: '巡检任务',//标题
            backPic0: "url(/static/topnavbar0.png)",
            backPic: "url(../../static/topnavbar.png)",
        }
    },
    computed: {
        teamCode: function () {
            return uni.getStorageSync('login_user_info')['districtTeam']
        },
    },
    mounted() {
        this.getTimeList()
    },
    methods: {
        //点击弹出日期下拉选项
        getChangeTime() {
            this.showCalendar = true
        },
        changeTime(e) {
            let that = this
            that.searchTime = moment(e.value).format('YYYY-MM-DD')
            uni.setStorageSync("searchTime", that.searchTime);
            that.showCalendar=false
        },
        //点击返回上一级
        getBackBoard() {
            let that = this
            that.isShow = true
            that.loadComponent = ''
        },
        //点击跳转到识别看板
        getBorad(item) {
            let that = this
            that.taskId = item.id
            that.showTime = true
        },
        //选择检测时间-确定
        confirmTime() {
            let that = this
            if (that.searchTime) {
                that.isShow = false
                that.showTime=false
                that.loadComponent = 'taskBoardAddress'
            }
        },
        //选择检测时间-取消
        cancelTime() {
            let that=this
            that.isShow = true
            that.showTime=false
        },
        //获取任务管理列表数据
        getTimeList() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .teamList({ pageNo: 1, pageSize: 100,teamCode:that.teamCode })
                    .then((response) => {
                        if (response.data.code == 200) {
                            that.indexList = response.data.result.records
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });
        }
    }

};
</script>

<style lang="scss" scoped>
.taskBoard {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;

}

.dialog-item {
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-label {
        width: 70px;
        text-align: center;
    }
}

::v-deep .u-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px 9px !important;
    width: 180px;
}

::v-deep .u-popup {
    flex: 0
}

::v-deep .u-slot-title {
    display: flex;
}
</style>