<template>
<div style="height: 100%;width: 100%;background-color: white">
<el-row style="padding: 15px 10px;background-color: rgba(244, 244, 245,.3)">
<!-- 搜索区域 -->
<div style="width: 85%;text-align: left">
<el-input
v-model="searchKey"
style="width:50%"
placeholder="输入关键词搜索"
class="input-with-select"
@keyup.enter="searchData"
>
<template #prepend>
<el-select v-model="select" placeholder="请先选择档案" style="width: 200px" @change="selectChange">
<el-option v-for="(item,index) in options" :label="item.label" :value="item.value"/>
</el-select>
</template>
<template #append>
<el-button :icon="Search" @click="searchData"/>
</template>
</el-input>
</div>
<div style="width: 15%;text-align: right;">
<el-button plain type="primary" :disabled="select ===''" @click="openInputDialog = true">
<el-text>{{ select }}</el-text> 数据导入
</el-button>
</div>
</el-row>
<!-- 数据展示 -->
<el-row style="padding: 5px 15px;height: 89%;">
<el-table v-if="select !== ''" :data="tableData"
v-loading="loading"
:header-cell-style="{ background: '#FFFFFF' }"
style="width: 100%;height: 100%" border stripe>
<el-table-column fixed type="index" width="60" label="序号"></el-table-column>
<el-table-column v-for="(col,index) in computedColumns"
:fixed="['projectCode', 'projectName'].includes(col.prop)"
:prop="col.prop"
:label="col.label"
:width="col.width">
<template #default="scope" v-if="col.dataType !== ''">
<el-text v-if="col.dataType === 'fee'">{{ method.NumberThousandths(scope.row[col.prop]) }}</el-text>
<el-text v-else-if="col.dataType === 'date'">{{ method.DateFormat(scope.row[col.prop]) }}</el-text>
<el-text v-else></el-text>
</template>
</el-table-column>
</el-table>
</el-row>
<!-- 分页区 -->
<el-row>
<div style="width:100%;display: flex; justify-content: center">
<el-pagination v-if="select !== ''"
style="margin: 0;"
v-model:current-page="pageInfo.pageNum"
@current-change="currentPageChange"
v-model:page-size="pageInfo.pageSize"
@size-change="pageSizeChange"
pager-count="7"
:page-sizes="[10, 20, 50, 200]"
:layout=pageLayout
:total="pageInfo.total"/>
</div>
</el-row>
</div>
<!-- 数据导入窗口 -->
<el-dialog v-model="openInputDialog" width="90vw" style="height: 90vh;margin: 5vh 5vw">
<el-row>
<el-col :span="8" style="text-align: left">
<el-upload ref="upload"
v-loading="uploading"
accept=".xlsx"
:limit="1"
:on-exceed="handleExceed"
action=""
:http-request="excelResolve"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
>
<el-button :disabled="uploading">
{{ uploading ? '解析中...' : '📁打开文件' }}
</el-button>
</el-upload>
</el-col>
<el-col :span="8">
<el-text size="large" type="info">{{ select }}(
<el-text size="small" type="danger" v-show="inputData.length !== 0">已解析:{{ inputData.length }}</el-text>
)
</el-text>
</el-col>
<el-col :span="8" style="text-align: right">
<el-button type="primary" @click="uploadFile">
<el-icon>
<UploadFilled/>
</el-icon>
上传数据
</el-button>
</el-col>
</el-row>
<el-row>
<el-table :data="inputData"
:virtual-scroll="inputData.length > 100"
v-loading="loading"
:header-cell-style="{ background: '#FFFFFF' }"
style="width: 100%;height: 73.5vh" border stripe>
<el-table-column fixed type="index" width="60" label="序号"></el-table-column>
<el-table-column v-for="(col,index) in computedColumns"
:fixed="['projectCode', 'projectName'].includes(col.prop)"
:prop="col.prop"
:label="col.label"
:width="col.width">
<template #default="scope" v-if="col.dataType !== ''">
<el-text v-if="col.dataType === 'fee'">{{ method.NumberThousandths(scope.row[col.prop]) }}</el-text>
<el-text v-else-if="col.dataType === 'date'">{{ method.DateFormat(scope.row[col.prop]) }}</el-text>
<el-text v-else></el-text>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-text v-if="errorMessage !==''" size="default" type="danger">{{ errorMessage }}</el-text>
</el-row>
</el-dialog>
</template>
<script setup>
import {computed, reactive, ref, watch} from "vue";
import {Search} from "@element-plus/icons-vue";
import apiWorkHours from "@/api/workHours/apiWorkHours";
import qs from "qs";
import {ElMessage, genFileId} from "element-plus";
import method from "../../../util/js/method";
// region 属性
let tableColumns = [
{
prop: "departmentCode",
label: "部门编码",
width: "300",
belongTo: ["部门人工标准", "部门人工工时"],
dataType: ''
},
{
prop: "departmentName",
label: "部门名称",
width: "",
belongTo: ["部门人工标准", "部门人工工时"],
dataType: ''
},
{
prop: "monthPeriod",
label: "月份",
width: "400",
belongTo: ["部门人工标准", "部门人工工时"],
dataType: ''
},
{
prop: "laborHours",
label: "工时",
width: "400",
belongTo: ["部门人工工时"],
dataType: ''
},
{
prop: "laborStandard",
label: "人工标准",
width: "150",
belongTo: ["部门人工标准"],
dataType: ''
},
{
prop: "projectCode",
label: "项目编码",
width: "200",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "projectName",
label: "项目名称",
width: "400",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "laborCost",
label: "人工费",
width: "150",
belongTo: ["项目人工分摊"],
dataType: ''
},
{
prop: "approvalStatus",
label: "立项状态",
width: "150",
belongTo: ["项目档案底表"],
dataType: ''
},
{
prop: "projectStatus",
label: "项目状态",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "projectNature",
label: "项目性质",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "projectCategory",
label: "项目类别",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "productCategory",
label: "产品类别",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "responsibleDepartment",
label: "主管部门",
width: "200",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "projectManager",
label: "项目主管",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "financeContact",
label: "财务对接人",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: ''
},
{
prop: "projectLeader",
label: "项目负责人",
width: "150",
belongTo: ["项目档案底表"],
dataType: ''
},
{
prop: "projectStartDate",
label: "项目开始时间",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: 'date'
},
{
prop: "expectedEndDate",
label: "项目结束时间",
width: "150",
belongTo: ["项目人工分摊", "项目档案底表"],
dataType: 'date'
},
{
prop: "currency",
label: "单位",
width: "80",
belongTo: ["项目档案底表"],
dataType: ''
}
] //table列配置
let errorMessage = ref('')
const upload = ref()
const loading = ref(false) // 数据查询loading
const uploading = ref(false) // 数据解析loading
const openInputDialog = ref(false) // 数据导入窗口
let tableData = ref([]) // 查询数据
let inputData = ref([]) // excel解析的数据
const pageInfo = reactive({
pageNum: 1,
pageSize: 10,
total: 0
}) // 分页器
// endregion
// region API
const getWhDepartmentLaborPageApi = () => {// 部门档案page
try {
const param = {
pageNum: pageInfo.pageNum,
pageSize: pageInfo.pageSize
}
apiWorkHours.getWhDepartmentLaborPage(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list;
pageInfo.total = res.data.total
} else {
ElMessage.error('部门档案信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const getWhDepartmentLaborPageBySearchApi = () => {// 部门档案page
try {
const param = {
searchKey: searchKey.value,
pageNum: searchKey.value === '' ? 1 : null,
pageSize: searchKey.value === '' ? 10 : null,
}
apiWorkHours.getWhDepartmentLaborPageBySearch(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list;
pageInfo.total = res.data.total
ElMessage.success('共查询到:' + pageInfo.total + " 条记录")
} else {
ElMessage.error('部门档案信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const laborHoursUpdateBatchAPI = () => {
const param = inputData.value
apiWorkHours.laborHoursUpdateBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.error("成功更新:" + res.data + "条")
} else {
ElMessage.error("更新失败")
}
})
}
const laborStandardUpdateBatch = () => {
const param = inputData.value
apiWorkHours.laborStandardUpdateBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.error("成功更新:" + res.data + "条")
} else {
ElMessage.error("更新失败")
}
})
}
const laborStandardInsertBatch = () => {
const param = inputData.value
apiWorkHours.laborStandardInsertBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.success(res.data)
} else {
ElMessage.error("插入失败")
}
})
}
const laborHoursInsertBatch = () => {
const param = inputData.value
apiWorkHours.laborHoursInsertBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.success(res.data)
} else {
ElMessage.error("插入失败")
}
})
}
const projectInfoInsertBatch = () => {
const param = inputData.value
apiWorkHours.projectInfoInsertBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.success(res.data)
} else {
ElMessage.error("插入失败")
}
})
}
const laborShareInsertBatch = () => {
const param = inputData.value
apiWorkHours.laborShareInsertBatch(param).then(res => {
console.log(res)
if (res.code === 1000) {
ElMessage.success(res.data)
} else {
ElMessage.error("插入失败")
}
})
}
const getWhLaborSharePageApi = () => {// 人工分摊page
try {
const param = {
pageNum: pageInfo.pageNum,
pageSize: pageInfo.pageSize
}
apiWorkHours.getWhLaborSharePage(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list;
pageInfo.total = res.data.total
} else {
ElMessage.error('人工分摊信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const getWhLaborSharePageBySearchApi = () => {// 人工分摊page
try {
const param = {
searchKey: searchKey.value,
pageNum: searchKey.value === '' ? 1 : null,
pageSize: searchKey.value === '' ? 10 : null,
}
apiWorkHours.getWhLaborSharePageBySearch(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list;
pageInfo.total = res.data.total
ElMessage.success('共查询到:' + pageInfo.total + " 条记录")
} else {
ElMessage.error('人工分摊信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const getProjectInfoPageApi = () => {// 项目档案page
try {
const param = {
pageNum: pageInfo.pageNum,
pageSize: pageInfo.pageSize
}
apiWorkHours.getProjectInfoPage(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list;
pageInfo.total = res.data.total
} else {
ElMessage.error('项目档案信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const getProjectInfoPageBySearchApi = () => {// 项目档案page
try {
const param = {
searchKey: searchKey.value,
pageNum: searchKey.value === '' ? 1 : null,
pageSize: searchKey.value === '' ? 10 : null,
}
apiWorkHours.getProjectInfoPageBySearch(qs.stringify(param)).then(res => {
if (res.code === 1000) {
tableData.value = res.data.list
pageInfo.total = res.data.total
ElMessage.success('共查询到:' + pageInfo.total + " 条记录")
} else {
ElMessage.error('项目档案信息查询失败!')
}
loading.value = false
})
} catch (e) {
ElMessage.error('程序错误:', e)
}
}
const excelResolveWhDepartmentLaborAPI = (file) => {
const param = {
excelFile: file
}
apiWorkHours.excelResolveWhDepartmentLabor(param).then(res => {
if (res.code === 1000) {
inputData.value = res.data
uploading.value = false
ElMessage.success("数据解析完成")
} else {
ElMessage.error("数据解析失败")
errorMessage.value = res.data
}
})
}
const excelResolveWhLaborShareAPI = (file) => {
const param = {
excelFile: file
}
apiWorkHours.excelResolveWhLaborShare(param).then(res => {
if (res.code === 1000) {
inputData.value = res.data
uploading.value = false
ElMessage.success("数据解析完成")
} else {
ElMessage.error("数据解析失败")
errorMessage.value = res.data
}
})
}
const excelResolveWhProjectInfoAPI = (file) => {
const param = {
excelFile: file
}
apiWorkHours.excelResolveWhProjectInfo(param).then(res => {
if (res.code === 1000) {
inputData.value = res.data
uploading.value = false
ElMessage.success("数据解析完成")
} else {
ElMessage.error("数据解析失败")
errorMessage.value = res.data
}
})
}
// endregion
// region 搜索栏
const select = ref('')
const options = [
{
value: '部门人工标准',
label: '部门人工标准',
},
{
value: '部门人工工时',
label: '部门人工工时',
disabled: false,
},
{
value: '项目人工分摊',
label: '项目人工分摊',
},
{
value: '项目档案底表',
label: '项目档案底表',
},
]
const searchKey = ref('')
const searchData = () => {
pageLayout = searchKey.value === '' ? "total, sizes, prev, pager, next, jumper" : "total"
switch (select.value) {
case "部门人工标准":
getWhDepartmentLaborPageBySearchApi()
break;
case "部门人工工时":
getWhDepartmentLaborPageBySearchApi()
break;
case "项目人工分摊":
getWhLaborSharePageBySearchApi()
break;
case "项目档案底表":
getProjectInfoPageBySearchApi()
break;
default:
loading.value = false
ElMessage.warning('请先选择档案!')
}
}
// endregion
// region 数据展示
// 增加计算属性
const computedColumns = computed(() => {
return tableColumns.filter(column => column.belongTo.includes(select.value))
})
// 选项切换→更换数据
const selectChange = (value) => {
loading.value = true
tableData.value = []
switch (value) {
case "部门人工标准":
getWhDepartmentLaborPageApi()
break;
case "部门人工工时":
getWhDepartmentLaborPageApi()
break;
case "项目人工分摊":
getWhLaborSharePageApi()
break;
case "项目档案底表":
getProjectInfoPageApi()
break;
default:
loading.value = false
ElMessage.warning('请先选择档案!')
}
}
// endregion
// region 分页
let pageLayout = ref("total, sizes, prev, pager, next, jumper")
const currentPageChange = () => {
selectChange(select.value)
}
const pageSizeChange = () => {
selectChange(select.value)
}
// endregion
// region 数据导入
// 添加watch监听对话框状态,重置上传状态
watch(openInputDialog, (newVal) => {
if (newVal) {
upload.value?.clearFiles();
inputData.value = [];
uploading.value = false;
}else {
setTimeout(() => selectChange(select.value), 200)
}
})
const beforeAvatarUpload = (rawFile) => {// 上传前钩子
if (rawFile.size / 1024 / 1024 > 5) {
ElMessage.error('文件较大 已超过5MB!')
return false
}
return true
}
const handleAvatarSuccess = (response, uploadFile) => {// 文件上传成功
ElMessage.success("文件上传成功:", response)
// console.table("uploadFile:", uploadFile)
}
const handleExceed = (files) => {
};
const excelResolve = (file) => {// Excel解析,根据选择的上传数据类型选择调用的解析接口
uploading.value = true
switch (select.value) {
case "部门人工标准":
file.name = "部门人工标准-导入模板"
excelResolveWhDepartmentLaborAPI(file)
break;
case "部门人工工时":
file.name = "部门人工工时-导入模板"
excelResolveWhDepartmentLaborAPI(file)
break;
case "项目人工分摊":
excelResolveWhLaborShareAPI(file)
break;
case "项目档案底表":
excelResolveWhProjectInfoAPI(file)
break;
default:
uploading.value = false
ElMessage.warning('请先选择档案!')
}
}
const uploadFile = () => {
switch (select.value) {
case "部门人工标准":
laborStandardInsertBatch()
break;
case "部门人工工时":
laborHoursInsertBatch()
break;
case "项目人工分摊":
laborShareInsertBatch()
break;
case "项目档案底表":
projectInfoInsertBatch()
break;
default:
uploading.value = false
ElMessage.warning('请先选择档案!')
}
}
// endregion
</script>
<style scoped lang="scss">
.input-with-select .el-input-group__prepend {
background-color: var(--el-fill-color-blank);
}
</style>
为什么点击upload打开文件选择时会卡死,页面无响应
最新发布