index.uvue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003
  1. <template>
  2. <uni-navbar-lite :showLeft=false title="工单"></uni-navbar-lite>
  3. <view class="list-page">
  4. <!-- 搜索栏 -->
  5. <view class="search-bar">
  6. <view class="search-box">
  7. <image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
  8. <input class="search-input" type="text" placeholder="搜索工单编码、风机编号" v-model="keyword" @confirm="handleSearch" @blur="handleSearch" />
  9. <text v-if="keyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
  10. </view>
  11. </view>
  12. <view class="status-bar">
  13. <scroll-view class="scroll-view_H" direction="horizontal" show-scrollbar="false">
  14. <view class="scroll-view-item_H uni-bg-red">
  15. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'all'}" @click="switchStatus('all')">全部</text>
  16. </view>
  17. <!-- <view class="scroll-view-item_H uni-bg-green" v-if="checkPermi(['gxt:maintenance:order:edit','gxt:repairOrder:edit']) && !dealLoad">
  18. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'to_issue,accept_return'}" @click="switchStatus('to_issue,accept_return')">待下发</text>
  19. </view> -->
  20. <view class="scroll-view-item_H uni-bg-green" v-if="checkPermi(['gxt:maintenance:order:accept','gxt:repairOrder:accept']) && !dealLoad">
  21. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'assigned'}" @click="switchStatus('assigned')">待接单</text>
  22. </view>
  23. <view class="scroll-view-item_H" v-if="checkPermi(['gxt:maintenance:order:suspend','gxt:repairOrder:suspend']) && !dealLoad">
  24. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'to_finish'}" @click="switchStatus('to_finish')">待结单</text>
  25. </view>
  26. <view class="scroll-view-item_H" v-if="checkPermi(['gxt:maintenance:order:approve','gxt:repairOrder:approve']) && !dealLoad">
  27. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'to_approve'}" @click="switchStatus('to_approve')">待审批</text>
  28. </view>
  29. <view class="scroll-view-item_H" v-if="checkPermi(['gxt:maintenance:order:resume','gxt:repairOrder:resume']) && !dealLoad">
  30. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'suspended'}" @click="switchStatus('suspended')">已挂起</text>
  31. </view>
  32. <view class="scroll-view-item_H" v-if="checkPermi(['gxt:maintenance:order:restart','gxt:repairOrder:restart']) && !dealLoad">
  33. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'completed'}" @click="switchStatus('completed')">已完成</text>
  34. </view>
  35. <view class="scroll-view-item_H" v-if="dealLoad">
  36. <text class="status-txt" :class="{'stauts-sel': currentStatus === 'pending'}" @click="switchStatus('pending')">待处理</text>
  37. </view>
  38. </scroll-view>
  39. </view>
  40. <!-- 列表内容 -->
  41. <common-list
  42. :dataList="dataList"
  43. :loading="loading"
  44. :refreshing="refreshing"
  45. :hasMore="hasMore"
  46. @refresh="handleRefresh"
  47. @loadMore="loadMore"
  48. @itemClick="handleView"
  49. >
  50. <template #default="{ item, index }">
  51. <view class="list-item">
  52. <view class="item-container">
  53. <view class="item-header">
  54. <text class="item-title">{{ getWorkOrderProjectNo(item) }}-{{ getPcsDeviceName(item) }}{{ getOrderType(item) }}</text>
  55. <text class="status-tag" :class="getStatusClass(item)" >{{ getWorkOrderStatus(item) }}</text>
  56. <!-- <view class="status-view" :class="getStatusClass(item)"><text class="status-tag" :class="getStatusClass(item)" >{{ getWorkOrderStatus(item) }}</text></view> -->
  57. </view>
  58. <view class="info-row">
  59. <view class="info-label">
  60. <text class="text-gray">{{ getDisplayTime(item) }}</text>
  61. </view>
  62. </view>
  63. <view class="btn-group">
  64. <view
  65. v-if="getOrderStatus(item) == 'assigned' && canHandleOrder(item,'accept')"
  66. class="btn-primary info-value"
  67. @click.stop="handleItemClick(item,'')"
  68. >
  69. <text class="btn-text">接单</text>
  70. </view>
  71. <view
  72. v-if="getOrderStatus(item) == 'to_approve' && canHandleOrder(item,'')"
  73. class="btn-primary info-value"
  74. @click.stop="handleItemClick(item,'')"
  75. >
  76. <text class="btn-text">审批</text>
  77. </view>
  78. <view
  79. v-if="getOrderStatus(item) == 'suspended' && canHandleOrder(item,'')"
  80. class="btn-primary info-value"
  81. @click.stop="handleItemClick(item,'')"
  82. >
  83. <text class="btn-text">恢复</text>
  84. </view>
  85. <view
  86. v-if="getOrderStatus(item) == 'return' && canHandleOrder(item,'acceptReturn')"
  87. class="btn-primary info-value"
  88. @click.stop="handleItemClick(item,'acceptReturn')"
  89. >
  90. <text class="btn-text">退回</text>
  91. </view>
  92. <view
  93. v-if="getOrderStatus(item) == 'assigned' && canHandleOrder(item,'acceptReturn')"
  94. class="btn-primary info-value"
  95. @click.stop="handleItemClick(item,'acceptReturn')"
  96. >
  97. <text class="btn-text">退回</text>
  98. </view>
  99. <view
  100. v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'return')"
  101. class="btn-primary info-value"
  102. @click.stop="handleItemClick(item, 'return')"
  103. >
  104. <text class="btn-text">退回</text>
  105. </view>
  106. <view
  107. v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'suspend')"
  108. class="btn-primary info-value"
  109. @click.stop="handleItemClick(item, 'suspend')"
  110. >
  111. <text class="btn-text">挂起</text>
  112. </view>
  113. <view
  114. v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'finalize')"
  115. class="btn-primary info-value"
  116. @click.stop="handleItemClick(item, 'finalize')"
  117. >
  118. <text class="btn-text">复启</text>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </template>
  124. </common-list>
  125. <custom-tabbar :current="1" :hide0="tabbar[0]" :hide1="tabbar[1]" :hide2="tabbar[2]" :hide3="tabbar[3]"/>
  126. </view>
  127. </template>
  128. <script setup lang="uts">
  129. import { ref, onBeforeUnmount, onMounted } from 'vue'
  130. import type { acceptOrderInfo } from '../../types/order'
  131. import type { SysDictData, DictDataResponse } from '../../types/dict'
  132. import { getOrderList } from '../../api/order/list'
  133. import { getDictDataByType } from '../../api/dict/index'
  134. import {checkPermi, getUserInfo} from '../../utils/storage'
  135. const userId = ref<string>("")
  136. const roles = ref<string>('')
  137. // 列表数据
  138. const dataList = ref<acceptOrderInfo[]>([])
  139. let keyword = ref<string>("")
  140. const page = ref<number>(1)
  141. const pageSize: number = 10
  142. const hasMore = ref<boolean>(true)
  143. const loading = ref<boolean>(false)
  144. const refreshing = ref<boolean>(false)
  145. const total = ref<number>(0)
  146. let currentStatus = ref<string>('') // 添加状态管理
  147. const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表
  148. const tabbar = [1,1,1,1]
  149. // 添加防重复请求的标志位(参考score/pending.uvue的实现)
  150. const isSearching = ref<boolean>(false)
  151. // 添加防重复刷新的标志
  152. const isRefreshing = ref<boolean>(false)
  153. // 添加刷新时间戳,用于防抖
  154. const lastRefreshTime = ref<number>(0)
  155. // 添加字典加载状态
  156. const dictLoaded = ref<boolean>(false)
  157. // 待处理工单加载
  158. const dealLoad = ref<boolean>(false)
  159. type StatusItem = {
  160. key: string,
  161. permis: string[],
  162. condition: () => boolean
  163. }
  164. const statusConfig: StatusItem[] = [
  165. { key: 'all', permis: ['gxt:order:all'], condition: () => !dealLoad.value },
  166. { key: 'assigned', permis: ['gxt:maintenance:order:accept','gxt:repairOrder:accept'], condition: () => !dealLoad.value },
  167. { key: 'to_finish', permis: ['gxt:maintenance:order:suspend','gxt:repairOrder:suspend'], condition: () => !dealLoad.value },
  168. { key: 'to_approve', permis: ['gxt:maintenance:order:approve','gxt:repairOrder:approve'], condition: () => !dealLoad.value },
  169. { key: 'suspended', permis: ['gxt:maintenance:order:resume','gxt:repairOrder:resume'], condition: () => !dealLoad.value },
  170. { key: 'completed', permis: ['gxt:maintenance:order:restart','gxt:repairOrder:restart'], condition: () => !dealLoad.value }
  171. ]
  172. const getOrderStatus = (item: any | null): string => {
  173. if (item == null) return ''
  174. const orderItem = item as acceptOrderInfo
  175. return orderItem.workOrderStatus ?? ''
  176. }
  177. // 获取工单状态字典列表
  178. const loadStatusDictList = async (): Promise<void> => {
  179. try {
  180. const result = await getDictDataByType('gxt_work_order_status')
  181. const resultObj = result as UTSJSONObject
  182. if (resultObj['code'] == 200) {
  183. const data = resultObj['data'] as any[]
  184. const dictData: SysDictData[] = []
  185. if (data.length > 0) {
  186. for (let i = 0; i < data.length; i++) {
  187. const item = data[i] as UTSJSONObject
  188. // 只提取需要的字段
  189. const dictItem: SysDictData = {
  190. dictValue: item['dictValue'] as string | null,
  191. dictLabel: item['dictLabel'] as string | null,
  192. dictCode: null,
  193. dictSort: null,
  194. dictType: null,
  195. cssClass: null,
  196. listClass: null,
  197. isDefault: null,
  198. status: null,
  199. default: null,
  200. createTime: null,
  201. remark: null
  202. }
  203. dictData.push(dictItem)
  204. }
  205. }
  206. statusDictList.value = dictData
  207. dictLoaded.value = true
  208. }
  209. } catch (e: any) {
  210. console.error('获取工单状态字典失败:', e.message)
  211. dictLoaded.value = true
  212. }
  213. }
  214. const getFirstVisibleStatus = (): string => {
  215. for (const item of statusConfig) {
  216. const hasPerm = item.permis.length === 0 || checkPermi(item.permis)
  217. const meetsCondition = item.condition()
  218. if (hasPerm && meetsCondition) {
  219. // if (hasPerm) {
  220. return item.key as string
  221. }
  222. }
  223. return 'all' // fallback,理论上不会走到这里
  224. }
  225. let loadCount = 0
  226. // 加载列表数据
  227. const loadData = async (isRefresh: boolean | null, disablePullDown: boolean | null): Promise<void> => {
  228. const id = ++loadCount
  229. console.log(`【loadData #${id}】开始, isRefresh=${isRefresh}, disablePullDown=${disablePullDown}`)
  230. // 防止重复请求的核心机制(参考score/pending.uvue的实现)
  231. if (loading.value) {
  232. // 确保刷新状态最终被重置,防止卡死
  233. if (isRefresh != true) {
  234. refreshing.value = false;
  235. }
  236. return
  237. }
  238. const shouldRefresh = isRefresh != null ? isRefresh : false
  239. const shouldDisablePullDown = disablePullDown != null ? disablePullDown : false
  240. loading.value = true
  241. if (shouldRefresh && !shouldDisablePullDown) {
  242. page.value = 1
  243. refreshing.value = true
  244. } else if (shouldRefresh && shouldDisablePullDown) {
  245. // 状态切换时,重置页码但不触发动画
  246. page.value = 1
  247. // 即使禁用下拉刷新,也要确保刷新状态最终被重置
  248. refreshing.value = false
  249. } else {
  250. // 对于加载更多操作,不需要显示下拉刷新状态
  251. refreshing.value = false;
  252. }
  253. try {
  254. // 处理默认值
  255. const searchKeyword = keyword.value.length > 0 ? keyword.value : null
  256. const result = await getOrderList(page.value, pageSize, searchKeyword, currentStatus.value)
  257. // 提取响应数据
  258. const resultObj = result as UTSJSONObject
  259. const code = resultObj['code'] as number
  260. const responseData = resultObj['rows'] as any[]
  261. const responseTotal = resultObj['total'] as number
  262. if (code == 200) {
  263. // 将 any[] 转换为 acceptOrderInfo[]
  264. const newData: acceptOrderInfo[] = []
  265. for (let i = 0; i < responseData.length; i++) {
  266. const item = responseData[i] as UTSJSONObject
  267. const orderItem: acceptOrderInfo = {
  268. orderType: item['orderType'] as Number,
  269. id: item['id'] as Number,
  270. teamLeaderId: item['teamLeaderId'] != null ? (item['teamLeaderId'] as Number) : 0,
  271. acceptUserId: item['acceptUserId'] != null ? (item['acceptUserId'] as Number) : 0,
  272. teamLeaderName: item['teamLeaderName'] as string | null,
  273. acceptUserName: item['acceptUserName'] as string | null,
  274. acceptTime: item['acceptTime'] as string | null,
  275. assignTime: item['assignTime'] as string | null,
  276. assignUserName: item['assignUserName'] as string | null,
  277. status: (item['status']==null)?0:item['status'] as Number,
  278. workOrderProjectNo: item['workOrderProjectNo'] as string | null,
  279. workOrderStatus: item['workOrderStatus'] as string | null,
  280. gxtCenterId: item['gxtCenterId'] as Number | 0,
  281. gxtCenter: item['gxtCenter'] as string | null,
  282. pcsStationId: item['pcsStationId'] as Number | 0,
  283. pcsStationName: item['pcsStationName'] as string | null,
  284. pcsDeviceId: item['pcsDeviceId'] as Number | 0,
  285. pcsDeviceName: item['pcsDeviceName'] as string | null,
  286. brand: item['brand'] as string | null,
  287. model: item['model'] as string | null,
  288. createTime: item['createTime'] as string | null,
  289. suspendReason: item['suspendReason'] as string | null,
  290. rejectionReason: item['rejectionReason'] as string | null,
  291. updateTime: item['updateTime'] as string | null, // 新增字段
  292. workEndTime: item['workEndTime'] as string | null // 新增字段
  293. }
  294. newData.push(orderItem)
  295. }
  296. // 不再在前端过滤,直接使用API返回的数据
  297. if (shouldRefresh) {
  298. dataList.value = newData
  299. } else {
  300. dataList.value = [...dataList.value, ...newData]
  301. }
  302. total.value = responseTotal
  303. hasMore.value = dataList.value.length < responseTotal
  304. // 通知首页更新待接单数量
  305. if (currentStatus.value === 'assigned') {
  306. uni.$emit('refreshAssignedCount')
  307. }
  308. } else {
  309. const msg = resultObj['msg'] as string | null
  310. uni.showToast({
  311. title: msg ?? '加载失败',
  312. icon: 'none'
  313. })
  314. }
  315. } catch (e: any) {
  316. uni.showToast({
  317. title: e.message ?? '加载失败',
  318. icon: 'none'
  319. })
  320. } finally {
  321. loading.value = false
  322. // 确保刷新状态能结束(参考score/pending.uvue的实现)
  323. if (shouldRefresh) {
  324. refreshing.value = false;
  325. // 使用setTimeout确保状态彻底重置
  326. setTimeout(() => {
  327. isRefreshing.value = false;
  328. }, 50);
  329. }
  330. }
  331. }
  332. // 辅助函数:从 any 类型提取属性
  333. const getOrderType = (item: any | null): string => {
  334. if (item == null) return ''
  335. const orderInfoItem = item as acceptOrderInfo
  336. return orderInfoItem.orderType == 1?"维修工单":"维保工单";
  337. }
  338. const getWorkOrderProjectNo = (item: any | null): string | null => {
  339. if (item == null) return ''
  340. const orderInfoItem = item as acceptOrderInfo
  341. return orderInfoItem.workOrderProjectNo
  342. }
  343. const getPcsStationName = (item: any | null): string | null=> {
  344. if (item == null) return ''
  345. const orderInfoItem = item as acceptOrderInfo
  346. return orderInfoItem.pcsStationName
  347. }
  348. const getPcsDeviceName = (item: any | null): string | null=> {
  349. if (item == null) return ''
  350. const orderInfoItem = item as acceptOrderInfo
  351. return orderInfoItem.pcsDeviceName
  352. }
  353. const getAssignTime = (item: any | null): string|null => {
  354. if (item == null) return null
  355. const orderInfoItem = item as acceptOrderInfo
  356. return orderInfoItem.assignTime
  357. }
  358. const getAcceptTime = (item: any | null): string|null => {
  359. if (item == null) return null
  360. const orderInfoItem = item as acceptOrderInfo
  361. return orderInfoItem.acceptTime
  362. }
  363. const getCreateTime = (item: any | null): string|null => {
  364. if (item == null) return null
  365. const orderInfoItem = item as acceptOrderInfo
  366. return orderInfoItem.createTime
  367. }
  368. // 根据状态显示不同的时间
  369. const getDisplayTime = (item: any | null): string|null => {
  370. if (item == null) return null
  371. const orderInfoItem = item as acceptOrderInfo
  372. // 如果是"待接单"状态,显示派单时间
  373. if (orderInfoItem.workOrderStatus == 'assigned') {
  374. return '下发时间:' + orderInfoItem.assignTime
  375. } else if(orderInfoItem.workOrderStatus == 'to_finish') {
  376. if(orderInfoItem.workEndTime != null) {
  377. return '结束时间:' + orderInfoItem.workEndTime
  378. }
  379. return '接单时间:' + orderInfoItem.acceptTime
  380. } else if(orderInfoItem.workOrderStatus == 'to_approve') {
  381. return '申请挂起时间:' + orderInfoItem.updateTime
  382. } else if(orderInfoItem.workOrderStatus == 'suspended') {
  383. return '审批通过时间:' + orderInfoItem.updateTime
  384. } else if(orderInfoItem.workOrderStatus == 'return' || orderInfoItem.workOrderStatus == 'accept_return') {
  385. return '退回时间:' + orderInfoItem.updateTime
  386. } else if(orderInfoItem.workOrderStatus == 'completed') {
  387. return '结单时间:' + orderInfoItem.updateTime
  388. } else if(orderInfoItem.workOrderStatus == 'archived') {
  389. return '归档时间:' + orderInfoItem.updateTime
  390. }
  391. // 默认显示创建时间
  392. return '创建时间:' + orderInfoItem.createTime
  393. }
  394. const getWorkOrderStatus = (item: any | null): string | null => {
  395. if (item == null) return ''
  396. const orderInfoItem = item as acceptOrderInfo
  397. const rawStatus = orderInfoItem.workOrderStatus
  398. if (rawStatus==null) return ''
  399. // 如果字典尚未加载,返回原始值
  400. if (!dictLoaded.value) {
  401. return rawStatus
  402. }
  403. // 查找字典中对应的标签
  404. const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
  405. return dictItem!=null ? dictItem.dictLabel : rawStatus
  406. }
  407. const getStatusClass = (item: any | null): string => {
  408. if (item == null) return ''
  409. const orderInfoItem = item as acceptOrderInfo
  410. const rawStatus = orderInfoItem.workOrderStatus
  411. if (rawStatus==null) return ''
  412. // const status = rawStatus
  413. // 返回对应的状态类名
  414. return `status-${rawStatus}`
  415. }
  416. // 切换状态
  417. const switchStatus = (status: string): void => {
  418. // 添加防重复调用检查(参考score/pending.uvue的实现)
  419. if (loading.value) {
  420. return;
  421. }
  422. // 添加防重复请求检查
  423. if (isSearching.value) {
  424. return
  425. }
  426. isSearching.value = true
  427. currentStatus.value = status
  428. page.value = 1
  429. loadData(true, true) // 第二个参数为true表示禁用下拉刷新动画
  430. // 延迟重置标志位,确保请求发送后才允许下一次搜索
  431. setTimeout(() => {
  432. isSearching.value = false
  433. }, 100)
  434. }
  435. // 下拉刷新
  436. const handleRefresh = async (): Promise<void> => {
  437. console.log("handleRefresh被触发")
  438. console.log("loading.value===",loading.value)
  439. console.log("isRefreshing.value===",isRefreshing.value)
  440. // 防抖处理,避免频繁触发(参考score/pending.uvue的实现)
  441. const now = Date.now();
  442. if (now - lastRefreshTime.value < 1000) {
  443. refreshing.value = false;
  444. return;
  445. }
  446. lastRefreshTime.value = now;
  447. // 添加防重复调用检查
  448. if (loading.value || isRefreshing.value) {
  449. // 如果已经在加载或正在刷新,直接重置刷新状态
  450. refreshing.value = false;
  451. return;
  452. }
  453. console.log("loading.value1===",loading.value)
  454. console.log("isRefreshing.value1===",isRefreshing.value)
  455. // 设置刷新标志
  456. isRefreshing.value = true;
  457. try {
  458. await loadData(true, false); // 使用默认的下拉刷新行为
  459. } catch (error) {
  460. console.error('刷新失败:', error);
  461. refreshing.value = false;
  462. isRefreshing.value = false;
  463. }
  464. // 确保在一定时间后重置刷新标志,防止意外情况
  465. setTimeout(() => {
  466. isRefreshing.value = false
  467. }, 100) // 延迟重置,确保状态完全更新
  468. }
  469. // 加载更多
  470. const loadMore = (): void => {
  471. if (!hasMore.value || loading.value) {
  472. return
  473. }
  474. page.value++
  475. loadData(false, false)
  476. }
  477. // 搜索
  478. const handleSearch = (): void => {
  479. // 添加防重复调用检查(参考score/pending.uvue的实现)
  480. if (loading.value) {
  481. return;
  482. }
  483. // 添加防重复请求检查
  484. if (isSearching.value) {
  485. return
  486. }
  487. isSearching.value = true
  488. page.value = 1
  489. loadData(true, true) // 状态切换时禁用下拉刷新动画
  490. // 延迟重置标志位,确保请求发送后才允许下一次搜索
  491. setTimeout(() => {
  492. isSearching.value = false
  493. }, 100)
  494. }
  495. const handleSearchOnBlur = (): void => {
  496. handleSearch()
  497. }
  498. // 方法:判断当前工单是否显示操作按钮
  499. const canHandleOrder = (item: any | null, buttonType: string | ''): boolean => {
  500. if (item == null) return false
  501. let permit: string[] = []
  502. const orderItem = item as acceptOrderInfo
  503. if(orderItem.workOrderStatus == 'assigned' && buttonType != '' && buttonType == "acceptReturn" && orderItem.orderType == 1) {
  504. // 接单退回
  505. permit = ['gxt:repairOrder:acceptReturn']
  506. } else if(orderItem.workOrderStatus == 'assigned' && buttonType != '' && buttonType == "accept") {
  507. // 接单
  508. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:accept'] : ['gxt:repairOrder:accept']
  509. } else if(orderItem.workOrderStatus == 'to_finish') {
  510. if(buttonType != '' && buttonType == "suspend" && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
  511. // 挂起
  512. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:suspend'] : ['gxt:repairOrder:suspend']
  513. } else if(buttonType != '' && buttonType == "return" && orderItem.orderType == 1 && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
  514. // 退回
  515. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:return'] : ['gxt:repairOrder:return']
  516. } else if(buttonType != '' && buttonType == "finalize" && orderItem.orderType == 1 && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
  517. // 复启
  518. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:finalize'] : ['gxt:repairOrder:finalize']
  519. }
  520. } else if(orderItem.workOrderStatus == 'to_approve') {
  521. // 审批
  522. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:approve'] : ['gxt:repairOrder:approve']
  523. } else if(orderItem.workOrderStatus == 'suspended' && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
  524. // 恢复
  525. permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:resume'] : ['gxt:repairOrder:resume']
  526. } else if(orderItem.workOrderStatus == 'return') {
  527. // 接单退回
  528. permit = ['gxt:repairOrder:acceptReturn']
  529. }
  530. else {
  531. return false
  532. }
  533. // const orderType = (item as acceptOrderInfo).orderType
  534. return checkPermi(permit)
  535. }
  536. // 点击列表项
  537. const handleItemClick = (item: any | null, buttonType: string | ''): void => {
  538. if (item == null) return
  539. const orderItem = item as acceptOrderInfo
  540. // if(currentStatus.value === '' || currentStatus.value === 'completed' || currentStatus.value === 'all') {
  541. // // 传递orderType参数以便详情页决定调用哪个API
  542. // uni.navigateTo({
  543. // url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
  544. // })
  545. // } else
  546. if(orderItem.workOrderStatus == 'assigned') {
  547. if(buttonType != '' && buttonType == "acceptReturn") {
  548. // 跳转到退回页面
  549. uni.navigateTo({
  550. url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  551. })
  552. } else {
  553. // 跳转到接单页面
  554. uni.navigateTo({
  555. url: `/pages/order/detail/acceptIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  556. })
  557. }
  558. } else if(orderItem.workOrderStatus == 'to_finish') {
  559. if(buttonType != '' && buttonType == "suspend") {
  560. // 跳转到待结单页面
  561. uni.navigateTo({
  562. url: `/pages/order/detail/suspendIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  563. })
  564. } else if(buttonType != '' && buttonType == "return") {
  565. // 跳转到退回页面
  566. uni.navigateTo({
  567. url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  568. })
  569. } else if(buttonType != '' && buttonType == "finalize") {
  570. // 跳转到复启页面
  571. uni.navigateTo({
  572. url: `/pages/order/detail/resetIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  573. })
  574. }
  575. } else if(orderItem.workOrderStatus == 'to_approve') {
  576. // 跳转到待审批页面
  577. uni.navigateTo({
  578. url: `/pages/order/detail/approveIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  579. })
  580. } else if(orderItem.workOrderStatus == 'suspended') {
  581. // 跳转到恢复页面
  582. uni.navigateTo({
  583. url: `/pages/order/detail/resumeIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  584. })
  585. } else if(orderItem.workOrderStatus == 'return') {
  586. // 跳转到退回页面
  587. uni.navigateTo({
  588. url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
  589. })
  590. } else {
  591. uni.navigateTo({
  592. url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
  593. })
  594. }
  595. }
  596. // 点击列表项
  597. const handleView = (item: any | null): void => {
  598. if (item == null) return
  599. const orderItem = item as acceptOrderInfo
  600. uni.navigateTo({
  601. url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
  602. })
  603. }
  604. // 查看工单详情
  605. const showWorkOrderDetail = (item: any | null): void => {
  606. if (item == null) return
  607. const orderItem = item as acceptOrderInfo
  608. uni.navigateTo({
  609. url: `/pages/workbench/detail/index?id=${orderItem.id}`
  610. })
  611. }
  612. // 清空搜索
  613. const clearSearch = (): void => {
  614. // 添加防重复调用检查(参考score/pending.uvue的实现)
  615. if (loading.value) {
  616. return;
  617. }
  618. // 添加防重复请求检查
  619. if (isSearching.value) {
  620. return
  621. }
  622. isSearching.value = true
  623. keyword.value = ""
  624. page.value = 1
  625. loadData(true, true) // 状态切换时禁用下拉刷新动画
  626. // 延迟重置标志位,确保请求发送后才允许下一次搜索
  627. setTimeout(() => {
  628. isSearching.value = false
  629. }, 100)
  630. }
  631. // 初始化
  632. // onMounted(() => {
  633. onLoad((options: any) => {
  634. const userInfo = getUserInfo()
  635. if (userInfo != null) {
  636. const userIdStr = userInfo['userId'].toString()
  637. userId.value = userIdStr
  638. roles.value = userInfo['roleNames'].toString()
  639. }
  640. const params = options as UTSJSONObject
  641. const isDeal = params['isDeal'] as string | null
  642. if(isDeal != null) {
  643. dealLoad.value = true;
  644. }
  645. loadStatusDictList()
  646. // 自动选中第一个可显示的状态
  647. // currentStatus.value = getFirstVisibleStatus()
  648. currentStatus.value = 'all'
  649. loadData(true, true) // 首次加载时禁用下拉刷新动画
  650. // 监听首页切换状态事件
  651. uni.$on('switchOrderStatus', (status: string) => {
  652. switchStatus(status)
  653. })
  654. // 监听接单成功的事件,刷新列表
  655. uni.$on('refreshOrderList', () => {
  656. page.value = 1
  657. loadData(true, false)
  658. })
  659. })
  660. // 组件卸载前清理事件监听
  661. onBeforeUnmount(() => {
  662. refreshing.value = false
  663. loading.value = false
  664. isRefreshing.value = false
  665. // 移除事件监听
  666. uni.$off('refreshOrderList',{})
  667. uni.$off('switchOrderStatus',{})
  668. })</script>
  669. <style lang="scss">
  670. .list-page {
  671. flex: 1;
  672. background-color: #e8f0f9;
  673. }
  674. .search-bar {
  675. padding: 20rpx 30rpx;
  676. background-color: #d7eafe;
  677. }
  678. .search-box {
  679. flex-direction: row;
  680. align-items: center;
  681. height: 72rpx;
  682. padding: 0 24rpx;
  683. background-color: #f5f5f5;
  684. border-radius: 36rpx;
  685. .search-icon {
  686. width: 32rpx;
  687. height: 32rpx;
  688. margin-right: 12rpx;
  689. }
  690. .search-input {
  691. flex: 1;
  692. font-size: 28rpx;
  693. color: #333333;
  694. }
  695. .clear-icon {
  696. margin-left: 12rpx;
  697. font-size: 28rpx;
  698. color: #999999;
  699. }
  700. }
  701. .status-bar{
  702. padding-bottom: 10px;
  703. padding-left:30rpx;
  704. background-color: #d7eafe;
  705. }
  706. .status-box {
  707. flex-direction: row;
  708. align-items: center;
  709. height: 72rpx;
  710. flex: 1;
  711. .status-txt{
  712. padding: 8px 12px;
  713. text-align: center;
  714. margin-right: 12rpx;
  715. border-radius: 36rpx;
  716. background-color: #fff;
  717. font-size: 28rpx;
  718. // cursor: pointer;
  719. }
  720. .stauts-sel{
  721. background-color: #007AFF;
  722. color: #fff;
  723. }
  724. }
  725. .list-item {
  726. margin: 24rpx 30rpx;
  727. background-color: #ffffff;
  728. border-radius: 16rpx;
  729. }
  730. .item-container {
  731. padding: 30rpx;
  732. }
  733. .item-address {
  734. font-size: 26rpx;
  735. color: #999999;
  736. margin-bottom: 20rpx;
  737. line-height: 40rpx;
  738. }
  739. .btn-primary {
  740. z-index: 999;
  741. border-radius: 10rpx;
  742. font-size: 24rpx;
  743. // white-space: nowrap;
  744. margin-left: 20rpx;
  745. background-color: #165DFF;
  746. line-height: 45rpx;
  747. color: #ffffff;
  748. .btn-text{
  749. color: #ffffff;
  750. font-size: 24rpx;
  751. padding: 5px 15px;
  752. }
  753. }
  754. .item-header {
  755. flex-direction: row;
  756. align-items: flex-start;
  757. margin-bottom: 16rpx;
  758. justify-content: space-between; /* 主轴两端对齐 */
  759. min-height: 55rpx;
  760. .item-title {
  761. font-size: 30rpx;
  762. color: #333333;
  763. font-weight: bold;
  764. flex-wrap: wrap;
  765. flex: 0 1 75%;
  766. min-width: 0;
  767. }
  768. .info-value {
  769. font-size: 28rpx;
  770. color: #999999;
  771. margin-left: auto;
  772. flex: 0 0 auto;
  773. white-space: nowrap;
  774. }
  775. }
  776. .info-row {
  777. flex-direction: row;
  778. justify-content: space-between;
  779. align-items: center;
  780. .info-label {
  781. font-size: 26rpx;
  782. color: #666;
  783. }
  784. .info-value {
  785. font-size: 26rpx;
  786. // color: #666;
  787. }
  788. }
  789. .text-gray{
  790. font-size: 26rpx;
  791. color: #666;
  792. }
  793. .status-view {
  794. border: 1rpx solid;
  795. border-radius: 20rpx;
  796. }
  797. .status-tag {
  798. padding: 8rpx 20rpx;
  799. border-radius: 20rpx;
  800. font-size: 24rpx;
  801. white-space: nowrap;
  802. // margin-left: 50rpx;
  803. // justify-content: flex-end;
  804. border: 1rpx solid;
  805. }
  806. /* 待接单 */
  807. .status-assigned {
  808. background-color: #ebf5ff;
  809. color: #409eff;
  810. border-color: #d8ebff;
  811. }
  812. /* 待结单 */
  813. .status-to_finish {
  814. background-color: #fff7e6;
  815. color: #fa8c16;
  816. border-color: #ffd591;
  817. }
  818. /* 待审批 */
  819. .status-to_approve {
  820. background-color: #fff7e6;
  821. color: #fa8c16;
  822. border-color: #ffd591;
  823. }
  824. /* 已挂起 */
  825. .status-suspended {
  826. background-color: #fff2f0;
  827. color: #ff4d4f;
  828. border-color: #ffccc7;
  829. }
  830. /* 已完成 */
  831. .status-completed {
  832. background-color: #f0f9eb;
  833. color: #5cb87a;
  834. border-color: #c2e7b0;
  835. }
  836. /* 待下发 */
  837. .status-to_issue {
  838. background-color: #f4f4f5;
  839. color: #909399;
  840. border-color: #e9e9eb;
  841. }
  842. /* 已归档 */
  843. .status-archived {
  844. background-color: #f0f9eb;
  845. color: #5cb87a;
  846. border-color: #c2e7b0;
  847. }
  848. /* 退回 */
  849. .status-return {
  850. background-color: #fff2f0;
  851. color: #ff4d4f;
  852. border-color: #ffccc7;
  853. }
  854. /* 退回 */
  855. .status-accept_return {
  856. background-color: #fff2f0;
  857. color: #ff4d4f;
  858. border-color: #ffccc7;
  859. }
  860. /* 作废 */
  861. .status-invalid {
  862. background-color: #fff2f0;
  863. color: #ff4d4f;
  864. border-color: #ffccc7;
  865. }
  866. .scroll-view_H {
  867. width: 100%;
  868. flex-direction: row;
  869. }
  870. .scroll-view-item_H {
  871. justify-content: center;
  872. align-items: center;
  873. .status-txt{
  874. padding: 8px 12px;
  875. text-align: center;
  876. margin-right: 12rpx;
  877. border-radius: 36rpx;
  878. background-color: #fff;
  879. font-size: 28rpx;
  880. }
  881. .stauts-sel{
  882. background-color: #007AFF;
  883. color: #fff;
  884. }
  885. }
  886. .btn-group {
  887. flex-direction: row;
  888. align-items: center;
  889. justify-content: flex-end;
  890. margin-top: 20rpx;
  891. }
  892. </style>