web/apps/web-baicai/src/views/system/config/index.vue

<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';

import { watch } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';
import { useWatermark } from '@vben/hooks';
import { preferences } from '@vben/preferences';

import { Button, message } from 'ant-design-vue';

import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
import { ConfigApi } from '#/api';
import { useAppStore } from '#/store';

import FormEdit from './components/edit.vue';
import { useColumns, useSearchSchema } from './data.config';

const [FormEditModal, formEditApi] = useVbenModal({
  connectedComponent: FormEdit,
  destroyOnClose: true,
});

const appStore = useAppStore();
const { destroyWatermark, updateWatermark } = useWatermark();

watch(
  () => preferences.app.watermark,
  async (enable) => {
    if (enable) {
      await updateWatermark({
        content: appStore.appInfo?.webWatermark,
      });
    } else {
      destroyWatermark();
    }
  },
  {
    immediate: true,
  },
);

const handelSuccess = async () => {
  await reload();
  await appStore.loadAppInfo();
};
const handleDelete = async (id: number) => {
  await ConfigApi.deleteDetail(id);
  message.success('数据删除成功');
  handelSuccess();
};

const handleEdit = (record: Record<string, any>, isUpdate: boolean) => {
  formEditApi
    .setData({
      isUpdate,
      baseData: { id: record.id },
    })
    .open();
};
const handleActionClick = async ({
  code,
  row,
}: OnActionClickParams<ConfigApi.RecordItem>) => {
  switch (code) {
    case 'delete': {
      await handleDelete(row.id);
      break;
    }
    case 'edit': {
      handleEdit(row, true);
      break;
    }
  }
};

const [Grid, { reload }] = useVbenVxeGrid(
  useTableGridOptions({
    formOptions: {
      schema: useSearchSchema(),
    },
    gridOptions: {
      columns: useColumns(handleActionClick),
      proxyConfig: {
        ajax: {
          query: async ({ page }, formValues) => {
            return await ConfigApi.getPage({
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
            });
          },
        },
      },
    } as VxeTableGridOptions,
  }),
);
</script>

<template>
  <Page auto-content-height>
    <FormEditModal @success="handelSuccess" />
    <Grid>
      <template #table-title>
        <span class="border-l-primary border-l-8 border-solid pl-2">
          参数配置列表
        </span>
      </template>
      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          v-access:code="'config:add'"
          @click="() => handleEdit({}, false)"
        >
          新增参数配置
        </Button>
      </template>
    </Grid>
  </Page>
</template>