clientManageSystem/src/views/highSeasCustomer/index.vue

<template>
    <div class="main_container">
        <div class="page_item end_item">
             <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <SearchBlock :searchList="blockSearchList" @searchChange="HandleSearchChange"></SearchBlock>
                    </div>
                    <div class="content_right">
                        <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
                        <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
                    </div>
                </div>
            </div>
            <FormSearchGroup :searchList="formSearchList" @searchChange="HandleSearchChange"></FormSearchGroup>
            <Table :tableColumns="publicSeasTableColumns" :tableData="tableData" 
                :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum">

                <template #num="{row,currentIndex}">
                    {{ currentIndex + pageSize * (currentPage - 1) }}
                </template>
                
                <template #operation="{row}">
                    <div class="table_row_option">
                        <span class="button_editor" @click="ClaimCustomer(row)">认领</span>
                        <span class="button_editor" @click="OpenSchoolFormDialog(row)">编辑</span>
                        <span class="button_editor" @click="GoToDetail(row)">详情</span>
                        <span class="el_button_delete" @click="OpenDeleteDialog(row)">删除</span>
                    </div>
                </template>
            </Table>
        </div>

        <!-- 新增/修改 学校弹窗 -->
        <SchoolFormDialog 
            :schoolTitle="schoolTitle" 
            v-model:visible="schoolVisible" 
            v-model:editFormDialogSubmitLoading="editFormDialogSubmitLoading"
            :defaultFormData="schoolDefaultFormData"
            :dynamicFormItmOpt="dynamicFormItmOpt"
            @confirm="HandleSchoolDialogConfirm">
        </SchoolFormDialog>


        <!--  批量导入 弹窗 -->
        <FormDialog class="batch_import_form" width="548px" 
            title="批量导入" :visible="batchImportVisible" 
            :submitLoading="batchImportSubmitLoading" 
            :defaultFormData="defaultImportFormData" 
            :formItemList="batchImportFormItemList"
            @fileUpload="HandleFileUplaod"
            @close="CloseBatchImportDialog"
            @confirm="HandleBatchImportComfirm">
            <template #templateFile>
                <el-button class="button_refresh" @click="HandleDownloadTemplate">下载模板</el-button>
            </template>
            <template #tableTemplate>
                <Table :hidePagination="true" :tableColumns="templateTableColumns" :tableData="[{},{}]" />
                <div style="font-size: 12px;">用于分析同一份试卷内不同试卷类型的得分、排名等情况。可下载模块进行填写后导入。</div>
            </template>
        </FormDialog>

        <!-- 删除弹窗 -->
        <Dialog :visible="deleteDialogVisible" 
            :submitLoading="deleteDialogSubmitLoading"
            @close="CloseDeleteDialog"
            @confirm="HandleDeleteDialogConfirm">
        </Dialog> 
    
    </div>
</template>


<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {ElMessage} from 'element-plus'

import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import {formSearchList} from './formSearchGroup';
import SearchBlock from '@/baseComponents/SearchBlock.vue';
import Table from '@/baseComponents/Table.vue';
import {publicSeasTableColumns,templateTableColumns} from './table'

import SchoolFormDialog from '@/components/SchoolFormDialog/index.vue'
import FormDialog from '@/baseComponents/FormDialog.vue';

import {batchImportFormItemList} from './formDialog'

import {HandleExportExcel} from '@/utils/exportExcelData'

import { getHeaderSearchParamsApi,
        getHighSeasCustomerListApi, 
        addHighSeasCustomerApi,
        importHighSeasCustomerApi,
        updateHighSeasCustomerApi,
        deleteHighSeasCustomerApi,
        claimHighSeasCustomerApi,

    } from '@/api/highSeasCustomer'
import Dialog from '@/baseComponents/Dialog.vue';


const router = useRouter()



