浪潮 1.安环管理前端四个页面构建开发

gaoluyang

10 天以前 7354f8e5dbb2a3e0612aebf94ad92513a418ea2c

浪潮
1.安环管理前端四个页面构建开发

 src/views/safetyManagement/basicInfo/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,203 @@
<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>

 src/views/safetyManagement/employeeLearning/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,165 @@
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="user-card">
          <div class="user-info">
            <el-avatar :size="80" :src="userInfo.avatar" />
            <h3>{{ userInfo.name }}</h3>
            <p>{{ userInfo.dept }} - {{ userInfo.post }}</p>
          </div>
          <el-divider />
          <div class="stat-item">
            <span class="label">已完成培训</span>
            <span class="value">{{ userInfo.completedTrainings }} æ¬¡</span>
          </div>
          <div class="stat-item">
            <span class="label">待参加培训</span>
            <span class="value">{{ userInfo.pendingTrainings }} æ¬¡</span>
          </div>
          <div class="stat-item">
            <span class="label">平均考核分数</span>
            <span class="value">{{ userInfo.avgScore }} åˆ†</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="我的学习记录" name="records">
            <PIMTable :column="recordColumns" :tableData="recordList" :page="recordPage" @pagination="changeRecordPage" />
          </el-tab-pane>

          <el-tab-pane label="考核报告" name="reports">
            <PIMTable :column="reportColumns" :tableData="reportList" :page="reportPage" @pagination="changeReportPage" />
          </el-tab-pane>

          <el-tab-pane label="在线测评" name="assessment">
            <div class="assessment-list">
              <el-card v-for="item in assessmentList" :key="item.id" class="assessment-card">
                <div class="assessment-header">
                  <h4>{{ item.title }}</h4>
                  <el-tag :type="item.status === '待测评' ? 'warning' : 'success'">{{ item.status }}</el-tag>
                </div>
                <p class="assessment-desc">{{ item.description }}</p>
                <div class="assessment-footer">
                  <span>截止时间：{{ item.deadline }}</span>
                  <el-button type="primary" size="small" :disabled="item.status !== '待测评'" @click="startAssessment(item)">
                    {{ item.status === '待测评' ? '开始测评' : '已完成' }}
                  </el-button>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import PIMTable from "@/components/PIMTable/PIMTable.vue";

defineOptions({
  name: "员工学习",
});

const activeTab = ref("records");

const userInfo = reactive({
  name: "张三",
  dept: "生产部",
  post: "操作工",
  avatar: "",
  completedTrainings: 12,
  pendingTrainings: 3,
  avgScore: 85,
});

// å­¦ä¹ è®°å½•
const recordList = ref([]);
const recordPage = reactive({ current: 1, size: 10, total: 0 });
const recordColumns = [
  { label: "培训内容", prop: "content", align: "center" },
  { label: "培训时间", prop: "trainingTime", align: "center" },
  { label: "培训时长", prop: "duration", align: "center" },
  { label: "培训方式", prop: "method", align: "center" },
  { label: "完成状态", prop: "status", align: "center" },
];

// è€ƒæ ¸æŠ¥å‘Š
const reportList = ref([]);
const reportPage = reactive({ current: 1, size: 10, total: 0 });
const reportColumns = [
  { label: "考核名称", prop: "name", align: "center" },
  { label: "考核时间", prop: "assessTime", align: "center" },
  { label: "得分", prop: "score", align: "center" },
  { label: "等级", prop: "grade", align: "center" },
  { label: "是否合格", prop: "qualified", align: "center" },
];

// åœ¨çº¿æµ‹è¯„
const assessmentList = ref([
  { id: 1, title: "安全操作规程测评", description: "考核员工对安全操作规程的掌握程度", deadline: "2026-05-30", status: "待测评" },
  { id: 2, title: "应急处置能力测评", description: "考核员工应急处置能力", deadline: "2026-06-15", status: "已完成" },
]);

const changeRecordPage = ({ page, limit }) => { recordPage.current = page; recordPage.size = limit; };
const changeReportPage = ({ page, limit }) => { reportPage.current = page; reportPage.size = limit; };
const startAssessment = (item) => {};
</script>

<style lang="scss" scoped>
.user-card {
  .user-info {
    text-align: center;
    h3 {
      margin: 15px 0 5px;
    }
    p {
      color: #666;
      font-size: 14px;
    }
  }
  .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    .label {
      color: #666;
    }
    .value {
      font-weight: bold;
      color: #409eff;
    }
  }
}

