From a924c48448a648f2203a5c64b117a18a41da222a Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Thu, 7 Sep 2017 18:17:41 +0800
Subject: [PATCH] add EditableItem adjust AdvancedProfile page

---
 src/components/DescriptionList/index.less |  1 +
 src/components/EditableItem/index.js      | 54 +++++++++++++++++++++++
 src/components/EditableItem/index.less    | 25 +++++++++++
 src/components/PageHeader/index.less      |  4 --
 src/routes/Profile/AdvancedProfile.js     | 26 +++++++----
 5 files changed, 97 insertions(+), 13 deletions(-)
 create mode 100644 src/components/EditableItem/index.js
 create mode 100644 src/components/EditableItem/index.less

diff --git a/src/components/DescriptionList/index.less b/src/components/DescriptionList/index.less
index f7dc3203..a8f88a3d 100644
--- a/src/components/DescriptionList/index.less
+++ b/src/components/DescriptionList/index.less
@@ -31,6 +31,7 @@
   }
 
   .detail {
+    width: 100%;
     padding-bottom: 16px;
     color: @text-color;
     display: table-cell;
diff --git a/src/components/EditableItem/index.js b/src/components/EditableItem/index.js
new file mode 100644
index 00000000..b5efcd8b
--- /dev/null
+++ b/src/components/EditableItem/index.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react';
+import { Input, Icon } from 'antd';
+import styles from './index.less';
+
+export default class EditableItem extends PureComponent {
+  state = {
+    value: this.props.value,
+    editable: false,
+  };
+  handleChange = (e) => {
+    const value = e.target.value;
+    this.setState({ value });
+  }
+  check = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  }
+  edit = () => {
+    this.setState({ editable: true });
+  }
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className={styles.editableItem}>
+        {
+          editable ?
+            <div className={styles.wrapper}>
+              <Input
+                value={value}
+                onChange={this.handleChange}
+                onPressEnter={this.check}
+              />
+              <Icon
+                type="check"
+                className={styles.icon}
+                onClick={this.check}
+              />
+            </div>
+            :
+            <div className={styles.wrapper}>
+              <span>{value || ' '}</span>
+              <Icon
+                type="edit"
+                className={styles.icon}
+                onClick={this.edit}
+              />
+            </div>
+        }
+      </div>
+    );
+  }
+}
diff --git a/src/components/EditableItem/index.less b/src/components/EditableItem/index.less
new file mode 100644
index 00000000..8c068686
--- /dev/null
+++ b/src/components/EditableItem/index.less
@@ -0,0 +1,25 @@
+@import "~antd/lib/style/themes/default.less";
+
+.editableItem {
+  line-height: @input-height-base;
+  display: table;
+  width: 100%;
+  margin-top: (@font-size-base * @line-height-base - @input-height-base) / 2;
+
+  .wrapper {
+    display: table-row;
+
+    & > * {
+      display: table-cell;
+    }
+
+    & > *:first-child {
+      width: 85%;
+    }
+
+    .icon {
+      cursor: pointer;
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less
index 962479e5..6f9a90d5 100644
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@@ -42,10 +42,6 @@
   .action {
     margin-left: 56px;
     min-width: 266px;
-
-    button:not(:last-child) {
-      margin-right: 8px;
-    }
   }
 
   .title, .action, .content, .extraContent, .main {
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index 8097854e..21633d62 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -3,9 +3,11 @@ import { connect } from 'dva';
 import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip } from 'antd';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import DescriptionList from '../../components/DescriptionList';
+import EditableItem from '../../components/EditableItem';
 import styles from './AdvancedProfile.less';
 
 const { Step } = Steps;
+const ButtonGroup = Button.Group;
 const { Description } = DescriptionList;
 
 const menu = (
@@ -18,13 +20,16 @@ const menu = (
 
 const action = (
   <div>
+    <ButtonGroup style={{ marginRight: 8 }}>
+      <Button size="large">操作</Button>
+      <Button size="large">操作</Button>
+      <Dropdown overlay={menu}>
+        <Button size="large">
+          更多操作 <Icon type="down" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>
     <Button size="large" type="primary">主操作</Button>
-    <Button size="large">次操作</Button>
-    <Dropdown overlay={menu}>
-      <Button size="large">
-        更多 <Icon type="down" />
-      </Button>
-    </Dropdown>
   </div>
 );
 
@@ -44,10 +49,11 @@ const extra = (
 const description = (
   <DescriptionList col="2">
     <Description term="创建人">曲丽丽</Description>
-    <Description term="关联单据"><a href="">12421</a></Description>
+    <Description term="订购产品">XX 服务</Description>
     <Description term="创建时间">2017-07-07</Description>
+    <Description term="关联单据"><a href="">12421</a></Description>
     <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
-    <Description term="单据备注">修改公司地址：浙江省杭州市西湖区工专路</Description>
+    <Description term="备注">请于两个工作日内确认</Description>
   </DescriptionList>
 );
 
@@ -195,7 +201,9 @@ export default class AdvancedProfile extends Component {
             <Description term="用户姓名">付小小</Description>
             <Description term="会员卡号">32943898021309809423</Description>
             <Description term="身份证">3321944288191034921</Description>
-            <Description term="联系方式">18322193472</Description>
+            <Description term="联系方式">
+              <EditableItem value="18112345678" />
+            </Description>
             <Description term="联系地址">曲丽丽  18100000000  浙江省杭州市西湖区黄姑山路工专路交叉路口</Description>
           </DescriptionList>
           <DescriptionList style={{ marginBottom: 24 }} title="信息组" col="2">
-- 
GitLab