From e74c7f21a3a9a64d2a4a311bd42d38db4daa7244 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 05 九月 2024 10:50:10 +0800
Subject: [PATCH] 1.考勤打卡页面递交

---
 src/views/attendanceModule/attendanceClockIn.vue |  167 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 162 insertions(+), 5 deletions(-)

diff --git a/src/views/attendanceModule/attendanceClockIn.vue b/src/views/attendanceModule/attendanceClockIn.vue
index 0a6c083..4b95cf3 100644
--- a/src/views/attendanceModule/attendanceClockIn.vue
+++ b/src/views/attendanceModule/attendanceClockIn.vue
@@ -1,15 +1,172 @@
 <template>
   <div>
-    123
+    <div class="body" :style="{height:mainHeight+'px'}">
+
+      <div class="bodyTopFormGroup" style="margin-top: 10px;height: 50px;padding:5px 0;">
+        <div class="elForm" style="align-items: center;padding:5px 0;">
+          <div style="font-weight: bolder;font-size: 14px;margin: 0 15px;color: #606266">
+            宸ュ彿浜岀淮鐮�
+          </div>
+          <el-input
+            v-model="form.usercode"
+            :name="'usercodeInput'"
+            placeholder="璇锋壂鎻忔垨杈撳叆宸ュ彿浜岀淮鐮�"
+            style="width: 300px"
+            @change="enterNative"
+          />
+        </div>
+      </div>
+
+      <div class="bodyTopButtonGroup" style="margin-top: 2px;height: 100px;align-items: center;">
+        <el-form
+          ref="form"
+          :model="form"
+          label-width="80px"
+          inline
+          style="display: flex;width: 50%;"
+        >
+          <div class="elForm">
+            <el-form-item label="鍛樺伐缂栧彿:" style=" display: flex;">
+              <div style="width: 200px;">{{ form2.usercode }}</div>
+            </el-form-item>
+            <el-form-item label="鍛樺伐濮撳悕:" style=" display: flex;">
+              <div style="width: 200px;">{{ form2.username }}</div>
+            </el-form-item>
+            <el-form-item label="鎵�灞炶溅闂�:" style=" display: flex;">
+              <div style="width: 200px;">{{ form2.torg_name }}</div>
+            </el-form-item>
+            <el-form-item label="鎵�灞炲矖浣�:" style=" display: flex;">
+              <div style="width: 200px;">{{ form2.postname }}</div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="elTableDiv">
+        <el-table
+          ref="tableDataRef"
+          class="tableFixed"
+          :data="tableData"
+          :height="tableHeight+'px'"
+          border
+          row-class-name="custom-row"
+          :style="{width: 100+'%',height:tableHeight+'px',}"
+          highlight-current-row
+          :header-cell-style="this.$headerCellStyle"
+          :cell-style="this.$cellStyle"
+        >
+          <el-table-column
+            type="index"
+            width="50"
+            fixed
+            label="搴忓彿"
+          />
+          <el-table-column
+            prop="wkshop_name"
+            label="鎵�灞炶溅闂�"
+          />
+          <el-table-column
+            prop="username"
+            label="鎵撳崱浜哄憳"
+          />
+          <el-table-column
+            prop="createdate"
+            label="鎵撳崱鏃堕棿"
+          />
+          <el-table-column
+            prop="workprice"
+            label="宸ヤ环(鍏�/灏忔椂)"
+          />
+        </el-table>
+      </div>
+      <div
+        class="bodyTopButtonGroup"
+        style="margin-top: 0;height: 60px;display:flex;align-items: center;justify-content: center"
+      >
+        <el-button
+          v-waves
+          :disabled="isDisabled"
+          type="primary"
+          style="width: 150px;height: 40px;"
+          icon="el-icon-alarm-clock"
+          @click="clockIn"
+        >鑰冨嫟鎵撳崱</el-button>
+      </div>
+
+    </div>
+
   </div>
 </template>
 
 <script>
+import elDragDialog from '@/directive/el-drag-dialog'
+import waves from '@/directive/waves'
+import { AttendanceSave, AttendanceSearch } from '@/api/attendanceModule'
+import $ from 'jquery'
+
 export default {
-  name: 'AttendanceClockIn'
+  name: 'AttendanceClockIn',
+  directives: { elDragDialog, waves },
+  data() {
+    return {
+      mainHeight: 0,
+      tableHeight: 0,
+      form: {
+        usercode: ''
+      },
+      form2: {
+
+      },
+      tableData: [],
+      isDisabled: true
+    }
+  },
+  created() {
+  },
+  mounted() {
+    window.addEventListener('resize', this.getHeight)
+    this.getHeight()
+    this.inputFocus()
+  },
+  methods: {
+    inputFocus() {
+      // this.$nextTick(() => {
+      $('input[name=\'usercodeInput\']')[0].focus()
+      // })
+    },
+    async enterNative(val) {
+      const { data: res } = await AttendanceSearch({ usercode: val })
+      this.form.usercode = ''
+      if (res.userdate.length === 0 && res.checkcrd.length === 0) {
+        this.$message.info('鏃犳鍛樺伐鍙凤紒')
+        this.form2 = {}
+        this.tableData = []
+        this.isDisabled = true
+      } else {
+        this.form2 = res.userdate[0]
+        this.tableData = res.checkcrd
+        this.isDisabled = false
+      }
+    },
+    async clockIn() {
+      const data = {
+        'wkshop_code': this.form2.storg_code,
+        'user_code': this.form2.usercode
+      }
+      const res = await AttendanceSave(data)
+      if (res.code === '200') {
+        await this.enterNative(this.form2.usercode)
+      }
+    },
+    // 鑾峰彇椤甸潰楂樺害
+    getHeight() {
+      this.$nextTick(() => {
+        this.mainHeight = window.innerHeight - 85
+        this.tableHeight = this.mainHeight - 250
+        this.$refs.tableDataRef.doLayout()
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
-
-</style>

--
Gitblit v1.9.3