feat:asset 详细视图添加
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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'"
|
||||||
|
|||||||
@@ -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]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
Reference in New Issue
Block a user