admin-sjzx/src/views/pqs/database/case/index.vue

<template>
    <div class="default-main">
        <!-- 案例库 -->
        <TableHeader ref="TableHeaderRef" datePicker>
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
                <el-button icon="el-icon-View" type="primary" @click="checkOutTheCriteria">查看常见治理措施</el-button>

                <!-- <el-upload :show-file-list="false" action="" :auto-upload="false" class="ml10" :on-change="choose"
                    v-if="information">
                    <el-button icon="el-icon-Top" type="primary">上传常见治理措施</el-button>
                </el-upload>
                <el-button icon="el-icon-Download" type="primary" class="ml10" @click="downloadTheReport">
                    下载常见治理措施
                </el-button> -->
            </template>
        </TableHeader>
        <Table ref="tableRef"></Table>
        <!-- 弹框 -->
        <PopupEdit ref="popupEditRef" @onSubmit="tableStore.index()" />
        <!-- 简介详情 -->
        <el-dialog v-model="dialogVisible" title="事件简介" width="60%">
            <span v-html="summary"></span>
        </el-dialog>
        <!-- 抽屉 -->
        <drawer ref="drawerRef" />
        <!-- 文件 -->
        <annex ref="annexRef" />
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import Table from '@/components/table/index.vue'
import PopupEdit from './components/form.vue'
import { libcaseBeleteyById } from '@/api/supervision-boot/database/index'
import drawer from './components/drawer.vue'
import annex from './components/annex.vue'
import { ElMessage } from 'element-plus'
import { uploadFile, getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
import { addStandardCase, queryStandardCase } from '@/api/supervision-boot/database/index'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
defineOptions({
    name: 'database/case'
})

const popupEditRef = ref()
const drawerRef = ref()
const TableHeaderRef = ref()
const annexRef = ref()
const dialogVisible = ref(false)
const summary = ref('')
const information = adminInfo.roleCode.includes('information_info')
const tableStore = new TableStore({
    url: '/supervision-boot/libcase/pageQuery',
    method: 'POST',
    column: [
        { title: '电能质量事件名称', field: 'name' },
        {
            title: '发生地点',
            field: 'location'
        },
        // {
        //     title: '发生事件',
        //     field: 'type'
        // },
        // {
        //     title: '事件经过',
        //     field: 'process'
        // },
        // {
        //     title: '处理措施',
        //     field: 'measures'
        // },
        // {
        //     title: '治理效果',
        //     field: 'effect'
        // },
        // {
        //     title: '事件简介',
        //     width: '140',
        //     render: 'buttons',
        //     buttons: [
        //         {
        //             name: 'view',
        //             title: '查看',
        //             type: 'primary',
        //             icon: 'el-icon-Plus',
        //             render: 'basicButton',
        //             click: row => {
        //                 dialogVisible.value = true
        //                 summary.value = row.summary
        //             }
        //         }
        //     ]
        // },
        {
            title: '操作',
            width: '200',
            render: 'buttons',
            buttons: [
                {
                    name: 'view',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        annexRef.value.open(row)
                    }
                },
                {
                    name: 'view',
                    title: '下载附件',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        annexRef.value.open(row.url)
                    }
                },
                {
                    name: 'edit',
                    title: '修改',
                    type: 'primary',
                    disabled: row => {
                        return !information
                    },
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        popupEditRef.value.open('修改案例', row)
                    }
                },
                {
                    name: 'delete',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    disabled: row => {
                        return !information
                    },
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        libcaseBeleteyById({ id: row.id }).then(res => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => { }
})

// 弹框
const addUser = () => {
    popupEditRef.value.open('新增案例')
}

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
    console.log('🚀 ~ libcaseBeleteyById ~ tableStore:', tableStore)
})
const checkOutTheCriteria = () => {
    queryStandardCase().then(res => {
        drawerRef.value.open(res.data)
    })
}

// 上传
const choose = (e: any) => {
    ElMessage.info('上传中,请稍等...')
    uploadFile(e.raw, '/supervision/').then((row: any) => {
        addStandardCase({ caseUrl: row.data.name }).then(res => {
            ElMessage.success('上传成功！')
        })
    })
    //
}
const downloadTheReport = () => {
    queryStandardCase().then(res => {
        let urls = res.data
        let name = urls.match(/\/([^/]+)\.(\w+)$/)[1]
        ElMessage.info('下载中,请稍等...')
        downloadFile({ filePath: urls }).then((res: any) => {
            let blob = new Blob([res], {
                type: urls.includes('.pdf')
                    ? 'application/pdf'
                    : urls.includes('.docx')
                        ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                        : urls.includes('.xls')
                            ? 'application/vnd.ms-excel'
                            : urls.includes('.xlsx')
                                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                : urls.includes('.png')
                                    ? 'image/png'
                                    : urls.includes('.jpeg')
                                        ? 'image/jpeg'
                                        : urls.includes('.jpg')
                                            ? 'image/jpg'
                                            : ''
            })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.href = url
            link.download = name
            document.body.appendChild(link)
            link.click()
            link.remove()
        })
    })
}
</script>
<style lang="scss"></style>