history-ui/src/components/SelectStaion/index.vue

<template>
  <el-cascader
    :key="componentKey"
    v-model="selectedValues"
    :options="options"
    :props="props"
    @change="handleChange"
    collapse-tags
    filterable
    clearable>
  </el-cascader>

</template>

<script>
import stationApi from "@/api/basic/station";

export default {
  name: "station",
  props: {
    startTime: { type: String,     required: true, default: null },
    endTime: { type: String,     required: true, default: null },
    type: {
      type: String,
      required: true,
      default:null// 强制要求父组件传递
    }
  },
  data() {
    return {
      props: {
        multiple: true,
        checkStrictly: true,// 允许独立选择节点
        value: 'value',     // 确保与数据源字段名一致
        label: 'label',
        disabled: 'disabled'
      },
      componentKey: 0,
      options: [],
      stcds: '',
      selectedValues: [], // 绑定选中值
    }
  },
  watch: {
    // 监听时间参数变化
    startTime(newVal) {
      this.checkAndFetchData(newVal, this.endTime);
    },
    endTime(newVal) {
      this.checkAndFetchData(this.startTime, newVal);
    }
  },
  methods: {
    formatDateTime(date) {
      if (!date) return '';
      const d = new Date(date);
      if (isNaN(d.getTime())) return '';

      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const hours = String(d.getHours()).padStart(2, '0');     // 小时补零
      const minutes = String(d.getMinutes()).padStart(2, '0'); // 分钟补零
      const seconds = String(d.getSeconds()).padStart(2, '0'); // 秒数补零

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 检查是否满足查询条件
    checkAndFetchData(start, end) {
      if (start && end) {
        this.componentKey++;
        this.options=[]
        this.selectedValues=[]
        if (this.type.includes("Day") || this.type.includes("Dp")){
          // 触发查询
          this.getStaionList(this.formatDateTime(start), this.formatDateTime(end),this.type);
        }else {
          this.getStaionList(start, end,this.type);
        }
      }
    },
    async getStaionList(startTime, endTime, type) {
      const res = await stationApi.getStnmAndStcdList(startTime, endTime, type);
      // 新增数据处理逻辑
      const processTree = (nodes) => {
        return nodes.map(node => {
          const hasChildren = node.children && node.children.length > 0;
          return {
            ...node,
            disabled: hasChildren, // 有子节点的父类自动禁用
            children: hasChildren ? processTree(node.children) : null
          };
        });
      };
      this.options = processTree([res.data]); // 注意保持数组结构
    },

    handleChange(selectedValues, selectedNodes) {
      const value=this.selectedValues.map(path => path[path.length - 1])[0];
      if (value==='all') {
        this.selectedValues = ["1,all"];
      }
      const lastValue = selectedValues.map(path => path[path.length - 1]);
      this.stcds = lastValue.join(",")
      this.$emit('stcd-update', this.stcds); // 触发事件
    },
    getStcds() {
      this.$emit('childEvent', stcds);
    }

  },
  mounted() {
    if (this.startTime !=null || this.endTime !=null) {
      this.getStaionList(this.startTime,this.endTime,this.type)
    }else {
      this.getStaionList(null,null,this.type)
    }

  }
}
</script>
<style scoped lang="scss">

</style>