123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <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>
|