企业证书详情页面增加

src/api/fta/credentialmanagement/index.ts

@@ -17,6 +17,7 @@ export interface CredentialManagementVO {
   sex: number // 性别(0男，1女)
   categoryOfEmployment: string // 行业类别
   enterpriseName: string // 企业名称
+  imageUrl: string //照片地址
 }
 
 // 企业证件 API

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>

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 {