Compare commits
No commits in common. "09469888b4bae66a2cc5891d218260db14510378" and "b63306890dde3eda7e163df704b62be3b881f9ad" have entirely different histories.
09469888b4
...
b63306890d
@ -276,120 +276,6 @@ const mockValuationDetails = valuationRecords.map((record) => ({
|
||||
...record,
|
||||
}))
|
||||
|
||||
const mockAppUsers = [
|
||||
{
|
||||
id: 11111111,
|
||||
phone: '15021982682',
|
||||
wechat: 'f1498480844',
|
||||
created_at: '2024-01-15T10:30:00Z',
|
||||
notes: '测试用户1',
|
||||
remaining_count: 1,
|
||||
user_type: '体验用户',
|
||||
},
|
||||
{
|
||||
id: 11111112,
|
||||
phone: '13800138002',
|
||||
wechat: 'wx_limming2024',
|
||||
created_at: '2024-02-20T14:20:00Z',
|
||||
notes: '付费用户',
|
||||
remaining_count: 5,
|
||||
user_type: '付费用户',
|
||||
},
|
||||
{
|
||||
id: 11111113,
|
||||
phone: '13800138003',
|
||||
wechat: null,
|
||||
created_at: '2024-03-10T08:45:00Z',
|
||||
notes: null,
|
||||
remaining_count: 0,
|
||||
user_type: '体验用户',
|
||||
},
|
||||
{
|
||||
id: 11111114,
|
||||
phone: '13800138004',
|
||||
wechat: 'chenjun_vip',
|
||||
created_at: '2024-04-05T11:30:00Z',
|
||||
notes: 'VIP用户',
|
||||
remaining_count: 10,
|
||||
user_type: 'VIP',
|
||||
},
|
||||
{
|
||||
id: 11111115,
|
||||
phone: '13800138005',
|
||||
wechat: 'liuxia888',
|
||||
created_at: '2024-05-12T16:15:00Z',
|
||||
notes: '体验用户',
|
||||
remaining_count: 3,
|
||||
user_type: '体验用户',
|
||||
},
|
||||
{
|
||||
id: 11111116,
|
||||
phone: '13800138006',
|
||||
wechat: null,
|
||||
created_at: '2024-06-18T09:00:00Z',
|
||||
notes: '新注册用户',
|
||||
remaining_count: 2,
|
||||
user_type: '体验用户',
|
||||
},
|
||||
{
|
||||
id: 11111117,
|
||||
phone: '13800138007',
|
||||
wechat: 'zhaolei2024',
|
||||
created_at: '2024-07-22T12:45:00Z',
|
||||
notes: null,
|
||||
remaining_count: 0,
|
||||
user_type: '体验用户',
|
||||
},
|
||||
{
|
||||
id: 11111118,
|
||||
phone: '13800138008',
|
||||
wechat: 'sunmei_user',
|
||||
created_at: '2024-08-30T15:20:00Z',
|
||||
notes: '活跃用户',
|
||||
remaining_count: 7,
|
||||
user_type: 'VIP',
|
||||
},
|
||||
]
|
||||
|
||||
const defaultInvoiceHeaders = [
|
||||
{
|
||||
company_name: '成都文创科技有限公司',
|
||||
tax_number: '91510100MA7XYZ1234',
|
||||
register_address: '四川省成都市高新区天府三街666号',
|
||||
register_phone: '028-66666666',
|
||||
bank_name: '招商银行成都分行',
|
||||
bank_account: '6225 6666 8888 0000',
|
||||
email: 'finance@scwenchuang.com',
|
||||
},
|
||||
{
|
||||
company_name: '天府文化发展有限公司',
|
||||
tax_number: '91510100678912345K',
|
||||
register_address: '四川省成都市武侯区科华北路88号',
|
||||
register_phone: '028-12345678',
|
||||
bank_name: '中国工商银行成都分行',
|
||||
bank_account: '6212 8888 0000 9999',
|
||||
email: 'invoice@tfculture.com',
|
||||
},
|
||||
]
|
||||
|
||||
const defaultOperationLogs = [
|
||||
{
|
||||
time: '2025-10-31 18:30:30',
|
||||
operator: 'admin',
|
||||
records: ['剩余估值次数：0 -> 1', '类型：付费估值', '备注：新用户'],
|
||||
},
|
||||
{
|
||||
time: '2025-10-31 18:30:30',
|
||||
operator: 'admin',
|
||||
records: ['剩余估值次数：2 -> 1', '类型：付费估值', '备注：退款'],
|
||||
},
|
||||
{
|
||||
time: '2025-10-31 18:30:30',
|
||||
operator: 'admin',
|
||||
records: ['用户备注：111111111111 -> 22222222222222222222'],
|
||||
},
|
||||
]
|
||||
|
||||
export default {
|
||||
login: (data) => request.post('/base/access_token', data, { noNeedToken: true }),
|
||||
getUserInfo: () => request.get('/base/userinfo'),
|
||||
@ -431,8 +317,76 @@ export default {
|
||||
getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
|
||||
// app users (客户端用户管理) - 使用现有的后端接口
|
||||
getAppUserList: (params = {}) => {
|
||||
// Mock 数据
|
||||
const mockUsers = [
|
||||
{
|
||||
id: 11111111,
|
||||
phone: '15021982682',
|
||||
wechat: 'f1498480844',
|
||||
created_at: '2024-01-15T10:30:00Z',
|
||||
notes: '测试用户1',
|
||||
remaining_count: 1
|
||||
},
|
||||
{
|
||||
id: 11111112,
|
||||
phone: '13800138002',
|
||||
wechat: 'wx_limming2024',
|
||||
created_at: '2024-02-20T14:20:00Z',
|
||||
notes: '付费用户',
|
||||
remaining_count: 5
|
||||
},
|
||||
{
|
||||
id: 11111113,
|
||||
phone: '13800138003',
|
||||
wechat: null,
|
||||
created_at: '2024-03-10T08:45:00Z',
|
||||
notes: null,
|
||||
remaining_count: 0
|
||||
},
|
||||
{
|
||||
id: 11111114,
|
||||
phone: '13800138004',
|
||||
wechat: 'chenjun_vip',
|
||||
created_at: '2024-04-05T11:30:00Z',
|
||||
notes: 'VIP用户',
|
||||
remaining_count: 10
|
||||
},
|
||||
{
|
||||
id: 11111115,
|
||||
phone: '13800138005',
|
||||
wechat: 'liuxia888',
|
||||
created_at: '2024-05-12T16:15:00Z',
|
||||
notes: '体验用户',
|
||||
remaining_count: 3
|
||||
},
|
||||
{
|
||||
id: 11111116,
|
||||
phone: '13800138006',
|
||||
wechat: null,
|
||||
created_at: '2024-06-18T09:00:00Z',
|
||||
notes: '新注册用户',
|
||||
remaining_count: 2
|
||||
},
|
||||
{
|
||||
id: 11111117,
|
||||
phone: '13800138007',
|
||||
wechat: 'zhaolei2024',
|
||||
created_at: '2024-07-22T12:45:00Z',
|
||||
notes: null,
|
||||
remaining_count: 0
|
||||
},
|
||||
{
|
||||
id: 11111118,
|
||||
phone: '13800138008',
|
||||
wechat: 'sunmei_user',
|
||||
created_at: '2024-08-30T15:20:00Z',
|
||||
notes: '活跃用户',
|
||||
remaining_count: 7
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟分页和搜索
|
||||
let filteredUsers = [...mockAppUsers]
|
||||
let filteredUsers = [...mockUsers]
|
||||
|
||||
// 手机号搜索
|
||||
if (params.phone) {
|
||||
@ -461,32 +415,13 @@ export default {
|
||||
resolve({
|
||||
data: paginatedUsers,
|
||||
total: filteredUsers.length,
|
||||
page,
|
||||
page_size: pageSize,
|
||||
page: page,
|
||||
page_size: pageSize
|
||||
})
|
||||
}, 300)
|
||||
}, 300) // 模拟网络延迟
|
||||
})
|
||||
},
|
||||
getAppUserById: (params = {}) =>
|
||||
new Promise((resolve) => {
|
||||
const id = Number(params.id)
|
||||
const user = mockAppUsers.find((item) => item.id === id) || {}
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
baseInfo: {
|
||||
id: user.id,
|
||||
phone: user.phone,
|
||||
wechat: user.wechat,
|
||||
register_time: user.created_at,
|
||||
notes: user.notes,
|
||||
remaining_count: user.remaining_count,
|
||||
user_type: user.user_type || '体验用户',
|
||||
},
|
||||
invoiceHeaders: defaultInvoiceHeaders,
|
||||
operationLogs: defaultOperationLogs,
|
||||
})
|
||||
}, 300)
|
||||
}),
|
||||
getAppUserById: (params = {}) => request.get('/app-user/detail', { params }),
|
||||
createAppUser: (data = {}) => request.post('/app-user/register', data),
|
||||
updateAppUser: (data = {}) => request.post('/app-user/update', data),
|
||||
deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
|
||||
|
||||
@ -1,222 +0,0 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch, h } from 'vue'
|
||||
import { NModal, NButton, NTabs, NTabPane, NDataTable, NSpin } from 'naive-ui'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
const activeTab = ref('basic')
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(show) => {
|
||||
if (!show) {
|
||||
activeTab.value = 'basic'
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const baseInfo = computed(() => props.data?.baseInfo || {})
|
||||
const invoiceHeaders = computed(() => props.data?.invoiceHeaders || [])
|
||||
const operationLogs = computed(() => props.data?.operationLogs || [])
|
||||
|
||||
const invoiceColumns = [
|
||||
{ title: '公司名称', key: 'company_name', ellipsis: { tooltip: true } },
|
||||
{ title: '公司税号', key: 'tax_number', ellipsis: { tooltip: true } },
|
||||
{ title: '注册地址', key: 'register_address', ellipsis: { tooltip: true } },
|
||||
{ title: '注册电话', key: 'register_phone' },
|
||||
{ title: '开户银行', key: 'bank_name' },
|
||||
{ title: '银行账号', key: 'bank_account', ellipsis: { tooltip: true } },
|
||||
{ title: '邮箱', key: 'email', ellipsis: { tooltip: true } },
|
||||
]
|
||||
|
||||
const logColumns = [
|
||||
{ title: '操作时间', key: 'time', width: 160 },
|
||||
{ title: '操作人', key: 'operator', width: 100 },
|
||||
{
|
||||
title: '操作记录',
|
||||
key: 'records',
|
||||
render: (row) =>
|
||||
h(
|
||||
'div',
|
||||
{ class: 'log-record' },
|
||||
row.records?.map((item, idx) => h('div', { key: idx }, item))
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
:show="visible"
|
||||
preset="card"
|
||||
title="用户信息"
|
||||
style="width: 780px"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
:mask-closable="false"
|
||||
@update:show="$emit('update:visible', $event)"
|
||||
>
|
||||
<NSpin :show="loading">
|
||||
<div class="user-detail-modal">
|
||||
<NTabs v-model:value="activeTab" type="card" size="large" class="detail-tabs">
|
||||
<NTabPane name="basic" tab="基础信息">
|
||||
<div class="basic-info">
|
||||
<div class="info-row">
|
||||
<span class="label">ID：</span>
|
||||
<span class="value">{{ baseInfo.id || '-' }}</span>
|
||||
<span class="label">手机号：</span>
|
||||
<span class="value">{{ baseInfo.phone || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">微信号：</span>
|
||||
<span class="value">{{ baseInfo.wechat || '-' }}</span>
|
||||
<span class="label">注册时间：</span>
|
||||
<span class="value">{{ baseInfo.register_time || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">剩余次数：</span>
|
||||
<span class="value">{{ baseInfo.remaining_count ?? '-' }}</span>
|
||||
<span class="label">用户类型：</span>
|
||||
<span class="value">{{ baseInfo.user_type || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row notes">
|
||||
<span class="label">备注：</span>
|
||||
<div class="notes-content">{{ baseInfo.notes || '暂无备注' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</NTabPane>
|
||||
<NTabPane name="invoice" tab="发票抬头">
|
||||
<NDataTable
|
||||
class="section-table"
|
||||
:columns="invoiceColumns"
|
||||
:data="invoiceHeaders"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
>
|
||||
<template #empty>
|
||||
<div class="empty">暂无发票抬头信息</div>
|
||||
</template>
|
||||
</NDataTable>
|
||||
</NTabPane>
|
||||
<NTabPane name="logs" tab="操作记录">
|
||||
<NDataTable
|
||||
class="section-table"
|
||||
:columns="logColumns"
|
||||
:data="operationLogs"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
>
|
||||
<template #empty>
|
||||
<div class="empty">暂无操作记录</div>
|
||||
</template>
|
||||
</NDataTable>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<div class="action-buttons">
|
||||
<NButton @click="handleClose">取消</NButton>
|
||||
<NButton type="primary" @click="handleClose">确定</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NSpin>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-detail-modal {
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.detail-tabs :deep(.n-tabs-nav-scroll-content) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.info-row.notes {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 80px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.notes-content {
|
||||
flex: 1;
|
||||
min-height: 60px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ebedf0;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.section-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-table :deep(.n-data-table-th) {
|
||||
background: #f6f7fb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-table :deep(.n-data-table-th),
|
||||
.section-table :deep(.n-data-table-td) {
|
||||
font-size: 14px;
|
||||
padding: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-table .empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.log-record div + div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -16,7 +16,6 @@ import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
||||
import CrudModal from '@/components/table/CrudModal.vue'
|
||||
import CrudTable from '@/components/table/CrudTable.vue'
|
||||
import LimitSettingModal from './LimitSettingModal.vue'
|
||||
import UserDetailModal from './UserDetailModal.vue'
|
||||
|
||||
import { formatDate, renderIcon } from '@/utils'
|
||||
import { useCRUD } from '@/composables'
|
||||
@ -33,14 +32,6 @@ const vPermission = resolveDirective('permission')
|
||||
const limitModalVisible = ref(false)
|
||||
const currentUser = ref(null)
|
||||
|
||||
const detailModalVisible = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const userDetail = ref({
|
||||
baseInfo: {},
|
||||
invoiceHeaders: [],
|
||||
operationLogs: [],
|
||||
})
|
||||
|
||||
const {
|
||||
modalVisible,
|
||||
modalTitle,
|
||||
@ -165,30 +156,9 @@ const columns = [
|
||||
]
|
||||
|
||||
// 查看用户详情
|
||||
async function handleViewDetail(row) {
|
||||
detailModalVisible.value = true
|
||||
detailLoading.value = true
|
||||
try {
|
||||
const detail = await api.getAppUserById({ id: row.id })
|
||||
const baseInfoFromServer = detail?.baseInfo || {}
|
||||
userDetail.value = {
|
||||
baseInfo: {
|
||||
...baseInfoFromServer,
|
||||
id: row.id,
|
||||
phone: row.phone,
|
||||
wechat: row.wechat,
|
||||
register_time: row.created_at ? formatDate(row.created_at) : '-',
|
||||
notes: row.notes,
|
||||
remaining_count: row.remaining_count,
|
||||
},
|
||||
invoiceHeaders: detail?.invoiceHeaders || [],
|
||||
operationLogs: detail?.operationLogs || [],
|
||||
}
|
||||
} catch (error) {
|
||||
$message.error('获取用户详情失败')
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
function handleViewDetail(row) {
|
||||
// 这里可以跳转到详情页面或打开详情弹窗
|
||||
$message.info('查看用户详情功能待实现')
|
||||
}
|
||||
|
||||
// 次数设置
|
||||
@ -301,12 +271,6 @@ const validateForm = {
|
||||
:user-data="currentUser"
|
||||
@save="handleSaveLimitSetting"
|
||||
/>
|
||||
|
||||
<!-- 用户详情弹窗 -->
|
||||
<UserDetailModal
|
||||
v-model:visible="detailModalVisible"
|
||||
:data="userDetail"
|
||||
:loading="detailLoading"
|
||||
/>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch, h } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NTag,
|
||||
@ -8,12 +8,10 @@ import {
|
||||
NSpin,
|
||||
NImage,
|
||||
NImageGroup,
|
||||
NDataTable,
|
||||
} from 'naive-ui'
|
||||
|
||||
import { formatDate } from '@/utils'
|
||||
import TheIcon from '@/components/icon/TheIcon.vue'
|
||||
import CertificateModal from './CertificateModal.vue'
|
||||
|
||||
import { getStatusConfig } from '../constants'
|
||||
import {
|
||||
@ -37,11 +35,6 @@ const emit = defineEmits(['back', 'approve', 'reject'])
|
||||
|
||||
const activeDetailTab = ref('audit')
|
||||
|
||||
// 证书弹窗相关状态
|
||||
const certificateModalVisible = ref(false)
|
||||
const certificateModalMode = ref('upload') // 'upload' 或 'view'
|
||||
const certificateData = ref({})
|
||||
|
||||
watch(
|
||||
() => props.detailData?.id,
|
||||
() => {
|
||||
@ -52,23 +45,20 @@ watch(
|
||||
const detailSections = computed(() => {
|
||||
const detail = props.detailData
|
||||
if (!detail) return []
|
||||
|
||||
const sections = [
|
||||
return [
|
||||
{
|
||||
key: 'basic',
|
||||
title: '基础信息',
|
||||
fields: [
|
||||
columns: [
|
||||
{ label: '资产名称', type: 'text', value: detail.asset_name || '-' },
|
||||
{ label: '所属机构', type: 'text', value: detail.institution || '-' },
|
||||
{ label: '所属行业', type: 'text', value: detail.industry || '-' },
|
||||
{ label: '企业简介', type: 'text', value: detail.company_profile || '-' },
|
||||
{ label: '业务简介', type: 'text', value: detail.business_profile || '-' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'finance',
|
||||
title: '财务状况',
|
||||
fields: [
|
||||
columns: [
|
||||
{ label: '近12个月机构营收/万元', type: 'text', value: formatNumberValue(detail.annual_revenue) },
|
||||
{ label: '近12个月机构研发投入/万元', type: 'text', value: formatNumberValue(detail.rd_investment) },
|
||||
{ label: '近三年机构收益/万元', type: 'list', value: formatThreeYearIncome(detail.three_year_income) },
|
||||
@ -78,7 +68,7 @@ const detailSections = computed(() => {
|
||||
{
|
||||
key: 'tech',
|
||||
title: '非遗等级与技术',
|
||||
fields: [
|
||||
columns: [
|
||||
{ label: '非遗传承人等级', type: 'text', value: detail.inheritor_level || '-' },
|
||||
{ label: '非遗传承人年龄水平及数量', type: 'list', value: formatAgeDistribution(detail.inheritor_age_count) },
|
||||
{ label: '非遗传承人等级证书', type: 'images', value: detail.inheritor_certificates || [] },
|
||||
@ -95,7 +85,7 @@ const detailSections = computed(() => {
|
||||
{
|
||||
key: 'promotion',
|
||||
title: '非遗应用与推广',
|
||||
fields: [
|
||||
columns: [
|
||||
{ label: '非遗资产应用成熟度', type: 'text', value: detail.application_maturity || detail.implementation_stage || '-' },
|
||||
{ label: '非遗资产应用覆盖范围', type: 'text', value: detail.application_coverage || detail.coverage_area || '-' },
|
||||
{ label: '非遗资产跨界合作深度', type: 'text', value: detail.cooperation_depth || detail.collaboration_type || '-' },
|
||||
@ -106,7 +96,7 @@ const detailSections = computed(() => {
|
||||
{
|
||||
key: 'products',
|
||||
title: '非遗资产衍生商品信息',
|
||||
fields: [
|
||||
columns: [
|
||||
{ label: '代表产品近12个月销售数量', type: 'text', value: formatNumberValue(detail.sales_volume) },
|
||||
{ label: '商品链接浏览量', type: 'text', value: formatNumberValue(detail.link_views) },
|
||||
{ label: '发行量', type: 'text', value: detail.circulation || detail.scarcity_level || '-' },
|
||||
@ -116,101 +106,9 @@ const detailSections = computed(() => {
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// 为每个 section 生成 NDataTable 需要的 columns 和 data
|
||||
return sections.map(section => {
|
||||
const columns = [
|
||||
{
|
||||
title: '字段名',
|
||||
key: 'fieldName',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
},
|
||||
...section.fields.map(field => ({
|
||||
title: field.label,
|
||||
key: field.label,
|
||||
width: 200,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
render: (row) => {
|
||||
const fieldData = row[field.label]
|
||||
if (!fieldData) return '-'
|
||||
|
||||
if (fieldData.type === 'list') {
|
||||
if (fieldData.value && fieldData.value.length) {
|
||||
return h('div', { class: 'cell-multi' },
|
||||
fieldData.value.map(item => h('span', item))
|
||||
)
|
||||
}
|
||||
return '-'
|
||||
} else if (fieldData.type === 'images') {
|
||||
if (fieldData.value && fieldData.value.length) {
|
||||
return h(NImageGroup, {}, () =>
|
||||
fieldData.value.map(img =>
|
||||
h(NImage, {
|
||||
src: img,
|
||||
width: 72,
|
||||
height: 48,
|
||||
objectFit: 'cover',
|
||||
style: 'margin-right: 8px;'
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
return '-'
|
||||
} else {
|
||||
return fieldData.value || '-'
|
||||
}
|
||||
}
|
||||
})),
|
||||
]
|
||||
|
||||
const data = [
|
||||
{
|
||||
fieldName: '用户输入',
|
||||
...section.fields.reduce((acc, field) => {
|
||||
acc[field.label] = field
|
||||
return acc
|
||||
}, {}),
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
...section,
|
||||
columns,
|
||||
data,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const calcFlow = computed(() => props.detailData?.calculation_result?.flow || [])
|
||||
|
||||
// 证书相关功能
|
||||
const handleUploadCertificate = () => {
|
||||
certificateModalMode.value = 'upload'
|
||||
certificateData.value = {}
|
||||
certificateModalVisible.value = true
|
||||
}
|
||||
|
||||
const handleViewCertificate = () => {
|
||||
certificateModalMode.value = 'view'
|
||||
// 这里可以从 props.detailData 中获取已上传的证书数据
|
||||
certificateData.value = {
|
||||
title: '非遗传承人等级证书',
|
||||
description: '非遗传承人等级证书相关文件',
|
||||
files: props.detailData?.certificates || []
|
||||
}
|
||||
certificateModalVisible.value = true
|
||||
}
|
||||
|
||||
const handleCertificateConfirm = (data) => {
|
||||
console.log('证书数据:', data)
|
||||
// 这里可以调用 API 保存证书数据
|
||||
$message?.success('证书上传成功')
|
||||
certificateModalVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -221,7 +119,7 @@ const handleCertificateConfirm = (data) => {
|
||||
<TheIcon icon="mdi:arrow-left" :size="16" class="mr-4" />
|
||||
返回审核列表
|
||||
</button>
|
||||
<!-- <div class="detail-title">
|
||||
<div class="detail-title">
|
||||
<h2>{{ detailData?.asset_name || '审核详情' }}</h2>
|
||||
<NTag size="small" :type="getStatusConfig(detailData?.status).type">
|
||||
{{ getStatusConfig(detailData?.status).text }}
|
||||
@ -232,16 +130,21 @@ const handleCertificateConfirm = (data) => {
|
||||
<span>微信号：{{ detailData?.wechat || '-' }}</span>
|
||||
<span>提交时间：{{ formatDate(detailData?.created_at) }}</span>
|
||||
<span>审核时间：{{ detailData?.reviewed_at ? formatDate(detailData?.reviewed_at) : '-' }}</span>
|
||||
</p> -->
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="mode === 'approve' && detailData?.status === 'pending'" class="detail-actions">
|
||||
<NButton tertiary type="error" @click="emit('reject')">
|
||||
<TheIcon icon="mdi:close-circle-outline" :size="16" class="mr-4" />
|
||||
拒绝
|
||||
</NButton>
|
||||
<NButton type="primary" @click="emit('approve')">
|
||||
<TheIcon icon="mdi:check-circle-outline" :size="16" class="mr-4" />
|
||||
通过
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NTabs
|
||||
v-model:value="activeDetailTab"
|
||||
type="line"
|
||||
size="large"
|
||||
class="audit-tabs"
|
||||
>
|
||||
<NTabs v-model:value="activeDetailTab">
|
||||
<NTabPane name="audit" tab="审核信息">
|
||||
<NSpin :show="loading">
|
||||
<div v-for="section in detailSections" :key="section.key" class="detail-section">
|
||||
@ -249,17 +152,47 @@ const handleCertificateConfirm = (data) => {
|
||||
<span class="dot" />
|
||||
<span>{{ section.title }}</span>
|
||||
</div>
|
||||
<NDataTable
|
||||
:columns="section.columns"
|
||||
:data="section.data"
|
||||
:bordered="true"
|
||||
:single-line="false"
|
||||
:scroll-x="section.fields.length * 200 + 120"
|
||||
>
|
||||
<template #empty>
|
||||
<span>暂无数据</span>
|
||||
<div class="table-wrapper">
|
||||
<table class="info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="first-col">字段名</th>
|
||||
<th v-for="column in section.columns" :key="column.label">
|
||||
{{ column.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="first-col">用户输入</td>
|
||||
<td v-for="column in section.columns" :key="column.label">
|
||||
<div v-if="column.type === 'list'" class="cell-multi">
|
||||
<template v-if="column.value && column.value.length">
|
||||
<span v-for="(item, idx) in column.value" :key="idx">{{ item }}</span>
|
||||
</template>
|
||||
</NDataTable>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'images'">
|
||||
<template v-if="column.value && column.value.length">
|
||||
<NImageGroup>
|
||||
<NImage
|
||||
v-for="(img, idx) in column.value"
|
||||
:key="idx"
|
||||
width="72"
|
||||
height="48"
|
||||
:src="img"
|
||||
object-fit="cover"
|
||||
/>
|
||||
</NImageGroup>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<span v-else>{{ column.value || '-' }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</NSpin>
|
||||
</NTabPane>
|
||||
@ -297,34 +230,6 @@ const handleCertificateConfirm = (data) => {
|
||||
</NSpin>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<!-- 证书按钮 -->
|
||||
<div class="certificate-actions">
|
||||
<NButton
|
||||
v-if="mode === 'approve'"
|
||||
type="primary"
|
||||
@click="handleUploadCertificate"
|
||||
>
|
||||
<TheIcon icon="mdi:upload" :size="16" class="mr-4" />
|
||||
上传证书
|
||||
</NButton>
|
||||
<NButton
|
||||
v-else
|
||||
type="info"
|
||||
@click="handleViewCertificate"
|
||||
>
|
||||
<TheIcon icon="mdi:eye" :size="16" class="mr-4" />
|
||||
查看证书
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<!-- 证书弹窗 -->
|
||||
<CertificateModal
|
||||
v-model:visible="certificateModalVisible"
|
||||
:mode="certificateModalMode"
|
||||
:certificate-data="certificateData"
|
||||
@confirm="handleCertificateConfirm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -333,20 +238,13 @@ const handleCertificateConfirm = (data) => {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
.certificate-actions {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin: -16px 0px 10px ;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
@ -392,62 +290,51 @@ const handleCertificateConfirm = (data) => {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.audit-tabs :deep(.n-tabs-nav) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.audit-tabs :deep(.n-tabs-tab) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1d2129;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.audit-tabs :deep(.n-tabs-tab.n-tabs-tab--active) {
|
||||
color: #ff6f3b;
|
||||
}
|
||||
|
||||
.audit-tabs :deep(.n-tabs-nav__line) {
|
||||
background-color: #ff6f3b;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.section-title .dot {
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
background: #3b82f6;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.detail-section :deep(.n-data-table) {
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #f9fafe;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.detail-section :deep(.n-data-table-th) {
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
border: 1px solid #e5e6eb;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
min-width: 140px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.info-table .first-col {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
background: #f1f2f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-section :deep(.n-data-table-th:first-child) {
|
||||
background: #f1f2f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-section :deep(.n-data-table-td:first-child) {
|
||||
background: #f1f2f5;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
.info-table th:not(.first-col),
|
||||
.info-table td:not(.first-col) {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.cell-multi {
|
||||
@ -532,6 +419,4 @@ const handleCertificateConfirm = (data) => {
|
||||
color: #999;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,485 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import {
|
||||
NModal,
|
||||
NCard,
|
||||
NButton,
|
||||
NUpload,
|
||||
NText,
|
||||
NImage
|
||||
} from 'naive-ui'
|
||||
// 临时移除图标导入以解决模块解析问题
|
||||
// import { DownloadIcon } from '@vicons/tabler'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
certificateData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'upload', // 'upload' 或 'view'
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'confirm'])
|
||||
|
||||
const formData = ref({
|
||||
reportFiles: [],
|
||||
certificateFiles: [],
|
||||
})
|
||||
|
||||
const reportFileList = ref([])
|
||||
const certificateFileList = ref([])
|
||||
|
||||
// 监听弹窗打开，初始化数据
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.mode === 'view') {
|
||||
// 查看模式，加载已有数据
|
||||
reportFileList.value = props.certificateData?.reportFiles || []
|
||||
certificateFileList.value = props.certificateData?.certificateFiles || []
|
||||
} else {
|
||||
// 上传模式，清空数据
|
||||
formData.value = {
|
||||
reportFiles: [],
|
||||
certificateFiles: [],
|
||||
}
|
||||
reportFileList.value = []
|
||||
certificateFileList.value = []
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 确认操作
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', {
|
||||
reportFiles: formData.value.reportFiles,
|
||||
certificateFiles: formData.value.certificateFiles,
|
||||
})
|
||||
handleClose()
|
||||
}
|
||||
|
||||
// 文件上传前的处理
|
||||
const beforeUpload = (data) => {
|
||||
const { file } = data
|
||||
const isImage = file.type.startsWith('image/')
|
||||
const isPdf = file.type === 'application/pdf'
|
||||
const isWord = file.type.includes('word') || file.type.includes('document')
|
||||
const isVideo = file.type.startsWith('video/')
|
||||
|
||||
if (!isImage && !isPdf && !isWord && !isVideo) {
|
||||
$message.error('只能上传图片、PDF、Word文档或视频文件')
|
||||
return false
|
||||
}
|
||||
|
||||
const isLt50M = file.size / 1024 / 1024 < 50
|
||||
if (!isLt50M) {
|
||||
$message.error('文件大小不能超过50MB')
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 报告文件上传变化
|
||||
const handleReportUploadChange = ({ fileList: newFileList }) => {
|
||||
reportFileList.value = newFileList
|
||||
formData.value.reportFiles = newFileList.map(file => ({
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
url: file.url,
|
||||
type: file.type
|
||||
}))
|
||||
}
|
||||
|
||||
// 证书文件上传变化
|
||||
const handleCertificateUploadChange = ({ fileList: newFileList }) => {
|
||||
certificateFileList.value = newFileList
|
||||
formData.value.certificateFiles = newFileList.map(file => ({
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
url: file.url,
|
||||
type: file.type
|
||||
}))
|
||||
}
|
||||
|
||||
// 移除文件
|
||||
const handleRemove = () => {
|
||||
return true
|
||||
}
|
||||
|
||||
// 移除证书文件
|
||||
const removeCertificateFile = (index) => {
|
||||
certificateFileList.value.splice(index, 1)
|
||||
formData.value.certificateFiles = certificateFileList.value.map(file => ({
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
url: file.url || '',
|
||||
type: file.type || ''
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
// 下载报告
|
||||
const handleDownloadReport = () => {
|
||||
// 这里实现下载原版报告的逻辑
|
||||
console.log('下载原版报告')
|
||||
// TODO: 实现实际的下载功能
|
||||
}
|
||||
|
||||
// 文件预览
|
||||
const handlePreview = (file) => {
|
||||
// 图片和PDF可以直接预览
|
||||
if (file.type?.startsWith('image/') || file.type === 'application/pdf') {
|
||||
window.open(file.url || '', '_blank')
|
||||
} else {
|
||||
console.log('此文件类型不支持预览')
|
||||
// TODO: 添加用户提示
|
||||
}
|
||||
}
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
return props.mode === 'upload' ? '上传' : '查看'
|
||||
})
|
||||
|
||||
const isUploadMode = computed(() => props.mode === 'upload')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
:show="visible"
|
||||
:mask-closable="false"
|
||||
preset="card"
|
||||
:title="modalTitle"
|
||||
class="certificate-modal"
|
||||
style="width: 700px"
|
||||
@update:show="handleClose"
|
||||
>
|
||||
<!-- 上传模式 -->
|
||||
<div v-if="isUploadMode" class="certificate-content">
|
||||
<!-- 报告上传部分 -->
|
||||
<div class="upload-section">
|
||||
<div class="section-title">报告:</div>
|
||||
<div class="upload-content">
|
||||
<div class="download-section">
|
||||
<NButton text type="primary" @click="handleDownloadReport">
|
||||
点击下载原版报告
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<NUpload
|
||||
v-model:file-list="reportFileList"
|
||||
:max="5"
|
||||
list-type="image-card"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleReportUploadChange"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
</NUpload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 证书上传部分 -->
|
||||
<div class="upload-section">
|
||||
<div class="section-title">证书:</div>
|
||||
<div class="upload-content">
|
||||
<NUpload
|
||||
v-model:file-list="certificateFileList"
|
||||
:max="5"
|
||||
list-type="image-card"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleCertificateUploadChange"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
</NUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看模式 -->
|
||||
<div v-else class="certificate-content">
|
||||
<!-- 报告查看部分 -->
|
||||
<div class="view-section">
|
||||
<div class="section-title">报告:</div>
|
||||
<div class="view-content">
|
||||
<div class="download-area">
|
||||
<NButton text type="primary" @click="handleDownloadReport">
|
||||
<!-- 临时移除图标 -->
|
||||
<!-- <template #icon>
|
||||
<NIcon :component="DownloadIcon" />
|
||||
</template> -->
|
||||
点击下载原版报告
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<div v-if="reportFileList.length > 0" class="file-info">
|
||||
<NText>{{ reportFileList[0]?.name }} 下载</NText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 证书查看部分 -->
|
||||
<div class="view-section">
|
||||
<div class="section-title">证书:</div>
|
||||
<div class="view-content">
|
||||
<div v-if="certificateFileList.length === 0" class="empty-state">
|
||||
<NText depth="3">暂无证书文件</NText>
|
||||
</div>
|
||||
<div v-else class="certificate-display">
|
||||
<div
|
||||
v-for="file in certificateFileList"
|
||||
:key="file.id"
|
||||
class="certificate-image"
|
||||
@click="handlePreview(file)"
|
||||
>
|
||||
<NImage
|
||||
v-if="file.type?.startsWith('image/')"
|
||||
:src="file.url"
|
||||
width="120"
|
||||
height="120"
|
||||
objectFit="cover"
|
||||
preview-disabled
|
||||
/>
|
||||
<div v-else class="file-icon">
|
||||
{{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
<NButton @click="handleClose">取消</NButton>
|
||||
<NButton v-if="isUploadMode" type="primary" @click="handleConfirm">
|
||||
上传并通知
|
||||
</NButton>
|
||||
<NButton v-else type="primary" @click="handleConfirm">
|
||||
确定
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.certificate-modal {
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.certificate-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
/* 上传模式样式 */
|
||||
.upload-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.report-upload-area,
|
||||
.certificate-upload-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.file-section {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.uploaded-file {
|
||||
padding: 6px 12px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.certificate-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid #e8e8e8;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.file-preview-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.remove-button {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.remove-button:hover {
|
||||
background: #ff7875;
|
||||
}
|
||||
|
||||
/* 查看模式样式 */
|
||||
.view-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.view-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.download-area {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
padding: 8px 12px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.certificate-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.certificate-image {
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e8e8;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.certificate-image:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 缩略图上传组件样式 */
|
||||
:deep(.n-upload) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-upload-file-list) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.n-upload-file-card) {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.certificate-modal {
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.certificate-display {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.certificate-image {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user