vue3中，表格导出excel、批量操作表格、分页、loading、router.push跳转

vue3中，表格导出excel、批量操作表格、分页、loading、router.push跳转

效果

主页代码

index.vue

<template> <div class="main-content"> <el-button type="primary" @click="exportFile">导出</el-button> <el-button type="primary" @click="handleAudit()">批量审核</el-button> <el-button type="primary" @click="addDetail('add')">新建项目</el-button> <examineDialog v-model:auditId="auditId" v-model:is-show="dialogVisibleAudit" @examine-save="examineCallBack" /> <el-table ref="handleData" border class="table-style" :data="tableData" stripe @selection-change="handleChange" @sort-change="handleSortChange" > <el-table-column type="selection" /> <el-table-column fixed="left" label="项目名称" prop="prjName" /> <el-table-column label="开始时间" prop="startDate" width="140" /> <el-table-column label="项目类型" prop="prjTypeName" :sortable="custom" /> <el-table-column label="牵头单位" prop="leadUnitName" :sortable="custom" /> <el-table-column label="系统内单位角色" prop="innerRoleDesc" :sortable="custom" /> <el-table-column align="center" fixed="right" label="流程状态" prop="processStateDesc" :sortable="custom" width="140" > <template #default="scope"> <span :style="{ color: scope.row.processId ? '#00a797' : '', cursor: scope.row.processId ? 'pointer' : 'default', }" > { 
  { scope.row.processStateDesc }} </span> </template> </el-table-column> <el-table-column fixed="right" label="操作" prop="data" width="180"> <template #default="scope"> <el-button link type="primary" @click="addDetail('view', scope.row)"> 详情 </el-button> <el-button v-if="scope.row.auth.canEdit" link type="primary" @click="addDetail('edit', scope.row)" > 编辑 </el-button> <el-button v-if="scope.row.auth.canApproval" link type="primary" @click.prevent="handleAudit(scope.row.processId)" > 审核 </el-button> <el-button v-if="scope.row.auth.canCancel" link type="primary" @click="recallRow(scope.row)" > 撤回 </el-button> <el-button v-if="scope.row.auth.canDelete" link type="primary" @click="handleClickDelete(scope.row)" > 删除 </el-button> </template> </el-table-column> </el-table> <div class="jump-pagination"> <el-pagination background :current-page="page.pageNumber" layout="total, sizes, prev, pager, next, jumper" :page-size="page.pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]" :total="page.total" @current-change="hanleCurrentChange" @size-change="handleSizeChange" /> <el-button link type="primary" @click="jumpClick">跳转</el-button> </div> </div> </template> <script setup> import { queryByPage, delPrj, auditProcessCancel } from "@/api/project/couny"; import examineDialog from "@src/components/examineDialog"; import { downLoadxls } from "@src/utils/util"; const router = useRouter(); const dialogVisibleAudit = ref(false); const page = reactive({ pageSize: 10, pageNumber: 1, total: 0, }); const tableData = ref([]); onMounted(() => { onLoad(); }); //查询 const onSubmit = () => { onLoad(); }; const onLoad = async () => { const formData = { pageSize: page.pageSize, pageNumber: page.pageNumber, ...formInline, startDate: prjDate.value ? prjDate.value[0] : "", endDate: prjDate.value ? prjDate.value[1] : "", }; await queryByPage(formData).then((res) => { tableData.value = res.data.data; page.pageSize = res.data.pageSize; page.total = Number(res.data.total); page.pageNumber = res.data.pageNumber; }); }; const handleUnitChange = (val) => { formInline.leadUnit = val.id; formInline.leadUnitName = val.orgObjMdmName; }; //表格排序 const custom = ref(true); const columns = ref(""); const columnsFn = ref(""); const handleSortChange = (column) => { columns.value = column.order === "ascending" ? "1" : "0"; columnsFn.value = column.prop; onLoad(); }; //分页跳转查询 const hanleCurrentChange = (val) => { page.pageNumber = val; onLoad(); }; const handleSizeChange = (val) => { page.pageSize = val; onLoad(); }; const jumpClick = () => { onLoad(); }; // 导出 const exportFile = async () => { const formData = { pageSize: page.pageSize, pageNumber: page.pageNumber, ...formInline, startDate: prjDate.value ? prjDate.value[0] : "", endDate: prjDate.value ? prjDate.value[1] : "", }; await exportByPage(formData).then((res) => { downLoadxls(res, "项目管理"); }); }; // 批量审核-多选 const multipleSelection = ref([]); const handleChange = (val) => { multipleSelection.value = val; }; const auditId = ref([]); const handleAudit = (processId) => { const examineProcessArr = []; const examineArr = ref([]); multipleSelection.value.forEach((item) => { examineProcessArr.push(item.auth.canApproval); }); const isExamine = examineProcessArr.every((i) => { return i === true; }); if (processId) { auditId.value = [processId]; dialogVisibleAudit.value = true; } else { if (examineProcessArr.length === 0) { ElMessage.error(`请勾选项目`); } else if (isExamine) { multipleSelection.value.forEach((item) => { examineArr.value.push(item.processId); }); auditId.value = examineArr.value; dialogVisibleAudit.value = true; } else { ElMessage.error(`请选择可以审批的项目`); } } }; // 审核回调 const examineCallBack = () => { onLoad(); dialogVisibleAudit.value = false; examineArr.value = []; }; // 删除 const handleClickDelete = (row) => { ElMessageBox.confirm("确认删除").then(() => { delPrj(row.id).then(() => { onLoad(); }); }); }; // 撤回 const recallRow = async (row) => { ElMessageBox.confirm("确认撤回").then(() => { const loading = ElLoading.service({ lock: true, text: "Loading", background: "rgba(0, 0, 0, 0.7)", }); auditProcessCancel({ processId: row.processId }) .then((res) => { const { code } = res; if (code === "00000") { getqueryByPage(); loading.close(); ElMessage.success("撤回成功"); } }) .catch(() => { loading.close(); }); }); }; // 详情+编辑 const addDetail = (type, row) => { const query = { id: row ? row.id : null, type, }; router.push({ path: "/project/approvalDetail", query, }); }; </script> <style lang="scss" scoped> // 分页样式 .jump-pagination { display: flex; justify-content: center; .ym-button { margin: 20px 0 0 0; margin-left: 10px; } } .table-style { height: 650px; } </style> 

