部分接口联调

src/api/modules/toolBoxApi.js

@@ -11,4 +11,85 @@ export const ToolBoxInterface = {
     getSheetDetail:(params)=>{
         return http.get('/meeting_probabilities/detail',params)
     }
+}
+
+//外汇日历表
+export const ForexCalendarInterface = {
+    /**
+     * 获取品种列表
+     * @param {*} params 
+     * @returns [{ChartPermissionId,ChartPermissionName }]
+     */
+    getPermissionList:(params)=>{
+        return http.get("/fe_calendar/permission/list",params)
+    },
+    /**
+     * 获取日期范围内事项列表
+     * @param {*} params 
+     * @param {Number} params.ChartPermissionId 品种ID
+     * @param {String} params.StartDate 起始时间
+     * @param {String} params.EndDate 终止时间
+     * @returns [{
+     *      Date:"2024-03-28",//事项日期
+     *      Matters:[],//事项详情
+     * }]
+     */
+    getCalendarEventList:(params)=>{
+        return http.get("/fe_calendar/matter/list?",params)
+    },
+    /**
+     * 获取指定日期事项列表
+     * @param {Object} params 
+     * @param {Number} params.ChartPermissionId 品种ID
+     * @param {String} params.MatterDate "2024-03-29" 指定日期
+     * @returns [{ //事项详情
+     *      "FeCalendarMatterId": 2, //事项ID
+            "ChartPermissionId": 3, //品种ID
+            "ChartPermissionName": "原油", //品种名称
+            "MatterDate": "2024-03-29", //事项日期
+            "Title": "指标B0002", //事项标题
+            "MatterType": 2, //事项类型：1-自定义事项；2-基础指标；3-预测指标
+            "EdbInfoId": 104507, //指标ID
+            "EdbUniqueCode": "c7959050a204e7479c392d11d1b3b88e", //指标唯一编码
+            "EdbCode": "C2403297186", //指标编码
+            "FontColor": "#000fff", //字体颜色
+            "FillingColor": "#f28500", /填充颜色
+            "FontBold": 1, //字体加粗：0-否；1-是
+            "Sort": 1 //排序
+     * }]
+     */
+    getDailyEventList:(params)=>{
+        return http.get("/fe_calendar/matter/detail",params)
+    },
+    /**
+     * 保存指定日期的事项
+     * @param {Object} params //品种ID
+     * @param {Number} params.ChartPermissionId //事项日期
+     * @param {String} params.MatterDate //事项列表
+     * @param {Object[]} params.Matters
+     * @param {Number} params.Matters.FeCalendarMatterId //事项ID，大于0为更新
+     * @param {String} params.Matters.Title //事项标题
+     * @param {Number} params.Matters.MatterType //事项类型：1-自定义事项；2-基础指标；3-预测指标
+     * @param {Number} params.Matters.EdbInfoId //指标ID，类型为2/3时必填
+     * @param {String} params.Matters.EdbUniqueCode //指标唯一编码，类型为2/3时必填
+     * @param {String} params.Matters.EdbCode //指标编码，类型为2/3时必填
+     * @param {String} params.Matters.FontColor //字体颜色
+     * @param {String} params.Matters.FillingColor //填充颜色
+     * @param {Number} params.Matters.FontBold //字体加粗：0-否；1-是
+     * @param {Number} params.Matters.Sort //排序
+     * @returns 
+     */
+    saveDailyEvents:(params)=>{
+        return http.post("/fe_calendar/matter/save",params)
+    },
+    /**
+     * 搜索指标/预测指标库
+     * @param {*} params 
+     * @param {String} params.KeyWord
+     * @param {Number} params.CurrentIndex
+     * @returns 
+     */
+    searchEdbInfo:(params)=>{
+        return http.get("/edb_info/filter_by_es/all",params)
+    }
 }

src/views/toolBox_manage/ForexCalendar.vue

@@ -10,7 +10,7 @@
                     v-model="monthValue"
                     value-format="yyyy-MM"
                     :disabled="!varietyValue"
-                    @change="changeMound"/>
+                    @change="changeMonth"/>
             </div>
             <div class="center-title"> <!-- 当前日期 -->
                 {{ $t('ToolBox.ForexCalendar.header_title',{
@@ -19,7 +19,12 @@
                     year:currentYear||'2024'}) 
                 }}</div>
             <div class="right-select">
