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);