/** 1. 头部筛选 有关操作 */
const searchParams = ref({
    stage:'all',
    province:'all',
    area:'all',
    queryStr:'',
})
// 获取头部筛选数据
const stageOptions = ref([])
const regionOptions = ref([])
const blockSearchList = computed(()=>{
    let areaOptions = []
    if(searchParams.value.province !== 'all'){
        areaOptions = regionOptions.value.find(item=>item.value === searchParams.value.province)?.subData || []
    }else{
        areaOptions = regionOptions.value.map(item=>{
            return item.subData || []
        }).flat()
    }
    return [
        {
            label: '学段',
            key: 'stage',
            type: 'single',
            defaultValue: searchParams.value.stage,
            options: [
            { label: '全部', value: 'all' },
            ...(stageOptions.value),
            ],
        },
        {
            label: '省份',
            key: 'province',
            type: 'single',
            options: [
                { label: '全部', value: 'all' },
                ...(regionOptions.value),
            ],
            defaultValue: searchParams.value.province,
        },
        {
            label: '地区',
            key: 'area',
            type: 'single',
            options: [
                { label: '全部', value: 'all' },
                ...(areaOptions),
            ],
            defaultValue: searchParams.value.area,
        }
    ]
});
// 获取头部筛选数据
const GetHeaderSearchParams = async ()=>{
    let res = await getHeaderSearchParamsApi()
    const {regionData,stageData} = res.data || {}
    // 学段筛选选项
    stageOptions.value = stageData?.map(item=>{
        return{
            label:item.name,
            value:JSON.stringify({
                label:item.name,
                value:item.id,
            }),
        }
    })?.slice(1) || []

    // 省份筛选项
    regionOptions.value = regionData?.map(item=>{
        return{
            label:item.name,
            value:JSON.stringify({
                label:item.name,
                value:item.id
            }),
            subData:item.subData?.map(sub=>{
                return {
                    label:sub.name,
                    value:JSON.stringify({
                        label:sub.name, 
                        value:sub.id
                    }),
                }
            }).slice(1) || [],
        }
    })?.slice(1) || []
}
/** 头部筛选 变更 */
const HandleSearchChange = async (params:any,key:string)=>{
    searchParams.value = {
        ...searchParams.value,
        ...params
    }
    if(key === 'province'){
        searchParams.value.area = 'all'
    }
    await GetTableData()
}


 /** 2. 表格数据 有关操作 */
const pageSize = ref(20)
const currentPage = ref(1)
const totalNum = ref(0)
// 表格数据
const tableData = ref([])

const GetTableData = async ()=>{
    let params = {
        queryStr: searchParams.value.queryStr,
        stageId: searchParams.value.stage === 'all' ? '' : JSON.parse(searchParams.value.stage || '{}')?.value,
        provinceId: searchParams.value.province === 'all' ? '' : JSON.parse(searchParams.value.province || '{}')?.value,
        cityId: searchParams.value.area === 'all' ? '' : JSON.parse(searchParams.value.area || '{}')?.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }
    let res = await getHighSeasCustomerListApi(params)
    tableData.value = res?.data?.records || []
    totalNum.value = res.data.total || 0
}


/**
 * 3. 新增/修改 学校弹窗有关数据
 */
const schoolVisible = ref(false)
const schoolTitle = ref('')
const schoolDefaultFormData = ref({})
const editFormDialogSubmitLoading = ref(false)

// 动态变更的表单下拉项
const dynamicFormItmOpt = computed(()=>{
    return [
        {
            key: 'schoolStage',
            selectList:stageOptions.value,
        },
        {
            key: 'provinceArea',
            unionSelectList: [
                {
                    key: 'province',
                    selectList:regionOptions.value,
                },
            ]
        },
    ]
})
const OpenSchoolFormDialog = (row?:any)=>{
    if(row){
        schoolTitle.value = '编辑学校'
        schoolDefaultFormData.value = {
            ...row,
            schoolStage:JSON.stringify({
                label:row.stageName,
                value:row.stageId
            }),
            provinceArea:{
                province:JSON.stringify({
                    label:row.provinceName,
                    value:row.provinceId
                }),
                district:JSON.stringify({
                    label:row.cityName,
                    value:row.cityId
                }),
            },
        }
    }else{
        schoolTitle.value = '新增学校'
    }
    schoolVisible.value = true
}

const CloseSchoolFormDialog = ()=>{
    editFormDialogSubmitLoading.value = false
    schoolVisible.value = false
}

