feat(applicationManagement): 雇则风筛记录增加详情页面

- 新增风筛记录详情页面组件和路由
- 实现风筛记录列表页查看详情功能
- 添加 AJAX 请求工具函数
- 创建历史风险记录 HTML 页面
This commit is contained in:
陈昱达
2025-07-24 15:35:28 +08:00
parent 351bda18c5
commit fc3dffdd5a
6 changed files with 907 additions and 13 deletions

202
public/web/ajax.js Normal file
View File

@@ -0,0 +1,202 @@
function get(url, callback) {
var xhr
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Msxml2.XMLHTTP')
}
console.log(111)
xhr.open('GET', url, true)
xhr.send('')
xhr.dataType = 'json'
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (callback) {
callback(xhr.responseText)
}
}
}
}
function post(url, data, callback) {
var xhr
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Msxml2.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(data)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (callback) {
callback(xhr.responseText)
}
}
}
}
//promise
function promise_get(url) {
var promise = new Promise(function(success, error) {
//new一个promise进行函数
get(url, function(str) {
//get 路径
success(str) //吧进行时改成完成时
})
})
return promise
}
//josnp 服务器script
function jsonp(url) {
var script = document.createElement('script') //创建一个script
document.getElementsByTagName('head')[0].appendChild(script) //在页面上获取head在下面添加script
script.src = url //script的路径
}
//
// function get(url, callback){
// var xhr;
// if( window.XMLHttpRequest ){
// xhr = new XMLHttpRequest();
// }else{
// xhr = new ActiveXObject("Msxml2.XMLHTTP");
// }
// xhr.open("GET", url, true);
// xhr.send();
// xhr.onreadystatechange = function(){
// if( xhr.readyState==4 && xhr.status==200 ){
// if( callback ){
// callback( xhr.responseText );
// }
// }
// }
// }
//
// function post(url, data, callback){
// var xhr;
// if( window.XMLHttpRequest ){
// xhr = new XMLHttpRequest();
// }else{
// xhr = new ActiveXObject("Msxml2.XMLHTTP");
// }
// xhr.open("POST", url, true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// xhr.send(data);
// xhr.onreadystatechange = function(){
// if( xhr.readyState==4 && xhr.status==200 ){
// if( callback ){
// callback( xhr.responseText );
// }
// }
// }
// }
//
//
//promise
function promise_get(type, url) {
var promise = new Promise(function(success, error) {
//new一个promise进行函数
type(url, function(str) {
//get 路径
success(str) //吧进行时改成完成时
})
})
return promise
}
//
//
//
//josnp 服务器script
// function jsonp(url,callback){
// var script = document.createElement("script");//创建一个script
// document.getElementsByTagName("head")[0].appendChild(script);//在页面上获取head在下面添加script
// script.src = url;//script的路径
// console.log(url.data);
// callback
// }
// cookie
// 创建、修改、删除cookie
function setCookie(_name, _value, _date) {
// 设置的值无论是什么类型的数据都给他转为json对象
var json = {
value: _value
}
var str = JSON.stringify(json) // 将json对象转为字符串 '{"value":_value}'
str = encodeURIComponent(str) // 编码,解决中文乱码
// 设置cookie
if (_date) {
var dt = new Date()
dt.setDate(dt.getDate() + _date)
document.cookie =
_name + '=' + str + ';expires=' + dt.toGMTString() + ';path=/'
} else {
document.cookie = _name + '=' + str + ';path=/'
}
}
function addCookie(_name, _value, _date) {
setCookie(_name, _value, _date)
}
// 根据cookie名称删除该cookie
function removeCookie(_name) {
setCookie(_name, '', -1)
}
// 根据cookie名称获取该cookie的内容
function getCookie(_name) {
var str = document.cookie
// str = "b={"value":_value}; bc=1; ac=1; dc=1; c=1";
var arr = str.split('; ')
// arr = ["b={"value":_value}", "bc=1", "ac=1", "dc=1", "c=1"];
for (var i = 0, l = arr.length; i < l; i++) {
var tmp = arr[i] // "b={"value":_value}"
var col = tmp.split('=') // ["b", "{"value":_value}"]
// if ( "b" == "b" )
if (_name == col[0]) {
//如果找到了cookie则跳出函数并将其结果返回
var decode = decodeURIComponent(col[1]) //解码 "{"value":_value}"
var obj = JSON.parse(decode) //将字符串转换为json对象
return obj.value
}
}
return '' // 如果没有这一行如果找不到cookie则返回undefined
}
// 手动遍历对象,生成查询字符串
function objectToQueryString(obj) {
var str = ''
var first = true
for (var key in obj) {
// 确保是自身属性,不是从原型链继承的
if (obj.hasOwnProperty(key)) {
var value = obj[key] || '' // 防止 undefined
// 使用 encodeURIComponent 防止特殊字符
var part = encodeURIComponent(key) + '=' + encodeURIComponent(value)
if (first) {
str += '?' + part
first = false
} else {
str += '&' + part
}
}
}
return str
}
// 获取URL参数的工具函数
function getQueryParam(name) {
var url = window.location.href
var reg = new RegExp('[?&]' + name + '=([^&#]*)')
var results = reg.exec(url)
return results ? decodeURIComponent(results[1]) : null
}
//获取当前日期

