hi-ucs/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-17 14:11:08
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-20 16:40:33
 * @Description: 上架
-->
<template>
  <div class="put-on-the-shelf">
    <div v-for="title in props.refData.children" :key="title.id">
      <div class="top">
        <div></div>
        <div>{{ title.name }}</div>
        <div></div>
      </div>
      <template v-if="title.isConfigure">
        <div class="bottom">
          <div class="items" v-if="data[title.name].length > 0">
            <div
              class="item"
              v-for="(val, index) in data[title.name]"
              :key="'key1' + val.name + index"
            >
              <p>
                <span>{{ title.name }}-{{ index + 1 }}</span>
                <span></span>
              </p>
              <p
                v-for="attr in props.configure.filter(
                  (item, index2) => item.name === title.name
                )[0].list"
                :key="'key2' + attr.name + index2"
              >
                <span>{{ attr.name }}</span>
                <span v-if="attr.type === 'image'">
                  <a-image :width="85" :height="60" :src="val.img" />
                </span>
                <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
              </p>
              <div class="del">
                <i class="delImg" @click="del(title.name, index)"></i>
                <div @click="del(title.name, index)">删除</div>
              </div>
            </div>
          </div>
          <div class="add">添加更多{{ title.name }}</div>
          <div
            class="form"
            v-for="(val, index) in props.configure.filter(
              (item) => item.name === title.name
            )[0].list"
            :key="'key3' + val.name + index"
          >
            <span>{{ val.name }}</span>
            <a-input
              v-model:value="val.note1"
              :maxlength="24"
              :placeholder="'请填写' + val.name + ',不超过24个字符'"
              v-if="val.type == 'input'"
            />
            <a-textarea
              v-model:value="val.note1"
              :showCount="true"
              :maxlength="200"
              :placeholder="'请填写' + val.name"
              v-else-if="val.type == 'textArea'"
            />
            <a-input-number
              v-model:value="val.note1"
              :min="0"
              :max="9999"
              :step="0.01"
              string-mode
              :placeholder="'请填写' + val.name"
              v-else-if="val.type == 'number'"
            />
            <a-radio-group
              v-model:value="val.note1"
              :options="val.options"
              v-else-if="val.type == 'radio'"
            />
            <upload
              :key="showKey"
              type="图片"
              btnName="上传图片"
              :maxCount="1"
              :data="val"
              :list="[]"
              tip="支持图片类型，大小不超过100M"
              v-else-if="val.type == 'image'"
            ></upload>
          </div>
          <div class="submit">
            <a-button type="primary" @click="add(title.name)">提交</a-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="bottom">
          <div class="form" v-for="item in title.children" :key="item.id">
            <span>{{ item.name }}</span>
            <a-input
              v-if="item.type == 'input'"
              v-model:value="item.note1"
              :placeholder="'请输入' + item.name"
            />
            <a-radio-group
              v-else-if="item.type == 'radio'"
              v-model:value="item.note1"
              :options="item.options"
            />
            <p v-else-if="item.type == 'text'">
              {{ abilityToType }}
            </p>
            <p v-else-if="item.type == 'text2'">
              {{ componentTypeValue }}
            </p>
            <a-textarea
              v-else-if="item.type == 'textArea'"
              v-model:value="item.note1"
              :showCount="true"
              :maxlength="200"
              :placeholder="'请输入' + item.name"
            />
            <upload
              v-else-if="item.type == 'image'"
              type="图片"
              btnName="上传图片"
              :maxCount="1"
              :data="item"
              :list="props.imgList"
              tip="支持图片类型，大小不超过100M"
            ></upload>
            <upload
              v-else-if="item.type == 'file' && item.name !== '使用手册'"
              type="文件"
              btnName="上传附件"
              :maxCount="1"
              :data="item"
              :list="props.fileList"
              tip="支持文件类型，大小不超过100M"
            ></upload>
            <upload
              v-else-if="item.name == '使用手册'"
              type="文件"
              btnName="上传附件"
              :maxCount="1"
              :data="item"
              :busType="2"
              :list="props.fileList2"
              tip="支持文件类型，大小不超过100M"
            ></upload>
            <upload
              v-else-if="item.type == 'video'"
              type="视频"
              btnName="上传视频"
              :maxCount="1"
              :data="item"
              :list="props.videoList"
              tip="支持视频类型，大小不超过100M"
            ></upload>
            <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
              请选择来源应用
            </a-button>
            <a-select
              v-else-if="item.type == 'select'"
              style="width: 240px"
              v-model:value="item.note1"
              :placeholder="'请选择' + item.name"
            >
              <a-select-option
                v-for="(itemSelect, indexSelect) in item.options"
                :key="indexSelect"
                :value="itemSelect.dictLabel"
              >
                {{ itemSelect.dictLabel }}
              </a-select-option>
            </a-select>
            <div
              v-else-if="item.type == 'checkBox'"
              class="application-Area"
              id="application-Area"
              :key="showKey"
            >
              <div
                v-for="(itemson, indexson) in item.options"
                :key="indexson"
                class="application-Area-son"
                @click="ApplicationArea(item, itemson)"
                :class="
                  item.note2.indexOf(itemson.dictLabel) != -1
                    ? 'application-Area-down'
                    : ''
                "
              >
                {{ itemson.dictLabel }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
  import { ref, defineProps, watch, onMounted } from 'vue'
  import mybus from '@/myplugins/mybus'
  import upload from '@/views/components/upload'
  import { message } from 'ant-design-vue'
  import { getCategoryTreePage } from '@/api/personalCenter'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const abilityToType = router.currentRoute.value.query.abilityToType
  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
  const props = defineProps({
    // 展示数据
    refData: { type: Object, default: null },
    // 表单数据
    dataFrom: { type: Array, default: null },
    // 文件回显
    fileList: { type: Array, default: null },
    fileList2: { type: Array, default: null },
    // 图片回显
    imgList: { type: Array, default: null },
    // 视频回显
    videoList: { type: Array, default: null },
    // 外部字段
    externalField: { type: Array, default: null },
    // 多条的配置
    configure: { type: Array, default: null },
    // [{
    //   name:'计费标准信息',
    //   list:[
    //     {
    //       name:'计费方式',
    //       type:'radio',
    //       field:'type',
    //       options:
    //         {
    //           name:'一次性买断',
    //           value:'1'
    //         },
    //         {
    //           name:'按调用次数',
    //           value:'2'
    //         },
    //         {
    //           name:'按并发路数',
    //           value:'3'
    //         },
    //         {
    //           name:'按年计费',
    //           value:'4'
    //         }
    //       ],
    //       note1:''
    //     },
    //     {
    //       name:'计费标准',
    //       field:'price',
    //       type:'number',
    //       company:'元',
    //       note1: ''
    //     },
    //     {
    //       name:'计费标准描述',
    //       field:'desc',
    //       type:'textArea',
    //       note1:''
    //     }
    //   ]
    // }]
  })
  console.log('props==========>', props)
  const data = ref({
    list: [],
  })
  const showKey = ref(0)
  props.refData.children.map((item) => {
    if (
      props.configure &&
      props.configure.filter((val) => val.name === item.name).length > 0
    ) {
      item.isConfigure = true
      data.value[item.name] = []
      console.log('item==========>', item, data.value)
    } else {
      item.isConfigure = false
    }
  })
  let arr = props.refData.children.filter((item) => {
    if (props.configure) {
      if (!item.isConfigure) {
        return item
      }
    } else {
      return item
    }
  })
  data.value.list = []
  // 获取字典数据
  arr.forEach((val) => {
    val.children.forEach((item) => {
      if (item.isLinkToDic === 'true' && item.linkValue) {
        getCategoryTreePage({
          page: 1,
          limit: 20,
          dictTypeId: item.linkValue,
          deFlage: 0,
        }).then((res) => {
          if (item.type === 'radio') {
            item.options = res.data.data.list.map((radio) => radio.dictLabel)
          } else if (item.type === 'select' || item.type === 'checkBox') {
            if (item.type === 'checkBox') {
              if (!item.note2) {
                item.note2 = []
              }
            }
            item.options = res.data.data.list
          }
          data.value.list.push(item)
        })
      } else {
        data.value.list.push(item)
      }
    })
  })
  if (props.dataFrom) {
    console.log(props.dataFrom, data.value.list)
    props.dataFrom.infoList.forEach((item) => {
      if (
        props.configure &&
        props.configure.filter((val) => val.name === item.attrType).length > 0
      ) {
        data.value[item.attrType] = JSON.parse(item.attrValue)
      } else if (item.attrType === '应用领域') {
        props.refData.children.forEach((val) => {
          val.children.forEach((child) => {
            if (child.name === item.attrType) {
              // 通过;分割成数组
              child.note2 = item.attrValue.split(';')
              showKey.value++
              console.log('应用领域', item, item.attrValue.split(';'), child)
            }
          })
        })
        //  item.note1 = item.attrValue.split(';')
      }
    })
  }
  const add = (title) => {
    let list = props.configure.filter((item) => item.name === title)[0].list
    let flag = true
    list.forEach((item) => {
      console.log(item)
      if (item.type !== 'number' && !item.note1.length > 0) {
        flag = false
      } else if (item.type === 'number' && !item.note1 > 0) {
        flag = false
      }
    })
    if (flag) {
      let obj = {}
      list.forEach((item) => {
        obj[item.field] = item.note1
      })
      data.value[title].push(obj)
      console.log(data.value[title])
      mybus.emit('chageDataFrom', {
        attrType: title,
        attrValue: JSON.stringify(data.value[title]),
        delFlag: 0,
      })
      list.forEach((item) => {
        item.note1 = ''
        showKey.value++
      })
    } else {
      message.warning('请填写完整')
    }
  }
  const del = (title, index) => {
    data.value[title].splice(index, 1)
    mybus.emit('chageDataFrom', {
      attrType: title,
      attrValue: JSON.stringify(data.value[title]),
      delFlag: 0,
    })
  }
  const ApplicationArea = (item, itemson) => {
    console.log(item, itemson)
    if (item.note2.indexOf(itemson.dictLabel) === -1) {
      item.note2.push(itemson.dictLabel)
    } else {
      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
    }
    mybus.emit('chageDataFrom', {
      attrType: item.name,
      attrValue: item.note2.join(';'),
      delFlag: 0,
    })
  }
  const sourceClick = () => {}
  watch(data.value.list, (newProps, oldProps) => {
    console.log(newProps, oldProps)
    newProps.forEach((val) => {
      console.log('数据发生改变==========>', val)
      if (
        props.configure &&
        props.configure.filter((item) => item.name === val.name).length > 0
      ) {
        mybus.emit('chageDataFrom', {
          attrType: val.name,
          attrValue: val.note1,
          delFlag: 0,
        })
      } else if (
        props.externalField &&
        props.externalField.indexOf(val.name) > -1
      ) {
        mybus.emit('chageDataFromDwon', {
          attrType: val.name,
          attrValue: val.note1,
          delFlag: 0,
        })
      } else {
        if (val.name !== '应用领域') {
          mybus.emit('chageDataFrom', {
            attrType: val.name,
            attrValue: val.note1,
            delFlag: 0,
          })
        }
      }
    })
  })
</script>
<style lang="less" scoped>
  .put-on-the-shelf {
    height: 680px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 100px 25px;
    & > 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;
        }
      }
      .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: flex-start;
          span:first-child {
            width: 120px;
          }
          :deep(.ant-input-textarea) {
            width: 570px;
          }
          :deep(.ant-radio-group) {
            width: 570px;
          }
          :deep(.ant-input-number) {
            width: 200px;
          }
          :deep(.ant-input) {
            resize: none;
            width: 570px;
          }
          .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;
    }
  }
  .application-Area {
    width: 570px;
    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;
    }
  }
  :deep(.ant-image-img) {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>