yos_web/src/optionSystem/selectOption/add.vue

<template>
    <div style="display: inline;">
      <el-dropdown @command="onShow">
        <el-button type="primary" size="small"> 阀门选型 </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item.value" v-for="item in valvetypeList" :key="item.value">{{ item.remarks }}</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
        <el-dialog custom-class="custom-select-option_class" :visible.sync="drawer" width="1100px" append-to-body :show-close="false">
            <component :position="position" @close="drawer=false" :is="formComponent" v-on="$listeners"></component>
        </el-dialog>
    </div>
  </template>
    
<script>
import { mapGetters } from "vuex";
export default {
    props:['position'],
    data() {
        return {
        drawer: false,
        type: "",
        valvetypeList:[]
        };
    },
    provide () {
        return {
        valvetype:() => this.type
        }
    },
    computed: {
        ...mapGetters({
        loading: "loading",
    }),

    formComponent() {
        switch (this.type) {
            case "蝶阀":
            return () =>
                import("@/optionSystem/selectOption/components/DieFa.vue");
            break;
            default:
            break;
        }
    },
},
methods: {
    onShow(type) {
    this.type = type;
    this.drawer = true;
    },
    onSubmit() {
        this.$refs.target.$refs['form'].validate(async (valid) => {
            if (!valid) return false
            this.$refs.target.onSubmit(() => {
            this.$refs.target.refresh()
            this.drawer = false
            })
        });
    },
optionList() {
    this.$store.dispatch("optiontypeselect", "valvetype").then((res) => {
        this.valvetypeList = res.data;
        console.log(this.valvetypeList, "阀门类型");
    });
},
},
created () {
    this.optionList()
}
};
</script>
<style scoped>
.dialog-footer {
    margin-top: 32px;
    text-align: center;
}
/deep/.el-dialog__header {
    display: none !important;
}
/deep/.el-dialog__body {
    padding-top: 0 !important;
}
</style>
<style>
@media screen and (max-width:1800px) {
    .custom-select-option_class.el-dialog {
        margin-top: 10px !important;
    }
}

</style>