211 lines
4.8 KiB
Vue
211 lines
4.8 KiB
Vue
<template>
|
|
<el-card>
|
|
<div slot="header" class="clearfix">
|
|
<span>我的名片</span>
|
|
</div>
|
|
|
|
<!-- 表单开始 -->
|
|
<vk-data-form
|
|
ref="form1"
|
|
v-model="form1.data"
|
|
:rules="form1.props.rules"
|
|
:action="form1.props.action"
|
|
:form-type="form1.props.formType"
|
|
:columns='form1.props.columns'
|
|
:loading.sync="form1.props.loading"
|
|
label-width="140px"
|
|
input-width="400px"
|
|
:before-action="form1.props.beforeAction"
|
|
@success="onFormSuccess"
|
|
>
|
|
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
|
<!-- <template v-slot:editor="{ form, keyName }">
|
|
<vk-data-input-editor v-model="form[keyName]" placeholder="开始输入" width="750px"></vk-data-input-editor>
|
|
</template> -->
|
|
|
|
</vk-data-form>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表单相关开始-----------------------------------------------------------
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
companyIntroduction: ''
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "no",
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{
|
|
key: "logo",
|
|
title: "Logo",
|
|
type: "image",
|
|
limit: 1
|
|
},
|
|
{
|
|
key: "personName",
|
|
title: "姓名",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "position",
|
|
title: "职位",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "address",
|
|
title: "地区",
|
|
type: "address"
|
|
},
|
|
{
|
|
key: "addressDetail",
|
|
title: "详细地址",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "email",
|
|
title: "邮箱",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "website",
|
|
title: "网址",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "mainBusiness",
|
|
title: "主营业务",
|
|
type: "textarea"
|
|
},
|
|
{
|
|
key: "mainSpotCategoryIds",
|
|
title: "主营商品",
|
|
type: "checkbox",
|
|
action: "client/spot/category/pub/getList",
|
|
actionData: {
|
|
whereJson: {
|
|
level: 2
|
|
}
|
|
},
|
|
props: {
|
|
list: "data",
|
|
value: "_id",
|
|
label: "name"
|
|
}
|
|
},
|
|
|
|
{
|
|
key: "companyIntroduction",
|
|
title: "企业简介",
|
|
type: "editor"
|
|
},
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
logo: [{
|
|
required: true,
|
|
message: "Logo不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
personName: [{
|
|
required: true,
|
|
message: "姓名不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
position: [{
|
|
required: true,
|
|
message: "职位不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
address: [{
|
|
required: true,
|
|
message: "地区不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
addressDetail: [{
|
|
required: true,
|
|
message: "详细地址不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
email: [{
|
|
required: true,
|
|
message: "邮箱不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
// website: [{
|
|
// required: true,
|
|
// message: "logo不能为空",
|
|
// trigger: ['blur', 'change']
|
|
// }],
|
|
mainBusiness: [{
|
|
required: true,
|
|
message: "主营业务不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
mainSpotCategoryIds: [{
|
|
required: true,
|
|
message: "主营商品不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
companyIntroduction: [{
|
|
required: true,
|
|
message: "企业简介不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "update",
|
|
// 表单是否在请求中
|
|
loading: false,
|
|
// 是否显示表单1 的弹窗
|
|
show: false,
|
|
beforeAction: (formData) => {
|
|
vk.userCenter.updateUser({
|
|
data: {
|
|
businessCard: formData
|
|
},
|
|
success: (data) => {
|
|
// 成功后的逻辑
|
|
this.$message({
|
|
type: 'success',
|
|
message: '保存成功'
|
|
})
|
|
}
|
|
});
|
|
return false;
|
|
},
|
|
}
|
|
},
|
|
// 表单相关结束-----------------------------------------------------------
|
|
}
|
|
},
|
|
created() {
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
vk.userCenter.getCurrentUserInfo({
|
|
success: (data) => {
|
|
if(data.userInfo.businessCard) {
|
|
this.form1.data = data.userInfo.businessCard
|
|
}
|
|
// 成功后的逻辑
|
|
console.log('用户信息: ', data);
|
|
}
|
|
});
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |