申请调用

src/views/dataStandards/labelDropInspection/labelDetail/index.vue

@@ -257,11 +257,13 @@
     });
   }
   // 跳转运维
-  function handleOperation() {
-    router.push({
-      path: '/dataQuality/dataSheet/task/taskOperation',
-    });
-  }
+  // async function handleOperation() {
+  //   localStorage.setItem('type', '4');
+  //   await router.push({
+  //     path: '/dataIntegration/taskOM/index',
+  //   });
+  //   window.location.reload();
+  // }
 
   // 添加数据标准 弹窗
   function addDataStandard() {

src/views/mallResourceDevelopment/API/publicAPI/applyCall/call.data.ts

+import { FormSchema } from '@/components/Form';
+
+export const callFormSchema: FormSchema[] = [
+  {
+    label: '申请标题',
+    field: 'title',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '申请理由',
+    field: 'reason',
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '调用有效期',
+    field: 'time',
+    component: 'DatePicker',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+];

src/views/mallResourceDevelopment/API/publicAPI/applyCall/callData.ts

+import {ref} from "vue";
+
+export const infoList = [
+  {
+    label: '资源名称',
+    field: 'name',
+  },
+  {
+    label: '描述',
+    field: 'des',
+  },
+  {
+    label: '资源编目',
+    field: 'path',
+  },
+  {
+    label: '业务标签',
+    field: 'label',
+  },
+  {
+    label: '权属机构',
+    field: 'dept',
+  },
+  {
+    label: '敏感状态',
+    field: 'sensitive',
+  },
+  {
+    label: '开放权限',
+    field: 'power',
+  },
+];
+export const leftList = [
+  {
+    name: '测试SQL1',
+    des: null,
+    path: '业务运维/质量管理/质量体系',
+    label: null,
+    dept: '三十五所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+  {
+    name: '测试SQL2',
+    des: null,
+    path: '业务运维/质量管理/质量体系',
+    label: null,
+    dept: '三十三所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+  {
+    name: '测试SQL3',
+    des: null,
+    path: '业务运维/质量管理/生产体系',
+    label: null,
+    dept: '二十一所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+  {
+    name: '测试SQL4',
+    des: null,
+    path: '业务运维/质量管理/管理体系',
+    label: null,
+    dept: '十六所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+  {
+    name: '测试SQL5',
+    des: null,
+    path: '业务运维/质量管理/一致性体系',
+    label: null,
+    dept: '五十四所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+  {
+    name: '测试SQL6',
+    des: null,
+    path: '业务运维/质量管理/加工体系',
+    label: null,
+    dept: '六所',
+    sensitive: '非敏感',
+    power: 'API服务调用',
+  },
+];

src/views/mallResourceDevelopment/API/publicAPI/applyCall/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <!-- 审核配置 -->
+    <template #headerContent>
+      <div class="flex">
+        <div class="flex-1 header">
+          <LeftOutlined class="h-back" @click="handleBack" />
+          <ApiOutlined class="h-icon" />
+          <div class="h-des">申请调用：{{ title }}</div>
+        </div>
+        <div class="h-bt-group">
+          <a-button type="link" @click="handleBack">
+            <div>
+              <RollbackOutlined class="h-bt-icon" />
+            </div>
+            取消
+          </a-button>
+          <a-button type="link" @click="handleSubmit">
+            <div>
+              <CheckOutlined class="h-bt-icon" />
+            </div>
+            提交申请
+          </a-button>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="title">申请信息</div>
+      <BasicForm @register="registerForm" />
+      <div class="title">资源信息</div>
+      <div class="res-info">
+        <div class="w-1/4">
+          <div class="left-search">
+            <div class="search-title">资源名称</div>
+            <Input class="search-input" v-model:value="searchKey" placeholder="搜索名称">
+              <template #suffix>
+                <SearchOutlined />
+              </template>
+            </Input>
+          </div>
+          <div class="list">
+            <div
+              class="item"
+              :class="{ active: index === selectIndex }"
+              v-for="(item, index) in leftList"
+              :key="item"
+              @click="handleClick(index, item)"
+            >
+              <ApiOutlined class="item-icon" />
+              <div class="item-des">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="w-3/4 right-info">
+          <div class="title">基本信息</div>
+          <Row :gutter="[16, 30]">
+            <Col :span="12" v-for="info in infoList" :key="info">
+              <div class="col-item">
+                <div class="item-label">{{ info.label }}：</div>
+                <div class="item-des">{{ model[info.field] ? model[info.field] : '-' }}</div>
+              </div>
+            </Col>
+          </Row>
+          <div class="title">原始API</div>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { Input, Row, Col } from 'ant-design-vue';
+  import {
+    ApiOutlined,
+    LeftOutlined,
+    SearchOutlined,
+    RollbackOutlined,
+    CheckOutlined,
+  } from '@ant-design/icons-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { FormProps, useForm } from '@/components/Form';
+  import { callFormSchema } from '@/views/mallResourceDevelopment/API/publicAPI/applyCall/call.data';
+  import { onMounted, ref } from 'vue';
+  import { infoList, leftList } from './callData';
+
+  // 初始化
+  const router = useRouter();
+  const route = useRoute();
+  const { createMessage } = useMessage();
+  const searchKey = ref();
+  // 参数
+  const selectIndex = ref(0);
+  const model = ref({ ...leftList[0] });
+  const title = route.query.title;
+  onMounted(() => {
+    setFieldsValue({
+      title: title,
+    });
+  });
+  /**
+   * 方法
+   */
+  function handleBack() {
+    router.go(-1);
+  }
+  function handleSubmit() {
+    createMessage.success('申请成功！');
+  }
+  function handleClick(index, item) {
+    selectIndex.value = index;
+    model.value = item;
+  }
+  /**
+   * form
+   */
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 12 },
+    schemas: callFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  } as FormProps);
+</script>
+
+<style scoped>
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-back {
+      font-size: 20px;
+    }
+    .h-icon {
+      font-size: 30px;
+      color: #0a208a;
+    }
+    .h-des {
+      font-size: 18px;
+      font-weight: bolder;
+    }
+  }
+  .h-bt-group {
+    display: flex;
+    gap: 10px;
+    .h-bt-icon {
+      font-size: 20px;
+    }
+  }
+  .title {
+    font-weight: bolder;
+    margin: 15px 0;
+  }
+  .res-info {
+    display: flex;
+    border: 2px solid #b3b3b1;
+    .left-search {
+      display: flex;
+      gap: 10px;
+      padding: 5px 10px;
+      .search-title {
+        font-weight: bolder;
+        line-height: 32px;
+        width: 80px;
+      }
+      .search-input {
+      }
+    }
+    .list {
+      .item {
+        cursor: pointer;
+        transition: 0.05s;
+        display: flex;
+        padding: 10px 15px;
+        gap: 10px;
+        margin-left: -2px;
+        .item-icon {
+          font-size: 20px;
+        }
+        .item-des {
+        }
+      }
+      .active {
+        background-color: #dceffe;
+        color: #52a0fb;
+        border-left: 2px solid #0449ae;
+      }
+    }
+    .right-info {
+      border-left: 2px solid #b3b3b1;
+      padding: 5px 10px;
+    }
+    .col-item {
+      display: flex;
+      gap: 10px;
+      .item-label {
+        width: 100px;
+      }
+    }
+  }
+</style>

