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

<template>
  <div class="license-info-container">
    <div class="license-info-content">
      <d-layout>
        <d-content class="dcontent">
          <d-table class="jyh-table" v-if="list.length > 0" :data="list" style="width: 100%">
            <template #empty>
              <NoData></NoData>
            </template>
            <d-column type="index" width="40"></d-column>
            <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">
                <a class="devui-link" @click="openPanel(scope.row)">查看</a>
              </template>
            </d-column>
          </d-table>
          <NoData v-else :small="false"></NoData>
        </d-content>
      </d-layout>
    </div>
    <div class="license-info-container-page" v-if="list.length > 0">
      <d-pagination
        size="sm"
        :total="pager.total"
        v-model:pageSize="pager.pageSize"
        v-model:pageIndex="pager.pageIndex"
        :can-view-total="true"
        :can-change-page-size="true"
        :can-jump-page="true"
        :max-items="5"
      />
    </div>
  </div>
  <d-drawer v-model="showDetail" style="width: 800px; padding: 20px">
    <SidePanel :data="currentData" @close="close" />
  </d-drawer>
</template>

<script setup lang="ts">
import { ref,defineProps } from 'vue';
import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
import { getLicenseList } from '@/api/jyh';
import NoData from '@/components/NoData/NoData.vue';
const propsData = defineProps(['versionId']);
const currentData = ref(null);
const pager = ref({
  pageIndex: 1,
  pageSize: 30,
  total: 10
});
const pageOptions = ref({});
const showDetail = ref(false);

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

const openPanel = (row) => {
  currentData.value = row;
  showDetail.value = true;
};

const tableConfig = ref([
  {
    field: 'licenseName',
    header: '许可证名称',
    sortable: true,
    sortMethod: null
  },
  {
    field: 'category',
    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',
  // }
]);

const getList = async () => {
  const res: any = await getLicenseList({
    softwareId: propsData.versionId,
    componentId: '',
    current: pager.value.pageIndex,
    size: pager.value.pageSize,
  });
  if (!res.error) {
    console.log(res);
    list.value = res.data.data.records;
    pager.value.total = res.data.data.records.length;
  } else {
    list.value = [];
  }
};
getList();
</script>

<style scoped lang="scss">
.license-info-container {
  display: flex;
  gap: 12px;
  flex-direction: column;
  width: 100%;
  .license-info-content {
    background-color: $devui-global-bg-normal;
    border-radius: 10px;
  }
  &-page {
    width: 100%;
    display: flex;
    justify-content: end;
  }
}

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

.dfooter {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

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