移动端功能优化

baoshiwei

2025-06-12 bab490d2da009c1a23b352b3b964e0c2dd06a0b3

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

@@ -12,177 +12,38 @@
        title="设备维修"
        left-arrow
        @click-left="goBack"
        right-text="提交"
        @click-right="handleClickRight"
        custom-style="background: #4D80F0;"
        safeAreaInsetTop
      >
        <template #right>
          <text v-if="isOperatorOrRepair()" class="text-white">接单</text>
        </template>
<!--        <template #right>-->
<!--          <text v-if="isLineOrRepair()" class="text-white">接单</text>-->
<!--        </template>-->
      </wd-navbar>
      <wd-drop-menu>
        <wd-drop-menu-item
          v-model="resTypeId"
          label-key="dictLabel"
          value-key="dictValue"
          :options="resTypeList"
          @change="handleResType"
        />
        <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="handleResStatu"
        />
      </wd-drop-menu>
<!--      <wd-drop-menu>-->
<!--        <wd-drop-menu-item-->
<!--          v-model="resTypeId"-->
<!--          label-key="dictLabel"-->
<!--          value-key="dictValue"-->
<!--          :options="resTypeList"-->
<!--          @change="handleResType"-->
<!--        />-->
<!--        <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="handleResStatu"-->
<!--        />-->
<!--      </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-sm">{{ item.resCode }}</text>
              <text class="text-color-gray ml-2 text-mini">接单:{{ item.createTime }}</text>
            </view>

            <view>
              <wd-tag size="small" v-if="item.status === '1'" type="warning">已接单</wd-tag>
              <wd-tag size="small" v-else-if="item.status === '2'" type="primary">维修中</wd-tag>
              <wd-tag size="small" v-else-if="item.status === '3'" type="success">已完成</wd-tag>
            </view>
          </view>
        </template>
        <view class="flex h-[240rpx] items-center">
          <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 === '3'">
                <text>其他类型</text>
              </template>
              <view class="text-color-gray mt-1 text-mini">
                <text>报修人: {{ item.reqUserName }}</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.startTime }}</text>
              </view>
              <view class="text-color-gray mt-1 text-mini">
                <text>维修结束: {{ item.endTime }}</text>
              </view>
              <view class="text-color-gray mt-1 text-mini">
                <text>维修人: {{ item.resUserName }}</text>
              </view>
            </view>
          </view>
          <view>
            <!--操作工或维修工角色-->
            <template v-if="isOperatorOrRepair()">
              <wd-button
                v-if="item.status === '1'"
                size="small"
                icon="edit-outline"
                @click.stop="handleStartRepair(item)"
              >
                开始维修
              </wd-button>
              <wd-button
                v-else-if="item.status === '2'"
                size="small"
                icon="edit-outline"
                @click.stop="itemClick(item)"
              >
                维修中
              </wd-button>
              <view class="h-full flex flex-col" v-else-if="item.status === '3'">
                <wd-button size="small" icon="warn-bold" @click.stop="itemClick(item)">
                  详情
                </wd-button>
                <wd-button
                  class="mt-4"
                  size="small"
                  icon="edit-outline"
                  @click.stop="goToFeedBack(item)"
                >
                  查看评价
                </wd-button>
              </view>
            </template>

            <!--管理员角色-->
            <template v-else-if="isLeader()">
              <wd-button
                v-if="item.status === '1'"
                size="small"
                icon="warn-bold"
                disabled
                @click.stop="itemClick(item)"
              >
                待维修
              </wd-button>
              <wd-button
                v-else-if="item.status === '2'"
                size="small"
                icon="warn-bold"
                disabled
                @click.stop="itemClick(item)"
              >
                维修中
              </wd-button>
              <view class="h-full flex flex-col" v-else-if="item.status === '3'">
                <wd-button size="small" icon="warn-bold" @click.stop="itemClick(item)">
                  详情
                </wd-button>
                <wd-button
                  class="mt-4"
                  size="small"
                  icon="edit-outline"
                  @click.stop="goToFeedBack(item)"
                >
                  {{ item.fbId == null ? '写评价' : '查看评价' }}
                </wd-button>
              </view>
            </template>
          </view>
        </view>
      </wd-card>
      <res-card v-for="(item, index) in dataList" :key="item.id" :item="item" @click="handleResClick" />
    </view>
  </z-paging>
