html
复制代码
<template>
<!-- 批量渠道变更 -->
<div>
<div style="margin-bottom: 10px; display: flex;">
<Download name="下载模板" type="Url" url="https://file.wonder-link.net/%E6%89%B9%E9%87%8F%E6%B8%A0%E9%81%93%E5%8F%98%E6%9B%B4.xlsx">
<dev-button type="primary">下载模板</dev-button>
</Download>
<el-upload
:auto-upload="false"
:on-change="(val: any) => {beforeUpload(val)}"
:show-file-list="false"
>
<el-button type="primary">批量导入</el-button>
</el-upload>
</div>
<div style="padding-bottom: 30px;">
<el-table
v-loading="pageLoading"
:data="tableData"
style="width: 100%"
border
:header-cell-style="{ background: '#eff3f6', textAlign: 'center' }"
>
<el-table-column prop="batchNo" label="批次号" />
<el-table-column label="文件名称">
<template #default="scope">
{{ scope.row.fileName || '-' }}
</template>
</el-table-column>
<el-table-column label="处理状态">
<template #default="scope">
{{ scope.row.batchStatusDesc || '-' }}
</template>
</el-table-column>
<el-table-column label="操作人">
<template #default="scope">
{{ scope.row.createName || '-' }}
</template>
</el-table-column>
<el-table-column label="操作时间">
<template #default="scope">
{{ scope.row.createTime || '-' }}
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="160" align="center">
<template #default="scope">
<dev-button type="primary" @click="() => getFileUrl(scope.row)" link>下载</dev-button>
<dev-button v-if="scope.row.batchStatus == 'TO_PROCESS'" link type="primary" @click="passThrough(scope.row, 'pass')">通过</dev-button>
<dev-button v-if="scope.row.batchStatus == 'TO_PROCESS'" link type="primary" @click="passThrough(scope.row, 'refuse')">拒绝</dev-button>
</template>
</el-table-column>
</el-table>
<br>
<div style="float: right;">
<el-pagination
v-model:current-page="params.pageNo"
v-model:page-size="params.pageSize"
:page-sizes="[10, 20, 30, 40]"
background
layout="sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<ExportButton ref="exportButtonRef" :api="exportApi" :show-button="false" />
</div>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import OSS from 'ali-oss';
import {getOssConfig} from '@/api/noticeSettings/upLoadOss';
import {page_list, audit, download_detail, batch_change } from "@/api/operateMent/ChannelChanges";
import Download from '@/components/Download/index.vue';
import ExportButton from '@/components/ExportButton/index.vue';
const exportApi = download_detail;
const pageLoading = ref(false);
const total = ref(0);
const tableData = ref([]);
let params: any = reactive({
batchNo: '',
pageNo: 1,
pageSize: 10,
});
const exportButtonRef = ref();
// 初始化
const init = () => {
pageLoading.value = true;
page_list(params).then((res: any) => {
pageLoading.value = false;
tableData.value = res.list;
total.value = Number(res.total || 0)
}).catch(() => {
pageLoading.value = false;
})
};
const passThrough = (row: any, type: string) => {
ElMessageBox.confirm(
`是否确认${type == 'pass' ? '通过' : '拒绝'}吗?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
audit({batchNo: row.batchNo, audit: type == 'pass' ? 1 : 0, }).then(() => {
ElMessage.success('操作成功');
init();
});
});
};
const getFileUrl = (item: any) => {
exportButtonRef.value.passiveExport({batchNo: item.batchNo});
};
onMounted(() => {
init();
});
const handleSizeChange = (val: number) => {
params.pageSize = val;
init();
};
const handleCurrentChange = (val: number) => {
params.pageNo = val;
init();
};
const uploadFilledData = ref<any>({});
const client = ref();// oss信息
const beforeUpload = (file: any) => {
const rawFile = file.raw;
uploadFilledData.value = rawFile;
getOssConfig().then((res: any) => {
client.value = new OSS({
region: res.region,
accessKeyId: res.accessKeyId,
accessKeySecret: res.accessKeySecret,
stsToken: res.securityToken,
bucket: res.bucket// 填写Bucket名称。
});
nextTick(() => {
startUploading();
});
return true;
}).catch(()=>{
window.$message.error('获取oss信息失败');
return false;
});
};
const uploadResults = ref<any>({});// 上传结果
// 获取文件名称后缀
const getFileName = (fileName: string) => {
const arr = fileName.split('.');
return arr[arr.length - 1];
};
// 去除文件后缀
const removeSuffix = (fileName: string) => {
const arr = fileName.split('.');
return arr[0];
};
const startUploading = async () => {
try {
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
const suffix = getFileName(uploadFilledData.value.name); // 文件后缀
const fileName = removeSuffix(uploadFilledData.value.name) + new Date().getTime() + '.' + suffix;
const result = await client.value.put(
fileName,
uploadFilledData.value,
);
uploadResults.value = result;
let obj = {
fileName: result.name,
filePath: result.url,
}
batch_change(obj).then(() => {
window.$message.success('上传成功');
init();
}).catch(() => {
window.$message.error('上传失败');
})
} catch (e) {
window.$message.error('上传失败');
}
};
</script>