shuhi-ui/src/views/data/universities/index.vue

f<template>
    <ele-page flex-table>
        <universities-search @search="reload" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'data:universities:add'"
                    @click="handleUpdate()"
                >
                    新增高校
                </el-button>
                <el-button
                    type="danger"
                    plain
                    :icon="DeleteOutlined"
                    v-permission="'data:universities:batchDelete'"
                    @click="handleBatchDelete()"
                >
                    批量删除
                </el-button>
                <el-button
                    type="success"
                    plain
                    v-permission="'data:universities:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出EXCEL
                </el-button>
            </template>

            <template #schoolTag="{ row }">
                <dict-data
                    code="school_tag"
                    type="tag"
                    :model-value="row.schoolTag"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'data:universities:update'"
                        @click="handleUpdate(row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'data:universities:delete'"
                        @click="handleBatchDelete(row)"
                    >
                        删除
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        v-permission="'data:universities:schoolTag'"
                        @click="handleSchoolTag(row)"
                    >
                        {{ row.schoolTag == 2 ? '标为正常' : '标为盗版' }}
                    </el-button>
                </div>
            </template>
        </common-table>

        <universities-edit ref="editRef" @success="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import {
        PlusOutlined,
        DeleteOutlined,
        DownloadOutlined
    } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import universitiesEdit from '@/views/data/universities/components/universities-edit.vue';
    import universitiesSearch from '@/views/data/universities/components/universities-search.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import { useRouter } from 'vue-router';
    import request from '@/utils/request';

    defineOptions({ name: 'Universities' });
    const [schoolLevelDicts, schoolTagDicts] = useDictData([
        'school_level',
        'school_tag'
    ]);

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '学校名称',
            prop: 'schoolName',
            align: 'center',
            minWidth: 140
        },
        { label: '省份', prop: 'provinceName', align: 'center' },
        { label: '所在市', prop: 'cityName', align: 'center' },
        { label: '主管部门', prop: 'departmentName', align: 'center' },
        {
            label: '办学层次',
            prop: 'schoolLevel',
            align: 'center',
            formatter: (row) =>
                schoolLevelDicts.value.find(
                    (d) => d.dictValue == row.schoolLevel
                )?.dictLabel
        },
        {
            label: '标记',
            prop: 'schoolTag',
            align: 'center',
            slot: 'schoolTag',
            formatter: (row) =>
                schoolTagDicts.value.find((d) => d.dictValue == row.schoolTag)
                    ?.dictLabel
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 240,
            align: 'center',
            slot: 'action'
        }
    ]);

    let router = useRouter();
    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/baseinfo/schoolInfo/list',
        exportUrl: '/baseinfo/schoolInfo/export',
        fileName: '高校列表',
        cacheKey: 'universitiesTable'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id).join(',');
        let url = `/baseinfo/schoolInfo/removeById/${ids}`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'post',
            url,
            row
        });
    }
    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('高校列表');
    }

    //申请恢复订单
    function handleSchoolTag(row) {
        let message = row.schoolTag == 1 ? '确认标为盗版？' : '确认标为正常？';
        let data = JSON.parse(JSON.stringify(row));
        data.schoolTag = row.schoolTag == 1 ? 2 : 1;
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => request.post('/baseinfo/schoolInfo/edit', data)
        });
    }

    //编辑页面
    const editRef = ref(null);
    function handleUpdate(row) {
        editRef.value?.handleOpen(row);
    }
</script>