基于Vue2后台管理系统项目中封装公共方法mixins（一）

通过一些后台管理系统框架学习了一些Vue2的封装思想，自己尝试去在项目中封装一些公共方法。

//混入中data数据
data() {
    return {
      page: 1,
      total: 0,
      pageSize: 10,
      tableData: [],
      searchInfo: {},
      //表格多选的信息收集
      ids: [],
      //修改或新增时标题
      title: '',
      //弹框的显隐
      addOrUpdateDialogVisible: false,
      //点击修改传入的id
      updateId: ''
    }
  },

父组件刷新

我的思路是在混入中提供refresh方法，并在混入中使用provide，将该方法注入给子孙等需要的组件中

//在组件中引入
import {getDataInfos} from '@.....'
refresh() {
      this.getDataInfos();
}

新增和修改

新增和修改被我抽成子组件了，新增和修改功能大同小异，无非是修改的时候需要提供一个id来回显数据。因此这里方式比较多，我的思路①是提供一个公共方法addOrUpdateHandler（payload）并接受一个对象，paoload中提供一些标题信息title来修改子组件表单的title，在方法中做判断如果是的修改则通过refs获取子组件身上的回显数据的方法，如果是修改则调用子组件身上清空表单的方法。②通过vuex实现，（但觉得没太大必要，毕竟只涉及父子之间通信）但思路是，如果是修改可以dispatch发送请求然后获取数据，子组件内通过watch监听vuex中对应状态的变化，当发生变化回显即可。

//在模板中
@click="addOrUpdateHandler({title:'新增'})"
@click="addOrUpdateHandler({title:'修改',scope})"
//在methods中
addOrUpdateHandler(payload,ids='') {
      console.log(payload,ids)
      this.addOrUpdateDialogVisible = true
      this.title = payload.title.concat(payload.name?payload.name:'')
      if (payload.title === '修改') {
        //回显数据
        this.$refs.updateOrAdd.getDataInfos(ids)
      } else {
        //新增清空操作
        this.$refs.updateOrAdd.addInit()
      }
},

提示信息的封装

这个比较简单，而且在后台管理系统中使用很多。包括提示信息的notify的封装也是类似

 success_or_faild(res) {
      if (res.code === 0) {
        this.$message.success(res.msg)
        return true
      } else {
        this.$message.error(res.msg)
        return false
      }
},

表格的点击事件的封装

如果表格支持多选，就可以使用，即使是树形结构也可以，

data(){
	return{
		ids:[]
	}
}
     //表格选中改变
    tableSelectChangeHanler(rows) {
      this.ids = rows
      this.ids = [...new Set(this.ids)]
      console.log(this.ids)
    },
    //取消勾选状态
    toggleRowSelection(selection, data) {
      if (data.children) {
        data.children.forEach(val => {
          this.$refs.multipleTable.toggleRowSelection(val, false);
          if (val.children) {
            this.toggleRowSelection(selection, val)
          }
        })
      }
    },
    //表格全选
    tableSelectAllHandler(selection) {
      if (selection && selection.length === this.tableData.length) {  
        selection.forEach(element => {
          this.tableSelectHandler(selection,element);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    tableSelectHandler(selection, row) {
      if(selection.find(val => {
        return val.id === row.id
        } )){
        if(row.children){
          row.children.forEach(val=>{
            this.$refs.multipleTable.toggleRowSelection(val, true);
             selection.push(val)
            if(val.children){
              this.tableSelectHandler(selection,val)
            }
          })
        }
      }else{
        this.toggleRowSelection(selection,row)
      }
    },

分页接口的封装

思路 将axios请求传给listApi，然后每个组件调用时候给listApi相应接口就行

import getDataInfo from '@......'
data(){
	return{	
		listApi:getDataInfo,
	}
}
handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
},
    handleCurrentChange(val) {
      this.page = val
      this.getTableData()
},
async getTableData(page = this.page, pageSize = this.pageSize) {
      const table = await this.listApi({ page, pageSize, ...this.searchInfo })
      if (table.code === 0) {
        this.tableData = table.data.list
        this.total = table.data.total
        this.page = table.data.page
        this.pageSize = table.data.pageSize
      }
},

对于表单相关操作的封装

思路：首先保证命名一致才行

addInit() {
            this.$nextTick(() => {
                this.$refs.form.resetFields()
            })
},
//表单退出前的回调
handleClose() {
            this.$refs.form.resetFields()
            this.$emit('update:addOrUpdateDialogVisible', false)
},
//点击取消
cancel() {
            this.$refs.form.resetFields()
            this.$emit('update:addOrUpdateDialogVisible', false)
},
confirm() {
            this.$refs.form.validate(async valid => {
                if (!valid) {
                    this.$message.warning('必填项不能为空或不符合规范')
                    return
                }
                let res = await this.submitInfo(this.form,this.title.includes('新增'))
                if (this.success_or_faild(res)) {
                    this.$refs.form.resetFields()
                    this.$emit('update:addOrUpdateDialogVisible', false)
                    this.hasUpload()
                    this.$emit('refresh')
                }
            })
 },

//父组件点击修改子组件回显
//回显信息
async getDataInfos(id) {
            let res = await getDataInfo({ 'key': id })
            if (this.success_or_faild(res)) {
                this.form = res.data
            }
            console.log(res)
 },
props: {
        addOrUpdateDialogVisible: {//新增修改弹框的显影
            type: Boolean,
            default: false
        },
        title: {//标题
            type: String,
            default: '新增'
        },
},

按钮鉴权自定义指令的封装

自定义指令本是为了操作原生DOM的，但是有时候在表格内部的操作按钮权限容易出现一些问题，因此考虑了一下也没必要移除DOM，例如判断权限问题，使用的时候加修饰符not直接回隐藏掉该按钮，

// 权限按钮展示指令
import { store } from '@/store'
export const auth = (Vue) => {
  Vue.directive('auth', {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function(el, binding) {
      const userInfo = store.getters['user/userInfo']
      let type = ''
      console.log(userInfo,'获取用户的信息')
      switch (Object.prototype.toString.call(binding.value)) {
        case '[object Array]':
          type = 'Array'
          break
        case '[object String]':
          type = 'String'
          break
        case '[object Number]':
          type = 'Number'
          break
        default:
          type = ''
          break
      }
      if (type === '') {
        /* eslint-disable */
            console.error("v-auth必须是Array,Number,String属性,暂不支持其他属性")
            /* eslint-enable */
        return
      }
      //自定义指令接受的参数
      const waitUse = binding.value.toString().split(',')
      let flag = waitUse.some(item => item === userInfo.authorityId)
      if (binding.modifiers.not) {
        flag = !flag
      }
      if (!flag) {
        el.style.display = 'none'
      }
      
    }
  })
}

如果有不足请指正，欢迎分享一些封装方法的经验，会不断总结一些封装方法。