Files
cmanager/src/views/tenant/main/serve/index.vue
dengxin f47507c7e6 更新
2024-02-21 20:08:55 +08:00

910 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-row>
<el-col :span="5">
<basic-container>
<!-- <el-collapse v-model="activeNames">
<el-collapse-item name="1" disabled="true">
<template slot="title">-->
<!-- <p>全部{{ personTotal }}</p> -->
<p>分组管理</p>
<!-- </template> -->
<div class="box" :style="{ height: leftHeight }">
<el-scrollbar style="height: 100%">
<el-tree ref="tree" node-key="id" highlight-current :expand-on-click-node="false" @node-click="nodeClick"
:data="treeData" :props="props">
<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 80%">
<!-- <el-tooltip class="item" effect="dark" :content="node.label" placement="top"> -->
<span style="
flex-basis: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 1;
">
{{ node.label }}
{{ data.sumNum }}
</span>
<!-- </el-tooltip> -->
<span v-show="data.id && data.id !== '0'" style="flex-basis: 20%">
<el-button type="text" icon="el-icon-edit" size="mini" @click="() => updateGroups('edit', data)">
</el-button>
<el-button icon="el-icon-delete" type="text" size="mini" @click="() => removeGroups(data)">
</el-button>
</span>
</span>
</el-tree>
<!-- v-show="vaildData(permission.tenant_wage_payroll_view, false)" -->
<div class="footer" style="padding-left: 6px">
<el-button type="text" icon="el-icon-plus" @click="updateGroups('add')">新建分组</el-button>
</div>
</el-scrollbar>
</div>
<!-- </el-collapse-item>
</el-collapse>-->
</basic-container>
<!-- <div>
<el-button type="text" icon="el-icon-setting" @click="drawer = true">分组管理</el-button>
</div>-->
</el-col>
<el-col :span="19">
<basic-container>
<!--搜索栏-->
<el-form size="small" label-position="right" :inline="true" style="padding-left: 10px; padding-right: 10px">
<el-row :span="24">
<el-form-item label="姓名:">
<el-input v-model="query.name" placeholder="姓名" clearable></el-input>
</el-form-item>
<el-form-item label="工种:">
<el-select v-model="query.worktypes" placeholder="工种" style="width: 100%" filterable clearable>
<el-option v-for="(item, key, index) in worktypeData" :key="index" :label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
<div class="searchBtn">
<el-button type="primary" size="small" icon="el-icon-search" @click="searchChange1"> </el-button>
<el-button size="small" icon="el-icon-delete" @click="searchReset1"> </el-button>
</div>
</el-row>
</el-form>
<!--/搜索栏-->
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="obj"
:permission="permissionList" :before-open="beforeOpen" @row-del="rowDel" @row-update="rowUpdate"
@row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
@refresh-change="refreshChange" class="customPage">
<!--自定义列-->
<template slot="worktypes" slot-scope="{ row }">
<el-tooltip effect="dark" :content="row.worktypes" placement="top">
<div>{{ row.worktypes | ellipsis }}</div>
</el-tooltip>
</template>
<template slot="resume" slot-scope="{ row }">
<div>
<el-button type="text" size="mini" @click="$refs.resume.openDialog(row)"
v-if="row.userId && row.userId !== '0'">查看简历</el-button>
<div v-else>暂无简历</div>
</div>
</template>
<!--/自定义列-->
<template slot="worktypesForm">
<tag-select v-model="selectedWorkTypes" :prop="{ label: 'name', value: 'name' }" :data="worktypeData">
</tag-select>
</template>
<!--自定义按钮-->
<template slot="menuLeft">
<!-- <el-button type="success" size="small" plain icon="el-icon-plus" @click="handleImport"
v-show="vaildData(permission.tenant_talents_groupadd, false)">导入</el-button>
<el-button type="warning" size="small" plain :disabled="!selectionList.length" icon="el-icon-sort"
@click="handleTransfer">转移分组</el-button> -->
<el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete"
:disabled="!selectionList.length" plain v-show="vaildData(permission.tenant_talents_groupdelete, false)">
删除</el-button>
</template>
<template slot="name" slot-scope="{row}">
<span v-if="row.status == 1">{{ row.name }}</span>
<span v-else>{{ row.name }}<span style="color: red;">未实名</span></span>
</template>
<!--/自定义按钮-->
</avue-crud>
<!--批量导入-->
<el-dialog title="导入" append-to-body :visible.sync="excelBox" :close-on-click-modal="false" width="555px">
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter"
:upload-before="beforeAvatarUpload" :upload-error="uploadError">
<template slot="excelTemplate">
<el-button type="primary" @click="handleTemplate()" :loading="templateLoading">
点击下载
<i class="el-icon-download el-icon--right"></i>
</el-button>
</template>
</avue-form>
</el-dialog>
<!--/批量导入-->
<!--新建 编辑分组dialog-->
<add-groups ref="addGroups" @refresh="refresh" :treeData="treeData"></add-groups>
<!--/新建 编辑分组dialog-->
<!--转移分组dialog-->
<transfer-groups ref="transferGroups" @refresh="refresh" :ids="ids"></transfer-groups>
<!--/转移分组dialog-->
<resume ref="resume" v-show="false"></resume>
</basic-container>
<ied ref="ied"></ied>
</el-col>
</el-row>
</template>
<script>
import {
getList,
remove,
update,
add,
detail,
getDept,
removeDept,
upload,
} from "@/api/tenant/serve";
import { getWorkTypes } from "@/api/tenant/common";
import { mapGetters } from "vuex";
import addGroups from "./Dialog/addGroups";
import transferGroups from "./Dialog/transferGroups";
import Resume from "@/components/resume/index";
import { check18IdCardNo, isvalidatemobile, isExcel } from "@/util/validate";
import { getTemplate } from "@/api/resource/template";
import ied from "@/views/util/import-error-dialog";
import { excelAccept } from "@/common/accept";
export default {
filters: {
ellipsis(value) {
if (!value) return "";
if (value.length > 15) {
return value.slice(0, 14) + "...";
}
return value;
},
},
name: "tenant_talents",
data() {
return {
activeNames: "1",
isIndeterminate: false,
checkAll: false,
checked: false,
selectionList: [],
loading: true,
templateLoading: false,
query: {},
props: {
label: "groupName",
id: "id",
},
personTotal: 0,
treeData: [],
tenantId: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
tempWorkType: [],
worktypeDic: {},
arr: [],//////
excelOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: "文件上传",
prop: "excelFile",
type: "upload",
drag: true,
loadText: "文件上传中,请稍等",
span: 24,
propsHttp: {
res: "data",
},
tip: "请上传 .xls,.xlsx 标准格式文件",
accept: excelAccept,
showFileList: false,
action: upload(),
},
{
label: "模板下载",
prop: "excelTemplate",
formslot: true,
span: 24,
},
],
},
excelBox: false,
data: [],
obj: {},
excelForm: { isCovered: 1 },
};
},
components: { addGroups, transferGroups, Resume, ied },
watch: {},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: this.vaildData(this.permission.tenant_talents_groupadd, false),
viewBtn: true,
delBtn: this.vaildData(
this.permission.tenant_talents_groupdelete,
false
),
editBtn: this.vaildData(
this.permission.tenant_talents_groupedit,
false
),
};
},
ids() {
let ids = [];
this.selectionList.forEach((ele) => {
ids.push(ele.id);
});
return ids.join(",");
},
leftHeight: function () {
//获取高度值
if (document.getElementsByClassName("avue-crud__pagination")[0]) {
let pageHeight = document.getElementsByClassName(
"avue-crud__pagination"
)[0].offsetTop;
return pageHeight - 105 + "px";
} else {
return 725 + "px";
}
},
option() {
const self = this;
const IdCardNo = (rule, value, callback) => {
if (check18IdCardNo(value)) {
callback();
} else {
callback(new Error("身份证格式不正确"));
}
};
const validateTel = (rule, value, callback) => {
if (isvalidatemobile(value)[0]) {
callback(new Error(isvalidatemobile(value)[1]));
} else {
callback();
}
};
return {
height: "auto",
dialogWidth: "30%",
calcHeight: 180,
align: "center",
menuAlign: "center",
tip: false,
columnBtn: false,
searchBtn: true,
searchShow: true,
viewBtn: true,
searchMenuSpan: 6,
border: true,
index: true,
indexLabel: "序号",
selection: true,
dialogType: "dialog",
dialogClickModal: false,
column: [
{
label: "姓名",
prop: "name",
// search: true,
span: 24,
rules: [
{
required: true,
whitespace: true,
message: "请输入姓名",
trigger: "blur",
},
],
slot: true
},
{
label: "身份证",
prop: "idNumber",
hide: true,
span: 24,
rules: [
{ required: true, message: "请输入身份证号", trigger: "blur" },
{ trigger: "blur", validator: IdCardNo },
],
},
{
label: "手机号",
prop: "telphone",
span: 24,
hide: true,
rules: [
{
required: true,
validator: validateTel,
trigger: "blur",
},
],
},
{
label: "用户类型",
prop: "userId",
type: "select",
dicData: [
{
value: "0",
label: "未注册用户",
},
{
value: "1",
label: "已注册用户",
},
],
display: false,
hide: true,
// search: true
},
{
label: "分组",
prop: "groupId",
type: "tree",
span: 24,
display: true,
dicData: self.treeData,
props: {
label: "groupName",
value: "id",
},
rules: [
{
required: true,
message: "请选择分组",
trigger: "change",
},
],
placeholder: "请选择 分组",
},
{
label: "工种",
prop: "worktypes",
rules: [
{
required: true,
message: "请选择工种",
trigger: ["blur"],
},
],
slot: true,
formslot: true,
span: 24,
},
// {
// label: "简历",
// prop: "resume",
// slot: true,
// display: false
// },
{
label: "备注",
prop: "remarks",
type: "textarea",
slot: true,
hide: true,
span: 24,
maxlength: 100,
showWordLimit: true,
},
],
};
},
selectedWorkTypes: {
get() {
if (!this.obj.worktypes) {
return [];
}
const result = [];
const wt = this.obj.worktypes.split(",");
wt.forEach((item) => {
result.push({ name: item });
});
return result;
},
set(val) {
const arr = [];
val.forEach((item) => {
arr.push(item.name);
});
this.obj.worktypes = arr.join(",");
},
},
worktypeData() {
let rel = [];
for (let j = 0; j < this.arr.length; j++) {
const key = this.arr[j];
if (this.worktypeDic.hasOwnProperty(key)) {
rel.push({ name: key })
}
}
/* for (const key in this.worktypeDic) {
if (this.worktypeDic.hasOwnProperty(key)) {
rel.push({ name: key });
}
}*/
for (let i = 0; i < this.tempWorkType.length; i++) {
const key = this.tempWorkType[i];
if (key && !this.worktypeDic.hasOwnProperty(key)) {
rel.push({ name: key });
}
}
return rel;
},
},
created() {
this.initDept();
this.getWorkTypes();
},
methods: {
getWorkTypes() {
getWorkTypes().then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
const element = res.data.data[i];
this.worktypeDic[element.name] = 1;
this.arr.push(element.name)
}
});
},
/*加载分组*/
initDept(groupId) {
getDept().then((res) => {
const data = res.data.data.list;
this.treeData = data;
let treeDataOne = {
companyId: "",
createTime: "",
groupName: "全部",
id: "",
remarks: "",
sort: '',
sumNum: res.data.data.sum,
type: '',
};
this.treeData.unshift(treeDataOne);
const column = this.findObject(this.option.column, "groupId");
column.dicData = this.treeData;
if (groupId) {
this.$nextTick(function () {
this.$refs.tree.setCurrentKey(groupId);
}); //默认高亮
this.nodeClick({ id: groupId });
} else {
if (this.treeData.length) {
this.$nextTick(function () {
this.$refs.tree.setCurrentKey(this.treeData[0].id);
}); //默认高亮第一个
this.nodeClick({ id: this.treeData[0].id });
}
}
this.personTotal = res.data.data.sum;
// this.onLoad();
//this.treeData.push(treeDataOne);
this.loading = false;
});
},
/*新建 编辑分组*/
updateGroups(type, data) {
this.$refs.addGroups.openDialog(type, data);
},
/*删除分组*/
removeGroups(data) {
//检验该分组是否存在人员,存在提示无法删除,不存在泽提示确定要删除此分组吗
const h = this.$createElement;
this.$confirm(
h("div", null, [
h("p", { style: "font-size: 16px" }, "您确定要删除此分组吗? "),
h("p", { style: "color: red" }, "一旦删除则无法找回"),
]),
{
type: "warning",
showClose: false,
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.cancelButtonLoading = true;
instance.closeOnPressEscape = false;
instance.closeOnClickModal = false;
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
instance.cancelButtonLoading = false;
}, 300);
}, 1000);
} else {
done();
}
},
}
)
.then(() => {
removeDept(data.id).then(
() => {
this.$message({
type: "success",
message: "操作成功!",
});
this.refresh("del");
},
(error) => {
window.console.log(error);
}
);
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '已取消'
// });
});
},
/*批量转移分组 */
handleTransfer() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$refs.transferGroups.openDialog();
},
/*点击分组加载相应人才列表*/
nodeClick(data) {
this.tenantId = data.id ? data.id : "";
this.page.currentPage = 1;
this.onLoad(this.page, this.query);
// if (this.tenantId !== data.id) {
// } else {
// return;
// }
},
/*新增 编辑 转移 删除分组 更新人才后*/
refresh(type) {
this.page.currentPage = 1;
this.query = {};
if (type === "del") {
//删除分组后重新选中分组为未分组
this.initDept();
this.onLoad(this.page, this.query);
} else {
this.initDept(this.tenantId);
this.onLoad(this.page, this.query);
}
},
/*获取人才详情 */
beforeOpen(done, type) {
if (["edit", "view", "add"].includes(type)) {
if (type === "edit" || type === "view") {
setTimeout(() => {
detail(this.obj.id).then(
(res) => {
this.obj = res.data.data;
this.tempWorkType = this.obj.worktypes.split(",");
done();
},
(error) => {
window.console.log(error);
}
);
}, 0);
} else {
this.tempWorkType = [];
done();
}
}
},
/*新增人才*/
rowSave(row, done) {
add({
groupId: row.groupId,
name: row.name,
idNumber: row.idNumber,
telphone: row.telphone,
worktypes: row.worktypes,
remarks: row.remarks,
}).then(
() => {
this.$message({
type: "success",
message: "操作成功!",
});
done();
this.refresh();
},
(error) => {
window.console.log(error);
done();
}
);
},
/*编辑人才*/
rowUpdate(row, index, done) {
update({
id: row.id,
groupId: row.groupId,
name: row.name,
idNumber: row.idNumber,
telphone: row.telphone,
worktypes: row.worktypes,
remarks: row.remarks,
}).then(
() => {
done();
this.$message({
type: "success",
message: "操作成功!",
});
this.refresh();
},
(error) => {
window.console.log(error);
done();
}
);
},
/*删除人才 */
rowDel(row) {
const h = this.$createElement;
this.$confirm(
h("div", null, [
h("p", { style: "font-size: 16px" }, "您确定要删除此人才吗? "),
h("p", { style: "color: red" }, "一旦删除则无法找回"),
]),
{
type: "warning",
showClose: false,
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.cancelButtonLoading = true;
instance.closeOnPressEscape = false;
instance.closeOnClickModal = false;
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
instance.cancelButtonLoading = false;
}, 300);
}, 1000);
} else {
done();
}
},
}
)
.then(() => {
remove(row.id).then(
() => {
this.$message({
type: "success",
message: "操作成功!",
});
this.refresh();
},
(error) => {
window.console.log(error);
}
);
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '已取消'
// });
});
},
/*批量删除人才*/
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
const h = this.$createElement;
this.$confirm(
h("div", null, [
h("p", { style: "font-size: 16px" }, "您确定要批量删除选中人才吗? "),
]),
{
type: "warning",
showClose: false,
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.confirmButtonLoading = true;
instance.cancelButtonLoading = true;
instance.closeOnPressEscape = false;
instance.closeOnClickModal = false;
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
instance.cancelButtonLoading = false;
}, 300);
}, 1000);
} else {
done();
}
},
}
)
.then(() => {
remove(this.ids).then(
() => {
this.$message({
type: "success",
message: "操作成功!",
});
this.onLoad(this.page);
this.$refs.crud.toggleSelection();
},
(error) => {
window.console.log(error);
}
);
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '已取消'
// });
});
},
/*导入人才库*/
beforeAvatarUpload(file, done, loading) {
if (!isExcel(file)) {
loading();
this.$message.error("上传人才库信息只能是 .xls,.xlsx 标准格式文件!");
} else {
done();
}
},
uploadAfter(res, done) {
if (!(res instanceof Error) && !res.data) {
this.excelBox = false;
} else if (res.data && res.data.code === 900) {
const arr = [];
const data = res.data.data;
data.error &&
data.error.errorList.forEach((item) => {
arr.push(`${item.name} ${item.remarks}`);
});
data.auth &&
data.auth.authList.forEach((item) => {
arr.push(`${item.name} ${item.remarks}`);
});
this.$refs.ied.show(arr);
}
this.refreshChange();
this.initDept(this.tenantId);
done();
},
uploadError(error) {
if (error) {
this.$message.error(error);
}
},
handleImport() {
this.excelBox = true;
},
/*下载人才库模板 */
handleTemplate() {
this.templateLoading = true;
getTemplate("trc")
.then((rep) => {
this.templateLoading = false;
window.open(rep.data.data);
})
.catch(() => {
this.templateLoading = false;
});
},
/*人才列表切换页码 */
currentChange(currentPage) {
this.page.currentPage = currentPage;
this.refreshChange();
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
this.refreshChange();
},
refreshChange() {
this.onLoad(this.page, this.query);
},
/*搜索 */
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
searchReset1() {
this.query = {};
this.onLoad(this.page);
},
searchChange1() {
this.page.currentPage = 1;
this.onLoad(this.page, this.query);
},
/*人才列表多选 */
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
/*加载人才列表 */
onLoad(page, params = {}) {
this.loading = true;
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query),
this.tenantId
).then((res) => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
},
},
};
</script>
<style scoped>
.el-tree {
font-size: 14px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.el-form-item {
margin-bottom: 18px;
padding: 0 10px;
}
.searchBtn {
display: inline-block;
margin-bottom: 18px;
}
</style>