API函数式组件封装逻辑

简介: API函数式组件封装逻辑

API式业务逻辑

import Vue from 'vue'
import Examines from './index.vue'
const ExaminesConstructor = Vue.extend(Examines)
const instance = new ExaminesConstructor({
  el: document.createElement('div')
})
// 审核状态 审核通过默认1 不通过0
const examines = function(title, statue = "1,0") {
  return new Promise((resolve, reject) => {
    instance.visible = true
    instance.title = title || '审核'
    document.body.appendChild(instance.$el)
    //提交按钮的业务逻辑
    instance.submit = function(data) {
      const statueOptions = statue.split(',')
      if (data.data.statue === '1') {
        data.data.statue = statueOptions[0]
      } else {
        data.data.statue = statueOptions[1]
      }
      resolve(data)
      // instance.closed()
    }
    instance.closed = function() {
      instance.visible = false
      reject()
    }
  })
}
export default examines

具体的业务根据需求调整 可嵌入报表、表格、表单详情页等


模板页面【此处放置的是一个审核弹窗业务】

<template>
  <MyAudit v-model="visible" :dialog-title="title" @submit="submit" />
</template>
<script>
import MyAudit from '@/components/MyAudit' // 审核弹框
export default {
  components: { MyAudit },
  data() {
    return {
      content: '',
      visible: false,
      title: ''
    }
  },
  methods: {
    closed() {
      this.content = ''
      this.visible = false
    },
    submit() {},
  },
}
</script>

挂载函数


main.js

import examines from '@/components/Examines/index.js' // 审核
Vue.prototype.$examines = examines

函数调用【函数为Promise】

this.$examines('测试', {}).then(({{ data, fn }}) => {
  //回调数据data
  // 关闭函数 fn                             
})


例如:

    auditClick(row) {
      if (!row.acm099) return this.$message.warning('请先选择数据!')
      this.$examines('业务主管领导审核').then(({ data, fn }) => {
        const params = {
          acm099: row.acm099,
          aae016: data.statue === '0' ? '4a' : '4',
          aae013: row.aae013,
          oldaae016: '3,5a',
        }
        saveAccountingAudit(params).then((res) => {
          if (res.code === 0) {
            this.search()
            fn(res.message, 'success')
          } else {
            fn(res.message, 'error')
          }
        })
      })
    },
相关文章
|
21天前
|
缓存 前端开发 API
API接口封装系列
API(Application Programming Interface)接口封装是将系统内部的功能封装成可复用的程序接口并向外部提供,以便其他系统调用和使用这些功能,通过这种方式实现系统之间的通信和协作。下面将介绍API接口封装的一些关键步骤和注意事项。
|
4月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
38 3
|
14天前
|
API
[组件封装]API式调用-封装一个审核意见的组件Comments
[组件封装]API式调用-封装一个审核意见的组件Comments
11 0
|
2月前
|
Java API
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)(三)
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)
24 0
|
2月前
|
存储 设计模式 监控
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)(二)
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)
27 0
|
2月前
|
存储 算法 Java
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)(一)
【底层服务/编程功底系列】「手把手教学系列」带你打造一个属于自己的规则引擎服务,打破任何业务难题(逻辑模型和API设计)
30 1
|
2月前
|
编译器 API C++
【C++ 动态库设计】动态库中的模板函数:解决如果将模板函数封装成API库
【C++ 动态库设计】动态库中的模板函数:解决如果将模板函数封装成API库
50 0
|
2月前
|
前端开发 API 数据处理
uni-app 封装api请求
uni-app 封装api请求
15 0
|
2月前
|
JavaScript API
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
30 3
|
3月前
|
缓存 监控 测试技术
ERP系统对接方案与API接口封装系列(高并发)
企业资源规划(ERP)系统是现代企业管理的核心,它集成了企业内部的各个部门和业务流程。为了实现ERP系统与其他外部系统或应用程序之间的数据交换和协作,需要对接方案。API(应用程序编程接口)是实现系统对接的常用方法之一。