index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819
  1. <template>
  2. <view v-if="isMaskShow" class="mask">
  3. </view>
  4. <view class="uni-column" style=" background-color: #f5f5f5;padding: 24rpx;">
  5. <view
  6. style="height: 20%;position: fixed;top:38px;left: 12px;right: 12px;z-index: 10;background-color: #f5f5f5;">
  7. <view class="box-bg uni-row">
  8. <view class="input-view uni-row">
  9. <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
  10. <input class="nav-bar-input" type="text" v-model="keywords" placeholder="请输入批次号/箱号" />
  11. </view>
  12. <view class="search" @click="handleSearch">
  13. 搜索
  14. </view>
  15. </view>
  16. <view class="scan uni-row" style="padding: 24rpx 24rpx 0 24rpx;">
  17. <view class="scan-btn " @click.stop="handleScan">扫码
  18. </view>
  19. </view>
  20. <view class="list-title uni-row">
  21. <text class="label">是否正常批次</text>
  22. <text>{{ normalStatus ? '是' : '否' }}</text>
  23. <switch class="switch" :checked="normalStatus" @change="switchChange" color="rgba(103, 195, 55, 1.0)" />
  24. </view>
  25. </view>
  26. <view v-if="listData.length == 0" style="color: #999;margin: 100% auto;
  27. height: 100%;
  28. position: relative;
  29. bottom: 0;
  30. left: 0;
  31. right: 0;">
  32. <text>暂无批次</text>
  33. </view>
  34. <view v-else class="uni-column" style="margin-top: 138px;overflow: auto;height: 100%;">
  35. <!-- 批次列表 -->
  36. <view v-for="(item, index) in listData" :key="index" class="list-item"
  37. @click="handleToreportingForWork(item)">
  38. <view class="title-container uni-row" style="justify-content: flex-start;">
  39. <view class="title uni-row">
  40. <text class="label">批次号:</text>
  41. <text class="label code">{{ item['lotCode'] }}</text>
  42. </view>
  43. <view class=" uni-row" style="margin-left: 16rpx;">
  44. <view v-if="item['status'] == 1" class="tag"><text class="label">进行中</text></view>
  45. <view v-else-if="item['status'] == 3" class="tag turnover "><text class="label">待领取</text>
  46. </view>
  47. <view v-else-if="item['status'] == 2" class="tag turnover "><text class="label">待周转</text>
  48. </view>
  49. <view v-else-if="item['status'] == 0" class="tag finished "><text class="label">未开始</text>
  50. </view>
  51. <view v-else-if="item['status'] == 4" type="default finished" class="tag finished"><text
  52. class="label">已完成</text></view>
  53. </view>
  54. </view>
  55. <view class="item-info uni-row">
  56. <text class="label">产品描述</text>
  57. <text class="label right">{{ item['productDescription'] }}</text>
  58. </view>
  59. <view class="item-info uni-row">
  60. <text class="label">材质</text>
  61. <text
  62. class="label right">{{ item['furnaceNoInfo'] && item['furnaceNoInfo'].firstTechnicalRequirement != '' ? item['furnaceNoInfo'].firstTechnicalRequirement + ";" + item['furnaceNoInfo'].secondTechnicalRequirement : '-' }}</text>
  63. </view>
  64. <view class="item-info uni-row">
  65. <text class="label">箱号</text>
  66. <text class="label right">{{ item['carrierName'] ? item['carrierName'] : '-' }}</text>
  67. </view>
  68. <!-- <view class="item-info uni-row">
  69. <text class="label">总工时</text>
  70. <text class="label right">{{ item['totalWorkingHours']}}</text>
  71. </view> -->
  72. <view class="item-info uni-row">
  73. <text class="label">投入数</text>
  74. <text
  75. class="label right">{{ item.prevProcess == null ? item['productionQuantity'] : item['processQualifiedNum']}}</text>
  76. </view>
  77. <view class="item-info uni-row">
  78. <text class="label">上道工序</text>
  79. <text class="label right">{{ item.prevProcess ? item['prevProcess'].processAlias : '-'}}</text>
  80. </view>
  81. <view class="item-info uni-row">
  82. <text class="label">当前工序</text>
  83. <!-- <text
  84. class="label right">{{ item.currentProcess ? item.prevProcess && item['currentProcess'].processAlias == item['prevProcess'].processAlias ? '-' : item['currentProcess'].processAlias : '-'}}</text> -->
  85. <text
  86. class="label right">{{ item.currentProcess ? item['currentProcess'].processAlias : '-'}}</text>
  87. </view>
  88. <view class="item-info uni-row">
  89. <text class="label">下道工序</text>
  90. <view class="label right uni-row">
  91. {{ item.nextProcess ? item['nextProcess'].processAlias : '-' }}
  92. (<view style="color: #1684fc;" @click.stop="handleClickProcessList(item)">&nbsp;工艺列表&nbsp;
  93. </view>)
  94. </view>
  95. </view>
  96. <view class="item-info uni-row">
  97. <text class="label">操作者</text>
  98. <text class="label right">{{ item['allNickName'] }}</text>
  99. </view>
  100. <view v-if="notPreProcess" class="item-info uni-row">
  101. <text class="label">所在区域</text>
  102. <text class="label right">{{ item['place'] ? item['place'] : '-' }}</text>
  103. </view>
  104. <view
  105. v-if="item['dayworkItemList'] && item['dayworkItemList'].length >0 && item['dayworkItemList'][0].status >3"
  106. class="item-info uni-row">
  107. <text class="label">目标工段</text>
  108. <text
  109. class="label right">{{ item['dayworkItemList'] && item['dayworkItemList'].length >0 && item['dayworkItemList'][0].status >3 ? item['dayworkItemList'][0].deptName : '-' }}</text>
  110. </view>
  111. <view
  112. v-if="item['dayworkItemList'] && item['dayworkItemList'].length >0 && item['dayworkItemList'][0].status >3"
  113. class="item-info uni-row">
  114. <text class="label">目标车间</text>
  115. <text class="label right">{{ item['workshopName']}}</text>
  116. </view>
  117. <!-- <view v-if="item.protemResourceGroupDetailList && item.protemResourceGroupDetailList.length>0"
  118. class="item-info uni-row">
  119. <text class="label">邀请者</text>
  120. <text
  121. class="label right">{{ item['protemResourceGroupDetailList'] && item['protemResourceGroupDetailList'].length>0 ? item['protemResourceGroupDetailList'][0].protemCreatorName : '-' }}</text>
  122. </view>
  123. <view v-if="item.protemResourceGroupDetailList&& item.protemResourceGroupDetailList.length>0"
  124. class="item-info uni-row">
  125. <text class="label">已完成数量</text>
  126. <text class="label right">{{ item['totalQuantity'] ? item['totalQuantity'] : 0 }}</text>
  127. </view> -->
  128. <view class="status-btn uni-row">
  129. <view v-if="item['status'] == 2" class=" uni-row">
  130. <button class="turnover-tag" size="mini"
  131. @click.stop="handleShowTurnoverApplication(item)">周转申请</button>
  132. <!-- <button class="reporting-tag" size="mini" @click="handleToreportingForWork">去报工</button> -->
  133. </view>
  134. <view v-else-if="item['status'] == 3" class=" uni-row">
  135. <button class="turnover-tag" size="mini" @click.stop="handleCancelTurnover(item)"
  136. style="background-color: rgba(255, 85, 85, 1);">取消周转</button>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. <!-- 抽屉 -->
  142. <uni-drawer ref="showRight" mode="right" :mask-click="true">
  143. <view style="text-align: center; font-size: 48rpx; padding: 48rpx 0 24rpx 0;">工艺列表</view>
  144. <view style="font-size: 24rpx;text-align: center;color: red; margin-bottom: 16rpx;">
  145. 仅显示当前工序后面工艺
  146. </view>
  147. <scroll-view scroll-y="true" style="height: 82%;" @touchmove.stop>
  148. <view v-for="(item,index) in curProcessAfte" :key="index"
  149. style="padding: 8rpx 5% 8rpx 14%; border-top: 1px solid #cccccc">
  150. <text>{{ index + 1 }}.{{item.processAlias}}</text>
  151. </view>
  152. </scroll-view>
  153. <view><button v-if="!editStatus" class="view-end-btn" type="primary"
  154. @click="handleOpenDrawing">查看本工序图纸</button></view>
  155. </uni-drawer>
  156. <dialog-turnoverApplicationAssist ref="turnoverApplicationDialog" @reflushDaywork="handleDoTurnoverAfter" />
  157. <dialog-selectProduction ref="selectProduction"></dialog-selectProduction>
  158. <QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
  159. </view>
  160. </template>
  161. <script setup>
  162. import {
  163. normalizeProps,
  164. reactive,
  165. onMounted,
  166. ref
  167. } from 'vue'
  168. import {
  169. onLoad,
  170. onReady,
  171. onUnload,
  172. onShow,
  173. onReachBottom
  174. } from '@dcloudio/uni-app'
  175. import {
  176. getAssistDayWorkList,
  177. showDaywork,
  178. showDayworkSave,
  179. turnoverDelete
  180. } from '@/api/business/dayWork.js'
  181. import {
  182. isTakeStock
  183. } from '@/api/business/taksStackLot.js'
  184. import {
  185. getAbnormalityLot
  186. } from '@/api/business/lot.js'
  187. import {
  188. carrierFinishedCheck
  189. } from '@/api/business/carrier.js'
  190. import {
  191. store
  192. } from '@/store/index.js'
  193. import {
  194. toHHmmss
  195. } from '@/utils/common.js'
  196. import {
  197. onPullDownRefresh
  198. } from "@dcloudio/uni-app"
  199. import QrScanner from '../vueQrCode/index.vue'
  200. const turnoverApplicationDialog = ref(null)
  201. const selectProduction = ref(null)
  202. const showQrCodeReader = ref(false);
  203. const listData = ref([])
  204. const curPlan = ref(null)
  205. const bottomStatus = ref(false) // 底部按钮显示
  206. const paging = ref();
  207. const reqParam = ref(null);
  208. const normalStatus = ref(true)
  209. const isLoding = ref(false);
  210. const curDayworkItem = ref({}) // 当前报工记录,回显是否显示取消周转的状态
  211. const keywords = ref(null)
  212. const tempList = ref([])
  213. const wasteRecyclingList = ref([]) //废品回用批次
  214. // 在数据中定义一个变量来控制遮罩层的显示
  215. const isMaskShow = ref(false);
  216. //打开图纸
  217. //选中的daywork
  218. const currentDaywork = ref({})
  219. const editStatus = ref(false)
  220. const notPreProcess = ref(true)
  221. const curProcessAfte = ref([])
  222. const showRight = ref(null) // 抽屉
  223. const pageSize = ref(10)
  224. const pageNum = ref(1)
  225. const status = ref(true)
  226. onLoad(() => {
  227. curPlan.value = store.planDetails;
  228. normalStatus.value = true;
  229. //废品回用的领料部门如果是当前工段,也要可以开始新批次
  230. //查找当前计划单下的批次废品回用是当前工段
  231. // getAbnormalityLot({
  232. // productionPlanDetailId: store.planDetails.id,
  233. // requisitionDepartmentId: store.curDeptDetails.deptId
  234. // }).then(res => {
  235. // wasteRecyclingList.value = res.rows
  236. // if (store.planDetails.requisitionDepartmentId == store.curDeptDetails.deptId ||
  237. // wasteRecyclingList.value.length > 0) {
  238. // bottomStatus.value = true;
  239. // store.isPreProcess = true;
  240. // } else {
  241. // bottomStatus.value = false;
  242. // store.isPreProcess = false;
  243. // }
  244. // })
  245. })
  246. // 页面下拉刷新操作
  247. onPullDownRefresh(() => {
  248. uni.stopPullDownRefresh();
  249. reflush();
  250. })
  251. onShow(() => {
  252. reflush();
  253. })
  254. ;
  255. function reflush() {
  256. init();
  257. }
  258. function qrReaderClose() {
  259. showQrCodeReader.value = false;
  260. }
  261. function onDecodeHandler(ret) {
  262. showQrCodeReader.value = false;
  263. console.log(ret);
  264. let vehicleObj = {
  265. carrierCode: ret
  266. };
  267. if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
  268. uni.showToast({
  269. icon: "none",
  270. title: "请扫载具码",
  271. duration: 1000
  272. })
  273. return;
  274. }
  275. keywords.value = vehicleObj.carrierCode
  276. init();
  277. }
  278. //扫码
  279. function handleScan() {
  280. showQrCodeReader.value = true;
  281. // 引入原生插件
  282. // const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
  283. // if (mpaasScanModule) {
  284. // // 调用插件的 mpaasScan 方法
  285. // mpaasScanModule.mpaasScan({
  286. // // 扫码识别类型,参数可多选,qrCode、barCode,
  287. // // 如不设置,默认识别所有扫码类型,可能有些许影响识别效率
  288. // scanType: ["qrCode", "barCode"],
  289. // // 是否隐藏相册,默认false不隐藏
  290. // hideAlbum: false,
  291. // },
  292. // (ret) => {
  293. // console.log(ret);
  294. // let vehicleObj = {
  295. // carrierCode: ret.resp_result
  296. // };
  297. // if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
  298. // uni.showToast({
  299. // icon: "none",
  300. // title: "请扫载具码",
  301. // duration: 1000
  302. // })
  303. // return;
  304. // }
  305. // keywords.value = vehicleObj.carrierCode
  306. // init();
  307. // }
  308. // );
  309. // } else {
  310. // // 测试时用
  311. // keywords.value = "000642"
  312. // init();
  313. // }
  314. }
  315. function handleShowTurnoverApplication(data) {
  316. let productionPlan = {
  317. id: data.productionPlanDetailId,
  318. productionPlanId: data.productionPlanId,
  319. productDescription: data.productDescription
  320. }
  321. store.planDetails = productionPlan
  322. console.log(data)
  323. //如果这批废了,则不能周转申请
  324. if (data.isWaste == 1) {
  325. uni.showToast({
  326. icon: 'none',
  327. title: '此批已废,不能申请周转',
  328. duration: 2000
  329. })
  330. } else {
  331. isTakeStock().then(response => {
  332. if (response.data) {
  333. uni.showToast({
  334. icon: 'none',
  335. title: '正在盘点,不能申请周转',
  336. duration: 2000
  337. })
  338. } else {
  339. let _data = data ?? {}
  340. carrierFinishedCheck(data).then(res => {
  341. if (res.code === 200) {
  342. // 调用子组件中的方法
  343. turnoverApplicationDialog.value.open(_data)
  344. } else {
  345. uni.showToast({
  346. icon: 'none',
  347. title: res.msg
  348. })
  349. }
  350. })
  351. }
  352. })
  353. }
  354. }
  355. onReachBottom(() => {
  356. console.log(status.value)
  357. if (status.value) {
  358. pageNum.value += 1
  359. uni.showLoading({
  360. title: '加载中'
  361. });
  362. getAssistDayWorkList({
  363. deptId: store.curDeptDetails.deptId,
  364. keywords: keywords.value,
  365. pageNum: pageNum.value,
  366. pageSize: pageSize.value,
  367. normalStatus: normalStatus.value
  368. }).then(res => {
  369. const existingIds = new Set(listData.value.map(item => item.lotCode));
  370. console.log(listData.value)
  371. // 过滤出那些不在 existingIds 中的项,即新数据
  372. const newRows = res.data.filter(row => !existingIds.has(row.lotCode));
  373. console.log(newRows)
  374. tempList.value.concat(newRows)
  375. // 如果有新数据,将其添加到 listData
  376. if (newRows.length > 0) {
  377. listData.value = listData.value.concat(newRows);
  378. uni.hideLoading();
  379. } else {
  380. uni.hideLoading();
  381. // 如果没有新数据,更新状态表示没有更多数据
  382. status.value = false;
  383. }
  384. })
  385. }
  386. console.log(status.value)
  387. })
  388. function init() {
  389. listData.value = []
  390. status.value = true
  391. uni.showLoading({
  392. title: '加载中'
  393. });
  394. pageNum.value = 1
  395. let reqData = {
  396. deptId: store.curDeptDetails.deptId,
  397. keywords: keywords.value,
  398. pageNum: pageNum.value,
  399. pageSize: pageSize.value,
  400. normalStatus: normalStatus.value
  401. };
  402. // console.log(normalStatus.value)
  403. getAssistDayWorkList(reqData).then(res => {
  404. console.log(res.data)
  405. if (res.code == 200) {
  406. res.data.forEach(item => {
  407. let quantitySum = 0;
  408. item.dayworkItemList.forEach(info => {
  409. if (info.status < 4 && item.currentProcess.processStepNumber == info
  410. .processStepNumber) {
  411. quantitySum += info.qualifiedNum;
  412. }
  413. });
  414. item.totalQuantity = quantitySum;
  415. });
  416. tempList.value = res.data
  417. // console.log(res)
  418. listData.value = res.data
  419. }
  420. uni.hideLoading();
  421. })
  422. }
  423. function handleSearch() {
  424. init();
  425. }
  426. function handleToreportingForWork(item) {
  427. if (item.requisitionDepartmentId == store.curDeptDetails.deptId) {
  428. store.isPreProcess = true;
  429. } else {
  430. store.isPreProcess = false;
  431. }
  432. let productionPlan = {
  433. id: item.productionPlanDetailId,
  434. productionPlanId: item.productionPlanId,
  435. productDescription: item.productDescription
  436. }
  437. store.dayworkInfo = item
  438. store.planDetails = productionPlan
  439. uni.navigateTo({
  440. url: "/pages/assistReportingForWork/index"
  441. })
  442. }
  443. function handleClickProcessList(item) {
  444. let curProcessAfterList = [];
  445. console.log("工序列表", item)
  446. currentDaywork.value = item
  447. editStatus.value = false
  448. // if (item.isWasteRecycling == 1 || item.isAmend == 1) {
  449. // editStatus.value = true
  450. // } else {
  451. // editStatus.value = false
  452. // }
  453. let nextIndex = 0;
  454. for (let i = 0; i < item.processSequence.length; i++) {
  455. if (item.nextProcess) {
  456. if (item.nextProcess.processStepNumber == item.processSequence[i].processStepNumber) {
  457. nextIndex = i;
  458. }
  459. } else {
  460. nextIndex = item.processSequence.length
  461. }
  462. }
  463. for (let i = 0; i < item.processSequence.length; i++) {
  464. if (i >= nextIndex) {
  465. curProcessAfterList.push(item.processSequence[i]);
  466. }
  467. }
  468. if (item.status == 3) {
  469. curProcessAfterList.splice(0, 1)
  470. }
  471. console.log(curProcessAfterList)
  472. curProcessAfte.value = curProcessAfterList;
  473. showRight.value.open();
  474. }
  475. function handleSearchCode() {
  476. // console.log(normalStatus.value)
  477. selectProduction.value.open(normalStatus.value);
  478. }
  479. function switchChange(event) {
  480. uni.pageScrollTo({
  481. scrollTop: 0,
  482. duration: 100
  483. });
  484. pageNum.value = 1
  485. console.log(event)
  486. //异常批
  487. if (normalStatus.value) {
  488. normalStatus.value = false
  489. init()
  490. } else {
  491. //正常批
  492. normalStatus.value = true
  493. init()
  494. }
  495. }
  496. function handleOpenDrawing() {
  497. console.log(currentDaywork.value, "444")
  498. var filteredProcess = currentDaywork.value.processSequence.filter(item => item.processStepNumber == currentDaywork
  499. .value.currentProcess.processStepNumber);
  500. // 检查 filteredProcess 是否有元素,并选择第一个元素
  501. if (filteredProcess.length > 0) {
  502. var firstMatch = filteredProcess[0]; // 获取第一个匹配的对象
  503. console.log("currentDaywork", currentDaywork.value)
  504. // 对 technologicalProcessDetailId 进行URL编码
  505. var encodedId = encodeURIComponent(currentDaywork.value.productId);
  506. var enTechnologicalProcessId = encodeURIComponent(currentDaywork.value.technologicalProcessId);
  507. var enprocessCode = encodeURIComponent(firstMatch.processCode);
  508. var encodeCode = encodeURIComponent(currentDaywork.value.lotCode);
  509. var enProcessAlias = encodeURIComponent(firstMatch.processAlias);
  510. var enIsWasteRecycling = encodeURIComponent(currentDaywork.value.isWasteRecycling);
  511. var enIsAmend = encodeURIComponent(currentDaywork.value.isAmend);
  512. // 构建查询参数字符串
  513. var queryParam =
  514. `param1=${encodedId}&param2=${encodeCode}&param3=${enprocessCode}&param4=${enTechnologicalProcessId}&param5=${enProcessAlias}&param6=${enIsWasteRecycling}&param7=${enIsAmend}`;
  515. // 使用模板字符串构建完整的URL
  516. var navigateUrl = `/pages/drawingMenu/index?${queryParam}`;
  517. // 导航到指定页面
  518. uni.navigateTo({
  519. url: navigateUrl
  520. });
  521. } else {
  522. console.log('No process matched the current process step number.');
  523. }
  524. }
  525. function handleDoTurnoverAfter() {
  526. reflush();
  527. }
  528. function handleCancelTurnover(data) {
  529. isTakeStock().then(response => {
  530. if (response.data) {
  531. uni.showToast({
  532. icon: 'none',
  533. title: '正在盘点,不能取消周转',
  534. duration: 2000
  535. })
  536. } else {
  537. isMaskShow.value = true; // 显示遮罩层
  538. uni.showLoading({
  539. title: '加载中'
  540. });
  541. turnoverDelete(data).then(res => {
  542. isMaskShow.value = false
  543. if (res.code == 200) {
  544. uni.showToast({
  545. icon: "success",
  546. title: "取消成功",
  547. duration: 2000
  548. })
  549. isLoding.value = false;
  550. setTimeout(() => {
  551. init(store.planDetails.id);
  552. }, 1000);
  553. } else {
  554. uni.showToast({
  555. icon: "none",
  556. title: "取消失败",
  557. duration: 2000
  558. })
  559. isLoding.value = false;
  560. setTimeout(() => {
  561. init(store.planDetails.id);
  562. }, 1000);
  563. }
  564. })
  565. }
  566. })
  567. }
  568. </script>
  569. <style lang="scss">
  570. $nav-height: 60rpx;
  571. /* 遮罩层样式 */
  572. .mask {
  573. position: fixed;
  574. /* 固定定位,覆盖整个屏幕 */
  575. top: 0;
  576. left: 0;
  577. right: 0;
  578. bottom: 0;
  579. background-color: rgba(0, 0, 0, 0.3);
  580. /* 黑色背景,透明度30% */
  581. display: flex;
  582. justify-content: center;
  583. /* 水平居中 */
  584. align-items: center;
  585. /* 垂直居中 */
  586. z-index: 1000;
  587. /* 确保遮罩层在其他元素之上 */
  588. }
  589. .box-bg {
  590. width: 94%;
  591. background-color: #F5F5F5;
  592. padding: 5rpx 16rpx;
  593. justify-content: space-around;
  594. align-items: center;
  595. margin: 24rpx auto 0;
  596. .input-view {
  597. width: 100%;
  598. flex: 4;
  599. background-color: #f8f8f8;
  600. height: $nav-height;
  601. border: 1rpx solid #999;
  602. border-radius: 15rpx;
  603. padding: 0 15rpx;
  604. flex-wrap: nowrap;
  605. margin: 0 10rpx 0;
  606. line-height: $nav-height;
  607. .input-uni-icon {
  608. line-height: $nav-height;
  609. }
  610. .nav-bar-input {
  611. width: 80%;
  612. height: $nav-height;
  613. line-height: $nav-height;
  614. padding: 0 5rpx;
  615. background-color: #f8f8f8;
  616. }
  617. }
  618. .search {
  619. width: 20%;
  620. text-align: center;
  621. color: #808080;
  622. }
  623. }
  624. .list-title {
  625. width: 100%;
  626. margin-top: 16rpx;
  627. height: 64rpx;
  628. line-height: 64rpx;
  629. align-items: center;
  630. margin-left: 32rpx;
  631. .label {
  632. font-size: 32rpx;
  633. margin-right: 24rpx;
  634. }
  635. .icon-gear {
  636. font-size: 56rpx;
  637. }
  638. }
  639. .switch {
  640. margin-top: -8rpx;
  641. transform: scale(0.7);
  642. }
  643. .scroll-container {
  644. width: 92%;
  645. margin: 24rpx auto 0 auto;
  646. height: calc(90% - 100rpx);
  647. overflow: scroll
  648. }
  649. .list-item {
  650. background-color: #fff;
  651. position: relative;
  652. padding: 16rpx;
  653. padding-bottom: 24rpx;
  654. margin-bottom: 24rpx;
  655. border-radius: 24rpx;
  656. .title-container {
  657. margin-top: 8rpx;
  658. margin-bottom: 16rpx;
  659. .title {
  660. height: 48rpx;
  661. align-items: center;
  662. .label {
  663. font-size: 32rpx;
  664. font-weight: bold;
  665. &.code {
  666. margin-left: 8rpx;
  667. }
  668. }
  669. }
  670. .tag {
  671. border: 1px solid #1CE5B0;
  672. background-color: #F6FFFD;
  673. padding: 8rpx;
  674. border-radius: 8rpx;
  675. .label {
  676. color: #1CE5B0;
  677. font-size: 24rpx;
  678. }
  679. &.finished {
  680. border: 1px solid #BBBBBB;
  681. background-color: #F5F5F5;
  682. .label {
  683. color: #BBBBBB;
  684. }
  685. }
  686. &.turnover {
  687. border: 1px solid #FF7901;
  688. background-color: #F6FFFD;
  689. .label {
  690. color: #FF7901;
  691. }
  692. }
  693. }
  694. }
  695. .item-info {
  696. margin-bottom: 8rpx;
  697. .label {
  698. font-size: 28rpx;
  699. width: 220rpx;
  700. color: #808080;
  701. &.right {
  702. flex: 1;
  703. color: #000000;
  704. }
  705. }
  706. }
  707. .status-btn {
  708. justify-content: flex-end;
  709. align-items: center;
  710. .turnover-tag {
  711. padding-right: 12rpx;
  712. padding-left: 12rpx;
  713. border-radius: 8rpx;
  714. border: 1rpx solid #FF7901;
  715. background-color: #FF7901;
  716. font-size: 28rpx;
  717. color: #FFFFFF;
  718. }
  719. .reporting-tag {
  720. padding-right: 12rpx;
  721. padding-left: 12rpx;
  722. border-radius: 8rpx;
  723. margin-left: 16rpx;
  724. border: 1rpx solid #1684fc;
  725. background-color: #1684fc;
  726. font-size: 28rpx;
  727. color: #FFFFFF;
  728. }
  729. }
  730. }
  731. .scan-btn {
  732. height: 64rpx;
  733. color: #ffffff;
  734. background-color: #f47c3c;
  735. align-items: center;
  736. justify-content: center;
  737. border-radius: 8rpx;
  738. flex: 1;
  739. }
  740. </style>