Authored by zhangwenxue

feature(invoice-manager): add validattion

<template>
<Modal v-model="visible" :title="title" @on-ok="ok" @on-cancel="cancel">
<Form :model="formItem" :label-width="80">
<Form ref="modal" :model="formItem" :label-width="80" :rules="rules">
<FormItem label="订单编号">
<i-input v-model="formItem.orderCode" readonly></i-input>
</FormItem>
... ... @@ -13,8 +13,19 @@
</FormItem>
<template v-if="formItem.status !== CANCELLED">
<template v-if="formItem.type == ELECTRONIC">
<FormItem label="上传PDF">
<drag-file-upload @success="uploadPDFSuccess" @remove="uploadPDFRemove"> </drag-file-upload>
<FormItem label="上传PDF" prop="pdfUrl">
<!-- TODO: 设置文件类型,文件大小,及提示信息 -->
<drag-file-upload
upload-icon-title="上传发票"
bucket="invoice"
:format="['pdf']"
:format-err-msg="formatPdfFileTypeMsg"
:max-size="5 * 1024"
:format-max-size-msg="formatMaxSizeMsg"
@success="uploadPDFSuccess"
@remove="uploadPDFRemove"
>
</drag-file-upload>
</FormItem>
</template>
<template v-else>
... ... @@ -22,14 +33,18 @@
<Radio :label="LOGISTICS_YES">需要物流</Radio>
<Radio :label="LOGISTICS_NO">不需要物流</Radio>
</RadioGroup>
<FormItem v-if="formItem.logisticsSwitch" label=" ">
<Select v-model="formItem.logisticsCompanyName">
<Option v-for="(item, idx) in expressList" :key="idx" :value="item.companyName">
{item.companyName}
</Option>
</Select>
<i-input v-model="formItem.expressNumber" type="text" placeholder="物流单号"></i-input>
</FormItem>
<template v-if="formItem.logisticsSwitch === LOGISTICS_YES">
<FormItem v-model="formItem.logisticsId" prop="logisticsId">
<Select>
<Option v-for="(item, idx) in expressList" :key="idx" :value="item.id">
{item.companyName}
</Option>
</Select>
</FormItem>
<FormItem prop="expressNumber">
<i-input v-model="formItem.expressNumber" type="text" placeholder="物流单号"></i-input>
</FormItem>
</template>
</template>
</template>
</Form>
... ... @@ -64,6 +79,45 @@ export default {
// api result data
expressList: ExpressCompanyList,
formItem: {},
// rules
rules: {
pdfUrl: {
trigger: 'blur',
validator(rule, value, data) {
if (data.type === InvoiceTypeName2Id.ELECTRONIC) {
if (!value) {
return new Error('请上传发票PDF文件');
}
}
},
},
logisticsId: {
trigger: 'blur',
validator(rule, value, data) {
if (data.type === InvoiceTypeName2Id.PAPER) {
if (!value) {
return new Error('请选择物流公司');
}
}
},
},
expressNumber: {
trigger: 'blur',
validator(rule, value, data) {
if (data.type === InvoiceTypeName2Id.PAPER) {
if (!value) {
return new Error('请输入物流单号');
}
if (!/^[\w\d_-]{5,+}$/.test(value)) {
// TODO: refs https://www.cnblogs.com/Jerseyblog/p/10077136.html
return new Error('请输入有效的物流单号'); // TODO: 描述下什么是有效的?
}
}
},
},
},
};
},
created() {
... ... @@ -84,6 +138,7 @@ export default {
}
},
show(invoice) {
this.$refs.modal.resetFields();
this.setTitle(invoice);
// initial data
this.invoiceData = invoice;
... ... @@ -164,21 +219,25 @@ export default {
const params = { ...this.formItem };
// validate
this.$refs.modal.validate(valid => {
if (valid) {
if (!this.updateState(params)) {
this.close(true);
return;
}
this.invoiceAPI
.update(params)
.then(() => {
this.$emit('updated', params);
this.close();
})
.catch(() => {
this.$methods.warn('更新失败');
});
}
});
// TODO:
// update status
if (!this.updateState(params)) {
this.close(true);
return;
}
this.invoiceAPI
.update(params)
.then(() => {
this.$emit('updated', params);
this.close();
})
.catch(() => {
this.$methods.warn('更新失败');
});
},
ok() {
debugger;
... ... @@ -198,6 +257,12 @@ export default {
uploadPDFRemove() {
this.formItem.pdfUrl = '';
},
formatPdfFileTypeMsg(file) {
return `文件${file.name}格式不正确, 请上传pdf文件`;
},
formatMaxSizeMsg(file) {
return `文件${file.name}太大,不能超过5M`;
},
},
};
</script>
... ...
... ... @@ -127,16 +127,19 @@ export default {
this.activate = tab || 'all';
this.search();
},
filterValues() {
filterValues(usePage = true) {
const params = {
orderCode: +this.filters.orderCode.model,
orderCode: this.filters.orderCode.model,
shopId: this.$user.currentShop.shopsId,
beginTime: this.startTime,
endTime: this.endTime,
pageSize: this.pageData.pageSize,
pageNo: this.pageData.pageNo,
};
if (usePage) {
params.pageSize = this.pageData.pageSize;
params.pageNo = this.pageData.pageNo;
}
if (this.activate !== 'all') {
params.status = InvoiceStatusName2Id[this.activate];
}
... ... @@ -172,7 +175,7 @@ export default {
exportList() {
// TODO: check timerange
// 30天
const params = { ...this.filterValues() };
const params = { ...this.filterValues(false) };
let msg;
if (params.endTime === 0 || params.startTime === 0) {
// timeRange is required
... ... @@ -196,9 +199,9 @@ export default {
window.open(href, '_blank');
},
invoiceUpdated(updateInvoiceInfo) {
console.log(updateInvoiceInfo);
debugger;
invoiceUpdated() {
// 刷新
this.search();
},
},
};
... ...