楼盘图片 办公商业的开盘信息图片 删除功能

package.json

@@ -32,11 +32,6 @@
     "test:component": "umi test ./src/components",
     "tsc": "tsc"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint-staged"
-    }
-  },
   "lint-staged": {
     "**/*.less": "stylelint --syntax less",
     "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",

src/pages/mpEstate/estateList/edite/components/businessOpenInfo.tsx

@@ -4,7 +4,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'umi';
 import moment from 'moment';
-import { Form, Select, Button, Input, Collapse, InputNumber, DatePicker, message } from 'antd';
+import { Form, Select, Button, Input, Collapse, InputNumber, DatePicker, message, Popconfirm } from 'antd';
 import InputImages from '@/components/UploadMedia/InputImages';
 import configData from './config';
 import styles from './index.less';
@@ -154,17 +154,36 @@ const BusinessOpenInfoComponent = (props: any) => {
         } else {
           message.success('添加成功');
 
-          setImageData(imageData.concat([{
-            image_url: fieldsValue.image_url,
-            opening_id: firstOpenInfo.id,
-            type: 'business',
-          }]));
+          setImageData(imageData.concat([ret]));
           setFirstFlag(!firstFlag)
         }
       }
     });
   }
 
+  // 删除图片
+  const deleteBusinessImage = (obj: any, e: any) => {
+    e.stopPropagation();
+
+    const { dispatch } = props;
+
+    dispatch({
+      type: `estateList/deleteEstateBusinessOfficeImage`,
+      payload: {
+        id: obj.id,
+      },
+      callback: (ret: any) => {
+        if (ret.error) {
+          message.error(ret.error);
+        } else {
+          message.success('删除成功');
+
+          setImageData(imageData.filter((item: any) => item.id !== obj.id));
+        }
+      }
+    });
+  }
+
   const renderPanel = (obj: any): any => {
     return (
       <div className={styles.openInfoPanelWrap}>
@@ -423,7 +442,13 @@ const BusinessOpenInfoComponent = (props: any) => {
 
       <div className={styles.imageWrap}>
         {imageData.map((img: any, imgIndex: any) => (
-          <div className={styles.itemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }} />
+          <div className={styles.itemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }}>
+            {isEdite && (
+              <Popconfirm title="是否要删除此条记录？" onConfirm={(e: any) => deleteBusinessImage(img, e)}>
+                <Button loading={props.deleteLoading} type="dashed" size="small">删除</Button>
+              </Popconfirm>
+            )}
+          </div>
         ))}
       </div>
 

src/pages/mpEstate/estateList/edite/components/houseImage.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'umi';
 import moment from 'moment';
-import { Form, Button, Input, message, Select } from 'antd';
+import { Form, Button, Input, message, Select, Popconfirm } from 'antd';
 import InputImages from '@/components/UploadMedia/InputImages';
 import styles from './index.less';
 
@@ -117,6 +117,42 @@ const HouseImage = (props: any) => {
     })
   }
 
+  // 删除数据
+  const deleteData = (id: number,  callback?: any) => {
+    const { dispatch } = props;
+
+    dispatch({
+      type: `estateList/deleteEstateHouseImage`,
+      payload: {
+        id,
+      },
+      callback: (ret: any) => {
+        if (ret.error) {
+          message.error(ret.error);
+        } else {
+          message.success('删除成功');
+
+          if (callback) callback();
+        }
+      }
+    });
+  }
+
+  // 删除图片
+  const deleteHouseImage = (obj: any, e: any) => {
+    e.stopPropagation();
+
+    const { getBaseData } = props;
+
+    if (obj.id) {
+      deleteData(obj.id, () => {
+        getBaseData();
+      });
+    } else {
+      message.error('未添加的图片, 不能删除');
+    }
+  }
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -194,7 +230,13 @@ const HouseImage = (props: any) => {
             <div className={styles.houseImageItemTitle}>{formatHouseImageData[keyName].name || ''}</div>
             <div className={styles.houseImageItemContent}>
               {(formatHouseImageData[keyName].data || []).map((img: any, imgIndex: any) => (
-                <div className={styles.houseImageItemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }} />
+                <div className={styles.houseImageItemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }}>
+                  {isEdite && (
+                    <Popconfirm title="是否要删除此条记录？" onConfirm={(e: any) => deleteHouseImage(img, e)}>
+                      <Button loading={props.deleteLoading} type="dashed" size="small">删除</Button>
+                    </Popconfirm>
+                  )}
+                </div>
               ))}
             </div>
           </div>
@@ -207,4 +249,5 @@ const HouseImage = (props: any) => {
 export default connect(({ estateList, loading }: any) => ({
   estateList,
   addLoading: loading.effects['estateList/addEstateHouseImage'],
+  deleteLoading: loading.effects['estateList/deleteEstateHouseImage'],
 }))(HouseImage);

src/pages/mpEstate/estateList/edite/components/index.less

@@ -189,6 +189,8 @@
     .itemImg {
       background-size: 100% 100%!important;
       margin-right: 20px;
+      display: flex;
+      justify-content: flex-end;
 
       &:last-child {
         margin-right: 0;
@@ -327,6 +329,8 @@
       .houseImageItemImg {
         margin-right: 10px;
         background-size: 100% 100%!important;
+        display: flex;
+        justify-content: flex-end;
       }
     }
   }

src/pages/mpEstate/estateList/edite/components/officeOpenInfo.tsx

@@ -4,7 +4,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'umi';
 import moment from 'moment';
-import { Form, Select, Button, Input, Collapse, InputNumber, DatePicker, message } from 'antd';
+import { Form, Select, Button, Input, Collapse, InputNumber, DatePicker, message, Popconfirm } from 'antd';
 import InputImages from '@/components/UploadMedia/InputImages';
 import configData from './config';
 import styles from './index.less';
@@ -154,17 +154,36 @@ const OfficeOpenInfoComponent = (props: any) => {
         } else {
           message.success('添加成功');
 
-          setImageData(imageData.concat([{
-            image_url: fieldsValue.image_url,
-            opening_id: firstOpenInfo.id,
-            type: 'office',
-          }]));
+          setImageData(imageData.concat([ret]));
           setFirstFlag(!firstFlag)
         }
       }
     });
   }
 
+  // 删除图片
+  const deleteOfficeImage = (obj: any, e: any) => {
+    e.stopPropagation();
+
+    const { dispatch } = props;
+
+    dispatch({
+      type: `estateList/deleteEstateBusinessOfficeImage`,
+      payload: {
+        id: obj.id,
+      },
+      callback: (ret: any) => {
+        if (ret.error) {
+          message.error(ret.error);
+        } else {
+          message.success('删除成功');
+
+          setImageData(imageData.filter((item: any) => item.id !== obj.id));
+        }
+      }
+    });
+  }
+
   const renderPanel = (obj: any): any => {
     return (
       <div className={styles.openInfoPanelWrap}>
@@ -420,7 +439,13 @@ const OfficeOpenInfoComponent = (props: any) => {
 
       <div className={styles.imageWrap}>
         {imageData.map((img: any, imgIndex: any) => (
-          <div className={styles.itemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }} />
+          <div className={styles.itemImg} key={imgIndex} style={{ width: '200px', height: '200px' , background: `url(${img.image_url}) no-repeat` }}>
+            {isEdite && (
+              <Popconfirm title="是否要删除此条记录？" onConfirm={(e: any) => deleteOfficeImage(img, e)}>
+                <Button loading={props.deleteLoading} type="dashed" size="small">删除</Button>
+              </Popconfirm>
+            )}
+          </div>
         ))}
       </div>