效果
代码：
<template>
<div class="organization-work-drawer-container1">
<!-- 标题 -->
<div class="drawer-header">
<h4>{{ isNewAdd ? "新建用户信息" : "编辑用户信息" }}</h4>
<i class="el-icon-close"></i>
</div>
<!-- 内容区域 -->
<div class="edit-user-info-box">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<!-- 基本信息 -->
<div class="base-info-box">
<p class="base-info-title">基本信息</p>
<el-row :gutter="20">
<el-col :span="24" class="item-avator">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-s-custom" style="font-size: 50px"></i>
</el-upload>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户姓名" prop="user_name">
<el-input
:disabled="isNewAdd ? false : true"
v-model="ruleForm.user_name"
clearable
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户账号" prop="user_count">
<el-input
:disabled="isNewAdd ? false : true"
v-model="ruleForm.user_count"
clearable
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="角色" prop="role">
<TreeSelect
v-model="ruleForm.role"
@update:selectValue="handleSelectValueChange"
></TreeSelect>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="ID">
<el-input
clearable
v-model="ruleForm.ID"
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 所属部门 -->
<div class="base-info-box">
<p class="base-info-title">所属部门</p>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="department" label="所属部门">
<template slot-scope="scope">
<p v-if="scope.row.department && scope.row.is_default == '是'">
<el-input
:disabled="
scope.row.department && scope.row.is_default == '是'
? true
: false
"
v-model="scope.row.department"
placeholder="请选择"
clearable
></el-input>
</p>
<p v-else>
<el-input
v-model="scope.row.department"
placeholder="请选择"
@focus="showDepartmentDialog(scope.$index)"
clearable
></el-input>
</p>
</template>
</el-table-column>
<el-table-column prop="reports_to" label="直属主管">
<template slot-scope="scope">
<!-- <p v-if="scope.row.reports_to">
<el-input
:disabled="scope.row.reports_to"
v-model="scope.row.reports_to"
placeholder="请选择"
clearable
></el-input>
</p>
<p v-else>
<el-input
v-model="scope.row.reports_to"
placeholder="请选择"
@focus="showDepartmentDialog1(scope.$index)"
clearable
></el-input>
</p> -->
<el-input
v-model="scope.row.reports_to"
placeholder="请选择"
@focus="showDepartmentDialog1(scope.$index)"
clearable
></el-input>
</template>
</el-table-column>
<el-table-column prop="is_main_department" label="是否主部门">
<template slot-scope="scope">
<p v-if="scope.row.is_main_department === '是'">
<el-checkbox
v-model="scope.row.is_main_department === '是'"
:disabled="scope.row.is_main_department === '是'"
></el-checkbox>
</p>
<p v-else>
<el-checkbox
:v-model="scope.row.is_main_department"
:disabled="scope.row.department ? false : true"
></el-checkbox>
</p>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button
@click="delIndexUser(scope.$index, scope.row)"
type="text"
style="color: brown"
icon="el-icon-delete"
size="mini"
></el-button>
</template>
</el-table-column>
</el-table>
<p
style="
font-size: 15px;
color: #448ef7;
cursor: pointer;
margin-bottom: 30px;
margin-top: 2px;
"
>
<i class="el-icon-plus" @click="addTableRow"></i>
<span style="padding-left: 8px" @click="addTableRow">添加行</span>
</p>
</div>
<!-- 联系方式 -->
<div class="base-info-box">
<p class="base-info-title">联系方式</p>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input
:disabled="isNewAdd ? false : true"
v-model="ruleForm.phone"
clearable
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="办公电话" prop="office_phone">
<el-input
clearable
v-model="ruleForm.office_phone"
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="ruleForm.email"
placeholder="请输入"
clearable
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 员工信息 -->
<div class="base-info-box">
<p class="base-info-title">员工信息</p>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="员工编号" prop="employee_number">
<el-input
v-model="ruleForm.employee_number"
clearable
placeholder="请输入"
style="width: 240px;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职时间" prop="entry_time">
<el-date-picker
v-model="ruleForm.entry_time"
align="right"
type="date"
placeholder="请选择"
clearable
style="width: 240px;"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<!-- 按钮区域 -->
<div class="btns-box">
<el-button style="width: 80px; height: 32px" type="primary">
保存
</el-button>
</div>
<!-- 所属部门 -->
<el-dialog
title="提示"
:visible.sync="isShowDialog"
width="30%"
:modal="false"
:before-close="handleClose"
>
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
@node-click="treeNodeClick"
>
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowDialog = false">取 消</el-button>
<el-button type="primary" @click="confirmDepartmentDialog">
确 定
</el-button>
</span>
</el-dialog>
<!-- 直属主管 -->
<el-dialog
title="提示"
:visible.sync="isShowDialog1"
width="30%"
:modal="false"
:before-close="handleClose1"
>
<el-input placeholder="输入关键字进行过滤" v-model="filterText1">
</el-input>
<el-tree
class="filter-tree1"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode1"
ref="tree1"
@node-click="treeNodeClick1"
>
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowDialog1 = false">取 消</el-button>
<el-button type="primary" @click="confirmDepartmentDialog1">
确 定
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TreeSelect from "./TreeSelect.vue";
export default {
components: {
TreeSelect,
},
props: {
isNewAdd: {
type: Boolean,
default: false,
},
},
data() {
return {
ruleForm: {
user_name: "xxx",
user_count: "2234",
role: "",
ID: "",
phone: "13594734401",
office_phone: "",
email: "",
entry_time: "",
employee_number: "",
},
rules: {
user_name: [
{ required: true, message: "请输入用户姓名", trigger: "blur" },
],
user_count: [
{ required: true, message: "请输入用户账号", trigger: "blur" },
],
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
},
imageUrl: "",
// 表格
tableData: [
{
department: "研发中心",
reports_to: "",
is_main_department: "是",
is_default: "是",
},
],
checked: false,
isShowDialog: false,
filterText: "",
isShowDialog1: false,
filterText1: "",
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
currentTreeValueDepartment: "",
selectedIndex: -1,
currentTreeValueDepartment1: "",
selectedIndex1: -1,
// 员工信息
};
},
created() {},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
filterText1(val) {
this.$refs.tree1.filter(val);
},
isNewAdd(newVal, oldVal) {
// if (newVal) {
// this.clearForm();
// }
},
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
filterNode1(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// clearForm() {
// this.ruleForm = {
// user_name: "",
// user_count: "",
// role: "",
// ID: "",
// phone: "",
// office_phone: "",
// email: "",
// entry_time: "",
// employee_number: "",
// };
// },
/**
* 头像上传逻辑
*/
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
/**
* 表格逻辑
*/
// 删除
delIndexUser(index, row) {
if (row.is_main_department == "是") {
return this.$message({
message: "主部门不能删除",
type: "warning",
});
}
this.tableData.splice(index, 1);
},
// 添加行
addTableRow() {
this.tableData.push({
department: "",
reports_to: "",
is_main_department: false,
});
},
// 所属部门
treeNodeClick(val) {
this.currentTreeValueDepartment = val.label;
},
confirmDepartmentDialog() {
if (this.selectedIndex !== -1) {
this.tableData[this.selectedIndex].department =
this.currentTreeValueDepartment;
// 重置索引
this.selectedIndex = -1;
}
this.isShowDialog = false;
},
showDepartmentDialog(index) {
this.selectedIndex = index;
this.isShowDialog = true;
this.filterText = "";
this.filterText1 = "";
},
handleClose(done) {
done();
},
// 直属主管
treeNodeClick1(val) {
this.currentTreeValueDepartment1 = val.label;
},
confirmDepartmentDialog1() {
if (this.selectedIndex1 !== -1) {
this.tableData[this.selectedIndex1].reports_to =
this.currentTreeValueDepartment1;
// 重置索引
this.selectedIndex1 = -1;
}
this.isShowDialog1 = false;
},
showDepartmentDialog1(index) {
this.selectedIndex1 = index;
this.isShowDialog1 = true;
this.filterText = "";
this.filterText1 = "";
},
handleClose1(done) {
done();
},
/**
* 基本信息逻辑
*/
handleSelectValueChange(value) {
if (value && value.length > 0) {
this.ruleForm.role = value;
} else {
this.ruleForm.role = "";
}
},
},
};
</script>
<style scoped lang="scss">
.organization-work-drawer-container1 {
::v-deep .el-form-item--medium .el-form-item__label {
text-align: left !important;
}
.drawer-header {
border-bottom: 1px solid #eee;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
h4 {
margin: 0;
margin-bottom: 10px;
color: #111218;
}
}
.edit-user-info-box {
padding: 20px;
}
.item-avator {
margin-bottom: 20px;
}
.base-info-box {
.base-info-title {
padding-bottom: 6px;
text-align: left;
font-size: 16px;
color: #000;
font-weight: 600;
}
}
.btns-box {
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #eee;
height: 50px;
}
}
</style>