</template>
@@ -192,10 +53,11 @@
import { useToast, useMessage } from 'wot-design-uni'
import { getRepairResList, addRepairRes, updateRepairRes } from '@/service/repair'
import { DICT_REPAIR_RES_STATUS, DICT_REPAIR_REQ_TYPE, getDictInfo } from '@/service/dict'
import { isLeader, isOperatorOrRepair } from '@/utils/RoleUtils'
import { isLeader, isLineOrRepair, isRepair } from "@/utils/RoleUtils";
import { useUserStore } from '@/store'
import { formatDate } from '@/utils/DateUtils'
import dayjs from "dayjs";
import ResCard from "@/components/repair/res-card.vue";
const userStore = useUserStore()

const message = useMessage()
@@ -232,15 +94,15 @@
])
const resTypeList = ref<any>([{ dictLabel: '所有类型', dictValue: -1 }])
const statusList = ref<any>([{ dictLabel: '所有状态', dictValue: -1 }])
function handleResType({ value }) {
  reloadData()
}
function handleResStatu({ value }) {
  reloadData()
}
function handleFilterDate({ value }) {
  reloadData()
}
// function handleResType({ value }) {
//   reloadData()
// }
// function handleResStatu({ value }) {
//   reloadData()
// }
// function handleFilterDate({ value }) {
//   reloadData()
// }

