Browse Source

顺饮品导入

intex_online20241111
张立 4 months ago
parent
commit
8cbb3fd667
  1. 337
      src/components/ImportForm/src/ImportFormStep.vue
  2. 6
      src/locales/en-US.ts
  3. 6
      src/locales/zh-CN.ts
  4. 111
      src/views/wms/deliversettlementManage/inducedProduct/deliverRecordMain/deliverRecordMain.data.ts
  5. 13
      src/views/wms/deliversettlementManage/inducedProduct/deliverRecordMain/index.vue

337
src/components/ImportForm/src/ImportFormStep.vue

@ -0,0 +1,337 @@
<!-- 导入组件 -->
<template>
<Dialog v-model="dialogVisible" :title="t('ts.导入')" width="600" :close-on-click-modal="false">
<div style="height: 500px;">
<el-steps style="max-width: 600px" :active="active" finish-status="finish" simple process-status="finish">
<el-step title="上传文件" :icon="UploadFilled"/>
<el-step title="确认数据" :icon="List"/>
<el-step title="导入成功" :icon="CircleCheckFilled"/>
</el-steps>
<div v-if="active == 0">
<Form
ref="formRef"
:rules="rules"
:schema="formSchema"
:is-col="true"
style="margin-top:20px"
/>
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
:action="importUrl"
:auto-upload="false"
:disabled="formLoading"
:headers="uploadHeaders"
:limit="1"
:on-error="submitFormError"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
:accept="accept"
drag
style="width: 300px; margin: 0px auto 0px"
v-loading="formLoading"
>
<Icon icon="ep:upload-filled" color="#c0c4cc" :size="60" />
<div class="el-upload__text">{{t('ts.将文件拖到此处,或')}}<em>{{t('ts.点击上传')}}</em></div>
<template #tip>
<div class="el-upload__tip ml--126px mr--80px">
<div class="flex" v-if="announcements&&announcements.length>0">
<div
class="label h-32px ml-22px mr-26px color-#acaeb3 font-size-14px w-100px text-right mt-2px"
style="line-height: 32px;"
>{{t('ts.注意事项')}}</div
>
<div class="">
<div class="notice color-#acaeb3 font-size-14px text-red">
<div class="mt-2" v-for="item in announcements">{{ item }}</div>
</div>
</div>
</div>
</div>
</template>
</el-upload>
</div>
<div v-else-if="active == 1">
<div class="red">
<el-icon color="#E44033" size="18" style="margin-right: 6px;"><WarningFilled /></el-icon>
纳入受领书数量与顺引发货记录数量不一致无法导入以下是差异数据
</div>
<!-- <Table v-clientTable
:columns="tableColumns"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
v-model:sort="tableObject.sort"
/> -->
</div>
<div v-else-if="active == 2" class="success">
<el-icon color="#409eff" size="60"><CircleCheckFilled /></el-icon>
<div class="success-title">导入成功</div>
<div class="success-text">订单号已关联到对应的顺引发货记录中</div>
</div>
</div>
<template #footer>
<div class="flex items-center">
<div class="flex-1 text-left">
<el-button type="primary" plain @click="importTemplate" v-if="active == 0">
<Icon icon="ep:download" />
{{ t('ts.下载模板') }}
</el-button>
<el-button type="primary" plain @click="importTemplate" v-if="active == 1">
<Icon icon="ep:download" />
{{ t('ts.下载差异数据') }}
</el-button>
</div>
<el-button :disabled="formLoading" type="primary" @click="submitForm" v-if="active == 0 || active == 1">{{ t('ts.下一步') }}</el-button>
<el-button :disabled="formLoading" type="primary" @click="submitForm" v-if="active == 2">{{ t('ts.好的') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('ts.取 消') }}</el-button>
</div>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
import { getBaseUrl } from '@/utils/systemParam'
import { UploadFilled, List, CircleCheckFilled,WarningFilled } from '@element-plus/icons-vue'
defineOptions({ name: 'ImportForm' })
const { t } = useI18n()
const message = useMessage() //
const dialogVisible = ref(false) //
const formLoading = ref(false) //
const uploadRef = ref()
const uploadHeaders = ref() // Header
const fileList = ref([]) //
const file = ref('')
const props = defineProps({
importTemplateData: {
type: Object,
required: true
},
//
accept: {
type: String,
required: false,
default: '.xlsx,.xls'
},
url: {
type: String,
required: false
},
announcements:{
type: Array,
required: false,
default: () => []
},
//
formSchema: {
type: Array,
required: false,
default: () => []
},
rules: {
type: Object,
required: false,
default: null
},
active: {
type: Number,
required: false,
default: 1
},
tableColumns: {
type: Array,
required: false,
default: () => []
},
tableObject: {
type: Object,
required: false,
default: null
},
})
const importTemplateData = ref(props.importTemplateData)
const accept = ref(props.accept)
const formSchema = ref(props.formSchema)
const rules = ref(props.rules)
const importUrl = ref('')
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
resetForm()
}
defineExpose({ open }) // open
const formRef = ref()
/** 提交表单 */
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
//
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
const data = unref(formRef)?.formModel
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
file.value = fileList.value[0].name
importUrl.value = getBaseUrl() + import.meta.env.VITE_API_URL + props.url + '?file=' + file.value
formSchema.value.forEach(item => {
importUrl.value += `&${item.field}=${data[item.field]||''}`
})
//
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
formLoading.value = true
uploadRef.value!.submit()
}
/** 文件上传成功 */
const emits = defineEmits(['success'])
const submitFormSuccess = (response: any) => {
formLoading.value = true
console.log(response)
if (response) {
if (response.code == 500) {
uploadRef.value!.clearFiles()
message.error('导入失败')
formLoading.value = false
return
} else if (response.code == 0) {
if (response.data.errorCount > 0) {
message.confirm('文件中有部分数据导入失败,是否下载失败数据?').then(() => {
// download.excel(file, 'file_' + new Date().getTime())
// url
// const downloadElement = document.createElement('a')
// console.log(172, getBaseUrl() + import.meta.env.VITE_API_URL + '/' + response.data.errorFile)
// console.log(172, getBaseUrl() + '/admin-api/opt/profile/' + response.data.errorFile)
window.open(
getBaseUrl() + '/admin-api' + response.data.errorFile,
'222'
)
// downloadElement.setAttribute('href', getBaseUrl() + import.meta.env.VITE_API_URL + response.data.errorFile )
//
// downloadElement.click()
})
} else {
message.success('导入成功')
}
}else if(response.data == null){
message.error(response.msg)
}
}
// if (response.code !== 0) {
// message.error(response.msg)
// formLoading.value = false
// return
// }
// //
// const data = response.data
// const create = response.data.importResult[0]
// const update = response.data.importResult[1]
// const failure = response.data.importResult[2]
// let text = '' + data[create].length + ';'
// for (let name of data[create]) {
// text += '< ' + name + ' >'
// }
// text += '' + data[update].length + ';'
// for (const name of data[update]) {
// text += '< ' + name + ' >'
// }
// text += '' + Object.keys(data[failure]).length + ';'
// for (const name in data[failure]) {
// text += '< ' + name + ': ' + data[failure][name] + ' >'
// }
// message.alert(text)
//
formLoading.value = false
emits('success')
dialogVisible.value = false
}
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('上传失败,请您重新上传!')
formLoading.value = false
}
/** 重置表单 */
const resetForm = () => {
//
formLoading.value = false
uploadRef.value?.clearFiles()
fileList.value = []
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件!')
}
/** 下载模板操作 */
const importTemplate = () => {
const res = importTemplateData.value.templateUrl
download.excel(res, importTemplateData.value.templateTitle)
}
</script>
<style scoped lang="scss">
.text-red{
color: var(--el-color-danger);
}
.tips {
div {
position: relative;
padding-left: 22px;
&::before {
width: 4px;
height: 4px;
border-radius: 50%;
content: '';
background: #c2c2c2;
position: absolute;
top: 50%;
margin-top: -2px;
left: 4px;
}
}
}
.success{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90%;
.success-title{
font-size: 18px;
color: #000;
margin-top: 5px;
}
.success-text{
font-size: 14px;
color: #575757;
margin-top: 5px;
}
}
.red{
color:#E44033;
display: flex;
align-items: center;
margin-top: 8px;
}
</style>

