SOP/sop-admin/sop-admin-frontend/src/views/serve/api/index.vue

<script setup lang="ts">
import {
  actionButtons,
  dlgShow,
  dlgTitle,
  editFormColumns,
  editFormData,
  editFormRules,
  handleAdd,
  handlePaginationChange,
  handleSave,
  handleSearch,
  isCustomRegSource,
  pageInfo,
  searchFormColumns,
  searchFormData,
  tableColumns,
  tableData,
  total
} from "./index";
defineOptions({
  name: "ServeApi"
});
</script>
<template>
  <el-card shadow="never">
    <template #header>
      <PlusSearch
        v-model="searchFormData"
        :columns="searchFormColumns"
        :show-number="2"
        label-position="right"
        :has-reset="false"
        @search="handleSearch"
      />
    </template>
    <PlusTable
      :columns="tableColumns"
      :table-data="tableData"
      :action-bar="{ buttons: actionButtons, width: 120 }"
      :pagination="{
        total,
        modelValue: pageInfo,
        pageSizeList: [10, 20, 50, 100],
        align: 'right'
      }"
      showOverflowTooltip
      adaptive
      @paginationChange="handlePaginationChange"
    >
      <!-- <template #title>
        <el-button type="primary" @click="handleAdd">新增接口</el-button>
      </template>-->
    </PlusTable>
    <PlusDialogForm
      v-model:visible="dlgShow"
      v-model="editFormData"
      :dialog="{ title: dlgTitle }"
      :form="{
        columns: editFormColumns,
        rules: editFormRules,
        labelWidth: '100px',
        labelPosition: 'right'
      }"
      :hasErrorTip="false"
      @confirm="handleSave"
    >
      <template #plus-field-application>
        <el-input
          v-if="isCustomRegSource"
          v-model="editFormData.application"
          placeholder="请输入所属应用"
        />
        <span v-else>
          {{ editFormData.application }}
        </span>
      </template>
      <template #plus-field-apiName>
        <el-input
          v-if="isCustomRegSource"
          v-model="editFormData.apiName"
          placeholder="请输入接口名称,如:goods.get"
        />
        <span v-else>
          {{ editFormData.apiName }}
        </span>
      </template>
      <template #plus-field-apiVersion>
        <el-input
          v-if="isCustomRegSource"
          v-model="editFormData.apiVersion"
          placeholder="请输入接口版本,如:1.0"
        />
        <span v-else>
          {{ editFormData.apiVersion }}
        </span>
      </template>
      <template #plus-field-description>
        <el-input
          v-if="isCustomRegSource"
          v-model="editFormData.description"
          placeholder="请输入接口描述"
        />
        <span v-else>
          {{ editFormData.description }}
        </span>
      </template>
    </PlusDialogForm>
  </el-card>
</template>