index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <script lang="ts" setup>
  2. import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
  3. import { Page, useVbenModal } from '@vben/common-ui';
  4. import { Button, message } from 'ant-design-vue';
  5. import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
  6. import { ParamsApi } from '#/api';
  7. import FormEdit from './components/edit.vue';
  8. import { useColumns, useSearchSchema } from './data.config';
  9. const [FormEditModal, formEditApi] = useVbenModal({
  10. connectedComponent: FormEdit,
  11. });
  12. const handelSuccess = () => {
  13. reload();
  14. };
  15. const handleDelete = async (id: number) => {
  16. await ParamsApi.deleteDetail(id);
  17. message.success('数据删除成功');
  18. handelSuccess();
  19. };
  20. const handleEdit = (record: any, isUpdate: boolean) => {
  21. formEditApi
  22. .setData({
  23. isUpdate,
  24. baseData: { id: record.id },
  25. })
  26. .open();
  27. };
  28. const handleActionClick = async ({
  29. code,
  30. row,
  31. }: OnActionClickParams<ParamsApi.RecordItem>) => {
  32. switch (code) {
  33. case 'delete': {
  34. await handleDelete(row.id);
  35. break;
  36. }
  37. case 'edit': {
  38. handleEdit(row, true);
  39. break;
  40. }
  41. }
  42. };
  43. const [Grid, { reload }] = useVbenVxeGrid(
  44. useTableGridOptions({
  45. formOptions: {
  46. schema: useSearchSchema(),
  47. },
  48. gridOptions: {
  49. columns: useColumns(handleActionClick),
  50. proxyConfig: {
  51. ajax: {
  52. query: async ({ page }, formValues) => {
  53. return await ParamsApi.getPage({
  54. pageIndex: page.currentPage,
  55. pageSize: page.pageSize,
  56. ...formValues,
  57. });
  58. },
  59. },
  60. },
  61. } as VxeTableGridOptions,
  62. }),
  63. );
  64. </script>
  65. <template>
  66. <Page auto-content-height>
  67. <FormEditModal @success="handelSuccess" />
  68. <Grid>
  69. <template #table-title>
  70. <span class="border-l-primary border-l-8 border-solid pl-2">
  71. 参数列表
  72. </span>
  73. </template>
  74. <template #toolbar-tools>
  75. <Button
  76. class="mr-2"
  77. type="primary"
  78. v-access:code="'params:add'"
  79. @click="() => handleEdit({}, false)"
  80. >
  81. 新增参数
  82. </Button>
  83. </template>
  84. </Grid>
  85. </Page>
  86. </template>