批量添加事件，英文版设置

src/lang/modules/ToolBox/calendar/ForexCalendar.js

@@ -1,8 +1,31 @@
 export const ForexCalendarEn={
     header_title:'{month} {year} Calendar',
-    mark_date:'{month} {year}'
+    mark_date:'{month} {year}',
+    add_item:'Add Item',
+    select_date:'Select Date',
+    link_edb:'Linked Indicators',
+    link_item:'Custom Items',
+    edb_input:'Enter Index ID/Name',
+    item_input:'Enter Item Content',
+    link_hint:'Items linked to indicators default to their names, editable, max 15 chars per item, up to 6 items shown daily; excess with ellipsis.',
+    font_color:'Font Color',
+    fill_color:'Fill Color',
+    font_bold:'Bold',
+    save_success:'Save Successful'
+
 }
 export const ForexCalendarZh={
     header_title:'{year}年{month}月日历表',
-    mark_date:'{year}年{month}月'
+    mark_date:'{year}年{month}月',
+    add_item:'添加事项',
+    select_date:'请选择日期',
+    link_edb:'关联指标',
+    link_item:'自定义事项',
+    edb_input:'请输入指标ID/指标名称',
+    item_input:'请输入事项内容',
+    link_hint:'添加关联指标的事项默认以指标名称命名，可修改，每个事项最多15个字，每天最多展示6个事项，超出部分省略号表示',
+    font_color:'字体颜色',
+    fill_color:'填充颜色',
+    font_bold:'加粗',
+    save_success:'保存成功'
 }

src/views/toolBox_manage/ForexCalendar.vue

@@ -2,8 +2,10 @@
     <div class="forex-calendar-wrap">
         <div class="calendar-header">
             <div class="left-select">
-                <el-button>添加事项</el-button>
-                <el-date-picker type="month" placeholder="选择月" 
+                <!-- 添加事项 -->
+                <el-button 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"
@@ -34,6 +36,7 @@
         <AddEventDialog
             :isEventDialogShow="isEventDialogShow"
             :choosedDay="choosedDay"
+            :dayEvents="dayEvents"
             @save="addEvents"
             @close="isEventDialogShow=false"
         />
@@ -53,6 +56,7 @@ export default {
             isEventDialogShow:false,
             eventInfo:null,
             choosedDay:'',
+            dayEvents:[]
         };
     },
     computed:{
@@ -67,20 +71,76 @@ export default {
     },
     methods: {
         changeMound(month){
+            console.log('change')
             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)
+            //先清空所有eventSource，再添加
+            //allEventSource.forEach(es=>es.remove())
+
+
+
+        },
+        //点击单元格（非事项部分）
         dateClick(info){
-            console.log("dateClick-info",info)
-            //打开弹窗
-            this.isEventDialogShow = true
-            this.choosedDay = info.dateStr
+            this.setEventInfo(info.dateStr)
         },
+        //点击事项
         eventClick(info){
-            console.log("eventClick-info",info)
+            this.setEventInfo(info.event.startStr)
+        },
+        //根据日期设置弹窗信息
+        setEventInfo(date){
+            this.choosedDay = date||''
+            //----mock
+            const eventSource = this.calendarApi.getEventSourceById(date)
+            this.dayEvents = eventSource?eventSource.internalEventSource.meta||[]:[]
+            //-----
+            this.isEventDialogShow = true
         },
-        addEvents(events){
-            //addEventSource
+        //添加事项（批量）
+        addEvents({events,eventDay}){
+            //需要添加的事项
+            const eventSource = events.map(e=>{
+                return {
+                    ...e,
+                    start:eventDay,
+                    borderColor:e.backgroundColor
+                }
+            })
+            //----mock
+            //将日历表eventDay的事项全部删除
+            const currentDayEvents = this.calendarApi.getEventSourceById(eventDay)
+            currentDayEvents&&currentDayEvents.remove()
+            //将新的事件添加进去
+            this.calendarApi.addEventSource({events:eventSource,id:eventDay})
+            //------
+
+            //通过接口，添加该日的事件
+
+            //重新加载日历
+            if(this.$moment(eventDay).format('MM')===this.currentMonth){
+                this.renderCalendar()
+            }else{
+                this.monthValue = this.$moment(eventDay).format('YYYY-MM')
+                this.changeMound(this.monthValue)
+            }
+            
+            this.isEventDialogShow = false
         },
     },
     components: { BaseCalendar , AddEventDialog },

src/views/toolBox_manage/components/BaseCalendar.vue

@@ -69,8 +69,9 @@ export default {
                         borderColor:'#ffc0cb',//边框色
                         /* extendedProps */
                         isTextBold:true,//是否加粗
-                        isEdb:false,//是否为指标
-                        edbId:0,//指标id
+                        isEdb:0,//是否为指标 0否 1指标库指标 2预测指标库指标
+                        edbId:0,//指标id/code
+
                     },
                 ],
                 dateClick:this.handleDateClick,

