cfc/cfc-web/src/views/admin/ProductManage.vue

<template>
  <div class="product-manage admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">商品管理</span>
        <el-button type="success" size="mini" icon="el-icon-plus" @click="$router.push('/product-edit')">新增商品</el-button>
      </div>

      <div class="filter-bar" style="margin-bottom:12px;">
        <el-input
          v-model="filters.keyword"
          placeholder="搜索商品名称"
          prefix-icon="el-icon-search"
          clearable
          style="width:200px;"
          @clear="loadList"
          @keyup.enter.native="loadList"
        />
        <el-select v-model="filters.status" placeholder="商品状态" @change="loadList" clearable style="width:130px;">
          <el-option label="全部状态" value="" />
          <el-option label="待审核" value="pending" />
          <el-option label="待上架" value="approved" />
          <el-option label="已上架" value="on_shelf" />
          <el-option label="已下架" value="off_shelf" />
          <el-option label="已拒绝" value="rejected" />
        </el-select>
        <el-select v-model="filters.productType" placeholder="商品类型" @change="loadList" clearable style="width:140px;">
          <el-option label="全部类型" value="" />
          <el-option label="实物商品" value="physical" />
          <el-option label="虚拟商品" value="virtual" />
          <el-option label="优惠券" value="coupon" />
          <el-option label="测评商品" value="assessment" />
        </el-select>
        <el-button type="primary" size="mini" @click="loadList">查询</el-button>
        <el-button size="mini" @click="resetFilters">重置</el-button>
      </div>

      <div class="table-scroll-wrap-sm">
        <el-table :max-height="tableHeight" :data="list" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column label="商品图片" width="80">
        <template slot-scope="{ row }">
          <img
            v-if="row.coverImage"
            :src="row.coverImage"
            class="product-thumb"
            @click="previewImage(row.coverImage)"
          />
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" min-width="150" show-overflow-tooltip>
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('name', $event)" @dblclick.stop="onSortToggle('name')">商品名称<span v-if="sortIndex('name') !== null" class="sort-index" :class="sortClass('name') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('name') }}</span>{{ sortIcon('name') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="90">
        <template slot-scope="{ row }">
          {{ typeLabel(row.productType) }}
        </template>
      </el-table-column>

      <el-table-column label="售价(元)" width="90">
        <template slot-scope="{ row }">
          {{ formatPriceWithSymbol(row.price || 0) }}
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="库存" width="80">
        <template slot-scope="{ row }">
          <span :class="{ 'stock-warning': row.stock !== null && row.stock < 10 }">
            {{ row.stock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="salesCount" label="销量" width="70">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('salesCount', $event)" @dblclick.stop="onSortToggle('salesCount')">销量<span v-if="sortIndex('salesCount') !== null" class="sort-index" :class="sortClass('salesCount') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('salesCount') }}</span>{{ sortIcon('salesCount') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="供应商" width="120" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.vendorName || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="90">
        <template slot-scope="{ row }">
          <el-tag :type="statusType(row.status)" size="mini">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sortOrder" label="排序" width="80">
        <template slot-scope="{ row }">
          {{ row.sortOrder != null ? row.sortOrder : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160">
        <template slot-scope="{ row }">
          {{ formatTime(row.createdAt) }}
        </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)" @dblclick.stop="onSortToggle('createdAt')">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>

          </template></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="$router.push('/product-edit?id=' + row.id)">编辑</el-button>
          <el-button size="mini" type="info" @click="showInventoryDialog(row)">库存</el-button>
          <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
            <el-button size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="copy" icon="el-icon-document-copy">复制</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'pending'" command="approve" icon="el-icon-circle-check">通过</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'pending'" command="reject" icon="el-icon-circle-close">拒绝</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'on_shelf'" command="offShelf" icon="el-icon-download">下架</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'off_shelf'" command="onShelf" icon="el-icon-upload2">上架</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
        </el-table>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.size"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination-wrap"
    />

    <el-dialog title="拒绝原因" :visible.sync="rejectDialogVisible" width="420px">
      <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
      <span slot="footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmReject">确认拒绝</el-button>
      </span>
    </el-dialog>

    <el-dialog title="商品详情" :visible.sync="detailDialogVisible" width="600px">
      <el-descriptions :column="2" border v-if="detail">
        <el-descriptions-item label="商品名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="商品类型">{{ typeLabel(detail.productType) }}</el-descriptions-item>
        <el-descriptions-item label="售价">{{ formatPriceWithSymbol(detail.price || 0) }}</el-descriptions-item>
        <el-descriptions-item label="库存">{{ detail.stock }}</el-descriptions-item>
        <el-descriptions-item label="销量">{{ detail.salesCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ detail.vendorName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusType(detail.status)" size="mini">{{ statusLabel(detail.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="拒绝原因" v-if="detail.rejectReason">{{ detail.rejectReason }}</el-descriptions-item>
        <el-descriptions-item label="商品描述" :span="2">{{ detail.description || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ formatTime(detail.createdAt) }}</el-descriptions-item>
      </el-descriptions>
      <div v-else style="text-align:center;color:#999;">加载中...</div>
    </el-dialog>
  <!-- 库存弹窗 -->
    <el-dialog title="库存管理" :visible.sync="inventoryDialogVisible" width="800px">
      <div v-loading="inventoryLoading">
        <el-descriptions :column="2" border v-if="inventoryData">
          <el-descriptions-item label="商品名称">{{ inventoryData.productName }}</el-descriptions-item>
          <el-descriptions-item label="当前库存">{{ inventoryData.stock }}</el-descriptions-item>
          <el-descriptions-item label="预警下限">{{ inventoryData.minStockAlert != null ? inventoryData.minStockAlert : 10 }}</el-descriptions-item>
        </el-descriptions>

        <h4 style="margin:16px 0 8px;">SKU 库存</h4>
        <el-table :data="inventoryData.skus" border stripe v-if="inventoryData && inventoryData.skus && inventoryData.skus.length">
          <el-table-column prop="id" label="SKU ID" width="70" />
          <el-table-column prop="specs" label="规格" min-width="150" />
          <el-table-column prop="stock" label="库存" width="70" />
          <el-table-column prop="minStockAlert" label="预警下限" width="70" />
        </el-table>
        <div v-else-if="inventoryData" style="color:#999;padding:8px;">无SKU数据</div>

        <h4 style="margin:16px 0 8px;">最近 10 条流水</h4>
        <el-table :data="inventoryData.recentTransactions" border stripe v-if="inventoryData && inventoryData.recentTransactions && inventoryData.recentTransactions.length">
          <el-table-column label="类型" width="80">
            <template slot-scope="{ row }">
              <el-tag :type="row.type === 'inbound' ? 'success' : row.type === 'outbound' ? 'danger' : 'warning'" size="mini">
                {{ {'inbound':'入库','outbound':'出库','adjustment':'调账','counting':'盘点','refund':'退款入库'}[row.type] || row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="70">
            <template slot-scope="{ row }">
              <span :style="{ color: row.direction === 1 ? '#67c23a' : '#f56c6c' }">{{ row.direction === 1 ? '+' : '-' }}{{ row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="beforeStock" label="变动前" width="70" />
          <el-table-column prop="afterStock" label="变动后" width="70" />
          <el-table-column prop="remark" label="备注" min-width="150" />
          <el-table-column prop="createdAt" label="时间" width="160" />
        </el-table>
        <div v-else style="color:#999;padding:8px;">暂无流水记录</div>
      </div>
      <span slot="footer">
        <el-button @click="inventoryDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="$router.push('/inventory')">进入库存管理</el-button>
      </span>
    </el-dialog>
  </el-card>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getProductList, reviewProduct, shelveProduct, copyProduct } from '@/api/admin'

export default {
  mixins: [SortMixin],
  name: 'ProductManage',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      filters: {
        keyword: '',
        status: '',
        productType: ''
      },
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      sortableColumns: { name: '商品名称', salesCount: '销量', createdAt: '创建时间' },

      rejectDialogVisible: false,
      rejectTarget: null,
      rejectReason: '',
      detailDialogVisible: false,
      detail: null,
      inventoryDialogVisible: false,
      inventoryLoading: false,
      inventoryData: null
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          size: this.pagination.size,
          status: this.filters.status || null,
          productType: this.filters.productType || null,
          keyword: this.filters.keyword || null
        }
        if (this.sortState.length > 0) params.sort = this.sortState

        const res = await getProductList(params)
        this.list = res.data.records || []
        this.pagination.total = res.data.total || 0
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.page = 1
      this.loadList()
    },
    handlePageChange(page) {
      this.pagination.page = page
      this.loadList()
    },
    statusType(status) {
      const map = {
        pending: 'warning',
        approved: 'success',
        on_shelf: 'success',
        off_shelf: 'info',
        rejected: 'danger'
      }
      return map[status] || 'info'
    },
    statusLabel(status) {
      const map = {
        pending: '待审核',
        approved: '待上架',
        on_shelf: '已上架',
        off_shelf: '已下架',
        rejected: '已拒绝'
      }
      return map[status] || status
    },
    typeLabel(type) {
      const map = { physical: '实物商品', virtual: '虚拟商品', coupon: '优惠券', assessment: '测评商品' }
      return map[type] || type
    },
    formatTime(t) {
      if (!t) return '-'
      return t.replace ? t.replace('T', ' ').substring(0, 19) : t
    },
    formatPriceWithSymbol(price) {
      if (price === 0) return '免费'
      return '¥' + (price / 100).toFixed(2)
    },
    async handleReview(row, action) {
      try {
        await this.$confirm('确认通过该商品审核？', '提示')
        await reviewProduct(row.id, { action })
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    showRejectDialog(row) {
      this.rejectTarget = row
      this.rejectReason = ''
      this.rejectDialogVisible = true
    },
    async confirmReject() {
      if (!this.rejectReason.trim()) {
        return this.$message.warning('请填写拒绝原因')
      }
      try {
        await reviewProduct(this.rejectTarget.id, { action: 'reject', reason: this.rejectReason })
        this.$message.success('已拒绝')
        this.rejectDialogVisible = false
        this.loadList()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    async handleShelve(row, shelve) {
      try {
        await this.$confirm('确认' + (shelve ? '上架' : '下架') + '该商品？', '提示')
        await shelveProduct(row.id, { shelve })
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    previewImage(url) {
      if (!url) return
      this.$alert('<img src="' + url + '" style="max-width:100%;" />', '商品图片', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: true
      })
    },
    async handleCopy(row) {
      try {
        await this.$confirm('确认复制商品 "' + row.name + '"?', '提示')
        await copyProduct(row.id)
        this.$message.success('复制成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('复制失败')
      }
    },
    async showInventoryDialog(row) {
      this.inventoryDialogVisible = true
      this.inventoryLoading = true
      try {
        const { getProductStock } = await import('@/api/admin')
        const res = await getProductStock(row.id)
        this.inventoryData = res.data
      } catch (e) {
        this.$message.error('加载库存信息失败')
      } finally {
        this.inventoryLoading = false
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'copy': this.handleCopy(row); break;
        case 'approve': this.handleReview(row, 'approve'); break;
        case 'reject': this.showRejectDialog(row); break;
        case 'offShelf': this.handleShelve(row, false); break;
        case 'onShelf': this.handleShelve(row, true); break;
      }
    }
  }
}
</script>

<style scoped>
.product-manage {
  padding: 20px;
}
.product-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}
.stock-warning {
  color: #f56c6c;
  font-weight: bold;
}
.header-search {
  width: 180px;
}

.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-tag {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
</style>