219 lines
9.0 KiB
Vue
219 lines
9.0 KiB
Vue
<template>
|
|
<XdPageContainer class="app-container">
|
|
<!-- 查询输入框 -->
|
|
<el-form :model="form" ref="form" :rules="rules" style="width: 100%;" label-position="left"
|
|
@submit.native.prevent :disabled="isFormDisabled" class="custom-form">
|
|
<el-form-item label="发票申请序号" prop="applySeqNo">
|
|
<el-input placeholder="请输入发票申请序号" v-if="!isFormDisabled" v-model="form.applySeqNo"
|
|
@keyup.enter.native="handleScanInput" @blur="handleScanInput" clearable style="width: 390px;">
|
|
<i slot="suffix" class="iconfont"></i>
|
|
</el-input>
|
|
<span v-else>{{ form.applySeqNo }}</span>
|
|
</el-form-item>
|
|
<!-- </el-form> -->
|
|
<!-- 数据表格 -->
|
|
<el-table :data="invoiceList" style="width: 100%; margin-bottom: 20px;" border>
|
|
<el-table-column :label="$t('账单名称')" align="center" prop="settleBillName" min-width="150" />
|
|
<el-table-column :label="$t('账单号')" align="center" prop="settleBillNo" min-width="150" />
|
|
<el-table-column :label="$t('金额')" align="center" prop="applyMoney" min-width="150" />
|
|
<el-table-column :label="$t('状态')" align="center" prop="invoiceStatus" min-width="150">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.invoiceStatus == '0'" type="info">未开票</el-tag>
|
|
<el-tag v-if="scope.row.invoiceStatus == '1'" type="warning">开票中</el-tag>
|
|
<el-tag v-if="scope.row.invoiceStatus == '2'" type="success">已开票</el-tag>
|
|
<el-tag v-if="scope.row.invoiceStatus == '3'" type="error">开票异常</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="$t('申请时间')" align="center" prop="applyDate" min-width="150" />
|
|
</el-table>
|
|
<!-- 输入框 -->
|
|
<el-form-item label="申请原因" prop="applyReason" class="label-top-item">
|
|
<el-input type="textarea" rows="3" v-model="form.applyReason" placeholder="请输入申请原因" clearable
|
|
style="width: 500px;" />
|
|
</el-form-item>
|
|
<el-form-item label="附件上传" prop="applyTextUrl">
|
|
<!-- <el-upload class="upload-demo" style="width: 500px;" drag v-if="!isFormDisabled"
|
|
action="https://jsonplaceholder.typicode.com/posts/" multiple :on-preview="handlePreview"
|
|
:before-upload="beforeUpload" :file-list="fileList" :limit="1" :action="uploadImgUrl"
|
|
:on-success="handleUploadSuccess" :on-error="handleUploadError" :headers="headers" :on-remove="handleRemove">
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> <br>支持 png/pdf/jpg,单文件≤5M</div>
|
|
</el-upload>
|
|
<div v-else>
|
|
<el-link v-for="item in fileList" :key="item.url" :href="item.url" target="_blank">{{ item.name }}</el-link>
|
|
</div> -->
|
|
<ImageUpload ref="imageUpload" :fileSize="5" :limit="10" v-model="form.applyTextUrl"></ImageUpload>
|
|
</el-form-item>
|
|
|
|
<div style="text-align: right;margin-bottom: 10px;" v-show="!isFormDisabled">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-form>
|
|
</XdPageContainer>
|
|
</template>
|
|
<script>
|
|
import { getInvoiceInfoByApplySeqNo, getEmisInvoiceCancellation, addEmisInvoiceCancellation } from '@/api/emis/emisInvoiceCancellation';
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
export default {
|
|
name: 'InvoiceCancellationForm',
|
|
props: {
|
|
id: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
openType: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isFormDisabled: null,
|
|
form: {},
|
|
invoiceList: [],
|
|
fileList: [],
|
|
queryParams: {
|
|
},
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/ossUpload", // 上传的图片服务器地址
|
|
headers: {
|
|
"X-Token": getToken()
|
|
},
|
|
rules: {
|
|
applySeqNo: [
|
|
{ required: true, message: '请输入发票申请序号', trigger: 'blur' }
|
|
],
|
|
applyReason: [
|
|
{ required: true, message: '请输入申请原因', trigger: 'blur' }
|
|
],
|
|
applyTextUrl: [
|
|
{ required: true, message: '请上传文件', trigger: 'blur' }
|
|
],
|
|
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
"id": {
|
|
handler(newValue, oldValue) {
|
|
this.id = newValue;
|
|
this.initData();
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
async initData() {
|
|
this.isFormDisabled = (this.openType === "view"); // 查看详情时，表单禁用
|
|
if (this.id) {
|
|
let res = await getEmisInvoiceCancellation(this.id);
|
|
let data= res.data || {};
|
|
this.form ={
|
|
// id:data.id,
|
|
invoiceId:data.invoiceId,
|
|
applyReason: data.applyReason,
|
|
applyTextUrl: data.applyTextUrl,
|
|
applySeqNo: data.emisSettleInvoiceRecord?.applySeqNo || ''
|
|
}
|
|
this.fileList = this.form.applyTextUrl ? [{
|
|
name: this.form.applyTextUrl.split('/').pop(),
|
|
url: this.form.applyTextUrl
|
|
}] : [];
|
|
this.invoiceList = [data.emisSettleInvoiceRecord ]|| [];
|
|
} else {
|
|
this.reset();
|
|
}
|
|
},
|
|
handleScanInput() {
|
|
if (!this.form.applySeqNo) {
|
|
this.$message.error('请输入发票申请序号');
|
|
return;
|
|
}
|
|
getInvoiceInfoByApplySeqNo(this.form.applySeqNo).then(res => {
|
|
this.invoiceList = [res.data] || [];
|
|
if (this.invoiceList.length > 0) {
|
|
this.form.invoiceId = this.invoiceList[0].id;
|
|
}
|
|
});
|
|
},
|
|
async submitForm() {
|
|
// const validSearch = await this.$refs.searchForm.validate();
|
|
this.$refs.form.validate(validate => {
|
|
if (validate) {
|
|
const formData = {...this.form};
|
|
formData.applySeqNo = null;
|
|
addEmisInvoiceCancellation(formData).then(res => {
|
|
if (res.code === 200) {
|
|
this.$modal.msgSuccess("提交成功");
|
|
this.$emit("on-submit-success");
|
|
} else {
|
|
this.$modal.msgError(res.msg || "提交失败");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
},
|
|
cancel() {
|
|
this.reset();
|
|
this.$emit("on-cancel");
|
|
},
|
|
reset() {
|
|
this.form = {
|
|
id: null,
|
|
invoiceId: null,
|
|
applyReason: null,
|
|
applyTextUrl: null,
|
|
applySeqNo: null,
|
|
};
|
|
this.invoiceList = [];
|
|
this.fileList = [];
|
|
},
|
|
handlePreview(file) {
|
|
this.previewFile = file;
|
|
//新窗口打开预览
|
|
window.open(file.url, '_blank');
|
|
},
|
|
beforeUpload(file) {
|
|
const isPDF = file.type === 'application/pdf';
|
|
const isJPG = file.type === 'image/jpeg';
|
|
const isPNG = file.type === 'image/png';
|
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
|
if (!isPDF && !isJPG && !isPNG) {
|
|
this.$message.error('上传文件格式必须为PDF、JPG或PNG!');
|
|
return false;
|
|
}
|
|
if (!isLt5M) {
|
|
this.$message.error('上传文件大小不能超过5MB!');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
handleUploadSuccess(res, file) {
|
|
if (res.code === 200) {
|
|
this.$message.success('上传成功');
|
|
file.url = res.url;
|
|
this.fileList.push(file);
|
|
this.form.applyTextUrl = res.url;
|
|
} else {
|
|
this.$message.error(res.msg || '上传失败');
|
|
}
|
|
},
|
|
handleUploadError(res, file) {
|
|
this.$message.error(res.msg || '上传失败');
|
|
},
|
|
handleRemove(file, fileList){
|
|
this.fileList = fileList;
|
|
this.form.applyTextUrl = '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|