feat(eims-ui-mobile): 为多个页面添加搜索功能 - 在 equ-list、insp-st、maint-st、req-list 和 ...

baoshiwei

2025-06-20 60384e8241fa855b5780260633ee9b9f8904847a

 eims-ui-mobile/src/pages/repair/req-list.vue

@@ -2,151 +2,173 @@
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '设备报修',
    'app-plus': {
      titleNView: {
        buttons: [
          {
            text: '新增',
            fontSize: '14px',
            color: '#FFFFFF',
          },
          {
            text: '',
            fontSize: '24px',
            color: '#FFFFFF',
          },
        ],
      },
    },
  },
  style: { navigationBarTitleText: '报修列表', navigationStyle: 'custom' },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
  <z-paging
    ref="paging"
    v-model="dataList"
    :auto="false"
    @query="queryList"
    show-refresher-update-time
  >
    <template #top>
      <wd-drop-menu v-if="!isSelectReq">
        <wd-drop-menu-item
          v-model="reqTypeId"
          label-key="dictLabel"
          value-key="dictValue"
          :options="reqTypeList"
          @change="handleReqType"
        />
        <wd-drop-menu-item
          v-model="status"
          label-key="dictLabel"
          value-key="dictValue"
          :options="statusList"
          @change="handleReqStatu"
        />
      </wd-drop-menu>
      <wd-navbar
        title="报修列表"
        left-arrow
        @click-left="goBack"
        right-text="新增"
        @click-right="handleClickRight"
        custom-style="background: #4D80F0;"
        safeAreaInsetTop
      ></wd-navbar>
      <!-- 增加一个搜索栏 -->
      <wd-search v-model="searchValue" @search="handleSearch"></wd-search>
<!--      <wd-drop-menu v-if="!isSelectReq">-->
<!--        <wd-drop-menu-item-->
<!--          v-model="reqTypeId"-->
<!--          label-key="dictLabel"-->
<!--          value-key="dictValue"-->
<!--          :options="reqTypeList"-->
<!--          @change="handleReqType"-->
<!--        />-->
<!--        <wd-drop-menu-item-->
<!--          v-model="filterDate"-->
<!--          :options="filterDateList"-->
<!--          @change="handleFilterDate"-->
<!--        />-->
<!--        <wd-drop-menu-item-->
<!--          v-model="status"-->
<!--          label-key="dictLabel"-->
<!--          value-key="dictValue"-->
<!--          :options="statusList"-->
<!--          @change="handleReqStatu"-->
<!--        />-->
<!--      </wd-drop-menu>-->
    </template>

    <view class="bg-base">
      <wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
        <template #title>
          <view class="flex justify-between items-center">
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <text class="ml-1 text-xs">{{ item.code }}</text>
            </view>
      <ReqCard
        v-for="item in dataList"
        :key="item.id"
        :item="item"
        @itemClick="itemClick"
      ></ReqCard>
<!--      <wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">-->
<!--        <template #title>-->
<!--          <view class="flex justify-between items-center">-->
<!--            <view class="flex items-center menu-title-box">-->
<!--              <view class="menu-indicator"></view>-->
<!--              <text class="ml-1 text-sm">{{ item.code }}</text>-->
<!--            </view>-->

            <view>
              <wd-button size="small" v-if="item.status === '0'" type="info">待接单</wd-button>
              <wd-button size="small" v-else-if="item.status === '1'" type="warning">
                已接单
              </wd-button>
              <wd-button size="small" v-else-if="item.status === '2'" type="primary">
                维修中
              </wd-button>
              <wd-button size="small" v-else-if="item.status === '3'" type="success">
                已完成
              </wd-button>
            </view>
          </view>
        </template>
        <wd-swipe-action>
          <view class="flex h-[160rpx] items-center" @click.stop="itemClick(item)">
            <image
              v-if="item.reqType === '1'"
              class="slot-img text-center"
              src="/static/ico/ico-huiyi.png"
            />
            <image
              v-else-if="item.reqType === '2'"
              class="slot-img text-center"
              src="/static/ico/ico-setting.png"
            />
            <image
              v-else-if="item.reqType === '3'"
              class="slot-img text-center"
              src="/static/ico/ico-faxian.png"
            />
            <view class="flex-1 mt-1">
              <view class="text-color-base">
                <template v-if="item.reqType === '1'">
                  <text>设备类型</text>
                  <text class="mx-2">|</text>
                  <text>{{ item.equName }}</text>
                </template>
