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

<template>
    <div class="default-main">
        <!-- 模版 -->
        <TableHeader ref="TableHeaderRef" datePicker>
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addUser">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef"></Table>
        <!-- 弹框 -->
        <PopupEdit ref="popupEditRef" @onSubmit="tableStore.index()" />
    </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 { libtemplateDel } from '@/api/supervision-boot/database/index'
import { ElMessage } from 'element-plus'
import Table from '@/components/table/index.vue'
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
import PopupEdit from './components/form.vue'
defineOptions({
    name: 'database/stencil'
})

const popupEditRef = ref()

const TableHeaderRef = ref()

const tableStore = new TableStore({
    url: '/supervision-boot/libtemplate/pageQuery',
    method: 'POST',
    column: [
        { title: '模版名称', field: 'name' },
        {
            title: '创建时间',
            field: 'createTime'
        },
        {
            title: '操作',
            width: '280',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '预览 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        window.open(window.location.origin + '/#/previewFile?' + row.url)
                    }
                },
                {
                    name: 'edit',
                    title: '下载 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        downloadTheReport(row.url)
                    }
                },
                {
                    name: 'edit',
                    title: '修改 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        popupEditRef.value.open('修改模版', row)
                    }
                },
                {
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        libtemplateDel({ id: row.id }).then(() => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => {}
})

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

// 下载报告
const downloadTheReport = (url: string) => {
    let urls = url
    let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
    downloadFile({ filePath: url }).then((res: any) => {
        let blob = new Blob([res], {
            type: urls.includes('.pdf')
                ? 'application/pdf'
                : urls.includes('.docx')
                ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                : ''
        })
        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()
    })
}

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
})
</script>
<style lang="scss"></style>