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')
          }
        })
      })
    },
相关文章
|
3月前
|
数据采集 Java API
深度解析:爬虫技术获取淘宝商品详情并封装为API的全流程应用
本文探讨了如何利用爬虫技术获取淘宝商品详情并封装为API。首先介绍了爬虫的核心原理与工具,包括Python的Requests、BeautifulSoup和Scrapy等库。接着通过实战案例展示了如何分析淘宝商品页面结构、编写爬虫代码以及突破反爬虫策略。随后讲解了如何使用Flask框架将数据封装为API,并部署到服务器供外部访问。最后强调了在开发过程中需遵守法律与道德规范,确保数据使用的合法性和正当性。
|
3月前
|
JSON 数据可视化 API
产品经理的技术必修课:四步掌握API设计核心逻辑
产品经理的技术必修课:四步掌握API设计核心逻辑
195 83
|
30天前
|
人工智能 API 定位技术
MCP 开发实战:手把手教你封装高德地图与 arXiv API
本教程为 MCP(Model Context Protocol)开发实战第二阶段,带你从零封装第三方 API 为 AI 模型可用工具。通过高德地图地理编码与 arXiv 论文检索两个实例,涵盖项目搭建、工具声明、资源定义、错误处理等核心内容,助你快速上手 MCP 开发并集成至 Claude 使用。
|
1月前
|
安全 API 区块链
数据资产化新范式:API如何重构企业增长逻辑?
在数字经济时代,数据已成为企业核心资产,而API作为连接数据与业务的桥梁,正驱动企业释放数据价值、实现业务增长。本文通过电商、金融、医疗与政务领域的典型案例,解析API如何助力企业提升效率、优化服务、拓展生态,并探讨其商业价值实现路径与未来趋势。
数据资产化新范式:API如何重构企业增长逻辑?
|
2月前
|
缓存 安全 前端开发
3个月GMV破5000万:揭秘某家居品牌靠API接口逆袭的底层逻辑
本文详解如何利用电商API从零搭建定制化商城,涵盖需求分析、技术选型、开发流程与安全优化,并结合实战案例,助力中小商家突破竞争,实现高效电商转型。
|
4月前
|
数据采集 安全 大数据
Dataphin 5.1:API数据源及管道组件升级,适配多样化认证的API
为提升API数据交互安全性,Dataphin 5.1推出两种新认证方式:基于OAuth 2.0的动态授权与请求签名认证。前者通过短期Access Token确保安全,后者对关键参数加密签名保障数据完整性。功能支持API数据源OAuth 2.0认证和自定义签名配置,未来还将拓展更灵活的认证方式以满足多样化需求。
165 14
|
缓存 测试技术 API
API的封装步骤流程
API封装流程是一个系统化的过程,旨在将内部功能转化为可复用的接口供外部调用。流程包括明确需求、设计接口、选择技术和工具、编写代码、测试、文档编写及部署维护。具体步骤为确定业务功能、数据来源;设计URL、请求方式、参数及响应格式;选择开发语言、框架和数据库技术;实现数据连接、业务逻辑、错误处理;进行功能、性能测试;编写详细文档;部署并持续维护。通过这些步骤,确保API稳定可靠,提高性能。
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
10月前
|
前端开发 JavaScript API
探究 React Hooks:如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法,通过全新API优化组件逻辑复用和状态管理,提升开发效率和代码可维护性。
|
12月前
|
API PHP
ThinkPHP 通用的API格式封装
本文介绍了在ThinkPHP框架中如何统一封装API返回格式的方法,包括创建状态码枚举类、编写统一格式化函数以及在BaseController和Error控制器中重写`__call`方法来处理不存在的方法或控制器调用,以实现统一的错误处理和返回格式。
ThinkPHP 通用的API格式封装