From 423a8b1cf52b21cf176c230518a1877462af46bb Mon Sep 17 00:00:00 2001
From: Jake <Jake.Laoyu@gmail.com>
Date: Mon, 30 Sep 2019 09:48:10 +0800
Subject: [PATCH] feat(Area): columns placeholder (#4629)

---
 docs/src/docs-entry.js       |  1 -
 packages/area/demo/index.vue |  4 +--
 packages/area/en-US.md       |  2 +-
 packages/area/index.js       | 48 ++++++++++++++++++++++--------------
 packages/area/zh-CN.md       |  2 +-
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/docs/src/docs-entry.js b/docs/src/docs-entry.js
index 18901821b..80bb7857a 100644
--- a/docs/src/docs-entry.js
+++ b/docs/src/docs-entry.js
@@ -2,7 +2,6 @@
 // This file is auto gererated by build/build-entry.js
 export default {
   'changelog.en-US': () => import('../markdown/changelog.en-US.md'),
-  'changelog.generated': () => import('../markdown/changelog.generated.md'),
   'changelog.zh-CN': () => import('../markdown/changelog.zh-CN.md'),
   'contribution.zh-CN': () => import('../markdown/contribution.zh-CN.md'),
   'design.zh-CN': () => import('../markdown/design.zh-CN.md'),
diff --git a/packages/area/demo/index.vue b/packages/area/demo/index.vue
index 56280c795..443499829 100644
--- a/packages/area/demo/index.vue
+++ b/packages/area/demo/index.vue
@@ -42,14 +42,14 @@ export default {
       title2: '选中省市区',
       title3: '配置显示列',
       title4: '配置列占位提示文字',
-      columnsPlaceholder: ['请选择'],
+      columnsPlaceholder: ['请选择', '请选择', '请选择'],
       areaList: AreaList
     },
     'en-US': {
       title2: 'Initial Value',
       title3: 'Columns Number',
       title4: 'Columns Placeholder',
-      columnsPlaceholder: ['Choose'],
+      columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
       areaList: AreaListEn
     }
   },
diff --git a/packages/area/en-US.md b/packages/area/en-US.md
index 2ee1765f6..83918e769 100644
--- a/packages/area/en-US.md
+++ b/packages/area/en-US.md
@@ -43,7 +43,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 ```html
 <van-area
   :area-list="areaList"
-  :columns-placeholder="['Choose']"
+  :columns-placeholder="['Choose', 'Choose', 'Choose']"
   title="Title"
 />
 ```
diff --git a/packages/area/index.js b/packages/area/index.js
index b750138de..5ee581845 100644
--- a/packages/area/index.js
+++ b/packages/area/index.js
@@ -4,6 +4,8 @@ import { pickerProps } from '../picker/shared';
 
 const [sfc, bem] = use('area');
 
+const COLUMNSPLACEHOLDERCODE = '000000';
+
 export default sfc({
   props: {
     ...pickerProps,
@@ -92,14 +94,6 @@ export default sfc({
         name: list[listCode]
       }));
 
-      if (this.columnsPlaceholder.length) {
-        // set columns placeholder
-        result.unshift({
-          code: '000000',
-          name: this.typeToColumnsPlaceholder[type]
-        });
-      }
-
       if (code) {
         // oversea code
         if (code[0] === '9' && type === 'city') {
@@ -109,6 +103,15 @@ export default sfc({
         result = result.filter(item => item.code.indexOf(code) === 0);
       }
 
+      if (this.typeToColumnsPlaceholder[type] && result.length) {
+        // set columns placeholder
+        const codeFill = type === 'province' ? '' : type === 'city' ? COLUMNSPLACEHOLDERCODE.slice(2, 4) : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+        result.unshift({
+          code: `${code}${codeFill}`,
+          name: this.typeToColumnsPlaceholder[type]
+        });
+      }
+
       return result;
     },
 
@@ -132,19 +135,28 @@ export default sfc({
       return 0;
     },
 
-    onChange(picker, values, index) {
-      this.code = values[index].code;
-      this.setValues();
-      this.$emit('change', picker, picker.getValues(), index);
-    },
-
-    onConfirm(values, index) {
-      values.forEach(value => {
-        if (value.code === '000000') {
+    // parse output columns data
+    parseOutputValues(values) {
+      return values.map((value = {}, index) => {
+        value = JSON.parse(JSON.stringify(value));
+        if (!value.code || value.name === this.columnsPlaceholder[index]) {
           value.code = '';
           value.name = '';
         }
+        return value;
       });
+    },
+
+    onChange(picker, values, index) {
+      this.code = values[index].code;
+      this.setValues();
+      let getValues = picker.getValues();
+      getValues = this.parseOutputValues(getValues);
+      this.$emit('change', picker, getValues, index);
+    },
+
+    onConfirm(values, index) {
+      values = this.parseOutputValues(values);
       this.setValues();
       this.$emit('confirm', values, index);
     },
@@ -154,7 +166,7 @@ export default sfc({
 
       if (!code) {
         if (this.columnsPlaceholder.length) {
-          code = '000000';
+          code = COLUMNSPLACEHOLDERCODE;
         } else if (Object.keys(this.county)[0]) {
           code = Object.keys(this.county)[0];
         } else {
diff --git a/packages/area/zh-CN.md b/packages/area/zh-CN.md
index 7d65f6cfc..9fb2895c9 100644
--- a/packages/area/zh-CN.md
+++ b/packages/area/zh-CN.md
@@ -42,7 +42,7 @@ Vue.use(Area);
 ```html
 <van-area
   :area-list="areaList"
-  :columns-placeholder="['请选择']"
+  :columns-placeholder="['请选择', '请选择', '请选择']"
   title="标题"
 />
 ```