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">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef"></Table>
        <!-- 弹框 -->
        <PopupEdit ref="popupEditRef" />
    </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'
defineOptions({
    name: 'database/case'
})

const popupEditRef = ref()

const TableHeaderRef = ref()

const tableStore = new TableStore({
    url: '/user-boot/dept/deptTree',
    method: 'POST',
    column: [
        { title: '电能质量事件名称', field: 'name' },
        {
            title: '发生事件',
            field: 'name1'
        },
        {
            title: '发生地点',
            field: 'name2'
        },
        {
            title: '处理措施',
            field: 'name3'
        },
        {
            title: '治理效果',
            field: 'name4'
        }
    ],
    loadCallback: () => {
        tableStore.table.data = [
            {
                name: '测试名称',
                name1: 'xxx',
                name2: 'XXX',
                name3: '1月',
                name4: '单体系统',
                name5: '1'
            },
            {
                name: '测试名称',
                name1: 'xxx',
                name2: 'XXX',
                name3: '1月',
                name4: '单体系统',
                name5: '0'
            }
        ]
    }
})

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

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