herenshan112
3 months ago
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