FE_sandTable/src/layout/components/AppSidebar/index.vue

<template>
  <div>
    <el-scrollbar wrap-style="height: calc(100% - 85px)">
      <div v-if="!isConfig" class="avatar py-3 mx-auto mb-5 text-center">
        <img class="mx-auto" src="@/assets/images/6.png" alt="" />
        <p class="text-white text-base lg:text-sm">{{ roleName }}</p>
        <p class="my-2 text-white text-sm lg:text-xs">产品部门</p>
        <div class="flex justify-center items-center text-white text-xs lg:text-[10px]">
          虚拟时间：{{ date }}
          <!-- <img class="ml-2 cursor-pointer"
               src="@/assets/images/date.png"
               alt=""
               @click="dateVisible = true"> -->
        </div>
      </div>
      <menus></menus>
    </el-scrollbar>

    <el-dialog v-model="dateVisible" title="选择交易日期" width="400px" center>
      <div class="text-center">
        <el-date-picker v-model="diaDate" format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date" />
      </div>
      <template #footer>
        <span class="flex justify-center">
          <div class="dia-btn cancel" @click="dateVisible = false">取消</div>
          <div class="dia-btn" @click="submitDate">确定</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getOperationTime, saveOperationTime } from '@/api/config';
import Cookies from 'js-cookie';
import dayjs from 'dayjs';
import { getNow } from '@/utils/common';
import Menus from './Menu.vue';

const router = useRouter();
const route = useRoute();
const isConfig = computed(() => route.path.startsWith('/config'));
const projectId = +Cookies.get('sand-projectId');
const levelId = +Cookies.get('sand-level');
const date = ref<string>(dayjs(new Date()).format('YYYY-MM-DD'));
const diaDate = ref<string>(dayjs(new Date()).format('YYYY-M-D'));
const dateVisible = ref<boolean>(false);
const roleIds = {
  41: '产品经理',
  42: '风控经理',
  43: '专家委员会',
};

const roleName = computed(() => {
  if (route.query.role) {
    return roleIds[+route.query.role];
  }
  if (route.path.includes('insurance')) {
    return '保险产品经理';
  }
  if (route.path.includes('fund')) {
    return '基金产品经理';
  }
});
// 获取操作日期
const getDate = async () => {
  if (levelId && projectId) {
    const res = await getOperationTime(levelId, projectId);
    if (res.operationTime) {
      date.value = res.operationTime;
      diaDate.value = res.operationTime;
    }
  }
};
// 日期提交
const submitDate = async () => {
  await saveOperationTime(levelId, projectId, dayjs(new Date(diaDate.value)).format('YYYY-MM-DD'));
  location.reload();
  getDate();
  dateVisible.value = false;
};
onMounted(async () => {
  // getDate();
  date.value = dayjs(await getNow()).format('YYYY-MM-DD');
});
</script>

<style lang="scss" scoped>
.avatar {
  background: url(../../../assets/images/5.png) 0 0/100% 100% no-repeat;
}
</style>