Compare commits
11 Commits
34cd919441
...
88097e386b
| Author | SHA1 | Date | |
|---|---|---|---|
| 88097e386b | |||
| 82d043a414 | |||
| 12495b6d85 | |||
| 67b9a74212 | |||
| 0da43ca229 | |||
| 7b29154116 | |||
| 03009cd64d | |||
| 706d2e2a9f | |||
| e109590aea | |||
| 8afdb0d09e | |||
| 73bc5aec6b |
@@ -1,20 +1,20 @@
|
||||
// https://umijs.org/config/
|
||||
|
||||
import { join } from "node:path";
|
||||
import { defineConfig } from "@umijs/max";
|
||||
import defaultSettings from "./defaultSettings";
|
||||
import proxy from "./proxy";
|
||||
import { join } from 'node:path';
|
||||
import { defineConfig } from '@umijs/max';
|
||||
import defaultSettings from './defaultSettings';
|
||||
import proxy from './proxy';
|
||||
|
||||
import routes from "./routes";
|
||||
import routes from './routes';
|
||||
|
||||
const { UMI_ENV = "dev" } = process.env;
|
||||
const { UMI_ENV = 'dev' } = process.env;
|
||||
|
||||
/**
|
||||
* @name 使用公共路径
|
||||
* @description 部署时的路径,如果部署在非根目录下,需要配置这个变量
|
||||
* @doc https://umijs.org/docs/api/config#publicpath
|
||||
*/
|
||||
const PUBLIC_PATH: string = "/";
|
||||
const PUBLIC_PATH: string = '/';
|
||||
|
||||
export default defineConfig({
|
||||
/**
|
||||
@@ -83,7 +83,7 @@ export default defineConfig({
|
||||
* @name layout 插件
|
||||
* @doc https://umijs.org/docs/max/layout-menu
|
||||
*/
|
||||
title: "Ant Design Pro",
|
||||
title: 'Ant Design Pro',
|
||||
layout: {
|
||||
locale: true,
|
||||
...defaultSettings,
|
||||
@@ -94,8 +94,8 @@ export default defineConfig({
|
||||
* @doc https://umijs.org/docs/max/moment2dayjs
|
||||
*/
|
||||
moment2dayjs: {
|
||||
preset: "antd",
|
||||
plugins: ["duration"],
|
||||
preset: 'antd',
|
||||
plugins: ['duration'],
|
||||
},
|
||||
/**
|
||||
* @name 国际化插件
|
||||
@@ -103,7 +103,7 @@ export default defineConfig({
|
||||
*/
|
||||
locale: {
|
||||
// default zh-CN
|
||||
default: "zh-CN",
|
||||
default: 'zh-CN',
|
||||
antd: true,
|
||||
// default true, when it is true, will use `navigator.language` overwrite default
|
||||
baseNavigator: true,
|
||||
@@ -119,7 +119,7 @@ export default defineConfig({
|
||||
theme: {
|
||||
cssVar: true,
|
||||
token: {
|
||||
fontFamily: "AlibabaSans, sans-serif",
|
||||
fontFamily: 'AlibabaSans, sans-serif',
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -142,30 +142,33 @@ export default defineConfig({
|
||||
*/
|
||||
headScripts: [
|
||||
// 解决首次加载时白屏的问题
|
||||
{ src: join(PUBLIC_PATH, "scripts/loading.js"), async: true },
|
||||
{ src: join(PUBLIC_PATH, 'scripts/loading.js'), async: true },
|
||||
],
|
||||
//================ pro 插件配置 =================
|
||||
presets: ["umi-presets-pro"],
|
||||
presets: ['umi-presets-pro'],
|
||||
/**
|
||||
* @name openAPI 插件的配置
|
||||
* @description 基于 openapi 的规范生成serve 和mock,能减少很多样板代码
|
||||
* @doc https://pro.ant.design/zh-cn/docs/openapi/
|
||||
*/
|
||||
openAPI: [
|
||||
// {
|
||||
// requestLibPath: "import { request } from '@umijs/max'",
|
||||
// schemaPath: join(__dirname, "oneapi/prodapi.json"),
|
||||
// mock: false,
|
||||
// projectName: "prodApi",
|
||||
// },
|
||||
// {schemaPath: "./docs/apifox-api.json",
|
||||
// requestLibPath: "import { request } from '@umijs/max'",
|
||||
// schemaPath: join(__dirname, "oneapi.json"),
|
||||
// projectName: "login",
|
||||
// },
|
||||
],
|
||||
// openAPI: [
|
||||
// // {
|
||||
// // requestLibPath: "import { request } from '@umijs/max'",
|
||||
// // schemaPath: join(__dirname, "oneapi/prodapi.json"),
|
||||
// // mock: false,
|
||||
// // projectName: "prodApi",
|
||||
// // },
|
||||
// // {schemaPath: "./docs/apifox-api.json",
|
||||
// // requestLibPath: "import { request } from '@umijs/max'",
|
||||
// // schemaPath: join(__dirname, "oneapi.json"),
|
||||
// // projectName: "login",
|
||||
// // },
|
||||
// ],
|
||||
codeSplitting: {
|
||||
jsStrategy: 'granularChunks',
|
||||
},
|
||||
mock: {
|
||||
include: ["mock/**/*", "src/pages/**/_mock.ts"],
|
||||
include: ['mock/**/*', 'src/pages/**/_mock.ts'],
|
||||
},
|
||||
/**
|
||||
* @name 是否开启 mako
|
||||
@@ -177,6 +180,6 @@ export default defineConfig({
|
||||
requestRecord: {},
|
||||
exportStatic: {},
|
||||
define: {
|
||||
"process.env.CI": process.env.CI,
|
||||
'process.env.CI': process.env.CI,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
import { parse } from 'node:url';
|
||||
import dayjs from 'dayjs';
|
||||
import type { Request, Response } from 'express';
|
||||
|
||||
// mock tableListDataSource
|
||||
const genList = (current: number, pageSize: number) => {
|
||||
const tableListDataSource: API.RuleListItem[] = [];
|
||||
|
||||
for (let i = 0; i < pageSize; i += 1) {
|
||||
const index = (current - 1) * 10 + i;
|
||||
tableListDataSource.push({
|
||||
key: index,
|
||||
disabled: i % 6 === 0,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name: `TradeCode ${index}`,
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: Math.floor(Math.random() * 10) % 4,
|
||||
updatedAt: dayjs().format('YYYY-MM-DD'),
|
||||
createdAt: dayjs().format('YYYY-MM-DD'),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
});
|
||||
}
|
||||
tableListDataSource.reverse();
|
||||
return tableListDataSource;
|
||||
};
|
||||
|
||||
let tableListDataSource = genList(1, 100);
|
||||
|
||||
function getRule(req: Request, res: Response, u: string) {
|
||||
let realUrl = u;
|
||||
if (
|
||||
!realUrl ||
|
||||
Object.prototype.toString.call(realUrl) !== '[object String]'
|
||||
) {
|
||||
realUrl = req.url;
|
||||
}
|
||||
const { current = 1, pageSize = 10 } = req.query;
|
||||
const params = parse(realUrl, true).query as unknown as API.PageParams &
|
||||
API.RuleListItem & {
|
||||
sorter: any;
|
||||
filter: any;
|
||||
};
|
||||
|
||||
let dataSource = [...tableListDataSource].slice(
|
||||
((current as number) - 1) * (pageSize as number),
|
||||
(current as number) * (pageSize as number),
|
||||
);
|
||||
if (params.sorter) {
|
||||
const sorter = JSON.parse(params.sorter);
|
||||
dataSource = dataSource.sort((prev, next) => {
|
||||
let sortNumber = 0;
|
||||
(Object.keys(sorter) as Array<keyof API.RuleListItem>).forEach((key) => {
|
||||
const nextSort = next?.[key] as number;
|
||||
const preSort = prev?.[key] as number;
|
||||
if (sorter[key] === 'descend') {
|
||||
if (preSort - nextSort > 0) {
|
||||
sortNumber += -1;
|
||||
} else {
|
||||
sortNumber += 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (preSort - nextSort > 0) {
|
||||
sortNumber += 1;
|
||||
} else {
|
||||
sortNumber += -1;
|
||||
}
|
||||
});
|
||||
return sortNumber;
|
||||
});
|
||||
}
|
||||
if (params.filter) {
|
||||
const filter = JSON.parse(params.filter as any) as {
|
||||
[key: string]: string[];
|
||||
};
|
||||
if (Object.keys(filter).length > 0) {
|
||||
dataSource = dataSource.filter((item) => {
|
||||
return (Object.keys(filter) as Array<keyof API.RuleListItem>).some(
|
||||
(key) => {
|
||||
if (!filter[key]) {
|
||||
return true;
|
||||
}
|
||||
if (filter[key].includes(`${item[key]}`)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (params.name) {
|
||||
dataSource = dataSource.filter((data) =>
|
||||
data?.name?.includes(params.name || ''),
|
||||
);
|
||||
}
|
||||
const result = {
|
||||
data: dataSource,
|
||||
total: tableListDataSource.length,
|
||||
success: true,
|
||||
pageSize,
|
||||
current: parseInt(`${params.current}`, 10) || 1,
|
||||
};
|
||||
|
||||
return res.json(result);
|
||||
}
|
||||
|
||||
function postRule(req: Request, res: Response, u: string, b: Request) {
|
||||
let realUrl = u;
|
||||
if (
|
||||
!realUrl ||
|
||||
Object.prototype.toString.call(realUrl) !== '[object String]'
|
||||
) {
|
||||
realUrl = req.url;
|
||||
}
|
||||
|
||||
const body = b?.body || req.body;
|
||||
const { method, name, desc, key } = body;
|
||||
|
||||
switch (method) {
|
||||
case 'delete':
|
||||
tableListDataSource = tableListDataSource.filter(
|
||||
(item) => key.indexOf(item.key) === -1,
|
||||
);
|
||||
break;
|
||||
case 'post':
|
||||
(() => {
|
||||
const i = Math.ceil(Math.random() * 10000);
|
||||
const newRule: API.RuleListItem = {
|
||||
key: tableListDataSource.length,
|
||||
href: 'https://ant.design',
|
||||
avatar: [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
][i % 2],
|
||||
name,
|
||||
owner: '曲丽丽',
|
||||
desc,
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: Math.floor(Math.random() * 10) % 2,
|
||||
updatedAt: dayjs().format('YYYY-MM-DD'),
|
||||
createdAt: dayjs().format('YYYY-MM-DD'),
|
||||
progress: Math.ceil(Math.random() * 100),
|
||||
};
|
||||
tableListDataSource.unshift(newRule);
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
|
||||
case 'update':
|
||||
(() => {
|
||||
let newRule = {};
|
||||
tableListDataSource = tableListDataSource.map((item) => {
|
||||
if (item.key === key) {
|
||||
newRule = { ...item, desc, name };
|
||||
return { ...item, desc, name };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return res.json(newRule);
|
||||
})();
|
||||
return;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const result = {
|
||||
list: tableListDataSource,
|
||||
pagination: {
|
||||
total: tableListDataSource.length,
|
||||
},
|
||||
};
|
||||
|
||||
res.json(result);
|
||||
}
|
||||
|
||||
export default {
|
||||
'GET /api/rule': getRule,
|
||||
'POST /api/rule': postRule,
|
||||
};
|
||||
@@ -1,345 +1,18 @@
|
||||
module.exports = {
|
||||
'GET /api/currentUser': {
|
||||
data: {
|
||||
name: 'Serati Ma',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
|
||||
userid: '00000001',
|
||||
email: 'antdesign@alipay.com',
|
||||
signature: '海纳百川,有容乃大',
|
||||
title: '交互专家',
|
||||
group: '蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED',
|
||||
tags: [
|
||||
{ key: '0', label: '很有想法的' },
|
||||
{ key: '1', label: '专注设计' },
|
||||
{ key: '2', label: '辣~' },
|
||||
{ key: '3', label: '大长腿' },
|
||||
{ key: '4', label: '川妹子' },
|
||||
{ key: '5', label: '海纳百川' },
|
||||
],
|
||||
notifyCount: 12,
|
||||
unreadCount: 11,
|
||||
country: 'China',
|
||||
geographic: {
|
||||
province: { label: '浙江省', key: '330000' },
|
||||
city: { label: '杭州市', key: '330100' },
|
||||
},
|
||||
address: '西湖区工专路 77 号',
|
||||
phone: '0752-268888888',
|
||||
},
|
||||
},
|
||||
'GET /api/rule': {
|
||||
data: [
|
||||
{
|
||||
key: 99,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 99',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 503,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 81,
|
||||
},
|
||||
{
|
||||
key: 98,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 98',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 164,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 12,
|
||||
},
|
||||
{
|
||||
key: 97,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 97',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 174,
|
||||
status: '1',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 81,
|
||||
},
|
||||
{
|
||||
key: 96,
|
||||
disabled: true,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 96',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 914,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 7,
|
||||
},
|
||||
{
|
||||
key: 95,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 95',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 698,
|
||||
status: '2',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 82,
|
||||
},
|
||||
{
|
||||
key: 94,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 94',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 488,
|
||||
status: '1',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 14,
|
||||
},
|
||||
{
|
||||
key: 93,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 93',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 580,
|
||||
status: '2',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 77,
|
||||
},
|
||||
{
|
||||
key: 92,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 92',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 244,
|
||||
status: '3',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 58,
|
||||
},
|
||||
{
|
||||
key: 91,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 91',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 959,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 66,
|
||||
},
|
||||
{
|
||||
key: 90,
|
||||
disabled: true,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 90',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 958,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 72,
|
||||
},
|
||||
{
|
||||
key: 89,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 89',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 301,
|
||||
status: '2',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 2,
|
||||
},
|
||||
{
|
||||
key: 88,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 88',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 277,
|
||||
status: '1',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 12,
|
||||
},
|
||||
{
|
||||
key: 87,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 87',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 810,
|
||||
status: '1',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 82,
|
||||
},
|
||||
{
|
||||
key: 86,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 86',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 780,
|
||||
status: '3',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 22,
|
||||
},
|
||||
{
|
||||
key: 85,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 85',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 705,
|
||||
status: '3',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 12,
|
||||
},
|
||||
{
|
||||
key: 84,
|
||||
disabled: true,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 84',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 203,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 79,
|
||||
},
|
||||
{
|
||||
key: 83,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 83',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 491,
|
||||
status: '2',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 59,
|
||||
},
|
||||
{
|
||||
key: 82,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 82',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 73,
|
||||
status: '0',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 100,
|
||||
},
|
||||
{
|
||||
key: 81,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||
name: 'TradeCode 81',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 406,
|
||||
status: '3',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 61,
|
||||
},
|
||||
{
|
||||
key: 80,
|
||||
disabled: false,
|
||||
href: 'https://ant.design',
|
||||
avatar:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||
name: 'TradeCode 80',
|
||||
owner: '曲丽丽',
|
||||
desc: '这是一段描述',
|
||||
callNo: 112,
|
||||
status: '2',
|
||||
updatedAt: '2022-12-06T05:00:57.040Z',
|
||||
createdAt: '2022-12-06T05:00:57.040Z',
|
||||
progress: 20,
|
||||
},
|
||||
],
|
||||
total: 100,
|
||||
"GET /admin-api/system/tenant/get-id-by-name": {
|
||||
data: 1,
|
||||
success: true,
|
||||
pageSize: 20,
|
||||
current: 1,
|
||||
code: 0,
|
||||
},
|
||||
'POST /api/login/outLogin': { data: {}, success: true },
|
||||
'POST /api/login/account': {
|
||||
status: 'ok',
|
||||
type: 'account',
|
||||
currentAuthority: 'admin',
|
||||
"POST /admin-api/system/auth/login": {
|
||||
data: null,
|
||||
success: true,
|
||||
code: 0,
|
||||
},
|
||||
"POST /api/login/outLogin": { data: {}, success: true },
|
||||
"POST /api/login/account": {
|
||||
status: "ok",
|
||||
type: "account",
|
||||
currentAuthority: "admin",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
"scripts": {
|
||||
"analyze": "cross-env ANALYZE=1 max build",
|
||||
"build": "max build",
|
||||
"deploy": "npm run build && npm run gh-pages",
|
||||
"dev": "npm run start:dev",
|
||||
"deploy": "pnpm run build && npm run gh-pages",
|
||||
"dev": "pnpm run start:dev",
|
||||
"gh-pages": "gh-pages -d dist",
|
||||
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
|
||||
"postinstall": "max setup",
|
||||
@@ -39,6 +39,7 @@
|
||||
"@ant-design/icons": "^5.6.1",
|
||||
"@ant-design/pro-components": "^2.8.9",
|
||||
"@ant-design/v5-patch-for-react-19": "^1.0.3",
|
||||
"@tinymce/tinymce-react": "^6.3.0",
|
||||
"antd": "^5.26.4",
|
||||
"antd-style": "^3.7.0",
|
||||
"classnames": "^2.5.1",
|
||||
@@ -46,6 +47,7 @@
|
||||
"jsencrypt": "^3.5.4",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"tinymce": "^8.1.2",
|
||||
"web-storage-cache": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
41
pnpm-lock.yaml
generated
41
pnpm-lock.yaml
generated
@@ -17,6 +17,9 @@ importers:
|
||||
'@ant-design/v5-patch-for-react-19':
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3(antd@5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
||||
'@tinymce/tinymce-react':
|
||||
specifier: ^6.3.0
|
||||
version: 6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)
|
||||
antd:
|
||||
specifier: ^5.26.4
|
||||
version: 5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
||||
@@ -38,6 +41,9 @@ importers:
|
||||
react-dom:
|
||||
specifier: ^19.1.0
|
||||
version: 19.1.1(react@19.1.1)
|
||||
tinymce:
|
||||
specifier: ^8.1.2
|
||||
version: 8.1.2
|
||||
web-storage-cache:
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1
|
||||
@@ -2551,6 +2557,16 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@tinymce/tinymce-react@6.3.0':
|
||||
resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
|
||||
peerDependencies:
|
||||
react: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
|
||||
react-dom: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
|
||||
tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
|
||||
peerDependenciesMeta:
|
||||
tinymce:
|
||||
optional: true
|
||||
|
||||
'@tootallnate/once@1.1.2':
|
||||
resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -10246,6 +10262,9 @@ packages:
|
||||
tinyexec@1.0.1:
|
||||
resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
|
||||
|
||||
tinymce@8.1.2:
|
||||
resolution: {integrity: sha512-KITxHEEHRlxC5xOnxA123eAJ67NgsWxNphtItWt9TRu07DiTZrWIqJeIKRX9euE51/l3kJO4WQiqoBXKTJJGsA==}
|
||||
|
||||
titleize@3.0.0:
|
||||
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -14075,14 +14094,14 @@ snapshots:
|
||||
|
||||
'@loadable/component@5.15.2(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.23.6
|
||||
'@babel/runtime': 7.28.4
|
||||
hoist-non-react-statics: 3.3.2
|
||||
react: 18.3.1
|
||||
react-is: 16.13.1
|
||||
|
||||
'@loadable/component@5.15.2(react@19.1.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.23.6
|
||||
'@babel/runtime': 7.28.4
|
||||
hoist-non-react-statics: 3.3.2
|
||||
react: 19.1.1
|
||||
react-is: 16.13.1
|
||||
@@ -14715,6 +14734,14 @@ snapshots:
|
||||
'@types/react': 19.1.12
|
||||
'@types/react-dom': 19.1.9(@types/react@19.1.12)
|
||||
|
||||
'@tinymce/tinymce-react@6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)':
|
||||
dependencies:
|
||||
prop-types: 15.8.1
|
||||
react: 19.1.1
|
||||
react-dom: 19.1.1(react@19.1.1)
|
||||
optionalDependencies:
|
||||
tinymce: 8.1.2
|
||||
|
||||
'@tootallnate/once@1.1.2': {}
|
||||
|
||||
'@tootallnate/once@2.0.0': {}
|
||||
@@ -15402,7 +15429,7 @@ snapshots:
|
||||
|
||||
'@umijs/history@5.3.1':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.23.6
|
||||
'@babel/runtime': 7.28.4
|
||||
query-string: 6.14.1
|
||||
|
||||
'@umijs/lint@4.4.12(eslint@8.35.0)(jest@30.1.3(@types/node@24.3.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@24.3.1)(typescript@5.9.2)))(stylelint@14.8.2)(typescript@5.9.2)':
|
||||
@@ -16597,7 +16624,7 @@ snapshots:
|
||||
|
||||
babel-plugin-macros@2.6.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.4.5
|
||||
'@babel/runtime': 7.28.4
|
||||
cosmiconfig: 5.2.1
|
||||
resolve: 1.22.10
|
||||
|
||||
@@ -23257,7 +23284,7 @@ snapshots:
|
||||
|
||||
react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.23.6
|
||||
'@babel/runtime': 7.28.4
|
||||
invariant: 2.2.4
|
||||
prop-types: 15.8.1
|
||||
react: 18.3.1
|
||||
@@ -23267,7 +23294,7 @@ snapshots:
|
||||
|
||||
react-helmet-async@1.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.23.6
|
||||
'@babel/runtime': 7.28.4
|
||||
invariant: 2.2.4
|
||||
prop-types: 15.8.1
|
||||
react: 19.1.1
|
||||
@@ -24850,6 +24877,8 @@ snapshots:
|
||||
|
||||
tinyexec@1.0.1: {}
|
||||
|
||||
tinymce@8.1.2: {}
|
||||
|
||||
titleize@3.0.0: {}
|
||||
|
||||
tldts-core@6.1.86: {}
|
||||
|
||||
90
src/app.tsx
90
src/app.tsx
@@ -1,38 +1,38 @@
|
||||
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
|
||||
import { SettingDrawer } from '@ant-design/pro-components';
|
||||
import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
|
||||
import { history, Link, Navigate } from '@umijs/max';
|
||||
import { Modal, Spin } from 'antd';
|
||||
import React, {
|
||||
Children,
|
||||
Component,
|
||||
createContext,
|
||||
JSX,
|
||||
Suspense,
|
||||
} from "react";
|
||||
import { Modal, Spin } from "antd";
|
||||
import type { Settings as LayoutSettings } from "@ant-design/pro-components";
|
||||
import { SettingDrawer } from "@ant-design/pro-components";
|
||||
import type { RequestConfig, RunTimeLayoutConfig } from "@umijs/max";
|
||||
import { history, Link, Navigate } from "@umijs/max";
|
||||
} from 'react';
|
||||
import {
|
||||
AvatarDropdown,
|
||||
AvatarName,
|
||||
Footer,
|
||||
Question,
|
||||
SelectLang,
|
||||
} from "@/components";
|
||||
import { getInfo } from "@/services/login";
|
||||
import type { UserVO, TokenType, UserInfoVO } from "@/services/login/types";
|
||||
import defaultSettings from "../config/defaultSettings";
|
||||
import { errorConfig } from "./requestErrorConfig";
|
||||
import "@ant-design/v5-patch-for-react-19";
|
||||
import { getAccessToken, getRefreshToken, getTenantId } from "@/utils/auth";
|
||||
import { CACHE_KEY, useCache } from "./hooks/web/useCache";
|
||||
import { MenuVO } from "./services/system/menu";
|
||||
|
||||
} from '@/components';
|
||||
import { getInfo } from '@/services/login';
|
||||
import type { TokenType, UserInfoVO, UserVO } from '@/services/login/types';
|
||||
import defaultSettings from '../config/defaultSettings';
|
||||
import { errorConfig } from './requestErrorConfig';
|
||||
import '@ant-design/v5-patch-for-react-19';
|
||||
import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth';
|
||||
import {
|
||||
transformBackendMenuToFlatRoutes,
|
||||
transformMenuToRoutes,
|
||||
} from "@/utils/menuUtils";
|
||||
const isDev = process.env.NODE_ENV === "development";
|
||||
} from '@/utils/menuUtils';
|
||||
import { CACHE_KEY, useCache } from './hooks/web/useCache';
|
||||
import { MenuVO } from './services/system/menu';
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isDevOrTest = isDev || process.env.CI;
|
||||
const loginPath = "/user/login";
|
||||
const loginPath = '/user/login';
|
||||
|
||||
// 全局存储菜单数据和路由映射
|
||||
|
||||
@@ -51,7 +51,7 @@ export async function getInitialState(): Promise<{
|
||||
try {
|
||||
const token = getAccessToken();
|
||||
if (!token) {
|
||||
throw new Error("No token found");
|
||||
throw new Error('No token found');
|
||||
}
|
||||
const data = await getInfo();
|
||||
wsCache.set(CACHE_KEY.USER, data);
|
||||
@@ -69,8 +69,8 @@ export async function getInitialState(): Promise<{
|
||||
const { location } = history;
|
||||
|
||||
if (
|
||||
![loginPath, "/user/register", "/user/register-result"].includes(
|
||||
location.pathname
|
||||
![loginPath, '/user/register', '/user/register-result'].includes(
|
||||
location.pathname,
|
||||
)
|
||||
) {
|
||||
const currentUser = wsCache.get(CACHE_KEY.USER);
|
||||
@@ -125,22 +125,22 @@ export const layout: RunTimeLayoutConfig = ({
|
||||
},
|
||||
bgLayoutImgList: [
|
||||
{
|
||||
src: "https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr",
|
||||
src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
|
||||
left: 85,
|
||||
bottom: 100,
|
||||
height: "303px",
|
||||
height: '303px',
|
||||
},
|
||||
{
|
||||
src: "https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr",
|
||||
src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
|
||||
bottom: -68,
|
||||
right: -45,
|
||||
height: "303px",
|
||||
height: '303px',
|
||||
},
|
||||
{
|
||||
src: "https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr",
|
||||
src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "331px",
|
||||
width: '331px',
|
||||
},
|
||||
],
|
||||
menuHeaderRender: undefined,
|
||||
@@ -178,14 +178,14 @@ export const layout: RunTimeLayoutConfig = ({
|
||||
* @doc https://umijs.org/docs/max/request#配置
|
||||
*/
|
||||
export const request: RequestConfig = {
|
||||
baseURL: isDev ? "" : "https://proapi.azurewebsites.net",
|
||||
baseURL: isDev ? '' : 'https://proapi.azurewebsites.net',
|
||||
...errorConfig,
|
||||
// 添加请求拦截器
|
||||
requestInterceptors: [
|
||||
(url, options) => {
|
||||
// 为所有请求添加 API 前缀
|
||||
if (url && !url.startsWith(process.env.API_PREFIX || "/admin-api")) {
|
||||
url = (process.env.API_PREFIX || "/admin-api") + url;
|
||||
if (url && !url.startsWith(process.env.API_PREFIX || '/admin-api')) {
|
||||
url = (process.env.API_PREFIX || '/admin-api') + url;
|
||||
}
|
||||
// 获取存储在本地的 token 和 tenantId
|
||||
const token = getAccessToken();
|
||||
@@ -193,12 +193,12 @@ export const request: RequestConfig = {
|
||||
// 设置统一的请求头
|
||||
const headers: Record<string, string> = {
|
||||
...options.headers,
|
||||
Accept: "*",
|
||||
"tenant-id": tenantId,
|
||||
Accept: '*',
|
||||
'tenant-id': tenantId,
|
||||
};
|
||||
// 如果有token,则添加Authorization头
|
||||
if (token) {
|
||||
headers["Authorization"] = `Bearer ${getAccessToken()}`;
|
||||
headers['Authorization'] = `Bearer ${getAccessToken()}`;
|
||||
}
|
||||
return { url, options: { ...options, headers } };
|
||||
},
|
||||
@@ -210,7 +210,7 @@ export const request: RequestConfig = {
|
||||
const appendParams = (key: string, value: any) => {
|
||||
if (Array.isArray(value)) {
|
||||
// 特殊处理 createTime 数组,转换为 createTime[0] 和 createTime[1] 格式
|
||||
if (key === "createTime") {
|
||||
if (key === 'createTime') {
|
||||
value.forEach((val, index) => {
|
||||
searchParams.append(`${key}[${index}]`, val);
|
||||
});
|
||||
@@ -237,23 +237,23 @@ export function patchClientRoutes({ routes }: { routes: any }) {
|
||||
const { wsCache } = useCache();
|
||||
console.log(2222);
|
||||
const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
|
||||
const routerIndex = routes.findIndex((item: any) => item.path === "/");
|
||||
const routerIndex = routes.findIndex((item: any) => item.path === '/');
|
||||
const parentId = routes[routerIndex].id;
|
||||
|
||||
if (globalMenus) {
|
||||
routes[routerIndex]["routes"].push(...loopMenuItem(globalMenus, parentId));
|
||||
routes[routerIndex]['routes'].push(...loopMenuItem(globalMenus, parentId));
|
||||
}
|
||||
}
|
||||
|
||||
const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
return menus.flatMap((item) => {
|
||||
let Component: React.ComponentType<any> | null = null;
|
||||
console.log(findFirstLeafRoute(item), "item");
|
||||
console.log(findFirstLeafRoute(item), 'item');
|
||||
if (item.component && item.component.length > 0) {
|
||||
// 防止配置了路由,但本地暂未添加对应的页面,产生的错误
|
||||
Component = React.lazy(() => {
|
||||
const importComponent = () => import(`@/pages/${item.component}`);
|
||||
const import404 = () => import("@/pages/404");
|
||||
const import404 = () => import('@/pages/404');
|
||||
return importComponent().catch(import404);
|
||||
});
|
||||
}
|
||||
@@ -262,7 +262,7 @@ const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
icon: item.icon,
|
||||
// icon: item.icon,
|
||||
id: item.id,
|
||||
parentId: pId,
|
||||
|
||||
@@ -281,13 +281,13 @@ const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
icon: item.icon,
|
||||
// icon: item.icon,
|
||||
id: item.menuID,
|
||||
parentId: pId,
|
||||
redirect: "/system/tenant/list",
|
||||
redirect: '/system/tenant/list',
|
||||
element: (
|
||||
<React.Suspense
|
||||
fallback={<Spin style={{ width: "100%", height: "100%" }} />}
|
||||
fallback={<Spin style={{ width: '100%', height: '100%' }} />}
|
||||
>
|
||||
{Component && <Component />}
|
||||
</React.Suspense>
|
||||
@@ -299,7 +299,7 @@ const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
});
|
||||
};
|
||||
|
||||
const findFirstLeafRoute = (menuItem: any, parent = "/"): string | null => {
|
||||
const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
|
||||
// 如果没有子菜单,返回当前路径
|
||||
|
||||
if (!menuItem.children || menuItem.children.length === 0) {
|
||||
@@ -308,7 +308,7 @@ const findFirstLeafRoute = (menuItem: any, parent = "/"): string | null => {
|
||||
|
||||
// 递归查找第一个叶子节点
|
||||
for (const child of menuItem.children) {
|
||||
const leafRoute = findFirstLeafRoute(child, menuItem.path + "/");
|
||||
const leafRoute = findFirstLeafRoute(child, menuItem.path + '/');
|
||||
if (leafRoute) {
|
||||
return leafRoute;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React, { useImperativeHandle, forwardRef } from "react";
|
||||
import { DrawerForm } from "@ant-design/pro-components";
|
||||
import type { ProFormColumnsType } from "@ant-design/pro-components";
|
||||
import { BetaSchemaForm } from "@ant-design/pro-components";
|
||||
import { Button, Drawer, Space, Typography } from "antd";
|
||||
import { CloseOutlined } from "@ant-design/icons";
|
||||
const { Title } = Typography;
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-components';
|
||||
import { BetaSchemaForm } from '@ant-design/pro-components';
|
||||
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
|
||||
interface ConfigurableDrawerFormProps {
|
||||
title?: string;
|
||||
columns: ProFormColumnsType[];
|
||||
onSubmit?: (values: any) => Promise<boolean>;
|
||||
initialValues?: Record<string, any>;
|
||||
width?: number;
|
||||
width?: number | string;
|
||||
labelCol?: ColProps;
|
||||
wrapperCol?: ColProps;
|
||||
}
|
||||
|
||||
export interface ConfigurableDrawerFormRef {
|
||||
@@ -21,102 +21,115 @@ export interface ConfigurableDrawerFormRef {
|
||||
const ConfigurableDrawerForm = forwardRef<
|
||||
ConfigurableDrawerFormRef,
|
||||
ConfigurableDrawerFormProps
|
||||
>(({ title = "表单", columns, onSubmit, initialValues, width = 600 }, ref) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [formData, setFormData] = React.useState(initialValues || {});
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
// 添加表单实例引用
|
||||
const formRef = React.useRef<any>(null);
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (data) => {
|
||||
if (data) {
|
||||
setFormData(data);
|
||||
}
|
||||
console.log("open");
|
||||
setOpen(true);
|
||||
>(
|
||||
(
|
||||
{
|
||||
title = '表单',
|
||||
labelCol = { span: 4 },
|
||||
wrapperCol = { span: 20 },
|
||||
columns,
|
||||
onSubmit,
|
||||
initialValues,
|
||||
width = 600,
|
||||
},
|
||||
close: () => setOpen(false),
|
||||
}));
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (onSubmit) {
|
||||
await formRef.current?.validateFields();
|
||||
setLoading(true);
|
||||
const values = formRef.current?.getFieldsValue();
|
||||
const success = await onSubmit(values);
|
||||
if (success) {
|
||||
setOpen(false);
|
||||
return true;
|
||||
ref,
|
||||
) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [formData, setFormData] = React.useState(initialValues || {});
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
// 添加表单实例引用
|
||||
const formRef = React.useRef<any>(null);
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (data) => {
|
||||
if (data) {
|
||||
setFormData(data);
|
||||
}
|
||||
return false;
|
||||
console.log('open');
|
||||
setOpen(true);
|
||||
},
|
||||
close: () => setOpen(false),
|
||||
}));
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (onSubmit) {
|
||||
await formRef.current?.validateFields();
|
||||
setLoading(true);
|
||||
const values = formRef.current?.getFieldsValue();
|
||||
const success = await onSubmit(values);
|
||||
if (success) {
|
||||
setOpen(false);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const customHeader = (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "0 0px 16px 0px",
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
marginBottom: "16px",
|
||||
}}
|
||||
>
|
||||
<Title level={4} style={{ margin: 0 }}>
|
||||
{title}
|
||||
</Title>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={() => setOpen(false)}
|
||||
style={{
|
||||
border: "none",
|
||||
boxShadow: "none",
|
||||
};
|
||||
// const customHeader = (
|
||||
// <div
|
||||
// style={{
|
||||
// display: "flex",
|
||||
// justifyContent: "space-between",
|
||||
// alignItems: "center",
|
||||
// padding: "0 0px 16px 0px",
|
||||
// borderBottom: "1px solid #f0f0f0",
|
||||
// marginBottom: "16px",
|
||||
// }}
|
||||
// >
|
||||
// <Title level={4} style={{ margin: 0 }}>
|
||||
// {title}
|
||||
// </Title>
|
||||
// <Button
|
||||
// type="text"
|
||||
// icon={<CloseOutlined />}
|
||||
// onClick={() => setOpen(false)}
|
||||
// style={{
|
||||
// border: "none",
|
||||
// boxShadow: "none",
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
return (
|
||||
<Drawer
|
||||
title={title}
|
||||
styles={{
|
||||
header: {
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Drawer
|
||||
title={title}
|
||||
styles={{
|
||||
header: {
|
||||
textAlign: "left",
|
||||
position: "relative",
|
||||
},
|
||||
}}
|
||||
destroyOnHidden
|
||||
closable={true} // 隐藏默认关闭按钮
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
width={width}
|
||||
footer={
|
||||
<Space style={{ width: "100%", justifyContent: "end" }}>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{/* {customHeader} */}
|
||||
<BetaSchemaForm
|
||||
initialValues={formData}
|
||||
layoutType="Form"
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
layout="horizontal"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
submitter={false}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
});
|
||||
destroyOnHidden
|
||||
closable={true} // 隐藏默认关闭按钮
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
width={width}
|
||||
footer={
|
||||
<Space style={{ width: '100%', justifyContent: 'end' }}>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{/* {customHeader} */}
|
||||
<BetaSchemaForm
|
||||
initialValues={formData}
|
||||
layoutType="Form"
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
layout="horizontal"
|
||||
labelCol={labelCol}
|
||||
wrapperCol={wrapperCol}
|
||||
submitter={false}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default ConfigurableDrawerForm;
|
||||
|
||||
@@ -1,55 +1,39 @@
|
||||
// components/EnhancedProTable/EnhancedProTable.tsx
|
||||
import React, {
|
||||
useRef,
|
||||
useState,
|
||||
useCallback,
|
||||
useMemo,
|
||||
act,
|
||||
forwardRef,
|
||||
} from "react";
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
type ActionType,
|
||||
type ParamsType,
|
||||
ProTable,
|
||||
ProColumns,
|
||||
ActionType,
|
||||
TableDropdown,
|
||||
ParamsType,
|
||||
} from "@ant-design/pro-components";
|
||||
import { Button, Space } from "antd";
|
||||
import {
|
||||
EnhancedProTableProps,
|
||||
BaseRecord,
|
||||
TableAction,
|
||||
ToolbarAction,
|
||||
} from "./types";
|
||||
import {
|
||||
buildTableDropdownMenuItems,
|
||||
handleTableDropdownSelect,
|
||||
formatPaginationTotal,
|
||||
} from "@/utils/antd/tableHelpers";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
} from '@ant-design/pro-components';
|
||||
import { Button, Space } from 'antd';
|
||||
import React, { forwardRef, useCallback, useMemo, useState } from 'react';
|
||||
import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
|
||||
import type { BaseRecord, EnhancedProTableProps } from './types';
|
||||
|
||||
function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
props: EnhancedProTableProps<T, U>,
|
||||
ref: React.Ref<ActionType | undefined> | undefined
|
||||
ref: React.Ref<ActionType | undefined> | undefined,
|
||||
) {
|
||||
const {
|
||||
columns,
|
||||
request,
|
||||
actions = [],
|
||||
permissions = [],
|
||||
// actions = [],
|
||||
// permissions = [],
|
||||
checkPermission = () => true,
|
||||
toolbarActions,
|
||||
showIndex = true,
|
||||
showSelection = true,
|
||||
showActions = true,
|
||||
maxActionCount = 2,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onView,
|
||||
onExport,
|
||||
customToolbarRender,
|
||||
// showActions = true,
|
||||
// maxActionCount = 2,
|
||||
// onAdd,
|
||||
// onEdit,
|
||||
// onDelete,
|
||||
// onView,
|
||||
// onExport,
|
||||
// customToolbarRender,
|
||||
customActionRender,
|
||||
rowKey,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
@@ -87,17 +71,16 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
[showSelection]
|
||||
[showSelection],
|
||||
);
|
||||
|
||||
const toolBarRender = useCallback(
|
||||
(
|
||||
action: ActionType | undefined,
|
||||
rows: {
|
||||
selectedRowKeys?: (string | number)[] | undefined;
|
||||
selectedRows?: T[] | undefined;
|
||||
}
|
||||
) => {
|
||||
const toolBarRender = useCallback(() =>
|
||||
// action: ActionType | undefined,
|
||||
// rows: {
|
||||
// selectedRowKeys?: (string | number)[] | undefined;
|
||||
// selectedRows?: T[] | undefined;
|
||||
// }
|
||||
{
|
||||
const toolbarElements =
|
||||
toolbarActions?.map((action) => {
|
||||
return (
|
||||
@@ -124,25 +107,22 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
// </Button>,
|
||||
// ];
|
||||
return toolbarElements;
|
||||
},
|
||||
[toolbarActions]
|
||||
);
|
||||
}, [toolbarActions]);
|
||||
return (
|
||||
<ProTable<T, U>
|
||||
{...restProps}
|
||||
columns={columns}
|
||||
actionRef={ref}
|
||||
request={request}
|
||||
rowKey="id"
|
||||
rowKey={rowKey || 'id'}
|
||||
rowSelection={rowSelection}
|
||||
toolBarRender={toolBarRender}
|
||||
manualRequest={false}
|
||||
showSorterTooltip
|
||||
tableAlertRender={tableAlertRender}
|
||||
// tableAlertOptionRender={tableAlertOptionRender}
|
||||
scroll={{ x: "max-content" }}
|
||||
scroll={{ x: 'max-content' }}
|
||||
search={{
|
||||
labelWidth: "auto",
|
||||
labelWidth: 'auto',
|
||||
defaultCollapsed: false,
|
||||
...restProps.search,
|
||||
}}
|
||||
@@ -156,6 +136,7 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 10,
|
||||
showTotal: formatPaginationTotal,
|
||||
...restProps.pagination,
|
||||
}}
|
||||
@@ -165,7 +146,7 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
|
||||
export default forwardRef(EnhancedProTable) as <
|
||||
T extends BaseRecord,
|
||||
U extends ParamsType = any
|
||||
U extends ParamsType = any,
|
||||
>(
|
||||
props: EnhancedProTableProps<T, U> & { ref?: React.Ref<ActionType> }
|
||||
props: EnhancedProTableProps<T, U> & { ref?: React.Ref<ActionType> },
|
||||
) => React.ReactElement;
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
// components/EnhancedProTable/types.ts
|
||||
import {
|
||||
ProTableProps,
|
||||
ProColumns,
|
||||
import type {
|
||||
ActionType,
|
||||
} from "@ant-design/pro-components";
|
||||
import { ButtonProps } from "antd";
|
||||
import React from "react";
|
||||
ProColumns,
|
||||
ProTableProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import type { ButtonProps } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export interface BaseRecord {
|
||||
id: number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
total?: number;
|
||||
success: boolean;
|
||||
message?: string;
|
||||
}
|
||||
@@ -32,7 +31,7 @@ export interface TableAction<T = any> {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
type?: ButtonProps["type"];
|
||||
type?: ButtonProps['type'];
|
||||
danger?: boolean;
|
||||
disabled?: (record: T) => boolean;
|
||||
visible?: (record: T) => boolean;
|
||||
@@ -44,7 +43,7 @@ export interface ToolbarAction {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
type?: ButtonProps["type"];
|
||||
type?: ButtonProps['type'];
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
onClick: (selectedKeys?: React.Key[], selectedRows?: any[]) => void;
|
||||
@@ -53,10 +52,10 @@ export interface ToolbarAction {
|
||||
}
|
||||
|
||||
export interface EnhancedProTableProps<T extends BaseRecord, U = any>
|
||||
extends Omit<ProTableProps<T, U>, "columns" | "request" | "toolBarRender"> {
|
||||
extends Omit<ProTableProps<T, U>, 'columns' | 'request' | 'toolBarRender'> {
|
||||
columns: ProColumns<T>[];
|
||||
request?: (
|
||||
params: U & { current?: number; pageSize?: number }
|
||||
params: U & { current?: number; pageSize?: number },
|
||||
) => Promise<ApiResponse<T>>;
|
||||
loading?: boolean; // 添加 loading 属性
|
||||
actions?: TableAction<T>[];
|
||||
@@ -73,11 +72,11 @@ export interface EnhancedProTableProps<T extends BaseRecord, U = any>
|
||||
onView?: (record: T) => void;
|
||||
onExport?: (selectedRows: T[]) => void;
|
||||
customToolbarRender?: (
|
||||
defaultActions: React.ReactNode[]
|
||||
defaultActions: React.ReactNode[],
|
||||
) => React.ReactNode[];
|
||||
customActionRender?: (
|
||||
record: T,
|
||||
defaultActions: React.ReactNode[]
|
||||
defaultActions: React.ReactNode[],
|
||||
) => React.ReactNode[];
|
||||
}
|
||||
|
||||
|
||||
72
src/components/ModalDescriptions/index.tsx
Normal file
72
src/components/ModalDescriptions/index.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import {
|
||||
ProDescriptions,
|
||||
type ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import { type DescriptionsProps, Modal } from 'antd';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useImperativeHandle,
|
||||
useState,
|
||||
} from 'react';
|
||||
export interface DescriptionsFormRef {
|
||||
open: (data?: Record<string, any>) => void;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
columns: ProDescriptionsItemProps<Record<string, any>, 'text'>[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
const ModalDescriptions = forwardRef((props: Props, ref) => {
|
||||
const { columns, title } = props;
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [data, setData] = useState<DescriptionsProps['items']>([]);
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (data: DescriptionsProps['items']) => {
|
||||
console.log(data);
|
||||
if (data) {
|
||||
setData(data);
|
||||
}
|
||||
setVisible(true);
|
||||
},
|
||||
close: () => setVisible(false),
|
||||
}));
|
||||
|
||||
const changeVisible = useCallback(
|
||||
(flag: boolean) => {
|
||||
setVisible(flag);
|
||||
},
|
||||
[visible],
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={visible}
|
||||
width={800}
|
||||
onCancel={() => changeVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<ProDescriptions
|
||||
labelStyle={{ width: '200px' }}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
bordered
|
||||
column={1}
|
||||
size="small"
|
||||
title={title}
|
||||
// tooltip="操作日志详情"
|
||||
></ProDescriptions>
|
||||
{/* <Descriptions
|
||||
title="操作日志"
|
||||
column={1}
|
||||
bordered
|
||||
size="small"
|
||||
items={data}
|
||||
/> */}
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export default React.memo(ModalDescriptions);
|
||||
105
src/components/TagEditor/index.tsx
Normal file
105
src/components/TagEditor/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
// src/components/TagEditor/index.tsx
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { TagProps } from 'antd';
|
||||
import { Input, Space, Tag } from 'antd';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
|
||||
interface TagEditorProps {
|
||||
value?: string[];
|
||||
onChange?: (value: string[]) => void;
|
||||
placeholder?: string;
|
||||
maxCount?: number;
|
||||
tagProps?: TagProps;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const TagEditor: React.FC<TagEditorProps> = ({
|
||||
value = [],
|
||||
onChange,
|
||||
placeholder = '请输入标签',
|
||||
maxCount,
|
||||
tagProps,
|
||||
disabled = false,
|
||||
}) => {
|
||||
// const [tags, setTags] = useState<string[]>(value);
|
||||
const [inputVisible, setInputVisible] = useState(false);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const tags = useMemo(() => {
|
||||
return value || [];
|
||||
}, [value]);
|
||||
|
||||
const handleClose = (removedTag: string) => {
|
||||
const newTags = tags.filter((tag) => tag !== removedTag);
|
||||
onChange?.(newTags);
|
||||
};
|
||||
|
||||
const showInput = () => {
|
||||
setInputVisible(true);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
};
|
||||
|
||||
const handleInputConfirm = () => {
|
||||
if (inputValue && !tags.includes(inputValue)) {
|
||||
const newTags = [...tags, inputValue];
|
||||
onChange?.(newTags);
|
||||
}
|
||||
setInputVisible(false);
|
||||
setInputValue('');
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
handleInputConfirm();
|
||||
};
|
||||
|
||||
const canAddMore = !maxCount || tags.length < maxCount;
|
||||
|
||||
return (
|
||||
<Space wrap>
|
||||
{tags.map((tag) => (
|
||||
<Tag
|
||||
key={tag}
|
||||
closable={!disabled}
|
||||
onClose={() => handleClose(tag)}
|
||||
{...tagProps}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
|
||||
{inputVisible ? (
|
||||
<Input
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ width: 110 }}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputBlur}
|
||||
onPressEnter={handleInputConfirm}
|
||||
placeholder={placeholder}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
canAddMore &&
|
||||
!disabled && (
|
||||
<Tag
|
||||
onClick={showInput}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderStyle: 'dashed',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> 添加标签
|
||||
</Tag>
|
||||
)
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagEditor;
|
||||
691
src/components/Tinymce/demo.tsx
Normal file
691
src/components/Tinymce/demo.tsx
Normal file
@@ -0,0 +1,691 @@
|
||||
// components/RichEditor/index.tsx
|
||||
|
||||
import { Editor } from '@tinymce/tinymce-react';
|
||||
import { message } from 'antd';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import type { Editor as TinyMCEEditor } from 'tinymce';
|
||||
import './index.less';
|
||||
|
||||
export interface RichEditorProps {
|
||||
value?: string;
|
||||
onChange?: (content: string) => void;
|
||||
height?: number;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
uploadConfig?: {
|
||||
action: string;
|
||||
headers?: Record<string, string>;
|
||||
maxSize?: number;
|
||||
acceptTypes?: string[];
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
showWordCount?: boolean;
|
||||
maxWords?: number;
|
||||
}
|
||||
|
||||
const RichEditor: React.FC<RichEditorProps> = ({
|
||||
value = '',
|
||||
onChange,
|
||||
height = 400,
|
||||
placeholder = '请输入内容...',
|
||||
disabled = false,
|
||||
showWordCount = true,
|
||||
maxWords,
|
||||
uploadConfig = {
|
||||
action: '/api/upload/image',
|
||||
maxSize: 5,
|
||||
acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
},
|
||||
}) => {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [wordCount, setWordCount] = useState(0);
|
||||
const [charCount, setCharCount] = useState(0);
|
||||
|
||||
// 自定义字数统计函数
|
||||
const countWords = (text: string) => {
|
||||
const plainText = text.replace(/<[^>]*>/g, '');
|
||||
const cleanText = plainText.replace(/\s+/g, ' ').trim();
|
||||
|
||||
if (!cleanText) return { words: 0, characters: 0 };
|
||||
|
||||
const chineseChars = cleanText.match(/[\u4e00-\u9fa5]/g) || [];
|
||||
const englishWords = cleanText.match(/[a-zA-Z]+/g) || [];
|
||||
const numbers = cleanText.match(/\d+/g) || [];
|
||||
|
||||
const words = chineseChars.length + englishWords.length + numbers.length;
|
||||
const characters = cleanText.length;
|
||||
|
||||
return { words, characters };
|
||||
};
|
||||
|
||||
const handleEditorChange = (content: string) => {
|
||||
onChange?.(content);
|
||||
|
||||
if (showWordCount) {
|
||||
const { words, characters } = countWords(content);
|
||||
setWordCount(words);
|
||||
setCharCount(characters);
|
||||
|
||||
if (maxWords && words > maxWords) {
|
||||
message.warning(
|
||||
`内容超出字数限制,当前 ${words} 字,限制 ${maxWords} 字`,
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (showWordCount && value) {
|
||||
const { words, characters } = countWords(value);
|
||||
setWordCount(words);
|
||||
setCharCount(characters);
|
||||
}
|
||||
}, [value, showWordCount]);
|
||||
|
||||
const uploadFile = useCallback(
|
||||
async (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
if (uploadConfig.data) {
|
||||
Object.keys(uploadConfig.data).forEach((key) => {
|
||||
if (uploadConfig.data) formData.append(key, uploadConfig.data[key]);
|
||||
});
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
console.log(`上传进度: ${percent}%`);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
if (response.code === 200 && response.data?.url) {
|
||||
resolve(response.data.url);
|
||||
} else {
|
||||
reject(response.message || '上传失败');
|
||||
}
|
||||
} catch (_error) {
|
||||
reject('响应解析失败');
|
||||
}
|
||||
} else {
|
||||
reject(`上传失败: ${xhr.status}`);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
reject('网络错误');
|
||||
});
|
||||
|
||||
if (uploadConfig.headers) {
|
||||
Object.keys(uploadConfig.headers).forEach((key) => {
|
||||
if (uploadConfig.headers)
|
||||
xhr.setRequestHeader(key, uploadConfig.headers[key]);
|
||||
});
|
||||
}
|
||||
|
||||
xhr.open('POST', uploadConfig.action);
|
||||
xhr.send(formData);
|
||||
});
|
||||
},
|
||||
[uploadConfig],
|
||||
);
|
||||
|
||||
const handleImageUpload = useCallback(
|
||||
(blobInfo: any, _: (percent: number) => void): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
setUploading(true);
|
||||
const file = blobInfo.blob();
|
||||
uploadFile(file).then((url) => {
|
||||
resolve(url);
|
||||
message.success('图片上传成功');
|
||||
});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
message.error(typeof error === 'string' ? error : '上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
[uploadFile],
|
||||
);
|
||||
|
||||
const handleCustomUpload = useCallback(
|
||||
(editor: TinyMCEEditor) => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
|
||||
input.multiple = true;
|
||||
|
||||
const handleFileChange = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const files = Array.from(target.files || []);
|
||||
|
||||
if (files.length === 0) return;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
for (const file of files) {
|
||||
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
|
||||
if (!isValidType) {
|
||||
message.error(`文件 ${file.name} 类型不支持`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const isValidSize =
|
||||
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
|
||||
if (!isValidSize) {
|
||||
message.error(
|
||||
`文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = await uploadFile(file);
|
||||
const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
|
||||
editor.insertContent(imgHtml);
|
||||
message.success(`${file.name} 上传成功`);
|
||||
} catch (error) {
|
||||
message.error(`${file.name} 上传失败: ${error}`);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('change', handleFileChange);
|
||||
input.click();
|
||||
},
|
||||
[uploadConfig, uploadFile],
|
||||
);
|
||||
|
||||
// 全展开的工具栏配置
|
||||
const editorConfig = {
|
||||
height,
|
||||
menubar: 'file edit view insert format tools table help',
|
||||
plugins: [
|
||||
'advlist',
|
||||
'autolink',
|
||||
'lists',
|
||||
'link',
|
||||
'image',
|
||||
'charmap',
|
||||
'preview',
|
||||
'anchor',
|
||||
'searchreplace',
|
||||
'visualblocks',
|
||||
'code',
|
||||
'fullscreen',
|
||||
'insertdatetime',
|
||||
'media',
|
||||
'table',
|
||||
'help',
|
||||
'wordcount',
|
||||
'emoticons',
|
||||
'template',
|
||||
'codesample',
|
||||
'hr',
|
||||
'pagebreak',
|
||||
'nonbreaking',
|
||||
'toc',
|
||||
'imagetools',
|
||||
'textpattern',
|
||||
'noneditable',
|
||||
'quickbars',
|
||||
'accordion',
|
||||
],
|
||||
|
||||
// 修改为全展开的工具栏配置
|
||||
toolbar: [
|
||||
// 第一行:撤销重做 + 格式选择 + 字体
|
||||
'undo redo | blocks fontfamily fontsize',
|
||||
|
||||
// 第二行:文本格式
|
||||
'bold italic underline strikethrough subscript superscript | forecolor backcolor',
|
||||
|
||||
// 第三行:对齐和列表
|
||||
'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
|
||||
|
||||
// 第四行:插入功能
|
||||
'link customupload image media table emoticons charmap insertdatetime hr pagebreak',
|
||||
|
||||
// 第五行:高级功能
|
||||
'codesample accordion blockquote | searchreplace visualblocks code',
|
||||
|
||||
// 第六行:其他工具
|
||||
'removeformat | fullscreen preview help',
|
||||
].join(' | '),
|
||||
|
||||
// 设置工具栏模式为换行显示,而不是滑动
|
||||
toolbar_mode: 'wrap' as const, // 改为 wrap 模式,全部展开
|
||||
|
||||
// 工具栏分组,每组之间有分隔符
|
||||
toolbar_groups: {
|
||||
history: { icon: 'undo', tooltip: '历史操作' },
|
||||
formatting: { icon: 'bold', tooltip: '文本格式' },
|
||||
alignment: { icon: 'align-left', tooltip: '对齐方式' },
|
||||
indentation: { icon: 'indent', tooltip: '缩进' },
|
||||
insert: { icon: 'plus', tooltip: '插入' },
|
||||
tools: { icon: 'preferences', tooltip: '工具' },
|
||||
},
|
||||
|
||||
font_family_formats: [
|
||||
'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif',
|
||||
'苹方=PingFang SC,Microsoft YaHei,sans-serif',
|
||||
'宋体=SimSun,serif',
|
||||
'黑体=SimHei,sans-serif',
|
||||
'楷体=KaiTi,serif',
|
||||
'Arial=arial,helvetica,sans-serif',
|
||||
'Times New Roman=times new roman,times,serif',
|
||||
'Courier New=courier new,courier,monospace',
|
||||
].join(';'),
|
||||
|
||||
fontsize_formats:
|
||||
'8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 48px 72px',
|
||||
|
||||
block_formats: [
|
||||
'段落=p',
|
||||
'标题1=h1',
|
||||
'标题2=h2',
|
||||
'标题3=h3',
|
||||
'标题4=h4',
|
||||
'标题5=h5',
|
||||
'标题6=h6',
|
||||
'预格式化=pre',
|
||||
'地址=address',
|
||||
'代码=code',
|
||||
].join(';'),
|
||||
|
||||
// 字数统计配置
|
||||
wordcount_countregex: /[\w\u2019\u4e00-\u9fa5]+/g,
|
||||
wordcount_cleanregex: /[0-9.(),;:!?%#$?\x27\x22_+=\\/-]*/g,
|
||||
|
||||
// 颜色配置
|
||||
color_map: [
|
||||
'000000',
|
||||
'黑色',
|
||||
'993300',
|
||||
'深红色',
|
||||
'333300',
|
||||
'深黄色',
|
||||
'003300',
|
||||
'深绿色',
|
||||
'003366',
|
||||
'深青色',
|
||||
'000080',
|
||||
'深蓝色',
|
||||
'333399',
|
||||
'蓝色',
|
||||
'333333',
|
||||
'深灰色',
|
||||
'800000',
|
||||
'栗色',
|
||||
'FF6600',
|
||||
'橙色',
|
||||
'808000',
|
||||
'橄榄色',
|
||||
'008000',
|
||||
'绿色',
|
||||
'008080',
|
||||
'青色',
|
||||
'0000FF',
|
||||
'蓝色',
|
||||
'666699',
|
||||
'灰蓝色',
|
||||
'808080',
|
||||
'灰色',
|
||||
'FF0000',
|
||||
'红色',
|
||||
'FF9900',
|
||||
'琥珀色',
|
||||
'99CC00',
|
||||
'黄绿色',
|
||||
'339966',
|
||||
'海绿色',
|
||||
'33CCCC',
|
||||
'青绿色',
|
||||
'3366FF',
|
||||
'蓝色',
|
||||
'800080',
|
||||
'紫色',
|
||||
'999999',
|
||||
'中灰色',
|
||||
'FF00FF',
|
||||
'洋红色',
|
||||
'FFCC00',
|
||||
'金色',
|
||||
'FFFF00',
|
||||
'黄色',
|
||||
'00FF00',
|
||||
'酸橙色',
|
||||
'00FFFF',
|
||||
'水蓝色',
|
||||
'00CCFF',
|
||||
'天蓝色',
|
||||
'993366',
|
||||
'红紫色',
|
||||
'FFFFFF',
|
||||
'白色',
|
||||
],
|
||||
|
||||
// 代码高亮配置
|
||||
codesample_languages: [
|
||||
{ text: 'HTML/XML', value: 'markup' },
|
||||
{ text: 'JavaScript', value: 'javascript' },
|
||||
{ text: 'TypeScript', value: 'typescript' },
|
||||
{ text: 'CSS', value: 'css' },
|
||||
{ text: 'SCSS', value: 'scss' },
|
||||
{ text: 'Python', value: 'python' },
|
||||
{ text: 'Java', value: 'java' },
|
||||
{ text: 'C++', value: 'cpp' },
|
||||
{ text: 'C#', value: 'csharp' },
|
||||
{ text: 'PHP', value: 'php' },
|
||||
{ text: 'Ruby', value: 'ruby' },
|
||||
{ text: 'Go', value: 'go' },
|
||||
{ text: 'Rust', value: 'rust' },
|
||||
{ text: 'SQL', value: 'sql' },
|
||||
{ text: 'JSON', value: 'json' },
|
||||
{ text: 'Bash', value: 'bash' },
|
||||
],
|
||||
|
||||
// 表格配置
|
||||
table_default_attributes: {
|
||||
border: '1',
|
||||
},
|
||||
table_default_styles: {
|
||||
'border-collapse': 'collapse',
|
||||
width: '100%',
|
||||
},
|
||||
table_class_list: [
|
||||
{ title: '无样式', value: '' },
|
||||
{ title: '简单表格', value: 'simple-table' },
|
||||
{ title: '条纹表格', value: 'striped-table' },
|
||||
{ title: '边框表格', value: 'bordered-table' },
|
||||
],
|
||||
|
||||
// 链接配置
|
||||
link_default_target: '_blank',
|
||||
link_assume_external_targets: true,
|
||||
link_context_toolbar: true,
|
||||
|
||||
// 图片配置
|
||||
image_advtab: true,
|
||||
image_caption: true,
|
||||
|
||||
// 媒体配置
|
||||
media_live_embeds: true,
|
||||
media_filter_html: false,
|
||||
|
||||
content_style: `
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1 { font-size: 2em; color: #1a1a1a; }
|
||||
h2 { font-size: 1.5em; color: #2a2a2a; }
|
||||
h3 { font-size: 1.25em; color: #3a3a3a; }
|
||||
|
||||
p { margin-bottom: 16px; }
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #e8e8e8;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #1890ff;
|
||||
margin: 16px 0;
|
||||
padding: 8px 16px;
|
||||
background-color: #f6f8fa;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f1f3f4;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
`,
|
||||
|
||||
placeholder,
|
||||
branding: false,
|
||||
elementpath: true,
|
||||
resize: 'both' as const,
|
||||
statusbar: showWordCount,
|
||||
|
||||
// 图片上传配置
|
||||
images_upload_handler: handleImageUpload,
|
||||
automatic_uploads: true,
|
||||
images_reuse_filename: true,
|
||||
images_upload_url: uploadConfig.action,
|
||||
images_upload_base_path: '',
|
||||
images_upload_credentials: true,
|
||||
|
||||
// 粘贴配置
|
||||
paste_data_images: true,
|
||||
paste_as_text: false,
|
||||
paste_webkit_styles: 'none',
|
||||
paste_merge_formats: true,
|
||||
paste_remove_styles_if_webkit: true,
|
||||
|
||||
// 文件选择器配置
|
||||
file_picker_types: 'image media',
|
||||
file_picker_callback: (
|
||||
callback: (url: string, meta?: any) => void,
|
||||
// value: string,
|
||||
meta: any,
|
||||
) => {
|
||||
if (meta.filetype === 'image') {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
|
||||
|
||||
const handleChange = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
|
||||
const isValidSize =
|
||||
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
|
||||
|
||||
if (!isValidType) {
|
||||
message.error('文件类型不支持');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isValidSize) {
|
||||
message.error(`文件大小不能超过 ${uploadConfig.maxSize || 5}MB`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setUploading(true);
|
||||
const url = await uploadFile(file);
|
||||
callback(url, { alt: file.name });
|
||||
message.success('图片上传成功');
|
||||
} catch (error) {
|
||||
message.error('上传失败');
|
||||
console.error('Upload error:', error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('change', handleChange);
|
||||
input.click();
|
||||
}
|
||||
},
|
||||
|
||||
// 快速工具栏
|
||||
quickbars_selection_toolbar:
|
||||
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
|
||||
quickbars_insert_toolbar: 'quickimage quicktable',
|
||||
|
||||
// 文本模式
|
||||
textpattern_patterns: [
|
||||
{ start: '*', end: '*', format: 'italic' },
|
||||
{ start: '**', end: '**', format: 'bold' },
|
||||
{ start: '#', format: 'h1' },
|
||||
{ start: '##', format: 'h2' },
|
||||
{ start: '###', format: 'h3' },
|
||||
{ start: '####', format: 'h4' },
|
||||
{ start: '#####', format: 'h5' },
|
||||
{ start: '######', format: 'h6' },
|
||||
{ start: '1. ', cmd: 'InsertOrderedList' },
|
||||
{ start: '* ', cmd: 'InsertUnorderedList' },
|
||||
{ start: '- ', cmd: 'InsertUnorderedList' },
|
||||
],
|
||||
|
||||
// 初始化设置
|
||||
setup: (editor: TinyMCEEditor) => {
|
||||
// 注册自定义上传按钮
|
||||
editor.ui.registry.addButton('customupload', {
|
||||
text: uploading ? '上传中...' : '上传',
|
||||
icon: 'upload',
|
||||
tooltip: '上传图片(支持多选)',
|
||||
enabled: !disabled && !uploading,
|
||||
onAction: () => {
|
||||
handleCustomUpload(editor);
|
||||
},
|
||||
});
|
||||
|
||||
// 监听内容变化,实时更新字数统计
|
||||
editor.on('input change undo redo', () => {
|
||||
if (showWordCount) {
|
||||
const content = editor.getContent();
|
||||
const { words, characters } = countWords(content);
|
||||
setWordCount(words);
|
||||
setCharCount(characters);
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('init', () => {
|
||||
console.log('编辑器初始化完成');
|
||||
|
||||
// 初始化字数统计
|
||||
if (showWordCount && value) {
|
||||
const { words, characters } = countWords(value);
|
||||
setWordCount(words);
|
||||
setCharCount(characters);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 其他配置
|
||||
convert_urls: false,
|
||||
remove_script_host: false,
|
||||
relative_urls: false,
|
||||
language: 'zh_CN',
|
||||
directionality: 'ltr' as const,
|
||||
|
||||
// 高级配置
|
||||
extended_valid_elements: 'script[src|async|defer|type|charset]',
|
||||
|
||||
// 性能配置
|
||||
browser_spellcheck: true,
|
||||
contextmenu: 'link image table',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rich-editor-wrapper">
|
||||
<Editor
|
||||
value={value}
|
||||
onEditorChange={handleEditorChange}
|
||||
init={editorConfig}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{/* 自定义字数统计显示 */}
|
||||
{showWordCount && (
|
||||
<div className="word-count-display">
|
||||
<span className="word-count">
|
||||
字数: {wordCount}
|
||||
{maxWords && (
|
||||
<span className={wordCount > maxWords ? 'over-limit' : ''}>
|
||||
/{maxWords}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="char-count">字符: {charCount}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploading && (
|
||||
<div className="upload-overlay">
|
||||
<div className="upload-spinner">
|
||||
<div className="spinner"></div>
|
||||
<span>上传中...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RichEditor;
|
||||
145
src/components/Tinymce/index.less
Normal file
145
src/components/Tinymce/index.less
Normal file
@@ -0,0 +1,145 @@
|
||||
/* components/RichEditor/index.css */
|
||||
.rich-editor-wrapper {
|
||||
position: relative;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper:hover {
|
||||
border-color: #4096ff;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper:focus-within {
|
||||
border-color: #4096ff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-tinymce {
|
||||
border: none !important;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-editor-header {
|
||||
border-bottom: 1px solid #e8e8e8 !important;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-toolbar__primary {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-statusbar {
|
||||
border-top: 1px solid #e8e8e8 !important;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
/* 自定义按钮样式 */
|
||||
.rich-editor-wrapper .tox-tbtn--enabled {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-tbtn--enabled:hover {
|
||||
background: #e6f7ff !important;
|
||||
border-color: #91d5ff !important;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-tbtn--enabled:active {
|
||||
background: #bae7ff !important;
|
||||
}
|
||||
|
||||
/* 上传状态覆盖层 */
|
||||
.upload-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.upload-spinner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #1890ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-spinner span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.rich-editor-wrapper .tox-toolbar__primary {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-toolbar__group {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片样式优化 */
|
||||
.rich-editor-wrapper .tox-edit-area img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-edit-area img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
.rich-editor-wrapper .tox-edit-area table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-edit-area table td,
|
||||
.rich-editor-wrapper .tox-edit-area table th {
|
||||
border: 1px solid #e8e8e8;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.rich-editor-wrapper .tox-edit-area table th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
262
src/components/Tinymce/index.tsx
Normal file
262
src/components/Tinymce/index.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import { Editor } from '@tinymce/tinymce-react';
|
||||
import { message } from 'antd';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import type { Editor as TinyMCEEditor } from 'tinymce';
|
||||
export interface RichEditorProps {
|
||||
value?: string;
|
||||
onChange?: (content: string) => void;
|
||||
height?: number;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
uploadConfig?: {
|
||||
action: string;
|
||||
headers?: Record<string, string>;
|
||||
maxSize?: number;
|
||||
acceptTypes?: string[];
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
showWordCount?: boolean;
|
||||
maxWords?: number;
|
||||
}
|
||||
const RichEditor: React.FC<RichEditorProps> = ({
|
||||
// value = "",
|
||||
// onChange,
|
||||
// height = 400,
|
||||
// placeholder = "请输入内容...",
|
||||
disabled = false,
|
||||
// showWordCount = true,
|
||||
// maxWords,
|
||||
uploadConfig = {
|
||||
action: '/api/upload/image',
|
||||
maxSize: 5,
|
||||
acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
},
|
||||
}) => {
|
||||
const [uploading, setUploading] = useState<boolean>(false);
|
||||
const uploadFile = useCallback(
|
||||
async (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
if (uploadConfig.data) {
|
||||
Object.keys(uploadConfig.data).forEach((key) => {
|
||||
formData.append(key, uploadConfig.data?.[key]);
|
||||
});
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
console.log(`上传进度: ${percent}%`);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
if (response.code === 200 && response.data?.url) {
|
||||
resolve(response.data.url);
|
||||
} else {
|
||||
reject(response.message || '上传失败');
|
||||
}
|
||||
} catch (_error) {
|
||||
reject('响应解析失败');
|
||||
}
|
||||
} else {
|
||||
reject(`上传失败: ${xhr.status}`);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
reject('网络错误');
|
||||
});
|
||||
|
||||
if (uploadConfig.headers) {
|
||||
Object.keys(uploadConfig.headers).forEach((key) => {
|
||||
xhr.setRequestHeader(key, uploadConfig.headers![key]);
|
||||
});
|
||||
}
|
||||
|
||||
xhr.open('POST', uploadConfig.action);
|
||||
xhr.send(formData);
|
||||
});
|
||||
},
|
||||
[uploadConfig],
|
||||
);
|
||||
const handleImageUpload = useCallback(
|
||||
(blobInfo: any, _: (percent: number) => void): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
setUploading(true);
|
||||
const file = blobInfo.blob();
|
||||
uploadFile(file).then((url) => {
|
||||
resolve(url);
|
||||
});
|
||||
|
||||
message.success('图片上传成功');
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
message.error(typeof error === 'string' ? error : '上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
[uploadFile],
|
||||
);
|
||||
|
||||
const handleCustomUpload = useCallback(
|
||||
(editor: TinyMCEEditor) => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
|
||||
input.multiple = true;
|
||||
|
||||
const handleFileChange = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const files = Array.from(target.files || []);
|
||||
|
||||
if (files.length === 0) return;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
for (const file of files) {
|
||||
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
|
||||
if (!isValidType) {
|
||||
message.error(`文件 ${file.name} 类型不支持`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const isValidSize =
|
||||
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
|
||||
if (!isValidSize) {
|
||||
message.error(
|
||||
`文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = await uploadFile(file);
|
||||
const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
|
||||
editor.insertContent(imgHtml);
|
||||
message.success(`${file.name} 上传成功`);
|
||||
} catch (error) {
|
||||
message.error(`${file.name} 上传失败: ${error}`);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('change', handleFileChange);
|
||||
input.click();
|
||||
},
|
||||
[uploadConfig, uploadFile],
|
||||
);
|
||||
|
||||
return (
|
||||
<Editor
|
||||
apiKey="xt51qhzvj8q9mxzxytigtp0nu94v4rz7dska2dbqeilkxo99"
|
||||
init={{
|
||||
plugins: [
|
||||
// Core editing features
|
||||
'anchor',
|
||||
'autolink',
|
||||
'charmap',
|
||||
'codesample',
|
||||
'emoticons',
|
||||
'link',
|
||||
'lists',
|
||||
'media',
|
||||
'searchreplace',
|
||||
'table',
|
||||
'visualblocks',
|
||||
'wordcount',
|
||||
// Your account includes a free trial of TinyMCE premium features
|
||||
// Try the most popular premium features until Oct 8, 2025:
|
||||
'checklist',
|
||||
'mediaembed',
|
||||
'casechange',
|
||||
'formatpainter',
|
||||
'pageembed',
|
||||
'a11ychecker',
|
||||
'tinymcespellchecker',
|
||||
'permanentpen',
|
||||
'powerpaste',
|
||||
'advtable',
|
||||
'advcode',
|
||||
'advtemplate',
|
||||
'ai',
|
||||
'uploadcare',
|
||||
'mentions',
|
||||
'tinycomments',
|
||||
'tableofcontents',
|
||||
'footnotes',
|
||||
'mergetags',
|
||||
'autocorrect',
|
||||
'typography',
|
||||
'inlinecss',
|
||||
'markdown',
|
||||
'importword',
|
||||
'exportword',
|
||||
'exportpdf',
|
||||
],
|
||||
menubar: false,
|
||||
toolbar:
|
||||
'undo redo | blocks | bold italic forecolor | ' +
|
||||
'alignleft aligncenter | ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent customupload | ' +
|
||||
'removeformat ',
|
||||
tinycomments_mode: 'embedded',
|
||||
tinycomments_author: 'Author name',
|
||||
toolbar_mode: 'sliding',
|
||||
mergetags_list: [
|
||||
{ value: 'First.Name', title: 'First Name' },
|
||||
{ value: 'Email', title: 'Email' },
|
||||
],
|
||||
ai_request: (
|
||||
_: any,
|
||||
respondWith: { string: (arg0: () => Promise<never>) => any },
|
||||
) =>
|
||||
respondWith.string(() =>
|
||||
Promise.reject('See docs to implement AI Assistant'),
|
||||
),
|
||||
language: 'zh-CN',
|
||||
|
||||
// 其他配置
|
||||
|
||||
convert_urls: false,
|
||||
remove_script_host: false,
|
||||
uploadcare_public_key: '0ad3671d77f59c5756dd',
|
||||
|
||||
setup: (editor: TinyMCEEditor) => {
|
||||
// 注册自定义上传按钮
|
||||
editor.ui.registry.addButton('customupload', {
|
||||
text: uploading ? '上传中...' : '上传',
|
||||
icon: 'upload',
|
||||
tooltip: '上传图片(支持多选)',
|
||||
enabled: !disabled && !uploading,
|
||||
onAction: () => {
|
||||
handleCustomUpload(editor);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 图片上传配置
|
||||
images_upload_handler: handleImageUpload,
|
||||
// 性能配置
|
||||
browser_spellcheck: true,
|
||||
contextmenu: 'link image table',
|
||||
}}
|
||||
initialValue="Welcome to TinyMCE!"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(RichEditor);
|
||||
@@ -1,4 +1,8 @@
|
||||
export const formStatusType = { create: '创建', update: '编辑' };
|
||||
export const formStatusType: { [key: string]: string } = {
|
||||
create: '创建',
|
||||
update: '编辑',
|
||||
test: '测试',
|
||||
};
|
||||
|
||||
export const tenantStatus = [
|
||||
{ label: '开启', value: 0 },
|
||||
|
||||
156
src/pages/prod/category/config.tsx
Normal file
156
src/pages/prod/category/config.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import TagEditor from '@/components/TagEditor';
|
||||
import TinyMCEEditor from '@/components/Tinymce';
|
||||
export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
|
||||
{
|
||||
title: '类目名称',
|
||||
dataIndex: 'categoryName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '类目ID',
|
||||
dataIndex: 'categoryId',
|
||||
},
|
||||
{
|
||||
title: '类目层级',
|
||||
dataIndex: 'grade',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '父级类目',
|
||||
dataIndex: 'parentName',
|
||||
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '排序权重',
|
||||
dataIndex: 'sort',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'switch',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
render: (_, record: API.CategoryDO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (data: {
|
||||
type: string;
|
||||
grade: number;
|
||||
}): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '类目',
|
||||
dataIndex: 'grade',
|
||||
valueType: 'radio',
|
||||
fieldProps: {
|
||||
value: data.grade || 1,
|
||||
options: [
|
||||
{ label: '一级类目', value: 1 },
|
||||
{ label: '二级类目', value: 2 },
|
||||
{ label: '三级类目', value: 3 },
|
||||
],
|
||||
disabled: data.type === 'create',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目名称',
|
||||
dataIndex: 'username',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序权重',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
},
|
||||
{
|
||||
title: '类目描述',
|
||||
dataIndex: 'description',
|
||||
valueType: 'textarea',
|
||||
renderFormItem: () => {
|
||||
return <TinyMCEEditor />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '关联父级',
|
||||
dataIndex: 'parentId',
|
||||
valueType: 'select',
|
||||
hideInForm: data.grade - 1 === 0,
|
||||
},
|
||||
{
|
||||
title: '类目icon',
|
||||
dataIndex: 'icon',
|
||||
},
|
||||
{
|
||||
title: '类目标签',
|
||||
dataIndex: 'tages',
|
||||
renderFormItem: () => {
|
||||
return (
|
||||
<TagEditor
|
||||
placeholder="输入标签名称"
|
||||
maxCount={10}
|
||||
tagProps={{
|
||||
color: 'blue',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类目状态',
|
||||
dataIndex: 'status',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
{
|
||||
title: '类目ID',
|
||||
dataIndex: 'categoryId',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateTime',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
valueType: 'dateTime',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
{
|
||||
title: '更新人',
|
||||
dataIndex: 'updator',
|
||||
hideInForm: data.type === 'create',
|
||||
},
|
||||
];
|
||||
|
||||
// {
|
||||
// title: "模板内容",
|
||||
// dataIndex: "content",
|
||||
// valueType: "textarea",
|
||||
// },
|
||||
129
src/pages/prod/category/index.tsx
Normal file
129
src/pages/prod/category/index.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import type { TabsProps } from 'antd';
|
||||
import { Tabs } from 'antd';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import { getCategoryList } from '@/services/prodApi/category';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const ProdCategory = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const [grade, setGrade] = useState<string>('');
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const onChange = useCallback(
|
||||
(key: string) => {
|
||||
setGrade(key);
|
||||
},
|
||||
[grade],
|
||||
);
|
||||
|
||||
const onFetch = async (params: API.getProductCategoryCategoryListParams) => {
|
||||
const data = await getCategoryList({
|
||||
...params,
|
||||
grade: grade ? Number(grade) : undefined,
|
||||
});
|
||||
return {
|
||||
data: data,
|
||||
success: true,
|
||||
};
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
};
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const handleEdit = async (row: API.CategoryDO) => {
|
||||
setType('update');
|
||||
configurableDrawerRef.current?.open(row);
|
||||
};
|
||||
const handleSubmit = async (values: API.CategoryDO) => {
|
||||
console.log('values', values);
|
||||
// const success = await handleAdd(values as API.CategoryDO);
|
||||
// if (success) {
|
||||
// handleClose();
|
||||
// }
|
||||
return true;
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<API.CategoryDO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (_text: React.ReactNode, record: API.CategoryDO, _: number) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<a key="detail">详情</a>,
|
||||
],
|
||||
};
|
||||
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
const renderChildren = () => {
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<API.CategoryDO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
rowKey="categoryId"
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="短信渠道"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
// width="50vw"
|
||||
columns={formColumns({ grade: Number(grade), type })}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '',
|
||||
label: '全部分类',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '三级分类',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '二级分类',
|
||||
children: renderChildren(),
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: '一级分类',
|
||||
children: renderChildren(),
|
||||
},
|
||||
];
|
||||
return <Tabs defaultActiveKey={grade} items={items} onChange={onChange} />;
|
||||
};
|
||||
|
||||
export default ProdCategory;
|
||||
5
src/pages/prod/list/index.tsx
Normal file
5
src/pages/prod/list/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
const ProdList = () => {
|
||||
return <div>ProdList</div>;
|
||||
};
|
||||
|
||||
export default ProdList;
|
||||
105
src/pages/system/log/login/config.tsx
Normal file
105
src/pages/system/log/login/config.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { LoginLogVO } from '@/services/system/log/login';
|
||||
export const baseTenantColumns: ProColumns<LoginLogVO>[] = [
|
||||
{
|
||||
title: '日志编号',
|
||||
dataIndex: 'id',
|
||||
tip: '日志编号',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'logType',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
tip: '操作类型', // 提示信息
|
||||
},
|
||||
{
|
||||
title: '操作模块',
|
||||
dataIndex: 'type',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
dataIndex: 'username',
|
||||
},
|
||||
{
|
||||
title: '登录地址',
|
||||
dataIndex: 'userIp',
|
||||
},
|
||||
|
||||
{
|
||||
title: '浏览器',
|
||||
dataIndex: 'userAgent',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '登录结果',
|
||||
dataIndex: 'result',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '登录日期',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: LoginLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||
Record<string, any>,
|
||||
'text'
|
||||
>[] => [
|
||||
{
|
||||
title: '日志编号',
|
||||
key: 'id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
key: 'logType',
|
||||
dataIndex: 'logType',
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
key: 'username',
|
||||
dataIndex: 'username',
|
||||
},
|
||||
{
|
||||
title: '登录地址',
|
||||
key: 'userIp',
|
||||
dataIndex: 'userIp',
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
key: 'userAgent',
|
||||
dataIndex: 'userAgent',
|
||||
},
|
||||
{
|
||||
title: '登录结果',
|
||||
key: 'result',
|
||||
dataIndex: 'result',
|
||||
},
|
||||
{
|
||||
title: '登录日期',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,67 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import React, { useRef } from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import ModalDescriptions, {
|
||||
type DescriptionsFormRef,
|
||||
} from '@/components/ModalDescriptions';
|
||||
import { getLoginLogPage, type LoginLogVO } from '@/services/system/log/login';
|
||||
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||
|
||||
const SyStemLogLogin = () => {
|
||||
return <>SyStemLogLogin</>;
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: LoginLogVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getLoginLogPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = (record: LoginLogVO) => {
|
||||
descriptionsRef.current?.open(record);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<LoginLogVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (text: React.ReactNode, record: LoginLogVO) => [
|
||||
<a key="editable" onClick={() => handleDetail(record)}>
|
||||
详情
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<LoginLogVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ModalDescriptions
|
||||
ref={descriptionsRef}
|
||||
title="登录日志详情"
|
||||
columns={descriptionsColumns()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemLogLogin;
|
||||
|
||||
134
src/pages/system/log/operate/config.tsx
Normal file
134
src/pages/system/log/operate/config.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import {
|
||||
type ProColumns,
|
||||
type ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { DescriptionsProps } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import type { OperateLogVO } from '@/services/system/log/operate';
|
||||
export const baseTenantColumns: ProColumns<OperateLogVO>[] = [
|
||||
{
|
||||
title: '日志编号',
|
||||
dataIndex: 'id',
|
||||
tip: '日志编号',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'userName',
|
||||
tip: '操作人', // 提示信息
|
||||
},
|
||||
{
|
||||
title: '操作模块',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '操作名',
|
||||
dataIndex: 'subType',
|
||||
},
|
||||
{
|
||||
title: '操作内容',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: OperateLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: '业务编号',
|
||||
dataIndex: 'bizId',
|
||||
},
|
||||
{
|
||||
title: '操作 IP',
|
||||
dataIndex: 'userIp',
|
||||
hideInSearch: true,
|
||||
},
|
||||
];
|
||||
|
||||
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||
Record<string, any>,
|
||||
'text'
|
||||
>[] => [
|
||||
{
|
||||
title: '日志主键',
|
||||
key: 'id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '链路追踪',
|
||||
key: 'traceId',
|
||||
dataIndex: 'traceId',
|
||||
},
|
||||
{
|
||||
title: '操作人编号',
|
||||
key: 'userId',
|
||||
dataIndex: 'userId',
|
||||
},
|
||||
{
|
||||
title: '操作人名字',
|
||||
key: 'userName',
|
||||
dataIndex: 'userName',
|
||||
},
|
||||
{
|
||||
title: '操作人 IP',
|
||||
key: 'userIp',
|
||||
dataIndex: 'userIp',
|
||||
},
|
||||
{
|
||||
title: '操作人 UA',
|
||||
key: 'userAgent',
|
||||
dataIndex: 'userAgent',
|
||||
},
|
||||
{
|
||||
title: '操作模块',
|
||||
key: 'type',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '操作名',
|
||||
key: 'subType',
|
||||
dataIndex: 'subType',
|
||||
},
|
||||
{
|
||||
title: '操作内容',
|
||||
key: 'action',
|
||||
dataIndex: 'action',
|
||||
},
|
||||
{
|
||||
title: '操作拓展参数',
|
||||
key: 'extra',
|
||||
dataIndex: 'extra',
|
||||
},
|
||||
{
|
||||
title: '请求 URL',
|
||||
key: 'requestUrl',
|
||||
dataIndex: 'requestUrl',
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '业务编号',
|
||||
key: 'bizId',
|
||||
dataIndex: 'bizId',
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,70 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import React, { useRef } from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import ModalDescriptions, {
|
||||
type DescriptionsFormRef,
|
||||
} from '@/components/ModalDescriptions';
|
||||
import {
|
||||
getOperateLogPage,
|
||||
type OperateLogVO,
|
||||
} from '@/services/system/log/operate';
|
||||
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||
|
||||
const SyStemLogOperate = () => {
|
||||
return <>SyStemLogOperate</>;
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: OperateLogVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getOperateLogPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = (record: OperateLogVO) => {
|
||||
descriptionsRef.current?.open(record);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<OperateLogVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (text: React.ReactNode, record: OperateLogVO) => [
|
||||
<a key="editable" onClick={() => handleDetail(record)}>
|
||||
详情
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<OperateLogVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="操作日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ModalDescriptions
|
||||
ref={descriptionsRef}
|
||||
title="操作日志详情"
|
||||
columns={descriptionsColumns()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemLogOperate;
|
||||
export default React.memo(SyStemLogOperate);
|
||||
|
||||
177
src/pages/system/messages/mail/account/config.tsx
Normal file
177
src/pages/system/messages/mail/account/config.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { MailAccountVO } from '@/services/system/message/mail/account';
|
||||
export const baseTenantColumns: ProColumns<MailAccountVO>[] = [
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'mail',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
},
|
||||
{
|
||||
title: 'SMTP 服务器域名',
|
||||
dataIndex: 'host',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: 'SMTP 服务器端口',
|
||||
dataIndex: 'port',
|
||||
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '是否开启 SSL',
|
||||
dataIndex: 'sslEnable',
|
||||
valueType: 'radio',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '是否开启 STARTTLS',
|
||||
dataIndex: 'starttlsEnable',
|
||||
valueType: 'radio',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
render: (_, record: MailAccountVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'mail',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '密码',
|
||||
dataIndex: 'password',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'SMTP 服务器域名',
|
||||
dataIndex: 'host',
|
||||
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SMTP 服务器域名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'SMTP 服务器端口',
|
||||
dataIndex: 'port',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
defaultValue: 465,
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'SMTP 服务器端口',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '是否开启 SSL',
|
||||
dataIndex: 'sslEnable',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
placeholder: '请选择是否开启 SSL',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择是否开启 SSL',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '是否开启 STARTTLS',
|
||||
dataIndex: 'starttlsEnable',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
placeholder: '请选择是否开启 STARTTLS',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择是否开启 STARTTLS',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formTestColumns = (): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
];
|
||||
// {
|
||||
// title: "模板内容",
|
||||
// dataIndex: "content",
|
||||
// valueType: "textarea",
|
||||
// },
|
||||
151
src/pages/system/messages/mail/account/index.tsx
Normal file
151
src/pages/system/messages/mail/account/index.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { message, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createMailAccount,
|
||||
deleteMailAccount,
|
||||
getMailAccountPage,
|
||||
type MailAccountVO,
|
||||
updateMailAccount,
|
||||
} from '@/services/system/message/mail/account';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemMessageSmsTemplate = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
// const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [currentItem, setCurrentItem] = useState<MailAccountVO>();
|
||||
const onFetch = async (
|
||||
params: MailAccountVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getMailAccountPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
// const handleSend = async (record: MailAccountVO) => {
|
||||
// setType("test");
|
||||
// setCurrentItem(record);
|
||||
// testRef.current?.open(record);
|
||||
// };
|
||||
|
||||
const handleEdit = (record: MailAccountVO) => {
|
||||
setType('update');
|
||||
setCurrentItem(record);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: MailAccountVO) => {
|
||||
if (type === 'create') {
|
||||
await createMailAccount(values);
|
||||
message.success('创建成功');
|
||||
} else if (currentItem?.id) {
|
||||
await updateMailAccount({
|
||||
...values,
|
||||
id: currentItem.id,
|
||||
});
|
||||
message.success('编辑成功');
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<MailAccountVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
_text: React.ReactNode,
|
||||
record: MailAccountVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
// <a key="detail" onClick={() => handleSend(record)}>
|
||||
// 详情
|
||||
// </a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteMailAccount(record.id);
|
||||
message.success('删除成功');
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<MailAccountVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
toolbarActions={toolbarActions}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 17 }}
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns()}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageSmsTemplate;
|
||||
171
src/pages/system/messages/mail/log/config.tsx
Normal file
171
src/pages/system/messages/mail/log/config.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { SmsLogVO } from '@/services/system/message/sms/log';
|
||||
export const baseTenantColumns: ProColumns<SmsLogVO>[] = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
{
|
||||
title: '短信内容',
|
||||
dataIndex: 'templateContent',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
dataIndex: 'sendStatus',
|
||||
},
|
||||
{
|
||||
title: '发送人名称',
|
||||
dataIndex: 'templateNickname',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
|
||||
{
|
||||
title: '接收状态',
|
||||
dataIndex: 'receiveStatus',
|
||||
},
|
||||
{
|
||||
title: '短信渠道',
|
||||
dataIndex: 'channelId',
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
dataIndex: 'templateId',
|
||||
},
|
||||
{
|
||||
title: '短信类型',
|
||||
dataIndex: 'templateType',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true,
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: '接收时间',
|
||||
dataIndex: 'receiveTime',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||
Record<string, any>,
|
||||
'text'
|
||||
>[] => [
|
||||
{
|
||||
title: '日志主键',
|
||||
key: 'id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '短信渠道',
|
||||
key: 'channelId',
|
||||
dataIndex: 'channelId',
|
||||
},
|
||||
{
|
||||
title: '短信模板',
|
||||
key: 'templateCode',
|
||||
dataIndex: 'templateCode',
|
||||
},
|
||||
{
|
||||
title: 'API 的模板编号',
|
||||
key: 'apiTemplateId',
|
||||
dataIndex: 'apiTemplateId',
|
||||
},
|
||||
{
|
||||
title: '用户信息',
|
||||
key: 'mobile',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
{
|
||||
title: '短信内容',
|
||||
key: 'templateContent',
|
||||
dataIndex: 'templateContent',
|
||||
},
|
||||
{
|
||||
title: '短信参数',
|
||||
key: 'templateParams',
|
||||
dataIndex: 'templateParams',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
key: 'sendStatus',
|
||||
dataIndex: 'sendStatus',
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
key: 'sendTime',
|
||||
dataIndex: 'sendTime',
|
||||
},
|
||||
{
|
||||
title: 'API 发送结果',
|
||||
key: 'apiSendMsg',
|
||||
dataIndex: 'apiSendMsg',
|
||||
},
|
||||
{
|
||||
title: 'API 短信编号',
|
||||
key: 'apiSerialNo',
|
||||
dataIndex: 'apiSerialNo',
|
||||
},
|
||||
{
|
||||
title: 'API 请求编号',
|
||||
key: 'apiRequestId',
|
||||
dataIndex: 'apiRequestId',
|
||||
},
|
||||
{
|
||||
title: 'API 接收状态',
|
||||
key: 'receiveStatus',
|
||||
dataIndex: 'receiveStatus',
|
||||
},
|
||||
{
|
||||
title: 'API 接收结果',
|
||||
key: 'apiReceiveMsg',
|
||||
dataIndex: 'apiReceiveMsg',
|
||||
},
|
||||
];
|
||||
70
src/pages/system/messages/mail/log/index.tsx
Normal file
70
src/pages/system/messages/mail/log/index.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import React, { useRef } from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import ModalDescriptions, {
|
||||
type DescriptionsFormRef,
|
||||
} from '@/components/ModalDescriptions';
|
||||
import {
|
||||
getSmsLogPage,
|
||||
type SmsLogVO,
|
||||
} from '@/services/system/message/sms/log';
|
||||
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||
|
||||
const SyStemMessageNotifyMessage = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: SmsLogVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getSmsLogPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = (record: SmsLogVO) => {
|
||||
descriptionsRef.current?.open(record);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<SmsLogVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (text: React.ReactNode, record: SmsLogVO) => [
|
||||
<a key="editable" onClick={() => handleDetail(record)}>
|
||||
详情
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<SmsLogVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ModalDescriptions
|
||||
ref={descriptionsRef}
|
||||
title="登录日志详情"
|
||||
columns={descriptionsColumns()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageNotifyMessage;
|
||||
165
src/pages/system/messages/mail/template/config.tsx
Normal file
165
src/pages/system/messages/mail/template/config.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { SmsTemplateVO } from '@/services/system/message/sms/template';
|
||||
export const baseTenantColumns: ProColumns<SmsTemplateVO>[] = [
|
||||
{
|
||||
title: '模板编码',
|
||||
dataIndex: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '模板标题',
|
||||
dataIndex: 'type',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '发送人名称',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '邮箱账号',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '开启状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
render: (_, record: SmsTemplateVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '短信渠道编号',
|
||||
dataIndex: 'channelId',
|
||||
valueType: 'select',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择短信渠道编号',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'select',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择短信类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
dataIndex: 'code',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板编号',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'type',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板内容',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '开启状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
|
||||
fieldProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择状态',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信 API 模板编号',
|
||||
dataIndex: 'apiTemplateId',
|
||||
fieldProps: {
|
||||
placeholder: '请输入短信 API 的模板编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
fieldProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
];
|
||||
174
src/pages/system/messages/mail/template/index.tsx
Normal file
174
src/pages/system/messages/mail/template/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { message, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createSmsTemplate,
|
||||
deleteSmsTemplate,
|
||||
getSmsTemplatePage,
|
||||
type SmsTemplateVO,
|
||||
sendSms,
|
||||
updateSmsTemplate,
|
||||
} from '@/services/system/message/sms/template';
|
||||
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||
|
||||
const SyStemMessageSmsTemplate = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [currentItem, setCurrentItem] = useState<SmsTemplateVO>();
|
||||
const onFetch = async (
|
||||
params: SmsTemplateVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getSmsTemplatePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSend = async (record: SmsTemplateVO) => {
|
||||
setType('test');
|
||||
setCurrentItem(record);
|
||||
testRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleEdit = (record: SmsTemplateVO) => {
|
||||
setType('update');
|
||||
setCurrentItem(record);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: SmsTemplateVO) => {
|
||||
if (type === 'create') {
|
||||
await createSmsTemplate(values);
|
||||
message.success('创建成功');
|
||||
} else {
|
||||
await updateSmsTemplate({
|
||||
...values,
|
||||
id: currentItem!.id,
|
||||
});
|
||||
message.success('编辑成功');
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
|
||||
const handleTestSubmit = useCallback(
|
||||
async (values: SmsTemplateVO) => {
|
||||
if (currentItem?.status === 1) {
|
||||
return message.error('请先开启状态');
|
||||
}
|
||||
const res = await sendSms({
|
||||
...currentItem,
|
||||
...values,
|
||||
mobile: '',
|
||||
templateParams: new Map(),
|
||||
templateCode: currentItem!.code,
|
||||
});
|
||||
message.success('提交发送成功!发送结果,见发送日志编号:' + res);
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<SmsTemplateVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
record: SmsTemplateVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<a key="detail" onClick={() => handleSend(record)}>
|
||||
测试
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteSmsTemplate(record.id);
|
||||
message.success('删除成功');
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<SmsTemplateVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
toolbarActions={toolbarActions}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={testRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formTestColumns(type)}
|
||||
onSubmit={handleTestSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageSmsTemplate;
|
||||
105
src/pages/system/messages/notice/config.tsx
Normal file
105
src/pages/system/messages/notice/config.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { NoticeVO } from '@/services/system/message/notice';
|
||||
export const baseTenantColumns: ProColumns<NoticeVO>[] = [
|
||||
{
|
||||
title: '公告编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '公告标题',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '公告类型',
|
||||
dataIndex: 'type',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true,
|
||||
render: (_, record: NoticeVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '公告标题',
|
||||
dataIndex: 'title',
|
||||
tip: '公告标题', // 提示信息
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '公告内容',
|
||||
dataIndex: 'content',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公告内容',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '公告类型',
|
||||
dataIndex: 'type',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公告类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择状态',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'username',
|
||||
},
|
||||
];
|
||||
126
src/pages/system/messages/notice/index.tsx
Normal file
126
src/pages/system/messages/notice/index.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createNotice,
|
||||
deleteNotice,
|
||||
getNoticePage,
|
||||
type NoticeVO,
|
||||
pushNotice,
|
||||
updateNotice,
|
||||
} from '@/services/system/message/notice';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemMessageNotice = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
const onFetch = async (
|
||||
params: NoticeVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getNoticePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSend = async (record: NoticeVO) => {
|
||||
await pushNotice(record.id);
|
||||
tableRef.current?.reload();
|
||||
};
|
||||
|
||||
const handleEdit = (record: NoticeVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: NoticeVO) => {
|
||||
if (type === 'create') {
|
||||
await createNotice(values);
|
||||
} else {
|
||||
await updateNotice({
|
||||
...values,
|
||||
id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, id],
|
||||
);
|
||||
const actionColumns: ProColumns<NoticeVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
record: NoticeVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteNotice(record.id);
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
<a key="detail" onClick={() => handleSend(record)}>
|
||||
推送
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<NoticeVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageNotice;
|
||||
142
src/pages/system/messages/notify/message/config.tsx
Normal file
142
src/pages/system/messages/notify/message/config.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { NotifyMessageVO } from '@/services/system/message/notify/message';
|
||||
export const baseTenantColumns: ProColumns<NotifyMessageVO>[] = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
dataIndex: 'userType',
|
||||
},
|
||||
{
|
||||
title: '用户编号',
|
||||
dataIndex: 'userId',
|
||||
},
|
||||
{
|
||||
title: '模板编码',
|
||||
dataIndex: 'templateCode',
|
||||
},
|
||||
{
|
||||
title: '发送人名称',
|
||||
dataIndex: 'templateNickname',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
|
||||
{
|
||||
title: '模版内容',
|
||||
dataIndex: 'templateContent',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '模版参数',
|
||||
dataIndex: 'templateParams',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '模版类型',
|
||||
dataIndex: 'templateType',
|
||||
valueType: 'select',
|
||||
},
|
||||
{
|
||||
title: '是否已读',
|
||||
dataIndex: 'readStatus',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '阅读时间',
|
||||
dataIndex: 'readTime',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: NotifyMessageVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||
Record<string, any>,
|
||||
'text'
|
||||
>[] => [
|
||||
{
|
||||
title: '编号',
|
||||
key: 'id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
key: 'userType',
|
||||
dataIndex: 'userType',
|
||||
},
|
||||
{
|
||||
title: '用户编号',
|
||||
key: 'userId',
|
||||
dataIndex: 'userId',
|
||||
},
|
||||
{
|
||||
title: '模版编号',
|
||||
key: 'templateId',
|
||||
dataIndex: 'templateId',
|
||||
},
|
||||
{
|
||||
title: '模板编码',
|
||||
key: 'templateCode',
|
||||
dataIndex: 'templateCode',
|
||||
},
|
||||
{
|
||||
title: '发送人名称',
|
||||
key: 'templateNickname',
|
||||
dataIndex: 'templateNickname',
|
||||
},
|
||||
{
|
||||
title: '模版内容',
|
||||
key: 'templateContent',
|
||||
dataIndex: 'templateContent',
|
||||
},
|
||||
{
|
||||
title: '模版参数',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '模版类型',
|
||||
key: 'templateType',
|
||||
dataIndex: 'templateType',
|
||||
},
|
||||
{
|
||||
title: '是否已读',
|
||||
key: 'readStatus',
|
||||
dataIndex: 'readStatus',
|
||||
},
|
||||
{
|
||||
title: '阅读时间',
|
||||
key: 'readTime',
|
||||
dataIndex: 'readTime',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
];
|
||||
70
src/pages/system/messages/notify/message/index.tsx
Normal file
70
src/pages/system/messages/notify/message/index.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import React, { useRef } from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import ModalDescriptions, {
|
||||
type DescriptionsFormRef,
|
||||
} from '@/components/ModalDescriptions';
|
||||
import {
|
||||
getNotifyMessagePage,
|
||||
type NotifyMessageVO,
|
||||
} from '@/services/system/message/notify/message';
|
||||
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||
|
||||
const SyStemMessageNotifyMessage = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: NotifyMessageVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getNotifyMessagePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = (record: NotifyMessageVO) => {
|
||||
descriptionsRef.current?.open(record);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<NotifyMessageVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (text: React.ReactNode, record: NotifyMessageVO) => [
|
||||
<a key="editable" onClick={() => handleDetail(record)}>
|
||||
详情
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<NotifyMessageVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ModalDescriptions
|
||||
ref={descriptionsRef}
|
||||
title="登录日志详情"
|
||||
columns={descriptionsColumns()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageNotifyMessage;
|
||||
193
src/pages/system/messages/notify/template/config.tsx
Normal file
193
src/pages/system/messages/notify/template/config.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { NotifyTemplateVO } from '@/services/system/message/notify/template';
|
||||
export const baseTenantColumns: ProColumns<NotifyTemplateVO>[] = [
|
||||
{
|
||||
title: '模板编码',
|
||||
dataIndex: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '发送人名称',
|
||||
dataIndex: 'nickname',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '开启状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true,
|
||||
render: (_, record: NotifyTemplateVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模版编码',
|
||||
dataIndex: 'code',
|
||||
tip: '模版编码', // 提示信息
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模版编码',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模版名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发件人名称',
|
||||
dataIndex: 'nickname',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入发件人名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板内容',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '开启状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
|
||||
fieldProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择状态',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
fieldProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
dataIndex: 'userType',
|
||||
valueType: 'radio',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '用户',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '管理员',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模版名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '接收人ID',
|
||||
dataIndex: 'userId',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入接收人ID',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
174
src/pages/system/messages/notify/template/index.tsx
Normal file
174
src/pages/system/messages/notify/template/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { message, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createNotifyTemplate,
|
||||
deleteNotifyTemplate,
|
||||
getNotifyTemplatePage,
|
||||
type NotifyTemplateVO,
|
||||
sendNotify,
|
||||
updateNotifyTemplate,
|
||||
} from '@/services/system/message/notify/template';
|
||||
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||
|
||||
const SyStemMessageNotifyTemplate = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [currentItem, setCurrentItem] = useState<NotifyTemplateVO>();
|
||||
const onFetch = async (
|
||||
params: NotifyTemplateVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getNotifyTemplatePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSend = async (record: NotifyTemplateVO) => {
|
||||
setType('test');
|
||||
setCurrentItem(record);
|
||||
testRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleEdit = (record: NotifyTemplateVO) => {
|
||||
setType('update');
|
||||
setCurrentItem(record);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: NotifyTemplateVO) => {
|
||||
if (type === 'create') {
|
||||
await createNotifyTemplate(values);
|
||||
message.success('创建成功');
|
||||
} else {
|
||||
await updateNotifyTemplate({
|
||||
...values,
|
||||
id: currentItem!.id,
|
||||
});
|
||||
message.success('编辑成功');
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
|
||||
const handleTestSubmit = useCallback(
|
||||
async (values: NotifyTemplateVO) => {
|
||||
if (currentItem?.status === 1) {
|
||||
return message.error('请先开启状态');
|
||||
}
|
||||
const res = await sendNotify({
|
||||
...currentItem,
|
||||
...values,
|
||||
mobile: '',
|
||||
templateParams: new Map(),
|
||||
templateCode: currentItem!.code,
|
||||
});
|
||||
message.success('提交发送成功!发送结果,见发送日志编号:' + res);
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<NotifyTemplateVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
record: NotifyTemplateVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<a key="detail" onClick={() => handleSend(record)}>
|
||||
测试
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteNotifyTemplate(record.id);
|
||||
message.success('删除成功');
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<NotifyTemplateVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
toolbarActions={toolbarActions}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={testRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formTestColumns(type)}
|
||||
onSubmit={handleTestSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageNotifyTemplate;
|
||||
127
src/pages/system/messages/sms/channel/config.tsx
Normal file
127
src/pages/system/messages/sms/channel/config.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { SmsChannelVO } from '@/services/system/message/sms/channel';
|
||||
export const baseTenantColumns: ProColumns<SmsChannelVO>[] = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '短信签名',
|
||||
dataIndex: 'signature',
|
||||
},
|
||||
|
||||
{
|
||||
title: '渠道编码',
|
||||
dataIndex: 'code',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '启用状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '短信 API 的账号',
|
||||
dataIndex: 'apiKey',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
|
||||
{
|
||||
title: '短信 API 的密钥',
|
||||
dataIndex: 'apiSecret',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '短信发送回调 URL',
|
||||
dataIndex: 'callbackUrl',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsChannelVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '短信签名',
|
||||
dataIndex: 'signature',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '渠道编码',
|
||||
dataIndex: 'code',
|
||||
valueType: 'select',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '启用状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'radio',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
{
|
||||
title: '短信 API 的账号',
|
||||
dataIndex: 'apiKey',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信 API 的密钥',
|
||||
dataIndex: 'apiSecret',
|
||||
},
|
||||
{
|
||||
title: '短信发送回调 URL',
|
||||
dataIndex: 'callbackUrl',
|
||||
},
|
||||
];
|
||||
134
src/pages/system/messages/sms/channel/index.tsx
Normal file
134
src/pages/system/messages/sms/channel/index.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { message, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createSmsChannel,
|
||||
deleteSmsChannel,
|
||||
getSmsChannelPage,
|
||||
type SmsChannelVO,
|
||||
updateSmsChannel,
|
||||
} from '@/services/system/message/sms/channel';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemLogLogin = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [currentItem, setCurrentItem] = useState<SmsChannelVO>();
|
||||
const onFetch = async (
|
||||
params: SmsChannelVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getSmsChannelPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleEdit = (record: SmsChannelVO) => {
|
||||
setType('update');
|
||||
setCurrentItem(record);
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
};
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<SmsChannelVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
record: SmsChannelVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="editable" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteSmsChannel(record.id);
|
||||
message.success('删除成功');
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: SmsChannelVO) => {
|
||||
if (type === 'create') {
|
||||
await createSmsChannel(values);
|
||||
} else {
|
||||
await updateSmsChannel({
|
||||
...values,
|
||||
id: currentItem!.id,
|
||||
});
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<SmsChannelVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="短信渠道"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemLogLogin;
|
||||
197
src/pages/system/messages/sms/log/config.tsx
Normal file
197
src/pages/system/messages/sms/log/config.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Space, Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import type { SmsLogVO } from '@/services/system/message/sms/log';
|
||||
export const baseTenantColumns: ProColumns<SmsLogVO>[] = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
hideInSearch: true,
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
{
|
||||
title: '短信内容',
|
||||
dataIndex: 'templateContent',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
dataIndex: 'sendStatus',
|
||||
},
|
||||
|
||||
{
|
||||
title: '接收状态',
|
||||
dataIndex: 'receiveStatus',
|
||||
},
|
||||
{
|
||||
title: '短信渠道',
|
||||
dataIndex: 'channelId',
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
dataIndex: 'templateId',
|
||||
},
|
||||
{
|
||||
title: '短信类型',
|
||||
dataIndex: 'templateType',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
dataIndex: 'sendTime',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: '接收时间',
|
||||
dataIndex: 'receiveTime',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
[`createTime[0]`]: dayjs(value[0])
|
||||
.startOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
[`createTime[1]`]: dayjs(value[1])
|
||||
.endOf('day')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
};
|
||||
},
|
||||
},
|
||||
render: (_, record: SmsLogVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const descriptionsColumns = (): ProDescriptionsItemProps<
|
||||
Record<string, any>,
|
||||
'text'
|
||||
>[] => [
|
||||
{
|
||||
title: '日志主键',
|
||||
key: 'id',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '短信渠道',
|
||||
key: 'channelId',
|
||||
dataIndex: 'channelId',
|
||||
},
|
||||
{
|
||||
title: '短信模板',
|
||||
key: 'templateCode',
|
||||
dataIndex: 'templateCode',
|
||||
},
|
||||
{
|
||||
title: 'API 的模板编号',
|
||||
key: 'apiTemplateId',
|
||||
dataIndex: 'apiTemplateId',
|
||||
},
|
||||
{
|
||||
title: '用户信息',
|
||||
key: 'mobile',
|
||||
dataIndex: 'mobile',
|
||||
render(dom, record) {
|
||||
return (
|
||||
<>
|
||||
<Space>
|
||||
<Tag>{record.mobile}</Tag>
|
||||
{record.userId && <Tag>{record.userId}</Tag>}
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信内容',
|
||||
key: 'templateContent',
|
||||
dataIndex: 'templateContent',
|
||||
},
|
||||
{
|
||||
title: '短信参数',
|
||||
key: 'templateParams',
|
||||
dataIndex: 'templateParams',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '发送状态',
|
||||
key: 'sendStatus',
|
||||
dataIndex: 'sendStatus',
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
key: 'sendTime',
|
||||
dataIndex: 'sendTime',
|
||||
},
|
||||
{
|
||||
title: 'API 发送结果',
|
||||
key: 'apiSendMsg',
|
||||
dataIndex: 'apiSendMsg',
|
||||
},
|
||||
{
|
||||
title: 'API 短信编号',
|
||||
key: 'apiSerialNo',
|
||||
dataIndex: 'apiSerialNo',
|
||||
},
|
||||
{
|
||||
title: 'API 请求编号',
|
||||
key: 'apiRequestId',
|
||||
dataIndex: 'apiRequestId',
|
||||
},
|
||||
{
|
||||
title: 'API 接收状态',
|
||||
key: 'receiveStatus',
|
||||
dataIndex: 'receiveStatus',
|
||||
},
|
||||
{
|
||||
title: 'API 接收结果',
|
||||
key: 'apiReceiveMsg',
|
||||
dataIndex: 'apiReceiveMsg',
|
||||
},
|
||||
];
|
||||
70
src/pages/system/messages/sms/log/index.tsx
Normal file
70
src/pages/system/messages/sms/log/index.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import React, { useRef } from 'react';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import ModalDescriptions, {
|
||||
type DescriptionsFormRef,
|
||||
} from '@/components/ModalDescriptions';
|
||||
import {
|
||||
getSmsLogPage,
|
||||
type SmsLogVO,
|
||||
} from '@/services/system/message/sms/log';
|
||||
import { baseTenantColumns, descriptionsColumns } from './config';
|
||||
|
||||
const SyStemMessageNotifyMessage = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const descriptionsRef = useRef<DescriptionsFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: SmsLogVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getSmsLogPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = (record: SmsLogVO) => {
|
||||
descriptionsRef.current?.open(record);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<SmsLogVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 80,
|
||||
render: (text: React.ReactNode, record: SmsLogVO) => [
|
||||
<a key="editable" onClick={() => handleDetail(record)}>
|
||||
详情
|
||||
</a>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<SmsLogVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ModalDescriptions
|
||||
ref={descriptionsRef}
|
||||
title="登录日志详情"
|
||||
columns={descriptionsColumns()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageNotifyMessage;
|
||||
171
src/pages/system/messages/sms/template/config.tsx
Normal file
171
src/pages/system/messages/sms/template/config.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
import type { SmsTemplateVO } from '@/services/system/message/sms/template';
|
||||
export const baseTenantColumns: ProColumns<SmsTemplateVO>[] = [
|
||||
{
|
||||
title: '模板编码',
|
||||
dataIndex: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{
|
||||
title: '短信类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '短信 API 的模板编号',
|
||||
dataIndex: 'apiTemplateId',
|
||||
},
|
||||
{
|
||||
title: '短信渠道',
|
||||
dataIndex: 'channelCode',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
valueType: 'dateRange',
|
||||
render: (_, record: SmsTemplateVO) =>
|
||||
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '短信渠道编号',
|
||||
dataIndex: 'channelId',
|
||||
valueType: 'select',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择短信渠道编号',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'select',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择短信类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
dataIndex: 'code',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板编号',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'type',
|
||||
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板内容',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '开启状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
|
||||
fieldProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择状态',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信 API 模板编号',
|
||||
dataIndex: 'apiTemplateId',
|
||||
fieldProps: {
|
||||
placeholder: '请输入短信 API 的模板编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
fieldProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'mobile',
|
||||
},
|
||||
];
|
||||
174
src/pages/system/messages/sms/template/index.tsx
Normal file
174
src/pages/system/messages/sms/template/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProCoreActionType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { message, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
|
||||
import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createSmsTemplate,
|
||||
deleteSmsTemplate,
|
||||
getSmsTemplatePage,
|
||||
type SmsTemplateVO,
|
||||
sendSms,
|
||||
updateSmsTemplate,
|
||||
} from '@/services/system/message/sms/template';
|
||||
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||
|
||||
const SyStemMessageSmsTemplate = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [currentItem, setCurrentItem] = useState<SmsTemplateVO>();
|
||||
const onFetch = async (
|
||||
params: SmsTemplateVO & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getSmsTemplatePage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSend = async (record: SmsTemplateVO) => {
|
||||
setType('test');
|
||||
setCurrentItem(record);
|
||||
testRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleEdit = (record: SmsTemplateVO) => {
|
||||
setType('update');
|
||||
setCurrentItem(record);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open();
|
||||
};
|
||||
const handleSubmit = useCallback(
|
||||
async (values: SmsTemplateVO) => {
|
||||
if (type === 'create') {
|
||||
await createSmsTemplate(values);
|
||||
message.success('创建成功');
|
||||
} else {
|
||||
await updateSmsTemplate({
|
||||
...values,
|
||||
id: currentItem!.id,
|
||||
});
|
||||
message.success('编辑成功');
|
||||
}
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
|
||||
const handleTestSubmit = useCallback(
|
||||
async (values: SmsTemplateVO) => {
|
||||
if (currentItem?.status === 1) {
|
||||
return message.error('请先开启状态');
|
||||
}
|
||||
const res = await sendSms({
|
||||
...currentItem,
|
||||
...values,
|
||||
mobile: '',
|
||||
templateParams: new Map(),
|
||||
templateCode: currentItem!.code,
|
||||
});
|
||||
message.success('提交发送成功!发送结果,见发送日志编号:' + res);
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type, currentItem],
|
||||
);
|
||||
const toolbarActions: ToolbarAction[] = [
|
||||
{
|
||||
key: 'add',
|
||||
label: '新建',
|
||||
type: 'primary',
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
];
|
||||
const actionColumns: ProColumns<SmsTemplateVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
record: SmsTemplateVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
) => [
|
||||
<a key="edit" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</a>,
|
||||
<a key="detail" onClick={() => handleSend(record)}>
|
||||
测试
|
||||
</a>,
|
||||
<Popconfirm
|
||||
title="是否删除?"
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deleteSmsTemplate(record.id);
|
||||
message.success('删除成功');
|
||||
action?.reload?.();
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<a style={{ color: 'var(--ant-red)' }} key="delete">
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>,
|
||||
],
|
||||
};
|
||||
const columns = [...baseTenantColumns, actionColumns];
|
||||
return (
|
||||
<>
|
||||
<EnhancedProTable<SmsTemplateVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="登录日志"
|
||||
showIndex={false}
|
||||
toolbarActions={toolbarActions}
|
||||
showSelection={false}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
<ConfigurableDrawerForm
|
||||
ref={testRef}
|
||||
title={formStatusType[type]}
|
||||
columns={formTestColumns(type)}
|
||||
onSubmit={handleTestSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMessageSmsTemplate;
|
||||
@@ -2,8 +2,11 @@ import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { DatePicker, Modal, Popconfirm } from 'antd';
|
||||
import { FormInstance } from 'antd/lib';
|
||||
import dayjs from 'dayjs';
|
||||
import type { TenantVO } from '@/services/system/tenant/list';
|
||||
import { deleteTenant, type TenantVO } from '@/services/system/tenant/list';
|
||||
import { getTenantPackageList } from '@/services/system/tenant/package';
|
||||
|
||||
export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
{
|
||||
@@ -22,13 +25,12 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
title: '租户套餐',
|
||||
dataIndex: 'packageId',
|
||||
valueType: 'select',
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
request: async () => {
|
||||
return [
|
||||
{
|
||||
label: '默认套餐',
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
const packageList: { id: number; name: string }[] =
|
||||
await getTenantPackageList();
|
||||
packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
return packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
},
|
||||
// valueEnum: {
|
||||
// all: { text: "全部", status: "Default" },
|
||||
@@ -56,15 +58,22 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
|
||||
hideInSearch: true, // 在搜索表单中隐藏
|
||||
},
|
||||
{ title: '绑定域名', dataIndex: 'website', width: 100 },
|
||||
{ title: '绑定域名', dataIndex: 'website', width: 100, hideInSearch: true },
|
||||
{
|
||||
title: '租户状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
all: { text: '全部', status: 'Default' },
|
||||
open: { text: '未解决', status: 'Error' },
|
||||
closed: { text: '已解决', status: 'Success' },
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '开启',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -2,7 +2,7 @@ import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import React, { createContext, useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
@@ -63,7 +63,7 @@ const TenantList = () => {
|
||||
tableRef.current?.reload();
|
||||
return true;
|
||||
},
|
||||
[type],
|
||||
[type, id],
|
||||
);
|
||||
|
||||
const handleAdd = () => {
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import type { RequestOptions } from "@@/plugin-request/request";
|
||||
import type { RequestConfig } from "@umijs/max";
|
||||
import { message, notification } from "antd";
|
||||
import { deleteUserCache } from "@/hooks/web/useCache";
|
||||
import type { RequestOptions } from '@@/plugin-request/request';
|
||||
import type { RequestConfig } from '@umijs/max';
|
||||
import { request } from '@umijs/max';
|
||||
import { message, notification } from 'antd';
|
||||
import { deleteUserCache } from '@/hooks/web/useCache';
|
||||
import {
|
||||
getAccessToken,
|
||||
getRefreshToken,
|
||||
getTenantId,
|
||||
setToken,
|
||||
} from "./utils/auth";
|
||||
import { request } from "@umijs/max";
|
||||
} from './utils/auth';
|
||||
|
||||
const tenantEnable = process.env.VITE_APP_TENANT_ENABLE;
|
||||
// const { result_code, base_url, request_timeout } = config;
|
||||
// 错误处理方案: 错误类型
|
||||
@@ -27,22 +28,25 @@ interface ResponseStructure {
|
||||
msg?: string;
|
||||
}
|
||||
const ignoreMsgs = [
|
||||
"无效的刷新令牌", // 刷新令牌被删除时,不用提示
|
||||
"刷新令牌已过期", // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面
|
||||
'无效的刷新令牌', // 刷新令牌被删除时,不用提示
|
||||
'刷新令牌已过期', // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面
|
||||
];
|
||||
|
||||
import { EventEmitter } from 'events';
|
||||
export const requestEventBus = new EventEmitter();
|
||||
const errorCode: { [key: string]: string } = {
|
||||
"400": "请求参数不正确",
|
||||
"401": "账号未登录",
|
||||
"403": "当前操作没有权限",
|
||||
"404": "访问资源不存在",
|
||||
"405": "请求方法不正确",
|
||||
"423": "请求失败,请稍后重试",
|
||||
"429": "请求失败,请稍后重试",
|
||||
"500": "系统异常",
|
||||
"501": "功能未实现/未开启",
|
||||
"502": "错误的配置项",
|
||||
"900": "重复请求,请稍后重试",
|
||||
default: "系统未知错误,请反馈给管理员",
|
||||
'400': '请求参数不正确',
|
||||
'401': '账号未登录',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
'405': '请求方法不正确',
|
||||
'423': '请求失败,请稍后重试',
|
||||
'429': '请求失败,请稍后重试',
|
||||
'500': '系统异常',
|
||||
'501': '功能未实现/未开启',
|
||||
'502': '错误的配置项',
|
||||
'900': '重复请求,请稍后重试',
|
||||
default: '系统未知错误,请反馈给管理员',
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -52,8 +56,8 @@ const errorCode: { [key: string]: string } = {
|
||||
*/
|
||||
|
||||
const refreshToken = async () => {
|
||||
return await request("/system/auth/refresh-token", {
|
||||
method: "POST",
|
||||
return await request('/system/auth/refresh-token', {
|
||||
method: 'POST',
|
||||
params: { refreshToken: getRefreshToken() },
|
||||
});
|
||||
};
|
||||
@@ -87,7 +91,7 @@ const handleAuthorized = () => {
|
||||
// 是否正在刷新中
|
||||
let isRefreshToken = false;
|
||||
// 请求队列
|
||||
let requestList: any[] = [];
|
||||
const requestList: any[] = [];
|
||||
export const errorConfig: RequestConfig = {
|
||||
// 错误处理: umi@3 的错误处理方案。
|
||||
errorConfig: {
|
||||
@@ -96,7 +100,7 @@ export const errorConfig: RequestConfig = {
|
||||
const { success, data, code, msg } = res as unknown as ResponseStructure;
|
||||
if (!success) {
|
||||
const error: any = new Error(msg);
|
||||
error.name = "BizError";
|
||||
error.name = 'BizError';
|
||||
error.info = { code, msg, data };
|
||||
throw error; // 抛出自制的错误
|
||||
}
|
||||
@@ -105,9 +109,9 @@ export const errorConfig: RequestConfig = {
|
||||
errorHandler: async (error: any, opts: any) => {
|
||||
if (opts?.skipErrorHandler) throw error;
|
||||
// 我们的 errorThrower 抛出的错误。
|
||||
console.log("errorHandler", error);
|
||||
console.log('errorHandler', error);
|
||||
const errorInfo: ResponseStructure | undefined = error.info;
|
||||
if (error.name === "BizError") {
|
||||
if (error.name === 'BizError') {
|
||||
if (errorInfo) {
|
||||
const { msg, code } = errorInfo;
|
||||
message.error(msg);
|
||||
@@ -117,9 +121,9 @@ export const errorConfig: RequestConfig = {
|
||||
// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
|
||||
message.error(`Response status:${error.response.status}`);
|
||||
} else if (error.request) {
|
||||
message.error("None response! Please retry.");
|
||||
message.error('None response! Please retry.');
|
||||
} else {
|
||||
message.error("发送请求时出了点问题:" + error.msg);
|
||||
message.error('发送请求时出了点问题:' + error.msg);
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -146,8 +150,8 @@ export const errorConfig: RequestConfig = {
|
||||
// 未设置状态码则默认成功状态
|
||||
// 二进制数据则直接返回,例如说 Excel 导出
|
||||
if (
|
||||
response.request.responseType === "blob" ||
|
||||
response.request.responseType === "arraybuffer"
|
||||
response.request.responseType === 'blob' ||
|
||||
response.request.responseType === 'arraybuffer'
|
||||
) {
|
||||
// 注意:如果导出的响应为 json,说明可能失败了,不直接返回进行下载
|
||||
// if (response.data.type !== "application/json") {
|
||||
@@ -155,14 +159,14 @@ export const errorConfig: RequestConfig = {
|
||||
// }
|
||||
data = await new Response(data).json();
|
||||
}
|
||||
// 获取错误信息
|
||||
const msg = data.msg || errorCode[code] || errorCode["default"];
|
||||
if (ignoreMsgs.indexOf(msg) !== -1) {
|
||||
// 如果是忽略的错误码,直接返回 msg 异常
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
// // 获取错误信息
|
||||
// const msg = data.msg || errorCode[code] || errorCode["default"];
|
||||
// if (ignoreMsgs.indexOf(msg) !== -1) {
|
||||
// // 如果是忽略的错误码,直接返回 msg 异常
|
||||
// return Promise.reject(msg);
|
||||
// }
|
||||
// 发送请求时出了点问题
|
||||
else if (code === 401) {
|
||||
if (code === 401) {
|
||||
if (!isRefreshToken) {
|
||||
isRefreshToken = true;
|
||||
// 1. 如果获取不到刷新令牌,则只能执行登出操作
|
||||
@@ -172,34 +176,25 @@ export const errorConfig: RequestConfig = {
|
||||
// 2. 进行刷新访问令牌
|
||||
try {
|
||||
const refreshTokenRes = await refreshToken();
|
||||
console.log("刷新成功", refreshTokenRes);
|
||||
console.log('刷新成功', refreshTokenRes);
|
||||
// 2.1 刷新成功,则回放队列的请求 + 当前请求
|
||||
setToken(refreshTokenRes);
|
||||
console.log(getAccessToken());
|
||||
config.headers!.Authorization = "Bearer " + getAccessToken();
|
||||
console.log(requestList);
|
||||
requestList.forEach((cb: any) => {
|
||||
cb();
|
||||
});
|
||||
// 发出 token 刷新事件
|
||||
requestEventBus.emit('token-refreshed');
|
||||
} catch (e) {
|
||||
// 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
|
||||
// 2.2 刷新失败,只回放队列的请求
|
||||
requestList.forEach((cb: any) => {
|
||||
cb();
|
||||
});
|
||||
// 提示是否要登出。即不回放当前请求!不然会形成递归
|
||||
return handleAuthorized();
|
||||
} finally {
|
||||
requestList = [];
|
||||
isRefreshToken = false;
|
||||
}
|
||||
return request(config.url!, config);
|
||||
} else {
|
||||
console.log("刷新令牌失败");
|
||||
console.log('刷新令牌失败');
|
||||
//添加到队列,等待刷新获取到新的令牌
|
||||
return new Promise((resolve) => {
|
||||
requestList.push(() => {
|
||||
config.headers!.Authorization = "Bearer " + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
config.headers!.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
resolve(request(config.url!, config));
|
||||
});
|
||||
});
|
||||
@@ -209,7 +204,7 @@ export const errorConfig: RequestConfig = {
|
||||
return Promise.reject(data);
|
||||
}
|
||||
if (data?.success === false) {
|
||||
message.error("请求失败!");
|
||||
message.error('请求失败!');
|
||||
return Promise.reject(data);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,25 +3,22 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
/** 获取菜单页面的表 GET /product/category/categoryList */
|
||||
export async function getProductCategoryCategoryList(
|
||||
export async function getCategoryList(
|
||||
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
|
||||
params: API.getProductCategoryCategoryListParams,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
return request<API.CommonResultListCategoryDto>(
|
||||
"/product/category/categoryList",
|
||||
{
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
}
|
||||
);
|
||||
return request("/product/category/categoryList", {
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
|
||||
/** 创建产品类目 创建产品类目 POST /product/category/create */
|
||||
export async function postProductCategoryCreate(
|
||||
export async function postCategoryCreate(
|
||||
body: API.CategorySaveReqVO,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
@@ -36,7 +33,7 @@ export async function postProductCategoryCreate(
|
||||
}
|
||||
|
||||
/** 更新产品类目 更新产品类目 PUT /product/category/update */
|
||||
export async function putProductCategoryUpdate(
|
||||
export async function putCategoryUpdate(
|
||||
body: API.CategorySaveReqVO,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
|
||||
27
src/services/system/log/login.ts
Normal file
27
src/services/system/log/login.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface LoginLogVO {
|
||||
id: number;
|
||||
logType: number;
|
||||
traceId: number;
|
||||
userId: number;
|
||||
userType: number;
|
||||
username: string;
|
||||
result: number;
|
||||
status: number;
|
||||
userIp: string;
|
||||
userAgent: string;
|
||||
createTime: Date;
|
||||
}
|
||||
|
||||
// 查询登录日志列表
|
||||
export async function getLoginLogPage(params: PageParam) {
|
||||
return request("/system/login-log/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// // 导出登录日志
|
||||
// export const exportLoginLog = (params) => {
|
||||
// return request.download({ url: '/system/login-log/export', params })
|
||||
// }
|
||||
32
src/services/system/log/operate.ts
Normal file
32
src/services/system/log/operate.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export type OperateLogVO = {
|
||||
id: number;
|
||||
traceId: string;
|
||||
userType: number;
|
||||
userId: number;
|
||||
userName: string;
|
||||
type: string;
|
||||
subType: string;
|
||||
bizId: number;
|
||||
action: string;
|
||||
extra: string;
|
||||
requestMethod: string;
|
||||
requestUrl: string;
|
||||
userIp: string;
|
||||
userAgent: string;
|
||||
creator: string;
|
||||
creatorName: string;
|
||||
createTime: Date;
|
||||
};
|
||||
|
||||
export async function getOperateLogPage(params: PageParam) {
|
||||
return request("/system/operate-log/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// // 导出操作日志
|
||||
// export const exportOperateLog = (params: any) => {
|
||||
// return request.download({ url: "/system/operate-log/export", params });
|
||||
// };
|
||||
73
src/services/system/message/mail/account.tsx
Normal file
73
src/services/system/message/mail/account.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface MailAccountVO {
|
||||
id: number;
|
||||
mail: string;
|
||||
username: string;
|
||||
password: string;
|
||||
host: string;
|
||||
createTime: Date;
|
||||
port: number;
|
||||
sslEnable: boolean;
|
||||
starttlsEnable: boolean;
|
||||
}
|
||||
|
||||
// 查询邮箱账号列表
|
||||
// export const getMailAccountPage = async (params: PageParam) => {
|
||||
// return await request.get({ url: '/system/mail-account/page', params })
|
||||
// }
|
||||
export async function getMailAccountPage(params: PageParam) {
|
||||
return request("/system/mail-account/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询邮箱账号详情
|
||||
// export const getMailAccount = async (id: number) => {
|
||||
// return await request.get({ url: '/system/mail-account/get?id=' + id })
|
||||
// }
|
||||
export async function getMailAccount(id: number) {
|
||||
return request("/system/mail-account/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增邮箱账号
|
||||
// export const createMailAccount = async (data: MailAccountVO) => {
|
||||
// return await request.post({ url: "/system/mail-account/create", data });
|
||||
// };
|
||||
export async function createMailAccount(data: MailAccountVO) {
|
||||
return request("/system/mail-account/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改邮箱账号
|
||||
// export const updateMailAccount = async (data: MailAccountVO) => {
|
||||
// return await request.put({ url: "/system/mail-account/update", data });
|
||||
// };
|
||||
export async function updateMailAccount(data: MailAccountVO) {
|
||||
return request("/system/mail-account/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除邮箱账号
|
||||
// export const deleteMailAccount = async (id: number) => {
|
||||
// return await request.delete({ url: "/system/mail-account/delete?id=" + id });
|
||||
// };
|
||||
export async function deleteMailAccount(id: number) {
|
||||
return request("/system/mail-account/delete", {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 获得邮箱账号精简列表
|
||||
// export const getSimpleMailAccountList = async () => {
|
||||
// return request.get({ url: '/system/mail-account/simple-list' })
|
||||
// }
|
||||
export async function getSimpleMailAccountList() {
|
||||
return request("/system/mail-account/simple-list", {
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
41
src/services/system/message/mail/log.tsx
Normal file
41
src/services/system/message/mail/log.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface MailLogVO {
|
||||
id: number;
|
||||
userId: number;
|
||||
userType: number;
|
||||
toMail: string;
|
||||
accountId: number;
|
||||
fromMail: string;
|
||||
templateId: number;
|
||||
templateCode: string;
|
||||
templateNickname: string;
|
||||
templateTitle: string;
|
||||
templateContent: string;
|
||||
templateParams: string;
|
||||
sendStatus: number;
|
||||
sendTime: Date;
|
||||
sendMessageId: string;
|
||||
sendException: string;
|
||||
}
|
||||
|
||||
// 查询邮件日志列表
|
||||
// export const getMailLogPage = async (params: PageParam) => {
|
||||
// return await request.get({ url: '/system/mail-log/page', params })
|
||||
// }
|
||||
export async function getMailLogPage(params: PageParam) {
|
||||
return request("/system/mail-log/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询邮件日志详情
|
||||
// export const getMailLog = async (id: number) => {
|
||||
// return await request.get({ url: '/system/mail-log/get?id=' + id })
|
||||
// }
|
||||
export async function getMailLog(id: number) {
|
||||
return request("/system/mail-log/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
81
src/services/system/message/mail/template.tsx
Normal file
81
src/services/system/message/mail/template.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface MailTemplateVO {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
accountId: number;
|
||||
nickname: string;
|
||||
title: string;
|
||||
content: string;
|
||||
params: string;
|
||||
status: number;
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface MailSendReqVO {
|
||||
mail: string;
|
||||
templateCode: string;
|
||||
templateParams: Map<String, Object>;
|
||||
}
|
||||
|
||||
// 查询邮件模版列表
|
||||
// export const getMailTemplatePage = async (params: PageParam) => {
|
||||
// return await request.get({ url: '/system/mail-template/page', params })
|
||||
// }
|
||||
export async function getMailTemplatePage(params: PageParam) {
|
||||
return request("/system/mail-template/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询邮件模版详情
|
||||
// export const getMailTemplate = async (id: number) => {
|
||||
// return await request.get({ url: '/system/mail-template/get?id=' + id })
|
||||
// }
|
||||
export async function getMailTemplate(id: number) {
|
||||
return request("/system/mail-template/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增邮件模版
|
||||
// export const createMailTemplate = async (data: MailTemplateVO) => {
|
||||
// return await request.post({ url: '/system/mail-template/create', data })
|
||||
// }
|
||||
export async function createMailTemplate(data: MailTemplateVO) {
|
||||
return request("/system/mail-template/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改邮件模版
|
||||
// export const updateMailTemplate = async (data: MailTemplateVO) => {
|
||||
// return await request.put({ url: '/system/mail-template/update', data })
|
||||
// }
|
||||
export async function updateMailTemplate(data: MailTemplateVO) {
|
||||
return request("/system/mail-template/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除邮件模版
|
||||
// export const deleteMailTemplate = async (id: number) => {
|
||||
// return await request.delete({ url: '/system/mail-template/delete?id=' + id })
|
||||
// }
|
||||
export async function deleteMailTemplate(id: number) {
|
||||
return request("/system/mail-template/delete", {
|
||||
method: "PUT",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 发送邮件
|
||||
// export const sendMail = (data: MailSendReqVO) => {
|
||||
// return request.post({ url: '/system/mail-template/send-mail', data })
|
||||
// }
|
||||
export async function sendMail(data: MailTemplateVO) {
|
||||
return request("/system/mail-template/send-mail", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
74
src/services/system/message/notice.tsx
Normal file
74
src/services/system/message/notice.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface NoticeVO {
|
||||
id: number;
|
||||
title: string;
|
||||
type: number;
|
||||
content: string;
|
||||
status: number;
|
||||
remark: string;
|
||||
creator: string;
|
||||
createTime: Date;
|
||||
}
|
||||
|
||||
// 查询公告列表
|
||||
// export const getNoticePage = (params: PageParam) => {
|
||||
// return request.get({ url: '/system/notice/page', params })
|
||||
// }
|
||||
export async function getNoticePage(params: PageParam) {
|
||||
return request("/system/notice/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询公告详情
|
||||
// export const getNotice = (id: number) => {
|
||||
// return request.get({ url: '/system/notice/get?id=' + id })
|
||||
// }
|
||||
export async function getNotice(id: number) {
|
||||
return request("/system/notice/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增公告
|
||||
// export const createNotice = (data: NoticeVO) => {
|
||||
// return request.post({ url: '/system/notice/create', data })
|
||||
// }
|
||||
export async function createNotice(data: NoticeVO) {
|
||||
return request("/system/notice/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改公告
|
||||
// export const updateNotice = (data: NoticeVO) => {
|
||||
// return request.put({ url: '/system/notice/update', data })
|
||||
// }
|
||||
export async function updateNotice(data: NoticeVO) {
|
||||
return request("/system/notice/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除公告
|
||||
// export const deleteNotice = (id: number) => {
|
||||
// return request.delete({ url: '/system/notice/delete?id=' + id })
|
||||
// }
|
||||
export async function deleteNotice(id: number) {
|
||||
return request("/system/notice/update", {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 推送公告
|
||||
// export const pushNotice = (id: number) => {
|
||||
// return request.post({ url: '/system/notice/push?id=' + id })
|
||||
// }
|
||||
|
||||
export async function pushNotice(id: number) {
|
||||
return request("/system/notice/push", {
|
||||
method: "POST",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
76
src/services/system/message/notify/message.tsx
Normal file
76
src/services/system/message/notify/message.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface NotifyMessageVO {
|
||||
id: number;
|
||||
userId: number;
|
||||
userType: number;
|
||||
templateId: number;
|
||||
templateCode: string;
|
||||
templateNickname: string;
|
||||
templateContent: string;
|
||||
templateType: number;
|
||||
templateParams: string;
|
||||
readStatus: boolean;
|
||||
readTime: Date;
|
||||
createTime: Date;
|
||||
}
|
||||
|
||||
// 查询站内信消息列表
|
||||
// export const getNotifyMessagePage = async (params: PageParam) => {
|
||||
// return await request.get({ url: '/system/notify-message/page', params })
|
||||
// }
|
||||
export async function getNotifyMessagePage(params: PageParam) {
|
||||
return request("/system/notify-message/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 获得我的站内信分页
|
||||
// export const getMyNotifyMessagePage = async (params: PageParam) => {
|
||||
// return await request.get({ url: '/system/notify-message/my-page', params })
|
||||
// }
|
||||
export async function getMyNotifyMessagePage(params: PageParam) {
|
||||
return request("/system/notify-message/my-page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 批量标记已读
|
||||
// export const updateNotifyMessageRead = async (ids) => {
|
||||
// return await request.put({
|
||||
// url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false })
|
||||
// })
|
||||
// }
|
||||
export async function updateNotifyMessageRead(ids: number[]) {
|
||||
return request("/system/notice/update", {
|
||||
method: "PUT",
|
||||
params: { ids: ids },
|
||||
});
|
||||
}
|
||||
// 标记所有站内信为已读
|
||||
// export const updateAllNotifyMessageRead = async () => {
|
||||
// return await request.put({ url: '/system/notify-message/update-all-read' })
|
||||
// }
|
||||
export async function updateAllNotifyMessageRead() {
|
||||
return request("/system/notify-message/update-all-read", {
|
||||
method: "PUT",
|
||||
});
|
||||
}
|
||||
// 获取当前用户的最新站内信列表
|
||||
// export const getUnreadNotifyMessageList = async () => {
|
||||
// return await request.get({ url: '/system/notify-message/get-unread-list' })
|
||||
// }
|
||||
export async function getUnreadNotifyMessageList() {
|
||||
return request("/system/notify-message/get-unread-list", {
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
// 获得当前用户的未读站内信数量
|
||||
// export const getUnreadNotifyMessageCount = async () => {
|
||||
// return await request.get({ url: '/system/notify-message/get-unread-count' })
|
||||
// }
|
||||
export async function getUnreadNotifyMessageCount() {
|
||||
return request("/system/notify-message/get-unread-count", {
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
80
src/services/system/message/notify/template.tsx
Normal file
80
src/services/system/message/notify/template.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface NotifyTemplateVO {
|
||||
id: number;
|
||||
name: string;
|
||||
nickname: string;
|
||||
code: string;
|
||||
content: string;
|
||||
type?: number;
|
||||
params: string;
|
||||
status: number;
|
||||
remark: string;
|
||||
mobile: string;
|
||||
createTime: Date;
|
||||
userType: number;
|
||||
userId: number | null;
|
||||
templateCode: string;
|
||||
templateParams: Map<String, Object>;
|
||||
}
|
||||
|
||||
// 查询站内信模板列表
|
||||
// export const getNotifyTemplatePage = async (params: PageParam) => {
|
||||
// return await request.get({ url: 'getNotifyTemplatePage', params })
|
||||
// }
|
||||
export async function getNotifyTemplatePage(params: PageParam) {
|
||||
return request("/system/notify-template/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询站内信模板详情
|
||||
// export const getNotifyTemplate = async (id: number) => {
|
||||
// return await request.get({ url: '/system/notify-template/get?id=' + id })
|
||||
// }
|
||||
export async function getNotifyTemplate(id: number) {
|
||||
return request("/system/notify-template/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增站内信模板
|
||||
// export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
// return await request.post({ url: '/system/notify-template/create', data })
|
||||
// }
|
||||
export async function createNotifyTemplate(data: NotifyTemplateVO) {
|
||||
return request("/system/notify-template/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改站内信模板
|
||||
// export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
// return await request.put({ url: '/system/notify-template/update', data })
|
||||
// }
|
||||
export async function updateNotifyTemplate(data: NotifyTemplateVO) {
|
||||
return request("/system/notify-template/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除站内信模板
|
||||
// export const deleteNotifyTemplate = async (id: number) => {
|
||||
// return await request.delete({ url: '/system/notify-template/delete?id=' + id })
|
||||
// }
|
||||
export async function deleteNotifyTemplate(id: number) {
|
||||
return request("/system/notify-template/delete", {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 发送站内信
|
||||
// export const sendNotify = (data: NotifySendReqVO) => {
|
||||
// return request.post({ url: '/system/notify-template/send-notify', data })
|
||||
// }
|
||||
export async function sendNotify(data: NotifyTemplateVO) {
|
||||
return request("/system/notify-template/send-notify", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
73
src/services/system/message/sms/channel.tsx
Normal file
73
src/services/system/message/sms/channel.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface SmsChannelVO {
|
||||
id: number;
|
||||
code: string;
|
||||
status: number;
|
||||
signature: string;
|
||||
remark: string;
|
||||
apiKey: string;
|
||||
apiSecret: string;
|
||||
callbackUrl: string;
|
||||
createTime: Date;
|
||||
}
|
||||
|
||||
// 查询短信渠道列表
|
||||
// export const getSmsChannelPage = (params: PageParam) => {
|
||||
// return request.get({ url: '/system/sms-channel/page', params })
|
||||
// }
|
||||
export async function getSmsChannelPage(params: PageParam) {
|
||||
return request("/system/sms-channel/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 获得短信渠道精简列表
|
||||
// export function getSimpleSmsChannelList() {
|
||||
// return request.get({ url: '/system/sms-channel/simple-list' })
|
||||
// }
|
||||
export async function getSimpleSmsChannelList() {
|
||||
return request("/system/sms-channel/simple-list", {
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
// 查询短信渠道详情
|
||||
// export const getSmsChannel = (id: number) => {
|
||||
// return request.get({ url: '/system/sms-channel/get?id=' + id })
|
||||
// }
|
||||
export async function getSmsChannel(id: number) {
|
||||
return request("/system/sms-channel/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增短信渠道
|
||||
// export const createSmsChannel = (data: SmsChannelVO) => {
|
||||
// return request.post({ url: '/system/sms-channel/create', data })
|
||||
// }
|
||||
export async function createSmsChannel(data: SmsChannelVO) {
|
||||
return request("/system/sms-channel/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改短信渠道
|
||||
// export const updateSmsChannel = (data: SmsChannelVO) => {
|
||||
// return request.put({ url: '/system/sms-channel/update', data })
|
||||
// }
|
||||
export async function updateSmsChannel(data: SmsChannelVO) {
|
||||
return request("/system/sms-channel/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除短信渠道
|
||||
// export const deleteSmsChannel = (id: number) => {
|
||||
// return request.delete({ url: '/system/sms-channel/delete?id=' + id })
|
||||
// }
|
||||
export async function deleteSmsChannel(id: number) {
|
||||
return request("/system/sms-channel/delete", {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
40
src/services/system/message/sms/log.tsx
Normal file
40
src/services/system/message/sms/log.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface SmsLogVO {
|
||||
id: number;
|
||||
channelId: number | null;
|
||||
channelCode: string;
|
||||
templateId: number | null;
|
||||
templateCode: string;
|
||||
templateType: number | null;
|
||||
templateContent: string;
|
||||
templateParams: Map<string, object> | null;
|
||||
apiTemplateId: string;
|
||||
mobile: string;
|
||||
userId: number | null;
|
||||
userType: number | null;
|
||||
sendStatus: number | null;
|
||||
sendTime: Date | null;
|
||||
apiSendCode: string;
|
||||
apiSendMsg: string;
|
||||
apiRequestId: string;
|
||||
apiSerialNo: string;
|
||||
receiveStatus: number | null;
|
||||
receiveTime: Date | null;
|
||||
apiReceiveCode: string;
|
||||
apiReceiveMsg: string;
|
||||
createTime: Date | null;
|
||||
}
|
||||
|
||||
// 查询短信日志列表
|
||||
|
||||
export async function getSmsLogPage(params: PageParam) {
|
||||
return request("/system/sms-log/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 导出短信日志
|
||||
// export const exportSmsLog = (params) => {
|
||||
// return request.download({ url: '/system/sms-log/export-excel', params })
|
||||
// }
|
||||
89
src/services/system/message/sms/template.tsx
Normal file
89
src/services/system/message/sms/template.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
export interface SmsTemplateVO {
|
||||
id: number;
|
||||
type: number;
|
||||
status: number;
|
||||
code: string;
|
||||
name: string;
|
||||
content: string;
|
||||
remark: string;
|
||||
apiTemplateId: string;
|
||||
channelId?: number;
|
||||
channelCode?: string;
|
||||
params?: string[];
|
||||
createTime?: Date;
|
||||
mobile: string;
|
||||
templateCode: string;
|
||||
templateParams: Map<String, Object>;
|
||||
}
|
||||
|
||||
// 查询短信模板列表
|
||||
// export const getSmsTemplatePage = (params: PageParam) => {
|
||||
// return request.get({ url: '/system/sms-template/page', params })
|
||||
// }
|
||||
export async function getSmsTemplatePage(params: PageParam) {
|
||||
return request("/system/sms-template/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 查询短信模板详情
|
||||
// export const getSmsTemplate = (id: number) => {
|
||||
// return request.get({ url: '/system/sms-template/get?id=' + id })
|
||||
// }
|
||||
export async function getSmsTemplate(id: number) {
|
||||
return request("/system/sms-template/get", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 新增短信模板
|
||||
// export const createSmsTemplate = (data: SmsTemplateVO) => {
|
||||
// return request.post({ url: '/system/sms-template/create', data })
|
||||
// }
|
||||
export async function createSmsTemplate(data: SmsTemplateVO) {
|
||||
return request("/system/sms-template/create", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改短信模板
|
||||
// export const updateSmsTemplate = (data: SmsTemplateVO) => {
|
||||
// return request.put({ url: '/system/sms-template/update', data })
|
||||
// }
|
||||
export async function updateSmsTemplate(data: SmsTemplateVO) {
|
||||
return request("/system/sms-template/update", {
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除短信模板
|
||||
// export const deleteSmsTemplate = (id: number) => {
|
||||
// return request.delete({ url: '/system/sms-template/delete?id=' + id })
|
||||
// }
|
||||
export async function deleteSmsTemplate(id: number) {
|
||||
return request("/system/sms-template/delete", {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
// 导出短信模板
|
||||
// export const exportSmsTemplate = (params) => {
|
||||
// return request.download({
|
||||
// url: '/system/sms-template/export-excel',
|
||||
// params
|
||||
// })
|
||||
// }
|
||||
|
||||
// 发送短信
|
||||
// export const sendSms = (data: SendSmsReqVO) => {
|
||||
// return request.post({ url: '/system/sms-template/send-sms', data })
|
||||
// }
|
||||
|
||||
export async function sendSms(data: SmsTemplateVO) {
|
||||
return request("/system/sms-template/send-sms", {
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user