公共方法用法
提示語
- 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，optlabel:提示語具體內容敬扛，
resultColor:結果顏色及圖標 單舉例
SUCCESS|ERROR|WARNINGsrc\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`字段, 會自動用統(tǒng)一的谒亦。
{ 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', '昵稱', () => {
// 業(yè)務代碼
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', '自定義測試', () => {
// 業(yè)務代碼
});
};
封裝分頁
使用方法巩步，按照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>
防抖和節(jié)流
引用方法： import { useThrottleFn, useDebounceFn } from '@vueuse/core'
參數都是有兩個參數椅野，第一個是回調函數终畅，第二個是毫秒數。
<a-button type="primary" style="margin-right: 20px" @click="onTestThrottleFn"
>測試節(jié)流函數</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',
},
],
},
];
