borrow.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <template>
  2. <view class="home">
  3. <view class="detail-area">
  4. <layout-row rowTitle="资产编号" :rowValue="assetObj.number"></layout-row>
  5. <layout-row rowTitle="资产名称" :rowValue="assetObj.name"></layout-row>
  6. <layout-row rowTitle="资产种类" :rowValue="assetObj.kind"></layout-row>
  7. <layout-row rowTitle="资产分类" :rowValue="assetObj.categoryNumber"></layout-row>
  8. <layout-row rowTitle="使用部门" :rowValue="assetObj.deptName"></layout-row>
  9. <layout-row rowTitle="资产原值(元)" :rowValue="assetObj.amount"></layout-row>
  10. <layout-row rowTitle="数量" :rowValue="assetObj.quantity"></layout-row>
  11. <layout-row rowTitle="存放地点" :rowValue="assetObj.placeName"></layout-row>
  12. <layout-row rowTitle="设备状态" :rowValue="assetObj.borrowStatus"></layout-row>
  13. <layout-row rowTitle="登记人" :rowValue="assetObj.registrant"></layout-row>
  14. <layout-row rowTitle="取得日期" :rowValue="assetObj.buildDate"></layout-row>
  15. <layout-row rowTitle="资产用途" :rowValue="assetObj.purpose"></layout-row>
  16. <layout-row rowTitle="规格型号" :rowValue="assetObj.specificationsModel"></layout-row>
  17. </view>
  18. <view v-if="show">
  19. <view class="borrow-date" v-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?true:false:false">
  20. <u--form
  21. labelPosition="left"
  22. :model="form"
  23. ref="Form1"
  24. :labelWidth="110"
  25. labelAlign="left">
  26. <u-form-item
  27. label="借用地点"
  28. prop="borrowPlaceName"
  29. borderBottom>
  30. <text @click="showPlace" style="font-size: 30rpx;width: 100%;height: 100%;">{{form.borrowPlaceName}}</text>
  31. <u-picker
  32. :show="placeShow"
  33. :columns="placeList"
  34. title="请选择地点"
  35. keyName="name"
  36. @cancel="placeShow = false"
  37. @confirm="selectPlace"></u-picker>
  38. </u-form-item>
  39. <u-form-item
  40. label="联系电话"
  41. prop="tel"
  42. borderBottom>
  43. <u--input
  44. v-model="form.tel"
  45. border="none" placeholder="请输入联系电话">
  46. </u--input>
  47. </u-form-item>
  48. <u-form-item
  49. label="借用日期"
  50. prop="borrowDate"
  51. borderBottom>
  52. <text @click="showBor" style="font-size: 30rpx;">{{form.borrowDate}}</text>
  53. <u-datetime-picker
  54. :show="borrowShow"
  55. v-model="borrowValue"
  56. mode="datetime"
  57. @confirm="changeDate"
  58. @cancel="borrowShow = false"
  59. ></u-datetime-picker>
  60. </u-form-item>
  61. <u-form-item
  62. label="归还日期"
  63. prop="returnDate"
  64. borderBottom>
  65. <text
  66. @click="showRet"
  67. style="font-size: 30rpx;">
  68. {{form.returnDate}}
  69. </text>
  70. <u-datetime-picker
  71. :show="returnShow"
  72. v-model="returnValue"
  73. mode="datetime"
  74. @confirm="returnChange"
  75. @cancel="returnShow = false"
  76. ></u-datetime-picker>
  77. </u-form-item>
  78. <u-form-item
  79. label="备注"
  80. prop="remark"
  81. borderBottom>
  82. <u--input
  83. v-model="form.remark"
  84. border="none"
  85. placeholder="请输入备注"
  86. >
  87. </u--input>
  88. </u-form-item>
  89. </u--form>
  90. </view>
  91. <view class="borrow-date" v-else-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?false:true:true">
  92. <u--form
  93. labelPosition="left"
  94. :model="assetObj"
  95. ref="resF"
  96. :labelWidth="110"
  97. labelAlign="left">
  98. <u-form-item
  99. label="借用人工号"
  100. prop="borrowUserName"
  101. borderBottom>
  102. <text
  103. style="font-size: 30rpx;">
  104. {{assetObj.borrowUserName?assetObj.borrowUserName:""}}
  105. </text>
  106. </u-form-item>
  107. <u-form-item
  108. label="借用地点"
  109. prop="borrowPlaceName"
  110. borderBottom>
  111. <text
  112. style="font-size: 30rpx;">
  113. {{assetObj.placeName?assetObj.placeName:""}}
  114. </text>
  115. </u-form-item>
  116. <u-form-item
  117. label="联系电话"
  118. prop="tel"
  119. borderBottom>
  120. <text
  121. style="font-size: 30rpx">
  122. {{assetObj.tel?assetObj.tel:""}}
  123. </text>
  124. </u-form-item>
  125. <u-form-item
  126. label="借用日期"
  127. prop="borrowDate"
  128. borderBottom>
  129. <text
  130. style="font-size: 30rpx;">
  131. {{assetObj.borrowDate?assetObj.borrowDate:""}}
  132. </text>
  133. </u-form-item>
  134. <u-form-item
  135. label="归还日期"
  136. prop="returnDate"
  137. borderBottom>
  138. <text
  139. style="font-size: 30rpx;">
  140. {{assetObj.returnDate?assetObj.returnDate:""}}
  141. </text>
  142. </u-form-item>
  143. <u-form-item
  144. label="备注"
  145. prop="remark"
  146. borderBottom>
  147. <text style="font-size: 30rpx;">
  148. {{assetObj.remark?assetObj.remark:"无"}}
  149. </text>
  150. </u--input>
  151. </u-form-item>
  152. </u--form>
  153. </view>
  154. <text style="font-size: 24rpx;">归还时间以实际归还时间为准</text>
  155. <view class="btn-area">
  156. <u-button text="借用" color="#000" v-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?true:false:false" @click="toBorrowAsset">借用</u-button>
  157. <u-button text="归还" color="#000" v-else-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?false:true:true" @click="toReturnAsset">归还</u-button>
  158. </view>
  159. <view class="repair-btn" @click="toRepeat">
  160. <i class="iconfont icon-a-shezhi2"></i>
  161. </view>
  162. </view>
  163. <u-toast ref="uToast"></u-toast>
  164. </view>
  165. </template>
  166. <script>
  167. import { searchAsset,getAllPlace,borrowAsset,returnAsset } from "@/api/asset.js"
  168. import cache from "@/utils/storage.js"
  169. import { dateToString } from "@/common/js/core.js"
  170. import LayoutRow from '@/component/LayoutRow.vue'
  171. export default {
  172. data() {
  173. return {
  174. borrowShow:false,
  175. borrowValue:Number(new Date()),
  176. returnShow:false,
  177. returnValue:Number(new Date()),
  178. assetObj:{},
  179. form:{
  180. borrowDate:dateToString(new Date()),
  181. returnDate:dateToString(new Date()),
  182. remark:"",
  183. tel:cache.session.getJSON("phone"),
  184. borrowPlaceName:"",
  185. assetBarCode:""
  186. },
  187. placeShow: false,
  188. placeList: [],
  189. show:false
  190. };
  191. },
  192. components:{
  193. LayoutRow
  194. },
  195. onLoad:function(option){
  196. this.form.assetBarCode = option.number
  197. // this.initAssets(option.number)
  198. this.init()
  199. },
  200. onShow() {
  201. this.initAssets(this.form.assetBarCode,0,"加载中")
  202. },
  203. methods:{
  204. showBor(){
  205. this.borrowShow = true
  206. },
  207. showRet(){
  208. this.returnShow = true
  209. },
  210. handleDate(fDate,rDate){
  211. let f = new Date(fDate)
  212. let r = new Date(rDate)
  213. if (f < r) {
  214. return true
  215. } else {
  216. uni.showToast({
  217. icon:"error",
  218. title:"借用日期应小于归还日期"
  219. })
  220. return false
  221. }
  222. },
  223. changeDate(val){
  224. let date = dateToString(val.value);
  225. this.form.borrowDate = date
  226. this.borrowShow = false
  227. },
  228. returnChange(val){
  229. let date = dateToString(val.value);
  230. if(this.handleDate(this.form.borrowDate,date)){
  231. this.form.returnDate = date
  232. this.returnShow = false
  233. }
  234. },
  235. init(){
  236. this.placeList = []
  237. // uni.showLoading({
  238. // title: "加载中",
  239. // mask: true,
  240. // });
  241. getAllPlace().then(res=>{
  242. if(res.length!==0){
  243. this.placeList.push(res)
  244. this.form.borrowPlaceName = res[0].name?res[0].name:"请选择地点"
  245. }
  246. })
  247. this.form.borrowDate = dateToString(new Date(new Date().getTime() + 1000*60*10))
  248. this.form.returnDate = dateToString(new Date(new Date().getTime() + 1000*60*15))
  249. this.form.tel = cache.session.getJSON("phone")
  250. },
  251. initAssets(data,num,str){
  252. uni.showLoading({
  253. title:str,
  254. icon:'none',
  255. mask:true
  256. })
  257. try{
  258. searchAsset({barCode: data}).then(res=>{
  259. if(res.barCode===null){
  260. uni.hideLoading()
  261. this.$refs.uToast.show({
  262. type: 'error',
  263. icon: false,
  264. message: "该设备不存在,即将返回上一页",
  265. duration:1500
  266. })
  267. setTimeout(()=>{
  268. uni.navigateBack({
  269. delta:1
  270. })
  271. },1400)
  272. }
  273. if(res.meBorrow || res.borrowStatus ==="可借出"){
  274. this.show = true;
  275. }else{
  276. this.show = false;
  277. }
  278. uni.hideLoading()
  279. let msg = ""
  280. if(num===1){
  281. msg = "借用成功!"
  282. }else if(num===2){
  283. msg = "归还成功!"
  284. }
  285. uni.showToast({
  286. title: msg,
  287. icon:'success'
  288. });
  289. this.assetObj = res
  290. })
  291. }catch(err){
  292. uni.hideLoading()
  293. }
  294. },
  295. showPlace(){
  296. this.placeShow = true
  297. },
  298. selectPlace(e){
  299. this.form.borrowPlaceName = e.value[0].name
  300. this.placeShow = false
  301. },
  302. //点去维修
  303. toRepeat(){
  304. // console.log("111233")
  305. uni.navigateTo({
  306. url:'/pages/fault/fault-report/fault-report?id='+this.form.assetBarCode
  307. })
  308. },
  309. toBorrowAsset(){
  310. if(this.form.tel===""){
  311. uni.showToast({
  312. icon:"error",
  313. title:"请输入正确的手机号",
  314. mask:true
  315. })
  316. return;
  317. }
  318. if(!this.handleDate(this.form.borrowDate,this.form.returnDate)){
  319. // uni.hideLoading()
  320. return;
  321. }
  322. uni.showLoading({
  323. title: "正在借用中",
  324. mask: true,
  325. });
  326. let data = {
  327. "tel": this.form.tel,
  328. "assetBarCode": this.assetObj.barCode,
  329. "borrowPlaceName": this.form.borrowPlaceName,
  330. "remark": this.form.remark
  331. }
  332. // console.log(data,1)
  333. let returnDate = new Date(this.form.returnDate).getTime()
  334. let borrowDate = new Date(this.form.borrowDate).getTime()
  335. try{
  336. borrowAsset(borrowDate,returnDate,data).then(res=>{
  337. uni.hideLoading()
  338. // uni.showToast({
  339. // icon:"none",
  340. // title:"借用成功!"
  341. // })
  342. // uni.$u.toast('借用成功!')
  343. this.initAssets(res.assetBarCode,1,"正在借用中")
  344. })
  345. }catch(err){
  346. uni.hideLoading()
  347. }
  348. },
  349. toReturnAsset(){
  350. // uni.showLoading({
  351. // title: "正在归还中",
  352. // mask: true,
  353. // });
  354. returnAsset(this.assetObj.barCode).then(res=>{
  355. if(res.data.code===200 && res.data.msg==="归还成功"){
  356. uni.showToast({
  357. icon:"success",
  358. title:"归还成功!",
  359. mask:true
  360. })
  361. this.initAssets(this.assetObj.barCode,2,"正在归还中")
  362. }
  363. })
  364. }
  365. }
  366. }
  367. </script>
  368. <style lang="scss" scoped>
  369. .home{
  370. padding: 20rpx;
  371. display: flex;
  372. flex-direction: column;
  373. // height: 100vh;
  374. box-sizing: border-box;
  375. }
  376. .detail-area{
  377. height: 72%;
  378. border: 1px solid $uni-border-black;
  379. padding: 0 20rpx;
  380. overflow-y: scroll;
  381. }
  382. .borrow-date{
  383. border: 1px solid $uni-border-black;
  384. padding: 0 20rpx;
  385. margin-top: 20rpx;
  386. /deep/.u-picker__view__column__item{
  387. text-align: center;
  388. }
  389. /deep/.u-form-item__body__right__content__slot{
  390. height: 100%;
  391. }
  392. }
  393. .layout-row{
  394. border-top: 1rpx solid #d6d7d9;
  395. padding: 20rpx 0 ;
  396. }
  397. .demo-layout {
  398. height: 25px;
  399. }
  400. .btn-area{
  401. margin-top: 20rpx;
  402. padding: 0 250rpx;
  403. }
  404. .repair-btn{
  405. width: 80rpx;
  406. height: 80rpx;
  407. color: rgba(80, 80, 80, 1);
  408. border-radius: 50%;
  409. line-height: 150%;
  410. box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
  411. display: flex;
  412. align-items: center;
  413. justify-content: center;
  414. text-align: center;
  415. flex-direction: column;
  416. font-size: 36rpx;
  417. position: fixed;
  418. bottom: 20rpx;
  419. right: 20rpx;
  420. background: #ffffff;
  421. z-index:100;
  422. .iconfont{
  423. font-size: 42rpx;
  424. }
  425. }
  426. </style>