| | |
| | | <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> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="columns" |
| | | :tableData="renderTableData" |
| | | :tableLoading="loading" |
| | | :page="pagination" |
| | | :isShowPagination="true" |
| | | @pagination="handleSizeChange" |
| | | > |
| | | <template #status="{ row }"> |
| | | <el-tag type="success" size="small">{{ row.status }}</el-tag> |
| | | </template> |
| | | </PIMTable> |
| | | <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-form-item label="备件编号" prop="sparePartsNo"> |
| | | <el-input v-model="form.sparePartsNo"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="数量" prop="quantity"> |
| | | <el-input type="number" v-model="form.quantity"></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-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> |
| | |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import { getSparePartsList, addSparePart, editSparePart, delSparePart } from "@/api/equipmentManagement/spareParts"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | |
| | | // 加载状态 |
| | | const loading = ref(false); |
| | |
| | | const queryParams = reactive({ |
| | | name: '' |
| | | }); |
| | | // 分页参数 |
| | | const pagination = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | total: 0 |
| | | }); |
| | | // 表单数据 |
| | | const form = reactive({ |
| | | id:'', |
| | |
| | | status: '', |
| | | description: '', |
| | | deviceLedgerIds: [], |
| | | price: null |
| | | }); |
| | | |
| | | // 表单验证规则 |
| | |
| | | ], |
| | | sparePartsNo: [ |
| | | { required: true, message: '请输入备件编号', trigger: 'blur' } |
| | | ], |
| | | quantity:[ |
| | | { required: true, message: '请输入数量', trigger: 'blur' } |
| | | ], |
| | | status: [ |
| | | { required: true, message: '请选择状态', trigger: 'change' } |
| | |
| | | } |
| | | ] |
| | | }); |
| | | const columns = ref([ |
| | | { |
| | | label: "设备名称", |
| | | prop: "deviceNameStr", |
| | | }, |
| | | { |
| | | label: "备件名称", |
| | | prop: "name", |
| | | }, |
| | | { |
| | | label: "备件编号", |
| | | prop: "sparePartsNo", |
| | | }, |
| | | { |
| | | label: "状态", |
| | | prop: "status", |
| | | slot: "status", |
| | | dataType: "slot", |
| | | }, |
| | | { |
| | | label: "数量", |
| | | prop: "quantity", |
| | | }, |
| | | { |
| | | label: "描述", |
| | | prop: "description", |
| | | }, |
| | | { |
| | | label: "操作", |
| | | prop: "operation", |
| | | width: 150, |
| | | fixed: 'right', |
| | | align: "center", |
| | | dataType: "action", |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | | clickFun: (row) => { |
| | | editCategory(row) |
| | | }, |
| | | }, |
| | | { |
| | | name: "删除", |
| | | clickFun: (row) => { |
| | | deleteCategory(row.id) |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | ]); |
| | | // 获取缩进量 |
| | | const getIndentation = (row) => { |
| | | // 这里简单返回 20,可根据实际需求实现层级缩进逻辑 |
| | |
| | | const fetchListData = async () => { |
| | | loading.value = true; |
| | | try { |
| | | const params = {}; |
| | | const params = { |
| | | current: pagination.current, |
| | | size: pagination.size |
| | | }; |
| | | if (queryParams.name) { |
| | | params.name = queryParams.name; |
| | | } |
| | |
| | | if (res.code === 200) { |
| | | renderTableData.value = res.data.records || []; |
| | | categories.value = res.data.records || []; |
| | | pagination.total = res.data.total || 0; |
| | | } |
| | | } catch (error) { |
| | | loading.value = false; |
| | |
| | | |
| | | // 查询 |
| | | const handleQuery = () => { |
| | | pagination.current = 1; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 重置查询 |
| | | const resetQuery = () => { |
| | | queryParams.name = ''; |
| | | pagination.current = 1; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 分页大小改变 |
| | | const handleSizeChange = (obj) => { |
| | | pagination.current = obj.page; |
| | | pagination.size = obj.limit; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 当前页改变 |
| | | const handleCurrentChange = (current) => { |
| | | pagination.current = current; |
| | | fetchListData(); |
| | | } |
| | | |
| | |
| | | form.sparePartsNo = ''; |
| | | form.status = ''; |
| | | form.description = ''; |
| | | form.quantity = undefined; |
| | | form.deviceLedgerIds = []; |
| | | form.price = null; |
| | | operationType.value = 'add' |
| | | dialogVisible.value = true; |
| | | }; |
| | |
| | | margin-top: unset; |
| | | } |
| | | |
| | | .pagination-container { |
| | | margin-top: 20px; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .el-table__header-wrapper th { |
| | | background-color: #f5f7fa; |
| | | font-weight: 600; |