zhdt-miniapp/pages/task-list/index.vue

<template>
    <view class="home padding-bottom">
        <cu-custom class="home-custom" bgColor=".bg-sancolor"
                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png" :isBack="true">
            <block slot="content">任务列表</block>
        </cu-custom>
        <view class="padding-sm">
            <view class="cu-list menu margin-top taskDetail bg-white"
                  v-for="(item, index) in taskListData" :key="index">
                <view class="cu-item">
                    <view class="title text-black text-bold text-lg">
                        <text class="cuIcon-titles text-green"></text>
                        {{ item.ahTasksList[0].taskName }}
                        <view class="cu-tag round bg-cyan light margin-left-sm text-sm">
                            {{ setTaskType(item.taskType) }}
                        </view>
                    </view>
                    <view class="action">
                        <view class="text-gray">
                            {{ setTaskStatus(item.status) }}
                        </view>

                    </view>
                </view>
                <view class="content padding-sm detail solid-bottom">
                    <view>任务编号：{{ item.ahTasksList[0].taskNumber }}</view>
                    <view>年度/季度：{{ item.ahTasksList[0].taskYear.substr(0, 4) }}-{{ item.ahTasksList[0].taskBatch }}</view>
                    <view>发布单位：{{ item.publishName }}</view>
                    <view>任务时间：{{ item.ahTasksList[0].startTime }}至{{ item.ahTasksList[0].endTime }}</view>
                </view>
                <view class="tools" style="justify-content: space-between">
                    <view @tap.stop.capture="showModal" data-target="Modal" :data-taskId="item.taskId">
<!--                        <view class="cu-tag radius line-black padding-lr-sl">
                            <text class="cuIcon-attentionfill text-lg padding-right-xs"></text>
                            抽样项目
                        </view>-->
                        <view class="btn-item text-black text-bold">
                            <text class="cuIcon-tagfill lg"></text>
                            <text class="text-sm">抽样项目</text>
                        </view>
                    </view>
                    <view class="tool" v-if="item.ahTasksList[0].status ==='TASK_RUNNING'"
                          @tap="handleTaskDetail(item)">
                        <view class="cu-tag bg-blue light text-df text-bold">去抽样 >></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="cu-modal" :class="modalName=='Modal'?'show':''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content" style="width: 100%">抽样项</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <view class="cu-list menu" v-for="(item, index) in taskDetailList">
                        <div class="cu-form-group">
                            <view class="title">抽查样品名称</view>
                            <span class="text-gray">{{ item.productName }}</span>
                        </div>
                        <div class="cu-form-group">
                            <view class="title">检测参数</view>
                            <span class="text-gray">{{ item.productHazard }}</span>
                        </div>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>


<script>
    import {
        _taskList
    } from "./task-list-model.js";

    export default {

        data() {
            return {
                taskListData: [],
                taskTypeList: [],
                taskDetailList: [],
                taskStatus: [],
                modalName: null
            };
        },

        created() {
            this.getTaskType();
            this.getTaskStatus();
        },
        onShow(){
            this.getTask();
        },
        methods: {
            rediectHome() {
                uni.redirectTo({
                    url: "/pages/index/index"
                });
            },
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target;
                console.log(e.currentTarget.dataset.taskid);
                _taskList.getTaskSampleDetail(e.currentTarget.dataset.taskid, res => {

                    this.taskDetailList = res.data.data.records;
                });
            },
            hideModal(e) {
                this.modalName = null;
            },
            getTask() {
                _taskList.getTaskList(res => {
                    console.log(res);
                    this.taskListData = res.data.data.records;
                    console.log(this.taskListData);
                });

            },
            handleTaskDetail(item) {
                uni.navigateTo({
                    url: "/pages/sample-list/index?zoneId=" + item.zoneId +
                        "&sampleId=" + item.sampleId + "&taskId=" + item.taskId + "&checkId=" + item.checkId + "&status=" + item.status

                });
            },
            getTaskType() {
                _taskList.getDictionary("TASK_TYPE", res => {
                    this.taskTypeList = res.data.data;
                });
            },
            setTaskType(taskType) {
                const taskTypeList = this.taskTypeList;
                for (let i = 0; i < taskTypeList.length; i++) {
                    if (taskTypeList[i].itemValue === taskType) {
                        return taskTypeList[i].itemKey;
                    }
                }
            },
            getTaskStatus() {
                _taskList.getDictionary("SAMPLE_CHECK_STATUS", res => {
                    this.taskStatus = res.data.data;
                });
            },
            setTaskStatus(value) {
                console.log(value);
                let taskStatus = this.taskStatus;
                for (let i = 0; i < taskStatus.length; i++) {
                    if (taskStatus[i].itemValue === value) {
                        return taskStatus[i].itemKey;
                    }
                }
            },
            setItemColor(value) {
                let taskStatus = this.taskStatus;
                const statusItem = taskStatus.find(v => v.itemValue === value);
                let color;
                const name = statusItem.itemKey;
                if (name.includes("执行中")) {
                    color = "green";
                } else if (name.includes("已完成")) {
                    color = "blue";
                } else if (name.includes("已转发")) {
                    color = "orange";
                }
                return color;
            }

        }
    };
</script>

<style scoped>
    .detail view {
        height: 1.8em;
        line-height: 1.8em !important;
        border: none;
        color: gray;
    }
    .tools{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20upx;
    }

    .taskDetail {
        /*border: 1rpx solid #8799a3;*/
        box-shadow: 0 0 25upx #aaa;
        border-radius: 10rpx;
        overflow: hidden;
    }
    .btn-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .cu-tag{
        padding: 20upx;
        border-radius: 10upx;
    }
</style>