cz-hjjc-oa/src/views/dashboard/index.vue

<template>
  <div class="body">
    <div class="dashboard-container">
      <div class="row row1">
        <div class="weather">
          <div class="left">
            <h3>工作台</h3>
            <div class="d-flex">
              <div>欢迎回来，{{ name }}</div>
            </div>
          </div>

          <div class="center">
            <el-button
              style="padding: 6px 15px"
              type="primary"
              size="small"
              round
              @click="$router.push('/attendance')"
              >去打卡</el-button
            >
          </div>

          <div class="right">
            <div class="weather__icon">
              <i :class="weatherIcon.get(weather.weather)"></i>
            </div>
            <div class="weather__weather">
              <div>{{ $moment().format("dddd") }}</div>
              <div>{{ weather.weather }}</div>
            </div>
            <div class="weather__temperature">
              <div class="celsius">
                <span>
                  {{ weather.temperature }}
                </span>
                <span>°C</span>
              </div>
              <div class="wind">
                <span>{{ weather.winddirection }}</span>
                <span> {{ weather.windpower }}级</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mycard calendar">
          <div class="mycard__title calendar__title d-flex">
            <div>工作日历</div>

            <el-date-picker
              v-model="calendar"
              type="month"
              size="small"
              style="
                width: 160px;
                border-radius: 10px;
                background-color: #ffffff;
                border: 1px solid #d1d1d1;
              "
            ></el-date-picker>
          </div>
          <div class="mycard__body calendar__body">
            <el-calendar v-model="calendar">
              <template #dateCell="{ date, data }">
                <div
                  class="sign-status"
                  :class="
                    (getTodayAttendance(data.day) && (getTodayAttendance(data.day).sign_in_at || getTodayAttendance(data.day).sign_out_at)) ? 'has-attendance' : ''
                  "
                >
                  {{ data.day.split("-")[2] }}

                  <template v-if="getTodayAttendance(data.day)">
                    <div
                      class="sign-duty"
                      v-if="
                        getTodayAttendance(data.day, 'on_duty_schedules')
                      "
                    >
                      {{
                        getTodayAttendance(data.day, 'on_duty_schedules').status ? '已值班' : '待值班'
                      }}
                    </div>
                    <div
                      class="sign-in"
                      v-if="
                        getTodayAttendance(data.day) &&
                        getTodayAttendance(data.day).sign_in_at
                      "
                    >
                      {{
                        $moment(getTodayAttendance(data.day).sign_in_at).format(
                          "HH:mm"
                        )
                      }}
                    </div>
                    <div
                      class="sign-out"
                      v-if="
                        getTodayAttendance(data.day) &&
                        getTodayAttendance(data.day).sign_out_at
                      "
                    >
                      {{
                        $moment(
                          getTodayAttendance(data.day).sign_out_at
                        ).format("HH:mm")
                      }}
                    </div>
                    <div
                      class="sign-away"
                      v-if="getTodayAttendance(data.day) && getTodayAttendance(data.day).chuchai && getTodayAttendance(data.day).chuchai instanceof Array && getTodayAttendance(data.day).chuchai[0]"
                    >
                      上午出差
                    </div>
                    <div
                      class="sign-away"
                      v-if="getTodayAttendance(data.day) && getTodayAttendance(data.day).chuchai && getTodayAttendance(data.day).chuchai instanceof Array && getTodayAttendance(data.day).chuchai[1]"
                    >
                      下午出差
                    </div>
                    <div
                      class="sign-leave"
                      v-if="getTodayAttendance(data.day) && getTodayAttendance(data.day).qingxiujia && getTodayAttendance(data.day).qingxiujia instanceof Array && getTodayAttendance(data.day).qingxiujia[0]"
                    >
                      上午请假
                    </div>
                    <div
                      class="sign-leave"
                      v-if="getTodayAttendance(data.day) && getTodayAttendance(data.day).qingxiujia && getTodayAttendance(data.day).qingxiujia instanceof Array && getTodayAttendance(data.day).qingxiujia[1]"
                    >
                      下午请假
                    </div>
                  </template>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </div>

      <div class="row row2">
        <div class="mycard quick-menu">
          <div class="mycard__title">
            <span>快捷导航</span>
          </div>

          <div class="mycard__body quick-menu__body">
            <el-badge :value="item.num"
                      :max="99"
                      :hidden="!item.num"
                      class="item"
                      v-for="item in quickMenus"
                      :key="item.key">
              <router-link
                :to="item.url"
                tag="div"
              >
                <div>
                  {{ item.name }}
                </div>
              </router-link>
            </el-badge>
          </div>
        </div>

        <div class="mycard flow">
          <div class="mycard__title">
            <span>常用流程</span>
          </div>

          <div class="mycard__body flow__body">
            <div
              v-for="item in usualFlows"
              :key="item.key"
              @click="toCreate(item)">
              <div class="flow-cover">
                <template v-if="item.icon">
                  <Icon class="flow__body--icon" :icon="item.icon"></Icon>
                </template>
                <template v-else>
                  <i class="el-icon-edit flow__body--icon"></i>
                </template>
              </div>
              <span class="flow__body--name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="todo mycard">
      <div class="mycard__title">
        <span>待办事项</span>
      </div>

      <div class="mycard__body">
        <el-table
          v-loading="noticeLoading"
          style="width: 100%"
          size="mini"
          :header-cell-style="{
            'font-weight': '600',
            background: '#eaf2ff',
            color: '#515a6e',
          }"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          :data="notice"
        >
          <el-table-column
            type="index"
            width="46"
            label="序号"
            align="center"
          />
          <el-table-column
            v-for="(item, index) in noticeTable"
            :key="index"
            :width="item.width"
            :label="item.title"
            :prop="item.key"
            :show-overflow-tooltip="item['show-overflow-tooltip']"
            header-align="center"
            :align="item.align"
            :formatter="item.formatter"
          />
          <el-table-column
            label="操作"
            header-align="center"
            width="150"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                size="mini"
                style="padding: 5px 10px"
                @click="read(row)"
                >设为已读</el-button
              >
              <el-button
                size="mini"
                type="primary"
                style="padding: 5px 10px"
                @click="handle(row)"
                >办理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--    办理-->
    <vxe-modal
      v-model="isShowModal"
      :z-index="zIndex"
      transfer
      show-zoom
      resize
      :fullscreen="$store.getters.device === 'mobile'"
      title="办理"
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      esc-closable
    >
      <iframe
        :src="modalUrl"
        style="width: 100%; height: 100%"
        frameborder="0"
      />
    </vxe-modal>
  </div>