View File

@@ -0,0 +1,688 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>历史风险记录</title>
<!-- JSON 兼容 IE8 -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
<![endif]-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background: #f0f4fa;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-size: 14px;
color: #333;
}
.main {
width: 100%;
height: 100%;
padding: 1%;
font-size: 0; /* 消除 inline-block 间隙 */
}
.left-nav {
width: 20%;
float: left;
height: 100%;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
background: #fff;
border-radius: 6px;
font-size: 16px; /* 恢复字体 */
border: 1px solid #ddd;
/* IE8兼容的阴影效果 */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.nav-header {
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #eee;
background: #f8f9fa;
color: #2c3e50;
border-radius: 6px 6px 0 0;
}
.link {
display: block;
margin: 15px auto;
text-align: center;
background: #fff;
text-decoration: none;
color: #3498db;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px 10px;
width: 85%;
transition: all 0.3s ease;
/* IE8兼容样式 */
*border: 1px solid #ccc;
}
.link:hover {
background: #f5f9ff;
border-color: #3498db;
color: #1a72c0;
/* IE8不支持:hover伪类但定义在这里以防在支持的浏览器中使用 */
}
.link.active {
background: #f0f4fa;
color: #3498db;
border-color: #3498db;
}
.right-container {
width: 79%;
height: 100%;
display: inline-block;
*display: inline;
*zoom: 1;
float: right;
background: #fff;
border-radius: 6px;
font-size: 16px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #ddd;
/* IE8兼容的阴影效果 */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.top-container,
#detail-container {
width: 100%;
background: #fff;
margin-bottom: 10px;
border: 1px solid #eee;
}
.top-container {
border-bottom: 1px solid #eee;
padding: 20px;
background: #fafbfc;
}
#detail-container {
padding: 20px;
}
#custom {
display: inline-block;
font-size: 22px;
font-weight: bold;
margin-right: 15px;
padding: 0 20px;
color: #2c3e50;
}
#time {
font-size: 14px;
margin-top: 8px;
color: #7f8c8d;
}
.custom-container {
display: block;
margin: 10px 0 20px 0;
}
#docs {
padding: 15px 20px;
font-size: 14px;
line-height: 1.6;
background: #2c3e50;
color: #ecf0f1;
border-radius: 4px;
margin: 15px 0;
}
#insured {
padding: 10px 0;
font-weight: bold;
color: #2c3e50;
border-bottom: 1px solid #eee;
}
.tree-item-header {
padding: 15px 20px;
background: #f0f4fa;
margin: 15px 0;
cursor: pointer;
border-radius: 4px;
border: 1px solid #d6dde6;
font-weight: bold;
color: #2c3e50;
transition: background 0.3s;
/* IE8兼容样式 */
*background: #e3e9f2;
}
.tree-item-header:hover {
background: #e3e9f2;
/* IE8不支持:hover伪类 */
}
.tree-item-header::before {
content: '▶';
margin-right: 10px;
transition: transform 0.3s;
/* IE8不支持::before伪元素和transform */
}
.tree-item-header.expanded::before {
content: '▼';
/* IE8不支持 */
}
.result-container-item {
padding: 0 20px;
margin-bottom: 20px;
}
.result-container-item-child-ul {
list-style: none;
padding-left: 20px;
}
.result-container-item-child-ul li {
font-size: 14px;
line-height: 1.8;
padding: 10px 15px;
margin: 8px 0;
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
/* IE8兼容样式 */
*border: 1px solid #ddd;
}
.result-container-item-child-ul li:hover {
background: #f8f9ff;
border-color: #3498db;
/* IE8不支持:hover伪类 */
}
.result-container-item-child-ul li:before {
content: '•';
color: #3498db;
font-weight: bold;
margin-right: 10px;
/* IE8不支持:before伪元素 */
}
/* 添加降级样式 */
.no-js-warning {
color: #e74c3c;
text-align: center;
padding: 30px;
font-weight: bold;
font-size: 16px;
background: #fadbd8;
border: 1px solid #f5b7b1;
border-radius: 4px;
margin: 20px;
}
/* 为不支持flex的浏览器提供备选方案 */
.custom-container > * {
display: inline-block;
vertical-align: top;
}
/* 添加加载状态提示 */
.loading {
text-align: center;
padding: 30px;
color: #7f8c8d;
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
/* IE8不支持动画 */
*border: 3px solid #3498db;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.section-title {
font-size: 18px;
font-weight: bold;
margin: 25px 0 15px 0;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
color: #2c3e50;
}
.empty-message {
text-align: center;
padding: 40px 20px;
color: #95a5a6;
}
.empty-message:before {
content: '';
font-size: 32px;
display: block;
margin-bottom: 10px;
/* IE8不支持:before */
}
</style>
</head>
<body>
<noscript>
<div class="no-js-warning">
您的浏览器不支持JavaScript或已禁用JavaScript请开启JavaScript以获得最佳体验。
</div>
</noscript>
<!-- 注意:两个 div 写在同一行,避免 inline-block 空隙 -->
<div class="main">
<div class="left-nav">
<div class="nav-header">历史风险记录</div>
<div class="nav-body" id="navBody">
<div id="loadingNav" class="loading">
<span class="loading-spinner"></span>
数据加载中...
</div>
</div>
</div>
<div class="right-container">
<div class="top-container">
<div class="custom-container">
<span id="custom">客户名称</span>
<span id="time">时间</span>
</div>
<h4 id="insured">投保人</h4>
<div id="docs">风险摘要信息将显示在这里</div>
</div>
<div style="overflow: auto;">
<div id="detail-container">
<div class="empty-message">请选择左侧记录查看详细信息</div>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
<script src="ajax.js"></script>
<script>
// 添加错误处理函数
function handleError(errorMsg, url, line) {
console.log('Error occurred: ' + errorMsg + ' at ' + url + ':' + line)
// 可以在这里添加用户友好的错误提示
return true // 阻止浏览器默认的错误处理
}
// 设置全局错误处理
window.onerror = handleError
var navList = [] //侧边列表
var navCheckRecord = {}
// objectToQueryString 函数必须定义
var ipConfig = {
ip: getQueryParam('ip') || 'http://192.168.8.58',
port: getQueryParam('port') || '7196'
}
var serviceUrl = {
queryResult: {
url: '/riskCheckRecordEx/queryResult',
method: 'get',
data: {}
},
queryDetail: {
url: '/riskCheckRecordEx/queryDetail',
method: 'get',
data: {}
}
}
function setServiceUrl(service, data, callback) {
var baseUrl = ipConfig.ip + ':' + ipConfig.port + service.url
var params = objectToQueryString(data)
var url = service.method === 'get' ? baseUrl + params : baseUrl
if (service.method === 'get') {
get(url, function(responseData) {
callback(responseData)
})
} else {
post(url, data, function(responseData) {
callback(responseData)
})
}
}
function getNavList() {
// 移除加载提示
var loadingElement = document.getElementById('loadingNav')
if (loadingElement) {
loadingElement.parentNode.removeChild(loadingElement)
}
// 从URL获取taCode
var taCode = getQueryParam('taCode') || 'C123504032025600027' // 默认值作为后备
var params = {
taCode: taCode
}
var doc = document.getElementById('navBody')
setServiceUrl(serviceUrl.queryResult, params, function(data) {
try {
var jsonData = JSON.parse(data)
navList = jsonData.content.content.resultList
navCheckRecord = jsonData.content.content.riskCheckRecord
console.log(jsonData)
var custom = document.getElementById('custom')
var docs = document.getElementById('docs')
custom.innerHTML = navCheckRecord.orgName || '未知客户'
var insured = document.getElementById('insured')
insured.innerHTML =
'被保险人名称:' + (navCheckRecord.insuredName || '未知')
if (!navList || navList.length === 0) {
doc.innerHTML = '<div class="empty-message">暂无历史记录</div>'
return
}
for (var i = 0; i < navList.length; i++) {
var navItem = navList[i]
var a = document.createElement('a')
a.href = '#'
a.className = 'link'
// 为不支持某些CSS属性的浏览器添加额外样式
a.style.border = '1px solid #ddd'
a.style.display = 'block'
a.innerHTML =
navItem.taSubmitDate +
'<br>' +
(navItem.hasRisk === 1
? '<span style="color:#e74c3c">【有风险】</span>'
: '<span style="color:#27ae60">【无风险】</span>')
a.onclick = (function(index, item) {
return function() {
// ✅ 阻止默认跳转IE8 兼容)
if (window.event) {
window.event.returnValue = false // IE8
}
// 防止冒泡(可选)
if (window.event) window.event.cancelBubble = true
console.log(index)
// 移除所有已存在的active类
var links = document.querySelectorAll
? document.querySelectorAll('.link')
: document.getElementsByTagName('a')
for (var j = 0; j < links.length; j++) {
if (links[j].className.indexOf('link') !== -1) {
links[j].className = links[j].className.replace(
' active',
''
)
}
}
// 为当前点击的链接添加active类
this.className += ' active'
// 确保字段存在且是字符串
if (
navList[index].checkSummary &&
typeof navList[index].checkSummary === 'string'
) {
var text = navList[index].checkSummary
text = text.replace(/\n\n/g, '</p><p>') // 段落
text = text.replace(/\n/g, '<br/>') // 剩余单换行
text = '<p>' + text + '</p>'
text = text.replace(/<p><\/p>/g, '<p>&nbsp;</p>') // 防止空段落出错
navList[index].checkSummary = text
} else {
navList[index].checkSummary = '<p>暂无风险摘要信息</p>' // 防止报错
}
console.log(navList[index].checkSummary)
docs.innerHTML = navList[index].checkSummary
getDetail(navList[index])
return false // 再次确保不跳转
}
})(i, navItem) // 传入当前 index 和 item
doc.appendChild(a)
}
} catch (e) {
console.error('解析数据失败', e)
doc.innerHTML =
'<div style="color:#e74c3c;padding:20px;text-align:center;">加载数据失败,请稍后重试</div>'
}
})
}
// 添加降级处理:如果在一定时间内未加载成功,则显示错误信息
setTimeout(function() {
var loadingElement = document.getElementById('loadingNav')
if (loadingElement) {
loadingElement.innerHTML = '加载超时,请检查网络连接或稍后重试'
loadingElement.style.color = '#e74c3c'
}
}, 10000) // 10秒后超时
getNavList()
function getDetail(navItem) {
// 从URL获取taCode
var taCode = getQueryParam('taCode') || navCheckRecord.taCode
// 🔹 调用详情接口(假设用 recordId 查询)
serviceUrl.queryDetail.data = {
resultId: navItem.id,
recordId: navItem.recordId,
taCode: taCode
}
var time = document.getElementById('time')
time.innerHTML = ''
// 添加加载提示
var resultDom = document.getElementById('detail-container')
resultDom.innerHTML =
'<div class="loading"><span class="loading-spinner"></span>正在加载详情...</div>'
setServiceUrl(
serviceUrl.queryDetail,
serviceUrl.queryDetail.data,
function(detailData) {
try {
var detailJson = JSON.parse(detailData)
var result = detailJson.content.content.ruleTypeList
var fileStorageInfoList =
detailJson.content.content.fileBizTypeDictList
time.innerHTML =
(navCheckRecord.taLatestSubmitDate || '未知时间') +
' 共【' +
(result ? result.length : 0) +
'】条风险提示'
var arrs = []
if (result && result.length > 0) {
result[0].tabName = '风险筛查结果'
for (var i = 0; i < result.length; i++) {
arrs.push(result[i])
}
}
if (fileStorageInfoList && fileStorageInfoList.length > 0) {
fileStorageInfoList[0].tabName = '影像件'
for (var i = 0; i < fileStorageInfoList.length; i++) {
arrs.push(fileStorageInfoList[i])
}
}
if (arrs.length === 0) {
resultDom.innerHTML =
'<div class="empty-message">暂无详细信息</div>'
return
}
resultDom.innerHTML = ''
// 开始生成页面
for (var ind = 0; ind < arrs.length; ind++) {
var resultDetail = arrs[ind]
// 设置标题
var docH4 = document.createElement('h4')
if (resultDetail.tabName) {
docH4.innerHTML = resultDetail.tabName
docH4.className = 'section-title'
resultDom.appendChild(docH4)
}
var treeItem = document.createElement('div')
treeItem.className = 'tree-item-header'
// 添加降级样式
treeItem.style.background = '#f0f4fa'
treeItem.style.cursor = 'pointer'
treeItem.style.border = '1px solid #d6dde6'
console.log(resultDetail, 'resultDetail')
treeItem.innerHTML = resultDetail.typeName
? resultDetail.typeName
: resultDetail.dictLabel
resultDom.appendChild(treeItem)
// 设置二级标题子元素
var resultContainer = document.createElement('div')
resultContainer.className = 'result-container-item'
resultContainer.id = 'result-container-' + ind
// 默认隐藏内容,点击标题展开
resultContainer.style.display = 'none'
var childItemUl = document.createElement('ul')
childItemUl.className = 'result-container-item-child-ul'
if (resultDetail.children && resultDetail.children.length > 0) {
for (
var childIndex = 0;
childIndex < resultDetail.children.length;
childIndex++
) {
var child = resultDetail.children[childIndex]
var childItem = document.createElement('li')
childItem.className = 'result-container-item-child'
childItem.innerHTML =
(child.ruleName ? child.ruleName : child.fileName) ||
'未知项目'
childItem.style.cursor = 'pointer'
// 为不支持某些CSS属性的浏览器添加兼容样式
childItem.style.listStyle = 'none'
childItem.style.marginLeft = '0px'
// 为IE8添加特殊样式
childItem.style.border = '1px solid #eee'
childItem.onclick = (function(index, item) {
return function() {
if (item.filePath) {
window.open(item.filePath)
} else {
alert('该文件暂无链接')
}
}
})(childIndex, child)
childItemUl.appendChild(childItem)
resultContainer.appendChild(childItemUl)
}
} else {
var emptyLi = document.createElement('li')
emptyLi.innerHTML = '暂无数据'
emptyLi.style.color = '#95a5a6'
emptyLi.style.fontStyle = 'italic'
childItemUl.appendChild(emptyLi)
resultContainer.appendChild(childItemUl)
}
resultDom.appendChild(resultContainer)
// 绑定点击事件展开/收起内容
treeItem.onclick = (function(index, item) {
return function() {
console.log(index)
var resultContainer = document.getElementById(
'result-container-' + index
)
if (resultContainer.style.display === 'none') {
resultContainer.style.display = 'block'
this.className = 'tree-item-header expanded'
} else {
resultContainer.style.display = 'none'
this.className = 'tree-item-header'
}
}
})(ind, resultDetail)
resultDom.style.minHeight = 30 * arrs.length + 'px'
resultDom.style.overflowY = 'auto'
}
} catch (e) {
console.error('Detail parse error:', e)
resultDom.innerHTML =
'<div style="color:#e74c3c;padding:20px;text-align:center;">加载详情失败,请稍后重试</div>'
}
}
)
}
</script>
</body>
</html>

