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