ClassInsideClean.vue

<template>
    <el-container class="DataClean">
        <el-header height="auto">
            <span class="title-text">类内清洗</span>
            <div style="display: flex; justify-content:flex-end">
                <el-button @click="goBack">返回上一页</el-button>
            </div>
            <div style="font-size: 20px">任务名：{{ name }}</div>
            <div style="font-size: 20px">批次：{{ packName }}</div>
            <el-menu mode="horizontal" @select="onMenuSelect" :default-active="''">
                <el-menu-item :index="'0'">
                    未处理
                </el-menu-item>
                <el-menu-item :index="'1'">
                    已处理
                </el-menu-item>
                <el-menu-item :index="''">
                    全部
                </el-menu-item>
            </el-menu>
        </el-header>

        <el-main>
            <el-table :data="dataCleanList" v-loading="isLoading">
                <el-table-column prop="personId" label="ID" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                        {{ getStatusTitle(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                    <template #default="scope">
                        <el-button @click="gotoHandle(scope.row)" type="text">进入处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="onPageNumChange"
                           @size-change="onPageSizeChange"
                           :current-page="pageNum"
                           :page-size="pageSize"
                           :total="total"
                           :page-sizes="[10, 20, 40, 80]"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align:center"
            >
            </el-pagination>

        </el-main>
    </el-container>
</template>

<script>
import {computed, onMounted, reactive, ref, toRaw, toRefs, watch} from "vue"
import {
    filterEmptyValueInObject, goBack,
     resetForm
} from "@/PublicUtil/PublicUtil"
import classInsideCleanApi from './ClassInsideClean'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'
import {getImagePackageMap, getUserNameIdMap} from '@/Request/DictionaryRequest'
import router from '@/router'
import {useRoute, useRouter} from 'vue-router'

export default {
    setup() {
        // scalar
        const packId = useRoute().query.packId
        const name = useRoute().query.name
        const packName = useRoute().query.packName
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const isLoading = ref(false)
        const addDataCleanVisible = ref(false)
        const editDataCleanVisible = ref(false)

        const dataCleanList = ref([])

        const ref_addDataCleanForm = ref()
        const ref_editDataCleanForm = ref()
        const router = useRouter()
        let selectedMenuIndex = ''
        // computed

        // mapping
        const rules = reactive(
            {}
        )

        const userNameIdMap = reactive({})
        const imagePackageMap = reactive({})

        const addDataCleanForm = reactive(
            {
                packId: '',
                name: '',
            }
        )

        const editDataCleanForm = reactive(
            {
                packId: '',
                name: '',
            }
        )

        // function
        const onPageNumChange = function(num) {
            pageNum.value = num
            getDataCleanList()
        }
        const onPageSizeChange = function(size) {
            pageNum.value = 1
            pageSize.value = size
            getDataCleanList()
        }

        const confirmAddDataClean = function() {
            ref_addDataCleanForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        addDataCleanVisible.value = false
                        const rawData = toRaw(addDataCleanForm)
                        const data = filterEmptyValueInObject(rawData)
                        classInsideCleanApi.addDataClean(data).then(
                            (r) => {

                                const message = r.msg
                                ElMessage(`${message}`)

                                getDataCleanList()
                            }
                        )
                    }
                }
            )
        }

        const editDataClean = function(row) {
            editDataCleanVisible.value = true
            editDataCleanForm.id = row.id
            editDataCleanForm.name = row.name
            editDataCleanForm.managerId = row.managerId
            editDataCleanForm.description = row.description
        }

        const confirmEditDataClean = function() {
            ref_editDataCleanForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(editDataCleanForm)
                        const data = filterEmptyValueInObject(
                            {
                                name: rawData.name,
                                managerId: rawData.managerId,
                                description: rawData.description,
                            }
                        )
                        classInsideCleanApi.editDataClean(rawData.id, data).then(
                            (r) => {
                                const message = r.msg

                                getDataCleanList()
                                ElMessage(`${message}`)
                            }
                        )
                        editDataCleanVisible.value = false
                    }
                }
            )
        }

        const confirmDeleteDataClean = function(id) {
            ElMessageBox.confirm(
                "删除后此数据清洗相关数据全部都会消失，你确定要删除吗？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    classInsideCleanApi.deleteDataClean(id).then(
                        (r) => {
                            const message = r.msg

                            getDataCleanList()
                            ElMessage(`${message}`)
                        }
                    )
                }
            )
        }

        const addDataClean = function() {
            resetForm(addDataCleanForm)
            addDataCleanVisible.value = true
        }

        const getDataCleanList = function() {
            isLoading.value = true
            classInsideCleanApi.getClassInsideCleanList({
                packId: packId,
                status: selectedMenuIndex,
                pageNum: pageNum.value,
                pageSize: pageSize.value,
            }).then(
                ({data}) => {
                    isLoading.value = false
                    dataCleanList.value = data.list
                    total.value = data.total
                }
            )
        }

        const getStatusTitle = function(status) {
            switch (status)
            {
                case 0:
                {
                    return '未处理'
                }
                case 1:
                {
                    return '已处理'
                }
                case 2:
                {
                    return '处理中'
                }
                default:
                {
                    break
                }
            }
        }

        const getTypeTitle = function(status) {
            switch (status)
            {
                case 1:
                {
                    return '类内清洗'
                }
                case 2:
                {
                    return '类间清洗'
                }
                {
                    break
                }
            }
        }

        const gotoHandle = function(row) {
            router.push(
                {
                    path: '/ClassInsideJudgePerson',
                    query: {
                        personId: row.personId,
                        packId: row.packId,
                        name: name,
                        packName: packName,
                    }
                }
            )

        }

        const onMenuSelect = function(index) {
            selectedMenuIndex = index
            getDataCleanList()
        }

        const getSameTitle = function(same) {
            switch (same)
            {
                case 0:
                {
                    return '不是'
                }
                case 1:
                {
                    return '是'
                }
                default:
                {

                    break
                }
            }
        }

        // const goBack = function() {
        //     router.push(
        //         {
        //             path: '/DataClean/DataClean',
        //         }
        //     )
        // }

        const initialize = function() {
            getDataCleanList()
            getUserNameIdMap(userNameIdMap)
            getImagePackageMap(imagePackageMap)
        }

        initialize()

        return {
            // scalar
            name,
            packName,
            pageNum,
            pageSize,
            total,
            isLoading,
            dataCleanList,
            ref_addDataCleanForm,
            ref_editDataCleanForm,
            addDataCleanVisible,
            editDataCleanVisible,
            // mapping
            userNameIdMap,
            imagePackageMap,
            addDataCleanForm,
            editDataCleanForm,
            rules,
            // function
            onPageNumChange,
            onPageSizeChange,
            addDataClean,
            editDataClean,
            confirmEditDataClean,
            confirmAddDataClean,
            confirmDeleteDataClean,
            gotoHandle,
            getStatusTitle,
            getTypeTitle,
            getSameTitle,
            onMenuSelect,
            goBack,
        }
    },
}
</script>
<style lang="less" scoped>
@import "./ClassInsideClean.less";
</style>