<template>
|
<div class="app-container">
|
<el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
|
<el-tab-pane label="人员档案" name="personnel">
|
<el-form :model="personnelFilters" :inline="true">
|
<el-form-item label="姓名">
|
<el-input v-model="personnelFilters.name" placeholder="请输入姓名" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="部门">
|
<el-input v-model="personnelFilters.dept" placeholder="请输入部门" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getPersonnelData">搜索</el-button>
|
<el-button @click="resetPersonnelFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<el-button type="primary" @click="addPersonnel" icon="Plus">新增</el-button>
|
</div>
|
<PIMTable :column="personnelColumns" :tableData="personnelList" :page="personnelPage" @pagination="changePersonnelPage" />
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="设备设施" name="equipment">
|
<el-form :model="equipmentFilters" :inline="true">
|
<el-form-item label="设备名称">
|
<el-input v-model="equipmentFilters.name" placeholder="请输入设备名称" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="所属区域">
|
<el-input v-model="equipmentFilters.area" placeholder="请输入所属区域" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getEquipmentData">搜索</el-button>
|
<el-button @click="resetEquipmentFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<el-button type="primary" @click="addEquipment" icon="Plus">新增</el-button>
|
</div>
|
<PIMTable :column="equipmentColumns" :tableData="equipmentList" :page="equipmentPage" @pagination="changeEquipmentPage" />
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="作业区域" name="workArea">
|
<el-form :model="areaFilters" :inline="true">
|
<el-form-item label="区域名称">
|
<el-input v-model="areaFilters.name" placeholder="请输入区域名称" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getAreaData">搜索</el-button>
|
<el-button @click="resetAreaFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<el-button type="primary" @click="addArea" icon="Plus">新增</el-button>
|
</div>
|
<PIMTable :column="areaColumns" :tableData="areaList" :page="areaPage" @pagination="changeAreaPage" />
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="岗位风险" name="risk">
|
<el-form :model="riskFilters" :inline="true">
|
<el-form-item label="风险类型">
|
<el-input v-model="riskFilters.type" placeholder="请输入风险类型" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getRiskData">搜索</el-button>
|
<el-button @click="resetRiskFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<el-button type="primary" @click="addRisk" icon="Plus">新增</el-button>
|
</div>
|
<PIMTable :column="riskColumns" :tableData="riskList" :page="riskPage" @pagination="changeRiskPage" />
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="应急资源" name="emergency">
|
<el-form :model="emergencyFilters" :inline="true">
|
<el-form-item label="资源名称">
|
<el-input v-model="emergencyFilters.name" placeholder="请输入资源名称" clearable style="width: 200px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getEmergencyData">搜索</el-button>
|
<el-button @click="resetEmergencyFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<el-button type="primary" @click="addEmergency" icon="Plus">新增</el-button>
|
</div>
|
<PIMTable :column="emergencyColumns" :tableData="emergencyList" :page="emergencyPage" @pagination="changeEmergencyPage" />
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
|
defineOptions({
|
name: "基础信息管理",
|
});
|
|
const activeTab = ref("personnel");
|
|
// 人员档案
|
const personnelFilters = reactive({ name: "", dept: "" });
|
const personnelList = ref([]);
|
const personnelPage = reactive({ current: 1, size: 10, total: 0 });
|
const personnelColumns = [
|
{ label: "姓名", prop: "name", align: "center" },
|
{ label: "部门", prop: "dept", align: "center" },
|
{ label: "岗位", prop: "post", align: "center" },
|
{ label: "联系方式", prop: "phone", align: "center" },
|
{ label: "入职日期", prop: "entryDate", align: "center" },
|
];
|
|
// 设备设施
|
const equipmentFilters = reactive({ name: "", area: "" });
|
const equipmentList = ref([]);
|
const equipmentPage = reactive({ current: 1, size: 10, total: 0 });
|
const equipmentColumns = [
|
{ label: "设备名称", prop: "name", align: "center" },
|
{ label: "规格型号", prop: "model", align: "center" },
|
{ label: "所属区域", prop: "area", align: "center" },
|
{ label: "状态", prop: "status", align: "center" },
|
];
|
|
// 作业区域
|
const areaFilters = reactive({ name: "" });
|
const areaList = ref([]);
|
const areaPage = reactive({ current: 1, size: 10, total: 0 });
|
const areaColumns = [
|
{ label: "区域名称", prop: "name", align: "center" },
|
{ label: "位置", prop: "location", align: "center" },
|
{ label: "负责人", prop: "manager", align: "center" },
|
];
|
|
// 岗位风险
|
const riskFilters = reactive({ type: "" });
|
const riskList = ref([]);
|
const riskPage = reactive({ current: 1, size: 10, total: 0 });
|
const riskColumns = [
|
{ label: "风险类型", prop: "type", align: "center" },
|
{ label: "风险等级", prop: "level", align: "center" },
|
{ label: "描述", prop: "description", align: "center" },
|
];
|
|
// 应急资源
|
const emergencyFilters = reactive({ name: "" });
|
const emergencyList = ref([]);
|
const emergencyPage = reactive({ current: 1, size: 10, total: 0 });
|
const emergencyColumns = [
|
{ label: "资源名称", prop: "name", align: "center" },
|
{ label: "类型", prop: "type", align: "center" },
|
{ label: "数量", prop: "quantity", align: "center" },
|
{ label: "存放位置", prop: "location", align: "center" },
|
];
|
|
const handleTabChange = () => {
|
// 切换tab时加载对应数据
|
};
|
|
const getPersonnelData = () => {};
|
const resetPersonnelFilters = () => { personnelFilters.name = ""; personnelFilters.dept = ""; };
|
const addPersonnel = () => {};
|
const changePersonnelPage = ({ page, limit }) => { personnelPage.current = page; personnelPage.size = limit; };
|
|
const getEquipmentData = () => {};
|
const resetEquipmentFilters = () => { equipmentFilters.name = ""; equipmentFilters.area = ""; };
|
const addEquipment = () => {};
|
const changeEquipmentPage = ({ page, limit }) => { equipmentPage.current = page; equipmentPage.size = limit; };
|
|
const getAreaData = () => {};
|
const resetAreaFilters = () => { areaFilters.name = ""; };
|
const addArea = () => {};
|
const changeAreaPage = ({ page, limit }) => { areaPage.current = page; areaPage.size = limit; };
|
|
const getRiskData = () => {};
|
const resetRiskFilters = () => { riskFilters.type = ""; };
|
const addRisk = () => {};
|
const changeRiskPage = ({ page, limit }) => { riskPage.current = page; riskPage.size = limit; };
|
|
const getEmergencyData = () => {};
|
const resetEmergencyFilters = () => { emergencyFilters.name = ""; };
|
const addEmergency = () => {};
|
const changeEmergencyPage = ({ page, limit }) => { emergencyPage.current = page; emergencyPage.size = limit; };
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
margin-bottom: 15px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
