<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<el-card class="search-card" shadow="never">
|
<el-form :model="searchForm" :inline="true" label-width="100px">
|
<el-form-item label="商品名称：">
|
<el-input v-model="searchForm.productName" placeholder="请输入商品名称" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="供应商：">
|
<el-select v-model="searchForm.supplierId" placeholder="请选择供应商" clearable style="width: 200px">
|
<el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name" :value="supplier.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="价格状态：">
|
<el-select v-model="searchForm.priceStatus" placeholder="请选择状态" clearable style="width: 150px">
|
<el-option label="有效" value="active" />
|
<el-option label="待生效" value="pending" />
|
<el-option label="已过期" value="expired" />
|
<el-option label="已暂停" value="suspended" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch" :loading="loading">
|
<el-icon><Search /></el-icon>
|
搜索
|
</el-button>
|
<el-button @click="resetSearch">
|
<el-icon><Refresh /></el-icon>
|
重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 功能按钮区域 -->
|
<el-card class="action-card" shadow="never">
|
<div class="action-buttons">
|
<el-button type="primary" @click="openDialog('add')">
|
<el-icon><Plus /></el-icon>
|
新增价格
|
</el-button>
|
<el-button type="success" @click="openBatchDiscountDialog">
|
<el-icon><Discount /></el-icon>
|
批量折扣
|
</el-button>
|
<el-button type="warning" @click="openPriceControlDialog">
|
<el-icon><Setting /></el-icon>
|
价格控制
|
</el-button>
|
<el-button type="info" @click="exportData">
|
<el-icon><Download /></el-icon>
|
导出数据
|
</el-button>
|
<el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0">
|
<el-icon><Delete /></el-icon>
|
批量删除
|
</el-button>
|
</div>
|
</el-card>
|
|
|
<!-- 主表格 -->
|
<el-card class="table-card" shadow="never">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
@selection-change="handleSelectionChange"
|
:default-sort="{ prop: 'updateTime', order: 'descending' }"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="商品信息" min-width="200">
|
<template #default="{ row }">
|
<div class="product-info">
|
<div class="product-name">{{ row.productName }}</div>
|
<div class="product-spec">{{ row.specification }}</div>
|
<div class="product-code">编码: {{ row.productCode }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="供应商" prop="supplierName" width="150" />
|
<el-table-column label="基础价格" width="120" align="right">
|
<template #default="{ row }">
|
<span class="price-text">¥{{ row.basePrice.toFixed(2) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="折扣信息" width="150">
|
<template #default="{ row }">
|
<div v-if="row.discountType">
|
<el-tag :type="getDiscountTagType(row.discountType)" size="small">
|
{{ getDiscountText(row.discountType) }}
|
</el-tag>
|
<div class="discount-value">{{ row.discountValue }}{{ row.discountType === 'percentage' ? '%' : '元' }}</div>
|
</div>
|
<span v-else class="no-discount">无折扣</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实际价格" width="120" align="right">
|
<template #default="{ row }">
|
<span class="final-price">¥{{ calculateFinalPrice(row).toFixed(2) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="价格控制" width="120">
|
<template #default="{ row }">
|
<div class="price-control">
|
<div v-if="row.priceControl?.minPrice" class="control-item">
|
最低: ¥{{ row.priceControl.minPrice.toFixed(2) }}
|
</div>
|
<div v-if="row.priceControl?.maxPrice" class="control-item">
|
最高: ¥{{ row.priceControl.maxPrice.toFixed(2) }}
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" width="100" align="center">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
|
<div v-if="isPriceWarning(row)" class="warning-indicator">
|
<el-icon color="#F56C6C"><Warning /></el-icon>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="生效时间" prop="effectiveTime" width="180" />
|
<el-table-column label="更新时间" prop="updateTime" width="180" sortable />
|
<el-table-column label="操作" width="250" align="center" fixed="right">
|
<template #default="{ row }">
|
<el-button type="primary" link @click="openDialog('edit', row)">
|
<el-icon><Edit /></el-icon>
|
编辑
|
</el-button>
|
<el-button type="success" link @click="openDiscountDialog(row)">
|
<el-icon><Discount /></el-icon>
|
折扣
|
</el-button>
|
<el-button type="danger" link @click="handleDelete(row)">
|
<el-icon><Delete /></el-icon>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination-wrapper">
|
<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"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</el-card>
|
|
<!-- 新增/编辑对话框 -->
|
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增价格' : '编辑价格'" width="800px">
|
<el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="商品名称" prop="productName">
|
<el-select v-model="formData.productName" placeholder="请选择商品" style="width: 100%" filterable>
|
<el-option v-for="product in productList" :key="product.id" :label="product.name" :value="product.name" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="商品编码" prop="productCode">
|
<el-input v-model="formData.productCode" placeholder="请输入商品编码" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="规格型号" prop="specification">
|
<el-input v-model="formData.specification" placeholder="请输入规格型号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商" prop="supplierName">
|
<el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
|
<el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name" :value="supplier.name" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="基础价格" prop="basePrice">
|
<el-input-number v-model="formData.basePrice" :min="0" :precision="2" placeholder="请输入基础价格" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单位">
|
<el-input v-model="formData.unit" placeholder="请输入单位" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 折扣设置 -->
|
<el-divider content-position="left">折扣设置</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="折扣类型">
|
<el-select v-model="formData.discountType" placeholder="请选择折扣类型" style="width: 100%">
|
<el-option label="无折扣" value="" />
|
<el-option label="百分比折扣" value="percentage" />
|
<el-option label="固定金额" value="fixed" />
|
<el-option label="阶梯折扣" value="tiered" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="折扣值" v-if="formData.discountType && formData.discountType !== 'tiered'">
|
<el-input-number
|
v-model="formData.discountValue"
|
:min="0"
|
:max="formData.discountType === 'percentage' ? 100 : undefined"
|
:precision="2"
|
placeholder="请输入折扣值"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="折扣有效期">
|
<el-date-picker
|
v-model="formData.discountEndTime"
|
type="datetime"
|
placeholder="选择结束时间"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 阶梯折扣设置 -->
|
<div v-if="formData.discountType === 'tiered'">
|
<el-form-item label="阶梯折扣">
|
<el-table :data="formData.tieredDiscount" border size="small">
|
<el-table-column label="最小数量" width="120">
|
<template #default="{ row, $index }">
|
<el-input-number v-model="row.minQty" :min="0" size="small" />
|
</template>
|
</el-table-column>
|
<el-table-column label="最大数量" width="120">
|
<template #default="{ row, $index }">
|
<el-input-number v-model="row.maxQty" :min="0" size="small" />
|
</template>
|
</el-table-column>
|
<el-table-column label="折扣率(%)" width="120">
|
<template #default="{ row, $index }">
|
<el-input-number v-model="row.discount" :min="0" :max="100" :precision="2" size="small" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80">
|
<template #default="{ row, $index }">
|
<el-button type="danger" link @click="removeTieredRow($index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-button type="primary" link @click="addTieredRow" class="mt-2">添加阶梯</el-button>
|
</el-form-item>
|
</div>
|
|
<!-- 价格控制 -->
|
<el-divider content-position="left">价格控制</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="最低价格">
|
<el-input-number v-model="formData.minPrice" :min="0" :precision="2" placeholder="最低价格" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="最高价格">
|
<el-input-number v-model="formData.maxPrice" :min="0" :precision="2" placeholder="最高价格" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="预警阈值(%)">
|
<el-input-number v-model="formData.warningThreshold" :min="0" :max="100" :precision="1" placeholder="预警阈值" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="生效时间" prop="effectiveTime">
|
<el-date-picker v-model="formData.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="失效时间">
|
<el-date-picker v-model="formData.expireTime" type="datetime" placeholder="选择失效时间" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="调价原因" prop="reason">
|
<el-select v-model="formData.reason" placeholder="请选择调价原因" style="width: 100%">
|
<el-option label="市场价格变动" value="market" />
|
<el-option label="成本变化" value="cost" />
|
<el-option label="供应商调整" value="supplier" />
|
<el-option label="季节性调整" value="seasonal" />
|
<el-option label="促销活动" value="promotion" />
|
<el-option label="其他原因" value="other" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="备注">
|
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 批量折扣对话框 -->
|
<el-dialog v-model="batchDiscountVisible" title="批量设置折扣" width="600px">
|
<el-form :model="batchDiscountForm" label-width="120px">
|
<el-form-item label="折扣类型">
|
<el-select v-model="batchDiscountForm.discountType" placeholder="请选择折扣类型" style="width: 100%">
|
<el-option label="百分比折扣" value="percentage" />
|
<el-option label="固定金额" value="fixed" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="折扣值">
|
<el-input-number
|
v-model="batchDiscountForm.discountValue"
|
:min="0"
|
:max="batchDiscountForm.discountType === 'percentage' ? 100 : undefined"
|
:precision="2"
|
placeholder="请输入折扣值"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="生效时间">
|
<el-date-picker v-model="batchDiscountForm.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="失效时间">
|
<el-date-picker v-model="batchDiscountForm.expireTime" type="datetime" placeholder="选择失效时间" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="适用商品">
|
<div class="selected-items">
|
已选择 {{ selectedRows.length }} 个商品
|
</div>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="batchDiscountVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleBatchDiscount">确定</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 价格控制对话框 -->
|
<el-dialog v-model="priceControlVisible" title="价格控制设置" width="700px">
|
<el-form :model="priceControlForm" label-width="120px">
|
<el-form-item label="默认最低价格">
|
<el-input-number v-model="priceControlForm.defaultMinPrice" :min="0" :precision="2" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="默认最高价格">
|
<el-input-number v-model="priceControlForm.defaultMaxPrice" :min="0" :precision="2" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="价格变动阈值">
|
<el-input-number v-model="priceControlForm.changeThreshold" :min="0" :max="100" :precision="1" style="width: 200px" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="priceControlVisible = false">取消</el-button>
|
<el-button type="primary" @click="handlePriceControl">保存设置</el-button>
|
</template>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import {
|
Search, Refresh, Plus, Discount, Setting, Download, Delete, Edit,
|
Warning
|
} from '@element-plus/icons-vue'
|
|
// 响应式数据
|
const loading = ref(false)
|
const submitLoading = ref(false)
|
const dialogVisible = ref(false)
|
const batchDiscountVisible = ref(false)
|
const priceControlVisible = ref(false)
|
const dialogType = ref('add')
|
const selectedRows = ref([])
|
const formRef = ref()
|
|
// 搜索表单
|
const searchForm = reactive({
|
productName: '',
|
supplierId: '',
|
priceStatus: ''
|
})
|
|
// 分页
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 20,
|
total: 0
|
})
|
|
|
// 表单数据
|
const formData = reactive({
|
productName: '',
|
productCode: '',
|
specification: '',
|
supplierName: '',
|
basePrice: 0,
|
unit: '',
|
discountType: '',
|
discountValue: 0,
|
discountEndTime: '',
|
tieredDiscount: [],
|
minPrice: null,
|
maxPrice: null,
|
warningThreshold: 10,
|
effectiveTime: '',
|
expireTime: '',
|
reason: '',
|
remark: ''
|
})
|
|
// 批量折扣表单
|
const batchDiscountForm = reactive({
|
discountType: 'percentage',
|
discountValue: 0,
|
effectiveTime: '',
|
expireTime: ''
|
})
|
|
// 价格控制表单
|
const priceControlForm = reactive({
|
defaultMinPrice: 0,
|
defaultMaxPrice: 0,
|
changeThreshold: 10,
|
})
|
|
// 表单验证规则
|
const formRules = {
|
productName: [{ required: true, message: '请选择商品名称', trigger: 'change' }],
|
productCode: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
|
supplierName: [{ required: true, message: '请选择供应商', trigger: 'change' }],
|
basePrice: [{ required: true, message: '请输入基础价格', trigger: 'blur' }],
|
effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
|
reason: [{ required: true, message: '请选择调价原因', trigger: 'change' }]
|
}
|
|
// 模拟数据
|
const tableData = ref([
|
{
|
id: 1,
|
productName: '高强度螺栓',
|
productCode: 'HQ001',
|
specification: 'M12×80',
|
supplierName: '优质五金供应商',
|
basePrice: 2.50,
|
discountType: 'percentage',
|
discountValue: 10,
|
priceControl: { minPrice: 2.00, maxPrice: 3.00 },
|
status: 'active',
|
effectiveTime: '2025-01-01 00:00:00',
|
updateTime: '2025-09-17 10:30:00',
|
unit: '个',
|
reason: 'market',
|
remark: '市场价格调整'
|
},
|
{
|
id: 2,
|
productName: '不锈钢管',
|
productCode: 'BXG002',
|
specification: 'Φ25×2.0',
|
supplierName: '钢材贸易公司',
|
basePrice: 45.80,
|
discountType: 'fixed',
|
discountValue: 5,
|
priceControl: { minPrice: 40.00, maxPrice: 50.00 },
|
status: 'pending',
|
effectiveTime: '2025-10-01 00:00:00',
|
updateTime: '2025-09-16 14:20:00',
|
unit: '米',
|
reason: 'cost',
|
remark: '原材料成本上涨'
|
}
|
])
|
|
const supplierList = ref([
|
{ id: 1, name: '优质五金供应商' },
|
{ id: 2, name: '钢材贸易公司' },
|
{ id: 3, name: '建材批发商' }
|
])
|
|
const productList = ref([
|
{ id: 1, name: '高强度螺栓' },
|
{ id: 2, name: '不锈钢管' },
|
{ id: 3, name: '铝合金型材' }
|
])
|
|
|
// 计算属性
|
const finalTableData = computed(() => {
|
return tableData.value.filter(item => {
|
if (searchForm.productName && !item.productName.includes(searchForm.productName)) return false
|
if (searchForm.supplierId && item.supplierId !== searchForm.supplierId) return false
|
if (searchForm.priceStatus && item.status !== searchForm.priceStatus) return false
|
|
return true
|
})
|
})
|
|
// 方法
|
const calculateFinalPrice = (row) => {
|
let finalPrice = row.basePrice
|
if (row.discountType === 'percentage') {
|
finalPrice = row.basePrice * (1 - row.discountValue / 100)
|
} else if (row.discountType === 'fixed') {
|
finalPrice = row.basePrice - row.discountValue
|
}
|
return Math.max(finalPrice, 0)
|
}
|
|
const getDiscountTagType = (discountType) => {
|
const typeMap = {
|
percentage: 'success',
|
fixed: 'warning',
|
tiered: 'info'
|
}
|
return typeMap[discountType] || 'info'
|
}
|
|
const getDiscountText = (discountType) => {
|
const textMap = {
|
percentage: '百分比',
|
fixed: '固定金额',
|
tiered: '阶梯折扣'
|
}
|
return textMap[discountType] || '未知'
|
}
|
|
const getStatusType = (status) => {
|
const statusMap = {
|
active: 'success',
|
pending: 'warning',
|
expired: 'info',
|
suspended: 'danger'
|
}
|
return statusMap[status] || 'info'
|
}
|
|
const getStatusText = (status) => {
|
const statusMap = {
|
active: '有效',
|
pending: '待生效',
|
expired: '已过期',
|
suspended: '已暂停'
|
}
|
return statusMap[status] || '未知'
|
}
|
|
const isPriceWarning = (row) => {
|
if (!row.priceControl) return false
|
const finalPrice = calculateFinalPrice(row)
|
return finalPrice < row.priceControl.minPrice || finalPrice > row.priceControl.maxPrice
|
}
|
|
|
const handleSearch = () => {
|
loading.value = true
|
// 模拟API调用
|
setTimeout(() => {
|
loading.value = false
|
}, 500)
|
}
|
|
const resetSearch = () => {
|
Object.assign(searchForm, {
|
productName: '',
|
supplierId: '',
|
priceStatus: ''
|
})
|
handleSearch()
|
}
|
|
|
const openDialog = (type, row = {}) => {
|
dialogType.value = type
|
if (type === 'edit' && row.id) {
|
Object.assign(formData, {
|
...row,
|
minPrice: row.priceControl?.minPrice,
|
maxPrice: row.priceControl?.maxPrice,
|
tieredDiscount: row.tieredDiscount || []
|
})
|
} else {
|
resetFormData()
|
}
|
dialogVisible.value = true
|
}
|
|
const resetFormData = () => {
|
Object.assign(formData, {
|
productName: '',
|
productCode: '',
|
specification: '',
|
supplierName: '',
|
basePrice: 0,
|
unit: '',
|
discountType: '',
|
discountValue: 0,
|
discountEndTime: '',
|
tieredDiscount: [],
|
minPrice: null,
|
maxPrice: null,
|
warningThreshold: 10,
|
effectiveTime: '',
|
expireTime: '',
|
reason: '',
|
remark: ''
|
})
|
}
|
|
const addTieredRow = () => {
|
formData.tieredDiscount.push({
|
minQty: 0,
|
maxQty: 0,
|
discount: 0
|
})
|
}
|
|
const removeTieredRow = (index) => {
|
formData.tieredDiscount.splice(index, 1)
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
try {
|
await formRef.value.validate()
|
submitLoading.value = true
|
|
// 模拟API调用
|
setTimeout(() => {
|
if (dialogType.value === 'add') {
|
const newItem = {
|
id: Date.now(),
|
...formData,
|
priceControl: {
|
minPrice: formData.minPrice,
|
maxPrice: formData.maxPrice
|
},
|
status: 'pending',
|
updateTime: new Date().toLocaleString()
|
}
|
tableData.value.unshift(newItem)
|
ElMessage.success('新增成功')
|
} else {
|
// 编辑逻辑
|
ElMessage.success('编辑成功')
|
}
|
|
dialogVisible.value = false
|
submitLoading.value = false
|
}, 1000)
|
} catch (error) {
|
console.error('表单验证失败:', error)
|
}
|
}
|
|
const openBatchDiscountDialog = () => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning('请先选择要设置折扣的商品')
|
return
|
}
|
batchDiscountVisible.value = true
|
}
|
|
const handleBatchDiscount = () => {
|
// 批量设置折扣逻辑
|
selectedRows.value.forEach(row => {
|
row.discountType = batchDiscountForm.discountType
|
row.discountValue = batchDiscountForm.discountValue
|
})
|
|
ElMessage.success(`已为 ${selectedRows.value.length} 个商品设置折扣`)
|
batchDiscountVisible.value = false
|
}
|
|
const openPriceControlDialog = () => {
|
priceControlVisible.value = true
|
}
|
|
const handlePriceControl = () => {
|
ElMessage.success('价格控制设置已保存')
|
priceControlVisible.value = false
|
}
|
|
const openDiscountDialog = (row) => {
|
// 单个商品折扣设置
|
openDialog('edit', row)
|
}
|
|
|
const handleDelete = (row) => {
|
ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = tableData.value.findIndex(item => item.id === row.id)
|
if (index !== -1) {
|
tableData.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
}
|
})
|
}
|
|
const handleBatchDelete = () => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning('请先选择要删除的记录')
|
return
|
}
|
|
ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条记录吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
selectedRows.value.forEach(row => {
|
const index = tableData.value.findIndex(item => item.id === row.id)
|
if (index !== -1) {
|
tableData.value.splice(index, 1)
|
}
|
})
|
ElMessage.success('批量删除成功')
|
selectedRows.value = []
|
})
|
}
|
|
const handleSelectionChange = (rows) => {
|
selectedRows.value = rows
|
}
|
|
const handleSizeChange = (size) => {
|
pagination.pageSize = size
|
handleSearch()
|
}
|
|
const handleCurrentChange = (page) => {
|
pagination.currentPage = page
|
handleSearch()
|
}
|
|
const exportData = () => {
|
ElMessage.success('数据导出功能开发中...')
|
}
|
|
// 生命周期
|
onMounted(() => {
|
handleSearch()
|
})
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.search-card, .action-card, .table-card {
|
margin-bottom: 20px;
|
}
|
|
.action-buttons {
|
display: flex;
|
gap: 10px;
|
flex-wrap: wrap;
|
}
|
|
|
.product-info {
|
line-height: 1.4;
|
}
|
|
.product-name {
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.product-spec, .product-code {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.price-text {
|
font-weight: bold;
|
color: #409EFF;
|
}
|
|
.final-price {
|
font-weight: bold;
|
color: #67C23A;
|
font-size: 16px;
|
}
|
|
.discount-value {
|
font-size: 12px;
|
color: #E6A23C;
|
margin-top: 2px;
|
}
|
|
.no-discount {
|
color: #C0C4CC;
|
font-size: 12px;
|
}
|
|
.price-control {
|
font-size: 12px;
|
line-height: 1.3;
|
}
|
|
.control-item {
|
color: #909399;
|
}
|
|
.warning-indicator {
|
margin-top: 2px;
|
}
|
|
.pagination-wrapper {
|
display: flex;
|
justify-content: end;
|
margin-top: 20px;
|
}
|
|
.selected-items {
|
color: #409EFF;
|
font-weight: bold;
|
}
|
|
|
.mt-2 {
|
margin-top: 8px;
|
}
|
|
.ml-2 {
|
margin-left: 8px;
|
}
|
|
:deep(.el-table) {
|
font-size: 13px;
|
}
|
|
:deep(.el-table th) {
|
background-color: #fafafa;
|
}
|
|
:deep(.el-card__body) {
|
padding: 15px;
|
}
|
|
:deep(.el-divider__text) {
|
font-weight: bold;
|
color: #409EFF;
|
}
|
</style>
|
