backmanagerweb/src/components/products.vue

<script setup>

import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, reactive, watch, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    getProductsList,
    createProducts,
    updateProducts,
    deleteProductsAPI
} from '../api/products'
import { getSupplierList } from '../api/suppliers'
import { hasPermission } from '../store/user'

const form = reactive({
    name: '',
    type: '',
    quantity: 0,
    price: 0,
    unit: '件',
    specification: '',
    supplier: '',
    remark: ''
})

const search = ref('')
const select = ref('2')
const filterType = ref('')
const searchResults = ref([])
const showSearchResults = ref(false)
const showAddForm = ref(false)
const isEditMode = ref(false)
const currentProductId = ref(null)
const loading = ref(false)
const showDetailDialog = ref(false)
const currentDetail = ref(null)
const supplierList = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 产品类型映射
const productTypeMap = {
    '茶饮原料': '茶饮原料',
    '包装物料': '包装物料',
    '设备器具': '设备器具'
}

onMounted(() => {
    fetchData()
    fetchSuppliers()
})

const fetchSuppliers = async () => {
    try {
        const res = await getSupplierList(null, { quiet: true })
        supplierList.value = res.data?.list || res.data || []
    } catch {}
}

// 监听筛选变化
watch(filterType, () => {
    currentPage.value = 1
    handleSearch()
})

// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)

// 获取产品列表（服务端分页）
const fetchData = async (page) => {
    loading.value = true
    const params = {
        page: page || currentPage.value,
        pageSize: pageSize.value
    }
    const res = await getProductsList(params)
    if (res.code === 0 || res.code === 200) {
        if (res.data && Array.isArray(res.data.list)) {
            searchResults.value = res.data.list
            total.value = res.data.total
        } else if (Array.isArray(res.data)) {
            searchResults.value = res.data
            total.value = res.data.length
        }
    }
    showSearchResults.value = true
    loading.value = false
}

// 搜索
const handleSearch = async () => {
    // 如果在表单页面，先关闭表单
    if (showAddForm.value) {
        cancelAdd()
    }

    loading.value = true
    const params = {
        page: currentPage.value,
        pageSize: pageSize.value,
        type: filterType.value || undefined
    }
    if (select.value === '1') {
        params.id = Number(search.value)
    } else if (select.value === '2') {
        params.name = search.value
    } else if (select.value === '3') {
        params.supplier = search.value
    }
    const res = await getProductsList(params)
    if (res.code === 0 || res.code === 200) {
        if (res.data && Array.isArray(res.data.list)) {
            searchResults.value = res.data.list
            total.value = res.data.total
        } else if (Array.isArray(res.data)) {
            searchResults.value = res.data
            total.value = res.data.length
        }
    }
    showSearchResults.value = true
    loading.value = false
}

// 重置搜索
const resetSearch = () => {
    search.value = ''
    filterType.value = ''
    showSearchResults.value = false
    showAddForm.value = false
    currentPage.value = 1
    fetchData()
}

// 清空搜索
const clearSearch = () => {
    resetSearch()
}

// 清空表单
const resetForm = () => {
    form.name = ''
    form.type = ''
    form.quantity = 0
    form.price = 0
    form.unit = '件'
    form.specification = ''
    form.supplier = ''
    form.remark = ''
    isEditMode.value = false
    currentProductId.value = null
}

// 显示新增表单
const addProduct = () => {
    resetForm()
    showAddForm.value = true
    showSearchResults.value = false
}

// 编辑
const editProduct = (row) => {
    isEditMode.value = true
    currentProductId.value = row.id
    form.name = row.name
    form.type = row.type
    form.quantity = row.quantity
    form.price = row.price
    form.unit = row.unit
    form.specification = row.specification
    form.supplier = row.supplier
    form.remark = row.remark
    showAddForm.value = true
    showSearchResults.value = false
}

