页面编写结构搭建，数据部分还没处理
<template>
<div class="new-user">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<div class="user-form">
<div class="user-left">
<el-form-item label="专业公司" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="搜索员工" prop="region">
<el-input placeholder="请输入UM账号或名字" v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<div class="import-btn">
<div class="import-btn-left">
<el-button>
<i class="el-icon-upload el-icon--left"></i>
批量导入员工
</el-button>
</div>
<div class="import-btn-right">
<el-button>批量导入模板下载</el-button>
</div>
</div>
<div>
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column label="所属机构" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="address" label="所属部门" show-overflow-tooltip></el-table-column>
</el-table>
</template>
</div>
</div>
<!-- 右侧 -->
<div class="user-right">
<!-- 已选员工 -->
<div class="check-person">
<div class="check-header-header">
<div class="check-person-title">
<el-form-item label="已选员工" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</div>
<div class="check-person-total">
<span>共xx人</span>
</div>
</div>
<div class="check-list-table">
<template>
<el-table
ref="singleTable"
:data="tableDataCheck"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%"
>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="date" label="所属部门" width="120"></el-table-column>
<el-table-column property="address" label="操作"></el-table-column>
</el-table>
</template>
</div>
</div>
<!-- 角色列表 -->
<div class="role-list">
<div class="role-list-head">
<div class="role-title">
<el-form-item label="角色列表" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</div>
<div class="check-role-total">
<el-buttom>+添加</el-buttom>
</div>
</div>
<div class="role-list-table">
<template>
<el-table
ref="singleTable"
:data="RoletableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%"
>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column property="date" label="角色" width="120"></el-table-column>
<el-table-column property="name" label="权限范围" width="120"></el-table-column>
<el-table-column property="address" label="操作"></el-table-column>
</el-table>
</template>
</div>
</div>
<div>
<el-form-item>
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</el-form-item>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
},
// 搜索员工
input3: "",
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
},
// 左侧列表-员工数据
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
}
],
multipleSelection: [],
// 右侧-已选员工
tableDataCheck: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
currentRow: null,
// 右侧-角色列表
RoletableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
RolecurrentRow: null
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
//表单方法
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 右侧-已选员工方法
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {
this.currentRow = val;
}
// 右侧-角色列表方法
}
};
</script>
<style lang='less'>
.new-user {
// width: 50px !important;
// border: 1px solid #ccc !important;
.user-form {
display: flex;
// width: 100%;
.user-left {
border: 1px solid #ccc;
width: 50% !important;
padding: 20px;
.el-select {
display: unset;
}
.import-btn {
display: flex;
justify-content: space-between;
}
}
.user-right {
width: 50%;
border: 1px solid #ccc;
padding: 20px;
.check-person {
.check-header-header {
display: flex;
justify-content: space-between;
}
}
.role-list {
.role-list-head {
display: flex;
justify-content: space-between;
}
}
}
}
}
</style>
