http tag

 src/api/data/channel/http/tag.ts

对比新文件
@@ -0,0 +1,39 @@
import request from '@/config/axios'

export interface HttpTagVO {
  id: string
  apiId: string,
  tagName: string,
  dataType: string,
  tagDesc: string,
  enabled: boolean
}

export interface HttpTagPageReqVO extends PageParam {
  tagName?: string
}

// 查询HttpTag列表
export const getHttpTagPage = (params: HttpTagPageReqVO) => {
  return request.get({ url: '/data/channel/http/tag/page', params })
}

// 查询HttpTag详情
export const getHttpTag = (id: number) => {
  return request.get({ url: `/data/channel/http/tag/info/${id}`})
}

// 新增HttpTag
export const createHttpTag = (data: HttpTagVO) => {
  return request.post({ url: '/data/channel/http/tag/create', data })
}

// 修改HttpTag
export const updateHttpTag = (data: HttpTagVO) => {
  return request.put({ url: '/data/channel/http/tag/update', data })
}

// 删除HttpTag
export const deleteHttpTag = (id: number) => {
  return request.delete({ url: '/data/channel/http/tag/delete?id=' + id })
}

 src/api/data/channel/http/token.ts

对比新文件
@@ -0,0 +1,41 @@
import request from '@/config/axios'

export interface HttpTokenVO {
  id: string
  apiId: string,
  loginUrl: string,
  clientId: string,
  clientSecret: string,
  username: string,
  password: string,
  token: string,
}

export interface HttpTokenPageReqVO extends PageParam {
  apiId?: string
}

// 查询HttpToken列表
export const getHttpTokenPage = (params: HttpTokenPageReqVO) => {
  return request.get({ url: '/data/channel/http/token/page', params })
}

// 查询HttpToken详情
export const getHttpToken = (id: number) => {
  return request.get({ url: `/data/channel/http/token/info/${id}`})
}

// 新增HttpToken
export const createHttpToken = (data: HttpTokenVO) => {
  return request.post({ url: '/data/channel/http/token/create', data })
}

// 修改HttpToken
export const updateHttpToken = (data: HttpTokenVO) => {
  return request.put({ url: '/data/channel/http/token/update', data })
}

// 删除HttpToken
export const deleteHttpToken = (id: number) => {
  return request.delete({ url: '/data/channel/http/token/delete?id=' + id })
}

 src/views/data/channel/http/index.vue

@@ -60,6 +60,14 @@
          </el-button>
          <el-button
            link
            type="primary"
            @click="openTagList(scope.row.id)"
            v-hasPermi="['data:channel-http:update']"
          >
            TAG
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['data:channel-http:delete']"
@@ -81,10 +89,14 @@
  <!-- 表单弹窗：添加/修改 -->
  <HttpApiForm ref="formRef" @success="getList"/>

  <!-- TAG弹窗：添加/修改 -->
  <TagList ref="tagRef" @success="getList" />

</template>
<script lang="ts" setup>
import * as HttpApi from '@/api/data/channel/http'
import HttpApiForm from './HttpApiForm.vue'
import TagList from './tag/index.vue'

defineOptions({name: 'DataHttpApi'})

@@ -132,6 +144,12 @@
  formRef.value.open(type, id)
}

/** TAG操作 */
const tagRef = ref()
const openTagList = (id?: string) => {
  tagRef.value.open(id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {

 src/views/data/channel/http/tag/TagForm.vue

对比新文件
@@ -0,0 +1,144 @@
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="Tag名称" prop="tagName">
            <el-input v-model="formData.tagName" placeholder="请输Tag名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型" prop="dataType">
            <el-select v-model="formData.dataType" placeholder="请选择">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.TAG_DATA_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enabled">
            <el-select v-model="formData.enabled" placeholder="请选择">
              <el-option
                v-for="dict in getBoolDictOptions(DICT_TYPE.IS_ENABLED)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述" prop="tagDesc">
            <el-input v-model="formData.tagDesc" placeholder="描述"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as HttpTagApi from '@/api/data/channel/http/tag'
import { CommonEnabledBool } from '@/utils/constants'
import { DICT_TYPE, getStrDictOptions, getBoolDictOptions } from '@/utils/dict'

defineOptions({name: 'HttpTagForm'})

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  apiId: undefined,
  tagName: undefined,
  dataType: undefined,
  tagDesc: '',
  enabled: CommonEnabledBool.ENABLE,
})
const formRules = reactive({
  tagName: [{required: true, message: 'Tag名称不能为空', trigger: 'blur'}],
  dataType: [{required: true, message: '数据类型不能为空', trigger: 'blur'}]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number, apiId?: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  if (apiId) {
    formData.value.apiId = apiId
  }
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await HttpTagApi.getHttpTag(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as HttpTagApi.HttpTagVO
    if (formType.value === 'create') {
      await HttpTagApi.createHttpTag(data)
      message.success(t('common.createSuccess'))
    } else {
      await HttpTagApi.updateHttpTag(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    apiId: undefined,
    tagName: undefined,
    dataType: undefined,
    tagDesc: '',
    enabled: CommonEnabledBool.ENABLE,
  }
  formRef.value?.resetFields()
}
</script>
ss

 src/views/data/channel/http/tag/index.vue

对比新文件
@@ -0,0 +1,205 @@
<template>
  <el-drawer
    v-model="drawer"
    size="50%"
    title="Kio Tag"
    :direction="direction"
    :before-close="handleClose"
  >
    <!-- 搜索 -->
    <ContentWrap>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="Tag名称" prop="tagName">
          <el-input
            v-model="queryParams.tagName"
            placeholder="请输入Tag名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            重置
          </el-button>
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['data:channel-kio:create']"
          >
            <Icon icon="ep:plus" class="mr-5px" />
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list">
        <el-table-column
          prop="tagName"
          label="Tag名称"
          header-align="center"
          align="left"
          min-width="150"
        />
        <el-table-column
          prop="tagDesc"
          label="Tag描述"
          header-align="center"
          align="left"
          min-width="150"
        />
        <el-table-column
          prop="dataType"
          label="数据类型"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="enabled"
          label="是否启用"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.enabled === true" size="small">是</el-tag>
            <el-tag v-else size="small" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="110" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
              v-hasPermi="['data:channel-kio:update']"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
              v-hasPermi="['data:channel-kio:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
    <TagForm ref="formRef" @success="getList" />
  </el-drawer>
</template>
<script lang="ts" setup>
import type { DrawerProps } from 'element-plus'
import * as HttpTagApi from "@/api/data/channel/http/tag";
import TagForm from './TagForm.vue'

defineOptions({name: 'HttpTag'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  apiId: undefined,
  tagName: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const page = await HttpTagApi.getHttpTagPage(queryParams)
    list.value = page.list
    total.value = page.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id, queryParams.apiId)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await HttpTagApi.deleteHttpTag(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 打开弹窗 */
const open = async (apiId?: string) => {
  resetForm()
  drawer.value = true
  queryParams.apiId = apiId
  if (apiId) {
    getList()
  }
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  queryParams.apiId = ''
  queryParams.tagName = ''
}

const handleClose = (done: () => void) => {
  drawer.value = false
}
</script>