审核弹框组件代码

src\components\examineDialog.vue

<!-- isShow // 弹窗显隐 auditId // 审核id examine-save // 审核回调方法 --> <template> <div> <el-dialog v-model="isShow" align-center append-to-body :title="'审核' + total" width="35%" @close="closeDialog" > <el-form :model="formInlineAudit"> <el-form-item prop="apprFlag"> <template #label> <span style="width: 80px; text-align: right">审核结果：</span> </template> <el-radio-group v-model="formInlineAudit.conditionData.apprFlag"> <el-radio :label="'4'">通过</el-radio> <el-radio :label="'5'">不通过</el-radio> <el-radio :label="'2'">返回修改</el-radio> </el-radio-group> </el-form-item> <el-form-item prop="approvalContent"> <template #label> <span style="width: 80px; text-align: right">意见：</span> </template> <el-input v-model="formInlineAudit.approvalContent" maxlength="80" placeholder="请输入审核意见" :rows="3" size="small " type="textarea" /> </el-form-item> </el-form> <template #footer> <el-button type="primary" @click="examineSubmit">确定</el-button> </template> </el-dialog> </div> </template> <script setup> import { auditOperation } from '@/api/project/couny' const formInlineAudit = ref({ conditionData: { apprFlag: '4', }, approvalContent: '', processIdList: [], }) const props = defineProps({ isShow: { type: Boolean, default: () => { false }, }, auditId: { type: Array, default: null, }, }) const emit = defineEmits(['update:isShow', 'examineSave']) const { auditId } = toRefs(props) const total = computed(() => { return ( ' ( 当前已选中' + '\u0020' + auditId.value.length + '\u0020' + '条 ) ' ) }) const isShow = computed({ get: () => props.isShow, set: (value) => { emit('update:isShow', value) }, }) const closeDialog = () => { formInlineAudit.value.approvalContent = '' formInlineAudit.value.processIdList = [] emit('update:isShow', false) } const examineSubmit = async () => { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) formInlineAudit.value.processIdList = auditId.value await auditOperation(formInlineAudit.value) .then((res) => { if (res.code === '00000') { emit('update:isShow', false) emit('examineSave') loading.close() ElMessage.success('审核成功') } else { ElMessage.error(res.message) loading.close() emit('update:isShow', false) } }) .catch(() => { loading.close() }) } </script> <style lang="scss" scoped> :deep() { .ym-form-item__content { position: absolute; left: 110px; .ym-textarea { width: 42vw; } } .ym-textarea__inner { width: 90%; } } </style> 

