Explorar el Código

add:error-code-editor

dev
powersir hace 1 año
padre
commit
b7018b0fa7
Se han modificado 3 ficheros con 349 adiciones y 2 borrados
  1. +120
    -0
      src/pages/system/error-code/error-code-editor.tsx
  2. +227
    -0
      src/pages/system/error-code/index.tsx
  3. +2
    -2
      src/request/service/error-code.ts

+ 120
- 0
src/pages/system/error-code/error-code-editor.tsx Ver fichero

@@ -0,0 +1,120 @@
import React, { useEffect, useState } from 'react'
import { Form, Input, Radio, Modal, InputNumber, ColorPicker } from 'antd';
import { useRequest } from '@/hooks/use-request';
import { antdUtils } from '@/utils/antd';
import service from '@/request/service/error-code';
import type { ErrorCodeVO, ErrorCodePageReqVO } from '@/models';


const layout = {
labelCol: { span: 4, },
wrapperCol: { span: 16 }
};

interface DataTypeEditorProps {
visible: boolean;
onCancel: (flag?: boolean) => void;
onSave: (role: ErrorCodeVO) => void;
data?: ErrorCodeVO | null;
}

export default (props: DataTypeEditorProps) => {

const { visible, onCancel, onSave, data } = props;
const { runAsync: update } = useRequest(service.updateErrorCodeApi, { manual: true });
const { runAsync: create } = useRequest(service.createErrorCodeApi, { manual: true });

const isEdit = !!data;


const [saveLoading, setSaveLoading] = useState(false);
const [form] = Form.useForm();

useEffect(() => {
if (visible) {
if (data) {
form.setFieldsValue(data);
}
} else {
form.resetFields();
}
}, [visible]);

const save = async () => {
setSaveLoading(true);
const fieldValues = form.getFieldsValue();
const cssClass = fieldValues.cssClass ? fieldValues.cssClass.toHex() : '';
const newValue = isEdit ? { ...data, ...fieldValues, cssClass } : fieldValues;
const [error, { msg, code }] = isEdit ? await update(newValue) : await create(newValue);
if (!error && code === 0) {
onSave(newValue);
} else {
antdUtils.message?.open({
type: 'error',
content: msg ?? '操作失败',
});
}
setSaveLoading(false);
}

return (
<>
<Modal
open={visible}
title={isEdit ? "编辑" : "新建"}
width={640}
onOk={save}
onCancel={() => onCancel()}
confirmLoading={saveLoading}
destroyOnClose
>
<Form
form={form}
{...layout}
onFinish={save}
labelCol={{ flex: '0 0 100px' }}
wrapperCol={{ span: 16 }}
>

<Form.Item name="type" label="错误码类型">
<Radio.Group options={[
{ value: 1, label: "自动生成" },
{ value: 2, label: "手动编辑" }
]} optionType="button">
</Radio.Group>
</Form.Item>

<Form.Item name="applicationName" label="应用名"
rules={[
{
required: true,
message: '请输入应用名',
},
]}
>
<Input />
</Form.Item>

<Form.Item name="code" label="错误码编码"
rules={[
{
required: true,
message: '请输入错误码编码',
},
]}>
<InputNumber min={0} />
</Form.Item>
<Form.Item name="message" label="错误码提示"
rules={[
{
required: true,
message: '请输入错误码编码',
},
]}>
<Input.TextArea showCount maxLength={100} />
</Form.Item>
</Form>
</Modal>
</>
)
};

+ 227
- 0
src/pages/system/error-code/index.tsx Ver fichero

@@ -0,0 +1,227 @@
import React, { useState, useEffect, useMemo } from 'react';
import { Space, Table, Button, Tag, Divider, Input, Card } from 'antd';
import { useSetState } from 'ahooks';
import type { TableProps, ColumnsType, ColumnType } from 'antd/es/table';
import { t } from '@/utils/i18n';
import { PlusOutlined, ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
import { antdUtils } from '@/utils/antd';
import { useRequest } from '@/hooks/use-request';
import type { ErrorCodeVO, ErrorCodePageReqVO } from '@/models'
import errorCodeService from '@/request/service/error-code';
import ErrorCodeEditor from './error-code-editor';

type DataIndex = keyof ErrorCodeVO;


export default () => {
const showDeleteConfirm = (item: ErrorCodeVO) => {
antdUtils.modal?.confirm({
title: `确认删除编号为 ${item.id} 的错误码吗?`,
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复!',
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
return new Promise(async (resolve, reject) => {
const [error, { code, msg }] = await deleteApi(item.id);
if (error || code !== 0) {
antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' })
} else {
antdUtils.message?.open({ type: 'success', content: '删除成功' })
}
await load();
resolve('');
}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
},
onCancel() {
},
});
};

const [editorVisable, seEditorVisable] = useState<boolean>(false);
const [editData, seEditData] = useState<ErrorCodeVO>();
const [dataSource, setDataSource] = useState<ErrorCodeVO[]>([]);
const [total, setTotal] = useState(0);
const [searchState, setSearchState] = useSetState<ErrorCodePageReqVO>({});
const [onSearching, setOnSearching] = useState(false);

const { runAsync: getPageApi } = useRequest(errorCodeService.getErrorCodePageApi, { manual: true });
const { runAsync: deleteApi } = useRequest(errorCodeService.deleteErrorCodeApi, { manual: true });

const showEditor = (record: ErrorCodeVO | undefined) => {
seEditData(record);
seEditorVisable(true);
}

const load = async () => {
const [error, { data, code, msg }] = await getPageApi(searchState);
setOnSearching(false);
if (!error) {
setDataSource(data.list);
setTotal(data.total);
} else {
if (error || code !== 0) {
antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' });
return
}
}
};

const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<ErrorCodeVO> => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
<div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
<Input.Search
placeholder={dataIndex === 'type' ? '输入要搜索的字典名称' : '输入要搜索的字典类型'}
value={selectedKeys[0]}
onChange={(e) => {
setSelectedKeys(e.target.value && e.target.value !== '' ? [e.target.value] : [])
}}
onSearch={(value) => {
if (value === '' && clearFilters) {
clearFilters!!()
}
confirm();
}}
onPressEnter={() => confirm()}
allowClear
style={{ marginBottom: 8, display: 'block' }}
enterButton="搜索"
size="middle"
loading={onSearching}
/>
</div>
),
filterIcon: (filtered: boolean) => (
<SearchOutlined style={{ color: filtered ? 'primaryColor' : undefined }} />
),
});

