lynn
/
Getinge-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加

Browse Source
master
lynn 4 months ago
parent 0ac8266228
commit 2b4c370779
1 changed files with 408 additions and 0 deletions
Show Stats Download Patch File Download Diff File

408
src/views/library/index.vue
Unescape View File

@ -0,0 +1,408 @@
<template>
<div class="supply-demand-container">
<!-- 页面标题 -->
<div class="page-header">
<h2 class="page-title">
<i class="el-icon-s-comment"></i>
供需管理
</h2>
<div>
<el-tag type="danger">{{ pendingCount }}</el-tag>
<small class="text-muted">待审核</small>
</div>
</div>
<!-- 搜索区域 -->
<div class="search-section">
<el-form :model="filters" inline>
<el-form-item>
<el-input v-model="filters.keyword" placeholder="搜索标题、内容或用户名"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="filters.status" placeholder="全部状态" clearable>
<el-option label="待审核" value="pending"></el-option>
<el-option label="已通过" value="approved"></el-option>
<el-option label="已拒绝" value="rejected"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="filters.type" placeholder="全部类型" clearable>
<el-option label="供应" value="supply"></el-option>
<el-option label="需求" value="demand"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="filters.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-download" @click="handleExport">导出数据</el-button>
</el-form-item>
</el-form>
</div>
<!-- 供需列表表格 -->
<div class="table-container">
<el-table
:data="list"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column label="供需信息" min-width="250">
<template slot-scope="scope">
<div class="supply-title">{{ scope.row.title }}</div>
<div class="supply-desc">{{ scope.row.description }}</div>
</template>
</el-table-column>
<el-table-column label="类型" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.type === 'supply' ? 'success' : 'primary'" size="small">{{ scope.row.typeText }}</el-tag>
</template>
</el-table-column>
<el-table-column label="发布者" width="150">
<template slot-scope="scope">
<div class="user-info">
<div class="user-avatar">{{ scope.row.publisher.name.charAt(0) }}</div>
<div>
<div class="user-name">{{ scope.row.publisher.name }}</div>
<div class="user-year">{{ scope.row.publisher.year }}届</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="状态" width="120">
<template slot-scope="scope">
<el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.statusText }}</el-tag>
</template>
</el-table-column>
<el-table-column label="优先级" width="100">
<template slot-scope="scope">
<el-tag :type="getPriorityTagType(scope.row.priority)" size="small">{{ scope.row.priorityText }}</el-tag>
</template>
</el-table-column>
<el-table-column label="发布时间" width="150">
<template slot-scope="scope">
<div class="time-display">{{ scope.row.publishDate }}</div>
<div class="time-display-secondary">{{ scope.row.publishTime }}</div>
</template>
</el-table-column>
<el-table-column label="审核时间" width="150">
<template slot-scope="scope">
<div v-if="scope.row.auditDate">
<div class="time-display">{{ scope.row.auditDate }}</div>
<div class="time-display-secondary">{{ scope.row.auditTime }}</div>
</div>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="170" fixed="right">
<template slot-scope="scope">
<div class="action-buttons">
<el-button v-if="scope.row.status === 'pending' || scope.row.status === 'rejected'" type="success" size="mini" icon="el-icon-check" @click="handleApprove(scope.row)">通过</el-button>
<el-button v-if="scope.row.status === 'approved'" type="info" size="mini" icon="el-icon-remove-outline" @click="handleHide(scope.row)">隐藏</el-button>
<el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.status === 'pending'" type="danger" size="mini" icon="el-icon-close" @click="handleReject(scope.row)">拒绝</el-button>
<el-button type="info" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.page"
:page-sizes="[10, 20, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'SupplyDemand',
data() {
return {
pendingCount: 3,
filters: {
keyword: '',
status: '',
type: '',
date: ''
},
list: [
{
id: 1,
title: '提供企业管理咨询服务',
description: '专业企业管理咨询团队，具有10年以上行业经验...',
type: 'supply',
typeText: '供应',
publisher: { name: '张总', year: '2010' },
status: 'pending',
statusText: '待审核',
priority: 'high',
priorityText: '高',
publishDate: '2024-01-15',
publishTime: '14:30',
auditDate: null,
auditTime: null
},
{
id: 2,
title: '寻找技术合作伙伴',
description: '我们是一家初创公司，目前在开发一款AI智能客服产品...',
type: 'demand',
typeText: '需求',
publisher: { name: '李经理', year: '2015' },
status: 'approved',
statusText: '已通过',
priority: 'medium',
priorityText: '中',
publishDate: '2024-01-14',
publishTime: '16:45',
auditDate: '2024-01-14',
auditTime: '17:20'
},
{
id: 3,
title: '投融资咨询服务',
description: '专业投融资顾问，为企业提供全方位的融资解决方案...',
type: 'supply',
typeText: '供应',
publisher: { name: '王顾问', year: '2008' },
status: 'rejected',
statusText: '已拒绝',
priority: 'low',
priorityText: '低',
publishDate: '2024-01-13',
publishTime: '09:15',
auditDate: '2024-01-13',
auditTime: '10:30'
}
],
total: 156,
listQuery: {
page: 1,
limit: 10
},
multipleSelection: []
}
},
methods: {
handleSearch() {
console.log('搜索条件:', this.filters)
this.$message.success('搜索已触发')
},
handleExport() {
console.log('导出数据')
this.$message.info('数据导出中...')
},
handleSelectionChange(val) {
this.multipleSelection = val
},
getStatusTagType(status) {
const statusMap = {
pending: 'warning',
approved: 'success',
rejected: 'danger'
}
return statusMap[status]
},
getPriorityTagType(priority) {
const priorityMap = {
high: 'danger',
medium: 'warning',
low: 'success'
}
return priorityMap[priority]
},
handleApprove(row) {
this.$confirm('确定要通过这条供需信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}).then(() => {
console.log('审核通过:', row.id)
// API call here
row.status = 'approved'
row.statusText = '已通过'
this.$message.success('审核通过成功！')
})
},
handleEdit(row) {
console.log('编辑:', row.id)
this.$message.info('跳转到编辑页面')
},
handleReject(row) {
this.$prompt('请输入拒绝原因：', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(({ value }) => {
console.log('拒绝:', row.id, '原因:', value)
// API call here
row.status = 'rejected'
row.statusText = '已拒绝'
this.$message.success('已拒绝该供需信息！')
})
},
handleHide(row) {
this.$confirm('确定要隐藏这条供需信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
console.log('隐藏:', row.id)
// API call here
this.$message.success('供需信息已隐藏！')
})
},
handleView(row) {
console.log('查看详情:', row.id)
this.$message.info('跳转到详情页面')
},
handleSizeChange(val) {
this.listQuery.limit = val
// getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
// getList()
}
}
}
</script>
<style lang="scss" scoped>
.supply-demand-container {
padding: 20px;
background-color: #fff;
margin: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e9ecef;
.page-title {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
display: flex;
align-items: center;
margin: 0;
i {
margin-right: 10px;
color: #3498db;
}
}
.text-muted {
margin-left: 5px;
color: #6c757d;
}
}
.search-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.table-container {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.supply-title {
font-weight: 600;
color: #2c3e50;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.supply-desc {
font-size: 12px;
color: #6c757d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: 600;
}
.user-name {
font-size: 12px;
font-weight: 600;
}
.user-year {
font-size: 11px;
color: #666;
}
.time-display {
font-size: 12px;
}
.time-display-secondary {
font-size: 11px;
color: #666;
}
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
.el-button {
margin: 0;
}
}
.pagination-container {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 0;
}
</style>
Write Preview
Loading…
Cancel
Save