daofu-gov-pc/src/views/work-manage/index.vue

<template>
  <div class="percentage-content">
    <el-radio-group class="rg" v-model="tabIndex" @change="clickRadio">
      <template v-for="item in tabs" :key="item.sortId">
        <el-radio-button :label="item.sortId">{{ item.typeName }}</el-radio-button>
      </template>
    </el-radio-group>
    <div class="content">
      <!-- <transition name="main" mode="out-in" appear>
        <component :is="tabs[tabIndex].compon" />
      </transition> -->
      <CG :tabIndex="tabIndex" :typeId="typeId"></CG>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, ref } from "vue";
// import { ElMessageBox } from "element-plus";
import { wkTypes } from "@/api/Work";
import CG from "./components/cg.vue";

const tabIndex = ref(0);
const tabs = ref([
  { typeName: "常规工作", sortId: 1, },
]);
const typeId = ref('');
//头部点击取id
const clickRadio = ()=>{
  tabs.value.forEach(item => {
    if (item.sortId == tabIndex.value) {
      typeId.value = item.typeId
    }
    
  });
}
//工作类型
const getWkTypes = ()=>{
  let params = {
    classify:1
  }
  wkTypes(params).then((res: any) => {
    tabs.value = res.data;
    typeId.value = res.data[0].typeId;
    tabIndex.value = 1;
  });
}
onMounted(() => {
  getWkTypes();
});
</script>

<style lang="scss" scoped>
.percentage-content {
    height: auto;
    display: flex;
    flex-direction: column;
    .rg {
        padding: 16px;
        background: #fff;
        box-shadow: 0 0 6px rgb(0 120 255 / 10%);
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        :deep(.el-radio-button__inner) {
            min-width: 150px;
        }
    }
    .content {
        width: 100%;
        background: #fff;
        border-radius: 0.26042vw;
        box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
        padding: 0.83333vw;
        overflow-y: auto;
        overflow-x: hidden !important;
        box-sizing: border-box;
        .table {
            margin-top: 16px;
        }
    }
}
</style>