|
@@ -84,9 +84,21 @@
|
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="省份" prop="provinceId">
|
|
|
|
|
+ <el-select v-model="form.provinceId" placeholder="请选择省份" filterable style="width: 100%" @change="handleProvinceChange">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="province in provinceList"
|
|
|
|
|
+ :key="province.id"
|
|
|
|
|
+ :label="province.name"
|
|
|
|
|
+ :value="province.id"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
<el-form-item label="城市" prop="cityId">
|
|
<el-form-item label="城市" prop="cityId">
|
|
|
- <el-select v-model="form.cityId" placeholder="请选择城市" filterable style="width: 100%">
|
|
|
|
|
|
|
+ <el-select v-model="form.cityId" placeholder="请选择城市" filterable style="width: 100%" :disabled="!form.provinceId">
|
|
|
<el-option
|
|
<el-option
|
|
|
v-for="city in cityList"
|
|
v-for="city in cityList"
|
|
|
:key="city.id"
|
|
:key="city.id"
|
|
@@ -134,6 +146,7 @@ const router = useRouter()
|
|
|
const isEdit = ref(false)
|
|
const isEdit = ref(false)
|
|
|
const submitLoading = ref(false)
|
|
const submitLoading = ref(false)
|
|
|
const formRef = ref(null)
|
|
const formRef = ref(null)
|
|
|
|
|
+const provinceList = ref([])
|
|
|
const cityList = ref([])
|
|
const cityList = ref([])
|
|
|
|
|
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
@@ -148,6 +161,7 @@ const form = reactive({
|
|
|
level: 1,
|
|
level: 1,
|
|
|
profile: '',
|
|
profile: '',
|
|
|
status: 1,
|
|
status: 1,
|
|
|
|
|
+ provinceId: null,
|
|
|
cityId: null
|
|
cityId: null
|
|
|
})
|
|
})
|
|
|
|
|
|
|
@@ -193,13 +207,28 @@ const rules = {
|
|
|
phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
|
phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
|
|
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|
|
matchmakerType: [{ required: true, message: '请选择红娘类型', trigger: 'change' }],
|
|
matchmakerType: [{ required: true, message: '请选择红娘类型', trigger: 'change' }],
|
|
|
- level: [{ required: true, message: '请选择等级', trigger: 'change' }]
|
|
|
|
|
|
|
+ level: [{ required: true, message: '请选择等级', trigger: 'change' }],
|
|
|
|
|
+ provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
|
|
|
|
|
+ cityId: [{ required: true, message: '请选择城市', trigger: 'change' }]
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const loadProvinceList = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await request.get(API_ENDPOINTS.PROVINCE_LIST)
|
|
|
|
|
+ if (response.code === 200) {
|
|
|
|
|
+ provinceList.value = response.data || []
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('加载省份列表失败:', error)
|
|
|
|
|
+ ElMessage.error('加载省份列表失败')
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 加载城市列表
|
|
// 加载城市列表
|
|
|
-const loadCityList = async () => {
|
|
|
|
|
|
|
+const loadCityList = async (provinceId = null) => {
|
|
|
try {
|
|
try {
|
|
|
- const response = await request.get(API_ENDPOINTS.CITY_LIST)
|
|
|
|
|
|
|
+ const url = provinceId ? `${API_ENDPOINTS.CITY_LIST}?provinceId=${provinceId}` : API_ENDPOINTS.CITY_LIST
|
|
|
|
|
+ const response = await request.get(url)
|
|
|
if (response.code === 200) {
|
|
if (response.code === 200) {
|
|
|
cityList.value = response.data || []
|
|
cityList.value = response.data || []
|
|
|
}
|
|
}
|
|
@@ -209,6 +238,17 @@ const loadCityList = async () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const handleProvinceChange = async () => {
|
|
|
|
|
+ form.cityId = null
|
|
|
|
|
+ cityList.value = []
|
|
|
|
|
+ if (formRef.value) {
|
|
|
|
|
+ formRef.value.clearValidate('cityId')
|
|
|
|
|
+ }
|
|
|
|
|
+ if (form.provinceId) {
|
|
|
|
|
+ await loadCityList(form.provinceId)
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const loadDetail = async (id) => {
|
|
const loadDetail = async (id) => {
|
|
|
try {
|
|
try {
|
|
|
const response = await request.get(`${API_ENDPOINTS.MATCHMAKER_DETAIL}/${id}`)
|
|
const response = await request.get(`${API_ENDPOINTS.MATCHMAKER_DETAIL}/${id}`)
|
|
@@ -225,7 +265,14 @@ const loadDetail = async (id) => {
|
|
|
form.level = data.level !== undefined ? data.level : 1
|
|
form.level = data.level !== undefined ? data.level : 1
|
|
|
form.profile = data.profile || ''
|
|
form.profile = data.profile || ''
|
|
|
form.status = data.status !== undefined ? data.status : 1
|
|
form.status = data.status !== undefined ? data.status : 1
|
|
|
|
|
+ form.provinceId = data.province_id || data.provinceId || null
|
|
|
form.cityId = data.city_id || data.cityId || null
|
|
form.cityId = data.city_id || data.cityId || null
|
|
|
|
|
+
|
|
|
|
|
+ if (form.provinceId) {
|
|
|
|
|
+ await loadCityList(form.provinceId)
|
|
|
|
|
+ } else if (form.cityId) {
|
|
|
|
|
+ await loadCityList()
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('加载详情失败:', error)
|
|
console.error('加载详情失败:', error)
|
|
@@ -323,6 +370,7 @@ const handleSubmit = async () => {
|
|
|
level: form.level,
|
|
level: form.level,
|
|
|
profile: form.profile,
|
|
profile: form.profile,
|
|
|
status: form.status,
|
|
status: form.status,
|
|
|
|
|
+ province_id: form.provinceId,
|
|
|
city_id: form.cityId
|
|
city_id: form.cityId
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -341,13 +389,12 @@ const handleSubmit = async () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- // 加载城市列表
|
|
|
|
|
- loadCityList()
|
|
|
|
|
-
|
|
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
+ await loadProvinceList()
|
|
|
|
|
+
|
|
|
if (route.params.id) {
|
|
if (route.params.id) {
|
|
|
isEdit.value = true
|
|
isEdit.value = true
|
|
|
- loadDetail(route.params.id)
|
|
|
|
|
|
|
+ await loadDetail(route.params.id)
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|