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 ( - <> - - - ) + // render: (text, record, index) => { + // return ( + // <> + // + // + // ) - }, + // }, }, ]; @@ -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 = ( +
+ {loading ? : } +
+ 图片上传 +
+
+ ); useEffect(() => { init() @@ -263,7 +328,7 @@ function Appointment() { { setDetailVisible(false); @@ -272,68 +337,69 @@ function Appointment() { destroyOnClose >
-
- { setAddFormData({ name: e.target.value }) }} - /> -
-
- { setAddFormData({ code: e.target.value }) }} - /> -
-
- { setAddFormData({ count: e.target.value }) }} - /> -
-
- { setAddFormData({ address: e.target.value }) }} - /> -
-
- { setAddFormData({ site_type: e }) }} - /> -
-
- { setAddFormData({ area: e }) }} - /> - {/* +
+ { setAddFormData({ name: e.target.value }) }} + /> +
+
+ { setAddFormData({ code: e.target.value }) }} + /> +
+
+ { setAddFormData({ count: e.target.value }) }} + /> +
+
+ { setAddFormData({ address: e.target.value }) }} + /> +
+
+ { setAddFormData({ site_type: e }) }} + /> +
+
+ { setAddFormData({ area: e }) }} + /> + {/* */} +
+
+ { setAddFormData({ operator: e }) }} + /> +
-
- { setAddFormData({ operator: e }) }} - /> +
+ + {addFormData.img ? ( +
+ +
x
+
+ ) : ( + uploadButton + )} +