pc_shop_site/components/ProjectDialog.vue

<template>
    <el-dialog :lock-scroll="false"
      :visible.sync="visible"
      width="500px"
      :before-close="handleClose"
      :show-close="false"
      center
      top="0">
      <div class="content">
        <el-select 
          v-model="keyword" filterable allow-create 
          clearable style=" width: 100% " default-first-option  :filter-method="filterMethod"
          placeholder="Please choose your job name">
          <el-option
            v-for="option in selList"
            :label="option.label_type"
            :value="option.label_type"
            :key="option.label_type"
          ></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleSend">Add To My Project</el-button>
        <el-button type="info" @click="handleClose" plain>CANCEL</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id:[Number,String],
    projectObj:{
		  type: Object,
		  default: () => {}
	  },
    isCopy:{
		  type: Boolean,
		  default: true
	  }
  },
  data() {
    return {
      keyword:"",
      selList:[]
    }
  },
  mounted(){
    if(this.$utils.checkLogin()){
        this.getSelect();
    }
  },
  methods: {
    getSelect(){
      this.$axios.post("/goods_cart/cartLabelLists", { keyword:this.keyword }).then(res =>{
        this.selList=res.result
      })
    },
    filterMethod(val){
      this.keyword = val
    },
    handleSend() {
      if(!this.keyword){
        this.$message({
								message: 'Please choose your job name',
								type: "warning",
							});
              return
      }
      if(this.isCopy){
          this.$axios.post("/goods_cart/cartLabelGoodsCopy",{
              id: this.id,
              label_type_new: this.keyword})
            .then((res) => {
              this.$message.success("Added successfully") 
              this.$emit('sendFinish')
            })
          return
      }
      let data = { ...{label_type:this.keyword,goods_id: this.id},...this.projectObj}
      this.$axios.post("/goods_cart/cartAdd", data).then(res =>{
        this.$message.success("Add success") 
        this.$emit("update:visible", false);
      })
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  text-align: center;
}

</style>