hi-ucs/front/src/views/home/AbilityToApplyFor.vue

<template>
  <div class="ability-to-apply-for" :class="{ all: falg }">
    <div class="title">
      <span>申请能力</span>
      <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
      <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
    </div>
    <div
      v-for="(item, index) in dataForm"
      :key="index"
      class="ability-to-apply-for-content"
    >
      <div class="dep-name">
        <span></span>
        {{ item.deptName }}
      </div>
      <template v-for="val in item.arr" :key="val.resourceId">
        <div class="item">
          <div
            class="tx"
            :class="
              val.type == '基础设施'
                ? 'sxt'
                : val.componentType == '智能算法'
                ? 'znsf'
                : val.componentType == '图层服务'
                ? 'tcfw'
                : val.componentType == '开发组件'
                ? 'kfzj'
                : val.componentType == '业务组件'
                ? 'ywzj'
                : ''
            "
          ></div>
          <div class="text">
            <div class="name">
              <span
                @click="
                  showItem(val.resourceId, val.type, val.delFlag, val.note1)
                "
                style="cursor: pointer"
              >
                {{ val.resourceName }}
              </span>
              <span>{{ val.type }}</span>
            </div>
            <div class="description">
              {{
                val.description ||
                (val.note1 &&
                  JSON.parse(val.note1)[0].channelName +
                    '等' +
                    JSON.parse(val.note1).length +
                    '个摄像头') ||
                '--'
              }}
            </div>
          </div>
          <div class="remove" @click="removeFunction(val)"></div>
        </div>
      </template>
    </div>
  </div>
  <a-modal
    v-model:visible="videoVisible"
    title="已申请摄像头列表"
    @ok="videoVisible = false"
  >
    <a-table
      :columns="columns"
      :data-source="xVideoList"
      bordered
      :pagination="{ defaultPageSize: 6 }"
    >
      <template #bodyCell="{ column, text }">
        <!-- <template>
        <a>{{ text }}</a>
      </template> -->
      </template>
    </a-table>
  </a-modal>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import { ref, defineProps } from 'vue'
  import mybus from '@/myplugins/mybus'
  const router = useRouter()
  const props = defineProps({
    dataList: { type: Array, default: null },
  })
  const falg = ref(false)
  let dataForm = ref([])
  const videoVisible = ref(false)
  const xVideoList = ref([])

  const columns = ref([
    {
      title: '摄像头名称',
      dataIndex: 'name',
    },
  ])
  // eslint-disable-next-line vue/no-setup-props-destructure
  dataForm.value = props.dataList
  console.log(dataForm.value)
  // const router = useRouter()
  // const arr =
  //   router.currentRoute.value.query.name instanceof Array
  //     ? router.currentRoute.value.query.name
  //     : [router.currentRoute.value.query.name]
  // const dataResourceId = router.currentRoute.value.query.resourceId

  // const depList = ref({
  //   Name: [],
  //   depID: [],
  // })
  //移除方法
  const removeFunction = (data) => {
    dataForm.value.map((val) => {
      if (val.arr.length > 1) {
        val.arr = val.arr.filter((item) => item.id !== data.id)
      } else {
        message.error('至少需要提交一条能力申请！')
      }
    })
    dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
  }
  // 详情
  const showItem = (id, type, delFlag, note1) => {
    if (type == '基础设施') {
      let arr = JSON.parse(note1)
      xVideoList.value = []
      arr.map((val) => {
        xVideoList.value.push({ name: val.channelName, key: val.channelId })
      })
      videoVisible.value = true
    } else {
      if (delFlag == 0) {
        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
        mybus.emit('tabsChange', { flag: id })
        router.push({
          path: '/details',
          query: {
            id: id,
          },
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .ability-to-apply-for {
    height: 2.9rem;
    overflow: hidden;

    .title {
      font-size: 0.16rem;
      color: #212121;
      border-bottom: 0.01rem #dddee1 solid;
      padding-bottom: 0.1rem;
      margin-bottom: 0.2rem;
      display: flex;
      justify-content: space-between;
    }

    .ability-to-apply-for-content {
      padding-right: 0.5rem;
      position: relative;

      .dep-name {
        color: #0558e1;
        font-size: 0.22rem;
        display: flex;
        align-items: center;
        line-height: 0.22rem;
        margin-bottom: 0.2rem;

        span {
          display: inline-block;
          width: 0.05rem;
          height: 0.05rem;
          background: #0558e1;
          border-radius: 0.05rem;
          margin-right: 0.05rem;
        }
      }

      .item {
        padding-bottom: 0.1rem;
        margin-bottom: 0.1rem;
        border-bottom: 1px solid #dddee1;
        display: flex;
        align-items: center;

        .text {
          margin-left: 0.2rem;
          width: 8.8rem;
        }
      }

      .name {
        margin-bottom: 0.2rem;

        span:first-child {
          display: inline-block;
          margin-right: 0.08rem;
          font-size: 0.18rem;
          color: #000000;
        }

        span:last-child {
          display: inline-block;
          padding: 0 0.05rem;
          background: #00b8e6;
          color: #fff;
        }
      }

      .description {
        width: 8.8rem;
        color: rgba(0, 0, 0, 0.45);
      }

      .remove {
        margin-left: 0.1rem;
        width: 0.32rem;
        height: 0.32rem;
        background: url('~@/assets/home/remove.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }

      .remove:hover {
        background: url('~@/assets/home/remove-hover.png') no-repeat;
        background-size: cover;
      }
    }
  }

  .all {
    height: unset;
    min-height: 2.9rem;
  }

  .btn {
    cursor: pointer;
  }

  .tx {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.1rem;
  }

  .sxt {
    background: url('~@/assets/home/sxt_square.png') no-repeat;
    background-size: 100%;
  }

  .znsf {
    background: url('~@/assets/home/znsf_square.png') no-repeat;
    background-size: 100%;
  }

  .tcfw {
    background: url('~@/assets/home/tcfw_square.png') no-repeat;
    background-size: 100%;
  }

  .kfzj {
    background: url('~@/assets/home/kfzj_square.png') no-repeat;
    background-size: 100%;
  }

  .ywzj {
    background: url('~@/assets/home/ywzj_square.png') no-repeat;
    background-size: 100%;
  }
</style>