<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="品牌名称/国家">
|
<el-input
|
v-model="filters.name"
|
style="width: 240px"
|
placeholder="请输入关键词"
|
clearable
|
prefix-icon="Search"
|
@change="getTableData"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getTableData">搜索</el-button>
|
<el-button @click="resetFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="table_list">
|
<div class="actions">
|
<div></div>
|
<div>
|
<el-button type="primary" @click="openAdd" icon="Plus"> 新增 </el-button>
|
<el-button
|
type="danger"
|
icon="Delete"
|
:disabled="multipleSelection.length <= 0"
|
@click="handleBatchDelete"
|
>批量删除</el-button>
|
</div>
|
</div>
|
|
<PIMTable
|
rowKey="id"
|
isSelection
|
:column="columns"
|
:tableData="dataList"
|
:page="{
|
current: pagination.currentPage,
|
size: pagination.pageSize,
|
total: pagination.total,
|
}"
|
@selection-change="handleSelectionChange"
|
@pagination="changePage"
|
>
|
</PIMTable>
|
</div>
|
|
<el-dialog v-model="visible" :title="dialogTitle" width="520px" destroy-on-close>
|
<el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
|
<el-form-item label="品牌名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入品牌名称" />
|
</el-form-item>
|
<el-form-item label="所属国家" prop="country">
|
<el-input v-model="form.country" placeholder="请输入国家/地区" />
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="可填写品牌简介" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
|
</template>
|
|
<script setup>
|
import { ref, getCurrentInstance, onMounted } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
import { usePaginationApi } from '@/hooks/usePaginationApi'
|
import { getBrandPage, addBrand, editBrand, delBrand } from '@/api/equipmentManagement/brand'
|
|
defineOptions({ name: '设备品牌管理' })
|
|
const { proxy } = getCurrentInstance()
|
|
const multipleSelection = ref([])
|
const formRef = ref()
|
const visible = ref(false)
|
const dialogTitle = ref('新增品牌')
|
const form = ref({ id: undefined, name: '', country: '', description: '' })
|
|
const rules = {
|
name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
|
country: [{ required: true, message: '请输入所属国家', trigger: 'blur' }]
|
}
|
|
const {
|
filters,
|
columns,
|
dataList,
|
pagination,
|
getTableData,
|
resetFilters,
|
onCurrentChange,
|
} = usePaginationApi(
|
getBrandPage,
|
{ name: undefined },
|
[
|
{ label: '品牌名称', align: 'center', prop: 'name' },
|
{ label: '所属国家', align: 'center', prop: 'country' },
|
{ label: '描述', align: 'center', prop: 'description' },
|
{ label: '创建时间', align: 'center', prop: 'createdAt' },
|
{
|
dataType: 'action',
|
label: '操作',
|
align: 'center',
|
fixed: 'right',
|
width: 140,
|
operation: [
|
{
|
name: '编辑',
|
type: 'text',
|
clickFun: (row) => openEdit(row),
|
},
|
{
|
name: '删除',
|
type: 'text',
|
clickFun: (row) => handleDelete(row.id),
|
}
|
]
|
}
|
]
|
)
|
|
const handleSelectionChange = (list) => {
|
multipleSelection.value = list
|
}
|
|
const changePage = ({ page, limit }) => {
|
pagination.currentPage = page
|
pagination.pageSize = limit
|
onCurrentChange(page)
|
}
|
|
function resetForm() {
|
form.value = { id: undefined, name: '', country: '', description: '' }
|
}
|
|
function openAdd() {
|
resetForm()
|
dialogTitle.value = '新增品牌'
|
visible.value = true
|
}
|
|
function openEdit(row) {
|
form.value = { id: row.id, name: row.name, country: row.country, description: row.description }
|
dialogTitle.value = '编辑品牌'
|
visible.value = true
|
}
|
|
function handleSubmit() {
|
formRef.value.validate(async (valid) => {
|
if (!valid) return
|
const isEdit = Boolean(form.value.id)
|
const api = isEdit ? editBrand : addBrand
|
const { code, msg } = await api({ ...form.value })
|
if (code === 200) {
|
ElMessage.success(isEdit ? '修改成功' : '新增成功')
|
visible.value = false
|
getTableData()
|
} else {
|
ElMessage.error(msg || '操作失败')
|
}
|
})
|
}
|
|
function handleDelete(id) {
|
ElMessageBox.confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const { code } = await delBrand(id)
|
if (code === 200) {
|
ElMessage.success('删除成功')
|
getTableData()
|
}
|
})
|
}
|
|
function handleBatchDelete() {
|
if (multipleSelection.value.length === 0) return
|
ElMessageBox.confirm('将删除选中的品牌，是否继续？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const ids = multipleSelection.value.map((i) => i.id)
|
const { code } = await delBrand(ids)
|
if (code === 200) {
|
ElMessage.success('删除成功')
|
getTableData()
|
}
|
})
|
}
|
|
onMounted(() => {
|
getTableData()
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
.table_list { margin-top: unset; }
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
</style>
|
