ShutongInterconnectedChemicalCloudPlatform/src/views/hr/archives/index.vue

<!--
@ 作者: 秦东
@ 时间: 2023-06-03 15:12:26
@ 备注: 人员管理
-->
<script lang='ts' setup>
import { orgInfo,msgAry } 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,analysisRedisExelect } from '@/api/hr/people/index'
import UserRole from '@/assets/icons/user.svg'
import { UploadFilled } from '@element-plus/icons-vue'
/**
 * 引入页面
 */
import ArchivesCont from '@/views/hr/archives/archivescont.vue'


// const uploadFFurl = import.meta.env.VITE_APP_BASE_API + "/hrapi/staff/uploadUserFiles"
const uploadFFurl = import.meta.env.VITE_APP_BASE_API + "/hrapi/staff/uploadUserFilesRedis"

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 progressSize = 0
const progressSize = ref(0)
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
}
//批量导入数据相关操作
const piLiangBox = ref(false)
//打开批量导入面板
const openPiliangBox = () =>{
	piLiangBox.value = true	
}
let jiBuQiVal = 0;
//关闭导入
const handleOpenClose = () =>{
	piLiangBox.value = false
	peopleListAry.value = []
	progressSize.value =  0	
	peopleMsg.value = []
	jiBuQiVal = 0
}
const excelLoading = ref(false)
const excelJiexi = ref(false)
/**
 * Excel文件change事件
 *
 * @param file
 */
 function handleExcelChange(file: UploadFile) {
	excelLoading.value = true
	if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
		ElMessage.warning("上传Excel只能为xlsx、xls格式");
		excelLoading.value = false;
		return false;
	}
}

let peopleListAry = new Array;
const peopleMsg = ref<string[]>([])
const meritsYearIng = ref<any>();
const rewPunYearsIng = ref<any>();
const redisListKey = ref<string>();
const totalNum = ref<number>();
/**
@ 作者: 秦东
@ 时间: 2024-02-03 14:04:48
@ 功能: 上传成功
*/
const uploadTrue = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	excelLoading.value = false;
	// console.log("response",response);
	// console.log("uploadFile",uploadFile);
	// console.log("uploadFiles",uploadFiles);
	peopleListAry.push("文件上传成功！开始解析数据并写入数据库！")
	peopleMsg.value.push("文件上传成功！开始解析数据并写入数据库！")
	// peopleListAry.value.push("文件上传成功！开始解析数据并写入数据库！")
	// console.log("上传成功",response.code)
	if (response.code == 0){
		jiBuQiVal = 0
		progressSize.value =  0
		excelJiexi.value = true
		meritsYearIng.value = response.data.meritsYearIng
		rewPunYearsIng.value = response.data.rewPunYearsIng
		redisListKey.value = response.data.redisListKey
		totalNum.value = response.data.totalNum
		insetPeopleCont()
	}
}
const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	excelLoading.value = true;
	// console.log("1response",response);
	// console.log("1uploadFile",uploadFile);
	// console.log("1uploadFiles",uploadFiles);
	let msgAry = new Array
	msgAry.push("响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息")
	// errorMsg = ["响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息"]
	peopleListAry.value = msgAry
}


const excelUpload = ref<any>()

const insetPeopleCont = () =>{
	// console.log("启动数据写入数据库",jiBuQiVal,totalNum.value)
	if (jiBuQiVal < totalNum.value){
		let sendData = {
			meritsYearIng:meritsYearIng.value,
			rewPunYearsIng:rewPunYearsIng.value,
			redisListKey:redisListKey.value,
			number:jiBuQiVal,
		}
		// console.log("启动数据写入数据库",sendData)
		analysisRedisExelect(sendData)
			.then((data:any)=>{
				// console.log("启动数据写入11111数据库",data)
				peopleMsg.value.push(data.data.msgstr)
				jiBuQiVal++
				// if (jibuq+ 1 >= totalNum.value){
					
				// }
				progressSize.value =  Math.round((jiBuQiVal/totalNum.value)*10000)/100
				insetPeopleCont()
			})
	}else{
		excelJiexi.value = false
		progressSize.value =  100
		excelUpload.value.clearFiles()
	}
}

