专利维权等

src/components/Descriptions.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-tabs>
+    <el-tab-pane label="基础信息">
+      <el-descriptions :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in baseLabelMap"
+          :label="label"
+          :key="key"
+        >
+          {{ baseData[key] || "无数据" }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+
+    <el-tab-pane label="第一申请人">
+      <el-descriptions :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in firstIdentityLabelMap"
+          :label="label"
+          :key="key"
+        >
+          {{ firstIdentityData[key] || "无数据" }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+
+    <el-tab-pane label="第二申请人">
+      <el-descriptions :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in secondIdentityLabelMap"
+          :label="label"
+          :key="key"
+        >
+          {{ secondIdentityData[key] || "无数据" }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from "vue";
+
+const props = defineProps<{
+  data: Record<string, any>; // 接收完整的数据
+}>();
+
+// 基础信息
+const baseData: any = computed(() => ({
+  status: props.data.status,
+  country: props.data.country,
+  operationStatus: props.data.operationStatus,
+  applicationNumber: props.data.applicationNumber,
+  updateTime: props.data.updateTime,
+  createTime: props.data.createTime,
+  contactPersonName: props.data.contactPersonName,
+  contactPersonPhone: props.data.contactPersonPhone,
+  paymentStatus: props.data.paymentStatus,
+  patentsName: props.data.patentsName,
+  // 其他基础信息...
+}));
+
+const baseLabelMap = {
+  status: "是否完成，草稿/正式",
+  country: "国家",
+  operationStatus: "操作状态",
+  applicationNumber: "申请号",
+  updateTime: "更新时间",
+  createTime: "创建时间",
+  contactPersonName: "通信联系人姓名",
+  contactPersonPhone: "通信联系人电话",
+  paymentStatus: "缴纳状态",
+  patentsName: "发明名称",
+  // 其他基础信息标签...
+};
+
+// 第一身份信息
+const firstIdentityData: any = computed(() => ({
+  name: props.data.firstApplicantName,
+  idNumber: props.data.firstIdentificationNumber,
+  address: props.data.firstAddress,
+  postalCode: props.data.firstPostalCode,
+  // 其他第一身份人信息...
+}));
+
+const firstIdentityLabelMap = {
+  name: "第一申请人姓名",
+  idNumber: "第一申请人身份证号码",
+  address: "第一申请人地址",
+  postalCode: "第一申请人邮政编码",
+  // 其他第一身份人信息标签...
+};
+
+// 第二身份信息
+const secondIdentityData: any = computed(() => ({
+  name: props.data.secondApplicantName,
+  idNumber: props.data.secondIdentificationNumber,
+  address: props.data.secondAddress,
+  postalCode: props.data.secondPostalCode,
+  // 其他第二身份人信息...
+}));
+
+const secondIdentityLabelMap = {
+  name: "第二申请人姓名",
+  idNumber: "第二申请人身份证号码",
+  address: "第二申请人地址",
+  postalCode: "第二申请人邮政编码",
+  // 其他第二身份人信息标签...
+};
+</script>
+
+<style scoped></style>

src/components/Home.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-tabs v-model="activeTab" type="card">
+    <el-tab-pane label="基础信息" name="1">
+      <el-descriptions title="基础信息" :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in baseLabelMap"
+          :key="key"
+          :label="label"
+        >
+          <template v-if="isImageField(key)">
+            <img :src="baseData[key]" alt="商标图片" style="width: 100px; height: auto;" />
+          </template>
+          <template v-else>
+            {{ baseData[key] || '无数据' }}
+          </template>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+    <el-tab-pane label="身份信息" name="2">
+      <el-descriptions title="身份信息" :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in identityLabelMap"
+          :key="key"
+          :label="label"
+        >
+          <template v-if="isImageField(key, 'identity')">
+            <img :src="identityData[key]" alt="身份证图片" style="width: 100px; height: auto;" />
+          </template>
+          <template v-else>
+            {{ identityData[key] || '无数据' }}
+          </template>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+    <el-tab-pane label="企业证件" name="3">
+      <el-descriptions title="企业证件" :border="true">
+        <el-descriptions-item
+          v-for="(label, key) in businessLabelMap"
+          :key="key"
+          :label="label"
+        >
+          <template v-if="isImageField(key, 'business')">
+            <img :src="businessData[key]" alt="企业证件图片" style="width: 100px; height: auto;" />
+          </template>
+          <template v-else>
+            {{ businessData[key] || '无数据' }}
+          </template>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+    <el-tab-pane label="下载列表" name="4">
+      <el-table :data="downloadsUrlList" style="width: 100%">
+        <el-table-column prop="file_name" label="文件名称" />
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button @click="downloadFile(row.url)" type="primary">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, computed } from 'vue';
+
+const props = defineProps<{
+  data: Record<string, any>; // 接收完整的数据
+}>();
+
+// 选中的 tab
+const activeTab = ref('1');
+
+// 基础信息
+const baseData = computed(() => ({
+  logoRegistrationNumber: props.data.logoRegistrationNumber,
+  isLogoModify: props.data.isLogoModify,
+  logoPath: props.data.logoPath,
+  applicantType: props.data.applicantType,
+  country: props.data.country,
+  corporationsName: props.data.corporationsName,
+  contactDetails: props.data.contactDetails,
+  operationStatus: props.data.operationStatus,
+  createTime: props.data.createTime,
+  updateTime: props.data.updateTime
+}));
+
+const baseLabelMap = {
+  logoRegistrationNumber: '商标注册号',
+  isLogoModify: '商标图样是否变更',
+  logoPath: '商标图片',
+  applicantType: '申请人类型',
+  country: '国家',
+  corporationsName: '企业名称',
+  contactDetails: '联系方式',
+  operationStatus: '操作状态',
+  createTime: '创建时间',
+  updateTime: '更新时间'
+};
+
+// 身份信息
+const identityData = computed(() => ({
+  applicant: props.data.applicant,
+  idCard: props.data.idCard,
+  idCardPositivelyPath: props.data.idCardPositivelyPath,
+  idCardBacksidePath: props.data.idCardBacksidePath
+}));
+
+const identityLabelMap = {
+  applicant: '申请人',
+  idCard: '证件号',
+  idCardPositivelyPath: '身份证正面',
+  idCardBacksidePath: '身份证反面'
+};
+
+// 企业证件
+const businessData = computed(() => ({
+  businessLicensePath: props.data.businessLicensePath,
+  authorizationPath: props.data.authorizationPath,
+  sealPath: props.data.sealPath
+}));
+
+const businessLabelMap = {
+  businessLicensePath: '营业执照',
+  authorizationPath: '委托书',
+  sealPath: '公章'
+};
+
+// 下载列表
+const downloadsUrlList = computed(() => props.data.downloadsUrlList);
+
+// 下载文件的方法
+const downloadFile = (url: string) => {
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", ""); // 设置为下载链接
+  document.body.appendChild(link);
+  link.click(); // 触发下载
+  document.body.removeChild(link); // 移除链接元素
+};
+
+// 判断字段是否为图片
+const isImageField = (key: string, type: string = 'base') => {
+  if (type === 'identity') {
+    return key === 'idCardPositivelyPath' || key === 'idCardBacksidePath';
+  } else if (type === 'business') {
+    return key === 'businessLicensePath' || key === 'authorizationPath' || key === 'sealPath';
+  }
+  return key === 'logoPath';
+};
+</script>
+
+<style scoped>
+</style>

src/components/download.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <el-table :data="props.fileList" style="width: 100%">
+      <el-table-column prop="fileName" label="文件名称" />
+      <el-table-column label="操作" width="150">
+        <template #default="{ row }">
+          <el-button @click="downloadFile(row.url)" type="primary"
+            >下载</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+// 接收文件列表作为 props
+const props = defineProps<{
+  fileList: Array<{ fileName: string; url: string }>;
+}>();
+
+// 下载文件的方法
+const downloadFile = (url: string) => {
+  // 创建一个链接元素
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", ""); // 设置为下载链接
+  document.body.appendChild(link);
+  link.click(); // 触发下载
+  document.body.removeChild(link); // 移除链接元素
+};
+</script>
+
+<style lang="scss" scoped>
+/* 可以在这里添加组件的样式 */
+</style>

src/views/user/Patent22.vue

@@ -102,9 +102,17 @@
       />
       <el-table-column label="操作" width="300">
         <template v-slot="scope">
-          <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
+          <el-button type="primary" text size="small" @click="onShow(scope.row)"
+            >查看</el-button
+          >
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button
+            type="primary"
+            text
+            size="small"
+            @click="onDownload(scope.row)"
+            >文件下载</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +125,12 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions :data="detailsData" :key="componentKey" />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,6 +138,8 @@
 import { ref, onMounted } from "vue";
 import { getTrademarkRenewalList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 
 const queryForm = ref<any>({
   trademarkName: "",
@@ -139,6 +155,11 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
+
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,9 +197,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {

src/views/user/Patent23.vue

@@ -104,7 +104,7 @@
         <template v-slot="scope">
           <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button type="primary" text size="small" @click="onDownload(scope.row)">文件下载</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +117,15 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +133,8 @@
 import { ref, onMounted } from "vue";
 import { getTrademarkAmendmentList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 const queryForm = ref<any>({
   trademarkName: "",
   applicationNumber: "",
@@ -139,6 +149,10 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,10 +190,18 @@ const handleSearch = () => {
   pageInit();
 };
 
-const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
 
+const onShow = (row: any) => {
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 const handleReset = () => {
   queryForm.value = {
     patentsName: "",

src/views/user/Patent24.vue

@@ -104,7 +104,7 @@
         <template v-slot="scope">
           <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button type="primary" text size="small" @click="onDownload(scope.row)">文件下载</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +117,15 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +133,8 @@
 import { ref, onMounted } from "vue";
 import { getTrademarkOppositionList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 const queryForm = ref<any>({
   trademarkName: "",
   applicationNumber: "",
@@ -139,6 +149,10 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,9 +190,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {

src/views/user/Patent25.vue

@@ -104,7 +104,7 @@
         <template v-slot="scope">
           <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button type="primary" text size="small" @click="onDownload(scope.row)">文件下载</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +117,15 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +133,8 @@
 import { ref, onMounted } from "vue";
 import { getTrademarkRejectionList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 const queryForm = ref<any>({
   trademarkName: "",
   applicationNumber: "",
@@ -139,6 +149,10 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,9 +190,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {

src/views/user/Patent26.vue

@@ -104,7 +104,7 @@
         <template v-slot="scope">
           <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button type="primary" text size="small" @click="onDownload(scope.row)">文件下载</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +117,15 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +133,8 @@
 import { ref, onMounted } from "vue";
 import { getThreeYearNonUseCancellationList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 const queryForm = ref<any>({
   trademarkName: "",
   applicationNumber: "",
@@ -139,6 +149,10 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,9 +190,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {

src/views/user/PatentApplicationRecords.vue

@@ -102,9 +102,17 @@
       />
       <el-table-column label="操作" width="300">
         <template v-slot="scope">
-          <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
+          <el-button type="primary" text size="small" @click="onShow(scope.row)"
+            >查看</el-button
+          >
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button
+            type="primary"
+            text
+            size="small"
+            @click="onDownload(scope.row)"
+            >文件下载</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -117,12 +125,23 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="[]" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import { getPatentApplicationList } from "@/api";
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Descriptions.vue";
 import { useDictStore } from "@/store/modules/useDictStore/index";
 
 const queryForm = ref<any>({
@@ -139,6 +158,11 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
+
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -178,9 +202,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {

src/views/user/TrademarkRegistrationRecords.vue

@@ -102,9 +102,17 @@
       />
       <el-table-column label="操作" width="300">
         <template v-slot="scope">
-          <el-button type="primary" text size="small" @click="onShow(scope.row)">查看</el-button>
+          <el-button type="primary" text size="small" @click="onShow(scope.row)"
+            >查看</el-button
+          >
           <el-button type="primary" text size="small">补充资料上传</el-button>
-          <el-button type="primary" text size="small">文件下载</el-button>
+          <el-button
+            type="primary"
+            text
+            size="small"
+            @click="onDownload(scope.row)"
+            >文件下载</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -117,6 +125,15 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <el-dialog v-model="descriptionsVisible" title="详情信息" width="1280">
+      <Descriptions
+        :data="detailsData"
+        :key="componentKey"
+      />
+    </el-dialog>
+    <el-dialog v-model="downloadVisible" title="附件下载" width="1080">
+      <Download :fileList="detailsData.downloadFileList" :key="componentKey" />
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +141,8 @@
 import { ref, onMounted } from "vue";
 import { getTrademarkApplicationList } from "@/api";
 import { useDictStore } from "@/store/modules/useDictStore/index";
-
+import Download from "@/components/download.vue";
+import Descriptions from "@/components/Home.vue";
 const queryForm = ref<any>({
   trademarkName: "",
   applicationNumber: "",
@@ -139,6 +157,11 @@ const pageSize = ref(5);
 const total = ref(0);
 const tableData = ref([]);
 
+const detailsData = ref<any>({});
+const descriptionsVisible = ref(false);
+const downloadVisible = ref(false);
+const componentKey = ref(0);
+
 // 字典
 const dictStore = useDictStore();
 const legal_status = dictStore.dictData.legal_status;
@@ -176,9 +199,18 @@ const handleSearch = () => {
   pageInit();
 };
 
+const onDownload = (row: any) => {
+  console.log("onDownload ===>", row);
+  detailsData.value = row;
+  downloadVisible.value = true;
+};
+
 const onShow = (row: any) => {
-  console.log('onShow row ===>', row)
-}
+  console.log("row ===>", row);
+  componentKey.value += 1;
+  detailsData.value = row;
+  descriptionsVisible.value = true;
+};
 
 const handleReset = () => {
   queryForm.value = {