考勤打卡UI界面

src/DTO/attendance.ts

@@ -17,6 +17,7 @@ note?:备注
 /* 
 state:今日考勤状态 '异常','正常','早退'
 */
+const state:string = '异常'
 
 const punchList:Array<Punch>=[
   {
@@ -36,7 +37,8 @@ const punchList:Array<Punch>=[
 
 export{
   Punch,
-  punchList
+  punchList,
+  state
 }
 
 

src/DTO/index.ts

@@ -17,7 +17,7 @@
 
 import { contacts, Person, flatContacts } from './contacts'
 import { List, Info, details } from './request'
-import { punchList,Punch } from './attendance'
+import { punchList,Punch,state } from './attendance'
 
 interface Member {
   parentId?: number,
@@ -105,5 +105,6 @@ export {
   Info, 
   details,
   Punch,
-  punchList
+  punchList,
+  state
 }
\ No newline at end of file

src/views/attendance/attendance.vue

@@ -15,9 +15,9 @@
           <p class="team-name text-base mt-3">{{teamname}}</p>
       </div>    
       <!-- 考勤状态 -->
-      <p  :class="{normal:(state=='正常')}"
+      <p  :class="{normal:(current=='正常')}"
           class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
-         今日考勤{{state}}
+         今日考勤{{current}}
       </p>
       <!-- 打卡 -->
       <div :last="last">
@@ -44,15 +44,22 @@
         </div>
       </van-dialog>
       <!-- 编辑备注弹窗 -->
-      <van-dialog v-model="showNote" title="编辑备注" confirm-button-text="提交" :before-close="onBeforeClose">
-        <div>
-          <p class=" text-right text-gray-400 text-sm">{{value.length}}/{{min}}-{{max}}</p>
-          <textarea type="text" v-model="value" :placeholder="hint"
-                    class=" w-72 h-56 bg-gray-100 mx-auto mt-1 block box-border text-base text-text-primary"
-                    @input="handleInput">
+      <van-dialog v-model="show"  title="编辑备注" confirm-button-text="提交" :before-close="onBeforeClose" >
+        <p class=" text-right text-gray-400 text-sm">{{value.length}}/{{min}}-{{max}}</p>
+        <div class=" relative">
+          <textarea type="text" v-model="value" 
+                    class=" w-72 h-56 bg-gray-100 mx-auto mt-1 pl-2 pt-2 block box-border text-base text-text-primary"
+                    @click="showhint=false" @input="handleInput">
           </textarea>
+          <!-- placeholder内容 -->
+          <div class="hint absolute top-2 left-2 pointer-events-none text-gray-400 text-base" v-show="showhint">
+            <p>请填写</p>
+            <p>1.工作计划/完成情况</p>
+            <p>2.对接人及周期</p>
+            <p>3.遇到的问题</p>
+          </div>
         </div>
-      </van-dialog>
+    </van-dialog>
     </main-page>  
   </div>
 </template>
@@ -60,31 +67,23 @@
 
 <script lang="ts">
 import Vue,{ PropType } from 'vue';
-import { punchList,Punch } from '@/DTO'
+import { punchList,Punch,state } from '@/DTO'
 import { Toast } from 'vant';
 
 export default Vue.extend({
   name:'attendance',
   components:{
     'main-page': () => import('@/layout/main-page.vue'),
-    'punch': () => import('@/views/attendance/components/punch.vue')
+    'punch': () => import('@/views/attendance/components/punch.vue'),
   },
   props:{
     punch:{
       type:Object as PropType<Punch>
     },
-    state:{
-      type:String,
-      default:'正常'
-    },
     last:{
       type:Boolean,
       default:false
     },
-    hint:{
-      type:String,
-      default:'请填写\n1.工作计划/完成情况\n2.对接人及周期\n3.遇到的问题'
-    },
     min:{
       type:Number,
       default:20
@@ -92,23 +91,30 @@ export default Vue.extend({
     max:{
       type:Number,
       default:500
+    },
+    showNote:{
+      type:Boolean,
+      default:false
     }
   },
   data(){
     let list:Array<Punch>=[]
     list = punchList
+    let current:string = state
     return{
       list,
       name:'姓名',
       memberid:43,
       teamname:'杭州复杂美科技有限公司',
       showPunch:false,
-      showNote:false,
       time:'',
       location:'',
+      checkin:true,
+      current,
+      showhint:true,
       value:'',
       close:false,
-      checkin:true
+      show:false
     }
   },
   methods:{
@@ -126,7 +132,7 @@ export default Vue.extend({
       }
     },
     editNote(isShow:boolean){
-      this.showNote = isShow
+      this.show = isShow
     },
     confirm(checkin:boolean){
       let type:string=''
@@ -140,16 +146,17 @@ export default Vue.extend({
         position:'bottom'
       })
     },
-    handleInput() { 
-      // this.value = ''
-      if (this.max > 0 && this.value.length >= this.max) {
+    handleInput(e:InputEvent) {
+      this.showhint = false
+      let size = (e.target as HTMLInputElement).value.length
+      if (this.max > 0 && size >= this.max) {
         this.value = this.value.slice(0,this.max)
-      } else if( this.value.length>=this.min) {
+      } else if( size >= this.min) {
         this.close = true
       } 
-      else if( this.value.length == 0){
-        this.value='请填写\n1.工作计划/完成情况\n2.对接人及周期\n3.遇到的问题'
-      }
+      else if( size == 0){
+        this.showhint = true
+      } 
     },
     onBeforeClose(action:string,done:Function){
       if(action==='confirm'){
@@ -172,18 +179,4 @@ export default Vue.extend({
   background-color:#E8F3FF;
   color:#32B2F7;
 }
-::-webkit-input-placeholder {
-color: transparent;
-
-}
-
-::-webkit-input-placeholder:before {
-display: block;
-
-color: #999;
-
-content: "第一行请输入提示内容 \A 第二行请输入提示内容";
-
-}
-
 </style>
\ No newline at end of file

tailwind.config.js

@@ -24,14 +24,12 @@ module.exports = {
         'linear-b': '#066BA2',
         // 按钮
         'button-disabled': '#C8D3DE',
-<<<<<<< HEAD
         // 员工信息背景色
         "bg-deep":'#0D73AD',
         // 异常字体颜色
         "text-warning":'#CF4646',
         // 异常背景颜色
         "bg-warning":'#FAEEEE',
-=======
         // 标签
         'tag-primary': '#32B2F7',
         'tag-primary-lighter': '#EAF6FF',
@@ -45,7 +43,6 @@ module.exports = {
         'tag-red-lighter': '#FAEEEE',
         'tag-purple': '#9F82E5',
         'tag-purple-lighter': '#F1ECFD',
->>>>>>> origin/main
       },
       spacing: {