avue 自定义按钮如何配置能有 自带的更新按钮对应的功能

Blade 未结 3 2653
85553017
85553017 剑圣 2020-10-12 13:29

一、该问题的重现步骤是什么?

1. avue定义按钮:如:

@row-update="rowUpdate"

2. 自定义按钮:如:

<template slot-scope="scope" slot="menuForm">
  <el-button type="primary"
             size="mini"
             v-if="permission.orderstart_edit"
             plain
             @click.stop="handleSubmitOrder(done)">提交订单
  </el-button>
</template>

3.

二、你期待的结果是什么?实际看到的又是什么?

1、自定义按钮,如何使用 loading,done,默认按钮可以直接使用,请问如何调用

2、自定义按钮,执行的时候,rules不校验,默认按钮可以直接校验,请问如何调用

3、参考代码:

handleSubmitOrder(done) {
  //console.log(this);
  //this.$refs.crud.validate(this.form);
  let _this99 = this;
  this.$refs.crud.validate(function (valid) {
    if (valid) {
      _this99.updateToOrder(done);
      _this99.loading = false;
      done();
    } else {
      _this99.$message.warning("请检查填写内容");
      return;
    }
  });
},
updateToOrder(done){
  this.$confirm("确定提交,销售预算单变更为销售合同?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    this.form.orderType = 1;
    this.form.orderStatus = 2;
    this.form.sellStatus = 2;
    this.form.purchasechannels = 1;
    this.form.purchaseLocation = 1;
    this.form.newDate = dateFormat(new Date());
    const vo = {
      order: this.form,
      orderDetailList: this.orderSubData
    };
    saveorupdateVO(vo).then(res => {
      const result = res.data;
      if (result.success) {
        this.onLoad(this.page);
        this.$refs.crud.$refs.dialogForm.closeDialog();
        this.$message.success(result.msg);
      } else {
        this.$message.error(result.msg);
        this.loading = false;
      }
    })
  })
    .catch(() => {
      this.$message({
        type: "info",
        message: "已取消退出"
      });
      //this.loading = false;
      console.log(this)
      //this.hide()
      done();
      return;
    })
},

4、目前有仍有一个问题,点击提交订单的弹出框,有一个取消按钮,点击后会转圈

如图:

image.png

三、你正在使用的是什么产品,什么版本?在什么操作系统上?

avue2.6.17 ,商业最高版本

四、请提供详细的错误堆栈信息,这很重要。

vue.js:634 [Vue warn]: Property or method "done" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
      <Index> at src/page/index/index.vue
        <App> at src/App.vue
          <Root>
orderstart.vue?f507:1776 Uncaught (in promise) TypeError: done is not a function
    at eval (orderstart.vue?f507:1777)
    at r (avue.min.js:7)
    at avue.min.js:7

五、若有更多详细信息,请在下面提供。

3条回答
  • 看下avue的自定义表单和自定义按钮的文档


    https://avuejs.com/doc/crud/crud-formslot


    https://avuejs.com/doc/crud/crud-btn

    5 讨论(1)
  • 2021-03-10 16:19

    楼主是否解决了此问题?

    1 讨论(0)
  • 2022-05-27 17:31

    弹窗表单配置 | Avue (avuejs.com)


    参照着不关窗连续增加的示例,来实现,在函数里先改一下标志变量,再调用原生函数,在原生函数内,根据标识增加自定义的代码。


    handleNext(){
            this.flag=true;
            this.$refs.crud.rowSave()
          },
          rowSave(form,done,loading){
             this.data.push(this.deepClone(this.form))
             this.$message.success(JSON.stringify(this.form))
              if(this.flag){
                this.flag=false;
                loading()
                this.form.name="";
                this.form.sex="";
                return 
              }
              done()
          },


    1 讨论(0)
提交回复