fix

src/components/DragableUploadImageList/Item.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Icon } from 'antd'
+
+export default (props) => {
+    const { dataset = {}, onPreview, onDelete, onClick, onSticky } = props
+    const { url } = dataset
+
+    const handlePreview = () => {
+        onPreview && onPreview(dataset)
+    }
+
+    const handleDelete = () => {
+        onDelete && onDelete(dataset)
+    }
+
+    const handleClick = () => {
+        return onClick ? onClick(dataset) : null
+    }
+
+    const handleSticky = () => {
+        onSticky && onSticky(dataset)
+    }
+
+    return (
+        <div className="ant-upload-list-picture-card-container">
+            <span>
+                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
+                    <div className="ant-upload-list-item-info">
+                        <span>
+                            <a className="ant-upload-list-item-thumbnail" href={url} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
+                                <img className="ant-upload-list-item-image" src={url} alt="image" />
+                            </a>
+                        </span>
+                    </div>
+
+                    <span className="ant-upload-list-item-actions">
+                        <Icon type="vertical-align-top" className="anticon anticon-eye-o" onClick={handleSticky} />
+                        <Icon type="eye" className="anticon anticon-eye-o" onClick={handlePreview} />
+                        <Icon type="delete" onClick={handleDelete} />
+                    </span>
+                </div>
+            </span>
+        </div>
+    )
+}
+

