feat: 组织预警列表

src/views/Jyh/PersonalCenter/Detail/PersonageSubscription.vue

@@ -0,0 +1,42 @@
+<template>
+  <Card simple class="jyh-card mt-3">
+    <div class="card-title">个人订阅列表</div>
+    <div class="mb-3">
+      <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="tableData">
+        <d-column field="code" header="订阅时间"></d-column>
+        <d-column field="name" header="软件/组件名称"></d-column>
+        <d-column field="detail" header="版本号"></d-column>
+        <d-column field="owner" header="订阅人"></d-column>
+        <d-column header="操作" width="100">
+          <template #default="scope">
+            <d-popover>
+              <d-button variant="text" color="primary"> 取消订阅 </d-button>
+              <template #content>
+                <div class="popover-content">
+                  <p>确定取消{{ scope.row.name }}订阅吗？</p>
+                  <footer>
+                    <d-button @click="hidden" size="sm">取消</d-button>
+                    <d-button @click="hidden" size="sm" color="danger" variant="solid">确认</d-button>
+                  </footer>
+                </div>
+              </template>
+            </d-popover>
+          </template>
+        </d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const tableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin' }]);
+const hidden = () => {
+  // 模拟body点击操作
+  document.querySelector('body')?.click();
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+</style>