@axewo/nbasic-element

介绍

nbasic-element 根据element plus 的组件二次封装，使用 Vue3、TypeScript，技术栈。

组件说明

该组件库包含，table、form、 dialog

form 组件包含：element　plus 的
ElInput,

ElAutocomplete,

ElCascader,

ElDatePicker,

ElInputNumber,

ElSwitch,

ElTimePicker,

ElTreeSelect,

ElSlider,

ElRate,

ElColorPicker,

ElDivider

USelect

UCheckboxGroup

URadioGroup

URadioButtonGroup

UApiSelect

BasicTable

BasicForm

TableAction

安装教程

1、安装该组件库,

# NPM
$ npm install @axewo/nbasic-element --save

# Yarn
$ yarn add @axewo/nbasic-element

# pnpm
$ pnpm install @axewo/nbasic-element

2、在页面应用

import '@axewo/nbasic-element/dist/style.css';
import NBasicUI from '@axewo/nbasic-element';


 app.use(NBasicUI);

使用说明

1. table和form的使用的使用，包含页面查询，index.vue

<template>
    <div>
        <BasicTable @register="register">
            <template #leftToolbar>
                <TableAction
                    :is-tooltip="false"
                    :actions="[
                        {
                            label: '新增',
                            type: 'default',
                            link: false,
                            icon: 'Plus',
                            size: 'default',
                            onClick: handleAdd.bind(null),
                        },
                    ]"
                >
                </TableAction>
            </template>
            <template #actions="{ row }">
                <TableAction
                    :actions="[
                        {
                            // label: '修改',
                            type: 'primary',
                            icon: 'Edit',
                            tooltipProps: {
                                content: '修改',
                            },
                            onClick: handleEdit.bind(null, row),
                        },

                        {
                            // label: '删除',
                            type: 'danger',
                            icon: 'Delete',
                            tooltipProps: {
                                content: '删除',
                            },
                            popConfirm: {
                                title: '是否确认删除',
                                onConfirm: handleDelete.bind(null, row),
                            },
                        },
                        {
                            // label: '预览',
                            tooltipProps: {
                                content: '预览',
                            },
                            icon: 'View',
                            type: 'primary',
                            onClick: () => {
                                handlePerview(row);
                            },
                        },
                    ]"
                ></TableAction>
            </template>
        </BasicTable>
        <CloseAccountModal @register="registerDalog" @success="reload" />
    </div>
</template>

<script setup lang="ts">
import { tableSchema, searchSchema } from './config';
import { TableAction, useTable, useDialog } from '@axewo/nbasic-element';
import CloseAccountModal from './closeAccountModal.vue';
import { formCommonConfig, tableCommonConfig } from '@/utils';

const [registerDalog, { openModal }] = useDialog();
const [perviewDalog, { openModal: openModalPerview }] = useDialog();
const [register, { reload }] = useTable({
    apiFunc: listPageFunc,
    ...tableCommonConfig,
    useSearchForm: true,
    formConfig: {
        schemas: searchSchema,
        ...formCommonConfig,
    },
    columns: tableSchema,
});
const handleAdd = () => {
    openModal({
        title: '新增',
        visible: true,
        width: '30%',
    });
};
const handleEdit = (row: Recordable) => {
    openModal(
        {
            title: '修改',
            visible: true,
            width: '30%',
        },
        { ...row }
    );
};
const handlePerview = (row: Recordable) => {
    openModalPerview(
        {
            title: '预览',
            visible: true,
        },
        { ...row }
    );
};
const handleDelete = async ({ id }: Recordable) => {
    await removeFunc(id);
    reload();
};
</script>

config.ts

export const tableSchema = [
    {
        label: '业务实体',
        prop: 'comCode',
        render: ({ comCode }: Recordable) => {
            return h(DictTag, { dictType: 'com_code', value: comCode });
        },
    },

    {
        label: '关账流程标识',
        prop: 'processIndex',
        render: ({ processIndex, id }: Recordable) => {
            return h(
                RouterLink,
                { to: `/closeAccount/configure-task/index/${id}`, class: 'link-type' },
                ()=>processIndex
            );
        },
    },
    {
        label: '关账流程名称',
        prop: 'processName',
    },

    {
        prop: '_operate_',
        width: 130,
        align: 'center',
        label: '操作',
    },
];

export const searchSchema = [
    {
        label: '业务实体',
        field: 'comCode',
        component: 'ApiSelect',
        componentProps: {
            apiFunc: getOrgDropdownList,
            resultField: 'data',
            labelField: 'deptName',
            valueField: 'deptIndex',
        },
    },
 
];

弹框的使用

<template>
   <BasicModal  @register="registerModal" @ok="submit" @cancel="closeModal">
   	<div>
   		<BasicForm @register="register"></BasicForm>
   	</div>
   </BasicModal>
</template>

<script setup lang="ts">
import { formSchema } from './config'
import { useForm, useDialogInner,BasicModal } from '@axewo/nbasic-element'
import { sleep } from '@/utils/tools'
//这个register 必须要返回，否则控制套会有警告
const emits = defineEmits(['success','register'])

const [register, { getFieldsValue, clearValidate, updateSchema, setFieldsValue, validate }] = useForm({
   baseColProps: {
       span: 24
   },
   labelWidth: 150,
   schemas: formSchema,
   showActionButtonGroup: false
})

const [registerModal,{setModalProps,closeModal}] = useDialogInner((data:any) => {
   init(data)
})

const submit = async () => {
   try {
      //todo
   } catch (error) {
       console.log(error)
   }
}

const handleOk = () => {
   emits('success')
}
const init = async (record:any) => {

  //设置弹框中值
   setFieldsValue(record)
}
</script>