增加一个功能在按下确定按钮后出现一个二次弹窗你确定提交吗取消确定，再按下确定后提交

为了实现您所描述的功能，在按下“确定”按钮后显示一个确认对话框（二次弹窗），您可以使用 Vue.js 中的 `this.$confirm` 方法来添加这个功能。以下是修改后的代码示例：

### 修改前的代码

<template>
  <a-drawer 
    :title="title" 
    :width="width" 
    placement="right" 
    :closable="false" 
    @close="close" 
    class="stockMeterBaseDrawer" 
    :visible="visible"
  >
    <StockMeterAddForm ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></StockMeterAddForm>
    <div class="drawer-footer">
      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">确定</a-button>
      <a-button @click="handleCancel" style="margin-bottom: 0;">取消</a-button>
    </div>
  </a-drawer>
</template>

<script>
import StockMeterAddForm from './StockMeterAddForm.vue'
export default {
  name: 'StockMeterBaseDrawer',
  components: { StockMeterAddForm },
  data() {
    return {
      title: "操作",
      width: '100%',
      visible: false,
      disableSubmit: false
    }
  },
  methods: {
    add() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.add();
      });
    },
    edit(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.edit(record);
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    submitCallback() {
      this.$emit('ok');
      this.visible = false;
    },
    handleOk() {
      this.$refs.realForm.submitForm();
    },
    handleCancel() {
      this.close();
    }
  }
}
</script>

### 修改后的代码

<template>
  <a-drawer 
    :title="title" 
    :width="width" 
    placement="right" 
    :closable="false" 
    @close="close" 
    class="stockMeterBaseDrawer" 
    :visible="visible"
  >
    <StockMeterAddForm ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></StockMeterAddForm>
    <div class="drawer-footer">
      <a-button v-if="!disableSubmit" @click="showConfirm" type="primary" style="margin-bottom: 0;">确定</a-button>
      <a-button @click="handleCancel" style="margin-bottom: 0;">取消</a-button>
    </div>
  </a-drawer>
</template>

<script>
import StockMeterAddForm from './StockMeterAddForm.vue'
export default {
  name: 'StockMeterBaseDrawer',
  components: { StockMeterAddForm },
  data() {
    return {
      title: "操作",
      width: '100%',
      visible: false,
      disableSubmit: false
    }
  },
  methods: {
    add() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.add();
      });
    },
    edit(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.edit(record);
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    submitCallback() {
      this.$emit('ok');
      this.visible = false;
    },
    showConfirm() {
      this.$confirm({
        title: '确认提交？',
        content: '您确定要提交吗？',
        onOk: () => {
          this.handleOk();
        },
        onCancel: () => {
          // 用户点击取消时的处理逻辑
        }
      });
    },
    handleOk() {
      this.$refs.realForm.submitForm();
    },
    handleCancel() {
      this.close();
    }
  }
}
</script>

### 主要改动点
1. **新增 `showConfirm` 方法**：该方法用于显示确认对话框，并在用户点击“确定”时调用 `handleOk` 方法。
2. **修改 `handleOk` 按钮的点击事件**：将原来的直接调用 `handleOk` 改为调用 `showConfirm` 方法。

这样，当用户点击“确定”按钮时，会先显示一个确认对话框，用户再次确认后才会执行表单提交操作。