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,gainUserInfoDownTemplateList,uploadUserTemplate,editUserTempr,gainUserTemplateInfo,editUserTemplateInfo,gainTempleateOrgList } from '@/api/hr/org/index'
import { archivesCont,searchCriteriaForPeople } from '@/api/hr/people/type'
import { emptypeOptions } from '@/api/hr/people/datacont'
import { getArchivesListPage,analysisRedisExelect,analysisRedisOrgExelect,downLoadNineTestPage } from '@/api/hr/people/index'
import UserRole from '@/assets/icons/user.svg'
import { UploadFilled } from '@element-plus/icons-vue'

import { uploadUrl } from '@/api/DesignForm'
/**
 * 引入页面
 */
import ArchivesCont from '@/views/hr/archives/archivescont.vue'


import { ElScrollbar as ElScrollbarType } from 'element-plus';


import {
    json2string
} from '@/utils/DesignForm/form'

const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()

const downloadUrl = import.meta.env.VITE_APP_BASE_API+"/systemapi/rongxin/downLoadNineTestPage"

const handleClick = () => {
  nextTick(() => {
	// console.log("滚动条长度",innerRef.value!.clientHeight)
    if (innerRef.value!.clientHeight > 300) {
      scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    }
    
  })
}

// 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 orgListTemp = ref<any>([])
//打开批量导入面板
const openPiliangBox = () =>{
	gainTempleateOrgList()
		.then((data:any) =>{
			console.log("打开批量导入面板",data);
			orgListTemp.value = data.data
		})
	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)
