mason-store v0.1.10

mason-store

什么是 mason-store

这里集合了一些实用的模块，便于开发。

Integration 综合模块 常规业务中，变化最多的无非是字段，接口。此模块解决了常规业务的交互代码，例如弹窗，翻页，布局等一系列东西。你只需关注高频变化的字段、数据格式、接口名称就够啦。

• 优点：复用性高，开发速度快，布局统一。
• 缺点：定制性差，灵活性差，针对性强。
• 建议：常规业务够用，复杂（个性化高）的功能不适合直接使用此模块。如果喜欢这种开发模式，可以直接 copy 源码，单独重写一下呗。

快速上手

1. 安装依赖

# 安装 mason-store
npm install mason-store
# 安装 element-ui （本模块默认使用element-ui)
npm install element-ui

2. 引入 mason-store

import { Integration } from 'mason-store/lib/mason-store.umd'
import 'mason-store/lib/mason-store.css'
export default {
  name: 'App',
  components: { Integration },
  data() {return {}}
}

3. 在代码中调用

<!-- 参数说明
  asyncComponent: 开启异步渲染组件
  requestConf: 按钮与请求配置
  tableConf: 表格配置
  formConf: 搜索区域、新增、编辑的表单配置
-->
<template>
  <Integration
    v-if="asyncComponent"
    :requestConf="requestConf"
    :tableConf="tableConf"
    :formConf="formConf"
  >
    <!-- 主按钮区域（即'新增'按钮所在的那块区域） -->
    <template slot="mainbuts">
      <el-button
        class="main-buts"
        @click="isShowDialog = true"
        icon="el-icon-setting"
        size="mini"
        type="primary"
        plain
      >
        自定义按钮
      </el-button>
    </template>
    <!-- 表格操作区域 -->
    <template slot="operation" slot-scope="data">
      <el-button
        class="main-buts"
        @click="onPreview(data)"
        icon="el-icon-setting"
        size="mini"
        type="primary"
        plain
      >
        预览
      </el-button>
    </template>
    <!-- 新增/编辑表单 -->
    <template slot="dialogForm" slot-scope="data">
      <el-form label-width="80px">
        <el-form-item label="描述">
          <el-input
            v-model="data.formData.infoDiscussNumber"
            :placeholder="'请输入描述'"
            show-word-limit
            clearable
            size="mini"
            type="text"
            :maxlength="59"
          />
        </el-form-item>
      </el-form>
    </template>
    <!-- 新增/编辑按钮 -->
    <template slot="dialogButton" slot-scope="data">
      <el-button
        @click="onPreview(data)"
        icon="el-icon-check"
        size="mini"
        type="primary"
        plain
      >
        审核通过
      </el-button>
    </template>
  </Integration>
</template>

4. 更多详细配置，请查看示例代码。点击前往完整源码

本地调试

# 把项目包放在一个干净的文件夹里，进行本地调试，了解更多详情内容
# 安装依赖
npm install
# 启动服务器（模拟）
npm run server
# 启动项目
npm run dev
# 主要调试文件examples/App.vue,examples/server/index.js

参数说明

requestConf

requestConf

| requestModel | 点击此按钮会调用接口，请求配置 | object | - | - | | queryOneModel | 查询一条数据，点击按钮会直接调用这个方法，一般用于编辑按钮中（查询详情），与 requestModel 一样 | object | - | - |

requestModel or queryOneModel

tableConf

tabelConf | 参数 | 说明 | 类型 | 可选参数 | 默认值 | | :------ | :------- | :------------ | :----------------------- | :----- | | label | 表头名称 | string | - | - | | prop | 对应字段 | string | - | - | | type | 类型 | string | text,image,tag,switch,operation | text | | width | 列宽 | number/string | - | - | | activeValue | switch 开启的值（type 是 switch 的时候才需要配置） | number/string | - | - | | inactiveValue | switch 关闭的值（type 是 switch 的时候才需要配置） | number/string | - | - | | fiexd | 位置 | string | left,right | - |

formConf

pickerOptions 日期配置

Shortcuts 配置说明

End