6
src/locales/en-US.ts

@ -891,14 +891,16 @@ export default {
:'Total',
:'Open',
:'Save',
:'Next',
: 'Next',
: 'OK',
:'Please select filter',
:'Please inputr content',
:'Attachment',
'更新:新增并修改':'Update:Add and modify',
'追加:只新增,不修改':'Add:Add,no modify',
'覆盖:只修改不新增':'Cover:Modify,not add',
:'Download Template',
: 'Download Template',
: 'Download differential data',
:'Update',
:'Add',
:'Cover',

6
src/locales/zh-CN.ts

@ -896,14 +896,16 @@ export default {
:'共',
:'打开',
:'保存',
:'下一步',
: '下一步',
: '好的',
:'请选择筛选对象',
:'请输入内容',
:'附件',
'更新:新增并修改':'更新:新增并修改',
'追加:只新增,不修改':'追加:只新增,不修改',
'覆盖:只修改不新增':'覆盖:只修改不新增',
:'下载模板',
: '下载模板',
: '下载差异数据',
:'更新',
:'追加',
:'覆盖',

111
src/views/wms/deliversettlementManage/inducedProduct/deliverRecordMain/deliverRecordMain.data.ts

@ -872,3 +872,114 @@ export const DeliverRecordDetailRules = reactive({
{ required: true, message: '请输入创建者', trigger: 'blur' }
],
})
/**
* @returns {Array}
*/
export const DeliverRecordImport = useCrudSchemas(reactive<CrudSchema[]>([
{
label: '订单号',
field: 'customerOrderNumber',
sort: 'custom',
},
{
label: '开始日期',
field: 'startData',
sort: 'custom',
form: {
component: 'DatePicker',
componentProps: {
style: { width: '100%' },
type: 'date',
dateFormat: 'YYYY-MM-DD',
valueFormat: 'x',
}
},
},
{
label: '结束日期',
field: 'finishData',
sort: 'custom',
form: {
component: 'DatePicker',
componentProps: {
style: { width: '100%' },
type: 'date',
dateFormat: 'YYYY-MM-DD',
valueFormat: 'x',
}
},
},
{
label: '开始序号',
field: 'startNo',
sort: 'custom',
form: {
component: 'InputNumber',
componentProps: {
min:1,
precision: 0
}
},
},
{
label: '结束序号',
field: 'finishNo',
sort: 'custom',
form: {
component: 'InputNumber',
componentProps: {
min: 1,
precision: 0
}
},
},
]))
//导入表单校验
export const DeliverRecordImportRules = reactive({
customerOrderNumber: [
{ required: true, message: '请输入订单号', trigger: 'blur' }
],
startData: [
{ required: true, message: '请选择开始日期', trigger: 'change' }
],
finishData: [
{ required: true, message: '请选择结束日期', trigger: 'change' }
],
startNo: [
{ required: true, message: '请输入开始序号', trigger: 'change' }
],
finishNo: [
{ required: true, message: '请输入结束序号', trigger: 'change' }
],
})
/**
* @returns {Array}
*/
export const DeliverRecordImportData = useCrudSchemas(reactive<CrudSchema[]>([
{
label: '纳入受领书单号',
field: 'customerOrderNumber',
sort: 'custom',
},
{
label: '订单号',
field: 'customerOrderNumber',
sort: 'custom',
},
{
label: '物料代码',
field: 'itemCode',
sort: 'custom',
},
{
label: '背番',
field: 'backNumber',
sort: 'custom',
},
{
label: '数量',
field: 'qty',
sort: 'custom',
},
]))

13
src/views/wms/deliversettlementManage/inducedProduct/deliverRecordMain/index.vue

@ -59,13 +59,20 @@
:detailAllSchemasRules="DeliverRecordDetailRules"
:apiPage="DeliverRecordDetailApi.getDeliverRecordDetailPage"
/>
<!-- 导入 -->
<ImportForm ref="importFormRef" url="/wms/unfinished-shipment-main/import" :importTemplateData="importTemplateData" @success="importSuccess" />
<!-- 导入 -->
<ImportFormStep
ref="importFormRef"
url="/wms/deliver-record-main/import-parse-file"
:importTemplateData="importTemplateData"
:formSchema="DeliverRecordImport.allSchemas.formSchema"
:rules="DeliverRecordImportRules"
:tableColumns="DeliverRecordImportData.allSchemas.tableColumns"
@success="importSuccess" />
</template>
<script setup lang="ts">
import download from '@/utils/download'
import { getAccessToken } from '@/utils/auth'
import { DeliverRecordMain,DeliverRecordMainRules,DeliverRecordDetail,DeliverRecordDetailRules } from './deliverRecordMain.data'
import { DeliverRecordMain,DeliverRecordMainRules,DeliverRecordDetail,DeliverRecordDetailRules,DeliverRecordImport,DeliverRecordImportRules,DeliverRecordImportData } from './deliverRecordMain.data'
import * as DeliverRecordMainApi from '@/api/wms/deliverRecordMain'
import * as DeliverRecordDetailApi from '@/api/wms/deliverRecordDetail'
import * as defaultButtons from '@/utils/disposition/defaultButtons'

Loading…
Cancel
Save