hi-ucs/back/src/views/modules/putOnTheShelf/index.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>