Files
xq-ui/src/views/xq/userInfo/update-user-info-dialog.vue
2024-04-20 23:00:05 +08:00

433 lines
14 KiB
Vue

<template>
<el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile" maxlength="11" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="昵称" prop="nickname">
<el-input v-model="form.nickname" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="职业" prop="profession">
<el-select v-model="form.profession" clearable size="small" style="width: 95%">
<el-option
v-for="dict in professionList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年收入" prop="annualIncome">
<el-select v-model="form.annualIncome" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userAnnualIncomeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="体型" prop="somatotype">
<el-select v-model="form.somatotype" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userSomatotypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生肖" prop="zodiac">
<el-select v-model="form.zodiac" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userZodiacList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="星座" prop="sign">
<el-select v-model="form.sign" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userSignList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司性质" prop="companyNature">
<el-select v-model="form.companyNature" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userCompanyNatureList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="为谁征婚" prop="forPersonals">
<el-select v-model="form.forPersonals" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userForPersonalsList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名族" prop="nation">
<el-input v-model="form.nation"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="住房情况" prop="housingStatus">
<el-select v-model="form.housingStatus" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userHousingStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购车情况" prop="carStatus">
<el-select v-model="form.carStatus" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userCarStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否吸烟" prop="smokeStatus">
<el-select v-model="form.smokeStatus" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userSmokeStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否喝酒" prop="drinkStatus">
<el-select v-model="form.drinkStatus" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userDrinkStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="有没有小孩" prop="childStatus">
<el-select v-model="form.childStatus" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userChildStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="家庭背景" prop="familyBackground">
<el-select v-model="form.familyBackground" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userFamilyBackgroundList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否接受异地恋" prop="loveAtDistance">
<el-select v-model="form.loveAtDistance" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userLoveAtDistanceList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="何时结婚" prop="whenMarriage">
<el-select v-model="form.whenMarriage" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userWhenMarriageList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否要小孩" prop="wantChild">
<el-select v-model="form.wantChild" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userWantChildList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="愿与对方父母同住" prop="liveAtParent">
<el-select v-model="form.liveAtParent" clearable size="small" style="width: 95%">
<el-option
v-for="dict in userLiveAtParentList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="毕业院校" prop="graduateSchool">
<el-input v-model="form.graduateSchool" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="兴趣爱好" prop="hobbys">
<el-input v-model="form.hobbys" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="自我描述" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="2"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="open = false"> </el-button>
</div>
</el-dialog>
</template>
<script>
import {
appUserTypeList,
booleanList,
finishStatusList,
genderList,
memberTypeList,
onlineStatusList,
professionList,
userAnnualIncomeList,
userCarStatusList,
userChildStatusList,
userCompanyNatureList,
userDrinkStatusList,
userEducationList,
userFamilyBackgroundList,
userFamilyRankingList,
userFindTagList,
userForPersonalsList,
userHousingStatusList,
userLiveAtParentList,
userLoveAtDistanceList,
userMarriageList,
userSignList,
userSmokeStatusList,
userSomatotypeList,
userStatusList,
userWantChildList,
userWhenMarriageList,
userZodiacList,
videoStatusList
} from '@/constant/statusMap'
import Treeselect from '@riophae/vue-treeselect'
import { getTreeAreaCode } from '@/api/xq/areaCode'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { updateUser } from '@/api/xq/user'
import { getUserInfoUpdate, updateUserInfo } from '@/api/xq/userInfo'
export default {
name: "UserInfo",
components: { Treeselect },
data() {
return {
genderList,userStatusList,finishStatusList,userSomatotypeList,userZodiacList,userSignList,
userEducationList,userCompanyNatureList,userAnnualIncomeList,userForPersonalsList,
userHousingStatusList,userCarStatusList,userSmokeStatusList,userMarriageList,
userDrinkStatusList,userChildStatusList,userFamilyBackgroundList,userFamilyRankingList,
userLoveAtDistanceList,userWhenMarriageList,userWantChildList,userLiveAtParentList,
userFindTagList,appUserTypeList,professionList,
videoStatusList,onlineStatusList,memberTypeList,
booleanList,
open:false,
buttonLoading: false,
form:{
userId: undefined,
nickname: undefined,
profession: undefined,
annualIncome: undefined,
somatotype: undefined,
zodiac: undefined,
sign: undefined,
companyNature: undefined,
forPersonals: undefined,
nation: undefined,
housingStatus: undefined,
carStatus: undefined,
smokeStatus: undefined,
drinkStatus: undefined,
childStatus: undefined,
familyBackground: undefined,
loveAtDistance: undefined,
whenMarriage: undefined,
wantChild: undefined,
liveAtParent: undefined,
graduateSchool: undefined,
hobbys: undefined,
remark: undefined,
},
rules:{
annualIncome: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
profession: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
marriage: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
education: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
addressCode: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
residenceCode: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
weight: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
height: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
birthday: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
gender: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
avatar: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
nickname: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
mobile: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
},
areaOption: [],
};
},
created() {
getTreeAreaCode().then(response => {
this.areaOption = response.data
})
},
methods: {
normalizer(node){
return {
id: node.id,
label: node.label,
children: node.children && node.children.length > 0 ? node.children : 0,
}
},
init(row){
this.form.userId = row.userId
this.open = true;
this.$nextTick(() => {
this.$refs['form'].resetFields();
getUserInfoUpdate(row.userId).then(response => {
this.form = response.data
})
})
},
submitForm(){
updateUserInfo(this.form).then(data => {
this.$modal.msgSuccess("修改用户信息成功");
this.buttonLoading = false;
this.open = false
this.$emit('refreshDataList')
}).finally(() => {
this.buttonLoading = false;
});
}
}
};
</script>