uni-app 项目不同状态的单据显示不同状态的底部操作按钮

最新推荐文章于 2023-09-19 20:19:58 发布

惠惠子~

最新推荐文章于 2023-09-19 20:19:58 发布

阅读量707

点赞数

文章标签： uni-app vue javascript

本文链接：https://blog.csdn.net/Gao_Chuanhui/article/details/115541645

版权

本文介绍如何在uni-app项目中，根据单据的不同状态（如新建、待审核、审核通过等）显示相应操作按钮。内容包括如何实现按钮的动态加载，以及考虑员工权限对按钮显示的影响。示例代码分别在detail.js和util.js中给出。

摘要由CSDN通过智能技术生成

需求：
1.不同的单据比如申请购买某物品存在不同的状态：新建待审核审核通过下达取消等等不同状态的单据细节页面的底部可能有不同的操作按钮，比如新建的单据底部的操作可以是：通过审核，取消，添加协助人等等往往这些按钮是可以在不同细节页面重复使用的
2.有些员工因为权限限制，只能在他的页面显示某些操作按钮

页面展示：
在这里插入图片描述

逻辑
detail.js

import {
    checkOperationPermission} from "@/lib/util.js";
export default{
   
data(){
   
return {
   
   statusBar:[],
   statusLine:[]
}
}
onLoad{
   
this.setStatusLine()
},
methods:{
   
//1.初始化设置全部的底部动作
      setStatusLine() {
   
      let _this = this;
      this.statusLine = [
        {
   
          src: "",
          name: "通过"</