公共方法用法

提示语

actionMessage
用途：固定通用的操作后提示语
位置：src\utils\message.ts
参数： type:取值 src\enums\messageEnum.ts 文件中 messageTypeEnum 取; 例如 messageTypeEnum.ADD_SUCCESS |messageTypeEnum.ADD_ERROR|messageTypeEnum.UPDATA_SUCCESS|messageTypeEnum.UPDATA_ERROR
|messageTypeEnum.DEL_SUCCESS|messageTypeEnum.DEL_ERROR

  <a-button type="primary" style="margin-right: 20px" @click="testReminder"
        >测试操作提示语</a-button
      >
  function testReminder() {
    actionMessage(messageTypeEnum.ADD_SUCCESS);
  }

customMessage
用途：自定义提示语
位置：src\utils\message.ts
参数：label，resultColor，opt
- label:提示语具体内容，
- resultColor:结果颜色及图标单举例SUCCESS | ERROR | WARNING src\enums\messageEnum.ts 文件中 CustomMessageEnum 取
- opt 说明：若是在opt 中设置 content 会覆盖参数label，opt 中设置icon 会覆盖参数resultColor，兼容antdesign 关于自定义的message

  <a-button type="primary" style="margin-right: 20px" @click="testCustomActionReminder"
        >自定义提示语</a-button
      >
  function testCustomActionReminder() {
    let opt = {
      contentStyle: 'contentStyle',
    };
    customMessage('自定义提示语', 'Error', opt);
  }

  <a-button type="primary" style="margin-right: 20px" @click="testCustomActionReminder"
        >自定义提示语</a-button
      >
  function testCustomActionReminder() {
    let opt = {
      content: '应用下架获得批准',
      icon: h(CheckCircleOutlined, { style: 'color: blue' }),
      contentStyle: 'contentStyle',
    };
    customMessage('自定义提示语', 'Error', opt);
  }

  <a-button type="primary" style="margin-right: 20px" @click="testCustomActionReminder"
        >自定义提示语</a-button
      >

  function testCustomActionReminder() {
    let opt = {
      content: '审核通过',
       icon: h('img', { src: custommesicon }),   //src:对应的路径值  无论是用封装的还是antdesign封装的 都需要引一下，不然好像容易有bug   举例 import custommesicon from '@/assets/icons/custommesicon.png';
      contentStyle: 'contentStyle',
    };
    // customMessage('自定义提示语', 'Error', opt);
  }

placeholder 提示语和message 提示语改的是vben框架源码，不需要使用人员调用处理。
校验中的message 提示语调用源码改动的方式

formSchema = [
  {
    field: 'SaleDeliverBillId',
    label: '委外出库单号',
    component: 'Input',
    rules: [
      { required: true, trigger: ['change', 'blur'] },//注意这里的写法，不写`message`字段, 会自动用统一的。
      { max: 20, message: '输入字符不能超过20', trigger: ['change', 'blur'] },
    ],
  }]

二次确认提示弹窗

confirmModal
用途：二次确认弹窗，提示语是固定几个类型
位置：src\utils\ConfirmModal.ts
参数 messageType，displayName, callback: () => callbackResult,

messageType 从src/utils/messageType中messagePrefix.ts取例如'ADD' | 'UPDATA'| 'DEL' | 'AUDITING' | 'LISTING' | 'OPEN | 'CLOSE' | 'LOADDING' | 'AUTH' | 'RECOVERY'，
displayName 对谁进行二次确认。即提示语中样式用加粗红色样式那部分参数；
callback 点确定后的回调处理，必须有返回值result类型布尔

  <a-button type="primary" style="margin-right: 20px" @click="onDel "
        >删除</a-button
      >
 const onDel = (record) => {
    confirmModal('DEL', '昵称', () => {
         // 业务代码
          return {
              result: true,
          };
      });
  };

customConfirmModal
用途：二次确认弹窗，提示语是固定几个类型
位置：src\utils\ConfirmModal.ts
参数：messageType，displayName, fun。

messageType 从src/utils/messageType中messagePrefix.ts取例如'ADD' | 'UPDATA'| 'DEL' | 'AUDITING' | 'LISTING' | 'OPEN | 'CLOSE' | 'LOADDING' | 'AUTH' | 'RECOVERY'，
displayName 对谁进行二次确认。即提示语中样式用加粗红色样式那部分参数；
fun 点确定后的回调处理无特殊要求根据具体需求自定义

  <a-button type="primary" style="margin-right: 20px" @click="onDel "
        >删除</a-button
      >
 const onDel = (record) => {
    customConfirmModal('RECOVERY', '自定义测试', () => {
         // 业务代码   
      });
  };

封装分页

