data-marketing-platform/src/views/count/engagement/components/FormEcharts.vue

<template>
  <div class="form-container">
    <el-form :inline="true" :model="form" label-width="0">
      <el-form-item label="">
        <el-select style="width: 106px !important; min-width: 106px !important;" v-model="form.timeCompare"
          placeholder="时段对比">
          <el-option label="时段对比" value="time1" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" style="background-color: rgba(22, 122, 240, 1); border-color: rgba(22, 122, 240, 1);"
          @click="openDatePicker">
          <Svg name="date"></Svg>对比时间
          <el-date-picker v-if="type === 'date'" class="date-picker" v-model="tempSelectedDates" type="dates" placeholder=""
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%; margin-bottom: 16px;"
            :close-on-click-modal="false" :close-on-press-escape="false" :teleported="false"
            :popper-class="'date-picker-no-close'" @change="handleDateChange">
          </el-date-picker>
        </el-button>
        <div class="clear-btn" style="display: none;" @click="clearAllDates">清空</div>
      </el-form-item>
    </el-form>
    <div class="average-time">
      {{ averageValue.time }}:&nbsp;
      <span>{{ averageValue.value }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { formatDate } from '/@/utils/formatTime';
import { ref, reactive, defineEmits, defineProps } from 'vue'
import Svg from '/@/components/Svg.vue';

const emit = defineEmits(['dateChange']);

const props = defineProps({
  averageValue: {
    type: Object,
    default: () => ({
      time: '',
      value: ''
    })
  },
  type: {
    type: String,
    default: 'date'
  },
  form: {
    type: Object,
    default: () => ({})
  }
})

// const form = reactive(props.form);

// 临时存储选中的日期，用于弹窗内编辑
const tempSelectedDates = ref<string[]>([]);
// 打开弹窗时初始化临时数据
const openDatePicker = () => { };
// 清空选中的日期
const clearAllDates = () => {
  tempSelectedDates.value = [];
}

// 日期更新事件
const handleDateChange = (val: string[]) => {
  // 触发父组件的日期更新事件
  emit('dateChange', val);
}

watch(props.form, (newVal) => {
  console.log(newVal);
  const date = formatDate(new Date(newVal.date), 'YYYY-mm-dd');
  tempSelectedDates.value = [date];
  handleDateChange([date]);
}, { deep: true, immediate: true })

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

.form-container {
  position: relative;
  margin: 53px auto 0px;
  width: 100%;
  max-width: 1360px;
  display: flex;
  justify-content: space-between;

  .average-time {
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    color: rgba(18, 18, 18, 1);

    span {
      color: rgba(22, 122, 240, 1);
    }
  }

  :deep(.el-form-item__content .el-date-editor) {
    position: absolute;
    top: 0;
    left: 0;
    width: 106px !important;
    min-width: 106px !important;
    height: 100%;
    opacity: 0;
  }

  :deep(.el-input__inner),
  :deep(.el-date-editor--dates .el-input__wrapper) {
    cursor: pointer;
  }

}
</style>