乡村相册 考勤配置

src/saas/AppCountryAlbum/AttendanceFlexibleTime.vue

@@ -6,20 +6,24 @@
           <label>*</label>
           <span>最早允许打卡时间</span>
         </div>
-        <div class="right">
-          <span>09:00</span>
-          <image src="./images/right.png" />
-        </div>
+        <picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'workInFrom')">
+          <div class="right">
+            <span>{{ form.workInFrom || '请设置时间' }}</span>
+            <image src="./images/right.png" />
+          </div>
+        </picker>
       </div>
       <div class="form-group__item">
         <div class="left">
           <label>*</label>
           <span>最晚允许打卡时间</span>
         </div>
-        <div class="right">
-          <span>18:00</span>
-          <image src="./images/right.png" />
-        </div>
+        <picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'workOutEnd')">
+          <div class="right">
+            <span>{{ form.workOutEnd || '请设置时间' }}</span>
+            <image src="./images/right.png" />
+          </div>
+        </picker>
       </div>
     </div>
     <div class="form-group">
@@ -29,28 +33,32 @@
           <p>若开启休息时间，则休息时间不计入工作时长</p>
         </div>
         <div class="right">
-          <switch color="#1088F9" checked />
+          <switch color="#1088F9" :checked="form.openRestTime === '1'" @change="onOpenRestChange" />
         </div>
       </div>
-      <div class="form-group__item">
+      <div class="form-group__item" v-if="form.openRestTime === '1'">
         <div class="left">
           <label>*</label>
           <span>休息开始</span>
         </div>
-        <div class="right">
-          <span>请设置时间</span>
-          <image src="./images/right.png" />
-        </div>
+        <picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'restTimeBegin')">
+          <div class="right">
+            <span>{{ form.restTimeBegin || '请设置时间' }}</span>
+            <image src="./images/right.png" />
+          </div>
+        </picker>
       </div>
-      <div class="form-group__item">
+      <div class="form-group__item" v-if="form.openRestTime === '1'">
         <div class="left">
           <label>*</label>
           <span>休息结束</span>
         </div>
-        <div class="right">
-          <span>请设置时间</span>
-          <image src="./images/right.png" />
-        </div>
+        <picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'restTimeEnd')">
+          <div class="right">
+            <span>{{ form.restTimeEnd || '请设置时间' }}</span>
+            <image src="./images/right.png" />
+          </div>
+        </picker>
       </div>
     </div>
     <div class="form-group">
@@ -64,10 +72,12 @@
           <label>*</label>
           <span>时长要求</span>
         </div>
-        <div class="right">
-          <span>8小时</span>
-          <image src="./images/right.png" />
-        </div>
+        <picker :range="hours" mode="selector" @change="e => form.workHoursLimit = hours[e.detail.value]">
+          <div class="right">
+            <span>{{ form.workHoursLimit ? form.workHoursLimit + '小时' : '请选择工作时长' }}</span>
+            <image src="./images/right.png" />
+          </div>
+        </picker>
       </div>
     </div>
     <div class="form-group">
@@ -77,28 +87,28 @@
           <p>若开启，不在固定范围内打卡将不计入考勤</p>
         </div>
         <div class="right">
-          <switch color="#1088F9" checked />
+          <switch color="#1088F9" :checked="form.openWorkPoint === '1'" @change="onWorkPointChange" />
         </div>
       </div>
-      <div class="form-group__item form-group__checked">
+      <div class="form-group__item form-group__checked" v-if="form.openWorkPoint === '1' && address.address">
         <div class="left">
-          <h2>绿地蓝海A座</h2>
-          <p>湖北省武汉市武昌区和平大道750号</p>
-          <p style="margin-top: 8px;">允许打卡范围200米</p>
+          <h2>{{ address.title }}</h2>
+          <p>{{ address.address }}</p>
+          <p style="margin-top: 8px;">允许打卡范围{{ address.distance }}米</p>
         </div>
-        <div class="right">
+        <div class="right" @click="address = {}">
           <image :src="`${$cdn}askform/sc1.png`" />
           <span>删除</span>
         </div>
       </div>
