详情页bug以及后台日志
This commit is contained in:
851673013@qq.com
parent
b8ddfe5938
commit
dcf90b081e
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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,179 +21,179 @@
|
||||||
</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',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '功能介绍',
|
name: '功能介绍',
|
||||||
key: 'function-introduction',
|
key: 'function-introduction',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '使用能力',
|
name: '使用能力',
|
||||||
key: 'ability-to-use',
|
key: 'ability-to-use',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '部署与安全',
|
name: '部署与安全',
|
||||||
key: 'deployment-and-security',
|
key: 'deployment-and-security',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '归属部门与服务商',
|
name: '归属部门与服务商',
|
||||||
key: 'department-and-service-provider',
|
key: 'department-and-service-provider',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
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 list = ref([])
|
|
||||||
// 根据能力id查询是否存在关联应用
|
|
||||||
if (keyId) {
|
|
||||||
let params = {
|
|
||||||
keyId: keyId,
|
|
||||||
type: '组件服务',
|
|
||||||
}
|
|
||||||
queryPartAppByKeyId(params).then((res) => {
|
|
||||||
console.log('ressssssss', res)
|
|
||||||
if (res.data.data.length != 0) {
|
|
||||||
// 存在关联应用时在导航栏加入关联应用
|
|
||||||
navList.value.unshift({
|
|
||||||
name: '关联组件',
|
|
||||||
key: 'application-associated-ability',
|
|
||||||
show: true,
|
|
||||||
})
|
|
||||||
list.value.unshift('关联组件')
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
const select = ref('application-associated-ability')
|
||||||
const selectNav = (key) => {
|
const list = ref([])
|
||||||
select.value = key
|
// 根据能力id查询是否存在关联应用
|
||||||
mybus.emit('flyToView', select.value)
|
if (keyId) {
|
||||||
}
|
let params = {
|
||||||
if (props.dataList.infoList) {
|
keyId: keyId,
|
||||||
list.value = []
|
type: '组件服务',
|
||||||
props.dataList.infoList.map((item) => {
|
|
||||||
if (
|
|
||||||
item.attrType === '功能介绍' ||
|
|
||||||
item.attrType === '常见问题' ||
|
|
||||||
item.attrType === '使用能力' ||
|
|
||||||
item.attrType === '关联组件'
|
|
||||||
) {
|
|
||||||
list.value.push(item.attrType)
|
|
||||||
} else if (item.attrType === '应用展示视频') {
|
|
||||||
list.value.push('应用展示')
|
|
||||||
}
|
}
|
||||||
})
|
queryPartAppByKeyId(params).then((res) => {
|
||||||
list.value.unshift('关联组件')
|
console.log('ressssssss', res)
|
||||||
list.value.push('部署与安全')
|
if (res.data.data.length != 0) {
|
||||||
list.value.push('归属部门与服务商')
|
// 存在关联应用时在导航栏加入关联应用
|
||||||
navList.value.forEach((item) => {
|
navList.value.unshift({
|
||||||
console.log(item)
|
name: '关联组件',
|
||||||
if (list.value.indexOf(item.name) > -1) {
|
key: 'application-associated-ability',
|
||||||
item.show = true
|
show: true,
|
||||||
}
|
})
|
||||||
})
|
list.value.unshift('关联组件')
|
||||||
if (list.value.length > 0) {
|
|
||||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
|
||||||
select.value = navList.value.filter(
|
|
||||||
(item) => (item.name === '关联组件') | (item.name === list.value[0])
|
|
||||||
)[0].key
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log('11111111111111111111111111', list.value, navList.value)
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
() => props.selectNow,
|
|
||||||
(newValue) => {
|
|
||||||
select.value = newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => props.dataList,
|
|
||||||
(val) => {
|
|
||||||
if (val) {
|
|
||||||
list.value = []
|
|
||||||
val.infoList.map((item) => {
|
|
||||||
if (
|
|
||||||
item.attrType === '功能介绍' ||
|
|
||||||
item.attrType === '常见问题' ||
|
|
||||||
item.attrType === '使用能力' ||
|
|
||||||
item.attrType === '关联组件'
|
|
||||||
) {
|
|
||||||
list.value.push(item.attrType)
|
|
||||||
} else if (item.attrType === '应用展示视频') {
|
|
||||||
list.value.push('应用展示')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
list.value.unshift('关联组件')
|
|
||||||
list.value.push('部署与安全')
|
|
||||||
list.value.push('归属部门与服务商')
|
|
||||||
navList.value.forEach((item) => {
|
|
||||||
console.log(item)
|
|
||||||
if (list.value.indexOf(item.name) > -1) {
|
|
||||||
item.show = true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (list.value.length > 0) {
|
|
||||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
|
||||||
select.value = navList.value.filter(
|
|
||||||
(item) =>
|
|
||||||
(item.name === '关联组件') | (item.name === list.value[0])
|
|
||||||
)[0].key
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
console.log('11111111111111111111111111', list.value, navList.value)
|
})
|
||||||
}
|
|
||||||
}
|
}
|
||||||
)
|
const selectNav = (key) => {
|
||||||
|
select.value = key
|
||||||
|
mybus.emit('flyToView', select.value)
|
||||||
|
}
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
list.value = []
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
if (
|
||||||
|
item.attrType === '功能介绍' ||
|
||||||
|
item.attrType === '常见问题' ||
|
||||||
|
item.attrType === '使用能力' ||
|
||||||
|
item.attrType === '关联组件'
|
||||||
|
) {
|
||||||
|
list.value.push(item.attrType)
|
||||||
|
} else if (item.attrType === '应用展示视频') {
|
||||||
|
list.value.push('应用展示')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.value.unshift('关联组件')
|
||||||
|
list.value.push('部署与安全')
|
||||||
|
list.value.push('归属部门与服务商')
|
||||||
|
navList.value.forEach((item) => {
|
||||||
|
console.log(item)
|
||||||
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
item.show = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (list.value.length > 0) {
|
||||||
|
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||||
|
select.value = navList.value.filter(
|
||||||
|
(item) => (item.name === '关联组件') | (item.name === list.value[0])
|
||||||
|
)[0].key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('11111111111111111111111111', list.value, navList.value)
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.selectNow,
|
||||||
|
(newValue) => {
|
||||||
|
select.value = newValue
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
list.value = []
|
||||||
|
val.infoList.map((item) => {
|
||||||
|
if (
|
||||||
|
item.attrType === '功能介绍' ||
|
||||||
|
item.attrType === '常见问题' ||
|
||||||
|
item.attrType === '使用能力' ||
|
||||||
|
item.attrType === '关联组件'
|
||||||
|
) {
|
||||||
|
list.value.push(item.attrType)
|
||||||
|
} else if (item.attrType === '应用展示视频') {
|
||||||
|
list.value.push('应用展示')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.value.unshift('关联组件')
|
||||||
|
list.value.push('部署与安全')
|
||||||
|
list.value.push('归属部门与服务商')
|
||||||
|
navList.value.forEach((item) => {
|
||||||
|
console.log(item)
|
||||||
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
item.show = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (list.value.length > 0) {
|
||||||
|
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||||
|
select.value = navList.value.filter(
|
||||||
|
(item) =>
|
||||||
|
(item.name === '关联组件') | (item.name === list.value[0])
|
||||||
|
)[0].key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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;
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
font-size: 0.24rem;
|
|
||||||
color: #666;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 3rem;
|
|
||||||
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: space-around;
|
||||||
justify-content: space-between;
|
font-size: 0.24rem;
|
||||||
align-items: center;
|
color: #666;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 3rem;
|
||||||
|
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.line {
|
.nav {
|
||||||
width: 0.4rem;
|
cursor: pointer;
|
||||||
height: 0.04rem;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.04rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select {
|
||||||
|
color: #526aff;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
background: #526aff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.select {
|
|
||||||
color: #526aff;
|
|
||||||
|
|
||||||
.line {
|
|
||||||
background: #526aff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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,206 +31,208 @@
|
||||||
</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: [
|
||||||
{
|
{
|
||||||
childrenTitle: '归属部门信息',
|
childrenTitle: '归属部门信息',
|
||||||
childrenContent: [],
|
childrenContent: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
childrenTitle: '服务商信息',
|
childrenTitle: '服务商信息',
|
||||||
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 || '------',
|
||||||
}
|
}
|
||||||
dataFrom.value.content[0].childrenContent[0] = obj
|
dataFrom.value.content[0].childrenContent[0] = obj
|
||||||
let deptContacts = {
|
let deptContacts = {
|
||||||
attrType: '部门联系人',
|
attrType: '部门联系人',
|
||||||
attrValue: '',
|
attrValue: '',
|
||||||
}
|
}
|
||||||
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
||||||
let deptPhone = {
|
let deptPhone = {
|
||||||
attrType: '部门联系电话',
|
attrType: '部门联系电话',
|
||||||
attrValue: '',
|
attrValue: '',
|
||||||
}
|
}
|
||||||
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
||||||
props.dataList.infoList.map((item) => {
|
props.dataList.infoList.map((item) => {
|
||||||
if (
|
|
||||||
item.attrType === '服务商' ||
|
|
||||||
item.attrType === '服务商联系人' ||
|
|
||||||
item.attrType === '服务商联系电话' ||
|
|
||||||
item.attrType.indexOf('服务商名') != -1
|
|
||||||
) {
|
|
||||||
if (
|
if (
|
||||||
item.attrType === '服务商' ||
|
item.attrType === '服务商' ||
|
||||||
|
item.attrType === '服务商联系人' ||
|
||||||
|
item.attrType === '服务商联系电话' ||
|
||||||
item.attrType.indexOf('服务商名') != -1
|
item.attrType.indexOf('服务商名') != -1
|
||||||
) {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent[0] = item
|
|
||||||
if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
|
|
||||||
dataFrom.value.content[1].childrenContent[0].attrValue = '------'
|
|
||||||
}
|
|
||||||
} else if (item.attrType === '服务商联系人') {
|
|
||||||
dataFrom.value.content[1].childrenContent[1] = item
|
|
||||||
if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
|
|
||||||
dataFrom.value.content[1].childrenContent[1].attrValue = '------'
|
|
||||||
}
|
|
||||||
} else if (item.attrType === '服务商联系电话') {
|
|
||||||
dataFrom.value.content[1].childrenContent[2] = item
|
|
||||||
if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
|
|
||||||
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (item.attrType === '部门联系人') {
|
|
||||||
deptContacts.attrValue = item.attrValue || '------'
|
|
||||||
} else if (item.attrType === '部门联系人电话') {
|
|
||||||
deptPhone.attrValue = item.attrValue || '------'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log('obj', dataFrom.value)
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
() => props.dataList,
|
|
||||||
(val) => {
|
|
||||||
if (val) {
|
|
||||||
// dataFrom.value.content[0].childrenContent = []
|
|
||||||
// dataFrom.value.content[1].childrenContent = []
|
|
||||||
let obj = {
|
|
||||||
attrType: '部门名称',
|
|
||||||
attrValue: props.dataList.deptName || '------',
|
|
||||||
}
|
|
||||||
dataFrom.value.content[0].childrenContent[0] = obj
|
|
||||||
let deptContacts = {
|
|
||||||
attrType: '部门联系人',
|
|
||||||
attrValue: props.dataList.deptContacts || '------',
|
|
||||||
}
|
|
||||||
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
|
||||||
let deptPhone = {
|
|
||||||
attrType: '部门联系电话',
|
|
||||||
attrValue: props.dataList.deptPhone || '------',
|
|
||||||
}
|
|
||||||
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
|
||||||
props.dataList.infoList.map((item) => {
|
|
||||||
if (
|
if (
|
||||||
item.attrType === '服务商' ||
|
item.attrType === '服务商' ||
|
||||||
item.attrType === '服务商联系人' ||
|
|
||||||
item.attrType === '服务商联系电话' ||
|
|
||||||
item.attrType.indexOf('服务商名') != -1
|
item.attrType.indexOf('服务商名') != -1
|
||||||
) {
|
) {
|
||||||
|
dataFrom.value.content[1].childrenContent[0] = item
|
||||||
|
if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
|
||||||
|
dataFrom.value.content[1].childrenContent[0].attrValue = '------'
|
||||||
|
}
|
||||||
|
} else if (item.attrType === '服务商联系人') {
|
||||||
|
dataFrom.value.content[1].childrenContent[1] = item
|
||||||
|
if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
|
||||||
|
dataFrom.value.content[1].childrenContent[1].attrValue = '------'
|
||||||
|
}
|
||||||
|
} else if (item.attrType === '服务商联系电话') {
|
||||||
|
dataFrom.value.content[1].childrenContent[2] = item
|
||||||
|
if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
|
||||||
|
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (item.attrType === '部门联系人') {
|
||||||
|
deptContacts.attrValue = item.attrValue || '------'
|
||||||
|
} else if (item.attrType === '部门联系人电话') {
|
||||||
|
deptPhone.attrValue = item.attrValue || '------'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('obj', dataFrom.value)
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
// dataFrom.value.content[0].childrenContent = []
|
||||||
|
// dataFrom.value.content[1].childrenContent = []
|
||||||
|
let obj = {
|
||||||
|
attrType: '部门名称',
|
||||||
|
attrValue: props.dataList.deptName || '------',
|
||||||
|
}
|
||||||
|
dataFrom.value.content[0].childrenContent[0] = obj
|
||||||
|
let deptContacts = {
|
||||||
|
attrType: '部门联系人',
|
||||||
|
attrValue: props.dataList.deptContacts || '------',
|
||||||
|
}
|
||||||
|
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
||||||
|
let deptPhone = {
|
||||||
|
attrType: '部门联系电话',
|
||||||
|
attrValue: props.dataList.deptPhone || '------',
|
||||||
|
}
|
||||||
|
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
if (
|
if (
|
||||||
item.attrType === '服务商' ||
|
item.attrType === '服务商' ||
|
||||||
|
item.attrType === '服务商联系人' ||
|
||||||
|
item.attrType === '服务商联系电话' ||
|
||||||
item.attrType.indexOf('服务商名') != -1
|
item.attrType.indexOf('服务商名') != -1
|
||||||
) {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent.push(item)
|
|
||||||
if (
|
if (
|
||||||
dataFrom.value.content[1].childrenContent[0].attrValue == ''
|
item.attrType === '服务商' ||
|
||||||
|
item.attrType.indexOf('服务商名') != -1
|
||||||
) {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent[0].attrValue =
|
dataFrom.value.content[1].childrenContent.push(item)
|
||||||
'------'
|
if (
|
||||||
}
|
dataFrom.value.content[1].childrenContent[0].attrValue == ''
|
||||||
} else if (item.attrType === '服务商联系人') {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent[1] = item
|
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||||||
if (
|
'------'
|
||||||
dataFrom.value.content[1].childrenContent[1].attrValue == ''
|
}
|
||||||
) {
|
} else if (item.attrType === '服务商联系人') {
|
||||||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
dataFrom.value.content[1].childrenContent[1] = item
|
||||||
'------'
|
if (
|
||||||
}
|
dataFrom.value.content[1].childrenContent[1].attrValue == ''
|
||||||
} else if (item.attrType === '服务商联系电话') {
|
) {
|
||||||
dataFrom.value.content[1].childrenContent[2] = item
|
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||||
if (
|
'------'
|
||||||
dataFrom.value.content[1].childrenContent[2].attrValue == ''
|
}
|
||||||
) {
|
} else if (item.attrType === '服务商联系电话') {
|
||||||
dataFrom.value.content[1].childrenContent[2].attrValue =
|
dataFrom.value.content[1].childrenContent[2] = item
|
||||||
'------'
|
if (
|
||||||
|
dataFrom.value.content[1].childrenContent[2].attrValue == ''
|
||||||
|
) {
|
||||||
|
dataFrom.value.content[1].childrenContent[2].attrValue =
|
||||||
|
'------'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
} else if (item.attrType === '部门联系人') {
|
||||||
|
deptContacts.attrValue = item.attrValue || '------'
|
||||||
|
} else if (item.attrType === '部门联系人电话') {
|
||||||
|
deptPhone.attrValue = item.attrValue || '------'
|
||||||
}
|
}
|
||||||
} else if (item.attrType === '部门联系人') {
|
})
|
||||||
deptContacts.attrValue = item.attrValue || '------'
|
console.log('obj', dataFrom.value)
|
||||||
} else if (item.attrType === '部门联系人电话') {
|
}
|
||||||
deptPhone.attrValue = item.attrValue || '------'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
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;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 13rem;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
|
||||||
.content-card {
|
.title {
|
||||||
height: 1.5rem;
|
margin-bottom: 0.3rem;
|
||||||
width: 6.2rem;
|
}
|
||||||
border-radius: 0.2rem;
|
|
||||||
background: linear-gradient(to right,
|
.content {
|
||||||
rgba(113, 132, 252, 0.4),
|
|
||||||
rgba(148, 163, 252, 0.4));
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
width: 13rem;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
|
|
||||||
.card-title {
|
.content-card {
|
||||||
font-size: 0.26rem;
|
height: 1.5rem;
|
||||||
color: #212956;
|
width: 6.2rem;
|
||||||
margin-bottom: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
line-height: 0.26rem;
|
background: linear-gradient(
|
||||||
}
|
to right,
|
||||||
|
rgba(113, 132, 252, 0.4),
|
||||||
|
rgba(148, 163, 252, 0.4)
|
||||||
|
);
|
||||||
|
padding: 0 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.card-content {
|
.card-title {
|
||||||
white-space: nowrap;
|
font-size: 0.26rem;
|
||||||
|
color: #212956;
|
||||||
div {
|
margin-bottom: 0.2rem;
|
||||||
display: inline-block;
|
line-height: 0.26rem;
|
||||||
margin-right: 0.2rem;
|
|
||||||
color: rgba(33, 41, 86, 0.8);
|
|
||||||
font-size: 0.2rem;
|
|
||||||
max-width: 2.8rem;
|
|
||||||
|
|
||||||
div {
|
|
||||||
max-width: 2.8rem;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div:first-child {
|
.card-content {
|
||||||
display: block;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
color: rgba(33, 41, 86, 0.8);
|
||||||
|
font-size: 0.2rem;
|
||||||
|
max-width: 2.8rem;
|
||||||
|
|
||||||
|
div {
|
||||||
|
max-width: 2.8rem;
|
||||||
|
// overflow: hidden;
|
||||||
|
// text-overflow: ellipsis;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue