✨ feat: 新增省市区组件模块

 <!--
  * @Date: 2022-08-30 14:32:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 14:46:53
+ * @LastEditTime: 2022-08-30 17:56:04
  * @FilePath: /data-table/src/components/AreaPickerField/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="area-picker-field">
-    <van-area v-model="value" title="" :area-list="areaList" />
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
+      :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-area v-model="item.code" title="" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false" />
+    </van-popup>
   </div>
 </template>
 
 <script setup>
 import { areaList } from '@vant/area-data';
-const value = ref('330302');
+
+const props = defineProps({
+  item: Object
+})
+
+const showPicker = ref(false);
+const fieldValue = ref('');
+
+const onConfirm = ({ selectedOptions }) => {
+  props.item.value = selectedOptions.map((option) => option.text).join('/');
+  props.item.city_code = selectedOptions[2]?.value;
+  showPicker.value = false;
+};
 </script>
 
 <style lang="less" scoped>
 .area-picker-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
 
+    span {
+      color: red;
+    }
+  }
 }
 </style>

@@ -29,13 +29,13 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = TextField;
     }
-    // if (item.component_type === 'textarea') {
-    //   item.type = 'textarea';
-    //   item.name = item.key;
-    //   item.rows = 2;
-    //   item.autosize = true;
-    //   item.component = TextareaField;
-    // }
+    if (item.component_type === 'textarea') {
+      item.type = 'textarea';
+      item.name = item.key;
+      item.rows = 2;
+      item.autosize = true;
+      item.component = TextareaField;
+    }
     if (item.component_type === 'number') {
       item.type = 'number';
       item.name = item.key;

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 14:35:02
+ * @LastEditTime: 2022-08-30 17:55:45
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -30,7 +30,7 @@ const mockData = ref([]);
 onMounted(() => {
   mockData.value = [{
     key: 'username',
-    value: 'Hooke',
+    value: '',
     label: '用户名',
     placeholder: '请输入用户名',
     component: '',
@@ -46,7 +46,7 @@ onMounted(() => {
     required: false,
   }, {
     key: 'gender',
-    value: 'female',
+    value: '',
     label: '性别',
     placeholder: '',
     component: '',
@@ -94,7 +94,10 @@ onMounted(() => {
     required: true,
   }, {
     key: 'city',
-    value: '',
+    value: '天津市/天津市/和平区',
+    city_code: '120101',
+    label: '省市区',
+    placeholder: '请选择省市区',
     component_type: 'area_picker'
   }];
   // 生成自定义组件
@@ -103,6 +106,7 @@ onMounted(() => {
 
 const onSubmit = (values) => {
   console.log('submit', values);
+  // console.warn(mockData.value);
 };
 
 </script>