-      <div class="form-group__item form-group__checked">
-        <div class="left left-add">
+      <div class="form-group__item form-group__checked" v-if="form.openWorkPoint === '1' && !address.address">
+        <div class="left left-add" @click="linkTo('/saas/AppCountryAlbum/ChooseAddess')">
           <div class="add-btn"></div>
           <h2 style="color: #1088F9;">添加打卡点</h2>
         </div>
       </div>
     </div>
-    <div class="form-btn" hover-class="text-hover">保存</div>
+    <div class="form-btn" hover-class="text-hover" @click="save">保存</div>
   </div>
 </template>
 <script>
@@ -106,18 +116,124 @@
     name: 'AttendanceFlexibleTime',
 
     appName: '灵活时间打卡设置',
-
     data () {
       return {
-
+        hours: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
+        form: {
+          openRestTime: '1',
+          openWorkPoint: '0',
+          workHoursLimit: '',
+          restTimeBegin: '',
+          restTimeEnd: '',
+          workInFrom: '',
+          workOutEnd: ''
+        },
+        address: {},
+        id: ''
       }
     },
 
-    onLoad () {
+    onLoad (query) {
+      uni.$on('address', e => {
+        this.address = e
+      })
 
+      if (query.id) {
+        this.id = query.id
+
+        this.getInfo(query.id)
+      }
+    },
+
+    onUnload () {
+      uni.$off('address')
     },
 
     methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
+
+      getInfo (id) {
+        this.$http.post(`/api/appattendanceconfig/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.address = JSON.parse(res.data.workPointDesc)
+            this.form = {
+              ...this.form,
+              ...res.data
+            }
+          }
+        })
+      },
+
+      onTimeChange (e, type) {
+        this.form[type] = e.detail.value + ':00'
+      },
+
+      onOpenRestChange (e) {
+        this.form.restTimeBegin = ''
+        this.form.restTimeEnd = ''
+        this.form.openRestTime = e.detail.value ? '1' : '0'
+      },
+
+      onWorkPointChange (e) {
+        this.form.openWorkPoint = e.detail.value ? '1' : '0'
+      },
+
+      save () {
+        if (!this.form.workInFrom) {
+          return this.$u.toast('请选择最早打卡时间')
+        }
+
+        if (!this.form.workOutEnd) {
+          return this.$u.toast('请选择最晚打卡时间')
+        }
+
+        if (this.form.openRestTime === '1') {
+          if (!this.form.restTimeBegin) {
+            return this.$u.toast('请选择休息时间')
+          }
+
+          if (!this.form.restTimeEnd) {
+            return this.$u.toast('请选择休息结束时间')
+          }
+        }
+
+        if (!this.form.workHoursLimit) {
+          return this.$u.toast('请选择工作时长')
+        }
+
+        if (this.form.openWorkPoint === '1' && !this.address.address) {
+          return this.$u.toast('请选择固定打卡点')
+        }
+
+        this.$loading()
+        this.$http.post('/api/appattendanceconfig/addOrUpdate', {
+          openRestTime: this.form.openRestTime,
+          workHoursLimit: this.form.workHoursLimit,
+          openWorkPoint: this.form.openWorkPoint,
+          workInFrom: `${this.form.workInFrom}`,
+          workOutEnd: `${this.form.workOutEnd}`,
+          restTimeBegin: `${this.form.restTimeBegin}`,
+          restTimeEnd:  `${this.form.restTimeEnd}`,
+          type: 1,
+          workPointDesc: JSON.stringify(this.address),
+          id: this.id || ''
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast('提交成功')
+
+            setTimeout(() => {
+              uni.$emit('update')
+              uni.navigateBack({
+                delta: 1
+              })
+            }, 500)
+          }
+        })
+      }
     }
   }
 </script>
@@ -167,12 +283,19 @@
           padding: 32px 0;
 
           .left {
+            flex: 1;
+            margin-right: 10px;
+
             h2 {
               margin-bottom: 12px;
               color: #333333;
               font-size: 32px;
             }
 
+            p {
+              line-height: 1.2;
+            }
+
             &.left-add {
               display: flex;
               align-items: center;
@@ -243,4 +366,4 @@
       }
     }
   }
-</style>
+</style>