const columns: ColumnsType<ErrorCodeVO> = [
{
title: '编号',
dataIndex: 'id',
key: 'id',
align: 'center',
width: 100,
},
{
title: '错误码类型',
dataIndex: 'type',
key: 'type',
align: 'center',
width: 150,
filters: [
{ text: '自动生成', value: 1 },
{ text: '手动编辑', value: 2 },
],
filterMultiple: false,
filterSearch: false,
render: (value: number) => {
return (value === 1 ? <Tag color="purple">自动生成</Tag> : <Tag color="blue">手动编辑</Tag>)
},
},
{
title: '应用名',
dataIndex: 'applicationName',
key: 'applicationName',
align: 'center',
width: 150,
...getColumnSearchProps('applicationName')
},
{
title: '错误码编码',
key: 'code',
dataIndex: 'code',
align: 'center',
width: 150,
...getColumnSearchProps('code')
},
{
title: '错误码错误提示',
key: 'message',
dataIndex: 'message',
align: 'center',
width: 200,
...getColumnSearchProps('message')
},
{
title: t("QkOmYwne" /* 操作 */),
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="middle" split={(
<Divider type='vertical' />
)}>
<a onClick={() => showEditor(record)}>
编辑
</a>
<a onClick={() => showDeleteConfirm(record)}>
删除
</a>
</Space>
),
width: 150,
},
];

useEffect(() => {
load();
}, [searchState]);

useMemo(() => {
console.log('onMemChanged: ' + editData)
}, [editData])

const onChange: TableProps<ErrorCodeVO>['onChange'] = (pagination, filters, sorter, extra) => {
const state: ErrorCodePageReqVO = {
applicationName: filters.applicationName ? filters.applicationName[0] as string : undefined,
message: filters.message ? filters.message[0] as string : undefined,
code: filters.code ? filters.code[0] as number : undefined,
type: filters.type ? filters.type[0] as number : undefined,
pageNo: pagination.current,
pageSize: pagination.pageSize
}
setSearchState(state);
};

return (
<>
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'
bodyStyle={{
paddingTop: 0,
paddingBottom: 0
}}>
<div className="py-[8px] flex flex-row-reverse">
<Button className="ml-5"
type='primary'
icon={<PlusOutlined />}
onClick={() => showEditor(undefined)}> 新增 </Button>
</div>
<Table rowKey="id"
scroll={{ x: true }}
onChange={onChange}
columns={columns}
dataSource={dataSource}
className='bg-transparent'
pagination={{
pageSize: searchState.pageSize,
current: searchState.pageNo,
total,
position: ['bottomRight']
}}
/>
</Card>
<ErrorCodeEditor onSave={() => {
load();
seEditorVisable(false);
}}
onCancel={() => { seEditorVisable(false) }}
visible={editorVisable}
data={editData} />
</>
);
};

+ 2
- 2
src/request/service/error-code.ts Ver fichero

@@ -1,5 +1,5 @@
import request from '@/request';
import { ErrorCodeVO, ErrorCodePageReqVO } from '@/models'
import { ErrorCodeVO, ErrorCodePageReqVO, PageData } from '@/models'

const BASE_URL = '/admin-api/system/error-code';

@@ -7,7 +7,7 @@ export default {

// 查询错误码列表
getErrorCodePageApi: (params: ErrorCodePageReqVO) => {
return request.get(`${BASE_URL}/page`, { params })
return request.get<PageData<ErrorCodeVO>>(`${BASE_URL}/page`, { params })
},

// 查询错误码详情


Cargando…
Cancelar
Guardar