我的收藏模块
This commit is contained in:
熊丽君
244
src/views/home/info.vue
Normal file
244
src/views/home/info.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="info_page">
|
||||
<div class="box">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
style="width:514px"
|
||||
>
|
||||
<el-form-item label="企业全称">
|
||||
<el-input v-model="form.companyName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业行业">
|
||||
<el-input v-model="form.companyType"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户姓名">
|
||||
<el-input v-model="form.nickName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户职位">
|
||||
<el-input v-model="form.note"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业地址" required>
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="addressType">
|
||||
<el-select
|
||||
v-model="form.addressType"
|
||||
placeholder="请选择"
|
||||
@change="handleCity"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionList1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="cityId">
|
||||
<el-select v-model="form.cityId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in optionList2"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业画像" prop="labelIdList">
|
||||
<el-button size="small" @click="open">设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="box_r">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px;border-radius:50%"
|
||||
:src="avatar"
|
||||
:preview-src-list="[avatar]"
|
||||
>
|
||||
</el-image>
|
||||
<singleUpload v-model="url" text="修改头像" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="企业画像设置" :visible.sync="dialogVisible" width="20%">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item
|
||||
:label="item.name"
|
||||
v-for="(item, index) in labelList"
|
||||
:key="item.id"
|
||||
>
|
||||
<el-select v-model="arr[index]" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="i in item.labelList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="setIds">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import store from '@/store';
|
||||
import { uploadAvatar } from '@/api/user';
|
||||
import {
|
||||
getDictListByStatus,
|
||||
updateCompanyUser,
|
||||
getLabelSetting,
|
||||
userInfo
|
||||
} from '@/api/home/info';
|
||||
import singleUpload from '@/components/Upload/singleUpload';
|
||||
export default {
|
||||
components: { singleUpload },
|
||||
computed: {
|
||||
...mapGetters(['avatar'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
form: {
|
||||
companyName: '',
|
||||
companyType: '',
|
||||
nickName: '',
|
||||
note: '',
|
||||
addressType: '',
|
||||
cityId: '',
|
||||
address: '',
|
||||
labelIdList: ''
|
||||
},
|
||||
optionList1: [
|
||||
{
|
||||
value: 1,
|
||||
label: '地级市'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '合肥区县'
|
||||
}
|
||||
],
|
||||
optionList2: [],
|
||||
dialogVisible: false,
|
||||
labelList: [],
|
||||
arr: [],
|
||||
rules: {
|
||||
addressType: [{ required: true, message: '请选择', trigger: 'change' }],
|
||||
cityId: [{ required: true, message: '请选择', trigger: 'change' }]
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
url() {
|
||||
uploadAvatar({ icon: this.url }).then(res => {
|
||||
store.commit('SET_AVATAR', this.url);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
userInfo().then(({ data }) => {
|
||||
if (data) {
|
||||
data.addressType = data.addressType - 0;
|
||||
if (data.addressType == 1) {
|
||||
this.getType(true, data);
|
||||
} else {
|
||||
this.getCity(true, data);
|
||||
}
|
||||
}
|
||||
getLabelSetting({ companyId: data.companyId || 1 }).then(({ data }) => {
|
||||
this.labelList = data;
|
||||
this.arr = data.map(item =>
|
||||
item.labelList
|
||||
? item.labelList.filter(v => v.isHas)[0]
|
||||
? item.labelList.filter(v => v.isHas)[0].id
|
||||
: ''
|
||||
: undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 地级市切换
|
||||
handleCity(e) {
|
||||
this.form.cityId = '';
|
||||
// 地级市
|
||||
if (e === 1) {
|
||||
this.getType(false);
|
||||
} else {
|
||||
this.getCity(false);
|
||||
}
|
||||
},
|
||||
// 获取地级市
|
||||
getType(edit, info) {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.optionList2 = data;
|
||||
console.log(info);
|
||||
if (edit) this.form = info;
|
||||
});
|
||||
},
|
||||
// 获取地级市
|
||||
getCity(edit, info) {
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.optionList2 = data;
|
||||
if (edit) this.form = info;
|
||||
});
|
||||
},
|
||||
open() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setIds() {
|
||||
this.form.labelIdList = this.arr.filter(item => item);
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
updateCompanyUser(this.form).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
this.getUserInfo();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info_page {
|
||||
.box {
|
||||
display: flex;
|
||||
.box_r {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.el-image {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/deep/.el-upload-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user