<template>
<div> <!-- 添加根元素 -->
<el-card>
<!-- 数据查询区-->
<!-- inline 行内表单-->
<el-form :model="form" label-width="100px" inline>
<el-form-item label="商品名称">
<el-input v-model="form.name" placeholder="请输入名称"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="info" @click="reset">重置</el-button>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<!-- 数据显示区-->
<el-table :data="products" border style="width: 100%;margin: 20px">
<el-table-column prop="id" label="编号" width="100"/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="price" label="价格"/>
<el-table-column prop="stock" label="库存"/>
<el-table-column fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 修改和添加对话框-->
<el-dialog :title="title" v-model="dialogVisible" width="500px">
<el-form :model="dialogForm" label-width="80px">
<el-form-item label="商品名称">
<el-input v-model="dialogForm.name" placeholder="请输入名称"/>
</el-form-item>
<el-form-item label="商品价格">
<el-input v-model="dialogForm.price" placeholder="请输入价格"/>
</el-form-item>
<el-form-item label="商品库存">
<el-input v-model="dialogForm.stock" placeholder="请输入库存"/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {reactive, ref} from 'vue';
const dialogVisible = ref(false);
const title = ref('');
//原始数据
const originalProducts = ref([
{
id: 1,
name: '笔记本电脑',
price: 6999,
stock: 20
},
{
id: 2,
name: '智能手机',
price: 4999,
stock: 30
},
{
id: 3,
name: '平板电脑',
price: 5999,
stock: 150
},
{
id: 4,
name: '智能手表',
price: 699,
stock: 200
},
{
id: 5,
name: '蓝牙耳机',
price: 99,
stock: 150
}]);
// 查询表单
const form = reactive({
name: '',
});
// 弹窗内编辑/新增使用的表单
const dialogForm = reactive({
id: '',
name: '',
price: '',
stock: '',
});
// 当前显示的数据（可被筛选）
const products = ref([...originalProducts.value]);
const handleUpdate = (row) => {
title.value = '修改商品信息';
// 填充数据
Object.assign(dialogForm, {...row});
dialogVisible.value = true;
};
const handleAdd = () => {
title.value = "添加商品信息";
Object.assign(dialogForm, {
id: '',
name: '',
price: '',
stock: ''
});
dialogVisible.value = true;
};
//保存修改或者新增数据
const save = () => {
if (title.value == '修改商品信息') {
const index = originalProducts.value.findIndex((item) => item.id === dialogForm.id);
if (index != -1) {
originalProducts.value[index] = dialogForm //用 dialogForm 对象完全替换原对象,提前把id设置成readonly
// 下面写法可以防止id被修改
// originalProducts.value[index].name=dialogForm.name;
// originalProducts.value[index].price=dialogForm.price;
// originalProducts.value[index].stock=dialogForm.stock;
products.value = [...originalProducts.value];
alert('修改成功！');
} else {
alert('修改失败！');
}
dialogVisible.value = false;
} else {
// 生成新的ID（自动递增）
const newId = originalProducts.value.length > 0
? Math.max(...originalProducts.value.map(item => item.id)) + 1
: 1;
originalProducts.value.push({
id: newId,
name: dialogForm.name,
price: dialogForm.price,
stock: dialogForm.stock
})
products.value = [...originalProducts.value];
dialogVisible.value = false;
alert('新增成功！');
}
};
// 删除功能实现
const handleDelete = (row) => {
// 弹出确认框
if (confirm(`确定要删除"${row.name}"吗？`)) {
// 从 products 数组中删除对应项
const index = originalProducts.value.findIndex((item) => item.id === row.id);
if (index != -1) {
originalProducts.value.splice(index, 1);
products.value = [...originalProducts.value];
alert('删除成功！');
} else {
alert('删除失败！');
}
}
};
// 查询功能实现
const search = () => {
console.log('search', form.name);
const getName = form.name.valueOf().trim();
if (!getName) {
products.value = [...originalProducts.value];
return;
}
products.value = originalProducts.value.filter(((item) => item.name.trim().includes(getName)));
};
// 重置功能实现
const reset = () => {
// 清空查询条件
form.name = '';
// 显示所有数据
products.value = [...originalProducts.value];
};
</script>
<style scoped></style>
