|
|
@@ -2,10 +2,20 @@
|
|
|
<div class="w-full h-full workbench">
|
|
|
<!-- 日历 -->
|
|
|
<div class="w-full p16 backgroundThemeColor rounded-b-lg setCaleStrle">
|
|
|
- <van-calendar :default-date="(new Date(dateConditions))" switch-mode="year-month" :show-title="false" :show-mark="false" :poppable="false"
|
|
|
- :show-confirm="false" :row-height="'3rem'" :min-date="minDate" :style="{ borderRadius: '0.3rem' }" @select="calendarSelect">
|
|
|
+ <van-calendar ref="calendarRef" :default-date="(new Date(dateConditions))" switch-mode="year-month"
|
|
|
+ :show-title="false" :show-mark="false" :poppable="false" :show-confirm="false" :row-height="'3rem'"
|
|
|
+ :min-date="minDate"
|
|
|
+ :style="{ borderRadius: '0.3rem', height: expandAndCollapse ? (calendarHeight ? calendarHeight + 'px' : 'auto') : usePxToVwView(140) }"
|
|
|
+ :formatter="formatter" @select="calendarSelect">
|
|
|
<template #month-title></template>
|
|
|
+ <template #bottom-info="day">
|
|
|
+ <div class="doT" v-if="day?.bottomInfo"></div>
|
|
|
+ </template>
|
|
|
</van-calendar>
|
|
|
+ <div class="flex justify-center" @click="expandAndCollapseClick">
|
|
|
+ <van-icon name="arrow-double-left" color="#fff" :size="usePxToVwView(20)" class="mt-3 expandAndCollapseIcon"
|
|
|
+ :style="expandAndCollapse ? 'transform: rotate(90deg);' : 'transform: rotate(-90deg);'" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 日程安排 -->
|
|
|
@@ -18,7 +28,8 @@
|
|
|
<div class="bg-[#FFA35919] ra6 p-4 mb-4" @click="jumpToVisitorDetails(item)">
|
|
|
<div class="w-full flex items-center justify-between">
|
|
|
<div class="text-size-in font-bold text-[#474A56]">{{ item.planName }}</div>
|
|
|
- <div :class="`labelTag ${item.finishState == 0 ? 'toBeCompleted' : 'completed'}`">{{ ['未完成', '已完成'][item.finishState] }}</div>
|
|
|
+ <div :class="`labelTag ${item.finishState == 0 ? 'toBeCompleted' : 'completed'}`">{{ ['未完成',
|
|
|
+ '已完成'][item.finishState] }}</div>
|
|
|
</div>
|
|
|
<div class="w-full flex items-center justify-between mt-4">
|
|
|
<div class="text-[#505050]" style="width: 62%;">拜访目的: {{ item.visitGoalName }}</div>
|
|
|
@@ -75,7 +86,8 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <div class="w80 bg-[#357AF4] h-28 rounded-md flex flex-col items-center justify-center">
|
|
|
+ <div class="w80 bg-[#357AF4] h-28 rounded-md flex flex-col items-center justify-center"
|
|
|
+ @click="showCommonForms = true">
|
|
|
<div class="formImage">
|
|
|
<img class="w-full h-full" src="/src/assets/image/more.png">
|
|
|
</div>
|
|
|
@@ -90,7 +102,7 @@
|
|
|
<div class="text-size-large text-[#000] pl16">常用联系人</div>
|
|
|
<div class="p16 pt-0 pb-0">
|
|
|
<template v-for="item in topContactsList">
|
|
|
- <div class="flex flex-row items-center rounded-md p-4 bg-white mb-5">
|
|
|
+ <div class="flex flex-row items-center rounded-md p-4 bg-white mb-5" @click="toContactDetails(item)">
|
|
|
<div class="contactImage">
|
|
|
<img class="w-full h-full" src="/src/assets/image/topContacts.png">
|
|
|
</div>
|
|
|
@@ -102,26 +114,111 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 添加常用表单 -->
|
|
|
+ <van-popup v-model:show="showCommonForms" closeable destroy-on-close position="bottom" :style="{ height: '80%' }">
|
|
|
+ <div class="px-5 flex flex-col h-full py-8">
|
|
|
+ <div class="flex-1 overflow-y-auto">
|
|
|
+ <div class="text-size-large mb-5">已添加表单</div>
|
|
|
+ <div class="flex flex-wrap mb-2">
|
|
|
+ <template v-for="(item) in commonExpressionsHaveBeenAdded" :key="item.id">
|
|
|
+ <div class="w-1/4 flex flex-col items-center mb-4 relative">
|
|
|
+ <div class="newModuleImage">
|
|
|
+ <img class="w-full h-full" :src="returnImageAddress(item)" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 text-[#474A56]">{{ item.name }}</div>
|
|
|
+ <div class="absolute -top-2 right-3" @click="operationForm('delete', item)">
|
|
|
+ <van-icon name="clear" color="#EE0A24" :size="`${usePxToVwView(20)}`" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="text-size-large mb-5">未添加表单</div>
|
|
|
+ <div class="flex flex-wrap mb-2">
|
|
|
+ <template v-for="(item) in commonExpressionsHaveBeenNodded" :key="item.id">
|
|
|
+ <div class="w-1/4 flex flex-col items-center mb-4 relative">
|
|
|
+ <div class="newModuleImage">
|
|
|
+ <img class="w-full h-full" :src="returnImageAddress(item)" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 text-[#474A56]">{{ item.name }}</div>
|
|
|
+ <div class="absolute -top-2 right-3" @click="operationForm('add', item)">
|
|
|
+ <van-icon name="add" color="#07C160" :size="`${usePxToVwView(20)}`" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-button type="primary" @click="saveCommonlyUsedForms()">保存</van-button>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onActivated } from 'vue';
|
|
|
+import { ref, onActivated, nextTick } from 'vue';
|
|
|
import { showConfirmDialog } from 'vant';
|
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
|
-import { DELETE_VISITOR_PLAN, GET_VISITOR_PLAN, GET_FREQUENTLY_USED_CONTACTS, GET_COMMONLY_USED_MODULES } from "@hooks/useApi";
|
|
|
+import { DELETE_VISITOR_PLAN, GET_VISITOR_PLAN, GET_FREQUENTLY_USED_CONTACTS, GET_COMMONLY_USED_MODULES, SAVE_COMMONLY_USED_FORMS, GET_PLAN_CALENDAR } from "@hooks/useApi";
|
|
|
+import { routingInfos } from "@utility/generalVariables.js";
|
|
|
+import usePxToVwView from "@hooks/usePxTransform.js";
|
|
|
import useToast from "@hooks/useToast"
|
|
|
import dayjs from 'dayjs';
|
|
|
import requests from "@common/requests";
|
|
|
import useRouterStore from "@store/useRouterStore.js";
|
|
|
+import useInfoStore from "@store/useInfoStore.js";
|
|
|
|
|
|
const router = useRouterStore()
|
|
|
+const useInfo = useInfoStore()
|
|
|
const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
|
|
|
+const expandAndCollapse = ref(true)
|
|
|
+const calendarHeight = ref(0)
|
|
|
+const calendarRef = ref()
|
|
|
const dateConditions = ref(dayjs().format('YYYY-MM-DD'))
|
|
|
const minDate = ref(new Date('2024-01-01'))
|
|
|
const visitorProgramList = ref([])
|
|
|
const topContactsList = ref([])
|
|
|
const commonModulesList = ref([])
|
|
|
+const planCalendarList = ref([])
|
|
|
+const showCommonForms = ref(false)
|
|
|
+const commonExpressionsHaveBeenAdded = ref([])
|
|
|
+const commonExpressionsHaveBeenNodded = ref([])
|
|
|
+
|
|
|
+function toContactDetails(item) {
|
|
|
+ router.navigateTo({
|
|
|
+ pathName: 'details',
|
|
|
+ success: () => {
|
|
|
+ router.emit('detailParameter', {
|
|
|
+ routerInfo: JSON.stringify(routingInfos['contacts']),
|
|
|
+ parameter: JSON.stringify(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function saveCommonlyUsedForms() {
|
|
|
+ const moduleIds = commonExpressionsHaveBeenAdded.value.map(item => item.id).join(',')
|
|
|
+ requests.post(SAVE_COMMONLY_USED_FORMS, { moduleIds }).then((res) => {
|
|
|
+ toastSuccess('保存成功')
|
|
|
+ getCommonlyUsedModules()
|
|
|
+ showCommonForms.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function operationForm(type, row) {
|
|
|
+ const itemIndex = commonExpressionsHaveBeenNodded.value.findIndex(item => item.path === row.path);
|
|
|
+ if (type === 'add' && itemIndex !== -1) {
|
|
|
+ const item = commonExpressionsHaveBeenNodded.value.splice(itemIndex, 1)[0];
|
|
|
+ commonExpressionsHaveBeenAdded.value.push(item);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'delete') {
|
|
|
+ const itemIndex = commonExpressionsHaveBeenAdded.value.findIndex(item => item.path === row.path);
|
|
|
+ if (itemIndex !== -1) {
|
|
|
+ const item = commonExpressionsHaveBeenAdded.value.splice(itemIndex, 1)[0];
|
|
|
+ commonExpressionsHaveBeenNodded.value.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
function deleteVisitor(row) {
|
|
|
const { id, planName } = row
|
|
|
@@ -138,6 +235,14 @@ function deleteVisitor(row) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function formatter(day) {
|
|
|
+ const { date, bottomInfo } = day
|
|
|
+ const currentDate = dayjs(date).format("YYYY-MM-DD");
|
|
|
+ const rqiList = planCalendarList.value.filter(item => item.ymd === currentDate)
|
|
|
+ day.bottomInfo = rqiList.length > 0 ? true : false
|
|
|
+ return day
|
|
|
+}
|
|
|
+
|
|
|
function calendarSelect(data) {
|
|
|
dateConditions.value = dayjs(data).format("YYYY-MM-DD");
|
|
|
getVisitorPlan()
|
|
|
@@ -165,6 +270,30 @@ function jumpToAddNewVisitors(row) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function returnImageAddress(rows) {
|
|
|
+ const row = routingInfos[rows.path.replace('/', '')]
|
|
|
+ return row.homeImage
|
|
|
+}
|
|
|
+
|
|
|
+function expandAndCollapseClick() {
|
|
|
+ expandAndCollapse.value = !expandAndCollapse.value
|
|
|
+ const dates = calendarRef.value.getSelectedDate()
|
|
|
+ calendarRef.value.scrollToDate(new Date(dates))
|
|
|
+}
|
|
|
+
|
|
|
+function processForms() {
|
|
|
+ const selectedForm = commonModulesList.value
|
|
|
+ const allFormList = useInfo.modularList || []
|
|
|
+
|
|
|
+ commonExpressionsHaveBeenAdded.value = allFormList.filter(item =>
|
|
|
+ selectedForm.some(arrItem => arrItem.path === item.path)
|
|
|
+ )
|
|
|
+
|
|
|
+ commonExpressionsHaveBeenNodded.value = allFormList.filter(item =>
|
|
|
+ selectedForm.some(arrItem => arrItem.path !== item.path)
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
function getVisitorPlan() {
|
|
|
requests.post(GET_VISITOR_PLAN, { calenderDate: dateConditions.value }).then((res) => {
|
|
|
visitorProgramList.value = res.data || []
|
|
|
@@ -180,6 +309,14 @@ function getFrequentlyUsedContacts() {
|
|
|
function getCommonlyUsedModules() {
|
|
|
requests.post(GET_COMMONLY_USED_MODULES, {}).then((res) => {
|
|
|
commonModulesList.value = res.data
|
|
|
+ processForms()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function getPlanCalendarList() {
|
|
|
+ const months = calendarRef.value.getSelectedDate()
|
|
|
+ requests.post(GET_PLAN_CALENDAR, { ym: dayjs(months).format('YYYY-MM') }).then(({ data }) => {
|
|
|
+ planCalendarList.value = data || []
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -189,6 +326,14 @@ useLifecycle({
|
|
|
getVisitorPlan()
|
|
|
getCommonlyUsedModules()
|
|
|
getFrequentlyUsedContacts()
|
|
|
+ getPlanCalendarList()
|
|
|
+ },
|
|
|
+ init: () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (expandAndCollapse.value) {
|
|
|
+ calendarHeight.value = calendarRef.value.$el.offsetHeight
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -216,6 +361,16 @@ onActivated(() => {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
|
|
|
+.doT {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: $themeColor;
|
|
|
+ margin: auto;
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
.toBeCompleted {
|
|
|
background: rgba($color: #F38B3C, $alpha: .1);
|
|
|
border-color: #F38B3C;
|
|
|
@@ -263,6 +418,16 @@ onActivated(() => {
|
|
|
margin: 0 14px;
|
|
|
}
|
|
|
|
|
|
+.newModuleImage {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.expandAndCollapseIcon {
|
|
|
+ transition: 0.5s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
.setCaleStrle :deep(.van-calendar__month-title) {
|
|
|
display: none;
|
|
|
}
|
|
|
@@ -270,4 +435,8 @@ onActivated(() => {
|
|
|
.setCaleStrle :deep(.van-calendar__month) {
|
|
|
padding: 0.8rem 0 0.5rem 0;
|
|
|
}
|
|
|
+
|
|
|
+.setCaleStrle :deep(.van-calendar) {
|
|
|
+ transition: 0.5s ease-in-out;
|
|
|
+}
|
|
|
</style>
|
zhouyy
