mouse-vue-module v0.1.5

Basic usage

1.install SDK using npm

npm install mouse-vue-module --save

2.for example:

//main.js 执行
import install  from 'mouse-vue-module'
Vue.use(install);

//列表 搜索、列表、分页封装
//搜索组件 input、select、date
searchLst = [
    {
      label:'名称：',//form表单 label参数
      model:'id',//v-model 参数
      type:'select',//搜索类型 'input','select','date'
      lst:[],//select 类型 必传
      name:'id',//搜索对应字段
      style:'',//搜索样式
      clearable:false,//清除
    },
    {
      label:'时间：',//form表单 label参数
      model: [startTime, endTime],//日期 默认时间
      type:'date',//日期类型
      name:'updateTimeList',//搜索对应字段
      style:'',//搜索样式
      clearable:false,//清除
    }
]
//搜索按钮 
searchBtns = [
  {
    isShow:true,//是否显示 权限配置
    name:'查 询',//按钮名称
    loading:false,//按钮loading
    style:'',//样式
    type:'search',//类型
    api:page,//接口 函数
  },
  {
    isShow:true,//是否显示 权限配置
    name:'导 出',//按钮名称
    loading:false,//按钮loading
    style:'',//样式
    type:'export',//类型
    api:exportFile //接口 函数
  },
],//搜索按钮
  //接口搜索条件
param = {
  id:1,
  updateTimeList:[startTime, endTime],
}
//按钮点击的回调 res 接口返回数据 o 哪一个按钮点击
btnClick(res,o){
  console.log(res,o);
}
//搜索框值、分页值改变
handleChange(val,attribute){
  this.param[attribute] = val;
}
<mouse-search
  :searchLst="searchLst"
  :btns="searchBtns"
  :param="param"
  @click="btnClick"
  ref="mouseSearch"
  @handleChange="handleChange" 
></mouse-search>

//table 分页
//table表头
tableHeader:[
  {
    type:'index',
    width:'50',
    label:'序号',
    prop:'',
    showOverflowTooltip:true,
  },
  {
    width:'150',
    label:'日期',
    prop:'date',
    showOverflowTooltip:true,
  },
  {
    width:'100',
    label:'操作',
    fixed:'right',
    operate:[
      {
        type: 'primary',
        underline: false,
        name: '查看',
        style: '',
        click: (row) => {
          console.log(row);
        }
      },
      {
        type: 'primary',
        underline: false,
        name: '查看',
        style: '',
        click: (row) => {
          console.log(row);
        }
      }
    ]
  },
  //搜索框值、分页值改变
  handleChange(val,attribute){
    this.param[attribute] = val;
  }

<mouse-table
    :loading="searchBtns[0].loading"//loading 搜索数据 searchBtns里搜索的值
    :headerCellStyle="{background:'#f5f8ff',color:'#333333'}"//headerCellStyle table 头部样式
    :height="height"//table高度
    :tableHeader="tableHeader"//table表头
    :tableList="tableList"//table数据
    :param="param"//搜索条件
    :totalPage="totalPage"//table数据总数
    @handleChange="handleChange">
</mouse-table>