equipmentRetrieval.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. <template>
  2. <view style="background-color: #fff;" :class="{
  3. iscomponents:iscomponents==1
  4. }">
  5. <u-navbar title="设备检索" ref="navbar" v-if="iscomponents!=1" ></u-navbar>
  6. <!-- 搜索 -->
  7. <view class="search" v-if="iscomponents!=1" >
  8. <!-- <u-icon name="arrow-left" @click="back()" size="36"></u-icon> -->
  9. <view class="search-box">
  10. <u-search :show-action="true" class="u-search" @custom="form.pageIndex=1,getList()"
  11. v-model="queryContent" @search="form.pageIndex=1,getList()"
  12. placeholder="搜索设备名称或型号"
  13. action-text="搜索" :animation="true"></u-search>
  14. <!-- <u-search class="u-search" placeholder="搜索设备名称或型号" v-model="queryContent" :show-action="false">
  15. </u-search>
  16. -->
  17. </view>
  18. </view>
  19. <view class="main">
  20. <!-- 分类 -->
  21. <view class="classify calc10080 " v-if="!queryContentBl&&!isreturn">
  22. <scroll-view scroll-y="true" :class="iscomponents!=1?'calc10082':'calc10081'" >
  23. <view class="item " v-for="(item,index) in menuList" :key="index" @click="toggle(index)"
  24. :class="{'checked':index ==checkindex }">
  25. {{item.name}}<br/>
  26. </view>
  27. </scroll-view>
  28. </view>
  29. <!-- 类型 -->
  30. <view class="type calc10080" :class="queryContentBl||isreturn?'typeAll':''" >
  31. <view class="type-item">
  32. <!-- <view class="title" v-for="item in 4">
  33. 设备类型一
  34. </view> -->
  35. <scroll-view scroll-y="true" :class="iscomponents!=1?'calc10082':'calc10081'" @scrolltolower="myLoadmoreonReachBottom()">
  36. <view class="content" >
  37. <view class="item" v-for="(item,i) in indexList" @click="viewItem(item)" :key="i">
  38. <view class="picture">
  39. <img :src="item.imgUrl" alt="">
  40. </view>
  41. <view class="infos" :class="{
  42. infosQuery:queryContentBl||isreturn
  43. }" >
  44. <view class="name">
  45. {{item.title}}
  46. </view>
  47. <view class="model" >
  48. <view class="infos-title">
  49. 型号:
  50. </view>
  51. <view class="value">
  52. {{item.model}}
  53. </view>
  54. </view>
  55. <view class="model" v-if="item.specifications">
  56. <view class="infos-title">
  57. 规格:
  58. </view>
  59. <view class="value">
  60. {{item.specifications}}
  61. </view>
  62. </view>
  63. <view class="inventory" v-if="!item.code">
  64. <view class="infos-title">
  65. 库存:
  66. </view>
  67. <view class="value">
  68. {{item.count}}
  69. </view>
  70. </view>
  71. <view class="inventory" v-if="item.code" >
  72. <view class="value">
  73. {{showCode(item)}}
  74. </view>
  75. </view>
  76. <view class="inventory" v-if="queryContentBl">
  77. <view class="infos-title">
  78. 分类:
  79. </view>
  80. <view class="value">
  81. {{getMenuListName(item.typeId)}}
  82. </view>
  83. </view>
  84. </view>
  85. <view class="option" v-if="iscomponents==1" >
  86. <u-button v-if="deterItem(item)" @click="ckItem(item)"
  87. style="height: 48rpx;" :custom-style="customStyle"
  88. type="error" ><u-icon name="trash-fill"></u-icon>删除</u-button>
  89. <u-button v-else @click="ckItem(item)"
  90. style="height: 48rpx;" :custom-style="customStyle"
  91. type="primary" ><u-icon name="plus-circle"></u-icon>添加</u-button>
  92. <u-button @click="viewInfo(item)"
  93. style="height: 48rpx;margin-top: 6px;" :custom-style="customStyle"
  94. type="success" ><u-icon name="file-text"></u-icon>详情</u-button>
  95. </view>
  96. </view>
  97. </view>
  98. <u-divider v-if="form.recordsTotal==indexList.length"
  99. :isnone="form.recordsTotal==0" nonetext="没有找到相关内容"
  100. border-color="#CFD2D5" bg-color="#fff">已经到底了</u-divider>
  101. </scroll-view>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </template>
  107. <script>
  108. import * as API from '@/apis/pagejs/index.js'
  109. export default {
  110. props:{
  111. departmentId:{
  112. default: ""
  113. },
  114. queryStatus:{
  115. default: 0
  116. },
  117. iscomponents:{
  118. default: ""
  119. },
  120. isreturn:{
  121. default: ""
  122. },
  123. list:{
  124. default: () => [],
  125. },
  126. scanList:{
  127. default: () => [],
  128. },
  129. },
  130. data() {
  131. return {
  132. customStyle:{
  133. height: "60rpx",
  134. lineHeight: "60rpx",
  135. marginTop: "3px"
  136. },
  137. styleheight:"",
  138. queryContent:"",
  139. queryContentBl:false,
  140. checkindex: 0,
  141. indexList:[],
  142. form:{
  143. pageIndex:1,
  144. pageSize:20,
  145. list:[]
  146. },
  147. menuList: [
  148. ]
  149. }
  150. },
  151. computed:{
  152. listcurrentlist(){
  153. if(this.menuList.length==0){
  154. return []
  155. }
  156. var list=this.menuList[this.checkindex].list
  157. if(list){
  158. return list
  159. }else{
  160. return []
  161. }
  162. }
  163. },
  164. mounted() {
  165. if(this.isreturn){
  166. if(this.isreturn){
  167. var sz=[
  168. {
  169. typeId:"-$jp%-0",
  170. name:"未归还设备",
  171. list:[],
  172. pageIndex:1,
  173. pageSize:10,
  174. recordsTotal:0
  175. },
  176. // {
  177. // typeId:"-$jp%-1",
  178. // name:"借出历史",
  179. // list:[],
  180. // pageIndex:1,
  181. // pageSize:10,
  182. // recordsTotal:0
  183. // },
  184. ]
  185. this.menuList = [
  186. ...sz,
  187. ]
  188. uni.hideLoading();
  189. if(this.menuList.length>0){
  190. this.getList()
  191. }
  192. //this.getList()
  193. }
  194. }else{
  195. this.getDeviceTypeList();
  196. }
  197. },
  198. onReady() {
  199. //this.getList()
  200. },
  201. onReachBottom() {
  202. console.log(1)
  203. this.myLoadmoreonReachBottom()
  204. },
  205. methods: {
  206. init(){
  207. this.menuList[this.checkindex].pageIndex=1
  208. this.getList()
  209. },
  210. myLoadmoreonReachBottom(){
  211. var obj=this.menuList[this.checkindex]
  212. if(this.queryContentBl){
  213. obj=this.form;
  214. }
  215. console.log(obj)
  216. if (this.indexList.length < obj.recordsTotal) {
  217. this.myLoadmore();
  218. }
  219. },
  220. getMenuListName(id){
  221. var obj =this.menuList.filter(item=>{
  222. return id==item.typeId;
  223. })
  224. if(obj.length){
  225. return obj[0].name
  226. }
  227. },
  228. getDeviceTypeList(){
  229. uni.showLoading({
  230. title: "加载中",
  231. mask: true,
  232. })
  233. API.deviceTypeList({}).then((res) => {
  234. var menuList = res.data.deviceTypeList.map(item=>{
  235. return {
  236. typeId:item.id,
  237. name:item.name,
  238. list:[],
  239. pageIndex:1,
  240. pageSize:10,
  241. recordsTotal:0
  242. }
  243. });
  244. var sz=[]
  245. //
  246. this.menuList = [
  247. ...sz,
  248. ...menuList
  249. ]
  250. uni.hideLoading();
  251. if(this.menuList.length>0){
  252. this.getList()
  253. }
  254. }).catch(error => {
  255. uni.showToast({
  256. title: error
  257. })
  258. })
  259. },
  260. viewItem(item){
  261. if(this.iscomponents==1){
  262. }else{
  263. uni.navigateTo({
  264. url:"./equipmentDetail?name="+item.title+"&model="+item.model+"&specifications="+item.specifications
  265. })
  266. }
  267. },
  268. viewInfo(item){
  269. if(item.code){
  270. uni.navigateTo({
  271. url:"/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id="+item.id
  272. })
  273. }else{
  274. uni.navigateTo({
  275. url:"/pages/otherFunctions/equipmentRetrieval/equipmentDetail?name="+item.title+"&model="+item.model+"&specifications="+item.specifications
  276. })
  277. }
  278. },
  279. deterItem(item){
  280. var c=""
  281. if(item.code){
  282. c=this.scanList.find(it=>{
  283. return it.id==item.id
  284. })
  285. }else{
  286. c=this.list.find(it=>{
  287. return it.obj.id==item.id
  288. })
  289. }
  290. if(c){
  291. return true
  292. }else{
  293. return false
  294. }
  295. },
  296. ckItem(item){
  297. console.log(this.scanList)
  298. this.$emit('ckItem',item)
  299. },
  300. myLoadmore(){
  301. if(this.queryContentBl){
  302. this.form.pageIndex += 1;
  303. }else{
  304. this.menuList[this.checkindex].pageIndex += 1;
  305. }
  306. this.getList();
  307. },
  308. getList(){
  309. uni.showLoading({
  310. title: "加载中",
  311. mask: true,
  312. })
  313. this.datainit()
  314. var list=this.indexList
  315. var data = this.menuList[this.checkindex];
  316. if(this.queryContent){
  317. //this.queryContentBl=true
  318. // 删除类型 delete data.list;
  319. data=this.form
  320. data.queryContent=this.queryContent;
  321. }else{
  322. //this.queryContentBl=false
  323. }
  324. delete data.list;
  325. if(["-$jp%-0","-$jp%-1"].indexOf(data.typeId)!=-1){
  326. if(this.queryContent){
  327. }else{
  328. this.queryContentBl=false
  329. }
  330. if(data.typeId=="-$jp%-0"){
  331. data.departmentId=this.departmentId;
  332. data.queryStatus=!this.queryStatus?1:0
  333. API.outDeviceByUser(data).then((res) => {
  334. if(data.pageIndex==1){
  335. list = res.data.outDeviceList.data;
  336. }else{
  337. list = [
  338. ...list,
  339. ...res.data.outDeviceList.data
  340. ];
  341. }
  342. this.menuList[this.checkindex].list=list
  343. this.menuList[this.checkindex].recordsTotal = res.data.outDeviceList.recordsTotal;
  344. this.form.recordsTotal = res.data.outDeviceList.recordsTotal;
  345. this.indexList=list;
  346. uni.hideLoading();
  347. }).catch(error => {
  348. uni.showToast({
  349. title: error
  350. })
  351. })
  352. }
  353. if(data.typeId=="-$jp%-1"){
  354. //废弃
  355. }
  356. }else{
  357. if(this.isreturn){
  358. data.queryAll=1
  359. }
  360. API.deviceList(data).then((res) => {
  361. if(data.pageIndex==1){
  362. list = res.data.data;
  363. }else{
  364. list = [
  365. ...list,
  366. ...res.data.data
  367. ];
  368. }
  369. if(this.queryContent){
  370. this.queryContentBl=true
  371. }else{
  372. this.queryContentBl=false
  373. this.menuList[this.checkindex].list=list
  374. this.menuList[this.checkindex].recordsTotal = res.data.recordsTotal;
  375. }
  376. this.form.recordsTotal = res.data.recordsTotal;
  377. this.indexList=list;
  378. //console.log(this.form.recordsTotal ,list.length)
  379. uni.hideLoading();
  380. }).catch(error => {
  381. uni.showToast({
  382. title: error
  383. })
  384. })
  385. }
  386. },
  387. datainit(){
  388. // var data = this.menuList[this.checkindex];
  389. // if(!data.pageIndex){
  390. // this.menuList[this.checkindex].pageIndex=1;
  391. // this.menuList[this.checkindex].pageSize=10
  392. // this.menuList[this.checkindex].recordsTotal=0;
  393. // this.menuList[this.checkindex].list=[]
  394. // }
  395. },
  396. toggle(index) {
  397. this.checkindex = index
  398. this.datainit()
  399. var list=this.menuList[this.checkindex].list
  400. this.indexList=list;
  401. if(list.length==0){
  402. this.getList()
  403. }
  404. },
  405. back(){
  406. this.$refs.navbar.goBack()
  407. }
  408. },
  409. }
  410. </script>
  411. <style scoped lang="scss">
  412. page {
  413. background-color: #fff;
  414. }
  415. .iscomponents /deep/.u-search{
  416. width: 630rpx !important;
  417. }
  418. // 搜索
  419. .search {
  420. padding: 12rpx 24rpx;
  421. border-radius: 8px;
  422. overflow: hidden;
  423. .search-box {
  424. border-radius: 8px;
  425. overflow: hidden;
  426. }
  427. .u-search {
  428. margin: auto !important;
  429. position: relative;
  430. flex: 0;
  431. margin: 0 !important;
  432. height: 64rpx !important;
  433. }
  434. /deep/.u-content {
  435. border-radius: 0px !important;
  436. height: 64rpx !important;
  437. }
  438. /deep/.u-icon--right {
  439. margin-right: 16rpx;
  440. }
  441. .search-btn {
  442. width: 100rpx;
  443. height: 64rpx;
  444. background-color: #f2f2f2;
  445. .text {
  446. height: 40rpx;
  447. margin: 12rpx 0;
  448. border-left: 1px solid #999999;
  449. font-family: Microsoft Yahei;
  450. text-align: center;
  451. color: rgba(16, 98, 213, 1);
  452. font-size: 28rpx;
  453. }
  454. }
  455. }
  456. .calc10080{
  457. //height: calc(95vh - 90px);
  458. }
  459. .calc10081{
  460. //height: calc(95vh - 90px);
  461. height:800rpx
  462. }
  463. .calc10082{
  464. height: calc(95vh - 90px);
  465. //height:750rpx
  466. }
  467. .main {
  468. display: flex;
  469. // 分类
  470. .classify {
  471. width: 170rpx;
  472. background-color: #F0F0F0;
  473. overflow-y: scroll;
  474. font-size: 28rpx;
  475. .item {
  476. height: 120rpx;
  477. line-height: 120rpx;
  478. text-align: center;
  479. }
  480. .checked {
  481. background-color: #fff;
  482. color: #1062D5
  483. }
  484. }
  485. // 类型
  486. .typeAll{
  487. width: 750rpx !important;
  488. }
  489. .type{
  490. width: 580rpx;
  491. padding: 24rpx 24rpx;
  492. overflow-y: scroll;
  493. .type-item{
  494. //margin-bottom: 80rpx;
  495. }
  496. .title{
  497. color: rgba(51, 51, 51, 1);
  498. font-size: 32rpx;
  499. margin-bottom: 24rpx;
  500. }
  501. .content{
  502. .item{
  503. display: flex;
  504. margin-bottom: 28rpx;
  505. border-bottom: 1px dashed;
  506. .option{
  507. padding-left: 20rpx;
  508. }
  509. .picture{
  510. width: 120rpx;
  511. height: 120rpx;
  512. border-radius: 8rpx;
  513. overflow: hidden;
  514. img{
  515. width: 100rpx;
  516. height: 100%;
  517. }
  518. }
  519. .infosQuery{
  520. width:400rpx !important;
  521. }
  522. .infos{
  523. width:200rpx ;
  524. margin-left: 16rpx;
  525. .name{
  526. color: rgba(51, 51, 51, 1);
  527. font-size: 32rpx;
  528. margin-bottom: 8rpx;
  529. }
  530. .model{
  531. color: rgba(153, 153, 153, 1);
  532. font-size: 24rpx;
  533. display: flex;
  534. //margin-bottom: 8rpx;
  535. }
  536. .inventory{
  537. color: rgba(153, 153, 153, 1);
  538. font-size: 24rpx;
  539. display: flex;
  540. margin-bottom: 8rpx;
  541. }
  542. .infos-title{
  543. width: 88rpx;
  544. min-width: 88rpx;
  545. }
  546. }
  547. }
  548. }
  549. }
  550. }
  551. </style>