feat:asset 详细视图添加

This commit is contained in:
zhangyu
2021-10-14 14:14:25 +08:00
parent cfca72366c
commit 4e501cfc11
10 changed files with 73 additions and 30 deletions

View File

@@ -1,14 +1,14 @@
<template> <template>
<div style="line-height: 32px;"> <div style="line-height: 32px;">
<div style="display: inline-block;margin-right: 20px" v-for="(item,key) in detailSearchListCopy" :key='key'> <div class="search-detail-box" :class="[selectValue[item.key].length?'select-dropdown':'',detailSearchListCopy[key].dropShow?'show-my-dropdpwn':'']" v-for="(item,key) in detailSearchListCopy" :key='key'>
<span class="search-detail-title">{{item.label}} :</span> <span class="search-detail-title" v-if="!selectValue[item.key].length">{{item.label}} :</span>
<span v-if="item.type === 'checkBox'"> <span v-if="item.type === 'checkBox'">
<el-dropdown <el-dropdown
class="detail-dropdown" class="detail-dropdown"
type="primary" type="primary"
:trigger="'click'" :trigger="'click'"
:hide-on-click="false" :hide-on-click="false"
@visible-change="searchStr = detailSearchListCopy[key].searchStr" @visible-change="(val)=>{showDropDown(val, key)}"
> >
<div> <div>
<div class="detail-top-search" v-if="selectValue[item.key].length"> <div class="detail-top-search" v-if="selectValue[item.key].length">
@@ -129,6 +129,10 @@ export default {
const obj = oldChildren.find(item => item.id == arr[0]) const obj = oldChildren.find(item => item.id == arr[0])
const children = obj.children.find(item => item.id == arr[1]) const children = obj.children.find(item => item.id == arr[1])
return children.name return children.name
},
showDropDown (val, key) {
this.searchStr = this.detailSearchListCopy[key].searchStr
this.detailSearchListCopy[key].dropShow = val
} }
}, },
watch: { watch: {
@@ -141,7 +145,6 @@ export default {
this.detailSearchListCopy[key].searchStr = '' this.detailSearchListCopy[key].searchStr = ''
this.detailSearchListCopy[key].oldChildren = JSON.parse(JSON.stringify(this.detailSearchListCopy[key].children)) this.detailSearchListCopy[key].oldChildren = JSON.parse(JSON.stringify(this.detailSearchListCopy[key].children))
}) })
console.log(this.detailSearchListCopy)
} }
}, },
selectValue: { selectValue: {
@@ -154,14 +157,38 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.search-detail-box{
display: inline-block;
margin-right: 20px;
transition: background-color .1s ease-out;
padding-left: 10px;
border-radius: 2px;
}
.search-detail-box:hover{
background-color: rgba(9,30,66,.13);
}
.search-detail-box.select-dropdown{
background-color: rgba(9,30,66,.13);
}
.search-detail-box.show-my-dropdpwn{
background-color: #344563;
color: #fff;
.search-detail-title{
color: #fff;
}
.detail-top-search{
color: #fff;
}
.search-value{
color: #fff;
}
}
.detail-dropdown{ .detail-dropdown{
border: 1px solid #E7EAED;
padding: 0 10px; padding: 0 10px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-radius: 2px; border-radius: 2px;
margin-left: 5px;
} }
.search-detail-title { .search-detail-title {
font-size: 14px; font-size: 14px;
@@ -180,10 +207,10 @@ export default {
.detail-top-search { .detail-top-search {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
width: 100px;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space:nowrap; white-space:nowrap;
max-width: 100px;
} }
</style> </style>
<style lang="scss"> <style lang="scss">

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="detail-left-box"> <div class="detail-left-box">
<div class="order-box"> <div class="order-box">
<el-select v-model="orderBy" size="small" clearable placeholder="排序方式"> <el-select v-model="orderBy" size="small" placeholder="排序方式">
<el-option <el-option
v-for="item in tableTitle" v-for="item in tableTitle"
v-if="item.sortable==='custom'" v-if="item.sortable==='custom'"

View File

@@ -39,14 +39,14 @@
</div> </div>
</div> </div>
<div class="nz-detail-view-right"> <div class="nz-detail-view-right">
<detailViewRight <!-- <detailViewRight-->
@getTableData = 'getTableData' <!-- @getTableData = 'getTableData'-->
ref="detailViewRight" <!-- ref="detailViewRight"-->
v-if="detailViewRightObj" <!-- v-if="detailViewRightObj"-->
:from="from" <!-- :from="from"-->
:obj="detailViewRightObj" <!-- :obj="detailViewRightObj"-->
:target-tab="'panelTab'" <!-- :target-tab="'panelTab'"-->
/> <!-- />-->
</div> </div>
</div> </div>
</div> </div>
@@ -153,7 +153,6 @@ export default {
this.$emit('getTableData') this.$emit('getTableData')
}, },
changeDetailType (item) { changeDetailType (item) {
console.log(item)
this.$emit('changeDetailType', item) this.$emit('changeDetailType', item)
} }
}, },
@@ -166,7 +165,6 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
console.log(n)
this.showLayout = [...n] this.showLayout = [...n]
} }
} }

View File