const HandleSchoolDialogConfirm = async (params:any)=>{
    editFormDialogSubmitLoading.value = true
    const {formData,formRef} = params
    console.log('表单的提交信息',formData)
    let transferParams = {
        id: formData.id,
        name: formData.name,
        stageId: JSON.parse(formData.schoolStage || '{}')?.value,
        stageName: JSON.parse(formData.schoolStage || '{}')?.label,
        provinceId: JSON.parse(formData.provinceArea.province || '{}')?.value,
        provinceName: JSON.parse(formData.provinceArea.province || '{}')?.label,
        cityId: JSON.parse(formData.provinceArea.district || '{}')?.value,
        cityName: JSON.parse(formData.provinceArea.district || '{}')?.label,
        address: formData.address,
    }
    let res = undefined
    try{
        if(formData.id){
            // 修改
            res = await updateHighSeasCustomerApi(transferParams) 
        }else{
            // 新增
            res = await addHighSeasCustomerApi(transferParams) 
        }
    }catch{}

    if(res?.code == 200){
        schoolDefaultFormData.value = {}
        CloseSchoolFormDialog()
        await GetTableData()
    }else{
        editFormDialogSubmitLoading.value = false
    }
}





/**
 * 4. 批量导入弹窗有关数据
 */
const batchImportVisible = ref(false)
const batchImportSubmitLoading = ref(false)
const defaultImportFormData = ref({})
// 打开弹窗
const OpenBatchImportDialog = ()=>{
    batchImportVisible.value = true   
}
// 关闭弹窗
const CloseBatchImportDialog = ()=>{
    batchImportSubmitLoading.value = false
    batchImportVisible.value = false
}
// 导入确认
const HandleBatchImportComfirm = async (params:any)=>{
    const {formData,formRef} = params 
    // console.log('表单信息',formData)

    if(!formData?.file?.url){
        ElMessage.warning('请先上传文件')
        return
    }

    batchImportSubmitLoading.value = true
    let fileFormData = new FormData()
    fileFormData.append('file',formData.file.url)

    let res = await importHighSeasCustomerApi(fileFormData)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        CloseBatchImportDialog()
        await GetTableData()
    }else{
        batchImportSubmitLoading.value = false
    }
}
// 下载模板
const HandleDownloadTemplate = async ()=>{
   await HandleExportExcel(templateTableColumns.value,[],'新增学校_批量导入模板')
}
// 获取上传文件
const HandleFileUplaod = (params)=>{
    const {key,file} = params
    console.log('file',file)
    defaultImportFormData.value.file = {
        url:file.raw,
        name:file.name
    }
}


/**
 * 5. 删除弹窗 有关数据
 */
const deleteDialogVisible = ref(false)
const deleteDialogSubmitLoading = ref(false)
const currentDeleteRow = ref()
const OpenDeleteDialog = (row)=>{
    deleteDialogVisible.value = true
    currentDeleteRow.value = row
}
const CloseDeleteDialog = ()=>{
    deleteDialogVisible.value = false
    deleteDialogSubmitLoading.value = false
}
// 删除确认
const HandleDeleteDialogConfirm = async ()=>{
    deleteDialogSubmitLoading.value = true
    let res = await deleteHighSeasCustomerApi(currentDeleteRow.value.id)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        CloseDeleteDialog()
        await GetTableData()
    }else{
        deleteDialogSubmitLoading.value = false
    }
}

/**
 * 6.认领有关接口调用
 */
const ClaimCustomer = async (row)=>{
    let res = await claimHighSeasCustomerApi(row.id)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        await GetTableData()
    }
}


/** 7.跳转详情 */
const GoToDetail = (row)=>{
    router.push(`highSeasCustomerDetail?id=${row.id}`)
}

onMounted( async()=>{
    await GetHeaderSearchParams()
    await GetTableData()
})

</script>


<style lang="scss" scoped>
.end_item{
    gap:16px;
    .search_content{
        align-items: flex-start;
    }
}

.batch_import_form{
    :deep(.el-dialog__body){
        min-height: 345px !important;
    }
}

</style>