feat(person): complete person attendance functional

YDKD · Apr 8, 2022 · 513d93b · 513d93b
1 parent fc2e6bb
commit 513d93b
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 21 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,6 +34,7 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     'vue/no-multiple-template-root': 'off',
+    'vue/no-v-model-argument': 'off',
     'no-useless-escape': 'off',
     'vue/html-self-closing': [
       'error',

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_p7mm42amaj.css" />
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_rrzu1plqg1l.css" />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title></title>

diff --git a/src/api/getApi.ts b/src/api/getApi.ts
@@ -66,3 +66,11 @@ export function getSerialNum() {
     method: 'GET'
   })
 }
+
+export function getWorkerAttendance(params: any) {
+  return defaultRequest.request<ReutrnDataType>({
+    url: '/sys/person/attendance',
+    method: 'GET',
+    params
+  })
+}
diff --git a/src/api/type.ts b/src/api/type.ts
@@ -7,6 +7,7 @@ interface BaseReturnType {
 interface dataStructure {
   result?: any
   code: number
+  total: number
 }
 
 export interface ReutrnDataType extends BaseReturnType {

diff --git a/src/components/Button/src/Button.vue b/src/components/Button/src/Button.vue
@@ -3,14 +3,14 @@
  * @Autor: YDKD
  * @Date: 2022-04-01 10:57:59
  * @LastEditors: YDKD
- * @LastEditTime: 2022-04-07 14:58:26
+ * @LastEditTime: 2022-04-07 17:52:39
 -->
 <template>
   <div :class="prefixCls">
     <el-button>
       <icon-src-icon
         v-if="icon != ''"
-        type="iconfont"
+        :type="iconType"
         :icon="icon"
       ></icon-src-icon>
       {{ text }}
@@ -29,9 +29,12 @@ const prefixCls = useDesign('prefix', 'button')
 
 const props = defineProps({
   text: propTypes.string.def(''),
-  type: propTypes.oneOf<ButtonType[]>([]).def('primary'),
-  size: propTypes.oneOf<ButtonSize[]>([]).def(),
-  icon: propTypes.string.def('')
+  type: propTypes.oneOf<ButtonType[]>(['primary']).def('primary'),
+  size: propTypes
+    .oneOf<ButtonSize[]>(['default', 'large', 'small'])
+    .def('small'),
+  icon: propTypes.string.def(''),
+  iconType: propTypes.oneOf<IconType[]>(['iconify', 'iconfont']).def('iconify')
 })
 </script>
 

diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
@@ -3,7 +3,7 @@
  * @Autor: YDKD
  * @Date: 2022-03-28 15:08:36
  * @LastEditors: YDKD
- * @LastEditTime: 2022-04-07 14:51:07
+ * @LastEditTime: 2022-04-08 09:06:21
 -->
 <template>
   <ElIcon :class="prefixCls" :size="size" :color="color">
@@ -20,7 +20,6 @@
 import { defineProps, computed, PropType } from 'vue'
 import { useDesign } from '@/hooks'
 
-import type { IconType } from '../types'
 import { propTypes } from '@/utils/propTypes'
 
 const prefixCls = useDesign('prefix', 'icon')

diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
diff --git a/src/utils/getKey.ts b/src/utils/getKey.ts
@@ -0,0 +1,3 @@
+export const getKey = <T, K extends keyof T>(record: T, key: K): T[K] => {
+  return record[key]
+}
diff --git a/src/views/attendance/components/count-panel.vue b/src/views/attendance/components/count-panel.vue
@@ -3,20 +3,97 @@
  * @Autor: YDKD
  * @Date: 2022-04-06 10:11:27
  * @LastEditors: YDKD
- * @LastEditTime: 2022-04-07 16:30:18
+ * @LastEditTime: 2022-04-08 10:34:15
 -->
 <template>
-  <div :class="prefixCls"></div>
+  <div :class="prefixCls">
+    <div class="search">
+      <el-input
+        v-model="queryData.search"
+        placeholder="输入职工信息进行检索"
+        class="input-with-select"
+        clearable
+        @clear="getInitData"
+      >
+        <template #append>
+          <button-src-button
+            icon="search"
+            icon-type="iconify"
+            @click="getInitData"
+          />
+        </template>
+      </el-input>
+    </div>
+    <el-table :data="tableData" border stripe :class="['my-2']">
+      <el-table-column label="职工姓名" prop="username" align="center">
+      </el-table-column>
+      <el-table-column label="假期类型" align="center">
+        <template #default="{ row }">
+          {{ getKey(vacationType, row.status) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="是否记录" align="center">
+        <template #default="{ row }">
+          <icon-src-icon
+            type="iconfont"
+            :icon="getKey(record, row.record)"
+          ></icon-src-icon>
+        </template>
+      </el-table-column>
+      <el-table-column label="请假开始时间">
+        <template #default="{ row }">
+          {{
+            moment(row.createTime).utcOffset(8).format('YYYY/MM/DD HH:mm:ss')
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="请假结束时间">
+        <template #default="{ row }">
+          {{ moment(row.endTime).utcOffset(8).format('YYYY/MM/DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="请假原由" prop="reason"></el-table-column>
+    </el-table>
+    <el-pagination
+      v-model:currentPage="queryData.page"
+      :hide-on-single-page="unref(hideSinglePage)"
+      :page-size="queryData.pageSize"
+      background
+      layout="total, prev, pager, next"
+      :total="total"
+      @current-change="getInitData"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+import moment from 'moment'
 import { useDesign } from '@/hooks'
+import { unref } from 'vue'
+import { getKey } from '@/utils/getKey'
+
+import {
+  getInitData,
+  tableData,
+  total,
+  queryData,
+  hideSinglePage,
+  record,
+  vacationType
+} from '../hooks'
+import Icon from '@/components/Icon/src/Icon.vue'
+
 const prefixCls = useDesign('prefix', 'count-panel')
+
+getInitData()
 </script>
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-count-panel';
 
 .@{prefix-cls} {
+  .search {
+    width: 20%;
+  }
 }
 </style>
diff --git a/src/views/attendance/hooks/index.ts b/src/views/attendance/hooks/index.ts
@@ -0,0 +1,26 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-07 17:14:27
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-08 10:31:04
+ */
+import {
+  getInitData,
+  tableData,
+  total,
+  queryData,
+  hideSinglePage,
+  record,
+  vacationType
+} from './useTable'
+
+export {
+  getInitData,
+  tableData,
+  total,
+  queryData,
+  hideSinglePage,
+  record,
+  vacationType
+}
diff --git a/src/views/attendance/hooks/useTable.ts b/src/views/attendance/hooks/useTable.ts
@@ -0,0 +1,51 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-07 17:14:45
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-08 10:30:41
+ */
+
+import { getWorkerAttendance } from '@/api/getApi'
+import { ref, unref, computed } from 'vue'
+
+const queryData = ref({
+  search: '',
+  page: 1,
+  pageSize: 10
+})
+
+const tableData = ref([])
+const total = ref(0)
+
+const getInitData = async () => {
+  const params = unref(queryData)
+  const { data } = await getWorkerAttendance(params)
+  tableData.value = data.result
+  total.value = data.total
+}
+
+const record = {
+  0: 'icon-icon-test',
+  1: 'icon-zhengque'
+}
+
+const vacationType = {
+  0: '出勤',
+  1: '矿工',
+  2: '病假',
+  3: '休假',
+  4: '事假',
+  5: '其他'
+}
+
+const hideSinglePage = computed(() => total.value < queryData.value.pageSize)
+export {
+  getInitData,
+  tableData,
+  total,
+  queryData,
+  hideSinglePage,
+  record,
+  vacationType
+}
diff --git a/types/components.d.ts b/types/components.d.ts
@@ -8,17 +8,21 @@ declare module 'vue' {
     EchartsSrcEcharts: typeof import('./../src/components/Echarts/src/Echarts.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElCard: typeof import('element-plus/es')['ElCard']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     FossBg: typeof import('./../src/components/foss-bg/index.vue')['default']
     HeaderSrcHeader: typeof import('./../src/components/Header/src/Header.vue')['default']
     IconSrcIcon: typeof import('./../src/components/Icon/src/Icon.vue')['default']

diff --git a/types/system.d.ts b/types/system.d.ts
@@ -3,7 +3,7 @@
  * @Autor: YDKD
  * @Date: 2022-04-01 16:19:48
  * @LastEditors: YDKD
- * @LastEditTime: 2022-04-04 19:35:02
+ * @LastEditTime: 2022-04-07 17:46:05
  */
 
 import vue from 'vue'
@@ -43,4 +43,5 @@ declare global {
     // 入职时间
     workTime: Date | string
   }
+  type IconType = 'iconify' | 'iconfont'
 }