Install

npm install e3-my-components

Usage

init

import { createApp } from 'vue';
import App from './App.vue';

import * as myComponents from 'e3-my-components';

const app = createApp(App);
for (const [key, component] of Object.entries(myComponents)) {
  app.component(key, component);
}

app.mount('#app');

App.vue

<template>
  <div class="page">
    <myHeader></myHeader>

    <MySearch :config="config.search" @search="search"></MySearch>

    <MyOperate :config="config.operate" @handleClick="showDialog"></MyOperate>

    <MyTable
      :config="config.table"
      :optBtns="config.tableBtn"
      :data="table.tabData.value"
      :multiple="true"
      @selectionChange="tableChange"
    />

    <MyPagination :total="table.total.value" @pageChange="pageChange" />

    <MyForm
      title="表格项"
      v-model:visible="state.add"
      :config="config.form"
      :rules="config.formRules"
      :action="state.dialogAction"
      :data="state.dialogData"
      :callback="state.dialogCallback"
      @confirm="dialogConfirm"
    ></MyForm>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from '@vue/reactivity';
import { Pagination, TableBtn } from '@/types';
import config from './config';
import TableFn from '@/util/tableFn';
import tableApi from '@/api/modules/table';
import confirm from '@/util/confirm';
import { ElMessage } from 'element-plus';

interface List {
  id: number;
}

const multipleData = ref<List[]>([]);
const state = reactive<Record<string, any>>({
  add: false,
  dialogAction: '',
  dialogData: null,
  dialogCallback: tableApi.add,
});
const table = new TableFn({
  get: tableApi.list,
});

const handleEvent: Record<string, Function> = {
  edit: (data: List) => {
    Object.assign(state, {
      add: true,
      dialogAction: 'edit',
      dialogCallback: tableApi.edit,
      dialogData: data,
    });
  },
  delete: ({ id }: List) => {
    confirm.warning({
      message: '确认删除？',
      then: () => {
        tableApi.delete(id).then((res) => {
          ElMessage.success(res.message);
          table.getData();
        });
      },
    });
  },
};
config.tableBtn.forEach((it: TableBtn) => {
  it.callback = handleEvent[it.key];
});

function search(data: any) {
  table.search(data);
}
function pageChange(data: Pagination) {
  table.pageChange(data);
}
function tableChange(data: List[]) {
  multipleData.value = data;
}
function dialogConfirm() {
  table.getData();
}
function showDialog(key: string) {
  state[key] = true;
  if (key === 'add') {
    state.dialogAction = 'add';
    state.dialogCallback = tableApi.add;
  }
}
</script>

<style scoped></style>

config.ts

const SEXLIST = [
  { value: 0, label: '女' },
  { value: 1, label: '男' },
];

export default {
  search: [
    {
      label: '名称',
      key: 'name',
      type: 'input',
      placeholder: '请输入名称',
    },
    {
      label: '性别',
      key: 'sex',
      type: 'select',
      placeholder: '请选择性别',
      list: SEXLIST,
    },
  ],

  operate: [{ label: '添加', key: 'add', type: 'primary' }],

  table: [
    {
      prop: '',
      label: '序号',
      type: 'index',
      width: 60,
    },
    {
      prop: 'name',
      label: '姓名',
    },
    {
      prop: 'sex',
      label: '性别',
      filter: (v: number) => {
        return v == 1 ? '男' : v === 0 ? '女' : '';
      },
    },
    {
      prop: 'date',
      label: '日期',
    },
    {
      prop: 'address',
      label: '地址',
    },
  ],

  tableBtn: [
    {
      label: '编辑',
      key: 'edit',
      type: 'success',
    },
    {
      label: '删除',
      key: 'delete',
      type: 'danger',
    },
  ],

  form: [
    {
      key: 'name',
      label: '姓名',
      type: 1,
      default: '',
      placeholder: '请输入姓名',
      readonly: true,
    },
    {
      key: 'sex',
      label: '性别',
      type: 2,
      default: '',
      placeholder: '请选择性别',
      list: SEXLIST,
      readonly: false,
    },
  ],

  formRules: {
    name: [
      {
        required: true,
        message: '请输入姓名',
        trigger: ['blur', 'change'],
      },
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
  },
};