<template> <view > <view class="bgtop"></view> <uni-forms :modelValue="datainfo"> <view class="addbox"> <view class="boxs pdbox" style="padding-bottom: 2rpx;"> <view class="titbox mb14"> <view class="tit flexc"> <image :src="titimg"></image> <view>基本详情</view> </view> </view> <uni-forms-item label="会议名称" name="conferenceTitle" required> <uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceTitle" placeholder="请输入会议名称" /> <!-- <view class="edtip pa">* 标题前无须加关于,标题后无须加的建议,系统将自动填写</view> --> </uni-forms-item> <!-- 会议类型 --> <picker range-key='label' :value="hylxidx" :range="hylxlist" @change='bindDateChangec'> <uni-forms-item label="会议类型" name="activityId" required> <view class="lbtabp"> <view v-if="datainfo.conferenceType&&!hylxtxt">{{statusFormat(datainfo.conferenceType,hylxlist,'hylx')}}</view> <view v-else :class="hylxtxt?'':'coa'">{{hylxtxt||"请选择会议类型"}}</view> </view> </uni-forms-item> </picker> <picker mode="date" @change='bindDateChangea'> <uni-forms-item label="会议日期" name="conferenceDate" required> <view class="lbtabp"> <view :class="datainfo.conferenceDate?'':'coa'">{{datainfo.conferenceDate || "请选择会议日期"}}</view> </view> </uni-forms-item> </picker> <picker mode="time" @change='bindDateChangeb'> <uni-forms-item label="会议时间" name="conferenceTime" required> <view class="lbtabp"> <view :class="datainfo.conferenceTime?'':'coa'">{{datainfo.conferenceTime || "请选择会议时间"}}</view> </view> </uni-forms-item> </picker> <uni-forms-item label="会议地点" name="conferenceAddress" required> <uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceAddress" placeholder="请输入会议地点" /> </uni-forms-item> </view> <!-- 参会人员 --> <view class="boxs pdbox"> <view class="titbox mb14 flexc"> <view class="tit flexc flex1"> <image :src="titimg"></image> <view>参会人员</view> </view> <view class="addpeo" @click="getAddPeoFn"> <image :src="addimg"></image> 添加人员 </view> </view> <view class="peoBox"> <block v-if="datainfo.zxConferenceUserList&&datainfo.zxConferenceUserList.length"> <view v-for="(ite,idx) in datainfo.zxConferenceUserList" :key="idx">{{ite.userName||ite.name}} <block v-if="idx<datainfo.zxConferenceUserList.length-1">,</block> </view> </block> <view class="coa" v-else>请选择参会人员</view> </view> </view> <view class="boxs pdbox"> <view class="titbox mb14"> <view class="tit flexc"> <image :src="titimg"></image> <view>附件内容</view> </view> </view> <view class="flexcj mb10"> <view class="fw f15 co34">添加附件</view> <view class="fjadd"><lsj-upload ref="lsjUpload" childId="upload1" :width="width" :height="height" :option="option" :size="size" :formats="formats" :debug="debug" :instantly="instantly" @progress="" @uploadEnd="onuploadEnd" > <view class="btn" :style="{width: width,height: height}">上传附件</view> </lsj-upload> </view> </view> <view class="ptb12" v-if="filelist&&filelist.length"> <view class="fjlists" v-for="(ite,idx) in filelist" :key='idx'> <view class="flext" @click="getDown(ite.url)"> <view class="imgl"><image :src="fjimg" ></image></view> <view class="tit">{{ite.name}}</view> </view> <!-- 删除 --> <view class="delimg flex0" @click.stop="getDelFj(idx)"> <image :src="delimg"></image> </view> </view> </view> </view> <view class="boxs pdbox"> <view class="titbox mb20"> <view class="tit flexc"> <view>备注信息</view> </view> </view> <textarea placeholder="请输入备注信息" v-model="datainfo.remark"></textarea> </view> <view class="addbtn"> <!-- <view class="btn btn1" @click="getZanFnt">暂存</view> --> <view class="btn btn2" v-if="checkPermi(['zxNotice:notice:add'])&&pagetype=='add'||checkPermi(['zxNotice:notice:edit'])&&pagetype=='edit'" @click="getSubmit">提交</view> </view> </view> </uni-forms> </view> </template> <script> import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数 import config from '@/config' const baseUrl = config.baseUrl import { getToken } from '@/utils/auth' import { selectValue,selectValueKey } from '@/utils/common.js'; import {getMeetAddFn,getMeetDetaiFn,getMeetEditFn} from "@/api/mine/meeting.js" import {getDictionaryFn} from "@/api/mine/register.js" export default{ data(){ return{ //附件 option: { // 上传服务器地址,需要替换为你的接口地址 url: baseUrl+'/common/upload', // 该地址非真实路径,需替换为你项目自己的接口地址 // 上传附件的key name: 'file', // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配 header: { // 示例参数可删除 'Authorization': 'Bearer ' + getToken(), }, // 根据你接口需求自定义body参数 formData: {} }, // 选择文件后是否立即自动上传,true=选择后立即上传 instantly: true, // 必传宽高且宽高应与slot宽高保持一致 width: '', height: '48rpx', // 限制允许上传的格式,空串=不限制,默认为空 formats: 'doc,docx,xls,xlsx,ppt,txt,pdf,zip,rar,word,png,jpg,jpeg', // 文件上传大小限制 size: 100, // 文件数量限制 默认10 count: 5, // 文件回显列表 files: new Map(), // 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道 wxFiles: [], // 是否打印日志 debug: false, filelist:[], fjimg:require("@/work/static/images/fjimg.png"), delimg:require("@/work/static/images/delimg.png"), titimg:require("@/work/static/images/titbg.png"), addimg:require("@/work/static/images/meeting/add.png"), datainfo:{ "conferenceTitle":"",//会议名称 "conferenceDate":"",//会议日期 "conferenceTime":"",//会议时间 "conferenceAddress":"",//会议地点, "remark":'',//备注 'zxConferenceUserList':[],//参会人员 }, id:"", pagetype:'add', editinfo:'', hylxlist:[], hylxtxt:'', hylxidx:"", } }, onUnload(){ uni.$off('refreshtalb') }, onLoad(e) { uni.$on('refreshtalb', (e) => { this.datainfo.zxConferenceUserList=e.zxConferenceUserList }) if(e.type=='edit'){ this.id=e.id; this.pagetype='edit' this.getDetail() } this.init() if(e.type=='old'&&uni.getStorageSync('cjhyList')){ var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('cjhyList'))) var params=newObj.params; this.datainfo=params; this.filelist=this.datainfo.zxFjList } }, methods:{ checkPermi, checkRole, // 会议类型 init(){ getDictionaryFn('conference_type').then(res=>{ if(res.code==200&&res.data.length){ this.hylxlist = res.data.map(v => { return { label: v.dictLabel, value:v.dictValue } }) } }) }, kayType(ite,list){ return selectValue(list, ite); }, statusFormat(ite,list,type) { var aite=selectValueKey(list, ite); if(type=='hylx'){ this.hylxidx=aite.key } return aite.actions; }, bindDateChangea(e){ var val=e.detail.value; this.datainfo.conferenceDate=val; }, bindDateChangeb(e){ var val=e.detail.value; this.datainfo.conferenceTime=val+':00'; }, bindDateChangec(e){ var val=e.detail.value; this.datainfo.conferenceType=this.hylxlist[val].value; this.hylxtxt=this.hylxlist[val].label; }, getDetail(){ var that=this; var params={ conferenceId:this.id } getMeetDetaiFn(params).then(res=>{ if(res.code==200){ var data=res.data; this.datainfo=res.data; if(data.zxFjList&&data.zxFjList.length){ this.filelist=JSON.parse(JSON.stringify(data.zxFjList)) } } }) }, getAddPeoFn(){ var obj={ list:this.datainfo.zxConferenceUserList, } this.$tab.navigateTo('/work/pages/meeting/people?data='+encodeURIComponent(JSON.stringify(obj))) }, gettalbFn(){ }, // 暂存 getZanFnt(){ var that=this; var params=that.datainfo; var obj={ params:params, } uni.setStorageSync('cjhyList', JSON.parse(JSON.stringify(obj))) that.$toast("暂存成功") }, getSubmit(){ var that=this; if(!this.datainfo.conferenceTitle){ this.$toast("请输入会议名称") return } if(!this.hylxtxt){ this.$toast("请选择会议类型") return } if(!this.datainfo.conferenceDate){ this.$toast("请选择会议日期") return } if(!this.datainfo.conferenceTime){ this.$toast("请选择会议时间") return } if(!this.datainfo.conferenceAddress){ this.$toast("请输入会议地点") return } if(this.datainfo.zxConferenceUserList.length<1){ this.$toast("请选择会议人员") return } var params=this.datainfo if(that.pagetype=='add'){ getMeetAddFn(params).then(res=>{ if(res.code==200){ that.$toast("提交成功") uni.removeStorageSync('cjhyList') uni.$emit("refreshlist") setTimeout(function(){ uni.navigateBack({ delta: 1 //返回层数,2则上上页 }); },1200) } }) }else{ getMeetEditFn(params).then(res=>{ if(res.code==200){ that.$toast("修改成功") uni.$emit("refreshdetail") setTimeout(function(){ uni.navigateBack({ delta: 1 //返回层数,2则上上页 }); },1200) } }) } }, onuploadEnd(item) { var newobj={} var responseText=JSON.parse(item.responseText) newobj.name=responseText.originalFilename; newobj.url=responseText.fileName; this.filelist.push(newobj) this.datainfo.zxFjList=JSON.parse(JSON.stringify(this.filelist)) }, getDelFj(idx){ var that=this; uni.showModal({ title: '确认删除', content: "是否确认删除", cancelText: '取消', confirmText: '确认', success: function(res) { if (res.confirm) { that.filelist.splice(idx,1) that.datainfo.zxFjList=JSON.parse(JSON.stringify(that.filelist)) } else if (res.cancel) { } } }); }, getDown(e){ uni.showLoading({ title: '加载中' }); var url=baseUrl+e; uni.downloadFile({ url: url,//文件的下载路径 success(result) { uni.hideLoading() var filePath = result.tempFilePath; uni.openDocument({ filePath: filePath, showMenu: true, success: function (res) { // console.log('打开文档成功'); } }); }, fail(res) {uni.hideLoading()} }) }, } } </script> <style scoped lang="scss"> .bgtop{height: 150rpx;background-color: $com-cd3;width: 100%;} .pdbox{padding: 34rpx 24rpx 16rpx;} .addbox /deep/ .uni-forms-item{margin-bottom:36rpx;} .addbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;} .addbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #343434;width: 198rpx !important;padding-left:20rpx;} .addbox /deep/ .is-required{position: absolute;left: 0;top: 50%;margin-top: -10rpx;} .addbox /deep/ .uni-data-checklist{display: flex;align-items: center;justify-content: flex-end;} .addbox /deep/ .uni-easyinput__placeholder-class{font-weight: 500;font-size: 30rpx;color: #AAAAAA;} .addbox /deep/ .checklist-box{margin-right: 0 !important;margin-left: 40rpx !important;} .fjadd{ .btn{font-weight: bold;font-size: 30rpx;color: #1D64E2;margin: 0;display: flex;align-items: center;} } .addbox{margin-top: -120rpx; padding: 0 24rpx 50rpx; .boxs{background: #FFFFFF;border-radius: 30rpx;margin-bottom: 24rpx;overflow: hidden;position: relative; .infobg{width: 102rpx;height: 106rpx;position: absolute;right: 26rpx;bottom: 22rpx;} .tips{background: #F1F6FF;padding: 18rpx 38rpx;display: flex;align-items: flex-start; image{width: 20rpx;height: 26rpx;margin-right: 16rpx;flex:0 0 auto;margin-top: 4rpx;} view{font-weight: 500;font-size: 26rpx;color: #1D64E2;} } .titbox{ .tit{ image{width: 32rpx;height: 18rpx;margin-right: 10rpx;} view{font-weight: bold;font-size: 32rpx;color: #222327;} } .titr{width: 146rpx;height: 50rpx;background: #E4EEFF;border-radius: 26rpx;font-weight: 500;font-size: 24rpx;color: #1D64E2;text-align: center;line-height: 50rpx;} } .titinf{display: flex;flex-wrap: wrap; .txt{font-weight: 500;font-size: 28rpx;margin-bottom: 18rpx;flex:0 1 auto;min-width: 50%;display: flex;align-items: flex-start;color: #222327; text{flex: 0 0 auto;color: #9F9F9F;} } } .addpeo{font-weight: bold;font-size: 30rpx;color: #1D64E2;display: flex;align-items: center; image{width: 26rpx;height: 24rpx;margin-right: 14rpx;} } .openbox{display: flex;align-items: center;justify-content: flex-end;font-weight: 500; font-size: 30rpx;height: 100%;color: #222327; } .edtip{font-weight: 500;font-size: 22rpx;color: #FF0000; text{margin: 4rpx 8rpx 0 0;} &.pa{position: absolute;right: 0;bottom: -15px;text-align: right;width: 702rpx;} } } } .matab{display: flex;align-items: center;flex-wrap: nowrap;overflow: auto;position: absolute;left: 0;right: -48rpx; .list{min-width:112rpx;height: 50rpx;background: #ffffff;border-radius: 25rpx;font-size: 30rpx;font-weight: 500;box-sizing: border-box; color: #AAAAAA;padding: 0 24rpx;box-sizing: border-box;margin-left:24rpx;flex: 0 0 auto;border: 2rpx solid #C1C1C1;display: flex;align-items: center;justify-content: center; &.act{background: #E4EEFF;color: #1D64E2;border: none;} } } // 附件 .fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx; image{margin-right: 18rpx;flex: 0 0 auto;} .imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx; image{width: 26rpx;height: 24rpx;} } .tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;} .delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center; image{width: 26rpx;height: 26rpx;} } } .peoBox{font-size: 30rpx;color: #AAAAAA;min-height: 200rpx;display: flex;flex-wrap: wrap; view{color: #222327;} } // 按钮 .addbtn{display: flex;align-items: center;justify-content: space-between;padding-top: 26rpx; .btn{width: 336rpx;height: 80rpx;font-weight: bold;font-size: 30rpx;box-sizing: border-box;border-radius: 40rpx;display: flex;align-items: center;justify-content: center; flex:1; &.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;} &.btn2{background: #1D64E2;color: #ffffff;} } } .lbtabp{display: flex;align-items: center;flex: 0 0 auto;margin-left: 24rpx;height: 100%;justify-content: flex-end; view{font-size: 30rpx;color: #222327;} } .addbox /deep/ .pbbox .ql-editor p{text-indent: 2rem;} </style>