-                <el-select placeholder="请选择品种" v-model="varietyValue"></el-select>
+                <el-select placeholder="请选择品种" v-model="varietyValue" @change="renderCalendar">
+                    <el-option v-for="item in permissonList" :key="item.ChartPermissionId" 
+                        :label="item.ChartPermissionName"
+                        :value="item.ChartPermissionId"
+                    />
+                </el-select>
             </div>
         </div>
         <BaseCalendar
@@ -37,6 +42,7 @@
         <AddEventDialog
             :isEventDialogShow="isEventDialogShow"
             :choosedDay="choosedDay"
+            :choosedPermission="varietyValue"
             :dayEvents="dayEvents"
             @save="addEvents"
             @close="isEventDialogShow=false"
@@ -48,11 +54,13 @@
 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:'',
             varietyValue:'',
+            permissonList:[],
             calendarApi:null,
             calendarTrans:calendarTrans,
             isEventDialogShow:false,
@@ -72,29 +80,49 @@ export default {
         }
     },
     methods: {
-        changeMound(month){
+        getPermissonList(){
+            ForexCalendarInterface.getPermissionList().then(res=>{
+                if(res.Ret!==200) return 
+                this.permissonList = res.Data||[]
+            })
+        },
+        changeMonth(month){
             const Month = month||new Date()
             this.calendarApi.gotoDate(Month)
             this.renderCalendar()
         },
-        renderCalendar(){
-            //请求当月的日历表
-            //将日历表每天的事件作为一个eventSource
-            /** an eventSource
-             * {
-             *      id:'2024-03-27',//id为日期
-             *      events:[],//当天的事件
-             * }
-             */
-            //this.calendarApi.addEventSource({events:[...],id:'2024-03-27'}) ←通过api添加
-
-            //const allEventSource = this.calendarApi.getEventSources()||[]
-            //console.log('??',allEventSource)
+        async renderCalendar(){
+            //获取当前日历的起始日期+终止日期,可能会跨月
+            const {activeStart,activeEnd} = this.calendarApi.view
+            const res = await ForexCalendarInterface.getCalendarEventList({
+                ChartPermissionId:Number(this.varietyValue),
+                StartDate:this.$moment(activeStart).format('YYYY-MM-DD'),
+                EndDate:this.$moment(activeEnd).format('YYYY-MM-DD')
+            })
+            if(res.Ret!==200) return 
+            const allEventSource = this.calendarApi.getEventSources()||[]
             //先清空所有eventSource，再添加
-            //allEventSource.forEach(es=>es.remove())
-
-
-
+            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)
+            })
+            
+            console.log(this.calendarApi.getEventSources())
         },
         //点击单元格（非事项部分）
         dateClick(info){
@@ -115,24 +143,30 @@ export default {
             this.isEventDialogShow = true
         },
         //添加事项（批量）
-        addEvents({events,eventDay}){
+        async addEvents({events,eventDay}){
             //需要添加的事项
-            const eventSource = events.map(e=>{
+            const eventSource = events.map((e,index)=>{
                 return {
-                    ...e,
-                    start:eventDay,
-                    borderColor:e.backgroundColor
+                    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
                 }
             })
-            //----mock
-            //将日历表eventDay的事项全部删除
-            const currentDayEvents = this.calendarApi.getEventSourceById(eventDay)
-            currentDayEvents&&currentDayEvents.remove()
-            //将新的事件添加进去
-            this.calendarApi.addEventSource({events:eventSource,id:eventDay})
-            //------
 
             //通过接口，添加该日的事件
+            const res = await ForexCalendarInterface.saveDailyEvents({
+                ChartPermissionId:Number(this.varietyValue),
+                MatterDate:eventDay,
+                Matters:eventSource
+            })
+            if(res.Ret!==200) return 
 
             //重新加载日历
             if(this.$moment(eventDay).format('MM')===this.currentMonth){
@@ -149,6 +183,7 @@ export default {
     mounted(){
         this.monthValue = this.$moment(new Date()).format('YYYY-MM')
         this.calendarApi = this.$refs.baseCalendar.$refs.fullCalendar.getApi()
+        this.getPermissonList()
     }
 };
 </script>

src/views/toolBox_manage/components/BaseCalendar.vue

@@ -6,7 +6,7 @@
         >
             <template #eventContent="arg">
                 <div class="popper-content"
-                    :style="{fontWeight:arg.event.extendedProps.isTextBold?'bold':'normal'}"
+                    :style="{fontWeight:arg.event.extendedProps.FontBold?'bold':'normal'}"
                 >
                    {{arg.event.title||''}}
                 </div>
@@ -60,20 +60,20 @@ export default {
                     return arg.date.getDate()
                 },
                 events:[
-                    {
+                    /* {
                         id:1,
                         title:'我是默认事件', //事件名称
                         start:'2024-03-26',//日期,默认是全天事件
                         textColor:'#000',//字体颜色
                         backgroundColor:'#ffc0cb',//背景色
                         borderColor:'#ffc0cb',//边框色
-                        /* extendedProps */
+                        //↑此外的属性会被FullCalendar插件放到extendedProps属性中
+                        //extendedProps
                         isTextBold:true,//是否加粗
-                        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
-                        edbId:0,//指标id/code
 
-                    },
+                    }, */
                 ],
+                eventSource:[],
                 dateClick:this.handleDateClick,
                 eventClick:this.handleEventClick
             }

src/views/toolBox_manage/components/addEventDialog.vue

@@ -34,9 +34,9 @@
                         <i slot="prefix" class="el-input__icon el-icon-search"></i>
                         <el-option
                             v-for="item in searchOptions"
-                            :key="item.PptId"
-                            :label="item.Title"
-                            :value="item.PptId"/>
+                            :key="item.EdbInfoId"
+                            :label="item.EdbName"
+                            :value="item.EdbInfoId"/>
                     </el-select>
                     <!-- 自定义事项 -->
                     <el-button v-if="selectType===2" style="flex:1;" @click="addEventItem">+</el-button>
@@ -73,7 +73,7 @@
                             <div class="event-expand-setting" v-show="item.isExpand">
                                 <span>{{ $t('ToolBox.ForexCalendar.font_color') }} <el-color-picker v-model="item.textColor" color-format="hex" size="mini"></el-color-picker></span>
                                 <span>{{ $t('ToolBox.ForexCalendar.fill_color') }} <el-color-picker v-model="item.backgroundColor" color-format="hex" size="mini"></el-color-picker></span>
-                                <span>{{ $t('ToolBox.ForexCalendar.font_bold') }} <el-switch v-model="item.isTextBold"></el-switch></span>
+                                <span>{{ $t('ToolBox.ForexCalendar.font_bold') }} <el-switch v-model="item.FontBold" :active-value="1" :inactive-value="0"></el-switch></span>
                             </div>
                         </div>
                     </draggable>
@@ -92,6 +92,7 @@
 
 <script>
 import draggable from 'vuedraggable';
+import {ForexCalendarInterface} from '@/api/modules/toolBoxApi';
 export default {
     components:{draggable},
     props:{
@@ -103,6 +104,10 @@ export default {
             type:String,
             default:''
         },
+        choosedPermission:{
+            type:Number,
+            default:0
+        },
         dayEvents:{
             type:Array,
             default:[]
@@ -134,13 +139,32 @@ export default {
         }
     },
     methods: {
-        searchHandle(){},
+        searchHandle(keyword){
+            ForexCalendarInterface.searchEdbInfo({
+                KeyWord:keyword,
+                CurrentIndex:100
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                this.searchOptions = res.Data.List||[]
+            })
+        },
         //获取当天的事项
         getDayEvents(){
+            this.eventForm.events = []
             //接口获取
-
-            console.log('dayEvents',this.dayEvents)
-            this.eventForm.events = this.dayEvents
+            ForexCalendarInterface.getDailyEventList({
+                ChartPermissionId:Number(this.choosedPermission),
+                MatterDate:Number(this.choosedDay)
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                console.log('dayEvents',this.dayEvents)
+                this.eventForm.events = (res.Data?res.Data:[]).map(e=>{
+                    return {
+                        ...e,
+                        isExpand:false
+                    }
+                })
+            })
         },
         //添加一个事项
         addEventItem(){
@@ -148,8 +172,14 @@ export default {
                 title:'',
                 textColor:'#000',
                 backgroundColor:'#ccc',
-                isTextBold:false,
                 isExpand:false,
+                MatterType:1,
+                FontBold:0,
+                FeCalendarMatterId:0,
+                EdbInfoId:'',
+                EdbUniqueCode:'',
+                EdbCode:'',
+                
             })
         },
         removeEvent(index){