vue2+springboot实现表单弹窗的跳转并回显数据
vue2+springboot实现表单弹窗的跳转并回显数据
·
运行效果如下
本篇内容仅展示前端代码
点击此图标跳转表单弹窗,该页面实现代码:vue2+springboot实现el-tree的分页查询、模糊查询_weixin_53952829的博客-CSDN博客
表单弹窗
html代码
el-dialog对话框嵌套表单
<!--修改成员信息弹窗 start-->
<el-dialog title="修改成员信息" :visible.sync="dialogVisible3" :before-close="handleClose3">
<el-form
class="d-ruleForm3"
:model="ruleForm3"
:rules="rules3"
ref="ruleForm3"
label-width="130px"
size="mini"
>
<el-form-item label="姓名" prop="realname">
<el-input v-model="ruleForm3.realname"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm3.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="ruleForm3.phone"></el-input>
</el-form-item>
<el-form-item label="部门名" prop="deptName">
<el-select
v-model="ruleForm3.deptName"
placeholder="请选择部门"
@change="selectChanged"
>
<el-option
v-for="item in dn"
:value="item.id"
:key="item.id"
:label="item.deptName"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="职位名" prop="positionName">
<el-select
v-model="ruleForm3.positionName"
placeholder="请选择职位"
@change="selectChanged1"
>
<el-option
v-for="item in pn"
:value="item.id"
:key="item.id"
:label="item.positionName"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select v-model="ruleForm3.gender" placeholder="请选择性别">
<el-option label="男" value="0"></el-option>
<el-option label="女" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="就职状态" prop="status">
<el-select v-model="ruleForm3.status" placeholder="请选择状态">
<el-option label="在职" value="1"></el-option>
<el-option label="离职" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="账号状态" prop="accountStatus">
<el-select v-model="ruleForm3.accountStatus" placeholder="请选择账号状态">
<el-option label="正常" value="1"></el-option>
<el-option label="注销" value="0"></el-option>
<el-option label="冻结" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入职时间" prop="entryTime">
<el-date-picker
v-model="ruleForm3.entryTime"
type="datetime"
placeholder="选择日期时间"
></el-date-picker>
</el-form-item>
<el-form-item label="离职时间" prop="leaveTime">
<el-date-picker
v-model="ruleForm3.leaveTime"
type="datetime"
placeholder="选择日期时间"
></el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose3">取 消</el-button>
<el-button type="primary" @click="confirmClick3('ruleForm3')">确 定</el-button>
</div>
</el-dialog>
<!--修改成员信息弹窗 end-->
JS代码
回显数据的实现在checkMemberDialog(data)方法里
获取下拉列表选择的值使用change事件实现
data() {
const data = [];
return {
dialogVisible3: false, //修改成员信息弹窗
//修改成员信息表单数据
ruleForm3: {
realname: '',
email: '',
phone: '',
deptName: '',
positionName: '',
gender: '',
status: '',
accountStatus: '',
entryTime: '',
leaveTime: '',
},
//修改成员信息表单校验规则
rules3: {},
data: JSON.parse(JSON.stringify(data)),
parentId: '',
deptId: '',
dept1: '', //成员弹窗获取部门名的deptId
dept2: '', //成员弹窗获取部门名的deptName
position1: '', //成员弹窗获取部门名的positionId
position2: '', //成员弹窗获取部门名的positionName
userId: '', //修改成员弹窗时获取userId
id: '',
dn: [], //列表数据,将后台获取到的部门名信息数据渲染到添加成员弹窗的部门名框
pn: [], //列表数据,将后台获取到的职位名信息数据渲染到添加成员弹窗的部门名框
};
},
methods: {
//获取部门名列表
getDeptNameList() {
common.getDeptName().then((res) => {
// console.log('res', res.data.data);
if (res.code === 200) {
this.dn = res.data.data;
}
});
},
//change事件选中获取整个deptName对象
selectChanged(val) {
//选中的数据和options进行匹配
var obj = {};
obj = this.dn.find(function (i) {
return i.id === val;
}); //在change中获取到整条对象数据
// console.log(obj.id);
// console.log(obj.deptName);
this.dept1 = obj.id;
this.dept2 = obj.deptName;
},
//获取职位名列表
getPositionNameList() {
common.getPositionName().then((res) => {
// console.log('res', res.data.data);
if (res.code === 200) {
this.pn = res.data.data;
}
});
},
//change事件选中获取整个positionName对象
selectChanged1(val) {
//选中的数据和options进行匹配
var obj1 = {};
obj1 = this.pn.find(function (j) {
return j.id === val;
}); //在change中获取到整条对象数据
// console.log(obj1.id);
// console.log(obj1.positionName);
this.position1 = obj1.id;
this.position2 = obj1.positionName;
},
//修改成员信息弹窗
checkMemberDialog(data) {
this.dialogVisible3 = true;
// console.log('c', data.userId);
this.userId = data.userId;
this.getDeptNameList();
this.getPositionNameList();
const params = {
userId: data.userId,
};
common.getStaffInfo(params).then((res) => { //调用后端回显数据接口
//由于后端传过来的值为value,而回显数据需要显示label
//因此需要以下判断
// console.log('de', res.data.data);
if (res.data.data.accountStatus == '0') {
res.data.data.accountStatus = '0';
} else if (res.data.data.accountStatus == '1') {
res.data.data.accountStatus = '1';
} else if (res.data.data.accountStatus === '2') {
res.data.data.accountStatus = '2';
}
if (res.data.data.gender == '0') {
res.data.data.gender = '0';
} else if (res.data.data.gender == '1') {
res.data.data.gender = '1';
}
if (res.data.data.status == '0') {
res.data.data.status = '0';
} else if (res.data.data.status == '1') {
res.data.data.status = '1';
}
// console.log('acc',res.data.data.deptName);
let staffList = {
accountStatus: res.data.data.accountStatus,
deptName: res.data.data.deptName,
email: res.data.data.email,
entryTime: res.data.data.entryTime,
gender: res.data.data.gender,
leaveTime: res.data.data.leaveTime,
phone: res.data.data.phone,
positionName: res.data.data.positionName,
realname: res.data.data.realname,
status: res.data.data.status,
};
// console.log('awa', staffList);
// console.log('awa', staffList.deptName);
this.ruleForm3 = staffList;
});
},
//关闭修改成员信息表单
handleClose3() {
this.ruleForm3.accountStatus = '';
this.ruleForm3.deptName = '';
this.ruleForm3.email = '';
this.ruleForm3.entryTime = '';
this.ruleForm3.gender = '';
this.ruleForm3.leaveTime = '';
this.ruleForm3.phone = '';
this.ruleForm3.positionName = '';
this.ruleForm3.realname = '';
this.ruleForm3.status = '';
this.userId = '';
this.dialogVisible3 = false;
},
//检验并提交修改成员信息表单
confirmClick3(formName) {
const accountStatus = this.ruleForm3.accountStatus;
const deptId = this.dept1;
const deptName = this.dept2;
const email = this.ruleForm3.email;
const entryTime = this.ruleForm3.entryTime;
const gender = this.ruleForm3.gender;
const leaveTime = this.ruleForm3.leaveTime;
const phone = this.ruleForm3.phone;
const positionId = this.position1;
const positionName = this.position2;
const realname = this.ruleForm3.realname;
const status = this.ruleForm3.status;
const userId = this.userId;
const staff = {
accountStatus,
deptId,
deptName,
email,
entryTime,
gender,
leaveTime,
phone,
positionId,
positionName,
realname,
status,
userId,
};
// console.log('11', this.ruleForm1.deptName);
this.$refs[formName].validate((valid) => {
if (valid) {
// alert('submit');
// let deFlag = 1;
common.updateEmployee(staff).then((_) => {
this.handleClose3();
this.getDeptList();
if (res.code === 200) {
this.handleNodeClick();
this.$message.success('修改成功,请刷新查看');
} else {
this.$message.error('修改失败');
}
});
} else {
console.log('error');
return false;
}
});
},
}
css代码
b {
font-size: 1.5em;
}
.left {
width: 18%;
float: left;
}
.right {
width: 82%;
float: left;
}
.top {
float: right;
}
.el-input__inner {
height: 30px;
}
.t {
height: 35px;
}
.i {
float: right;
}
.el-tree-node {
border-bottom: 1px solid rgb(103, 100, 100);
height: 30px;
}
.el-button--text {
color: #0f9eca;
}
.el-input {
width: 200px;
}
.el-form-item {
margin-bottom: 5px;
}
.el-dialog__body {
padding: 0px 0px;
}
.el-dialog {
width: 520px;
height: 480px;
}
更多推荐
已为社区贡献1条内容
所有评论(0)