287 lines
6.5 KiB
Vue
287 lines
6.5 KiB
Vue
<template>
|
||
<el-button
|
||
v-if="selectable"
|
||
type="primary"
|
||
circle
|
||
size="mini"
|
||
icon="el-icon-plus"
|
||
@click="showDialog()"
|
||
/>
|
||
|
||
<el-dialog
|
||
title="选择人员"
|
||
width="80%"
|
||
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="query.search"
|
||
placeholder="姓名"
|
||
clearable
|
||
@keyup.enter="handleQuery"
|
||
></el-input>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleQuery"
|
||
></el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-table
|
||
ref="userTable"
|
||
:data="apiObj"
|
||
row-key="id"
|
||
stripe
|
||
height="400"
|
||
@selection-change="selectionChange"
|
||
>
|
||
<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>
|
||
</el-table>
|
||
</el-main>
|
||
<div class="right-panel">
|
||
<el-button
|
||
@click="handleClose"
|
||
style="float: right"
|
||
>取 消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
:loading="isSaveing"
|
||
@click="submitfrom()"
|
||
style="float: right;margin-right: 10px"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import {genTree} from "@/utils/verificate";
|
||
|
||
export default {
|
||
name: "employee",
|
||
components: {},
|
||
props: {
|
||
user: {
|
||
// 接受外部v-model传入的值
|
||
type: [String],
|
||
default: "",
|
||
},
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
apiObj: [],
|
||
query: {},
|
||
selection: [],
|
||
filterText: "",
|
||
filterTexts: "",
|
||
deptdata: [],
|
||
postdata: [],
|
||
username: [],
|
||
selectable: true,
|
||
dialoguser: false,
|
||
isSaveing: false,
|
||
dataValue: this.value,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getUser();
|
||
this.getDept();
|
||
this.getPost();
|
||
debugger;
|
||
if(this.user===""){
|
||
this.selection = [];
|
||
this.apiObj.map(item => {
|
||
this.$refs.table.toggleRowSelection(item, false)
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
},
|
||
filterTexts(val) {
|
||
this.$refs.tree.filter(val);
|
||
},
|
||
dataValue(val) {
|
||
this.$emit("input", val);
|
||
console.log(val)
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
showDialog() {
|
||
debugger;
|
||
let that = this;
|
||
that.dialoguser = true;
|
||
that.$nextTick(function () {
|
||
debugger;
|
||
if(that.user===""){
|
||
that.selection = [];
|
||
that.apiObj.map(item => {
|
||
that.$refs.table.toggleRowSelection(item, false)
|
||
})
|
||
}else{
|
||
that.apiObj.map(item => {
|
||
debugger;
|
||
if (item.id === that.user) {
|
||
that.$refs.table.toggleRowSelection(item, true)
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
|
||
},
|
||
//加载人员
|
||
getUser() {
|
||
this.$API.system.user.list.req({page: 0}).then((res) => {
|
||
this.apiObj = res;
|
||
});
|
||
},
|
||
handleQuery() {
|
||
this.$API.system.user.list
|
||
.req(this.query)
|
||
.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) {
|
||
debugger;
|
||
if (selection.length > 1) {
|
||
let del_row = selection.shift();
|
||
this.selection = selection[1];
|
||
this.$refs.userTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
|
||
}else{
|
||
debugger;
|
||
this.selection = selection;
|
||
}
|
||
},
|
||
|
||
submitfrom() {
|
||
debugger;
|
||
if(this.selection.length===1){
|
||
let obj={id:this.selection[0].id,name:this.selection[0].name};
|
||
this.$emit("handlerSubmit", obj);
|
||
this.dialoguser = false;
|
||
}else{
|
||
this.$message.warning('请选择您要加签的处理人')
|
||
}
|
||
},
|
||
|
||
resetQuery() {
|
||
this.query = {};
|
||
},
|
||
handleClose(){
|
||
this.$confirm(`您未更改人员，确定关闭吗？`, '提示', {
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.dialoguser = false;
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|