@@ -109,7 +109,6 @@ export default {
obj: { obj: {
immediate: true, immediate: true,
handler (n) { handler (n) {
console.log(n)
if ((this.from === fromRoute.asset) && n) { if ((this.from === fromRoute.asset) && n) {
const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false } const assetSub = { prop: 'assetSubTab', name: this.$t('overall.assetSubTab'), active: false }
if (n.childrenNum) { if (n.childrenNum) {

View File

@@ -38,7 +38,6 @@ export default {
selectValue: { selectValue: {
immediate: true, immediate: true,
handler (n) { handler (n) {
console.log(n)
this.cascaderData = [] this.cascaderData = []
if (n && this.type !== 'fields') { if (n && this.type !== 'fields') {
n.forEach(item => { n.forEach(item => {

View File

@@ -96,7 +96,7 @@ export default {
}) })
} }
if (this.detailType === 'view') { if (this.detailType === 'view') {
this.$refs.dataTable.$refs.dataTable.scrollTop = 0 this.$refs.dataDetail.$refs.dataTable.scrollTop = 0
} }
} }
}) })

View File

@@ -14,7 +14,7 @@ export default {
}, },
data () { data () {
return { return {
orderBy: '', orderBy: 'id',
orderType: 'ascending', orderType: 'ascending',
renderFirst: '' renderFirst: ''
} }
@@ -35,7 +35,6 @@ export default {
orderByFa: { orderByFa: {
immediate: true, immediate: true,
handler (n) { handler (n) {
console.log(n)
const index = n.indexOf('-') const index = n.indexOf('-')
this.renderFirst = false this.renderFirst = false
if (index !== -1) { if (index !== -1) {
@@ -45,6 +44,10 @@ export default {
this.orderBy = n this.orderBy = n
this.orderType = 'ascending' this.orderType = 'ascending'
} }
if (!n) {
this.orderBy = 'id'
this.orderType = 'ascending'
}
setTimeout(() => { setTimeout(() => {
this.renderFirst = true this.renderFirst = true
}) })
@@ -52,7 +55,6 @@ export default {
}, },
orderBy: { orderBy: {
handler (n) { handler (n) {
console.log(n)
if (this.renderFirst) { if (this.renderFirst) {
this.$emit('orderDetail', this.orderBy, this.orderType) this.$emit('orderDetail', this.orderBy, this.orderType)
} }

View File

@@ -25,7 +25,6 @@ export default {
this.titleSearchList.model.children.forEach(model => { this.titleSearchList.model.children.forEach(model => {
const brand = model.children.find(children => modelId == children.id) const brand = model.children.find(children => modelId == children.id)
if (brand) { if (brand) {
console.log(brand)
this.selectValue.modelIdsDetail.push(brand.brandId + '-' + modelId) this.selectValue.modelIdsDetail.push(brand.brandId + '-' + modelId)
} }
}) })
@@ -71,6 +70,20 @@ export default {
this.$refs.dataList.$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label) this.$refs.dataList.$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
} }
}) })
if (this.orderBy && this.$refs.dataTable.$refs.dataTable) {
const index = this.orderBy.indexOf('-')
let orderBy = ''
let orderType = ''
if (index !== -1) {
orderBy = this.orderBy.slice(index + 1)
orderType = 'descending'
} else {
orderBy = this.orderBy
orderType = 'ascending'
}
this.$refs.dataTable.$refs.dataTable.sort(orderBy, orderType)
}
}, 100) }, 100)
}, },
detailViewRightShow (item) { detailViewRightShow (item) {

View File

@@ -2,7 +2,7 @@
<div> <div>
<nz-data-list <nz-data-list
v-loading="detailViewLoading" v-loading="detailViewLoading"
v-if="detailType === 'list'" v-show="detailType === 'list'"
ref="dataList" ref="dataList"
:api="url" :api="url"
:custom-table-title.sync="tools.customTableTitle" :custom-table-title.sync="tools.customTableTitle"
@@ -78,7 +78,7 @@
</nz-data-list> </nz-data-list>
<nzDetailView <nzDetailView
v-loading="detailViewLoading || tools.loading" v-loading="detailViewLoading || tools.loading"
v-if="detailType !== 'list'" v-show="detailType !== 'list'"
:api="url" :api="url"
ref="dataList" ref="dataList"
:layout="dataListLayout" :layout="dataListLayout"
@@ -116,7 +116,7 @@
<template v-slot:nz-detail-view-list> <template v-slot:nz-detail-view-list>
<asset-detail <asset-detail
class="data-detail" class="data-detail"
ref="dataTable" ref="dataDetail"
:orderByFa="orderBy" :orderByFa="orderBy"
v-loading="tools.loading" v-loading="tools.loading"
:detailViewRightObj="detailViewRightObj" :detailViewRightObj="detailViewRightObj"
@@ -370,6 +370,7 @@ export default {
children: [], children: [],
show: false, show: false,
showMore: false, showMore: false,
dropShow: false,
width: 0, width: 0,
index: -1 index: -1
}, },
@@ -380,6 +381,7 @@ export default {
children: [], children: [],
show: false, show: false,
showMore: false, showMore: false,
dropShow: false,
width: 0, width: 0,
index: -1 index: -1
}, },
@@ -393,6 +395,7 @@ export default {
], ],
show: true, show: true,
showMore: false, showMore: false,
dropShow: false,
width: 0, width: 0,
index: -1 index: -1
}, },
@@ -403,6 +406,7 @@ export default {
children: [], children: [],
show: false, show: false,
showMore: false, showMore: false,
dropShow: false,
width: 0, width: 0,
index: -1 index: -1
}, },
@@ -413,6 +417,7 @@ export default {
children: [], children: [],
show: false, show: false,
showMore: false, showMore: false,
dropShow: false,
width: 0, width: 0,
index: -1 index: -1
} }

View File

@@ -410,7 +410,7 @@ export default {
return { tableData: filterLevelData, tableChartData: temp } return { tableData: filterLevelData, tableChartData: temp }
}, },
filterLogType (data) { filterLogType (data) {
const logData = data.filter(l => l.resultType === 'streamsFormat') const logData = data.filter(l => l && (l.resultType === 'streamsFormat'))
let allTableData = [] let allTableData = []
// 合并 // 合并
logData.forEach(d => { logData.forEach(d => {