<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-tablev-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>