|
|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <div class="forex-calendar-wrap">
|
|
|
+ <div class="calendar-header">
|
|
|
+ <div class="left-select">
|
|
|
+ <!-- 添加事项 -->
|
|
|
+ <el-button
|
|
|
+ v-permission="permissionBtn.toolBoxPermission.forexCalendar_save"
|
|
|
+ type="primary" @click="dateClick">{{ $t('ToolBox.ForexCalendar.add_item') }}</el-button>
|
|
|
+ <!-- 选择日期 -->
|
|
|
+ <el-date-picker type="month" :placeholder="$t('ToolBox.ForexCalendar.select_date')"
|
|
|
+ :clearable="false"
|
|
|
+ v-model="monthValue"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ :disabled="!permissionValue"
|
|
|
+ style="margin-left: 30px;"
|
|
|
+ @change="changeMonth"/>
|
|
|
+ </div>
|
|
|
+ <div class="center-title"> <!-- 当前日期 -->
|
|
|
+ {{ $t('ToolBox.ForexCalendar.header_title',{
|
|
|
+ //中文版传字符,英文版传月份翻译
|
|
|
+ month:$i18n.locale==='zh'?`${currentMonth}`:calendarTrans.Month[Number(currentMonth)||1].en,
|
|
|
+ year:currentYear||'2024'})
|
|
|
+ }}</div>
|
|
|
+ <div class="right-select">
|
|
|
+
|
|
|
+ <el-cascader :options="permissonList"
|
|
|
+ ref="cascaderRef"
|
|
|
+ :placeholder="$t('ToolBox.ForexCalendar.select_type')"
|
|
|
+ v-model="permissionValue"
|
|
|
+ :props="{
|
|
|
+ children:'Children',
|
|
|
+ expandTrigger:'hover',
|
|
|
+ emitPath:false,
|
|
|
+ value:'ChartPermissionId',
|
|
|
+ label:'ChartPermissionName'
|
|
|
+ }"
|
|
|
+ style="min-width:300px;"
|
|
|
+ @change="changePermission"
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BaseCalendar
|
|
|
+ ref="baseCalendar"
|
|
|
+ :markText="{
|
|
|
+ date:`${$t('ToolBox.ForexCalendar.mark_date',{
|
|
|
+ month:$i18n.locale==='zh'?`${currentMonth}`:calendarTrans.Month[Number(currentMonth)||1].en,
|
|
|
+ year:currentYear||'2024'})
|
|
|
+ }`,
|
|
|
+ type:`${permissionName}`
|
|
|
+ }"
|
|
|
+ @dateClick="dateClick"
|
|
|
+ @eventClick="eventClick"
|
|
|
+ ></BaseCalendar>
|
|
|
+ <AddEventDialog
|
|
|
+ :isEventDialogShow="isEventDialogShow"
|
|
|
+ :choosedDay="choosedDay"
|
|
|
+ :choosedPermission="permissionValue"
|
|
|
+ @save="addEvents"
|
|
|
+ @close="isEventDialogShow=false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BaseCalendar from './components/BaseCalendar.vue';
|
|
|
+import AddEventDialog from './components/AddEventDialog.vue';
|
|
|
+import calendarTrans from '@/lang/modules/ToolBox/calendar/commonLang';
|
|
|
+import {ForexCalendarInterface} from '@/api/modules/toolBoxApi';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ monthValue:'',//选择的月份
|
|
|
+ permissionValue:'',//选择的品种Id
|
|
|
+ permissionName:'',//选择的品种Name
|
|
|
+ permissonList:[],//品种列表
|
|
|
+
|
|
|
+ calendarApi:null,//日历Api
|
|
|
+ calendarTrans:calendarTrans,//翻译方法
|
|
|
+
|
|
|
+ isEventDialogShow:false,//控制添加事项弹窗
|
|
|
+ eventInfo:null,
|
|
|
+ choosedDay:'',//选择的日期
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ currentYear(){//选择的年份
|
|
|
+ const date = this.monthValue||new Date()
|
|
|
+ return this.$moment(date).format('YYYY')
|
|
|
+ },
|
|
|
+ currentMonth(){//选择的月份
|
|
|
+ const date = this.monthValue||new Date()
|
|
|
+ return this.$moment(date).format('MM')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getPermissonList(){
|
|
|
+ ForexCalendarInterface.getPermissionList().then(res=>{
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ this.permissonList = res.Data||[]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changePermission(){
|
|
|
+ this.getPermissionName()
|
|
|
+ this.renderCalendar()
|
|
|
+ },
|
|
|
+ //获取选择品种的名称
|
|
|
+ getPermissionName(){
|
|
|
+ const node = this.$refs.cascaderRef.getCheckedNodes(true)[0]
|
|
|
+ this.permissionName = node.label
|
|
|
+ },
|
|
|
+ changeMonth(month){
|
|
|
+ const Month = month||new Date()
|
|
|
+ this.calendarApi.gotoDate(Month)
|
|
|
+ this.renderCalendar()
|
|
|
+ },
|
|
|
+ async renderCalendar(){
|
|
|
+ //获取当前日历的起始日期+终止日期,可能会跨月
|
|
|
+ const {activeStart,activeEnd} = this.calendarApi.view
|
|
|
+ const res = await ForexCalendarInterface.getCalendarEventList({
|
|
|
+ ChartPermissionId:Number(this.permissionValue),
|
|
|
+ StartDate:this.$moment(activeStart).format('YYYY-MM-DD'),
|
|
|
+ EndDate:this.$moment(activeEnd).subtract(1, 'days').format('YYYY-MM-DD'), //activeEnd到最后一天的24：00会被认为是第二天，所以取前一天
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ const allEventSource = this.calendarApi.getEventSources()||[]
|
|
|
+ //先清空所有eventSource，再添加
|
|
|
+ allEventSource.forEach(es=>es.remove())
|
|
|
+ //将日历表每天的事件作为一个eventSource
|
|
|
+ const eventList = (res.Data?res.Data:[]).map(dailyEvents=>{
|
|
|
+ const eventSource = { id:dailyEvents.Date,events:[]}
|
|
|
+ eventSource.events = dailyEvents.Matters.map(e=>{
|
|
|
+ return {
|
|
|
+ ...e,
|
|
|
+ start:e.MatterDate,
|
|
|
+ title:e.Title,
|
|
|
+ textColor:e.FontColor||'#000',
|
|
|
+ backgroundColor:e.FillingColor||'#fff',
|
|
|
+ borderColor:e.FillingColor||'#fff',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return eventSource
|
|
|
+ })
|
|
|
+ eventList.forEach(es=>{
|
|
|
+ this.calendarApi.addEventSource(es)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //点击单元格（非事项部分）
|
|
|
+ dateClick(info){
|
|
|
+ this.setEventInfo(info.dateStr)
|
|
|
+ },
|
|
|
+ //点击事项
|
|
|
+ eventClick(info){
|
|
|
+ this.setEventInfo(info.event.startStr)
|
|
|
+ },
|
|
|
+ //根据日期设置弹窗信息
|
|
|
+ setEventInfo(date){
|
|
|
+ if(!this.permissionBtn.isShowBtn('toolBoxPermission','forexCalendar_save')) return
|
|
|
+ if(!this.permissionValue) return this.$message.warning(this.$t('ToolBox.ForexCalendar.select_type_hint'))
|
|
|
+ this.choosedDay = date||''
|
|
|
+ this.isEventDialogShow = true
|
|
|
+ },
|
|
|
+ //添加事项（批量）
|
|
|
+ async addEvents({events,eventDay}){
|
|
|
+ //需要添加的事项
|
|
|
+ const eventSource = events.map((e,index)=>{
|
|
|
+ return {
|
|
|
+ FeCalendarMatterId:e.FeCalendarMatterId||0,
|
|
|
+ Title:e.title,
|
|
|
+ MatterType:Number(e.MatterType),
|
|
|
+ EdbInfoId:Number(e.EdbInfoId||''),
|
|
|
+ EdbUniqueCode:e.EdbUniqueCode||'',
|
|
|
+ EdbCode:e.EdbCode||'',
|
|
|
+ FontBold:e.FontBold,
|
|
|
+ FontColor:e.textColor,
|
|
|
+ FillingColor:e.backgroundColor,
|
|
|
+ Sort:index+1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ //通过接口，添加该日的事件
|
|
|
+ const res = await ForexCalendarInterface.saveDailyEvents({
|
|
|
+ ChartPermissionId:Number(this.permissionValue),
|
|
|
+ MatterDate:eventDay,
|
|
|
+ Matters:eventSource
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+
|
|
|
+ //重新加载日历
|
|
|
+ if(this.$moment(eventDay).format('MM')===this.currentMonth){
|
|
|
+ this.renderCalendar()
|
|
|
+ }else{
|
|
|
+ this.monthValue = this.$moment(eventDay).format('YYYY-MM')
|
|
|
+ this.changeMonth(this.monthValue)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isEventDialogShow = false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: { BaseCalendar , AddEventDialog },
|
|
|
+ mounted(){
|
|
|
+ this.monthValue = this.$moment(new Date()).format('YYYY-MM')
|
|
|
+ this.calendarApi = this.$refs.baseCalendar.$refs.fullCalendar.getApi()
|
|
|
+ this.getPermissonList()
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.forex-calendar-wrap{
|
|
|
+ min-height: calc(100vh - 120px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:20px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .calendar-header{
|
|
|
+ display: flex;
|
|
|
+ justify-content:space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .center-title{
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo
