479 lines
16 KiB
Vue
479 lines
16 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<el-form :model="dataView">
|
|
<div v-for="(item, index) in dataView.children" :key="item">
|
|
<div class="dataTitle">{{ item.name }}</div>
|
|
<div v-for="itemson in item.children" :key="itemson.name">
|
|
<div class="dataTitleSon">
|
|
{{ itemson.name }}
|
|
</div>
|
|
<div
|
|
class="dataContent"
|
|
v-if="
|
|
itemson.name !== '算法优势' &&
|
|
itemson.name !== '应用场景' &&
|
|
itemson.name !== '功能介绍'
|
|
"
|
|
>
|
|
<el-form-item
|
|
v-for="itemsonson in itemson.children"
|
|
:key="itemsonson.name"
|
|
:label="
|
|
itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
|
|
"
|
|
>
|
|
<div
|
|
class="videoAndImgCss"
|
|
v-if="
|
|
itemsonson.type === 'video' || itemsonson.type === 'image'
|
|
"
|
|
@click="videoAndImg(itemsonson.note1)"
|
|
>
|
|
浏览
|
|
</div>
|
|
<div
|
|
v-else-if="itemsonson.type === ' multipleAdditions'"
|
|
class="multipleAdditionsClass"
|
|
>
|
|
<div
|
|
v-for="multipleAdditionsItem in itemsonson.note1"
|
|
:key="multipleAdditionsItem"
|
|
>
|
|
<div>
|
|
{{
|
|
multipleAdditionsItem.question ||
|
|
multipleAdditionsItem.type ||
|
|
multipleAdditionsItem.name
|
|
}}
|
|
</div>
|
|
<div>
|
|
{{
|
|
multipleAdditionsItem.answer ||
|
|
multipleAdditionsItem.price ||
|
|
multipleAdditionsItem.img
|
|
}}
|
|
</div>
|
|
<div>{{ multipleAdditionsItem.desc }}</div>
|
|
<!-- <div>{{ multipleAdditionsItem }}</div> -->
|
|
</div>
|
|
</div>
|
|
<el-input
|
|
v-else
|
|
v-model="itemsonson.note1"
|
|
disabled="disabled"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div v-else-if="itemson.name === '算法优势'">
|
|
<div
|
|
v-for="itemDataForm in dataForm.infoList"
|
|
:key="itemDataForm.attrType"
|
|
>
|
|
<div
|
|
v-if="itemDataForm.attrType === '算法优势'"
|
|
class="textAndImg"
|
|
>
|
|
<div
|
|
v-for="itemDataFormValue in itemDataForm.attrValue"
|
|
:key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon"
|
|
style="border: 1px solid #3c9bcd;margin"
|
|
>
|
|
<div>{{ itemDataFormValue.name }}</div>
|
|
<div>{{ itemDataFormValue.desc }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="itemson.name === '应用场景'">
|
|
<div
|
|
v-for="itemDataForm in dataForm.infoList"
|
|
:key="itemDataForm.attrType"
|
|
>
|
|
<div
|
|
v-if="itemDataForm.attrType === '应用场景'"
|
|
class="textAndImg"
|
|
>
|
|
<div
|
|
v-for="itemDataFormValue in itemDataForm.attrValue"
|
|
:key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon"
|
|
style="border: 1px solid #3c9bcd;margin"
|
|
>
|
|
<div>{{ itemDataFormValue.name }}</div>
|
|
<div>{{ itemDataFormValue.desc }}</div>
|
|
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="itemson.name === '功能介绍'">
|
|
<div
|
|
v-for="itemDataForm in dataForm.infoList"
|
|
:key="itemDataForm.attrType"
|
|
>
|
|
<div
|
|
v-if="itemDataForm.attrType === '功能介绍'"
|
|
class="textAndImg"
|
|
>
|
|
<div
|
|
v-for="itemDataFormValue in itemDataForm.attrValue"
|
|
:key="itemDataFormValue.name + 'value'"
|
|
class="textAndImgSon"
|
|
style="border: 1px solid #3c9bcd;margin"
|
|
>
|
|
<div>{{ itemDataFormValue.name }}</div>
|
|
<div>{{ itemDataFormValue.desc }}</div>
|
|
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import qs from 'qs'
|
|
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
dataForm: {
|
|
type: Object
|
|
},
|
|
insertList: {
|
|
type: Array
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
dataList: [],
|
|
dataView: [],
|
|
// 归属部门
|
|
unit: ''
|
|
}
|
|
},
|
|
watch: {
|
|
dataList (item) {
|
|
if (item) {
|
|
this.dataList = item
|
|
}
|
|
},
|
|
insertList (val) {
|
|
if (val) {
|
|
if (this.dataForm.type === '应用资源') {
|
|
this.dataView = val.filter(
|
|
(item) => item.name === this.dataForm.type + '一'
|
|
)[0]
|
|
this.dataForm.infoList.map((item, index) => {
|
|
this.dataView.children.map((itemView, indexView) => {
|
|
// console.log('itemView', itemView)
|
|
itemView.children.map((itemViewSon, indexViewSon) => {
|
|
// console.log('itemViewSon', itemViewSon)
|
|
itemViewSon.children.map((itemSon, indexSon) => {
|
|
// console.log('itemSon', itemSon)
|
|
if (itemSon.name.indexOf('描述') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.description
|
|
} else if (itemSon.name.indexOf('名称') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.name
|
|
} else if (itemSon.name.indexOf('能力类型') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.type
|
|
} else if (itemSon.name.indexOf('属部门') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.unit
|
|
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareCondition
|
|
} else if (itemSon.name.indexOf('共享类型') != -1) {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = this.dataForm.shareType
|
|
} else if (
|
|
itemSon.name === '关联组件信息' &&
|
|
item.attrType === '关联组件信息'
|
|
) {
|
|
this.queryPartAppByKeyIdFunction(
|
|
indexView,
|
|
indexViewSon,
|
|
indexSon
|
|
)
|
|
} else if (itemSon.name === item.attrType) {
|
|
if (itemSon.type !== ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = item.attrValue
|
|
} else {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
if (item.attrType === '功能介绍') {
|
|
this.dataForm.infoList[index].attrValue = JSON.parse(
|
|
item.attrValue
|
|
)
|
|
}
|
|
})
|
|
} else {
|
|
const componentType = this.dataForm.infoList.filter(
|
|
(item) => item.attrType === '组件类型'
|
|
)
|
|
this.dataView = val.filter(
|
|
(item) => item.name === this.dataForm.type + '一'
|
|
)[0]
|
|
this.dataView = this.dataView.children.filter(
|
|
(item) => item.name === componentType[0].attrValue
|
|
)[0]
|
|
this.dataForm.infoList.map((item, index) => {
|
|
this.dataView.children.map((itemView, indexView) => {
|
|
console.log('itemView', itemView)
|
|
itemView.children.map((itemViewSon, indexViewSon) => {
|
|
console.log('itemViewSon', itemViewSon)
|
|
itemViewSon.children.map((itemSon, indexSon) => {
|
|
console.log('itemSon', itemSon)
|
|
if (itemSon.name.indexOf('描述') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.description
|
|
} else if (itemSon.name.indexOf('名称') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.name
|
|
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.shareCondition
|
|
} else if (itemSon.name.indexOf('共享方式') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.shareMode
|
|
} else if (itemSon.name.indexOf('共享类型') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.shareType
|
|
} else if (itemSon.name.indexOf('部门联系人') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.deptContacts
|
|
} else if (itemSon.name.indexOf('属部门') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.unit
|
|
} else if (itemSon.name.indexOf('部门联系人电话') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.deptPhone
|
|
} else if (itemSon.name.indexOf('接口请求方式') != -1) {
|
|
this.dataView.children[indexView].children[0].children[
|
|
indexSon
|
|
].note1 = this.dataForm.apiMethodType
|
|
} else if (
|
|
itemSon.name === '来源应用' &&
|
|
item.attrType === '来源应用'
|
|
) {
|
|
this.queryPartAppByKeyIdFunction(
|
|
indexView,
|
|
indexViewSon,
|
|
indexSon
|
|
)
|
|
} else if (itemSon.name === item.attrType) {
|
|
if (itemSon.type !== ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = item.attrValue
|
|
} else if (itemSon.type === ' multipleAdditions') {
|
|
this.dataView.children[indexView].children[
|
|
indexViewSon
|
|
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
if (
|
|
item.attrType === '算法优势' ||
|
|
item.attrType === '应用场景' ||
|
|
item.attrType === '功能介绍'
|
|
) {
|
|
this.dataForm.infoList[index].attrValue = JSON.parse(
|
|
item.attrValue
|
|
)
|
|
}
|
|
})
|
|
console.log(
|
|
'valvalvalvalvalvalvalvalvalvalval',
|
|
this.dataForm,
|
|
this.dataView
|
|
)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
videoAndImg (link) {
|
|
if (link) {
|
|
window.open(link)
|
|
} else {
|
|
this.$message({
|
|
message: '未上传',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
},
|
|
deptName () {
|
|
console.log(this.dataForm.deptId)
|
|
this.$http
|
|
.get(`/sys/dept/${this.dataForm.deptId}`)
|
|
.then(({ data: res }) => {
|
|
console.log(res.data.name, 'res')
|
|
this.unit = res.data.name
|
|
})
|
|
},
|
|
queryPartAppByKeyIdFunction (index, indexSon, indexSonSon) {
|
|
if (this.dataForm.type === '组件服务') {
|
|
this.$http
|
|
.get(
|
|
'/dataResourceRel/queryApp4PartByKeyId' +
|
|
'?keyId=' +
|
|
this.dataForm.id
|
|
)
|
|
.then(({ data: res }) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 = ''
|
|
res.data.map((item) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 += item.name + ';'
|
|
})
|
|
})
|
|
} else {
|
|
this.$http
|
|
.get(
|
|
'/dataResourceRel/queryPart4AppByKeyId?keyId=' +
|
|
this.dataForm.id +
|
|
'&type=' +
|
|
'组件服务'
|
|
)
|
|
.then(({ data: res }) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 = ''
|
|
res.data.map((item) => {
|
|
this.dataView.children[index].children[indexSon].children[
|
|
indexSonSon
|
|
].note1 += item.name + ';'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
created () {},
|
|
mounted () {
|
|
this.deptName()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
.dataTitle {
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: 22px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.dataTitleSon {
|
|
padding-left: 30px;
|
|
color: #333333;
|
|
font-size: 22px;
|
|
margin-bottom: 20px;
|
|
background: url('~@/assets/img/sj-jx.png') no-repeat;
|
|
background-position-x: 15px;
|
|
}
|
|
.multipleAdditionsClass {
|
|
display: flex;
|
|
& > div {
|
|
margin-right: 30px;
|
|
border: 1px solid #3c9bcd;
|
|
width: 212px;
|
|
height: 182px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
& > div:first-child {
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
}
|
|
.videoAndImgCss {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
border: 1px solid #3c9bcd;
|
|
line-height: 12px;
|
|
padding: 5px;
|
|
margin-top: 10px;
|
|
background: rgba(60, 155, 205, 0.1);
|
|
}
|
|
.textAndImg {
|
|
display: flex;
|
|
padding-left: 30px;
|
|
.textAndImgSon {
|
|
width: 212px;
|
|
height: 182px;
|
|
margin-right: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
position: relative;
|
|
& > div:first-child {
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
}
|
|
& > div:nth-child(3) {
|
|
margin-top: 10px;
|
|
position: absolute;
|
|
bottom: 30px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
border: 1px solid #3c9bcd;
|
|
line-height: 12px;
|
|
padding: 5px;
|
|
margin-top: 10px;
|
|
background: rgba(60, 155, 205, 0.1);
|
|
}
|
|
}
|
|
}
|
|
.dataContent {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 33%);
|
|
padding-left: 30px;
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
display: inline-block;
|
|
input {
|
|
width: 400px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|