xiaodou-ai-admin/src/pages/cvs/video/space.vue

<template>
<a-card title="空间管理" >
  <a-row justify="space-between" >
    <a-col><a-space><InputTsx placeholder="请输入空间名称进行搜索" /> <a-button type="primary">搜索</a-button> </a-space></a-col>
    <a-col><a-button type="primary"  @click="openModal">创建空间</a-button></a-col>
  </a-row>

  <StepModal
    :step="step"
    :steps="steps"
    :visible="visible"
  >
  <a-form :labelCol="{span: 10}" :wrapperCol="{span: 14}" >
    <a-form-item label="空间名称" v-bind="validateInfos.edgeName"  >
      <InputTsx allowClear v-model:value="spaceState.edgeName" />
    </a-form-item>
  </a-form>
  </StepModal>
</a-card>
</template>
<script lang='ts' setup >

import { StepModal } from '@/components/StepModal'
import { InputTsx } from '@/components/MicroComponents/index'
import { ref, reactive } from 'vue'
import { Form, message } from 'ant-design-vue'

const useForm = Form.useForm

const steps = [{ title: '空间基本信息' }, { title: '空间配置' }, { title: '选择计费类型' }, { title: '确认订单' }]

const step = ref(0)

const visible = ref<boolean>(false)

const columns = [
  {
    title: '空间ID',
    dataIndex: 'spaceId',
    key: 'spaceId'
  },
  {
    title: '空间名称',
    dataIndex: 'spaceName',
    key: 'spaceName'
  },
  {
    title: '空间类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '接入节点',
    dataIndex: 'edgeName',
    key: 'edgeName'
  },
  {
    title: '设备数量',
    dataIndex: 'deviceCount',
    key: 'deviceCount'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const spaceState = reactive<CVS.space>({
  description: '',
  deviceCount: null,
  deviceMode: '',
  edgeId: null,
  edgeName: '',
  serialId: '',
  spaceId: null,
  status: '',
  type: ''
})

const { resetFields, validate, validateInfos } = useForm(spaceState, {
  edgeName: [{ required: true, message: '请填写空间名称' }]
})

const openModal = () => visible.value = true

const closeModal = () => visible.value = false

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