142 lines
4.0 KiB
Vue
142 lines
4.0 KiB
Vue
<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>
|