员工和用户整合前暂存

src/components/products.vue

@@ -1,11 +1,362 @@
 <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>
-<h1>hello ,im 3</h1>
+   <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>
+</style>