add.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  1. <template>
  2. <view >
  3. <view class="bgtop"></view>
  4. <uni-forms :modelValue="datainfo">
  5. <view class="addbox">
  6. <view class="boxs pdbox" style="padding-bottom: 2rpx;">
  7. <view class="titbox mb14">
  8. <view class="tit flexc">
  9. <image :src="titimg"></image>
  10. <view>基本详情</view>
  11. </view>
  12. </view>
  13. <uni-forms-item label="会议名称" name="conferenceTitle" required>
  14. <uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceTitle" placeholder="请输入会议名称" />
  15. <!-- <view class="edtip pa">* 标题前无须加关于,标题后无须加的建议,系统将自动填写</view> -->
  16. </uni-forms-item>
  17. <!-- 会议类型 -->
  18. <picker range-key='label' :value="hylxidx" :range="hylxlist" @change='bindDateChangec'>
  19. <uni-forms-item label="会议类型" name="activityId" required>
  20. <view class="lbtabp">
  21. <view v-if="datainfo.conferenceType&&!hylxtxt">{{statusFormat(datainfo.conferenceType,hylxlist,'hylx')}}</view>
  22. <view v-else :class="hylxtxt?'':'coa'">{{hylxtxt||"请选择会议类型"}}</view>
  23. </view>
  24. </uni-forms-item>
  25. </picker>
  26. <picker mode="date" @change='bindDateChangea'>
  27. <uni-forms-item label="会议日期" name="conferenceDate" required>
  28. <view class="lbtabp">
  29. <view :class="datainfo.conferenceDate?'':'coa'">{{datainfo.conferenceDate || "请选择会议日期"}}</view>
  30. </view>
  31. </uni-forms-item>
  32. </picker>
  33. <picker mode="time" @change='bindDateChangeb'>
  34. <uni-forms-item label="会议时间" name="conferenceTime" required>
  35. <view class="lbtabp">
  36. <view :class="datainfo.conferenceTime?'':'coa'">{{datainfo.conferenceTime || "请选择会议时间"}}</view>
  37. </view>
  38. </uni-forms-item>
  39. </picker>
  40. <uni-forms-item label="会议地点" name="conferenceAddress" required>
  41. <uni-easyinput :inputBorder="false" type="text" v-model="datainfo.conferenceAddress" placeholder="请输入会议地点" />
  42. </uni-forms-item>
  43. </view>
  44. <!-- 参会人员 -->
  45. <view class="boxs pdbox">
  46. <view class="titbox mb14 flexc">
  47. <view class="tit flexc flex1">
  48. <image :src="titimg"></image>
  49. <view>参会人员</view>
  50. </view>
  51. <view class="addpeo" @click="getAddPeoFn">
  52. <image :src="addimg"></image>
  53. 添加人员
  54. </view>
  55. </view>
  56. <view class="peoBox">
  57. <block v-if="datainfo.zxConferenceUserList&&datainfo.zxConferenceUserList.length">
  58. <view v-for="(ite,idx) in datainfo.zxConferenceUserList" :key="idx">{{ite.userName||ite.name}}
  59. <block v-if="idx<datainfo.zxConferenceUserList.length-1">,</block>
  60. </view>
  61. </block>
  62. <view class="coa" v-else>请选择参会人员</view>
  63. </view>
  64. </view>
  65. <view class="boxs pdbox">
  66. <view class="titbox mb14">
  67. <view class="tit flexc">
  68. <image :src="titimg"></image>
  69. <view>附件内容</view>
  70. </view>
  71. </view>
  72. <view class="flexcj mb10">
  73. <view class="fw f15 co34">添加附件</view>
  74. <view class="fjadd"><lsj-upload
  75. ref="lsjUpload"
  76. childId="upload1"
  77. :width="width"
  78. :height="height"
  79. :option="option"
  80. :size="size"
  81. :formats="formats"
  82. :debug="debug"
  83. :instantly="instantly"
  84. @progress=""
  85. @uploadEnd="onuploadEnd" >
  86. <view class="btn" :style="{width: width,height: height}">上传附件</view>
  87. </lsj-upload>
  88. </view>
  89. </view>
  90. <view class="ptb12" v-if="filelist&&filelist.length">
  91. <view class="fjlists" v-for="(ite,idx) in filelist" :key='idx'>
  92. <view class="flext" @click="getDown(ite.url)">
  93. <view class="imgl"><image :src="fjimg" ></image></view>
  94. <view class="tit">{{ite.name}}</view>
  95. </view>
  96. <!-- 删除 -->
  97. <view class="delimg flex0" @click.stop="getDelFj(idx)">
  98. <image :src="delimg"></image>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="boxs pdbox">
  104. <view class="titbox mb20">
  105. <view class="tit flexc">
  106. <view>备注信息</view>
  107. </view>
  108. </view>
  109. <textarea placeholder="请输入备注信息" v-model="datainfo.remark"></textarea>
  110. </view>
  111. <view class="addbtn">
  112. <!-- <view class="btn btn1" @click="getZanFnt">暂存</view> -->
  113. <view class="btn btn2" v-if="checkPermi(['zxNotice:notice:add'])&&pagetype=='add'||checkPermi(['zxNotice:notice:edit'])&&pagetype=='edit'" @click="getSubmit">提交</view>
  114. </view>
  115. </view>
  116. </uni-forms>
  117. </view>
  118. </template>
  119. <script>
  120. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  121. import config from '@/config'
  122. const baseUrl = config.baseUrl
  123. import { getToken } from '@/utils/auth'
  124. import { selectValue,selectValueKey } from '@/utils/common.js';
  125. import {getMeetAddFn,getMeetDetaiFn,getMeetEditFn} from "@/api/mine/meeting.js"
  126. import {getDictionaryFn} from "@/api/mine/register.js"
  127. export default{
  128. data(){
  129. return{
  130. //附件
  131. option: {
  132. // 上传服务器地址,需要替换为你的接口地址
  133. url: baseUrl+'/common/upload', // 该地址非真实路径,需替换为你项目自己的接口地址
  134. // 上传附件的key
  135. name: 'file',
  136. // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
  137. header: {
  138. // 示例参数可删除
  139. 'Authorization': 'Bearer ' + getToken(),
  140. },
  141. // 根据你接口需求自定义body参数
  142. formData: {}
  143. },
  144. // 选择文件后是否立即自动上传,true=选择后立即上传
  145. instantly: true,
  146. // 必传宽高且宽高应与slot宽高保持一致
  147. width: '',
  148. height: '48rpx',
  149. // 限制允许上传的格式,空串=不限制,默认为空
  150. formats: 'doc,docx,xls,xlsx,ppt,txt,pdf,zip,rar,word,png,jpg,jpeg',
  151. // 文件上传大小限制
  152. size: 100,
  153. // 文件数量限制 默认10
  154. count: 5,
  155. // 文件回显列表
  156. files: new Map(),
  157. // 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道
  158. wxFiles: [],
  159. // 是否打印日志
  160. debug: false,
  161. filelist:[],
  162. fjimg:require("@/work/static/images/fjimg.png"),
  163. delimg:require("@/work/static/images/delimg.png"),
  164. titimg:require("@/work/static/images/titbg.png"),
  165. addimg:require("@/work/static/images/meeting/add.png"),
  166. datainfo:{
  167. "conferenceTitle":"",//会议名称
  168. "conferenceDate":"",//会议日期
  169. "conferenceTime":"",//会议时间
  170. "conferenceAddress":"",//会议地点,
  171. "remark":'',//备注
  172. 'zxConferenceUserList':[],//参会人员
  173. },
  174. id:"",
  175. pagetype:'add',
  176. editinfo:'',
  177. hylxlist:[],
  178. hylxtxt:'',
  179. hylxidx:"",
  180. }
  181. },
  182. onUnload(){
  183. uni.$off('refreshtalb')
  184. },
  185. onLoad(e) {
  186. uni.$on('refreshtalb', (e) => {
  187. this.datainfo.zxConferenceUserList=e.zxConferenceUserList
  188. })
  189. if(e.type=='edit'){
  190. this.id=e.id;
  191. this.pagetype='edit'
  192. this.getDetail()
  193. }
  194. this.init()
  195. if(e.type=='old'&&uni.getStorageSync('cjhyList')){
  196. var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('cjhyList')))
  197. var params=newObj.params;
  198. this.datainfo=params;
  199. this.filelist=this.datainfo.zxFjList
  200. }
  201. },
  202. methods:{
  203. checkPermi, checkRole,
  204. // 会议类型
  205. init(){
  206. getDictionaryFn('conference_type').then(res=>{
  207. if(res.code==200&&res.data.length){
  208. this.hylxlist = res.data.map(v => {
  209. return {
  210. label: v.dictLabel,
  211. value:v.dictValue
  212. }
  213. })
  214. }
  215. })
  216. },
  217. kayType(ite,list){
  218. return selectValue(list, ite);
  219. },
  220. statusFormat(ite,list,type) {
  221. var aite=selectValueKey(list, ite);
  222. if(type=='hylx'){
  223. this.hylxidx=aite.key
  224. this.hylxtxt=aite.actions
  225. }
  226. return aite.actions;
  227. },
  228. bindDateChangea(e){
  229. var val=e.detail.value;
  230. this.datainfo.conferenceDate=val;
  231. },
  232. bindDateChangeb(e){
  233. var val=e.detail.value;
  234. this.datainfo.conferenceTime=val+':00';
  235. },
  236. bindDateChangec(e){
  237. var val=e.detail.value;
  238. this.datainfo.conferenceType=this.hylxlist[val].value;
  239. this.hylxtxt=this.hylxlist[val].label;
  240. },
  241. getDetail(){
  242. var that=this;
  243. var params={
  244. conferenceId:this.id
  245. }
  246. getMeetDetaiFn(params).then(res=>{
  247. if(res.code==200){
  248. var data=res.data;
  249. this.datainfo=res.data;
  250. if(data.zxFjList&&data.zxFjList.length){
  251. this.filelist=JSON.parse(JSON.stringify(data.zxFjList))
  252. }
  253. }
  254. })
  255. },
  256. getAddPeoFn(){
  257. var obj={
  258. list:this.datainfo.zxConferenceUserList,
  259. }
  260. this.$tab.navigateTo('/work/pages/meeting/people?data='+encodeURIComponent(JSON.stringify(obj)))
  261. },
  262. gettalbFn(){
  263. },
  264. // 暂存
  265. getZanFnt(){
  266. var that=this;
  267. var params=that.datainfo;
  268. var obj={
  269. params:params,
  270. }
  271. uni.setStorageSync('cjhyList', JSON.parse(JSON.stringify(obj)))
  272. that.$toast("暂存成功")
  273. },
  274. getSubmit(){
  275. var that=this;
  276. if(!this.datainfo.conferenceTitle){
  277. this.$toast("请输入会议名称")
  278. return
  279. }
  280. if(!this.datainfo.conferenceType){
  281. this.$toast("请选择会议类型")
  282. return
  283. }
  284. if(!this.datainfo.conferenceDate){
  285. this.$toast("请选择会议日期")
  286. return
  287. }
  288. if(!this.datainfo.conferenceTime){
  289. this.$toast("请选择会议时间")
  290. return
  291. }
  292. if(!this.datainfo.conferenceAddress){
  293. this.$toast("请输入会议地点")
  294. return
  295. }
  296. if(this.datainfo.zxConferenceUserList.length<1){
  297. this.$toast("请选择会议人员")
  298. return
  299. }
  300. var params=this.datainfo
  301. if(that.pagetype=='add'){
  302. getMeetAddFn(params).then(res=>{
  303. if(res.code==200){
  304. that.$toast("提交成功")
  305. uni.removeStorageSync('cjhyList')
  306. uni.$emit("refreshlist")
  307. setTimeout(function(){
  308. uni.navigateBack({
  309. delta: 1 //返回层数,2则上上页
  310. });
  311. },1200)
  312. }
  313. })
  314. }else{
  315. getMeetEditFn(params).then(res=>{
  316. if(res.code==200){
  317. that.$toast("修改成功")
  318. uni.$emit("refreshdetail")
  319. setTimeout(function(){
  320. uni.navigateBack({
  321. delta: 1 //返回层数,2则上上页
  322. });
  323. },1200)
  324. }
  325. })
  326. }
  327. },
  328. onuploadEnd(item) {
  329. var newobj={}
  330. var responseText=JSON.parse(item.responseText)
  331. newobj.name=responseText.originalFilename;
  332. newobj.url=responseText.fileName;
  333. this.filelist.push(newobj)
  334. this.datainfo.zxFjList=JSON.parse(JSON.stringify(this.filelist))
  335. },
  336. getDelFj(idx){
  337. var that=this;
  338. uni.showModal({
  339. title: '确认删除',
  340. content: "是否确认删除",
  341. cancelText: '取消',
  342. confirmText: '确认',
  343. success: function(res) {
  344. if (res.confirm) {
  345. that.filelist.splice(idx,1)
  346. that.datainfo.zxFjList=JSON.parse(JSON.stringify(that.filelist))
  347. } else if (res.cancel) {
  348. }
  349. }
  350. });
  351. },
  352. getDown(e){
  353. uni.showLoading({
  354. title: '加载中'
  355. });
  356. var url=baseUrl+e;
  357. uni.downloadFile({
  358. url: url,//文件的下载路径
  359. success(result) {
  360. uni.hideLoading()
  361. var filePath = result.tempFilePath;
  362. uni.openDocument({
  363. filePath: filePath,
  364. showMenu: true,
  365. success: function (res) {
  366. // console.log('打开文档成功');
  367. }
  368. });
  369. },
  370. fail(res) {uni.hideLoading()}
  371. })
  372. },
  373. }
  374. }
  375. </script>
  376. <style scoped lang="scss">
  377. .bgtop{height: 150rpx;background-color: $com-cd3;width: 100%;}
  378. .pdbox{padding: 34rpx 24rpx 16rpx;}
  379. .addbox /deep/ .uni-forms-item{margin-bottom:36rpx;}
  380. .addbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;}
  381. .addbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #343434;width: 198rpx !important;padding-left:20rpx;}
  382. .addbox /deep/ .is-required{position: absolute;left: 0;top: 50%;margin-top: -10rpx;}
  383. .addbox /deep/ .uni-data-checklist{display: flex;align-items: center;justify-content: flex-end;}
  384. .addbox /deep/ .uni-easyinput__placeholder-class{font-weight: 500;font-size: 30rpx;color: #AAAAAA;}
  385. .addbox /deep/ .checklist-box{margin-right: 0 !important;margin-left: 40rpx !important;}
  386. .fjadd{
  387. .btn{font-weight: bold;font-size: 30rpx;color: #1D64E2;margin: 0;display: flex;align-items: center;}
  388. }
  389. .addbox{margin-top: -120rpx;
  390. padding: 0 24rpx 50rpx;
  391. .boxs{background: #FFFFFF;border-radius: 30rpx;margin-bottom: 24rpx;overflow: hidden;position: relative;
  392. .infobg{width: 102rpx;height: 106rpx;position: absolute;right: 26rpx;bottom: 22rpx;}
  393. .tips{background: #F1F6FF;padding: 18rpx 38rpx;display: flex;align-items: flex-start;
  394. image{width: 20rpx;height: 26rpx;margin-right: 16rpx;flex:0 0 auto;margin-top: 4rpx;}
  395. view{font-weight: 500;font-size: 26rpx;color: #1D64E2;}
  396. }
  397. .titbox{
  398. .tit{
  399. image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
  400. view{font-weight: bold;font-size: 32rpx;color: #222327;}
  401. }
  402. .titr{width: 146rpx;height: 50rpx;background: #E4EEFF;border-radius: 26rpx;font-weight: 500;font-size: 24rpx;color: #1D64E2;text-align: center;line-height: 50rpx;}
  403. }
  404. .titinf{display: flex;flex-wrap: wrap;
  405. .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;
  406. text{flex: 0 0 auto;color: #9F9F9F;}
  407. }
  408. }
  409. .addpeo{font-weight: bold;font-size: 30rpx;color: #1D64E2;display: flex;align-items: center;
  410. image{width: 26rpx;height: 24rpx;margin-right: 14rpx;}
  411. }
  412. .openbox{display: flex;align-items: center;justify-content: flex-end;font-weight: 500;
  413. font-size: 30rpx;height: 100%;color: #222327;
  414. }
  415. .edtip{font-weight: 500;font-size: 22rpx;color: #FF0000;
  416. text{margin: 4rpx 8rpx 0 0;}
  417. &.pa{position: absolute;right: 0;bottom: -15px;text-align: right;width: 702rpx;}
  418. }
  419. }
  420. }
  421. .matab{display: flex;align-items: center;flex-wrap: nowrap;overflow: auto;position: absolute;left: 0;right: -48rpx;
  422. .list{min-width:112rpx;height: 50rpx;background: #ffffff;border-radius: 25rpx;font-size: 30rpx;font-weight: 500;box-sizing: border-box;
  423. 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;
  424. &.act{background: #E4EEFF;color: #1D64E2;border: none;}
  425. }
  426. }
  427. // 附件
  428. .fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx;
  429. image{margin-right: 18rpx;flex: 0 0 auto;}
  430. .imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
  431. image{width: 26rpx;height: 24rpx;}
  432. }
  433. .tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;}
  434. .delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
  435. image{width: 26rpx;height: 26rpx;}
  436. }
  437. }
  438. .peoBox{font-size: 30rpx;color: #AAAAAA;min-height: 200rpx;display: flex;flex-wrap: wrap;
  439. view{color: #222327;}
  440. }
  441. // 按钮
  442. .addbtn{display: flex;align-items: center;justify-content: space-between;padding-top: 26rpx;
  443. .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;
  444. flex:1;
  445. &.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;}
  446. &.btn2{background: #1D64E2;color: #ffffff;}
  447. }
  448. }
  449. .lbtabp{display: flex;align-items: center;flex: 0 0 auto;margin-left: 24rpx;height: 100%;justify-content: flex-end;
  450. view{font-size: 30rpx;color: #222327;}
  451. }
  452. .addbox /deep/ .pbbox .ql-editor p{text-indent: 2rem;}
  453. </style>