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

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

需求：
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: "通过",
          id: "003",
          isShow: false,
          status: ["N","A"],
          click: function () {
          },
        },
        {
          src: "",
          name: "添加联系人",
          isShow: false,
          id: "018",
          status: ["N","C"],
          click: function () {
          },
        },
        },
 //2.判断显示在UI视图的动作
  setStatus() {
      //2.1验证权限：这个员工是否有操作这些动作的权限
      let flag = false;
      this.statusLine = this.statusLine.filter((item) => {
        return checkOperationPermission(item.id);  //验证权限 这个方法在utils.js里面统一管理的 
      });
	  //2.2 遍历初始化的每一个底部动作
      this.statusLine.forEach((item) => {
         //some 方法 只要这个单据的status 在某个动作的status[]列表中 flag=true
        flag = item.status.some((state) => {
          return state === this.detail.status;  
        });
        //正在遍历的这个底部动作的isShow=true/false
        flag ? (item.isShow = true) : (item.isShow = false);
      });
	   //2.3将isShow=true的动作展示到UI视图层
      this.statusBar = this.statusLine.filter((item) => {
        return item.isShow;
      });
    },
    }
}

util.js

//验证权限的方法
export function checkOperationPermission(id) {  //404141014
  const allowOperationList = uni.getStorageSync("allow_OperationList");
  let flag = false;
  if (allowOperationList) {
    allowOperationList.forEach((operation) => {
    //1.id是数组的情况
      if (Array.isArray(id)) {   //id是数组吗？
        id.forEach((item) => {
          if (item == operation.id) {
            flag = true;
          }
        });
      }
      //2.id就是一个字符串
      if (id == operation.id) {  //如果statusLine 里面的对象也存在于缓存中
        flag = true;
      }
    });
  }
  //无id
  if(!id){
	  flag = true;
  }
  return flag;
}