391 lines
13 KiB
Vue
391 lines
13 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="type">
|
||
<el-select v-model="form.type" clearable size="small" style="width: 95%">
|
||
<el-option
|
||
v-for="dict in appUserTypeList"
|
||
: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="mobile">
|
||
<el-input v-model="form.mobile" maxlength="11" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="昵称" prop="nickname">
|
||
<el-input v-model="form.nickname" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<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-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="头像" prop="avatar">
|
||
<image-upload2 v-model="form.avatar"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="性别" prop="gender">
|
||
<el-select v-model="form.gender" clearable size="small" style="width: 95%">
|
||
<el-option
|
||
v-for="dict in genderList"
|
||
: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="birthday" style="width: 95%">
|
||
<el-date-picker
|
||
v-model="form.birthday"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="身高(cm)" prop="height">
|
||
<el-input-number v-model="form.height" controls-position="right" :min="100" style="width: 95%"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="体重(kg)" prop="weight">
|
||
<el-input-number v-model="form.weight" controls-position="right" :min="30" style="width: 95%"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="居住地" prop="residenceCode">
|
||
<el-cascader v-model="form.residenceCode" :props="{'value':'id'}" :options="areaOption" filterable style="width: 95%" />
|
||
<!-- <treeselect v-model="form.residenceCode" :normalizer="normalizer" :options="areaOption" :show-count="true" :disable-branch-nodes="true" />-->
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="户籍地" prop="addressCode">
|
||
<el-cascader v-model="form.addressCode" :props="{'value':'id'}" :options="areaOption" filterable style="width: 95%" />
|
||
<!-- <treeselect v-model="form.addressCode" :normalizer="normalizer" :options="areaOption" :show-count="true" :disable-branch-nodes="true" />-->
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="学历" prop="education">
|
||
<el-select v-model="form.education" clearable size="small" style="width: 95%">
|
||
<el-option
|
||
v-for="dict in userEducationList"
|
||
: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="marriage">
|
||
<el-select v-model="form.marriage" clearable size="small" style="width: 95%">
|
||
<el-option
|
||
v-for="dict in userMarriageList"
|
||
: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="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="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-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-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="照片" prop="pictures">
|
||
<image-upload2 v-model="form.pictures" limit="6"/>
|
||
</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 { addUser } from '@/api/xq/user'
|
||
|
||
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:{
|
||
annualIncome: undefined,
|
||
profession: undefined,
|
||
marriage: undefined,
|
||
education: undefined,
|
||
addressCode: undefined,
|
||
residenceCode: undefined,
|
||
weight: undefined,
|
||
height: undefined,
|
||
birthday: undefined,
|
||
gender: undefined,
|
||
avatar: undefined,
|
||
nickname: undefined,
|
||
mobile: undefined,
|
||
type: undefined,
|
||
forPersonals: undefined,
|
||
carStatus: undefined,
|
||
housingStatus: undefined,
|
||
pictures: 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" }
|
||
],
|
||
forPersonals: [
|
||
{ required: true, message: "数据不能为空", trigger: "blur" }
|
||
],
|
||
carStatus: [
|
||
{ required: true, message: "数据不能为空", trigger: "blur" }
|
||
],
|
||
housingStatus: [
|
||
{ required: true, message: "数据不能为空", trigger: "blur" }
|
||
],
|
||
},
|
||
areaOption: [],
|
||
};
|
||
},
|
||
created() {
|
||
getTreeAreaCode().then(response => {
|
||
this.areaOption = this.getTreeData(response.data)
|
||
})
|
||
},
|
||
methods: {
|
||
getTreeData(data){
|
||
for(var i=0;i<data.length;i++){
|
||
if(data[i].children.length<1){
|
||
// children若为空数组，则将children设为undefined
|
||
data[i].children=undefined;
|
||
}else {
|
||
// children若不为空数组，则继续递归调⽤本⽅法
|
||
this.getTreeData(data[i].children);
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
normalizer(node){
|
||
return {
|
||
id: node.id,
|
||
label: node.label,
|
||
children: node.children && node.children.length > 0 ? node.children : 0,
|
||
}
|
||
},
|
||
options(){
|
||
getTreeAreaCode().then(response => {
|
||
return response.data
|
||
})
|
||
},
|
||
init(){
|
||
this.open = true;
|
||
this.$nextTick(() => {
|
||
this.$refs['form'].resetFields();
|
||
// getTreeAreaCode().then(response => {
|
||
// this.areaOption = response.data
|
||
// })
|
||
})
|
||
},
|
||
submitForm(){
|
||
this.$refs['form'].validate((valid) => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
addUser({
|
||
...this.form,
|
||
residenceCode: this.getCode(this.form.residenceCode),
|
||
addressCode: this.getCode(this.form.addressCode)
|
||
}).then(data => {
|
||
this.$modal.msgSuccess("新增用户成功");
|
||
this.buttonLoading = false;
|
||
this.open = false
|
||
this.$emit('refreshDataList')
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
})
|
||
},
|
||
getCode(code){
|
||
if(!code){
|
||
return code;
|
||
}
|
||
if(Array.isArray(code)){
|
||
return code[code.length-1]
|
||
}
|
||
return code;
|
||
}
|
||
}
|
||
};
|
||
</script>
|