详情页bug以及后台日志

This commit is contained in:
851673013@qq.com 2022-07-11 17:50:01 +08:00
parent b8ddfe5938
commit dcf90b081e
5 changed files with 872 additions and 364 deletions

View File

@ -0,0 +1,301 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__log-operation">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-select
v-model="dataForm.status"
:placeholder="$t('logOperation.status')"
clearable
>
<el-option
:label="$t('logOperation.status0')"
:value="0"
></el-option>
<el-option
:label="$t('logOperation.status1')"
:value="1"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input
v-model="dataForm.creatorName"
placeholder="请输入操作人"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-input
v-model="dataForm.operation"
placeholder="请输入操作名称"
></el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="operationType"
placeholder="请选择操作类型"
clearable
>
<el-option
label="增加"
value="/renren-admin/resource%/insert"
></el-option>
<el-option
label="更新"
value="/renren-admin/resource%/update"
></el-option>
<el-option
label="删除"
value="/renren-admin/resource%/delete"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button @click="resetFunction()"> 重置 </el-button>
</el-form-item>
<el-form-item>
<el-button type="info" @click="exportHandle()">{{
$t('export')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@sort-change="dataListSortChangeHandle"
style="width: 100%"
:row-class-name="rowClassName"
>
<el-table-column
label="序号"
align="center"
prop="xh"
width="50"
></el-table-column>
<el-table-column
prop="operation"
label="操作名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="creatorName"
label="操作人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="requestUriCharacters"
label="操作类型"
header-align="center"
width="100"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="operationTable"
label="操作数据表"
header-align="center"
align="center"
width="120"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="status"
label="操作结果"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
$t('logOperation.status0')
}}</el-tag>
<el-tag v-else size="small" type="success">{{
$t('logOperation.status1')
}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="createDate"
label="操作时间"
sortable="custom"
header-align="center"
align="center"
width="180"
></el-table-column>
<el-table-column
prop="requestMethod"
label="操作方法"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="requestParams"
label="传递参数"
header-align="center"
align="center"
width="120"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="resultData"
label="返回结果"
header-align="center"
width="150"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/log/operation/page',
getDataListIsPage: true,
exportURL: '/sys/log/operation/export'
},
dataForm: {
status: '',
creatorName: '',
startDate: '',
endDate: '',
operation: '',
operationType: 'all'
},
operationType: '',
value1: ''
}
},
watch: {
value1 (val) {
val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
this.dataForm.startDate = val[0]
val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
this.dataForm.endDate = val[1]
},
dataList (val) {
if (val[0].requestUri) {
this.requestUriFunction()
}
},
operationType (val) {
if (val !== 'all') {
this.dataForm.operationType = val
}
}
},
methods: {
//
resetFunction () {
const params = {
status: '',
creatorName: '',
startDate: '',
endDate: '',
operation: '',
operationType: 'all'
}
this.value1 = '' //
this.operationType = '' //
this.page = 1
this.limit = 10
this.dataForm = params
this.getDataList() //
},
//
rowClassName ({ row, rowIndex }) {
row.xh = rowIndex + 1 + (this.page - 1) * this.limit
},
//
requestUriFunction () {
this.dataList.map((item, index) => {
const name = item.requestUri.substring(
item.requestUri.lastIndexOf('/') + 1
)
switch (name) {
case 'delete':
this.dataList[index].requestUriCharacters = '删除'
break
case 'update':
this.dataList[index].requestUriCharacters = '更新'
break
case 'insert':
this.dataList[index].requestUriCharacters = '增加'
break
}
})
},
//
handleTime (time, format) {
if (time == null || time == undefined || time == '') {
return ''
}
var t = new Date(time)
var tf = function (i) {
return (i < 10 ? '0' : '') + i
}
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear())
break
case 'MM':
return tf(t.getMonth() + 1)
break
case 'mm':
return tf(t.getMinutes())
break
case 'dd':
return tf(t.getDate())
break
case 'HH':
return tf(t.getHours())
break
case 'ss':
return tf(t.getSeconds())
break
}
})
}
},
mounted () {
this.$nextTick(() => {})
}
}
</script>

View File

