zjugis_OA/client/src/views/OaSystem/oaViews/components/cardViewLone.vue

<template>
  <div class="card-view">
    <div class="card-title">
      <div class="title-left">
        <p>{{ props.title }}</p>
      </div>
      <div class="title-right">
        <ul v-if="props.topTabs">
          <li
            v-for="(item, index) in props.topTabs"
            :key="index"
            :class="index == topTabsIndex ? 'liActive' : ''"
            @click="topTabsClick(item, index)"
          >
            <p>{{ item }}</p>
          </li>
        </ul>
        <el-select
          v-if="topTabsYear"
          v-model="yearModel"
          class="m-2"
          placeholder="选择年份"
          style="width: 100px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="tabs-Box" v-if="initTabsShow()">
      <div class="tabs-left">
        <ul v-if="props.leftTabs">
          <el-radio-group v-model="radioModel" @change="radioGroupChange">
            <el-radio
              v-for="(item, index) in props.leftTabs"
              :label="index"
              :key="index"
              size="large"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </ul>
      </div>
      <div class="tabs-right">
        <ul v-if="props.rightTabs">
          <li
            v-for="(item, index) in props.rightTabs"
            :key="index"
            :class="index == rightTabsIndex ? 'liActive' : ''"
            @click="rightTabsClick(item, index)"
          >
            <p>{{ item }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  title: String,
  leftTabs: Array,
  rightTabs: Array,
  topTabs: Array,
  topTabsYear: Boolean
})
const emit = defineEmits(['leftClick', 'rightClick', 'topClick'])
const yearOptions = ref([
  {
    label: '2024',
    value: '2024'
  },
  {
    label: '2023',
    value: '2023'
  },
  {
    label: '2022',
    value: '2022'
  }
])
const yearModel = ref('2024')
const radioModel = ref(0)
const rightTabsIndex = ref(0)
const topTabsIndex = ref(0)
const initTabsShow = () => {
  if (props.leftTabs || props.rightTabs) {
    return true
  } else {
    return false
  }
}
const rightTabsClick = (item, index) => {
  rightTabsIndex.value = index
  emit('rightClick', index)
}

const topTabsClick = (item, index) => {
  topTabsIndex.value = index
  emit('topClick', index)
}
const radioGroupChange = (v) => {
  emit('leftClick', props.leftTabs[v])
}

/** 初始化 **/
onMounted(() => {
  initTabsShow()
})
</script>
<style lang="scss" scoped>
p,
span,
h4,
h5,
h6 {
  font-family: AlibabaPuHuiTiR;
}
.card-view {
  width: 100%;
  height: auto;

  .card-title {
    width: 100%;
    height: 46px;
    background: url(@/assets/imgs/oaView/card-title-lone.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 45px;
    .title-left {
      p {
        color: #fff;
        font-size: 20px;
        font-family: AlibabaPuHuiTiB;
        font-weight: 600;
        color: #ffffff;
        background: linear-gradient(0deg, #ffff 20%, #def1ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 8px;
      }
    }
    .title-right {
      margin-top: 8px;
      height: 100%;
      ul {
        display: flex;
        align-items: center;
        height: 100%;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 64px;
          height: 24px;
          border: 2px solid #0d6795;
          background-color: transparent;
          cursor: pointer;
          margin-right: 5px;
          p {
            color: #7ac1ec;
            font-size: 16px;
          }
        }
        li:last-child {
          margin-right: 0;
        }
        .liActive {
          background-color: #29a4e4;
          p {
            color: #fff;
          }
        }
      }
    }
  }
  .tabs-Box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    padding-right: 0;
    .tabs-left {
      ul {
        display: flex;
        align-items: center;
        li {
        }
      }
    }
    .tabs-right {
      ul {
        display: flex;
        align-items: center;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 24px;
          border: 2px solid #0d6795;
          background-color: transparent;
          cursor: pointer;
          margin-right: 5px;
          padding: 0 4px;
          p {
            color: #7ac1ec;
            font-size: 16px;
            white-space: nowrap;
          }
        }
        li:last-child {
          margin-right: 0;
        }
        .liActive {
          background-color: #29a4e4;
          p {
            color: #fff;
          }
        }
      }
    }
  }
  .card-content {
    width: 100%;
    height: calc(100% - 86px);
  }
}
:deep(.tabs-left) {
  .el-radio__label {
    color: #7ac1ec;
    font-size: 16px;
    font-family: AlibabaPuHuiTiR;
  }
  .el-radio {
    margin-right: 15px;
  }
}
:deep(.title-right) {
  .el-select {
    .el-input {
    }
    .el-input__wrapper {
      background-color: transparent;
      border-radius: 0;
      border-color: #0d6795 !important;
    }
    input,
    span {
      color: #fff;
    }
  }
}
</style>