附件下载

Signed-off-by: cellee <893264950@qq.com>

package.json

@@ -45,19 +45,21 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "js-export-excel": "^1.1.2",
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^5.0.16",
     "@ant-design/pro-table": "2.3.4",
     "@bundled-es-modules/pdfjs-dist": "^2.2.228-alpha1",
-    "antd": "4.3.3",
+    "antd": "4.7.3",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
+    "js-export-excel": "^1.1.2",
+    "js-file-download": "^0.4.12",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",
     "omit.js": "^1.0.2",
     "path-to-regexp": "2.4.0",
     "pdfjs": "^2.3.9",
-    "qs": "^6.9.0",
+    "qs": "^6.9.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",

src/components/TitleSearch/TitleSearch.tsx

@@ -123,7 +123,7 @@ const TitleSearch = (props: any) => {
           {/* 小区列表的管理员姓名搜索 */}
           {username != null ? (
             <Col key={'username_' + username[0]}>
-              <Form.Item name={username[0]} label="Username">
+              <Form.Item name={username[0]}>
                 <Input placeholder={username[1]} allowClear />
               </Form.Item>
             </Col>

src/models/CommunityManagement/CellList.ts

@@ -14,8 +14,10 @@ export default {
     curString: {},
     Result: null,
     DataSave: null,
-    detailData: {},
-    imgUrl: '',
+    detailData: {}, // 详情
+    imgUrl: null, // 预览地址
+    village: {}, // 小区列表
+    overCom: null,
   },
 
   reducers: {
@@ -26,6 +28,7 @@ export default {
       return { ...state, Result };
     },
     returnDataSave(state, { DataSave }) {
+      console.log(DataSave);
       return { ...state, DataSave };
     },
     returnDataSaveDetail(state, { detailData }) {
@@ -34,20 +37,30 @@ export default {
     returnImgurl(state, { imgUrl }) {
       return { ...state, imgUrl };
     },
+    returnVillage(state, { village }) {
+      return { ...state, village };
+    },
+    overComList(state, { overCom }) {
+      return { ...state, overCom };
+    },
   },
 
   effects: {
     //标准请求
     *RA({ playload }, { call, put }) {
       const resp = yield call(service.RA, playload);
-      console.log(resp);
       // if (resp.code == 500||resp.error_code!="0000") {
       // }
       if (resp.code == 500 && resp.error_code != '0000') {
         getObjectInfo(playload.body);
         printf(playload, resp);
         message.error(`${resp.code}:${resp.msg}`);
+      } else if (resp.error_code == '0001') {
+        getObjectInfo(playload.body);
+        printf(playload, resp);
+        message.error(`${resp.error_code}:${resp.error_msg}`);
       } else {
+        console.log('成功？');
         switch (playload.index) {
           case 24:
             {
@@ -55,28 +68,54 @@ export default {
               yield put({ type: 'returnPage', Data });
             }
             break;
-          case 29:
+          case 29: // 小区编辑
             {
               let Result = resp;
               yield put({ type: 'returnResult', Result });
-              message.success(`小区信息保存成功！`);
-              history.push('/CommunityManagement/CellList');
+
+              // message.success(`小区信息保存成功！`);
+              // history.push('/CommunityManagement/CellList');
             }
             break;
-          case 32:
+          case 32: // 获取小区详情
             {
               let detailData = resp.data;
               yield put({ type: 'returnDataSaveDetail', detailData });
             }
             break;
-          case 47:
+          case 47: // 图片
             {
-              let imgUrl = resp.data;
+              let imgUrl = {
+                url: resp.data,
+                name: playload.body.fileName,
+              };
               yield put({ type: 'returnImgurl', imgUrl });
             }
             break;
+          case 48: {
+            // 小区列表
+            let village = resp.data;
+            yield put({ type: 'returnVillage', village });
+            break;
           }
+          case 49: {
+            // 关闭小区
+            let overCom = resp.data;
+            yield put({ type: 'overComList', overCom });
+            break;
           }
+        }
+      }
+    },
+
+    *urlRemove({}, { put }) {
+      let nus = null;
+      yield put({ type: 'returnImgurl', nus });
+    },
+
+    *comRemove({}, { put }) {
+      let nus = null;
+      yield put({ type: 'overComList', nus });
     },
 
     *ResultClear({}, { put }) {

src/pages/CommunityManagement/CellList/Adds.tsx

@@ -4,8 +4,8 @@ import { LeftOutlined, EditOutlined, UploadOutlined, LinkOutlined } from '@ant-d
 import { Form, Input, Button, TimePicker, Checkbox, Upload, message, Spin } from 'antd';
 // 样式
 import './celllist.less';
-import { RA } from '@/utils/method';
-
+import { RA, ResultClear } from '@/utils/method';
+import { history } from 'umi';
 import { village } from '@/utils/tip';
 
 import moment from 'moment';
@@ -14,7 +14,9 @@ import moment from 'moment';
 interface objc {}
 
 const Adds = (props: any) => {
-  const { Data, dispatch, loading } = props;
+  const { Data, dispatch, loading, Result } = props;
+
+  console.log(loading);
 
   const [form] = Form.useForm();
 
@@ -40,6 +42,23 @@ const Adds = (props: any) => {
   const [codeStrat, setcodeStrat] = useState(false);
   const [tipMain, setTipMain] = useState('');
 
+  useEffect(() => {
+    console.log(Result);
+    if (Result != null) {
+      console.log('页面结果');
+      console.log(Result);
+      if (Result.error_code == undefined) {
+        console.log('服务器有问题');
+        message.error('服务器有问题，请求失败', 5);
+      }
+      if (Result.error_code == '0000') {
+        message.success(`Community Saved Successfully`);
+        history.go(-1);
+      }
+      ResultClear(module, dispatch);
+    }
+  }, [Result]);
+
   // 赋值
   useEffect(() => {
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
@@ -81,7 +100,7 @@ const Adds = (props: any) => {
       // 小区名 -- 上传需要
       setCodeName(Data.residentialName);
       setcodeStrat(true);
-      setTipMain('已有绑定内容，不可做修改！');
+      setTipMain('Binding content already exists, cannot be modified');
     } else {
       console.log('新建');
     }
@@ -161,9 +180,9 @@ const Adds = (props: any) => {
   // 上传提示
   function uploadMsg(info: any) {
     if (info.file.status === 'done') {
-      message.success(`${info.file.name} file uploaded successfully`);
+      message.success(`${info.file.name} File Uploaded Successfully`);
     } else if (info.file.status === 'error') {
-      message.error(`${info.file.name} file upload failed.`);
+      message.error(`${info.file.name} File Upload Failed.`);
     }
   }
 
@@ -213,7 +232,7 @@ const Adds = (props: any) => {
       obj.residentialHotlineName = undeFi(values.help.residentialHotlineName);
       obj.residentialHotline = undeFi(values.help.residentialHotline);
       // 编辑的时候 为空 判断
-      if (values.help.time !== '') {
+      if (values.help.time !== '' && values.help.time) {
         obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
         obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm');
       } else {
@@ -238,7 +257,7 @@ const Adds = (props: any) => {
   // 返回
   const goToReturn = () => {
     // console.log(fileList)
-    history.back();
+    history.go(-1);
   };
 
   // 小区名输入监听ant
@@ -358,7 +377,7 @@ const Adds = (props: any) => {
                   <LinkOutlined color="#409EFF" />
                   {loubaUpload.length > 0 ? loubaUpload[0].name : ''}
                 </p>
-                <span>支持文件：.pdf,.jpg, .png</span>
+                <span>支持文件：.doc,.docx,.jpg,.png,.pdf</span>
               </div>
             </Form.Item>
 
@@ -371,12 +390,12 @@ const Adds = (props: any) => {
                   <LinkOutlined color="#409EFF" />
                   {guideUpload.length > 0 ? guideUpload[0].name : ''}
                 </p>
-                <span>支持文件：.pdf,.jpg, .png</span>
+                <span>支持文件：.doc,.docx,.jpg,.png,.pdf</span>
               </div>
             </Form.Item>
 
             <Form.Item
-              label="Period of Service"
+              label="Period Of Service"
               name="lifeServiceFile"
               style={{ marginBottom: '0' }}
             >
@@ -388,13 +407,13 @@ const Adds = (props: any) => {
                   <LinkOutlined color="#409EFF" />
                   {periodUpload.length > 0 ? periodUpload[0].name : ''}
                 </p>
-                <span>支持文件：.pdf,.jpg, .png</span>
+                <span>支持文件：.doc,.docx,.jpg,.png,.pdf</span>
               </div>
             </Form.Item>
 
             <hr />
             {/* 帮助中心 */}
-            <Form.Item label="Help" name="help">
+            <Form.Item label="Help Center" name="help">
               <Input.Group compact>
                 <Form.Item name={['help', 'residentialHotlineName']} noStyle>
                   <Input
@@ -413,9 +432,11 @@ const Adds = (props: any) => {
               </Input.Group>
             </Form.Item>
 
-            <Form.Item label=" " colon={false}>
+            <hr />
+            {/* 提交 */}
+            <Form.Item label="" colon={false}>
               <Button type="primary" htmlType="submit" loading={loading}>
-                Conserve
+                Submit
               </Button>
             </Form.Item>
           </Form>
@@ -427,8 +448,10 @@ const Adds = (props: any) => {
 
 // export default Adds;
 function map(state: any) {
+  console.log(state);
   const Data = state.CellList.DataSave;
   const loading = state.loading.models.CellList;
-  return { Data, loading };
+  const { Result } = state.CellList;
+  return { Data, loading, Result };
 }
 export default connect(map)(Adds);

src/pages/CommunityManagement/CellList/CellList.tsx

 import React, { useState, useEffect } from 'react';
-import { Space, Button, Form, message } from 'antd';
+import { Space, Button, Form, message, Pagination } from 'antd';
 import { connect, history } from 'umi';
 
 // 图标
@@ -9,11 +9,12 @@ import ProTable from '@ant-design/pro-table';
 import TitleSearch from '@/components/TitleSearch/TitleSearch';
 import { RA, SA } from '@/utils/method';
 import { objectColumns } from '@/utils/string';
-const module = 'CellList';
+import { Prompt } from 'react-router';
 
+const module = 'CellList';
 import './celllist.less';
 
-const CellList = (props: any) => {
+const CellLists = (props: any) => {
   const columns = objectColumns([
     ['Community', 'residentialName'],
     ['Administrator', 'residentialManagerUserName'],
@@ -42,27 +43,26 @@ const CellList = (props: any) => {
     ],
   ]);
 
-  const { dispatch, Data, loading, curString } = props;
-  console.log(Data);
-
-  // useEffect(() => {
-  //   let msg = {
-  //     residentialManagerUserName: '',
-  //     communityNameList: [],
-  //     pageNum: 1,
-  //   };
-  //   RA(48, msg, module, dispatch);
-  // }, [1]);
+  const { dispatch, Data, loading, curString, village } = props;
+  // console.log(Data);
 
+  // 先请求一次 拿到所有小区列表
   useEffect(() => {
     RA(24, { communityName: '' }, module, dispatch);
   }, [1]);
 
+  // 监听data请求完毕再请求一次
   useEffect(() => {
     if (Data != null) {
-      //console.log(columnsVal)
+      let msg = {
+        residentialManagerUserName: '',
+        communityNameList: Data.communityList,
+        pageNum: 1,
+      };
+      RA(48, msg, module, dispatch);
     }
   }, [Data]);
+
   const CallbackSearch = (values: any) => {
     RA(24, { communityName: values }, module, dispatch);
   };
@@ -105,14 +105,28 @@ const CellList = (props: any) => {
     //   message.error('请输入管理员姓名或选择小区进行搜索！');
     // }
   };
+
+  // 页面切换
+  const paginationHandler = (page: number, pageSize?: number) => {
+    dispatch({
+      type: 'ContractModel/getList',
+      payload: {
+        index: 19,
+        page: {
+          pageNum: page,
+        },
+      },
+    });
+  };
+
   return (
     <div>
-      {Data != null ? (
+      {village != null ? (
         <>
           {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
           <div className="contop">
             <TitleSearch
-              username={['label', '请输入管理员姓名']}
+              username={['label', 'Please enter Administrator name']}
               community={'communityName'}
               checklist={curString.communityNameList != null ? curString.communityNameList : null}
               onSubmit={CallBackTitleSearch}
@@ -122,7 +136,7 @@ const CellList = (props: any) => {
             // request={requestHeadl}
             pagination={false} // 隐藏默认分页
             rowKey={'id'}
-            dataSource={Data.rows}
+            dataSource={village.list}
             columns={columns}
             search={false}
             loading={loading}
@@ -143,20 +157,27 @@ const CellList = (props: any) => {
             headerTitle="Community List"
             // pagination={{ defaultCurrent: 1, total: Data.totalRow }}
           />
-          {/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
-            dataSource={Data.rows}
-            columns={columns}
-            pagination={{ defaultCurrent: 1, total: Data.total}} />   */}
+          <div className="pages">
+            {/* <Pagination
+              current={village.page}
+              total={village.totalRow}
+              onChange={paginationHandler}
+              // onShowSizeChange={pageSizeHandler}
+              // current={users.meta.page}
+              // pageSize={users.meta.per_page}
+            /> */}
+          </div>
         </>
-      ) : null}
+      ) : (
+        '暂无数据'
+      )}
     </div>
   );
 };
 
 function map(state: any) {
-  console.log(state);
   const loading = state.loading.models.CellList;
-  const { Data, curString } = state[module];
-  return { Data, loading, curString };
+  const { Data, curString, village } = state[module];
+  return { Data, loading, curString, village };
 }
-export default connect(map)(CellList);
+export default connect(map)(CellLists);

src/pages/CommunityManagement/CellList/Details.tsx

@@ -8,6 +8,7 @@ import {
   ApiTwoTone,
 } from '@ant-design/icons';
 import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider, Avatar } from 'antd';
+import { history } from 'umi';
 // 样式
 import './celllist.less';
 import { RA } from '@/utils/method';
@@ -17,12 +18,15 @@ import hfor from '@/assets/h5.png';
 
 import moment from 'moment';
 
+import Axios from 'axios';
+import fileDownload from 'js-file-download';
+
 // 接口申明
 
 const Detail = (props: any) => {
   const module = 'CellList';
 
-  const { detailData, DataSave, dispatch, loading, imgUrl } = props;
+  const { detailData, DataSave, dispatch, loading, imgUrl, overCom } = props;
 
   useEffect(() => {
     if (DataSave) {
@@ -33,6 +37,24 @@ const Detail = (props: any) => {
     }
   }, [1]);
 
+  useEffect(() => {
+    if (imgUrl != null) {
+      // console.log('变化了');  开始下载
+      openDows(imgUrl.url, imgUrl.name);
+    }
+  }, [imgUrl]);
+
+  useEffect(() => {
+    if (overCom != null) {
+      message.success(`Community Deleted Successfully`);
+      history.push('/CommunityManagement/CellList');
+      // 然后在清空删除成功数据
+      dispatch({
+        type: module + '/comRemove',
+      });
+    }
+  }, [overCom]);
+
   //物业费选择
   const plainOptions = [
     { label: '线上缴费', value: '0', disabled: true },
@@ -44,11 +66,19 @@ const Detail = (props: any) => {
   // 返回
   const goToReturn = () => {
     // console.log(fileList)
-    history.back();
+    history.go(-1);
   };
 
   // 复制
-  const copy = () => {};
+  const copy = (msg: string, tip: string = 'Copy Success') => {
+    var aux = document.createElement('input');
+    aux.setAttribute('value', msg);
+    document.body.appendChild(aux);
+    aux.select();
+    document.execCommand('copy');
+    document.body.removeChild(aux);
+    message.success(tip);
+  };
 
   // 打开弹窗
   const openModel = () => {
@@ -60,26 +90,34 @@ const Detail = (props: any) => {
   };
   // 关闭小区
   const handleOk = () => {
-    setModelFee(false);
-    message.error('后台接口新增中！');
-    // message.success('您已关闭小区！');
-    // history.back();
+    // 删除小区
+    RA(49, { id: DataSave.id }, module, dispatch);
   };
 
   // 打开附件下载
   async function opens(ans: string) {
-    message.warning('接口处理中');
-    // let msg = {
-    //   // userToken: '',
-    //   // type: ans.substr(ans.lastIndexOf('.') + 1),
-    //   type: 'tosCommunityFileService',
-    //   fileName: ans,
-    //   extends: detailData.rows.residentialName,
-    // };
-    // let s = await RA(47, msg, module, dispatch);
-    // console.log(s);
+    // message.warning('接口处理中');
+    let msg = {
+      // userToken: '',
+      // type: ans.substr(ans.lastIndexOf('.') + 1),
+      type: 'tosCommunityFileService',
+      fileName: ans,
+      extends: detailData.rows.residentialName,
+    };
+    RA(47, msg, module, dispatch);
+
+    // 监听文件的变化进行下载
   }
 
+  // 下载文件到本地
+  const openDows = (url: any, name: any) => {
+    Axios.get(url, {
+      responseType: 'blob',
+    }).then((res) => {
+      fileDownload(res.data, name);
+    });
+  };
+
   return (
     <>
       <Spin spinning={loading}>
@@ -97,7 +135,7 @@ const Detail = (props: any) => {
                   loading={false}
                   onClick={openModel}
                 >
-                  关闭小区
+                  <span className="capi">Close the community</span>
                 </Button>
                 <Button onClick={goToReturn}>
                   <LeftOutlined />
@@ -112,30 +150,22 @@ const Detail = (props: any) => {
               {/* 激活码 */}
               <div className="code">
                 <li>小区激活码</li>
-                <Avatar
-                  shape="square"
-                  style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
-                  size={140}
-                  src={detailData.visitorUrl ? detailData.visitorUrl : imgs}
-                />
+                <Image width={140} src={detailData.visitorUrl} fallback={imgs} />
+                <li className="lis">{detailData.rows.cdkCode}</li>
               </div>
 
               {/* 详情 */}
               <div className="list-item">
-                <div className="inst">
                 <div className="item">
                   <label>小区名称：</label>
                   <span>{detailData.rows.residentialName}</span>
                 </div>
-                  <div className="item">
-                    <label>小区邮编：</label>
-                    <span>{detailData.rows.residentialZipCode}</span>
-                  </div>
-                </div>
                 {/* ---------- */}
                 <div className="item">
                   <label>详细地址：</label>
-                  <span>{detailData.rows.residentialAddress}</span>
+                  <span>
+                    {detailData.rows.residentialAddress}&nbsp;{detailData.rows.residentialZipCode}{' '}
+                  </span>
                 </div>
                 {/* ---------- */}
                 <div className="item">
@@ -248,13 +278,15 @@ const Detail = (props: any) => {
               <div className="list-item">
                 <div className="item">
                   <label>临时到访码下载：</label>
-                  <Avatar
-                    shape="square"
-                    style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
-                    size={64}
-                    src={hfor}
-                  />
-                  <Button type="link">下载</Button>
+                  <Image width={64} src={hfor} />
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      openDows(require('@/assets/h5.png'), 'code.png');
+                    }}
+                  >
+                    下载
+                  </Button>
 
                   <Input
                     placeholder="Basic usage"
@@ -262,7 +294,12 @@ const Detail = (props: any) => {
                     style={{ width: '280px' }}
                     value="http://47.74.233.180:8651/tosVisitorNo"
                   />
-                  <Button type="link" onClick={copy}>
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      copy('http://47.74.233.180:8651/tosVisitorNo');
+                    }}
+                  >
                     复制
                   </Button>
                 </div>
@@ -271,15 +308,21 @@ const Detail = (props: any) => {
 
             {/* 确认关闭框 */}
             <Modal
-              title="确认关闭小区吗?"
+              title="Are You Sure You Want To Close The Community??"
               visible={ModelFee}
+              centered={true}
               onCancel={handleCancel}
               onOk={handleOk}
+              okText="Yes"
+              cancelText="No"
+              okType="danger"
+              confirmLoading={loading}
             >
-              <p>
-                关闭小区将会<span style={{ color: 'red' }}>删除</span>小区内
-                <span style={{ color: 'red' }}>所有</span>业主，请谨慎操作！
+              <p className="capi">
+                Close the community will delete <span style={{ color: 'red' }}> all owners </span>in
+                the community .
               </p>
+              <p>please operate carefully!</p>
             </Modal>
           </div>
         ) : (
@@ -292,9 +335,9 @@ const Detail = (props: any) => {
 
 // export default Adds;
 function map(state: any) {
-  const { DataSave, detailData, imgUrl } = state.CellList; // 上层传递来的值
+  const { DataSave, detailData, imgUrl, overCom } = state.CellList; // 上层传递来的值
   const loading = state.loading.models.CellList;
-
-  return { DataSave, detailData, loading, imgUrl };
+  console.log(state);
+  return { DataSave, detailData, loading, imgUrl, overCom };
 }
 export default connect(map)(Detail);

src/pages/CommunityManagement/CellList/celllist.less

@@ -117,6 +117,17 @@ li {
         text-align: center;
         line-height: 35px;
       }
+      img {
+        width: 140px;
+        border: 1px solid #f0f0f0;
+        border-radius: 3px;
+        margin-bottom: 5px;
+      }
+      .lis {
+        color: #67c23a;
+        font-size: 18px;
+        font-weight: 500;
+      }
     }
   }
 }
@@ -127,3 +138,11 @@ li {
   font-size: 12px;
   color: red;
 }
+
+img {
+  cursor: pointer;
+}
+
+.capi {
+  text-transform: capitalize;
+}

src/utils/params.ts

@@ -130,8 +130,9 @@ export const requestList = [
     },
   ],
   ['/tos/tosServiceProvider/get', '46 获取服务商', {}],
-  ['/tos/image/priview', '47 获取附件地址', {}],
+  ['/tos/fileAndImage/preview', '47 获取附件地址', {}],
   ['/tos/tosCommunity/get/list', '48 修改获取小区列表', {}],
+  ['/tos/community/delete', '49 关闭小区', {}],
 ];
 
 const params = [