You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
14 KiB
480 lines
14 KiB
<!-- 导入客户对账单组件 -->
|
|
<template>
|
|
<Dialog v-model="dialogVisible" :title="t('ts.导入')" width="600" :close-on-click-modal="false">
|
|
<el-form
|
|
:inline="true"
|
|
:model="queryParams"
|
|
class="demo-form-inline"
|
|
style="margin-bottom: 10px"
|
|
label-width="80px"
|
|
:rules="rules"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="客户代码" prop="customerCode">
|
|
<el-select
|
|
v-model="queryParams.customerCode"
|
|
placeholder="请选择客户代码"
|
|
clearable
|
|
>
|
|
<el-option v-for="(item) in customerList" :key="item.code" :label="item.name" :value="item.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="年月" prop="yearsMonthStr">
|
|
<el-date-picker
|
|
v-model="queryParams.yearsMonthStr"
|
|
type="month"
|
|
placeholder="选择年月"
|
|
format="YYYY-MM"
|
|
value-format="YYYY-MM"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-upload
|
|
ref="uploadRef"
|
|
v-model:file-list="fileList"
|
|
:action="
|
|
importUrl +
|
|
'?yearsMonthStr=' +
|
|
queryParams.yearsMonthStr +
|
|
'&customerCode=' +
|
|
queryParams.customerCode +
|
|
'&file=' +
|
|
file +
|
|
'&updatePart=' +
|
|
updatePart +
|
|
'&outFile=' +
|
|
outFile +
|
|
'&extend=' + extend +
|
|
'&fromInventoryStatus=' + fromInventoryStatus +
|
|
'&toInventoryStatus=' + toInventoryStatus +
|
|
dataType
|
|
"
|
|
: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: 0 auto"
|
|
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 class="flex">
|
|
<div
|
|
class="label h-32px mr-26px color-#acaeb3 font-size-14px w-100px text-right"
|
|
style="line-height: 32px"
|
|
>{{t('ts.导入模式')}}</div
|
|
>
|
|
<div class="">
|
|
<div class="radio">
|
|
<el-radio-group v-model="mode">
|
|
<el-radio :label="1" v-show="updateIsShow" :disabled="updateIsDisable">{{ t('ts.更新')}}</el-radio>
|
|
<el-radio :label="2" v-show="appendIsShow" :disabled="appendIsDisable">{{ t('ts.追加') }}</el-radio>
|
|
<el-radio :label="3" v-show="coverIsShow" :disabled="coverIsDisable">{{ t('ts.覆盖') }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
|
|
<div class="tips color-#acaeb3 font-size-14px">
|
|
<div class="mt-2">{{t('ts.更新：新增并修改')}}</div>
|
|
<div class="mt-2">{{ t('ts.追加：只新增，不修改') }}</div>
|
|
<div class="mt-2">{{ t('ts.覆盖：只修改不新增') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex mt-16px">
|
|
<div
|
|
class="label h-32px mr-26px color-#acaeb3 font-size-14px w-100px text-right"
|
|
style="line-height: 32px"
|
|
>{{ t('ts.部分保存') }}</div
|
|
>
|
|
<div class="">
|
|
<div class="switch">
|
|
<el-switch v-model="updatePart" />
|
|
</div>
|
|
<div class="tips color-#acaeb3 font-size-14px">
|
|
<div class="mt-2">{{ t('ts.部分保存：如存在错误数据，正确数据正常导入') }}</div>
|
|
<div class="mt-2">{{ t('ts.全部保存：全部数据正确，才能导入') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex mt-16px" v-if="isShowOut">
|
|
<div
|
|
class="label h-32px mr-26px color-#acaeb3 font-size-14px w-100px text-right"
|
|
style="line-height: 32px"
|
|
>是否外部资源</div
|
|
>
|
|
<div class="">
|
|
<div class="switch">
|
|
<el-switch v-model="outFile" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> -->
|
|
</el-upload>
|
|
<template #footer>
|
|
<div class="flex items-center">
|
|
<div class="flex-1 text-left">
|
|
<el-button type="primary" plain @click="importTemplate">
|
|
<Icon icon="ep:download" />
|
|
{{ t('ts.下载模板') }}
|
|
</el-button>
|
|
</div>
|
|
<el-button :disabled="formLoading" type="primary" @click="verifyData">{{ 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 * as CustomerApi from '@/api/wms/customer'
|
|
import * as CustomerStatementMainApi from '@/api/wms/customerStatementMain'
|
|
|
|
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'
|
|
},
|
|
// 是否更新已经存在的用户数据.默认值是1
|
|
mode: {
|
|
type: Number,
|
|
required: false,
|
|
default: 1
|
|
},
|
|
// 更新是否禁用,默认值不禁用
|
|
updateIsDisable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 更新是否展示
|
|
updateIsShow: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
},
|
|
// 追加是否禁用,默认值不禁用
|
|
appendIsDisable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 追加是否展示
|
|
appendIsShow: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
},
|
|
// 覆盖是否禁用,默认值不禁用
|
|
coverIsDisable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 覆盖是否展示
|
|
coverIsShow: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
},
|
|
// 是否部门保存,默认是
|
|
updatePart: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
url: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
// 显示是否外部资源
|
|
isShowOut: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
outFile: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 扩展额外属性
|
|
extend: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 库存修改 扩展额外属性 TODO: 后续优化 业务限定属性应转为统一的额外扩展属性 此处不应该出现业务相关属性 cxm
|
|
fromInventoryStatus: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 库存修改 扩展额外属性 TODO: 后续优化 业务限定属性应转为统一的额外扩展属性 此处不应该出现业务相关属性 cxm
|
|
toInventoryStatus: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
announcements:{
|
|
type: Array,
|
|
required: false,
|
|
default: []
|
|
}
|
|
})
|
|
const importTemplateData = ref(props.importTemplateData)
|
|
const dataType = ref('')
|
|
dataType.value = props.importTemplateData.dataType ?'&dataType=' + props.importTemplateData.dataType :''
|
|
const accept = ref(props.accept)
|
|
const mode = ref(props.mode) //是否更新已经存在的用户数据.默认值是1
|
|
const updateIsDisable = ref(props.updateIsDisable) //更新是否禁用,默认值不禁用
|
|
const appendIsDisable = ref(props.appendIsDisable) //追加是否禁用,默认值不禁用
|
|
const coverIsDisable = ref(props.coverIsDisable) //覆盖是否禁用,默认值不禁用
|
|
const updatePart = ref(props.updatePart) //是否部门保存
|
|
const outFile = ref(props.outFile) //是否引入外部资源
|
|
|
|
const importUrl = getBaseUrl() + import.meta.env.VITE_API_URL + props.url
|
|
|
|
/** 打开弹窗 */
|
|
const open = () => {
|
|
dialogVisible.value = true
|
|
resetForm()
|
|
getCustomerList();//获取客户列表
|
|
}
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
|
/** 校验数据 */
|
|
const verifyData = async () => {
|
|
if (queryParams.yearsMonthStr==''||queryParams.yearsMonthStr==null) {
|
|
message.error('请选择年月')
|
|
return
|
|
}
|
|
if (queryParams.customerCode==''||queryParams.customerCode==null) {
|
|
message.error('请选择客户代码')
|
|
return
|
|
}
|
|
if (fileList.value.length == 0) {
|
|
message.error('请上传文件')
|
|
return
|
|
}
|
|
const data = await CustomerStatementMainApi.verifyDataExist(queryParams.yearsMonthStr,queryParams.customerCode);
|
|
console.log('data',data)
|
|
if(data.status==0){
|
|
submitForm();
|
|
}else if(data.status==2){
|
|
try {
|
|
// 确认
|
|
await message.confirm('已存在相同客户代码及年月的客户对账单，是否确认导入？注意：如确认则上一版本对账单将自动作废。')
|
|
//确定走的
|
|
submitForm();
|
|
// await PurchasepriceApi.deletePurchaseprice(id)
|
|
// tableObject.loading = false
|
|
// message.success(t('common.delSuccess'))
|
|
// // 刷新列表
|
|
// buttonBaseClick('refresh',null)
|
|
} catch {
|
|
//取消走的
|
|
}
|
|
}else if(data.status==3){
|
|
await message.alertWarning('已存在相同客户代码及年月的客户对账单，且已提交，无法导入。')
|
|
}
|
|
}
|
|
|
|
/** 提交表单 */
|
|
const submitForm = async () => {
|
|
if (fileList.value.length == 0) {
|
|
message.error('请上传文件')
|
|
return
|
|
}
|
|
file.value = fileList.value[0].name
|
|
// 提交请求
|
|
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 = () => {
|
|
// 重置上传状态和文件
|
|
queryParams.customerCode = ''
|
|
queryParams.yearsMonthStr = ''
|
|
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)
|
|
}
|
|
const customerList = ref();
|
|
const queryParams = reactive({
|
|
customerCode: '',
|
|
yearsMonthStr: '',
|
|
})
|
|
|
|
const rules = ref({
|
|
customerCode: [
|
|
{ required: true, message: '请选择客户代码', trigger: 'change' },
|
|
],
|
|
yearsMonthStr: [
|
|
{ required: true, message: '请选择年月', trigger: 'change' },
|
|
],
|
|
})
|
|
|
|
const getCustomerList = async () => {//获取客户列表
|
|
var param ={}
|
|
const list = await CustomerApi.getCustomerListPc(param);
|
|
customerList.value = list;
|
|
}
|
|
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|