让世界变的美丽

想必大家都有过这样的经历 页面会有许多按钮 然后这些按钮需要通过一些后端返回的字段来做显隐藏
第一种做法：平铺到页面上 挨个判断 类似下面这样

      
      提交
      编辑
      撤回
      提交
      驳回
      设置执行人
      返回

现在看着还算工整 但一旦按钮多起来 判断多起来 然后整个页面就花了 人也就疯了 就算是加上注释 也于事无补 甚至注释也会变成一种负担
第二种：换汤不换药

      
      
      
      
      返回

怎么说呢 就像if else换成了swich 也就是看着得劲了 糊弄糊弄自己罢了
第三种：策略模式

      
      
      返回
      
  computed: {
    buttons() {
      const _this = this;
      const { status } = this.info;
      const qc = "起草";
      const sh = "审核";
      const qs = "签署";
      const buttonPermissions = {
        [qc]: {
          submit: {
            text: "提交",
            fn: _this.submit
          },
          edit: {
            text: "编辑",
            fn: _this.edit
          },
          revoke: {
            text: "撤回",
            fn: _this.revoke
          },
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        },
        [sh]: {
          agree: {
            text: "提交",
            fn: _this.agree
          },
          reject: {
            text: "驳回",
            fn: _this.reject
          },
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        },
        [qs]: {
          setWorker: {
            text: "设置执行人",
            fn: _this.setWorker
          }
        }
      };
      return buttonPermissions[status] || {};
    }
  },

这样做是不是就好了很多 把逻辑从页面里抽出来 放在js里 这样页面也变的清晰了 逻辑也统一到了一块 维护起来也方便了很多
对了 这里顺便感谢一个我楠哥（后端）
哈哈