表格导出方法文件

src\utils\util.js

//文件流导出数据处理 export const downLoadxls = (res, fileName) => { 
    let name = fileName if (res.headers['content-disposition']) { 
    const contentDisposition = res.headers['content-disposition'].split('=') name = (contentDisposition && decodeURI(contentDisposition[1])) || '' } const file = new File([res.data], name, res.data) const href = URL.createObjectURL(file) const aTag = document.createElement('a') aTag.download = file.name aTag.target = '_blank' aTag.href = href aTag.click() URL.revokeObjectURL(href) } //本地文件下载 下载的模板文件放在public下的file文件夹中 const configInfo = sessionStorage.getItem('configInfo') || '{}' const url = JSON.parse(configInfo)?.baseApiUrl const apiUrl = url ? `${ 
     url.split('kjapi')[0] + 'cmn/science/'}` : '/' export const downFile = (fileName) => { 
    const anchor = document.createElement('a') anchor.href = `${ 
     apiUrl}static/file/${ 
     fileName}` anchor.setAttribute('download', fileName) anchor.innerHTML = 'downloading...' anchor.style.display = 'none' document.body.appendChild(anchor) setTimeout(() => { 
    anchor.click() document.body.removeChild(anchor) setTimeout(() => { 
    self.URL.revokeObjectURL(anchor.href) }, 250) }, 66) } 

接口文件

src\app\science\api\project\couny.js

import request from '@src/utils/request' import { 
    sciencePostUrl } from '@/config' //枚举值查询 process.env.VUE_APP_URL--> apiUrl const configInfo = sessionStorage.getItem('configInfo') || '{}' const apiUrl = JSON.parse(configInfo)?.baseApiUrl || 'http://27.76.34.99/kjapi' export const queryDict = (data) => { 
    return request({ 
    url: `${ 
     apiUrl}/emss-cmnf-common-front/member/codeClsVal/getCodeClsValListByCodeClsType`, method: 'post', data, }) } //立项管理项目分页列表查询 export const queryByPage = (data) => { 
    return request({ 
    url: `${ 
     sciencePostUrl}/prj/queryByPage`, method: 'post', data, }) } //立项管理项目-删除项目 export const delPrj = (data) => { 
    return request({ 
    url: `${ 
     sciencePostUrl}/prj/delPrj`, method: 'post', data, }) } //审核销毁 export const auditProcessCancel = (data) => { 
    return request({ 
    url: `${ 
     sciencePostUrl}/process/cancel`, method: 'post', data, }) } //批量审核确定操作 export const auditOperation = (data) => { 
    return request({ 
    url: `${ 
     sciencePostUrl}/process/batchApproval`, method: 'post', data, }) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10767.html