车间能级提升-智能设备管理系统
eims-ui-mobile/src/pages/maint/maint-st.vue
@@ -11,18 +11,25 @@
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
    <template #top>
      <wd-drop-menu>
        <wd-drop-menu-item v-model="equName" :options="equList" @change="handleEquName" />
        <wd-drop-menu-item
          v-model="filterDate"
          :options="filterDateList"
          @change="handleFilterDate"
        />
        <wd-drop-menu-item v-model="status" :options="statusList" @change="handleStatus" />
      </wd-drop-menu>
      <!-- 增加一个搜索栏 -->
      <wd-search v-model="searchValue" @search="handleSearch">
        <template #right-icon>
          <wd-icon name="scan" size="34rpx"></wd-icon>
        </template>
      </wd-search>
      <wd-tabs v-model="activeTab" @change="handleTabChange">
        <wd-tab title="待保养"></wd-tab>
        <wd-tab title="待确认"></wd-tab>
        <wd-tab title="已完成"></wd-tab>
      </wd-tabs>
    </template>
    <view class="bg-base">
      <wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
      <wd-card
        type="rectangle"
        v-for="(item, index) in dataList"
        :key="item.id"
        :class="[getCardColorClass(item.planTime)]"
      >
        <template #title>
          <view class="flex justify-between">
            <view class="flex items-center menu-title-box">
@@ -40,24 +47,30 @@
            </view>
          </view>
        </template>
        <view class="flex h-[140rpx]" items-center>
        <view class="flex" items-center>
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view class="flex-1">
            <view class="text-color-gray text-sm mt-1 flex">
              <text class="mr-3">工单总数: {{ item.orderCount }}</text>
              <text class="mr-3">总数: {{ item.orderCount }}</text>
              |
              <text class="mx-3">已完成: {{ item.wcCount }}</text>
              <text class="mx-3">已完成: {{ item.dyzCount }}</text>
              |
              <text class="mx-3">待保养: {{ item.dbyCount }}</text>
            </view>
            <view class="text-color-gray text-sm mt-2 flex">
              <text class="mr-3">待保养: {{ item.dbyCount }}</text>
              |
              <text class="mx-3">保养中: {{ item.byCount }}</text>
              |
              <text class="ml-3">待验证: {{ item.dyzCount }}</text>
            </view>
<!--            <view class="text-color-gray text-sm mt-2 flex">-->
<!--              <text class="mr-3">待保养: {{ item.dbyCount }}</text>-->
<!--              |-->
<!--&lt;!&ndash;              <text class="mx-3">保养中: {{ item.byCount }}</text>&ndash;&gt;-->
<!--&lt;!&ndash;              |&ndash;&gt;-->
<!--&lt;!&ndash;              <text class="ml-3">待验证: {{ item.dyzCount }}</text>&ndash;&gt;-->
<!--            </view>-->
            <view class="text-color-gray text-sm mt-2 flex">
              <text>状态:</text>
              <template v-if="item.status === '1'">
                <wd-icon class="icon-color-warning" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">待确认</text>
              </template>
              <template v-else-if="item.status === '2'">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
@@ -72,14 +85,30 @@
        </view>
      </wd-card>
    </view>
    <wd-fab
      v-if="status === '1' && isLeader()"
      :draggable="true"
      type="success"
      position="left-bottom"
      :expandable="false"
      inactiveIcon="check"
      @click="handleBatchComplete"
      direction="top"
    />
  </z-paging>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import { getMaintStList } from '@/service/maint'
