JeecgBoot/ant-design-vue-jeecg/src/components/jeecg/JModal/JPrompt.vue

<template>
  <j-modal :visible="visible" :confirmLoading="loading" :after-close="afterClose" v-bind="modalProps" @ok="onOk" @cancel="onCancel">
    <a-spin :spinning="loading">
      <div v-html="content"></div>
      <a-form-model ref="form" :model="model" :rules="rules">
        <a-form-model-item prop="input">
          <a-input ref="input" v-model="model.input" v-bind="inputProps" @pressEnter="onInputPressEnter"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'JPrompt',
  data() {
    return {
      visible: false,
      loading: false,
      content: '',
      // 弹窗参数
      modalProps: {
        title: '',
      },
      inputProps: {
        placeholder: '',
      },
      // form model
      model: {
        input: '',
      },
      // 校验
      rule: [],
      // 回调函数
      callback: {},
    }
  },
  computed: {
    rules() {
      return {
        input: this.rule
      }
    },
  },
  methods: {
    show(options) {
      this.content = options.content
      if (Array.isArray(options.rule)) {
        this.rule = options.rule
      }
      if (options.defaultValue != null) {
        this.model.input = options.defaultValue
      }
      // 取出常用的弹窗参数
      let pickModalProps = pick(options, 'title', 'centered', 'cancelText', 'closable', 'mask', 'maskClosable', 'okText', 'okType', 'okButtonProps', 'cancelButtonProps', 'width', 'wrapClassName', 'zIndex', 'dialogStyle', 'dialogClass')
      this.modalProps = Object.assign({}, pickModalProps, options.modalProps)
      // 取出常用的input参数
      let pickInputProps = pick(options, 'placeholder', 'allowClear')
      this.inputProps = Object.assign({}, pickInputProps, options.inputProps)
      // 回调函数
      this.callback = pick(options, 'onOk', 'onOkAsync', 'onCancel')
      this.visible = true
      this.$nextTick(() => this.$refs.input.focus())
    },

    onOk() {
      this.$refs.form.validate((ok, err) => {
        if (ok) {
          let event = {value: this.model.input, target: this}
          // 异步方法优先级高于同步方法
          if (typeof this.callback.onOkAsync === 'function') {
            this.callback.onOkAsync(event)
          } else if (typeof this.callback.onOk === 'function') {
            this.callback.onOk(event)
            this.close()
          } else {
            this.close()
          }
        }
      })
    },
    onCancel() {
      if (typeof this.callback.onCancel === 'function') {
        this.callback.onCancel(this.model.input)
      }
      this.close()
    },

    onInputPressEnter() {
      this.onOk()
    },

    close() {
      this.visible = this.loading ? this.visible : false
    },

    forceClose() {
      this.visible = false
    },

    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    },

    afterClose(e) {
      if (typeof this.modalProps.afterClose === 'function') {
        this.modalProps.afterClose(e)
      }
      this.$emit('after-close', e)
    },

  },
}
</script>

<style scoped>

</style>