使用方法，按照VBEN 自定义的分页做即可，需要注意的是，若是遇到添加后再掉分页需要这样写

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">添加</a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  // 表格
  const searchInfo = ref();
  const [registerTable, { reload}] = useTable({ 
    handleSearchInfoFn(info) {
      searchInfo.value = info;
      return info;
    },
   //......

  async function onSuccess() {

   if (title.value === '添加') {
      let paramobj = { ...searchInfo.value, resetFirstPage: true };
      reload(paramobj);
    } else {
      reload();
    }
  }
</script>

防抖和节流

引用方法： import { useThrottleFn, useDebounceFn } from '@vueuse/core'
参数都是有两个参数，第一个是回调函数，第二个是毫秒数。

   <a-button type="primary" style="margin-right: 20px" @click="onTestThrottleFn"
      >测试节流函数</a-button
    >
    <a-button type="primary" @click="onTestDebounceFn">测试防抖函数</a-button>

  import { useThrottleFn, useDebounceFn } from '@vueuse/core';
   function fun (){
     console.log('测试222');
   }
  const onTestThrottleFn = useThrottleFn(fun , 2000);
  const onTestDebounceFn = useDebounceFn(fun , 3000);

时间转换

convertDateToLocalOrUTC
用途： utc时间、本地时间相互转换
位置：src\utils\dateUtil.ts
参数： date，format，type

date：需要被转换的时间
format:需要的时间格式
type：默认local 目标类型local即将utc时间转换为本地时间

  import { convertDateToLocalOrUTC  } from '@/utils/dateUtil';
  console.log(convertDateToLocalOrUTC('2024-01-09T10:00:00'), '假设后台反的是utc,转为本地时间');
  console.log(
    convertDateToLocalOrUTC('2024-01-09 10:00:00', 'utc'),
    '假设后台反的是本地,转为utc间',
  );
  console.log(
    convertDateToLocalOrUTC('2024-01-09 10:00:00z', ''),
    '2假设后台反的是utc,转为本地时间',
  );
  console.log(
    convertDateToLocalOrUTC('2024-01-09 10:00:00z', 'utc'),
    '假设后台时间以z结尾=========',
  );

timeStart
用途：时间转换为一天|周|月|年的开始，
位置：src\utils\dateUtil.ts
参数： date，format，type

day 可取 |'day'|'week'| 'month' | 'year' |，默认'day'
date 可选。供参考这几种类型 string | Date | Dayjs | null | undefined

console.log( timeStart('day', '2024-2-29') )

timeEnd
用途：时间转换为一天|周|月|年的结束，
位置：src\utils\dateUtil.ts
参数： date，format，type

day 可取 |'day'|'week'| 'month' | 'year'
date 可选。供参考这几种类型 string | Date | Dayjs | null | undefined

console.log( timeEnd('day', '2024-2-29') )

自定义校验

emailValidate
用途：自定义邮箱校验，
位置：src\utils\customVerification.ts
参数：value 输入的值

 const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '邮箱',
      rules: [
        {
          required: true,
          validator: (rule, value) => emailValidate(value),
          trigger: 'blur',
        },
      ],
    },
  ];

phoneVerification
用途：手机号校验（只适用于手机号），
位置：src\utils\customVerification.ts
参数：value 输入的值

 const schemas: FormSchema[] = [
    {
      field: 'phone',
      component: 'Input',
      label: '手机号',
      rules: [
        {
          required: true,
          validator: (rule, value) => phoneVerification(value),
          trigger: 'blur',
        },
      ],
    },
  ];

fixedLineVerification
用途：固定电话校验（只适用于固定电话），
位置：src\utils\customVerification.ts
参数：value 输入的值

 const schemas: FormSchema[] = [
    {
      field: 'fixedLine',
      component: 'Input',
      label: '固定电话',
      rules: [
        {
          required: true,
          validator: (rule, value) => fixedLineVerification(value),
          trigger: 'blur',
        },
      ],
    },
  ];

phoneValidate
用途：手机/固话校验，
位置：src\utils\customVerification.ts
参数：value 输入的值

 const schemas: FormSchema[] = [
    {
      field: 'tel',
      component: 'Input',
      label: '手机/固定电话',
      rules: [
        {
          required: true,
          validator: (rule, value) => phoneValidate(value),
          trigger: 'blur',
        },
      ],
    },
  ];

checkRepeat
用途：查重校验，
位置：src\utils\customVerification.ts
参数：value,api, param , label , id

value 输入的值
api 查重接口
param 查重接口需要传的参数
label 标签名
id 当为文字（例如某名称查重）查重时，id不用传；当为修改时当前修改值的id

 const schemas: FormSchema[] = [
    {
      field: 'code',
      component: 'Input',
      label: '查重',
      rules: [
         {
          validator: (rule, value) => checkRepeat(value, isAccountExist, 'DisplayName', '名称', ),
          trigger: 'blur',
        },
      ],
    },
  ];

2024-02-29

2024-02-29

公共方法用法

提示语

二次确认提示弹窗

封装分页

防抖和节流

时间转换

自定义校验

推荐阅读更多精彩内容