feiyu02
2025-07-21 5be9679fb4288936b576cf3d1f1548af1c4151b8
src/components/search-option/FYOptionScene.vue
@@ -1,8 +1,9 @@
<template>
  <el-form-item label="场景类型">
  <el-form-item :label="label" :prop="prop">
    <el-select
      v-model="selectedOptions"
      placeholder="场景类型"
      :model-value="value"
      @change="handleChange"
      :placeholder="label"
      style="width: 150px"
    >
      <el-option
@@ -23,51 +24,59 @@
    // 是否在首选项处添加“全部”选项
    allOption: {
      type: Boolean,
      default: true,
      default: true
    },
    label: {
      type: String,
      default: '场景类型'
    },
    // 1:飞羽环境系统;2:飞羽监管系统;
    type: {
      type: Number,
      default: 1,
      type: Number || String,
      default: 1
    },
    // 返回结果
    value: Object,
    // 是否默认返回初始选项
    initValue: {
      type: Boolean,
      default: true,
      default: true
    },
    // form表单绑定属性名
    prop: {
      type: String,
      default: '_scenetype'
    },
    // 切换 type 后,当前选项是否清空
    sourceInit: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:value'],
  data() {
    return {
      sceneTypes: enumScene(this.type, this.allOption),
      selectedOptions: {},
      // sceneTypes: enumScene(this.type, this.allOption),
    };
  },
  watch: {
    selectedOptions: {
      handler(nVal, oVal) {
        if (nVal != oVal) {
          this.$emit('update:value', nVal);
        }
      },
      deep: true,
    },
    value: {
      handler(nVal, oVal) {
        if (nVal != oVal) {
          this.selectedOptions = nVal;
        }
      },
      deep: true,
      immediate: true
    },
  computed: {
    sceneTypes() {
      if (this.sourceInit) {
        // 当因为type或者allOption参数变化引起选项变更时,清空当前选项
        this.handleChange();
      }
      return enumScene(this.type, this.allOption);
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('update:value', value);
    }
  },
  mounted() {
    if (this.initValue) {
      this.selectedOptions = this.sceneTypes[0];
      this.handleChange(this.sceneTypes[0]);
    }
  },
  }
};
</script>