Bläddra i källkod

Merge branch 'master' of http://114.55.67.98:8070/Natural_p1/zjugis_OA

songxy 1 år sedan
förälder
incheckning
22d24ae168

BIN
client/src/assets/imgs/OA/kq/cc.png


BIN
client/src/assets/imgs/OA/kq/cd.png


BIN
client/src/assets/imgs/OA/kq/kg.png


BIN
client/src/assets/imgs/OA/kq/swkq.png


BIN
client/src/assets/imgs/OA/kq/xwqk.png


BIN
client/src/assets/imgs/OA/kq/ycq.png


BIN
client/src/assets/imgs/OA/kq/ycqA.png


BIN
client/src/assets/imgs/OA/kq/zt.png


+ 411 - 19
client/src/views/OaSystem/attendanceCenter/mine.vue

@@ -1,34 +1,426 @@
 <template>
-  <div class="attendanceCenter">
-    <h1>{{ titleOne }}考勤</h1>
-    <OaCalendar />
+  <div class="attendanceCenterMine">
+    <div class="left-box box-1">
+      <div class="box-title">我的考勤</div>
+      <div class="calendarBox">
+        <el-calendar ref="calendar">
+          <template #header="{ date }">
+            <div class="calendarHeader">
+              <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
+              <span class="title">{{ date }}</span>
+              <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
+            </div>
+          </template>
+
+          <template #date-cell="{ data }">
+            <div class="calendarContentBox">
+              <p>
+                {{ data.day.split('-').slice(2).join('-') }}
+              </p>
+              <p>
+                {{ '正常' }}
+              </p>
+            </div>
+          </template>
+        </el-calendar>
+      </div>
+      <div class="calendarInfo">
+        <ul>
+          <li v-for="(item, index) in calendInfoList" :key="index">
+            <img :src="getAssetURL(item.icon)" />
+            <div class="text">
+              <p>{{ item.name }} ({{ item.unit }})</p>
+              <h4>{{ item.value }}</h4>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="right-box">
+      <div class="right-top box-1">
+        <div class="box-title">请假统计</div>
+        <ul>
+          <li v-for="(item, index) in qjCount" :key="index">
+            <div class="liLeft">
+              <div></div>
+              <p>{{ item.name }} :</p>
+            </div>
+            <h4>{{ item.value }} 天 </h4>
+          </li>
+        </ul>
+      </div>
+      <div class="right-bom box-1">
+        <div class="box-title">
+          <h4>考勤状态</h4>
+          <div>2023年10月23日</div>
+        </div>
+        <ul>
+          <li v-for="(item, index) in attendSteList" :key="index">
+            <div class="li-top-box" v-if="index == 1 || index == 0">
+              <div class="liLeft">
+                <img :src="getAssetURL(item.icon)" />
+                <p>{{ item.name }}</p>
+              </div>
+              <h4>{{ item.value }}</h4>
+            </div>
+            <div class="li-bom-box" v-else>
+              <div class="liLeft">
+                <p>{{ item.name }}</p>
+                <h4>{{ item.num }}</h4>
+              </div>
+              <h4 v-if="item.value != ''">{{ item.value }}</h4>
+              <h4 v-else> -- : -- </h4>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import moment from 'moment'
-import OaCalendar from '@/views/OaSystem/components/OaCalendar/index.vue'
-import { useAppStore } from '@/store/modules/app'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
+import { getAssetURL } from '@/utils/auth'
 defineOptions({ name: 'AttendanceMine' })
-const { wsCache } = useCache()
-const appStore = useAppStore()
-const user = wsCache.get(CACHE_KEY.USER)
-const userName = user.user.nickname ? user.user.nickname : 'Admin'
-const calendarList = ref([])
-
-const titleOne = ref('2023年11月')
-onMounted(() => {
-  console.log(user)
-})
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+const calendInfoList = ref([
+  {
+    icon: 'kq/ycq',
+    name: '应出勤',
+    unit: '天',
+    value: 22
+  },
+  {
+    icon: 'kq/ycqA',
+    name: '已出勤',
+    unit: '天',
+    value: 0
+  },
+  {
+    icon: 'kq/cc',
+    name: '出差',
+    unit: '天',
+    value: 0
+  },
+  {
+    icon: 'kq/zt',
+    name: '早退',
+    unit: '次',
+    value: 0
+  },
+  {
+    icon: 'kq/kg',
+    name: '旷工',
+    unit: '天',
+    value: 0
+  },
+  {
+    icon: 'kq/cd',
+    name: '迟到',
+    unit: '次',
+    value: 0
+  }
+])
+const qjCount = ref([
+  {
+    name: '事假',
+    value: 0
+  },
+  {
+    name: '病假',
+    value: 0
+  },
+  {
+    name: '年假',
+    value: 0
+  },
+  {
+    name: '调休',
+    value: 0
+  },
+  {
+    name: '产假',
+    value: 0
+  },
+  {
+    name: '护理假',
+    value: 0
+  },
+  {
+    name: '丧假',
+    value: 0
+  },
+  {
+    name: '婚假',
+    value: 0
+  },
+  {
+    name: '其他',
+    value: 0
+  }
+])
+const attendSteList = ref([
+  {
+    icon: 'kq/swkq',
+    name: '上午考勤',
+    value: '请假'
+  },
+  {
+    icon: 'kq/xwqk',
+    name: '下午考勤',
+    value: '正常'
+  },
+  {
+    name: '上班打卡',
+    num: '9:00',
+    value: ''
+  },
+  {
+    name: '下班打卡',
+    num: '17:30',
+    value: '18:25'
+  }
+])
+onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 h1 {
   font-size: 20px;
   margin-bottom: 15px;
 }
