RelationshipManagement/src/views/srm/PurchaseView.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'

interface Purchase {
  id: number
  purchaseNo: string
  supplier: string
  item: string
  quantity: number
  unitPrice: number
  totalAmount: number
  status: string
  createTime: string
}

const tableData = ref<Purchase[]>([
  {
    id: 1,
    purchaseNo: 'PUR202401001',
    supplier: 'ABC科技有限公司',
    item: '服务器设备',
    quantity: 20,
    unitPrice: 8000,
    totalAmount: 160000,
    status: '待确认',
    createTime: '2024-01-15',
  },
  {
    id: 2,
    purchaseNo: 'PUR202401002',
    supplier: 'XYZ办公用品公司',
    item: '办公桌椅',
    quantity: 50,
    unitPrice: 500,
    totalAmount: 25000,
    status: '已确认',
    createTime: '2024-01-14',
  },
])

const searchForm = reactive({
  keyword: '',
  status: '',
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50,
})

const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    待确认: 'warning',
    已确认: 'primary',
    已发货: 'info',
    已完成: 'success',
    已取消: 'danger',
  }
  return map[status] || 'info'
}
</script>

<template>
  <div class="purchase-view">
    <el-page-header>
      <template #content>
        <span class="page-title">采购管理</span>
      </template>
    </el-page-header>

    <el-card class="content-card" shadow="hover">
      <div class="toolbar">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.keyword"
              placeholder="采购单号/供应商名称"
              clearable
              style="width: 200px"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
              <el-option label="待确认" value="待确认" />
              <el-option label="已确认" value="已确认" />
              <el-option label="已发货" value="已发货" />
              <el-option label="已完成" value="已完成" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建采购单')">创建采购单</el-button>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="purchaseNo" label="采购单号" width="150" />
        <el-table-column prop="supplier" label="供应商" width="180" />
        <el-table-column prop="item" label="物品名称" width="150" />
        <el-table-column prop="quantity" label="数量" width="100" />
        <el-table-column prop="unitPrice" label="单价" width="100">
          <template #default="scope">
            <span>¥{{ scope.row.unitPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="120">
          <template #default="scope">
            <span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.totalAmount.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看详情')">查看</el-button>
            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑采购单')">编辑</el-button>
            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除采购单')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.purchase-view {
  height: 100%;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
}

.content-card {
  margin-top: 20px;
  border-radius: 8px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.search-form {
  margin: 0;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>