root/fengtianDL_lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 任务与对接记录的前端优化

Browse Source
This commit is contained in:
liyongde
2024-08-21 13:18:46 +08:00
parent 83984237d5
commit 908401ec8d
2 changed files with 117 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
nladmin-ui/src/views/wms/ext/record/index.vue
View File

@@ -91,7 +91,29 @@
style="width: 100%;"
@selection-change="crud.selectionChangeHandler"
>
<el-table-column type="selection" width="55" />
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column type="expand">
<template slot-scope="scope">
<el-row class="flex-row" :gutter="10">
<el-col :span="12" class="flex-col">
<el-card class="flex-card" :body-style="{padding:'0', margin:'0'}">
<div slot="header" style="margin: 0; padding: 0">
<el-tag type="info">请求报文</el-tag>
</div>
<pre class="json-pre">{{ formatJson(scope.row.request_param) }}</pre>
</el-card>
</el-col>
<el-col :span="12" class="flex-col">
<el-card class="flex-card" :body-style="{padding:'0', margin:'0'}">
<div slot="header" style="margin: 0; padding: 0">
<el-tag type="success">响应结果</el-tag>
</div>
<pre class="json-pre">{{ formatJson(scope.row.response_param) }}</pre>
</el-card>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column
prop="interact_name"
:label="$t('Record.table.interact_name')"
@@ -99,18 +121,18 @@
/>
<el-table-column prop="code" :label="$t('Record.table.code')" :min-width="flexWidth('code',crud.data,$t('Record.table.code'))" />
<el-table-column prop="message" :label="$t('Record.table.message')" :min-width="flexWidth('message',crud.data,$t('Record.table.message'))" />
<el-table-column
prop="request_param"
:label="$t('Record.table.request_param')"
show-overflow-tooltip
:min-width="200"
/>
<el-table-column
prop="response_param"
:label="$t('Record.table.response_param')"
show-overflow-tooltip
:min-width="200"
/>
<!-- <el-table-column-->
<!-- prop="request_param"-->
<!-- :label="$t('Record.table.request_param')"-->
<!-- show-overflow-tooltip-->
<!-- :min-width="200"-->
<!-- />-->
<!-- <el-table-column-->
<!-- prop="response_param"-->
<!-- :label="$t('Record.table.response_param')"-->
<!-- show-overflow-tooltip-->
<!-- :min-width="200"-->
<!-- />-->
<el-table-column
prop="record_time"
:label="$t('Record.table.record_time')"
@@ -126,14 +148,14 @@
{{ scope.row.is_success ? $t('common.Success') : $t('common.Fail') }}
</template>
</el-table-column>
<el-table-column v-permission="[]" :label="$t('common.Operate')" width="120px" align="center" fixed="right">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
<!-- <el-table-column v-permission="[]" :label="$t('common.Operate')" width="120px" align="center" fixed="right">-->
<!-- <template slot-scope="scope">-->
<!-- <udOperation-->
<!-- :data="scope.row"-->
<!-- :permission="permission"-->
<!-- />-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<!--分页组件-->
<pagination />
@@ -176,7 +198,7 @@ export default {
optShow: {
add: false,
edit: false,
del: true,
del: false,
download: false
}
})
@@ -221,11 +243,49 @@ export default {
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
formatJson(jsonString) {
try {
return JSON.stringify(JSON.parse(jsonString), null, 2)
} catch (e) {
return jsonString // 如果jsonString解析失败，直接返回原始字符串
}
}
}
}
</script>
<style scoped>
.custom-card {
border-width: 1px; /* 边框厚度 */
border-color: #dcdcdc; /* 边框颜色 */
box-shadow: none; /* 移除阴影 */
margin: 0 0; /* 缩小外边距 */
}
.json-pre {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
max-height: 300px;
overflow-y: auto;
}
.flex-row {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-card {
flex: 1; /* 使卡片自动填充父容器 */
border-width: 1px;
border-color: #dcdcdc;
border-radius: 4px;
box-shadow: none;
padding: 5px;
margin: 5px 0;
}
</style>

49
nladmin-ui/src/views/wms/sch/task/index.vue
View File

@@ -178,10 +178,15 @@
style="width: 100%;"
@selection-change="crud.selectionChangeHandler"
>
<el-table-column
type="selection"
width="55"
/>
<!-- <el-table-column-->
<!-- type="selection"-->
<!-- width="55"-->
<!-- />-->
<el-table-column type="expand">
<template slot-scope="scope">
<pre class="json-pre">{{ formatJson(scope.row.request_param) }}</pre>
</template>
</el-table-column>
<el-table-column
prop="task_code"
:label="$t('Task.table.code')"
@@ -326,16 +331,16 @@
:label="$t('Task.table.acs_trace_id')"
:min-width="flexWidth('acs_trace_id',crud.data,$t('Task.table.acs_trace_id'))"
/>
<el-table-column
prop="request_param"
:label="$t('Task.table.request_param')"
:min-width="flexWidth('request_param',crud.data,$t('Task.table.request_param'))"
/>
<el-table-column
prop="response_param"
:label="$t('Task.table.response_param')"
:min-width="flexWidth('response_param',crud.data,$t('Task.table.response_param'))"
/>
<!-- <el-table-column-->
<!-- prop="request_param"-->
<!-- :label="$t('Task.table.request_param')"-->
<!-- :min-width="flexWidth('request_param',crud.data,$t('Task.table.request_param'))"-->
<!-- />-->
<!-- <el-table-column-->
<!-- prop="response_param"-->
<!-- :label="$t('Task.table.response_param')"-->
<!-- :min-width="flexWidth('response_param',crud.data,$t('Task.table.response_param'))"-->
<!-- />-->
<el-table-column
prop="workshop_code"
:label="$t('Task.table.workshop_code')"
@@ -521,11 +526,27 @@ export default {
}).catch(err => {
console.log(err.response.data.message)
})
},
formatJson(jsonString) {
try {
return JSON.stringify(JSON.parse(jsonString), null, 2)
} catch (e) {
return jsonString // 如果jsonString解析失败，直接返回原始字符串
}
}
}
}
</script>
<style scoped>
.json-pre {
white-space: pre-wrap; /* 保留换行和空格 */
font-family: monospace; /* 使用等宽字体 */
background-color: #f5f5f5; /* 背景色 */
padding: 10px; /* 内边距 */
border-radius: 4px; /* 圆角 */
border: 1px solid #e0e0e0; /* 边框 */
}
</style>