api-我创建的

src/views/mallResourceDevelopment/API/apiByCreate/applyList/apply.data.ts

+import { FormSchema } from '@/components/Form';
+import {
+  rangeTreeData,
+  TreeData
+} from '@/views/mallResourceDevelopment/API/apiByCreate/applyList/applyData';
+
+export const applyFormSchema: FormSchema[] = [
+  {
+    label: '申请标题',
+    field: 'title',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '申请理由',
+    field: 'reason',
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '资源编目',
+    field: 'path',
+    required: true,
+    component: 'Cascader',
+    componentProps: {
+      options: TreeData,
+      style: {
+        width: '90%',
+      },
+    },
+  },
+];
+export const uploadFormSchema: FormSchema[] = [
+  {
+    label: '自动下架日期',
+    field: 'time',
+    component: 'DatePicker',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '可见范围',
+    field: 'range',
+    required: true,
+    defaultValue: '所有人',
+    component: 'Cascader',
+    componentProps: {
+      changeOnSelect: true,
+      options: rangeTreeData,
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '共享类型',
+    field: 'path',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '有条件共享',
+          value: '有条件共享',
+        },
+      ],
+      style: {
+        width: '90%',
+      },
+    },
+  },
+];
+export const resFormSchema: FormSchema[] = [
+  {
+    label: '资源名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '描述',
+    field: 'res',
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+];

src/views/mallResourceDevelopment/API/apiByCreate/applyList/applyData.ts

+export const TreeData = [
+  {
+    label: '资源编目管理',
+    value: '资源编目管理',
+    children: [
+      {
+        label: '一级编目',
+        value: '一级编目',
+      },
+      {
+        label: '公共安全',
+        value: '公共安全',
+      },
+      {
+        label: '卫生健康',
+        value: '卫生健康',
+      },
+      {
+        label: '文化休闲',
+        value: '文化休闲',
+      },
+      {
+        label: '经济建设',
+        value: '经济建设',
+      },
+      {
+        label: '经济建设',
+        value: '经济建设',
+      },
+    ],
+  },
+];
+export const rangeTreeData = [
+  {
+    label: '所有人',
+    value: '所有人',
+    children: [
+      {
+        label: '开发部',
+        value: '开发部',
+      },
+      {
+        label: '测试部',
+        value: '测试部',
+      },
+      {
+        label: '安全部',
+        value: '安全部',
+      },
+      {
+        label: '架构部',
+        value: '架构部',
+      },
+      {
+        label: '运维部',
+        value: '运维部',
+      },
+      {
+        label: '数据分析部',
+        value: '数据分析部',
+      },
+    ],
+  },
+];

src/views/mallResourceDevelopment/API/apiByCreate/applyList/index.vue

+<template>
+  <PageWrapper dense contentClass="flex">
+    <template #headerContent>
+      <div class="flex">
+        <div class="flex-1 header">
+          <LeftOutlined class="h-back" @click="handleBack" />
+          <Icon icon="ion:bag-check-outline" class="h-icon" />
+          <div class="h-txt">
+            <div class="h-des">{{ data.title }}</div>
+            <div class="h-path">{{ data.path }}</div>
+          </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="handleApply">
+            <div>
+              <CheckOutlined class="h-bt-icon" />
+            </div>
+            提交申请
+          </a-button>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="footer">
+        <BasicForm @register="applyForm" />
+        <div class="title">上架配置</div>
+        <BasicForm @register="configForm" />
+      </div>
+      <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>
+          <BasicForm @register="resForm" />
+          <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 Icon from '@/components/Icon/Icon.vue';
+  import { Input, Row, Col } from 'ant-design-vue';
+  import {
+    LeftOutlined,
+    RollbackOutlined,
+    CheckOutlined,
+    SearchOutlined,
+    ApiOutlined,
+  } from '@ant-design/icons-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { FormProps, useForm } from '@/components/Form';
+  import { FormSchema } from '@/views/mainBody/details/setup/mainBody.data';
+  import { callFormSchema } from '@/views/mallResourceDevelopment/API/publicAPI/applyCall/call.data';
+  import {
+    applyFormSchema,
+    resFormSchema,
+    uploadFormSchema,
+  } from '@/views/mallResourceDevelopment/API/apiByCreate/applyList/apply.data';
+
+  // 初始化
+  const router = useRouter();
+  const route = useRoute();
+  const { createMessage } = useMessage();
+  // 参数
+  const selectIndex = ref(0);
+  const leftList = [
+    {
+      name: '测试SQL',
+      des: null,
+      dept: '三十五所',
+      tag: null,
+      sensitive: '非敏感',
+      security: '未分级',
+    },
+    {
+      name: '测试SQL1',
+      des: null,
+      dept: '十七所',
+      tag: null,
+      sensitive: '非敏感',
+      security: '未分级',
+    },
+  ];
+  const infoList = [
+    {
+      label: '资源名称',
+      field: 'name',
+    },
+    {
+      label: '描述',
+      field: 'des',
+    },
+    {
+      label: '权属机构',
+      field: 'dept',
+    },
+    {
+      label: '业务标签',
+      field: 'tag',
+    },
+    {
+      label: '敏感状态',
+      field: 'sensitive',
+    },
+    {
+      label: '安全分级',
+      field: 'security',
+    },
+  ];
+  const queryParams = ref({});
+  const activeKey = ref();
+  const bottomKey = ref();
+  const data = route.query;
+  const model = ref({ ...leftList[0] });
+  onMounted(() => {
+    handleClick(0, leftList[0]);
+  });
+  /**
+   * 方法
+   */
+  function handleBack() {
+    router.go(-1);
+  }
+  function handleClick(index, item) {
+    selectIndex.value = index;
+    model.value = item;
+    setResValue({
+      name: item.name,
+    });
+  }
+  function handleApply() {
+    createMessage.success('申请成功！');
+  }
+  /**
+   * form
+   */
+  const [applyForm] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 12 },
+    schemas: applyFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  } as FormProps);
+  const [configForm] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 12 },
+    schemas: uploadFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  } as FormProps);
+  const [resForm, { setFieldsValue: setResValue }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    baseColProps: { span: 12 },
+    schemas: resFormSchema,
+    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 !important;
+      color: #0a208a;
+    }
+    .h-txt {
+      display: flex;
+      flex-direction: column;
+      .h-des {
+        font-size: 20px;
+        font-weight: bolder;
+      }
+      .h-path {
+        color: #a4a8b6;
+      }
+    }
+  }
+  .h-bt-group {
+    display: flex;
+    gap: 10px;
+    .h-bt-icon {
+      font-size: 20px;
+    }
+  }
+  .title {
+    font-weight: bolder;
+    margin: 15px 0;
+  }
+  .col-item {
+    display: flex;
+    gap: 10px;
+    .item-label {
+      width: 100px;
+    }
+  }
+  .column-des {
+    display: flex;
+    gap: 10px;
+    .c-icon {
+      font-size: 16px;
+    }
+    .c-text {
+    }
+  }
+  .power-table-form {
+    display: flex;
+    gap: 10px;
+    .power-table-form-item {
+      width: 200px;
+    }
+  }
+  .footer {
+    padding: 15px 10px;
+  }
+  .res-info {
+    display: flex;
+    border: 2px solid #b3b3b1;
+    min-height: 300px;
+    .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/apiByCreate/detail/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" />
+          <Icon icon="ion:bag-check-outline" class="h-icon" />
+          <div class="h-txt">
+            <div class="h-des">{{ data.title }}</div>
+            <div class="h-path">{{ data.path }}</div>
+          </div>
+        </div>
+        <div class="h-bt-group">
+          <a-button type="link">
+            <div>
+              <RollbackOutlined class="h-bt-icon" />
+            </div>
+            取消
+          </a-button>
+          <a-button type="link">
+            <div>
+              <SaveOutlined class="h-bt-icon" />
+            </div>
+            保存
+          </a-button>
+          <Divider type="vertical" style="height: 32px" />
+          <a-button type="link">
+            <div>
+              <CloudUploadOutlined class="h-bt-icon" />
+            </div>
+            版本发布
+          </a-button>
+          <a-button type="link">
+            <div>
+              <DownCircleOutlined class="h-bt-icon" />
+            </div>
+            版本管理
+          </a-button>
+          <a-button type="link">
+            <div>
+              <EyeOutlined class="h-bt-icon" />
+            </div>
+            文件预览
+          </a-button>
+          <a-button type="link">
+            <div>
+              <DeleteOutlined class="h-bt-icon" />
+            </div>
+            删除
+          </a-button>
+          <a-button type="link">
+            <div>
+              <UpSquareOutlined class="h-bt-icon" />
+            </div>
+            上架
+          </a-button>
+          <a-button type="link">
+            <div>
+              <EditOutlined class="h-bt-icon" />
+            </div>
+            编辑
+          </a-button>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Row, Col, Tabs, TabPane, Input, Select, TableProps, Divider } from 'ant-design-vue';
+  import {
+    ApiOutlined,
+    LeftOutlined,
+    CheckCircleFilled,
+    SearchOutlined,
+    FileSearchOutlined,
+    RollbackOutlined,
+    SaveOutlined,
+    CloudUploadOutlined,
+    DownCircleOutlined,
+    EyeOutlined,
+    DeleteOutlined,
+    UpSquareOutlined,
+    EditOutlined,
+    CheckOutlined,
+  } from '@ant-design/icons-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { driveListData } from '@/views/dataSourceManage/driveManage/driveData';
+  import { columns, searchSchema } from '@/views/dataSourceManage/driveManage/drive.data';
+  import { apiDocColumnsData } from '@/views/dataService/serviceDevelopment/apiData';
+  import { apiDocColumns } from '@/views/dataService/serviceDevelopment/api.data';
+  import {
+    backTableColumn,
+    powerTableColumn,
+  } from '@/views/mallResourceDevelopment/API/publicAPI/apiDetail/detail.data';
+  import TableAction from '@/components/Table/src/components/TableAction.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { searchFormSchema } from '@/views/auditLog/audi.data';
+  import { configTableColumn } from '@/views/mallResourceDevelopment/API/apiByApply/apiDetail/detail.data';
+
+  // 初始化
+  const router = useRouter();
+  const route = useRoute();
+  const { createMessage } = useMessage();
+  // 参数
+  const queryParams = ref({});
+  const activeKey = ref();
+  const bottomKey = ref();
+  const data = route.query;
+  /**
+   * 方法
+   */
+  function handleBack() {
+    router.go(-1);
+  }
+  function handleDoc() {
+    router.push({
+      path: '/mallResourceDevelopment/API/apiByApply/apiDoc',
+    });
+  }
+  function handleRemove() {
+    createMessage.success('取消成功！');
+  }
+  /**
+   * table
+   */
+  const [configTable] = useTable({
+    title: '请求参数',
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: [].length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response };
+    },
+    columns: configTableColumn,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+  });
+  const [backTable] = useTable({
+    title: '返回参数',
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: [].length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response };
+    },
+    columns: backTableColumn,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+  });
+  const [powerTable, { getSelectRows: getPowerSelectRows }] = useTable({
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: powerData.length,
+        code: '',
+        message: '',
+        data: powerData,
+      };
+      return { ...response };
+    },
+    rowSelection: true,
+    columns: powerTableColumn,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    actionColumn: {
+      width: 120,
+      title: '取消权限',
+      dataIndex: 'action',
+      fixed: undefined,
+    },
+  } as TableProps);
+</script>
+
+<style scoped>
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-back {
+      font-size: 20px;
+    }
+    .h-icon {
+      font-size: 30px !important;
+      color: #0a208a;
+    }
+    .h-txt {
+      display: flex;
+      flex-direction: column;
+      .h-des {
+        font-size: 20px;
+        font-weight: bolder;
+      }
+      .h-path {
+        color: #a4a8b6;
+      }
+    }
+  }
+  .h-bt-group {
+    display: flex;
+    gap: 10px;
+    .h-bt-icon {
+      font-size: 20px;
+    }
+  }
+  .title {
+    font-weight: bolder;
+    margin: 15px 0;
+  }
+  .col-item {
+    display: flex;
+    gap: 10px;
+    .item-label {
+      width: 100px;
+    }
+  }
+  .column-des {
+    display: flex;
+    gap: 10px;
+    .c-icon {
+      font-size: 16px;
+    }
+    .c-text {
+    }
+  }
+  .power-table-form {
+    display: flex;
+    gap: 10px;
+    .power-table-form-item {
+      width: 200px;
+    }
+  }
+</style>

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

