policeSecurity/superManagement/src/views/openPlatform/index.vue

<template>
  <table-pro-max
      ref="tableRef"
      :request-api="reqApi"
      :is-pagination="false"
      :columns="columns"
  >
    <template #tableHeader>
      <a-space>
        <a-button class="btn-success" @click="saveOrUpdateAccessKey({
            name: '',
            effectiveTime: 300000,
            isEnable:0
            })">添加accessKey
        </a-button>
        <a-button @click="a">a</a-button>
      </a-space>
    </template>
  </table-pro-max>
</template>

<script setup lang="tsx">
import {message} from "ant-design-vue";
import api from "@/axios";
import {onMounted, ref} from "vue";
import {submitSimpleFormModal} from "@/components/tsx/ModalPro.tsx";
import {dictSelectNodes} from "@/config/dict.ts";
import TableProMax from "@/components/table/TableProMax.vue";
import {TableProMaxProps} from "@/types/components/table";
import {AccessKeyRes, GeneratedAccessKeyParams} from "@/types/views/openPlatform/openPlatform.ts";
import {ComponentExposed} from "vue-component-type-helpers";
import axios from "axios";
import {useUserStore} from "@/stores/modules/userStore.ts";

type TableProps = TableProMaxProps<AccessKeyRes>

const tableRef = ref<ComponentExposed<typeof TableProMax>>(null)
const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '调用方'
  }, {
    dataIndex: 'accessKey',
    title: 'accessKey'
  }, {
    dataIndex: 'secretKey',
    title: 'secretKey'
  }, {
    dataIndex: 'effectiveTime',
    title: '有效时间(ms)'
  }, {
    dataIndex: 'isEnable',
    title: '状态',
    customRender: ({text}) => <a-tag color={text.extData?.color}>{text.label}</a-tag>
  }, {
    dataIndex: 'remark',
    title: '备注',
  }, {
    dataIndex: 'createTime',
    title: '创建时间'
  }, {
    dataIndex: 'opt',
    title: '操作',
    customRender: ({record}) => {
      return <a-space>
        <a-button class="btn-warn" onClick={() => saveOrUpdateAccessKey({
          snowFlakeId: record.snowFlakeId,
          name: record.name,
          effectiveTime: record.effectiveTime,
          isEnable: record.isEnable.value,
          allowedResources: record.allowedResources,
          remark: record.remark
        })}>编辑
        </a-button>

      </a-space>
    }
  }
]

const reqApi: TableProps["requestApi"] = () => api.get('/accessKeys/tableList')

const saveOrUpdateAccessKey = (params: GeneratedAccessKeyParams) => {
  submitSimpleFormModal<GeneratedAccessKeyParams>({
    title: '',
    formOptions: {
      name: {
        type: 'input',
        label: '调用方',
        required: true
      },
      effectiveTime: {
        type: 'inputNumber',
        label: '有效时间(ms)',
        required: true,
        componentsProps: {
          precision: 0
        }
      },
      allowedResources: {
        type: 'select',
        label: '可访问资源',
        options: allowedResources.value,
        componentsProps: {
          mode: 'multiple'
        }
      },
      isEnable: {
        type: "radioGroup",
        label: '是否启用',
        options: dictSelectNodes("IsEnable")
      },
      remark: {
        type: 'inputTextArea',
        label: '备注'
      }
    },
    formParams: {...params},
    submit: async (p) => {
      const resp = await api.post('/accessKeys/generatedAccessKey', p, {loading: true})
      message.success(resp.message)
      await tableRef.value?.requestGetTableData()
    }
  })
}
const userStore = useUserStore()

const a = () => {
  axios.get('http://127.0.0.1:8765/open/dataView', {
    headers: {
      'X-API-KEY': '123',
      'access-key': '123',
      'time-stamp': '123',
      'sign': '123',
      'nonce': '123'
    }
  }).then(resp => {
    console.log(resp);
  })
  // api.get('/open/dataView', null, {
  //   headers: {
  //     'X-API-KEY': '123',
  //     'access-key': '123',
  //     'time-stamp': '123',
  //     'sign': '123',
  //     'nonce': '123'
  //   }
  // })
}

const allowedResources = ref<SelectNodeVo<string>[]>([])

onMounted(() => {
  api.get<SelectNodeVo<string>[]>('/accessKeys/listOpenApi').then(resp => {
    allowedResources.value = resp.data
  })
})

</script>

<style scoped lang="scss">

</style>