eta_front/src/components/pubDialog.vue

<template>
  <!-- 公用弹窗组件 根据实际自行追加具体type 通用input -->
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    custom-class="public-dialog"
    center
    :width="dialogWidth"
    v-dialogDrag
  >
    <div slot="title" style="display: flex; align-items: center">
      <img
        :src="$icons.title_icon"
        style="color: #fff; width: 16px; height: 16px; marginright: 5px"
        v-if="title_icon"
      />
      <span style="font-size: 16px">{{ title }}</span>
    </div>
    <el-form
      ref="diaForm"
      class="form-cont"
      label-position="left"
      :hide-required-asterisk="isHideRequired"
      label-width="120px"
      :model="formData"
      :rules="formRules"
    >
      <el-form-item
        v-for="(item, index) in keysArr"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        width="100%"
      >
        <el-input
          v-if="item.type === 'input'"
          :maxlength="item.maxlen"
          v-model.trim="formData[item.prop]"
          :placeholder="item.placeholder"
        />
        <el-select
          v-model="formData[item.prop]"
          :placeholder="item.placeholder"
          style="width: 80%;"
          v-else-if="item.type === 'select'"
          :multiple="item.multiple"
          clearable
        >
          <i slot="prefix" :class="item.prefixIco" v-if="item.prefixIco"></i>
          <el-option
            v-for="type in selectArr"
            :key="type.value"
            :label="type.name"
            :value="type.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dia-bot">
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="saveHandle"
        >{{ confimTxt[0] }}</el-button
      >
      <el-button type="primary" plain @click="cancelHandle">{{
        confimTxt[1]
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import bus from "@/api/bus";
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      default: '',
    },
    title_icon: {
      type: String,
      default: '',
    },
    dialogWidth: {
      type: String,
      default: '550px',
    },
    //显示必填
    isHideRequired: {
      type: Boolean,
      default: false,
    },
    //form 数据
    formData: {
      type: Object,
      default: () =>{},
    },
    //form 规则
    formRules: {
      type: Object,
      default: ()=>{},
    },
    //表单key数组 { label：对应的名称,prop：规则的key, type: input支持的类型 默认input,placeholder}
    keysArr: {
      type: Array,
      default: ()=>[],
    },
    /* select的数据 {name,value}格式 */
    selectArr: {
      type: Array,
      default: ()=>[],
    },
    confimTxt: {
      type: Array,
      default: ()=>[/* '保存' */bus.$i18nt.t('Dialog.confirm_save_btn'), /* '取消' */bus.$i18nt.t('Dialog.cancel_btn')],
    },
  },
  data() {
    return {};
  },
  methods: {
    cancelHandle() {
      this.$refs.diaForm.resetFields();
      this.$emit('cancel');
    },
    saveHandle() {
      this.$refs.diaForm.validate((valid) => {
        if (valid) {
          this.$emit('ensureCallBack', this.formData, this.title);
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss">
.public-dialog {
  .el-form-item__content {
    margin-left: 0;
  }
  .form-cont {
    padding-left: 50px;
  }
  .el-input {
    width: 80%;
  }
  .dia-bot {
    margin: 52px 0 30px;
    display: flex;
    justify-content: center;
  }
}
</style>