| | |
| | | |
| | | <!-- 操作按钮区 --> |
| | | <el-row :gutter="24" class="table-toolbar"> |
| | | <el-button :icon="Plus" type="primary" v-show="activeTab === 'management'" @click="handleAdd" |
| | | <el-button |
| | | :icon="Plus" |
| | | type="primary" |
| | | v-show="activeTab === 'management'" |
| | | @click="handleAdd" |
| | | >设备新增</el-button |
| | | > |
| | | <el-button :icon="Plus" type="primary" v-show="activeTab === 'equipmentRequisition'" @click="handleAdd" |
| | | <el-button |
| | | :icon="Plus" |
| | | type="primary" |
| | | v-show="activeTab === 'equipmentRequisition'" |
| | | @click="handleAdd" |
| | | >领用</el-button |
| | | > |
| | | <el-button :icon="Delete" type="danger" v-show="activeTab === 'management'" @click="handleDelete" |
| | | <el-button |
| | | :icon="Delete" |
| | | type="danger" |
| | | v-show="activeTab === 'management'" |
| | | @click="handleDelete" |
| | | >删除</el-button |
| | | > |
| | | </el-row> |
| | |
| | | @selection-change="handleSelectionChange" |
| | | :operations="['edit', 'viewRow']" |
| | | :operationsWidth="200" |
| | | |
| | | > |
| | | <!-- 字段名称列的自定义插槽 - 显示为标签 --> |
| | | <template |
| | |
| | | </el-tag> |
| | | </template> |
| | | <template v-else> |
| | | <el-tag size="small" type="primary"> |
| | | </el-tag> |
| | | <el-tag size="small" type="primary"> </el-tag> |
| | | </template> |
| | | </template> |
| | | </data-table> |
| | |
| | | @pagination="handPagination" |
| | | /> |
| | | <managementDialog |
| | | v-if="activeTab == 'management'" |
| | | v-if="activeTab == 'management'" |
| | | v-model:copyForm="copyForm" |
| | | v-model:managementFormDialog="manaDialog" |
| | | :addOrEdit="addOrEdit" |
| | |
| | | :formData="form" |
| | | :maxQuantity="getMaxQuantity()" |
| | | :addOrEdit="addOrEdit" |
| | | :equipmentStatus="form.equipmentStatus" |
| | | @submit="onEquipmentRequisitionSubmit" |
| | | /> |
| | | <!-- <UsageRecord |
| | |
| | | |
| | | // API 服务导入 |
| | | import { useDelete } from "@/hooks/useDelete.js"; |
| | | import { getManagementList, delEquipment } from "@/api/equipment/management/index.js"; |
| | | import { |
| | | getManagementList, |
| | | delEquipment, |
| | | } from "@/api/equipment/management/index.js"; |
| | | import { getUsageRecordList } from "@/api/equipment/requisition/index.js"; |
| | | |
| | | // 响应式状态管理 |
| | |
| | | |
| | | // 查询参数 |
| | | const queryParams = reactive({ |
| | | searchAll: "" |
| | | searchAll: "", |
| | | }); |
| | | |
| | | // 标签页配置 - 便于后续扩展 |
| | |
| | | { prop: "specification", label: "规格型号", minWidth: 100 }, |
| | | { prop: "purchaseDate", label: "采购日期", minWidth: 100 }, |
| | | { prop: "purchasePrice", label: "采购价格", minWidth: 100 }, |
| | | ] |
| | | ], |
| | | }, |
| | | equipmentRequisition:{ |
| | | equipmentRequisition: { |
| | | label: "设备领用", |
| | | searchPlaceholder: "设备编号/设备名称/规格型号", |
| | | showSearch: true, |
| | |
| | | { prop: "equipmentNo", label: "设备编号", minWidth: 100 }, |
| | | { prop: "equipmentName", label: "设备名称", minWidth: 100 }, |
| | | { prop: "usageQuantity", label: "领用数量", minWidth: 100 }, |
| | | { |
| | | prop: "equipmentStatus", |
| | | label: "使用状态", |
| | | { |
| | | prop: "equipmentStatus", |
| | | label: "使用状态", |
| | | minWidth: 100, |
| | | formatter: (row) => row.equipmentStatus == "0" ? "使用中" : "已归还" |
| | | formatter: (row) => (row.equipmentStatus == "0" ? "使用中" : "已归还"), |
| | | }, |
| | | { prop: "usageStartTime", label: "使用开始时间", minWidth: 100 }, |
| | | { prop: "usageEndTime", label: "使用结束时间", minWidth: 100 }, |
| | | { prop: "remarks", label: "备注", minWidth: 100 }, |
| | | ] |
| | | ], |
| | | }, |
| | | // usageRecord:{ |
| | | // label: "领用记录", |
| | |
| | | // { prop: "equipmentName", label: "设备名称", minWidth: 100 }, |
| | | // { prop: "quantity", label: "数量", minWidth: 100 }, |
| | | // { prop: "specification", label: "规格型号", minWidth: 100 }, |
| | | // { |
| | | // prop: "usageStatus", |
| | | // label: "使用状态", |
| | | // { |
| | | // prop: "usageStatus", |
| | | // label: "使用状态", |
| | | // minWidth: 100, |
| | | // formatter: (row) => row.usageStatus == 1 ? "启用" : "禁用" |
| | | // }, |
| | |
| | | const tabs = reactive( |
| | | Object.entries(tabsConfig).map(([name, config]) => ({ |
| | | name, |
| | | label: config.label |
| | | label: config.label, |
| | | })) |
| | | ); |
| | | |
| | |
| | | const currentTabConfig = computed(() => tabsConfig[activeTab.value]); |
| | | |
| | | // 计算属性 |
| | | const searchPlaceholder = computed(() => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息"); |
| | | const shouldShowSearch = computed(() => currentTabConfig.value?.showSearch || false); |
| | | const searchPlaceholder = computed( |
| | | () => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息" |
| | | ); |
| | | const shouldShowSearch = computed( |
| | | () => currentTabConfig.value?.showSearch || false |
| | | ); |
| | | const columns = computed(() => currentTabConfig.value?.columns || []); |
| | | const selectedCount = computed(() => selectedRows.value.length); |
| | | |
| | |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | |
| | | // 删除处理 |
| | | const { handleDeleteBatch: handleDelete } = useDelete({ |
| | | deleteApi: () => currentTabConfig.value.deleteApi, |
| | |
| | | // 获取设备最大可领用数量 |
| | | const getMaxQuantity = () => { |
| | | if (form.value.equipmentId) { |
| | | const equipment = tableData.value.find(item => item.equipmentId === form.value.equipmentId); |
| | | const equipment = tableData.value.find( |
| | | (item) => item.equipmentId === form.value.equipmentId |
| | | ); |
| | | return equipment ? equipment.quantity : null; |
| | | } |
| | | return null; |
| | |
| | | |
| | | // 设备领用弹窗提交处理 |
| | | const onEquipmentRequisitionSubmit = (formData) => { |
| | | console.log("提交的领用数据:", formData); |
| | | ElMessage.success('设备领用成功'); |
| | | console.log("设备领用提交数据:", formData); |
| | | if (formData.equipmentStatus == "1") { |
| | | ElMessage.success("设备归还成功"); |
| | | } else { |
| | | ElMessage.success("设备领用成功"); |
| | | } |
| | | equipmentRequisitionDialog.value = false; |
| | | nextTick(() => { |
| | | form.value = {}; |
| | |
| | | const { data, code } = await currentTabConfig.value.api(apiParams); |
| | | |
| | | if (code !== 200) { |
| | | ElMessage.error("获取数据失败:" + (data?.msg || "未知错误")); |
| | | // ElMessage.error("获取数据失败:" + (data?.msg || "未知错误")); |
| | | return; |
| | | } |
| | | |
| | |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | } |
| | | .app-container{ |
| | | .app-container { |
| | | padding: 18px !important; |
| | | } |
| | | /* 响应式表格 */ |