添加指标事项，样式调整

src/api/modules/toolBoxApi.js

@@ -90,6 +90,6 @@ export const ForexCalendarInterface = {
      * @returns 
      */
     searchEdbInfo:(params)=>{
-        return http.get("/edb_info/filter_by_es/all",params)
+        return http.get("/datamanage/edb_info/filter_by_es/all",params)
     }
 }

src/views/toolBox_manage/ForexCalendar.vue

@@ -9,7 +9,8 @@
                     :clearable="false"
                     v-model="monthValue"
                     value-format="yyyy-MM"
-                    :disabled="!varietyValue"
+                    :disabled="!permissionValue"
+                    style="margin-left: 30px;"
                     @change="changeMonth"/>
             </div>
             <div class="center-title"> <!-- 当前日期 -->
@@ -19,12 +20,25 @@
                     year:currentYear||'2024'}) 
                 }}</div>
             <div class="right-select">
-                <el-select placeholder="请选择品种" v-model="varietyValue" @change="renderCalendar">
+                <!-- <el-select placeholder="请选择品种" v-model="permissionValue" @change="renderCalendar">
                     <el-option v-for="item in permissonList" :key="item.ChartPermissionId" 
                         :label="item.ChartPermissionName"
                         :value="item.ChartPermissionId"
                     />
-                </el-select>
+                </el-select> -->
+                <el-cascader :options="[{ChartPermissionId:-1,ChartPermissionName:'大分类',children:permissonList}]" 
+                    ref="cascaderRef"
+                    placeholder="请选择品种"
+                    v-model="permissionValue"
+                    :props="{
+                        expandTrigger:'hover',
+                        emitPath:false,
+                        value:'ChartPermissionId',
+                        label:'ChartPermissionName'
+                    }"
+                    style="min-width:300px;"
+                    @change="changePermission"
+                    ></el-cascader>
             </div>
         </div>
         <BaseCalendar
