zfire-newmall-admin/src/components/template/operation_mixin.js

function setBtnName(name, row) {
  if (!name) {
    return false
  }
  if (typeof name == 'function') {
    return name(row)
  } else if (typeof name == 'string') {
    return name
  }
}

function hasCommonElements(arr1, arr2) {
  for (let i = 0; i < arr1.length; i++) {
    if (arr2.includes(arr1[i])) {
      return true;
    }
  }
  return false;
}

export default {
  data(){
    return {
      pageType:this?.$route?.params?.pageType,
      pageCode:this?.$route?.params?.pageCode,
      pagePam:this?.$route?.params?.pagePam
    }
  },
  methods: {
    optionsEvensAuth(key, obj) {
      var roleItems = this.$route.meta.roleItems
      if (!roleItems || !roleItems.length) {
        return { isRole: false }
      }
      if (key instanceof Array) {
        if (!hasCommonElements(roleItems.map(item => item.code), key)) {
          return { isRole: false }
        } else {
          return typeof obj == 'function' ? obj(roleItems) : obj
        }
      } else {
        var role = roleItems?.find(item => item.code === key)
        if (!role) {
          return { isRole: false }
        } else {
          return typeof obj == 'function' ? obj(role) : { name: role.moduleName, ...obj }
        }
      }
    },
    operationBtn(opt = {}) {
      var roleItems = this.$route.meta.roleItems
      return (...p) => {
        if (!roleItems || !roleItems.length) {
          return null
        }
        return (
          <div class="operation-btns">
            {Object.keys(opt)
              .filter(key => (opt[key]?.click ? true : false))
              .map(key => {
                return (h, { row, index, column }) => {
                  var role = roleItems?.find(item => item.code === key)
                  if (opt[key]?.prompt) {
                    return role && (opt[key]?.conditions ? opt[key]?.conditions({ row, index, column }) : true) ? (
                      <el-popconfirm
                        title={setBtnName(opt[key]?.prompt, { row, index, column })}
                        onConfirm={() => {
                          opt[key]?.click({ row, index, column })
                        }}
                      >
                        <el-button size="mini" type={opt[key]?.btnType || 'text'} slot="reference">
                          {setBtnName(opt[key]?.name, { row, index, column }) || role.moduleName}
                        </el-button>
                      </el-popconfirm>
                    ) : null
                  } else {
                    return role && (opt[key]?.conditions ? opt[key]?.conditions({ row, index, column }) : true) ? (
                      <el-button
                        size="mini"
                        type={opt[key]?.btnType || 'text'}
                        onClick={() => {
                          opt[key]?.click({ row, index, column })
                        }}
                      >
                        {setBtnName(opt[key]?.name, { row, index, column }) || role.moduleName}
                      </el-button>
                    ) : null
                  }
                }
              })
              .map(fun => fun(...p))}
          </div>
        )
      }
    }
  }
}