ImagePackage.vue

<template>
    <a-layout class="ImagePackage">
        <el-form :model="queryImagePackageForm" :inline="true" size="small">
            <el-form-item label="公司：">
                <el-select v-model="queryImagePackageForm.companyId" @change="onSelectCompanyInQuery" style="width: 100%">
                    <el-option v-for="(name, value) in companyMap" :label="name" :value="value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目：">
                <el-select v-model="queryImagePackageForm.projectId" style="width: 100%">
                    <el-option v-for="(value, name) in projectMapInQuery" :label="name" :value="value"></el-option>
                </el-select>
            </el-form-item>
            <!--            <el-form-item label="图包：">-->
            <!--                <el-select v-model="queryImagePackageForm.imagePackageId" style="width: 100%">-->
            <!--                    <el-option v-for="(value, key) in imagePackageMapInQuery" :label="value" :value="key"></el-option>-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item>
                <el-button @click="confirmQueryImagePackage" type="primary">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row v-for="(row, index) in pagedTableData" v-loading="isLoading">
            <el-col :span="6" v-for="(item, index) in row" style="cursor: pointer;">
                <div class="image-package">
                    <el-row @click="gotoPeopleLabel(item.id)">
                        <el-col :span="4">
                            <img :src="require('./image/imagePackage.svg')"/>
                        </el-col>
                        <el-col :span="20">
                            <div class="name">
                                <div class="flex-vertical-center flex-horizontal-center">
                                    图包： {{ item?.name }}
                                </div>
                                <div class="flex-vertical-center flex-horizontal-center">
                                    公司： {{ companyMap[item?.task?.accountId] }}
                                </div>
                                <div class="flex-vertical-center flex-horizontal-center">
                                    项目： {{ item?.task?.name }}
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <a-button v-if="isDownloadShowed" @click="downloadCompletedImages(item.id)" type="link">下载</a-button>
                </div>
            </el-col>
        </el-row>
    </a-layout>
</template>
<script>
import {computed, defineComponent, reactive, ref, toRaw, toRefs, watch} from 'vue'
import {useRouter} from 'vue-router'
import peopleLabelApi from '@/views/DataLabel/PeopleLabel/PeopleLabelApi'
import {cloneObject, getKeyByValueInObject} from '@/PublicUtil/PublicUtil'
import imagePackageApi from '@/views/DataLabel/ImagePackage/ImagePackageApi'
import Cookies from 'js-cookie'
import {getCompanyMap} from '@/Request/DictionaryRequest'
import projectApi from '@/views/Project/ProjectManagement/ProjectManagementApi'

export default defineComponent(
    {
        setup() {
            const router = useRouter()
            const peopleFolderList = ref([])
            const imagePackageList = ref([])
            const isLoading = ref(false)
            const isDownloadShowed = ref(localStorage.getItem('currentUserType') === '0')

            const pagedTableData = computed(
                () => {
                    let baseArray = imagePackageList.value
                    let len = baseArray.length
                    let n = 4 //每行显示4个
                    let lineNum = len % n === 0 ? len / n : Math.floor((len / n) + 1)
                    let result = []
                    for (let i = 0; i < lineNum; i++)
                    {
                        // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
                        let temp = baseArray.slice(i * n, i * n + n)
                        result.push(temp)
                    }
                    return result
                }
            )
            // mapping
            const queryImagePackageForm = reactive(
                {
                    companyId: '',
                    projectId: '',
                    imagePackageId: '',
                }
            )
            const companyMap = reactive({})
            const projectMapInQuery = reactive({})
            const imagePackageMapInQuery = reactive({})

            const downloadCompletedImages = function(packId) {
                window.open(
                    ` ${window._baseUrl}/reid/downloadLabeledPicAsZip`
                    +
                    `?packId=${packId}&token=${Cookies.get('token')}`
                )
            }

            const gotoPeopleLabel = function(packId) {
                router.push(
                    {
                        path: '/DataLabel/PeopleLabel',
                        query: {
                            packId: packId,
                            pageNum: 1,
                        }
                    }
                )
            }

            const reset = function() {
                for (let key in queryImagePackageForm)
                {
                    queryImagePackageForm[key] = ''
                }
            }

            const getProjectMapByCompanyId = async function(companyId) {
                const {data} = await projectApi.getProjectList(companyId)

                let map = {}
                for (const project of data)
                {
                    map[project.name] = project.id
                }
                return map
            }
            //
            // const getFloorMapByprojectId = function(projectId) {
            // }

            const onSelectCompanyInQuery = async function(companyId) {
                queryImagePackageForm.projectId = ''
                queryImagePackageForm.imagePackageId = ''
                const map = await getProjectMapByCompanyId(parseInt(companyId))
                cloneObject(projectMapInQuery, map)
            }

            // const onSelectProjectInQuery = function(projectId) {
            //     queryImagePackageForm.imagePackageId = ''
            //     cloneObject(imagePackageMapInQuery, getFloorMapByprojectId(parseInt(projectId)))
            // }

            const confirmQueryImagePackage = function() {
                isLoading.value = true
                const rawData = toRaw(queryImagePackageForm)
                const data = {
                    companyId: rawData.companyId,
                    projectId: rawData.projectId,
                }

                imagePackageApi.getImagePackageList(data).then(
                    (r) => {
                        isLoading.value = false
                        imagePackageList.value = r.data
                    }
                )
            }

            const initialize = function() {
                confirmQueryImagePackage()
                getCompanyMap(companyMap)
            }

            initialize()

            return {
                // scalar
                isLoading,
                isDownloadShowed,
                // sequence
                peopleFolderList,
                pagedTableData,
                // mapping
                queryImagePackageForm,
                companyMap,
                projectMapInQuery,
                imagePackageMapInQuery,
                // function
                reset,
                onSelectCompanyInQuery,
                // onSelectProjectInQuery,
                gotoPeopleLabel,
                downloadCompletedImages,
                confirmQueryImagePackage,
                getKeyByValueInObject,
            }
        },
    }
)
</script>


<style lang="less" scoped>
@import "./ImagePackage.less";
</style>