Есть ли лучший способ изменить отображение кнопок в javascript / Vue?

Question

После того, как я написал так много, я чувствую себя очень уставшим. Я использую Vue. Следующий код написан в разделе сценария файла vue. Я получаю json из файла, затем читаю значения в json, затем устанавливаю, какая кнопка должна отображаться в зависимости от уровня сотрудника и состояния приложения. Есть ли лучший способ изменить состояние отображения кнопок в Vue?

if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
        (this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        (this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")
    ) {
      this.pullDisplay = true;
    } else {
      this.pullDisplay = false;
    };

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
    ) {
      this.cancelDisplay = true;
    } else {
      this.cancelDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
    ) {
      this.saveDisplay = true;
    } else {
      this.saveDisplay = false;
    };

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
    ) {
      this.reviseDisplay = true;
    } else {
      this.reviseDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
    ) {
      this.sendDisplay = true;
    } else {
      this.sendDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking")
    ) {
      this.approvalDisplay = true;
    } else {
      this.approvalDisplay = false;
    };

А также есть несколько, которые требуют три условия:

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].requestCategory ==
        "External Request" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus ==
        "Pending"
    ) {
      this.returnDisplay = true;
    } else {
      this.returnDisplay = false;
    }

Answer 1

Использование подхода, основанного на конфигурации, сделает ваш код более простым для редактирования и чтения.

const levels = {
  '1': {
    pullDisplayStatus: ['Checking', 'Pending', 'Approved'],
    cancelDisplayStatus: ['Revising'],
    saveDisplayStatus: ['Revising'],
    reviseDisplayStatus: ['Revising'],
    sendDisplayStatus: [],
    approvalDisplayStatus: [],
  },
  '2': {
    pullDisplayStatus: ['Pending', 'Approved'],
    cancelDisplayStatus: [],
    saveDisplayStatus: ['Checking'],
    reviseDisplayStatus: [],
    sendDisplayStatus: ['Checking'],
    approvalDisplayStatus: ['Checking'],
  },
  '3': {
    pullDisplayStatus: ['Approved'],
    cancelDisplayStatus: [],
    saveDisplayStatus: ['Pending'],
    reviseDisplayStatus: [],
    sendDisplayStatus: ['Pending'],
    approvalDisplayStatus: ['Pending'],
  },
}

const jsonForGlobal = this.GLOBAL2.jsonForGlobal;
const currentStatus = jsonForGlobal.detail[this.detailId].currentStatus;
const level = levels[jsonForGlobal.employeeLevel];
this.pullDisplay = level.pullDisplayStatus.indexOf(currentStatus) > -1;
this.cancelDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.saveDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.reviseDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;
this.sendDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;

Answer 2

Если вы часто используете свойство, имеет смысл ввести локальную переменную для его очистки:

 const { employeeLevel, detail: { [this.detailId]: { currentStatus }}} = his.GLOBAL2.jsonForGlobal;

Во-вторых, вам не нужно if / else, вы можете просто присвоить логическое значение:

  this.pullDisplay = (
     employeeLevel == "1" && ["Checking", "Pending", "Approved"].includes(currentStatus) || 
     employeeLevel == "2" && ["Pending", "Approved"].includes(currentStatus) ||
     employeeLevel == "3" && currentStatus == "Approved"
)