snapshotAdd.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <!-- 随手拍-添加 -->
  2. <template>
  3. <view class="examine">
  4. <view class="header" @click="handleClick('manage')">
  5. <text>随手拍管理</text>
  6. <img src="@/pages_safetyExamine/images/icon_04.png">
  7. </view>
  8. <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
  9. <view class="basics">
  10. <view class="basics_li">
  11. <view class="basics_li_l">学院</view>
  12. <picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="scope_r">
  13. <view class="basics_li_r college_r">
  14. <view>{{form.deptName?form.deptName:'选择学院'}}</view>
  15. <img src="@/pages_safetyExamine/images/icon_06.png">
  16. </view>
  17. </picker>
  18. </view>
  19. <view class="basics_li">
  20. <view class="basics_li_l">实验室</view>
  21. <view class="basics_li_r lab_r">
  22. <input class="picker-text" @click="popupClick(1)" type="text" disabled v-model="form.subName" placeholder="请选择房间" placeholder-style="font-size: 30rpx;color:#333;">
  23. <view class="img-box" @click.stop="saoCode">
  24. <img src="@/pages_safetyExamine/images/icon_aqjc_sm.png">
  25. </view>
  26. </view>
  27. </view>
  28. <view class="check-for-input-max-box">
  29. <view class="left-title-p">隐患描述:</view>
  30. <textarea type="text" v-model="form.hazardDescribe" maxlength="50" placeholder="请输入隐患描述" placeholder-style="font-size:28rpx;color:#999;"></textarea>
  31. </view>
  32. <view class="check-for-img-max-box">
  33. <view class="left-title-p">隐患照片(最多上传5张):</view>
  34. <view class="right-img-box">
  35. <view class="img-box" v-for="(imgUrl,imgIndex) in form.imgDtoList" :key="imgIndex">
  36. <img class="img-data" :src="configURL+imgUrl.fileUrl">
  37. <img class="position-img" src="@/pages_manage/images/icon_ssp_closure.png" @click="delImg(imgIndex)">
  38. </view>
  39. <img class="add-button" src="@/pages_manage/images/icon_07.png" @click="selectImage()" v-if="form.imgDtoList.length<5">
  40. </view>
  41. </view>
  42. </view>
  43. <view class="record" ><text @click="handleClick('self')">随手拍上报记录</text></view>
  44. </scroll-view>
  45. <!-- 房间选择弹出层 -->
  46. <view class="popup-max-box" v-if="popupType">
  47. <view class="popup-null" @click="popupClick(2)"></view>
  48. <view class="popup-big-box">
  49. <view class="popup-input-box">
  50. <input type="text" maxlength="10" v-model="room" placeholder="请输入关键字">
  51. <view @click="buildBySub">搜索</view>
  52. </view>
  53. <view class="popup-for-max-box">
  54. <view class="popup-for-null" v-if="!roomList[0]">暂无数据</view>
  55. <view class="popup-for-box" v-for="(item,index) in roomList" :key="index">
  56. <view class="name-p">{{item.name}} ({{item.room}})</view>
  57. <view class="button-p" @click="popupClickItem(item)">确定</view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="bottom_btn" @click="submitForm()">提交</view>
  63. </view>
  64. </template>
  65. <script>
  66. import { config } from '@/api/request/config.js'
  67. import { buildBySub,conditionCollegeInfo,checkClapAdd,subjectList,getUserCollegCheck,listDepartments} from '@/api/index.js'
  68. export default {
  69. name: "rectifyList",
  70. components: {
  71. },
  72. data() {
  73. return {
  74. configURL:config.base_url,
  75. pageType:0,
  76. //列表请求参数
  77. getData:{
  78. pageNum:1,
  79. pageSize:20,
  80. },
  81. form:{
  82. deptId:'',
  83. deptName:'',
  84. subId:'',
  85. subName:'',
  86. hazardDescribe:'',
  87. imgDtoList:[],
  88. },
  89. collegeIndex :0,
  90. collegeArray:[],
  91. categoryIndex :0,
  92. collegeList:[],
  93. categoryArray:['校级巡查','院级巡查'],
  94. planIndex :0,
  95. planArray:['请选择巡查计划标题','2023年3月份校级督导检查','2023年4月份校级督导检查'],
  96. resultIndex :0,
  97. resultArray:['不符合','符合'],
  98. informIndex:0,
  99. informArray:['整改告知书','整改通知书'],
  100. //房间弹层 状态
  101. popupType:false,
  102. //房间搜索字段
  103. room:"",
  104. roomList:[],
  105. }
  106. },
  107. onLoad(option) {
  108. },
  109. onShow() {
  110. },
  111. mounted(){
  112. this.listDepartments();
  113. this.getUserCollegCheck();
  114. },
  115. methods: {
  116. //滚动事件
  117. scrollGet(){},
  118. handleClick(doType){
  119. let self=this;
  120. if( doType=='manage'){//随手拍管理
  121. uni.redirectTo({
  122. url: '/pages_safetyExamine/snapshotManage/snapshotList?pageType=1'
  123. });
  124. }else if(doType=='self'){//随手拍上报记录
  125. uni.redirectTo({
  126. url: '/pages_safetyExamine/snapshotManage/snapshotList?pageType=2'
  127. });
  128. }else if(doType=='subBtn'){//提交
  129. }
  130. },
  131. collegeChange(e){
  132. this.collegeIndex = e.target.value;
  133. this.form.deptId=this.collegeList[e.target.value].deptId
  134. this.form.deptName=this.collegeList[e.target.value].deptName
  135. },
  136. // 图片上传
  137. selectImage() {
  138. let self = this;
  139. if(this.form.imgDtoList.length>4){
  140. uni.showToast({
  141. title: '最多上传5张图片',
  142. icon:"none",
  143. mask:true,
  144. duration: 2000
  145. });
  146. return
  147. }
  148. wx.chooseImage({
  149. count: 5,
  150. sizeType: ["original", "compressed"],
  151. sourceType: ["album", "camera"],
  152. success: function(res) {
  153. //let tempFilePaths = res.tempFilePaths[0];
  154. self.uploadImg(res.tempFilePaths);
  155. }
  156. });
  157. },
  158. async uploadImg(tempFilePaths){
  159. var self = this;
  160. uni.showLoading({
  161. title: '上传中',
  162. mask: true
  163. });
  164. for(let i=0;i<tempFilePaths.length;i++){
  165. console.log(tempFilePaths[i])
  166. uni.uploadFile({
  167. url: config.base_url+'/base/file/upload', //仅为示例,非真实的接口地址
  168. header:{'Authorization':uni.getStorageSync('token')},
  169. filePath: tempFilePaths[i],
  170. name: 'file',
  171. formData: {
  172. 'user': 'test'
  173. },
  174. success: (uploadFileRes) => {
  175. let res = JSON.parse(uploadFileRes.data);
  176. console.log(res.data)
  177. if(res.code == 200){
  178. this.form.imgDtoList.push({'fileUrl':res.data.url,'fileName':res.data.name});
  179. console.log(res.data.url)
  180. }else{
  181. uni.showToast({
  182. title: res.msg,
  183. icon:"none",
  184. mask:true,
  185. duration: 2000
  186. });
  187. }
  188. },
  189. fail: err => {},
  190. complete: () => {
  191. uni.hideLoading()
  192. }
  193. });
  194. }
  195. },
  196. //删除图片
  197. delImg(minIndex){
  198. this.form.imgDtoList.splice(minIndex,1);
  199. this.$forceUpdate();
  200. },
  201. //搜索房间弹层开关
  202. popupClick(type){
  203. if(type == 1){
  204. this.room = "";
  205. this.roomList = [];
  206. this.popupType = true;
  207. }else if(type == 2){
  208. this.popupType = false;
  209. }
  210. },
  211. //搜索房间接口
  212. async buildBySub(){
  213. let self = this;
  214. if(!this.room){
  215. uni.showToast({
  216. title: '请输入要搜索房间号',
  217. icon:"none",
  218. mask:true,
  219. duration: 2000
  220. });
  221. return
  222. }
  223. const {data} = await buildBySub({'name':this.room,'deptId':this.form.deptId});
  224. if(data.code==200){
  225. if(data.data[0]){
  226. this.roomList = data.data;
  227. }else{
  228. uni.showToast({
  229. title: '未找到相关房间',
  230. icon:"none",
  231. mask:true,
  232. duration: 2000
  233. });
  234. }
  235. }
  236. },
  237. //确认搜索房间
  238. popupClickItem(item){
  239. console.log(item)
  240. this.$set(this.form,"subId",item.id)
  241. this.$set(this.form,"subName",item.name)
  242. this.$set(this.form,"deptId",item.deptId)
  243. for(let i=0;i<this.collegeList.length;i++){
  244. if(item.deptId==this.collegeList[i].deptId){
  245. this.$set(this.form,"deptName",this.collegeList[i].deptName)
  246. }
  247. }
  248. this.popupType = false;
  249. },
  250. //调用摄像头
  251. saoCode(){
  252. let self = this;
  253. uni.scanCode({
  254. onlyFromCamera: true,
  255. success: function (res) {
  256. if(res.result.indexOf("code") != -1 && res.result.indexOf("-") != -1 && res.result.indexOf("&") != -1){
  257. let codeRoom = "";
  258. let newList = res.result.split("?")[1].split("&")
  259. let list = newList[0].split("=")[1].split("-")
  260. codeRoom = list[1];
  261. if(codeRoom){
  262. self.roomList = [];
  263. self.room = codeRoom;
  264. self.buildBySub();
  265. self.popupType = true;
  266. }else{
  267. uni.showToast({
  268. title: '请扫描正确的二维码',
  269. icon:"none",
  270. mask:true,
  271. duration: 2000
  272. });
  273. }
  274. }else{
  275. uni.showToast({
  276. title: '请扫描正确的二维码',
  277. icon:"none",
  278. mask:true,
  279. duration: 2000
  280. });
  281. }
  282. }
  283. });
  284. },
  285. //查询用户身份信息
  286. async getUserCollegCheck(){
  287. let _this = this;
  288. const {data} = await getUserCollegCheck();
  289. if(data.code == 200){
  290. this.form.deptId=data.data.dept.deptId;
  291. this.form.deptName=data.data.dept.deptName;
  292. }
  293. },
  294. //查询学院列表
  295. async listDepartments(){
  296. let _this = this;
  297. const {data} = await listDepartments();
  298. if(data.code == 200){
  299. for(let i=0;i<data.data.length;i++){
  300. _this.collegeArray.push(data.data[i].deptName)
  301. }
  302. _this.collegeList=data.data;
  303. }
  304. },
  305. //添加
  306. async submitForm(){
  307. let _this = this;
  308. const {data} = await checkClapAdd(_this.form);
  309. if(data.code == 200){
  310. uni.showToast({
  311. title: '提交成功',
  312. icon:"none",
  313. mask:true,
  314. duration: 2000
  315. });
  316. uni.redirectTo({
  317. url: '/pages_safetyExamine/snapshotManage/snapshotList?pageType=2'
  318. });
  319. }
  320. },
  321. }
  322. }
  323. </script>
  324. <style lang="stylus" scoped>
  325. .examine{
  326. height:100%;
  327. display flex;
  328. box-sizing: border-box;
  329. .info-max-box{
  330. flex: 1;
  331. overflow: scroll;
  332. padding: 120rpx 0rpx 128rpx;
  333. box-sizing: border-box;
  334. }
  335. .header{
  336. width: 749rpx;
  337. height: 100rpx;
  338. background: #FFFFFF;
  339. padding:0 40rpx 0 30rpx;
  340. box-sizing: border-box;
  341. display: flex;
  342. justify-content: space-between;
  343. align-items: center;
  344. position: fixed;
  345. left: 0;
  346. top: 0;
  347. >text{
  348. font-size: 30rpx;
  349. font-family: PingFang SC-Medium, PingFang SC;
  350. font-weight: 400;
  351. color: #333333;
  352. line-height: 42rpx;
  353. }
  354. >img{
  355. width: 8rpx;
  356. height: 14rpx;
  357. }
  358. }
  359. .basics{
  360. margin: 0 30rpx;
  361. width: 690rpx;
  362. background: #FFFFFF;
  363. border-radius: 20rpx;
  364. padding: 30rpx 28rpx 30rpx;
  365. box-sizing: border-box;
  366. .basics_li{
  367. display: flex;
  368. justify-content: flex-start;
  369. margin-bottom: 24rpx;
  370. .basics_li_l{
  371. width: 146rpx;
  372. text-align: left;
  373. font-size: 30rpx;
  374. font-family: PingFang SC-Medium, PingFang SC;
  375. font-weight: 400;
  376. color: #333333;
  377. line-height: 80rpx;
  378. }
  379. .basics_li_r{
  380. width: 486rpx;
  381. height: 80rpx;
  382. border-radius: 10rpx;
  383. opacity: 1;
  384. border: 1rpx solid #E0E0E0;
  385. padding-left: 20rpx;
  386. box-sizing: border-box;
  387. }
  388. /* 学院 */
  389. .college_r{
  390. width: 486rpx;
  391. height: 80rpx;
  392. border-radius: 10rpx;
  393. border: 1rpx solid #E0E0E0;
  394. display: flex;
  395. justify-content: flex-start;
  396. align-items: center;
  397. >view{
  398. flex:1;
  399. line-height:80rpx;
  400. font-size: 30rpx;
  401. font-family: PingFang SC-Medium, PingFang SC;
  402. font-weight: 400;
  403. color: #333333;
  404. line-height: 80rpx;
  405. }
  406. >img{
  407. width: 14rpx;
  408. height: 8rpx;
  409. margin-right: 30rpx;
  410. }
  411. }
  412. /* 实验室 */
  413. .lab_r{
  414. width: 486rpx;
  415. height: 80rpx;
  416. display: flex;
  417. justify-content: flex-start;
  418. .picker-text{
  419. width: 438rpx;
  420. height: 80rpx;
  421. }
  422. .img-box{
  423. width: 48rpx;
  424. >img{
  425. width:30rpx;
  426. height:28rpx;
  427. margin:26rpx 18rpx 0 0;
  428. }
  429. }
  430. }
  431. }
  432. /* 隐患描述 */
  433. .check-for-input-max-box{
  434. .left-title-p{
  435. width:150rpx;
  436. line-height:80rpx;
  437. text-align right
  438. font-size:30rpx;
  439. }
  440. textarea{
  441. width: 630rpx;
  442. height: 158rpx;
  443. border-radius: 20rpx 20rpx 20rpx 20rpx;
  444. border: 1rpx solid #E0E0E0;
  445. padding: 20rpx 14rpx;
  446. box-sizing: border-box;
  447. font-size: 30rpx;
  448. font-family: PingFang SC-Medium, PingFang SC;
  449. font-weight: 400;
  450. color: #333333;
  451. line-height: 34rpx;
  452. }
  453. }
  454. /* 隐患照片 */
  455. .check-for-img-max-box{
  456. .left-title-p{
  457. width: 100%;
  458. text-align: left;
  459. font-size: 30rpx;
  460. font-family: PingFang SC-Medium, PingFang SC;
  461. font-weight: 400;
  462. color: #333333;
  463. line-height: 80rpx;
  464. }
  465. .right-img-box{
  466. .img-box{
  467. display inline-block;
  468. height:200rpx;
  469. width:200rpx;
  470. position relative
  471. margin:0 14rpx 20rpx 0;
  472. border-radius 10rpx;
  473. overflow hidden;
  474. .img-data{
  475. height:200rpx;
  476. width:200rpx;
  477. }
  478. .position-img{
  479. position absolute
  480. right:0;
  481. top:0;
  482. width:36rpx;
  483. height:36rpx;
  484. }
  485. }
  486. .img-box:nth-of-type(3n+3){
  487. margin-right: 0rpx;
  488. }
  489. .add-button{
  490. margin:0 0rpx 20rpx 0;
  491. border-radius 10rpx;
  492. overflow hidden;
  493. display inline-block
  494. height:200rpx;
  495. width:200rpx;
  496. }
  497. }
  498. }
  499. }
  500. .record{
  501. overflow: hidden;
  502. >text{
  503. display: block;
  504. width: 220rpx;
  505. height: 40rpx;
  506. background: #E0E0E0;
  507. border-radius: 60rpx 60rpx 60rpx 60rpx;
  508. margin: 122rpx 0 90rpx 266rpx;
  509. font-size: 26rpx;
  510. font-family: PingFang SC-Medium, PingFang SC;
  511. font-weight: 400;
  512. color: #0183FA;
  513. line-height: 40rpx;
  514. text-align: center;
  515. }
  516. }
  517. .popup-max-box{
  518. z-index:10;
  519. height:100%;
  520. width:100%;
  521. position fixed;
  522. background rgba(0,0,0,0.2)
  523. display flex;
  524. flex-direction column
  525. .popup-null{
  526. flex:1;
  527. }
  528. .popup-big-box{
  529. border-top-left-radius:20rpx;
  530. border-top-right-radius:20rpx;
  531. background #fff
  532. .popup-input-box{
  533. padding:30rpx 20rpx;
  534. display:flex;
  535. input{
  536. flex:1;
  537. height:70rpx;
  538. border:1rpx solid #e0e0e0;
  539. border-radius:10rpx;
  540. margin-right:20rpx;
  541. padding:0 20rpx;
  542. }
  543. view{
  544. background #0183FA
  545. color:#fff;
  546. border-radius:10rpx;
  547. width:140rpx;
  548. line-height:70rpx;
  549. text-align center;
  550. font-size:28rpx;
  551. }
  552. }
  553. .popup-for-max-box{
  554. margin:0 20rpx 30rpx;
  555. height:600rpx;
  556. overflow-y scroll;
  557. .popup-for-null{
  558. line-height:100rpx;
  559. text-align center
  560. color:#999;
  561. }
  562. .popup-for-box{
  563. display:flex;
  564. padding:10px 0;
  565. .name-p{
  566. flex:1;
  567. line-height:60rpx;
  568. }
  569. .button-p{
  570. background #0183FA
  571. color:#fff;
  572. text-align center
  573. width:100rpx;
  574. line-height:60rpx;
  575. height:60rpx;
  576. border-radius:10rpx;
  577. }
  578. }
  579. }
  580. }
  581. }
  582. .bottom_btn{
  583. position: fixed;
  584. bottom: 26rpx;
  585. left: 30rpx;
  586. font-size: 30rpx;
  587. font-family: PingFang SC-Medium, PingFang SC;
  588. font-weight: 400;
  589. color: #FFFFFF;
  590. line-height: 90rpx;
  591. width: 690rpx;
  592. height: 90rpx;
  593. background: #0183FA;
  594. border-radius: 20rpx;
  595. text-align: center;
  596. }
  597. }
  598. </style>