flat: 暂存
This commit is contained in:
史典卓
144
src/pages/Classify/Industry/edit.tsx
Normal file
144
src/pages/Classify/Industry/edit.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormDigit,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form } from 'antd';
|
||||
import { DictValueEnumObj } from '@/components/DictTag';
|
||||
import { FormattedMessage } from '@@/exports';
|
||||
import { getCmsIndustryTree } from '@/services/classify/industry';
|
||||
|
||||
export type ListFormProps = {
|
||||
onCancel: (flag?: boolean, formVars?: unknown) => void;
|
||||
onSubmit: (values: API.ClassifyIndustry.IndustryRow) => Promise<void>;
|
||||
open: boolean;
|
||||
values?: Partial<API.ClassifyIndustry.IndustryRow>;
|
||||
// industryStatusEnum: DictOptionType[];
|
||||
industryStatusEnum: DictValueEnumObj;
|
||||
};
|
||||
|
||||
const listEdit: React.FC<ListFormProps> = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const { industryStatusEnum } = props;
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (props.values) {
|
||||
form.setFieldsValue(props.values);
|
||||
}
|
||||
}, [form, props]);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.onCancel();
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleFinish = async (values: Record<string, any>) => {
|
||||
props.onSubmit(values as API.ClassifyIndustry.IndustryRow);
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalForm<{
|
||||
name: string;
|
||||
company: string;
|
||||
}>
|
||||
title={`${props.values ? '编辑' : '新增'}行业`}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
open={props.open}
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => handleCancel(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={handleFinish}
|
||||
// readonly
|
||||
>
|
||||
<ProFormDigit label="InputNumber" name="industryId" disabled hidden={true} />
|
||||
<ProForm.Group>
|
||||
<ProFormText width="md" name="industryName" label="行业名称" placeholder="请输入行业名称" />
|
||||
<ProFormDigit
|
||||
label="显示顺序"
|
||||
name="orderNum"
|
||||
width="md"
|
||||
min={0}
|
||||
placeholder="请输入显示顺序"
|
||||
/>
|
||||
</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
|
||||
name="parentId"
|
||||
label="父行业"
|
||||
allowClear
|
||||
width="md"
|
||||
placeholder="请选择父行业"
|
||||
request={async () => {
|
||||
return getCmsIndustryTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
}}
|
||||
colProps={{ md: 12, xl: 12 }}
|
||||
rules={[{ required: true, message: '请选择父行业!' }]}
|
||||
fieldProps={{
|
||||
suffixIcon: null,
|
||||
showSearch: true,
|
||||
popupMatchSelectWidth: false,
|
||||
labelInValue: false,
|
||||
autoClearSearchValue: true,
|
||||
fieldNames: {
|
||||
label: 'label',
|
||||
value: 'id',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
valueEnum={industryStatusEnum}
|
||||
name="status"
|
||||
label="行业状态"
|
||||
width="md"
|
||||
placeholder="请输入状态"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: <FormattedMessage id="请输入状态！" defaultMessage="请选择行业状态！" />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default listEdit;
|
||||
221
src/pages/Classify/Industry/index.tsx
Normal file
221
src/pages/Classify/Industry/index.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import { FormattedMessage, useAccess } from '@umijs/max';
|
||||
import { Button, FormInstance, message, Modal } from 'antd';
|
||||
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
|
||||
import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import EditCompanyListRow from './edit';
|
||||
import {
|
||||
addCmsIndustryIndustryt,
|
||||
delCmsIndustryList,
|
||||
exportCmsIndustry,
|
||||
getCmsIndustryList,
|
||||
updateCmsIndustryIndustryt,
|
||||
} from '@/services/classify/industry';
|
||||
import { getDictValueEnum } from '@/services/system/dict';
|
||||
import DictTag from '@/components/DictTag';
|
||||
|
||||
const handleRemoveOne = async (industryId: string) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!industryId) return true;
|
||||
try {
|
||||
const resp = await delCmsIndustryList(industryId);
|
||||
hide();
|
||||
if (resp.code === 200) {
|
||||
message.success('删除成功，即将刷新');
|
||||
} else {
|
||||
message.error(resp.msg);
|
||||
}
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async (values: API.ClassifyIndustry.Params) => {
|
||||
const hide = message.loading('正在导出');
|
||||
try {
|
||||
await exportCmsIndustry(values);
|
||||
hide();
|
||||
message.success('导出成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('导出失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function ManagementList() {
|
||||
const access = useAccess();
|
||||
|
||||
const formTableRef = useRef<FormInstance>();
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const [currentRow, setCurrentRow] = useState<API.ClassifyIndustry.IndustryRow>();
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [industryStatusEnum, setIndustryStatusEnum] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getDictValueEnum('sys_industry_status', true).then((data) => {
|
||||
setIndustryStatusEnum(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const editSubmit = () => {};
|
||||
|
||||
const columns: ProColumns<API.ClassifyIndustry.IndustryRow>[] = [
|
||||
{
|
||||
title: '行业名称',
|
||||
dataIndex: 'industryName',
|
||||
valueType: 'text',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '显示顺序',
|
||||
dataIndex: 'orderNum',
|
||||
valueType: 'text',
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
align: 'center',
|
||||
valueType: 'select',
|
||||
valueEnum: industryStatusEnum,
|
||||
render: (_, record) => {
|
||||
return <DictTag enums={industryStatusEnum} value={record.status} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
dataIndex: 'industryId',
|
||||
width: 300,
|
||||
render: (industryId, record) => [
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
key="edit"
|
||||
icon={<FormOutlined />}
|
||||
hidden={!access.hasPerms('area:business:List.update')}
|
||||
onClick={() => {
|
||||
setModalVisible(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>,
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
key="batchRemove"
|
||||
icon={<DeleteOutlined />}
|
||||
hidden={!access.hasPerms('area:subway:List')}
|
||||
onClick={async () => {
|
||||
Modal.confirm({
|
||||
title: '删除',
|
||||
content: '确定删除该项吗？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
const success = await handleRemoveOne(industryId as string);
|
||||
if (success) {
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>,
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Fragment>
|
||||
<div style={{ width: '100%', float: 'right' }}>
|
||||
<ProTable<API.ClassifyIndustry.IndustryRow>
|
||||
// params 是需要自带的参数
|
||||
// 这个参数优先级更高，会覆盖查询表单的参数
|
||||
actionRef={actionRef}
|
||||
formRef={formTableRef}
|
||||
rowKey="industryId"
|
||||
key="index"
|
||||
columns={columns}
|
||||
request={(params) =>
|
||||
getCmsIndustryList({ ...params } as API.ClassifyIndustry.Params).then((res) => {
|
||||
const result = {
|
||||
data: res.rows,
|
||||
total: res.total,
|
||||
success: true,
|
||||
};
|
||||
return result;
|
||||
})
|
||||
}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
type="primary"
|
||||
key="add"
|
||||
hidden={!access.hasPerms('manage:List:add')}
|
||||
onClick={async () => {
|
||||
setCurrentRow(undefined);
|
||||
setModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> 新建
|
||||
</Button>,
|
||||
<Button
|
||||
key="export"
|
||||
hidden={!access.hasPerms('system:user:export')}
|
||||
onClick={async () => {
|
||||
const searchVal = formTableRef.current && formTableRef.current.getFieldsValue();
|
||||
handleExport(searchVal as API.ClassifyIndustry.Params);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined />
|
||||
<FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<EditCompanyListRow
|
||||
open={modalVisible}
|
||||
onSubmit={async (values) => {
|
||||
let resData;
|
||||
if (values.industryId) {
|
||||
resData = await updateCmsIndustryIndustryt(values);
|
||||
} else {
|
||||
resData = await addCmsIndustryIndustryt(values);
|
||||
}
|
||||
if (resData.code === 200) {
|
||||
setModalVisible(false);
|
||||
setCurrentRow(undefined);
|
||||
if (values.industryId) {
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
message.success('新增成功');
|
||||
}
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
setModalVisible(false);
|
||||
setCurrentRow(undefined);
|
||||
}}
|
||||
industryStatusEnum={industryStatusEnum}
|
||||
values={currentRow}
|
||||
></EditCompanyListRow>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default ManagementList;
|
||||
Reference in New Issue
Block a user