From 1dc27b642ce7e27d38916b1253a06affb21161cc Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Thu, 29 Aug 2024 10:13:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=8D=A3=E4=BF=A1=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/hr/org/index.ts                       |  60 +++
 src/api/hr/people/index.ts                    |  10 +-
 src/views/hr/archives/index.vue               | 392 +++++++++++++++++-
 .../lowcodepage/pageFlow/appTableFlow.vue     |  20 +-
 .../lowcodepage/pageFlow/tableFlow.vue        |  10 +-
 5 files changed, 465 insertions(+), 27 deletions(-)

diff --git a/src/api/hr/org/index.ts b/src/api/hr/org/index.ts
index 3a06bc7..e9f09bd 100644
--- a/src/api/hr/org/index.ts
+++ b/src/api/hr/org/index.ts
@@ -132,3 +132,63 @@ export function getTeamListCont(data: searchTeamList): AxiosPromise<orgTeamListC
 		data: data
 	});
 }
+/**
+ * 获取人员列表UploadUserTemplate
+ */
+ export function gainUserInfoDownTemplateList(data:any){
+	return request({
+		url: '/systemapi/user/gainUserInfoDownTemplateList',
+		method: 'post',
+		data: data
+	});
+}
+/**
+ * 获取人员列表
+ */
+ export function uploadUserTemplate(data:any){
+	return request({
+		url: '/systemapi/user/uploadUserTemplate',
+		method: 'post',
+		data: data
+	});
+}
+/**
+ * 编辑人员模版列表状态
+ */
+ export function editUserTempr(data:any){
+	return request({
+		url: '/systemapi/user/editUserTempr',
+		method: 'post',
+		data: data
+	});
+}
+/**
+ * 获取员工模版信息
+ */
+ export function gainUserTemplateInfo(data:any){
+	return request({
+		url: '/systemapi/user/gainUserTemplateInfo',
+		method: 'post',
+		data: data
+	});
+}
+/**
+ * 编辑模版内容
+ */
+ export function editUserTemplateInfo(data:any){
+	return request({
+		url: '/systemapi/user/editUserTemplateInfo',
+		method: 'post',
+		data: data
+	});
+}
+/**
+ * 获取现有模版归属那个组织
+ */
+ export function gainTempleateOrgList(data:any){
+	return request({
+		url: '/systemapi/user/gainTempleateOrgList',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/api/hr/people/index.ts b/src/api/hr/people/index.ts
index 520b2b5..62cc880 100644
--- a/src/api/hr/people/index.ts
+++ b/src/api/hr/people/index.ts
@@ -372,13 +372,21 @@ import {
 /**
  * 获取人员档案
  */
- export function analysisRedisExelect(data?: any): AxiosPromise {
+export function analysisRedisExelect(data?: any): AxiosPromise {
 	return request({
 	  url: '/hrapi/staff/analysisRedisExelect',
 	  method: 'post',
 	  data: data
 	});
 }
+//解析档案上传
+export function analysisRedisOrgExelect(data?: any): AxiosPromise {
+	return request({
+	  url: '/hrapi/staff/analysisRedisOrgExelect',
+	  method: 'post',
+	  data: data
+	});
+}
 
 
 /**
diff --git a/src/views/hr/archives/index.vue b/src/views/hr/archives/index.vue
index 9d08b2e..2ef67f8 100644
--- a/src/views/hr/archives/index.vue
+++ b/src/views/hr/archives/index.vue
@@ -5,18 +5,36 @@
 -->
 <script lang='ts' setup>
 import { orgInfo,msgAry } from '@/api/hr/org/type'
-import { getOrgTreeList } from '@/api/hr/org/index'
+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 } from '@/api/hr/people/index'
+import { getArchivesListPage,analysisRedisExelect,analysisRedisOrgExelect } 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';
+
+const innerRef = ref<HTMLDivElement>()
+const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
+
+
+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"
 
@@ -107,8 +125,14 @@ function updateMyCont(cont:archivesCont){
 }
 //批量导入数据相关操作
 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;
@@ -122,6 +146,7 @@ const handleOpenClose = () =>{
 }
 const excelLoading = ref(false)
 const excelJiexi = ref(false)
+const logList = ref<any>([])
 /**
  * Excel文件change事件
  *
@@ -136,6 +161,20 @@ const excelJiexi = ref(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>();
@@ -172,7 +211,7 @@ const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadF
 	// console.log("1response",response);
 	// console.log("1uploadFile",uploadFile);
 	// console.log("1uploadFiles",uploadFiles);
-	let msgAry = new Array
+	let msgAry = new Array                                        
 	msgAry.push("响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息")
 	// errorMsg = ["响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息"]
 	peopleListAry.value = msgAry
@@ -189,18 +228,22 @@ const insetPeopleCont = () =>{
 			rewPunYearsIng:rewPunYearsIng.value,
 			redisListKey:redisListKey.value,
 			number:jiBuQiVal,
+			orgId:tempForm.orgId.toString(),
 		}
 		// console.log("启动数据写入数据库",sendData)
-		analysisRedisExelect(sendData)
+		analysisRedisOrgExelect(sendData)
 			.then((data:any)=>{
-				// console.log("启动数据写入11111数据库",data)
-				peopleMsg.value.push(data.data.msgstr)
+				// 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
@@ -220,14 +263,17 @@ const writeDataBase = () => {
 			number:i,
 		}
 		// console.log("启动数据写入数据库",sendData)
-		analysisRedisExelect(sendData)
+		analysisRedisOrgExelect(sendData)
 			.then((data:any)=>{
 				// console.log("启动数据写入11111数据库",data)
-				peopleMsg.value.push(data.data.msgstr)
+				peopleMsg.value.push(data.data.msgStr)
 				jibuq++
 				if (jibuq+ 1 >= totalNum.value){
 					excelJiexi.value = false
 				}
+				nextTick(()=>{
+					handleClick();
+				})
 			})
 	}
 	
@@ -236,7 +282,204 @@ const writeDataBase = () => {
 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;
+    }
+}
 </script>
 <template>
 	<div class="app-container">
@@ -323,6 +566,16 @@ onMounted(() => {
 							<el-icon><MessageBox /></el-icon>
 							批量导入数据
 							</el-button>
+							<el-button 
+			
+								v-hasPerm="['287868103478489088']"
+								plain
+								type="primary" 
+								@click="openImportTemplate" 
+							>
+							<el-icon><Download /></el-icon>
+							导入模板下载
+							</el-button>
 					</div>
 					<el-table
 						v-loading="tableLoading"
@@ -381,20 +634,31 @@ onMounted(() => {
 				<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"
+			: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"
-						:before-upload="handleExcelChange"
+						:data="{orgId:tempForm.orgId.toString()}"
+						:before-upload="handleExcelChangeTemp"
 						:on-success="uploadTrue"
 						:on-error = "uploadError"
 						:show-file-list = "false"
@@ -416,14 +680,103 @@ onMounted(() => {
 						</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 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>
@@ -454,4 +807,9 @@ onMounted(() => {
 	overflow: hidden;
 	overflow-y: auto;
 }
+.pageBox{
+	text-align: center;
+	display:flex;
+	align-items: center;
+}
 </style>
diff --git a/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue b/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue
index 6e185d8..c569de1 100644
--- a/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue
+++ b/src/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue
@@ -78,7 +78,20 @@ const drawerOpenOrClose =   computed({
 	},
 });
 
-const drawbox =   ref(props.drawerwith)
+const drawbox =   computed({
+	get: () => {
+		
+			// console.log("isFlowTable",isFlowTable.value)
+			if(isFlowTable.value){
+				return 1300
+			}
+			return props.drawerwith
+		
+	},
+	set: (val:number) => {
+		return val
+	},
+});
 const isFlowTable = ref(false) //判断是不是流程表单
 //获取表单数据
 const getTaskFormData = () =>{
@@ -89,9 +102,10 @@ const getTaskFormData = () =>{
 			// console.log("表单数据",data)
 			if(data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0"){
 				isFlowTable.value = true;
-				
+				drawbox.value =  800 + 350
 			}else{
 				isFlowTable.value = false;
+				drawbox.value =  800
 			}
 			gainFlowChart.id=data.tableFormPage.flowkeystr
 			// console.log("表单数据--->1",data.flowPage.flowList)
@@ -493,7 +507,7 @@ function optionsValue3Get3(data: any,fieldName: string){
 }
 </script>
 <template>
-	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >
+	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >{{drawbox}}
 		<AppFormPage
 						
 			ref="formEl"
diff --git a/src/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue b/src/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue
index 4a09147..9a90584 100644
--- a/src/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue
+++ b/src/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue
@@ -72,15 +72,13 @@ const drawerOpenOrClose =   computed({
 
 const drawbox =   computed({
 	get: () => {
-		if(props.drawerwith > 1200){
-			return '50%';
-		}else{
+		
 			// console.log("isFlowTable",isFlowTable.value)
 			if(isFlowTable.value){
-				return '90%'
+				return 1300
 			}
 			return props.drawerwith
-		}
+		
 	},
 	set: (val:number) => {
 		return val
@@ -428,7 +426,7 @@ function optionsValue3Get3(data: any,fieldName: string){
 
 </script>
 <template>
-	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >
+	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >--->{{drawbox}}
 		<div v-if="isFlowTable" class="common-layout">
 			<el-container>
 				<el-main v-loading="formLoading" element-loading-text="Loading...">