riku
2024-09-27 1abb6a9ca01cc76f271542a063d1b19839448019
src/components/search-option/FYOptionScene.vue
@@ -1,16 +1,12 @@
<template>
  <el-form-item label="场景类型">
  <el-form-item label="场景类型" :prop="prop">
    <el-select
      v-model="selectedOptions"
      :model-value="value"
      @change="handleChange"
      placeholder="场景类型"
      style="width: 150px"
    >
      <el-option
        v-for="s in sceneTypes"
        :key="s.value"
        :label="s.label"
        :value="s"
      />
      <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
    </el-select>
  </el-form-item>
</template>
@@ -23,50 +19,55 @@
    // 是否在首选项处添加“全部”选项
    allOption: {
      type: Boolean,
      default: true,
      default: true
    },
    // 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: true
    }
  },
  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,
    },
  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>