vue3 hooks封装方法
vue3封装hookstypescript接口
·
vue3 hooks封装方法(一)
项目在使用的时候,需要将多处使用到的方法进行封装成hooks,而这次需要封装的方法中包括的有接口。因为不太会写hooks,所以记录一下。
使用到了vue的响应式、typescript。
- 在hooks里面使用typescript通过interface 定义一下接口的属性。
- hooks里面的方法封装完成之后,在需要使用的文件内,引用hooks文件中的方法。
具体源码如下:
hooks文件
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
/** 审批流*/
export interface ApprovalProps<T = any> {
// 提交接口请求对象
handleSubmitApi?: (...arg: any) => Promise<any>;
// 取消提交接口请求对象
handleCancelSubmitApi?: (...arg: any) => Promise<any>;
// 审核接口请求对象
handleAuditApi?: (...arg: any) => Promise<any>;
// 取消审核接口请求对象
handleCancelAuditApi?: (...arg: any) => Promise<any>;
}
/**
* 审批流参数
*
* @param ApprovalProps 审批流参数
* ApprovalProps 对象
* dataArray ref响应式
*/
export function useSubmitInfo(ApprovalProps: ApprovalProps, dataArray) {
const { handleSubmitApi, handleCancelSubmitApi, handleAuditApi, handleCancelAuditApi } =
ApprovalProps; //解构
/**提交 */
function submitInfo() {
const data = { submitDataArray: dataArray.value };
handleSubmitApi(data)
.then((response) => {
createMessage.success(response.message);
})
.catch((response) => {
createMessage.error(response.message);
});
}
/**取消提交 */
function backSubmit() {
const data = {
dataArray: dataArray.value,
};
handleCancelSubmitApi(data)
.then((response) => {
createMessage.success(response.message);
})
.catch((response) => {
createMessage.error(response.message);
});
}
/**审核 */
function audit() {
const data = {
dataArray: dataArray.value,
approveActionCode: 'approvePass',
};
handleAuditApi(data)
.then((response) => {
createMessage.success(response.message);
})
.catch((response) => {
createMessage.error(response.message);
});
}
/**取消审核 */
function cancelAudit() {
const data = {
dataArray: dataArray.value,
approveActionCode: 'approveCancelApproval',
approveOpinion: '取消审核',
};
handleCancelAuditApi(data)
.then((response) => {
createMessage.success(response.message);
})
.catch((response) => {
createMessage.error(response.message);
});
}
return { submitInfo, backSubmit, audit, cancelAudit };
}
vue文件中调用
<template>
<div class="p-2">
<JVxeTable
v-if="addForm"
ref="tableRef"
stripe
toolbar
rowNumber
rowSelection
resizable
keepSource
@selectRowChange="selectRowChange"
>
<template #toolbarSuffix>
<a-button type="primary" @click="submitInfo"> 提交 </a-button>
<a-button type="primary" @click="backSubmit"> 取消提交 </a-button>
<a-button type="primary" @click="audit"> 审核 </a-button>
<a-button type="primary" @click="cancelAudit"> 取消审核 </a-button>
</template>
</JVxeTable>
</div>
</template>
<script lang="ts" setup name="projectRegister">
import { ref, onMounted, reactive } from 'vue';
import {
Api,
getList,
saveProjectRegister,
deleteProjectRegister,
getDetail,
submit,
cancelSubmit,
complete,
} from './projectRegister.api';
import { JVxeTableInstance } from '/@/hongda/JVxeTable/types';;
import { useSubmitInfo } from '/@/hooks/hongda/useFlowApproval';
const tableRef = ref<JVxeTableInstance>();
const selectedInfo = ref([]);
const { submitInfo, backSubmit, audit, cancelAudit } = useSubmitInfo(
{
handleSubmitApi: submit,
handleCancelSubmitApi: cancelSubmit,
handleAuditApi: complete,
handleCancelAuditApi: complete,
},
selectedInfo,
);
/**选中 */
function selectRowChange() {
selectedInfo.value = tableRef.value.getXTable().getCheckboxRecords();
editInfo.value = selectedInfo.value.map((item) => {
return item.projectRegisterId;
});
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)