From 2b4c3707790de76f1733022ce177cb516004c743 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Tue, 24 Jun 2025 10:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/library/index.vue | 408 ++++++++++++++++++++++++++++++++++++
 1 file changed, 408 insertions(+)
 create mode 100644 src/views/library/index.vue

diff --git a/src/views/library/index.vue b/src/views/library/index.vue
new file mode 100644
index 0000000..72a9639
--- /dev/null
+++ b/src/views/library/index.vue
@@ -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>
+  
\ No newline at end of file