</template>

<script>
import Icon from '@/layout/components/Sidebar/Icon.vue'
import { PopupManager } from "element-ui/lib/utils/popup";
import { mapGetters } from "vuex";
import axios from "axios";
import { getToken } from "@/utils/auth";
import { flow } from "@/api/flow";
import { index as configIndex } from "@/api/config";
import { index } from "@/api/attendance";
import {isExternal} from "@/utils/validate";
import { defaultModalSize } from "@/settings";
export default {
  name: "Dashboard",
  components: {
    Icon
  },
  data() {
    return {
      defaultModalSize,
      modalUrl: "",
      zIndex: PopupManager.nextZIndex(),
      isShowModal: false,

      weatherIcon: new Map([
        ["晴", "el-icon-sunny"],
        ["阴", "el-icon-cloudy"],
        ["多云", "el-icon-cloudy-and-sunny"],
        ["大雨", "el-icon-heavy-rain"],
        ["雷阵雨", "el-icon-lightning"],
        ["小雨", "el-icon-light-rain"],
        ["中雨", "el-icon-light-rain"],
      ]),
      weather: {},

      calendar: new Date(),
      attendanceData: {
        attendances: [],
      },

      quickMenus: [
        {
          name: "我收藏的",
          url: "/flow/list/fav",
          num: 0
        },
        {
          name: "我办理过的",
          url: "/flow/list/handled",
          num: 0
        },
        {
          name: "我发起的",
          url: "/flow/list/my",
          num: 0
        },
        {
          name: "所有待办",
          url: "/flow/list/todo",
          num: 0
        },
        {
          name: "抄送给我的",
          url: "/flow/list/cc",
          num: 0
        },
      ],

      flows: [],
      usualFlows: [],

      noticeTimer: null,
      noticeLoading: false,
      notice: [],
      noticeTable: [
        {
          title: "下发时间",
          key: "created_at",
          width: 156,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          title: "内容",
          key: "data.title",
          align: "left",
          "show-overflow-tooltip": true,
          minWidth: 240,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  watch: {
    isShowModal(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()
      } else {
        this.modalUrl = ''
      }
    },
    calendar(newVal, oldVal) {
      if (this.$moment(oldVal).format('YYYY-MM') !== this.$moment(newVal).format('YYYY-MM')) {
        this.getAttendance()
      }
    }
  },
  methods: {
    toCreate(flow, cate) {
      if(isExternal(flow.url)) {
        const url = new URL(flow.url)
        window.open(flow.url,'_blank')
      } else if (flow.url) {
        if (/\?.+/g.test(flow.url)) {
          window.open(window.location.origin + flow.url,'_blank')
        }
      } else {
        this.$router.push({
          path: '/flow/create',
          query: {
            module_id: flow.id
          }
        })
      }
    },
    getTodayAttendance(date,key = 'attendance') {
      let temp = this.attendanceData.attendances.find((i) => i.date === date) ?? {}
      return temp[key]
    },
    async getAttendance() {
      try {
        const res = await index({
          month: this.$moment(this.calendar).format('YYYY-MM'),
        });
        this.attendanceData = res;
      } catch (err) {
        console.error(err);
      }
    },
    async getUsualFlows() {
      try {
        await this.getFlows();
        const res = await configIndex({
          filter: [
            {
              key: "key",
              op: "eq",
              value: "dashboard_menus",
            },
          ],
        });
        this.usualFlows = this.flows.filter(
          (i) => res.data[0]?.value?.indexOf(i.id.toString()) !== -1
        );
        console.log(this.usualFlows);
      } catch (err) {
        console.error(err);
      }
    },
    async getFlows() {
      try {
        const res = await flow();
        this.flows = res.cates?.map((i) => i.customer_models).flat();
      } catch (err) {
        console.error(err);
      }
    },
    async getTotal() {
      try {
        const res = await axios.get(`${process.env.VUE_APP_BASE_API}/api/oa/statistics/notifications`,{
          headers: {
            Authorization: `Bearer ${getToken()}`,
          }
        });
        if (res.status === 200) {
          console.log(res)
          this.quickMenus[3].num = res.data.data?.count_todo ?? 0
          this.quickMenus[4].num = res.data.data?.count_unread_ccs ?? 0
        }
      } catch (err) {
        console.error(err);
      }
    },
    async getWeather() {
      try {
        const res = await axios.get(
          `https://restapi.amap.com/v3/weather/weatherInfo?city=320400&key=15ecd1e7de61e684959f43d8965a89f0`
        );
        if (res.status === 200) {
          this.weather = res.data.lives[0];
        }
      } catch (err) {
        console.error(err);
      }
    },

    async getNotices(loading = false) {
      try {
        if (loading) {
          this.noticeLoading = true;
        }
        const res = await axios.get(
          `${process.env.VUE_APP_BASE_API}/api/notification/todo`,
          {
            headers: {
              Authorization: `Bearer ${getToken()}`,
            },
            params: {
              page: 1,
              page_size: 30,
              from: window.MODULE_NAME || process.env.VUE_APP_MODULE_NAME,
            },
          }
        );
        if (res.status === 200) {
          this.notice = res.data.data?.data;
        }
        this.noticeLoading = false;
      } catch (err) {
        console.error(err);
        this.noticeLoading = false;
      }
    },

    async read(row) {
      try {
        this.loading = true;
        const res = await axios.get(
          `${process.env.VUE_APP_BASE_API}/api/notification/read`,
          {
            headers: {
              Authorization: `Bearer ${getToken()}`,
            },
            params: {
              id: row.id,
            },
          }
        );
        if (res.status === 200) {
          await this.getNotices();
        }
        this.loading = false;
      } catch (err) {
        console.error(err);
        this.loading = false;
      }
    },
    handle(row) {
      try {
        const data = row.data;
        if (data.from === "ht") {
          this.modalUrl = `/${
            data.from
          }/#/contract/contractList?auth_token=${window.encodeURIComponent(
            getToken()
          )}&module_name=${data.from}&keyword=${
            /\[(.*?)]/.exec(data.title) ? /\[(.*?)]/.exec(data.title)[1] : ""
          }&isSinglePage=1`;
        } else if (data.from === "oa") {
          this.modalUrl = `/${
            data.from
          }/#/flow/create?auth_token=${window.encodeURIComponent(
            getToken()
          )}&module_name=${data.from}&flow_id=${
            data.other?.flow_id
          }&isSinglePage=1`;
        }
        console.log(this.modalUrl);
        this.isShowModal = true;
      } catch (err) {
        this.$message.warning("未找到流程");
        console.error(err);
      }
    },
  },
  created() {
    this.getWeather();
    this.getNotices(true);
    this.noticeTimer = setInterval(this.getNotices, 5000)
    this.getTotal();
    this.getUsualFlows();
    this.getAttendance();
  },
  beforeDestroy() {
    clearInterval(this.noticeTimer)
  }
};
</script>

<style lang="scss" scoped>
$btn-colors: linear-gradient(90deg, #d4bbfd 0%, #af7bff 100%),
  linear-gradient(90deg, #8dddf7 0%, #3fbde2 100%),
  linear-gradient(90deg, #aec1fd 0%, #81a0ea 100%),
  linear-gradient(90deg, #f5c0b8 0%, #ee9b98 100%),
  linear-gradient(90deg, #ffd2a6 0%, #ffb46d 100%);
::v-deep .el-calendar__header {
  display: none;
}
::v-deep .el-input__inner {
  border-color: transparent;
  border-radius: 10px;
}
::v-deep .el-calendar-table {
  border-collapse: separate;
  border-spacing: 4px;
}
::v-deep .el-calendar__body table thead th:nth-last-child(1),
::v-deep .el-calendar__body table thead th:nth-last-child(2) {
  color: #dd383d;
}
::v-deep .el-calendar-table td,
::v-deep .el-calendar-table tr:first-child td,
::v-deep .el-calendar-table tr td:first-child {
  border: none;
}
::v-deep .el-calendar-table__row .current, ::v-deep .el-calendar-table__row .next, ::v-deep .el-calendar-table__row .prev{
  min-height: 68px;
  position: relative;
}
::v-deep .el-calendar-table .el-calendar-day {
  border-radius: 10px;
  min-height: 68px;
  height: 100%;
  transition: all 0.2s;
}
::v-deep .el-calendar-table td.is-selected {
  background: var(--theme-color) !important;
  color: #fff !important;
  border-radius: 10px;
}
::v-deep .el-calendar-table .el-calendar-day:hover {
  color: var(--theme-color);
}
::v-deep .el-calendar {
  border-radius: 0 0 10px 10px;
}
::v-deep .el-badge__content.is-fixed {
  z-index: 1;
}
::v-deep .el-calendar-table .is-today {

  &::after {
    content: "今";
    color: #fff;
    background: var(--theme-color);
    filter: sepia(0.5);
    transform: translate(50%, -50%);
    border-radius: 4px;
    padding: 2px;
    font-size: 10px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.d-flex {
  display: flex;
}
.body {
  padding: 10px;
}
.mycard {
  border-radius: 10px;
  filter: drop-shadow(0 0 5px rgba(51, 51, 51, 0.1));
  background-color: #ffffff;
  padding: 22px;

  &__title {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
    padding-left: 20px;
    position: relative;

    &::before {
      content: "";
      height: 100%;
      border-radius: 5px;
      background: var(--theme-color);
      width: 5px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  &__body {
    padding-top: 20px;
  }
}
.dashboard {
  &-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    & > * {
      width: calc(50% - 10px);
    }
    .row {
      & > * {
        margin-bottom: 20px;
      }
    }
    .weather {
      display: flex;
      align-items: flex-end;

      .center {
        margin-left: 20px;
      }
      .right {
        display: flex;
        align-items: center;
        margin-left: auto;
      }

      &__icon {
        color: var(--theme-color);
        font-size: 40px;
      }
      &__weather {
        font-size: 14px;
        line-height: 1.5;
        text-transform: uppercase;
        color: #595959;
        text-align: center;
        margin-left: 8px;
      }
      &__temperature {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 8px;

        .celsius {
          & > span:nth-child(1) {
            font-size: 44px;
            color: #595959;
          }
          & > span:nth-child(2) {
            font-size: 30px;
            color: #595959;
          }
        }
        .wind {
          background: var(--theme-color);
          border-radius: 8px;
          font-size: 12px;
          padding: 2px 12px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .calendar {
      padding: 0;

      &__title {
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        border-radius: 10px 10px 0 0;
        background: var(--theme-color);
        padding: 22px;

        &::before {
          display: none;
        }
      }
      &__body {
        background: #fff;
        border-radius: 0 0 10px 10px;
      }
    }

    .flow {
      &__body {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;

        & > div {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        & > * {


          @for $index from 1 through length($btn-colors) {
            &:nth-child(#{$index}n) .flow-cover {
              background: nth($btn-colors, $index);
            }
          }
        }

        .flow-cover {
          padding: 10px;
          border-radius: 6px;
        }

        &--icon {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          width: 30px !important;
          height: 30px !important;
          color: #fff;
          margin-right: 0 !important;
        }
        &--name {
          color: #5a576f;
          font-weight: bold;
          font-size: 14px;
          padding-top: 20px;
          text-align: center;
        }
      }
    }
    .quick-menu {
      &__body {
        display: flex;
        flex-wrap: wrap;

        & > div {
          font-weight: bold;
          font-size: 16px;
          color: #fff;
          padding: 14px 20px;
          cursor: pointer;
          border-radius: 10px;
          margin: 10px 10px 0 0;
          // overflow: hidden;
          position: relative;
          z-index: 3;

          &::before {
            content: "";
            width: 86%;
            height: 114%;
            background: radial-gradient(
                100% 100% at 50% 50%,
                #0000 0,
                #0000 13%,
                #fff2 44%,
                #0000 44%
              )
              no-repeat;
            z-index: -1;
            position: absolute;
            left: -33%;
            bottom: -64%;
          }
          &::after {
            content: "";
            width: 116%;
            height: 152%;
            background: radial-gradient(
                100% 100% at 50% 50%,
                #0000 0,
                #0000 13%,
                #fff2 44%,
                #0000 44%
              )
              no-repeat;
            z-index: -1;
            position: absolute;
            right: -56%;
            bottom: -79%;
          }
        }
        @for $index from 1 through length($btn-colors) {
          & > div:nth-child(#{$index}) {
            background: nth($btn-colors, $index);
          }
        }
      }
    }
  }
}
.todo {
  margin-top: 20px;
}

@media (max-width: 992px) {
  .body {
    padding: 10px;
  }
  .dashboard {
    &-container {
      flex-direction: column;
      padding: 0;

      & > * {
        width: 100%;
      }
      .weather {
        display: flex;

        &__icon {
          font-size: 32px;
        }
        &__temperature {
          .celsius {
            & > span:nth-child(1) {
              font-size: 32px;
            }
            & > span:nth-child(2) {
              font-size: 20px;
            }
          }
          .wind {
            font-size: 11px;
          }
        }

        .center {
          margin-left: 0;
        }
      }
    }
  }

  .todo {
    margin-top: 10px;
  }
}
</style>

<style lang="scss">
.el-calendar-day:has(.has-attendance)::before{
  content: "";
  border-radius: 10px;
  background: var(--theme-color);
  opacity: 0.4;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.el-calendar-day:has(.has-attendance) .sign-status {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.sign-duty {
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  background: #f56c6c;
  padding: 2px 4px;
  margin-left: auto;
  text-align: center;
}
.sign-in {
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  background: var(--theme-color);
  padding: 2px 4px;
  margin-left: auto;
  text-align: center;
}
.sign-out {
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  background-color: #251f83;
  padding: 2px 4px;
  margin-left: auto;
  text-align: center;
}
.sign-leave {
  margin-top: 4px;
  color: #fff;
  font-size: 8px;
  border-radius: 3px;
  background-color: #e6a23c;
  padding: 2px 4px;
  margin-left: auto;
  text-align: center;
}
.sign-away {
  margin-top: 4px;
  color: #fff;
  font-size: 8px;
  border-radius: 3px;
  background-color: #909399;
  padding: 2px 4px;
  margin-left: auto;
  text-align: center;
}

@media (max-width: 992px) {
  .sign-status {
    display: block !important;
  }
  .sign-in,
  .sign-out,
  .sign-leave,
  .sign-out {
    float: none !important;
  }
  .el-calendar-table .el-calendar-day {
    padding: 2px;
  }
}
</style>