| | |
| | | <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> |
| | |
| | | // 是否在首选项处添加“全部”选项 |
| | | 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, |
| | | 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> |