buttonGrouop.vue

<template>
  <div ref="btnGroup" class="btngroup-container" :style="btnContainerStyle">
    <ButtonGroup v-if="buttonShow" class="button-group">
      <div v-for="(item, index) in btnGroup" :key="index">
        <gms-button :define="item.buttonDefine" :context="context" :billStateDisable="item.billStateDisable"></gms-button>
        <Divider type="vertical" />
      </div>
    </ButtonGroup>
  </div>
</template>
<script>
const ACTIONS = GMS.getContext().getEmconCollector().getElements('billAction')
const iconMap = {
  'CW_createBill': '#icon-a-16_GJ_A_rbc_xinjian',
  'CW_editBill': '#icon-a-16_GJ_A_rbc_bianji',
  'CW_deleteBill': '#icon-a-16_GJ_A_rbc_shanchu',
  'CW_tempSave': '#icon-a-16_GJ_A_rbc_zancun',
  'CW_saveAction': '#icon-a-16_GJ_A_rbc_baocun',
  'CW_submitAction': '#icon-a-16_GJ_A_rbc_tijiao',
  'first': '#icon-shouzhang',
  'upward': '#icon-shangyizhang',
  'down': '#icon-xiayizhang',
  'last': '#icon-mozhang',
  'CW_printAction': '#icon-a-16_GJ_A_rbc_dayin1',
  'CW_rejectAction': '#icon-a-16_GJ_A_rbc_bohui',
  'CW_agreeAction': '#icon-a-16_GJ_A_rbc_tongyi',
  'CW_closeAction': '#icon-a-16_GJ_A_rbc_guanbi'
}
export default {
  inject: ['tmpBill'],
  props: ['define', 'context'],
  data() {
    return {
      btnContainerStyle: {
        position: '',
        top: '',
        bottom: ''
      },
      btnGroup: [],
      workflowState: 0,
      buttonShow: true
    }
  },
  watch: {
    'tmpBill.state': {
      handler() {
        this.getBtnGroup()
      },
      immediate: true,
    },
    'tmpBill.type': {
      handler(nv) {
        if (nv === 'draftLoad') {
          this.buttonShow = false
        }
      },
      immediate: true
    },
    'tmpBill.$attrs.hideButtonGroup': {
      handler(nv) {
        if (nv) {
          this.buttonShow = false
        }
      },
      immediate: true
    },
  },

  mounted() {
    // 判断是否在typesBill组件中
    const location = this.define.layout.adsorption === 'bottom' ? 'bottom' : 'top'
    if (this.checkParent()) {
      if (location === 'top') {
        this.btnContainerStyle = {
          position: 'fixed',
          top: '36px',
        }
      } else {
        this.btnContainerStyle = {
          position: 'fixed',
          bottom: '0px',
        }       
      }
    } else {
      this.btnContainerStyle = {
        position: 'absolute',
        [location]: '0px',
      } 
    }
    // 监听工作流状态改变
    GMS.vbus.$on("workflow-state-change", this.handleWorkflowStateChange)
  },
  beforeDestroy() {
    GMS.vbus.$off("workflow-state-change", this.handleWorkflowStateChange);
  },
  methods: {
    handleWorkflowStateChange(val) {
      this.workflowState = val
      this.getBtnGroup()
    },
    checkParent() {
      let curNode = this.$refs.btnGroup
      while (curNode) {
        if (!curNode.nodeName) break
        if (curNode.nodeName.toLowerCase() == 'body') break
        if (curNode.classList.contains('initHeight')) return true
        curNode = curNode.parentNode
      }
      return false
    },
    getBtnGroup() {
      const keys = this.define.config ? this.define.config.btnConfig : []
      this.btnGroup = keys.map((item) => {
        let btnConfg = {
          buttonDefine: {
            config: {
              action: 'ButtonControl_1_action_gams',
              size: 'default',
              text: '关闭',
              type: 'text',
              leftIcon: ''
            },
            layout: {},
            name: 'ButtonControl_1',
            title: '关闭',
            except: true
          },
          billStateDisable: false
        }
        btnConfg.buttonDefine.config.action = this.define.config.action + item
        btnConfg.buttonDefine.config.text =
          this.define.btnGroupAction &&
          this.define.btnGroupAction[item] &&
          this.define.btnGroupAction[item].btnName
            ? this.define.btnGroupAction[item].btnName
            : ACTIONS[item].title.substring(
                ACTIONS[item].title.indexOf('_') + 1,
                ACTIONS[item].title.indexOf('[')
              )
        btnConfg.buttonDefine.config.leftIcon =
          this.define.btnGroupAction &&
          this.define.btnGroupAction[item] &&
          this.define.btnGroupAction[item].btnIcon? this.define.btnGroupAction[item].btnIcon: iconMap[item]
        btnConfg.billStateDisable = this.getBillStateDisable(
          ACTIONS[item].btnDisable, item
        )
        btnConfg.buttonDefine.name = this.define.config.action + item
        return btnConfg
      })
    },
    getBillStateDisable(val, btnItem) {
      let disableState = val.split(";");
      const getBillState = () => {
          if (this.tmpBill.state === "") {
            return disableState.includes("billEdit");
          } else if (this.tmpBill.state === "readOnly") {
            return disableState.includes("billReadOnly");
          } else {
            return false;
          }
      };
      if (//不走工作流的情况下，执行自定义的按钮禁用状态
        this.define.btnGroupAction &&
        this.define.btnGroupAction[btnItem] &&
        this.define.btnGroupAction[btnItem].disArr &&
        this.define.btnGroupAction[btnItem].disArr.length > 0
      ) {
        let arr = this.define.btnGroupAction[btnItem].disArr;
        let flag = false;//不禁用
        for(let i=0;i<arr.length;i++){
          let valueArr = arr[i].value.split(";");
          let billField = this.context.bill.getMasterData().getValue(arr[i].key.split('.')[1]);
          if(valueArr.includes(billField)){
            flag = true;//禁用
            break;
          }
        }
        return flag || getBillState();
      } else {
        if (!val) return false;
        let approveState = null;
        if (this.workflowState === 0) {
          approveState = this.context.bill
            .getMasterData()
            .getValue("billState");
        } else {
          approveState = this.workflowState;
        }
        
        // 配置工作流已提交未审批90, billReadOnly状态下可用
        // 主要用于保存在审批状态下可用，审批还能修改··
        if (
          this.define.btnGroupAction &&
          this.define.btnGroupAction[btnItem] &&
          this.define.btnGroupAction[btnItem].isApprove
        ) {
          disableState = disableState.filter((item) => {
            if (item === "90") {
              return false;
            } else {
              return true;
            }
          });
        }
        switch (approveState) {
          case 90: // 待审批
            return disableState.includes("90");
          case 91: // 被驳回
            return disableState.includes("91") || getBillState();
          case 92: // 审批完成
            return disableState.includes("92");
          case 1: // 已暂存
            return disableState.includes("1") || getBillState();
          case 2: // 已保存
            return disableState.includes("2") || getBillState();
          default:
            return getBillState();
        }
      }
    },
  },
}
</script>
<style scoped lang="less">
.btngroup-container {
  width: 100% !important;
  position: absolute;
  left: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  /deep/ .dy-button {
    margin: 0;
    .ivu-tooltip-rel {
      .ivu-btn {
        margin: 0;
        padding: 0 5px;
      }
    }
    .ivu-btn {
      padding: 0 5px;
    }
    .ivu-btn-text:focus {
      box-shadow: none;
    }
  }

  .button-group {
    display: flex;
    padding: 0 10px;
    /deep/ .ivu-divider, .ivu-divider-vertical {
      height: 1.3em;
      top: 0;
    }
  }
}
</style>