clientManageSystem/src/views/highSeasCustomer/index.vue

<template>
    <div class="main_container">
        <div class="page_item end_item hide_scrollbar" ref="scrollDom">
            <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '140px',flexShrink:'0'}"></div>
            
            <div  class="search_page" ref="searchDom">
                <DefaultSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleSearchChange">
                    <div v-if="userInfo.roles.includes('Admin')" class="content_right">
                        <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
                        <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
                    </div>
                </DefaultSelectSearch>

                <DefaultBlockSearch  v-else @searchChange="HandleSearchChange">
                    <div v-if="userInfo.roles.includes('Admin')" class="content_right">
                        <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
                        <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
                    </div>
                </DefaultBlockSearch>
            </div>

            <Table :tableColumns="publicSeasTableColumns" :tableData="tableData" 
                :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"
                :showPageSize="true" @paginationChange="HandlePaginationChange">

                <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>

                <template #paginationDesc>
                    <span>共 {{ totalNum }} 条数据</span>
                </template>
            </Table>
        </div>

        <!-- 新增/修改 学校弹窗 -->
        <SchoolFormDialog 
            :schoolTitle="schoolTitle" 
            v-model:visible="schoolVisible" 
            v-model:submitLoading="editFormDialogSubmitLoading"
            :defaultFormData="schoolDefaultFormData"
            @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>

        <!-- 删除弹窗 -->
        <DeleteCustomerDialog 
            :currentDeleteRow="currentDeleteRow"
            v-model:dialogVisible="deleteDialogVisible"
            @confirm="HandleDeleteDialogConfirm">
        </DeleteCustomerDialog>
    
    </div>
</template>


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

import DefaultBlockSearch from '@/components/HighSeasCustomerHeaderSearch/DefaultBlockSearch/index.vue'
import {stageOptions, regionOptions } from '@/components/HighSeasCustomerHeaderSearch/commonVar'
import {defaultPageSearchParams as searchParams} from '@/components/HighSeasCustomerHeaderSearch/commonVar'
import DefaultSelectSearch from '@/components/HighSeasCustomerHeaderSearch/DefaultSelectSearch/index.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 DeleteCustomerDialog from './components/DeleteCustomerDialog.vue';

import {batchImportFormItemList} from './formDialog'

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

import { getHeaderSearchParamsApi,
        getHighSeasCustomerListApi, 
        addHighSeasCustomerApi,
        importHighSeasCustomerApi,
        updateHighSeasCustomerApi,
        claimHighSeasCustomerApi,
} from '@/api/highSeasCustomer'

import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'

const router = useRouter()

const scrollDom = ref()
const searchDom = ref()
const scrollMsg  = useHeaderFixed(scrollDom,searchDom,140,'calc(100% - 250px - 20px)','calc(80px)')  //搜索栏是否需要在滚动的时候固定到顶部

const userInfo = computed(()=>{
    return JSON.parse(localStorage.getItem('userInfo') || '{}')
})

// 获取头部筛选数据  
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,
            }),
        }
    }) || []

    // 省份筛选项
    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
                    }),
                }
            }) || [],
        }
    }) || []
}
/** 头部筛选 变更 */
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 HandlePaginationChange = async (params)=>{
    const {type,val} = params
    if(type == 'currentPage'){
        currentPage.value = val
    }else if(type == 'pageSize'){
        pageSize.value = val
    }
    await GetTableData()
}

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 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
    schoolDefaultFormData.value = {}
}

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){
        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 currentDeleteRow = ref()
const OpenDeleteDialog = (row)=>{
    deleteDialogVisible.value = true
    currentDeleteRow.value = row
}
// 删除后执行的操作
const HandleDeleteDialogConfirm = async ()=>{
    currentDeleteRow.value = {}
    await GetTableData()
}

/**
 * 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)=>{
    sessionStorage.setItem('customerMsg',JSON.stringify(row))
    router.push(`highSeasCustomerDetail?id=${row.id}`)
}

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

</script>


<style lang="scss" scoped>
.end_item{
    overflow: auto;
    :deep(.page_table){
        overflow:initial;
    }
}

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

</style>