aegon-dangerious 1.0.0

package/build-report/components/RecentReportsTable.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="recent-reports-table">
+    <el-table ref="tableRef" :data="reports" :fit="true" table-layout="fixed">
+      <el-table-column prop="name" label="報告名稱" min-width="240" align="left" header-align="left"
+        class-name="industry-col-name">
+        <template #default="{ row }">
+          <a v-if="row.canOpen" href="#"
+            class="industry-report-name industry-report-name__pill industry-report-name--link"
+            @click.prevent="$emit('open', row)">{{ row.name }}</a>
+          <span v-else class="industry-report-name industry-report-name__pill">{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industry" label="行業" min-width="88" align="left" header-align="left" />
+      <el-table-column prop="year" label="年份" min-width="80" align="left" header-align="left" />
+      <el-table-column prop="status" label="狀態" min-width="96" align="left" header-align="left" />
+      <el-table-column prop="initiator" label="發起人" min-width="220" class-name="industry-col-initiator" align="left"
+        header-align="left" />
+      <el-table-column prop="editor" label="編輯" min-width="360" class-name="industry-col-editor" align="left"
+        header-align="left" />
+      <el-table-column prop="permission" label="我的權限" min-width="112" align="left" header-align="left" />
+      <el-table-column prop="updatedAt" label="最近更新" min-width="112" align="left" header-align="left" />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts">
+export interface RecentReport {
+  id: string
+  name: string
+  industry: string
+  year: string
+  status: string
+  initiator: string
+  editor: string
+  permission: string
+  updatedAt: string
+  canOpen: boolean
+}
+
+export const MOCK_RECENT_REPORTS: RecentReport[] = [
+  {
+    id: '1',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2025',
+    status: '草稿',
+    initiator: '陳大文 (單位 xxxx)',
+    editor: '陳1文 (單位 xxxx) , 陳2文 (單位 xxxx) , 陳3文 (單位 xxxx) ...',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '2',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2024',
+    status: '已產生',
+    initiator: '陳中文 (單位 yyyy)',
+    editor: '陳4文 (單位 yyyy) , 陳5文 (單位 yyyy) ...',
+    permission: '無權限',
+    updatedAt: '3天前',
+    canOpen: false,
+  },
+  {
+    id: '3',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '4',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '5',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '6',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '7',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '8',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '9',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '10',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editor: '陳6文 (單位 zzzz)',
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '11',
+    name: '上海商業地產風控季報 - 2024',
+    industry: '商業地產',
+    year: '2024',
+    status: '草稿',
+    initiator: '王小明 (單位 aaaa)',
+    editor: '王2文 (單位 aaaa)',
+    permission: '可編輯',
+    updatedAt: '5天前',
+    canOpen: true,
+  },
+  {
+    id: '12',
+    name: '廣州基建項目風控月報 - 2024',
+    industry: '基建',
+    year: '2024',
+    status: '已產生',
+    initiator: '李雷 (單位 bbbb)',
+    editor: '李3文 (單位 bbbb)',
+    permission: '可編輯',
+    updatedAt: '1周前',
+    canOpen: true,
+  },
+  {
+    id: '13',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editor: '韓4文 (單位 cccc)',
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+]
+</script>
+
+<script setup lang="ts">
+import type { TableInstance } from 'element-plus'
+import { ref } from 'vue'
+
+defineProps<{
+  reports: RecentReport[]
+}>()
+
+defineEmits<{
+  open: [report: RecentReport]
+}>()
+
+const tableRef = ref<TableInstance>()
+
+function doLayout() {
+  tableRef.value?.doLayout()
+}
+
+defineExpose({ doLayout })
+</script>
+
+<style scoped>
+.recent-reports-table {
+  --rr-table-row-h: clamp(48px, calc(55.2 * 100vw / 1920), 55.2px);
+  --rr-table-header-bg: rgb(249, 250, 251);
+  --rr-table-header-fs: 14px;
+  --rr-table-header-color: #303133;
+  --rr-table-row-fs: 14px;
+  --rr-table-row-color: #606266;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+}
+
+.recent-reports-table :deep(.el-table) {
+  --el-table-header-text-color: #303133;
+  --el-table-row-hover-bg-color: #f5f7fa;
+  width: 100% !important;
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper),
+.recent-reports-table :deep(.el-table__header-wrapper),
+.recent-reports-table :deep(.el-table__body-wrapper) {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.recent-reports-table :deep(.el-table__header table),
+.recent-reports-table :deep(.el-table__body table) {
+  width: 100% !important;
+  table-layout: fixed;
+}
+
+.recent-reports-table :deep(.el-table__header .cell),
+.recent-reports-table :deep(.el-table__body .cell) {
+  padding: 0;
+  text-align: left;
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .cell) {
+  padding: 0;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell),
+.recent-reports-table :deep(.el-table__header th.el-table__cell .cell) {
+  font-size: var(--rr-table-header-fs);
+  color: var(--rr-table-header-color);
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell .cell) {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child .cell) {
+  padding-left: 10px;
+}
+
+.recent-reports-table :deep(.industry-col-name .cell) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.recent-reports-table :deep(.industry-col-initiator .cell),
+.recent-reports-table :deep(.industry-col-editor .cell) {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper::before),
+.recent-reports-table :deep(.el-table__inner-wrapper::after) {
+  display: none;
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .el-table__body) {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row),
+.recent-reports-table :deep(.el-table__body td.el-table__cell),
+.recent-reports-table :deep(.el-table__body td.el-table__cell .cell) {
+  font-size: var(--rr-table-row-fs);
+  color: var(--rr-table-row-color);
+}
+
+.recent-reports-table :deep(.industry-report-name:not(.industry-report-name--link)) {
+  color: var(--rr-table-row-color);
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row) {
+  height: var(--rr-table-row-h);
+  background: #fff;
+  cursor: pointer;
+}
+
+.recent-reports-table :deep(.el-table__body tr) {
+  background: #fff;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: #f5f7fa !important;
+  box-shadow: none !important;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__header-wrapper) {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell) {
+  font-weight: 600;
+  border-bottom: none;
+  background: var(--rr-table-header-bg);
+  height: var(--rr-table-row-h);
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell) {
+  height: var(--rr-table-row-h);
+  border-bottom: 1px solid #f0f2f5;
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell .cell) {
+  display: flex;
+  align-items: center;
+  min-height: var(--rr-table-row-h);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell:not(:first-child) .cell) {
+  white-space: nowrap;
+}
+
+.industry-report-name__pill {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  line-height: 1.4;
+}
+
+.industry-report-name {
+  color: inherit;
+}
+
+.industry-report-name--link {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.industry-report-name--link:hover {
+  color: #66b1ff;
+  text-decoration: none;
+}
+</style>