<template>
|
<div class="basic-info">
|
<div class="head-name">基本资料</div>
|
|
<el-form
|
:model="userInfo"
|
:rules="rules"
|
:label-position="'left'"
|
ref="ruleForm"
|
label-width="90px"
|
class="add-ruleForm"
|
>
|
<div class="area-title">基本信息</div>
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="userInfo.username" style="width: 200px"></el-input>
|
</el-form-item>
|
<el-form-item label="注册类型" prop="userType">
|
<el-radio-group v-model="userInfo.userType">
|
<el-radio :label="1">个人</el-radio>
|
<el-radio :label="2">公司</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="trueName">
|
<el-input v-model="userInfo.trueName" style="width: 200px"></el-input>
|
</el-form-item>
|
|
<div class="area-title" style="margin-top: 50px">业务信息</div>
|
|
<el-form-item label="行业应用" prop="industryId">
|
<el-select
|
v-model="userInfo.industryId"
|
placeholder="行业"
|
style="width: 410px"
|
>
|
<el-option
|
v-for="(item, index) in industrys"
|
:label="item.name"
|
:value="item.id"
|
:key="index"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="公司名称" prop="companyName">
|
<el-input
|
v-model="userInfo.companyName"
|
style="width: 410px"
|
></el-input>
|
</el-form-item>
|
|
<div class="area-title" style="margin-top: 50px">联系信息</div>
|
|
<el-form-item label="所在地区" prop="areaId">
|
<el-cascader
|
v-model="userInfo.address"
|
:props="options"
|
style="width: 410px"
|
></el-cascader>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phoneNum">
|
<el-input v-model="userInfo.phoneNum" style="width: 200px"></el-input>
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="userInfo.email" style="width: 410px"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<div class="searchBtn" @click="save">保存</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getUserInfo, getAreas, getDic, entireUserInfo } from "@/api/login";
|
|
export default {
|
components: {},
|
data() {
|
return {
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
], //搜索时间
|
page: 1,
|
size: 10, //分页相关
|
inputText: "", //输入框内容
|
industrys: [],
|
activeIndex: 0,
|
total: 0, //总数
|
isShowAdd: false, //是否展示新增弹窗
|
isShowUnbind: false, //是否展示解绑弹窗
|
isShowRelate: false,
|
unbindId: "",
|
options: {
|
lazy: true,
|
lazyLoad(node, resolve) {
|
// 懒加载节点省市数据
|
const { level } = node;
|
let nodes;
|
console.log("节点：", level, node);
|
getAreas({ parentId: level == 0 ? 0 : node.value })
|
.then((json) => {
|
nodes = json.data.list;
|
nodes = nodes.map((item) => ({
|
value: item.id,
|
label: item.name,
|
level: item.level,
|
leaf: level >= 1,
|
}));
|
resolve(nodes);
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
},
|
userInfo: {
|
userId: "",
|
username: "",
|
phoneNum: "",
|
type: 1, // 普通用户还是开发者
|
userType: 1, // 个人还是公司
|
industryId: "",
|
address: [110100, 110105],
|
areaId: "",
|
provinceId: "",
|
trueName: "",
|
companyName: "",
|
email: "",
|
},
|
durationArr: [
|
{
|
value: 0,
|
label: "一年",
|
},
|
{
|
value: 1,
|
label: "两年",
|
},
|
], //所属集群下拉框
|
cluster: null, //选中的集群类型
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
rules: {
|
trueName: [
|
{ required: true, message: "请填写真实姓名", trigger: "blur" },
|
],
|
username: [
|
{ required: true, message: "请填写用户名", trigger: "blur" },
|
],
|
phoneNum: [
|
{ required: true, message: "请填写手机号", trigger: "blur" },
|
],
|
userType: [
|
{ required: true, message: "请选择注册类型", trigger: "blur" },
|
],
|
},
|
};
|
},
|
methods: {
|
goback() {
|
this.isShowRelate = false;
|
this.activeIndex = 0;
|
},
|
goto(i) {
|
this.activeIndex = i;
|
},
|
async getIndustrys() {
|
let res = await getDic();
|
if (res.success) {
|
this.industrys = res.data.dics;
|
} else {
|
console.log("查询行业列表失败！");
|
}
|
},
|
save() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
this.userInfo.provinceId = this.userInfo.address[0];
|
this.userInfo.areaId = this.userInfo.address[1];
|
entireUserInfo(this.userInfo)
|
.then((res) => {
|
this.$notify.success("账户信息保存成功");
|
// this.$emit("gotolist")
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify.error("账户信息保存失败");
|
});
|
}
|
});
|
},
|
// 跳到设备详情
|
checkDetail(row) {
|
this.$router.push({
|
path: "/equipmentDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
ndid: row.id,
|
},
|
});
|
},
|
|
// 跳到算法详情
|
algorithmDetail(row) {
|
this.$router.push({
|
path: "/algorithmDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
},
|
});
|
},
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size;
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page;
|
},
|
|
//解绑按钮
|
Untying(row) {
|
console.log(row);
|
this.unbindId = row.id;
|
this.isShowUnbind = true;
|
},
|
|
//获得默认时间
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date();
|
const start = new Date();
|
const nowDate = new Date();
|
nowDate.setHours(0);
|
nowDate.setMinutes(0);
|
nowDate.setSeconds(0);
|
nowDate.setMilliseconds(0);
|
start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
|
return [
|
this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
|
];
|
},
|
|
//关闭新增弹窗
|
closeAddBox() {
|
this.isShowAdd = false;
|
},
|
// 关闭解绑弹窗
|
closeUnbindBox() {
|
this.isShowUnbind = false;
|
},
|
|
//解绑成功回调
|
reflash() {
|
this.isShowUnbind = false;
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit();
|
this.inputText = "";
|
},
|
|
//退出集群
|
quitCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showQuit = true;
|
},
|
|
//加入集群
|
joinCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showJoin = true;
|
},
|
},
|
mounted() {},
|
created() {
|
getUserInfo().then((res) => {
|
this.userInfo = res.data;
|
this.userInfo.address = [this.userInfo.provinceId, this.userInfo.areaId];
|
});
|
this.getIndustrys();
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.basic-info {
|
padding: 20px;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
margin-bottom: 30px;
|
}
|
.add-ruleForm::v-deep {
|
.el-form-item__label {
|
font-size: 14px;
|
color: #999999;
|
}
|
.area-title {
|
font-weight: 700;
|
color: #666666;
|
font-size: 14px;
|
line-height: 20px;
|
margin-bottom: 20px;
|
}
|
.el-input__inner {
|
// width: 200px;
|
color: #3d3d3d;
|
border-radius: 3px;
|
border-color: #c0c5cc;
|
height: 32px;
|
line-height: 32px;
|
}
|
}
|
.searchBtn {
|
width: 80px;
|
margin-top: 50px;
|
height: 40px;
|
line-height: 40px;
|
border-radius: 3px;
|
cursor: pointer;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
}
|
}
|
</style>
|
|
<style >
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
</style>
|
