npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hls-easy-admin

v1.0.5

Published

schema中添加linkFunction 传入formModel 可以做一些传参 自行定义跳转还是其他什么操作 ```javascript linkFunction: ({ formModel }) => { window.location.href = `https://www.baidu.com?haha=${formModel.aaProjectId}`; }, ``` ### 高级查询支持 1 定义表格列中新增querySchema属性 用于整合表单的查询条件 按照原search

Downloads

2

Readme

添加表单字段链接支持

schema中添加linkFunction 传入formModel 可以做一些传参 自行定义跳转还是其他什么操作

  linkFunction: ({ formModel }) => {
    window.location.href = `https://www.baidu.com?haha=${formModel.aaProjectId}`;
  },

高级查询支持

1 定义表格列中新增querySchema属性 用于整合表单的查询条件 按照原searchFormSchema的对象写法写到querySchema中作为高级查询默认查询条件 2 querySchema中必须指定queryOptions(查询字段比较方式)使用queryOptEnum中的枚举QueryOptEnum及getQueryOptions函数配合使用指定queryOptions,指定queryOption数据来源于枚举QueryOptEnum,作为当前的比较方式 3 表单查询的字段会自动加入比较操作符 如test_OP_eq 即查询test字段比较方式为等于,所以在非table查询表单的情况下,需按照此规则,手动拼接查询参数

模糊下拉

1 打开 showSearch: true 2 api 接口配置 3 关闭本地筛选 filterOption: false 4 写 onSearch 函数-必须使用防抖 避免接口过于频繁请求

import { useDebounceFn } from '@vueuse/core';

const customerKeyword = ref('')
const onSearch = useDebounceFn((value) => {
  customerKeyword.value = value;
}, 500);

const searchParams = computed(() => {
  return unref(customerKeyword);
});
```javascript
{
  label: '客户',
  field: 'customer',
  component: 'ApiTreeSelect',
  componentProps: {
    showSearch: true,
    api: cacheApi,
    params: { keyCode: 'customer', keyword: searchParams },
    filterOption: false,
    onSearch,
},

###组织机构选择

{
  label: '组织',
  field: 'orgId',
  component: 'ApiTreeSelect',
  componentProps: {
    api: getDeptList,
    fieldNames: {
      label: 'title',
      key: 'id',
      value: 'id',
    },
    getPopupContainer: () => document.body,
  },
}

###用户选择 根据组织机构关联

import { useDebounceFn } from '@vueuse/core';

const usernameKeyword = ref('')
const onSearch = useDebounceFn((value) => {
  usernameKeyword.value = value;
}, 500);

const searchParams = computed(() => {
  return unref(usernameKeyword);
});
// form schema
 {
  label: '组织下的用户',
  field: 'user',
  component: 'ApiSelect',
  componentProps: {
    api: getOrgUsers,
    showSearch: true,
    params: { keyCode: 'customer', name: searchParams },
    filterOption: false,
    onSearch,
  },
}

添加本地打包上传服务器脚本

# 执行打包上传测试服务器
npm run bp-dev

添加xss脚本防御

pnpm install vue-dompurify-html

渲染html字符串时使用v-dompurify-html

一个表单需具备的条件

1 loading状态 以drawer为例 提交之前要changeLoading(true) 异常finally中changeLoding(false)

2 提交按钮添加防抖

import { useDebounceFn } from '@vueuse/core';
// 包装一下提交函数 1秒内重复触发提交无效 仅操作停止后生效最后一次
const handleSubmit = useDebounceFn(doSubmit, 1000);

3 如有进入弹窗加载数据操作 同1 使用changeLoading函数操作