From ba813ceaf888478c2d94538c2faa5074ddf8518b Mon Sep 17 00:00:00 2001
From: zhugy <zhugy@yisa.com>
Date: Wed, 17 Jan 2024 17:50:13 +0800
Subject: [PATCH] =?UTF-8?q?feat():=E5=85=85=E7=94=B5=E7=AB=99=E7=AE=A1?=
=?UTF-8?q?=E7=90=86=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/NewEnergy/ChargeStationMgm/index.scss | 55 ++--
src/pages/NewEnergy/ChargeStationMgm/loadable.jsx | 292 ++++++++++++++--------
2 files changed, 231 insertions(+), 116 deletions(-)
diff --git a/src/pages/NewEnergy/ChargeStationMgm/index.scss b/src/pages/NewEnergy/ChargeStationMgm/index.scss
index 3ac3e8d..8b110b5 100644
--- a/src/pages/NewEnergy/ChargeStationMgm/index.scss
+++ b/src/pages/NewEnergy/ChargeStationMgm/index.scss
@@ -1,21 +1,48 @@
.add-station-modal {
.add-station-body {
display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .row {
- width: 100%;
- margin: 10px 0;
+ justify-content: space-between;
+ .left,.right {
+ width: calc(50% - 10px);
+ .row {
+ width: 100%;
+ margin: 10px 0;
+ }
+ .cc-form-tree {
+ margin-bottom: 0;
+ }
+ .cc-form-content,.form-select-single-content {
+ flex: auto;
+ }
+ .cc-form-name,.form-select-single-name {
+ width: 100px;
+ }
+ .ant-upload,.ant-upload-picture-card-wrapper {
+ width: 100%;
+ height: 100%;
+ }
}
- .cc-form-tree {
- margin-bottom: 0;
- }
- .cc-form-content,.form-select-single-content {
- flex: auto;
- }
- .cc-form-name,.form-select-single-name {
- width: 100px;
+ .right {
+ .img-box {
+ position: relative;
+ height: 100%;
+ .del {
+ position: absolute;
+ top: 3px;
+ right: 3px;
+ width: 30px;
+ height: 30px;
+ text-align: center;
+ line-height: 22px;
+ font-size: 18px;
+ border-radius: 50%;
+ border: 1px solid red;
+ background: #dd1e1e47;
+ color: #fff;
+ cursor: pointer;
+ z-index: 999;
+ }
+ }
}
}
}
\ No newline at end of file
diff --git a/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx b/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
index e77bb1f..30737ce 100644
--- a/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
@@ -3,11 +3,12 @@ import {
message,
Modal,
Button,
- Cascader
+ Upload,
} from "antd";
import ajax from "@/services";
import { useSessionStorageState, useSetState } from "ahooks"
-import { TableModule, FormInput, FormSelect, FormTreeSelectNew } from "@/components";
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { TableModule, FormInput, FormSelect, FormTreeSelectNew, ImgError } from "@/components";
import "./index.scss";
@@ -20,8 +21,6 @@ function Appointment() {
const [total, setTotal] = useState(0);
// 详情数据
const [detailData, setDetailData] = useState({});
- // 站点状态下拉
- const [siteList, setSiteList] = useState([]);
// 区域下拉
const [areaList, setAreaList] = useState([]);
//商户名称下拉
@@ -34,10 +33,14 @@ function Appointment() {
site_type: "",
area: "",
operator: "",
- count: ""
+ count: "",
+ img: ""
}
const [addFormData, setAddFormData] = useSetState(initAdd);
+ // 搜索参数
const [formData, setFormData] = useSetState({});
+ // 图片上传load
+ const [loading, setLoading] = useState(false);
// 初始搜索条件
const initFormData = {
operator: "0",
@@ -100,16 +103,16 @@ function Appointment() {
align: "center",
fixed: "right",
width: 100,
- render: (text, record, index) => {
- return (
- <>
- <Button type="primary" onClick={() => openModal(index, record)}>
- 详情
- </Button>
- </>
- )
+ // render: (text, record, index) => {
+ // return (
+ // <>
+ // <Button type="primary" onClick={() => openModal(index, record)}>
+ // 详情
+ // </Button>
+ // </>
+ // )
- },
+ // },
},
];
@@ -133,7 +136,7 @@ function Appointment() {
label: "站点状态",
options: [
{ value: "0", label: "全部" },
- ...siteList
+ ...sysConfig?.stationType || []
],
defaultValue: "0",
placeholder: "请选择站点状态",
@@ -148,24 +151,9 @@ function Appointment() {
];
const init = () => {
- getSiteStatus()
getAreaList()
getAllOperator()
}
- // 获取站点状态下拉
- const getSiteStatus = () => {
- ajax.getSiteStatus().then((res) => {
- const { status, data } = res
- if (status === 20000) {
- if (data && data.length) {
- data.shift()
- setSiteList(data);
- }
- } else {
- message.error(res.message)
- }
- });
- }
// 获取区域下拉
const getAreaList = () => {
ajax.getAreaTree().then((res) => {
@@ -216,10 +204,42 @@ function Appointment() {
// 新增
const handelAdd = () => {
setAddFormData(initAdd)
+ setLoading(false)
setDetailVisible(true)
}
-
const handelOk = () => {
+ if(!addFormData.name) {
+ message.warn("请输入充电站名称")
+ return
+ }
+ if(!addFormData.code) {
+ message.warn("请输入充电站编码")
+ return
+ }
+ if(!addFormData.count) {
+ message.warn("请输入车位数量")
+ return
+ }
+ if(!addFormData.address) {
+ message.warn("请输入详细地址")
+ return
+ }
+ if(!addFormData.site_type) {
+ message.warn("请选择站点类型")
+ return
+ }
+ if(!addFormData.area) {
+ message.warn("请选择所属区域")
+ return
+ }
+ if(!addFormData.operator) {
+ message.warn("请选择商户名称")
+ return
+ }
+ if(!addFormData.img) {
+ message.warn("请上传充电照片")
+ return
+ }
ajax.addStation(addFormData).then((res) => {
if (res.status === 20000) {
message.success("新增成功")
@@ -231,6 +251,51 @@ function Appointment() {
}
});
}
+ // 图片上传
+ const beforeUpload = (file) => {
+ const picFormat = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp']
+ const isJpgOrPng = picFormat.includes(file.type)
+ if (!isJpgOrPng) {
+ message.error('图片上传格式只支持 jpeg，png，jpg，bmp!');
+ }
+ // const isLt10M = file.size / 1024 / 1024 < 10;
+ // if (!isLt10M) {
+ // message.error('图片必须小于 10MB!');
+ // }
+ return isJpgOrPng;
+ };
+ const handleChange = (info) => {
+ if (info.file.status === 'uploading') {
+ setLoading(true)
+ return;
+ }
+ if (info.file.status === 'done') {
+ let res = info.file.response
+ setLoading(false)
+ if (res.status === 20000) {
+ setAddFormData({ img: res.data })
+ } else {
+ message.error(res.message)
+ }
+ }
+ };
+ const handelDel = (e) => {
+ e.preventDefault()
+ setAddFormData({ img: "" })
+ setLoading(false)
+ }
+ const uploadButton = (
+ <div>
+ {loading ? <LoadingOutlined /> : <PlusOutlined />}
+ <div
+ style={{
+ marginTop: 8,
+ }}
+ >
+ 图片上传
+ </div>
+ </div>
+ );
useEffect(() => {
init()
@@ -263,7 +328,7 @@ function Appointment() {
<Modal
title="添加充电站"
open={detailVisible}
- width={500}
+ width={800}
className="add-station-modal"
onCancel={() => {
setDetailVisible(false);
@@ -272,68 +337,69 @@ function Appointment() {
destroyOnClose
>
<div className="add-station-body">
- <div className="row">
- <FormInput
- yisaLabel="充电站名称"
- placeholder="请输入充电站名称"
- isShowAfterIcon={false}
- value={addFormData.name}
- onChange={e => { setAddFormData({ name: e.target.value }) }}
- />
- </div>
- <div className="row">
- <FormInput
- yisaLabel="充电站编码"
- placeholder="请输入充电站编码"
- isShowAfterIcon={false}
- value={addFormData.code}
- onChange={e => { setAddFormData({ code: e.target.value }) }}
- />
- </div>
- <div className="row">
- <FormInput
- yisaLabel="车位数量"
- placeholder="请输入车位数量"
- isShowAfterIcon={false}
- value={addFormData.count}
- onChange={e => { setAddFormData({ count: e.target.value }) }}
- />
- </div>
- <div className="row">
- <FormInput
- yisaLabel="详细地址"
- placeholder="请输入详细地址"
- isShowAfterIcon={false}
- value={addFormData.address}
- onChange={e => { setAddFormData({ address: e.target.value }) }}
- />
- </div>
- <div className="row">
- <FormSelect
- yisaLabel="站点类型"
- placeholder="请选择站点类型"
- yisaData={siteList}
- value={addFormData.site_type}
- onChange={e => { setAddFormData({ site_type: e }) }}
- />
- </div>
- <div className="row">
- <FormTreeSelectNew
- yisaLabel="所属区域"
- labelPosition="left"
- placeholder="请选择所属区域"
- value={addFormData.area || null}
- fieldNames={{
- label: "name",
- value: "id",
- children: "children",
- }}
- treeData={areaList}
- multiple={false}
- isBayonet={true}
- onChange={(e) => { setAddFormData({ area: e }) }}
- />
- {/* <Cascader
+ <div className="left">
+ <div className="row">
+ <FormInput
+ yisaLabel="充电站名称"
+ placeholder="请输入充电站名称"
+ isShowAfterIcon={false}
+ value={addFormData.name}
+ onChange={e => { setAddFormData({ name: e.target.value }) }}
+ />
+ </div>
+ <div className="row">
+ <FormInput
+ yisaLabel="充电站编码"
+ placeholder="请输入充电站编码"
+ isShowAfterIcon={false}
+ value={addFormData.code}
+ onChange={e => { setAddFormData({ code: e.target.value }) }}
+ />
+ </div>
+ <div className="row">
+ <FormInput
+ yisaLabel="车位数量"
+ placeholder="请输入车位数量"
+ isShowAfterIcon={false}
+ value={addFormData.count}
+ onChange={e => { setAddFormData({ count: e.target.value }) }}
+ />
+ </div>
+ <div className="row">
+ <FormInput
+ yisaLabel="详细地址"
+ placeholder="请输入详细地址"
+ isShowAfterIcon={false}
+ value={addFormData.address}
+ onChange={e => { setAddFormData({ address: e.target.value }) }}
+ />
+ </div>
+ <div className="row">
+ <FormSelect
+ yisaLabel="站点类型"
+ placeholder="请选择站点类型"
+ yisaData={sysConfig?.stationType || []}
+ value={addFormData.site_type}
+ onChange={e => { setAddFormData({ site_type: e }) }}
+ />
+ </div>
+ <div className="row">
+ <FormTreeSelectNew
+ yisaLabel="所属区域"
+ labelPosition="left"
+ placeholder="请选择所属区域"
+ value={addFormData.area || null}
+ fieldNames={{
+ label: "name",
+ value: "id",
+ children: "children",
+ }}
+ treeData={areaList}
+ multiple={false}
+ isBayonet={true}
+ onChange={(e) => { setAddFormData({ area: e }) }}
+ />
+ {/* <Cascader
options={areaList}
defaultValue={addFormData.area}
placeholder="请选择区域"
@@ -346,15 +412,37 @@ function Appointment() {
}}
onChange={cascaderChange}
/> */}
+ </div>
+ <div className="row">
+ <FormSelect
+ yisaLabel="商户名称"
+ placeholder="请选择商户名称"
+ yisaData={operatorList}
+ value={addFormData.operator}
+ onChange={e => { setAddFormData({ operator: e }) }}
+ />
+ </div>
</div>
- <div className="row">
- <FormSelect
- yisaLabel="商户名称"
- placeholder="请选择商户名称"
- yisaData={operatorList}
- value={addFormData.operator}
- onChange={e => { setAddFormData({ operator: e }) }}
- />
+ <div className="right">
+ <Upload
+ name="file"
+ listType="picture-card"
+ className="avatar-uploader"
+ showUploadList={false}
+ action={"http://10.10.128.65:3001/mock/11/api/com/common/file_upload"}
+ // action={sysConfig.apiHost + "api/com/common/file_upload"}
+ beforeUpload={beforeUpload}
+ onChange={handleChange}
+ >
+ {addFormData.img ? (
+ <div className="img-box">
+ <ImgError src={addFormData.img} />
+ <div className="del" onClick={handelDel}>x</div>
+ </div>
+ ) : (
+ uploadButton
+ )}
+ </Upload>
</div>
</div>
</Modal>