vue3 hooks封装方法

vue3 hooks封装方法（一）

项目在使用的时候，需要将多处使用到的方法进行封装成hooks，而这次需要封装的方法中包括的有接口。因为不太会写hooks，所以记录一下。
使用到了vue的响应式、typescript。

1. 在hooks里面使用typescript通过interface 定义一下接口的属性。
   
2. 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 };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58