合并

src/school/attendance-rules/component/range.tsx

@@ -63,11 +63,37 @@ export default defineComponent({
 
     // 修改
     const onSubmit = async () => {
+      if (!forms['scope_of_attendance']) {
+        showToast('请输入考勤定位范围')
+        return
+      }
+      if (!forms['sign_in_attendance']) {
+        showToast('请输入签到扣减金额')
+        return
+      }
+      if (forms['sign_in_attendance'] > 100 && forms['sign_in_attendance_type'] === 'PERCENTAGE') {
+        showToast('签到扣减金额输入有误')
+        return
+      }
+
+      if (!forms['sign_out_attendance']) {
+        showToast('请输入签退扣减金额')
+        return
+      }
+      if (
+        forms['sign_out_attendance'] > 100 &&
+        forms['sign_out_attendance_type'] === 'PERCENTAGE'
+      ) {
+        showToast('签退扣减金额输入有误')
+        return
+      }
       try {
         const submitData = dataCompare(beforeData.value, forms)
-        await request.post('/api-school/schoolParamConfig/update', {
-          data: { configs: [...submitData], group: 'ATTENDANCE' }
-        })
+        if (submitData.length > 0) {
+          await request.post('/api-school/schoolParamConfig/update', {
+            data: { configs: [...submitData], group: 'ATTENDANCE' }
+          })
+        }
         showToast('保存成功')
       } catch {
         //
@@ -79,7 +105,7 @@ export default defineComponent({
     })
 
     const onFormatterInt = (val: any) => {
-      if (val && val >= 1) {
+      if (val && val >= 0) {
         return verifiyNumberInteger(val)
       } else {
         return ''
@@ -101,7 +127,7 @@ export default defineComponent({
                     type="number"
                     v-model={forms['scope_of_attendance']}
                   >
-                    {{ extra: () => <span>米</span> }}
+                    {{ extra: () => <span class={styles.ruleExtra}>米</span> }}
                   </Field>
                   以内
                 </div>
@@ -113,7 +139,7 @@ export default defineComponent({
           <Cell>
             {{
               title: () => (
-                <div class={[styles.ruleTitle, styles.smallRuleTitle]}>
+                <div class={[styles.ruleTitle]}>
                   <span class={styles.red}>签到</span>地点在考勤定位范围之外时，扣减当日训练补助
                 </div>
               )
@@ -162,7 +188,7 @@ export default defineComponent({
           <Cell>
             {{
               title: () => (
-                <div class={[styles.ruleTitle, styles.smallRuleTitle]}>
+                <div class={[styles.ruleTitle]}>
                   <span class={styles.red}>签退</span>地点在考勤定位范围之外时，扣减当日训练补助
                 </div>
               )

src/school/attendance-rules/component/sigin-in-rule.tsx

@@ -0,0 +1,452 @@
+import OSticky from '@/components/o-sticky'
+import { configUnit } from '@/constant'
+import {
+  addFormMinute,
+  addFormMinuteAddS,
+  reduceFormMinute,
+  reduceFormMinuteAddS
+} from '@/helpers/date'
+import request from '@/helpers/request'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import { Button, Cell, CellGroup, Field, Popover, showToast } from 'vant'
+import { defineComponent, onMounted, reactive, shallowRef, Teleport } from 'vue'
+import styles from '../index.module.less'
+
+export const actions = [
+  {
+    text: '元',
+    value: 'MONEY'
+  },
+  {
+    text: '%',
+    value: 'PERCENTAGE'
+  }
+]
+
+export default defineComponent({
+  name: 'sigin-in-rule',
+  setup() {
+    const statusList = reactive({
+      show1: false,
+      show2: false
+    })
+    const beforeData: any = shallowRef({}) // 储存原始数据
+    const forms = reactive({} as any)
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get('/api-school/schoolParamConfig/queryByParamNameList', {
+          params: {
+            // schoolId: '',
+            paramNames:
+              'normal_sign_in_start,normal_sign_in_end,abnormal_sign_in,abnormal_sign_in_fee,abnormal_sign_in_fee_type,late_sign_in,late_sign_in_fee,late_sign_in_fee_type,absence_sign_in,absence_sign_in_fee,absence_sign_in_fee_type,not_sign_in_fee,not_sign_in_fee_type'
+          }
+        })
+        console.log(data, 'data')
+        const rows = data || []
+        rows.forEach((row: any) => {
+          forms[row.paramName] = row.paramValue
+        })
+        beforeData.value = { ...forms }
+      } catch {
+        //
+      }
+    }
+
+    // 数组进行对比
+    const dataCompare = (beforeData: any, afterData: any) => {
+      const changeDate: any = []
+      for (const key in beforeData) {
+        if (beforeData[key] != afterData[key]) {
+          changeDate.push({
+            paramName: key,
+            paramValue: afterData[key]
+          })
+        }
+      }
+      return changeDate || []
+    }
+
+    // 修改
+    const onSubmit = async () => {
+      if (!forms['normal_sign_in_start']) {
+        showToast('请输入签到时间范围')
+        return
+      }
+      if (!forms['normal_sign_in_end']) {
+        showToast('请输入正常签到时间')
+        return
+      }
+
+      if (!forms['abnormal_sign_in_fee']) {
+        showToast('请输入异常签到扣减金额')
+        return
+      }
+      if (
+        forms['abnormal_sign_in_fee'] > 100 &&
+        forms['abnormal_sign_in_fee_type'] === 'PERCENTAGE'
+      ) {
+        showToast('异常签到扣减金额输入有误')
+        return
+      }
+
+      if (!forms['absence_sign_in']) {
+        showToast('请输入迟到时间')
+        return
+      }
+      if (!forms['late_sign_in_fee']) {
+        showToast('请输入迟到扣减金额')
+        return
+      }
+      if (forms['late_sign_in_fee'] > 100 && forms['late_sign_in_fee_type'] === 'PERCENTAGE') {
+        showToast('迟到扣减金额输入有误')
+        return
+      }
+
+      if (!forms['absence_sign_in_fee']) {
+        showToast('请输入旷课扣减金额')
+        return
+      }
+      if (
+        forms['absence_sign_in_fee'] > 100 &&
+        forms['absence_sign_in_fee_type'] === 'PERCENTAGE'
+      ) {
+        showToast('旷课扣减金额输入有误')
+        return
+      }
+
+      if (!forms['not_sign_in_fee']) {
+        showToast('请输入未签到扣减金额')
+        return
+      }
+      if (forms['not_sign_in_fee'] > 100 && forms['not_sign_in_fee_type'] === 'PERCENTAGE') {
+        showToast('未签到扣减金额输入有误')
+        return
+      }
+      try {
+        const submitData = dataCompare(beforeData.value, forms)
+        if (submitData.length > 0) {
+          await request.post('/api-school/schoolParamConfig/update', {
+            data: { configs: [...submitData], group: 'ATTENDANCE' }
+          })
+        }
+        showToast('保存成功')
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getDetails()
+    })
+
+    const onFormatterInt = (val: any) => {
+      if (val && val >= 0) {
+        return verifiyNumberInteger(val)
+      } else {
+        return ''
+      }
+    }
+    return () => (
+      <div class={styles.ruleContainer}>
+        <CellGroup inset>
+          <Cell>{{ title: () => <div class={styles.ruleTitle}>签到时间范围</div> }}</Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={styles.ruleContent}>
+                  <div class={styles.ruleRange}>
+                    课程开始前多少分钟可以签到：
+                    <Field
+                      class={[styles.field, styles['field-w102']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['normal_sign_in_start']}
+                    >
+                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
+                    </Field>
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>开始的课程为例,最早
+                    <span>{reduceFormMinute('12:00:00', forms['normal_sign_in_start'])}</span>
+                    可以进行签到
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>{{ title: () => <div class={styles.ruleTitle}>正常签到</div> }}</Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={styles.ruleContent}>
+                  <div class={styles.ruleRange}>
+                    签到时间早于课程开始时间：
+                    <Field
+                      class={[styles.field, styles['field-w102']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['normal_sign_in_end']}
+                    >
+                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
+                    </Field>
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>开始的课程为例,在
+                    <span>
+                      {reduceFormMinute('12:00:00', forms['normal_sign_in_start'])}~
+                      {reduceFormMinute('12:00:00', forms['normal_sign_in_end'])}
+                    </span>
+                    时间范围内签到属于<span>正常签到</span>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>异常签到</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  <div class={styles.ruleDesc}>
+                    签到时间晚于课程开始时间<span>前{forms['abnormal_sign_in'] || 0}分钟</span>{' '}
+                    <br />
+                    早于课程开始时间时，扣减当日训练补助
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>开始的课程为例,在
+                    <span>
+                      {reduceFormMinuteAddS('12:00:00', forms['abnormal_sign_in'])}~12:00:00
+                    </span>
+                    时间范围内签到属于<span>异常签到</span>
+                  </div>
+                  <div style={{ paddingTop: '20px' }}>
+                    单次扣减金额：
+                    <Field
+                      class={[styles.field, styles['field-m'], styles['field-w136']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['abnormal_sign_in_fee']}
+                    >
+                      {{
+                        extra: () => (
+                          <Popover
+                            v-model:show={statusList.show1}
+                            class={styles.popover}
+                            actions={actions}
+                            onSelect={(val: any) => {
+                              forms['abnormal_sign_in_fee_type'] = val.value
+                            }}
+                          >
+                            {{
+                              reference: () => (
+                                <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                  {configUnit[forms['abnormal_sign_in_fee_type']]}
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        )
+                      }}
+                    </Field>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>迟到</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  <div class={styles.ruleRange}>
+                    签到时间晚于课程开始时间：
+                    <Field
+                      class={[styles.field, styles['field-w102']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['absence_sign_in']}
+                    >
+                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
+                    </Field>
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>开始的课程为例,在
+                    <span>
+                      {addFormMinuteAddS('12:00:00', 0)} ~{' '}
+                      {addFormMinute('12:00:00', forms['late_sign_in'])}
+                    </span>
+                    时间范围内签到属于<span>迟到</span>
+                  </div>
+                  <div style={{ paddingTop: '20px' }}>
+                    单次扣减金额：
+                    <Field
+                      class={[styles.field, styles['field-m'], styles['field-w136']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['late_sign_in_fee']}
+                    >
+                      {{
+                        extra: () => (
+                          <Popover
+                            v-model:show={statusList.show1}
+                            class={styles.popover}
+                            actions={actions}
+                            onSelect={(val: any) => {
+                              forms['late_sign_in_fee_type'] = val.value
+                            }}
+                          >
+                            {{
+                              reference: () => (
+                                <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                  {configUnit[forms['late_sign_in_fee_type']]}
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        )
+                      }}
+                    </Field>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>旷课</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  <div class={styles.ruleDesc}>
+                    签到时间晚于课程开始时间<span>{forms['absence_sign_in'] || 0}分钟</span> <br />
+                    扣减当日训练补助
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>开始的课程为例,在
+                    <span>{addFormMinute('12:00:00', forms['absence_sign_in'])}</span>
+                    后签到(含{addFormMinute('12:00:00', forms['absence_sign_in'])}) 属于
+                    <span>旷课</span>
+                  </div>
+                  <div style={{ paddingTop: '20px' }}>
+                    单次扣减金额：
+                    <Field
+                      class={[styles.field, styles['field-m'], styles['field-w136']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['absence_sign_in_fee']}
+                    >
+                      {{
+                        extra: () => (
+                          <Popover
+                            v-model:show={statusList.show1}
+                            class={styles.popover}
+                            actions={actions}
+                            onSelect={(val: any) => {
+                              forms['absence_sign_in_fee_type'] = val.value
+                            }}
+                          >
+                            {{
+                              reference: () => (
+                                <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                  {configUnit[forms['absence_sign_in_fee_type']]}
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        )
+                      }}
+                    </Field>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>未签到</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  单次扣减金额：
+                  <Field
+                    class={[styles.field, styles['field-m'], styles['field-w136']]}
+                    autocomplete="off"
+                    formatter={onFormatterInt}
+                    type="number"
+                    v-model={forms['not_sign_in_fee']}
+                  >
+                    {{
+                      extra: () => (
+                        <Popover
+                          v-model:show={statusList.show1}
+                          class={styles.popover}
+                          actions={actions}
+                          onSelect={(val: any) => {
+                            forms['not_sign_in_fee_type'] = val.value
+                          }}
+                        >
+                          {{
+                            reference: () => (
+                              <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                {configUnit[forms['not_sign_in_fee_type']]}
+                              </div>
+                            )
+                          }}
+                        </Popover>
+                      )
+                    }}
+                  </Field>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <Teleport to={'#app'}>
+          <OSticky position="bottom">
+            <div class={'btnGroup'}>
+              <Button type="primary" round block onClick={onSubmit}>
+                保存设置
+              </Button>
+            </div>
+          </OSticky>
+        </Teleport>
+      </div>
+    )
+  }
+})

src/school/attendance-rules/component/sigin-out-rule.tsx

@@ -0,0 +1,337 @@
+import OSticky from '@/components/o-sticky'
+import { configUnit } from '@/constant'
+import request from '@/helpers/request'
+import {
+  addFormMinute,
+  addFormMinuteAddS,
+  reduceFormMinute,
+  reduceFormMinuteAddS,
+  reduceFormMinuteMS
+} from '@/helpers/date'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import { Button, Cell, CellGroup, Field, Popover, showToast } from 'vant'
+import { defineComponent, onMounted, reactive, shallowRef, Teleport } from 'vue'
+import styles from '../index.module.less'
+
+export const actions = [
+  {
+    text: '元',
+    value: 'MONEY'
+  },
+  {
+    text: '%',
+    value: 'PERCENTAGE'
+  }
+]
+
+export default defineComponent({
+  name: 'sigin-out-rule',
+  setup() {
+    const statusList = reactive({
+      show1: false,
+      show2: false
+    })
+    const beforeData: any = shallowRef({}) // 储存原始数据
+    const forms = reactive({} as any)
+
+    const getDetails = async () => {
+      try {
+        const { data } = await request.get('/api-school/schoolParamConfig/queryByParamNameList', {
+          params: {
+            // schoolId: '',
+            paramNames:
+              'normal_sign_out,abnormal_sign_out,abnormal_sign_out_fee,abnormal_sign_out_fee_type,premise_sign_out,premise_sign_out_fee,premise_sign_out_fee_type,not_sign_out_fee,not_sign_out_fee_type'
+          }
+        })
+        console.log(data, 'data')
+        const rows = data || []
+        rows.forEach((row: any) => {
+          forms[row.paramName] = row.paramValue
+        })
+        beforeData.value = { ...forms }
+      } catch {
+        //
+      }
+    }
+
+    // 数组进行对比
+    const dataCompare = (beforeData: any, afterData: any) => {
+      const changeDate: any = []
+      for (const key in beforeData) {
+        if (beforeData[key] != afterData[key]) {
+          changeDate.push({
+            paramName: key,
+            paramValue: afterData[key]
+          })
+        }
+      }
+      return changeDate || []
+    }
+
+    // 修改
+    const onSubmit = async () => {
+      if (!forms['normal_sign_out']) {
+        showToast('请输入正常签退时间')
+        return
+      }
+
+      if (!forms['premise_sign_out']) {
+        showToast('请输入异常签退时间')
+        return
+      }
+      if (!forms['abnormal_sign_out_fee']) {
+        showToast('请输入异常签退扣减金额')
+        return
+      }
+      if (
+        forms['abnormal_sign_out_fee'] > 100 &&
+        forms['sign_in_attendance_type'] === 'PERCENTAGE'
+      ) {
+        showToast('异常签退扣减金额输入有误')
+        return
+      }
+
+      if (!forms['sign_out_attendance']) {
+        showToast('请输入签退扣减金额')
+        return
+      }
+      if (
+        forms['sign_out_attendance'] > 100 &&
+        forms['sign_out_attendance_type'] === 'PERCENTAGE'
+      ) {
+        showToast('签退扣减金额输入有误')
+        return
+      }
+      try {
+        const submitData = dataCompare(beforeData.value, forms)
+        if (submitData.length > 0) {
+          await request.post('/api-school/schoolParamConfig/update', {
+            data: { configs: [...submitData], group: 'ATTENDANCE' }
+          })
+        }
+        showToast('保存成功')
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getDetails()
+    })
+
+    const onFormatterInt = (val: any) => {
+      if (val && val >= 0) {
+        return verifiyNumberInteger(val)
+      } else {
+        return ''
+      }
+    }
+    return () => (
+      <div class={styles.ruleContainer}>
+        <CellGroup inset>
+          <Cell>{{ title: () => <div class={styles.ruleTitle}>正常签退</div> }}</Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={styles.ruleContent}>
+                  <div class={styles.ruleRange}>
+                    签退时间不得晚于课程结束后：
+                    <Field
+                      class={[styles.field, styles['field-w102']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['normal_sign_out']}
+                    >
+                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
+                    </Field>
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>结束的课程为例, 在
+                    <span>12:00:00～{addFormMinute('12:00:00', forms['normal_sign_out'])}</span>
+                    时间范围内签退属于<span>正常签退</span>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>{{ title: () => <div class={styles.ruleTitle}>异常签退</div> }}</Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={styles.ruleContent}>
+                  <div class={styles.ruleRange}>
+                    签退时间早于课程结束时间：
+                    <Field
+                      class={[styles.field, styles['field-w102']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['premise_sign_out']}
+                    >
+                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
+                    </Field>
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>结束的课程为例, 在
+                    <span>
+                      {reduceFormMinute('12:00:00', forms['abnormal_sign_out'])}~
+                      {reduceFormMinuteMS('12:00:00', 0)}
+                    </span>
+                    时间范围内签退属于<span>异常签退</span>
+                  </div>
+                  <div style={{ paddingTop: '20px' }}>
+                    单次扣减金额：
+                    <Field
+                      class={[styles.field, styles['field-m'], styles['field-w136']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['abnormal_sign_out_fee']}
+                    >
+                      {{
+                        extra: () => (
+                          <Popover
+                            v-model:show={statusList.show1}
+                            class={styles.popover}
+                            actions={actions}
+                            onSelect={(val: any) => {
+                              forms['abnormal_sign_out_fee_type'] = val.value
+                            }}
+                          >
+                            {{
+                              reference: () => (
+                                <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                  {configUnit[forms['abnormal_sign_out_fee_type']]}
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        )
+                      }}
+                    </Field>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>早退</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  <div class={styles.ruleDesc}>
+                    签退时间早于课程结束时间<span>{forms['premise_sign_out'] || 0}分钟</span> <br />
+                    扣减当日训练补助
+                  </div>
+                  <div class={styles.ruleTips}>
+                    以<span>12:00:00</span>结束的课程为例,在
+                    <span>{reduceFormMinute('12:00:00', forms['premise_sign_out'])}</span>
+                    前签退 (含{reduceFormMinute('12:00:00', forms['premise_sign_out'])}) 属于
+                    <span>早退</span>
+                  </div>
+                  <div style={{ paddingTop: '20px' }}>
+                    单次扣减金额：
+                    <Field
+                      class={[styles.field, styles['field-m'], styles['field-w136']]}
+                      autocomplete="off"
+                      formatter={onFormatterInt}
+                      type="number"
+                      v-model={forms['premise_sign_out_fee']}
+                    >
+                      {{
+                        extra: () => (
+                          <Popover
+                            v-model:show={statusList.show1}
+                            class={styles.popover}
+                            actions={actions}
+                            onSelect={(val: any) => {
+                              forms['premise_sign_out_fee_type'] = val.value
+                            }}
+                          >
+                            {{
+                              reference: () => (
+                                <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                  {configUnit[forms['premise_sign_out_fee_type']]}
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        )
+                      }}
+                    </Field>
+                  </div>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <CellGroup inset>
+          <Cell>
+            {{
+              title: () => <div class={[styles.ruleTitle]}>未签退</div>
+            }}
+          </Cell>
+          <Cell>
+            {{
+              title: () => (
+                <div class={[styles.ruleContent, styles.ruleMore]}>
+                  单次扣减金额：
+                  <Field
+                    class={[styles.field, styles['field-m'], styles['field-w136']]}
+                    autocomplete="off"
+                    formatter={onFormatterInt}
+                    type="number"
+                    v-model={forms['not_sign_out_fee']}
+                  >
+                    {{
+                      extra: () => (
+                        <Popover
+                          v-model:show={statusList.show1}
+                          class={styles.popover}
+                          actions={actions}
+                          onSelect={(val: any) => {
+                            forms['not_sign_out_fee_type'] = val.value
+                          }}
+                        >
+                          {{
+                            reference: () => (
+                              <div class={[styles.unit, statusList.show1 && styles.active]}>
+                                {configUnit[forms['not_sign_out_fee_type']]}
+                              </div>
+                            )
+                          }}
+                        </Popover>
+                      )
+                    }}
+                  </Field>
+                </div>
+              )
+            }}
+          </Cell>
+        </CellGroup>
+
+        <Teleport to={'#app'}>
+          <OSticky position="bottom">
+            <div class={'btnGroup'}>
+              <Button type="primary" round block onClick={onSubmit}>
+                保存设置
+              </Button>
+            </div>
+          </OSticky>
+        </Teleport>
+      </div>
+    )
+  }
+})

src/school/attendance-rules/index.module.less

@@ -14,6 +14,7 @@
 
 .ruleContainer {
   overflow: hidden;
+  margin-bottom: 20px;
 
   .informationBottom {
     :global {
@@ -79,6 +80,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      height: 100%;
+      font-weight: 500;
+      font-size: 15px;
       &::before {
         position: absolute;
         left: 0;
@@ -116,6 +120,42 @@
   .field-w136 {
     width: 136px;
   }
+  .field-w102 {
+    width: 102px;
+  }
+
+  .ruleRange {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .ruleTips {
+    margin-top: 12px;
+    padding: 10px;
+    background: #fff3e6;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #333333;
+    line-height: 22px;
+    span {
+      padding: 0 4px;
+      color: #f44541;
+      font-weight: 500;
+    }
+  }
+  .ruleDesc {
+    font-size: 15px;
+    color: #777777;
+    line-height: 24px;
+    span {
+      padding: 0 4px;
+      color: #f44541;
+    }
+  }
+  .ruleExtra {
+    color: #777;
+    font-size: 15px;
+  }
 }
 
 .popover {

src/school/attendance-rules/index.tsx

@@ -1,13 +1,15 @@
 import { Tab, Tabs } from 'vant'
 import { defineComponent, reactive } from 'vue'
 import Range from './component/range'
+import SiginInRule from './component/sigin-in-rule'
+import SiginOutRule from './component/sigin-out-rule'
 import styles from './index.module.less'
 
 export default defineComponent({
   name: 'attendance-rules',
   setup() {
     const forms = reactive({
-      tabValue: 'range'
+      tabValue: 'signin-rule'
     })
     return () => (
       <div class={styles.attendanceRules}>
@@ -20,13 +22,13 @@ export default defineComponent({
           v-model:active={forms.tabValue}
         >
           <Tab title="考勤范围" name="range">
-            <Range />
+            {forms.tabValue === 'range' && <Range />}
           </Tab>
           <Tab title="签到规则" name="signin-rule">
-            1212
+            {forms.tabValue === 'signin-rule' && <SiginInRule />}
           </Tab>
           <Tab title="签退规则" name="signout-rule">
-            签退规则
+            {forms.tabValue === 'signout-rule' && <SiginOutRule />}
           </Tab>
         </Tabs>
       </div>