|
@@ -0,0 +1,187 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import type { Recordable } from '@vben/types';
|
|
|
+
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
|
|
+import { getVxePopupContainer } from '@vben/utils';
|
|
|
+
|
|
|
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
|
|
+
|
|
|
+import {
|
|
|
+ tableCheckboxEvent,
|
|
|
+ useVbenVxeGrid,
|
|
|
+ type VxeGridProps,
|
|
|
+} from '#/adapter/vxe-table';
|
|
|
+import {
|
|
|
+ configExport,
|
|
|
+ configList,
|
|
|
+ configRefreshCache,
|
|
|
+ configRemove,
|
|
|
+} from '#/api/system/config';
|
|
|
+import { commonDownloadExcel } from '#/utils/file/download';
|
|
|
+
|
|
|
+import configModal from './config-modal.vue';
|
|
|
+import { columns, querySchema } from './data';
|
|
|
+
|
|
|
+const formOptions: VbenFormProps = {
|
|
|
+ commonConfig: {
|
|
|
+ labelWidth: 80,
|
|
|
+ componentProps: {
|
|
|
+ allowClear: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ schema: querySchema(),
|
|
|
+ wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
|
|
+ // 日期选择格式化
|
|
|
+ fieldMappingTime: [
|
|
|
+ [
|
|
|
+ 'createTime',
|
|
|
+ ['params[beginTime]', 'params[endTime]'],
|
|
|
+ ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+const gridOptions: VxeGridProps = {
|
|
|
+ checkboxConfig: {
|
|
|
+ // 高亮
|
|
|
+ highlight: true,
|
|
|
+ // 翻页时保留选中状态
|
|
|
+ reserve: true,
|
|
|
+ },
|
|
|
+ columns,
|
|
|
+ height: 'auto',
|
|
|
+ keepSource: true,
|
|
|
+ pagerConfig: {},
|
|
|
+ proxyConfig: {
|
|
|
+ ajax: {
|
|
|
+ query: async ({ page }, formValues = {}) => {
|
|
|
+ return await configList({
|
|
|
+ pageNum: page.currentPage,
|
|
|
+ pageSize: page.pageSize,
|
|
|
+ ...formValues,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true,
|
|
|
+ keyField: 'configId',
|
|
|
+ },
|
|
|
+ id: 'system-config-index',
|
|
|
+};
|
|
|
+
|
|
|
+const checked = ref(false);
|
|
|
+const [BasicTable, tableApi] = useVbenVxeGrid({
|
|
|
+ formOptions,
|
|
|
+ gridOptions,
|
|
|
+ gridEvents: {
|
|
|
+ checkboxChange: tableCheckboxEvent(checked),
|
|
|
+ checkboxAll: tableCheckboxEvent(checked),
|
|
|
+ },
|
|
|
+});
|
|
|
+const [ConfigModal, modalApi] = useVbenModal({
|
|
|
+ connectedComponent: configModal,
|
|
|
+});
|
|
|
+
|
|
|
+function handleAdd() {
|
|
|
+ modalApi.setData({});
|
|
|
+ modalApi.open();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleEdit(record: Recordable<any>) {
|
|
|
+ modalApi.setData({ id: record.configId });
|
|
|
+ modalApi.open();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDelete(row: Recordable<any>) {
|
|
|
+ await configRemove(row.configId);
|
|
|
+ await tableApi.query();
|
|
|
+}
|
|
|
+
|
|
|
+function handleMultiDelete() {
|
|
|
+ const rows = tableApi.grid.getCheckboxRecords();
|
|
|
+ const ids = rows.map((row: any) => row.configId);
|
|
|
+ Modal.confirm({
|
|
|
+ title: '提示',
|
|
|
+ okType: 'danger',
|
|
|
+ content: `确认删除选中的${ids.length}条记录吗?`,
|
|
|
+ onOk: async () => {
|
|
|
+ await configRemove(ids);
|
|
|
+ await tableApi.query();
|
|
|
+ checked.value = false;
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleDownloadExcel() {
|
|
|
+ commonDownloadExcel(configExport, '参数配置', tableApi.formApi.form.values, {
|
|
|
+ fieldMappingTime: formOptions.fieldMappingTime,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function handleRefreshCache() {
|
|
|
+ await configRefreshCache();
|
|
|
+ await tableApi.query();
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Page :auto-content-height="true">
|
|
|
+ <BasicTable table-title="参数列表">
|
|
|
+ <template #toolbar-tools>
|
|
|
+ <Space>
|
|
|
+ <a-button @click="handleRefreshCache"> 刷新缓存 </a-button>
|
|
|
+ <a-button
|
|
|
+ v-access:code="['system:config:export']"
|
|
|
+ @click="handleDownloadExcel"
|
|
|
+ >
|
|
|
+ {{ $t('pages.common.export') }}
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ :disabled="!checked"
|
|
|
+ danger
|
|
|
+ type="primary"
|
|
|
+ v-access:code="['system:config:remove']"
|
|
|
+ @click="handleMultiDelete"
|
|
|
+ >
|
|
|
+ {{ $t('pages.common.delete') }}
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ v-access:code="['system:config:add']"
|
|
|
+ @click="handleAdd"
|
|
|
+ >
|
|
|
+ {{ $t('pages.common.add') }}
|
|
|
+ </a-button>
|
|
|
+ </Space>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <Space>
|
|
|
+ <ghost-button
|
|
|
+ v-access:code="['system:config:edit']"
|
|
|
+ @click.stop="handleEdit(row)"
|
|
|
+ >
|
|
|
+ {{ $t('pages.common.edit') }}
|
|
|
+ </ghost-button>
|
|
|
+ <Popconfirm
|
|
|
+ :get-popup-container="getVxePopupContainer"
|
|
|
+ placement="left"
|
|
|
+ title="确认删除?"
|
|
|
+ @confirm="handleDelete(row)"
|
|
|
+ >
|
|
|
+ <ghost-button
|
|
|
+ danger
|
|
|
+ v-access:code="['system:config:remove']"
|
|
|
+ @click.stop=""
|
|
|
+ >
|
|
|
+ {{ $t('pages.common.delete') }}
|
|
|
+ </ghost-button>
|
|
|
+ </Popconfirm>
|
|
|
+ </Space>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ <ConfigModal @reload="tableApi.query()" />
|
|
|
+ </Page>
|
|
|
+</template>
|