编辑 | blame | 历史 | 原始文档

保养任务完成功能

涉及页面

  • 设备保养 - 保养任务页面

API

方法 路径 说明
PUT /device/maintenance/complete/{id} 单条保养完成
PUT /device/maintenance/batchComplete 一键保养完成

1. 保养完成

请求参数:

参数 类型 必填 说明
id Long 保养记录ID(路径参数)

响应: { "code": 200, "msg": "操作成功" }

2. 一键保养完成

请求参数:

参数 类型 必填 说明
dateStr String 日期(格式:yyyy-MM-dd)

响应: { "code": 200, "msg": "已完成 N 条保养记录" }

前端修改点

1. 保养任务列表改造 - 按日期分组折叠

参照销售/采购订单样式,将保养记录按日期分组折叠展示。

<el-collapse v-model="activeDateGroups" accordion>
  <el-collapse-item v-for="group in groupedMaintenanceList" :key="group.dateStr" :name="group.dateStr">
    <template slot="title">
      <div class="group-header">
        <span>{{ group.dateStr }}</span>
        <span>共 {{ group.items.length }} 条</span>
        <el-button type="success" size="small" @click.stop="handleBatchComplete(group.dateStr)">一键保养完成</el-button>
      </div>
    </template>
    <el-table :data="group.items" border>
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="deviceModel" label="规格型号" />
      <el-table-column prop="machineryCategory" label="设备项目" />
      <el-table-column prop="maintenanceActuallyName" label="保养人" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'">
            {{ scope.row.status === 0 ? '待保养' : '已完结' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0" type="primary" size="small" @click="handleComplete(scope.row.id)">
            保养完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-collapse-item>
</el-collapse>

2. data 数据

data() {
  return {
    activeDateGroups: [],
    maintenanceList: [],
  }
}

3. 计算属性

computed: {
  groupedMaintenanceList() {
    const groups = {};
    this.maintenanceList.forEach(item => {
      const dateStr = item.createTime.substring(0, 10); // 取日期部分 yyyy-MM-dd
      if (!groups[dateStr]) {
        groups[dateStr] = { dateStr, items: [] };
      }
      groups[dateStr].items.push(item);
    });
    return Object.values(groups).sort((a, b) => b.dateStr.localeCompare(a.dateStr));
  }
}

4. 方法

async handleComplete(id) {
  try {
    await this.$confirm('确认该保养任务已完成?', '提示', { type: 'warning' });
    await this.$http.put(`/device/maintenance/complete/${id}`);
    this.$message.success('保养完成');
    this.loadList();
  } catch (e) {
    if (e !== 'cancel') {
      this.$message.error(e.msg || '操作失败');
    }
  }
},

async handleBatchComplete(dateStr) {
  try {
    await this.$confirm(`确认将 ${dateStr} 的所有待保养任务一键完成?`, '提示', { type: 'warning' });
    await this.$http.put('/device/maintenance/batchComplete', null, { params: { dateStr } });
    this.$message.success('批量保养完成');
    this.loadList();
  } catch (e) {
    if (e !== 'cancel') {
      this.$message.error(e.msg || '操作失败');
    }
  }
},

async loadList() {
  const res = await this.$http.get('/device/maintenance/page', { params: this.queryParams });
  this.maintenanceList = res.data.records || [];
}

注意事项

  • 已完成(status=1)的保养记录不显示"保养完成"按钮
  • 一键保养完成仅处理当天所有待保养(status=0)的记录
  • 保养完成后 status 变为 1,同时记录当前操作人为实际保养人