.assessment-list {
  .assessment-card {
    margin-bottom: 15px;
    .assessment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        margin: 0;
      }
    }
    .assessment-desc {
      color: #666;
      margin: 10px 0;
    }
    .assessment-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>

 src/views/safetyManagement/inspectionReport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
  <div class="app-container">
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-icon" style="background: #67c23a;"><el-icon><CircleCheck /></el-icon></div>
            <div class="stat-info">
              <span class="stat-value">{{ todayStats.completionRate }}%</span>
              <span class="stat-label">当日巡检完成率</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-icon" style="background: #409eff;"><el-icon><User /></el-icon></div>
            <div class="stat-info">
              <span class="stat-value">{{ todayStats.inspectorCount }}</span>
              <span class="stat-label">巡检人员数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-icon" style="background: #e6a23c;"><el-icon><Warning /></el-icon></div>
            <div class="stat-info">
              <span class="stat-value">{{ todayStats.abnormalCount }}</span>
              <span class="stat-label">异常记录数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-icon" style="background: #f56c6c;"><el-icon><CircleClose /></el-icon></div>
            <div class="stat-info">
              <span class="stat-value">{{ todayStats.missedCount }}</span>
              <span class="stat-label">漏检记录数</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>巡检任务执行趋势</span>
          </template>
          <div ref="trendChartRef" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>巡检类型与频率分布</span>
          </template>
          <div ref="typeChartRef" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="table-card">
      <template #header>
        <span>巡检记录明细</span>
      </template>
      <el-form :model="filters" :inline="true">
        <el-form-item label="巡检日期">
          <el-date-picker v-model="filters.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="巡检人员">
          <el-input v-model="filters.inspector" placeholder="请输入巡检人员" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status" placeholder="请选择" clearable style="width: 150px">
            <el-option label="正常" value="normal" />
            <el-option label="异常" value="abnormal" />
            <el-option label="漏检" value="missed" />
            <el-option label="未执行" value="unexecuted" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>
      <PIMTable :column="columns" :tableData="dataList" :page="pagination" @pagination="changePage" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import * as echarts from "echarts";

defineOptions({
  name: "巡检数据报表",
});

const todayStats = reactive({
  completionRate: 95,
  inspectorCount: 8,
  abnormalCount: 2,
  missedCount: 1,
});

const filters = reactive({
  dateRange: [],
  inspector: "",
  status: "",
});

const dataList = ref([]);
const pagination = reactive({ current: 1, size: 10, total: 0 });

const columns = [
  { label: "巡检时间", prop: "inspectionTime", align: "center" },
  { label: "巡检人员", prop: "inspector", align: "center" },
  { label: "巡检区域", prop: "area", align: "center" },
  { label: "巡检类型", prop: "type", align: "center" },
  { label: "状态", prop: "status", align: "center" },
  { label: "异常情况", prop: "abnormalDesc", align: "center" },
];

const trendChartRef = ref(null);
const typeChartRef = ref(null);

onMounted(() => {
  initTrendChart();
  initTypeChart();
});

const initTrendChart = () => {
  const chart = echarts.init(trendChartRef.value);
  const option = {
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: { type: "value" },
    series: [
      { name: "已完成", type: "line", data: [120, 132, 101, 134, 90, 230, 210], smooth: true },
      { name: "未完成", type: "line", data: [20, 12, 21, 14, 30, 20, 10], smooth: true },
    ],
    legend: { data: ["已完成", "未完成"], bottom: 0 },
    grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true },
  };
  chart.setOption(option);
};

const initTypeChart = () => {
  const chart = echarts.init(typeChartRef.value);
  const option = {
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { value: 335, name: "设备巡检" },
          { value: 310, name: "安全巡检" },
          { value: 234, name: "环境巡检" },
          { value: 135, name: "消防巡检" },
        ],
      },
    ],
    legend: { orient: "vertical", left: "left" },
  };
  chart.setOption(option);
};

const getData = () => {};
const resetFilters = () => {
  filters.dateRange = [];
  filters.inspector = "";
  filters.status = "";
};
const changePage = ({ page, limit }) => {
  pagination.current = page;
  pagination.size = limit;
};
</script>

<style lang="scss" scoped>
.stat-cards {
  margin-bottom: 20px;
  .stat-item {
    display: flex;
    align-items: center;
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 28px;
      margin-right: 15px;
    }
    .stat-info {
      display: flex;
      flex-direction: column;
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
      .stat-label {
        font-size: 14px;
        color: #666;
        margin-top: 5px;
      }
    }
  }
}

