data-marketing-platform/src/views/count/device/components/selectForm.vue

<template>
  <el-card class="select-form-card" shadow="none" style="padding: 10px 14px 0;">
    <div class="card-title no-padding">{{ title }}</div>
    <div class="select-form">
      <el-form :inline="true" :model="form" label-width="0">
        <el-form-item label="">
          <div class="card-tabs">
            <div class="card-tab" v-for="item in tabList" :key="item.value" 
              :class="{ active: form.tab === item.value }" @click="handleTabChange(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="form.version" placeholder="">
            <el-option label="全部版本" value="all" />
            <el-option label="1.0.0" value="1" />
            <el-option label="1.0.1" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="form.channel" placeholder="">
            <el-option label="全部渠道" value="all" />
            <el-option label="应用宝" value="1" />
            <el-option label="华为应用市场" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker :type="'daterange'" :clearable="false" style="width: 242px;" v-model="form.dateArray"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<script lang="ts" name="selectForm" setup>
import { ref, PropType } from 'vue'

const props = defineProps({
  tabList: {
    type: Array as PropType<{ label: string, value: number }[]>,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  form: {
    type: Object as PropType<{
      tab: number,
      version: string,
      channel: string,
      dateArray: Date[]
    }>,
    default: () => ({})
  }
})

// const form = ref({
//   tab: 1,
//   version: 'all',
//   channel: 'all',
//   dateArray: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()]
// })

const handleTabChange = (tab: number) => {
  props.form!.tab = tab;
}

</script>

<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

.select-form-card {
  .card-tabs {
    margin-bottom: 0;
  }
}
</style>