admin-frontend/src/views/api/apiInfo/hook.tsx

import {
  reactive,
  onMounted,
  ref,
  PaginationProps
} from "@/utils/importUsed";
import { requestSearch, requestDelete } from "@/utils/handlePort";
// 表单实例
const ruleFormRef = ref();
export function useApiInfo() {
  // 获取当前板块接口列表
  onMounted(async () => {
    onSearch();
    groupIdQuery();
  });
  const form = reactive({
    // 根据字段生成对象
    groupId: "", //分组
    apiName: "" //接口名称
  });
  // 渲染表单组件和 form 字段相对应
  const formData = ref({
    groupId: {
      label: "分组",
      type: "select",
      disposition: {},
      options: [],
      rules: []
    },
    apiName: {
      label: "接口名称",
      required: false,
      type: "input",
      disposition: {}
    }
  });
  // const formData = {
  //   username: {
  //     label: "用户名",
  //     required: true,
  //     type: "select",
  //     disposition: { multiple: false },
  //     options: [
  //       { label: "id1", value: 1 },
  //       { label: "id2", value: 2 }
  //     ],
  //     rules: []
  //   },
  //   phone: {
  //     label: "电话号码",
  //     required: false,
  //     type: "picker",
  //     disposition: {
  //       type: "datetimerange"
  //     }
  //   },
  //   deptId: {
  //     label: "所属部门ID",
  //     required: false,
  //     type: "input",
  //     disposition: {},
  //     rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
  //   }
  // };
  const dataList = ref([]);
  const loading = ref(false);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      width: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "分组名称",
      prop: "apiGroupInfo.groupName",
      minWidth: 200
    },
    {
      label: "分组说明",
      prop: "apiGroupInfo.groupRemark",
      minWidth: 200
    },
    {
      label: "分组版本号",
      prop: "apiGroupInfo.groupVersion",
      minWidth: 200
    },
    {
      label: "接口名称",
      prop: "apiName",
      minWidth: 200
    },
    {
      label: "接口关键字",
      prop: "apiKey",
      minWidth: 200
    },
    {
      label: "接口主机头",
      prop: "apiHost",
      minWidth: 200
    },
    {
      label: "接口端口号",
      prop: "apiPort",
      minWidth: 200
    },
    {
      label: "接口路由",
      prop: "apiRouter",
      minWidth: 200
    },
    {
      label: "ID",
      prop: "id",
      minWidth: 200
    },

    {
      label: "操作",
      fixed: "right",
      width: 200,
      slot: "operation"
    }
  ];
  // 当前页数量切换
  function handleSizeChange(val: number) {
    if (typeof val === "number") {
      pagination.pageSize = val;
      onSearch();
    }
  }
  // 当前页码切换
  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
    if (typeof val === "number") {
      pagination.currentPage = val;
      onSearch();
    }
  }
  // 选择表格项
  function handleSelectionChange(val) {
    console.log(`SelectionChange: ${val}`);
    onSearch();
  }
  // 搜索列表
  async function onSearch() {
    // 状态调整为加载中
    loading.value = true;
    // 调用模块及方法（需动态生成接口）
    const { status, msg, data }: any = await requestSearch({
      module: "kxsConfigServer",
      method: "apiInfolist",
      params: form,
      pageSize: pagination.pageSize,
      pageNum: pagination.currentPage
    });
    dataList.value = data.records;
    pagination.total = data.total;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  //获取分组数据
  async function groupIdQuery() {
    const { status, data }: any = await requestSearch({
      module: "kxsConfigServer",
      method: "apiGroupselectList",
      params: {}
    });
    if (status === 1) {
      formData.value.groupId.options = data.records.map(item => {
        return { value: item.id, label: item.groupName };
      });
    }
  }

  // 删除
  function handleDelete(row) {
    requestDelete(
      {
        module: "kxsConfigServer",
        method: "apiInfodelete",
        msg: "是否删除该api接口?",
        id: row.id
      },
      onSearch
    );
  }



  return {
    form,
    loading,
    columns,
    dataList,
    pagination,
    onSearch,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    ruleFormRef,
    groupIdQuery,
    handleDelete,
    formData
  };
}