.chart-row {
  margin-bottom: 20px;
}

.table-card {
  :deep(.el-card__header) {
    font-weight: bold;
  }
}
</style>

 src/views/safetyManagement/trainingManage/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,135 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="培训资料" name="materials">
        <el-form :model="materialFilters" :inline="true">
          <el-form-item label="资料名称">
            <el-input v-model="materialFilters.name" placeholder="请输入资料名称" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="资料类型">
            <el-select v-model="materialFilters.type" placeholder="请选择" clearable style="width: 150px">
              <el-option label="制度" value="system" />
              <el-option label="课件" value="courseware" />
              <el-option label="视频" value="video" />
              <el-option label="案例" value="case" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMaterialData">搜索</el-button>
            <el-button @click="resetMaterialFilters">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="table_list">
          <div class="actions">
            <el-button type="primary" @click="uploadMaterial" icon="Upload">上传资料</el-button>
          </div>
          <PIMTable :column="materialColumns" :tableData="materialList" :page="materialPage" @pagination="changeMaterialPage" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="培训计划" name="plans">
        <el-form :model="planFilters" :inline="true">
          <el-form-item label="计划年度">
            <el-date-picker v-model="planFilters.year" type="year" placeholder="选择年度" value-format="YYYY" style="width: 150px" />
          </el-form-item>
          <el-form-item label="岗位">
            <el-input v-model="planFilters.post" placeholder="请输入岗位" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getPlanData">搜索</el-button>
            <el-button @click="resetPlanFilters">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="table_list">
          <div class="actions">
            <el-button type="primary" @click="addPlan" icon="Plus">制定计划</el-button>
          </div>
          <PIMTable :column="planColumns" :tableData="planList" :page="planPage" @pagination="changePlanPage" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="完成记录" name="records">
        <el-form :model="recordFilters" :inline="true">
          <el-form-item label="员工姓名">
            <el-input v-model="recordFilters.employeeName" placeholder="请输入员工姓名" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRecordData">搜索</el-button>
            <el-button @click="resetRecordFilters">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="table_list">
          <PIMTable :column="recordColumns" :tableData="recordList" :page="recordPage" @pagination="changeRecordPage" />
        </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("materials");

// åŸ¹è®­èµ„æ–™
const materialFilters = reactive({ name: "", type: "" });
const materialList = ref([]);
const materialPage = reactive({ current: 1, size: 10, total: 0 });
const materialColumns = [
  { label: "资料名称", prop: "name", align: "center" },
  { label: "类型", prop: "type", align: "center" },
  { label: "上传人", prop: "uploader", align: "center" },
  { label: "上传时间", prop: "uploadTime", align: "center" },
  { label: "文件大小", prop: "fileSize", align: "center" },
];

// åŸ¹è®­è®¡åˆ’
const planFilters = reactive({ year: "", post: "" });
const planList = ref([]);
const planPage = reactive({ current: 1, size: 10, total: 0 });
const planColumns = [
  { label: "计划年度", prop: "year", align: "center" },
  { label: "岗位", prop: "post", align: "center" },
  { label: "层级", prop: "level", align: "center" },
  { label: "培训内容", prop: "content", align: "center" },
  { label: "计划课时", prop: "hours", align: "center" },
];

// å®Œæˆè®°å½•
const recordFilters = reactive({ employeeName: "" });
const recordList = ref([]);
const recordPage = reactive({ current: 1, size: 10, total: 0 });
const recordColumns = [
  { label: "员工姓名", prop: "employeeName", align: "center" },
  { label: "培训内容", prop: "content", align: "center" },
  { label: "完成时间", prop: "completeTime", align: "center" },
  { label: "考核结果", prop: "result", align: "center" },
];

const getMaterialData = () => {};
const resetMaterialFilters = () => { materialFilters.name = ""; materialFilters.type = ""; };
const uploadMaterial = () => {};
const changeMaterialPage = ({ page, limit }) => { materialPage.current = page; materialPage.size = limit; };

const getPlanData = () => {};
const resetPlanFilters = () => { planFilters.year = ""; planFilters.post = ""; };
const addPlan = () => {};
const changePlanPage = ({ page, limit }) => { planPage.current = page; planPage.size = limit; };

const getRecordData = () => {};
const resetRecordFilters = () => { recordFilters.employeeName = ""; };
const changeRecordPage = ({ page, limit }) => { recordPage.current = page; recordPage.size = limit; };
</script>

<style lang="scss" scoped>
.actions {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>