<template>
|
<div class="formInfo">
|
<el-form ref="form" :model="form" label-width="90px" :rules="rules">
|
<el-form-item label="类型" prop="type">
|
<el-radio v-model="form.userType" label="personal">个人</el-radio>
|
<el-radio v-model="form.userType" label="company">公司</el-radio>
|
</el-form-item>
|
|
<el-form-item
|
label="公司名称"
|
prop="name1"
|
v-if="form.userType == 'company'"
|
>
|
<el-input v-model="form.name1" placeholder="请输入公司名称"></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="联系人姓名"
|
prop="name2"
|
v-if="form.userType == 'company'"
|
>
|
<el-input
|
v-model="form.name2"
|
placeholder="请输入联系人姓名"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="name" v-else>
|
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
|
<el-form-item label="所在地" prop="addr">
|
<el-cascader
|
:props="props"
|
popper-class="location"
|
separator=" "
|
@change="handleChange"
|
v-model="form.addr"
|
></el-cascader>
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { getList } from "../api";
|
export default {
|
created() {},
|
data() {
|
return {
|
form: {
|
userType: "personal",
|
name: "",
|
name1: "",
|
name2: "",
|
email: "",
|
addr: "",
|
provinceId: "",
|
cityId: "",
|
labelList: "",
|
},
|
rules: {
|
name1: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
|
name2: [
|
{ required: true, message: "请输入联系人姓名", trigger: "blur" },
|
],
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
addr: [{ required: true, message: "请选择所在地", trigger: "blur" }],
|
email: [
|
{ required: true, message: "请输入邮箱", trigger: "blur" },
|
{
|
type: "email",
|
message: "邮箱格式有误",
|
trigger: "blur",
|
},
|
],
|
},
|
provinceOptions: [],
|
props: {
|
lazy: true, // 开启动态加载
|
expandTrigger: "hover",
|
lazyLoad: async (node, resolve) => {
|
// 设置加载数据源方法 默认执行一次
|
// node 为当前点击的节点
|
// resolve 为数据加载完成的回调(必须调用)
|
/* node此时属性为:
|
当前叶子 level：0
|
loaded：true
|
loading：false
|
是否是根 root：ture
|
*/
|
console.log(node);
|
|
if (node.level == 0) {
|
const res = await getList();
|
this.provinceOptions = res.data.map((item) => {
|
return {
|
value: item.id,
|
label: item.name, // 选项名
|
leaf: false, // 是否为末尾
|
};
|
});
|
resolve(this.provinceOptions);
|
}
|
|
if (node.level == 1) {
|
console.log("-------------");
|
this.provinceId = node.value;
|
const res2 = await getList({
|
parentId: node.value,
|
});
|
|
const arr = res2.data.map((item) => {
|
return {
|
value: item.id,
|
label: item.name, // 选项名
|
leaf: true, // 是否为末尾
|
};
|
});
|
console.log(arr);
|
resolve(arr);
|
} else {
|
resolve();
|
return false;
|
}
|
},
|
},
|
value: [],
|
};
|
},
|
|
methods: {
|
getFormData() {
|
const _this = this;
|
let data = null;
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
console.log(_this.form.userType);
|
if (_this.form.userType == "personal") {
|
data = {
|
userType: _this.form.userType,
|
name: _this.form.name,
|
email: _this.form.email,
|
addr: _this.form.labelList,
|
provinceId: _this.form.provinceId,
|
cityId: _this.form.cityId,
|
};
|
} else {
|
data = {
|
userType: _this.form.userType,
|
name: _this.form.name1 + " " + _this.form.name2,
|
email: _this.form.email,
|
addr: _this.form.labelList,
|
provinceId: _this.form.provinceId,
|
cityId: _this.form.cityId,
|
};
|
}
|
} else {
|
return false;
|
}
|
});
|
|
return data;
|
},
|
handleChange(val) {
|
this.form.provinceId = val[0] + "";
|
this.form.cityId = val[1] + "";
|
|
setTimeout(() => {
|
this.form.labelList =
|
document.querySelectorAll(".el-cascader input")[0].value;
|
}, 200);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.formInfo {
|
.el-form-item ::v-deep {
|
label {
|
font-size: 14px;
|
color: #fff;
|
text-align: left;
|
}
|
|
.el-radio {
|
.el-radio__inner {
|
background: none;
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
&::after {
|
width: 6px;
|
height: 6px;
|
}
|
}
|
|
.el-radio__label {
|
color: #fff !important;
|
}
|
}
|
|
.el-form-item__content {
|
margin-left: 110px !important;
|
text-align: left;
|
}
|
|
input {
|
background-color: rgba(0, 0, 0, 0.1);
|
color: #fff;
|
border: none;
|
caret-color: #fff !important;
|
}
|
|
input:-webkit-autofill,
|
textarea:-webkit-autofill,
|
select:-webkit-autofill {
|
-webkit-text-fill-color: #fff !important;
|
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
background-color: transparent;
|
background-image: none;
|
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
|
}
|
|
.el-cascader {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.el-popper.el-cascader__dropdown.location {
|
background-color: rgb(77, 72, 111);
|
border: none;
|
margin: 0 0;
|
|
* {
|
color: #fff;
|
border-color: rgba(255, 255, 2555, 0.1);
|
}
|
|
.el-cascader-node {
|
background-color: rgb(77, 72, 111);
|
}
|
|
.in-active-path {
|
background-color: rgb(98, 87, 125) !important;
|
}
|
|
.el-cascader-node:hover {
|
background-color: rgb(98, 87, 125) !important;
|
}
|
|
.el-scrollbar__view {
|
padding: 0;
|
}
|
|
.popper__arrow::after,
|
.popper__arrow {
|
display: none;
|
}
|
|
.el-cascader-node__label {
|
text-align: left;
|
}
|
|
.el-cascader-menu__wrap {
|
width: 226px;
|
height: 175px;
|
}
|
}
|
</style>
|
