测试
<template>
<div>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<nav-left/>
</el-aside>
<el-main>
<AddDialog :formModel="formModel" :ruleArray="ruleArray" @submitForm="submitForm"/>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import NavLeft from "@/components/navLeft.vue";
import AddDialog from "@/components/AddDialog.vue";
import { Promise } from "q";
import { resolve } from "url";
let validatePhone = (rule, value, callback) => {
if (value && value.trim() && !/^1[34578]\d{9}$/.test(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
};
let validateEmail = (rule, value, callback) => {
if (
value &&
value.trim() &&
!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
) {
callback(new Error("请输入正确的邮箱号"));
} else {
callback();
}
};
export default {
name: "Home",
data() {
return {
val: "",
info: "",
//表单字段写死，后台取值之后直接给value赋值即可
formModel: [
{
title: "姓名",
file: "name",
type: "input",
value: ""
},
{
title: "年龄",
file: "age",
type: "input",
value: ""
},
{
title: "邮箱",
file: "email",
type: "input",
value: ""
},
{
title: "手机号",
file: "mobile",
type: "input",
value: ""
},
{
title: "性别",
file: "sex",
type: "select",
value: "",
selectList: [{ value: "1", label: "男" }, { value: "0", label: "女" }]
},
{
title: "状态",
file: "enabled",
type: "select",
value: "",
selectList: [
{ value: "1", label: "启用" },
{ value: "0", label: "停用" }
]
}
],
ruleArray: {
name: [{ required: true, message: "请输入姓名"}],
enabled: [{ required: true, message: "请选择状态" }],
mobile: [{ validator: validatePhone }],
email: [{ validator: validateEmail }]
}
};
},
components: {
NavLeft,
AddDialog
},
created() {
this.getInfo();
},
methods: {
async getInfo(fn) {
//模拟后台获取到个人信息
let ret = await this.getData(() => {
this.info = {
name: "张三",
age: "18",
sex: "0",
mobile: "13588450166",
email: "",
enabled: "1"
};
});
//在form表单字段绑定
for (let key in this.info) {
let ret = this.formModel.filter(item => {
return item.file === key;
});
if (ret) {
ret[0].value = this.info[key];
}
}
return ret;
},
getData(fn) {
return new Promise(resolve => {
setTimeout(() => resolve(fn()), 2000);
});
},
submitForm(val) {
this.info = val;
}
}
};
</script>
<style lang="less" scoped>
</style>