bug修改
This commit is contained in:
parent
4568d28b6a
commit
c9cda03deb
|
@ -72,16 +72,17 @@ export default {
|
|||
})
|
||||
},
|
||||
getInfo (id) {
|
||||
this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
|
||||
this.$http.get('/demandComment/' + id).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = res.data.resourceDTO
|
||||
if (this.dataForm.type != '应用资源') {
|
||||
this.shifoushizujian = false
|
||||
} else {
|
||||
this.shifoushizujian = true
|
||||
}
|
||||
this.dataForm = res.data
|
||||
// this.dataForm = res.data.resourceDTO
|
||||
// if (this.dataForm.type != '应用资源') {
|
||||
// this.shifoushizujian = false
|
||||
// } else {
|
||||
// this.shifoushizujian = true
|
||||
// }
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
})
|
||||
}
|
||||
|
|
|
@ -110,9 +110,24 @@
|
|||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text }">
|
||||
<template v-if="column.dataIndex !== 'name'">
|
||||
<template
|
||||
v-if="
|
||||
column.dataIndex !== 'name' &&
|
||||
(column.title === '组件服务' || column.title === '应用资源')
|
||||
"
|
||||
>
|
||||
{{ text || 0 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
column.dataIndex !== 'name' &&
|
||||
(column.title === '知识库' ||
|
||||
column.title === '基础设施' ||
|
||||
column.title === '数据资源')
|
||||
"
|
||||
>
|
||||
--
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
|
|
@ -598,22 +598,47 @@
|
|||
const mockData = ref([])
|
||||
const titles = ref(['未关联的应用名称', '已关联的应用名称'])
|
||||
const titleName = ref('关联应用')
|
||||
const targetKeys = ref([])
|
||||
// 上一步关联数据
|
||||
const targetKeysBack = ref([])
|
||||
|
||||
const sourceClick = () => {
|
||||
mockData.value = []
|
||||
visibleAssociatedApplication.value = true
|
||||
queryApplicationRelByResourceId({
|
||||
referenceId: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
// console.log(val, index)
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
props.dataFrom.infoList.forEach((val) => {
|
||||
if (val.attrType === '来源应用' && val.attrValue != '') {
|
||||
queryApplicationRelByResourceId({
|
||||
referenceId: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
targetKeys.value = []
|
||||
val.attrValue.split(',').forEach((item) => {
|
||||
targetKeys.value.push(item)
|
||||
})
|
||||
console.log(targetKeys.value)
|
||||
// console.log('wowowo')
|
||||
} else if (val.attrType === '来源应用' && val.attrValue == '') {
|
||||
queryApplicationRelByResourceId({
|
||||
referenceId: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关联组件
|
||||
|
@ -622,23 +647,46 @@
|
|||
titleName.value = '关联组件'
|
||||
mockData.value = []
|
||||
visibleAssociatedApplication.value = true
|
||||
queryResourceRelByKeyId({
|
||||
keyId: 0,
|
||||
type: '组件服务',
|
||||
referenceName: '',
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
// console.log(val, index)
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
props.dataFrom.infoList.forEach((val) => {
|
||||
if (val.attrType === '关联组件信息' && val.attrValue != '') {
|
||||
queryResourceRelByKeyId({
|
||||
keyId: 0,
|
||||
type: '组件服务',
|
||||
referenceName: '',
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
targetKeys.value = []
|
||||
val.attrValue.split(',').forEach((item) => {
|
||||
targetKeys.value.push(item)
|
||||
})
|
||||
console.log(targetKeys.value)
|
||||
// console.log('wowowo')
|
||||
} else if (val.attrType === '关联组件信息' && val.attrValue == '') {
|
||||
queryResourceRelByKeyId({
|
||||
keyId: 0,
|
||||
type: '组件服务',
|
||||
referenceName: '',
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const targetKeys = ref([])
|
||||
const selectedKeys = ref([])
|
||||
|
||||
const handleChange = (nextTargetKeys, direction, moveKeys) => {
|
||||
|
@ -648,7 +696,7 @@
|
|||
}
|
||||
|
||||
const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys, sourceSelectedKeys)
|
||||
}
|
||||
|
||||
const handleOk = (e) => {
|
||||
|
@ -724,253 +772,253 @@
|
|||
</script>
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.put-on-the-shelf {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
.Technical-text {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.Technical-text:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
.put-on-the-shelf {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
.Technical-text {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.Technical-text:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
p {
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.del {
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
.application-Area {
|
||||
width: 520px;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application-Area {
|
||||
width: 520px;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
:deep(.ant-modal) {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list) {
|
||||
width: 39.5%;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-operation) {
|
||||
flex-direction: row-reverse;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-footer) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-header) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-title) {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-selected) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
:deep(.ant-transfer-list-header-title) {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
:deep(.ant-modal) {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list) {
|
||||
width: 39.5%;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-operation) {
|
||||
flex-direction: row-reverse;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-footer) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-header) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-title) {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-selected) {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-title) {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -126,10 +126,12 @@
|
|||
'props.dataList.infoList==============>',
|
||||
navList.value.filter((item) => item.name === list.value[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
|
||||
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)
|
||||
}
|
||||
|
|
|
@ -8,7 +8,12 @@
|
|||
<template>
|
||||
<div class="business-navigation" v-if="navList.length > 0">
|
||||
<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 }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
@ -16,217 +21,216 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'business-usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('business-associated-ability')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联应用',
|
||||
key: 'business-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
// list.value.push('关联应用')
|
||||
console.log('navList', navList)
|
||||
}
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'business-usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
}
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
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('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
item.show = true
|
||||
const select = ref('business-associated-ability')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联应用',
|
||||
key: 'business-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
// list.value.push('关联应用')
|
||||
console.log('navList', navList)
|
||||
}
|
||||
}
|
||||
})
|
||||
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
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
// console.log('排序==============>', a, b)
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
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('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
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('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
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
|
||||
} else {
|
||||
item.show = true
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
})
|
||||
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 = []
|
||||
let arr = [
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
'使用方式',
|
||||
'常见问题',
|
||||
]
|
||||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
// console.log('排序==============>', a, b)
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
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('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
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>
|
||||
<style lang="less" scoped>
|
||||
.business-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
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;
|
||||
.business-navigation {
|
||||
width: 19.12rem;
|
||||
height: 0.84rem;
|
||||
line-height: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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;
|
||||
|
||||
.line {
|
||||
width: 0.4rem;
|
||||
height: 0.04rem;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
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>
|
||||
|
|
|
@ -164,6 +164,9 @@
|
|||
businessArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '组件类型'
|
||||
)[0]
|
||||
if (
|
||||
props.dataList.infoList.filter((val) => val.attrType === '部署位置')[0]
|
||||
) {
|
||||
|
|
|
@ -96,6 +96,8 @@
|
|||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
} else if (item.attrType === '是否支持试用' && item.attrValue === '是') {
|
||||
list.value.push('组件试用')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
|
@ -111,9 +113,12 @@
|
|||
// }
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
// (item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
|
@ -137,10 +142,15 @@
|
|||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '组件视频介绍') {
|
||||
list.value.push('组件展示')
|
||||
} else if (
|
||||
item.attrType === '是否支持试用' &&
|
||||
item.attrValue === '是'
|
||||
) {
|
||||
list.value.push('组件试用')
|
||||
}
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('组件试用')
|
||||
// list.value.push('组件试用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
})
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '试用地址'
|
||||
(item) => item.attrType === '是否支持试用' && item.attrValue === '是'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
|
@ -94,7 +94,9 @@
|
|||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '是否支持试用' && item.attrValue === '是'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
|
|
|
@ -82,7 +82,6 @@
|
|||
const select = ref('layer-service-associated-ability')
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
|
@ -145,9 +144,12 @@
|
|||
item.show = true
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
// (item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
|
|
Loading…
Reference in New Issue