<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>
|
