|
|
@@ -44,7 +44,7 @@
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
|
|
|
- <!-- 紧急程度 degree-->
|
|
|
+ <!-- 紧急程度 -->
|
|
|
<a-col :span="12">
|
|
|
<a-form-item label="紧急程度">
|
|
|
<a-select
|
|
|
@@ -93,19 +93,27 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
|
- <!-- 日程时间、是否全天 -->
|
|
|
+ <!-- 日程时间、全天 -->
|
|
|
<a-row :gutter="24">
|
|
|
- <!-- 日程时间 -->
|
|
|
<a-col :span="12">
|
|
|
<a-form-item label="日程时间">
|
|
|
+ <!-- 有时分秒 -->
|
|
|
<a-range-picker
|
|
|
+ v-if="isDate == true"
|
|
|
showTime
|
|
|
- format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ format="YYYY-MM-DD HH:mm"
|
|
|
@change="continueTimeChange"
|
|
|
- :showToday="true"
|
|
|
v-decorator="['continue', { rules: [{ required: true, message: '请选择日程时间' }] }]"
|
|
|
>
|
|
|
</a-range-picker>
|
|
|
+ <!-- 无时分秒 -->
|
|
|
+ <a-range-picker
|
|
|
+ v-if="isDate == false"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ @change="continueTimeChange"
|
|
|
+ v-decorator="['continue', { rules: [{ required: true, message: '请选择日程日期' }] }]"
|
|
|
+ >
|
|
|
+ </a-range-picker>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<!-- 是否全天 -->
|
|
|
@@ -117,6 +125,28 @@
|
|
|
</a-row>
|
|
|
|
|
|
<a-divider orientation="left">其他信息</a-divider>
|
|
|
+ <!-- 颜色 -->
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="颜色">
|
|
|
+ <div>
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="['backgroundColor', { rules: [{ required: false, message: '请选择日程背景色' }] }]"
|
|
|
+ >
|
|
|
+ <a-radio-button value="#d1495b" style="background:#d1495b; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#fa541c" style="background:#fa541c; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#faad14" style="background:#faad14; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#5497a7" style="background:#5497a7; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#3bb273" style="background:#3bb273; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#81c3d7" style="background:#81c3d7; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#004e98" style="background:#004e98; marginRight:8px;"></a-radio-button>
|
|
|
+ <a-radio-button value="#985277" style="background:#985277;"></a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
<!-- 文字编辑器 -->
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="24">
|
|
|
@@ -138,7 +168,9 @@ import moment from 'moment'
|
|
|
import 'moment/locale/zh-cn'
|
|
|
// import api from '@/api'
|
|
|
// import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
|
|
|
-import { scheduleAdd } from '@api/oa/cd-schedule'
|
|
|
+import { scheduleAdd, scheduleUpdate } from '@api/oa/cd-schedule'
|
|
|
+// import { extend } from 'dayjs'
|
|
|
+// import { defineComponent, ref } from 'vue'
|
|
|
|
|
|
export default {
|
|
|
name: 'SavePlan',
|
|
|
@@ -149,7 +181,10 @@ export default {
|
|
|
addForm: this.$form.createForm(this, { name: 'coordinated' }),
|
|
|
checked: true,
|
|
|
memo: '',
|
|
|
- formData: {} // 表单数据 （做回显）
|
|
|
+ formData: {}, // 表单数据(回显)
|
|
|
+ showTime: [], // 开始结束时间集合
|
|
|
+ isDate: false, // 默认无时分秒
|
|
|
+ ssmm: '' // 神神秘秘
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -157,79 +192,160 @@ export default {
|
|
|
fatherMethod: {
|
|
|
type: Function,
|
|
|
default: null
|
|
|
+ },
|
|
|
+ // 接收父组件的属性（点击的时间）
|
|
|
+ fatherData: {
|
|
|
+ type: String,
|
|
|
+ default: null
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
- },
|
|
|
+
|
|
|
+ created () {},
|
|
|
computed: {},
|
|
|
mounted () {},
|
|
|
methods: {
|
|
|
- getById () {
|
|
|
+ // 判断点击的时间有无 时分秒
|
|
|
+ isDatetime (dateVal) {
|
|
|
+ console.log('分隔得到的点击事件：', dateVal.split('T'))
|
|
|
+ var t = dateVal.split('T')
|
|
|
+ if (t.length < 2) {
|
|
|
+ return false // 无 时分秒
|
|
|
+ }
|
|
|
+ return true // 有 时分秒
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击的日期回显到页面
|
|
|
+ setStartTime () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 1、父组件点击的时间 赋值给表单
|
|
|
+ this.formData.startTime = this.fatherData
|
|
|
+ this.formData.endTime = this.fatherData
|
|
|
+ console.log('在这个时间上加半小时好吗', this.formData.endTime)
|
|
|
+
|
|
|
+ /// 2、判断该时间 有无时分秒 赋值给 isDate
|
|
|
+ this.isDate = this.isDatetime(this.fatherData)
|
|
|
+ var showTime = [
|
|
|
+ moment(this.formData.startTime, 'YYYY/MM/DD HH:mm'),
|
|
|
+ moment(this.formData.endTime, 'YYYY/MM/DD HH:mm')
|
|
|
+ ]
|
|
|
+ // ================================================================
|
|
|
+ // 3、根据判断 有无时分秒 ,判断 是否需要显示 时分秒
|
|
|
+ if (this.isDate == true) {
|
|
|
+ var e = this.formData.endTime
|
|
|
+ // console.log('111', e)
|
|
|
+ var ee = moment(e).format('YYYY-MM-DD HH:mm')
|
|
|
+ // console.log('拿到格式后的结束时间', ee)
|
|
|
+ var a = new Date(ee)
|
|
|
+ var z = a.setMinutes(a.getMinutes() + 30)
|
|
|
+ // console.log('半小时后的时间', reaET)
|
|
|
+ var reaET = new Date(z)
|
|
|
+ // console.log('22', z)
|
|
|
+ showTime = [moment(this.formData.startTime, 'YYYY/MM/DD HH:mm'), moment(reaET, 'YYYY/MM/DD HH:mm')]
|
|
|
+ } else {
|
|
|
+ showTime = [moment(this.formData.startTime, 'YYYY/MM/DD'), moment(this.formData.endTime, 'YYYY/MM/DD')]
|
|
|
+ }
|
|
|
+ // ==============================================================
|
|
|
+ // 赋值
|
|
|
+ this.addForm.setFieldsValue({
|
|
|
+ continue: showTime
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 回显表单的赋值
|
|
|
+ getFormInfo () {
|
|
|
+ console.log('点击日程的ID：', this.formData.id)
|
|
|
this.addForm.setFieldsValue({
|
|
|
title: this.formData.title,
|
|
|
type: this.formData.type, // 日程类型
|
|
|
- // how: this.formData.how, // 提醒类型
|
|
|
degreeOfUrgency: this.formData.degreeOfUrgency, // 紧急程度
|
|
|
- // when: this.formData.when, // 提醒时间
|
|
|
- // repeat: this.formData.repeat, // 重复提醒
|
|
|
- continue: [moment(this.formData.startTime, 'YYYY/MM/DD HH:mm:ss'), moment(this.formData.endTime, 'YYYY/MM/DD HH:mm:ss')], // 日程时间
|
|
|
- // startTime: this.formData.startTime,
|
|
|
- // endTime: this.formData.endTime,
|
|
|
- // checked: true, // 是否全天
|
|
|
- memo: this.formData.memo // 备注
|
|
|
+ memo: this.formData.memo, // 备注
|
|
|
+ backgroundColor: this.formData.backgroundColor,
|
|
|
+ continue: [
|
|
|
+ moment(this.formData.startTime, 'YYYY/MM/DD HH:mm'),
|
|
|
+ moment(this.formData.endTime, 'YYYY/MM/DD HH:mm')
|
|
|
+ ]
|
|
|
})
|
|
|
},
|
|
|
// 弹框 保存
|
|
|
handleOk (e) {
|
|
|
this.addForm.validateFields((err, values) => {
|
|
|
+ console.log('跑出来', values)
|
|
|
if (!err) {
|
|
|
- // 一条数据对象
|
|
|
- console.log(values, '看看里面的日程时间')
|
|
|
- var scheduleObject = {}
|
|
|
+ // ------------------------------------------------------
|
|
|
+ var scheduleObject = {} // 赋值
|
|
|
scheduleObject.title = values.title
|
|
|
scheduleObject.type = values.type
|
|
|
- // scheduleObject.how = values.how
|
|
|
scheduleObject.degreeOfUrgency = values.degreeOfUrgency
|
|
|
- // scheduleObject.when = values.when
|
|
|
- // scheduleObject.repeat = values.repeat
|
|
|
- scheduleObject.startTime = values.continue[0].format('YYYY-MM-DD HH:mm:ss')
|
|
|
- scheduleObject.endTime = values.continue[1].format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ scheduleObject.startTime = values.continue[0].format('YYYY-MM-DD HH:mm')
|
|
|
+ scheduleObject.endTime = values.continue[1].format('YYYY-MM-DD HH:mm')
|
|
|
scheduleObject.memo = values.memo
|
|
|
- console.log('新增的一条日程', scheduleObject)
|
|
|
-
|
|
|
- // 新增请求
|
|
|
- scheduleAdd(scheduleObject).then(res => {
|
|
|
- console.log('11')
|
|
|
- if (res.success) {
|
|
|
- this.savePlanModalVisible = false
|
|
|
- this.$message.success('日程添加成功')
|
|
|
- console.log('222')
|
|
|
- // this.addForm.resetFields() // 清空
|
|
|
- // 调用父组件的方法 查询数据
|
|
|
- console.log('33')
|
|
|
- this.fatherMethod()
|
|
|
- }
|
|
|
- })
|
|
|
+ scheduleObject.backgroundColor = values.backgroundColor
|
|
|
+ // 修改------------------------------------------------
|
|
|
+ if (this.formData.id) {
|
|
|
+ scheduleObject.id = this.formData.id
|
|
|
+ console.log('这是修改')
|
|
|
+ scheduleUpdate(scheduleObject).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('日程修改成功')
|
|
|
+ this.savePlanModalVisible = false
|
|
|
+ this.addForm.resetFields() // 清空
|
|
|
+ // 调用父组件方法（查询数据）
|
|
|
+ this.fatherMethod()
|
|
|
+ }
|
|
|
+ if (this.scheduleObject === this.formData) {
|
|
|
+ console.log('00', this.scheduleObject)
|
|
|
+ console.log('11', this.formData)
|
|
|
+ console.log('没做修改的状态')
|
|
|
+ this.$message.success('您未做任何修改')
|
|
|
+ // 未做任何修改，状态不变
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 新增------------------------------------------
|
|
|
+ scheduleAdd(scheduleObject).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.savePlanModalVisible = false
|
|
|
+ this.$message.success('新增日程成功')
|
|
|
+ this.addForm.resetFields() // 清空
|
|
|
+ // 调用父组件的方法(查询数据)
|
|
|
+ this.fatherMethod()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // ----------------------------------------------
|
|
|
} else {
|
|
|
+ this.$message.success('请填写信息')
|
|
|
console.log('没有填写相关信息')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
// 日程时间
|
|
|
continueTimeChange (date, dateString) {
|
|
|
console.log('date>>>>>>>>>>>>>>>', date)
|
|
|
console.log('dateString>>>>>>>>>>>>>>>', dateString)
|
|
|
- let startTime = date[0].format('YYYY-MM-DD') // 也可以不要具体时间
|
|
|
- let endTime = date[1].format('YYYY-MM-DD')
|
|
|
+ // var ssmm = dateString
|
|
|
+ // console.log('神神秘秘', ssmm)
|
|
|
+ // let startTime = date[0].format('YYYY-MM-DD HH:mm') // 也可以不要具体时间
|
|
|
+ // let endTime = date[1].format('YYYY-MM-DD HH:mm')
|
|
|
+ let startTime = dateString[0]
|
|
|
+ let ee = dateString[1]
|
|
|
console.log('startTime', startTime)
|
|
|
- console.log('endTime', endTime)
|
|
|
+ console.log('endTime', ee)
|
|
|
},
|
|
|
+
|
|
|
handleCancel (e) {
|
|
|
- console.log('取消按钮')
|
|
|
+ // console.log('取消按钮')
|
|
|
this.addForm.resetFields() // 清空
|
|
|
this.savePlanModalVisible = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.ant-radio-button-wrapper-checked {
|
|
|
+ border: 3px solid #36cfc9;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+</style>
|
liangyan0105