JBolt Admin Vue

Appearance

其他常用内部函数 ​

useResetableData 构建一个带有重置功能的响应式对象 ​

用法同vue的reactive，只是返回的对象多了一个_reset方法，用于重置对象的值。常见的使用场景：

  • jb-crud-page组件自带一个重置按钮，点击后，可以将查询条件对象重置为初始值。这就要求查询条件对象必须用useResetableData构建。
  • 有的对象可能需要从服务器读取最新的值，然后覆盖之前的值。

示例代码： ​

将数据重置回初始值

vue

<script setup lang="ts">
    import { useResetableData } from '@/hooks/common/use-resetable-data'
    const searchForm = useResetableData({
        keywords: '',
        roleId: '',
        enable: '',
        postId: '',
        deptId: ''
    })
    searchForm._reset()
</script>

<script setup lang="ts">
    import { useResetableData } from '@/hooks/common/use-resetable-data'
    const searchForm = useResetableData({
        keywords: '',
        roleId: '',
        enable: '',
        postId: '',
        deptId: ''
    })
    searchForm._reset()
</script>

用一个新的对象覆盖原数据，但只根据原数据有的属性进行覆盖，新对象中的新属性将忽略。

vue
<script setup lang="ts">
    import { useResetableData } from '@/hooks/common/use-resetable-data'
    const form = useResetableData<ItemType>({
        id: '',
        typeId: '',
        name: '',
        configKey: '',
        builtIn: false,
        valueType: 'string',
        configValue: ''
    })
    function loadEditData() {
        JBoltApi.get<ResData>(`/api/admin/globalConfig/${props.id}`).then(
            ({ error, result }) => {
                if (error) return
                form._reset(result.data)
            }
        )
    }
</script>
<script setup lang="ts">
    import { useResetableData } from '@/hooks/common/use-resetable-data'
    const form = useResetableData<ItemType>({
        id: '',
        typeId: '',
        name: '',
        configKey: '',
        builtIn: false,
        valueType: 'string',
        configValue: ''
    })
    function loadEditData() {
        JBoltApi.get<ResData>(`/api/admin/globalConfig/${props.id}`).then(
            ({ error, result }) => {
                if (error) return
                form._reset(result.data)
            }
        )
    }
</script>

挂载到window上的NaiveUI方法 ​

方法说明示例代码
$success成功的信息提示框,参考文档window.$success('保存成功')
$warning警告的信息提示框
$error错误的信息提示框
$info普通的信息提示框
$message相当于useMessage()
$dialog相当于useDialog,参考文档
$notification相当于useNotification()，参考文档
$loadingBar相当于useLoadingBar()，参考文档

字符串相关 utils/common/string.ts ​

方法说明示例代码
randomCode(length: number): string生成随机字符串randomCode(8)

加密相关 utils/crypto/index.ts ​

方法说明示例代码
md5(data: string): stringmd5加密md5('123')
encrypt(data: any,secret: string | undefined = defaultCryptoSecret):stringAES加密,密钥默认使用.env-config.ts中配置的cryptoSecretencrypt('xxx')
decrypt(cipherText: string,secret: string | undefined = defaultCryptoSecret):stringAES解密decrypt('awefwaefw3fwef')

Hiprint动态打印 utils/print/index.ts ​

方法说明示例代码
JBoltPrint.printByUrl(sn: string, url: string, clientPrint = false)根据指定模板和数据接口，生成渲染数据，并进行打印。sn代表模板编号，来源于打印设计器功能中保存的模板；url代表数据获取的接口地址;clientPrint代表是否使用Hiprint客户端打印，true代表使用，false代表使用浏览器打印功能JBoltPrint.printByUrl('test',
'api/admin/hiprint/tpl/testJsonData')
JBoltPrint.printByJson(sn: string, data: object, clientPrint = false)根据指定模板和数据，生成渲染数据，并进行打印。sn代表模板编号，来源于打印设计器功能中保存的模板；data代表渲染使用的数据;clientPrint代表是否使用Hiprint客户端打印，true代表使用，false代表使用浏览器打印功能JBoltPrint.printByUrl('test',
{qrcode:'http://vue.jbolt.cn'})
JBoltPrint.toPdfByUrl(sn: string, url: string, name = '文件')根据指定模板和数据接口，生成渲染数据，并导出为pdf。sn代表模板编号，来源于打印设计器功能中保存的模板；url代表数据获取的接口地址;name代表导出的pdf的文件名JBoltPrint.toPdfByUrl('test',
'api/admin/hiprint/tpl/testJsonData')
JBoltPrint.toPdfByJson(sn: string, data: object, name = '文件')根据指定模板和数据，生成渲染数据，并导出为pdf。sn代表模板编号，来源于打印设计器功能中保存的模板；data代表数据;name代表导出的pdf的文件名JBoltPrint.toPdfByJson('test',
{qrcode:'http://vue.jbolt.cn'})