-.attendanceCenter {
+.attendanceCenterMine {
   width: 100%;
   height: 100%;
-  padding: 15px 220px;
+  padding-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .box-title {
+    width: 100%;
+    height: 30px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #121518;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    h4 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #121518;
+    }
+    div {
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+  .box-1 {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px;
+  }
+
+  .left-box {
+    width: calc(50% - 15px);
+    height: 100%;
+    .calendarBox {
+      width: 100%;
+      height: calc(100% - 254px);
+      border-bottom: 1px solid #e4e8ef;
+      .calendarHeader {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+        .icon1 {
+          cursor: pointer;
+        }
+      }
+    }
+    .calendarInfo {
+      width: 100%;
+      height: 224px;
+      padding: 15px;
+      ul {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        li {
+          width: 26%;
+          height: 50%;
+          display: flex;
+          align-items: center;
+          img {
+            margin-right: 15px;
+          }
+          .text {
+            p {
+              margin-bottom: 10px;
+            }
+            h4 {
+              font-size: 20px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+  .right-box {
+    width: calc(50%);
+    height: 100%;
+    .right-top {
+      width: 100%;
+      height: 308px;
+      margin-bottom: 15px;
+      ul {
+        width: 100%;
+        height: calc(100% - 30px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        li {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: calc(33% - 15px);
+          height: 54px;
+          border-radius: 8px 8px 8px 8px;
+          opacity: 1;
+          border: 1px solid #e4e8ef;
+          padding: 0 20px;
+          .liLeft {
+            display: flex;
+            align-items: center;
+            div {
+              width: 8px;
+              height: 8px;
+              background: #8b969c;
+              border-radius: 50%;
+              margin-right: 10px;
+            }
+          }
+          h4 {
+            font-size: 18px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+    .right-bom {
+      width: 100%;
+      height: calc(100% - 323px);
+      ul {
+        width: 100%;
+        height: calc(100% - 70px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-top: 40px;
+        li {
+          width: calc(50% - 15px);
+          height: calc(50% - 30px);
+          border-radius: 8px 8px 8px 8px;
+          border: 1px solid #e4e8ef;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 28px;
+          .li-top-box {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .liLeft {
+              display: flex;
+              align-items: center;
+              img {
+                margin-right: 15px;
+              }
+            }
+            h4 {
+              font-size: 22px;
+              font-weight: 500;
+            }
+          }
+          .li-bom-box {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .liLeft {
+              p {
+                font-size: 16px;
+                margin-bottom: 10px;
+              }
+              h4 {
+                font-weight: 500;
+                font-size: 16px;
+                text-align: center;
+              }
+            }
+            h4 {
+              font-size: 30px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-calendar {
+  .el-calendar__header {
+    border: 0;
+  }
+  .el-calendar__body {
+    padding-top: 0;
+    padding-bottom: 0;
+    .el-calendar-table {
+    }
+    .el-calendar-table__row {
+      td {
+      }
+    }
+    .current {
+      height: 65px;
+    }
+    .is-selected {
+      background-color: transparent;
+      .el-calendar-day {
+        background-color: #2e77e6;
+        color: #fff;
+      }
+    }
+    .el-calendar-day {
+      margin: 0 auto;
+      width: 65px;
+      height: 65px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .el-calendar-table tr td {
+    border: 0;
+  }
+
+  .calendarContentBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
 }
 </style>

+ 0 - 2
client/src/views/OaSystem/oaLayout/menusActive.vue

@@ -20,8 +20,6 @@ const menuList = ref(props.menuData.children)
 const pushName = ref(props.menuData.path)
 
 const menuClick = (item, index) => {
-  console.log('/oaSystem/' + pushName.value + '/' + item.path)
-
   push('/oaSystem/' + pushName.value + '/' + item.path)
 }
 

+ 0 - 2
client/src/views/OaSystem/oaLayout/tagList.vue

@@ -212,8 +212,6 @@ watch(
 )
 /** 初始化 **/
 onMounted(() => {
-  console.log(selectedTag)
-
   initTags()
   addTags()
 })