@@ -10,9 +10,25 @@
             <span class="path">我创建的</span>
           </div>
         </div>
-        <a-button style="margin-left: 550px" type="primary" @click="deleteButton">删除</a-button>
-        <a-button style="margin-left: 10px" type="primary" @click="handleMove(1)">移动</a-button>
-        <a-button style="margin-left: 10px" type="primary" @click="batchUploading"
+        <a-button
+          style="margin-left: 550px"
+          type="primary"
+          :disabled="getDisabled()"
+          @click="deleteButton"
+          >删除</a-button
+        >
+        <a-button
+          style="margin-left: 10px"
+          type="primary"
+          :disabled="getDisabled()"
+          @click="handleMove(1)"
+          >移动</a-button
+        >
+        <a-button
+          style="margin-left: 10px"
+          type="primary"
+          :disabled="getDisabled()"
+          @click="batchUploading"
           >批量上架</a-button
         >
         <a-button style="margin-left: 10px" type="primary" @click="handleNewFolder"
@@ -28,7 +44,7 @@
           >批量新建</a-button
         >
       </div>
-      <BasicTable style="background-color: white" @register="registerTable">
+      <BasicTable ref="basicTable" style="background-color: white" @register="registerTable">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
             <template v-if="record.uploadStatus === '0'">
