meetadd.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. <template>
  2. <view>
  3. <view class="navbox">
  4. <uni-nav-bar color="#ffffff" left-icon="left" title="会议预订" :background-color="backgroundColor"
  5. :border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
  6. </uni-nav-bar>
  7. </view>
  8. <image :src="navbg" class="navbg"></image>
  9. <view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
  10. <view class="ytbox">
  11. <uni-forms ref="form" class="ytforms" :rules="rules" :modelValue="datainfo">
  12. <!-- 预定会议室 -->
  13. <view v-show="stepval==1">
  14. <view class="ytsbox">
  15. <view class="yttit">选择会议室</view>
  16. <view class="mb12" v-for="(ite,idx) in hyslist" :key="ite.conferenceRoomId">
  17. <view class="mlists" :class="meetid==ite.conferenceRoomId?'act':''" @click="getMeetId(ite)">
  18. <view class="mtit">{{ite.conferenceRoomName}}</view>
  19. <view class="mtxt bga" v-if="ite.type=='N'"><text class="cir"></text>当前空闲</view>
  20. <view class="mtxt bgb" v-if="ite.type=='Y'"><text class="cir"></text>当前占用</view>
  21. </view>
  22. <!--已经预约的时间段 -->
  23. <view class="tlist" v-show="meetid==ite.conferenceRoomId">
  24. <view class="ttips flexc">
  25. <image :src="tipimg"></image>已预约时段
  26. </view>
  27. <block v-if="ite.conferenceRoomOrderList&&ite.conferenceRoomOrderList.length">
  28. <view class="ttime flexc" v-for="(tite,tidx) in ite.conferenceRoomOrderList" :key="tite.conferenceRoomOrderId">
  29. <view class="cir"></view>
  30. {{tite.startTime}} 至 {{tite.endTime}}
  31. </view>
  32. </block>
  33. <view v-else class="ttime">暂无数据</view>
  34. </view>
  35. </view>
  36. <view class="ybtn flexcc" @click="getNextFn">下一步</view>
  37. <view class="tips">* 为避免重复操作,请先选择会议室查看是否被占用。</view>
  38. </view>
  39. </view>
  40. <view v-show="stepval==2">
  41. <view class="ytsbox">
  42. <view class="yttit">填写预订信息</view>
  43. <view class="pt5">
  44. <uni-forms-item label="预定人员" class="disable" name="visitName">
  45. <view class="intit">{{datainfo.orderUser}}</view>
  46. </uni-forms-item>
  47. <uni-forms-item label="会议名称" name="conferenceName">
  48. <uni-easyinput :inputBorder="false" type="textarea" autoHeight v-model="datainfo.conferenceName"
  49. placeholder="输入会议名称">
  50. </uni-easyinput>
  51. </uni-forms-item>
  52. <uni-forms-item label="开始时间" name="startTime">
  53. <uni-datetime-picker v-model="datainfo.startTime" @change="getChangeaFn">
  54. <view class="pickbox flexc">
  55. <view :class="datainfo.startTime?'txr flex1':'coa txr flex1'">{{datainfo.startTime || "请选择开始时间"}}</view>
  56. <image :src="hupimg" class="hupimg"></image>
  57. </view>
  58. </uni-datetime-picker>
  59. </uni-forms-item>
  60. <uni-forms-item label="结束时间" name="endTime">
  61. <uni-datetime-picker v-model="datainfo.endTime" @change="getChangebFn" :start="datainfo.startTime">
  62. <view class="pickbox flexc">
  63. <view :class="datainfo.endTime?'txr flex1':'coa txr flex1'">{{datainfo.endTime || "请选择结束时间"}}</view>
  64. <image :src="hupimg" class="hupimg"></image>
  65. </view>
  66. </uni-datetime-picker>
  67. </uni-forms-item>
  68. <uni-forms-item label="参会人数" name="conferenceNumber">
  69. <uni-easyinput :inputBorder="false" v-model="datainfo.conferenceNumber"
  70. type="number"
  71. placeholder="输入参会人数">
  72. </uni-easyinput>
  73. </uni-forms-item>
  74. <view class="textarea">
  75. <uni-easyinput :inputBorder="false" type="textarea" autoHeight v-model="datainfo.remark"
  76. placeholder="请输入会议要求…">
  77. </uni-easyinput>
  78. </view>
  79. <view class="chose" @click="getCkFn">
  80. <image :src="choseimg" v-if="datainfo.useXk=='Y'"></image>
  81. <image :src="nchoseimg" v-else></image>
  82. 需要准备席卡
  83. </view>
  84. <!-- <uni-forms-item label="会议室" name="appointmentSite">
  85. <view class="flex1">
  86. <w-select
  87. :list='hyslist'
  88. v-model="chooseValue"
  89. valueName='conferenceRoomName'
  90. keyName="conferenceRoomId"
  91. :filterable='filterable'
  92. width='100%'
  93. height="36px"
  94. @change='getchangeb'
  95. >
  96. </w-select>
  97. </view>
  98. </uni-forms-item> -->
  99. </view>
  100. <view class="flexc">
  101. <view class="ybtn flexcc ybga mr20" @click="getPreFn">上一步</view>
  102. <view class="ybtn flexcc" @click="getSubmit">确认提交</view>
  103. </view>
  104. <view class="tips">* 为避免您的重复操作,请先仔细查看已预约时段。</view>
  105. </view>
  106. </view>
  107. </uni-forms>
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
  114. import {getRoomNoList,getRoomyyAdd,getRoomyyPut,getRoomyyDetail,getRoomtimeNoList} from "@/api/mine/work.js"
  115. import {getDictionaryFn} from "@/api/mine/register.js"
  116. import wSelect from "@/work/components/w-select/w-select.vue"
  117. export default {
  118. components: {wSelect},
  119. data() {
  120. return {
  121. hupimg:require("@/static/images/order/hup.png"),
  122. navbg:require("@/static/images/navbg.png"),
  123. tipimg:require("@/work/static/yuy/tips.png"),
  124. choseimg:require("@/work/static/yuy/chose.png"),
  125. nchoseimg:require("@/work/static/yuy/nchose.png"),
  126. backgroundColor: "transparent",
  127. nvaHeight: 44,
  128. marTop: 0, //距离顶部的距离
  129. stubarHeight: 0, //
  130. datainfo:{
  131. "conferenceRoomId": "",//会议室ID
  132. "conferenceRoomName": "",//会议室名称
  133. "conferenceRoomAddress": "",//会议室地址
  134. "orderUser": "",//会议室预约人员名称
  135. "orderUserId": "",//会议室预约人员id(用户id)
  136. "conferenceName": "",//会议名称
  137. "conferenceNumber": "",//会议室人数
  138. "startTime": "",//会议开始时间
  139. "endTime": "",//会议结束时间
  140. 'useXk':'N',//是否需要席卡 N:不需要 Y:需要
  141. 'remark':'',//说明
  142. },
  143. rules: {
  144. startTime: {rules: [{required: true,errorMessage: '请选择开始时间',}]},
  145. endTime: {rules: [{required: true,errorMessage: '请选择结束时间' } ]},
  146. conferenceRoomName: {rules: [{required: true,errorMessage: '请选择会议室'} ]},
  147. conferenceName: {rules: [{required: true,errorMessage: '请输入会议名称'} ]},
  148. conferenceNumber: {rules: [{required: true,errorMessage: '请输入会议人数'} ]},
  149. },
  150. meetid:0,
  151. hys:'',
  152. hysidx:'',
  153. hyslist:[],
  154. ptype:'add',
  155. stepval:1,//
  156. id:'',
  157. filterable:true,
  158. chooseValue:'',
  159. name:this.$store.state.user.name,
  160. userId:this.$store.state.user.userId,
  161. }
  162. },
  163. onPageScroll(e) {
  164. var scrollTop = Number(e.scrollTop);
  165. if (scrollTop > 0) {
  166. this.backgroundColor = '#0491FD'
  167. } else {
  168. this.backgroundColor = 'transparent'
  169. }
  170. },
  171. onLoad: function(e) {
  172. if(e.data){
  173. var data=JSON.parse(decodeURIComponent(e.data))
  174. if(data.type){
  175. this.ptype=data.type;
  176. this.id=data.id;
  177. this.getDetail()
  178. }
  179. }else{
  180. this.datainfo.orderUser=this.name;
  181. this.datainfo.orderUserId=this.userId;
  182. }
  183. // this.init()
  184. this.getRoomNoList()
  185. uni.getSystemInfo({
  186. success: (e) => {
  187. this.stubarHeight = Number(e.statusBarHeight);
  188. this.nvaHeight = Number(e.statusBarHeight) + 44;
  189. this.tabscheight = Number(this.nvaHeight) * 2 + 100;
  190. }
  191. })
  192. },
  193. onUnload() {
  194. uni.$off('refreshdatalist')
  195. },
  196. onShow() {},
  197. mounted() {
  198. this.getHeightFn()
  199. },
  200. methods: {
  201. checkPermi,
  202. checkRole,
  203. getBack() {
  204. uni.navigateBack({
  205. delta: 1
  206. })
  207. },
  208. bindTimeChangea(e){
  209. var val=e.detail.value;
  210. // this.day=val
  211. },
  212. getHeightFn() {
  213. let query = uni.createSelectorQuery().in(this);
  214. //需要给黄色区域设置一个id标识,在这里是demo
  215. query.select('.navbox').boundingClientRect(data => {
  216. var top = data.top < 0 ? -data.top : data.top;
  217. var stubarHeight = Number(this.stubarHeight);
  218. this.marTop = stubarHeight > 0 ? 692 - Number(data.height) * 2 : 692 - Number(data.height) *
  219. 2 + 40 //赋值,待会要用
  220. if (top <= this.nvaHeight) {
  221. const opacity = top / 100 // 计算透明度值
  222. const color = `rgba(4, 145, 253, ${opacity})`
  223. this.backgroundColor = color // 更新盒子背景颜色
  224. } else {
  225. this.backgroundColor = '#00A9F0'
  226. }
  227. }).exec();
  228. },
  229. init() {
  230. // 门卫
  231. // getDictionaryFn('is_read').then(res=>{
  232. // if(res.code==200){
  233. // this.ydztlist = res.data.map(v => {
  234. // return {
  235. // label: v.dictLabel,
  236. // value: v.dictValue
  237. // }
  238. // })
  239. // }
  240. // })
  241. },
  242. statusFormat(ite,list,type) {
  243. var aite=selectValueKey(list, ite);
  244. if(type=='hys'){
  245. this.hysidx=aite.key
  246. }
  247. return aite.actions;
  248. },
  249. getChangeaFn(e){
  250. this.datainfo.startTime=e
  251. var endTime=this.datainfo.endTime;
  252. if(endTime){
  253. var startime=new Date(e).getTime()
  254. var endtime=new Date(endTime).getTime()
  255. if(startime>endtime){
  256. this.$toast('开始时间大于开始时间')
  257. this.datainfo.endTime=''
  258. }
  259. }
  260. },
  261. getChangebFn(e){
  262. var that=this;
  263. var startt=this.datainfo.startTime;
  264. if(!startt){
  265. this.$toast('请选择开始时间')
  266. setTimeout(function(){
  267. that.datainfo.endTime='';
  268. },200)
  269. return
  270. }
  271. var startime=new Date(startt).getTime()
  272. var endtime=new Date(e).getTime()
  273. if(startime>endtime){
  274. setTimeout(function(){
  275. that.datainfo.endTime='';
  276. },200)
  277. this.$toast('请选择时间大于开始时间')
  278. return
  279. }
  280. this.datainfo.endTime=e
  281. },
  282. getMeetId(ite){
  283. var id=ite.conferenceRoomId;
  284. var name=ite.conferenceRoomName;
  285. var adress=ite.conferenceRoomAddress
  286. this.meetid=id;
  287. this.datainfo.conferenceRoomId=id;
  288. this.datainfo.conferenceRoomName=name;
  289. this.datainfo.conferenceRoomAddress=adress;
  290. },
  291. getCkFn(){
  292. var useXk=this.datainfo.useXk;
  293. if(useXk=='Y'){
  294. this.datainfo.useXk='N'
  295. }else{
  296. this.datainfo.useXk='Y'
  297. }
  298. },
  299. getPreFn(){
  300. uni.pageScrollTo({
  301. scrollTop: 0,
  302. duration: 0
  303. })
  304. this.stepval=Number(this.stepval)-1
  305. },
  306. getNextFn(){
  307. if(!this.datainfo.conferenceRoomId){
  308. this.$toast("请选择会议室")
  309. return
  310. }
  311. uni.pageScrollTo({
  312. scrollTop: 0,
  313. duration: 0
  314. })
  315. this.stepval=Number(this.stepval)+1
  316. },
  317. getSubmit(){
  318. var that=this;
  319. this.$refs.form.validate().then(res => {
  320. var params = JSON.parse(JSON.stringify(this.datainfo))
  321. if(this.ptype=='add'){
  322. getRoomyyAdd(params).then(res => {
  323. if (res.code == 200) {
  324. this.$toast("新增成功")
  325. uni.$emit('refreshmeetlist')
  326. setTimeout(function(){
  327. uni.navigateBack({
  328. delta:1
  329. })
  330. },1200)
  331. } else {
  332. this.$toast(res.msg)
  333. }
  334. })
  335. }else{
  336. getRoomyyPut(params).then(res => {
  337. if (res.code == 200) {
  338. this.$toast("修改成功")
  339. uni.$emit('refreshmeetlist')
  340. setTimeout(function(){
  341. uni.navigateBack({
  342. delta:1
  343. })
  344. },1200)
  345. } else {
  346. this.$toast(res.msg)
  347. }
  348. })
  349. }
  350. })
  351. },
  352. getchangeb(e){
  353. this.datainfo.conferenceRoomId=e.conferenceRoomId;
  354. this.datainfo.conferenceRoomName=e.conferenceRoomName;
  355. this.datainfo.conferenceRoomAddress=e.conferenceRoomAddress;
  356. },
  357. getRoomNoList() {
  358. getRoomNoList().then(res => {
  359. if (res.code == 200) {
  360. this.hyslist=res.rows
  361. } else {
  362. this.$toast(res.msg)
  363. }
  364. })
  365. },
  366. getDetail(){
  367. getRoomyyDetail(this.id).then(res=>{
  368. if(res.code==200){
  369. this.datainfo=res.data;
  370. this.meetid=res.data.conferenceRoomId;
  371. // this.chooseValue=res.data.conferenceRoomId
  372. }
  373. })
  374. }
  375. },
  376. }
  377. </script>
  378. <style>
  379. /* page {
  380. background: #ffffff;
  381. } */
  382. </style>
  383. <style lang="scss" scoped>
  384. .ytbox /deep/ .uni-forms .uni-forms-item{padding: 10rpx 26rpx 10rpx;border: 2rpx solid #0391FD;margin-bottom: 24rpx;border-radius: 12rpx;min-height: 90rpx;}
  385. .ytbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #161616;text-align-last: justify;height: 66rpx;}
  386. .ytbox /deep/ .uni-forms-item__label text{flex: 1;}
  387. .ytbox /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
  388. .ytbox /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
  389. .ytbox .textarea /deep/ uni-textarea{flex: 1;width: auto;text-align: left;padding: 26rpx;font-size: 28rpx;min-height: 192rpx;box-sizing: border-box;border-radius: 3px;
  390. border: 2rpx solid #0391FD;margin: 0;}
  391. .ytbox /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #aaaaaa !important;}
  392. .ytbox /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #aaaaaa;}
  393. .ytbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
  394. .ytbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
  395. .ytbox /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
  396. .ytbox /deep/ .uni-forms-item__error{margin-top:0rpx;left: auto;right: 0;}
  397. .ytbox /deep/ .uni-easyinput__content-textarea{min-height: 42rpx;}
  398. .disable{background: #EFF0F2;border: none !important;}
  399. .ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;background-color: #ffffff;padding-bottom: 4rpx;border-radius: 14rpx;}
  400. .ytforms{
  401. .yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 56rpx;
  402. color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;box-sizing: border-box;position: relative;
  403. &::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
  404. }
  405. .ytsbox{background-color: #ffffff;padding: 32rpx 28rpx 0;border-radius: 14rpx;margin-bottom: 24rpx;
  406. .intit{font-weight: 500;flex: 1;font-size: 26rpx;text-align: right;color: #666666;}
  407. .pickbox{flex: 1;text-align: right;font-weight: 500;font-size: 28rpx;color: #161616;
  408. .hupimg{width: 18rpx;height: 14rpx;margin-left: 12rpx;flex: 0 0 auto;}
  409. }
  410. .chose{display: flex;align-items: center;font-weight: 500;font-size: 28rpx;color: #161616;margin-top: 34rpx;
  411. image{width: 26rpx;height: 24rpx;margin-right: 18rpx;flex: 0 0 auto;}
  412. }
  413. }
  414. }
  415. // 按钮
  416. .ybtn{width: 100%;height: 90rpx;background: $com-cd3;border-radius: 14rpx;margin: 100rpx auto 0;font-size: 28rpx;font-weight: 500;color: #FFFFFF;
  417. &.btn1{background-color: #9a9c9e;}
  418. &.ybga{background-color: #e6efff;color:#0391fd ;}
  419. }
  420. .tips{font-weight: bold;margin-top: 28rpx;
  421. font-size: 22rpx;line-height: 34rpx;
  422. color: #FF0000;}
  423. .navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4; }
  424. .navbg{width: 100%;height: 692rpx;}
  425. .zxmain{position: relative;padding: 20rpx 32rpx 40rpx;box-sizing: border-box;display: flex;
  426. min-height: calc(100vh - 44px);
  427. }
  428. // 会议室列表
  429. .mlists{display: flex;align-items: center;border-radius: 6rpx;border: 2rpx solid #C1C1C1;min-height: 90rpx;box-sizing: border-box;
  430. padding: 24rpx 26rpx;
  431. &.act{border: 2rpx solid #0391FD;
  432. .mtit{font-weight: bold;color: #0391FD;}
  433. }
  434. .mtit{font-weight: 500;font-size: 28rpx;color: #161616;flex: 1;margin-right: 16rpx;}
  435. .mtxt{font-weight: 500;font-size: 26rpx;flex: 0 0 auto;
  436. &.bga{color: #0AC86E;
  437. .cir{background: #0AC86E;}
  438. }
  439. &.bgb{color: #FF6969;
  440. .cir{background: #FF6969;}
  441. }
  442. .cir{width: 12rpx;height: 12rpx;margin-right: 16rpx;border-radius: 50%;display: inline-block;}
  443. }
  444. }
  445. .tlist{padding-top: 30rpx;
  446. .ttips{font-weight: bold;font-size: 28rpx;color: #161616;
  447. image{width: 26rpx;height: 28rpx;margin-right: 16rpx;flex: 0 0 auto;}
  448. }
  449. // padding: 24rpx 0 36rpx 38rpx;
  450. .ttime{font-weight: 500;font-size: 26rpx;color: #161616;padding-left: 38rpx;padding-top: 24rpx;margin-bottom: 8rpx;
  451. &:last-child{margin-bottom: 0;}
  452. .cir{width: 12rpx;height: 12rpx;background: #FFB132;border-radius: 50%;flex: 0 0 auto;margin-right: 22rpx;
  453. }
  454. }
  455. }
  456. </style>