src/views/toolBox_manage/components/addEventDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <el-dialog
-        title="添加事项"
+        :title="$t('ToolBox.ForexCalendar.add_item')"
         width="600px"
         center
         custom-class="add-event-dialog-wrap"
@@ -11,21 +11,24 @@
     >
         <div class="dialog-content">
             <div class="event-header">
+                <!-- 选择日期 -->
                 <el-date-picker  type="date" v-model="eventDay"
-                    placeholder="选择日期"
+                    :placeholder="$t('ToolBox.ForexCalendar.select_date')"
                     value-format="yyyy-MM-dd"
                     @change="getDayEvents"
                     >
                 </el-date-picker>
                 <div class="event-select">
                     <el-select v-model="selectType" style="width:130px">
-                        <el-option label="关联指标" :value="1"/>
-                        <el-option label="自定义事项" :value="2"/>
+                        <!-- 关联指标 -->
+                        <el-option :label="$t('ToolBox.ForexCalendar.link_edb')" :value="1"/>
+                        <!-- 自定义事项 -->
+                        <el-option :label="$t('ToolBox.ForexCalendar.link_item')" :value="2"/>
                     </el-select>
                     <!-- 关联指标 -->
                    <el-select v-if="selectType===1" style="flex:1;"
                         filterable remote clearable
-                        placeholder="请输入指标ID/指标名称"
+                        :placeholder="$t('ToolBox.ForexCalendar.edb_input')"
                         v-model="searchText"
                         :remote-method="searchHandle">
                         <i slot="prefix" class="el-input__icon el-icon-search"></i>
@@ -36,28 +39,61 @@
                             :value="item.PptId"/>
                     </el-select>
                     <!-- 自定义事项 -->
-                    <el-button v-if="selectType===2" style="flex:1;">+</el-button>
+                    <el-button v-if="selectType===2" style="flex:1;" @click="addEventItem">+</el-button>
 
-                    <el-tooltip effect="dark" content="Top Left 提示文字" placement="top">
+                    <el-tooltip effect="dark" :content="$t('ToolBox.ForexCalendar.link_hint')" placement="top">
                         <i class="el-icon-question" style="font-size: 16px;"></i>
                     </el-tooltip>
                 </div>
             </div>
             <div class="event-form">