<!--            <view>-->
<!--              <wd-button size="small" v-if="item.status === '0'" type="info">待接单</wd-button>-->
<!--              <wd-button size="small" v-else-if="item.status === '1'" type="warning">-->
<!--                已接单-->
<!--              </wd-button>-->
<!--              <wd-button size="small" v-else-if="item.status === '2'" type="primary">-->
<!--                维修中-->
<!--              </wd-button>-->
<!--              <wd-button size="small" v-else-if="item.status === '3'" type="success">-->
<!--                已完成-->
<!--              </wd-button>-->
<!--            </view>-->
<!--          </view>-->
<!--        </template>-->
<!--        <wd-swipe-action>-->
<!--          <view class="flex h-[160rpx] items-center" @click.stop="itemClick(item)">-->
<!--            <image-->
<!--              v-if="item.reqType === '1'"-->
<!--              class="slot-img text-center"-->
<!--              src="/static/ico/ico-huiyi.png"-->
<!--            />-->
<!--            <image-->
<!--              v-else-if="item.reqType === '2'"-->
<!--              class="slot-img text-center"-->
<!--              src="/static/ico/ico-setting.png"-->
<!--            />-->
<!--            <image-->
<!--              v-else-if="item.reqType === '3'"-->
<!--              class="slot-img text-center"-->
<!--              src="/static/ico/ico-faxian.png"-->
<!--            />-->
<!--            <view class="flex-1 mt-1">-->
<!--              <view class="text-color-base">-->
<!--                <template v-if="item.reqType === '1'">-->
<!--                  <text>设备类型</text>-->
<!--                  <text class="mx-2">|</text>-->
<!--                  <text>{{ item.equName }}</text>-->
<!--                </template>-->

                <template v-if="item.reqType === '2'">
                  <text>工具类型</text>
                  <text class="mx-2">|</text>
                  <text>{{ item.fixtureName }}</text>
                </template>
<!--                <template v-if="item.reqType === '2'">-->
<!--                  <text>工具类型</text>-->
<!--                  <text class="mx-2">|</text>-->
<!--                  <text>{{ item.fixtureName }}</text>-->
<!--                </template>-->

                <template v-if="item.reqType === '3'">
                  <text>其他类型</text>
                </template>
                <view class="text-color-gray mt-1 text-mini">
                  <text>发生时间: {{ item.occTime }}</text>
                </view>
<!--                <template v-if="item.reqType === '3'">-->
<!--                  <text>其他类型</text>-->
<!--                </template>-->
<!--                <view class="text-color-gray mt-1 text-mini">-->
<!--                  <text>发生时间: {{ item.occTime }}</text>-->
<!--                </view>-->

                <view class="text-color-gray mt-1 text-mini">
                  <text>报修时间: {{ item.reqTime }}</text>
                </view>
                <view class="text-color-gray mt-1 text-mini">
                  <text>报修人: {{ item.reqUserName }}</text>
                </view>
              </view>
              <view class="text-color-gray text-xs mt-1">
                {{ item.location }} {{ item.madeIn }}
              </view>
            </view>
            <view v-if="isSelectReq">
              <wd-button size="small" icon="edit-outline" @click.stop="handleSelectReq(item)">
                选中
              </wd-button>
            </view>
          </view>
          <template #right>
            <view class="h-full px-3 flex items-center">
              <wd-button size="small" type="error" @click.stop="handleDelete(item)">删除</wd-button>
            </view>
          </template>
        </wd-swipe-action>
      </wd-card>
<!--                <view class="text-color-gray mt-1 text-mini">-->
<!--                  <text>报修时间: {{ item.reqTime }}</text>-->
<!--                </view>-->
<!--                <view class="text-color-gray mt-1 text-mini">-->
<!--                  <text>报修人: {{ item.reqUserName }}</text>-->
<!--                </view>-->
<!--              </view>-->
<!--              <view class="text-color-gray text-sm mt-1">-->
<!--                {{ item.location }} {{ item.madeIn }}-->
<!--              </view>-->
<!--            </view>-->
<!--            <view v-if="isSelectReq">-->
<!--              <wd-button size="small" icon="edit-outline" @click.stop="handleSelectReq(item)">-->
<!--                接单-->
<!--              </wd-button>-->
<!--            </view>-->
<!--          </view>-->
<!--          <template #right>-->
<!--            <view class="h-full px-3 flex items-center">-->
<!--              <wd-button size="small" type="error" @click.stop="handleDelete(item)">删除</wd-button>-->
<!--            </view>-->
<!--          </template>-->
<!--        </wd-swipe-action>-->
<!--      </wd-card>-->
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance, ref } from 'vue'
import { useToast, useMessage } from 'wot-design-uni'
import { getRepairReqList, delRepairReq } from '@/service/repair'
import { DICT_REPAIR_REQ_STATUS, DICT_REPAIR_REQ_TYPE, getDictInfo } from '@/service/dict'
import dayjs from "dayjs";
import { isEquAdmin, isRepair } from "@/utils/RoleUtils";
import { useUserStore } from "@/store";
import ReqCard from "@/components/repair/req-card.vue";

