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">{{ item.name }}</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>
        <component v-else :is="loadComponent" :taskId="taskId" @getBackBoard="getBackBoard"></component>
    </view>
</template>

<script>
import api from "@/api/api";
import taskBoardAddress from './taskBoardAddress.vue'

export default {
    name: 'taskBoard',
    components: {
        taskBoardAddress
    },
    props: {},

    data() {
        return {
            isShow: true,
            loadComponent: '',
            taskId: '',
            indexList: [],
            gasTitle: '巡检任务',//标题
            backPic0: "url(/static/topnavbar0.png)",
            backPic: "url(../../static/topnavbar.png)",
        }
    },
    computed: {},
    mounted() {
        this.getTimeList()
    },
    methods: {
        //点击返回上一级
        getBackBoard() {
            let that=this
            that.isShow = true
            that.loadComponent = ''
        },
        //点击跳转到识别看板
        getBorad(item) {
            let that = this
            that.isShow = false
            that.taskId = item.id
            that.loadComponent = 'taskBoardAddress'
        },
        //获取任务管理列表数据
        getTimeList() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .teamList({ pageNo: 1, pageSize: 100 })
                    .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;

}

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