// 保存产品
const saveProduct = async () => {
    const formData = {
        name: form.name,
        type: form.type,
        quantity: form.quantity,
        price: form.price,
        unit: form.unit,
        specification: form.specification,
        supplier: form.supplier,
        remark: form.remark
    }

    try {
        if (isEditMode.value) {
            await updateProducts(currentProductId.value, formData)
            ElMessage.success('更新成功')
        } else {
            await createProducts(formData)
            ElMessage.success('新增成功')
        }

        cancelAdd()
        fetchData()
    } catch (error) {
        ElMessage.error(error.response?.data?.message || error.message || '操作失败')
    }
}

// 删除产品
const deleteProduct = async (id) => {
    ElMessageBox.confirm('确定删除该产品吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await deleteProductsAPI(id)
            ElMessage.success('删除成功')
            fetchData()
        } catch (error) {
            ElMessage.error(error.response?.data?.message || error.message || '删除失败')
        }
    })
}

// 取消
const cancelAdd = () => {
    resetForm()
    showAddForm.value = false
    showSearchResults.value = true
}

// 双击行查看详情
const handleRowDblClick = (row) => {
    currentDetail.value = { ...row }
    showDetailDialog.value = true
}

// 关闭详情弹窗
const closeDetail = () => {
    showDetailDialog.value = false
    currentDetail.value = null
}

// 产品类型标签样式
const getTypeTag = (type) => {
    const map = {
        '茶饮原料': '',
        '包装物料': 'success',
        '设备器具': 'warning'
    }
    return map[type] || 'info'
}

// 页码变化（服务端分页：重新请求后端）
const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchData(val)
}

// 检查权限
const canCreate = computed(() => hasPermission('product', 'create'))
const canUpdate = computed(() => hasPermission('product', 'update'))
const canDelete = computed(() => hasPermission('product', 'delete'))
const canOperate = computed(() => canUpdate.value || canDelete.value)

</script>

