0.0.4 • Published 2 years ago
e3-my-components v0.0.4
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',
},
],
},
};