@@ -34,7 +48,7 @@
                     month:$i18n.locale==='zh'?`${currentMonth}`:calendarTrans.Month[Number(currentMonth)||1].en,
                     year:currentYear||'2024'})
                 }`,
-                type:'XXX品种'
+                type:`${permissionName}`
             }"
             @dateClick="dateClick"
             @eventClick="eventClick"
@@ -42,8 +56,7 @@
         <AddEventDialog
             :isEventDialogShow="isEventDialogShow"
             :choosedDay="choosedDay"
-            :choosedPermission="varietyValue"
-            :dayEvents="dayEvents"
+            :choosedPermission="permissionValue"
             @save="addEvents"
             @close="isEventDialogShow=false"
         />
@@ -58,15 +71,17 @@ import {ForexCalendarInterface} from '@/api/modules/toolBoxApi';
 export default {
     data() {
         return {
-            monthValue:'',
-            varietyValue:'',
-            permissonList:[],
-            calendarApi:null,
-            calendarTrans:calendarTrans,
-            isEventDialogShow:false,
+            monthValue:'',//选择的月份
+            permissionValue:'',//选择的品种Id
+            permissionName:'',//选择的品种Name
+            permissonList:[],//品种列表
+
+            calendarApi:null,//日历Api
+            calendarTrans:calendarTrans,//翻译方法
+
+            isEventDialogShow:false,//控制添加事项弹窗
             eventInfo:null,
-            choosedDay:'',
-            dayEvents:[]
+            choosedDay:'',//选择的日期
         };
     },
     computed:{
@@ -86,6 +101,15 @@ export default {
                 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)
@@ -95,9 +119,9 @@ export default {
             //获取当前日历的起始日期+终止日期,可能会跨月
             const {activeStart,activeEnd} = this.calendarApi.view
             const res = await ForexCalendarInterface.getCalendarEventList({
-                ChartPermissionId:Number(this.varietyValue),
+                ChartPermissionId:Number(this.permissionValue),
                 StartDate:this.$moment(activeStart).format('YYYY-MM-DD'),
-                EndDate:this.$moment(activeEnd).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()||[]
@@ -121,8 +145,6 @@ export default {
             eventList.forEach(es=>{
                 this.calendarApi.addEventSource(es)
             })
-            
-            console.log(this.calendarApi.getEventSources())
         },
         //点击单元格（非事项部分）
         dateClick(info){
@@ -134,12 +156,8 @@ export default {
         },
         //根据日期设置弹窗信息
         setEventInfo(date){
-            if(!this.varietyValue) return this.$message.warning("请选择品种")
+            if(!this.permissionValue) return this.$message.warning("请选择品种")
             this.choosedDay = date||''
-            //----mock
-            const eventSource = this.calendarApi.getEventSourceById(date)
-            this.dayEvents = eventSource?eventSource.internalEventSource.meta||[]:[]
-            //-----
             this.isEventDialogShow = true
         },
         //添加事项（批量）
@@ -162,7 +180,7 @@ export default {
 
             //通过接口，添加该日的事件
             const res = await ForexCalendarInterface.saveDailyEvents({
-                ChartPermissionId:Number(this.varietyValue),
+                ChartPermissionId:Number(this.permissionValue),
                 MatterDate:eventDay,
                 Matters:eventSource
             })
@@ -201,6 +219,10 @@ export default {
         justify-content:space-between;
         align-items: center;
         margin-bottom: 20px;
+        .center-title{
+            font-size: 18px;
+            font-weight: bold;
+        }
     }
 }
 </style>

src/views/toolBox_manage/components/BaseCalendar.vue

@@ -73,7 +73,6 @@ export default {
 
                     }, */
                 ],
-                eventSource:[],
                 dateClick:this.handleDateClick,
                 eventClick:this.handleEventClick
             }

src/views/toolBox_manage/components/addEventDialog.vue

@@ -29,14 +29,16 @@
                    <el-select v-if="selectType===1" style="flex:1;"
                         filterable remote clearable
                         :placeholder="$t('ToolBox.ForexCalendar.edb_input')"
-                        v-model="searchText"
-                        :remote-method="searchHandle">
+                        v-model="searchObj"
+                        :remote-method="searchHandle"
+                        value-key="EdbInfoId"
+                        @change="searchChange">
                         <i slot="prefix" class="el-input__icon el-icon-search"></i>
                         <el-option
                             v-for="item in searchOptions"
                             :key="item.EdbInfoId"
                             :label="item.EdbName"
-                            :value="item.EdbInfoId"/>
+                            :value="item"/>
                     </el-select>
                     <!-- 自定义事项 -->
                     <el-button v-if="selectType===2" style="flex:1;" @click="addEventItem">+</el-button>
@@ -54,26 +56,28 @@
                         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">
+                        <div class="event" 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')" />
+                                <el-input v-model="item.title" :placeholder="$t('ToolBox.ForexCalendar.item_input')">
+                                    <el-button slot="append" type="primary" @click.stop="item.isExpand = !item.isExpand">展开</el-button>
+                                </el-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>
+                                <!-- <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>
+                                <i class="el-icon-remove-outline 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.FontBold" :active-value="1" :inactive-value="0"></el-switch></span>
+                                <div><span>{{ $t('ToolBox.ForexCalendar.font_color') }}</span> <el-color-picker v-model="item.textColor" color-format="hex" size="mini"></el-color-picker></div>
+                                <div><span>{{ $t('ToolBox.ForexCalendar.fill_color') }}</span> <el-color-picker v-model="item.backgroundColor" color-format="hex" size="mini"></el-color-picker></div>
+                                <div><span>{{ $t('ToolBox.ForexCalendar.font_bold') }}</span> <el-switch v-model="item.FontBold" :active-value="1" :inactive-value="0"></el-switch></div>
                             </div>
                         </div>
                     </draggable>
@@ -108,16 +112,12 @@ export default {
             type:Number,
             default:0
         },
-        dayEvents:{
-            type:Array,
-            default:[]
-        }
     },
     data() {
         return {
             eventDay:'',
             selectType:1,
-            searchText:'',
+            searchObj:'',
             searchOptions:[],
             eventForm:{
                 events:[/* {
@@ -142,25 +142,34 @@ export default {
         searchHandle(keyword){
             ForexCalendarInterface.searchEdbInfo({
                 KeyWord:keyword,
-                CurrentIndex:100
+                CurrentIndex:1,
+                PageSize:100,
             }).then(res=>{
                 if(res.Ret!==200) return 
                 this.searchOptions = res.Data.List||[]
             })
         },
+        searchChange(){
+            if(typeof this.searchObj === 'object'){
+                this.addEdbItem()
+            }
+        },
         //获取当天的事项
         getDayEvents(){
             this.eventForm.events = []
             //接口获取
             ForexCalendarInterface.getDailyEventList({
                 ChartPermissionId:Number(this.choosedPermission),
-                MatterDate:Number(this.choosedDay)
+                MatterDate:this.eventDay
             }).then(res=>{
                 if(res.Ret!==200) return 
-                console.log('dayEvents',this.dayEvents)
                 this.eventForm.events = (res.Data?res.Data:[]).map(e=>{
                     return {
                         ...e,
+                        title:e.Title,
+                        textColor:e.FontColor||'#333333',
+                        backgroundColor:e.FillingColor||'#0052D9',
+                        borderColor:e.FillingColor||'#0052D9',
                         isExpand:false
                     }
                 })
@@ -170,8 +179,8 @@ export default {
         addEventItem(){
             this.eventForm.events.push({
                 title:'',
-                textColor:'#000',
-                backgroundColor:'#ccc',
+                textColor:'#333333',
+                backgroundColor:'#0052D9',
                 isExpand:false,
                 MatterType:1,
                 FontBold:0,
@@ -182,6 +191,23 @@ export default {
                 
             })
         },
+        //添加一个指标事项
+        addEdbItem(){
+            const {EdbName,EdbInfoType,EdbInfoId,UniqueCode,EdbCode} = this.searchObj
+            this.eventForm.events.push({
+                title:EdbName||'',
+                textColor:'#333333',
+                backgroundColor:'#0052D9',
+                isExpand:false,
+                MatterType:EdbInfoType?3:2,
+                FontBold:0,
+                FeCalendarMatterId:0,
+                EdbInfoId:EdbInfoId||'',
+                EdbUniqueCode:UniqueCode||'',
+                EdbCode:EdbCode||'',
+            })
+            this.searchObj=''
+        },
         removeEvent(index){
             this.eventForm.events.splice(index,1)
         },
@@ -204,12 +230,35 @@ export default {
         width: 100%;
     }
     .el-form-item{
-        margin-bottom: 10px;
+        margin-bottom:0;
         &.event-item{
             .el-form-item__content{
                 display: flex;
                 align-items: center;
-                gap:10px;
+                justify-content: space-between;
+                /* gap:10px; */
+                .icon{
+                    margin:10px;
+                    &:last-of-type{
+                        margin-right: 0;
+                    }
+                }
+                .el-input{
+                    flex: 1;
+                }
+                .el-input-group__append{
+                    .el-button{
+                        color: #FFFFFF;
+                        background-color: #0052D9;
+                        border-color: #0052D9;
+                        border-top-left-radius:0;
+                        border-bottom-left-radius: 0;
+                    }
+                    
+                }
+                .el-form-item__error{
+                    left: 34px;
+                }
             }
         }
     }
@@ -224,6 +273,9 @@ export default {
                 height: 20px;
                 padding: 0;
                 border: 0;
+                .el-color-picker__icon{
+                    display: none;
+                }
             }
         }
     }
@@ -232,28 +284,39 @@ export default {
 <style scoped lang="scss">
 .add-event-dialog-wrap{
     .dialog-content{
+        padding:15px 30px;
         .event-select{
             display: flex;
             gap:10px;
             align-items: center;
-            margin:10px 0;
+            margin:30px 0;
         }
         .event-form{
             min-height: 200px;
+            margin-left: -34px;
             .event{
                 position:relative;
-                &.show-bgColor{
-                    background-color:#EBEBEB;
-                }
+                margin-bottom: 30px;
                 .event-item{
                     .icon{
                         cursor: pointer;
                     }
                 }
                 .event-expand-setting{
-                    padding:0 30px;
                     display: flex;
                     justify-content: space-around;
+                    align-items: center;
+                    border:1px dashed #0052D9;
+                    border-top: none;
+                    border-radius: 0 0 4px 4px;
+                    padding:14px;
+                    background-color: #ECF2FE;
+                    margin:0 58px 0 34px;
+                    >div{
+                        display: flex;
+                        align-items: center;
+                        gap:10px;
+                    }
                 }
             }
         }