<template>
    <div class="products-container">
        <!-- 搜索栏区域 -->
        <div class="products-search">
            <div class="search-row">
                <el-input v-model="search" style="max-width: 500px" placeholder="请输入搜索关键词"
                    class="products-search-with-select" @keyup.enter="handleSearch">
                    <template #prepend>
                        <el-select v-model="select" placeholder="请选择" style="width: 115px">
                            <el-option label="产品编号" value="1" />
                            <el-option label="产品名称" value="2" />
                            <el-option label="供应商" value="3" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="handleSearch" />
                    </template>
                </el-input>

                <div class="search-buttons">
                    <el-button type="success" @click="addProduct" v-if="canCreate">新增产品</el-button>
                    <el-button type="default" @click="resetSearch">重置</el-button>
                </div>
            </div>

            <div class="filter-row">
                <span class="filter-label">筛选条件：</span>
                <el-select v-model="filterType" placeholder="产品类型" clearable style="width: 140px; margin-right: 12px;">
                    <el-option label="茶饮原料" value="茶饮原料" />
                    <el-option label="包装物料" value="包装物料" />
                    <el-option label="设备器具" value="设备器具" />
                </el-select>
            </div>
        </div>

        <div v-if="showSearchResults" class="products-list">
            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="5" animated />
            </div>

            <div v-else-if="searchResults.length === 0" class="empty-container">
                <el-empty description="暂无数据" />
            </div>

            <div v-else>
                <div class="list-header">
                    <span class="total-count">共找到 {{ total }} 条记录</span>
                </div>

                <el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
                    @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
                    <el-table-column prop="id" label="产品编号" width="90" />
                    <el-table-column prop="name" label="产品名称" min-width="120" />
                    <el-table-column prop="type" label="产品类型" width="110">
                        <template #default="{ row }">
                            <el-tag :type="getTypeTag(row.type)">
                                {{ productTypeMap[row.type] || row.type }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quantity" label="库存" width="80" />
                    <el-table-column prop="price" label="单价" width="100">
                        <template #default="{ row }">
                            ¥{{ row.price?.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit" label="单位" width="70" />
                    <el-table-column prop="specification" label="规格" min-width="140" show-overflow-tooltip />
                    <el-table-column prop="supplier" label="供应商" min-width="150" show-overflow-tooltip />
                    <el-table-column label="操作" width="150" fixed="right" v-if="canOperate">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="editProduct(row)" v-if="canUpdate">编辑</el-button>
                            <el-button link type="danger" @click="deleteProduct(row.id)" v-if="canDelete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination
                        v-model:current-page="currentPage"
                        :page-size="pageSize"
                        :total="total"
                        layout="prev, pager, next"
                        prev-text="上一页"
                        next-text="下一页"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>

        <!-- 新增/编辑产品表单 -->
        <div v-if="showAddForm" class="products-info-label">
            <el-divider content-position="left">{{ isEditMode ? '编辑产品信息' : '新增产品' }}</el-divider>
            <el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
                <el-form-item label="产品名称" required>
                    <el-input v-model="form.name" placeholder="请输入产品名称" />
                </el-form-item>

                <el-form-item label="产品类型" required>
                    <el-select v-model="form.type" placeholder="请选择产品类型" style="width: 100%;">
                        <el-option label="茶饮原料" value="茶饮原料" />
                        <el-option label="包装物料" value="包装物料" />
                        <el-option label="设备器具" value="设备器具" />
                    </el-select>
                </el-form-item>

                <el-form-item label="产品库存" required>
                    <el-input-number v-model="form.quantity" :min="0" :step="10" style="width: 100%;" />
                </el-form-item>

                <el-form-item label="产品单价" required>
                    <el-input-number v-model="form.price" :min="0" :step="0.01" :precision="2" style="width: 100%;" />
                </el-form-item>

                <el-form-item label="计量单位">
                    <el-input v-model="form.unit" placeholder="请输入计量单位" />
                </el-form-item>

                <el-form-item label="产品规格">
                    <el-input v-model="form.specification" placeholder="请输入产品规格/型号" />
                </el-form-item>

                <el-form-item label="供应商">
                    <el-select v-model="form.supplier" placeholder="请选择供应商" style="width: 100%;" filterable clearable>
                        <el-option v-for="s in supplierList" :key="s.id" :label="s.name" :value="s.name" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveProduct">保存</el-button>
                    <el-button type="danger" @click="cancelAdd">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 产品详情弹窗 -->
        <el-dialog v-model="showDetailDialog" title="产品详情" width="650px" @close="closeDetail">
            <div v-if="currentDetail" class="detail-content">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="产品编号">{{ currentDetail.id }}</el-descriptions-item>
                    <el-descriptions-item label="产品名称">{{ currentDetail.name }}</el-descriptions-item>
                    <el-descriptions-item label="产品类型">
                        <el-tag :type="getTypeTag(currentDetail.type)">
                            {{ productTypeMap[currentDetail.type] || currentDetail.type }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="库存数量">{{ currentDetail.quantity }}</el-descriptions-item>
                    <el-descriptions-item label="产品单价">
                        <span class="amount-text">¥{{ currentDetail.price?.toFixed(2) }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="计量单位">{{ currentDetail.unit }}</el-descriptions-item>
                    <el-descriptions-item label="产品规格" :span="2">{{ currentDetail.specification || '无' }}</el-descriptions-item>
                    <el-descriptions-item label="供应商" :span="2">{{ currentDetail.supplier || '无' }}</el-descriptions-item>
                    <el-descriptions-item label="备注" :span="2">
                        {{ currentDetail.remark || '无' }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <template #footer>
                <el-button @click="closeDetail">关闭</el-button>
                <el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editProduct(d) })()">编辑</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped>
.products-container {
  padding: 20px;
}

.products-search {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.search-buttons {
  display: flex;
  gap: 10px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.filter-label {
  color: #606266;
  font-size: 14px;
  margin-right: 10px;
}

.list-header {
  margin-bottom: 15px;
}

.total-count {
  color: #909399;
  font-size: 14px;
}

.loading-container,
.empty-container {
  padding: 40px 0;
}

.clickable-row {
  cursor: pointer;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.detail-content {
  padding: 10px 0;
}

.amount-text {
  font-weight: 600;
  color: #e6a23c;
  font-size: 16px;
}
</style>