|
|
@@ -3,7 +3,7 @@
|
|
|
<h2 class="page-title">{{ isEdit ? '编辑红娘' : '添加红娘' }}</h2>
|
|
|
|
|
|
<el-card shadow="never">
|
|
|
- <el-form ref="formRef" :model="matchMaker" :rules="rules" label-width="120px">
|
|
|
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
|
|
<el-form-item label="红娘头像" prop="avatarUrl">
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
@@ -12,7 +12,7 @@
|
|
|
:before-upload="handleBeforeUpload"
|
|
|
:http-request="handleUpload"
|
|
|
>
|
|
|
- <img v-if="matchMaker.avatarUrl" :src="matchMaker.avatar_url" class="avatar-preview" />
|
|
|
+ <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar-preview" />
|
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
</el-upload>
|
|
|
<div class="upload-tip">建议尺寸:200x200px,支持jpg、png格式,不超过2MB</div>
|
|
|
@@ -21,12 +21,12 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="真实姓名" prop="realName">
|
|
|
- <el-input v-model="matchMaker.real_name" placeholder="请输入真实姓名" />
|
|
|
+ <el-input v-model="form.realName" placeholder="请输入真实姓名" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="手机号" prop="phone">
|
|
|
- <el-input v-model="matchMaker.phone" placeholder="请输入手机号" />
|
|
|
+ <el-input v-model="form.phone" placeholder="请输入手机号" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -34,7 +34,7 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="性别" prop="gender">
|
|
|
- <el-radio-group v-model="matchMaker.gender">
|
|
|
+ <el-radio-group v-model="form.gender">
|
|
|
<el-radio :label="1">男</el-radio>
|
|
|
<el-radio :label="2">女</el-radio>
|
|
|
</el-radio-group>
|
|
|
@@ -42,7 +42,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="出生日期" prop="birthDate">
|
|
|
- <el-date-picker v-model="matchMaker.birth_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
|
+ <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -50,7 +50,7 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="红娘类型" prop="matchmakerType">
|
|
|
- <el-radio-group v-model="matchMaker.matchmakerType">
|
|
|
+ <el-radio-group v-model="form.matchmakerType">
|
|
|
<el-radio :label="1">兼职</el-radio>
|
|
|
<el-radio :label="2">全职</el-radio>
|
|
|
</el-radio-group>
|
|
|
@@ -58,7 +58,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="等级" prop="level">
|
|
|
- <el-select v-model="matchMaker.level" placeholder="请选择等级" style="width: 100%">
|
|
|
+ <el-select v-model="form.level" placeholder="请选择等级" style="width: 100%">
|
|
|
<el-option label="青铜" :value="1" />
|
|
|
<el-option label="白银" :value="2" />
|
|
|
<el-option label="黄金" :value="3" />
|
|
|
@@ -69,12 +69,27 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="城市" prop="cityId">
|
|
|
+ <el-select v-model="form.cityId" placeholder="请选择城市" filterable style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="city in cityList"
|
|
|
+ :key="city.id"
|
|
|
+ :label="city.name"
|
|
|
+ :value="city.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
<el-form-item label="个人简介" prop="profile">
|
|
|
- <el-input v-model="matchMaker.profile" type="textarea" :rows="4" placeholder="请输入个人简介" />
|
|
|
+ <el-input v-model="form.profile" type="textarea" :rows="4" placeholder="请输入个人简介" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
- <el-radio-group v-model="matchMaker.status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
<el-radio :label="1">正常</el-radio>
|
|
|
<el-radio :label="0">禁用</el-radio>
|
|
|
<el-radio :label="2">离职</el-radio>
|
|
|
@@ -105,18 +120,20 @@ const router = useRouter()
|
|
|
const isEdit = ref(false)
|
|
|
const submitLoading = ref(false)
|
|
|
const formRef = ref(null)
|
|
|
+const cityList = ref([])
|
|
|
|
|
|
-const matchMaker = reactive({
|
|
|
+const form = reactive({
|
|
|
matchmakerId: null,
|
|
|
- avatar_url: '',
|
|
|
- real_name: '',
|
|
|
+ avatarUrl: '',
|
|
|
+ realName: '',
|
|
|
phone: '',
|
|
|
gender: 1,
|
|
|
- birth_date: null,
|
|
|
+ birthDate: null,
|
|
|
matchmakerType: 2,
|
|
|
level: 1,
|
|
|
profile: '',
|
|
|
- status: 1
|
|
|
+ status: 1,
|
|
|
+ cityId: null
|
|
|
})
|
|
|
|
|
|
const rules = {
|
|
|
@@ -127,11 +144,36 @@ const rules = {
|
|
|
level: [{ required: true, message: '请选择等级', trigger: 'change' }]
|
|
|
}
|
|
|
|
|
|
+// 加载城市列表
|
|
|
+const loadCityList = async () => {
|
|
|
+ try {
|
|
|
+ const response = await request.get(API_ENDPOINTS.CITY_LIST)
|
|
|
+ if (response.code === 200) {
|
|
|
+ cityList.value = response.data || []
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载城市列表失败:', error)
|
|
|
+ ElMessage.error('加载城市列表失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const loadDetail = async (id) => {
|
|
|
try {
|
|
|
const response = await request.get(`${API_ENDPOINTS.MATCHMAKER_DETAIL}/${id}`)
|
|
|
if (response.code === 200) {
|
|
|
- Object.assign(matchMaker, response.data)
|
|
|
+ const data = response.data
|
|
|
+ // 将后端返回的 snake_case 字段映射到前端的驼峰字段
|
|
|
+ form.matchmakerId = data.matchmaker_id || data.matchmakerId || null
|
|
|
+ form.avatarUrl = data.avatar_url || data.avatarUrl || ''
|
|
|
+ form.realName = data.real_name || data.realName || ''
|
|
|
+ form.phone = data.phone || ''
|
|
|
+ form.gender = data.gender !== undefined ? data.gender : 1
|
|
|
+ form.birthDate = data.birth_date || data.birthDate || null
|
|
|
+ form.matchmakerType = data.matchmaker_type !== undefined ? data.matchmaker_type : 2
|
|
|
+ form.level = data.level !== undefined ? data.level : 1
|
|
|
+ form.profile = data.profile || ''
|
|
|
+ form.status = data.status !== undefined ? data.status : 1
|
|
|
+ form.cityId = data.city_id || data.cityId || null
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载详情失败:', error)
|
|
|
@@ -193,11 +235,11 @@ const handleUpload = async (options) => {
|
|
|
}
|
|
|
|
|
|
// 使用nextTick确保响应式更新
|
|
|
- matchMaker.avatarUrl = imageUrl
|
|
|
+ form.avatarUrl = imageUrl
|
|
|
|
|
|
// 强制触发视图更新
|
|
|
setTimeout(() => {
|
|
|
- console.log('当前form.avatarUrl值:', matchMaker.avatarUrl)
|
|
|
+ console.log('当前form.avatarUrl值:', form.avatarUrl)
|
|
|
}, 100)
|
|
|
|
|
|
ElMessage.success('头像上传成功')
|
|
|
@@ -217,11 +259,25 @@ const handleSubmit = async () => {
|
|
|
await formRef.value.validate()
|
|
|
submitLoading.value = true
|
|
|
|
|
|
- const url = isEdit.value ? `${API_ENDPOINTS.MATCHMAKER_UPDATE}/${matchMaker.matchmakerId}` : API_ENDPOINTS.MATCHMAKER_CREATE
|
|
|
+ // 将前端的驼峰字段转换为后端期望的 snake_case 格式
|
|
|
+ const submitData = {
|
|
|
+ matchmaker_id: form.matchmakerId,
|
|
|
+ avatar_url: form.avatarUrl,
|
|
|
+ real_name: form.realName,
|
|
|
+ phone: form.phone,
|
|
|
+ gender: form.gender,
|
|
|
+ birth_date: form.birthDate,
|
|
|
+ matchmaker_type: form.matchmakerType,
|
|
|
+ level: form.level,
|
|
|
+ profile: form.profile,
|
|
|
+ status: form.status,
|
|
|
+ city_id: form.cityId
|
|
|
+ }
|
|
|
+
|
|
|
+ const url = isEdit.value ? `${API_ENDPOINTS.MATCHMAKER_UPDATE}/${form.matchmakerId}` : API_ENDPOINTS.MATCHMAKER_CREATE
|
|
|
const method = isEdit.value ? 'put' : 'post'
|
|
|
-
|
|
|
- console.log(matchMaker)
|
|
|
- const response = await request[method](url, matchMaker)
|
|
|
+
|
|
|
+ const response = await request[method](url, submitData)
|
|
|
if (response.code === 200) {
|
|
|
ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
|
|
|
router.push('/matchmaker/list')
|
|
|
@@ -234,6 +290,9 @@ const handleSubmit = async () => {
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
+ // 加载城市列表
|
|
|
+ loadCityList()
|
|
|
+
|
|
|
if (route.params.id) {
|
|
|
isEdit.value = true
|
|
|
loadDetail(route.params.id)
|