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

<template>
    <div class="default-main">
        <!-- 模版 -->
        <TableHeader ref="TableHeaderRef" >
            <template #select>
                <el-form-item label="名称">
                    <el-input v-model="tableStore.table.params.searchValue" clearable
                        placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
                    </el-form-item>


            </template>

            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</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'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
defineOptions({
    name: 'database/stencil'
})
const information = adminInfo.roleCode.includes('information_info')
const popupEditRef = ref()
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
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',
                    // disabled: row => {
                    //     return !VITE_FLAG
                    // },
                    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',
                    disabled: row => {
                        return !information
                    },
                    click: row => {
                        popupEditRef.value.open('修改模版', row)
                    }
                },
                {
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    disabled: row => {
                        return !information
                    },
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        libtemplateDel({ id: row.id }).then(() => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => { }
})
tableStore.table.params.searchValue=''
// 弹框
const addUser = () => {
    popupEditRef.value.open('新增模版')
}

// 下载报告
const downloadTheReport = (url: any) => {
    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'
                    : 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()
    })
}

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