4 changed files with 509 additions and 9 deletions
@ -0,0 +1,366 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-08-18 13:05:13 |
||||
|
@ 备注: 上传下载页面 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
import { analysisDutyData } from "@/api/hr/paiban/index"; |
||||
|
import { useUserStore } from "@/store/modules/user"; |
||||
|
import { ElScrollbar as ElScrollbarType } from "element-plus"; |
||||
|
|
||||
|
const downloadUrl = |
||||
|
import.meta.env.VITE_APP_BASE_API + "/systemapi/public/downLoadDutyPage"; //下载地址 |
||||
|
const uploadFFurl = import.meta.env.VITE_APP_BASE_API + "/systemapi/app/uploadFilesRedis"; //上传地址 |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isOpen: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
currOrgCont: { |
||||
|
type: Number, |
||||
|
default: 309, |
||||
|
}, |
||||
|
currOrgContName: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
currentTime: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
orgList: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
const excelUpload = ref<any>(); |
||||
|
const ruleFormRefUpDown = ref(null); |
||||
|
const loading = ref(false); |
||||
|
const emits = defineEmits(["update:isOpen"]); |
||||
|
const upLoadText = ref("文档上传中,请稍候..."); |
||||
|
const isShow = computed({ |
||||
|
get() { |
||||
|
// console.log("对话框状态",props.isOpen); |
||||
|
|
||||
|
return props.isOpen; |
||||
|
}, |
||||
|
set(val: boolean) { |
||||
|
// console.log("对话框状态",props.isOpen); |
||||
|
emits("update:isOpen", val); |
||||
|
}, |
||||
|
}); |
||||
|
const userStore = useUserStore(); |
||||
|
const uploadMsg = ref<string[]>([]); |
||||
|
const callBackMsg = ref<any>([]); |
||||
|
const pageInfo = reactive({ |
||||
|
orgId: props.currOrgCont ? props.currOrgCont : 309, |
||||
|
types: 1, |
||||
|
dateTime: props.currentTime ? props.currentTime : 0, |
||||
|
}); |
||||
|
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>(); |
||||
|
const innerRef = ref<HTMLDivElement>(); |
||||
|
let jiBuQiVal = 0; |
||||
|
const progressSize = ref(0); |
||||
|
//关闭上传下载页面 |
||||
|
const closeupDoPage = () => { |
||||
|
emits("update:isOpen", false); |
||||
|
ruleFormRefUpDown.value.resetFields(); |
||||
|
progressSize.value = 0; |
||||
|
jiBuQiVal = 0; |
||||
|
}; |
||||
|
/** |
||||
|
* 表单验证规则 |
||||
|
*/ |
||||
|
const rulesPageInfo = reactive({ |
||||
|
orgId: [{ required: true, message: "请选择行政组织", trigger: "blur" }], |
||||
|
types: [{ required: true, message: "请选择导入类型", trigger: "blur" }], |
||||
|
}); |
||||
|
//上传前数据验证 |
||||
|
const handleExcelChangeTemp = async (file: UploadFile) => { |
||||
|
loading.value = true; |
||||
|
const valid = await ruleFormRefUpDown.value.validate(); |
||||
|
if (!valid) { |
||||
|
subLoad.value = false; |
||||
|
return; |
||||
|
} |
||||
|
if (!/\.(xlsx|xls|XLSX|XLS|csv|CSV)$/.test(file.name)) { |
||||
|
ElMessage.warning("上传Excel只能为xlsx、xls、svg格式"); |
||||
|
loading.value = false; |
||||
|
return false; |
||||
|
} |
||||
|
uploadMsg.value.push("开始上传文件,请稍后!"); |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 1, |
||||
|
msg: "开始上传文件,请稍后!", |
||||
|
}); |
||||
|
return true; |
||||
|
}; |
||||
|
//上传失败返回数据 |
||||
|
const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => { |
||||
|
loading.value = true; |
||||
|
// console.log("1response",response); |
||||
|
// console.log("1uploadFile",uploadFile); |
||||
|
// console.log("1uploadFiles",uploadFiles); |
||||
|
let msgAry = new Array(); |
||||
|
msgAry.push( |
||||
|
"响应时间过长,系统自动转为后台静默处理,可先关闭窗口!完成时间大约90分钟。请于90分钟后刷新信息" |
||||
|
); |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 4, |
||||
|
msg: |
||||
|
"响应时间过长,系统自动转为后台静默处理,可先关闭窗口!完成时间大约90分钟。请于90分钟后刷新信息", |
||||
|
}); |
||||
|
// errorMsg = ["响应时间过长,系统自动转为后台静默处理,可先关闭窗口!完成时间大约90分钟。请于90分钟后刷新信息"] |
||||
|
uploadMsg.value = msgAry; |
||||
|
}; |
||||
|
const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => { |
||||
|
console.log(file, uploadFiles); |
||||
|
}; |
||||
|
const upLoadArg = reactive({ |
||||
|
redisKey: "", |
||||
|
total: 0, |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-02-03 14:04:48 |
||||
|
@ 功能: 上传成功 |
||||
|
*/ |
||||
|
const uploadTrueStaff = ( |
||||
|
response: any, |
||||
|
uploadFile: UploadFile, |
||||
|
uploadFiles: UploadFiles |
||||
|
) => { |
||||
|
loading.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) { |
||||
|
uploadMsg.value.push("文件上传成功!开始解析数据并写入数据库!"); |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 3, |
||||
|
msg: "文件上传成功!开始解析数据并写入数据库!", |
||||
|
}); |
||||
|
jiBuQiVal = 0; |
||||
|
progressSize.value = 0; |
||||
|
loading.value = true; |
||||
|
upLoadArg.redisKey = response.data.redisKey; |
||||
|
upLoadArg.total = response.data.total; |
||||
|
// staffChengji.orgId = response.data.orgId; |
||||
|
// staffChengji.redisListKey = response.data.redisListKey; |
||||
|
// staffChengji.total = response.data.total; |
||||
|
// staffChengji.years = response.data.years; |
||||
|
// staffChengji.levels = response.data.levels; |
||||
|
// console.log("上传成功===>", staffChengji); |
||||
|
// insetPeopleContStall(); |
||||
|
analysisData(); |
||||
|
} else { |
||||
|
uploadMsg.value.push(response.msg); |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 5, |
||||
|
msg: response.msg, |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
//解析上传数据 |
||||
|
const analysisData = () => { |
||||
|
console.log("解析上传数据", jiBuQiVal, upLoadArg.total); |
||||
|
if (jiBuQiVal < upLoadArg.total) { |
||||
|
analysisDutyData({ |
||||
|
orgId: pageInfo.orgId, |
||||
|
types: pageInfo.types, |
||||
|
dateTime: pageInfo.dateTime, |
||||
|
redisKey: upLoadArg.redisKey, |
||||
|
number: jiBuQiVal, |
||||
|
}).then((data: any) => { |
||||
|
console.log("启动数据写入11111数据库", data); |
||||
|
console.log("启动数据写入11111数据库", data.data); |
||||
|
uploadMsg.value.push(data.data.msg); |
||||
|
if (data.code == 0) { |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 2, |
||||
|
msg: data.data.msg, |
||||
|
}); |
||||
|
} else { |
||||
|
callBackMsg.value.push({ |
||||
|
attr: 5, |
||||
|
msg: data.data.msg, |
||||
|
}); |
||||
|
} |
||||
|
jiBuQiVal++; |
||||
|
progressSize.value = Math.round((jiBuQiVal / upLoadArg.total) * 10000) / 100; |
||||
|
nextTick(() => { |
||||
|
analysisData(); |
||||
|
}); |
||||
|
}); |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
progressSize.value = 100; |
||||
|
excelUpload.value.clearFiles(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
watch( |
||||
|
() => uploadMsg.value, |
||||
|
() => { |
||||
|
nextTick(() => { |
||||
|
if (innerRef.value!.clientHeight > 200) { |
||||
|
scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
{ |
||||
|
deep: true, |
||||
|
} |
||||
|
); |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="isShow" |
||||
|
:title="currOrgContName + '上传值班(加班)信息'" |
||||
|
width="600" |
||||
|
:before-close="closeupDoPage" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="ruleFormRefUpDown" |
||||
|
style="width: 100%" |
||||
|
:model="pageInfo" |
||||
|
:rules="rulesPageInfo" |
||||
|
label-width="80" |
||||
|
> |
||||
|
<el-form-item label="行政组织" prop="orgId"> |
||||
|
<el-select v-model="pageInfo.orgId" placeholder="请选择行政组织"> |
||||
|
<el-option |
||||
|
v-for="item in props.orgList" |
||||
|
:key="item.id" |
||||
|
:label="item.name + '(' + item.id + ')'" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="导入类型" prop="types"> |
||||
|
<el-radio-group v-model="pageInfo.types"> |
||||
|
<el-radio :value="1">按月导入</el-radio> |
||||
|
<el-radio :value="2">指定日期导入</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择时间" prop="dateTime"> |
||||
|
<el-date-picker |
||||
|
v-if="pageInfo.types == 1" |
||||
|
v-model="pageInfo.dateTime" |
||||
|
type="month" |
||||
|
placeholder="请选择月份" |
||||
|
value-format="x" |
||||
|
/> |
||||
|
<el-date-picker |
||||
|
v-else |
||||
|
v-model="pageInfo.dateTime" |
||||
|
type="date" |
||||
|
placeholder="请选择日期" |
||||
|
value-format="x" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="操作"> |
||||
|
<el-link |
||||
|
type="primary" |
||||
|
:underline="false" |
||||
|
:href=" |
||||
|
downloadUrl + |
||||
|
'?orgid=' + |
||||
|
pageInfo.orgId + |
||||
|
'&types=' + |
||||
|
pageInfo.types + |
||||
|
'&timeval=' + |
||||
|
pageInfo.dateTime |
||||
|
" |
||||
|
target="_blank" |
||||
|
> |
||||
|
<el-button type="warning" class="upDnBox" |
||||
|
>下载当前导入模板<i class="fa fa-download" |
||||
|
/></el-button> |
||||
|
</el-link> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=""> |
||||
|
<el-upload |
||||
|
ref="excelUpload" |
||||
|
v-loading="loading" |
||||
|
:action="uploadFFurl" |
||||
|
:headers="{ 'User-Key': userStore.userKey, 'User-Token': userStore.userToken }" |
||||
|
:data="{ |
||||
|
orgId: pageInfo.orgId, |
||||
|
types: pageInfo.types, |
||||
|
dateTime: pageInfo.dateTime, |
||||
|
}" |
||||
|
:element-loading-text="upLoadText" |
||||
|
:before-upload="handleExcelChangeTemp" |
||||
|
:on-error="uploadError" |
||||
|
:on-success="uploadTrueStaff" |
||||
|
:on-remove="handleRemove" |
||||
|
:limit="1" |
||||
|
> |
||||
|
<el-button type="primary" class="upDnBox" |
||||
|
>上传导入数据<i class="fa fa-upload" |
||||
|
/></el-button> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-divider content-position="left">导入反馈信息</el-divider> |
||||
|
<div style="width: 100%"> |
||||
|
<el-progress |
||||
|
:text-inside="true" |
||||
|
:percentage="progressSize" |
||||
|
:stroke-width="20" |
||||
|
striped |
||||
|
striped-flow |
||||
|
:duration="10" |
||||
|
> |
||||
|
<span>已完成:{{ progressSize }}%</span> |
||||
|
</el-progress> |
||||
|
</div> |
||||
|
<el-scrollbar height="400px" class="endMsg" ref="scrollbarRef" always> |
||||
|
<div ref="innerRef"> |
||||
|
<p v-for="(item, index) in callBackMsg" :key="index" class="endMsg lineBox"> |
||||
|
<el-text v-if="item.attr == 1" class="endMsg mx-1" type="primary">{{ |
||||
|
item.msg |
||||
|
}}</el-text> |
||||
|
<el-text v-if="item.attr == 2" class="endMsg mx-1" type="success">{{ |
||||
|
item.msg |
||||
|
}}</el-text> |
||||
|
<el-text v-if="item.attr == 3" class="endMsg mx-1" type="info">{{ |
||||
|
item.msg |
||||
|
}}</el-text> |
||||
|
<el-text v-if="item.attr == 4" class="endMsg mx-1" type="warning">{{ |
||||
|
item.msg |
||||
|
}}</el-text> |
||||
|
<el-text v-if="item.attr == 5" class="endMsg mx-1" type="danger">{{ |
||||
|
item.msg |
||||
|
}}</el-text> |
||||
|
</p> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.upDnBox { |
||||
|
margin-right: 5px; |
||||
|
i { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
.endMsg { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.lineBox { |
||||
|
border-bottom: 1px dashed rgba(200, 201, 204, 0.5); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue