六哥开源前后端脚手架

• https://gitee.com/lgx1992/lg-soar

六哥npm工具库

• lg.tool 通用工具
• lg.web web工具
• lg.uniapp uniapp项目工具
• lg.table-copy 表格复制
• lg.table-plus 表格增强
• lg.validator 数据校验
• lg.data 数据处理
• lg.format 格式化
• lg.cache 缓存

import { setConfig, useList, useForm, useDict, useDictLabel, useDictUniOptions } from 'lg.uniapp';

// 全局配置
setConfig({
    getDict(codes: string[]): Promise<{ [p: string]: any[] }> {
        // @ts-ignore 向后端发送请求获取数据字典
        return getDict(codes)
    },
    isLogin() {
        // 判断是否已登录
        return Promise.resolve();
    },
    getPermits() {
        // 请求后端获取
        return Promise.resolve(['user:add', 'user:update', 'user-remove', 'user_export'])
    }
});

// 列表页使用，上拉加载更多，下拉刷新，表单页提交自动刷新
const { status, params, list, total, loading, onRemove, onReload } = useList({
    load: api.list,
    remove: api.remove,
});

// scroll-view 使用，上拉加载更多，下拉刷新
const { status, params, list, total, loading, onRemove, refresherTriggered, onRefresherrefresh, onLoadMore } = useList({
    load: api.list,
    remove: api.remove,
});

/*
<scroll-view
        style="height: 600px"
        :scroll-y="true"
        refresher-enabled="true"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onRefresherrefresh"
        @scrolltolower="onLoadMore"
>
渲染列表
</scroll-view>
 */

// 表单页使用，提交成功发布列表页刷新事件
const { formProps, data, onSubmit, isUpdate, loading, onReload } = useForm({
    load: (params: any) => api.get(params.id),
    submit(data: any): any {
        if (isUpdate.value) {
            return api.update(data)
        } else {
            return api.save(data)
        }
    }
});

// 文件上传，需配置 setConfig({ useUploader: { upload })
const modelValue = ref(['asdasd']);
const { files, choose, updateValue } = useUploader({
    single: false,
}, (value: any) => {
    console.log('onChange', value)
    modelValue.value = value;
});
updateValue(modelValue.value);

// 管理文件上传（多个文件上传表单使用）
// 自动监听子组件的 useUploader 
// 如果 useUploadManager 和 useUploader 在同一个组件内则需要传入 
// const { upload } = useUploader(参数);  
// const { upload: upload2 } = useUploader(参数); 
// const { upload: upload3 } = useUploader(参数); 
// const onUpload = useUploadManager(upload, upload2, upload3)
const onUpload = useUploadManager(); 
function subimt() {
    onUpload().then(() => {
        // 在这里提交表单数据
        console.log('上传完成')
    })
    console.log('等待文件上传')
}

// 使用数据字典
const { status, type } = useDict('status', 'type');
const { gender, education } = useDictLabel('gender', 'education');
const { industry, region } = useDictUniOptions('industry', 'region');

// 按钮权限控制 <view v-if="permits.revoke">撤销</view>
const permits = usePermit({
    create: 'user:add',
    update: 'user:update',
    revoke: 'user:revoke',
});

// 按钮登录控制 <view v-if="logined">撤销</view>
const logined = useIsLogin();

// 页面权限控制
mustPermit('user:add', 'user:update');

// 页面登录控制
mustLogin();

// 监听刷新事件（表单页提交后发布刷新事件，触发列表页刷新）
onRefresh(() => {
    刷新数据
})
// 发送刷新事件
emitRefresh();
// 返回上一页并触发刷新（通常表单页提交成功后调用）
backAndRefresh();

// 跳转页面
toPage(路径[, 参数]);
// 返回上一页
back();

// 获取当前页路径
getCurrentPath();
// 获取登录页路径
getLoginPath();
// 获取主页路径
getHomePath();
// 跳转登录页
toLoginPage();
// 跳转主页
toHomePage();

// 断言(数据校验)
isTrue(val > 0, '值必须大于0'); // 真值判断，否则抛异常
isFalse(val > 0, '值不能大于0'); // 假值判断，否则抛异常
notEmpty(name, '姓名必填'); // 非空判断，支持对象、数组、字符串、数值等任意数据类型，否则抛异常
notEmpty(materialList, '请添加物料'); // 非空判断，支持对象、数组、字符串、数值等任意数据类型，否则抛异常

// 显示成功信息
showSuccess('操作成功');
// 显示异常信息
showError('操作失败');
// 显示确认弹窗
showConfirm('提醒', '确认要删除吗？').then(() => {
    // 执行删除
})

// 锁加载器：同一个key同一时间只会发出一个请求，多处调用共享请响应结果。例如多个地方获取用户信息
const lockLoader = createLockLoader();
function getUser() {
    // 锁的key可以取方法参数动态设置，若方法没有参数随意写死一个字符串即可
    return lockLoader('锁的key', () => 请求数据);
}
getUser();
getUser();
getUser();

// 批量加载器：一段时间内的请求会合并为一个请求，批量加载数据后，再拆分响应。适用于不同组件加载数据字典的场景
const batchLoader = createBatchLoader({ 
    loader: (params: any[]) => 发起请求, 
    responseHandler: (res: any, param: any) => 拆分结果
}); 
batchLoader(请求参数1);
batchLoader(请求参数2);
batchLoader(请求参数3);

// 重试加载器：若请求失败将会间隔一段时间后自动重试，直到达到重试次数为止。
const retryLoader = createRetryLoader(() => 发起请求); 
retryLoader();

// 防抖加载器
const debouncedLoader = createDebouncedLoader((params) => 发起请求); 
debouncedLoader(请求参数);

// 节流加载器
const throttledLoader = createThrottledLoader((params) => 发起请求); 
throttledLoader(请求参数);

// 函数锁，防止多次调用
const [call, loading] = useCallLock(() => 实际处理, 'error');
// 多次调用不会重复触发
call();
call();