地址控件联调

hookehuyr
Commit 76ad651843c346695cf7c11eb3126bfb4fb54542 76ad6518 1 parent a16348ed
Showing 2 changed files with 86 additions and 18 deletions
src/components/AreaPickerField/index.vue
src/views/index.vue
--- a/src/components/AreaPickerField/index.vue
View file @76ad651
+++ b/src/components/AreaPickerField/index.vue
View file @76ad651
 <!--
  * @Date: 2022-08-30 14:32:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 14:32:24
+ * @LastEditTime: 2022-12-06 15:42:08
  * @FilePath: /data-table/src/components/AreaPickerField/index.vue
  * @Description: 省市区选择控件
 -->
 <template>
   <div class="area-picker-field">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
     <van-field
-      v-model="item.value"
+      v-model="fieldValue"
       is-link
       readonly
-      :name="item.key"
+      :required="item.component_props.required"
-      :required="item.required"
+      placeholder="请选择省市区"
-      :placeholder="item.placeholder"
       :rules="item.rules"
       @click="showPicker = true"
-      :border="false"
+      :border="true"
     />
     <van-field
-      name="address"
+      v-model="address"
-      v-model="item.address"
+      :placeholder="item.component_props.placeholder"
-      placeholder="详细地址"
+      @blur="onBlur"
-      :border="false"
+      :rules="item.rules"
+      :border="true"
     />
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      地址不能为空
+    </div>
     <van-popup v-model:show="showPicker" position="bottom">
       <van-area
-        name="city_code"
         v-model="item.city_code"
         title=""
         :area-list="areaList"
@@ -45,16 +51,57 @@ const props = defineProps({
   item: Object,
 });
-const address = ref("");
+const emit = defineEmits(["active"]);
+const show_empty = ref(false);
+const address = ref("");
+const city_code = ref("");
 const showPicker = ref(false);
-const fieldValue = ref("");
+let fieldValue = ref("");
 const onConfirm = ({ selectedOptions }) => {
-  props.item.value = selectedOptions.map((option) => option.text).join("/");
+  fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
-  props.item.city_code = selectedOptions[2]?.value;
+  city_code.value = selectedOptions[2]?.value;
+  props.item.value = {
+    key: "area_picker",
+    filed_name: props.item.key,
+    value: {
+      address: fieldValue.value + ' ' + address.value,
+      city_code: city_code.value
+    },
+  };
+  emit("active", props.item.value);
+  console.warn(props.item.value);
   showPicker.value = false;
 };
+
+const onBlur = () => {
+  props.item.value = {
+    key: "area_picker",
+    filed_name: props.item.key,
+    value: {
+      address: fieldValue.value + ' ' + address.value,
+      city_code: city_code.value
+    },
+  };
+  emit("active", props.item.value);
+}
+
+// 校验模块
+const validAreaPicker = () => {
+  // 必填项
+  if (props.item.component_props.required && !fieldValue.value) {
+    show_empty.value = true;
+  } else if (props.item.component_props.required && !address.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  console.warn(show_empty.value);
+  return !show_empty.value;
+};
+
+defineExpose({ validAreaPicker });
 </script>
 <style lang="less" scoped>
--- a/src/views/index.vue
View file @76ad651
+++ b/src/views/index.vue
View file @76ad651
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-22 17:59:56
+ * @LastEditTime: 2022-12-06 15:34:23
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -155,6 +155,7 @@ const formatData = (data) => {
 // 处理没有绑定值的组件的赋值
 // 图片上传，文件上传，电子签名，评分组件
+const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
 const sign = ref([]);
@@ -162,6 +163,9 @@ const rate_picker = ref([]);
 // 动态绑定ref数据
 const setRefMap = (el, item) => {
   if (el) {
+    if (item.component_props.name === "area_picker") {
+      area_picker.value.push(el);
+    }
     if (item.component_props.name === "image_uploader") {
       image_uploader.value.push(el);
     }
@@ -235,12 +239,16 @@ onMounted(async () => {
   // createComponentType(mockData.value);
   createComponentType(formData.value);
   //
-  console.warn(formSetting.value);
+  // console.warn(formSetting.value);
   notice_text.value = "表单报名将在2022-12-21 12:32后结束";
 });
 // 操作绑定自定义字段回调
 const onActive = (item) => {
+  if (item.key === "area_picker") {
+    console.warn(item);
+    postData.value[item.filed_name] = item.value;
+  }
   if (item.key === "image_uploader") {
     postData.value[item.filed_name] = item.value;
   }
@@ -261,6 +269,18 @@ const validOther = () => {
     status: true,
     key: "",
   };
+  if (area_picker.value) {
+    // 省市区地址
+    area_picker.value.forEach((item, index) => {
+      if (!area_picker.value[index].validAreaPicker()) {
+        valid = {
+          status: area_picker.value[index].validAreaPicker(),
+          key: "area_picker",
+        };
+        return false;
+      }
+    });
+  }
   if (image_uploader.value) {
     // 图片上传
     image_uploader.value.forEach((item, index) => {
@@ -313,6 +333,7 @@ const validOther = () => {
 };
 const onSubmit = async (values) => {
+  console.warn(postData.value);
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
   // 检查非表单输入项