✨ 完成实验部分功能

2025-05-03 19:34:43 +08:00
parent 15c0a1de0e
commit eae8781eaa
21 changed files with 1693 additions and 215 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+  import cityData from 'public/city.json';
+  import cityZip from 'public/zipcode_district_data.json';
+  import type {
+    FormInstanceFunctions,
+    FormProps,
+    SelectValue,
+  } from 'tdesign-vue-next';
+
+  const cityDataTyped = cityData as Record<string, Record<string, string>>;
+  const cityZipTyped = cityZip as Record<string, string | number>;
+
+  function getZipCode(city: string): string {
+    for (const cityName of [
+      city,
+      city.substring(0, city.length - 1),
+      city.substring(0, city.length - 3),
+    ])
+      if (cityZipTyped[cityName] !== undefined) {
+        return '' + cityZipTyped[cityName];
+      }
+    return '';
+  }
+
+  const store = usePeopleStore();
+  const { currentForm } = storeToRefs(store);
+
+  const form = ref<FormInstanceFunctions>();
+  const provinceIndex = ref('');
+  async function submit() {
+    // 执行提交逻辑
+    if (!form.value) return;
+    const result = await form.value.validate();
+    if (typeof result === 'boolean' && result) form.value.submit();
+  }
+  function resetForm() {
+    if (form.value) form.value.reset();
+  }
+  function changeProvince(val: SelectValue) {
+    setProvinceIndexByName(val as string);
+    currentForm.value.city = '';
+    currentForm.value.zip = '';
+  }
+  function setProvinceIndexByName(name: string) {
+    for (const [key, value] of Object.entries(cityDataTyped['00']!)) {
+      if (value === name) {
+        provinceIndex.value = key;
+        console.log('finish');
+        return;
+      }
+    }
+  }
+
+  defineExpose({
+    submit,
+    resetForm,
+    setProvinceIndexByName,
+  });
+
+  const rules: FormProps['rules'] = {
+    date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+    province: [
+      { required: true, message: '请输入省份', trigger: 'submit' },
+      { required: true, message: '请输入省份', trigger: 'change' },
+    ],
+    city: [{ required: true, message: '请输入城市', trigger: 'submit' }],
+    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+    zip: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
+  };
+</script>
+
+<template>
+  <t-form
+    ref="form"
+    :rules="rules"
+    :data="currentForm"
+    @submit="
+      () => {
+        if (store.showAddPeople) store.addPeople();
+        else if (store.showEditPeople) store.updatePeople();
+      }
+    "
+  >
+    <t-form-item name="date" label="日期">
+      <t-date-picker
+        v-model="currentForm.date"
+        class="w-80"
+        placeholder="请输入日期"
+      />
+    </t-form-item>
+    <t-form-item name="name" label="姓名">
+      <t-input v-model="currentForm.name" placeholder="请输入姓名" />
+    </t-form-item>
+    <t-form-item name="province" label="省份">
+      <t-select
+        v-model="currentForm.province"
+        placeholder="请输入省份"
+        @change="changeProvince"
+      >
+        <t-option
+          v-for="item of cityDataTyped['00']"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+          {{ item }}
+        </t-option>
+      </t-select>
+    </t-form-item>
+    <t-form-item name="city" label="城市">
+      <t-select
+        v-model="currentForm.city"
+        placeholder="请输入城市"
+        :disabled="currentForm.province === ''"
+        @change="
+          (x: SelectValue) => {
+            currentForm.zip = getZipCode(x as string);
+          }
+        "
+      >
+        <t-option
+          v-for="item of cityDataTyped[provinceIndex]"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+          {{ item }}
+        </t-option>
+      </t-select>
+    </t-form-item>
+    <t-form-item name="address" label="地址">
+      <t-input v-model="currentForm.address" placeholder="请输入地址" />
+    </t-form-item>
+    <t-form-item name="zip" label="邮编">
+      <t-input v-model="currentForm.zip" placeholder="请输入邮编" />
+    </t-form-item>
+  </t-form>
+</template>
+
+<style scoped lang="less"></style>