<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModal } from '@jnpf/ui/modal';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { onlineUtils } from '#/utils/jnpf';
|
import { $t } from '#/locales';
|
|
defineOptions({ name: 'MyAppDemo' });
|
|
const { createMessage } = useMessage();
|
const [registerModal, { openModal: openFormModal, closeModal }] = useModal();
|
|
// 模拟数据（实际项目替换为 #/api/xxx 的接口）
|
interface DemoRow {
|
id: string;
|
fullName: string;
|
status: number;
|
creatorTime: string;
|
}
|
const mockData: DemoRow[] = [
|
{ id: '1', fullName: '示例记录 A', status: 1, creatorTime: '2026-06-01 10:00:00' },
|
{ id: '2', fullName: '示例记录 B', status: 0, creatorTime: '2026-06-02 14:30:00' },
|
{ id: '3', fullName: '示例记录 C', status: 1, creatorTime: '2026-06-03 09:15:00' },
|
];
|
const tableData = ref<DemoRow[]>([...mockData]);
|
|
const columns: BasicColumn[] = [
|
{ title: '名称', dataIndex: 'fullName', minWidth: 200 },
|
{ title: '状态', dataIndex: 'status', width: 100, align: 'center' },
|
{ title: '创建时间', dataIndex: 'creatorTime', width: 180 },
|
];
|
|
// 搜索表单（与内置低代码列表页同一套 BasicForm）
|
const [registerSearchForm, { getFieldsValue }] = useForm({
|
labelWidth: 80,
|
compact: true,
|
showAdvancedButton: false,
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: { placeholder: $t('common.enterKeyword'), submitOnPressEnter: true },
|
},
|
],
|
});
|
|
// useVxeTable：本地数据用 dataSource；immediate:false 避免空 api 触发请求
|
const [registerTable] = useVxeTable({
|
columns,
|
immediate: false,
|
dataSource: tableData,
|
actionColumn: { width: 120, title: '操作', dataIndex: 'action' },
|
});
|
|
function reload() {
|
const { keyword } = getFieldsValue() || {};
|
tableData.value = keyword ? mockData.filter((o) => o.fullName.includes(keyword)) : [...mockData];
|
}
|
|
function getTableActions(record: DemoRow): ActionItem[] {
|
return [
|
{ label: $t('common.editText'), onClick: addOrUpdateHandle.bind(null, record) },
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: { onOk: handleDelete.bind(null, record.id) },
|
},
|
];
|
}
|
|
function handleDelete(id: string) {
|
tableData.value = tableData.value.filter((o) => o.id !== id);
|
createMessage.success('删除成功');
|
}
|
|
// 编辑弹窗：BasicModal + BasicForm，与低代码页面弹窗一致
|
const editId = ref('');
|
const getTitle = computed(() => (editId.value ? $t('common.editText') : $t('common.addText')));
|
const [registerEditForm, { setFieldsValue, validate, resetFields }] = useForm({
|
labelWidth: 80,
|
schemas: [
|
{ field: 'fullName', label: '名称', component: 'Input', componentProps: { placeholder: '请输入' }, rules: [{ required: true, message: '必填' }] },
|
{ field: 'status', label: '状态', component: 'Switch', defaultValue: 1 },
|
],
|
});
|
|
function addOrUpdateHandle(row?: DemoRow) {
|
resetFields();
|
editId.value = row?.id || '';
|
if (row) setFieldsValue({ fullName: row.fullName, status: row.status });
|
openFormModal(true);
|
}
|
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
if (editId.value) {
|
tableData.value = tableData.value.map((o) => (o.id === editId.value ? { ...o, ...values } : o));
|
} else {
|
tableData.value = [
|
...tableData.value,
|
{ id: `${Date.now()}`, fullName: values.fullName, status: values.status ? 1 : 0, creatorTime: '—' },
|
];
|
}
|
createMessage.success('保存成功');
|
closeModal();
|
}
|
|
// 演示 onlineUtils 平台能力
|
function showUserInfo() {
|
const info = onlineUtils.getUserInfo();
|
createMessage.success(`当前用户：${info.userName || info.userAccount}`);
|
}
|
function showToastDemo() {
|
onlineUtils.toast('来自 onlineUtils 的提示', 'success');
|
}
|
function openListDemo() {
|
// 若配置了 modelId/menuId，会弹出全局低代码列表弹窗（GlobalListModal 监听）
|
onlineUtils.openList({ modelId: '', title: '低代码列表示例' });
|
}
|
|
reload();
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<!-- 搜索区 -->
|
<div class="jnpf-content-wrapper-search-box">
|
<BasicForm @register="registerSearchForm" @submit="reload" @reset="reload" />
|
</div>
|
<!-- 内容区 -->
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
<a-button @click="showUserInfo">onlineUtils.getUserInfo</a-button>
|
<a-button @click="showToastDemo">onlineUtils.toast</a-button>
|
<a-button @click="openListDemo">onlineUtils.openList</a-button>
|
</template>
|
<template #status="{ row }">
|
<a-tag :color="row.status ? 'success' : 'default'">{{ row.status ? '启用' : '禁用' }}</a-tag>
|
</template>
|
<template #action="{ row }">
|
<TableAction :actions="getTableActions(row)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
|
<!-- 编辑弹窗 -->
|
<BasicModal @register="registerModal" :title="getTitle" @ok="handleSubmit" destroy-on-close>
|
<BasicForm @register="registerEditForm" />
|
</BasicModal>
|
</div>
|
</template>
|