const paging = ref(null)
const dataList = ref([])
@@ -249,35 +111,44 @@
  const queryParams: any = {
    pageNum,
    pageSize,
    reqType: resTypeId.value,
    status: status.value,
    params: {},
    // reqType: resTypeId.value,
    // status: status.value,
  }
  if (resTypeId.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
  }
  // if (resTypeId.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
  // }
  // 如果是从扫码页面过来，只能查询固定设备的数据
  if (option?.from === 'scan') {
    queryParams.assetNo = option.assetNo
  }
  queryParams.params.status = '0,1,2,3'
  queryParams.reqUser = userStore?.userInfo?.userId
  if (isRepair()) {
    queryParams.params.status = null
    queryParams.resUser = userStore?.userInfo?.userId
    delete queryParams.reqUser
    delete queryParams.params
  }
  getRepairResList(queryParams)
    .then((res: any) => {
@@ -291,128 +162,128 @@
  paging.value.reload()
}

/**
 * 条目点击事件
 * @param item
 */
function itemClick(item: any) {
  goToDetail(item)
}

/**
 * 开始维修
 * @param item
 */
function handleStartRepair(item: any) {
  // 确认开始修改状态为2-维修中
  const data = Object.assign({}, item)
  // 确认开始修改状态为2-维修中
  data.status = '2'
  // 设置开始维修时间
  data.startTime = formatDate(new Date())
  message
    .confirm({
      msg: '确定开始维修？',
      title: '提示',
      beforeConfirm: ({ resolve }) => {
        updateRepair(data, resolve)
      },
    })
    .then(() => {})
    .catch((error) => {
      console.log(error)
    })
}

/**
 * 更新维修工单
 * @param data
 * @param resolve
 */
function updateRepair(data: any, resolve: any) {
  updateRepairRes(data)
    .then((res: any) => {
      resolve(true)
      if (res?.code === 200) {
        reloadData()
        // 维修中状态才需要跳转
        if (data?.status === '2') {
          goToDetail(data)
        }
      }
    })
    .catch((res) => {
      console.error(res)
    })
}

function goToDetail(item) {
  uni.navigateTo({
    url: `/pages/repair/res-detail?id=${item.id}`,
  })
}

function goToFeedBack(item) {
  uni.navigateTo({
    url: `/pages/repair/repair-fb?id=${item.id}`,
  })
}
// /**
//  * 条目点击事件
//  * @param item
//  */
// function itemClick(item: any) {
//   goToDetail(item)
// }
//
// /**
//  * 开始维修
//  * @param item
//  */
// function handleStartRepair(item: any) {
//   // 确认开始修改状态为2-维修中
//   const data = Object.assign({}, item)
//   // 确认开始修改状态为2-维修中
//   data.status = '2'
//   // 设置开始维修时间
//   data.startTime = formatDate(new Date())
//   message
//     .confirm({
//       msg: '确定开始维修？',
//       title: '提示',
//       beforeConfirm: ({ resolve }) => {
//         updateRepair(data, resolve)
//       },
//     })
//     .then(() => {})
//     .catch((error) => {
//       console.log(error)
//     })
// }
//
// /**
//  * 更新维修工单
//  * @param data
//  * @param resolve
//  */
// function updateRepair(data: any, resolve: any) {
//   updateRepairRes(data)
//     .then((res: any) => {
//       resolve(true)
//       if (res?.code === 200) {
//         reloadData()
//         // 维修中状态才需要跳转
//         if (data?.status === '2') {
//           goToDetail(data)
//         }
//       }
//     })
//     .catch((res) => {
//       console.error(res)
//     })
// }
//
// function goToDetail(item) {
//   uni.navigateTo({
//     url: `/pages/repair/res-detail?id=${item.id}`,
//   })
// }
//
// function goToFeedBack(item) {
//   uni.navigateTo({
//     url: `/pages/repair/repair-fb?id=${item.id}`,
//   })
// }
const goBack = () => {
  uni.navigateBack()
}
function handleClickRight() {
  if (isLeader()) {
    toast.info('请登录维修工账号接单')
  } else if (isOperatorOrRepair()) {
    handleSelectReq()
  }
}
// function handleClickRight() {
//   if (isLineOrRepair()) {
//     handleSelectReq()
//   } else {
//     toast.info('请登录报修工账号接单')
//   }
// }


/**
 * 选择报修单
 */
function handleSelectReq() {
  uni.navigateTo({
    url: '/pages/repair/req-list',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      selectReq: function (data) {
        console.error(data)
        // 选择报修单后，修改报修单状态和新增维修工单
        const resCode = `WXD${data.data.code.slice(3)}`
        const deptId = userStore?.userInfo?.deptId
        const userId = userStore?.userInfo?.userId
        const resData = {
          reqId: data.data.id,
          reqCode: data.data.code,
          reqUser: data.data.reqUser,
          reqDept: data.data.reqDept,
          resCode,
          status: '1',
          resUser: userId,
          resDept: deptId,
        }
        addRepairRes(resData)
          .then((res: any) => {
            if (res.code === 200) {
              toast.success(res?.msg || '操作成功')
              reloadData()
            } else {
              toast.error(res?.msg || '生成维修工单失败，请重试')
            }
          })
          .catch((res) => {
            toast.error(res?.msg || '生成维修工单失败，请重试')
          })
      },
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('OnSelectReq', { data: '维修单页面选择报修单' })
    },
  })
}
//
// /**
//  * 选择报修单
//  */
// function handleSelectReq() {
//   uni.navigateTo({
//     url: '/pages/repair/req-list',
//     events: {
//       // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
//       selectReq: function (data) {
//         console.error(data)
//         // 选择报修单后，修改报修单状态和新增维修工单
//         const resCode = `WXD${data.data.code.slice(3)}`
//         const deptId = userStore?.userInfo?.deptId
//         const userId = userStore?.userInfo?.userId
//         const resData = {
//           reqId: data.data.id,
//           reqCode: data.data.code,
//           reqUser: data.data.reqUser,
//           reqDept: data.data.reqDept,
//           resCode,
//           status: '1',
//           resUser: userId,
//           resDept: deptId,
//         }
//         addRepairRes(resData)
//           .then((res: any) => {
//             if (res.code === 200) {
//               toast.success(res?.msg || '操作成功')
//               reloadData()
//             } else {
//               toast.error(res?.msg || '生成维修工单失败，请重试')
//             }
//           })
//           .catch((res) => {
//             toast.error(res?.msg || '生成维修工单失败，请重试')
//           })
//       },
//     },
//     success: function (res) {
//       // 通过eventChannel向被打开页面传送数据
//       res.eventChannel.emit('OnSelectReq', { data: '维修单页面选择报修单' })
//     },
//   })
// }

async function initData() {
  const rList: any = await getDictInfo(DICT_REPAIR_REQ_TYPE)
@@ -423,10 +294,10 @@
onLoad((options) => {
  Object.assign(option, options)
  initData()
  uni.$on('res-list-refresh', reloadData)
  uni.$on('list-refresh', reloadData)
})
onUnload(() => {
  uni.$off('res-list-refresh', reloadData)
  uni.$off('list-refresh', reloadData)
})
</script>