EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/administrative/appointmentBase.vue

<template>
  <div class="home app_content">
      <!-- 中间 -->
      <!--        <div class="warp_body">-->
      <!--            <div class="white-body">-->
      <!--                <div class="tabs">-->
      <!--                    <ul>-->
      <!--                        <li v-for='(item,index) in data.list' @click='check(index)'-->
      <!--                            :class="{ active: index === data.TabId }">-->
      <!--                            <span v-if="index === 0"> {{item.title}}</span>-->
      <!--                            <span v-else-if="index === 1" class="warn-tab"> {{item.title}}</span>-->
      <!--                        </li>-->
      <!--                    </ul>-->
      <!--                </div>-->
      <!--                <div v-if="data.TabId == 0">-->
      <!--                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>-->
      <!--                </div>-->
      <!--                <div v-if="data.TabId == 1">-->
      <!--                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>-->
      <!--                </div>-->
      <!--            </div>-->
      <!--        </div>-->

      <van-tabs v-model:active="active" sticky @click-tab="onClickTab">
          <van-tab v-for="(item, index) in data.list" :title="item.title" :key="index">
              <div v-if="data.TabId == 0" style="height: calc(100vh - 1.2rem);">
                <appointmentAdd :isReg="2" />
              </div>
              <div v-if="data.TabId == 1" style="height: calc(100vh - 1.2rem);">
                  <appointmentList :isReg="0" />
              </div>
              <div v-if="data.TabId == 2" style="height: calc(100vh - 1.2rem);">
                  <appointmentList :isReg="1" />
              </div>

          </van-tab>
      </van-tabs>
  </div>
</template>

<script setup name="appointmentBase">
    import appointmentList from '@/views/administrative/appointmentList.vue';
    import appointmentAdd from '@/views/administrative/appointment.vue';

    const {useCommon} = $globalStore;
    //路由参数
    const router = useRouter();
    const route = useRoute();

    //tab切换
    const active = ref(0);
    const data = reactive({
        status: 0,
        TabId: 0,
        list: [
            {
              title: '创建执法预告',
              value: '2'
            },
            {
                title: '执法预告',
                value: '0'
            },
            {
                title: '历史预告记录',
                value: '1'
            },

        ],
    });

    const onClickTab = ({ title }) => {
      if(title == '执法预告'){
        data.TabId = 1;
      }else if(title == '历史预告记录'){
        data.TabId = 2;
      }else{
        data.TabId = 0;
      }
    };


    onMounted(() => {

    })

</script>

<style lang="less" scoped>
    .home {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;

        .warp_body {
            position: relative;
            background-image: linear-gradient(to bottom, #ebf3fb, transparent);
        }

        .white-body {
            margin: 0 3%;
            width: 94%;
            height: 99%;
            background-color: #fff;
            border-radius: 0.27rem;
        }
    }

    .tohome {
        position: absolute;
        top: 1.25%;
        right: 5%;
        font-size: 0.5rem;
    }

    .tabs {
        padding: 3% 3% 0;
        width: 94%;
        height: 1.25rem;
        box-sizing: content-box;
    }

    .tabs ul {
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 0.4rem;
        line-height: 1.25rem;
        text-align: center;
        align-content: center;
        justify-items: center;
    }

    .tabs ul li {
        float: left;
        width: 50%;
        height: 100%;
    }

    .tabs ul li span {
        display: block;
        width: 100%;
        height: 100%;
        color: #4aa1f9;
        background: url("src/assets/images/tab_bg1_1.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span {
        background: url("src/assets/images/tab_bg1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.warn-tab {
        margin-left: -2%;
        background: url("src/assets/images/tab_bg.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span.warn-tab {
        background: url("src/assets/images/tab_bg_1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.level1 {
        background: url("src/assets/images/tab_shine_red.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level2 {
        background: url("src/assets/images/tab_shine_org.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level3 {
        background: url("src/assets/images/tab_shine_yel.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .addinfo {
        position: absolute;
        bottom: 3%;
        right: 2%;
        z-index: 99999;
        width: 1.5rem;
        height: 1.5rem;
        background-color: #1367fe;
        border-radius: 50%;
        box-shadow: 0 0 0.27rem #1367fe;
        color: #fff;
        font-size: 0.4rem;
        text-align: center;
        vertical-align: middle;
        padding-top: 0.45rem;
        box-sizing: border-box;
    }

    /deep/ .van-tabs__nav {
        justify-content: flex-start !important;
        margin-left: 0;
        width: 100% !important;
    }

    /deep/ .van-tabs__line {
      width: 25%;
      height: 0.06rem;
    }

/*** 时间选择组件 ****/
    /deep/ .van-picker__columns {
        position: relative;
        display: flex;
        padding-top: 5%;
        border-top: 1px solid #f3f4f5;
    }

    /deep/ .van-picker-column__item--disabled {
        cursor: not-allowed;
        opacity: 1;
    }

    /deep/ .van-picker__frame {
        transform: translateY(-30%);
    }
/***/
</style>