<template>
|
<div class="spare-part-category">
|
<div class="search_form">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="备件名称">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入备件名称"
|
clearable
|
style="width: 240px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="primary" @click="addCategory" >新增</el-button>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<el-table
|
v-loading="loading"
|
:data="renderTableData"
|
style="width: 100%; margin-top: 10px;"
|
border
|
row-key="id"
|
>
|
<el-table-column prop="deviceNameStr" label="设备名称" width="300"></el-table-column>
|
<el-table-column prop="name" label="备件名称" width="200"></el-table-column>
|
<el-table-column prop="sparePartsNo" label="备件编号" width="200"></el-table-column>
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="{ row }">
|
<el-tag type="success" size="small">{{ row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="price" label="价格" width="140"></el-table-column>
|
<el-table-column prop="description" label="描述" width="150"></el-table-column>
|
<el-table-column label="操作" width="150" fixed="right" align="center">
|
<template #default="{ row }">
|
<el-button
|
link
|
type="primary"
|
@click="() => editCategory(row)"
|
:disabled="loading"
|
>
|
编辑
|
</el-button>
|
<el-button
|
link
|
@click="() => deleteCategory(row.id)"
|
style="color: #f56c6c;"
|
:disabled="loading"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog title="分类管理" v-model="dialogVisible" width="60%">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
|
<el-form-item label="设备" prop="deviceLedgerIds">
|
<el-select
|
v-model="form.deviceLedgerIds"
|
placeholder="请选择设备"
|
filterable
|
default-first-option
|
:reserve-keyword="false"
|
multiple
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(item, index) in deviceOptions"
|
:key="index"
|
:label="item.deviceName"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备件名称" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item label="备件编号" prop="sparePartsNo">
|
<el-input v-model="form.sparePartsNo"></el-input>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="form.status" placeholder="请选择状态">
|
<el-option label="正常" value="正常"></el-option>
|
<el-option label="禁用" value="禁用"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input v-model="form.description"></el-input>
|
</el-form-item>
|
<el-form-item label="价格" prop="price">
|
<el-input-number
|
v-model="form.price"
|
placeholder="请输入价格"
|
:min="0"
|
:step="0.01"
|
:precision="2"
|
style="width: 100%"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false" :disabled="formLoading">取消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted, reactive, watch } from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { getSparePartsList, addSparePart, editSparePart, delSparePart } from "@/api/equipmentManagement/spareParts";
|
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
|
|
// 加载状态
|
const loading = ref(false);
|
const formLoading = ref(false);
|
// 对话框显示状态
|
const dialogVisible = ref(false);
|
// 编辑 ID
|
const editId = ref(null);
|
// 表格数据
|
const categories = ref([]);
|
// 渲染用的表格数据
|
// const renderTableData = computed(() => buildTree(categories.value));
|
const renderTableData = ref([]);
|
const operationType = ref('add')
|
// 设备选项
|
const deviceOptions = ref([]);
|
// 表单引用
|
const formRef = ref(null);
|
// 查询参数
|
const queryParams = reactive({
|
name: ''
|
});
|
// 表单数据
|
const form = reactive({
|
id:'',
|
name: '',
|
sparePartsNo: '',
|
status: '',
|
description: '',
|
deviceLedgerIds: [],
|
price: null
|
});
|
|
// 表单验证规则
|
const rules = reactive({
|
name: [
|
{ required: true, message: '请输入备件名称', trigger: 'blur' }
|
],
|
sparePartsNo: [
|
{ required: true, message: '请输入备件编号', trigger: 'blur' }
|
],
|
status: [
|
{ required: true, message: '请选择状态', trigger: 'change' }
|
],
|
deviceLedgerIds: [
|
{
|
required: true,
|
message: '请选择设备',
|
trigger: 'change',
|
validator: (rule, value, callback) => {
|
if (operationType.value === 'add' && (!value || value.length === 0)) {
|
callback(new Error('请选择设备'));
|
} else {
|
callback();
|
}
|
}
|
}
|
]
|
});
|
// 获取缩进量
|
const getIndentation = (row) => {
|
// 这里简单返回 20，可根据实际需求实现层级缩进逻辑
|
return 20;
|
};
|
// 定义 buildTree 函数
|
const buildTree = (flatData) => {
|
const map = {};
|
const result = [];
|
if(flatData){
|
return result;
|
}
|
flatData.forEach(item => {
|
map[item.id] = { ...item, children: [] };
|
});
|
flatData.forEach(item => {
|
if (item.parentId === null || !map[item.parentId]) {
|
result.push(map[item.id]);
|
} else {
|
map[item.parentId].children.push(map[item.id]);
|
}
|
});
|
return result;
|
};
|
// 获取列表数据
|
const fetchListData = async () => {
|
loading.value = true;
|
try {
|
const params = {};
|
if (queryParams.name) {
|
params.name = queryParams.name;
|
}
|
const res = await getSparePartsList(params);
|
if (res.code === 200) {
|
renderTableData.value = res.data.records || [];
|
categories.value = res.data.records || [];
|
}
|
} catch (error) {
|
loading.value = false;
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
// 查询
|
const handleQuery = () => {
|
fetchListData();
|
}
|
|
// 重置查询
|
const resetQuery = () => {
|
queryParams.name = '';
|
fetchListData();
|
}
|
|
// 加载设备列表（在打开弹框时调用）
|
const loadDeviceName = async () => {
|
try {
|
const { data } = await getDeviceLedger();
|
deviceOptions.value = data || [];
|
} catch (error) {
|
ElMessage.error('获取设备列表失败');
|
}
|
};
|
|
// 新增分类
|
const addCategory = async () => {
|
await loadDeviceName();
|
form.id = '';
|
form.name = '';
|
form.sparePartsNo = '';
|
form.status = '';
|
form.description = '';
|
form.deviceLedgerIds = [];
|
form.price = null;
|
operationType.value = 'add'
|
dialogVisible.value = true;
|
};
|
|
// 编辑分类
|
const editCategory = async (row) => {
|
await loadDeviceName();
|
Object.assign(form, row);
|
// 如果后端返回的是 deviceIds 字符串，需要转换为数组
|
if (row.deviceIds && typeof row.deviceIds === 'string') {
|
// 确保ID类型与设备选项中的ID类型一致
|
const deviceIdsArray = row.deviceIds.split(',').map(id => id.trim()).filter(id => id);
|
// 如果设备选项中的ID是数字类型，则转换为数字
|
if (deviceOptions.value.length > 0 && typeof deviceOptions.value[0].id === 'number') {
|
form.deviceLedgerIds = deviceIdsArray.map(id => Number(id)).filter(id => !isNaN(id));
|
} else {
|
form.deviceLedgerIds = deviceIdsArray;
|
}
|
} else if (row.deviceIds && Array.isArray(row.deviceIds)) {
|
form.deviceLedgerIds = row.deviceIds;
|
} else {
|
form.deviceLedgerIds = [];
|
}
|
operationType.value = 'edit'
|
dialogVisible.value = true;
|
};
|
|
// 删除分类
|
const deleteCategory = async (id) => {
|
try {
|
await ElMessageBox.confirm('此操作将永久删除该分类，是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
});
|
loading.value = true;
|
const res = await delSparePart(id);
|
if (res.code === 200) {
|
ElMessage.success('删除成功');
|
fetchListData();
|
} else {
|
ElMessage.error(res.message || '删除失败');
|
}
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('删除失败');
|
}
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 提交表单
|
const submitForm = async () => {
|
if (!formRef.value) return;
|
try {
|
await formRef.value.validate();
|
formLoading.value = true;
|
|
// 构建提交数据
|
const submitData = {
|
...form,
|
deviceIds: form.deviceLedgerIds && form.deviceLedgerIds.length > 0
|
? form.deviceLedgerIds.join(',')
|
: ''
|
};
|
|
// 删除不需要的字段
|
delete submitData.deviceLedgerIds;
|
|
if (operationType.value === 'edit') {
|
let res = await editSparePart(submitData);
|
if (res.code === 200) {
|
ElMessage.success('编辑成功');
|
dialogVisible.value = false;
|
fetchListData();
|
}
|
} else {
|
let res = await addSparePart(submitData);
|
if (res.code === 200) {
|
ElMessage.success('新增成功');
|
dialogVisible.value = false;
|
fetchListData();
|
}
|
}
|
} catch (error) {
|
ElMessage.error('请填写完整表单信息');
|
} finally {
|
formLoading.value = false;
|
}
|
};
|
|
// 组件挂载时获取列表数据
|
onMounted(() => {
|
fetchListData();
|
});
|
</script>
|
|
<style scoped>
|
.spare-part-category {
|
padding: 20px;
|
}
|
.search_form {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
}
|
.table_list {
|
margin-top: unset;
|
}
|
|
.el-table__header-wrapper th {
|
background-color: #f5f7fa;
|
font-weight: 600;
|
}
|
|
.el-table__row:hover > td {
|
background-color: #fafafa;
|
}
|
|
/* 按钮组样式 */
|
.actions > div {
|
display: flex;
|
gap: 10px;
|
}
|
|
/* 确保表格中的操作按钮不会被截断 */
|
.el-table-column--fixed-right .el-button {
|
margin: 0 2px;
|
}
|
|
/* 树形节点内容样式 */
|
.nested-tree .el-tree-node__expand-icon {
|
font-size: 12px;
|
margin-right: 4px;
|
}
|
</style>
|
