Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
A
admin
概览
概览
详情
活动
周期分析
版本库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
iuav
admin
Commits
a2746629
提交
a2746629
authored
8月 12, 2023
作者:
龚洪江
浏览文件
操作
浏览文件
下载
差异文件
功能:租赁页面
上级
fd241a6f
a2d16a64
全部展开
隐藏空白字符变更
内嵌
并排
正在显示
18 个修改的文件
包含
590 行增加
和
68 行删除
+590
-68
rentManageType.ts
src/api/interface/rentManageType.ts
+5
-2
old-index.tsx
src/pages/mallManage/rentGoods/rentList/old-index.tsx
+0
-0
index.scss
...e/rentGoods/rentAddOrEdit/components/goodsInfo/index.scss
+7
-0
index.tsx
...ge/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx
+57
-0
index.scss
...ge/rentGoods/rentAddOrEdit/components/rentAttr/index.scss
+7
-0
index.tsx
...age/rentGoods/rentAddOrEdit/components/rentAttr/index.tsx
+152
-0
index.scss
...ge/rentGoods/rentAddOrEdit/components/rentInfo/index.scss
+7
-0
index.tsx
...age/rentGoods/rentAddOrEdit/components/rentInfo/index.tsx
+23
-0
index.scss
...age/rentGoods/rentAddOrEdit/components/skuInfo/index.scss
+7
-0
index.tsx
...nage/rentGoods/rentAddOrEdit/components/skuInfo/index.tsx
+37
-0
index.scss
src/pages/rentManage/rentGoods/rentAddOrEdit/index.scss
+0
-0
index.tsx
src/pages/rentManage/rentGoods/rentAddOrEdit/index.tsx
+19
-0
index.tsx
...ages/rentManage/rentGoods/rentAddOrEditOrDetail/index.tsx
+0
-0
index.tsx
src/pages/rentManage/rentGoods/rentList/index.tsx
+0
-0
index.tsx
src/pages/rentManage/rentMake/index.tsx
+14
-1
index.tsx
...nage/rentMode/components/addOrEditRentModeModal/index.tsx
+107
-15
index.tsx
src/pages/rentManage/rentMode/index.tsx
+119
-20
router.tsx
src/router/router.tsx
+29
-30
没有找到文件。
src/api/interface/rentManageType.ts
浏览文件 @
a2746629
...
...
@@ -31,9 +31,12 @@ export type listBrandInfoType = InterItemFunction<
>
;
//租赁-型号-新增
export
type
addRentModeType
=
InterFunction
<
{
modeName
:
string
;
productTypeId
:
number
},
any
>
;
export
type
addRentModeType
=
InterFunction
<
{
modeName
:
string
;
productTypeId
:
number
;
brandInfoId
:
number
;
tag
?:
string
},
any
>
;
//租赁-型号-列表
export
type
rentModeListType
=
InterItemFunction
<
{
brandInfoId
?:
number
;
productTypeId
?:
number
},
any
{
modeName
:
string
;
id
:
number
;
brandInfoId
:
number
;
productTypeId
:
number
;
tag
:
string
}[]
>
;
src/pages/mallManage/rentGoods/rentList/old-index.tsx
0 → 100644
浏览文件 @
a2746629
差异被折叠。
点击展开。
src/pages/rentManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.scss
0 → 100644
浏览文件 @
a2746629
.goods-info
{
&
-title
{
font-size
:
15px
;
font-weight
:
bold
;
line-height
:
40px
;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx
0 → 100644
浏览文件 @
a2746629
import
{
Form
,
Input
,
Radio
}
from
'antd'
;
import
'./index.scss'
;
const
GoodsInfo
=
()
=>
{
const
qualityList
=
[
{
label
:
'全新'
,
value
:
0
,
},
{
label
:
'99新'
,
value
:
1
,
},
{
label
:
'95新'
,
value
:
2
,
},
{
label
:
'90新'
,
value
:
3
,
},
{
label
:
'80新'
,
value
:
4
,
},
];
return
(
<
div
className=
'goods-info'
>
<
div
className=
'goods-info-title'
>
商品信息
</
div
>
<
Form
labelCol=
{
{
span
:
2
}
}
wrapperCol=
{
{
span
:
10
}
}
>
<
Form
.
Item
label=
'商品标题'
>
<
Input
placeholder=
'请输入商品标题'
/>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品卖点'
>
<
Input
placeholder=
'请输入商品卖点'
/>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品成新'
>
<
Radio
.
Group
>
{
qualityList
.
map
((
v
,
index
)
=>
(
<
Radio
value=
{
v
.
value
}
key=
{
index
}
>
{
v
.
label
}
</
Radio
>
))
}
</
Radio
.
Group
>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品状态'
>
<
Radio
.
Group
>
<
Radio
value=
{
1
}
>
上架
</
Radio
>
<
Radio
value=
{
0
}
>
下架
</
Radio
>
</
Radio
.
Group
>
</
Form
.
Item
>
</
Form
>
</
div
>
);
};
export
default
GoodsInfo
;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentAttr/index.scss
0 → 100644
浏览文件 @
a2746629
.rent-attr
{
&
-title
{
font-size
:
15px
;
font-weight
:
bold
;
line-height
:
40px
;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentAttr/index.tsx
0 → 100644
浏览文件 @
a2746629
import
'./index.scss'
;
import
{
Button
,
Cascader
,
Form
,
Radio
,
Table
}
from
'antd'
;
import
EditableCell
from
'~/components/EditableCell'
;
import
{
useState
}
from
'react'
;
import
{
MinusOutlined
,
PlusOutlined
,
UploadOutlined
}
from
'@ant-design/icons'
;
import
{
Uploader
}
from
'~/components/uploader'
;
import
RichText
from
'~/components/richText'
;
type
EditableTableProps
=
Parameters
<
typeof
Table
>
[
0
];
type
ColumnTypes
=
Exclude
<
EditableTableProps
[
'columns'
],
undefined
>
;
const
RentAttr
=
()
=>
{
const
typeList
=
[
{
label
:
'航拍无人机'
,
value
:
1
,
},
{
label
:
'行业无人机'
,
value
:
2
,
},
{
label
:
'挂载'
,
value
:
3
,
},
{
label
:
'配件'
,
value
:
4
,
},
];
const
attrTableColumns
:
(
ColumnTypes
[
number
]
&
{
editable
?:
boolean
;
dataIndex
?:
string
;
inputType
?:
string
;
rules
?:
any
;
maxLength
?:
number
;
})[]
=
[
{
title
:
'参数名称'
,
dataIndex
:
''
,
editable
:
true
,
align
:
'center'
,
},
{
title
:
'参数值'
,
dataIndex
:
''
,
editable
:
true
,
align
:
'center'
,
},
{
title
:
'操作'
,
dataIndex
:
''
,
render
:
(
_text
:
string
,
_record
:
any
,
index
:
number
)
=>
(
<>
{
index
===
parameterTableData
.
length
-
1
?
(
<
Button
icon=
{
<
PlusOutlined
/>
}
type=
'primary'
onClick=
{
addParameterDataEvent
}
style=
{
{
marginRight
:
'10px'
}
}
></
Button
>
)
:
(
''
)
}
{
index
?
(
<
Button
type=
'primary'
icon=
{
<
MinusOutlined
/>
}
onClick=
{
deleteParameterDataEvent
}
></
Button
>
)
:
(
''
)
}
</>
),
},
];
const
columns
=
attrTableColumns
.
map
((
col
)
=>
{
if
(
!
col
.
editable
)
{
return
col
;
}
return
{
...
col
,
onCell
:
(
record
:
any
)
=>
({
record
,
dataIndex
:
col
.
dataIndex
,
title
:
col
.
title
,
editing
:
col
.
editable
,
inputType
:
col
.
inputType
,
rules
:
col
.
rules
,
}),
};
});
const
[
parameterTableData
,
setParameterTableData
]
=
useState
<
any
>
([{
id
:
1
}]);
//商品参数新增
const
addParameterDataEvent
=
()
=>
{
setParameterTableData
([...
parameterTableData
,
{
id
:
parameterTableData
.
length
+
1
}]);
};
//商品参数删除
const
deleteParameterDataEvent
=
()
=>
{};
return
(
<
div
className=
'rent-attr'
>
<
div
className=
'rent-attr-title'
>
商品属性
</
div
>
<
Form
labelCol=
{
{
span
:
2
}
}
wrapperCol=
{
{
span
:
10
}
}
>
<
Form
.
Item
label=
'商品类型'
>
<
Radio
.
Group
>
{
typeList
.
map
((
v
)
=>
(
<
Radio
key=
{
v
.
value
}
value=
{
v
.
value
}
>
{
v
.
label
}
</
Radio
>
))
}
</
Radio
.
Group
>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品型号'
>
<
Cascader
placeholder=
'请选择商品型号'
/>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品参数'
>
<
Form
>
<
Table
columns=
{
columns
as
ColumnTypes
}
components=
{
{
body
:
{
cell
:
EditableCell
,
},
}
}
dataSource=
{
parameterTableData
}
bordered
rowKey=
'id'
pagination=
{
false
}
></
Table
>
</
Form
>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品图片'
>
<
Uploader
fileUpload
listType=
'picture-card'
>
<
UploadOutlined
/>
</
Uploader
>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品视频'
>
<
Uploader
fileUpload
listType=
'picture-card'
>
<
UploadOutlined
/>
</
Uploader
>
</
Form
.
Item
>
<
Form
.
Item
label=
'商品详情页'
>
<
RichText
richTextContent=
''
/>
</
Form
.
Item
>
</
Form
>
</
div
>
);
};
export
default
RentAttr
;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentInfo/index.scss
0 → 100644
浏览文件 @
a2746629
.rent-info
{
&
-title
{
font-size
:
15px
;
font-weight
:
bold
;
line-height
:
40px
;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/rentInfo/index.tsx
0 → 100644
浏览文件 @
a2746629
import
{
Form
,
Select
}
from
'antd'
;
import
'./index.scss'
;
const
RentInfo
=
()
=>
{
return
(
<
div
className=
'rent-info'
>
<
div
className=
'rent-info-title'
>
租赁信息
</
div
>
<
Form
labelCol=
{
{
span
:
2
}
}
wrapperCol=
{
{
span
:
10
}
}
>
<
Form
.
Item
label=
'最低租期'
>
<
Select
placeholder=
'请选择租期'
>
<
Select
.
Option
>
11
</
Select
.
Option
>
</
Select
>
</
Form
.
Item
>
<
Form
.
Item
label=
'最高租期'
>
<
Select
placeholder=
'请选择租期'
>
<
Select
.
Option
>
11
</
Select
.
Option
>
</
Select
>
</
Form
.
Item
>
</
Form
>
</
div
>
);
};
export
default
RentInfo
;
src/pages/rentManage/rentGoods/rentAddOrEdit/components/skuInfo/index.scss
0 → 100644
浏览文件 @
a2746629
.sku-info
{
&
-title
{
font-size
:
15px
;
font-weight
:
bold
;
line-height
:
40px
;
}
}
src/pages/rentManage/rentGoods/rentAddOrEdit/components/skuInfo/index.tsx
0 → 100644
浏览文件 @
a2746629
import
'./index.scss'
;
import
{
Button
,
Col
,
Row
,
Table
}
from
'antd'
;
import
{
PlusOutlined
}
from
'@ant-design/icons'
;
import
{
ColumnsType
}
from
'antd/es/table/InternalTable'
;
const
SkuInfo
=
()
=>
{
const
skuTableColumns
:
ColumnsType
<
any
>
=
[
{
title
:
'版本'
,
align
:
'center'
,
},
{
title
:
'是否缺货'
,
align
:
'center'
,
},
{
title
:
'押金'
,
align
:
'center'
,
},
];
return
(
<
div
className=
'sku-info'
>
<
div
className=
'sku-info-title'
>
价格库存信息
</
div
>
<
Row
>
<
Col
span=
{
1
}
></
Col
>
<
Col
span=
{
22
}
>
<
div
>
<
Button
type=
'primary'
icon=
{
<
PlusOutlined
/>
}
style=
{
{
marginBottom
:
'10px'
}
}
>
新增规格
</
Button
>
<
Table
bordered
columns=
{
skuTableColumns
}
/>
</
div
>
</
Col
>
</
Row
>
</
div
>
);
};
export
default
SkuInfo
;
src/pages/rentManage/rentGoods/rentAddOrEdit
OrDetail
/index.scss
→
src/pages/rentManage/rentGoods/rentAddOrEdit/index.scss
浏览文件 @
a2746629
File moved
src/pages/rentManage/rentGoods/rentAddOrEdit/index.tsx
0 → 100644
浏览文件 @
a2746629
import
GoodsInfo
from
'./components/goodsInfo'
;
import
RentAttr
from
'./components/rentAttr'
;
import
RentInfo
from
'./components/rentInfo'
;
import
SkuInfo
from
'./components/skuInfo'
;
const
RentAddOrEdit
=
()
=>
{
return
(
<
div
className=
'rent-create-edit'
>
{
/*商品信息*/
}
<
GoodsInfo
/>
{
/*商品属性*/
}
<
RentAttr
/>
{
/*租赁信息*/
}
<
RentInfo
/>
{
/*价格库存信息*/
}
<
SkuInfo
/>
</
div
>
);
};
export
default
RentAddOrEdit
;
src/pages/rentManage/rentGoods/rentAddOrEditOrDetail/index.tsx
deleted
100644 → 0
浏览文件 @
fd241a6f
差异被折叠。
点击展开。
src/pages/rentManage/rentGoods/rentList/index.tsx
浏览文件 @
a2746629
差异被折叠。
点击展开。
src/pages/rentManage/rentMake/index.tsx
浏览文件 @
a2746629
...
...
@@ -6,11 +6,14 @@ import { useEffect, useState } from 'react';
import
{
RentManageAPI
}
from
'~/api'
;
import
{
InterDataType
,
PaginationProps
}
from
'~/api/interface'
;
import
{
listBrandInfoType
}
from
'~/api/interface/rentManageType'
;
import
{
useNavigate
}
from
'react-router-dom'
;
//品牌列表返回类型
type
makeListType
=
InterDataType
<
listBrandInfoType
>
[
'list'
];
const
RentMake
=
()
=>
{
const
navigate
=
useNavigate
();
const
tableColumns
:
ColumnsType
<
makeListType
[
0
]
>
=
[
{
title
:
'品牌名称'
,
...
...
@@ -30,7 +33,9 @@ const RentMake = () => {
width
:
'15%'
,
render
:
(
_
:
any
,
record
)
=>
(
<>
<
Button
type=
'link'
>
绑定型号
</
Button
>
<
Button
type=
'link'
onClick=
{
()
=>
addRentModeClick
(
record
)
}
>
新增型号
</
Button
>
<
Button
type=
'link'
onClick=
{
()
=>
addOrEditRentMakeModalClick
(
record
)
}
>
编辑
</
Button
>
...
...
@@ -71,6 +76,14 @@ const RentMake = () => {
getListBrandInfo
();
setAddOrEditRentMakeModalShow
(
false
);
};
//品牌新增型号
const
addRentModeClick
=
(
record
:
makeListType
[
0
])
=>
{
navigate
({
pathname
:
'/rentManage/rentModel'
,
search
:
`brandInfoId=
${
record
.
id
}
&brandName=
${
record
.
brandName
}
`
,
});
};
//分页
const
paginationChange
=
(
pageNo
:
number
,
pageSize
:
number
)
=>
{
pagination
.
pageNo
=
pageNo
;
...
...
src/pages/rentManage/rentMode/components/addOrEditRentModeModal/index.tsx
浏览文件 @
a2746629
import
{
Form
,
Input
,
Modal
,
ModalProps
,
Select
}
from
'antd'
;
import
{
Button
,
Col
,
Form
,
Input
,
message
,
Modal
,
ModalProps
,
Row
,
Select
}
from
'antd'
;
import
{
FC
,
useEffect
,
useState
}
from
'react'
;
import
{
InterDataType
,
InterReqType
}
from
'~/api/interface'
;
import
{
addRentModeType
,
getTypeListType
}
from
'~/api/interface/rentManageType'
;
import
{
addRentModeType
,
getTypeListType
,
rentModeListType
}
from
'~/api/interface/rentManageType'
;
import
{
RentManageAPI
}
from
'~/api'
;
import
{
MinusOutlined
,
PlusOutlined
}
from
'@ant-design/icons'
;
interface
selfProps
{
onOk
:
()
=>
void
;
onCancel
:
()
=>
void
;
brandInfoId
:
number
;
rentTypeList
:
rentTypeListType
;
currentRentMode
:
modeListType
[
0
]
|
undefined
;
}
//型号新增参数类型
type
addRentParameterType
=
Exclude
<
InterReqType
<
addRentModeType
>
,
undefined
>
;
//类型类别返回类型
type
rentTypeListType
=
InterDataType
<
getTypeListType
>
[
'list'
];
//型号返回类型
type
modeListType
=
InterDataType
<
rentModeListType
>
[
'list'
];
const
AddOrEditRentModeModal
:
FC
<
ModalProps
&
selfProps
>
=
({
open
,
onOk
,
onCancel
})
=>
{
const
AddOrEditRentModeModal
:
FC
<
ModalProps
&
selfProps
>
=
({
open
,
onOk
,
onCancel
,
brandInfoId
,
rentTypeList
,
currentRentMode
,
})
=>
{
const
[
form
]
=
Form
.
useForm
<
addRentParameterType
>
();
const
[
rentTypeList
,
setRentTypeList
]
=
useState
<
rentTypeListType
>
([]);
//标签数组
const
[
tagList
,
setTagList
]
=
useState
<
{
id
:
number
;
tagName
:
string
}[]
>
([
{
id
:
Math
.
random
(),
tagName
:
'tag1'
},
]);
const
handleOk
=
()
=>
{
form
.
validateFields
().
then
((
values
)
=>
{
RentManageAPI
.
addRentMode
({
...
values
}).
then
(({
code
})
=>
{
form
.
validateFields
().
then
((
values
:
any
)
=>
{
const
covertTagList
=
tagList
.
reduce
((
pre
:
string
[],
cur
)
=>
{
const
tagKeyItem
:
string
|
undefined
=
Object
.
keys
(
values
).
find
(
(
key
:
string
)
=>
key
===
cur
.
tagName
,
);
if
(
tagKeyItem
&&
values
[
tagKeyItem
])
{
pre
.
push
(
values
[
tagKeyItem
]);
}
return
pre
;
},
[]);
RentManageAPI
.
addRentMode
({
productTypeId
:
values
.
productTypeId
,
modeName
:
values
.
modeName
,
tag
:
covertTagList
.
length
?
covertTagList
.
join
(
','
)
:
undefined
,
brandInfoId
,
}).
then
(({
code
})
=>
{
if
(
code
===
'200'
)
{
message
.
success
(
'新增成功'
);
form
.
resetFields
();
onOk
();
}
...
...
@@ -32,20 +64,44 @@ const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({ open, onOk, onCanc
form
.
resetFields
();
onCancel
();
};
//获取类型列表
const
getRentTypeList
=
()
=>
{
RentManageAPI
.
getTypeList
({
pageNo
:
1
,
pageSize
:
99999
}).
then
(({
result
})
=>
{
setRentTypeList
(
result
.
list
||
[]);
});
//新增标签
const
addTagClick
=
()
=>
{
setTagList
([...
tagList
,
{
id
:
Math
.
random
(),
tagName
:
`tag
${
tagList
.
length
+
1
}
`
}]);
};
//删除标签
const
deleteTagClick
=
(
index
:
number
)
=>
{
form
.
setFieldValue
(
tagList
[
index
].
tagName
,
undefined
);
tagList
.
splice
(
index
,
1
);
setTagList
([...
tagList
]);
};
useEffect
(()
=>
{
getRentTypeList
();
},
[]);
if
(
currentRentMode
)
{
form
.
setFieldsValue
({
productTypeId
:
currentRentMode
.
productTypeId
,
modeName
:
currentRentMode
.
modeName
,
...
currentRentMode
.
tag
?.
split
(
','
).
reduce
((
pre
:
any
,
cur
,
currentIndex
)
=>
{
pre
[
'tag'
+
(
currentIndex
+
1
)]
=
cur
;
return
pre
;
},
{}),
});
setTagList
(
currentRentMode
.
tag
?.
split
(
','
)
.
map
((
_v
,
index
)
=>
({
id
:
Math
.
random
(),
tagName
:
`tag
${
index
+
1
}
`
}))
||
[],
);
}
},
[
currentRentMode
]);
return
(
<
Modal
open=
{
open
}
onOk=
{
handleOk
}
onCancel=
{
handleCancel
}
title=
'新增型号'
>
<
Form
form=
{
form
}
>
<
Modal
open=
{
open
}
onOk=
{
handleOk
}
onCancel=
{
handleCancel
}
title=
{
currentRentMode
?
'编辑型号'
:
'新增型号'
}
>
<
Form
form=
{
form
}
labelCol=
{
{
span
:
4
}
}
wrapperCol=
{
{
span
:
20
}
}
>
<
Form
.
Item
label=
'所属类别'
name=
'productTypeId'
...
...
@@ -66,6 +122,42 @@ const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({ open, onOk, onCanc
>
<
Input
placeholder=
'请输入型号名称'
maxLength=
{
30
}
/>
</
Form
.
Item
>
{
tagList
.
map
((
v
,
index
)
=>
(
<
Row
key=
{
v
.
id
}
>
<
Col
span=
{
20
}
>
<
Form
.
Item
label=
{
index
?
''
:
'标签'
}
labelCol=
{
{
span
:
5
}
}
wrapperCol=
{
{
span
:
19
,
offset
:
index
?
5
:
0
}
}
name=
{
v
.
tagName
}
>
<
Input
placeholder=
'请输入标签名称'
/>
</
Form
.
Item
>
</
Col
>
<
Col
span=
{
3
}
offset=
{
1
}
>
{
index
===
tagList
.
length
-
1
?
(
<
Button
type=
'primary'
icon=
{
<
PlusOutlined
/>
}
style=
{
{
marginRight
:
'5px'
}
}
onClick=
{
addTagClick
}
></
Button
>
)
:
(
''
)
}
{
index
?
(
<
Button
type=
'primary'
icon=
{
<
MinusOutlined
/>
}
onClick=
{
()
=>
deleteTagClick
(
index
)
}
></
Button
>
)
:
(
''
)
}
</
Col
>
</
Row
>
))
}
</
Form
>
</
Modal
>
);
...
...
src/pages/rentManage/rentMode/index.tsx
浏览文件 @
a2746629
import
SearchBox
,
{
searchColumns
as
searchColumnsType
}
from
'~/components/search-box'
;
import
{
Button
,
Table
}
from
'antd'
;
import
{
Button
,
Modal
,
Table
,
Tag
}
from
'antd'
;
import
{
PlusOutlined
}
from
'@ant-design/icons'
;
import
{
ColumnsType
}
from
'antd/es/table/InternalTable'
;
import
AddOrEditRentModeModal
from
'~/pages/rentManage/rentMode/components/addOrEditRentModeModal'
;
import
{
useEffect
,
useState
}
from
'react'
;
import
{
RentManageAPI
}
from
'~/api'
;
import
{
PaginationProps
}
from
'~/api/interface'
;
import
{
InterDataType
,
InterReqListType
,
PaginationProps
}
from
'~/api/interface'
;
import
{
useSearchParams
,
useNavigate
}
from
'react-router-dom'
;
import
{
getTypeListType
,
rentModeListType
}
from
'~/api/interface/rentManageType'
;
//类型类别返回类型
type
rentTypeListType
=
InterDataType
<
getTypeListType
>
[
'list'
];
//型号返回类型
type
modeListType
=
InterDataType
<
rentModeListType
>
[
'list'
];
//型号列表参数类型
type
modeListParametersType
=
InterReqListType
<
rentModeListType
>
;
const
RentMode
=
()
=>
{
const
tableColumns
:
ColumnsType
<
any
>
=
[
const
[
searchParams
]
=
useSearchParams
();
const
navigate
=
useNavigate
();
const
[
rentTypeList
,
setRentTypeList
]
=
useState
<
rentTypeListType
>
([]);
const
tableColumns
:
ColumnsType
<
modeListType
[
0
]
>
=
[
{
title
:
'型号名称'
,
align
:
'center'
,
dataIndex
:
'modeName'
,
},
{
title
:
'所属类型'
,
align
:
'center'
,
},
{
title
:
'所属品牌'
,
align
:
'center'
,
dataIndex
:
'productTypeId'
,
render
:
(
text
:
number
)
=>
rentTypeList
.
find
((
v
)
=>
v
.
id
===
text
)?.
name
||
''
,
},
{
title
:
'标签'
,
align
:
'center'
,
dataIndex
:
'tag'
,
render
:
(
text
:
string
)
=>
text
?.
split
(
','
).
map
((
v
,
index
)
=>
<
Tag
key=
{
index
}
>
{
v
}
</
Tag
>),
},
{
title
:
'操作'
,
align
:
'center'
,
width
:
'10%'
,
render
:
(
_
:
any
,
record
)
=>
(
<>
<
Button
type=
'link'
onClick=
{
()
=>
addOrEditRentModelClick
(
record
)
}
>
编辑
</
Button
>
<
Button
type=
'link'
onClick=
{
()
=>
deleteRentModelClick
(
record
)
}
>
删除
</
Button
>
</>
),
},
];
const
searchColumns
:
searchColumnsType
[]
=
[
{
name
:
''
,
label
:
'
设备
类型'
,
placeholder
:
'请选择
设备
类型'
,
name
:
'
productTypeId
'
,
label
:
'
所属
类型'
,
placeholder
:
'请选择
所属
类型'
,
type
:
'select'
,
options
:
[]
,
options
:
rentTypeList
.
map
((
v
)
=>
({
id
:
v
.
id
,
name
:
v
.
name
}))
,
},
];
const
[
brandInfoId
,
setBrandInfoId
]
=
useState
<
number
>
(
-
1
);
const
[
addOrEditRentModelModalShow
,
setAddOrEditRentModelModalShow
]
=
useState
<
boolean
>
(
false
);
const
[
pagination
,
setPagination
]
=
useState
<
PaginationProps
&
{
totalCount
:
number
}
>
({
pageNo
:
1
,
pageSize
:
10
,
totalCount
:
0
,
});
const
[
tableData
,
setTableData
]
=
useState
<
modeListType
>
([]);
const
[
query
,
setQuery
]
=
useState
<
modeListParametersType
>
();
const
[
currentRentMode
,
setCurrentRentMode
]
=
useState
<
modeListType
[
0
]
>
();
//新增,编辑型号弹窗
const
addOrEditRentModelClick
=
()
=>
{
const
addOrEditRentModelClick
=
(
record
?:
modeListType
[
0
])
=>
{
setCurrentRentMode
(
record
?
{
...
record
}
:
undefined
);
setAddOrEditRentModelModalShow
(
true
);
};
const
addOrEditRentModelModalCancel
=
()
=>
{
setAddOrEditRentModelModalShow
(
false
);
};
const
addOrEditRentModelModalOk
=
()
=>
{
setAddOrEditRentModelModalShow
(
true
);
setAddOrEditRentModelModalShow
(
false
);
getModeList
(
brandInfoId
,
query
);
};
//类型列表
const
getModeList
=
()
=>
{
//删除型号
const
deleteRentModelClick
=
(
record
:
modeListType
[
0
])
=>
{
Modal
.
confirm
({
title
:
'提示'
,
content
:
'确认删除该型号?'
,
onOk
:
()
=>
{},
});
};
//型号列表
const
getModeList
=
(
brandInfoId
:
number
,
query
?:
modeListParametersType
)
=>
{
RentManageAPI
.
getRentModeList
({
pageNo
:
pagination
.
pageNo
,
pageSize
:
pagination
.
pageSize
,
brandInfoId
,
...
query
,
}).
then
(({
result
})
=>
{
pagination
.
totalCount
=
result
.
totalCount
;
setTableData
(
result
.
list
||
[]);
setPagination
({
...
pagination
});
});
};
//获取类型列表
const
getRentTypeList
=
()
=>
{
RentManageAPI
.
getTypeList
({
pageNo
:
1
,
pageSize
:
99999
}).
then
(({
result
})
=>
{
setRentTypeList
(
result
.
list
||
[]);
searchColumns
[
0
].
options
=
(
result
.
list
||
[]).
map
((
v
)
=>
({
id
:
v
.
id
,
name
:
v
.
name
}));
});
};
//返回
const
backRoute
=
()
=>
{
navigate
(
-
1
);
};
//分页
const
paginationChange
=
(
pageNo
:
number
,
pageSize
:
number
)
=>
{
pagination
.
pageNo
=
pageNo
;
pagination
.
pageSize
=
pageSize
;
getModeList
(
brandInfoId
,
query
);
};
//筛选
const
searchSuccess
=
(
value
:
modeListParametersType
)
=>
{
pagination
.
pageSize
=
10
;
pagination
.
pageNo
=
1
;
setQuery
(
value
);
getModeList
(
brandInfoId
,
value
);
};
useEffect
(()
=>
{
getModeList
();
getRentTypeList
();
setBrandInfoId
(
Number
(
searchParams
.
get
(
'brandInfoId'
)));
getModeList
(
Number
(
searchParams
.
get
(
'brandInfoId'
)));
},
[]);
return
(
<
div
className=
'rent-model'
>
<
SearchBox
search=
{
searchColumns
}
child=
{
<
Button
type=
'primary'
icon=
{
<
PlusOutlined
/>
}
onClick=
{
addOrEditRentModelClick
}
>
新增型号
<>
<
span
style=
{
{
marginRight
:
'10px'
,
color
:
'#1677ff'
}
}
>
当前品牌:
{
searchParams
.
get
(
'brandName'
)
}
</
span
>
<
Button
type=
'primary'
icon=
{
<
PlusOutlined
/>
}
onClick=
{
()
=>
addOrEditRentModelClick
()
}
>
新增型号
</
Button
>
</>
}
otherChild=
{
<
Button
type=
'primary'
onClick=
{
backRoute
}
>
返回
</
Button
>
}
searchData=
{
searchSuccess
}
/>
<
Table
bordered
columns=
{
tableColumns
}
dataSource=
{
tableData
}
rowKey=
'id'
pagination=
{
{
total
:
pagination
.
totalCount
,
pageSize
:
pagination
.
pageSize
,
current
:
pagination
.
pageNo
,
showSizeChanger
:
true
,
showQuickJumper
:
true
,
onChange
:
(
page
:
number
,
pageSize
:
number
)
=>
paginationChange
(
page
,
pageSize
),
showTotal
:
(
total
,
range
)
=>
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`
,
}
}
/>
<
Table
bordered
columns=
{
tableColumns
}
/>
<
AddOrEditRentModeModal
open=
{
addOrEditRentModelModalShow
}
onCancel=
{
addOrEditRentModelModalCancel
}
onOk=
{
addOrEditRentModelModalOk
}
brandInfoId=
{
brandInfoId
}
rentTypeList=
{
rentTypeList
}
currentRentMode=
{
currentRentMode
}
/>
</
div
>
);
...
...
src/router/router.tsx
浏览文件 @
a2746629
...
...
@@ -98,9 +98,7 @@ const ServiceIntroduceView = React.lazy(
);
//服务介绍
const
RentListView
=
React
.
lazy
(()
=>
import
(
'~/pages/rentManage/rentGoods/rentList'
));
//租赁列表
const
RentAddOrEditOrDetailView
=
React
.
lazy
(
()
=>
import
(
'~/pages/rentManage/rentGoods/rentAddOrEditOrDetail'
),
);
//租赁新增、编辑、详情
const
RentAddOrEditView
=
React
.
lazy
(()
=>
import
(
'~/pages/rentManage/rentGoods/rentAddOrEdit'
));
//租赁新增、编辑、详情
const
RentTypeView
=
React
.
lazy
(()
=>
import
(
'~/pages/rentManage/rentType'
));
//租赁-类型管理
const
RentMakeView
=
React
.
lazy
(()
=>
import
(
'~/pages/rentManage/rentMake'
));
//租赁-品牌管理
const
RentModeView
=
React
.
lazy
(()
=>
import
(
'~/pages/rentManage/rentMode'
));
//租赁-型号管理
...
...
@@ -716,7 +714,7 @@ export const routerList: Array<RouteObjectType> = [
},
{
path
:
'/rentManage/rentGoods/add'
,
element
:
withLoadingComponent
(<
RentAddOrEdit
OrDetail
View
/>),
element
:
withLoadingComponent
(<
RentAddOrEditView
/>),
errorElement
:
<
ErrorPage
/>,
meta
:
{
id
:
10135
,
...
...
@@ -727,7 +725,7 @@ export const routerList: Array<RouteObjectType> = [
},
{
path
:
'/rentManage/rentGoods/edit'
,
element
:
withLoadingComponent
(<
RentAddOrEdit
OrDetail
View
/>),
element
:
withLoadingComponent
(<
RentAddOrEditView
/>),
errorElement
:
<
ErrorPage
/>,
meta
:
{
id
:
10136
,
...
...
@@ -736,17 +734,17 @@ export const routerList: Array<RouteObjectType> = [
hidden
:
true
,
},
},
{
path
:
'/rentManage/rentGoods/detail'
,
element
:
withLoadingComponent
(<
RentAddOrEditOrDetail
View
/>),
errorElement
:
<
ErrorPage
/>,
meta
:
{
id
:
10136
,
icon
:
<
SmileOutlined
/>,
title
:
'租赁商品详情'
,
hidden
:
true
,
},
},
//
{
//
path: '/rentManage/rentGoods/detail',
// element: withLoadingComponent(<RentAddOrEdit
View />),
//
errorElement: <ErrorPage />,
//
meta: {
//
id: 10136,
//
icon: <SmileOutlined />,
//
title: '租赁商品详情',
//
hidden: true,
//
},
//
},
{
path
:
'/rentManage/rentType'
,
element
:
withLoadingComponent
(<
RentTypeView
/>),
...
...
@@ -776,8 +774,9 @@ export const routerList: Array<RouteObjectType> = [
meta
:
{
id
:
10139
,
icon
:
<
SmileOutlined
/>,
title
:
'
型号管理
'
,
title
:
'
品牌管理/型号
'
,
develop
:
true
,
hidden
:
true
,
},
},
],
...
...
@@ -792,20 +791,9 @@ export const routerList: Array<RouteObjectType> = [
title
:
'分类管理'
,
},
children
:
[
{
path
:
'/categoryManage/jobServicesCategory/1'
,
element
:
withLoadingComponent
(<
CategoryManage
/>),
errorElement
:
<
ErrorPage
/>,
meta
:
{
id
:
1210
,
title
:
'作业服务分类'
,
icon
:
<
SendOutlined
/>,
},
},
// 作业服务分类(新)
// {
// path: '/categoryManage/
serviceCategoryList
',
// element: withLoadingComponent(<
ServiceCategoryListView
/>),
// path: '/categoryManage/
jobServicesCategory/1
',
// element: withLoadingComponent(<
CategoryManage
/>),
// errorElement: <ErrorPage />,
// meta: {
// id: 1210,
...
...
@@ -813,6 +801,17 @@ export const routerList: Array<RouteObjectType> = [
// icon: <SendOutlined />,
// },
// },
// 作业服务分类(新)
{
path
:
'/categoryManage/serviceCategoryList'
,
element
:
withLoadingComponent
(<
ServiceCategoryListView
/>),
errorElement
:
<
ErrorPage
/>,
meta
:
{
id
:
1210
,
title
:
'作业服务分类'
,
icon
:
<
SendOutlined
/>,
},
},
{
path
:
'/categoryManage/jobServicesCategory/2'
,
element
:
withLoadingComponent
(<
CategoryManage
/>),
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论