jude-user-recharge/web/src/views/backend/company/index.vue

<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
            show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'columnDisplay']">
            <el-input class="form-input" v-model="baTable.table.filter!.name" @input="onSearchInput"
                placeholder="企业名称" clearable />
            <el-select class="form-input" v-model="baTable.table.filter!.status" @change="onSearchInput"
                placeholder="状态" clearable>
                <el-option label="正常" value="1" />
                <el-option label="禁用" value="0" />
            </el-select>
            <template #quickSearchPrepend>
                <el-button type="primary" @click="onAdd">添加</el-button>
            </template>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table>
            <template #status>
                <el-table-column prop="status" align="center" label="状态" min-width="150">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" />
                    </template>
                </el-table-column>
            </template>
            <template #operate>
                <el-table-column prop="operate" align="center" label="操作" min-width="150">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, } from 'vue'
import { cloneDeep } from 'lodash-es'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'

defineOptions({
    name: 'company/index',
})

const { t } = useI18n()

const baTable = new baTableClass(
    new baTableApi('/admin/company.index/'),
    {
        column: [
            { label: '编号', prop: 'id', align: 'center', width: 70 },
            {
                label: '企业名称',
                prop: 'name',
                align: 'center',
                minWidth: 120
            },
            {
                label: '创建人',
                prop: 'creator',
                align: 'center',
                minWidth: 150
            },
            {
                label: '状态',
                prop: 'status',
                align: 'center',
                render: 'slot',
                slotName: 'status',
                minWidth: 150
            },
            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                minWidth: 160
            },
            {
                label: '操作',
                align: 'center',
                render: 'slot',
                slotName: 'operate',
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined,],
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

// 设置假数据
baTable.getData = () => {
    baTable.table.loading = true
    // 模拟异步请求
    return new Promise<void>((resolve) => {
        setTimeout(() => {
            // 根据筛选条件过滤数据
            let filteredData = [
                {
                    id: 1,
                    name: '聚德科技',
                    creator: '张三',
                    status: '1',
                    create_time: '2025-01-10 10:00:00',
                },
                {
                    id: 2,
                    name: '棱镜科技',
                    creator: '李四',
                    status: '1',
                    create_time: '2025-01-11 09:00:00',
                },
                {
                    id: 3,
                    name: '测试公司',
                    creator: '王五',
                    status: '0',
                    create_time: '2025-01-12 11:00:00',
                },
                {
                    id: 4,
                    name: '示例企业',
                    creator: '赵六',
                    status: '1',
                    create_time: '2025-01-13 14:00:00',
                },
                {
                    id: 5,
                    name: '腾达科技',
                    creator: '刘七',
                    status: '0',
                    create_time: '2025-01-14 08:30:00',
                },

            ]

            // 根据筛选条件过滤
            const nameFilter = baTable.table.filter?.name
            const statusFilter = baTable.table.filter?.status

            if (nameFilter) {
                filteredData = filteredData.filter(item => 
                    item.name.includes(nameFilter.trim())
                )
            }

            if (statusFilter) {
                filteredData = filteredData.filter(item => 
                    item.status === statusFilter
                )
            }

            baTable.table.data = filteredData
            baTable.table.total = filteredData.length
            baTable.table.loading = false
            resolve()
        }, 300)
    })
}

provide('baTable', baTable)

// 搜索
const onSearchInput = () => {
    baTable.table.filter!.page = 1
    baTable.getData()
}

// 删除
const del = (row: TableRow) => {
    baTable.onTableAction('delete', { row })
}

const openForm = (type: 'Add' | 'Edit', row?: TableRow) => {
    if (type === 'Edit' && !row) return
    baTable.form.items = row ? cloneDeep(row) : cloneDeep(baTable.form.defaultItems)
    baTable.form.operate = type
    baTable.form.operateIds = row && baTable.table.pk ? [row[baTable.table.pk]] : []
}

const onAdd = () => openForm('Add')
const onEdit = (row: TableRow) => openForm('Edit', row)


onMounted(() => {
    baTable.mount()
    baTable.getData()
})
</script>

<style scoped lang="scss">
.form-input {
    width: 180px;
    margin:0 5px;
}
</style>