lj
/
vogocm-web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add: dict-data&dict-type

dev
powersir 1 year ago
parent
cef3f2ba29
commit
488ff908fe
4 changed files with 393 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +143
    -0
      src/pages/system/dict/dict-data.tsx
  2. +166
    -0
      src/pages/system/dict/index.tsx
  3. +41
    -0
      src/request/service/system-dictdata.ts
  4. +43
    -0
      src/request/service/system-dicttype.ts

+ 143
- 0
src/pages/system/dict/dict-data.tsx View File

@@ -0,0 +1,143 @@
import React, { useState, useRef, useEffect } from 'react';
import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd';
import type { InputRef } from 'antd';
import type { ColumnType, ColumnsType } from 'antd/es/table';
import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface';
import { t } from '@/utils/i18n';
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { antdUtils } from '@/utils/antd';
import { useRequest } from '@/hooks/use-request';
import type { DictTypeVO, DictDataVO, DictDataPageReqVO } from '@/models'
import dictDataService from '@/request/service/system-dictdata';

const { Search } = Input;

interface DictDataProps {
data?: DictTypeVO | null;
}

export default (props: DictDataProps) => {

const showDeleteConfirm = (item: DictDataVO) => {
antdUtils.modal?.confirm({
title: `确认删除值为: ${item.value} 的字典吗?`,
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复！',
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
return new Promise(async (resolve) => {
const [error, { code, msg }] = await deleteDictDataApi(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<DictDataVO>();
const [dataSource, setDataSource] = useState<DictDataVO[]>([]);
const [total, setTotal] = useState(0);

const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true });
const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true });

const load = async () => {
const [error, { data }] = await getDictDataPageApi({
dictType: props.data?.type,
pageSize:10,
pageNo:1
});
if (!error) {
setDataSource(data.list);
setTotal(data.total);
}
};


const columns: ColumnsType<DictDataVO> = [
{
title: '数据标签',
dataIndex: 'label',
key: 'label',
align: 'center',
width: 150,
},
{
title: '数据键值',
dataIndex: 'value',
key: 'value',
align: 'center',
width: 120,
},

{
title: '状态',
key: 'status',
dataIndex: 'status',
align: 'center',
width: 120,
},
{
title: t("QkOmYwne" /* 操作 */),
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="middle" split={(
<Divider type='vertical' />
)}>
<a
onClick={() => {
// setCreateVisible(true);
// setCurRowData(record);
}}>
编辑
</a>
<a
onClick={() => {
showDeleteConfirm(record)
}}>
删除
</a>
</Space>
),
width: 150,
},
];

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

return (
<div>
<div className="py-[8px] flex flex-row-reverse">
<Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 添加字典数据 </Button>
</div>
<Table rowKey="id"
scroll={{ x: true }}
columns={columns}
dataSource={dataSource}
className='bg-transparent'
pagination={{
pageSize: 10,
current: 1,
total,
position: ['bottomRight']
}}
/>
</div>
);
};

+ 166
- 0
src/pages/system/dict/index.tsx View File

@@ -0,0 +1,166 @@
import React, { useState, useRef, useEffect } from 'react';
import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd';
import type { InputRef } from 'antd';
import type { ColumnType, ColumnsType } from 'antd/es/table';
import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface';
import { t } from '@/utils/i18n';
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { antdUtils } from '@/utils/antd';
import { useRequest } from '@/hooks/use-request';
import type { DictTypeVO, DictTypePageReqVO, DictDataVO, DictDataPageReqVO } from '@/models'
import dictDataService from '@/request/service/system-dictdata';
import dictTypeService from '@/request/service/system-dicttype';
import DictData from './dict-data'

const { Search } = Input;


export default () => {

const showDeleteConfirm = (item: DictTypeVO) => {
antdUtils.modal?.confirm({
title: `确认删除名称为: ${item.name} 的字典吗?`,
icon: <ExclamationCircleFilled />,
content: '请注意删除以后不可恢复！',
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk() {
return new Promise((resolve, reject) => {
setTimeout(() => {
antdUtils.message?.open({
type: 'success',
content: '删除成功',
});
resolve(null)
}, 1000);

}).catch(() => antdUtils.message?.open({
type: 'error',
content: '操作失败',
}));
},
onCancel() {
},
});
};

const [editorVisable, seEditorVisable] = useState<boolean>(false);
const [editData, seEditData] = useState<DictTypeVO>();
const [dataSource, setDataSource] = useState<DictTypeVO[]>([]);
const [total, setTotal] = useState(0);
const [searchFrom] = Form.useForm();

const { runAsync: getDictTypePageApi } = useRequest(dictTypeService.getDictTypePageApi, { manual: true });
const { runAsync: deleteDictTypeApi } = useRequest(dictTypeService.deleteDictTypeApi, { manual: true });

const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true });
const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true });

