admin-frontend/src/views/menuitem/ApiInfo/components/add/index.vue

<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage, ElMessageBox } from "element-plus";
import { http } from "@/utils/http";
// 获取当前板块接口列表
import Upload from "@iconify-icons/ri/upload-2-fill";
import Close from "@iconify-icons/ri/close-fill";
// 获取URLLIST
import { getGroupUrl } from "@/utils/getUrl/getUrl";

const props = defineProps<{
  submit: {
    type: Function;
    default: () => {};
  };
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
}>();
// 表单数据
let UpdateForm = ref({
  groupId: "", //分组
  apiName: "", //接口名称
  apiKey: "", //接口关键字
  apiHost: "", //接口主机头
  apiPort: "", //接口端口号
  apiRouter: "", //接口路由
  apiMethod: "", //接口请求方式

});
// 分组选项数据
let groupIdOptionList = []

// 选项卡参数(默认值为列表某项的id)
const activeId = ref('1')
// 提交函数
const submit = async () => {
  const UrlList = await getGroupUrl(['kxsConfigServer']);
  const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoadd.method, url: UrlList.kxsConfigServer.apiInfoadd.url, params: UpdateForm.value });
  if (status === 1) {
    ElMessage({
      message: "新增成功",
      type: "success"
    });
    UpdateForm.value = {
      groupId: "", //分组
      apiName: "", //接口名称
      apiKey: "", //接口关键字
      apiHost: "", //接口主机头
      apiPort: "", //接口端口号
      apiRouter: "", //接口路由
      apiMethod: "", //接口请求方式

    };
    closeVisible();
  } else {
    ElMessageBox.alert(msg, "提示", {
      confirmButtonText: "关闭",
      type: "warning"
    });
  };
};
//获取分组数据
const apiInfoquery = async () => {
  //通过ID获取表格数据
  const UrlList = await getGroupUrl(['kxsConfigServer']);
  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: {} });
  if (status === 1) {
    groupIdOptionList = data.records;
  }
};
apiInfoquery();
const closeFn: any = inject('closeAddVisible');
// 关闭弹窗回调函数
const closeVisible = () => {
  UpdateForm.value = {
    groupId: "", //分组
    apiName: "", //接口名称
    apiKey: "", //接口关键字
    apiHost: "", //接口主机头
    apiPort: "", //接口端口号
    apiRouter: "", //接口路由
    apiMethod: "", //接口请求方式

  };
  closeFn();
};
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
    el-form(:model='UpdateForm' label-position="right" label-width="100px")
      el-form-item(label="分组", prop="groupId")
        el-select(
          v-model="UpdateForm.groupId",
          placeholder="请选择分组",
          clearable,
          class="!w-[230px]"
        )
          el-option(:label="item.groupName", :value="item.id" v-for="(item,index) in groupIdOptionList")
      el-form-item(label='接口名称' prop="apiName")
        el-input(v-model='UpdateForm.apiName' autocomplete='off' class="!w-[230px]"
          placeholder="请输入接口名称")
      el-form-item(label='接口关键字' prop="apiKey")
        el-input(v-model='UpdateForm.apiKey' autocomplete='off' class="!w-[230px]"
          placeholder="请输入接口关键字")
      el-form-item(label='接口主机头' prop="apiHost")
        el-input(v-model='UpdateForm.apiHost' autocomplete='off' class="!w-[230px]"
          placeholder="请输入接口主机头")
      el-form-item(label='接口端口号' prop="apiPort")
        el-input-number(v-model='UpdateForm.apiPort' :min="1" :max="1000"
          placeholder="请输入接口端口号")
      el-form-item(label='接口路由' prop="apiRouter")
        el-input(v-model='UpdateForm.apiRouter' autocomplete='off' class="!w-[230px]"
          placeholder="请输入接口路由")
      el-form-item(label='接口请求方式' prop="apiMethod")
        el-input(v-model='UpdateForm.apiMethod' autocomplete='off' class="!w-[230px]"
          placeholder="请输入接口请求方式")

    el-button(
      :icon="useRenderIcon(Close)",
      :loading="loading",
      @click="closeVisible()"
    ) 关闭
    el-button(
      type="primary",
      :icon="useRenderIcon(Upload)",
      :loading="loading",
      @click="submit"
    ) 确认提交
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.collapsedom {
  padding: 0 20px;
  background-color: #fff;
}

.ovh-x {
  height: 40vh;
  overflow-y: auto;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}
</style>