LabelWorkbook.vue

<template>
    <el-form :model="exportDataForm" :inline="true" size="small">
        <el-form-item label="公司：">
            <el-select v-model="exportDataForm.companyId" @change="onSelectCompanyInQuery">
                <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="exportDataForm.projectId" @change="onSelectProjectInQuery">
                <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="exportDataForm.imagePackageId">
                <el-option v-for="(value, name) in imagePackageMapInQuery" :label="name" :value="value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="日期：">
            <el-date-picker v-model="exportDataForm.time" type="daterange"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button @click="exportData" :loading="isLoading" type="primary">导出数据</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import {computed, defineComponent, reactive, ref, toRaw, toRefs, watch} from 'vue'
import imagePackageApi from '@/views/DataLabel/ImagePackage/ImagePackageApi'
import {cloneObject, filterEmptyValueInObject, formatDate} from '@/PublicUtil/PublicUtil'
import Cookies from 'js-cookie'
import projectApi from '@/views/Project/ProjectManagement/ProjectManagementApi'
import {getCompanyMap} from '@/Request/DictionaryRequest'

export default defineComponent(
    {
        setup() {
            // scalar
            const isLoading = ref()
            // sequence
            const imagePackageList = ref([])

            // mapping
            const exportDataForm = reactive(
                {
                    companyId: '',
                    projectId: '',
                    imagePackageId: '',
                    start: '',
                    end: '',

                    time: '',
                }
            )

            const companyMap = reactive({})
            const projectMapInQuery = reactive({})
            const imagePackageMapInQuery = reactive({})
            // function
            const exportData = function() {
                const rawData = toRaw(exportDataForm)
                const data = filterEmptyValueInObject(
                    {
                        accountId: rawData.companyId,
                        taskId: rawData.projectId,
                        packId: rawData.imagePackageId,
                        start: formatDate(rawData.time[0]),
                        end: formatDate(rawData.time[1]),
                    }
                )

                let url = ''
                for (const key in data)
                {
                    const value = data[key]
                    const t = `${key}` + '=' + value
                    url += '&' + t
                }

                window.open(
                    ` ${window._baseUrl}/reid/export`
                    +
                    `?token=${Cookies.get('token') + url}`
                )
            }

            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 getImagePackageMapByProjectId = async function(projectId) {
                const {data} = await imagePackageApi.getImagePackageList(
                    {
                        projectId: projectId
                    }
                )

                let map = {}
                for (const imagePackage of data)
                {
                    map[imagePackage.name] = imagePackage.id
                }
                return map
            }

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

            const onSelectProjectInQuery = async function(projectId) {
                exportDataForm.imagePackageId = ''
                const map = await getImagePackageMapByProjectId(parseInt(projectId))
                cloneObject(imagePackageMapInQuery, map)
            }

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

            initialize()

            return {
                // scalar
                isLoading,
                // sequence
                imagePackageList,
                // mapping
                exportDataForm,
                companyMap,
                projectMapInQuery,
                imagePackageMapInQuery,
                // function
                onSelectCompanyInQuery,
                onSelectProjectInQuery,
                exportData,
            }
        },
    }
)
</script>


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