const userStore = useUserStore()
const message = useMessage()
const toast = useToast()
// 报修单类型
const reqTypeId = ref<number>(-1)
// 报修单处理状态
const status = ref<number>(-1)

const searchValue = ref<string>('')
const isSelectReq = ref(false)

const filterDate = ref<string>('2')

const filterDateList = ref<Record<string, any>[]>([
  { label: '所有数据', value: '0' },
  { label: '当天数据', value: '1' },
  { label: '当月数据', value: '2' },
])

const reqTypeList = ref<any>([{ dictLabel: '所有类型', dictValue: -1 }])
const statusList = ref<any>([{ dictLabel: '所有状态', dictValue: -1 }])
@@ -156,25 +178,56 @@
function handleReqStatu({ value }) {
  reloadData()
}
function handleFilterDate({ value }) {
  reloadData()
}



const paging = ref(null)
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  const parmams = {
  const queryParams: any = {
    pageNum,
    pageSize,
    reqType: reqTypeId.value,
    status: status.value,
    params: {
      searchValue: searchValue.value,
    },
  }
  if (reqTypeId.value === -1) {
    delete parmams.reqType
  }
  if (status.value === -1) {
    delete parmams.status
  // if (reqTypeId.value === -1) {
  //   delete queryParams.reqType
  // }
  // if (status.value === -1) {
  //   delete queryParams.status
  // }
  //
  // if (filterDate.value === '1') {
  //   // 获取当前日期
  //   const now = dayjs()
  //   queryParams.params = {
  //     beginReqTime: now.startOf('day').format('YYYY-MM-DD 00:00:00'),
  //     endReqTime: now.endOf('day').format('YYYY-MM-DD 23:59:59'),
  //   }
  // } else if (filterDate.value === '2') {
  //   const now = dayjs()
  //   queryParams.params = {
  //     beginReqTime: now.startOf('month').format('YYYY-MM-DD 00:00:00'),
  //     endReqTime: now.endOf('month').format('YYYY-MM-DD 23:59:59'),
  //   }
  // } else {
  //   delete queryParams.params
  // }

  // 查询未完成的报修单
  queryParams.params.status = '0,1,2'
  queryParams.reqUser = userStore?.userInfo?.userId
  if (isRepair() || isEquAdmin()) {
    queryParams.params.status = '0'
    queryParams.reqUser = undefined
  }

  getRepairReqList(parmams)
  getRepairReqList(queryParams)
    .then((res: any) => {
      paging.value.completeByTotal(res.rows, res.total)
    })
@@ -219,6 +272,11 @@
    })
}

function handleSearch() {
  console.log('handleSearch')
  paging.value.reload()
}

/**
 * 条目点击事件
 * @param item
@@ -230,10 +288,19 @@
 * @param item
 */
function handleSelectReq(item: any) {
  if (isSelectReq.value) {
    emitSelectReq(item)
    uni.navigateBack()
  }
  // 弹出确认是否接单弹窗
  message.confirm({
    msg: '确定接单？',
    title: '提示',
    beforeConfirm: ({ resolve }) => {
      resolve(true)
      // 接单逻辑处理
      if (isSelectReq.value) {
        emitSelectReq(item)
        uni.navigateBack()
      }
    },
  })
}

/**
@@ -246,13 +313,20 @@
  })
}

onNavigationBarButtonTap((e) => {
  if (e.index === 0 && !isSelectReq.value) {
    uni.navigateTo({
      url: `/pages/repair/repair-add`,
    })
  }
})
const goBack = () => {
  uni.navigateBack()
}
function handleClickRight() {
  // if (e.index === 0 && !isSelectReq.value) {
  //   uni.navigateTo({
  //     url: `/pages/repair/repair-add`,
  //   })
  // }

  uni.navigateTo({
    url: `/pages/repair/repair-add`,
  })
}

const eventChannel = ref<any>()
onMounted(() => {
@@ -264,6 +338,7 @@
    // 只显示未接单数据
    status.value = 0
    console.log('OnSelectReq', data)
    // reloadData()
  })
})

@@ -272,14 +347,18 @@
  reqTypeList.value.push(...rList)
  const sList: any = await getDictInfo(DICT_REPAIR_REQ_STATUS)
  statusList.value.push(...sList)

  setTimeout(() => {
    reloadData()
  }, 800)
}

onLoad(() => {
  initData()
  uni.$on('req-list-refresh', reloadData)
  uni.$on('list-refresh', reloadData)
})
onUnload(() => {
  uni.$off('req-list-refresh', reloadData)
  uni.$off('list-refresh', reloadData)
})
</script>