水印翻译,弹窗初始化

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

@@ -1,6 +1,8 @@
 export const ForexCalendarEn={
-    header_title:'{month} {year} Calendar'
+    header_title:'{month} {year} Calendar',
+    mark_date:'{month} {year}'
 }
 export const ForexCalendarZh={
-    header_title:'{year}年{month}月日历表'
+    header_title:'{year}年{month}月日历表',
+    mark_date:'{year}年{month}月'
 }

src/views/toolBox_manage/ForexCalendar.vue

@@ -21,21 +21,38 @@
         </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:'XXX品种'
+            }"
             @dateClick="dateClick"
             @eventClick="eventClick"
         ></BaseCalendar>
+        <AddEventDialog
+            :isEventDialogShow="isEventDialogShow"
+            :choosedDay="choosedDay"
+            @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';
 export default {
     data() {
         return {
             monthValue:'',
             calendarApi:null,
-            calendarTrans:calendarTrans
+            calendarTrans:calendarTrans,
+            isEventDialogShow:false,
+            eventInfo:null,
+            choosedDay:'',
         };
     },
     computed:{
@@ -56,12 +73,17 @@ export default {
         dateClick(info){
             console.log("dateClick-info",info)
             //打开弹窗
+            this.isEventDialogShow = true
+            this.choosedDay = info.dateStr
         },
         eventClick(info){
             console.log("eventClick-info",info)
         },
+        addEvents(events){
+            //addEventSource
+        },
     },
-    components: { BaseCalendar },
+    components: { BaseCalendar , AddEventDialog },
     mounted(){
         this.monthValue = this.$moment(new Date()).format('YYYY-MM')
         this.calendarApi = this.$refs.baseCalendar.$refs.fullCalendar.getApi()

src/views/toolBox_manage/components/BaseCalendar.vue

@@ -62,12 +62,15 @@ export default {
                 events:[
                     {
                         id:1,
-                        title:'我是默认事件',
-                        start:'2024-03-26',
-                        textColor:'#000',
-                        backgroundColor:'#ffc0cb',
-                        borderColor:'#ffc0cb',
-                        isTextBold:true
+                        title:'我是默认事件', //事件名称
+                        start:'2024-03-26',//日期,默认是全天事件
+                        textColor:'#000',//字体颜色
+                        backgroundColor:'#ffc0cb',//背景色
+                        borderColor:'#ffc0cb',//边框色
+                        /* extendedProps */
+                        isTextBold:true,//是否加粗
+                        isEdb:false,//是否为指标
+                        edbId:0,//指标id
                     },
                 ],
                 dateClick:this.handleDateClick,

src/views/toolBox_manage/components/addEventDialog.vue

@@ -1,22 +1,121 @@
 <template>
-    <div>
-        添加事件弹窗
-    </div>
+    <el-dialog
+        title="添加事项"
+        width="600px"
+        center
+        custom-class="add-event-dialog-wrap"
+        :visible.sync="isEventDialogShow"
+        :modal-append-to-body="false"
+        :append-to-body="false"
+        @close="$emit('close')"
+    >
+        <div class="dialog-content">
+            <div class="event-header">
+                <el-date-picker  type="date" v-model="eventDay"
+                    placeholder="选择日期"
+                    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-select>
+                    <!-- 关联指标 -->
+                   <el-select v-if="selectType===1" style="flex:1;"
+                        filterable remote clearable
+                        placeholder="请输入指标ID/指标名称"
+                        v-model="searchText"
+                        :remote-method="searchHandle">
+                        <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"/>
+                    </el-select>
+                    <!-- 自定义事项 -->
+                    <el-button v-if="selectType===2" style="flex:1;">+</el-button>
+
+                    <el-tooltip effect="dark" content="Top Left 提示文字" placement="top">
+                        <i class="el-icon-question" style="font-size: 16px;"></i>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div class="event-form">
+
+            </div>
+            
+        </div>
+        <div class="dialog-footer" slot="footer">
+            <el-button>取消</el-button>
+            <el-button type="primary">保存</el-button>
+        </div>
+        
+    </el-dialog>
 </template>
 
 <script>
 export default {
+    props:{
+        isEventDialogShow:{
+            type:Boolean,
+            default:false
+        },
+        choosedDay:{
+            type:String,
+            default:''
+        }
+    },
     data() {
         return {
-
+            eventDay:'',
+            selectType:1,
+            searchText:'',
+            searchOptions:[],
+            eventForm:{
+                events:[]
+            }
         };
     },
+    watch:{
+        isEventDialogShow(newVal){
+            if(newVal){
+                this.eventDay = this.choosedDay||this.$moment(new Date()).format('YYYY-MM-DD')
+                this.getDayEvents()
+            }
+        }
+    },
     methods: {
+        searchHandle(){},
+        //获取当天的事项
+        getDayEvents(){
 
+        }
     },
 };
 </script>
 
+<style lang="scss">
+.add-event-dialog-wrap{
+    .el-input{
+        width: 100%;
+    }
+}
+</style>
 <style scoped lang="scss">
-
+.add-event-dialog-wrap{
+    .dialog-content{
+        .event-select{
+            display: flex;
+            gap:10px;
+            align-items: center;
+            margin:10px 0;
+        }
+        .event-form{
+            min-height: 200px;
+        }
+    }
+}
 </style>