-
+                <el-form :model="eventForm" ref="eventForm">
+                    <draggable 
+                        v-model="eventForm.events"
+                        animation="300"
+                        tag="div" 
+                        class="events-wrap"
+                        handle=".el-icon-rank">
+                        <div class="event" :class="{'show-bgColor':item.isExpand}" v-for="(item,index) in eventForm.events" :key="index">
+                            <el-form-item :prop="`events[${index}].title`" class="event-item"
+                                :rules="[
+                                    {required:true,message:$t('ToolBox.ForexCalendar.item_input'),trigger: 'blur'},
+                                    {max: 15, message: '超出15个字，请重新编辑', trigger: 'change'}]">
+                                <!-- move icon -->
+                                <i class="el-icon-rank icon"></i>
+                                <el-input v-model="item.title" :placeholder="$t('ToolBox.ForexCalendar.item_input')" />
+                                <!-- expand icon -->
+                                <i class="icon" :class="{'el-icon-arrow-right':item.isExpand===false,'el-icon-arrow-down':item.isExpand===true}" 
+                                    @click="item.isExpand = !item.isExpand"></i>
+                                <!-- close icon position-->
+                                <i class="el-icon-remove icon" @click="removeEvent(index)"></i>
+                                <!-- edb icon position-->
+                                <i class="el-icon-printer icon"></i>
+                            </el-form-item>
+                            <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>
+                            </div>
+                        </div>
+                    </draggable>
+                    
+                </el-form>
             </div>
             
         </div>
         <div class="dialog-footer" slot="footer">
-            <el-button>取消</el-button>
-            <el-button type="primary">保存</el-button>
+            <el-button @click="$emit('close')">{{ $t('Dialog.cancel_btn') }}</el-button>
+            <el-button type="primary" @click="handleSaveEvents">{{ $t('Dialog.confirm_save_btn') }}</el-button>
         </div>
         
     </el-dialog>
 </template>
 
 <script>
+import draggable from 'vuedraggable';
 export default {
+    components:{draggable},
     props:{
         isEventDialogShow:{
             type:Boolean,
@@ -66,6 +102,10 @@ export default {
         choosedDay:{
             type:String,
             default:''
+        },
+        dayEvents:{
+            type:Array,
+            default:[]
         }
     },
     data() {
@@ -75,7 +115,13 @@ export default {
             searchText:'',
             searchOptions:[],
             eventForm:{
-                events:[]
+                events:[/* {
+                    title:'',
+                    textColor:'#000',
+                    backgroundColor:'#ccc',
+                    isTextBold:false,
+                    isExpand:false,//是否展开
+                } */]
             }
         };
     },
@@ -91,7 +137,32 @@ export default {
         searchHandle(){},
         //获取当天的事项
         getDayEvents(){
+            //接口获取
 
+            console.log('dayEvents',this.dayEvents)
+            this.eventForm.events = this.dayEvents
+        },
+        //添加一个事项
+        addEventItem(){
+            this.eventForm.events.push({
+                title:'',
+                textColor:'#000',
+                backgroundColor:'#ccc',
+                isTextBold:false,
+                isExpand:false,
+            })
+        },
+        removeEvent(index){
+            this.eventForm.events.splice(index,1)
+        },
+        async handleSaveEvents(){
+            if(!this.eventDay) return this.$message.warning('请选择日期')
+            try{
+                await this.$refs.eventForm.validate()
+            }catch(e){
+                return 
+            }
+            this.$emit('save',{events:this.eventForm.events,eventDay:this.eventDay})
         }
     },
 };
@@ -102,6 +173,30 @@ export default {
     .el-input{
         width: 100%;
     }
+    .el-form-item{
+        margin-bottom: 10px;
+        &.event-item{
+            .el-form-item__content{
+                display: flex;
+                align-items: center;
+                gap:10px;
+            }
+        }
+    }
+    .event-expand-setting{
+        .el-color-picker {
+            display: inline-block;
+            &.el-color-picker--mini {
+                height: 20px;
+            }
+            .el-color-picker__trigger {
+                width: 40px;
+                height: 20px;
+                padding: 0;
+                border: 0;
+            }
+        }
+    }
 }
 </style>
 <style scoped lang="scss">
@@ -115,6 +210,22 @@ export default {
         }
         .event-form{
             min-height: 200px;
+            .event{
+                position:relative;
+                &.show-bgColor{
+                    background-color:#EBEBEB;
+                }
+                .event-item{
+                    .icon{
+                        cursor: pointer;
+                    }
+                }
+                .event-expand-setting{
+                    padding:0 30px;
+                    display: flex;
+                    justify-content: space-around;
+                }
+            }
         }
     }
 }