feat():充电站管理新增图片上传

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;
+        }
+      }
     }
   }
 }

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>