v2-base-ui

v2-base-ui

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

install

npm install v2-base-ui

or

yarn add v2-base-ui

introduce

完整引入

import baseui from 'v2-base-ui';

Vue.use(baseui);

// 如果要修改默认配置
// Vue.use(baseui, {searchMaxlength:20, formMaxlength:50});

// Vue.use(baseui,opt);
// opt 默认配置项如下
{
    // 查询默认length
    searchMaxlength: opts.searchMaxlength || 50,
    // 表单默认length
    formMaxlength: opts.formMaxlength || 100,
    // 表单文本框默认length
    textareaMaxlength: opts.textareaMaxlength || 200,
    // 数据为空时默认占位符号
    emptyStr: opts.emptyStr || "-",
    // table props 配置 ，默认了表单头部背景色
    tableProps: {
      headerCellStyle: { background: "#f2f2f2" },
      ...opts.tableProps,
    },
    // 布局状态下查询条件的比例
    colProps: {
      xs: 24, // <768px
      sm: 12, // ≥768px
      md: 12, // ≥992px
      lg: 8, // ≥1200px
      xl: 6, // ≥1920px
      // offset: 0, // 栅格左侧的间隔格数,默认0
      ...opts.colProps,
    },
    // 查询组件默认样式
    searchStyle: { width: "252px", labelWidth: "", ...opts.searchStyle },
    // 表单组件默认样式
    formStyle: { width: "400px", labelWidth: "120px", ...opts.formStyle },
    // 分页默认样式
    pageStyle: opts.pageStyle || {},
  };

局部引入

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

如何使用

写了的简单的demo , 所在文件目录 src/main/demo ，直接下载项目运行就能看到效果

页面直接引入组件，然后相同的页面只需要写配置文件就可以了 （完整的demo在项目的src/main/demo目录）

列表的配置文件 tableConfig

export const tableConfig = {
  propList: [
    { type: "selection", width: "60"},
    { prop: "name", label: "姓名" },
    { prop: "age", label: "年龄" },
    { prop: "phone", label: "手机" },
    { 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",
      },
    },
  ],
};

index.html

<template>
  <el-card v-loading="loading" class="base-page">
    <!-- 查询 -->
    <BaseSearch
      v-bind="searchConfig"
      :query-form.sync="queryForm"
      @getList="getList"
    >
      <el-button type="primary" @click="doAction('xz')">新增</el-button>
    </BaseSearch>
    <!-- 另外一套查询样式 -->
    <!-- <BaseColSearch
      v-bind="searchConfig"
      :query-form.sync="queryForm"
      @getList="getList"
    >
      <el-button type="primary" @click="doAction('xz')">新增</el-button>
    </BaseColSearch> -->
    <!-- 表格 -->
    <BaseTable
      v-bind="tableConfig"
      :table-data="tableData"
      :total="total"
      :page.sync="page"
      @getList="getList"
    >
      <template #handler="{ row, index }">
        <div>
          <el-button type="text" @click="doAction('bj', row)">编辑</el-button>
          <el-button type="text" @click="doAction('sc', row, index)"
            >删除</el-button
          >
        </div>
      </template>
    </BaseTable>

    <!-- 弹窗 -->
    <BaseDialog
      width="600px"
      :title="title"
      :visible.sync="dialogVisible"
      :loading="dialogLoading"
      @click="doAction('qd')"
    >
      <BaseForm ref="baseForm" v-bind="formConfig" :model.sync="form">
      </BaseForm>
    </BaseDialog>
  </el-card>
</template>

<script>
import { tableConfig } from "./config/table.config";
import { searchConfig } from "./config/search.config";
import { formConfig } from "./config/form.config";
import { copyField } from "@/main/utils/baseui";
// 模拟数据
const tableData = {
  code: 200,
  data: {
    total: 2,
    records: [
      { name: "张三", age: "16", phone: "13822002211", address: "成都" },
      { name: "李四", age: "18", phone: "", address: "-" },
    ],
  },
};
export default {
  name: "demo",
  data() {
    const tb = {
      tableData: [],
      page: { currentPage: 1, pageSize: 10 },
      total: 0,
      loading: false,
      queryForm: {},
      searchConfig,
      tableConfig,
    };
    return {
      // 表格
      ...tb,
      // 表单配置
      formConfig,
      // 弹窗
      dialogVisible: false,
      dialogLoading: false,
      form: {},
      title: "",
      isAdd: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //  数据查询
    getList() {
      // 定义一个接口promise,假接口
      const getUser = (args) => {
        return new Promise((resolve, reject) => {
          if (args.start === 1) {
            resolve(tableData);
          } else {
            reject("第二页没有数据");
          }
        });
      };

      const { currentPage, pageSize } = this.page;
      this.loading = true;
      getUser({
        start: currentPage,
        limit: pageSize,
      })
        .then((res) => {
          this.tableData = res.data.records || [];
          this.total = Number(res.data.total || 0);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * @description: 页面操作
     * @param {*} type 操作类型
     * @param {*} row 数据
     */
    doAction(type, row, index) {
      switch (type) {
        case "xz":
          this.form = copyField(this.formConfig);
          this.dialogVisible = true;
          this.isAdd = true;
          this.title = "新增";
          break;
        case "bj":
          this.form = row;
          this.dialogVisible = true;
          this.isAdd = false;
          this.title = "编辑";
          break;
        case "sc":
          console.log("删除");
          this.tableData.splice(index, 1);
          break;
        case "qd":
          if (this.isAdd) {
            // 新增
            this.tableData.push(this.form);
          }
          this.dialogVisible = false;
          break;
        default:
          console.log("其他操作");
      }
    },
  },
};
</script>

gitee

https://gitee.com/my-project---components/v2-base-ui