import dayjs from 'dayjs'
import { updateMaintSt } from '@/service/maint'
import { useUserStore } from "@/store";
import { isLeader } from '@/utils/RoleUtils'
import { useToast } from 'wot-design-uni'
const searchValue = ref<string>('')
/**
 * 其他页面传过来的数据
 * assetNo: 资产编号
@@ -99,14 +128,47 @@
  params?: NonNullable<unknown>
}
// 计算工单卡片的背景颜色类
function getCardColorClass(planTime) {
  if (!planTime) return ''
  const now = dayjs()
  const planDate = dayjs(planTime)
  // 获取计划日期所在月份的最后一天
  const planMonthEnd = planDate.endOf('month')
  // 计算当前日期与计划月月底的差值(天数)
  const diffDays = planMonthEnd.diff(now, 'day')
  if (diffDays < 0) {
    // 已经过了计划月的月底,红色背景
    return 'card-overdue'
  } else if (diffDays <= 3) {
    // 距离计划月月底3天以内,红色背景
    return 'card-overdue'
  } else if (diffDays <= 10) {
    // 距离计划月月底10天以内,黄色背景
    return 'card-urgent'
  } else {
    // 正常状态,背景颜色不变
    return ''
  }
}
// 页面参数,上个页面传递过来的参数
const option = reactive<PageParams>({
  assetNo: '',
  from: '',
})
const status = ref<string>('-1')
// 标签页相关
const activeTab = ref(0) // 默认选中第一个标签页(待保养)
// 原有状态
const status = ref<string>('0') // 默认为待保养状态
const equName = ref<string>('-1')
const filterDate = ref<string>('1')
const filterDate = ref<string>('0')
const filterDateList = ref<Record<string, any>[]>([
  { label: '所有数据', value: '0' },
@@ -121,6 +183,25 @@
  { label: '已完成', value: '3' },
])
const equList = ref<Record<string, any>[]>([{ label: '所有设备', value: '-1' }])
// 标签页切换处理函数
function handleTabChange({ index }) {
  // 根据标签页索引设置对应的状态值
  if (index === 0) {
    // 待保养
    status.value = '0'
  } else if (index === 1) {
    // 待确认
    status.value = '1'
  } else if (index === 2) {
    // 已完成
    status.value = '2'
  }
  // 重新加载数据
  reloadData()
}
// 原有函数
function handleStatus({ value }) {}
function handleEquName({ value }) {
  console.log(value)
@@ -140,6 +221,7 @@
    pageSize,
    equName: equName.value,
    status: status.value,
    params: {},
  }
  if (filterDate.value === '1') {
    // 获取当前日期
@@ -149,7 +231,7 @@
      endPlanTime: now.endOf('month').format('YYYY-MM-DD 23:59:59'),
    }
  } else {
    delete queryParams.params
    queryParams.params = {}
  }
  if (equName.value === '-1') {
@@ -162,7 +244,7 @@
  if (option?.from === 'scan') {
    queryParams.assetNo = option.assetNo
  }
  queryParams.params.searchValue = searchValue.value
  getMaintStList(queryParams)
    .then((res: any) => {
      // 请勿在网络请求回调中给dataList赋值!!只需要调用complete就可以了
@@ -182,9 +264,51 @@
  })
}
function handleSearch () {
  console.log('handleSearch')
  paging.value.reload()
}
function reloadData() {
  paging.value.reload()
}
const userStore = useUserStore()
const toast = useToast()
async function handleBatchComplete() {
  console.log('handleBatchComplete', dataList.value.length)
  if (!isLeader()) {
    toast.info('无权限操作')
    return
  }
  // 如果待确认工单列表为空,则提示用户无待确认工单
  if (dataList.value.length < 1) {
    toast.info('无待确认工单')
    return
  }
  const now = new Date()
  const verifyTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
  // 假设 dataList 是当前待确认的工单列表
  const promises = dataList.value.map(item => {
    return updateMaintSt({
      id: item.id,
      status: '2',
      verifyUser: userStore?.userInfo?.userId,
      verifyTime
    })
  })
  try {
    await Promise.all(promises)
    toast.success('一键确认完成')
    reloadData() // 刷新列表
  } catch (e) {
    toast.error('部分工单确认失败,请重试')
  }
}
onLoad((options) => {
  Object.assign(option, options)
  uni.$on('maint-st-refresh', reloadData)
@@ -223,4 +347,12 @@
:deep(.wd-card__title-content) {
  padding: 24rpx 0 !important;
}
/* 工单卡片背景颜色 */
.card-urgent {
  background-color: rgba(255, 204, 0, 0.1); /* 黄色背景 */
}
.card-overdue {
  background-color: rgba(255, 0, 0, 0.1); /* 红色背景 */
}
</style>