签卡情况

src/views/staging/zbgly/right/attendance-com.vue

@@ -9,27 +9,19 @@
           {label: '上月', value: 'month'},
           // {label: '自定义', value: '4'},
       ]" padding="3px 12px" v-model:active="dateType" @buttonClick="handleButtonClick"/>
-    <div class="list">
+    <div class="list" v-loading="loading">
       <template v-for="(item, index) in list">
         <div class="item">
           <div class="index">{{index < 9 ? '0' : ''}}{{index + 1}}</div>
-          <div class="title __text-ellipsis">{{item.title}}</div>
-          <template v-if="item.status === 1">
+          <div class="title __text-ellipsis">{{item.name}}</div>
+          <template v-if="item.status === '正常'">
             <div class="status status-true">
-              已签到({{item.total}}次)
+              已签到<temlate v-if="dateType !== 'day'">({{item.number}}次)</temlate>
             </div>
           </template>
-          <template v-else-if="item.status === 2">
+          <template v-else>
             <div class="status status-false">
-              <template v-if="item.type === 1">
-                迟到
-              </template>
-              <template v-else-if="item.type === 2">
-                缺勤
-              </template>
-              <template v-else-if="item.type === 3">
-                早退({{item.total}}次)
-              </template>
+              {{item.status}}<temlate v-if="dateType !== 'day'">({{item.number}}次)</temlate>
             </div>
           </template>
         </div>
@@ -77,6 +69,7 @@ import BaseBlockCom from '../../common/base-block.vue'
 import ButtonSwitchCom from '../../common/button-switch.vue'
 import * as Handle from '../../common/handle'
 import {zbglyWorkbenchAdminCheck} from "@/api/modules/workbench";
+import {ElMessage} from "element-plus";
 
 export default defineComponent({
   name: '',
@@ -91,30 +84,11 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       Handle: Handle,
-      list: [
-        {status: 1, title: '太极计算机股份有限公司', total: 20},
-        {status: 1, title: '太极计算机股份有限公司', total: 2},
-        {status: 2, title: '中电科国海信通科技（海南）有限公司中电科国海信通科技（海南）有限公司', type: 3, total: 20},
-        {status: 2, title: '消防总队', type: 1},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-        {status: 2, title: '消防总队', type: 2},
-      ],
+      list: [],
       dateType: 'day',
       showTimeDialog: false,
-      cusDate: ''
+      cusDate: '',
+      loading: false
     })
     const handleButtonClick = (val) => {
       if (val.value === '4') {
@@ -122,8 +96,19 @@ export default defineComponent({
       }
     }
     const initStatisticData = () => {
+      state.loading = true
+      state.list = []
       that.$api.zbglyWorkbenchAdminCheck({
         type: state.dateType
+      }).then(res => {
+        if (res.code === 200) {
+          state.list = res.data || []
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
       })
     }
     watch(() => state.dateType, () => {