From 58f29438cd53cf672443c23c46adc3def0876a00 Mon Sep 17 00:00:00 2001
From: xue <571013506@qq.com>
Date: Fri, 14 Jun 2024 16:08:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E4=B8=9A=E8=AF=81=E4=B9=A6=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fta/credentialmanagement/index.ts     |  1 +
 src/views/fta/credentialmanagement/detail.vue | 76 +++++++++++++++++++
 src/views/fta/credentialmanagement/index.vue  | 21 +++--
 3 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 src/views/fta/credentialmanagement/detail.vue

diff --git a/src/api/fta/credentialmanagement/index.ts b/src/api/fta/credentialmanagement/index.ts
index 786b7fc..4602441 100644
--- a/src/api/fta/credentialmanagement/index.ts
+++ b/src/api/fta/credentialmanagement/index.ts
@@ -17,6 +17,7 @@ export interface CredentialManagementVO {
   sex: number // 性别(0男，1女)
   categoryOfEmployment: string // 行业类别
   enterpriseName: string // 企业名称
+  imageUrl: string //照片地址
 }
 
 // 企业证件 API
diff --git a/src/views/fta/credentialmanagement/detail.vue b/src/views/fta/credentialmanagement/detail.vue
new file mode 100644
index 0000000..f7be0ec
--- /dev/null
+++ b/src/views/fta/credentialmanagement/detail.vue
@@ -0,0 +1,76 @@
+<template>
+  <ContentWrap>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-descriptions :column="2" border title="证件详情">
+          <el-descriptions-item label="证件类型">
+            <dict-tag :type="DICT_TYPE.ENTERPRISE_DOCUMENT_TYPE" :value="detailData.idType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="证书编号">
+            {{ detailData.certificateNumber }}
+          </el-descriptions-item>
+          <el-descriptions-item label="姓名">
+            {{ detailData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="性别">
+            <dict-tag :type="DICT_TYPE.CREDENTIAL_SEX" :value="detailData.sex" />
+          </el-descriptions-item>
+          <el-descriptions-item label="人员类型">
+            <dict-tag :type="DICT_TYPE.CREDENTIAL_PERSONNEL_TYPE" :value="detailData.personnelType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="行业类别">
+            <dict-tag :type="DICT_TYPE.CREDENTIAL_CATEGORY_OF_EMPLOYMENT" :value="detailData.categoryOfEmployment" />
+          </el-descriptions-item>
+          <el-descriptions-item label="签发机关">
+            {{ detailData.licenceIssuingAuthority }}
+          </el-descriptions-item>
+          <el-descriptions-item label="签发时间">
+            {{ formatDate(detailData.dateOfIssue, 'YYYY-MM-DD') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="过期日期">
+            {{ formatDate(detailData.expiryDate, 'YYYY-MM-DD') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="证件照片">
+            <el-image style="width: 100px; height: 100px" :src="detailData.imageUrl" :preview-src-list="[detailData.imageUrl]" fit="fill" />
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+import {CredentialManagementApi} from "@/api/fta/credentialmanagement";
+
+defineOptions({ name: 'FtaCredentialManagementDetail' })
+
+const { query } = useRoute() // 查询参数
+
+const props = defineProps({
+  id: propTypes.number.def(undefined)
+})
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref<any>({}) // 详情数据
+const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
+
+/** 获得数据 */
+const getInfo = async () => {
+  detailLoading.value = true
+  try {
+    detailData.value = await CredentialManagementApi.getCredentialManagement(props.id || queryId)
+    console.log('s数据数据叔叔j', detailData.value);
+    console.log('我看看有没有 data:', detailData.value); // 检查 detailData 是否包含 imageUrl
+  } finally {
+    detailLoading.value = false
+  }
+
+}
+defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
+
+/** 初始化 **/
+onMounted(() => {
+  getInfo()
+})
+</script>
diff --git a/src/views/fta/credentialmanagement/index.vue b/src/views/fta/credentialmanagement/index.vue
index b4e440f..430566a 100644
--- a/src/views/fta/credentialmanagement/index.vue
+++ b/src/views/fta/credentialmanagement/index.vue
@@ -100,11 +100,9 @@
           <el-button
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
-            >
-<!--            v-hasPermi="['fta:credential-management:update']"-->
-<!--          >-->
-            编辑
+            @click="handleDetail(scope.row)"
+          >
+            详情
           </el-button>
           <el-button
             link
@@ -128,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
+import {dateFormatter2} from '@/utils/formatTime'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import download from '@/utils/download'
 import { CredentialManagementApi, CredentialManagementVO } from '@/api/fta/credentialmanagement'
@@ -161,9 +159,11 @@ const queryParams = reactive({
   sex: undefined,
   categoryOfEmployment: undefined,
   enterpriseName: undefined,
+  imageUrl: undefined,
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const router = useRouter() // 路由
 
 /** 查询列表 */
 const getList = async () => {
@@ -195,6 +195,15 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 详情操作 */
+const handleDetail = (row: CredentialManagementVO) => {
+  router.push({
+    name: 'FtaCredentialManagementDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {