模版条件判断语句

• 在vue模版中，一般在使用条件判断时，为增强代码可读性，应该单独定义条件判断的属性，并增加详细的代码注释，避免通过多个条件来进行判断

错误示例：

<template>
  <!-- 条件判断语句中有多个判断条件，代码可读性差 -->
  <el-button size="small" :disabled="reportInfo.submitStatus !== AGENCY_STATE.SUBMIT && reportType === REPORT_TYPE.REPORT_REMARK && reportInfo.tbsmStatus === 2" v-if="reportType === REPORT_TYPE.REPORT_REMARK && reportInfo.tbsmStatus === 1" @click="onCancelConfirm">
    <v-svg type="bs-cancel" :disabled="reportInfo.submitStatus !== AGENCY_STATE.SUBMIT && reportType === REPORT_TYPE.REPORT_REMARK && reportInfo.tbsmStatus === 2"></v-svg> 取消确认
  </el-button>
</template>

正确示例：

<template>
  <el-button size="small" :disabled="cancelConfirmDisabled" @click="onCancelConfirm" v-if="cancelConfirmVisible">
    <v-svg type="bs-cancel" :disabled="cancelConfirmDisabled"></v-svg> 取消确认
  </el-button>
</template>
<script>
export default {
  computed: {
    /**
     * 确认按钮是否禁用
     * 1、如果单位已经是上报状态，则需要禁用
     * 2、如果当前报告类型是报告说明，且报告说明确认了，则不可以再次确认
     * 3、如果当前报告类型是决算分析报告，且决算分析报告确认了，则不可以再次确认
     */
    confirmDisabled() {
      let { submitStatus, tbsmStatus, jsfxbgStatus } = this.reportInfo;
      if (submitStatus !== AGENCY_STATE.SUBMIT) {
        if (this.reportType === REPORT_TYPE.REPORT_REMARK) {
          return tbsmStatus === 1;
        } else {
          return jsfxbgStatus === 1;
        }
      } else {
        return true;
      }
    },
    /**
     * 取消确认按钮是否显示
     * 1、如果不包含附件，则并且当前报告类型的报告已确认，则需要显示
     */
    cancelConfirmVisible() {
      if (!this.hasAttachment) {
        let { tbsmStatus, jsfxbgStatus } = this.reportInfo;
        if (this.reportType === REPORT_TYPE.REPORT_REMARK) {
          return tbsmStatus === 1;
        } else {
          return jsfxbgStatus === 1;
        }
      } else {
        return false;
      }
    },
  },
};
</script>