朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 c88f50ed877e8005e8c25299c04945337b458aab 1 个父辈 663e2c6e

add: 

1.增加邮件风控界面
内嵌 并排对比
正在显示 3 个修改的文件 包含 356 行增加 和 0 行删除
import http from '../http.js';
let MailInfoBase = 'wlpt-mail-risk-analysis/InternationalMailInfo';
// 新增国际邮件信息
export const riskManagement = (data,params) => {
return http.post(`${MailInfoBase}/riskManagementLink`, data,params);
};
// 查询搜索
export const searchListAPI = (data,params) => {
return http.post(`${MailInfoBase}/list`, data,params);
};
... ...
... ... @@ -209,6 +209,9 @@ import ManagerWaybill from "./views/exportorder/ManagerWaybill.vue";
import ZhiDan from './views/zhidan/zhidan.vue'
import Rate from './views/zhidan/rate.vue'
// 邮件风控
import MailRisk from './views/mail_risk/index.vue'
let routes = [
{
path: '/login',
... ... @@ -698,6 +701,15 @@ let routes = [
]
},
{
path: '/customs_mail',
component: HomeNew,
name: '邮件监管',
iconCls:'el-icon-wind-power',
children:[
{path:'/mail_risk_analysis',component:MailRisk,name:'风控分析'},
]
},
{
path: '/cbecd',
component: HomeNew,
name: '跨境电商申报',
... ...
<template>
<div>
<!-- 搜索区域 -->
<!-- 搜索区域 -->
<el-row :gutter="10" class="toolbar">
<el-col :span="7">
<el-input v-model="queryInfo.mailId" prefix-icon="el-icon-search" size="small" placeholder="邮件号 (主键)" clearable>
<template slot="prepend">邮&nbsp;&nbsp;&nbsp;件&nbsp;&nbsp;&nbsp;号</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.mailType" prefix-icon="el-icon-search" size="small" placeholder="邮件类型" clearable>
<template slot="prepend">邮&nbsp;件&nbsp;类&nbsp;型</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.receiverName" prefix-icon="el-icon-search" size="small" placeholder="收件人姓名" clearable>
<template slot="prepend">收件人姓名</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.receiverAddress" prefix-icon="el-icon-search" size="small" placeholder="收件人地址" clearable>
<template slot="prepend">收件人地址</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.receiverPhone" prefix-icon="el-icon-search" size="small" placeholder="收件人电话" clearable>
<template slot="prepend">收件人电话</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.receiverIdNumber" prefix-icon="el-icon-search" size="small" placeholder="收件人证件号码" clearable>
<template slot="prepend">收件人证件</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.declarer" prefix-icon="el-icon-search" size="small" placeholder="申报人" clearable>
<template slot="prepend">申&nbsp;&nbsp;&nbsp;报&nbsp;&nbsp;&nbsp;人</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryInfo.declarerUnit" prefix-icon="el-icon-search" size="small" placeholder="申报单位" clearable>
<template slot="prepend">申&nbsp;报&nbsp;单&nbsp;位</template>
</el-input>
</el-col>
</el-row>
<el-row :gutter="10" class="toolbar">
<el-col :span="7">
<el-select v-model="queryInfo.returnStatus" placeholder="退件状态" size="small" clearable>
<el-option label="未退件" value="0"></el-option>
<el-option label="已退件" value="1"></el-option>
</el-select>
</el-col>
<el-col :span="7">
<el-select v-model="queryInfo.inspectionStatus" placeholder="检验状态" size="small" clearable>
<el-option label="未检验" value="0"></el-option>
<el-option label="已检验" value="1"></el-option>
</el-select>
</el-col>
<el-col :span="10">
<el-date-picker
v-model="queryInfo.declarationTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
clearable>
</el-date-picker>
</el-col>
</el-row>
<el-row :gutter="10" class="toolbar">
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
查询
</el-button>
<el-button type="success" icon="el-icon-plus" size="small" @click="applyAdd()">新增</el-button>
<el-button type="success" icon="el-icon-plus" size="small" @click="analysis()">分析</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%" stripe>
<el-table-column prop="mailId" label="邮单" width="250"></el-table-column>
<el-table-column prop="itemName" label="物品名称"></el-table-column>
<el-table-column prop="mailType" label="邮件类型"></el-table-column>
<el-table-column prop="totalWeight" label="总重量"></el-table-column>
<el-table-column prop="itemCount" label="物品数量"></el-table-column>
<el-table-column prop="currency" label="货币"></el-table-column>
<el-table-column prop="itemValueCny" label="物品价值(CNY)"></el-table-column>
<el-table-column prop="taxAmountCny" label="税费(CNY)"></el-table-column>
<el-table-column prop="postageCny" label="邮费(CNY)"></el-table-column>
<el-table-column prop="receiverName" label="收件人姓名"></el-table-column>
<el-table-column prop="receiverAddress" label="收件人地址"></el-table-column>
<el-table-column prop="receiverPhone" label="收件人电话"></el-table-column>
<el-table-column prop="receiverIdType" label="收件人证件类型"></el-table-column>
<el-table-column prop="receiverIdNumber" label="收件人证件号码"></el-table-column>
<el-table-column prop="senderName" label="寄件人姓名"></el-table-column>
<el-table-column prop="senderAddress" label="寄件人地址"></el-table-column>
<el-table-column prop="senderPhone" label="寄件人电话"></el-table-column>
<el-table-column prop="senderIdType" label="寄件人证件类型"></el-table-column>
<el-table-column prop="senderIdNumber" label="寄件人证件号码"></el-table-column>
<el-table-column prop="returnStatus" label="退件状态"></el-table-column>
<el-table-column prop="inspectionStatus" label="检验状态"></el-table-column>
<el-table-column prop="specialMailFlag" label="特殊邮件标志"></el-table-column>
<el-table-column prop="declarationArea" label="申报区域"></el-table-column>
<el-table-column prop="declarationTime" label="申报时间"></el-table-column>
<el-table-column prop="declarerUnit" label="申报单位"></el-table-column>
<el-table-column prop="declarer" label="申报人"></el-table-column>
<el-table-column prop="remarks" label="备注"></el-table-column>
<el-table-column prop="createdAt" label="创建时间"></el-table-column>
<el-table-column prop="updatedAt" label="更新时间"></el-table-column>
<!-- Operation column -->
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="applyView(scope.row)">查看</el-button>
<!-- <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>-->
<!-- <el-button type="danger" size="mini" @click="applyDel(scope.$index, scope.row)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
<!-- Pagination -->
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="queryInfo.pageNum"
:page-size.sync="queryInfo.pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
<el-drawer
title="分析结果"
:visible.sync="drawerVisible"
direction="rtl"
:show-close="false"
>
<el-input
type="textarea"
:autosize="{ minRows: 12}"
placeholder="风险分析结果"
v-model="reskResult">
</el-input>
</el-drawer>
<!-- Dialog -->
<el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<!-- Form fields go here, for example: -->
<el-form-item prop="mailId" label="邮件号 (主键)">
<el-input v-model="formData.mailId"></el-input>
</el-form-item>
<!-- Add more form fields as needed -->
</el-form>
<span slot="footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="submitForm(dialogType)">确认</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {riskManagement, searchList, searchListAPI} from '@/api/mail_risk/api';
import {loginedUserInfo} from "@/api/user";
import jsutil from "@/common/js/util";
export default {
data() {
return {
queryInfo: {
mailId: undefined,
mailType: undefined,
receiverName: undefined,
receiverAddress: undefined,
receiverPhone: undefined,
receiverIdNumber: undefined,
returnStatus: undefined,
inspectionStatus: undefined,
declarationTimeRange: [],
declarer: undefined,
declarerUnit: undefined,
pageNum: 1,
pageSize: 10,
serialnumber: undefined,
opter: undefined
},
reskResult: "",
tableData: [],
total: 0,
drawerVisible:false,
dialogType: 'view',
showDialog: false,
formData: {},
rules: {
// Form validation rules go here, for example:
mailId: [
{ required: true, message: '请输入邮件号', trigger: 'blur' }
],
// Add more rules as needed
},
dialogStateMap: {
view: '查看',
edit: '编辑',
add: '新增'
}
};
},
methods: {
// 建立连接
createSseConnect(clientId){
if(window.EventSource){
const eventSource = new EventSource('/api/wlpt-mail-risk-analysis/InternationalMailInfo/anonymous/createSseEmitter?clientId='+clientId,);
// console.log(eventSource)
eventSource.onmessage = (event) =>{
// console.log("onmessage:"+clientId+": "+event.data)
this.reskResult += event.data + '\n';
};
eventSource.onopen = (event) =>{
this.$message.success('建立SSE链接，成功！')
};
eventSource.onerror = (event) =>{
// console.log("onerror :"+clientId+": "+event)
this.$message.error('建立SSE链接，失败！')
};
eventSource.close = (event) =>{
this.$message.success('关闭SSE链接，成功！')
};
}else{
this.$message.error('你的浏览器不支持SSE,建立SSE链接，失败！')
}
// console.log(" 测试 打印")
},
getList() {
let _this = this
//携带client ID,访问接口触发流程
searchListAPI(_this.queryInfo).then(response => {
if (response.data.code === '200') {
_this.tableData = response.data.data.list;
_this.$message.success('搜索完成！')
}else {
_this.$message.error('接口访问失败！')
}
})
},
applyAdd() {
this.dialogType = 'add';
this.showDialog = true;
this.formData = {};
},
analysis(){
let sse = {
clientId:this.queryInfo.serialnumber
}
this.drawerVisible = true;
riskManagement(this.queryInfo,sse)
this.reskResult = ''
},
applyEdit(row) {
this.dialogType = 'edit';
this.showDialog = true;
this.formData = Object.assign({}, row);
},
applyView(row) {
},
applyDel(index, row) {
// Implement delete functionality
},
submitForm(type) {
if (type === 'add') {
// addInternationalMailInfo(this.formData).then(response => {
// this.showDialog = false;
// this.getList(); // Refresh table data after adding.
// });
// } else if (type === 'edit') {
// updateInternationalMailInfo(this.formData).then(response => {
// this.showDialog = false;
// this.getList(); // Refresh table data after editing.
// });
}
},
handleSizeChange(val) {
// Update queryInfo.pageSize and fetch new data
},
handleCurrentChange(val) {
// Update queryInfo.pageNum and fetch new data
},
initUserInfo(){
let userinfo = loginedUserInfo();
if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
this.$message.error("获取用户信息出错")
}else{
this.queryInfo.opter = userinfo.username
}
},
serialNumber(){
let serialDate= new Date();
let serialCode = this.queryInfo.opter + serialDate.format("yyyyMMddhhmmssS")
return serialCode
},
drawerhandleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
},
mounted(){
this.initUserInfo()
this.queryInfo.serialnumber = this.serialNumber()
if (this.queryInfo.serialnumber){
this.createSseConnect(this.queryInfo.serialnumber)
}
}
};
</script>
... ...