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

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

<template>
  <BottomPop
    :show="showHoliday"
    title="请选择"
    :onclose="
      () => {
        showHoliday = 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="
              () => {
                holidayIndex = index
                showHoliday = false
              }
            "
            v-for="(item, index) in holidayList"
            :key="index"
          >
            <view class="flex flex-1 flex-col flex-justify-items-start">
              <view class="">{{ item.title }}</view>
            </view>
            <view v-show="holidayIndex == index">
              <wd-icon name="check" class="color-[#3372FA] mr-2"></wd-icon>
            </view>
          </view>
        </view>
      </view>
    </template>
  </BottomPop>
  <view class="h-100vh flex flex-col">
    <TopNavigation title="考勤时间"></TopNavigation>
    <scroll-view scroll-y class="px-4 box-border flex-1">
      <view v-for="(item, index) in rules" :key="index">
        <view class="flex flex-justify-between items-center mx-3.5 pb-2 pt-5">
          <view class="color-gray text-3">规则{{ index + 1 }}</view>
          <view @click="rules.splice(index, 1)" v-show="rules.length > 1" class="text-3 color-red">
            删除
          </view>
        </view>
        <view class="bg-white rounded-2 p-3.5">
          <view class="must mb-2">周时间选择</view>
          <view class="flex flex-row flex-justify-between">
            <view
              @click="checkOtherRule(t, i)"
              :class="t.isSelect ? selectCss : noSelectCss"
              v-for="(t, i) in item.dayList"
              :key="i"
            >
              {{ t.name }}
            </view>
          </view>
          <view class="hpx bg-gray-100 my-3"></view>
          <view class="flex" @click="goSelectClasses">
            <view class="must flex-1">上下班时间</view>
            <view class="color-gray">{{ item.title }} {{ item.time }}</view>
            <wd-icon name="arrow-right ml-1.5 mr-0.5" class="text-gray" size="20"></wd-icon>
          </view>
        </view>
      </view>
      <view
        v-show="rules.length < 7"
        @click="rules.push({ dayList: cloneDayList(), title: '', time: '' })"
        class="flex flex-justify-center items-center flex-row py-3 box-border bg-white rounded-2 mt-2"
      >
        <wd-icon name="add-circle mr-2" class="color-[#3372FA]" size="17"></wd-icon>
        <view class="color-[#3372FA]">添加规则</view>
      </view>
      <view class="flex flex-justify-between items-center mx-3.5 pb-2 pt-5 color-gray text-3">
        特殊规则
      </view>
      <view class="bg-white rounded-2">
        <CommonItem text="节假日自动排休" value="" hint="" :isNext="false">
          <template v-slot:child>
            <wd-switch v-model="isAutoRest" class="ml-a"></wd-switch>
          </template>
        </CommonItem>
        <CommonItem
          v-show="isAutoRest"
          @click="showHoliday = true"
          text="节假日计划"
          value="按中国大陆法定节假日"
          hint=""
        ></CommonItem>
        <CommonItem @click="goSpecial" text="特殊日期" value="已设置" hint="" noLine></CommonItem>
      </view>
    </scroll-view>
    <view class="mt-a 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 CommonItem from '@/components/CommonItemItem/CommonItem.vue'

  const baseCss = 'rounded-100 w-8 h-8 flex items-center justify-center font-bold text-3 border'
  const selectCss = `${baseCss} bg-[#3372FA] color-white  border-[#3372FA] border-solid`
  const noSelectCss = `${baseCss}  border-gray border-dashed`
  const isAutoRest = ref(false)
  const showHoliday = ref(false)
  const holidayIndex = ref(0)
  const holidayList = [{ title: '按中国大陆法定节假日' }]
  const dayList = [
    { name: '一', value: 1, isSelect: false },
    { name: '二', value: 2, isSelect: false },
    { name: '三', value: 3, isSelect: false },
    { name: '四', value: 4, isSelect: false },
    { name: '五', value: 5, isSelect: false },
    { name: '六', value: 6, isSelect: false },
    { name: '日', value: 7, isSelect: false }
  ]
  const cloneDayList = () => {
    return dayList.map(day => ({ ...day }))
  }

  const rules = ref([
    {
      dayList: cloneDayList(),
      title: '默认班次',
      time: '09:00-17:00'
    }
  ])
  const checkOtherRule = (t, i) => {
    if (!t.isSelect) {
      rules.value.forEach(item => {
        item.dayList[i].isSelect = false
      })
    }
    t.isSelect = !t.isSelect
  }
  const goSelectClasses = () => {
    uni.navigateTo({
      url: '/pages/attendance/classes-manage?isSelect=true'
    })
    // goSelectClass
  }
  const goSpecial = () => {
    uni.navigateTo({
      url: '/pages/attendance/attendance-add-group/special-date-set'
    })
  }
  //
</script>

<style lang="scss" scoped>
  .must {
    position: relative;
    &::before {
      position: absolute;
      left: -1em;
      color: red;
      content: '*';
    }
  }
  //
</style>