const logList = ref<any>([])
/**
 * 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;
	}
}

function handleExcelChangeTemp(file: UploadFile) {
	excelLoading.value = true
	if(tempForm.orgId == 0 || tempForm.orgId == ""){
		ElMessage.warning("对不起！你没有选定上传的是哪个行政组织得人员信息！");
		excelLoading.value = false;
		return false;
	}
	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,
			orgId:tempForm.orgId.toString(),
		}
		// console.log("启动数据写入数据库",sendData)
		analysisRedisOrgExelect(sendData)
			.then((data:any)=>{
				// console.log("启动数据写入11111数据库",data,data.data.msgStr)
				peopleMsg.value.push(data.data.msgStr)
				jiBuQiVal++
				// if (jibuq+ 1 >= totalNum.value){
					
				// }
				progressSize.value =  Math.round((jiBuQiVal/totalNum.value)*10000)/100
				insetPeopleCont()
				nextTick(()=>{
					handleClick();
				})
			})
	}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)
		analysisRedisOrgExelect(sendData)
			.then((data:any)=>{
				// console.log("启动数据写入11111数据库",data)
				peopleMsg.value.push(data.data.msgStr)
				jibuq++
				if (jibuq+ 1 >= totalNum.value){
					excelJiexi.value = false
				}
				nextTick(()=>{
					handleClick();
				})
			})
	}
	
}
//加载数据
onMounted(() => {
	haveOrgTreeInfo();
	getArchivesPage();
	scrollToBottom();
});

const ruleForm = reactive({
	id:"",
	orgId:"",
	fileName:"",
	filePath:"",
	fileUrl:""
})
const tempForm = reactive({
	orgId:0
})
/**
@ 作者: 秦东
@ 时间: 2024-08-24 08:51:41
@ 功能: 打开导入模板下载页面
*/
const search = reactive({
	page:1,
	pagesize:20
})
const downImportTemOpen = ref(false)
const downTemplate = ref()
const openImportTemplate = () => {
	downImportTemOpen.value = true
	temList()
}
const totalVal = ref(0)
/**
@ 作者: 秦东
@ 时间: 2024-08-24 13:33:41
@ 功能: 获取导入模版下载列表
*/
const temList = () => {
	gainUserInfoDownTemplateList(search)
		.then((data:any)=>{
			console.log("获取导入模版下载列表---<",data)
			downTemplate.value = data.data.list
			totalVal.value = data.data.total
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-08-24 08:58:11
@ 功能: 关闭抽屉
*/
const handleClose = () => {
	downImportTemOpen.value = false
}
/**
@ 作者: 秦东
@ 时间: 2024-08-24 14:14:37
@ 功能: 上传新模版
*/
const isNewAddTem = ref(false)
const setUpNewTemplate = () => {
	isNewAddTem.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-08-24 14:22:09
@ 功能: 关闭上传导入模版弹窗
*/
const tempOpenClose = () => {
	isNewAddTem.value = false
}
const orgTreePropsBut ={
  children: 'child',
  value: 'id',
  label: 'name',
}	//行政组织树对照值

/**
@ 作者: 秦东
@ 时间: 2024-04-19 13:13:18
@ 功能: 表单验证规则
*/
const dataFormRules = reactive({
	orgId: [{ required: true, message: "请选择行政组织", trigger: "blur" }],
	fileName: [{ required: true, message: "请上传模版文件", trigger: "blur" }],
})

const excelUploadUs = ref()

/**
@ 作者: 秦东
@ 时间: 2024-08-24 14:42:34
@ 功能: 保存上传模版信息
*/
const addTemLoading = ref(false)
const ruleFormRef = ref<any>()
	
const saveTemp = () => {
	addTemLoading.value = true
	ruleFormRef.value.validate((valid: any) => {
		if (valid){
			ruleForm.orgId=ruleForm.orgId.toString()
			console.log("上传传输信息--->",ruleForm)
			if(ruleForm.id == 0 || ruleForm.id == ""){
				uploadUserTemplate(ruleForm)
					.then((data:any) =>{
						console.log("上传传输信息-1-->",data)
						temList()
						tempOpenClose();
					})
					.finally(() =>{
						addTemLoading.value = false
					})
			}else{
				editUserTemplateInfo(ruleForm)
					.then((data:any) =>{
						console.log("上传传输信息-2-->",data)
						temList()
						tempOpenClose();
					})
					.finally(() =>{
						addTemLoading.value = false
					})
			}
			
		}else{
			
			addTemLoading.value = false
		}

	});
}
/**
@ 作者: 秦东
@ 时间: 2024-08-24 14:46:32
@ 功能: 文件上传成功
*/
const uploadTrueUs = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	// console.log("response",response);
	// console.log("uploadFile",uploadFile);
	// console.log("uploadFiles",uploadFiles);
	excelLoading.value = false
	ruleForm.fileName = uploadFile.name
	ruleForm.filePath = response.data.physicspath
	ruleForm.fileUrl = response.data.url
	
}
/**
@ 作者: 秦东
@ 时间: 2024-08-26 11:08:00
@ 功能: 编辑下载模版状态
*/
const delUserTemp = (val:any,status:number) => {
	// console.log("编辑下载模版状态------1------->",val);
	// console.log("编辑下载模版状态------2------->",status);
	let sendVal = {
		id:val.id.toString(),
		status:status
	}
	editUserTempr(sendVal)
		.then((data:any) =>{
			ElMessage.success(data.msg);
			temList()
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-08-26 11:45:44
@ 功能: 编辑下载文件
*/
const editUserTemp = (val:any) => {
	ruleForm.id = val.id.toString();
	ruleForm.orgId = val.orgId
	ruleForm.fileName = val.fileName
	ruleForm.filePath = val.filePath
	ruleForm.fileUrl = val.fileUrl
	console.log("编辑下载文件---->",ruleForm)
	isNewAddTem.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-08-26 13:36:12
@ 功能: 关闭上传弹窗
*/
const closeUploadTemp = () => {
		tempForm.orgId=0
		progressSize.value = 0
		piLiangBox.value = false
		peopleMsg.value = []
}


const myScrollbar = ref<any>(null);

//滚动面板自动滑动到底部
const scrollToBottom = () => {
    if (myScrollbar.value) {
        const container = myScrollbar.value.$el.querySelector('.el-scrollbar__wrap');
        container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
        container.scrollTop = container.scrollHeight;
    }
}
/**
@ 作者: 秦东
@ 时间: 2024-09-13 09:18:25
@ 功能: 下团队角色分析表
*/
const downLoadTeamTable = () => {
	downLoadNineTestPage(searchArchiveQuery)
		.then(({data}) => {
			console.log("下团队角色分析表",data)
		})
}

</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-space wrap>
						<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>
							<el-button 
			
								v-hasPerm="['287868103478489088']"
								plain
								type="primary" 
								@click="openImportTemplate" 
							>
							<el-icon><Download /></el-icon>
							导入模板下载
							</el-button>
							
							<el-link type="primary"  :underline="false" :href="downloadUrl+'?keywords='+searchArchiveQuery.keywords+'&adminorg='+searchArchiveQuery.adminorg+'&emptype='+json2string(searchArchiveQuery.emptype)" target="_blank"><el-button 
			
								v-hasPerm="['287868103478489088']"
								plain
								type="primary" 
							>
								<el-icon><Download /></el-icon>
								下载团队角色分析表
							</el-button></el-link>
							</el-space>
					</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="closeUploadTemp"
		>
			<el-row v-loading="excelLoading" element-loading-text="文档上传中，请稍候...">
				<el-col :span="24">
					<el-form :model="tempForm" label-width="auto" style="max-width: 100%">
						<el-form-item label="请选择上传那个公司的人员信息">
							<el-radio-group v-model="tempForm.orgId">
								<el-radio v-for="item in orgListTemp" :value="item.id">{{item.name}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="24"  v-loading="excelJiexi" element-loading-text="文档解析中，请稍候...">
					<el-upload
						ref="excelUpload"
						class="upload-demo"
						drag
						:action="uploadFFurl"
						:data="{orgId:tempForm.orgId.toString()}"
						:before-upload="handleExcelChangeTemp"
						: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 height="300px" ref="scrollbarRef" always>
				<div ref="innerRef">
					<p  v-for="(item,index) in peopleMsg" :key="index" class="scrollbar-demo-item">{{ item }}</p>
				</div>
			</el-scrollbar>
		</el-dialog>

		<!--导入模板下载-->
		<el-drawer
			v-model="downImportTemOpen"
			title="各行政组织员工信息点在档案模板"
			:direction="direction"
			:before-close="handleClose"
			:size="500"
		>	
			<el-table :data="downTemplate" border style="width: 100%">
				<el-table-column prop="orgName" label="行政组织" width="200" />
				<el-table-column prop="fileName" label="文件名称">
					<template #default="scope">
						<el-link type="success" :underline="false" :href="scope.row.fileUrl" target="_blank">{{ scope.row.fileName }}</el-link>
					</template>
				</el-table-column>
				<el-table-column  v-hasPerm="['288626867236253696']" prop="address" label="操作" align="center"  width="100">
					<template #default="scope">
						<el-button link type="warning" size="small" @click="editUserTemp(scope.row)">编辑</el-button>
						<el-button link type="danger" size="small" @click="delUserTemp(scope.row,3)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pageBox">
				<el-pagination  layout="prev, pager, next" :total="totalVal" />
			</div>
			<template #footer>
				<div  v-hasPerm="['288626950073757696']" style="flex: auto">
					<el-button type="primary" @click="setUpNewTemplate">上传新模版</el-button>
				</div>
			</template>
		</el-drawer>
		<!--导入模版上传-->
		<el-dialog
			v-model="isNewAddTem"
			title="上传导入模版"
			width="400"
			:before-close="tempOpenClose"
		>
			<el-form
				ref="ruleFormRef"
				style="max-width: 600px"
				:model="ruleForm"
				:rules="dataFormRules"
				label-width="auto"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
				<el-form-item label="归属行政组织" prop="orgId">
					<el-tree-select
						v-model="ruleForm.orgId"
						:data="orgTreeList" 
						:props="orgTreePropsBut" 
						:render-after-expand="false"
						:expand-on-click-node="false"
						:check-on-click-node="true"
						:check-strictly="true" 
						:default-expand-all="false"
						style="width: 240px"
					/>
				</el-form-item>
				<el-form-item label="信息模版" prop="fileName">
					<el-input v-model="ruleForm.fileName"  />
					<el-upload
						ref="excelUploadUs"
						class="upload-demo"
						drag
						v-loading="excelLoading"
						:action="uploadUrl"
						:limit="1"
						:before-upload="handleExcelChange"
						:on-success="uploadTrueUs"
						:on-error = "uploadError"
						:show-file-list = "false"
						
					>
						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
						<div class="el-upload__text">
							将电子表格拖到此处或 <em>单击上载</em>
						</div>
						
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-loading="addTemLoading" @click="saveTemp()">
						确定上传
					</el-button>
					<el-button @click="tempOpenClose()">取消</el-button>
				</el-form-item>
			</el-form>
		</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;
}
.pageBox{
	text-align: center;
	display:flex;
	align-items: center;
}
</style>