From 1a5d32ee47a086247dec5cd7f3fde28700c6b187 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 02 七月 2025 20:39:41 +0800
Subject: [PATCH] 提交设备管理模块
---
src/views/equipment/management/index.vue | 336 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 336 insertions(+), 0 deletions(-)
diff --git a/src/views/equipment/management/index.vue b/src/views/equipment/management/index.vue
new file mode 100644
index 0000000..2ceb04b
--- /dev/null
+++ b/src/views/equipment/management/index.vue
@@ -0,0 +1,336 @@
+<template>
+ <div class="app-container">
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item v-if="shouldShowSearch" label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchAll"
+ :placeholder="searchPlaceholder"
+ clearable
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="search">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-card>
+ <!-- 鏍囩椤� -->
+ <el-tabs
+ v-model="activeTab"
+ class="info-tabs"
+ @tab-click="handleTabClick"
+ >
+ <el-tab-pane
+ v-for="tab in tabs"
+ :key="tab.name"
+ :label="tab.label"
+ :name="tab.name"
+ />
+ </el-tabs>
+
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-row :gutter="24" class="table-toolbar">
+ <el-button :icon="Plus" type="primary" @click="handleAdd"
+ >鏂板缓</el-button
+ >
+ <el-button :icon="Delete" type="danger" @click="handleDelete"
+ >鍒犻櫎</el-button
+ >
+ </el-row>
+ <!-- 琛ㄦ牸缁勪欢 -->
+ <div>
+ <data-table
+ :border="true"
+ :columns="columns"
+ :loading="loading"
+ style="width: 100%; height: calc(100vh - 29em)"
+ :show-selection="true"
+ :table-data="tableData"
+ @edit="handleEdit"
+ @viewRow="handleView"
+ @selection-change="handleSelectionChange"
+ :operations="['edit', 'viewRow']"
+ :operationsWidth="200"
+ >
+ <!-- 瀛楁鍚嶇О鍒楃殑鑷畾涔夋彃妲� - 鏄剧ず涓烘爣绛� -->
+ <template
+ v-if="activeTab === 'coalQualityMaintenance'"
+ #fieldIds="{ row }"
+ >
+ <template
+ v-if="
+ typeof row.fieldIds === 'string' && row.fieldIds.includes(',')
+ "
+ >
+ <el-tag
+ v-for="(field, index) in row.fieldIds.split(',')"
+ :key="index"
+ size="small"
+ style="margin-right: 4px; margin-bottom: 2px"
+ type="primary"
+ >
+ </el-tag>
+ </template>
+ <template v-else>
+ <el-tag size="small" type="primary">
+ </el-tag>
+ </template>
+ </template>
+ </data-table>
+ </div>
+ <pagination
+ v-if="total > 0"
+ :layout="'total, prev, pager, next, jumper'"
+ :limit="pageSizes"
+ :page="pageNum"
+ :total="total"
+ @pagination="handPagination"
+ />
+ <managementDialog
+ v-model:copyForm="copyForm"
+ v-model:managementFormDialog="manaDialog"
+ :addOrEdit="addOrEdit"
+ :form="form"
+ @submit="getList"
+ ></managementDialog>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { Delete, Plus } from "@element-plus/icons-vue";
+
+// 缁勪欢瀵煎叆
+import DataTable from "@/components/Table/ETable.vue";
+import Pagination from "@/components/Pagination";
+import managementDialog from "./mould/managementDialog.vue";
+
+// API 鏈嶅姟瀵煎叆
+import { useDelete } from "@/hooks/useDelete.js";
+import { getManagementList, delEquipment } from "@/api/equipment/management/index.js";
+
+// 鍝嶅簲寮忕姸鎬佺鐞�
+const form = ref({});
+const title = ref("");
+const copyForm = ref({});
+const addOrEdit = ref("add");
+const manaDialog = ref(false);
+const loading = ref(false);
+const activeTab = ref("management");
+const selectedRows = ref([]);
+const tableData = ref([]);
+
+// 鍒嗛〉鐘舵��
+const pageNum = ref(1);
+const pageSizes = ref(10);
+const total = ref(0);
+
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchAll: ""
+});
+
+// 鏍囩椤甸厤缃� - 渚夸簬鍚庣画鎵╁睍
+const tabsConfig = {
+ management: {
+ label: "璁惧鍒楄〃",
+ searchPlaceholder: "璁惧缂栧彿/璁惧鍚嶇О/瑙勬牸鍨嬪彿",
+ showSearch: true,
+ api: getManagementList,
+ deleteApi: delEquipment,
+ columns: [
+ { prop: "equipmentId", label: "璁惧缂栧彿", minWidth: 100 },
+ { prop: "equipmentName", label: "璁惧鍚嶇О", minWidth: 100 },
+ { prop: "quantity", label: "鏁伴噺", minWidth: 100 },
+ { prop: "specification", label: "瑙勬牸鍨嬪彿", minWidth: 100 },
+ {
+ prop: "usageStatus",
+ label: "浣跨敤鐘舵��",
+ minWidth: 100,
+ formatter: (row) => row.usageStatus == 1 ? "鍚敤" : "绂佺敤"
+ },
+ { prop: "usingDepartment", label: "浣跨敤閮ㄩ棬", minWidth: 100 },
+ { prop: "purchaseDate", label: "閲囪喘鏃ユ湡", minWidth: 100 },
+ { prop: "purchasePrice", label: "閲囪喘浠锋牸", minWidth: 100 },
+ ]
+ }
+ // 鍚庣画鍙互鍦ㄨ繖閲屾坊鍔犳柊鐨勬爣绛鹃〉閰嶇疆
+};
+
+// 鏍囩椤垫暟鎹�
+const tabs = reactive(
+ Object.entries(tabsConfig).map(([name, config]) => ({
+ name,
+ label: config.label
+ }))
+);
+
+// 褰撳墠鏍囩椤甸厤缃�
+const currentTabConfig = computed(() => tabsConfig[activeTab.value]);
+
+// 璁＄畻灞炴��
+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);
+
+// 浜嬩欢澶勭悊鍑芥暟
+const handleTabClick = (tab) => {
+ activeTab.value = tab.props.name;
+ resetState();
+ getList();
+};
+
+const resetState = () => {
+ form.value = {};
+ addOrEdit.value = "add";
+ loading.value = true;
+ tableData.value = [];
+ pageNum.value = 1;
+ pageSizes.value = 10;
+ total.value = 0;
+ queryParams.searchAll = "";
+};
+
+const resetQuery = () => {
+ queryParams.searchAll = "";
+ pageNum.value = 1;
+ getList();
+};
+
+const search = () => {
+ pageNum.value = 1;
+ getList();
+};
+
+const handleAdd = () => {
+ addOrEdit.value = "add";
+ form.value = {};
+ title.value = `鏂板${currentTabConfig.value.label}`;
+ manaDialog.value = true;
+};
+
+const handleEdit = (row) => {
+ form.value = { ...row };
+ addOrEdit.value = "edit";
+ title.value = `缂栬緫${currentTabConfig.value.label}`;
+ copyForm.value = { ...row };
+ manaDialog.value = true;
+};
+
+const handleView = (row) => {
+ form.value = { ...row };
+ addOrEdit.value = "viewRow";
+ title.value = `鏌ョ湅${currentTabConfig.value.label}`;
+ copyForm.value = { ...row };
+ manaDialog.value = true;
+};
+
+const handPagination = (val) => {
+ pageNum.value = val.page;
+ pageSizes.value = val.limit;
+ getList();
+};
+
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+
+
+// 鍒犻櫎澶勭悊
+const { handleDeleteBatch: handleDelete } = useDelete({
+ deleteApi: () => currentTabConfig.value.deleteApi,
+ selectedRows: selectedRows,
+ getList: () => getList(),
+ tableData: tableData,
+ total: total,
+ confirmText: "纭鍒犻櫎閫変腑鐨勬暟鎹悧锛�",
+ successText: "鍒犻櫎鎴愬姛",
+});
+
+// 鏁版嵁鑾峰彇
+const getList = async () => {
+ try {
+ loading.value = true;
+ const apiParams = {
+ current: pageNum.value,
+ pageSize: pageSizes.value,
+ searchAll: queryParams.searchAll,
+ };
+
+ const { data, code } = await currentTabConfig.value.api(apiParams);
+
+ if (code !== 200) {
+ ElMessage.error("鑾峰彇鏁版嵁澶辫触锛�" + (data?.msg || "鏈煡閿欒"));
+ return;
+ }
+
+ tableData.value = data.records || [];
+ total.value = data.total || 0;
+ } catch (error) {
+ ElMessage.error("鑾峰彇鏁版嵁澶辫触锛岃绋嶅悗鍐嶈瘯");
+ } finally {
+ loading.value = false;
+ }
+};
+
+// 缁勪欢鎸傝浇
+onMounted(() => {
+ handleTabClick({ props: { name: "management" } });
+});
+</script>
+
+<style scoped>
+/* 鍝嶅簲寮忓竷灞� */
+@media screen and (min-width: 768px) {
+ .search-form :deep(.el-form-item) {
+ width: 50%;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .search-form :deep(.el-form-item) {
+ width: 16%;
+ }
+}
+
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+.app-container{
+ padding: 18px !important;
+}
+/* 鍝嶅簲寮忚〃鏍� */
+@media screen and (max-width: 768px) {
+ .table-toolbar {
+ flex-direction: column;
+ }
+
+ .table-toolbar .el-button {
+ width: 100%;
+ }
+}
+
+/* 琛ㄦ牸宸ュ叿鏍� */
+.table-toolbar,
+.table-toolbar > * {
+ margin: 0 0 0 0 !important;
+}
+
+.table-toolbar {
+ margin-bottom: 20px !important;
+}
+
+.el-form--inline .el-form-item {
+ margin-right: 25px;
+}
+
+.main-container {
+ background: red !important;
+}
+</style>
--
Gitblit v1.9.3