starwork-uniapp/src/pages/attendance/attendance-add-group/attendance-add-group.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <BottomPop
    :show="showType"
    title="考勤类型"
    :onclose="
      () => {
        showType = false
        typeIndex = typeSelectIndex
      }
    "
    :onSure="
      () => {
        typeSelectIndex = typeIndex
      }
    "
  >
    <template v-slot:child>
      <view class="px-4">
        <view
          class="bg-white rounded-2 mt-2"
          @click="typeIndex = index"
          v-for="(item, index) in typeList"
          :key="index"
        >
          <view class="flex flex-row items-center p-3 box-border">
            <view class="flex flex-1 flex-col flex-justify-items-start">
              <view class="">{{ item.title }}</view>
              <view class="mt-1 text-3.3">{{ item.desc }}</view>
              <view class="mt-1 text-2.8 color-gray">{{ item.desc2 }}</view>
            </view>
            <view v-show="typeIndex == index">
              <wd-icon name="check" class="color-[#3372FA] mr-2"></wd-icon>
            </view>
          </view>
        </view>
      </view>
    </template>
  </BottomPop>

  <BottomPop
    :show="showWay"
    title="打卡方式选择"
    :onclose="
      () => {
        showWay = false
      }
    "
    noSure
  >
    <template v-slot:child>
      <view class="px-4">
        <view class="bg-white rounded-2 mt-2">
          <view
            class="flex flex-row items-center p-3 box-border"
            @click="
              () => {
                wayIndex = index
                showWay = false
              }
            "
            v-for="(item, index) in wayList"
            :key="index"
          >
            <view class="flex flex-1 flex-col flex-justify-items-start">
              <view class="">{{ item.title }}</view>
              <view class="mt-1 text-2.8 color-gray">{{ item.desc }}</view>
            </view>
            <view v-show="wayIndex == index">
              <wd-icon name="check" class="color-[#3372FA] mr-2"></wd-icon>
            </view>
          </view>
        </view>
      </view>
    </template>
  </BottomPop>

  <TopNavigation title="添加考勤组"></TopNavigation>
  <view class="h-[calc(100vh-60px)] p-3 box-border">
    <view class="bg-white rounded-2.2 mt-2">
      <CommonItem text="考勤组名称" isMust :isNext="false" value="" hint="" noLine></CommonItem>
      <view class="flex items-center px-4.3 pb-3 box-border">
        <input
          class="w-100%"
          v-model="name"
          placeholder="必填"
          placeholder-class="color-gray"
          :maxlength="15"
          @input="nameInput"
        />
        <view
          @click="name = ''"
          v-show="name"
          class="i-carbon-close-filled color-gray text-4"
        ></view>
        <view class="text-3 self-center color-gray ml-1">{{ name.length }}/{{ 15 }}</view>
      </view>
      <view class="hpx bg-gray-100 mx-2.5"></view>
      <CommonItem
        @click="
          () => {
            showType = true
          }
        "
        text="考勤类型"
        noLine
        :value="typeList[typeSelectIndex].title"
      ></CommonItem>
    </view>
    <view class="bg-white rounded-2.2 mt-2">
      <CommonItem @click="goStaff()" text="考勤人员" isMust value=""></CommonItem>
      <CommonItem
        @click="goTime()"
        text="考勤时间"
        noLine
        value="周一至周五,09:00-17:00"
      ></CommonItem>
    </view>
    <view class="bg-white rounded-2.2 mt-2">
      <CommonItem
        @click="
          () => {
            showWay = true
          }
        "
        text="打卡方式"
        :value="wayList[wayIndex].title"
      ></CommonItem>
      <CommonItem
        text="打卡设备"
        :isMust="wayIndex == 0"
        :noLine="wayIndex == 0"
        value=""
        hint="未选择"
      ></CommonItem>
      <CommonItem text="打卡地点" v-show="wayIndex == 1" value="" hint="未设置"></CommonItem>
      <CommonItem text="打卡WIFI" v-show="wayIndex == 1" noLine value="" hint="未设置"></CommonItem>
    </view>
    <view @click="goOutsideRule()" v-show="wayIndex == 1" class="bg-white rounded-2.2 mt-2">
      <CommonItem text="外勤规则" noLine value="允许外勤卡" hint=""></CommonItem>
    </view>
    <view class="bg-white rounded-2.2 mt-2">
      <CommonItem text="加班统计规则" noLine value="未开启" hint=""></CommonItem>
    </view>
    <view
      class="fixed bottom-0 left-0 w-full p-3 box-border border-solid border-0 border-t-1 border-gray-200"
    >
      <wd-button :round="false" block>保存</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import BottomPop from '@/components/BottomPop/BottomPop.vue'
  import CommonItem from '@/components/CommonItemItem/CommonItem.vue'
  const showType = ref(true)
  const typeIndex = ref(0)
  const typeSelectIndex = ref(0)
  const showWay = ref(false)
  const wayIndex = ref(0)
  const name = ref('')
  const nameInput = () => {
    console.log(name.value)
  }
  const typeList = [
    {
      title: '固定班制',
      desc: '人员每周按照相同时间上下班',
      desc2: '适用于办公室坐班,例如每周一至五上班,朝9晚5'
    },
    {
      title: '自由班制',
      desc: '无固定上下班时间，可随时打卡',
      desc2: '适用于计时工种、灵活用工等'
    },
    {
      title: '排班制',
      desc: '排班制人员按每日所排班次上下班',
      desc2: '适用于工厂、门店等，例如三班倒、做—休一'
    }
  ]
  const wayList = [
    {
      title: '设备打卡',
      desc: '适用于内勤打卡,有效避免打卡等作弊行为'
    },
    {
      title: '设备+手机打卡',
      desc: '选择后可开启外勤打卡'
    }
  ]
  const outsideRule = {
    allow: false,
    takePhoto: false,
    remark: false,
    selectPhoto: false
  }
  const goOutsideRule = () => {
    uni.navigateTo({
      url: '/pages/attendance/attendance-add-group/outside-rules'
    })
  }
  const goStaff = () => {
    uni.navigateTo({
      url: '/pages/attendance/attendance-add-group/attendance-staff'
    })
  }
  const goTime = () => {
    uni.navigateTo({
      url: '/pages/attendance/attendance-add-group/attendance-time'
    })
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f6f8fc;
  }
</style>