@@ -88,7 +104,7 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -109,7 +125,7 @@
   const [registerAddFileModal, { openModal: openAddFileModal }] = useModal();
   const [registerEditFile, { openModal: openEditFileModal }] = useModal();
 
-  const [registerTable, { reload, getRowSelection }] = useTable({
+  const [registerTable, { reload, getRowSelection, getSelectRows }] = useTable({
     api: async () => {
       const response = {
         pageNu: '1',
@@ -143,7 +159,14 @@
       dataIndex: 'action',
     },
   });
-
+  const basicTable = ref();
+  function getDisabled() {
+    if (basicTable.value) {
+      return getSelectRows().length <= 0;
+    } else {
+      return true;
+    }
+  }
   function handleDataEntry() {
     openAddFileModal(true, {
       title: '新建文件',
@@ -169,13 +192,13 @@
   }
 
   function batchUploading() {
-    createConfirm({
-      iconType: 'info',
-      title: '确认上架',
-      content: '确认批量上架选中数据吗？',
-      onOk() {
-        createMessage.success('上架成功!');
-        reload();
+    console.log('s', getSelectRows());
+    const list = getSelectRows();
+    const title = '申请上架：' + list[0].name + '测试SQL等' + list.length + '个资源';
+    router.push({
+      path: '/mallResourceDevelopment/API/apiByCreate/applyList',
+      query: {
+        title: title,
       },
     });
   }