//启动数据写入数据库
const writeDataBase = () => {
	let jibuq = 0
	for(let i = 0; i < totalNum.value;i++){
		let sendData = {
			meritsYearIng:meritsYearIng.value,
			rewPunYearsIng:rewPunYearsIng.value,
			redisListKey:redisListKey.value,
			number:i,
		}
		// console.log("启动数据写入数据库",sendData)
		analysisRedisExelect(sendData)
			.then((data:any)=>{
				// console.log("启动数据写入11111数据库",data)
				peopleMsg.value.push(data.data.msgstr)
				jibuq++
				if (jibuq+ 1 >= totalNum.value){
					excelJiexi.value = false
				}
			})
	}
	
}
//加载数据
onMounted(() => {
	haveOrgTreeInfo();
	getArchivesPage();
});
</script>
<template>
	<div class="app-container">
		<el-container>
		<el-aside width="300px" style="border-right:solid 1px #f0f0f0;">
			<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:0">
			<div style="padding: 0; margin:0">
				<el-row class="search">
					<el-col :span="16">
						<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>
					</el-col>
					
					<el-col :span="8" style="text-align: right;">
						<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-col>

				</el-row>
				<el-card shadow="never" style="padding: 0;">
					<div style="margin-bottom: 15px">
						<el-button 
					
								v-hasPerm="['215437071358111744']"
								type="primary" 
								@click="addPeopleDialog()" 
							>
							<template #icon><i-ep-plus /></template>新增
							</el-button>
							<el-button 
			
								v-hasPerm="['215437153071542272']"
								plain
								type="primary" 
								@click="openPiliangBox" 
							>
							<el-icon><MessageBox /></el-icon>
							批量导入数据
							</el-button>
					</div>
					<el-table
						v-loading="tableLoading"
						highlight-current-row
						stripe
						:data="peopleList" 
						: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-dialog
			v-model="piLiangBox"
			title="批量导入人员信息"
			width="800"
			:before-close="handleOpenClose"
		>
			<el-row v-loading="excelLoading" element-loading-text="文档上传中，请稍候...">
				<el-col :span="24"  v-loading="excelJiexi" element-loading-text="文档解析中，请稍候...">
					<el-upload
						ref="excelUpload"
						class="upload-demo"
						drag
						:action="uploadFFurl"
						:before-upload="handleExcelChange"
						:on-success="uploadTrue"
						:on-error = "uploadError"
						:show-file-list = "false"
						multiple
					>
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
						<div class="el-upload__text">
							将电子表格拖到此处或 <em>单击上载</em>
						</div>
						
					</el-upload>
				</el-col>
				
			</el-row>
			<el-row>
					<el-col :span="24">
						<el-progress :text-inside="true" :stroke-width="20" :percentage="progressSize">
							<span>已完成：{{progressSize}}%</span>
						</el-progress>
					</el-col>
			</el-row>
			<el-scrollbar  ref="myScrollbar" style="height: 300px">
				<el-row>
					<el-col v-for="(item,index) in peopleMsg" :key="index" :span="24">
						{{ item}}
					</el-col>
				</el-row>
			</el-scrollbar>
			
		</el-dialog>
	</el-container>
	</div>
	
</template>
<style  lang='scss' scoped>

.common-layout{
	height: calc(100% - 60px);
	background-color: aqua;
	
}
.el-container {
	.el-card.is-always-shadow{
		height: 100%;
		overflow: auto;
	}
}
.cardBody{
	height: 100%;
}
.orgTree{
	padding:5px 0;
}
.divBoxCont{
	width: 100%;
	height:300px;
	overflow: hidden;
	overflow-y: auto;
}
</style>