AnalysisSystemForRadionuclide_vue/src/components/CustomModal/index.vue

<template>
  <a-modal v-bind="$attrs" v-model="visible" :title="title" :footer="null">
    <slot></slot>
    <a-space v-if="showFooter" class="operators" :size="20">
      <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
      <a-button type="warn" @click="onCancel">Cancel</a-button>
    </a-space>
  </a-modal>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean
    },
    okHandler: {
      type: Function
    },
    title: {
      type: String
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: this.value,
      confirmLoading: false
    }
  },
  watch: {
    visible(val) {
      this.$emit('input', val)
    },
    value(val) {
      this.visible = val
    }
  },
  methods: {
    async onSave() {
      if (this.okHandler instanceof Function) {
        try {
          this.confirmLoading = true
          await this.okHandler()
          this.visible = false
        } catch (error) {
          console.error(error)
        } finally {
          this.confirmLoading = false
        }
      } else {
        this.visible = false
      }
    },
    onCancel() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.operators {
  width: 100%;
  justify-content: center;
  .ant-btn {
    width: 92px;
  }
}
</style>