初始版本
This commit is contained in:
932
app/components/console/AppsCenter.vue
Normal file
932
app/components/console/AppsCenter.vue
Normal file
@@ -0,0 +1,932 @@
|
||||
<template>
|
||||
<div class="apps-center">
|
||||
<!-- 工具栏：搜索 + 视图切换 -->
|
||||
<div class="toolbar">
|
||||
<a-input
|
||||
v-model:value="keywords"
|
||||
placeholder="搜索应用名称或标识"
|
||||
class="search-input"
|
||||
allow-clear
|
||||
@press-enter="doSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #bbb" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<a-tooltip title="网格视图">
|
||||
<a-button
|
||||
:type="viewMode === 'grid' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'grid'"
|
||||
>
|
||||
<template #icon><AppstoreOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="列表视图">
|
||||
<a-button
|
||||
:type="viewMode === 'list' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<template #icon><UnorderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<a-alert v-if="error" show-icon type="error" :message="String(error)" class="mb-4" />
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="pending" class="state-wrap">
|
||||
<a-spin size="large" tip="加载中..." />
|
||||
</div>
|
||||
|
||||
<!-- 应用列表 -->
|
||||
<div v-else-if="list.length > 0" class="app-list">
|
||||
<!-- 网格视图 -->
|
||||
<div v-if="viewMode === 'grid'" class="grid-view">
|
||||
<div v-for="app in list" :key="app.productId" class="app-card" @click="handleCardClick(app)">
|
||||
<div class="card-body">
|
||||
<div class="card-header">
|
||||
<div class="app-icon" :style="{ background: iconBgColor(app.productName) }">
|
||||
<img
|
||||
v-if="app.icon"
|
||||
:src="app.icon"
|
||||
:alt="app.productName"
|
||||
class="icon-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div v-else class="icon-placeholder">
|
||||
{{ appTypeIcon(app.appType) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">{{ app.productName }}</div>
|
||||
<div class="app-code">{{ app.productCode }}</div>
|
||||
<div class="app-type">
|
||||
<span v-if="(app as any)._isOwner" class="owner-badge">创建者</span>
|
||||
<span v-else class="member-badge">成员</span>
|
||||
<span class="app-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeName(app.type, app.appType) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="app-desc">{{ app.description || '暂无描述' }}</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="app-meta">
|
||||
<span class="meta-item">
|
||||
<UserOutlined style="color: #999; margin-right: 4px" />
|
||||
{{ app.developer }}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<ClockCircleOutlined style="color: #999; margin-right: 4px" />
|
||||
{{ formatDateTime(app.updateTime || app.createTime) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="app-actions">
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="enter-link"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>
|
||||
<component :is="entry.icon" style="margin-right: 3px" />
|
||||
{{ entry.label }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="list-view">
|
||||
<div v-for="app in list" :key="app.productId" class="app-row">
|
||||
<div class="list-left">
|
||||
<div class="list-icon" :style="{ background: iconBgColor(app.productName) }">
|
||||
<img
|
||||
v-if="app.icon"
|
||||
:src="app.icon"
|
||||
:alt="app.productName"
|
||||
class="list-icon-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div v-else class="list-icon-placeholder">
|
||||
{{ appTypeIcon(app.appType) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-info">
|
||||
<div class="list-name">{{ app.productName }}</div>
|
||||
<div class="list-meta">
|
||||
<span>{{ app.productCode }}</span>
|
||||
<span v-if="(app as any)._isOwner" class="owner-badge-sm">创建者</span>
|
||||
<span v-else class="member-badge-sm">成员</span>
|
||||
<span class="list-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeName(app.type, app.appType) }}
|
||||
</span>
|
||||
<span>{{ app.description || '暂无描述' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<div class="list-time">{{ formatTime(app.createTime) }}</div>
|
||||
<div class="list-actions">
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="enter-link-small"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>
|
||||
<component :is="entry.icon" style="margin-right: 3px" />
|
||||
{{ entry.label }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="list.length === 0" class="state-wrap">
|
||||
<a-empty description="暂无应用，快来创建你的第一个应用吧">
|
||||
<template #image>
|
||||
<div class="empty-icon">📦</div>
|
||||
</template>
|
||||
<div class="empty-guide">
|
||||
<div class="empty-actions">
|
||||
<a-button type="primary" @click="goToDeveloperCenter">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
创建企业自建应用
|
||||
</a-button>
|
||||
<a-button @click="goToMarket">
|
||||
<template #icon><ShopOutlined /></template>
|
||||
浏览应用商店
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="empty-tips">
|
||||
<span class="empty-tip">🛠️ 前往开发者中心创建专属应用</span>
|
||||
<span class="empty-tip">🛒 从应用商店购买现成应用快速使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
|
||||
<!-- 应用详情抽屉（放在条件渲染链之外） -->
|
||||
<AppDetail v-model:open="detailOpen" :app="selectedApp" @deleted="handleDeletedFromDetail" @updated="handleUpdatedFromDetail" />
|
||||
|
||||
<!-- 小程序扫码弹窗 -->
|
||||
<QrCodeModal
|
||||
v-model:open="qrOpen"
|
||||
:qrcode-url="qrApp?.qrcode"
|
||||
:app-name="qrApp?.productName"
|
||||
:title="qrApp ? (APP_TYPE_NAME[qrApp.appType ?? 10] || '小程序') + '二维码' : ''"
|
||||
:tip="qrApp ? getScanTip(qrApp.appType ?? 20) : ''"
|
||||
/>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="total > limit" class="pagination-wrap">
|
||||
<a-pagination
|
||||
:current="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
:page-size-options="['10', '20', '50']"
|
||||
@change="onPageChange"
|
||||
@show-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
SearchOutlined,
|
||||
UnorderedListOutlined,
|
||||
DeleteOutlined,
|
||||
EllipsisOutlined,
|
||||
EyeOutlined,
|
||||
UserOutlined,
|
||||
ClockCircleOutlined,
|
||||
PlusOutlined,
|
||||
ShopOutlined,
|
||||
GlobalOutlined,
|
||||
QrcodeOutlined,
|
||||
DownloadOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { removeAppProduct, getMyApps, getJoinedApps } from '@/api/app/appProduct'
|
||||
import type { AppProduct } from '@/api/app/appProduct/model'
|
||||
import { APP_TYPE, APP_TYPE_NAME } from '@/api/app/appProduct/model'
|
||||
import AppDetail from '@/components/developer/AppDetail.vue'
|
||||
import QrCodeModal from '@/components/QrCodeModal.vue'
|
||||
import { getAppEntries, executeEntry, getScanTip } from '@/utils/appEntry'
|
||||
import type { AppEntry } from '@/utils/appEntry'
|
||||
|
||||
const props = defineProps<{
|
||||
userId?: number | string | null
|
||||
ownerName?: string
|
||||
}>()
|
||||
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const page = ref(1)
|
||||
const limit = ref(10)
|
||||
const keywords = ref('')
|
||||
const total = ref(0)
|
||||
|
||||
// 详情抽屉
|
||||
const detailOpen = ref(false)
|
||||
const selectedApp = ref<AppProduct | null>(null)
|
||||
|
||||
function openDetail(app: AppProduct) {
|
||||
selectedApp.value = app
|
||||
detailOpen.value = true
|
||||
}
|
||||
|
||||
// 我的应用（创建的应用）+ 参与的应用（被邀请的）
|
||||
const myApps = ref<AppProduct[]>([])
|
||||
const joinedApps = ref<AppProduct[]>([])
|
||||
const pending = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 计算合并后的应用列表（去重）
|
||||
const list = computed(() => {
|
||||
const map = new Map<number, AppProduct>()
|
||||
// 先加我创建的
|
||||
myApps.value.forEach(app => {
|
||||
if (app.productId) map.set(app.productId, { ...app, _isOwner: true })
|
||||
})
|
||||
// 再加我参与的（避免重复）
|
||||
joinedApps.value.forEach(app => {
|
||||
if (app.productId && !map.has(app.productId)) {
|
||||
map.set(app.productId, { ...app, _isOwner: false })
|
||||
}
|
||||
})
|
||||
return Array.from(map.values())
|
||||
})
|
||||
|
||||
async function fetchApps() {
|
||||
pending.value = true
|
||||
error.value = null
|
||||
try {
|
||||
// 并行加载：我创建的应用 + 我参与的应用
|
||||
const [myResult, joinedResult] = await Promise.all([
|
||||
getMyApps({ page: 1, limit: 100 }),
|
||||
getJoinedApps({ page: 1, limit: 100 }),
|
||||
])
|
||||
myApps.value = myResult?.list ?? []
|
||||
joinedApps.value = joinedResult?.list ?? []
|
||||
total.value = list.value.length
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '加载失败'
|
||||
} finally {
|
||||
pending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
page.value = 1
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function onPageChange(nextPage: number) {
|
||||
page.value = nextPage
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function onPageSizeChange(_current: number, nextSize: number) {
|
||||
limit.value = nextSize
|
||||
page.value = 1
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function handleCardClick(app: AppProduct) {
|
||||
openDetail(app)
|
||||
}
|
||||
|
||||
// 菜单操作
|
||||
function handleMenuAction(key: string, app: AppProduct) {
|
||||
if (key === 'detail') {
|
||||
openDetail(app)
|
||||
} else if (key === 'delete') {
|
||||
handleDeleteApp(app)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除应用
|
||||
const deletingAppId = ref<number | null>(null)
|
||||
|
||||
function handleDeletedFromDetail() {
|
||||
selectedApp.value = null
|
||||
detailOpen.value = false
|
||||
refresh()
|
||||
}
|
||||
|
||||
// 更新应用后同步本地数据
|
||||
function handleUpdatedFromDetail(updatedApp: AppProduct) {
|
||||
// 更新列表中的应用数据
|
||||
const index = list.value.findIndex((app) => app.productId === updatedApp.productId)
|
||||
if (index !== -1) {
|
||||
list.value[index] = { ...list.value[index], ...updatedApp }
|
||||
}
|
||||
// 更新当前选中的应用
|
||||
if (selectedApp.value?.productId === updatedApp.productId) {
|
||||
selectedApp.value = { ...selectedApp.value, ...updatedApp }
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteApp(app: AppProduct) {
|
||||
const name = app.productName || app.productCode || '该应用'
|
||||
Modal.confirm({
|
||||
title: '确认删除应用',
|
||||
content: `确定要删除应用「${name}」吗？删除后所有配置、成员和版本记录将被永久清除，且无法恢复。`,
|
||||
okText: '确认删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
async onOk() {
|
||||
deletingAppId.value = app.productId ?? null
|
||||
try {
|
||||
await removeAppProduct(app.productId)
|
||||
message.success(`应用「${name}」已删除`)
|
||||
// 如果详情抽屉打开的是当前应用，关闭它
|
||||
if (selectedApp.value?.productId === app.productId) {
|
||||
detailOpen.value = false
|
||||
selectedApp.value = null
|
||||
}
|
||||
// 刷新列表
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '删除失败')
|
||||
} finally {
|
||||
deletingAppId.value = null
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 外部刷新：重新查询应用列表
|
||||
async function refresh() {
|
||||
await fetchApps()
|
||||
}
|
||||
|
||||
// 暴露 refresh 方法供父组件调用
|
||||
defineExpose({ refresh })
|
||||
|
||||
function handleEntryClick(entry: AppEntry, app: AppProduct) {
|
||||
if (entry.type === 'scan-qr') {
|
||||
// 小程序扫码 → 弹出二维码弹窗
|
||||
qrApp.value = app
|
||||
qrOpen.value = true
|
||||
return
|
||||
}
|
||||
executeEntry(entry)
|
||||
}
|
||||
|
||||
// 扫码弹窗
|
||||
const qrOpen = ref(false)
|
||||
const qrApp = ref<AppProduct | null>(null)
|
||||
|
||||
// 应用类型名称（使用统一枚举）
|
||||
function appTypeName(type?: number, appType?: string): string {
|
||||
return APP_TYPE_NAME[type ?? 0] ?? 'Web 应用'
|
||||
}
|
||||
|
||||
function appTypeIcon(appType?: string | number): string {
|
||||
const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
|
||||
const iconMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: '🌐',
|
||||
[APP_TYPE.WECHAT_MP]: '📱',
|
||||
[APP_TYPE.DOUYIN_MP]: '🎵',
|
||||
[APP_TYPE.BAIDU_MP]: '🔍',
|
||||
[APP_TYPE.ALIPAY_MP]: '💎',
|
||||
[APP_TYPE.ANDROID]: '🤖',
|
||||
[APP_TYPE.IOS]: '🍎',
|
||||
[APP_TYPE.MACOS]: '💻',
|
||||
[APP_TYPE.WINDOWS]: '🪟',
|
||||
[APP_TYPE.PLUGIN]: '🔌',
|
||||
}
|
||||
return iconMap[numType] ?? '🌐'
|
||||
}
|
||||
|
||||
function appTypeClass(appType?: string | number): string {
|
||||
const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
|
||||
const classMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: 'type-10',
|
||||
[APP_TYPE.WECHAT_MP]: 'type-20',
|
||||
[APP_TYPE.DOUYIN_MP]: 'type-30',
|
||||
[APP_TYPE.BAIDU_MP]: 'type-40',
|
||||
[APP_TYPE.ALIPAY_MP]: 'type-50',
|
||||
[APP_TYPE.ANDROID]: 'type-60',
|
||||
[APP_TYPE.IOS]: 'type-70',
|
||||
[APP_TYPE.MACOS]: 'type-80',
|
||||
[APP_TYPE.WINDOWS]: 'type-90',
|
||||
[APP_TYPE.PLUGIN]: 'type-100',
|
||||
}
|
||||
return classMap[numType] ?? 'type-10'
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr?: string) {
|
||||
if (!dateStr) return '-'
|
||||
// 格式化为 "2026-03-28 10:46"
|
||||
return dateStr.slice(0, 16).replace('T', ' ')
|
||||
}
|
||||
|
||||
// 图标背景色
|
||||
const PALETTE = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#87d068', '#108ee9']
|
||||
|
||||
function iconBgColor(name?: string) {
|
||||
if (!name) return PALETTE[0]
|
||||
let h = 0
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff
|
||||
return PALETTE[Math.abs(h) % PALETTE.length]
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timestamp?: string | number | Date) {
|
||||
if (!timestamp) return '-'
|
||||
const date = typeof timestamp === 'string' ? new Date(timestamp) : new Date(timestamp)
|
||||
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
||||
}
|
||||
|
||||
// 导航函数
|
||||
function goToDeveloperCenter() {
|
||||
navigateTo('/developer/apps')
|
||||
}
|
||||
|
||||
function goToMarket() {
|
||||
navigateTo('/market')
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
fetchApps()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.apps-center {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* ===== 工具栏 ===== */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* ===== 状态容器 ===== */
|
||||
.state-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 空状态引导 */
|
||||
.empty-guide {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ===== 网格视图 ===== */
|
||||
.grid-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-card:hover {
|
||||
border-color: #d6e4ff;
|
||||
box-shadow: 0 4px 12px rgba(102, 102, 102, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.app-code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-type {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.enter-link {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #e6f4ff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.enter-link:hover {
|
||||
background: #bae0ff;
|
||||
color: #0958d9;
|
||||
}
|
||||
.enter-link.primary-entry {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
.enter-link.primary-entry:hover {
|
||||
background: #0958d9;
|
||||
color: #fff;
|
||||
}
|
||||
.enter-link-disabled {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.enter-link-disabled:hover {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ===== 列表视图 ===== */
|
||||
.list-view {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-row:last-child { border-bottom: none; }
|
||||
.app-row:hover { background: #fafafa; }
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-type-tag {
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
.list-type-tag.type-10 { background: #e6f4ff; color: #0958d9; }
|
||||
.list-type-tag.type-20 { background: #f6ffed; color: #389e0d; }
|
||||
.list-type-tag.type-60 { background: #fff7e6; color: #d46b08; }
|
||||
.list-type-tag.type-100 { background: #f9f0ff; color: #722ed1; }
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-time {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.enter-link-small {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #e6f4ff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.enter-link-small:hover {
|
||||
background: #bae0ff;
|
||||
color: #0958d9;
|
||||
}
|
||||
.enter-link-small.primary-entry {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
.enter-link-small.primary-entry:hover {
|
||||
background: #0958d9;
|
||||
color: #fff;
|
||||
}
|
||||
.enter-link-small.enter-link-disabled {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.enter-link-small.enter-link-disabled:hover {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ===== 分页 ===== */
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
|
||||
/* ===== 应用类型标签 ===== */
|
||||
.app-type-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
.app-type-tag.type-10 { background: #e6f4ff; color: #0958d9; }
|
||||
.app-type-tag.type-20 { background: #f6ffed; color: #389e0d; }
|
||||
.app-type-tag.type-60 { background: #fff7e6; color: #d46b08; }
|
||||
.app-type-tag.type-100 { background: #f9f0ff; color: #722ed1; }
|
||||
|
||||
/* ===== 创建者/成员标签 ===== */
|
||||
.owner-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f6ffed;
|
||||
color: #389e0d;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.owner-badge-sm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.member-badge-sm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f6ffed;
|
||||
color: #389e0d;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
176
app/components/console/ConsoleHeader.vue
Normal file
176
app/components/console/ConsoleHeader.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-layout-header class="top-header !p-0">
|
||||
<div class="h-full px-4 flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<a-space size="large">
|
||||
<div class="logo-brand" @click="navigateTo('/console')">
|
||||
<img src="/logo.png" alt="logo" class="logo-img" />
|
||||
<span class="logo-name">控制台</span>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<a-dropdown placement="bottomRight" :trigger="['click']">
|
||||
<div class="user-trigger">
|
||||
<a-space>
|
||||
<a-avatar :size="28" :src="user?.avatar || user?.avatarUrl">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="user-name">
|
||||
{{ userDisplayName }}
|
||||
</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserMenuClick">
|
||||
<a-menu-item v-for="item in mergedUserMenuItems" :key="item.key">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import type { MenuProps } from 'ant-design-vue'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
type ConsoleHeaderMenuItem = {
|
||||
key: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
productLabel?: string
|
||||
defaultJumpKey?: 'oa' | 'developer'
|
||||
user: User | null
|
||||
userDisplayName: string
|
||||
userMenuItems?: ConsoleHeaderMenuItem[]
|
||||
}>(),
|
||||
{
|
||||
productLabel: '云·企业官网',
|
||||
defaultJumpKey: 'developer',
|
||||
userMenuItems: () => [{ key: 'logout', label: '退出登录' }],
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'logout'): void
|
||||
(e: 'userMenuClick', key: string): void
|
||||
}>()
|
||||
|
||||
const mergedUserMenuItems = computed<ConsoleHeaderMenuItem[]>(() => {
|
||||
const items = Array.isArray(props.userMenuItems) ? props.userMenuItems.slice() : []
|
||||
if (!items.some((i) => i.key === 'account')) {
|
||||
const accountItem: ConsoleHeaderMenuItem = { key: 'account', label: '账号管理' }
|
||||
const logoutIndex = items.findIndex((i) => i.key === 'logout')
|
||||
if (logoutIndex >= 0) items.splice(logoutIndex, 0, accountItem)
|
||||
else items.push(accountItem)
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
const consoleJumpTargets = {
|
||||
oa: '/oa',
|
||||
developer: '/developer',
|
||||
} as const
|
||||
|
||||
function openExternal(url: string) {
|
||||
if (!import.meta.client) return
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
window.location.href = url
|
||||
return
|
||||
}
|
||||
void navigateTo(url)
|
||||
}
|
||||
|
||||
const handleButtonClick = () => {
|
||||
openExternal(consoleJumpTargets[props.defaultJumpKey])
|
||||
}
|
||||
|
||||
const handleProductMenuClick: MenuProps['onClick'] = (e) => {
|
||||
const key = String(e.key) as keyof typeof consoleJumpTargets
|
||||
const url = consoleJumpTargets[key]
|
||||
if (!url) return
|
||||
openExternal(url)
|
||||
}
|
||||
|
||||
function onUserMenuClick(info: { key: string }) {
|
||||
const key = String(info.key)
|
||||
emit('userMenuClick', key)
|
||||
if (key === 'account') {
|
||||
void navigateTo('/console/account')
|
||||
return
|
||||
}
|
||||
if (key === 'logout') emit('logout')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.top-header {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-radius: 12px;
|
||||
background: #111827 !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-trigger {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.user-trigger:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.logo-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-brand:hover .logo-img,
|
||||
.logo-brand:hover .logo-name {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
font-family: 'Alimama FangYuanTi VF, sans-serif', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
</style>
|
||||
605
app/components/console/ContractManagement.vue
Normal file
605
app/components/console/ContractManagement.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<template>
|
||||
<div class="contract-management">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<a-input-search
|
||||
v-model:value="queryParam.keywords"
|
||||
placeholder="搜索合同名称/编号"
|
||||
allow-clear
|
||||
style="width: 220px"
|
||||
@search="handleSearch"
|
||||
@change="onKeywordChange"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="queryParam.contractType"
|
||||
placeholder="合同类型"
|
||||
allow-clear
|
||||
style="width: 140px"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="queryParam.status"
|
||||
placeholder="合同状态"
|
||||
allow-clear
|
||||
style="width: 140px"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<a-button type="primary" @click="openAddModal">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增合同
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<a-row :gutter="[12, 12]" class="mb-4">
|
||||
<a-col :xs="12" :sm="8" :md="4" v-for="stat in statsCards" :key="stat.label">
|
||||
<div class="stat-card" :class="stat.cls">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<a-card :bordered="false">
|
||||
<a-table
|
||||
:data-source="contracts"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
size="middle"
|
||||
:row-key="(r: Contract) => r.contractId!"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<a-table-column title="合同编号" data-index="contractNo" width="185">
|
||||
<template #default="{ record }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ record.contractNo || '-' }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同名称" data-index="title" ellipsis>
|
||||
<template #default="{ record }">
|
||||
<span class="font-medium cursor-pointer text-blue-600 hover:text-blue-400" @click="openDetail(record)">
|
||||
{{ record.title }}
|
||||
</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同类型" data-index="contractType" width="110">
|
||||
<template #default="{ record }">
|
||||
{{ contractTypeText(record.contractType) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="签约方" width="230">
|
||||
<template #default="{ record }">
|
||||
<div class="text-xs leading-5">
|
||||
<div>甲方：{{ record.partyA || '-' }}</div>
|
||||
<div>乙方：{{ record.partyB || '-' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同金额" data-index="amount" width="120">
|
||||
<template #default="{ record }">
|
||||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(record.amount) }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="有效期" width="210">
|
||||
<template #default="{ record }">
|
||||
<span v-if="record.startDate && record.endDate" class="text-sm">
|
||||
{{ record.startDate }} ~ {{ record.endDate }}
|
||||
</span>
|
||||
<span v-else class="text-gray-400 text-sm">-</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="状态" data-index="status" width="100">
|
||||
<template #default="{ record }">
|
||||
<a-tag :color="contractStatusInfo(record.status).color">
|
||||
{{ contractStatusInfo(record.status).text }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="操作" width="180" fixed="right">
|
||||
<template #default="{ record }">
|
||||
<a-space>
|
||||
<a-button size="small" @click="openDetail(record)">查看</a-button>
|
||||
<a-button size="small" @click="openEdit(record)">编辑</a-button>
|
||||
<a-button danger size="small" @click="confirmRemove(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="formVisible"
|
||||
:title="editingId ? '编辑合同' : '新增合同'"
|
||||
:width="660"
|
||||
:confirm-loading="formSubmitting"
|
||||
@ok="handleFormSubmit"
|
||||
@cancel="closeForm"
|
||||
>
|
||||
<a-form ref="formRef" layout="vertical" :model="formData" :rules="formRules" class="mt-2">
|
||||
<a-form-item label="合同名称" name="title">
|
||||
<a-input v-model:value="formData.title" placeholder="请输入合同名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="合同类型" name="contractType">
|
||||
<a-select v-model:value="formData.contractType" placeholder="请选择合同类型" style="width:100%">
|
||||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="合同状态" name="status">
|
||||
<a-select v-model:value="formData.status" placeholder="请选择状态" style="width:100%">
|
||||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="甲方" name="partyA">
|
||||
<a-input v-model:value="formData.partyA" placeholder="请输入甲方名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="乙方" name="partyB">
|
||||
<a-input v-model:value="formData.partyB" placeholder="请输入乙方名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="合同金额" name="amount">
|
||||
<a-input-number
|
||||
v-model:value="formData.amount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
placeholder="金额"
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #prefix>¥</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="开始日期" name="startDate">
|
||||
<a-date-picker
|
||||
v-model:value="formData.startDate"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="开始日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="结束日期" name="endDate">
|
||||
<a-date-picker
|
||||
v-model:value="formData.endDate"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="结束日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 合同附件上传 -->
|
||||
<a-form-item label="合同附件">
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:max-count="1"
|
||||
:before-upload="() => false"
|
||||
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined /> 上传合同文件
|
||||
</a-button>
|
||||
<span class="ml-2 text-gray-400 text-xs">支持 PDF、Word、图片，最大 20MB</span>
|
||||
</a-upload>
|
||||
<div v-if="formData.fileUrl && !fileList.length" class="mt-1">
|
||||
<a :href="formData.fileUrl" target="_blank" class="text-blue-500 text-sm">
|
||||
<PaperClipOutlined /> {{ formData.fileName || '查看已上传文件' }}
|
||||
</a>
|
||||
<a-button type="link" danger size="small" class="ml-2" @click="clearFile">移除</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="备注" name="remark">
|
||||
<a-textarea v-model:value="formData.remark" :rows="3" placeholder="备注（选填）" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="detailVisible"
|
||||
title="合同详情"
|
||||
:width="700"
|
||||
:footer="null"
|
||||
>
|
||||
<a-descriptions v-if="detail" bordered size="small" :column="2" class="mt-2">
|
||||
<a-descriptions-item label="合同编号" :span="2">
|
||||
<span class="font-mono">{{ detail.contractNo || '-' }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="合同名称" :span="2">{{ detail.title }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同类型">{{ contractTypeText(detail.contractType) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同状态">
|
||||
<a-tag :color="contractStatusInfo(detail.status).color">{{ contractStatusInfo(detail.status).text }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="甲方">{{ detail.partyA || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="乙方">{{ detail.partyB || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同金额">
|
||||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(detail.amount) }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="有效期">
|
||||
<span v-if="detail.startDate && detail.endDate">{{ detail.startDate }} ~ {{ detail.endDate }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建人">{{ detail.userName || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="detail.fileUrl" label="合同附件" :span="2">
|
||||
<a :href="detail.fileUrl" target="_blank" class="text-blue-500">
|
||||
<PaperClipOutlined /> {{ detail.fileName || '查看附件' }}
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { PlusOutlined, UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
|
||||
import { uploadFile } from '@/api/system/file'
|
||||
import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
|
||||
import {
|
||||
pageContract,
|
||||
addContract,
|
||||
updateContract,
|
||||
removeContract,
|
||||
statsContract,
|
||||
contractTypeOptions,
|
||||
contractStatusOptions,
|
||||
contractTypeText,
|
||||
contractStatusInfo,
|
||||
type Contract,
|
||||
type ContractType,
|
||||
type ContractStatus,
|
||||
} from '@/api/app/contract'
|
||||
|
||||
defineOptions({ name: 'ContractManagement' })
|
||||
|
||||
// ─── 列表 & 分页 ──────────────────────────────────────────────
|
||||
const contracts = ref<Contract[]>([])
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const queryParam = reactive<{
|
||||
keywords?: string
|
||||
contractType?: ContractType
|
||||
status?: ContractStatus
|
||||
page: number
|
||||
limit: number
|
||||
}>({
|
||||
page: 1,
|
||||
limit: 15,
|
||||
})
|
||||
|
||||
const pagination = computed(() => ({
|
||||
total: total.value,
|
||||
current: queryParam.page,
|
||||
pageSize: queryParam.limit,
|
||||
showSizeChanger: true,
|
||||
showTotal: (t: number) => `共 ${t} 条`,
|
||||
pageSizeOptions: ['10', '15', '20', '50'],
|
||||
}))
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await pageContract({
|
||||
page: queryParam.page,
|
||||
limit: queryParam.limit,
|
||||
keywords: queryParam.keywords,
|
||||
contractType: queryParam.contractType,
|
||||
status: queryParam.status,
|
||||
})
|
||||
contracts.value = res?.list ?? []
|
||||
total.value = res?.total ?? 0
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
queryParam.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
let keywordTimer: ReturnType<typeof setTimeout> | null = null
|
||||
function onKeywordChange() {
|
||||
if (keywordTimer) clearTimeout(keywordTimer)
|
||||
keywordTimer = setTimeout(handleSearch, 400)
|
||||
}
|
||||
|
||||
function handleTableChange(pag: { current?: number; pageSize?: number }) {
|
||||
queryParam.page = pag.current ?? 1
|
||||
queryParam.limit = pag.pageSize ?? 15
|
||||
loadData()
|
||||
}
|
||||
|
||||
// ─── 统计 ─────────────────────────────────────────────────────
|
||||
const statsData = ref<Record<string, number>>({})
|
||||
|
||||
const statsCards = computed(() => [
|
||||
{ label: '全部', value: statsData.value.total ?? 0, cls: 'blue' },
|
||||
{ label: '生效中', value: statsData.value.active ?? 0, cls: 'green' },
|
||||
{ label: '待签署', value: statsData.value.pending ?? 0, cls: 'orange' },
|
||||
{ label: '已过期', value: statsData.value.expired ?? 0, cls: 'red' },
|
||||
{ label: '草稿', value: statsData.value.draft ?? 0, cls: 'gray' },
|
||||
{ label: '已终止', value: statsData.value.terminated ?? 0, cls: 'purple' },
|
||||
])
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await statsContract()
|
||||
statsData.value = res ?? {}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// ─── 表单 ─────────────────────────────────────────────────────
|
||||
const formVisible = ref(false)
|
||||
const formSubmitting = ref(false)
|
||||
const editingId = ref<number | null>(null)
|
||||
const formRef = ref()
|
||||
const fileList = ref<UploadFile[]>([])
|
||||
const uploading = ref(false)
|
||||
|
||||
interface FormData {
|
||||
title: string
|
||||
contractType?: ContractType
|
||||
partyA?: string
|
||||
partyB?: string
|
||||
amount?: number
|
||||
startDate?: string
|
||||
endDate?: string
|
||||
status?: ContractStatus
|
||||
remark?: string
|
||||
fileUrl?: string
|
||||
fileName?: string
|
||||
}
|
||||
|
||||
const formData = reactive<FormData>({
|
||||
title: '',
|
||||
contractType: undefined,
|
||||
partyA: '',
|
||||
partyB: '',
|
||||
amount: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
status: 'draft',
|
||||
remark: '',
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
title: [{ required: true, message: '请输入合同名称' }],
|
||||
contractType: [{ required: true, message: '请选择合同类型' }],
|
||||
status: [{ required: true, message: '请选择合同状态' }],
|
||||
}
|
||||
|
||||
function resetFormData() {
|
||||
formData.title = ''
|
||||
formData.contractType = undefined
|
||||
formData.partyA = ''
|
||||
formData.partyB = ''
|
||||
formData.amount = undefined
|
||||
formData.startDate = undefined
|
||||
formData.endDate = undefined
|
||||
formData.status = 'draft'
|
||||
formData.remark = ''
|
||||
formData.fileUrl = ''
|
||||
formData.fileName = ''
|
||||
fileList.value = []
|
||||
editingId.value = null
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
resetFormData()
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(record: Contract) {
|
||||
resetFormData()
|
||||
editingId.value = record.contractId ?? null
|
||||
Object.assign(formData, {
|
||||
title: record.title,
|
||||
contractType: record.contractType,
|
||||
partyA: record.partyA ?? '',
|
||||
partyB: record.partyB ?? '',
|
||||
amount: record.amount,
|
||||
startDate: record.startDate,
|
||||
endDate: record.endDate,
|
||||
status: record.status,
|
||||
remark: record.remark ?? '',
|
||||
fileUrl: record.fileUrl ?? '',
|
||||
fileName: record.fileName ?? '',
|
||||
})
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
formVisible.value = false
|
||||
formRef.value?.resetFields()
|
||||
resetFormData()
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
function handleFileChange({ fileList: list }: UploadChangeParam) {
|
||||
fileList.value = list.slice(-1)
|
||||
}
|
||||
|
||||
function clearFile() {
|
||||
formData.fileUrl = ''
|
||||
formData.fileName = ''
|
||||
}
|
||||
|
||||
async function uploadPendingFile(): Promise<{ url: string; name: string } | null> {
|
||||
const raw = fileList.value[0]?.originFileObj
|
||||
if (!raw) return null
|
||||
uploading.value = true
|
||||
try {
|
||||
const result = await uploadFile(raw as File)
|
||||
return { url: (result as any).url ?? (result as any).fileUrl, name: raw.name }
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFormSubmit() {
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
formSubmitting.value = true
|
||||
try {
|
||||
// 如有待上传文件先上传
|
||||
if (fileList.value.length > 0) {
|
||||
const uploaded = await uploadPendingFile()
|
||||
if (uploaded) {
|
||||
formData.fileUrl = uploaded.url
|
||||
formData.fileName = uploaded.name
|
||||
}
|
||||
}
|
||||
|
||||
const payload: Partial<Contract> = { ...formData }
|
||||
|
||||
if (editingId.value) {
|
||||
await updateContract(editingId.value, payload)
|
||||
message.success('合同已更新')
|
||||
} else {
|
||||
await addContract(payload)
|
||||
message.success('合同已创建')
|
||||
}
|
||||
closeForm()
|
||||
await loadData()
|
||||
await loadStats()
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '操作失败')
|
||||
} finally {
|
||||
formSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 详情 ─────────────────────────────────────────────────────
|
||||
const detailVisible = ref(false)
|
||||
const detail = ref<Contract | null>(null)
|
||||
|
||||
function openDetail(record: Contract) {
|
||||
detail.value = record
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
// ─── 删除 ─────────────────────────────────────────────────────
|
||||
function confirmRemove(record: Contract) {
|
||||
Modal.confirm({
|
||||
title: '确认删除该合同？',
|
||||
content: '删除后不可恢复。',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
await removeContract(record.contractId!)
|
||||
message.success('已删除')
|
||||
if (detail.value?.contractId === record.contractId) {
|
||||
detailVisible.value = false
|
||||
detail.value = null
|
||||
}
|
||||
await loadData()
|
||||
await loadStats()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── 工具函数 ─────────────────────────────────────────────────
|
||||
function formatAmount(value?: number | string | null) {
|
||||
if (value === null || value === undefined) return '0.00'
|
||||
const n = typeof value === 'string' ? parseFloat(value) : value
|
||||
return Number.isFinite(n) ? n.toFixed(2) : '0.00'
|
||||
}
|
||||
|
||||
// ─── 初始化 ───────────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
loadStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contract-management {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.stat-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-card.blue { background: #eff6ff; border-color: #dbeafe; }
|
||||
.stat-card.green { background: #f0fdf4; border-color: #bbf7d0; }
|
||||
.stat-card.orange{ background: #fff7ed; border-color: #fed7aa; }
|
||||
.stat-card.red { background: #fef2f2; border-color: #fecaca; }
|
||||
.stat-card.gray { background: #f9fafb; border-color: #e5e7eb; }
|
||||
.stat-card.purple{ background: #faf5ff; border-color: #e9d5ff; }
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user