src/components/DragableUploadImageList/index.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+import Item from './Item'
+import { getImgURL } from '@/utils/image';
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    loadding: false,
+  };
+
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: getImgURL(img), status: 'done' }))
+  }
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    this.setState({
+      previewImage: file.url ,
+      previewVisible: true,
+    });
+  };
+
+  handleSticky = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange([url].concat(fileList.filter(x => x != url)))
+  }
+
+  handleDelete = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange(fileList.filter(x => x != url))
+  }
+
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => getImgURL(x) != e.file.url);
+    this.props.onChange(fileList);
+
+    // console.log('删除图片触发了', e.file)
+    // if (e.file.state === 'removed') {
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    //   this.props.onChange(fileList);
+    // }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const { multiple = false } = this.props;
+    const fileList = this.getFileList();
+
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
+      </div>
+    );
+    return (
+      <div className="clearfix x-dargable-image-upload-list" style={{display:'flex'}}> 
+        <div className="ant-upload-list ant-upload-list-picture-card" style={{display:'flex'}}>
+            {fileList.map(img => <Item key={img.url} dataset={img} onPreview={this.handlePreview} onSticky={this.handleSticky} onDelete={this.handleDelete}/>)}
+        </div>
+          {/*  */}
+        <Upload
+          listType="picture-card"
+          showUploadList={false}
+          multiple={multiple}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+         {/* listType="picture-card"
+          multiple={true}
+          fileList={fileList}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess} */}
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={getImgURL(previewImage)} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/DragableUploadImageList/style.less

@@ -0,0 +1,23 @@
+:global {
+  .x-dargable-image-upload-list {
+    display: flex;
+  }
+
+  
+  .x-dargable-image-upload-list  .ant-upload-picture-card-wrapper {
+    width: auto !important;
+  }
+
+}
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/SelectButton/AreaSelect.jsx

@@ -17,8 +17,14 @@ const CitySelect = (props) => {
 
   useEffect(() => {
     getCityAreaList();
-    getValue();
-  },[cityId])
+    // getValue();
+  },[cityId,props.value])
+
+  // useEffect(() => {
+   
+  //   getValue();
+  // },[props.value,cityId])
+
 
   const getCityAreaList = (e) => {
     request({
@@ -38,7 +44,7 @@ const CitySelect = (props) => {
     if (props.value) {
       const tempData = data.filter(f => f.id == props.value)
       const va = (tempData.length > 0) ? props.value : undefined
-      props.onChange(va)
+      // props.onChange(va)
     }
   }
 
@@ -60,7 +66,7 @@ const CitySelect = (props) => {
       }
       >
           {data.map(city => (
-            <Option key={city.id} value={city.name}>{city.name}</Option>
+            <Option key={city.id} value={`${city.id}`}>{city.name}</Option>
           ))}
       </Select>
   )

src/components/XForm/ImageListUpload.jsx

@@ -11,7 +11,7 @@ class ImageListUpload extends React.Component {
   state = {
     previewVisible: false,
     previewImage: '',
-    loadding: false,
+    loading: false,
   };
 
   getFileList = () => {
@@ -32,28 +32,29 @@ class ImageListUpload extends React.Component {
       this.setState({ loading: true });
       return;
     }
-
-    const fileList = (this.props.value || []).filter(x => x != e.file.url);
-    this.props.onChange(fileList);
+console.log(e,'handleChange')
+    // const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    // this.props.onChange(fileList);
 
     // console.log('删除图片触发了', e.file)
-    // if (e.file.state === 'removed') {
-    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
-    //   this.props.onChange(fileList);
-    // }
+    if (e.file.status === 'removed') {
+      console.log(e,'handleChange22')
+      const fileList = (this.props.value || []).filter(x => getImgURL(x) != e.file.url);
+      this.props.onChange(fileList);
+    }
 
-    // if (e.file.status === "done") {
-    //   this.setState({
-    //     loading: false,
-    //   })
+    if (e.file.status === "done") {
+      this.setState({
+        loading: false,
+      })
 
-    //   if (e.file.response && e.file.response.url) {
-    //     if (typeof this.props.onChange === 'function') {
-    //       const fileList = this.getFileList()
-    //       this.props.onChange([...fileList || [], e.file.response.url]);
-    //     }
-    //   }
-    // }
+      if (e.file.response && e.file.response.url) {
+        if (typeof this.props.onChange === 'function') {
+          const fileList = this.getFileList()
+          this.props.onChange([...fileList || [], e.file.response.url]);
+        }
+      }
+    }
   };
 
   handleUploadSucess = (url) => {

src/pages/building/Edit/AlbumList/List.jsx

@@ -5,18 +5,29 @@ import ImageListUpload from '@/components/XForm/ImageListUpload';
 const { Panel } = Collapse;
 
 const ImageList = props => {
-  const { data } = props;
+  const { data,updateImg } = props;
   const [imageList, setImageList] = useState([]);
 
   function getImgUrl() {
     return (data.buildingImgList || []).map(item => item.url);
   }
 
+  function onImageChange(e) {
+    setImageList(e)
+    console.log(e,'onImageChange')
+       
+    // 新增加图片后，更新后端数据
+    const img = e.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    updateImg({ ...data, img }).then(res=>{
+
+    })
+  }
+
   useEffect(() => {
     setImageList(getImgUrl());
   }, [data]);
 
-  return <ImageListUpload value={imageList} onChange={e => console.log(e, 'onChange')} unlimited />;
+  return <ImageListUpload value={imageList} disabled onChange={onImageChange} unlimited={false} />;
 };
 
 export default props => {
@@ -24,7 +35,7 @@ export default props => {
 
   const Extra = item => (
     <>
-      <Button type="link" size="small" onClick={props.onRename}>
+      <Button type="link" size="small" onClick={(e)=>{e.stopPropagation(),props.onRename(item)}}>
         重命名
       </Button>
       {/* <Popconfirm title="Are you sure delete this task?" onConfirm={props.onDelete}> */}
@@ -45,7 +56,7 @@ export default props => {
       {dataList.map((row, index) => {
         return (
           <Panel header={row.apartmentName} key={index} extra={Extra(row)}>
-            <ImageList data={row}></ImageList>
+            <ImageList data={row} updateImg={props.updateImg}></ImageList>
           </Panel>
         );
       })}

src/pages/building/Edit/AlbumList/index.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Modal,message } from 'antd';
+import { Button, Modal, message, Input } from 'antd';
 import request, { apis } from '@/utils/request';
 import Form from './Form';
 import List from './List';
+import ModalForm from '../components/ModalForm';
 
 export default props => {
   const [visible, setVisible] = useState(false);
@@ -11,7 +12,10 @@ export default props => {
   const { id } = query;
 
   const [loading, setLoading] = useState(false);
+  const [reNameData, setReNameData] = useState({ visible: false, data: {} });
   const [list, setList] = useState([]);
+  const [value, setValue] = useState('');
+  const [confirmLoading, setConfirmLoading] = useState(false);
   const albumRef = useRef();
 
   const getList = () => {
@@ -49,46 +53,85 @@ export default props => {
       onOk: () => {
         request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } })
           .then(() => {
-            console.log('删除成功')
+            console.log('删除成功');
             message.success('删除成功');
             getList();
           })
           .catch(err => {
-            console.log('删除失败')
+            console.log('删除失败');
           });
       },
     });
   }
 
-  // const handleDelete = record => {
-  //   const urlData = { id: record.apartmentId };
-
-  //   setLoading(true);
-  //   deleteData({ urlData })
-  //     .then(() => {
-  //       getList();
-  //       message.success('删除成功');
-  //       setLoading(false);
-  //     })
-  //     .catch(err => {
-  //       console.error(err.message || err);
-  //       setLoading(false);
-  //     });
-  // };
+  const updateApartment = data => {
+  // const values= {}
+
+    // setLoading(true);
+
+    return request({
+      ...apis.building.buildingApartmentUpdate,
+      // urlData: { id: data.apartmentId },
+      data
+
+    })
+    //   .then(() => {
+    //     console.log('删除成功');
+    //     message.success('删除成功');
+    //     getList();
+    //   })
+    //   .catch(err => {
+    //     console.log('删除失败');
+    //   });
+    // deleteData({ urlData })
+    //   .then(() => {
+    //     getList();
+    //     message.success('删除成功');
+    //     setLoading(false);
+    //   })
+    //   .catch(err => {
+    //     console.error(err.message || err);
+    //     setLoading(false);
+    //   });
+  };
 
   const handleSuccess = () => {
     getList();
     setVisible(false);
   };
 
-  const onRename = () => {
-    getList();
-    setVisible(false);
+  const onRename = record => {
+    // getList();
+    setValue(record.apartmentName);
+    setReNameData({ visible: true, data: record });
   };
 
   useEffect(() => {
     getList();
   }, [id]);
+
+  const handleOk = () => {
+    // getList();
+    const { data } = reNameData;
+    setConfirmLoading(true);
+    const values={}
+    // // values.buildingId=data.buildingId
+    // values.apartmentType = 'photo'
+    // values.apartmentName = value
+    // values.img = data.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    values.img = data.buildingImgList
+    values.apartmentId=data.apartmentId
+    values.buildingId = data.buildingId;
+    values.apartmentName = value
+    values.apartmentType = 'photo'
+    console.log(values,'values')
+    updateApartment({ ...values }).then(res => {
+      setReNameData({ visible: false, data: {} });
+      setConfirmLoading(false);
+      getList()
+    });
+  };
+
   return (
     <div>
       <div>
@@ -108,7 +151,31 @@ export default props => {
         onEdit={handleEdit}
         onRename={onRename}
         onDelete={handleDelete}
+        updateImg={updateApartment}
       />
+      <Modal
+        title="相册名称"
+        visible={reNameData.visible}
+        onCancel={() => {
+          setReNameData({ visible: false });
+        }}
+        // onOk={this.handleOk}
+        // confirmLoading={confirmLoading}
+        // onCancel={this.handleCancel}
+        // footer={true}
+        destroyOnClose={true}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        // onSubmit={handleSubmit}
+      >
+        <Input
+          value={value}
+          onChange={e => {
+            setValue(e.target.value);
+            // reNameData.data.apartmentName = e.target.value;
+          }}
+        ></Input>
+      </Modal>
     </div>
   );
 };

src/pages/building/Edit/Basic/index.jsx

@@ -28,6 +28,7 @@ const BuildingBasic = React.forwardRef((props, ref) => {
   const { query } = history.location;
   const { id } = query;
 
+  const [cityId,setCityId] = useState()
   const [ loading, setLoading ] = useState({ form: false, arround: false })
   const [brands] = useBrands()
   const [
@@ -50,6 +51,7 @@ const BuildingBasic = React.forwardRef((props, ref) => {
     initArrounds(res)
     initForm(form, res)
     setMarketingCode(res.marketingCode)
+    setCityId(res.cityId)
   })
   
   // 视频文件上传前 回调
@@ -233,13 +235,13 @@ const BuildingBasic = React.forwardRef((props, ref) => {
             {getFieldDecorator('cityId', {
               rules: [{ required: true, message: '请选择城市' }],
             })(
-              <SelectCity style={fullWidth} />,
+              <SelectCity style={fullWidth} onChange={e=>{setCityId(e)}} />,
             )}
           </Form.Item>
           <Form.Item label="楼盘区域" {...gourpItemLayout.ab.b } >
             {getFieldDecorator('buildingArea', {
               rules: [{ required: true, message: '请输入楼盘区域' }],
-            })(<AreaSelect style={fullWidth} />)}
+            })(<AreaSelect cityId={cityId} style={fullWidth} />)}
           </Form.Item>
         </FormGroupItem>
         <Form.Item label="项目地址" >

src/pages/building/Edit/OnSiteService.jsx

@@ -42,7 +42,28 @@ export default props => {
   // const getList=()=>{
   //   getMarketing
   // }
-  const handleCancel = row => {};
+  const handleCancel = row => {
+    request({
+      ...apis.building.deleteMarketing,
+      urlData:{id:row.id},
+      // params: { id },
+    })
+      .then(res => {
+        notification.error({
+          message: '成功取消绑定',
+          description: '',
+        });
+        getList()
+      })
+      .catch(err => {
+       
+        notification.error({
+          message: err.message,
+          description: '',
+        });
+      });
+
+  };
 
   const columns = [
     {

src/pages/building/Edit/components/ModalForm/index.jsx

@@ -5,7 +5,7 @@ import { formItemLayout } from '../../utils'
 const noop = () => undefined
 
 export default (props) => {
-  const { title, visible, onCancel = noop, modalProps = {}, children, ...leftProps } = props
+  const { title, visible, onCancel = noop, modalProps = {}, children, footer=null,...leftProps } = props
 
   return (
     <Modal
@@ -13,7 +13,7 @@ export default (props) => {
       width={800}
       visible={visible}
       onCancel={onCancel}
-      footer={null}
+      footer={footer}
       {...modalProps}
     >
       <Form {...formItemLayout} {...leftProps} >

src/pages/building/List/tableColumns.js

@@ -4,6 +4,7 @@ import moment from 'moment'
 import OperButton from '@/components/OperButton'
 import AuthButton from '@/components/AuthButton'
 import withActions from '@/components/ActionList'
+import { getImgURL } from '@/utils/image'
 
 export default ({page, onPublish, onDelete}) => [
   {
@@ -19,7 +20,7 @@ export default ({page, onPublish, onDelete}) => [
     align: 'center',
     render: (_, row) => {
       if (row.buildingListImg && row.buildingListImg[0]) {
-        return <img src={row.buildingListImg[0].url} width={128} height={72} style={{borderRadius: '4px'}} alt="" />
+        return <img src={getImgURL(row.buildingListImg[0].url)} width={128} height={72} style={{borderRadius: '4px'}} alt="" />
       }
       return null
     }

src/services/apis.js

@@ -194,10 +194,14 @@ export default {
     getMarketing: {
       url: `${prefix}/building/marketing`,
       method: 'GET',
-      action: 'admin.building.marketing,get',
+      action: 'admin.building.marketing.get',
     },
- 
-    // GET /api/admin/trend/{id}
+    deleteMarketing: {
+      url: `${prefix}/marketing/:id`,
+      method: 'DELETE',
+      action: 'admin.marketing.id.delete',
+    },
+
   },
   buildingType: {
     getList: {