You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
7.6 KiB
254 lines
7.6 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2023-06-03 15:12:26
|
||
|
|
@ 备注: 人员管理
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import { orgInfo } from '@/api/hr/org/type'
|
||
|
|
import { getOrgTreeList } from '@/api/hr/org/index'
|
||
|
|
import { archivesCont,searchCriteriaForPeople } from '@/api/hr/people/type'
|
||
|
|
import { emptypeOptions } from '@/api/hr/people/datacont'
|
||
|
|
import { getArchivesListPage } from '@/api/hr/people/index'
|
||
|
|
import UserRole from '@/assets/icons/user.svg'
|
||
|
|
/**
|
||
|
|
* 引入页面
|
||
|
|
*/
|
||
|
|
import ArchivesCont from '@/views/hr/archives/archivescont.vue'
|
||
|
|
|
||
|
|
const searchOrgFormRef = ref(ElForm);
|
||
|
|
const orgTreeRef = ref(ElTree); //行政组织树
|
||
|
|
const orgTreeLoading = ref(false); //加载行政组织树
|
||
|
|
const orgTreeList = ref<orgInfo[]>(); //行政组织树数据
|
||
|
|
const orgTreeProps ={
|
||
|
|
children: 'child',
|
||
|
|
label: 'name',
|
||
|
|
} //行政组织树对照值
|
||
|
|
const peopleList = ref<archivesCont[]>(); //人员列表
|
||
|
|
const peoplecont = ref<archivesCont>(); //个人信息
|
||
|
|
const tableLoading = ref(false); //加载数据列表
|
||
|
|
const total = ref(0); //总记录数
|
||
|
|
const searchArchiveQuery = reactive<searchCriteriaForPeople>({
|
||
|
|
page:1,
|
||
|
|
pagesize:13
|
||
|
|
})
|
||
|
|
const archivesBox= ref(false); //详情弹窗
|
||
|
|
/**用工关系（1:临时工 , 2:编外人员 ;3:实习&实习生;4：试用员工；5：待分配；6：待岗；7：临时调入；8：正式员工；9：长期病假；10：停薪留职；11：退休；12：辞职；13：辞退；14：离职）',
|
||
|
|
`company` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '入职公司',
|
||
|
|
* 获取行政组织数据
|
||
|
|
*/
|
||
|
|
function haveOrgTreeInfo(){
|
||
|
|
orgTreeLoading.value = true;
|
||
|
|
getOrgTreeList({})
|
||
|
|
.then(({ data })=>{
|
||
|
|
orgTreeList.value = data
|
||
|
|
}).finally(()=>{orgTreeLoading.value = false;})
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 选中行政组织树节点
|
||
|
|
*/
|
||
|
|
const handleOrgTreeNodeClick = (data: orgInfo) => {
|
||
|
|
// console.log(data)
|
||
|
|
searchArchiveQuery.adminorg = data.id
|
||
|
|
getArchivesPage();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 重置选中行政组织
|
||
|
|
*/
|
||
|
|
function resetChecked() {
|
||
|
|
orgTreeRef.value!.setCheckedKeys([], false)
|
||
|
|
searchArchiveQuery.adminorg = 0
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 重置搜索框
|
||
|
|
*/
|
||
|
|
function resetArcFormQuery(){
|
||
|
|
searchOrgFormRef.value.resetFields();
|
||
|
|
searchArchiveQuery.emptype=[];
|
||
|
|
resetChecked();
|
||
|
|
getArchivesPage();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 获取人员列表
|
||
|
|
*/
|
||
|
|
function getArchivesPage(){
|
||
|
|
tableLoading.value = true;
|
||
|
|
getArchivesListPage(searchArchiveQuery)
|
||
|
|
.then(({ data })=>{
|
||
|
|
peopleList.value = data.list
|
||
|
|
total.value = data.total
|
||
|
|
})
|
||
|
|
.finally(()=>{tableLoading.value = false;})
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 新增员工
|
||
|
|
*/
|
||
|
|
function addPeopleDialog(){
|
||
|
|
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 查看详情
|
||
|
|
*/
|
||
|
|
function lookPeopleCont(cont:archivesCont){
|
||
|
|
peoplecont.value = cont
|
||
|
|
archivesBox.value = true
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 更新个人信息
|
||
|
|
*/
|
||
|
|
function updateMyCont(cont:archivesCont){
|
||
|
|
peoplecont.value = cont
|
||
|
|
}
|
||
|
|
//加载数据
|
||
|
|
onMounted(() => {
|
||
|
|
haveOrgTreeInfo();
|
||
|
|
getArchivesPage();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<el-container>
|
||
|
|
<el-aside width="300px" style="padding: 10px 10px;">
|
||
|
|
<el-card :body-style="{ height: '100%',padding:'0px 5px' }">
|
||
|
|
<el-button type="primary" style="width: 100%; margin: 10px 0;" @click="resetChecked">查看全部</el-button>
|
||
|
|
<el-tree
|
||
|
|
ref="orgTreeRef"
|
||
|
|
v-loading="orgTreeLoading"
|
||
|
|
node-key="id"
|
||
|
|
class="orgTree"
|
||
|
|
:data="orgTreeList"
|
||
|
|
:props="orgTreeProps"
|
||
|
|
:expand-on-click-node="false"
|
||
|
|
:check-on-click-node="true"
|
||
|
|
:check-strictly="true"
|
||
|
|
:default-expand-all="false"
|
||
|
|
@node-click="handleOrgTreeNodeClick"
|
||
|
|
/>
|
||
|
|
</el-card>
|
||
|
|
</el-aside>
|
||
|
|
<el-main style="padding: 10px 10px 10px 0px;">
|
||
|
|
<div class="app-container" style="padding: 0; margin:0">
|
||
|
|
<div class="search">
|
||
|
|
<el-form ref="searchOrgFormRef" :model="searchArchiveQuery" :inline="true">
|
||
|
|
<el-form-item label="工号 / 姓名" prop="keywords">
|
||
|
|
<el-input
|
||
|
|
v-model="searchArchiveQuery.keywords"
|
||
|
|
placeholder="请输入工号 / 姓名"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="用工关系" prop="number">
|
||
|
|
<el-select
|
||
|
|
v-model="searchArchiveQuery.emptype"
|
||
|
|
multiple
|
||
|
|
clearable
|
||
|
|
collapse-tags
|
||
|
|
placeholder="用工关系"
|
||
|
|
style="width: 240px"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in emptypeOptions"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="getArchivesPage">
|
||
|
|
<template #icon><i-ep-search /></template>
|
||
|
|
搜索
|
||
|
|
</el-button>
|
||
|
|
<el-button @click="resetArcFormQuery">
|
||
|
|
<template #icon><i-ep-refresh /></template>
|
||
|
|
重置
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['127710714914680832']"
|
||
|
|
type="success"
|
||
|
|
@click="addPeopleDialog()"
|
||
|
|
>
|
||
|
|
<i-ep-plus />新增
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<el-card shadow="never">
|
||
|
|
<el-table
|
||
|
|
v-loading="tableLoading"
|
||
|
|
highlight-current-row
|
||
|
|
:data="peopleList"
|
||
|
|
border
|
||
|
|
:header-cell-style="{background:'#F5F7FA'}"
|
||
|
|
>
|
||
|
|
<el-table-column fixed label="照片" width="60" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
|
||
|
|
<el-avatar v-else-if="scope.row.iconphoto != ''" shape="square" :size="30" :src="scope.row.iconphoto" />
|
||
|
|
<el-avatar v-else shape="square" :size="30" :src="UserRole" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column fixed label="姓名" prop="name" width="150">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ scope.row.name }}
|
||
|
|
<el-tag v-if="scope.row.personincharge==1" type="danger" >负责人</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column fixed label="工号" prop="number" width="120" align="center" />
|
||
|
|
<el-table-column fixed label="归属行政组织">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-text class="mx-1">{{ scope.row.companyname }}</el-text>
|
||
|
|
<el-text v-if="scope.row.maindeparmentname" class="mx-1"> <span v-if="scope.row.companyname"> / </span>{{ scope.row.maindeparmentname }}</el-text>
|
||
|
|
<el-text v-if="scope.row.sunmaindeparmentname" class="mx-1"> <span v-if="scope.row.maindeparmentname"> / </span>{{ scope.row.sunmaindeparmentname }}</el-text>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column fixed label="岗位" prop="positionname" width="120" align="center" />
|
||
|
|
<el-table-column fixed label="联系方式" prop="mobilephone" width="120" />
|
||
|
|
<el-table-column fixed label="居住地" prop="currentresidence" />
|
||
|
|
<el-table-column fixed="right" align="center" label="操作" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['127710903461228544']"
|
||
|
|
type="primary"
|
||
|
|
link
|
||
|
|
size="small"
|
||
|
|
@click.stop="lookPeopleCont(scope.row)"
|
||
|
|
>
|
||
|
|
<i-ep-view />查看详情
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination
|
||
|
|
v-if="total > 0"
|
||
|
|
v-model:total="total"
|
||
|
|
v-model:page="searchArchiveQuery.page"
|
||
|
|
v-model:limit="searchArchiveQuery.pagesize"
|
||
|
|
@pagination="getArchivesPage"
|
||
|
|
/>
|
||
|
|
</el-card>
|
||
|
|
<ArchivesCont v-model:isShow="archivesBox" :archivesdata="peoplecont" @updatemyconting="updateMyCont" @getarchivespageclick="getArchivesPage" />
|
||
|
|
</div>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
|
||
|
|
.common-layout{
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
background-color: aqua;
|
||
|
|
|
||
|
|
}
|
||
|
|
.el-container {
|
||
|
|
height: calc(100vh - 84px);
|
||
|
|
.el-card.is-always-shadow{
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cardBody{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.orgTree{
|
||
|
|
padding:5px 0;
|
||
|
|
}
|
||
|
|
</style>
|