index.vue 23 KB

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