const load = async () => {
const [error, { data }] = await getDictTypePageApi(searchFrom.getFieldsValue());
if (!error) {
setDataSource(data.list);
setTotal(data.total);
}
};

const columns: ColumnsType<DictTypeVO> = [
{
title: '字典名称',
dataIndex: 'name',
key: 'name',
align: 'center',
width: 150,
},
{
title: '字典类型',
dataIndex: 'type',
key: 'type',
align: 'center',
width: 120,
},

{
title: '状态',
key: 'status',
dataIndex: 'status',
align: 'center',
width: 120,
},
{
title: t("QkOmYwne" /* 操作 */),
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="middle" split={(
<Divider type='vertical' />
)}>
<a
onClick={() => {
// setCreateVisible(true);
// setCurRowData(record);
}}>
编辑
</a>
<a
onClick={() => {
showDeleteConfirm(record)
}}>
删除
</a>
</Space>
),
width: 150,
},
];


const [isDisableDelete, setDisableDelete] = useState<boolean>(true)
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
setDisableDelete(newSelectedRowKeys.length === 0)
};

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

return (
<>
<div className='flex flex-row'>
<Card className='basis-1/2 w-[100px] mb-[10px] 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' size='middle' icon={<PlusOutlined />}> 新增字典 </Button>
</div>
<Table rowKey="id"
scroll={{ x: true }}
columns={columns}
dataSource={dataSource}
className='bg-transparent'
pagination={{
pageSize: 10,
current: 1,
total,
position: ['bottomRight']
}}
/>
</Card>
<Card className='basis-1/2 mb-[10px] ml-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{
paddingTop: 0,
paddingBottom: 0
}}>
<DictData
data={dataSource[0]}/>
</Card>
</div>
</>
);
};

+ 41
- 0
src/request/service/system-dictdata.ts View File

@@ -0,0 +1,41 @@
import request from '@/request';
import { DictDataVO, DictDataPageReqVO, DictDataExportReqVO, PageData } from '@/models';

const BASE_URL = '/admin-api/system/dict-data';

export default {

// 查询字典数据（精简)列表
listSimpleDictDataApi: () => {
return request.get(`${BASE_URL}/list-all-simple`)
},

// 查询字典数据列表
getDictDataPageApi: (params: DictDataPageReqVO) => {
return request.get<PageData<DictDataVO>>(`${BASE_URL}/page`, { params })
},

// 查询字典数据详情
getDictDataApi: (id: number) => {
return request.get(`${BASE_URL}/get?id=${id}`)
},

// 新增字典数据
createDictDataApi: (data: DictDataVO) => {
return request.post(`${BASE_URL}/create`, data)
},

// 修改字典数据
updateDictDataApi: (data: DictDataVO) => {
return request.put(`${BASE_URL}/update`, data)
},

// 删除字典数据
deleteDictDataApi: (id: number) => {
return request.delete(`${BASE_URL}/delete?id=${id}`)
},
// 导出字典类型数据
exportDictDataApi: (params: DictDataExportReqVO) => {
return request.get(`${BASE_URL}/export`, { params })
}
};

+ 43
- 0
src/request/service/system-dicttype.ts View File

@@ -0,0 +1,43 @@
import request from '@/request';
import { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO, PageData } from '@/models';

const BASE_URL = '/admin-api/system/dict-type';

export default {

// 查询字典（精简)列表
listSimpleDictTypeApi: () => {
return request.get(`${BASE_URL}/list-all-simple`)
},

// 查询字典列表
getDictTypePageApi: (params: DictTypePageReqVO) => {
return request.get<PageData<DictTypeVO>>(`${BASE_URL}/page`, { params })
},

// 查询字典详情
getDictTypeApi: (id: number) => {
return request.get(`${BASE_URL}/get?id=${id}`)
},

// 新增字典
createDictTypeApi: (data: DictTypeVO) => {
return request.post(`${BASE_URL}/create`, data)
},

// 修改字典
updateDictTypeApi: (data: DictTypeVO) => {
return request.put(`${BASE_URL}/update`, data)
},

// 删除字典
deleteDictTypeApi: (id: number) => {
return request.delete(`${BASE_URL}/delete?id=${id}`)
},
// 导出字典类型
exportDictTypeApi: (params: DictTypeExportReqVO) => {
return request.get(`${BASE_URL}/export`, { params })
}
};



Write Preview
Loading…
Cancel
Save