328 lines
8.4 KiB
Vue
328 lines
8.4 KiB
Vue
<template>
|
|
<div style="display:flex;row nowrap">
|
|
<!-- <el-tag
|
|
v-for="user in userData"
|
|
:key="user.id"
|
|
>
|
|
{{ user.name }}
|
|
</el-tag>-->
|
|
<el-button
|
|
v-if="selectable"
|
|
type="primary"
|
|
circle
|
|
size="mini"
|
|
icon="el-icon-plus"
|
|
@click="showDialog()"
|
|
/>
|
|
</div>
|
|
|
|
<el-dialog
|
|
title="选择人员"
|
|
width="80%"
|
|
height="100px"
|
|
v-model="dialoguser"
|
|
:before-close="handleClose"
|
|
:append-to-body="true"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-row>
|
|
<el-col :md="8" :sm="24">
|
|
<el-main class="nopadding">
|
|
<el-tabs type="border-card" stretch="true">
|
|
<el-tab-pane label="按部门分类">
|
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
|
</el-input>
|
|
|
|
<el-tree
|
|
class="filter-tree"
|
|
style="padding-top: 15px"
|
|
:data="deptdata"
|
|
default-expand-all
|
|
:filter-node-method="filterNode"
|
|
ref="tree"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
</el-tree>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="按岗位分类">
|
|
<el-input placeholder="输入关键字进行过滤" v-model="filterTexts">
|
|
</el-input>
|
|
|
|
<el-tree
|
|
class="filter-tree"
|
|
style="padding-top: 15px"
|
|
:data="postdata"
|
|
default-expand-all
|
|
:filter-node-method="filterNodes"
|
|
ref="tree"
|
|
@node-click="handleNodeClicks"
|
|
>
|
|
</el-tree>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-main>
|
|
</el-col>
|
|
<el-col :md="16" :sm="24">
|
|
<el-header style="border-bottom: none">
|
|
<div class="left-panel">
|
|
<el-input
|
|
v-model="search.keyword"
|
|
placeholder="姓名"
|
|
clearable
|
|
@click="upsearch"
|
|
></el-input>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="upsearch"
|
|
></el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<el-button type="primary" icon="el-icon-plus" @click="addUser"
|
|
>添加选择</el-button
|
|
>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable
|
|
ref="table"
|
|
:data="apiObj"
|
|
row-key="id"
|
|
@selection-change="selectionChange"
|
|
stripe
|
|
hideDo
|
|
@resetQuery="resetQuery"
|
|
>
|
|
<el-table-column type="selection" width="50"></el-table-column>
|
|
<el-table-column
|
|
label="#"
|
|
type="index"
|
|
width="50"
|
|
></el-table-column>
|
|
<el-table-column label="姓名" prop="name"></el-table-column>
|
|
|
|
<el-table-column label="手机号" prop="phone"></el-table-column>
|
|
<el-table-column label="部门" prop="belong_dept">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.belong_dept_">{{
|
|
scope.row.belong_dept_.name
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="创建时间"
|
|
prop="create_time"
|
|
></el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
<el-row style="padding-top: 8px">
|
|
<el-col :md="16" :sm="24">
|
|
<span style="font-weight:bold">已选人员:</span>{{username}}
|
|
</el-col>
|
|
<el-col :md="8" :sm="24" style="text-align:right">
|
|
<el-button @click="visible = false"
|
|
>取 消</el-button>
|
|
<el-button
|
|
v-if="mode != 'show'"
|
|
type="primary"
|
|
:loading="isSaveing"
|
|
@click="submitfrom()"
|
|
>提 交</el-button >
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { genTree } from "@/utils/verificate";
|
|
export default {
|
|
name: "employee",
|
|
components: {},
|
|
props: {
|
|
value: {
|
|
// 接受外部v-model传入的值
|
|
type: [String],
|
|
default: "",
|
|
},
|
|
user: {
|
|
// 接受外部v-model传入的值
|
|
type: [String],
|
|
default: "",
|
|
},
|
|
closable: {
|
|
// 是否可以关闭标签
|
|
type: Boolean,
|
|
default: () => {
|
|
return true;
|
|
},
|
|
},
|
|
selectable: {
|
|
// 是否可选人员
|
|
type: Boolean,
|
|
default: () => {
|
|
return true;
|
|
},
|
|
},
|
|
multiple: {
|
|
// 是否多选,默认可以多选
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
apiObj: [],
|
|
query: {},
|
|
selection: [],
|
|
search: {
|
|
keyword: null,
|
|
},
|
|
filterText: "",
|
|
filterTexts: "",
|
|
deptdata: [],
|
|
postdata: [],
|
|
username: [],
|
|
userData: [],
|
|
dialoguser: false,
|
|
dataValue: this.value,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getUser();
|
|
this.getDept();
|
|
this.getPost();
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
},
|
|
filterTexts(val) {
|
|
this.$refs.tree.filter(val);
|
|
},
|
|
dataValue(val) {
|
|
this.$emit("input", val);
|
|
console.log(val);
|
|
},
|
|
userData(val) {
|
|
if (val) {
|
|
this.change();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
showDialog() {
|
|
this.dialoguser = true;
|
|
this.$nextTick(function () {
|
|
this.apiObj.map((item) => {
|
|
if (item.id === this.user) {
|
|
this.$refs.table.toggleRowSelection(item, true);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
//加载人员
|
|
getUser() {
|
|
this.$API.system.user.list.req({ page: 0 }).then((res) => {
|
|
this.apiObj = res;
|
|
});
|
|
},
|
|
upsearch() {
|
|
this.$API.system.user.list
|
|
.req({ name: this.search.keyword, page: 0 })
|
|
.then((res) => {
|
|
this.apiObj = res;
|
|
});
|
|
},
|
|
//加载部门树数据
|
|
async getDept() {
|
|
let res = await this.$API.system.dept.list.req({ page: 0 });
|
|
this.deptdata = genTree(res);
|
|
},
|
|
//加载部门树数据
|
|
async getPost() {
|
|
let res = await this.$API.system.post.list.req({ page: 0 });
|
|
this.postdata = genTree(res);
|
|
},
|
|
filterNode(value, data) {
|
|
console.log(value);
|
|
if (!value) return true;
|
|
return data.label.indexOf(value) !== -1;
|
|
},
|
|
filterNodes(value, data) {
|
|
console.log(value);
|
|
if (!value) return true;
|
|
return data.label.indexOf(value) !== -1;
|
|
},
|
|
//部门点击显示对应的人员
|
|
handleNodeClick(data) {
|
|
this.$API.system.user.list
|
|
.req({ belong_dept: data.id, page: 0 })
|
|
.then((res) => {
|
|
this.apiObj = res;
|
|
});
|
|
},
|
|
//岗位点击显示对应的人员
|
|
handleNodeClicks(data) {
|
|
this.$API.system.user.list.req({ post: data.id, page: 0 }).then((res) => {
|
|
this.apiObj = res;
|
|
});
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection) {
|
|
this.selection = selection;
|
|
},
|
|
//删除Tag
|
|
closeTag(name) {
|
|
this.userData.splice(this.userData.indexOf(name), 1);
|
|
},
|
|
|
|
addUser() {
|
|
this.username = [];
|
|
this.userData = [];
|
|
if (!this.multiple && this.selection.length > 1) {
|
|
this.$message.error("对应的人员只允许选择一人！");
|
|
|
|
return;
|
|
}
|
|
if (!this.selection || this.selection.length === 0) {
|
|
this.msgError("请选择至少一个人员！");
|
|
return;
|
|
}
|
|
this.selection.forEach((item) => {
|
|
this.username.push(item.name);
|
|
|
|
this.userData.push({ id: item.id, name: item.name });
|
|
});
|
|
console.log(this.userData);
|
|
},
|
|
|
|
change() {
|
|
if (this.tags) {
|
|
alert(1);
|
|
this.dataValue = this.userData.map((e) => e.id).join(",");
|
|
console.log(this.dataValue);
|
|
this.$emit("change", this.dataValue);
|
|
}
|
|
},
|
|
submitfrom() {
|
|
this.dialoguser = false;
|
|
this.change(); // 触发值变化
|
|
this.dataValue = this.userData.map((e) => e.id).join(",");
|
|
this.$emit("submit", this.dataValue);
|
|
},
|
|
//权限设置
|
|
permission() {
|
|
this.dialog.permission = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.permissionDialog.open();
|
|
});
|
|
},
|
|
|
|
resetQuery() {
|
|
this.query = {};
|
|
},
|
|
},
|
|
};
|
|
</script>
|