Joe
/
xie_fang_tong_admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

up

Browse Source
dev-v2
Joe 10 months ago
parent 12f46100c1
commit 65f069956e
3 changed files with 151 additions and 404 deletions
Show Stats Download Patch File Download Diff File

38
config/routes.ts
Unescape Escape View File

@ -176,25 +176,25 @@ export default [
access: 'trainingClassesCategoryQuery',
component: './TrainingClasses/category',
},
// {
// name: '商品管理',
// path: 'list',
// access: 'productQuery',
// component: './ProductList',
// },
// {
// name: '新增商品',
// path: 'add',
// hideInMenu: true,
// component: './ProductList/add',
// },
// {
// name: '详情',
// path: 'detail/:id',
// access: 'productQuery',
// hideInMenu: true,
// component: './ProductList/detail',
// },
{
name: '课程维护',
path: 'list',
access: 'trainingClassesQuery',
component: './TrainingClasses',
},
{
name: '新增课程',
path: 'add',
hideInMenu: true,
component: './TrainingClasses/add',
},
{
name: '详情',
path: 'detail/:id',
access: 'trainingClassesQuery',
hideInMenu: true,
component: './TrainingClasses/detail',
},
]
},
{

385
src/pages/TrainingClasses/add.tsx
Unescape Escape View File

@ -1,147 +1,48 @@
import Constants from '@/constants';
import { getPbcBusinessListUsingPost } from '@/services/pop-b2b2c/pbcBusinessController';
import { listAdminTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController';
import { getRecordByL3CategoryIdUsingGet } from '@/services/pop-b2b2c/pbcCommonDataController';
import { addOrUpdateProductForAdminUsingPost } from '@/services/pop-b2b2c/pbcProductController';
import { getCities } from '@/utils/cities';
import {
ProCard,
ProForm,
ProFormCascader,
ProFormDateTimeRangePicker,
ProFormDigit,
ProFormInstance,
ProFormList,
ProFormSelect,
ProFormText,
ProFormTextArea,
ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { DndContext, DragEndEvent, PointerSensor, useSensor } from '@dnd-kit/core';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { Button, Col, message, Row } from 'antd';
import Upload, { RcFile, UploadFile } from 'antd/es/upload';
import React, { useRef, useState } from 'react';
import { CSS } from '@dnd-kit/utilities';
import Upload, { RcFile } from 'antd/es/upload';
import React, { useRef } from 'react';
import { getClassesTypeListForAdminUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesTypeController';
import { addOrUpdateClassUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesController';
interface DraggableUploadListItemProps {
originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
file: UploadFile<any>;
}
const DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {
let { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: file.uid,
});
const style: React.CSSProperties = {
transform: CSS.Translate.toString(transform),
transition,
cursor: 'move',
};
return (
<div
ref={setNodeRef}
style={style}
// prevent preview event when drag end
className={isDragging ? 'is-dragging' : ''}
{...attributes}
{...listeners}
>
{/* hide error tooltip when dragging */}
{file.status === 'error' && isDragging ? originNode.props.children : originNode}
</div>
);
};
const Detail: React.FC<any> = () => {
const [cities] = useState(() => getCities())
const [colorData, setColorData] = useState<API.PbcCommonData[]>()
const [commonDataList, setCommonDataList] = useState<API.PbcCommonData[]>()
const formRef = useRef<ProFormInstance>();
const onSave = () => {
formRef.current?.submit()
const values = formRef.current?.getFieldsValue()
console.log(values.colorItems)
console.log(values.specItems)
}
const handleCategoryChange = (value: any[], items: API.PbcCategory[]) => {
const [c1, c2, c3] = items
formRef.current?.setFieldsValue({
pbcProductTopCategoryName: c1?.pbcCategoryName,
pbcProductParentCategoryName: c2?.pbcCategoryName,
pbcProductCategoryName: c3?.pbcCategoryName,
})
if (value.length === 3) {
getRecordByL3CategoryIdUsingGet({ l3CategoryId: value[2] }).then(res => {
if (res.retcode && res.data) {
setColorData(res.data.colorData)
setCommonDataList(res.data.commonDataList)
}
})
}
}
const onSubmit = async (values: any) => {
let pbcProductOriginalProvince = undefined, pbcProductOriginalCity = undefined;
if (values?.pbcZone?.length) {
([pbcProductOriginalProvince, pbcProductOriginalCity] = values.pbcZone);
}
const [pbcProductTopCategoryId, pbcProductParentCategoryId, pbcProductCategoryId] = values.pbcProductCategoryIdList
console.log(values.colorItems)
console.log(values.specItems)
const specItems: API.PbcProductCommonData[] = []
if (colorData && values.colorItems && values.colorItems.length > 0) {
for (let i = 0; i < values.colorItems.length; i++) {
const element = values.colorItems[i];
specItems.push({
pbcCommonDataId: colorData.length > 0 ? colorData[0].pbcId : undefined,
pbcSystemName: '颜色',
pbcSystemInputType: 'text',
pbcCommonDataSystem: element.name,
pbcColorImageUrl: element.value.length > 0 ? element.value[0].response.data : ''
})
}
}
if (commonDataList) {
for (let i = 0; i < commonDataList.length; i++) {
const element = commonDataList[i];
console.log(values[`value${i}`])
let name = ''
if (element.pbcSystemInputType === 'select' && element.commonDataValueList) {
name = element.commonDataValueList.find(e => e.pbcId === values[`value${i}`])?.pbcSystemValue || ''
}
specItems.push({
pbcCommonDataId: element.pbcId,
pbcSystemName: element.pbcSystemName,
pbcSystemInputType: element.pbcSystemInputType,
pbcCommonDataValueId: element.pbcSystemInputType === 'select' ? values[`value${i}`] : undefined,
pbcCommonDataSystemValue: element.pbcSystemInputType === 'select' ? name : undefined,
pbcCommonDataSystem: element.pbcSystemInputType === 'select' ? undefined : values[`value${i}`]
})
let pbcImages = ""
if (values.pbcImages && values.pbcImages.length > 0) {
if (
values.pbcImages[0].response &&
values.pbcImages[0].response.retcode
) {
pbcImages = values.pbcImages[0].response.data;
}
}
const params: API.PbcProductDTO = {
const params: API.PbcTrainingClasses_ = {
...values,
pbcProductOriginalProvince,
pbcProductOriginalCity,
pbcProductTopCategoryId,
pbcProductParentCategoryId,
pbcProductCategoryId,
productCommonDataList: specItems,
pbcProductImages: values.pbcProductImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcProductDetailImages: values.pbcProductDetailImages.filter((e: any) => e.response && e.response.data).map((e: any) => e.response.data).join(','),
pbcZone: undefined,
colorItems: undefined,
specItems: undefined,
pbcProductCategoryIdList: undefined,
pbcImages,
pbcTrainingStartDatetime: values.pbcTrainingStartDatetime[0],
pbcTrainingEndDatetime: values.pbcTrainingStartDatetime[1]
}
const msg = await addOrUpdateProductForAdminUsingPost(params)
const msg = await addOrUpdateClassUsingPost(params)
if (msg.retcode) {
message.success("创建成功！")
history.back();
@ -152,20 +53,6 @@ const Detail: React.FC<any> = () => {
}
}
const sensor = useSensor(PointerSensor, {
activationConstraint: { distance: 10 },
});
const onDragEnd = ({ active, over }: DragEndEvent, fieldName: string) => {
if (active.id !== over?.id) {
const arr = formRef.current?.getFieldValue(fieldName) || []
const activeIndex = arr.findIndex((i: any) => i.uid === active.id);
const overIndex = arr.findIndex((i: any) => i.uid === over?.id);
const newArr = arrayMove(arr, activeIndex, overIndex)
formRef.current?.setFieldValue(fieldName, newArr)
}
};
return (
<PageContainer
header={{
@ -186,151 +73,52 @@ const Detail: React.FC<any> = () => {
]}
>
<ProForm layout="horizontal" labelAlign="left" requiredMark={false} formRef={formRef} onFinish={onSubmit} submitter={false}>
<ProFormText name="pbcProductTopCategoryName" hidden />
<ProFormText name="pbcProductParentCategoryName" hidden />
<ProFormText name="pbcProductCategoryName" hidden />
<ProFormText name="pbcClassesTypeName" hidden />
<ProCard title="基本信息" style={{ marginBottom: 12 }}>
<Row gutter={20}>
<Col span={8}>
<Col span={12}>
<ProFormText label="课程名称" name="pbcTitle" rules={[
{ required: true, message: '请输入课程名称' },
]} />
</Col>
<Col span={12}>
<ProFormSelect
label="所属商户"
name="pbcBusinessId"
label="课程类型"
name="pbcClassesTypeId"
rules={[
{ required: true, message: '请选择所属商户' }
{ required: true, message: '请选择课程类型' }
]}
request={ async () => {
const msg = await getPbcBusinessListUsingPost();
const msg = await getClassesTypeListForAdminUsingPost();
if (msg.retcode && msg.data) {
return msg.data;
}
return [];
}}
fieldProps={{
onChange(value, option: any) {
console.log(option)
formRef.current?.setFieldsValue({
pbcClassesTypeName: option.label
})
},
showSearch: true,
fieldNames: { label: 'pbcBusinessName', value: 'pbcId' }
fieldNames: { label: 'pbcType', value: 'pbcId' }
}}
/>
</Col>
<Col span={8}>
<ProFormText label="编号" name="pbcProductCode" rules={[
{ required: true, message: '请输入商品编号' },
]} />
</Col>
<Col span={8}>
<ProFormText label="名称" name="pbcProductTitle" rules={[
{ required: true, message: '请输入商品名称' },
]} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormCascader label="产地" name="pbcZone" fieldProps={{ options: cities }} />
</Col>
<Col span={8}>
<ProFormText label="价格" name="pbcProductPrice" rules={[
{ required: true, message: '请输入商品价格' },
]} fieldProps={{ prefix: '￥' }} />
</Col>
<Col span={8}>
<ProFormDigit label="库存" name="pbcProductStock" min={0} fieldProps={{ precision: 0 }} rules={[
{ required: true, message: '请输入商品库存' },
]} />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormText label="货架号" name="pbcProductShelfNumber" rules={[
{ required: true, message: '请输入货架号' }
]} />
</Col>
<Col span={8}>
<ProFormCascader label="类目" name="pbcProductCategoryIdList"
request={ async () => {
const msg = await listAdminTreeUsingGet({ type: 2 });
if (msg.retcode && msg.data) {
return msg.data;
}
return [];
}}
fieldProps={{fieldNames: { label: 'pbcCategoryName', value: 'pbcId', children: 'children' }, onChange: handleCategoryChange}}
rules={[
{ required: true, message: '请选择类目' },
]} />
</Col>
</Row>
{colorData ? <ProForm.Item isListField style={{ marginBlockEnd: 0 }} label="颜色" required>
<ProFormList
name="colorItems"
creatorButtonProps={{
creatorButtonText: '新增',
icon: false,
type: 'link',
style: { width: 'unset' },
}}
copyIconProps={false}
deleteIconProps={{ tooltipText: '删除' }}
itemRender={({ listDom, action }) => (
<div
style={{
display: 'inline-flex',
marginInlineEnd: 25,
}}
>
{listDom}
{action}
</div>
)}
>
<Row align="middle" gutter={20}>
<Col span={12}>
<ProFormText width="sm" name={['name']} placeholder="请输入颜色名" rules={[
{ required: true, message: '请输入颜色名' }
<ProFormDigit label="总课次" name="pbcClassesSubCount" min={0} fieldProps={{ precision: 0 }} rules={[
{ required: true, message: '请输入总课次' },
]} />
</Col>
<Col span={12}>
<ProFormUploadButton
name={['value']}
fieldProps={{
name: 'file',
accept: 'image/*',
headers: {
authorization: localStorage.getItem('token') ?? '',
},
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || Upload.LIST_IGNORE;
},
onPreview: async (file) => {
if (file.uid === '-1') {
window.open(file.url);
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
}
},
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传颜色图片' },
]}
label="课程缩略图"
name="pbcImages"
max={1}
/>
</Col>
</Row>
</ProFormList>
</ProForm.Item> : null}
<Row gutter={20}>
<Col span={24}>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductImages")}>
<SortableContext items={formRef.current?.getFieldValue("pbcProductImages") ? formRef.current?.getFieldValue("pbcProductImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="相册图"
name="pbcProductImages"
fieldProps={{
name: 'file',
accept: 'image/*',
@ -338,59 +126,27 @@ const Detail: React.FC<any> = () => {
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || Upload.LIST_IGNORE;
},
onPreview: async (file) => {
if (file.uid === '-1') {
window.open(file.url);
onChange: (info: any) => {
switch (info.file.status) {
case 'done':
if (info.file.response.retcode === 0) {
message.error(info.file.response.retmsg);
formRef.current?.setFieldValue('pbcImages', [])
}
if (file.response && file.response.retcode) {
window.open(file.response.data);
break;
default:
break;
}
},
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传相册图' },
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
<Row gutter={20}>
<Col span={24}>
<DndContext sensors={[sensor]} onDragEnd={(event) => onDragEnd(event, "pbcProductDetailImages")}>
<SortableContext items={formRef.current?.getFieldValue("pbcProductDetailImages") ? formRef.current?.getFieldValue("pbcProductDetailImages").map((i: any) => i.uid) : []} strategy={verticalListSortingStrategy}>
<ProFormUploadButton
label="详情图"
name="pbcProductDetailImages"
fieldProps={{
name: 'file',
accept: 'image/*',
multiple: true,
headers: {
authorization: localStorage.getItem('token') ?? '',
},
itemRender: (originNode, file) => <DraggableUploadListItem originNode={originNode} file={file} />,
action: process.env.BASE_URL + '/oss/imgUpload',
beforeUpload(file: RcFile) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
message.error('图片大小不能超过10MB!');
}
return isLt2M || Upload.LIST_IGNORE;
return isLt10M || Upload.LIST_IGNORE;
},
onPreview: async (file) => {
if (file.uid === '-1') {
window.open(file.url);
}
@ -401,43 +157,20 @@ const Detail: React.FC<any> = () => {
listType: 'picture-card',
}}
rules={[
{ required: true, message: '请上传详情图' },
{ required: true, message: '请上传课程缩略图' }
]}
/>
</SortableContext>
</DndContext>
</Col>
</Row>
{commonDataList ? commonDataList.map((e, index) => <Row key={e.pbcId} align="middle" gutter={20}>
<Col span={6}>
<ProFormText width="sm" disabled name={`name${index}`} initialValue={e.pbcSystemName} placeholder="请输入规格名称" rules={[
{ required: true, message: '请输入规格名称' }
]} />
</Col>
<Col span={6}>
{e.pbcSystemInputType === 'select' ? <ProFormSelect name={`value${index}`} options={e.commonDataValueList?.map(item => {
return {
label: item.pbcSystemValue || '',
value: item.pbcId
}
})} /> : <ProFormText width="sm" name={`value${index}`} placeholder="请输入规格描述" />
}
</Col>
</Row>) : null}
<Row gutter={20}>
<Col span={24}>
<ProFormTextArea label="详情描述" name="pbcProductDetail" />
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<ProFormSelect label="可见范围" name="pbcProductType" valueEnum={Constants.pbcProductType} rules={[
{ required: true, message: '请选择可见范围' },
<Col span={12}>
<ProFormSelect label="教学方式" name="pbcTeachMethod" options={['线上', '线下']} rules={[
{ required: true, message: '请选择教学方式' },
]} />
</Col>
<Col span={8}>
<ProFormSelect label="状态" name="pbcState" valueEnum={Constants.pbcState} rules={[
{ required: true, message: '请选择上下架状态' },
<ProFormDateTimeRangePicker label="培训时间" name="pbcTrainingStartDatetime" rules={[
{ required: true, message: '请选择培训时间' },
]} />
</Col>
</Row>

70
src/pages/TrainingClasses/index.tsx
Unescape Escape View File

@ -1,8 +1,9 @@
import { getClassPageForAdminUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesController';
import Constants from '@/constants';
import { changeClassStateForAdminUsingGet, getClassPageForAdminUsingPost } from '@/services/pop-b2b2c/pbcTrainingClassesController';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Access, Link, useAccess, history } from '@umijs/max';
import { Button } from 'antd';
import { Button, message, Space, Switch, Image } from 'antd';
import React, { useRef } from 'react';
/**
@ -18,24 +19,24 @@ const fetchData = async (params: API.PbcTrainingClasses_) => {
} as any;
};
// const handleUpdateState = async (id: number, state: number) => {
// const hide = message.loading('正在保存');
// if (!id) return false;
// try {
// const msg = await updateCategoryRecordStateUsingGet({ pbcId: id, state: state });
// hide();
// if (msg.retcode) {
// message.success(!id ? '新增成功！' : '保存成功！');
// return true;
// }
// message.error(msg.retmsg);
// return false;
// } catch (error) {
// hide();
// message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
// return false;
// }
// };
const handleUpdateState = async (id: number, state: number) => {
const hide = message.loading('正在保存');
if (!id) return false;
try {
const msg = await changeClassStateForAdminUsingGet({ id, state: state });
hide();
if (msg.retcode) {
message.success(!id ? '新增成功！' : '保存成功！');
return true;
}
message.error(msg.retmsg);
return false;
} catch (error) {
hide();
message.error(!id ? '新增失败，请重试！' : '保存失败，请重试！');
return false;
}
};
// eslint-disable-next-line @typescript-eslint/ban-types
const TableList: React.FC<{}> = () => {
@ -47,11 +48,15 @@ const TableList: React.FC<{}> = () => {
title: '课程缩略图',
dataIndex: 'pbcImages',
search: false,
width: 220,
render: (text) => {
const str = text?.toString()
return str && <Image style={{ objectFit: 'contain' }} src={str} width={200} height={200} />
}
},
{
title: '课程名称',
dataIndex: 'pbcTitle',
search: false,
},
{
title: '课程类型',
@ -68,13 +73,19 @@ const TableList: React.FC<{}> = () => {
dataIndex: 'pbcCreateAt',
search: false
},
{
title: '课程状态',
dataIndex: 'pbcState',
hideInTable: true,
valueEnum: Constants.state
},
{
title: '操作',
fixed: 'right',
valueType: 'option',
render: (text, record) => (
<span>
{/* <Access key="switch" accessible={access.productCategoryUpdateState}>
<Space>
<Access key="switch" accessible={access.trainingClassesUpdateState}>
<Switch
checked={record.pbcState === 1}
onChange={async (value) => {
@ -87,9 +98,12 @@ const TableList: React.FC<{}> = () => {
}
}}
/>
</Access> */}
<Link to={'/training-classes/save/' + record.pbcId}>编辑</Link>
</span>
</Access>
<Link to={'/training-classes/detail/' + record.pbcId}>详情</Link>
<Access key="switch" accessible={access.trainingClassesSave}>
<Link to={'/training-classes/detail/' + record.pbcId + "?isEdit=1"}>编辑</Link>
</Access>
</Space>
),
},
];
@ -117,8 +131,8 @@ const TableList: React.FC<{}> = () => {
}}
toolbar={{
actions: [
<Access key="add" accessible={access.productAdd}>
<Button type="primary" onClick={() => history.push('/product/add')}>新增课程</Button>
<Access key="add" accessible={access.trainingClassesSave}>
<Button type="primary" onClick={() => history.push('/training-classes/add')}>新增课程</Button>
</Access>
]
}}

Write Preview
Loading…
Cancel
Save