@ -1,40 +1,164 @@
<template> <template>
<el-card shadow="never" class="aui-card--fill"> <el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__log-operation"> <div class="mod-sys__log-operation">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item> <el-form-item>
<el-select v-model="dataForm.status" :placeholder="$t('logOperation.status')" clearable> <el-select
<el-option :label="$t('logOperation.status0')" :value="0"></el-option> v-model="dataForm.status"
<el-option :label="$t('logOperation.status1')" :value="1"></el-option> :placeholder="$t('logOperation.status')"
clearable
>
<el-option
:label="$t('logOperation.status0')"
:value="0"
></el-option>
<el-option
:label="$t('logOperation.status1')"
:value="1"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item>
<el-input
v-model="dataForm.creatorName"
placeholder="请输入操作人"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-input
v-model="dataForm.operation"
placeholder="请输入操作名称"
></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button> <el-button @click="resetFunction()"> 重置 </el-button>
</el-form-item>
<el-form-item>
<el-button type="info" @click="exportHandle()">{{
$t('export')
}}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;"> <el-table
<el-table-column prop="creatorName" :label="$t('logOperation.creatorName')" header-align="center" align="center"></el-table-column> v-loading="dataListLoading"
<el-table-column prop="operation" :label="$t('logOperation.operation')" header-align="center" align="center"></el-table-column> :data="dataList"
<el-table-column prop="requestUri" :label="$t('logOperation.requestUri')" header-align="center" align="center"></el-table-column> border
<el-table-column prop="requestMethod" :label="$t('logOperation.requestMethod')" header-align="center" align="center"></el-table-column> @sort-change="dataListSortChangeHandle"
<el-table-column prop="requestParams" :label="$t('logOperation.requestParams')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column> style="width: 100%"
<el-table-column prop="requestTime" :label="$t('logOperation.requestTime')" sortable="custom" header-align="center" align="center"> :row-class-name="rowClassName"
>
<el-table-column
label="序号"
align="center"
prop="xh"
width="50"
></el-table-column>
<el-table-column
prop="operation"
label="操作名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="creatorName"
label="操作人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="createDate"
label="操作时间"
sortable="custom"
header-align="center"
align="center"
width="180"
></el-table-column>
<el-table-column
prop="ip"
label="客户端IP"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="requestUri"
label="请求地址"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="requestMethod"
:label="$t('logOperation.requestMethod')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="requestParams"
:label="$t('logOperation.requestParams')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="resultData"
label="返回结果"
header-align="center"
width="150"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="requestTime"
:label="$t('logOperation.requestTime')"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ `${scope.row.requestTime}ms` }} {{ `${scope.row.requestTime}ms` }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" :label="$t('logOperation.status')" sortable="custom" header-align="center" align="center"> <el-table-column
prop="status"
:label="$t('logOperation.status')"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logOperation.status0') }}</el-tag> <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
<el-tag v-else size="small" type="success">{{ $t('logOperation.status1') }}</el-tag> $t('logOperation.status0')
}}</el-tag>
<el-tag v-else size="small" type="success">{{
$t('logOperation.status1')
}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="ip" :label="$t('logOperation.ip')" header-align="center" align="center"></el-table-column> <!-- <el-table-column
<el-table-column prop="userAgent" :label="$t('logOperation.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column> prop="userAgent"
<el-table-column prop="createDate" :label="$t('logOperation.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column> :label="$t('logOperation.userAgent')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column> -->
</el-table> </el-table>
<el-pagination <el-pagination
:current-page="page" :current-page="page"
@ -43,7 +167,8 @@
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle" @size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"> @current-change="pageCurrentChangeHandle"
>
</el-pagination> </el-pagination>
</div> </div>
</el-card> </el-card>
@ -61,8 +186,76 @@ export default {
exportURL: '/sys/log/operation/export' exportURL: '/sys/log/operation/export'
}, },
dataForm: { dataForm: {
status: '' status: '',
creatorName: '',
startDate: '',
endDate: '',
operation: ''
},
value1: ''
} }
},
watch: {
value1 (val) {
val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
this.dataForm.startDate = val[0]
val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
this.dataForm.endDate = val[1]
}
},
methods: {
//
resetFunction () {
const params = {
status: '',
creatorName: '',
startDate: '',
endDate: '',
operation: '',
operationType: 'all'
}
this.value1 = '' //
this.operationType = '' //
this.page = 1
this.limit = 10
this.dataForm = params
this.getDataList() //
},
//
rowClassName ({ row, rowIndex }) {
row.xh = rowIndex + 1 + (this.page - 1) * this.limit
},
//
handleTime (time, format) {
if (time == null || time == undefined || time == '') {
return ''
}
var t = new Date(time)
var tf = function (i) {
return (i < 10 ? '0' : '') + i
}
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear())
break
case 'MM':
return tf(t.getMonth() + 1)
break
case 'mm':
return tf(t.getMinutes())
break
case 'dd':
return tf(t.getDate())
break
case 'HH':
return tf(t.getHours())
break
case 'ss':
return tf(t.getSeconds())
break
}
})
} }
} }
} }

