295 lines
11 KiB
Vue
295 lines
11 KiB
Vue
<!--
|
||
* @Author: hisense.liangjunhua
|
||
* @Date: 2022-07-08 09:48:52
|
||
* @LastEditors: hisense.liangjunhua
|
||
* @LastEditTime: 2022-07-25 15:57:25
|
||
* @Description: 告诉大家这是什么
|
||
-->
|
||
<template>
|
||
<div class="put-on-the-shelf">
|
||
<div v-for="parent in putOnTheShelfList" :key='parent.id'>
|
||
<div v-for='child in parent.children' :key='child.id'>
|
||
<template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
|
||
<div class="top">{{child.name}}</div>
|
||
<div v-for="item in child.children" :key="item.id" class='item' v-show="(item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档') && !(
|
||
(showTypeName == '调用接口' && item.name == '平台地址') ||
|
||
(showTypeName == '调用接口' && item.name == 'SDK安装包') ||
|
||
(showTypeName == '平台对接' && item.name == 'SDK安装包') ||
|
||
(showTypeName == '平台对接' && item.name == '接口请求方式') ||
|
||
(showTypeName == '平台对接' && item.name == '服务接口') ||
|
||
(showTypeName == 'SDK' && item.name == '平台地址') ||
|
||
(showTypeName == 'SDK' && item.name == '接口请求方式') ||
|
||
(showTypeName == 'SDK' && item.name == '服务接口')
|
||
)">
|
||
<div class="box">
|
||
<div>
|
||
<span class="required" v-if="required.indexOf(item.name) > -1">*</span>
|
||
{{ item.name }}
|
||
</div>
|
||
<!-- <upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
|
||
tip="支持图片类型，大小不超过100M"></upload> -->
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.jpg,.jpeg,.png' :list="item" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1"
|
||
:dataList="item" tip="支持文件类型，大小不超过100M"></upload>
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
|
||
:dataList="item" tip="支持文件类型，大小不超过100M"></upload>
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :dataList="item" :busType="2"
|
||
tip="支持文件类型，大小不超过100M"></upload>
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="item" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
|
||
tip="支持视频类型，大小不超过100M"></upload>
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.zip' :list="item" v-else-if="item.type == 'package' &&item.name != '上传附件'" type="安装包" btnName="上传安装包" :maxCount="1" :dataList="item"
|
||
tip="支持.zip类型，大小不超过100M"></upload>
|
||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx,.zip' :list="item" v-else-if="item.name == '上传附件'" type="附件" btnName="上传附件" :maxCount="1" :dataList="item"
|
||
tip="大小不超过100M"></upload>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'AbilityType'" type="disabled" :data="item" :name="item.name" :value="typeInput"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'ComponentType'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options" @show-type="showType"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
|
||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
|
||
</div>
|
||
<div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='input' || item.type=='textArea') && changeField.indexOf(item.name) == -1">请填写{{item.name}}！</div>
|
||
<div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='select' || item.type=='checkBox' || item.type=='radio') && changeField.indexOf(item.name) == -1">请选择{{item.name}}！</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<special @submitData="submitData" ref="specialRef" :configure='judgmentType.filter(item => item.name==child.name)[0]' :showData='child' @changeInfoList='changeInfoList'></special>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import inputSelectCheckbox from './components/inputSelectCheckbox'
|
||
import special from './components/special'
|
||
import upload from '@/views/modules/components/upload'
|
||
export default {
|
||
name: '',
|
||
components: {
|
||
special,
|
||
upload,
|
||
inputSelectCheckbox
|
||
},
|
||
props: {
|
||
type: String,
|
||
putOnTheShelfList: Array,
|
||
typeInput: String,
|
||
required: Array,
|
||
notFilled: Array
|
||
},
|
||
data () {
|
||
return {
|
||
changeField: [],
|
||
judgmentType: [
|
||
{
|
||
name: '算法优势',
|
||
list: [
|
||
{
|
||
name: '算法优势名称',
|
||
field: 'name',
|
||
type: 'input',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '算法优势描述',
|
||
field: 'desc',
|
||
type: 'textArea',
|
||
note1: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '应用场景',
|
||
list: [
|
||
{
|
||
name: '应用场景名称',
|
||
field: 'name',
|
||
type: 'input',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '应用场景描述',
|
||
field: 'desc',
|
||
type: 'textArea',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '应用场景图片',
|
||
field: 'img',
|
||
type: 'image',
|
||
note1: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '计费标准信息',
|
||
list: [
|
||
{
|
||
name: '计费方式',
|
||
field: 'type',
|
||
type: 'radio',
|
||
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
|
||
note1: '一次性买断'
|
||
},
|
||
{
|
||
name: '计费标准',
|
||
field: 'price',
|
||
type: 'input2',
|
||
// company: '元',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '计费标准描述',
|
||
field: 'desc',
|
||
type: 'textArea',
|
||
note1: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '常见问题',
|
||
list: [
|
||
{
|
||
name: '问题',
|
||
field: 'question',
|
||
type: 'textArea',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '答复',
|
||
field: 'answer',
|
||
type: 'textArea',
|
||
note1: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '功能介绍',
|
||
list: [
|
||
{
|
||
name: '功能名称',
|
||
field: 'name',
|
||
type: 'input',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '功能描述',
|
||
field: 'desc',
|
||
type: 'textArea',
|
||
note1: ''
|
||
},
|
||
{
|
||
name: '功能图片',
|
||
field: 'img',
|
||
type: 'image',
|
||
note1: ''
|
||
}
|
||
]
|
||
}
|
||
],
|
||
showTypeName: ''
|
||
}
|
||
},
|
||
mounted () {
|
||
this.defaultContent()
|
||
},
|
||
methods: {
|
||
// 提交
|
||
submit (arr) {
|
||
console.log('提交', arr.length, this.$refs.specialRef)
|
||
arr.map((val, index) => {
|
||
if (index === arr.length - 1) {
|
||
this.$refs.specialRef[index].add(val, true, true)
|
||
} else {
|
||
this.$refs.specialRef[index].add(val, true, false)
|
||
}
|
||
})
|
||
},
|
||
submitData () {
|
||
// console.log('触发提交')
|
||
this.$emit('submitData')
|
||
},
|
||
changeInfoList (obj) {
|
||
this.$emit('changeInfoList', obj)
|
||
},
|
||
goToRichText () {
|
||
|
||
},
|
||
// 默认显示--调用接口
|
||
defaultContent () {
|
||
this.putOnTheShelfList.forEach((item) => {
|
||
if (item.name === '部署与使用') {
|
||
item.children.forEach((itemChild) => {
|
||
if (itemChild.name === '使用方式') {
|
||
itemChild.children.forEach((itemChilds) => {
|
||
if (itemChilds.name === '使用方式') {
|
||
itemChilds.note1 = '调用接口'
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
showType (data) {
|
||
this.showTypeName = data
|
||
console.log(data, this.showTypeName, '传过来的showType')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
.put-on-the-shelf {
|
||
height: 500px;
|
||
padding: 0 50px;
|
||
overflow-y: scroll;
|
||
}
|
||
.put-on-the-shelf::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
.item {
|
||
position: relative;
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 25px 0;
|
||
& > div:nth-of-type(1) {
|
||
width: 105px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.required {
|
||
color: #f56c6c;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
.requiredTips {
|
||
font-size: 14px;
|
||
color: #f56c6c;
|
||
position: absolute;
|
||
bottom: -20px;
|
||
left: 110px;
|
||
}
|
||
}
|
||
</style>
|