src/views/mallResourceDevelopment/API/publicAPI/index.vue

@@ -23,11 +23,14 @@
                 </div>
               </template>
             </Segmented>
-            <a-button :disabled="isDisabled" type="primary" @click="handleBulkDownload"
-              >批量下载</a-button
-            >
-            <a-button :disabled="isDisabled" type="primary" @click="pushNotifications(selectedCard)"
-              >批量推送</a-button
+            <!--            <a-button :disabled="isDisabled" type="primary" @click="handleBulkDownload"-->
+            <!--              >批量下载</a-button-->
+            <!--            >-->
+            <!--            <a-button :disabled="isDisabled" type="primary" @click="pushNotifications(selectedCard)"-->
+            <!--              >批量推送</a-button-->
+            <!--            >-->
+            <a-button type="primary" :disabled="isDisabled" @click="handleApply(selectedCard)"
+              >申请调用</a-button
             >
           </div>
         </div>
@@ -345,7 +348,20 @@
     cardListData.value = filteredList;
     reload();
   }
-
+  function handleApply() {
+    let title = '';
+    if (selectedCard.length >= 1) {
+      title = selectedCard[0].title + '等' + selectedCard.length + '个API服务';
+    } else {
+      title = selectedCard.title + '等1个API服务';
+    }
+    route.push({
+      path: '/mallResourceDevelopment/API/publicAPI/applyCall',
+      query: {
+        title: title,
+      },
+    });
+  }
   onMounted(() => {
     onSearch();
   });