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 :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>
        </d-content>
      </d-layout>
    </div>
    <div class="license-info-container-page">
      <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 } from 'vue';
import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
import { getLicenseList } from '@/api/jyh';
import NoData from '@/components/NoData/NoData.vue';
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();
  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>