|
|
@@ -96,70 +96,98 @@
|
|
|
<!-- 日程 -->
|
|
|
<el-container>
|
|
|
<section class="main-section">
|
|
|
- <MyFullCalendar :events="calendarEvents" @dateClick="dateClick" @expand="calendarDialogVisible = true" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
|
|
|
+ <MyFullCalendar
|
|
|
+ :events="calendarEvents"
|
|
|
+ @dateClick="dateClick"
|
|
|
+ @change="queryWorkListByTime"
|
|
|
+ @select="select"
|
|
|
+ @eventClick="showSchedule"
|
|
|
+ @add="dateClick"
|
|
|
+ />
|
|
|
</section>
|
|
|
+ <article v-show="showDetail" ref="show-schedule-detail" class="show-schedule-detail">
|
|
|
+ <template v-if="nowDetailData && nowDetailData.origin === 0">
|
|
|
+ <div class="detail-title">【任务排期】{{ nowDetailData.name }}</div>
|
|
|
+ <div class="detail-time item">
|
|
|
+ <div class="label">排期：</div>
|
|
|
+ <div>{{ nowDetailData.seperateDaysHasHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-people item"><div class="label">参与人：</div>{{ nowDetailData.peopleObject.name }}</div>
|
|
|
+ <div class="detail-needs item"><div class="label">所属需求：</div>{{ nowDetailData.requireNames | arrToString }}</div>
|
|
|
+ <div class="detail-tasks item"><div class="label">关联任务：</div>{{ nowDetailData.taskNames | arrToString }}</div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="cancel" @click="deleteSchedule">删除</div>
|
|
|
+ <div class="edit" @click="editSchedule">编辑</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="nowDetailData && nowDetailData.origin === 1">
|
|
|
+ <div class="detail-title">【日程】{{ nowDetailData.name }}</div>
|
|
|
+ <div class="detail-time item">
|
|
|
+ <div class="label">排期：</div>
|
|
|
+ <div>{{ nowDetailData.seperateDaysHasHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-people item"><div class="label">参与人：</div>{{ nowDetailData.peopleObject.name }}</div>
|
|
|
+ <div class="detail-needs item"><div class="label">同步到团队：</div>{{ nowDetailData.syncTeam === 0?'否':'是' }}</div>
|
|
|
+ <div class="detail-tasks item"><div class="label">日程描述：</div>{{ nowDetailData.desc }}</div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="cancel" @click="deleteSchedule">删除</div>
|
|
|
+ <div class="edit" @click="editSchedule">编辑</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </article>
|
|
|
</el-container>
|
|
|
<!-- 日程 -->
|
|
|
- <el-dialog
|
|
|
- class="workbench_fullscreen_dialog"
|
|
|
- :visible.sync="calendarDialogVisible"
|
|
|
- :fullscreen="true"
|
|
|
- style="margin-top: 55px;"
|
|
|
- :modal="false"
|
|
|
- >
|
|
|
- <el-tabs v-model="tabsActiveName" style="margin-right: 20px;" @tab-click="handleTabsClick">
|
|
|
- <el-tab-pane label="日历视图" name="1" style="padding: 31px 146px">
|
|
|
- <MyFullCalendar :events="calendarEvents" type="big" @dateClick="dateClick" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-dialog>
|
|
|
<!-- 日程操作弹框 -->
|
|
|
<calendar-dialog
|
|
|
:title="'编辑日程'"
|
|
|
- :visible="updateSelfScheduleDialog.visible"
|
|
|
- :data="updateSelfScheduleDialog.data"
|
|
|
- @cancel="updateSelfScheduleDialog.visible = false"
|
|
|
- @confirm="updateSelfScheduleDialog.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
|
|
|
+ :visible.sync="updateSchedule.visible"
|
|
|
+ :data="updateSchedule.data"
|
|
|
+ @confirm="queryWorkListByTime(calendarView)"
|
|
|
/>
|
|
|
<calendar-dialog
|
|
|
:title="'新建日程'"
|
|
|
- :visible="createSelfScheduleDialog.visible"
|
|
|
- :data="createSelfScheduleDialog.data"
|
|
|
- @cancel="createSelfScheduleDialog.visible = false"
|
|
|
- @confirm="createSelfScheduleDialog.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
|
|
|
- />
|
|
|
- <delete-dialog
|
|
|
- :content="'是否删除当前日程'"
|
|
|
- :visible="deleteSelfScheduleDialog.visible"
|
|
|
- @cancel="deleteSelfScheduleDialog.visible = false"
|
|
|
- @confirm="deleteSelfSchedule();queryWorkListByTime(calendarView)"
|
|
|
+ :visible.sync="createSchedule.visible"
|
|
|
+ :data="createSchedule.data"
|
|
|
+ @confirm="queryWorkListByTime(calendarView)"
|
|
|
/>
|
|
|
<!-- 日程操作弹框 -->
|
|
|
+ <!-- 排期操作弹框 -->
|
|
|
+ <modify-schedule
|
|
|
+ v-if="visibleSchedule"
|
|
|
+ :visible.sync="visibleSchedule"
|
|
|
+ :detail-data="updateSchedule.data"
|
|
|
+ :title="'修改排期'"
|
|
|
+ @update="queryWorkListByTime(calendarView)"
|
|
|
+ />
|
|
|
+ <!-- 排期操作弹框 -->
|
|
|
</el-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-const _ = require('lodash')
|
|
|
+// const _ = require('lodash')
|
|
|
import MyFullCalendar from './myFullCalendar'
|
|
|
import moment from 'moment'
|
|
|
import CalendarDialog from './calendarFormDialog'
|
|
|
-import DeleteDialog from '@/components/dialog/delete.vue'
|
|
|
import {
|
|
|
queryTeamInfoList,
|
|
|
showTeamAndMemberEnum,
|
|
|
- updateSelfSchedule,
|
|
|
queryWorkListByTime,
|
|
|
- queryWorkList,
|
|
|
- queryIdleList,
|
|
|
deleteSelfSchedule
|
|
|
} from '@/api/workSchedule.js'
|
|
|
+import { scheduleDelete } from '@/api/projectViewDetails'
|
|
|
+import modifySchedule from '@/views/projectManage/projectList/components/modifySchedule'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
MyFullCalendar,
|
|
|
CalendarDialog,
|
|
|
- DeleteDialog
|
|
|
+ modifySchedule
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ arrToString(val) {
|
|
|
+ return Array.isArray(val) ? val.join(',') : val
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -173,63 +201,41 @@ export default {
|
|
|
{ title: 'Event Now', start: new Date(), end: new Date().setDate(16) }
|
|
|
],
|
|
|
deleteDialogVisible: false,
|
|
|
- createSelfScheduleDialog: { // 新建日程
|
|
|
- visible: false,
|
|
|
- data: null
|
|
|
- },
|
|
|
- updateSelfScheduleDialog: { // 更新日程
|
|
|
+ createSchedule: { // 新建日程
|
|
|
visible: false,
|
|
|
data: null
|
|
|
},
|
|
|
- deleteSelfScheduleDialog: { // 删除日程
|
|
|
+ updateSchedule: { // 更新日程
|
|
|
visible: false,
|
|
|
data: null
|
|
|
},
|
|
|
- selfScheduleStatusEnum: [ // 日程状态列表
|
|
|
- { name: '进行中', code: 0 },
|
|
|
- { name: '未开始', code: 1 },
|
|
|
- { name: '过去的', code: 2 }
|
|
|
- ],
|
|
|
- selfScheduleListTotal: 10,
|
|
|
- selfScheduleForm: {
|
|
|
- searchScheduleInfo: {
|
|
|
- status: 0,
|
|
|
- origin: [0, 1]
|
|
|
- },
|
|
|
- teamSearchInfo: { bizId: localStorage.getItem('bizId') || null },
|
|
|
- pageInfoDO: {
|
|
|
- curIndex: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- syncTeam: 1
|
|
|
- },
|
|
|
- selfScheduleBusyTableData: [],
|
|
|
- selfScheduleIdleTableData: [],
|
|
|
- busyClassName: 'selected',
|
|
|
- idleClassName: 'idle',
|
|
|
- timeSelectVal: [new Date(), moment(new Date()).add(29, 'day')],
|
|
|
- tabsActiveName: '1',
|
|
|
- teamInfoShow: false,
|
|
|
teamAndMemberEnum: {},
|
|
|
teamAndMemberMap: {},
|
|
|
teamInfo: null, // 团队信息数据
|
|
|
userInfo: {},
|
|
|
username: localStorage.getItem('username'),
|
|
|
realname: localStorage.getItem('realname'),
|
|
|
- calendarDialogVisible: false,
|
|
|
- pickerOptions: {
|
|
|
- disabledDate(time) {
|
|
|
- return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
|
|
|
- }
|
|
|
- }
|
|
|
+ nowDetailData: null, // 当前日程详情
|
|
|
+ showDetail: false,
|
|
|
+ visibleSchedule: false // 排期任务弹框
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.showTeamAndMemberEnum()
|
|
|
- this.queryWorkList()
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$store.state.data.status = false
|
|
|
+ document.body.addEventListener('click', e => {
|
|
|
+ const event = document.querySelector('.show-schedule-detail')
|
|
|
+ const isIn = e.target.className === 'fc-content' || e.target.className === 'fc-time' || e.target.className === 'fc-title'
|
|
|
+ if (!event || isIn) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ const isContain = event.contains(e.target)
|
|
|
+ if (!isContain) {
|
|
|
+ this.showDetail = false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
getName(scope) {
|
|
|
@@ -242,88 +248,94 @@ export default {
|
|
|
}
|
|
|
return ret
|
|
|
},
|
|
|
- async updateSelfSchedule(info) { // 更新日程
|
|
|
- const form = {
|
|
|
- id: info.event.id,
|
|
|
- startTime: info.event.start,
|
|
|
- endTime: info.event.end
|
|
|
- }
|
|
|
- await updateSelfSchedule(form)
|
|
|
+ showSchedule(e) { // 查看日程详情
|
|
|
+ const res = this.calendarEvents.find(item => item.id === Number(e.event.id))
|
|
|
+ this.nowDetailData = res.detailData
|
|
|
+ this.showDetail = true
|
|
|
+ this.$refs['show-schedule-detail'].style.left = `${e.jsEvent.clientX - 200}px`
|
|
|
+ this.$refs['show-schedule-detail'].style.top = `${e.jsEvent.clientY + 20}px`
|
|
|
+ },
|
|
|
+ dateClick(arg) { // 新建日程弹框
|
|
|
+ this.createSchedule.data = arg
|
|
|
+ this.createSchedule.visible = true
|
|
|
},
|
|
|
- dateClick(arg) {
|
|
|
- console.log(arg)
|
|
|
- // this.createSelfScheduleDialog.data = arg
|
|
|
- // this.createSelfScheduleDialog.visible = true
|
|
|
+ select(selectionInfo) { // 多选日期新建日程弹框
|
|
|
+ this.createSchedule.data = {
|
|
|
+ startStr: selectionInfo.startStr,
|
|
|
+ endStr: moment(selectionInfo.endStr).subtract(1, 'day').format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ this.createSchedule.visible = true
|
|
|
},
|
|
|
openUpdateTeamInfoDialog(row) {
|
|
|
|
|
|
},
|
|
|
- openUpdateSelfScheduleDialog(val) {
|
|
|
- const form = _.cloneDeep(val)
|
|
|
- form.startTime = moment(form.startTime).toDate()
|
|
|
- form.endTime = moment(form.endTime).toDate()
|
|
|
- form.time = [form.startTime, form.endTime]
|
|
|
- if (form.bizId !== null) {
|
|
|
- form.isJoin = 1
|
|
|
- } else {
|
|
|
- form.isJoin = 0
|
|
|
+ editSchedule() { // 编辑日程弹框
|
|
|
+ const dayArr = this.nowDetailData.theDays.split(',')
|
|
|
+ const form = {
|
|
|
+ detailDayList: dayArr,
|
|
|
+ id: this.nowDetailData.id,
|
|
|
+ name: this.nowDetailData.name,
|
|
|
+ dayList: Array.from(new Set([dayArr[0], dayArr[dayArr.length - 1]])),
|
|
|
+ isJoin: this.nowDetailData.bizId !== null ? 1 : 0, // 是否关联业务线
|
|
|
+ syncTeam: this.nowDetailData.syncTeam, // 是否同步 0 不同步 1同步
|
|
|
+ bizId: this.nowDetailData.bizId || null,
|
|
|
+ desc: this.nowDetailData.desc,
|
|
|
+ people: this.nowDetailData.peopleObject.name,
|
|
|
+ schedule: this.nowDetailData.seperateDaysHasHoliday
|
|
|
}
|
|
|
- this.updateSelfScheduleDialog.data = form
|
|
|
- this.updateSelfScheduleDialog.visible = true
|
|
|
- },
|
|
|
- openDeleteSelfScheduleDialog(val) { // 关闭删除日程弹框
|
|
|
- this.deleteSelfScheduleDialog.data = val
|
|
|
- this.deleteSelfScheduleDialog.visible = true
|
|
|
- },
|
|
|
- select(selectionInfo) {
|
|
|
- this.createSelfScheduleDialog.data = selectionInfo
|
|
|
- this.createSelfScheduleDialog.visible = true
|
|
|
- },
|
|
|
- async deleteSelfSchedule() { // 删除日程
|
|
|
- const res = await deleteSelfSchedule(this.deleteSelfScheduleDialog.data.id)
|
|
|
- if (res.code === 200) {
|
|
|
- this.deleteSelfScheduleDialog.visible = false
|
|
|
- this.queryWorkList()
|
|
|
+ this.updateSchedule.data = form
|
|
|
+ if (this.nowDetailData.origin === 1) {
|
|
|
+ this.updateSchedule.visible = true
|
|
|
+ } else if (this.nowDetailData.origin === 0) {
|
|
|
+ this.visibleSchedule = true
|
|
|
}
|
|
|
},
|
|
|
- async queryIdleList() { // 获取个人空闲日程列表
|
|
|
- const params = {
|
|
|
- timeInfo: {
|
|
|
- startTime: moment(this.timeSelectVal[0]).format('YYYY.MM.DD'),
|
|
|
- endTime: moment(this.timeSelectVal[1]).format('YYYY.MM.DD')
|
|
|
- },
|
|
|
- pageInfoDO: this.selfScheduleForm.pageInfoDO
|
|
|
- }
|
|
|
- const res = await queryIdleList(params)
|
|
|
+ deleteSchedule() { // 确认删除日程或者排期任务
|
|
|
+ this.$confirm('是否删除此日程', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.nowDetailData.origin === 0 ? this.deleteSchedule_0() : this.deleteSchedule_1()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async deleteSchedule_1() { // 删除日程
|
|
|
+ const res = await deleteSelfSchedule(this.nowDetailData.id)
|
|
|
if (res.code === 200) {
|
|
|
- this.selfScheduleIdleTableData = res.data.list
|
|
|
- this.selfScheduleListTotal = res.data.total
|
|
|
+ this.showDetail = false
|
|
|
+ this.queryWorkListByTime(this.calendarView)
|
|
|
+ this.$message({ type: 'success', message: '删除成功!' })
|
|
|
}
|
|
|
},
|
|
|
- async queryWorkList() { // 获取用户日程信息列表
|
|
|
- const res = await queryWorkList(this.selfScheduleForm)
|
|
|
+ async deleteSchedule_0() { // 删除排期
|
|
|
+ const res = await scheduleDelete(this.nowDetailData.id)
|
|
|
if (res.code === 200) {
|
|
|
- this.selfScheduleBusyTableData = res.data.list
|
|
|
- this.selfScheduleListTotal = res.data.total
|
|
|
+ this.showDetail = false
|
|
|
+ this.queryWorkListByTime(this.calendarView)
|
|
|
+ this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
|
|
|
}
|
|
|
},
|
|
|
async queryWorkListByTime(view) { // 获取指定时间段用户日程信息
|
|
|
- console.log('queryWorkListByTime:', view)
|
|
|
this.calendarView = view
|
|
|
const params = {
|
|
|
- startTime: moment(view.activeStart).subtract(1, 'month').format('YYYY.MM.DD'),
|
|
|
- endTime: moment(view.activeEnd).add(1, 'month').format('YYYY.MM.DD'),
|
|
|
+ timeInfo: {
|
|
|
+ startTime: moment(view.activeStart).subtract(1, 'month').format('YYYY.MM.DD'),
|
|
|
+ endTime: moment(view.activeEnd).add(1, 'month').format('YYYY.MM.DD')
|
|
|
+ },
|
|
|
teamSearchInfo: { bizId: localStorage.getItem('bizId') || null },
|
|
|
searchScheduleInfo: { origin: [0, 1] }
|
|
|
}
|
|
|
const res = await queryWorkListByTime(params)
|
|
|
if (res.code === 200) {
|
|
|
- this.calendarEvents = res.data.map(item => ({
|
|
|
- id: item.id,
|
|
|
- title: item.name,
|
|
|
- start: moment(item.startTime).toDate(),
|
|
|
- end: moment(item.endTime).toDate()
|
|
|
- }))
|
|
|
+ this.calendarEvents = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ title: `${item.peopleObject.name}：${item.name}`,
|
|
|
+ start: moment(item.startTime).toDate(),
|
|
|
+ end: moment(item.endTime).add(1, 'day').toDate(),
|
|
|
+ detailData: item
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
handleTabsClick() {}, // 标签页切换
|
|
|
@@ -430,6 +442,77 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.show-schedule-detail::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 20px solid;
|
|
|
+ border-color: transparent transparent #FFFFFF;
|
|
|
+}
|
|
|
+.show-schedule-detail {
|
|
|
+ overflow: scroll;
|
|
|
+ max-height: 326px;
|
|
|
+ width: 400px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 2000;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow:0px 0px 12px rgba(0,0,0,0.1);
|
|
|
+ padding: 20px;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .label {
|
|
|
+ width: 25%;
|
|
|
+ min-width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ color: #666666;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-title {
|
|
|
+ color: #0C77E5;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #0C77E5
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .cancel,.edit {
|
|
|
+ cursor: pointer;
|
|
|
+ width:63px;
|
|
|
+ height:31px;
|
|
|
+ border-radius:4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .cancel {
|
|
|
+ color: #6F7C93;
|
|
|
+ background-color:rgba(249,249,250,1);
|
|
|
+ border:1px solid rgba(191,198,220,1);
|
|
|
+
|
|
|
+ }
|
|
|
+ .edit {
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #409EFF;
|
|
|
+ border:1px solid rgba(64,158,255,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
PrinceLee