<template>
|
<div>
|
<BasicModal v-bind="$attrs" @register="register" title="导入EXCEL" :width="600" @cancel="handleClose" :confirmLoading="uploading" destroyOnClose>
|
<!--是否校验-->
|
<div style="margin: 0 5px 1px" v-if="online">
|
<span style="display: inline-block; height: 32px; line-height: 32px; vertical-align: middle">是否开启校验:</span>
|
<span style="margin-left: 6px">
|
<a-switch :checked="validateStatus == 1" @change="handleChangeValidateStatus" checked-children="是" un-checked-children="否" size="small" />
|
</span>
|
</div>
|
<!--上传-->
|
<a-upload name="file" accept=".xls,.xlsx" :multiple="true" :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
|
<a-button preIcon="ant-design:upload-outlined">选择导入文件</a-button>
|
</a-upload>
|
<!--页脚-->
|
<template #footer>
|
<a-button @click="handleClose">关闭</a-button>
|
<a-button type="primary" @click="handleImport" :disabled="uploadDisabled" :loading="uploading">{{
|
uploading ? '上传中...' : '开始上传'
|
}}</a-button>
|
</template>
|
</BasicModal>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, ref, unref, watchEffect, computed } from 'vue';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { useAttrs } from '/@/hooks/core/useAttrs';
|
import { defHttp } from '/@/utils/http/axios';
|
import { useGlobSetting } from '/@/hooks/setting';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
export default defineComponent({
|
name: 'JImportModal',
|
components: {
|
BasicModal,
|
},
|
props: {
|
url: {
|
type: String,
|
default: '',
|
required: false,
|
},
|
biz: {
|
type: String,
|
default: '',
|
required: false,
|
},
|
//是否online导入
|
online: {
|
type: Boolean,
|
default: false,
|
required: false,
|
},
|
},
|
emits: ['ok', 'register'],
|
setup(props, { emit, refs }) {
|
const { createMessage, createWarningModal } = useMessage();
|
//注册弹框
|
const [register, { closeModal }] = useModalInner((data) => {
|
reset(data);
|
});
|
const glob = useGlobSetting();
|
const attrs = useAttrs();
|
const uploading = ref(false);
|
//文件集合
|
const fileList = ref([]);
|
//上传url
|
const uploadAction = ref('');
|
const foreignKeys = ref('');
|
//校验状态
|
const validateStatus = ref(0);
|
const getBindValue = Object.assign({}, unref(props), unref(attrs));
|
//监听url
|
watchEffect(() => {
|
props.url && (uploadAction.value = `${glob.uploadUrl}${props.url}`);
|
});
|
//按钮disabled状态
|
const uploadDisabled = computed(() => !(unref(fileList).length > 0));
|
|
//关闭方法
|
function handleClose() {
|
closeModal() && reset();
|
}
|
|
//校验状态切换
|
function handleChangeValidateStatus(checked) {
|
validateStatus.value = !!checked ? 1 : 0;
|
}
|
|
//移除上传文件
|
function handleRemove(file) {
|
const index = unref(fileList).indexOf(file);
|
const newFileList = unref(fileList).slice();
|
newFileList.splice(index, 1);
|
fileList.value = newFileList;
|
}
|
|
//上传前处理
|
function beforeUpload(file) {
|
fileList.value = [...unref(fileList), file];
|
return false;
|
}
|
|
//文件上传
|
function handleImport() {
|
let { biz, online } = props;
|
const formData = new FormData();
|
if (biz) {
|
formData.append('isSingleTableImport', biz);
|
}
|
if (unref(foreignKeys) && unref(foreignKeys).length > 0) {
|
formData.append('foreignKeys', unref(foreignKeys));
|
}
|
if (!!online) {
|
formData.append('validateStatus', unref(validateStatus));
|
}
|
unref(fileList).forEach((file) => {
|
formData.append('files[]', file);
|
});
|
uploading.value = true;
|
|
//TODO 请求怎样处理的问题
|
let headers = {
|
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
|
};
|
defHttp.post({ url: props.url, params: formData, headers }, { isTransformResponse: false }).then((res) => {
|
uploading.value = false;
|
if (res.success) {
|
if (res.code == 201) {
|
errorTip(res.message, res.result);
|
} else {
|
createMessage.success(res.message);
|
}
|
handleClose();
|
reset();
|
emit('ok');
|
} else {
|
createMessage.warning(res.message);
|
}
|
});
|
}
|
|
//错误信息提示
|
function errorTip(tipMessage, fileUrl) {
|
let href = glob.uploadUrl + fileUrl;
|
createWarningModal({
|
title: '导入成功,但是有错误数据!',
|
centered: false,
|
content: `<div>
|
<span>${tipMessage}</span><br/>
|
<span>具体详情请<a href = ${href} target="_blank"> 点击下载 </a> </span>
|
</div>`,
|
});
|
}
|
|
//重置
|
function reset(arg?) {
|
fileList.value = [];
|
uploading.value = false;
|
foreignKeys.value = arg;
|
validateStatus.value = 0;
|
}
|
|
return {
|
register,
|
getBindValue,
|
uploadDisabled,
|
fileList,
|
uploading,
|
validateStatus,
|
handleClose,
|
handleChangeValidateStatus,
|
handleRemove,
|
beforeUpload,
|
handleImport,
|
};
|
},
|
});
|
</script>
|
