pc_shop_site/components/FormDialog.vue

<template>
  <el-dialog :lock-scroll="false" :title="title" :visible.sync="visible" width="700px"  :before-close="handleClose" :top="top" :show-close=false>
      <el-form :model="emailForm" :rules="rules" ref="ruleForm">
        <el-form-item v-for="(item) in comEnquiryConfig" :key="item.prop" :label="item.prop" :label-width="labelWidth+'px'" :prop="item.prop" 
        :style="{ marginBottom: marginBottom+'px' }">
          <span v-if="item.type === 'text'">{{ emailForm[item.prop] }}</span>
          <el-input v-if="item.type === 'input'" v-model="emailForm[item.prop]" :type="item.type" clearable ></el-input>
          <el-input v-else-if="item.type === 'textarea'" type="textarea" v-model="emailForm[item.prop]" :rows="5" clearable ></el-input>
          <tinymce  v-else-if="item.type === 'tinymce'" 
          v-model="emailForm[item.prop]"
          :height="240"/>
          <el-select
            v-else-if="item.type === 'select' && item.isShow"
            clearable
            filterable
            v-model="emailForm[item.prop]"
            :placeholder="item.placeholder ? item.placeholder : 'Please select'">
            <el-option
              v-for="i in item.selectlist"
              :key="i.id"
              :label="i.name"
              :value="i.name">
            </el-option>
          </el-select>
          <el-checkbox-group 
            v-else-if="item.type === 'checkbox'" v-model="emailForm[item.prop]">
            <el-checkbox v-for="(i,k) in item.selectlist" :label="k+1" :key="k">{{ i }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="handleSend" :loading="$store.state.product.loading">{{sendbtnCext}}</el-button>
        <el-button type="info" @click="handleClose" plain>{{cancelbtnCext}}</el-button>
      </div>
   </el-dialog>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { mapMutations } from "vuex";

export default {
  components: { Tinymce },
  props: {
    title:{
      type:String,
      default: 'Send Email'
    },
    sendbtnCext:{
      type:String,
      default: 'Send Enquiry'
    },
    cancelbtnCext:{
      type:String,
      default: 'Cancel'
    },
    top:{
      type:String,
      default: '5vh'
    },
    isSendPdf:{
      type:Boolean,
      default: false
    },
    emailForm: {},
    enquiryConfig: [],
    rules: {},
    labelWidth: {
      type: Number,
      default: 150
    },
    marginBottom: {
      type: Number,
      default: 20
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      downloading:false
    }
  },
  computed:{
    comEnquiryConfig(){
      return this.enquiryConfig.filter(item=>{
        if(!item.hasOwnProperty('isShow') || item.isShow) {
          return item
        }
      })
    }
  },
  methods:{
    ...mapMutations('product',['setLoading']),
    handleClose(){
      this.$emit('update:visible', false)
    },
    handleSend(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.setLoading(true);
          if(this.isSendPdf){
            // Bus.$emit("sendPdf");
            this.$emit("handleSend");
          }else{
            this.$emit("handleSend");
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$deep-blue:#004a9b;

:deep(.el-dialog__header){
    padding: 20px;
    border-bottom:1px solid #eee;
}
.el-form .el-select{
  width: 100%;
}
textarea{
  color:#606266;
  font-weight: 700;
}
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  background-color: $deep-blue;
  border-color: $deep-blue;
  &:hover{
    background-color: #013269;
  }
}
</style>