|
|
|
<template>
|
|
|
|
<div id="exportReceipt">
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
<el-row :gutter="10" class="toolbar">
|
|
|
|
<el-col :span="7">
|
|
|
|
<el-input v-model="queryInfo.receiptGuid" prefix-icon="el-icon-search" size="small"
|
|
|
|
placeholder="系统唯一编号" clearable>
|
|
|
|
<template slot="prepend">系统唯一编号</template>
|
|
|
|
</el-input>
|
|
|
|
</el-col>
|
|
|
|
<!-- 其他搜索字段类似添加 -->
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="small" @click="searchExportReceipts">
|
|
|
|
查询
|
|
|
|
</el-button>
|
|
|
|
<el-button type="success" icon="el-icon-plus" size="small" @click="openDialog('add')">新增</el-button>
|
|
|
|
<el-button type="warning" icon="el-icon-message" size="small" @click="declare()">申报</el-button>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-upload
|
|
|
|
style="display: inline; margin-left: 10px;margin-right: 10px;"
|
|
|
|
action=""
|
|
|
|
:http-request="uploadFile"
|
|
|
|
:limit=1
|
|
|
|
:on-exceed="fileExceed"
|
|
|
|
:file-list="fileList"
|
|
|
|
accept="application/vnd.ms-excel,application/vnd.ms-excels,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
|
|
ref="fileupload">
|
|
|
|
<el-button slot="trigger" style="width:150px" icon="el-icon-folder-add" type="primary">导入excel</el-button>
|
|
|
|
</el-upload>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
|
<el-table :data="exportReceiptsData" border
|
|
|
|
style="border-radius: 10px 10px 0px 0px;line-height: 25px;width: 100%"
|
|
|
|
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
|
|
|
|
@selection-change="selsChange"
|
|
|
|
>
|
|
|
|
<el-table-column type="selection" width="55" :selectable="isSelectable"></el-table-column>
|
|
|
|
<el-table-column prop="receiptGuid" label="系统唯一编号"></el-table-column>
|
|
|
|
<el-table-column prop="appType" label="报送类型" :formatter="formatAppType"></el-table-column>
|
|
|
|
<el-table-column prop="appTime" label="报送时间" :formatter="formatDate"></el-table-column>
|
|
|
|
<el-table-column prop="appStatus" label="申报状态" :formatter="formatAppStatus"></el-table-column>
|
|
|
|
<el-table-column prop="ebpName" label="电商平台登记名称"></el-table-column>
|
|
|
|
<el-table-column prop="ebpCode" label="电商平台代码"></el-table-column>
|
|
|
|
<el-table-column prop="ebcCode" label="电商企业代码"></el-table-column>
|
|
|
|
<el-table-column prop="ebcName" label="电商企业名称"></el-table-column>
|
|
|
|
<el-table-column prop="orderNo" label="电商订单编号"></el-table-column>
|
|
|
|
<el-table-column prop="payCode" label="支付企业代码"></el-table-column>
|
|
|
|
<el-table-column prop="payName" label="支付企业名称"></el-table-column>
|
|
|
|
<el-table-column prop="payNo" label="支付交易编号"></el-table-column>
|
|
|
|
<el-table-column prop="charge" label="订单交易金额"></el-table-column>
|
|
|
|
<el-table-column prop="currency" label="币制"></el-table-column>
|
|
|
|
<el-table-column prop="accountingDate" label="到账时间" :formatter="formatDate"></el-table-column>
|
|
|
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
<el-table-column fixed="right" label="操作" width="250">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-row type="flex" justify="left">
|
|
|
|
<!-- <el-col :span="6"><el-button type="info" @click="openDialog('view', scope.row)">查看</el-button></el-col>-->
|
|
|
|
<el-col :span="6"><el-button type="primary" icon="el-icon-edit" @click="openDialog('edit', scope.row)"></el-button></el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-popconfirm title="确定删除吗？" @confirm="deleteExportReceipt(scope.row.receiptGuid)">
|
|
|
|
<el-button slot="reference" type="danger" icon="el-icon-delete"></el-button>
|
|
|
|
</el-popconfirm>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row type="flex" justify="left">
|
|
|
|
<el-col :span="6"><el-button type="info" icon="el-icon-search" @click="openSendLogView(scope.row)">回执</el-button></el-col>
|
|
|
|
</el-row>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
<el-pagination layout="prev, pager, next" :total="totalRecords" @current-change="handleCurrentChange"
|
|
|
|
background style="margin-top: 10px">
|
|
|
|
</el-pagination>
|
|
|
|
|
|
|
|
<!-- 对话框 -->
|
|
|
|
<el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
|
|
|
|
<el-form ref="exportReceiptForm" :model="exportReceiptForm" :rules="formRules"
|
|
|
|
label-width="120px">
|
|
|
|
<!-- 表单字段 -->
|
|
|
|
<el-form-item label="系统唯一编号" prop="receiptGuid">
|
|
|
|
<el-input v-model="exportReceiptForm.receiptGuid"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<!-- 其他表单字段类似添加 -->
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="showDialog = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="submitForm(dialogType)">确 定</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<el-dialog title="回执明细" :visible.sync="sendLogDialogShow" width="80%">
|
|
|
|
<send-log :bill-guid="billGuid"> </send-log>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { addExportReceipt, updateExportReceipt, deleteExportReceipt, getExportReceipt,
|
|
|
|
selectAllByPage,uploadExportReceipt, batchDeclare} from '@/api/cbecd';
|
|
|
|
import sendLog from "./send_log.vue"
|
|
|
|
export default {
|
|
|
|
computed: {
|
|
|
|
},
|
|
|
|
components: { sendLog },
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
fileList: [],
|
|
|
|
sendList:[],
|
|
|
|
queryInfo: {},
|
|
|
|
exportReceiptsData: [],
|
|
|
|
totalRecords: 0,
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
showDialog: false,
|
|
|
|
sendLogDialogShow: false,
|
|
|
|
dialogType: '',
|
|
|
|
billGuid:'',
|
|
|
|
dialogStateMap: {
|
|
|
|
view: '查看',
|
|
|
|
edit: '编辑',
|
|
|
|
add: '新增'
|
|
|
|
},
|
|
|
|
exportReceiptForm: {},
|
|
|
|
formRules: {
|
|
|
|
receiptGuid: [{ required: true, message: '请输入系统唯一编号', trigger: 'blur' }],
|
|
|
|
// 其他字段规则类似添加
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
formatAppType: function (row, column,cellValue, index) {
|
|
|
|
const map={
|
|
|
|
"1": "新增",
|
|
|
|
"2": "变更",
|
|
|
|
"3": "删除"
|
|
|
|
}
|
|
|
|
return map[cellValue];
|
|
|
|
},
|
|
|
|
formatAppStatus: function (row, column,cellValue, index) {
|
|
|
|
const map = {
|
|
|
|
"1": { text: "暂存", type: "" },
|
|
|
|
"2": { text: "申报", type: "info" },
|
|
|
|
"3": { text: "已回执", type: "success" }, // 默认样式
|
|
|
|
};
|
|
|
|
|
|
|
|
const tagInfo = map[cellValue] || { text: "未知状态", type: "" };
|
|
|
|
|
|
|
|
// 使用 createElement 创建 VNode
|
|
|
|
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
|
|
|
|
|
|
|
|
// 使用 createElement 创建 VNode
|
|
|
|
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
|
|
|
|
},
|
|
|
|
formatDate: function (row, column,cellValue, index) {
|
|
|
|
// 获取单元格数据
|
|
|
|
if(cellValue) {
|
|
|
|
let dt = new Date(cellValue)
|
|
|
|
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
|
|
|
|
}else {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
searchExportReceipts() {
|
|
|
|
selectAllByPage(this.queryInfo, this.pageNum, this.pageSize).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.exportReceiptsData = data.data.list; // 假设返回数据包含list字段
|
|
|
|
this.totalRecords = data.data.total; // 假设返回数据包含total字段
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
openDialog(type, row) {
|
|
|
|
if (type === 'view' || type === 'edit') {
|
|
|
|
getExportReceipt(row.receiptGuid).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.exportReceiptForm = data.data; // 假设返回数据包含data字段
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.exportReceiptForm = {}; // 清空表单，用于新增操作
|
|
|
|
}
|
|
|
|
this.dialogType = type;
|
|
|
|
this.showDialog = true;
|
|
|
|
},
|
|
|
|
openSendLogView(row) {
|
|
|
|
this.sendLogDialogShow = true;
|
|
|
|
this.billGuid = row.receiptGuid;
|
|
|
|
},
|
|
|
|
submitForm(type) {
|
|
|
|
if (type === 'add') {
|
|
|
|
addExportReceipt(this.exportReceiptForm).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.$message.success('新增成功');
|
|
|
|
this.showDialog = false;
|
|
|
|
this.searchExportReceipts(); // 刷新列表
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else if (type === 'edit') {
|
|
|
|
updateExportReceipt(this.exportReceiptForm).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.$message.success('编辑成功');
|
|
|
|
this.showDialog = false;
|
|
|
|
this.searchExportReceipts(); // 刷新列表
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else if (type === 'view') {
|
|
|
|
this.showDialog = false; // 查看模式下，直接关闭对话框
|
|
|
|
}
|
|
|
|
},
|
|
|
|
deleteExportReceipt(guid) {
|
|
|
|
deleteExportReceipt(guid).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.$message.success('删除成功');
|
|
|
|
this.searchExportReceipts(); // 刷新列表
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},// 自定义上传
|
|
|
|
uploadFile (item) {
|
|
|
|
const form = new FormData()
|
|
|
|
form.append('file', item.file)
|
|
|
|
uploadExportReceipt(form).then(res =>{
|
|
|
|
if(res.data.code =='200'){
|
|
|
|
this.$message.success(res.data.msg);
|
|
|
|
this.searchExportReceipts();
|
|
|
|
this.fileList = [];
|
|
|
|
}else {
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
}
|
|
|
|
}).catch(e =>{
|
|
|
|
this.$message.error(e.toString())
|
|
|
|
})
|
|
|
|
},
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
this.pageNum = val;
|
|
|
|
this.searchExportReceipts();
|
|
|
|
},
|
|
|
|
// 导入excel
|
|
|
|
fileExceed(){
|
|
|
|
this.$message.error('别贪心！一次只能上传一个哦~');
|
|
|
|
},
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
console.log(file, fileList);
|
|
|
|
},
|
|
|
|
handlePreview(file) {
|
|
|
|
console.log(file);
|
|
|
|
},
|
|
|
|
handleExceed(files, fileList) {
|
|
|
|
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
|
},
|
|
|
|
beforeRemove(file, fileList) {
|
|
|
|
return this.$confirm(`确定移除 ${ file.name }？`);
|
|
|
|
},
|
|
|
|
selsChange(selection){
|
|
|
|
this.sendList = selection;
|
|
|
|
// 如果用户尝试选择了不允许的选择项，则移除这些选择
|
|
|
|
this.sendList = selection.filter(row => this.isSelectable(row));
|
|
|
|
},
|
|
|
|
isSelectable(row) {
|
|
|
|
// 只有当appStatus是"1"或"2"的时候才可选
|
|
|
|
return ['1'].includes(row.appStatus);
|
|
|
|
},
|
|
|
|
declare(){
|
|
|
|
batchDeclare(this.sendList).then(response => {
|
|
|
|
const data = response.data;
|
|
|
|
if (data.code === '200') {
|
|
|
|
this.$message.success('申报成功');
|
|
|
|
this.searchExportReceipts(); // 刷新列表
|
|
|
|
}
|
|
|
|
}).catch(e =>{
|
|
|
|
this.$message.error(e.toString());
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script> |
...
|
...
|
|
