uk_front/components/DesignFormDialog.vue

<template>
  <el-dialog :title="title" :visible.sync="visible" width="700px"  :before-close="handleClose" :top="top" :show-close=false>
      <el-form :model="formData" :rules="rules" ref="ruleForm">
        <el-form-item v-for="item in formConfig" :key="item.label" :label="item.label" :prop="item.prop" :label-width="labelWidth+'px'">
          <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="formData[item.prop]"
          :disabled="item.disabled" :readonly="item.readonly"
          :style="{ width: item.width }"
          @change="item.change && item.change(formData[item.prop])"
          :placeholder="item.placeholder ? item.placeholder : ''" clearable :type="item.inputType">
        </el-input>
        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'selectObj'"
          v-model="formData[item.prop]"
          :disabled="item.disabled"
          :style="{ width: '100%' }"
          @change="item.change && item.change(formData[item.prop])"
          clearable
          filterable
          :multiple="item.multiple">
          <el-option
            v-for="(val, key) in item.selectList"
            :key="parseInt(key)"
            :label="val"
            :value="val">
          </el-option>
        </el-select>
        <!-- 富文本 -->
        <tinymce
          v-if="item.type === 'tinymce'"
          v-model="formData[item.prop]"
          :height="item.height"
          :width="item.width"
          style="display: inline-block"
        />
          <!-- <tinymce
          v-if="key=='Notes'"
          v-model="emailForm[key]"
          :height="240"/>
          <el-input v-model="emailForm[key]" :type="key=='Comments'?'textarea':''" :rows="5" clearable v-else></el-input> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSend">{{sendbtnCext}}</el-button>
        <el-button type="primary" @click="handleClose" plain>CANCEL</el-button>
      </div>
   </el-dialog>
</template>

<script>
import Bus from "@/plugins/bus.js";
import Tinymce from "@/components/Tinymce";

export default {
  components: { Tinymce },
  props: {
    title:{
      type:String,
      default: 'Send Email'
    },
    // 表单域标签的宽度
    labelWidth: {
      type: Number,
      default: 95,
    },
    // 表单配置
    formConfig: {
      type: Array,
      required: true,
    },
    // 表单数据
    formData: {
      type: Object,
      required: true,
    },
    sendbtnCext:{
      type:String,
      default: 'SUBMIT REQUEST'
    },
    top:{
      type:String,
      default: '5vh'
    },
    isSendPdf:{
      type:Boolean,
      default: false
    },
    rules: {},
    visible: {
      type: Boolean,
      default: false
    },
    
  },
  methods:{
    handleClose(){
      this.$emit('update:visible', false)
    },
    handleSend(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.isSendPdf){
            Bus.$emit("sendPdf");
          }else{
            this.$emit("handleSend");
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header){
    padding: 20px;
    border-bottom:1px solid #eee;
}
textarea{
  color:#606266;
  font-weight: 700;
}
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-dialog__body) {
  padding: 20px 20px 0;
}
</style>