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') } }) }) },