View File

@ -144,11 +144,11 @@
dataFrom.value.content[1].childrenContent.push(itemContent) dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
} }
// let obj = { let obj = {
// attrType: '访', attrType: '访问地址',
// attrValue: props.dataList.link || '------', attrValue: props.dataList.link || '------',
// } }
// dataFrom.value.content[0].childrenContent.push(obj) dataFrom.value.content[0].childrenContent.push(obj)
} }
} }
) )

View File

@ -8,7 +8,12 @@
<template> <template>
<div class="application-navigation" v-if="navList.length > 0"> <div class="application-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)"> <div
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -16,14 +21,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { queryPartAppByKeyId } from '@/api/home' import { queryPartAppByKeyId } from '@/api/home'
// //
const router = useRouter() const router = useRouter()
const keyId = router.currentRoute.value.query.id const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{ {
name: '应用展示', name: '应用展示',
key: 'application-presentation', key: 'application-presentation',
@ -48,16 +53,16 @@ const navList = ref([
name: '常见问题', name: '常见问题',
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
}) })
const select = ref('application-associated-ability') const select = ref('application-associated-ability')
const list = ref([]) const list = ref([])
// id // id
if (keyId) { if (keyId) {
let params = { let params = {
keyId: keyId, keyId: keyId,
type: '组件服务', type: '组件服务',
@ -74,12 +79,12 @@ if (keyId) {
list.value.unshift('关联组件') list.value.unshift('关联组件')
} }
}) })
} }
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
} }
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if ( if (
@ -110,14 +115,14 @@ if (props.dataList.infoList) {
} }
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( watch(
() => props.selectNow, () => props.selectNow,
(newValue) => { (newValue) => {
select.value = newValue select.value = newValue
} }
) )
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -154,10 +159,10 @@ watch(
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-navigation { .application-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; line-height: 0.8rem;
@ -190,5 +195,5 @@ watch(
background: #526aff; background: #526aff;
} }
} }
} }
</style> </style>

View File

@ -2,10 +2,17 @@
<template> <template>
<div class="application-deployment-and-security"> <div class="application-deployment-and-security">
<div class="title"> <div class="title">
<DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle> <DetalsTitle
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content"> <div class="content">
<div v-for="(item, index) in dataFrom.content" :key="index" class="content-card"> <div
v-for="(item, index) in dataFrom.content"
:key="index"
class="content-card"
>
<div class="card-title">{{ item.childrenTitle }}</div> <div class="card-title">{{ item.childrenTitle }}</div>
<div class="card-content"> <div class="card-content">
<div v-for="carditem in item.childrenContent" :key="carditem"> <div v-for="carditem in item.childrenContent" :key="carditem">
@ -24,9 +31,9 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
title: '归属部门与服务商', title: '归属部门与服务商',
englishTitle: 'DEPARTMENT&ERVICE', englishTitle: 'DEPARTMENT&ERVICE',
content: [ content: [
@ -39,13 +46,13 @@ let dataFrom = ref({
childrenContent: [], childrenContent: [],
}, },
], ],
}) })
console.log(dataFrom.value) console.log(dataFrom.value)
// //
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = { let obj = {
attrType: '部门名称', attrType: '部门名称',
attrValue: props.dataList.deptName || '------', attrValue: props.dataList.deptName || '------',
@ -95,8 +102,8 @@ if (props.dataList.infoList) {
}) })
console.log('obj', dataFrom.value) console.log('obj', dataFrom.value)
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -161,11 +168,11 @@ watch(
console.log('obj', dataFrom.value) console.log('obj', dataFrom.value)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-deployment-and-security { .application-deployment-and-security {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -184,9 +191,11 @@ watch(
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: linear-gradient(to right, background: linear-gradient(
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4)); rgba(148, 163, 252, 0.4)
);
padding: 0 0.3rem; padding: 0 0.3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -211,11 +220,11 @@ watch(
div { div {
max-width: 2.8rem; max-width: 2.8rem;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
display: -webkit-box; // display: -webkit-box;
-webkit-box-orient: vertical; // -webkit-box-orient: vertical;
-webkit-line-clamp: 1; // -webkit-line-clamp: 1;
} }
} }
@ -225,5 +234,5 @@ watch(
} }
} }
} }
} }
</style> </style>