<!--
|
* @Descripttion: 新增编辑查看设备
|
* @version: 1.0.0
|
* @Author: huangpan
|
* @Date: 2021-08-19 14:54:43
|
-->
|
<template>
|
<el-dialog :title="title" :visible.sync="isShow" width="600px" :modal-append-to-body="false"
|
:close-on-click-modal="false" class="operate-form custom-dialog-style">
|
<el-form ref="form" :model="form" :rules="rules" class="operate-form-model" label-width="80px">
|
<el-form-item label="名称" prop="userName">
|
<el-input v-model="form.userName" class="custom-input-style" clearable
|
placeholder="请输入不超过五个字的名字" />
|
</el-form-item>
|
<el-form-item label="账号" prop="userAccount">
|
<el-input v-model="form.userAccount" class="custom-input-style" clearable
|
placeholder="请输入手机号作为账号" />
|
</el-form-item>
|
<div class="tips">提示：平台默认密码为【1234abcd】</div>
|
</el-form>
|
<template slot="footer">
|
<el-button size="mini" @click="isShow = false" icon="close-circle">取消</el-button>
|
<el-button size="mini" v-if="operateData.type != 'view'" @click="submit" type="primary"
|
:loading="saveLoading" icon="save">提交</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
<script>
|
import AccountManageApi from '@/api/accountManage'
|
export default {
|
name: "operateForm",
|
components: {},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
require: true,
|
},
|
operateData: {
|
type: Object,
|
require: true,
|
},
|
},
|
data() {
|
return {
|
isShow: false,
|
// 接口代码
|
resCode: "0",
|
// 页面加载完成
|
pageReady: true,
|
// 标题
|
title: "",
|
// 提交loading
|
saveLoading: false,
|
// 表单
|
form: {
|
userAccount: null,
|
userName: null,
|
},
|
rules: {
|
userName: [
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
{ min: 1, max: 5, message: '请输入不超过五个字的名字', trigger: 'blur' },
|
],
|
userAccount: [
|
{ type: 'string', required: true, message: '请输入账号', trigger: 'blur' },
|
{ pattern: /^1\d{10}$/, message: '输入正确的手机号码', trigger: 'blur' }
|
]
|
},
|
// 设备类别
|
dicData: {
|
typeList: [],
|
},
|
};
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow, oldShow) {
|
if (newShow) {
|
// this.getList()
|
this.pageReady = false;
|
if (this.operateData.type === "add") {
|
this.title = "新增用户";
|
}
|
if (this.operateData.type === "edit") {
|
this.title = "编辑用户";
|
this.disabled = false;
|
this.viewData()
|
}
|
if (this.operateData.type === "details") {
|
this.title = "查看用户";
|
this.disabled = true;
|
this.viewData()
|
}
|
}
|
this.isShow = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
if (!newDialogShow) {
|
for (const i in this.form) {
|
this.form[i] = null
|
}
|
this.pageReady = false;
|
this.saveLoading = false;
|
}
|
this.$emit('update:dialogVisible', newDialogShow)
|
}
|
},
|
created() {
|
this.pageReady = false;
|
},
|
methods: {
|
/**
|
* @msg: 提交数据
|
*/
|
submit() {
|
this.$refs.form.validate().then(valid => {
|
if (valid) {
|
this.saveLoading = true;
|
let formData = Object.assign(
|
{
|
// defaultPassword: "04" + doEncrypt('888888')
|
},
|
this.form
|
);
|
// 新增
|
if (this.operateData.type === "add") {
|
this.addData(formData);
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
/**
|
* @msg: 新增数据接口调用
|
* @param {*} data 保存参数
|
*/
|
async addData(data) {
|
this.pageReady = true;
|
try {
|
AccountManageApi.addUser(data).then((res) => {
|
if (res.code === '200') {
|
this.$message.success("新增成功!");
|
this.isShow = false;
|
this.$emit("ok")
|
} else {
|
console.log(res, 'res')
|
this.$message.error(res.data.message ? res.data.message : "新增失败!");
|
this.saveLoading = false;
|
this.pageReady = false;
|
}
|
}).catch(() => {
|
this.saveLoading = false;
|
this.pageReady = false;
|
})
|
} catch (error) {
|
console.error(error);
|
this.saveLoading = false;
|
this.pageReady = false;
|
}
|
},
|
/**
|
* @msg: 获取查看数据
|
*/
|
async viewData() {
|
this.pageReady = false;
|
Object.keys(this.form).forEach((el) => {
|
if (el == 'voltageLevel') {
|
this.form[el] = this.operateData.data[el].split(',') || this.form[el];
|
} else {
|
this.form[el] = this.operateData.data[el] || this.form[el];
|
}
|
});
|
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
::v-deep {
|
.operate-form-model {
|
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
// background: #fff;
|
border-radius: 8px;
|
margin-bottom: 10px !important;
|
padding: 8px 20px 8px 20px !important;
|
.ant-form-item {
|
margin-bottom: 12px !important;
|
.ant-input,
|
.ant-select {
|
width: 300px;
|
}
|
.ant-cascader-picker {
|
.ant-input {
|
width: 300px;
|
}
|
}
|
}
|
.address {
|
.ant-form-item {
|
margin-bottom: 12px !important;
|
.ant-input,
|
.ant-select {
|
width: 300px;
|
}
|
}
|
}
|
}
|
}
|
.tips {
|
color: rgb(144, 147, 153);
|
font-size: 14px;
|
margin-bottom: 10px;
|
margin-left:80px;
|
}
|
</style>
|
