|
|
@@ -0,0 +1,235 @@
|
|
|
+<script setup>
|
|
|
+import { ref, reactive,toRefs,onMounted } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { Icon, Toast,TreeSelect,Popup,Cascader } from 'vant';
|
|
|
+import moment from 'moment';
|
|
|
+import 'moment/dist/locale/zh-cn';
|
|
|
+moment.locale('zh-cn');
|
|
|
+
|
|
|
+import { researchEvents,apiSystemUsers} from '@/api/ssbg/api';
|
|
|
+import Calendar from '../components/calendar.vue';
|
|
|
+
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+localStorage.setItem('ssbg-token',route.query.token || '5e532bc5fa7281aebaa6d89960b54c4ab22f1ab18e969258c634a7940fdb0922');
|
|
|
+
|
|
|
+const actionsList = ref([
|
|
|
+ {
|
|
|
+ label: '今天',
|
|
|
+ key: 'weeknow',
|
|
|
+ img: import("@/assets/ssbg/calendar_ico.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '选择销售员',
|
|
|
+ key: 'choose',
|
|
|
+ img: import("@/assets/ssbg/choose_ico.png"),
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const calendarRef = ref(null);
|
|
|
+
|
|
|
+const state = reactive({
|
|
|
+ selectResearcher: '', // 选中的研究员
|
|
|
+ eventList: [],//日程信息
|
|
|
+});
|
|
|
+
|
|
|
+/* 获取日历日程列表 */
|
|
|
+const getEventList = async () => {
|
|
|
+ if(!selectUserValue.value) return
|
|
|
+
|
|
|
+ const { currentStart } = calendarRef.value.calendarApi.view;
|
|
|
+
|
|
|
+ const { code,data } = await researchEvents({
|
|
|
+ StartDate: moment(currentStart).format('YYYY-MM-DD'),
|
|
|
+ EndDate: moment(currentStart).format('YYYY-MM-DD'),
|
|
|
+ ResearcherId: Number(selectUserValue.value)
|
|
|
+ })
|
|
|
+
|
|
|
+ if(code !== 200) return
|
|
|
+
|
|
|
+ state.eventList = [
|
|
|
+ ...(data.CalendarList || []),
|
|
|
+ ...(data.RsMattersList || []),
|
|
|
+ ].map((item, index) => ( { ...item, id: index }));
|
|
|
+};
|
|
|
+
|
|
|
+/* 点击日历表格添加活动 */
|
|
|
+const cellClickHandle = (date) => {
|
|
|
+ //啥也不干
|
|
|
+};
|
|
|
+
|
|
|
+/* 底部操作 */
|
|
|
+const dealActionHandler = (type) => {
|
|
|
+ const deal_methods_handles = {
|
|
|
+ add: addActivityHandleByBtn,
|
|
|
+ weeknow: toogeCurrentWeek,
|
|
|
+ choose: selectSellerHandle,
|
|
|
+ };
|
|
|
+ deal_methods_handles[type]();
|
|
|
+};
|
|
|
+
|
|
|
+/* 点击按钮添加活动 */
|
|
|
+const addActivityHandleByBtn = () => {
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: '/pages-roadshow/addActivity/index',
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/* 切换为今天 */
|
|
|
+const toogeCurrentWeek = () => {
|
|
|
+ calendarRef.value.toogeCurrentWeek();
|
|
|
+};
|
|
|
+
|
|
|
+// 选择用户
|
|
|
+const userFieldNames=ref({
|
|
|
+ text: 'RealName',
|
|
|
+ value: 'AdminId',
|
|
|
+ children: 'ChildrenList',
|
|
|
+})
|
|
|
+let selectUserValue=ref('')
|
|
|
+let isSellerPicker=ref(false)
|
|
|
+let userOpts=ref([])
|
|
|
+// 获取系统中所有用户’
|
|
|
+const getSystemUsers = ()=>{
|
|
|
+ apiSystemUsers().then(res=>{
|
|
|
+ if(res.code==200){
|
|
|
+ userOpts.value=res.data.List||[]
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const selectSellerHandle = ()=>{
|
|
|
+ isSellerPicker.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const onFinish = (e)=>{
|
|
|
+ getEventList()
|
|
|
+ isSellerPicker.value=false
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getSystemUsers()
|
|
|
+})
|
|
|
+
|
|
|
+const { eventList } = toRefs(state);
|
|
|
+
|
|
|
+document.title = '销售员日历';
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="rs-container">
|
|
|
+ <Calendar
|
|
|
+ ref="calendarRef"
|
|
|
+ :eventList="eventList"
|
|
|
+ :selectUserValue="Number(selectUserValue)"
|
|
|
+ @dateChange="getEventList"
|
|
|
+ @cellClick="cellClickHandle"
|
|
|
+ />
|
|
|
+ <!-- v-if="isWxprogram()" -->
|
|
|
+ <div class="fix-action" >
|
|
|
+ <ul class="action-ul">
|
|
|
+ <li
|
|
|
+ v-for="item in actionsList"
|
|
|
+ key="item.key"
|
|
|
+ @click="dealActionHandler(item.key)"
|
|
|
+ >
|
|
|
+ <Icon :name="item.icon" class="item-icon" v-if="item.icon" />
|
|
|
+ <img
|
|
|
+ class="item-img"
|
|
|
+ src="@/assets/ssbg/calendar_ico.png"
|
|
|
+ alt=""
|
|
|
+ v-else-if="item.key === 'weeknow'"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="item-img"
|
|
|
+ src="@/assets/ssbg/choose_ico.png"
|
|
|
+ alt=""
|
|
|
+ v-else-if="item.key === 'choose'"
|
|
|
+ />
|
|
|
+ {{ item.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 选择销售员 -->
|
|
|
+ <Popup v-model:show="isSellerPicker" position="bottom">
|
|
|
+ <Cascader
|
|
|
+ v-model="selectUserValue"
|
|
|
+ title="请选择用户"
|
|
|
+ :options="userOpts"
|
|
|
+ :field-names="userFieldNames"
|
|
|
+ active-color="#3385FF"
|
|
|
+ @close="isSellerPicker = false"
|
|
|
+ @finish="onFinish"
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.rs-container {
|
|
|
+ .fix-action {
|
|
|
+ height: 160px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ .action-ul {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ color: #3385ff;
|
|
|
+ li:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ .item-icon {
|
|
|
+ font-size: 52px;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto 10px;
|
|
|
+ }
|
|
|
+ .item-img {
|
|
|
+ display: block;
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ margin: 0 auto 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-rs-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30px 20px;
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ color: #969799;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ensure {
|
|
|
+ color: #576b95;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tree-select {
|
|
|
+ ::v-deep(.van-sidebar-item--select:before) {
|
|
|
+ background-color: #1989fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.van-tree-select__item--active) {
|
|
|
+ color: #1989fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.van-tree-select__selected) {
|
|
|
+ position: absolute !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo