<script setup>
import { ref, onMounted } from '
vue';
import {
getAllBrands,
getBrandsByPage,
addBrand,
updateBrand,
d
eleteBrand,
batchD
elete
} from '@/api/brandApi';
import {
ElMessage,
ElMessageBox,
ElDialog
} from '
element-plus';
// 表格数据
const tableData = ref([]);
const currentPage = ref(1);
const totalItems = ref(0);
const pageSize = 10;
// 查询参数
const searchQuery = ref({
companyName: '',
brandName: '',
status: ''
});
// 排序参数
const sortOptions = ref({
prop: 'ordered', // 默认排序字段
order: 'ascending' // 默认排序方式
});
// 新增弹窗控制
const dialogVisible = ref(false);
// 新增表单数据
const newBrand = ref({
brandName: '',
companyName: '',
status: '',
ordered: 0 // 排序字段，默认0
});
// 加载数据
const loadData = async () => {
try {
const params = {
page: currentPage
.value,
pageSize: pageSize,
companyName: searchQuery
.value
.companyName,
brandName: searchQuery
.value
.brandName,
status: searchQuery
.value
.status,
sortFi
eld: sortOptions
.value
.prop,
sortOrder: sortOptions
.value
.order === 'ascending' ? 'asc' : 'desc'
};
const res = await getBrandsByPage(params);
tableData
.value = res
.data
.rows;
totalItems
.value = res
.data
.total;
} catch (error) {
console
.error('请求失败:', error);
ElMessage
.error('加载数据失败');
}
};
// 排序处理
const handleSort
Change = (sort) => {
if (sort
.prop) {
sortOptions
.value = {
prop: sort
.prop,
order: sort
.order
};
loadData();
}
};
// 搜索方法
const handleSearch = () => {
currentPage
.value = 1;
loadData();
};
// 删除方法
const handleD
elete = async (id) => {
try {
await d
eleteBrand(id);
ElMessage
.success('删除成功');
loadData();
} catch (error) {
ElMessage
.error('删除失败');
}
};
// 批量删除逻辑
const s
electedIds = ref([]);
const handleS
election
Change = (s
election) => {
s
electedIds
.value = s
election
.map(item => item
.id);
};
const handleBatchD
elete = async () => {
if (!s
electedIds
.value
.length) {
ElMessage
.warning('请至少选择一条记录');
return;
}
try {
await batchD
elete(s
electedIds
.value);
ElMessage
.success('批量删除成功');
s
electedIds
.value = []; //
清空选择
loadData();
} catch (error) {
ElMessage
.error('删除失败');
}
};
// 新增品牌
const handleAdd = async () => {
try {
await addBrand(newBrand
.value);
ElMessage
.success('添加成功');
dialogVisible
.value = false;
// 重置表单
newBrand
.value = {
brandName: '',
companyName: '',
status: '',
ordered: 0
};
loadData();
} catch (error) {
ElMessage
.error('添加失败');
}
};
// 编辑弹窗示例
const handleEdit = (row) => {
ElMessageBox
.prompt('请输入新的品牌名称', '编辑品牌', {
confirmButtonText: '确定',
canc
elButtonText: '取消',
inputValue: row
.brandName
})
.then(async ({ value }) => {
const updatedData = {
...row, brandName: value };
await updateBrand(updatedData);
ElMessage
.success('修改成功');
loadData();
})
.catch(() => {
ElMessage
.info('已取消');
});
};
// 页面初始化加载数据
onMounted(() => {
loadData();
});
</script>
<template>
<div style="margin
-bottom:20px;">
<
el-button @click="dialogVisible = true" type="primary">新增品牌</
el-button>
<
el-button @click="handleBatchD
elete" type="danger" :disabled="!s
electedIds
.length">批量删除</
el-button>
</div>
<div style="margin
-bottom:20px;">
<lab
el>企业名称：</lab
el>
<
el-input v
-mod
el="searchQuery
.companyName" style="width:200px;margin
-right:10px;"></
el-input>
<lab
el>品牌名称：</lab
el>
<
el-input v
-mod
el="searchQuery
.brandName" style="width:200px;margin
-right:10px;"></
el-input>
<lab
el>状态：</lab
el>
<
el-input v
-mod
el="searchQuery
.status" style="width:200px;margin
-right:10px;"></
el-input>
<
el-button @click="handleSearch" type="primary">查询</
el-button>
</div>
<
el-table
:data="tableData"
style="width: 100%"
@sort
-change="handleSort
Change"
:default
-sort="{ prop: 'ordered', order: 'ascending' }"
>
<!
-- 勾选框
-->
<
el-table
-column type="s
election" width="55"></
el-table
-column>
<
el-table
-column lab
el="序号" width="60">
<template #default="scope">
{{ (currentPage
- 1) * pageSize + scope
.$index + 1 }}
</template>
</
el-table
-column>
<
el-table
-column prop="brandName" lab
el="品牌名称"></
el-table
-column>
<
el-table
-column prop="companyName" lab
el="企业名称"></
el-table
-column>
<
el-table
-column prop="status" lab
el="当前状态"></
el-table
-column>
<!
-- 排序字段
-->
<
el-table
-column
prop="ordered"
lab
el="排序
值"
sortable="custom"
:sort
-orders="['ascending', 'descending']"
>
<template #default="scope">
{{ scope
.row
.ordered }}
</template>
</
el-table
-column>
<
el-table
-column fixed="right" lab
el="操作" width="200">
<template #default="scope">
<
el-button @click="handleEdit(scope
.row)" type="primary">编辑</
el-button>
<
el-button @click="handleD
elete(scope
.row
.id)" type="danger">删除</
el-button>
</template>
</
el-table
-column>
</
el-table>
<
el-pagination
layout="prev, pager, next"
:total="totalItems"
:page
-size="pageSize"
v
-mod
el:current
-page="currentPage"
@current
-change="loadData"
style="margin
-top:20px;"
/>
<!
-- 新增弹窗
-->
<
el-dialog v
-mod
el="dialogVisible" title="新增品牌" width="30%">
<
el-form :mod
el="newBrand" lab
el-width="80px">
<
el-form
-item lab
el="品牌名称">
<
el-input v
-mod
el="newBrand
.brandName" placeholder="请输入品牌名称"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="企业名称">
<
el-input v
-mod
el="newBrand
.companyName" placeholder="请输入企业名称"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="状态">
<
el-input v
-mod
el="newBrand
.status" placeholder="请输入状态"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="排序
值">
<
el-input-number v
-mod
el="newBrand
.ordered" :min="0"></
el-input-number>
</
el-form
-item>
</
el-form>
<template #footer>
<span class="dialog
-footer">
<
el-button @click="dialogVisible = false">取消</
el-button>
<
el-button type="primary" @click="handleAdd">确定</
el-button>
</span>
</template>
</
el-dialog>
</template>
<style scoped>
lab
el {
font
-weight: bold;
margin
-right: 10px;
}
</style>
批量删除的按钮是灰的
不能使用帮我把排序
值修改为排序，排序的效果没有作用修复以下，编辑里面的属性可以多一些
品牌名称
企业名称
当前状态
排序
值
都可以编辑
在ElementPlus的2.3.3版本中，遇到el-input-number组件在清空内容时无法触发change事件的问题，尝试替换为input.native事件同样无效。作者建议避免使用此组件，改为input结合校验方式。测试发现v-model的触发也存在不稳定性。计划向官方报告此bug。
扫一扫
1779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
