vue2 mixin 表格混合器 快速开发

mixin 表格混合器

例子基于 elementUI

export default {
  data() {
    return {
      // 配置调用的api
      api: {
        getList: '',
        addItem: '',
        updateItem: '',
        deleteItem: '',
        getDetail: '',
      },
      // 配置模板参数
      templateQuery: {
        rowId: '', // 行ID
        deleteText: '', // 删除的提醒文字
      },
      tableQuery: {}, // 请求表格所需参数
      tempQuery: {}, // 配置新增或者编辑表单信息
      rules: [], // 新增编辑的验证规则

      /** 定表数据**/
      total: 0, // 表格总条数
      tableData: [], // 表格数据
      isAdd: true, // 表示是否是添加新的item
      dialogVisible: false,
      dialogTitle: '新增',
    };
  },
  mounted() {
    window.addEventListener('resize', (e) => {
      this.maxHeight = window.innerHeight - 200;
    });
  },
  methods: {
    // 点击编辑或者修改弹出弹窗
    showLog(type, item) {
      if (type === 'add') {
        this.dialogTitle = '新增';
        for (const key in this.tempQuery) {
          if (Object.hasOwnProperty.call(this.tempQuery, key)) {
            this.tempQuery[key] = '';
          }
        }
        this.isAdd = true;
        this.dialogVisible = true;
      } else {
        this.dialogTitle = '编辑';
        this.tempQuery = {
          ...item,
        };
        this.isAdd = false;
        this.dialogVisible = true;
      }
    },
    // 查询列表
    getList() {
      const params = this.tableQuery;
      if (this.api['getList']) {
        this.api['getList'](params).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result.list;
            this.total = res.result.sign.count;
          }
        });
      }
    },
    // 删除当前项
    deleteItem(item) {
      this.$confirm(this.templateQuery.deleteText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {};
        params[this.templateQuery.rowId] = item[this.templateQuery.rowId];
        this.api['deleteItem'](params).then((res) => {
          if (res.code === 200) {
            this.tableQuery.page_num = 1;
            this.getList();
            this.$message.success('删除成功');
          }
        });
      });
    },
    // 保存
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isAdd && this.addItem();
          !this.isAdd && this.updateItem();
        }
      });
    },
    // 添加数据
    addItem() {
      return new Promise((resolve) => {
        const params = { ...this.tempQuery };
        this.api['addItem'](params).then((res) => {
          if (res.code === 200) {
            resolve();
            this.$message.success('添加成功');
            this.getList();
            this.dialogVisible = false;
          }
        });
      });
    },
    // 修改当前点击数据
    updateItem() {
      return new Promise((resolve) => {
        const params = { ...this.tempQuery };
        this.api['updateItem'](params).then((res) => {
          if (res.code === 200) {
            resolve();
            this.$message.success('修改成功');
            this.getList();
            this.dialogVisible = false;
          }
        });
      });
    },
    // 获取详情页详情
    getDetailItem() {
      this.api['getDetail']().then((res) => {
        if (res.code === 200) {
          this.tempQuery = res.data;
        }
      });
    },
    // 详情页保存
    tempQuery(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isAdd) {
            await this.addItem();
            this.$router.go(-1);
          } else {
            await this.updateItem();
            this.$router.go(-1);
          }
        }
      });
    },
  },
};

详细文档

使用这个你不需要关注 js 如何运行，只需按照以下列子配置 vdata 中的参数，关注模板<template>即可。

其实就是将你平时遇到的 新增 编辑 删除 查看详情 查询等这些方法写成一个公用的MIXINS，然后 当你使用的时候只需要引用这个 js，并且配置一些参数就可以直接使用，而不用每次都去写函数。

值得注意的是: 我们这里时使用的是将 axios 封装成公用方法 然后再使用 axios 公用发给发封装 api。具体的好处就是方便维护api 额 有点牵强。

通常情况下有两种形式的表格，但都大同小异。

第一种 新增修改时 在本页面弹窗。

  // 列表页面
  
  import {
    createCourseClass,
    deleteCourseClass,
    getCourseClass,
    updateCourseClass
  } from '@/api/newCareer'

  api: {
    getList: getCourseClass,
    addItem: createCourseClass,
    updateItem: updateCourseClass,
    deleteItem: deleteCourseClass,
    getDetail: ""
  }

  templateQuery: {
    rowId: "id", // 行ID 叫啥 例如 aid  bid  之类的 后端需要的
    deleteText: "此操作将永久删除该课程类目,是否继续？", // 删除的提醒文字
  },

  tableQuery: { // 有多少往里面加 就好了
    page_num: 1,
    page_size: 10
  },

  tempQuery: { // 弹出对话框需要参数字段 有多少 加多少
    name: '',
    pic: '',
    sort: ''
  },

  rules: { // 配置表单规则
    name: [
      { required: true, message: '请填写课程类目', trigger: 'blur' }
    ],
    pic: [
      { required: true, message: '请上传类图头图', trigger: 'blur' }
    ],
    sort: [{ required: true, message: '请添加排序', trigger: 'blur' }]
  }

  mounted() {  // 在生命周期中调用。
    this.getList()
  }

第二种 新增修改时 在单独的详情页弹窗。

列表页不变 : 需要啥配置啥

单独的详情页例子如下。

  // 单独的详情页面

  api: {
    addItem: createCourse,
    updateItem: updateCourse,
    getDetail:courseDetail
  },
  tempQuery: {
    class_id: '',
    name: '',
    pic: '',
    introduce: '',
    sort: '',
    pice: '',
    details: ''
  },
  rules: {
    class_id: [
      { required: true, message: '请选择课程分类', trigger: 'change' }
    ],
    name: [{ required: true, message: '请填写课程名称', trigger: 'blur' }],
    pic: [{ required: true, message: '请上传课程图片', trigger: 'blur' }],
    introduce: [
      { required: true, message: '请填写课程简介', trigger: 'blur' }
    ],
    sort: [{ required: true, message: '请添加排序', trigger: 'blur' }],
    pice: [{ required: true, message: '请填写价格', trigger: 'blur' }],
    details: [
      { required: true, message: '请编写课程详情', trigger: 'blur' }
    ]
  }

值得注意的是 单独的详情页面无法判断你点击进来的是编辑还是添加.

需要在列表页进入详情页时传递一个参数告诉详情时编辑还是添加.如下:

  // 列表页
  toDetail(type,row){
    let query = {
      type,
      id: row ?  row.id :''  
    }
    this.$router.push({
      path:"/newCareer/familyCoaches/courseDetail",
      query
    })
  }

详情页 需要给接收并且通知到mixins中的变量isAdd 如下:

  mounted() {
    if (this.$route.query.type === 'edit') {
      this.isAdd = false
      this.getDetail()
    } else {
      this.isAdd = true
    }
  }