master
parent
6b24b5b845
commit
a78991ea38
@ -0,0 +1,83 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { DrawerForm, ProFormInstance, ProFormSelect, ProFormText } from '@ant-design/pro-components';
|
||||
import Constants from '@/constants';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.PbcSpecification>;
|
||||
export type UpdateFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const formRef = useRef<ProFormInstance>();
|
||||
return (
|
||||
<DrawerForm
|
||||
width={640}
|
||||
title={'新增规格'}
|
||||
open={props.updateModalVisible}
|
||||
formRef={formRef}
|
||||
onFinish={(value: API.PbcSpecification) => {
|
||||
return props.onSubmit({ ...value })
|
||||
}}
|
||||
drawerProps={{
|
||||
destroyOnClose: true,
|
||||
}}
|
||||
onOpenChange={(visible) => {
|
||||
formRef.current?.resetFields();
|
||||
if (!visible) {
|
||||
props.onCancel();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
placeholder={'请输入规格key'}
|
||||
label="规格key"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '规格key为必填项',
|
||||
},
|
||||
{
|
||||
pattern: /^[A-Za-z]+$/,
|
||||
message: '规格key格式为英文字母',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
name="pbcSystemKey"
|
||||
/>
|
||||
<ProFormText
|
||||
placeholder={'请输入规格名称'}
|
||||
label="规格名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '规格名称为必填项',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
name="pbcSystemName"
|
||||
/>
|
||||
<ProFormSelect
|
||||
placeholder={'请输入输入类型'}
|
||||
label="输入类型"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '输入类型为必填项',
|
||||
}
|
||||
]}
|
||||
valueEnum={Constants.pbcSystemInputType}
|
||||
width="md"
|
||||
name="pbcSystemInputType"
|
||||
/>
|
||||
</DrawerForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
@ -0,0 +1,53 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { DrawerForm, ProFormInstance, ProFormText } from '@ant-design/pro-components';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.PbcSpecification>;
|
||||
export type UpdateFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
};
|
||||
|
||||
const UpdateItemForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const formRef = useRef<ProFormInstance>();
|
||||
return (
|
||||
<DrawerForm
|
||||
width={640}
|
||||
title={'新增规格项'}
|
||||
open={props.updateModalVisible}
|
||||
formRef={formRef}
|
||||
onFinish={(value: API.PbcSpecification) => {
|
||||
return props.onSubmit({ ...value })
|
||||
}}
|
||||
drawerProps={{
|
||||
destroyOnClose: true,
|
||||
}}
|
||||
onOpenChange={(visible) => {
|
||||
formRef.current?.resetFields();
|
||||
if (!visible) {
|
||||
props.onCancel();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
placeholder={'请输入规格项名称'}
|
||||
label="规格项名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '规格项名称为必填项',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
name="pbcSystemValue"
|
||||
/>
|
||||
</DrawerForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateItemForm;
|
||||
@ -0,0 +1,243 @@
|
||||
import { dashboardUsingPost, exportDashboardDetailUsingPost } from '@/services/pop-b2b2c/pbcUserRecordLogController';
|
||||
import { Bar, Pie, WordCloud, WordCloudConfig } from '@ant-design/plots';
|
||||
import dayjs from 'dayjs';
|
||||
import { ActionType, PageContainer, ProCard, ProColumns, ProForm, ProFormDateRangePicker, ProFormGroup, ProFormInstance, ProFormRadio, ProFormText, ProTable } from '@ant-design/pro-components';
|
||||
import { Button, Card, Col, message, Row, Spin, Statistic, Switch, Table } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Access, history, Link, useAccess } from '@umijs/max';
|
||||
import Constants from '@/constants';
|
||||
import { disabledDate } from '@/utils/utils';
|
||||
import { addSpecificationItemUsingPost, addSpecificationUsingPost, changeSpecificationItemStateUsingPost, getSpecificationItemListUsingGet, specificationListUsingGet } from '@/services/pop-b2b2c/pbcSpecificationController';
|
||||
import { FileAddFilled, PlusCircleFilled } from '@ant-design/icons';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import UpdateItemForm from './components/UpdateItemForm';
|
||||
|
||||
/**
|
||||
* 查询表格
|
||||
* @param param0
|
||||
*/
|
||||
const fetchData = async (params: any) => {
|
||||
const msg = await getSpecificationItemListUsingGet(params);
|
||||
return {
|
||||
data: msg.data || [],
|
||||
success: msg.retcode,
|
||||
} as any;
|
||||
};
|
||||
|
||||
const handleUpdateState = async (id: number, state: number) => {
|
||||
const hide = message.loading('正在保存');
|
||||
if (!id) return false;
|
||||
try {
|
||||
const msg = await changeSpecificationItemStateUsingPost({ pbcId: id, pbcState: state });
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!id ? '新增成功！' : '保存成功！');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: API.PbcSpecification) => {
|
||||
const hide = message.loading('正在保存');
|
||||
|
||||
try {
|
||||
const msg = await addSpecificationUsingPost({ ...fields });
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!fields.pbcId ? '添加成功' : '保存成功');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!fields.pbcId ? '添加失败请重试！' : '保存失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleItemUpdate = async (fields: API.PbcCommonDataValue) => {
|
||||
const hide = message.loading('正在保存');
|
||||
|
||||
try {
|
||||
const msg = await addSpecificationItemUsingPost({ ...fields });
|
||||
hide();
|
||||
if (msg.retcode) {
|
||||
message.success(!fields.pbcId ? '添加成功' : '保存成功');
|
||||
return true;
|
||||
}
|
||||
message.error(msg.retmsg);
|
||||
return false;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error(!fields.pbcId ? '添加失败请重试！' : '保存失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const Welcome: React.FC = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const access: any = useAccess();
|
||||
|
||||
const [specList, setSpecList] = useState<API.PbcSpecification[]>([])
|
||||
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
|
||||
const [updateItemModalVisible, handleUpdateItemModalVisible] = useState<boolean>(false);
|
||||
const [specificationId, setSpecificationId] = useState<number>()
|
||||
|
||||
const columns: ProColumns<API.PbcCommonDataValue>[] = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'pbcId',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'pbcSystemValue',
|
||||
},
|
||||
{
|
||||
title: '最后操作人',
|
||||
dataIndex: 'pbcUpdateByUserName',
|
||||
},
|
||||
{
|
||||
title: '最后操作时间',
|
||||
dataIndex: 'pbcUpdateAt',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'pbcState',
|
||||
valueType: 'select',
|
||||
valueEnum: Constants.state,
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Access key="switch" accessible={access.dictionaryUpdate}>
|
||||
<Switch
|
||||
checked={record.pbcState === 1}
|
||||
onChange={async (value) => {
|
||||
const success = await handleUpdateState(record.pbcId || 0, value ? 1 : 2);
|
||||
|
||||
if (success) {
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Access>
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const getData = () => {
|
||||
specificationListUsingGet().then(res => {
|
||||
if (res.retcode && res.data) {
|
||||
setSpecList(res.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
breadcrumb: {},
|
||||
}}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<Card title="规格" bodyStyle={{ maxHeight: 'calc(100vh - 175px)', overflowY: 'auto' }} bordered={false} extra={
|
||||
<Access accessible={access.dictionaryAdd}><PlusCircleFilled style={{ color: '#1890ff', fontSize: 22 }} onClick={() => {
|
||||
handleUpdateModalVisible(true)
|
||||
}} /></Access>
|
||||
}>
|
||||
{specList.map(e => <p
|
||||
style={{ padding: 10, margin: 0, backgroundColor: specificationId === e.pbcId ? '#1890ff' : undefined, color: specificationId === e.pbcId ? '#fff' : undefined }} onClick={() => {
|
||||
setSpecificationId(e.pbcId)
|
||||
}}>{e.pbcSystemName}</p>)}
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<Card title="规格项" bordered={false} extra={
|
||||
<Access accessible={access.dictionaryAdd}><PlusCircleFilled style={{ color: '#1890ff', fontSize: 22 }} onClick={() => {
|
||||
const index = specList.findIndex(e => e.pbcId === specificationId)
|
||||
if (!specificationId) {
|
||||
message.warning("请选择规格")
|
||||
} else if (index >= 0 && specList[index].pbcSystemInputType === 'text') {
|
||||
message.warning("所选规格为文本框，不能新增规格项")
|
||||
} else {
|
||||
handleUpdateItemModalVisible(true)
|
||||
}
|
||||
}} /></Access>
|
||||
}>
|
||||
<ProTable
|
||||
request={fetchData}
|
||||
actionRef={actionRef}
|
||||
bordered
|
||||
size='small'
|
||||
rowKey="pbcId"
|
||||
params={{ specificationId }}
|
||||
manualRequest={true}
|
||||
columns={columns}
|
||||
search={false}
|
||||
options={false}
|
||||
scroll={{
|
||||
y: 'calc(100vh - 280px)',
|
||||
}}
|
||||
toolBarRender={() => []}
|
||||
pagination={false}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<UpdateForm
|
||||
onSubmit={async (value: any) => {
|
||||
const success = await handleUpdate(value);
|
||||
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
getData()
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
message.destroy();
|
||||
handleUpdateModalVisible(false);
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
/>
|
||||
<UpdateItemForm
|
||||
onSubmit={async (value: any) => {
|
||||
const success = await handleItemUpdate({...value, pbcSpecificationId: specificationId});
|
||||
|
||||
if (success) {
|
||||
handleUpdateItemModalVisible(false);
|
||||
actionRef.current?.reload()
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
message.destroy();
|
||||
handleUpdateItemModalVisible(false);
|
||||
}}
|
||||
updateModalVisible={updateItemModalVisible}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
Loading…
Reference in New Issue