form.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <template>
  2. <view class="scheduleForm-v jnpf-wrap">
  3. <u-toast ref="uToast" />
  4. <u-form :model="dataForm" :rules="rules" ref="dataForm" :errorType="['toast']" label-position="left"
  5. label-width="150" label-align="left">
  6. <view class="u-p-l-20 u-p-r-20 form-item-box">
  7. <u-form-item label="标题" prop="title" required>
  8. <u-input input-align='right' v-model="dataForm.title" placeholder="请输入"></u-input>
  9. </u-form-item>
  10. </view>
  11. <view class="u-p-l-20 u-p-r-20 form-item-box">
  12. <u-form-item label="内容" prop="content">
  13. <u-input input-align='right' v-model="dataForm.content" placeholder="请输入" type="textarea"></u-input>
  14. </u-form-item>
  15. </view>
  16. <!-- #ifndef APP-HARMONY -->
  17. <view class="jnpf-card u-p-l-20 u-p-r-20 form-item-box">
  18. <u-form-item label="附件" prop="files">
  19. <JnpfUploadFile v-model="dataForm.files" />
  20. </u-form-item>
  21. </view>
  22. <!-- #endif -->
  23. <view class="jnpf-card">
  24. <view class="u-p-l-20 u-p-r-20 form-item-box">
  25. <u-form-item label="紧急程度" prop="urgent">
  26. <JnpfSelect v-model="dataForm.urgent" :options='urgentList' placeholder="请选择" />
  27. </u-form-item>
  28. </view>
  29. <view class="u-p-l-20 u-p-r-20 form-item-box">
  30. <u-form-item label="类型" prop="category" required>
  31. <JnpfSelect v-model="dataForm.category" :options='categoryOptions' placeholder="请选择" />
  32. </u-form-item>
  33. </view>
  34. <view class="u-p-l-20 u-p-r-20 form-item-box">
  35. <u-form-item label="创建人" prop="creatorUserId" required>
  36. <JnpfUserSelect v-model="dataForm.creatorUserId" placeholder="请输入" disabled="disabled" />
  37. </u-form-item>
  38. </view>
  39. <view class="u-p-l-20 u-p-r-20 form-item-box">
  40. <u-form-item label="参与人" prop="toUserIds">
  41. <JnpfUserSelect v-model="dataForm.toUserIds" placeholder="请选择" multiple />
  42. </u-form-item>
  43. </view>
  44. <view class="u-p-l-20 u-p-r-20 form-item-box">
  45. <u-form-item label="标签颜色" prop="color">
  46. <JnpfColorPicker v-model="dataForm.color" />
  47. </u-form-item>
  48. </view>
  49. </view>
  50. <view class="u-p-l-20 u-p-r-20 form-item-box">
  51. <u-form-item label="全天" prop="allDay">
  52. <JnpfSwitch v-model="dataForm.allDay" @change="change_providerType" />
  53. </u-form-item>
  54. </view>
  55. <view class="u-p-l-20 u-p-r-20 form-item-box">
  56. <u-form-item label="开始时间" prop="startDay" required>
  57. <tdatetime :delayMin="0" v-model="startDay" :date="startDate" placeholder="请选择"
  58. :showtdatetime='showtdatetime' :type="1" @confirm='confirm' :allDay='dataForm.allDay' />
  59. </u-form-item>
  60. </view>
  61. <view class="u-p-l-20 u-p-r-20 form-item-box">
  62. <u-form-item label="时长" prop="duration" required v-if="dataForm.duration!=-1&&dataForm.allDay==0">
  63. <JnpfSelect v-model="dataForm.duration" :options='durationList' />
  64. </u-form-item>
  65. </view>
  66. <view class="u-p-l-20 u-p-r-20 form-item-box">
  67. <u-form-item label="结束时间" prop="endDay" required v-if='dataForm.duration==-1||dataForm.allDay'>
  68. <tdatetime :delayMin="0" v-model="endDay" :date="endDate" placeholder="请选择"
  69. :showtdatetime='showtdatetime' :type="2" @confirm='confirm' :allDay='dataForm.allDay' />
  70. </u-form-item>
  71. </view>
  72. <view class="jnpf-card">
  73. <view class="u-p-l-20 u-p-r-20 form-item-box">
  74. <u-form-item label="提醒时间" prop="reminderTime">
  75. <JnpfSelect v-model="dataForm.reminderTime"
  76. :options='dataForm.allDay?reminderTimeList_:reminderTimeList' placeholder="请选择" />
  77. </u-form-item>
  78. </view>
  79. <view v-if="dataForm.reminderTime!=-2" class="u-p-l-20 u-p-r-20 form-item-box">
  80. <u-form-item label="提醒方式" prop="reminderType">
  81. <jnpf-select v-model="dataForm.reminderType" :options='remindList'
  82. placeholder="请选择"></jnpf-select>
  83. </u-form-item>
  84. <u-form-item label="发送配置" prop="send" v-if="dataForm.reminderType==2">
  85. <sendSelect v-model="dataForm.sendName" :send='dataForm.send' @change='changeSend'
  86. placeholder="请选择" />
  87. </u-form-item>
  88. </view>
  89. <view class="u-p-l-20 u-p-r-20 form-item-box">
  90. <u-form-item label="重复提醒" prop="repetition">
  91. <jnpf-select v-model="dataForm.repetition" :options='repeatReminderList'
  92. @change='repeatTimeChange' placeholder="请选择"></jnpf-select>
  93. </u-form-item>
  94. </view>
  95. <view class="u-p-l-20 u-p-r-20 form-item-box">
  96. <u-form-item label="结束重复" prop="repeatTime" required v-if='dataForm.repetition!=1'>
  97. <tdatetime :delayMin="0" v-model="repeat" :date="repeatDate" placeholder="请选择"
  98. :showtdatetime='showtdatetime' :type="3" @confirm='confirm' :allDay='1' />
  99. </u-form-item>
  100. </view>
  101. </view>
  102. </u-form>
  103. <view class="flowBefore-actions">
  104. <u-button class="buttom-btn" @click="getResult('cancel')">{{$t('common.cancelText')}}</u-button>
  105. <u-button class="buttom-btn" type="primary" :loading='btnLoading'
  106. @click.stop="save()">{{$t('common.okText')}}</u-button>
  107. </view>
  108. <u-action-sheet @click="handleAction" :list="actionList"
  109. :tips="{ text:'此为重复日程,将修改应用于' , color: '#000' , fontSize: 30 }" v-model="show">
  110. </u-action-sheet>
  111. </view>
  112. </template>
  113. <script>
  114. import tdatetime from './t-datetime.vue'
  115. import sendSelect from './sendSelect/index.vue'
  116. import {
  117. ScheduleInfo,
  118. ScheduleCreate,
  119. ScheduleUpdate
  120. } from '@/api/workFlow/schedule.js'
  121. import {
  122. useBaseStore
  123. } from '@/store/modules/base'
  124. const baseStore = useBaseStore()
  125. export default {
  126. components: {
  127. tdatetime,
  128. sendSelect
  129. },
  130. data() {
  131. return {
  132. title: '',
  133. userInfo: {},
  134. show: false,
  135. showtdatetime: false,
  136. dataForm: {
  137. id: 0,
  138. category: '',
  139. creatorUserId: 0,
  140. userName: '',
  141. allDay: 0,
  142. urgent: '1',
  143. startDay: '',
  144. startTime: '',
  145. endDay: '',
  146. endTime: '',
  147. duration: 60,
  148. content: '',
  149. title: '',
  150. toUserIds: [],
  151. reminderTime: -2,
  152. reminderType: 1,
  153. send: '',
  154. sendName: '',
  155. repetition: 1,
  156. repeatTime: '',
  157. color: '#FFFFFF',
  158. files: []
  159. },
  160. btnLoading: false,
  161. showBtn: false,
  162. startDate: {},
  163. endDate: {},
  164. repeatDate: {},
  165. repeat: '',
  166. endDay: '',
  167. startDay: '',
  168. urgentList: [{
  169. id: "1",
  170. fullName: '普通'
  171. }, {
  172. id: '2',
  173. fullName: '重要'
  174. }, {
  175. id: '3',
  176. fullName: '紧急'
  177. }],
  178. durationList: [{
  179. id: 30,
  180. fullName: '30分钟'
  181. }, {
  182. id: 60,
  183. fullName: '1小时'
  184. }, {
  185. id: 90,
  186. fullName: '1小时30分钟'
  187. }, {
  188. id: 120,
  189. fullName: '2小时'
  190. }, {
  191. id: 180,
  192. fullName: '3小时'
  193. }, {
  194. id: -1,
  195. fullName: '自定义'
  196. }],
  197. categoryOptions: [],
  198. repetitionType: false,
  199. reminderTimeList: [{
  200. id: -2,
  201. fullName: '不提醒'
  202. }, {
  203. id: -1,
  204. fullName: '开始时'
  205. }, {
  206. id: 5,
  207. fullName: '提前5分钟'
  208. }, {
  209. id: 10,
  210. fullName: '提前10分钟'
  211. }, {
  212. id: 15,
  213. fullName: '提前15分钟'
  214. }, {
  215. id: 30,
  216. fullName: '提前30分钟'
  217. }, {
  218. id: 60,
  219. fullName: '提前1小时'
  220. }, {
  221. id: 120,
  222. fullName: '提前2小时'
  223. }, {
  224. id: 1440,
  225. fullName: '1天前'
  226. }, {
  227. id: 2880,
  228. fullName: '2天前'
  229. }, {
  230. id: 10080,
  231. fullName: '1周前'
  232. }],
  233. reminderTimeList_: [{
  234. id: -2,
  235. fullName: '不提醒'
  236. },
  237. {
  238. id: 1,
  239. fullName: '当天8:00'
  240. },
  241. {
  242. id: 2,
  243. fullName: '当天9:00'
  244. },
  245. {
  246. id: 3,
  247. fullName: '当天10:00'
  248. },
  249. {
  250. id: 4,
  251. fullName: '1天前8:00'
  252. },
  253. {
  254. id: 5,
  255. fullName: '1天前9:00'
  256. },
  257. {
  258. id: 6,
  259. fullName: '1天前10:00'
  260. },
  261. {
  262. id: 7,
  263. fullName: '2天前8:00'
  264. },
  265. {
  266. id: 8,
  267. fullName: '2天前9:00'
  268. },
  269. {
  270. id: 9,
  271. fullName: '2天前10:00'
  272. },
  273. {
  274. id: 10,
  275. fullName: '1周前8:00'
  276. },
  277. {
  278. id: 11,
  279. fullName: '1周前9:00'
  280. },
  281. {
  282. id: 12,
  283. fullName: '1周前10:00'
  284. }
  285. ],
  286. remindList: [{
  287. id: 1,
  288. fullName: '默认'
  289. }, {
  290. id: 2,
  291. fullName: '自定义'
  292. }],
  293. repeatReminderList: [{
  294. id: 1,
  295. fullName: '不重复'
  296. }, {
  297. id: 2,
  298. fullName: '每天重复'
  299. }, {
  300. id: 3,
  301. fullName: '每周重复'
  302. }, {
  303. id: 4,
  304. fullName: '每月重复'
  305. }, {
  306. id: 5,
  307. fullName: '每年重复'
  308. }],
  309. actionList: [],
  310. rules: {
  311. startTime: [{
  312. required: true,
  313. message: '开始时间不能为空',
  314. trigger: 'change',
  315. type: 'number'
  316. }],
  317. startTime: [{
  318. required: true,
  319. message: '开始时间不能为空',
  320. trigger: 'change',
  321. type: 'number'
  322. }],
  323. endTime: [{
  324. required: true,
  325. message: '结束时间不能为空',
  326. trigger: 'change',
  327. type: 'number'
  328. }],
  329. repeat: [{
  330. required: true,
  331. message: '记录不能为空',
  332. trigger: 'change',
  333. }],
  334. category: [{
  335. required: true,
  336. message: '请选择类型',
  337. trigger: 'change'
  338. }],
  339. title: [{
  340. required: true,
  341. message: '请输入标题',
  342. trigger: 'blur'
  343. }],
  344. duration: [{
  345. required: true,
  346. message: '请选择时长',
  347. trigger: 'change',
  348. type: 'number'
  349. }],
  350. send: [{
  351. required: true,
  352. message: '发送配置不能为空',
  353. trigger: 'change'
  354. }],
  355. reminderType: [{
  356. required: true,
  357. message: '提醒方式不能为空',
  358. trigger: 'change',
  359. type: 'number'
  360. }]
  361. }
  362. }
  363. },
  364. onReady() {
  365. this.$refs.dataForm.setRules(this.rules);
  366. },
  367. onLoad(option) {
  368. this.repetitionType = false
  369. this.userInfo = uni.getStorageSync('userInfo') || {}
  370. this.dataForm.id = option.id
  371. this.btnLoading = false
  372. this.title = this.dataForm.id ? '编辑' : '新建'
  373. uni.setNavigationBarTitle({
  374. title: this.title
  375. });
  376. if (this.dataForm.id) {
  377. ScheduleInfo(option.id).then(res => {
  378. let data = res.data
  379. data.files = data.files ? JSON.parse(data.files) : [];
  380. this.dataForm = data
  381. this.startDate = this.timestampToTime(this.dataForm.startDay)
  382. this.endDate = this.timestampToTime(this.dataForm.endDay)
  383. this.repeatDate = this.dataForm.repeatTime ? this.timestampToTime(this.dataForm.repeatTime) :
  384. {}
  385. if (this.dataForm.repetition != "1") return this.repetitionType = true
  386. })
  387. } else {
  388. let startDate = this.timestampToTime(+new Date())
  389. this.startDate = this.timestampToTime(option.startTime || +new Date())
  390. this.startDate.hours = startDate.hours + 1
  391. this.startDate.minutes = '00'
  392. this.confirm(this.startDate, 1)
  393. this.endDate = this.timestampToTime(option.startTime || +new Date())
  394. this.endDate.hours = startDate.hours + 2
  395. this.endDate.minutes = '00'
  396. this.confirm(this.endDate, 2)
  397. this.repeatDate = {}
  398. this.dataForm.creatorUserId = this.userInfo.userId
  399. this.dataForm.duration = Number(option.duration) || 60
  400. }
  401. this.getDictionaryData()
  402. },
  403. methods: {
  404. back() {
  405. if (!this.dataForm.id) return uni.navigateBack()
  406. uni.navigateBack({
  407. delta: 2
  408. })
  409. },
  410. handleAction(index) {
  411. ScheduleUpdate(this.dataForm, index + 1).then(res => {
  412. uni.showToast({
  413. title: res.msg,
  414. complete: () => {
  415. uni.$emit('refresh')
  416. uni.navigateBack({
  417. delta: 2
  418. })
  419. }
  420. })
  421. })
  422. },
  423. change_providerType(val) {
  424. if (!val) {
  425. let startDate = this.timestampToTime(+new Date())
  426. this.startDate = this.timestampToTime(this.dataForm.startDay)
  427. this.startDate.hours = startDate.hours + 1
  428. this.startDate.minutes = '00'
  429. this.confirm(this.startDate, 1)
  430. this.endDate = this.timestampToTime(this.dataForm.endDay)
  431. this.endDate.hours = startDate.hours + 2
  432. this.endDate.minutes = '00'
  433. this.confirm(this.endDate, 2)
  434. } else {
  435. this.dataForm.endDay = this.dataForm.startDay
  436. }
  437. this.dataForm.reminderTime = -2
  438. },
  439. repeatTimeChange(val) {
  440. let time = new Date()
  441. time.setFullYear(time.getFullYear() + 1)
  442. if (val != 1) {
  443. let date = time.getTime()
  444. this.repeatDate = this.timestampToTime(date)
  445. this.repeatDate.minutes = '00'
  446. this.confirm(this.repeatDate, 3)
  447. }
  448. },
  449. getResult() {
  450. if (!this.dataForm.id) return uni.navigateBack()
  451. uni.showModal({
  452. title: '退出此次编辑?',
  453. content: '日程信息将不会保存',
  454. success: res => {
  455. if (res.confirm) {
  456. uni.$emit('refresh')
  457. uni.navigateBack({
  458. delta: 2
  459. })
  460. }
  461. }
  462. })
  463. },
  464. changeSend(id, name) {
  465. this.dataForm.send = id
  466. this.dataForm.sendName = name
  467. },
  468. getDictionaryData() {
  469. baseStore.getDictionaryData({
  470. sort: 'scheduleType'
  471. }).then((res) => {
  472. this.categoryOptions = res || []
  473. if (this.categoryOptions.length) this.dataForm.category = this.categoryOptions[0].id
  474. })
  475. },
  476. confirm(e, type) {
  477. if (type == 1) {
  478. this.dataForm.startDay = e.year + '-' + e.month + '-' + e.date
  479. this.dataForm.startDay = new Date(this.dataForm.startDay).getTime()
  480. this.dataForm.startTime = e.hours + ":" + e.minutes
  481. } else if (type == 2) {
  482. this.dataForm.endDay = e.year + '-' + e.month + '-' + e.date
  483. this.dataForm.endDay = new Date(this.dataForm.endDay).getTime()
  484. this.dataForm.endTime = e.hours + ":" + e.minutes
  485. } else {
  486. this.dataForm.repeatTime = e.year + '-' + e.month + '-' + e.date
  487. this.dataForm.repeatTime = new Date(this.dataForm.repeatTime).getTime()
  488. }
  489. },
  490. save() {
  491. this.$refs.dataForm.validate((valid) => {
  492. if (valid) {
  493. if (this.dataForm.duration == -1) {
  494. if (this.dataForm.startDay > this.dataForm.endDay) {
  495. this.$refs.uToast.show({
  496. title: '结束时间必须晚于开始时间',
  497. type: 'error'
  498. })
  499. return
  500. }
  501. }
  502. if (this.dataForm.allDay == 1) {
  503. let startDay = this.timestampToData(this.dataForm.startDay)
  504. let endDay = this.timestampToData(this.dataForm.endDay)
  505. if (this.dataForm.startDay > this.dataForm.endDay) {
  506. this.$refs.uToast.show({
  507. title: '结束时间必须晚于开始时间',
  508. type: 'error'
  509. })
  510. return
  511. }
  512. this.dataForm.startDay = new Date(startDay).getTime()
  513. this.dataForm.endDay = new Date(endDay).getTime()
  514. }
  515. if (this.dataForm.repetition != 1) {
  516. if (this.dataForm.startDay > this.dataForm.repeatTime) {
  517. this.$refs.uToast.show({
  518. title: '结束重复时间必须晚于开始时间',
  519. type: 'error'
  520. })
  521. return
  522. }
  523. }
  524. if (this.dataForm.id && this.repetitionType) {
  525. this.show = true
  526. this.actionList = []
  527. this.actionList.push({
  528. text: '仅修改此日程',
  529. id: '1'
  530. })
  531. this.actionList.push({
  532. text: '修改此日程及后续日程',
  533. id: '2',
  534. })
  535. } else {
  536. this.btnLoading = true
  537. const formMethod = this.dataForm.id ? ScheduleUpdate : ScheduleCreate;
  538. const query = {
  539. ...this.dataForm,
  540. files: JSON.stringify(this.dataForm.files)
  541. }
  542. formMethod(query, 3).then(res => {
  543. uni.showToast({
  544. title: res.msg,
  545. complete: () => {
  546. this.btnLoading = false
  547. uni.$emit('refresh')
  548. if (this.dataForm.id) {
  549. uni.navigateBack({
  550. delta: 2
  551. })
  552. } else {
  553. uni.navigateBack()
  554. }
  555. }
  556. })
  557. })
  558. }
  559. }
  560. })
  561. },
  562. timestampToTime(timestamp) {
  563. let list = {}
  564. timestamp = timestamp || 0
  565. var date = new Date(Number(timestamp));
  566. let Y = date.getFullYear();
  567. let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  568. let D = date.getDate();
  569. let h = date.getHours();
  570. let m = date.getMinutes();
  571. let s = date.getSeconds();
  572. list.year = Y
  573. list.month = M
  574. list.date = D
  575. list.hours = h < 10 ? 0 + h : h
  576. list.minutes = m < 10 ? 0 + m : m
  577. list.seconds = s < 10 ? 0 + s : s
  578. return list
  579. },
  580. timestampToData(timestamp) {
  581. var date = new Date(timestamp);
  582. let Y = date.getFullYear();
  583. let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  584. let D = date.getDate();
  585. return Y + '-' + M + '-' + D + " 00:00:00"
  586. }
  587. }
  588. }
  589. </script>
  590. <style lang="scss">
  591. page {
  592. background-color: #f0f2f6;
  593. }
  594. .scheduleForm-v {
  595. padding-bottom: 110rpx;
  596. }
  597. </style>