1.0.5 • Published 6 months ago

hls-easy-admin v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

添加表单字段链接支持

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函数操作