xiaodou-ai-admin/src/pages/Iot/dataServer/apis.vue

<template>
  <a-card>
    <a-row justify="space-between" >
      <a-col>
        <a-space>

        </a-space>
      </a-col>
      <a-col>
        <a-tag color="blue" v-if="state.appId" style="scale: 1.2;" >appid: {{state.appId}}</a-tag>
        <a-button v-else type="primary" @click="openModal('add', {})" >创建Appid</a-button>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :loading="state.loading"
      :data-source="state.dataSource"
      style="margin-top: 20px;"
      :pagination="false"
    >
    <template #bodyCell="{column, record}" >
      <template v-if="column.key === 'createAt'" >
        <div>{{ dayjs(record.createAt).format('YYYY/MM/DD HH:mm:ss')}}</div>
      </template>
      <template v-if="column.key === 'action'" >
        <a-space>
          <!-- <a @click="openModal('update', record)" >编辑</a> -->
          <a @click="delApiId(record)" >删除</a>
        </a-space>

      </template>
    </template>
    </a-table>
  </a-card>

  <modal-pro
    title="创建Appid"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >
    <a-form  :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
      <a-form-item label="appid" v-bind="validateInfos.appId"  >
        <a-input allowClear v-model:value="appidState.appId" />
      </a-form-item>
      <a-form-item label="appid名称" v-bind="validateInfos.appIdLabel"  >
        <a-input allowClear v-model:value="appidState.appIdLabel" />
      </a-form-item>
    </a-form>
  </modal-pro>

  </template>
<script lang='ts' setup >
import { DataController } from '@/controller/iot/data'
import { Form } from 'ant-design-vue'
import { onMounted, reactive, ref } from 'vue'
import { useSchedulerOnce } from '@/hooks/index'
import dayjs from 'dayjs'

const useForm = Form.useForm

const columns = [
  {
    title: 'appId名称',
    dataIndex: 'appIdLabel'
  },
  {
    title: 'appId',
    dataIndex: 'appId'
  },
  {
    title: '创建时间',
    dataIndex: 'createAt',
    key: 'createAt'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  apiLabel: ''
})

const state = reactive({
  loading: false,
  appId: '',
  visible: false,
  detailVisible: false,
  openApiDetail: {},
  dataSource: [],
  spnningLoading: false
})

const appidState = reactive({
  id: '',
  appId: '',
  appIdLabel: ''
})

const { resetFields, validate, validateInfos } = useForm(appidState, {
  appId: [{ required: true, message: '请填写appid' }],
  appIdLabel: [{ required: true, message: '请填写id名称' }]
})

const delApiId = async (record: any) => {
  await DataController.delAppIdById(record.id)
  getAppid()
}

const openDetailModel = (record: any) => {
  state.openApiDetail = record
  state.detailVisible = true
  useSchedulerOnce(() => {
    state.spnningLoading = false
    console.log('state.spnningLoading:', state.spnningLoading)
  }, 1000)
}

const opraState = ref<'add' | 'update'>('add')

const openModal = (type: 'add' | 'update', record: any) => {
  state.visible = true
  opraState.value = type
  resetFields(record)
}

const ok = async () => {
  validate().then(async () => {
    opraState.value === 'add' ? await DataController.postAppId(appidState) : await DataController.updateAppId(appidState)
    state.visible = false
    getAppid()
  })
}

const getAppid = async () => {
  const { data } = await DataController.getAppId()
  state.dataSource = data
}

onMounted(() => {
  getAppid()
})

</script>
  <style lang='less' scoped >
  </style>