View File

@@ -30,9 +30,5 @@ export function queryResultDetail(params) {
// 返回result.html内容
export function getResultHtml(params) {
return request({
url: getUrl('/result.html'),
method: 'get',
params
})
}
return getUrl(`/result.html?taCode=${params.taCode}`)
}

View File

@@ -21,9 +21,17 @@ const applicationManagementRouter = [
component: () =>
import('@/views/applicationManagement/employRecord/index.vue'),
meta: { title: '雇则风筛记录', icon: 'el-icon-document' }
},
{
path: 'employRecord/detail',
name: 'EmployRecordDetail',
component: () =>
import('@/views/applicationManagement/employRecord/detail.vue'),
meta: { title: '风筛记录详情' },
hidden: true // 隐藏在菜单中显示
}
]
}
]
export default applicationManagementRouter
export default applicationManagementRouter

View File

@@ -164,7 +164,6 @@ export default {
getList() {
this.loading = true
const params = Object.assign({}, this.queryParams)
// 处理时间范围参数
if (params.submitTime && params.submitTime.length === 2) {
params.submitTimeStart = params.submitTime[0]
@@ -202,7 +201,12 @@ export default {
},
// 查看详情按钮点击事件
handleView(row) {
this.$message.info('查看详情功能待实现')
// 打开新页面展示详情使用iframe方式
this.$router.push({
path: '/applicationManagement/employRecord/detail',
query: { taCode: row.taCode }
})
// window.open(routeData.href, '_blank')
},
// 分页大小改变事件
handleSizeChange(val) {

View File

@@ -386,16 +386,12 @@ export default {
this.queryParams.page = 1
// 创建查询参数的副本
const queryParams = Object.assign({}, this.queryParams)
console.log(queryParams, this.ruleTypeList)
// 如果ruleType是中文转换为编码值
if (queryParams.ruleType) {
const ruleTypeItem = this.ruleTypeList.find(
item => item.typeCode === queryParams.ruleType
)
console.log(ruleTypeItem)
if (ruleTypeItem) {
console.log(ruleTypeItem)
queryParams.ruleType = ruleTypeItem.typeName
}
}