v3-base-ui

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

install

npm install v3-base-ui

or

yarn add v3-base-ui

introduce

完整引入

import baseui from 'v3-base-ui';

Vue.use(baseui);

局部引入

如何使用

写了的简单的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"
      v-model="queryForm"
      @getList="getList"
      @reset="reset"
    >
      <el-button type="primary" @click="doAction('xz')">新增</el-button>
    </BaseSearch>
    <BaseTable
      v-bind="tableConfig"
      :table-data="tableData"
      :total="total"
      v-model:page="pageInfo"
      @getList="getList"
    >
      <template #handler="{ row }">
        <div>
          <el-button type="text" @click="doAction('bj', row)">编辑</el-button>
          <el-button type="text" @click="doAction('ck', row)">查看</el-button>
          <el-button type="text" @click="doAction('sc', row, index)"
            >删除</el-button
          >
        </div>
      </template>
    </BaseTable>

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

<script lang="ts" setup>
import { ref, toRefs } from "vue";
import { tableConfig } from "./config/table.config";
import { searchConfig } from "./config/search.config";
import { formConfig } from "./config/form.config";
import { usePageSearch } from "@/main/hooks/use-page-search";
import { copyField } from "@/main/utils";
import router from "../../../router";

// 模拟数据
const tableData = ref([
  {
    name: "张三",
    age: "16",
    sex: "男",
    phone: "1382200221\n 11111111111111111111",
    address: "成都",
  },
  {
    name: "李四",
    age: "18",
    sex: "女",
    phone: "182000000000",
    address: "宇宙的尽头哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈",
  },
]);
// 初始化查询条件
const [state, queryForm, reset] = usePageSearch();
const { pageInfo, total, loading } = toRefs(state);
total.value = 2;
// queryForm.value = copyField(searchConfig);
const dialogVisible = ref(false);
const dialogLoading = ref(false);
const form = ref({});
// const tempRow = ref("");
const title = ref("");
const isAdd = ref(false);

//  数据查询
const getList = () => {
  console.log(queryForm.value);
};

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

gitee

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