|
|
<template>
|
|
|
<div class="activitiesList">
|
|
|
<h1>{{ msg }}</h1>
|
|
|
<a-row class="mgnBtm">
|
|
|
<a-col :span="24">
|
|
|
<a>日曆連結</a>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row class="mgnBtm">
|
|
|
<a-col :span="12" class="flexLeft">
|
|
|
<a-button v-for="(item, index) in linkMenus" :key="index" :title="`${item.title}`"
|
|
|
@click="clickLinkPg(item.path)">
|
|
|
<span class="material-icons">{{item.icon}}</span>
|
|
|
</a-button>
|
|
|
<!--
|
|
|
<a-button class="mgnLeft" title="清單" @click="clickPgView('Activities')">
|
|
|
<span class="material-icons">reorder</span>
|
|
|
</a-button>
|
|
|
<a-button class="mgnLeft" title="日曆View" @click="clickPgView('')">
|
|
|
<span class="material-icons">date_range</span>
|
|
|
</a-button>
|
|
|
<a-button class="mgnLeft" title="日曆" @click="clickPgView('CalendarSetting')">
|
|
|
<span class="material-icons">date_range</span>
|
|
|
</a-button>
|
|
|
-->
|
|
|
<a-button class="mgnLeft" type="primary" @click="addActivity('add')">
|
|
|
<span class="material-icons">add</span>活動
|
|
|
</a-button>
|
|
|
<a-dropdown :trigger="['click']">
|
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
|
提議時間
|
|
|
<a-icon type="down" />
|
|
|
</a>
|
|
|
<a-menu slot="overlay">
|
|
|
<a-menu-item key="0">
|
|
|
<a href="http://www.alipay.com/">管理有空時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="1">
|
|
|
<a href="http://www.taobao.com/">挑選時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-divider />
|
|
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-dropdown>
|
|
|
</a-col>
|
|
|
<a-col :span="12" class="flexRight tabsSearchGrp">
|
|
|
<div v-if="pgView == 'Activities'" >
|
|
|
<a class="mgnLeft">3項活動</a>
|
|
|
<a-button class="mgnLeft" title="在完整畫面中開啟細節">
|
|
|
<span class="material-icons">book_online</span>
|
|
|
</a-button>
|
|
|
<a-dropdown :trigger="['click']" class="mgnLeft">
|
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
|
puppy
|
|
|
<a-icon type="down" />
|
|
|
</a>
|
|
|
<a-menu slot="overlay">
|
|
|
<a-menu-item key="0">
|
|
|
<a href="http://www.alipay.com/">管理有空時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="1">
|
|
|
<a href="http://www.taobao.com/">挑選時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-divider />
|
|
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-dropdown>
|
|
|
<a-button class="mgnLeft" title="在完整畫面中開啟細節">
|
|
|
<span class="material-icons">more_horiz</span>
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<a-date-picker @change="onChange" class="mgnLeft" />
|
|
|
<a-button class="" @click="clickSearch"><span class="material-icons">
|
|
|
content_paste_search
|
|
|
</span>puppy</a-button>
|
|
|
<div class="tab2Grp" v-show="showSearchGrp">
|
|
|
<a-tabs default-active-key="2">
|
|
|
<a-tab-pane key="1">
|
|
|
<span slot="tab">
|
|
|
<a-icon type="apple" />
|
|
|
最愛項目
|
|
|
</span>
|
|
|
<div>
|
|
|
將擁有人或篩選器標示為最愛後，就可於此顯示。
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="2">
|
|
|
<span slot="tab">
|
|
|
<a-icon type="android" />
|
|
|
擁有人
|
|
|
</span>
|
|
|
<ul>
|
|
|
<li>puppy</li>
|
|
|
</ul>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="3">
|
|
|
<span slot="tab">
|
|
|
<a-icon type="android" />
|
|
|
篩選器
|
|
|
</span>
|
|
|
<ul>
|
|
|
<li>Leads added more than 3 months ago</li>
|
|
|
<li>Leads with email</li>
|
|
|
<li>Leads with no activity</li>
|
|
|
<li>Leads with overdue activity</li>
|
|
|
<li>Leads with phone number</li>
|
|
|
<li>Leads with planned activity</li>
|
|
|
<li>Leads with value</li>
|
|
|
</ul>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="24">
|
|
|
<router-view />
|
|
|
<!--
|
|
|
<Activities msg="活動列表" v-if="pgView == 'Activities'" @showModal="showModal" @showDrawer="showActivityDrawer" />
|
|
|
<CalendarSetting v-else-if="pgView == 'CalendarSetting'" />
|
|
|
<CalendarView v-else :eventsList="events" ref="calenderView" @showModal="showModal"/>
|
|
|
-->
|
|
|
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
|
|
|
|
<a-modal
|
|
|
title="安排活動"
|
|
|
:visible="visible"
|
|
|
:confirm-loading="confirmLoading"
|
|
|
:footer = "null"
|
|
|
@ok="onAddActivity"
|
|
|
@cancel="handleCancel"
|
|
|
><!--@ok="handleOk" @cancel="handleCancel"-->
|
|
|
<AddCalendar :formEdit="formEdit" @handleOk="onAddActivity" @handleCancel="handleCancel" />
|
|
|
</a-modal>
|
|
|
|
|
|
|
|
|
<!-- //用戶詳情抽屜
|
|
|
<activityDrawer :formEdit="formEdit" :show="isDrawerShow" @close="isDrawerShow = false"/>-->
|
|
|
|
|
|
<button @click="clickGetApiData">GetApiData</button>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Activities from "@/components/Calendar/Activities.vue";
|
|
|
import CalendarSetting from "@/components/Calendar/CalendarSetting.vue";
|
|
|
import CalendarView from "@/components/Calendar/CalendarView.vue";
|
|
|
import AddCalendar from "@/components/Calendar/AddCalendar.vue";
|
|
|
import activityDrawer from '@/components/Common/activityDrawer';
|
|
|
|
|
|
export default {
|
|
|
name: "ActivitiesList",
|
|
|
components: {
|
|
|
Activities,
|
|
|
CalendarSetting,
|
|
|
CalendarView,
|
|
|
AddCalendar,
|
|
|
activityDrawer
|
|
|
},
|
|
|
props: {
|
|
|
msg: String
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
//isDrawerShow: false,
|
|
|
pgView: "CalendarView",
|
|
|
//model start
|
|
|
ModalText: "Content of the modal",
|
|
|
visible: false,
|
|
|
confirmLoading: false,
|
|
|
//model end
|
|
|
events: [],//存储获取到的所有的活动,
|
|
|
showSearchGrp:false,
|
|
|
|
|
|
//edit by cynthia
|
|
|
// mainActivityData:this.$store.state.main.activityData,
|
|
|
formEdit: {},
|
|
|
linkMenus: [
|
|
|
{ title: '活動列表', path: '/activities/Activities',icon:'reorder' },
|
|
|
{ title: '活動行事曆顯示', path: '/activities/CalendarFullView',icon:'date_range' },
|
|
|
// { title: '活動行事曆顯示', path: '/activities/CalendarView',icon:'date_range' },
|
|
|
//{ title: '活動行事曆設定', path: '/activities/CalendarSetting',icon:'date_range' }, //<!--功能未完成，未上線 update by 12/2
|
|
|
],
|
|
|
currentPage:'/activities/Activities',
|
|
|
companyData:[],
|
|
|
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
// ...mapState({
|
|
|
// mainActivityData:"main/activityData",
|
|
|
// }),
|
|
|
// mainActivityData () {
|
|
|
// return this.$store.state.main.activityData
|
|
|
// },
|
|
|
mainActivityData () {
|
|
|
return this.$store.state.activity.activityData
|
|
|
},
|
|
|
},
|
|
|
watch:{
|
|
|
formEdit(){
|
|
|
console.log("formEdit--",this.formEdit)
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
this.$gapi.listenUserSignIn((isSignedIn) => {//监听用户登录状态，并执行相应操作。
|
|
|
|
|
|
if (isSignedIn) console.log('监听到gapi client初始化成功'),this.getEventsList();//当用户登录,获取活动list
|
|
|
|
|
|
}).catch((e) => { console.log('listenUserSignIn error:', e) });
|
|
|
|
|
|
},
|
|
|
created() {
|
|
|
console.log("created");
|
|
|
this.clearFormEdit();
|
|
|
// this.getApiData();
|
|
|
// console.log("activityData---",JSON.stringify(this.$store.state.activity.activityData))
|
|
|
// console.log("mainActivityData---",this.mainActivityData)
|
|
|
setTimeout(() => {
|
|
|
//this.getCompanyData();
|
|
|
}, 1000);
|
|
|
},
|
|
|
methods: {
|
|
|
// getCompanyData(){ //Store更新頁次讀取資料
|
|
|
// let tempCompanyData = [...this.$store.state.main.companyData.list]
|
|
|
// this.companyData = tempCompanyData
|
|
|
// console.log("this.companyData",this.$store.state.main.companyData.list)
|
|
|
// },
|
|
|
clearFormEdit(){
|
|
|
const today = new Date();
|
|
|
const tomorrowDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
|
|
|
const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
|
|
|
const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
|
|
const dateTime = date +' '+ time;
|
|
|
|
|
|
console.log("today--",this.$moment(today).format('YYYY-MM-DD'))
|
|
|
console.log("tomorrowDate--",this.$moment(tomorrowDate).format('YYYY-MM-DD'))
|
|
|
|
|
|
this.formEdit = {
|
|
|
start: this.$moment(today).format('YYYY-MM-DD'),
|
|
|
end: this.$moment(tomorrowDate).format('YYYY-MM-DD'),
|
|
|
activityTypeId: 2,
|
|
|
busyFlag: "0",
|
|
|
companyId:"2",
|
|
|
done: false,
|
|
|
location: "location",
|
|
|
locationGeocoded: "locationGeocoded",
|
|
|
ownerUser: "1",
|
|
|
publicDescription: "publicDescription",
|
|
|
subject: "",
|
|
|
companyId:"2",
|
|
|
//companyData : this.companyData,
|
|
|
}
|
|
|
},
|
|
|
clickGetApiData(){
|
|
|
console.log("getApiData--取得API資料-",this.$store.getters['activity/getApiData'])
|
|
|
//this.$store.state.activity.getApiData
|
|
|
},
|
|
|
getApiData:async function(){
|
|
|
console.log("getApiData")
|
|
|
},
|
|
|
getEventsList () {
|
|
|
// console.log('所有的calendar的相关方法：',this.$gapi.clientProvider.client.gapi.client.calendar);;
|
|
|
let that = this;
|
|
|
//https://developers.google.com/calendar/api/v3/reference/events/list
|
|
|
that.$gapi.clientProvider.client.gapi.client.calendar.events.list({
|
|
|
'calendarId': 'primary',//如果要访问当前登录用户的主日历，请使用“ primary”关键字
|
|
|
//timeMin: 要过滤的事件结束时间的下限（不包括）。可选的。默认是不按结束时间过滤。必须是带有强制时区偏移量的 RFC3339 时间戳，例如 2011-06-03T10:00:00-07:00、2011-06-03T10:00:00Z。可以提供毫秒但被忽略。如果timeMax设置，timeMin必须小于timeMax。
|
|
|
'timeMin': (new Date()).toISOString(),
|
|
|
'showDeleted': false,
|
|
|
'singleEvents': true,
|
|
|
'maxResults': 10,
|
|
|
'orderBy': 'startTime'//
|
|
|
}).then(response => {
|
|
|
|
|
|
console.log('获取calendar events返回的结果:',response.result.items);
|
|
|
|
|
|
this.events = response.result.items;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
clickLinkPg(val){
|
|
|
if(val){
|
|
|
this.currentPage = val;
|
|
|
}
|
|
|
this.$router.push(this.currentPage);
|
|
|
},
|
|
|
clickPgView(val) {
|
|
|
this.pgView = val;
|
|
|
},
|
|
|
addActivity(editType){
|
|
|
this.clearFormEdit();
|
|
|
this.formEdit.editType = editType
|
|
|
this.formEdit.editPage = 'activityList';
|
|
|
|
|
|
this.visible = true;
|
|
|
},
|
|
|
//model start
|
|
|
showModal(e) {
|
|
|
console.log('点击展示添加活动弹窗的值： ', e);
|
|
|
//console.log('this.formEdit： ', this.formEdit);
|
|
|
|
|
|
this.visible = true;
|
|
|
//edit by cynthia //從行事曆新增行程
|
|
|
if(e.editType == 'add'){
|
|
|
// console.log(' this.formEdit--clearArray--： ', this.formEdit);
|
|
|
this.formEdit = {
|
|
|
editType:e.editType,
|
|
|
start: '',
|
|
|
end: '',
|
|
|
subject: '',
|
|
|
deal: '',
|
|
|
contact: '',
|
|
|
email: '',
|
|
|
tel: '',
|
|
|
organization: '',
|
|
|
last_date: ''
|
|
|
}
|
|
|
// console.log(' this.formEdit--clearArray--： ', this.formEdit);
|
|
|
|
|
|
}else if(e.editType == 'edit'){
|
|
|
this.formEdit = e;
|
|
|
console.log(' this.formEdit--edit--： ', e, this.formEdit);
|
|
|
}
|
|
|
},
|
|
|
clearArray(editType){
|
|
|
this.formEdit = {
|
|
|
editType:editType,
|
|
|
subject: '',
|
|
|
start: typeof e.dateStr == 'string' ? e.dateStr : '',
|
|
|
end: typeof e.dateStr == 'string' ? e.dateStr : '',
|
|
|
subject: '',
|
|
|
deal: '',
|
|
|
contact: '',
|
|
|
email: '',
|
|
|
tel: '',
|
|
|
organization: '',
|
|
|
last_date: ''
|
|
|
}
|
|
|
console.log(' this.formEdit--clearArray--： ', this.formEdit);
|
|
|
},
|
|
|
|
|
|
onAddActivity (e) {
|
|
|
// console.log("Clicked ok button",e);
|
|
|
// console.log('点击添加活动 ，进行保存 this.formEdit',this.formEdit);
|
|
|
// console.log('打印 ', this.$store);
|
|
|
// this.$store.dispatch('activity/addActivity', this.formEdit);
|
|
|
// return;
|
|
|
// let tmpItem = { ...this.formEdit };
|
|
|
// delete tmpItem.editType;
|
|
|
// return this.$store.dispatch('activity/editActivity', tmpItem);
|
|
|
|
|
|
// this.ModalText = "The modal will be closed after two seconds";
|
|
|
// this.confirmLoading = true;
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
// this.visible = false;
|
|
|
// this.confirmLoading = false;
|
|
|
|
|
|
// //console.log('点击了 添加活动',this.$refs.calenderView);
|
|
|
|
|
|
// //更新main activityData table 形程表格 edit by cynthia
|
|
|
|
|
|
// //內容修改到共用區
|
|
|
// // if(e.editType == 'add'){
|
|
|
// // this.formEdit.key = this.mainActivityData.length + 1;
|
|
|
// // }
|
|
|
// // this.formEdit.subject = this.formEdit.subject;
|
|
|
|
|
|
// if(e.editType == 'addFromCalendarView'){
|
|
|
// this.$refs.calenderView.addEvent(e); //更新行事歷檢視
|
|
|
// console.log('点击了 添加活动 ----------',this.$refs.calenderView);
|
|
|
// }
|
|
|
|
|
|
// // //更新main activityData table 形程表格 edit by cynthia
|
|
|
// // this.$store.dispatch('main/addActivity',this.formEdit).then(res => {
|
|
|
// // if (res) {
|
|
|
// // this.visibleTagsModel = false;
|
|
|
// // this.$message.success('添加活动成功！');
|
|
|
// // }
|
|
|
// // })
|
|
|
|
|
|
// }, 200);
|
|
|
},
|
|
|
handleCancel(e) {
|
|
|
console.log("Clicked cancel button",e);
|
|
|
this.visible = false;
|
|
|
},
|
|
|
showActivityDrawer(e){
|
|
|
//this.isDrawerShow = true
|
|
|
//console.log("showActivityDrawer--e---",e)
|
|
|
},
|
|
|
onChange(value, dateString) {
|
|
|
console.log("Selected Time: ", value);
|
|
|
console.log("Formatted Selected Time: ", dateString);
|
|
|
},
|
|
|
onDateChange(value, dateString) {
|
|
|
console.log("Selected Time: ", value);
|
|
|
console.log("Formatted Selected Time: ", dateString);
|
|
|
},
|
|
|
onOk(e,type) {
|
|
|
// console.log("onOk: ", e, type);
|
|
|
this.formEdit[type] = this.$moment(e._d).format('YYYY-MM-DD');
|
|
|
// console.log(this.formEdit);
|
|
|
},
|
|
|
//model end
|
|
|
clickSearch(){
|
|
|
this.showSearchGrp = !this.showSearchGrp;
|
|
|
},
|
|
|
submitForm(){
|
|
|
console.log("formEdit",this.formEdit)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
</style>
|
|
|
|
