V2-base-ui NPM

v2-base-ui

基于 vue2 , element-ui 封装的一些通用的组件（表格，表单和弹窗），使用场景表格查询，表单编辑提交等。重复的表格页面和表单功能，只用写配置文件就行了。（组件具体使用的 deme，目录 src/main/demo，下载项目直接运行就可看到效果）

install

yarn add v2-base-ui

// 或者

npm install v2-base-ui

introduce

完整引入

import baseui from 'v2-base-ui';

Vue.use(baseui);

全局默认配置

// 全局配置可以减少很多重复的代码，统一规范

// 组件内置的全局基础配置
export const BASECONFIG = {
  // 查询默认length
  searchMaxlength: 50,
  // 表单默认length
  formMaxlength: 50,
  // 表单文本框默认length
  textareaMaxlength: 200,
  // 数据为空时默认占位符号
  emptyStr: "-",
  // table props 配置 ，默认了表单头部背景色
  tableProps: {},
  // 查询form的props
  searchProps: { inline: true, labelPosition: "right", labelWidth: "120px" },
  // 查询组件默认样式
  searchStyle: { width: "100%" },
  // 表单组件默认样式
  formStyle: { width: "400px", labelWidth: "120px" },
  // 分页默认样式
  pageStyle: { justifyContent: "flex-end" },
  // 默认字体大小
  defaultFontSize: "",
};

// 上面是组件内默认的配置如果需要重新定义可以使用配置项重新定义

Vue.use(baseui,opt);  // opt就是一个对象 {searchMaxlength: 100} 你可以重新自定义上面默认的配置项

局部引入

import { BaseTable,BaseForm,BaseDialog,BaseSearch,reset,copyField } from "v2-base-ui";

如何使用

先定义列表的配置文件 tableConfig

export const tableConfig = {
  propList: [
    { type: "selection", width: "60" },
    { prop: "name", prop2:"userNo", label: "姓名/工号" },
    { prop: "age", label: "年龄" },
    { prop: "phone", label: "手机" },
    {
      prop: "sex",
      label: "性别",
      options: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],
      // 数组或者对象，然后会根据value值自动去匹配
      // options: {
      //   1: "男",
      //   2: "女",
      // },
    },
    { prop: "address", label: "地址", slotName: "address" },
    { label: "操作", width: "220", slotName: "handler", fixed: "right" },
  ],
};

定义查询条件的配置文件 searchConfig

export const searchConfig = {
  formItems: [
    {
      field: "name",
      type: "input",
      label: "姓名",
    },
    {
      field: "age",
      type: "input",
      label: "年龄",
    },
    {
      field: "phone",
      type: "input",
      label: "手机号",
    },
    {
      startField:'startDate',
      endField:'endDate',
      type: "datePicker",
      label: "时间范围",
      itemProps: {
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        type: "daterange",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
      },
    },
  ],
};

页面

<template>
  <div>
    <!-- 查询 -->
    <BaseSearch
      ref="BaseSearch"
      v-bind.sync="searchConfig"
      :query-form.sync="queryForm"
      @getList="getList"
    >
    </BaseSearch>
    <!-- 表格 -->
    <BaseTable
      v-bind="tableConfig"
      :table-data="tableData"
      :total="total"
      :page.sync="page"
      @getList="getList"
    >
    </BaseTable>
  </div>
</template>

<script>
import { tableConfig } from "./config/table.config";
import { searchConfig } from "./config/search.config";

// 接口返回的表格数据
const tableData = {
  code: 200,
  data: {
    total: 2,
    records: [
      {
        name: "张三",
        userNo: "U123456",
        age: "16",
        phone: "13822002211",
        sex: 1,
        address: "四川成都",
      },
      {
        name: "李四",
        userNo: "U123456",
        age: "18",
        phone: "18200000000",
        sex: 2,
        address: "",
      },
    ],
  },
};

// 模拟真实接口，返回数据
const getUser = (args) => {
    return new Promise((resolve, reject) => {
      if (args.currentPage === 1) {
        resolve(tableData);
      } else {
        reject("第二页没有数据");
      }
    });
};

export default {
  name: "demo",
  data() {
    const tb = {
      tableData: [],
      page: { currentPage: 1, pageSize: 10 },
      total: 0,
      loading: false,
      queryForm: {},
      searchConfig,
      tableConfig,
    };
    return {
      // 表格
      ...tb,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 数据查询
    getList() {
      getUser(this.page).then((res) => {
        this.tableData = res.data.records || [];
        this.total = Number(res.data.total || 0);
     })
    },
  },
};
</script>