Situation-Awareness-Platform-Frontend/src/views/Jyh/LicenseInfo/index.vue

<template>
  <div class="license-info-container">
    <div class="license-info-content" :class="{ 'license-info-content-full': !showDetail, 'license-info-half': showDetail }">
      <d-layout>
        <d-header class="dheader">
          <d-search icon-position="left" style="width: 200px" placeholder="搜索许可证名称"></d-search>
          <d-search icon-position="left" style="width: 200px" placeholder="搜索组件名称"></d-search>
          <d-select style="width: 200px" placeholder="许可证种类"></d-select>
        </d-header>
        <d-content class="dcontent">
          <d-table :data="list" :header-bg="true">
            <d-column v-for="(column, index) in tableConfig" :field="column.field"
            :header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
            <d-column header="详情" width="100px">
              <template #default="scope">
                <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="operation" @click="showDetail = !showDetail">
              </template>
            </d-column>
          </d-table>
        </d-content>
        <d-footer class="dfooter">Footer</d-footer>
      </d-layout>
    </div>
    <div class="license-info-side" v-if="showDetail">
      <SidePanel @close="close"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Table from '@/components/AIRepair/Table.vue';
import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
const showDetail = ref(false);

const close = () => {
  showDetail.value = false;
}

const tableConfig = ref([
  {
    field: 'licenseName',
    header: '许可证名称',
    sortable: true,
    sortMethod: null
  },
  {
    field: 'licenseType',
    header: '许可证种类',
    sortable: false,
    sortMethod: null
  },
  {
    field: 'affectedComponent',
    header: '影响组件',
    sortable: true,
    sortMethod: null
  },
  {
    field: 'version',
    header: '版本',
    sortable: true,
    sortMethod: null
  }
])

const list = ref([
  {
    licenseName: 'Apache License 2.0',
    licenseType: '获准的',
    affectedComponent: 'org.apache.commons:commons-collections4',
    version: '4.4',
  },
  {
    licenseName: 'Apache License 2.0',
    licenseType: '获准的',
    affectedComponent: 'org.apache.commons:commons-collections4',
    version: '4.4',
  },
  {
    licenseName: 'Apache License 2.0',
    licenseType: '获准的',
    affectedComponent: 'org.apache.commons:commons-collections4',
    version: '4.4',
  },
  {
    licenseName: 'Apache License 2.0',
    licenseType: '获准的',
    affectedComponent: 'org.apache.commons:commons-collections4',
    version: '4.4',
  }
])
</script>

<style scoped lang="scss">

.license-info-container {
  height: calc(100vh - 250px);
  display: flex;
  gap: 8px;
  width: 100%;
  background-color: $devui-global-bg-normal;
  .license-info-content {
    flex-grow: 1;
    height: 100%;
    transition: width 0.3s;
    &.license-info-content-full {
      width: 100%;
    }
    &.license-info-half {
      width: 60%;
    }
  }
}

.dheader {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.license-info-side {
  height: 100%;
  width: 40%;
  border-left: 1px solid #e8e8e8;
}

.operation {
  cursor: pointer;
  width: 14px;
  height: 14px;
}
</style>