手动导入计价优化
This commit is contained in:
parent
c47dce9bff
commit
7ec8a9d9b4
@ -1,203 +1,206 @@
|
||||
[[[
|
||||
<script setup lang="ts">
|
||||
import { h, ref, watch } from 'vue';
|
||||
import type { UploadFileInfo } from 'naive-ui';
|
||||
import { getToken } from '@/store/modules/auth/shared';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { getServiceBaseURL } from '@/utils/service';
|
||||
import type FileUpload from '@/components/custom/file-upload.vue';
|
||||
import { $t } from '@/locales';
|
||||
import dayjs from "dayjs";
|
||||
import { h, ref, watch } from 'vue';
|
||||
import type { UploadFileInfo } from 'naive-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import { getToken } from '@/store/modules/auth/shared';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { getServiceBaseURL } from '@/utils/service';
|
||||
import type FileUpload from '@/components/custom/file-upload.vue';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'ManualPricingImportModal'
|
||||
});
|
||||
defineOptions({
|
||||
name: 'ManualPricingImportModal'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const { download } = useDownload();
|
||||
const { download } = useDownload();
|
||||
|
||||
const { baseURL } = getServiceBaseURL(import.meta.env);
|
||||
const { baseURL } = getServiceBaseURL(import.meta.env);
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
Authorization: `Bearer ${ getToken() }`,
|
||||
clientid: import.meta.env.VITE_APP_CLIENT_ID!
|
||||
};
|
||||
const headers: Record<string, string> = {
|
||||
Authorization: `Bearer ${getToken()}`,
|
||||
clientid: import.meta.env.VITE_APP_CLIENT_ID!
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const uploadRef = ref<typeof FileUpload>();
|
||||
const message = ref<string>('');
|
||||
const success = ref<boolean>(false);
|
||||
const uploadRef = ref<typeof FileUpload>();
|
||||
const message = ref<string>('');
|
||||
const success = ref<boolean>(false);
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const data = ref<Record<string, any>>({
|
||||
updateSupport: true,
|
||||
importMonth: dayjs().subtract(1, 'month').startOf('month').valueOf()
|
||||
});
|
||||
const data = ref<Record<string, any>>({
|
||||
updateSupport: true,
|
||||
importMonth: dayjs().subtract(1, 'month').startOf('month').valueOf()
|
||||
});
|
||||
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
if (success.value) {
|
||||
emit('submitted');
|
||||
}
|
||||
}
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
if (success.value) {
|
||||
emit('submitted');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if(fileList.value.length <= 0){
|
||||
window.$message?.error('请选择数据文件!');
|
||||
return;
|
||||
}
|
||||
async function handleSubmit() {
|
||||
if (fileList.value.length <= 0) {
|
||||
window.$message?.error('请选择数据文件!');
|
||||
return;
|
||||
}
|
||||
|
||||
fileList.value.forEach(item => {
|
||||
item.status = 'pending';
|
||||
});
|
||||
message.value = 'importing';
|
||||
fileList.value.forEach(item => {
|
||||
item.status = 'pending';
|
||||
});
|
||||
message.value = 'importing';
|
||||
|
||||
uploadRef.value?.submit();
|
||||
}
|
||||
uploadRef.value?.submit();
|
||||
}
|
||||
|
||||
function isErrorState(xhr: XMLHttpRequest) {
|
||||
const responseText = xhr?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
return response.code !== 200;
|
||||
}
|
||||
function isErrorState(xhr: XMLHttpRequest) {
|
||||
const responseText = xhr?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
return response.code !== 200;
|
||||
}
|
||||
|
||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { file, event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
message.value = response.msg;
|
||||
window.$message?.success($t('common.importSuccess'));
|
||||
success.value = true;
|
||||
return file;
|
||||
}
|
||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { file, event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
message.value = response.msg;
|
||||
window.$message?.success($t('common.importSuccess'));
|
||||
success.value = true;
|
||||
return file;
|
||||
}
|
||||
|
||||
function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const msg = JSON.parse(responseText).msg;
|
||||
message.value = msg;
|
||||
window.$message?.error(() => h('div', { innerHTML: msg || $t('common.importFail') }));
|
||||
success.value = false;
|
||||
}
|
||||
function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const msg = JSON.parse(responseText).msg;
|
||||
message.value = msg;
|
||||
window.$message?.error(() => h('div', { innerHTML: msg || $t('common.importFail') }));
|
||||
success.value = false;
|
||||
}
|
||||
|
||||
function handleDownloadTemplate() {
|
||||
download(
|
||||
'/mps/manualPricing/importTemplate',
|
||||
{},
|
||||
`${ $t('mps.common') }_${ $t('common.importTemplate') }_${ new Date().getTime() }.xlsx`
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
function handleDownloadTemplate() {
|
||||
download(
|
||||
'/mps/manualPricing/importTemplate',
|
||||
{},
|
||||
`${$t('mps.common')}_${$t('common.importTemplate')}_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
fileList.value = [];
|
||||
success.value = false;
|
||||
message.value = '';
|
||||
}
|
||||
} );
|
||||
function disablePreviousDate(ts: number) {
|
||||
// return ts < Date.now()
|
||||
// const currentMonthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()
|
||||
// const prevMonthStart = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime()
|
||||
//
|
||||
// // 只允许选择当前月或上个月
|
||||
// return ts !== currentMonthStart && ts !== prevMonthStart
|
||||
const prevMonthStart = dayjs().subtract(1, 'month').startOf('month')
|
||||
// 禁用所有早于上个月1号的日期
|
||||
return ts < prevMonthStart.valueOf()
|
||||
}
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
fileList.value = [];
|
||||
success.value = false;
|
||||
message.value = '';
|
||||
}
|
||||
});
|
||||
function disablePreviousDate(ts: number) {
|
||||
// return ts < Date.now()
|
||||
// const currentMonthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()
|
||||
// const prevMonthStart = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime()
|
||||
//
|
||||
// // 只允许选择当前月或上个月
|
||||
// return ts !== currentMonthStart && ts !== prevMonthStart
|
||||
const prevMonthStart = dayjs().subtract(1, 'month').startOf('month');
|
||||
// 禁用所有早于上个月1号的日期
|
||||
return ts < prevMonthStart.valueOf();
|
||||
}
|
||||
</script>
|
||||
]]]
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="visible"
|
||||
:title="$t('common.import')"
|
||||
preset="card"
|
||||
:bordered="false"
|
||||
display-directive="show"
|
||||
class="max-w-90% w-600px"
|
||||
@close="closeDrawer"
|
||||
<NModal
|
||||
v-model:show="visible"
|
||||
:title="$t('common.import')"
|
||||
preset="card"
|
||||
:bordered="false"
|
||||
display-directive="show"
|
||||
class="max-w-90% w-600px"
|
||||
:close-on-esc="false"
|
||||
:mask-closable="false"
|
||||
:mask-closable="false"
|
||||
@close="closeDrawer"
|
||||
>
|
||||
<NUpload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/mps/manualPricing/importData`"
|
||||
:headers="headers"
|
||||
:data="data"
|
||||
:max="1"
|
||||
:file-size="50"
|
||||
accept=".xls,.xlsx"
|
||||
:multiple="false"
|
||||
directory-dnd
|
||||
:default-upload="false"
|
||||
list-type="text"
|
||||
:is-error-state="isErrorState"
|
||||
@finish="handleFinish"
|
||||
@error="handleError"
|
||||
>
|
||||
<NUpload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/mps/manualPricing/importData`"
|
||||
:headers="headers"
|
||||
:data="data"
|
||||
:max="1"
|
||||
:file-size="50"
|
||||
accept=".xls,.xlsx"
|
||||
:multiple="false"
|
||||
directory-dnd
|
||||
:default-upload="false"
|
||||
list-type="text"
|
||||
:is-error-state="isErrorState"
|
||||
@finish="handleFinish"
|
||||
@error="handleError"
|
||||
>
|
||||
<NUploadDragger>
|
||||
<div class="mb-12px flex-center">
|
||||
<SvgIcon local-icon="unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
|
||||
</div>
|
||||
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
|
||||
<NP depth="3" class="mt-8px text-center">
|
||||
{{ $t('common.importSize') }}
|
||||
<b class="text-red-500">50MB</b>
|
||||
{{ $t('common.importFormat') }}
|
||||
<b class="text-red-500">xls/xlsx</b>
|
||||
{{ $t('common.importEnd') }}
|
||||
</NP>
|
||||
<NP depth="3" class="mt-12px text-center">
|
||||
为保证上传稳定性,请尽量控制在单文件
|
||||
<b class="text-red-500">5万</b>
|
||||
笔之内
|
||||
</NP>
|
||||
</NUploadDragger>
|
||||
</NUpload>
|
||||
<div class="flex-center">
|
||||
<!-- <NCheckbox v-model:checked="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>-->
|
||||
<!-- <n-divider vertical />-->
|
||||
数据批次
|
||||
<NDivider vertical />
|
||||
<NDatePicker
|
||||
v-model:value="data.importMonth"
|
||||
type="month"
|
||||
:placeholder="$t('common.selectImportMonth')"
|
||||
:is-date-disabled="disablePreviousDate"
|
||||
disabled
|
||||
/>
|
||||
<NUploadDragger>
|
||||
<div class="mb-12px flex-center">
|
||||
<SvgIcon local-icon="unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
|
||||
</div>
|
||||
<n-divider />
|
||||
<NAlert v-if="message==='importing'" type="warning">
|
||||
数据导入中，请勿关闭此界面......
|
||||
</NAlert>
|
||||
<NAlert v-if="message && message!='importing'" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
|
||||
<template #default>
|
||||
<div v-html="message"></div>
|
||||
</template>
|
||||
</NAlert>
|
||||
<template #footer>
|
||||
<NSpace justify="end" :size="16">
|
||||
<!-- <NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>-->
|
||||
<NButton :disabled="message != ''" type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NModal>
|
||||
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
|
||||
<NP depth="3" class="mt-8px text-center">
|
||||
{{ $t('common.importSize') }}
|
||||
<b class="text-red-500">50MB</b>
|
||||
{{ $t('common.importFormat') }}
|
||||
<b class="text-red-500">xls/xlsx</b>
|
||||
{{ $t('common.importEnd') }}
|
||||
</NP>
|
||||
<NP depth="3" class="mt-12px text-center">
|
||||
为保证上传稳定性,请尽量控制在单文件
|
||||
<b class="text-red-500">5万</b>
|
||||
笔之内
|
||||
</NP>
|
||||
</NUploadDragger>
|
||||
</NUpload>
|
||||
<div class="flex-center">
|
||||
<!-- <NCheckbox v-model:checked="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>-->
|
||||
<!-- <n-divider vertical />-->
|
||||
数据批次
|
||||
<NDivider vertical />
|
||||
<NDatePicker
|
||||
v-model:value="data.importMonth"
|
||||
type="month"
|
||||
:placeholder="$t('common.selectImportMonth')"
|
||||
:is-date-disabled="disablePreviousDate"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<NDivider />
|
||||
<NAlert v-if="message === 'importing'" type="warning">数据导入中，请勿关闭此界面......</NAlert>
|
||||
<NAlert
|
||||
v-if="message && message != 'importing'"
|
||||
:title="$t('common.importResult')"
|
||||
:type="success ? 'success' : 'error'"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #default>
|
||||
<div v-html="message"></div>
|
||||
</template>
|
||||
</NAlert>
|
||||
<template #footer>
|
||||
<NSpace justify="end" :size="16">
|
||||
<NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
|
||||
<NButton :disabled="message != ''" type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user