backmanagerweb/src/components/products.vue

<script setup>

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

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 productTypeMap = {
    raw_material: '原材料',
    packaging: '包装材料',
    equipment: '设备器具',
    cleaning: '清洁用品',
    promote: '宣传物料'
}

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

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

// 获取产品列表
const fetchData = async () => {
    loading.value = true
    const res = await getProductsList()
    searchResults.value = res.data
    showSearchResults.value = true
    loading.value = false
}

// 搜索
const handleSearch = async () => {
    loading.value = true
    const res = await getProductsList({
        keyword: search.value,
        searchField: select.value,
        type: filterType.value
    })
    searchResults.value = res.data
    showSearchResults.value = true
    loading.value = false
}

// 重置搜索
const resetSearch = () => {
    search.value = ''
    filterType.value = ''
    showSearchResults.value = false
    showAddForm.value = false
    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
    }

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

    cancelAdd()
    fetchData()
}

// 删除产品
const deleteProduct = async (id) => {
    ElMessageBox.confirm('确定删除该产品吗？', '提示', {
        type: 'warning'
    }).then(async () => {
        await deleteProductsAPI(id)
        ElMessage.success('删除成功')
        fetchData()
    })
}

// 取消
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 = {
        raw_material: '',
        packaging: 'success',
        equipment: 'warning',
        cleaning: 'info',
        promote: 'danger'
    }
    return map[type] || 'info'
}

</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="ID" 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">新增产品</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="raw_material" />
                    <el-option label="包装材料" value="packaging" />
                    <el-option label="设备器具" value="equipment" />
                    <el-option label="清洁用品" value="cleaning" />
                    <el-option label="宣传物料" value="promote" />
                </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 class="products-table">
                <el-table :data="searchResults" v-loading="loading" border style="width: 100%" @row-dblclick="handleRowDblClick">
                    <el-table-column prop="id" label="ID" width="70" />
                    <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">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="editProduct(row)">编辑</el-button>
                            <el-button link type="danger" @click="deleteProduct(row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="margin-top: 10px; color: #909399; font-size: 14px;">
                    找到 {{ searchResults.length }} 条结果
                    <el-button link type="primary" @click="clearSearch">清空搜索</el-button>
                </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="raw_material" />
                        <el-option label="包装材料" value="packaging" />
                        <el-option label="设备器具" value="equipment" />
                        <el-option label="清洁用品" value="cleaning" />
                        <el-option label="宣传物料" value="promote" />
                    </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-input v-model="form.supplier" placeholder="请输入供应商名称" />
                </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="closeDetail(); editProduct(currentDetail)">编辑</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped>

</style>