在职位管理和行业管理中，转为树形表格数据结构
This commit is contained in:
@@ -4,50 +4,56 @@ import {
|
||||
ProForm,
|
||||
ProFormDigit,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormTreeSelect,
|
||||
ProFormText,
|
||||
ProDescriptions,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form } from 'antd';
|
||||
import { DictValueEnumObj } from '@/components/DictTag';
|
||||
import { FormattedMessage } from '@@/exports';
|
||||
import { getCmsIndustryTree } from '@/services/classify/industry';
|
||||
import { values } from 'lodash';
|
||||
import { getCmsIndustryTreeList } from '@/services/classify/industry'; // 修改导入为 getCmsIndustryTreeList
|
||||
|
||||
interface IndustryDetail extends API.ClassifyIndustry.IndustryRow {
|
||||
parentName: string;
|
||||
interface IndustryDetail {
|
||||
id?: number;
|
||||
industryName?: string;
|
||||
orderNum?: number;
|
||||
status?: string;
|
||||
parentId?: number;
|
||||
parentName?: string;
|
||||
}
|
||||
|
||||
export type ListFormProps = {
|
||||
onCancel: (flag?: boolean, formVars?: unknown) => void;
|
||||
onSubmit: (values: API.ClassifyIndustry.IndustryRow) => Promise<void>;
|
||||
onSubmit: (values: any) => Promise<void>;
|
||||
open: boolean;
|
||||
values?: Partial<API.ClassifyIndustry.IndustryRow>;
|
||||
// industryStatusEnum: DictOptionType[];
|
||||
values?: Partial<IndustryDetail>;
|
||||
industryStatusEnum: DictValueEnumObj;
|
||||
mode?: 'view' | 'edit' | 'create';
|
||||
};
|
||||
|
||||
const listEdit: React.FC<ListFormProps> = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const { industryStatusEnum, mode = props.values ? 'edit' : 'create',values } = props;
|
||||
const { industryStatusEnum, mode = props.values ? 'edit' : 'create', values } = props;
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (values) {
|
||||
form.setFieldsValue(values);
|
||||
form.setFieldsValue({
|
||||
...values,
|
||||
parentId: values?.parentId ?? 0
|
||||
});
|
||||
}
|
||||
}, [form,values?.industryId]);
|
||||
}, [form, values?.id]);
|
||||
|
||||
const getSafeDetailData = (
|
||||
data?: Partial<API.ClassifyIndustry.IndustryRow>
|
||||
): IndustryDetail => {
|
||||
return{
|
||||
industryId: data?.industryId ?? 0,
|
||||
industryName: data?.industryName ?? '',
|
||||
orderNum: data?.orderNum ?? 0,
|
||||
parentId: data?.parentId ?? 0,
|
||||
parentName: (data as any)?.parentName ?? '无', // 或通过 parentId 映射
|
||||
status: data?.status ?? '0',}
|
||||
const getSafeDetailData = (data?: Partial<IndustryDetail>): IndustryDetail => {
|
||||
return {
|
||||
id: data?.id ?? 0,
|
||||
industryName: data?.industryName ?? '',
|
||||
orderNum: data?.orderNum ?? 0,
|
||||
parentId: data?.parentId ?? 0,
|
||||
parentName: data?.parentName ?? '顶级节点',
|
||||
status: data?.status ?? '0',
|
||||
};
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@@ -56,34 +62,51 @@ const listEdit: React.FC<ListFormProps> = (props) => {
|
||||
};
|
||||
|
||||
const handleFinish = async (values: Record<string, any>) => {
|
||||
props.onSubmit(values as API.ClassifyIndustry.IndustryRow);
|
||||
const submitValues = {
|
||||
...values,
|
||||
parentId: values.parentId === 0 ? undefined : values.parentId
|
||||
};
|
||||
props.onSubmit(submitValues);
|
||||
};
|
||||
// check
|
||||
if (mode === 'view') {
|
||||
return (
|
||||
<ModalForm
|
||||
title="行业详情"
|
||||
open={props.open}
|
||||
width={800}
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => handleCancel(),
|
||||
footer: null,
|
||||
}}
|
||||
submitter={false}
|
||||
|
||||
// 获取行业树数据
|
||||
const fetchIndustryTree = async () => {
|
||||
const res = await getCmsIndustryTreeList();
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
label: '顶级节点',
|
||||
value: 0,
|
||||
children: res.data || []
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
if (mode === 'view') {
|
||||
return (
|
||||
<ModalForm
|
||||
title="行业详情"
|
||||
open={props.open}
|
||||
width={800}
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => handleCancel(),
|
||||
footer: null,
|
||||
}}
|
||||
submitter={false}
|
||||
>
|
||||
<ProDescriptions<IndustryDetail>
|
||||
<ProDescriptions<IndustryDetail>
|
||||
column={1}
|
||||
dataSource={getSafeDetailData(values)}
|
||||
loading={!values}
|
||||
>
|
||||
<ProDescriptions.Item label="行业ID" dataIndex="industryId" />
|
||||
<ProDescriptions.Item label="行业ID" dataIndex="id" />
|
||||
<ProDescriptions.Item label="行业名称" dataIndex="industryName" />
|
||||
<ProDescriptions.Item label="显示顺序" dataIndex="orderNum" />
|
||||
<ProDescriptions.Item
|
||||
label="父行业"
|
||||
dataIndex="parentName"
|
||||
valueType="text"// 假设API返回中有parentName字段
|
||||
renderText={(text, record) => record.parentId === 0 ? '顶级节点' : text}
|
||||
/>
|
||||
<ProDescriptions.Item
|
||||
label="行业状态"
|
||||
@@ -94,6 +117,7 @@ if (mode === 'view') {
|
||||
</ModalForm>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalForm
|
||||
title={`${values ? '编辑' : '新增'}行业`}
|
||||
@@ -106,90 +130,60 @@ if (mode === 'view') {
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={handleFinish}
|
||||
// readonly
|
||||
>
|
||||
<ProFormDigit label="InputNumber" name="industryId" disabled hidden={true} />
|
||||
<ProFormDigit name="id" disabled hidden={true} />
|
||||
<ProForm.Group>
|
||||
<ProFormText width="md" name="industryName" label="行业名称" placeholder="请输入行业名称" />
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="industryName"
|
||||
label="行业名称"
|
||||
placeholder="请输入行业名称"
|
||||
rules={[{ required: true, message: '请输入行业名称' }]}
|
||||
/>
|
||||
<ProFormDigit
|
||||
label="显示顺序"
|
||||
name="orderNum"
|
||||
width="md"
|
||||
min={0}
|
||||
placeholder="请输入显示顺序"
|
||||
rules={[{ required: true, message: '请输入显示顺序' }]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
<ProForm.Group>
|
||||
{/* 多级 */}
|
||||
{/*<ProFormTreeSelect*/}
|
||||
{/* name="parentId"*/}
|
||||
{/* label="父行业"*/}
|
||||
{/* placeholder="请选择父行业"*/}
|
||||
{/* allowClear*/}
|
||||
{/* width="md"*/}
|
||||
{/* request={async () => {*/}
|
||||
{/* return getCmsIndustryTree().then((res) => {*/}
|
||||
{/* return res.data;*/}
|
||||
{/* });*/}
|
||||
{/* }}*/}
|
||||
{/* fieldProps={{*/}
|
||||
{/* suffixIcon: null,*/}
|
||||
{/* filterTreeNode: true,*/}
|
||||
{/* showSearch: true,*/}
|
||||
{/* popupMatchSelectWidth: false,*/}
|
||||
{/* labelInValue: false,*/}
|
||||
{/* autoClearSearchValue: true,*/}
|
||||
{/* multiple: false,*/}
|
||||
{/* treeNodeFilterProp: 'title',*/}
|
||||
{/* fieldNames: {*/}
|
||||
{/* label: 'label',*/}
|
||||
{/* value: 'id',*/}
|
||||
{/* children: 'children',*/}
|
||||
{/* },*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
{/* 2级 */}
|
||||
<ProFormSelect
|
||||
<ProFormTreeSelect
|
||||
name="parentId"
|
||||
label="父行业"
|
||||
placeholder="请选择父行业"
|
||||
allowClear
|
||||
width="md"
|
||||
placeholder="请选择父行业"
|
||||
request={async () => {
|
||||
return getCmsIndustryTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
}}
|
||||
colProps={{ md: 12, xl: 12 }}
|
||||
rules={[{ required: true, message: '请选择父行业!' }]}
|
||||
request={fetchIndustryTree}
|
||||
fieldProps={{
|
||||
suffixIcon: null,
|
||||
treeDefaultExpandAll: true,
|
||||
showSearch: true,
|
||||
popupMatchSelectWidth: false,
|
||||
labelInValue: false,
|
||||
autoClearSearchValue: true,
|
||||
filterTreeNode: true,
|
||||
fieldNames: {
|
||||
label: 'label',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
},
|
||||
dropdownStyle: {
|
||||
maxHeight: 400,
|
||||
overflow: 'auto',
|
||||
},
|
||||
}}
|
||||
rules={[{ required: true, message: '请选择父行业' }]}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
valueEnum={industryStatusEnum}
|
||||
name="status"
|
||||
label="行业状态"
|
||||
width="md"
|
||||
placeholder="请输入状态"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: <FormattedMessage id="请输入状态！" defaultMessage="请选择行业状态！" />,
|
||||
},
|
||||
]}
|
||||
initialValue="0"
|
||||
rules={[{ required: true, message: '请选择行业状态' }]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default listEdit;
|
||||
export default listEdit;
|
||||
Reference in New Issue
Block a user