设备管理-添加导出功能

gaoluyang

2 天以前 0a6a18524ea5c03ea03898ebd1945bc81153db45

 src/views/equipmentManagement/upkeep/index.vue

@@ -1,5 +1,49 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备名称">
        <el-input
            v-model="filters.deviceName"
            style="width: 240px"
            placeholder="请输入设备名称"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="计划保养日期">
        <el-date-picker
            v-model="filters.maintenancePlanTime"
            type="date"
            placeholder="请选择计划保养日期"
            size="default"
            @change="(date) => handleDateChange(date,2)"
        />
      </el-form-item>
      <el-form-item label="实际保养日期">
        <el-date-picker
            v-model="filters.maintenanceActuallyTime"
            type="date"
            placeholder="请选择实际保养日期"
            size="default"
            @change="(date) => handleDateChange(date,1)"
        />
      </el-form-item>
      <el-form-item label="实际保养人">
        <el-input
            v-model="filters.maintenanceActuallyName"
            style="width: 240px"
            placeholder="请输入实际保养人"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <el-text class="mx-1" size="large">设备保养</el-text>
@@ -15,10 +59,14 @@
          <el-button type="success" icon="Van" @click="addPlan">
            新增计划
          </el-button>
          <el-button @click="handleOut">
            导出
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
            批量删除
          </el-button>
@@ -77,7 +125,7 @@
<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { getUpkeepPage, delUpkeep } from "@/api/equipmentManagement/upkeep";
import { onMounted } from "vue";
import { onMounted, getCurrentInstance } from "vue";
import PlanModal from "./Modal/PlanModal.vue";
import MaintenanceModal from "./Modal/MaintenanceModal.vue";
import dayjs from "dayjs";
@@ -86,6 +134,8 @@
defineOptions({
  name: "设备保养",
});

const { proxy } = getCurrentInstance();

// 计划弹窗控制器
const planModalRef = ref();
@@ -109,7 +159,12 @@
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(getUpkeepPage, {}, [
} = usePaginationApi(getUpkeepPage, {
  deviceName: undefined,
  maintenancePlanTime: undefined,
  maintenanceActuallyTime: undefined,
  maintenanceActuallyName: undefined,
}, [
  {
    label: "设备名称",
    align: "center",
@@ -173,6 +228,21 @@
    width: "200px",
  },
]);
// type == 1实际保养时间 2计划保养时间
const handleDateChange = (value,type) => {
  filters.maintenanceActuallyTimeReq = null
  filters.maintenancePlanTimeReq = null
  if(type === 1){
    if (value) {
      filters.maintenanceActuallyTimeReq = dayjs(value).format("YYYY-MM-DD");
    }
  }else{
    if (value) {
      filters.maintenancePlanTimeReq = dayjs(value).format("YYYY-MM-DD");
    }
  }
  getTableData();
};

// 新增保养
const addMaintain = () => {
@@ -190,9 +260,10 @@
  planModalRef.value.openEdit(id);
};

const changePage = ({ page }) => {
  pagination.currentPage = page;
  onCurrentChange(page);
const changePage = ({ page, limit }) => {
   pagination.currentPage = page;
   pagination.pageSize = limit;
   onCurrentChange(page);
};

// 单行删除
@@ -210,6 +281,21 @@
  });
};

// 导出
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download("/device/maintenance/export", {}, "设备保养.xlsx");
    })
    .catch(() => {
      ElMessage.info("已取消");
    });
};

onMounted(() => {
  getTableData();
});