65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { Page } from '@vben/common-ui';
|
|||
|
|
|
|||
|
|
import { Button, message } from 'ant-design-vue';
|
|||
|
|
|
|||
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|||
|
|
|
|||
|
|
import { gridOptions } from '../config/table';
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'CodeGenerationFiledTable',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
interface RowType {
|
|||
|
|
category: string;
|
|||
|
|
color: string;
|
|||
|
|
id: string;
|
|||
|
|
price: string;
|
|||
|
|
productName: string;
|
|||
|
|
releaseDate: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
|
|||
|
|
|
|||
|
|
function hasEditStatus(row: RowType) {
|
|||
|
|
return gridApi.grid?.isEditByRow(row);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function editRowEvent(row: RowType) {
|
|||
|
|
gridApi.grid?.setEditRow(row);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function saveRowEvent(row: RowType) {
|
|||
|
|
await gridApi.grid?.clearEdit();
|
|||
|
|
|
|||
|
|
gridApi.setLoading(true);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
gridApi.setLoading(false);
|
|||
|
|
message.success({
|
|||
|
|
content: `保存成功！category=${row.category}`,
|
|||
|
|
});
|
|||
|
|
}, 600);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const cancelRowEvent = (_row: RowType) => {
|
|||
|
|
gridApi.grid?.clearEdit();
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<Page auto-content-height>
|
|||
|
|
<Grid>
|
|||
|
|
<template #action="{ row }">
|
|||
|
|
<template v-if="hasEditStatus(row)">
|
|||
|
|
<Button type="link" @click="saveRowEvent(row)">保存</Button>
|
|||
|
|
<Button type="link" @click="cancelRowEvent(row)">取消</Button>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<Button type="link" @click="editRowEvent(row)">编辑</Button>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</Grid>
|
|||
|
|
</Page>
|
|||
|
|
</template>
|