erp-el-element/Dialog/InnerDialog.vue

<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      width="30%"
      :title="Obj.DialogTitle"
      :visible.sync="innerVisible"
      :before-close="close"
      append-to-body
    >
      <el-form
        ref="ruleForm"
        label-position="top"
        :model="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
        :close-on-click-modal="false"
      >
        <el-row :gutter="20">
          <el-col v-for="(item, index) in Input" :key="index" :span="item.span">
            <el-form-item
              v-if="item.disabled"
              :prop="item.prop"
              :rules="{
                required: item.required,
                message: item.placeholder,
                trigger: ['blur', 'change'],
              }"
              :label="item.label"
            >
              <div style="display: flex">
                <div
                  :is="item.type"
                  v-model="ruleForm[item.enName]"
                  :placeholder="item.placeholder"
                  :value="item.value"
                  :style="item.width"
                  :format="item.format"
                  :value-format="item.valueformat"
                  :clearable="true"
                  filterable
                  @keyup.enter.native="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)"
                  @input="input($event)"
                >
                  <el-option
                    v-for="items in item.options"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  />
                </div>
              </div>
            </el-form-item>
            <el-col
              v-for="(r, i) in item.arr"
              :key="i"
              :span="r.span"
            >
              <el-form-item>
                <div
                  :is="r.type"
                  v-model="ruleForm[r.enName]"
                >
                  <el-option
                    v-for="items in r.options"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col
              v-for="(items, i) in item.alipay"
              :key="i"
              :span="items.span"
            >
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.alipay[items.enName]"
                  :action="items.action"
                  :placeholder="items.placeholder"
                  type="alipay"
                />
                <!--图片上传组件-->
                <uploadImg
                  v-if="items.type == 'el-upload'"
                  :image-url="ruleForm.pay_info.alipay[items.enName]"
                  :action-url="items.action"
                  type="alipay"
                  @UrlImg="UrlImg"
                />
              </el-form-item>
            </el-col>
            <el-col
              v-for="(items, i) in item.wechat"
              :key="i"
              :span="items.span"
            >
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.wechat[items.enName]"
                  :action="items.action"
                  :placeholder="items.placeholder"
                  type="wechat"
                />
                <!--图片上传组件-->
                <uploadImg
                  v-if="items.type == 'el-upload'"
                  :action-url="items.action"
                  :image-url="ruleForm.pay_info.wechat[items.enName]"
                  type="wechat"
                  @UrlImg="UrlImg"
                />
              </el-form-item>
            </el-col>
            <el-col v-for="(items, i) in item.bank" :key="i" :span="items.span">
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.bank[items.enName]"
                  :placeholder="items.placeholder"
                />
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)"
          >{{ Obj.Button }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import uploadImg from '@/components/Upload'
export default {
  components: {
    uploadImg
  },
  props: {
    innerVisible: {
      type: Boolean,
      default: false
    },
    Obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    Input: {
      type: Array,
      default: () => {
        return []
      }
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      actionUrl: 'https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com'
    }
  },
  created() {},
  methods: {
    input(e) {
      this.$forceUpdate()
    },
    close() {
      this.$emit('update:innerVisible', false)
    },
    submitForm(formName, name, DialogTitle) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('save', {
            row: this.ruleForm,
            name: name,
            DialogTitle: DialogTitle
          })
          this.$emit('update:innerVisible', false)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('update:innerVisible', false)
    },
    // 子组件上传图片成功 返回地址
    UrlImg(data) {
      this.$emit('ImgSrc', data)
    }
  }
}
</script>

<style>
</style>