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

import OSticky from '@/components/o-sticky'
import { configUnit } from '@/constant'
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: 'range-model',
  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:
              'scope_of_attendance,sign_in_attendance,sign_in_attendance_type,sign_out_attendance,sign_out_attendance_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['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)
        if (submitData.length > 0) {
          await request.post('/api-school/schoolParamConfig/update', {
            hideLoading: false,
            data: { configs: [...submitData], group: 'ATTENDANCE' }
          })
        }
        setTimeout(() => {
          showToast('保存成功')
        }, 200)
      } 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}
                  style={{
                    display: 'flex',
                    alignItems: 'center'
                  }}
                >
                  签到、签退地点须在学校定位点
                  <Field
                    class={[styles.field, styles['field-m'], styles['field-w80']]}
                    autocomplete="off"
                    formatter={onFormatterInt}
                    type="number"
                    v-model={forms['scope_of_attendance']}
                  >
                    {{ extra: () => <span class={styles.ruleExtra}>米</span> }}
                  </Field>
                  以内
                </div>
              )
            }}
          </Cell>
        </CellGroup>
        <CellGroup inset>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleTitle]}>
                  <span class={styles.red}>签到</span>地点在考勤定位范围之外时，扣减当日训练补助
                </div>
              )
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore, styles.flexDev]}>
                  单次扣减金额：
                  <Field
                    class={[styles.field, styles['field-m'], styles['field-w136']]}
                    autocomplete="off"
                    formatter={onFormatterInt}
                    type="number"
                    v-model={forms['sign_in_attendance']}
                  >
                    {{
                      extra: () => (
                        <Popover
                          v-model:show={statusList.show1}
                          class={styles.popover}
                          actions={actions}
                          onSelect={(val: any) => {
                            forms['sign_in_attendance_type'] = val.value
                          }}
                        >
                          {{
                            reference: () => (
                              <div class={[styles.unit, statusList.show1 && styles.active]}>
                                {configUnit[forms['sign_in_attendance_type']]}
                              </div>
                            )
                          }}
                        </Popover>
                      )
                    }}
                  </Field>
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <CellGroup inset>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleTitle]}>
                  <span class={styles.red}>签退</span>地点在考勤定位范围之外时，扣减当日训练补助
                </div>
              )
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore, styles.flexDev]}>
                  单次扣减金额：
                  <Field
                    class={[styles.field, styles['field-m'], styles['field-w136']]}
                    autocomplete="off"
                    formatter={onFormatterInt}
                    type="number"
                    v-model={forms['sign_out_attendance']}
                  >
                    {{
                      extra: () => (
                        <Popover
                          v-model:show={statusList.show2}
                          class={styles.popover}
                          actions={actions}
                          onSelect={(val: any) => {
                            forms['sign_out_attendance_type'] = val.value
                          }}
                        >
                          {{
                            reference: () => (
                              <div class={[styles.unit, statusList.show2 && styles.active]}>
                                {configUnit[forms['sign_out_attendance_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>
    )
  }
})