pms-app/pages/maintenance/index.vue

<template>
  <z-paging
    class="page maintence"
    ref="paging"
    v-model="dataList"
    @query="queryList"
  >
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <template #top>
      <view class="page-top">
        <view class="page-back"></view>
        <view class="uni-page-head navgator justify-center align-center">
          <view class="nav-back" @click="navigatorBack()">
            <uni-icons type="left"></uni-icons>
          </view>
          <view class="nav-title">
            {{ $t("home.maintenanceWorkOrder") }}
          </view>
        </view>
        <view class="page-content">
          <view class="content-search">
            <uni-easyinput
              prefixIcon="search"
              confirmType="search"
              v-model="name"
              :placeholder="$t('operation.searchText')"
              @confirm="onSearch"
            >
            </uni-easyinput>
          </view>
          <uni-row
            class="content-statistics flex-row align-center justify-around"
          >
            <uni-col class="statistics-item flex-col align-center">
              <view class="statistics-count font-BiaoTiHei">
                {{ statistics.total }}
              </view>
              <view class="statistics-title">
                {{ $t("maintenanceWorkOrder.totalWorkOrders") }}
              </view>
            </uni-col>
            <uni-col class="statistics-item flex-col align-center">
              <view class="statistics-count font-BiaoTiHei">
                {{ statistics.done }}
              </view>
              <view class="statistics-title">
                {{ $t("workOrder.executed") }}
              </view>
            </uni-col>
            <uni-col class="statistics-item flex-col align-center">
              <view class="statistics-count font-BiaoTiHei">
                {{ statistics.todo }}
              </view>
              <view class="statistics-title">
                {{ $t("workOrder.pending") }}
              </view>
            </uni-col>
          </uni-row>
          <button class="full-btn" type="primary" @click="onCreate">
            <uni-icons type="plusempty"></uni-icons>
            {{ $t("maintenanceWorkOrder.createButton") }}
          </button>
        </view>
      </view>
    </template>
    <view class="paging-list">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view
          class="item-module flex-row align-center justify-between"
          :class="{ tobeFilled: item.result == 1 }"
        >
          <view class="module-name">
            {{ $t("workOrder.workOrderNumber") }}: {{ item.orderNumber }}
          </view>
          <view class="module-status" :class="{ pending: item.result == 1 }">
            <!-- 保养结果(1待执行 2已执行) -->
            <span>{{ resultDict[item.result] }}</span>
          </view>
        </view>
        <view class="item-content">
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("workOrder.workOrderName") }}:</span
            >
            <span>{{ item.name }}</span>
          </view>
          <view class="item-title flex-row">
            <!-- 保养结果(1待执行 2已执行) -->
            <span class="item-title-width"
              >{{ $t("maintenanceWorkOrder.status") }}:</span
            >
            <span>{{ resultDict[item.result] }}</span>
          </view>
          <view class="item-title flex-row">
            <!-- 工单类型(1计划生成 2临时新建) -->
            <span class="item-title-width"
              >{{ $t("workOrder.workOrdertype") }}:</span
            >
            <span>{{ typeDict[item.type] }}</span>
          </view>
          <!-- 负责人 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("workOrder.responsiblePerson") }}:</span
            >
            <span>{{ item.responsiblePersonName }}</span>
          </view>
          <!-- 实际保养开始时间 -->
          <!-- <view class="item-title flex-row">
            <span class="item-title-width"
              >{{
                $t("maintenanceWorkOrder.actualMaintenanceStartTime")
              }}:</span
            >
            <span>{{
              item.actualStartTime ? formatDate(item.actualStartTime) : ""
            }}</span>
          </view> -->
          <!-- 实际保养结束时间 -->
          <!-- <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("maintenanceWorkOrder.actualEndTime") }}:</span
            >
            <span>{{
              item.actualEndTime ? formatDate(item.actualEndTime) : ""
            }}</span>
          </view> -->
          <!-- 创建时间 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("operation.createTime") }}:</span
            >
            <span>{{
              item.createTime ? formatDate(item.createTime) : ""
            }}</span>
          </view>
          <!-- 填写时间  -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("operation.fillTime") }}:</span
            >
            <span v-if="item.result == 2">{{ item.updateTime ? formatDate(item.updateTime) : "" }}</span>
          </view>
          <!-- 是否延期 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("maintenanceWorkOrder.isPostponed") }}:</span
            >
            <span></span>
          </view>
          <!-- 距离保养 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("maintenanceWorkOrder.timeToMaintenance") }}:</span
            >
            <span
              :class="{
                'color-red': item.mainDistance
                  ? item.mainDistance.indexOf('-') == 0
                  : 0,
                'color-green': item.mainDistance
                  ? item.mainDistance.indexOf('-') < 0
                  : 0,
              }"
              >{{ item.mainDistance }}</span
            >
          </view>
        </view>
        <view class="item-btn flex-row align-center justify-end">
          <!-- 查看详情 -->
          <button
            type="primary"
            :plain="false"
            v-if="item.result == 2"
            @click="onView(item)"
          >
            {{ $t("workOrder.viewDetails") }}
          </button>
          <!-- 去保养 -->
          <button type="primary" v-if="item.result == 1" @click="onEdit(item)">
            {{ $t("maintenanceWorkOrder.maintenanceButton") }}
          </button>
        </view>
      </view>
    </view>
  </z-paging>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { onLoad, onShow, onHide, onUnload } from "@dcloudio/uni-app";

import { getMaintenanceCount, getMaintenanceList } from "@/api/maintenance";
import dayjs from "dayjs";
import { useDataDictStore } from "@/store/modules/dataDict";
// --字典项--
const { getDataDictList } = useDataDictStore();
// 保养状态
const resultDict = reactive({});
getDataDictList("pms_main_work_order_result").map((item) => {
  resultDict[item.value] = item.label;
});
console.log("resultDict", resultDict);
// 工单类型
const typeDict = reactive({});
getDataDictList("pms_main_work_order_type").map((item) => {
  typeDict[item.value] = item.label;
});
console.log("typeDict", typeDict);

//  --- 列表 ---start---
const name = ref("");
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getMaintenanceList({
    pageNo,
    pageSize,
    name: name.value,
  })
    .then((res) => {
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value.complete(res.data.list);
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false);
    });
};
const onSearch = () => {
  paging.value.reload();
};
const formatDate = (time) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};

// -- end --
//  获取顶部统计数量
const statistics = reactive({});
const getCount = () => {
  getMaintenanceCount().then((res) => {
    statistics.total = res.data?.total || 0;
    statistics.todo = res.data?.todo || 0;
    statistics.done =  res.data.total - res.data.todo;
  });
};
onMounted(() => {
  console.log("maintenance-onMounted");
});
onShow((options) => {
  console.log("maintenance-onShow", options);
  getCount();
  nextTick(() => {
    onSearch();
  });
});
onLoad((options) => {
  console.log("maintenance-onload", options);
});

const onCreate = () => {
  uni.navigateTo({
    url: "/pages/maintenance/create",
  });
};
const onEdit = (item) => {
  uni.navigateTo({
    url: "/pages/maintenance/edit?id=" + item.id,
  });
};
const onView = (item) => {
  uni.navigateTo({
    url: "/pages/maintenance/detail?id=" + item.id,
  });
};
const navigatorBack = () => {
  uni.navigateBack();
};
</script>
<style lang="scss" scoped>
@import "@/style/work-order.scss";
</style>