fix: 修改step-modal

src/components/StepModal/index.less

@@ -1,57 +1,27 @@
 
+v-deep .ant-modal {
+  background-color: #f7f7f9;
+}
 
 .step-modal {
-  width: 100vw;
-  height: 100vh;
-  background-color: #f7f7f9;
-  position: fixed;
-  top: 0;
-  left: 0;
+  min-width: 1000px;
+  height: 800px;
   z-index: 20;
-  .navbar {
-    width: 100vw;
-    height: 50px;
-    padding: 0 16px;
-    background-color: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    
-  }
   .steps {
     width: 70%;
     margin: 24px auto;
   }
-  .content {
-    padding: 0 16px;
+  .step-modal-content {
+    height: 600px;
   }
   .footer {
-    width: 100vw;
-    height: 80px;
-    box-shadow: 0px 1px 1px #000;
+    width: 100%;
+    height: 60px;
     position: absolute;
     left: 0;
     bottom: 0;
     padding-left: 40px;
-    background-color: #fff;
   }
-  
-}
 
+}
 
-.full-modal {
-  .ant-modal {
-    max-width: 100%;
-    top: 0;
-    padding-bottom: 0;
-    margin: 0;
-  }
-  .ant-modal-content {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh);
-  }
-  .ant-modal-body {
-    flex: 1;
-  }
-}

src/components/StepModal/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Col, Row, Space, Steps, Modal } from 'ant-design-vue'
+import { Button, Col, Row, Space, Steps, Modal, Card } from 'ant-design-vue'
 import { defineComponent, PropType, computed, ref, createApp } from 'vue'
 import './index.less'
 
@@ -43,24 +43,19 @@ export const StepModal = defineComponent({
     return () => (
       <Modal
         class='step-modal'
-        visible={true}
-        width='100%'
+        visible={props.visible}
         title={false}
         closable={false}
-        wrapClassName="full-modal"
         footer={null}
       >
-        <Row class='navbar' >
-          <Col style="cursor: pointer;scale: 1.2" > &lt; 返回</Col>
-        </Row>
         <Row class='steps' >
-        <Steps
-          size="small"
-          current={1}
-          items={props.steps}
-        ></Steps>
+          <Steps
+            size="small"
+            current={1}
+            items={props.steps}
+          ></Steps>
         </Row>
-        <Row class='content' >
+        <Row class='step-modal-content' >
           {ctx.slots.default!()}
         </Row>
         <Row class='footer' align='middle' justify='space-between' >

src/components/TableProV2/index.tsx

@@ -3,7 +3,7 @@ import {
   Button, DropdownButton, PaginationProps
 } from 'ant-design-vue'
 import { DownOutlined } from '@ant-design/icons-vue'
-import { PropType, computed, defineComponent, reactive, ref, defineEmits, FunctionalComponent } from 'vue'
+import { PropType, computed, defineComponent, reactive, ref, defineEmits, FunctionalComponent, onMounted } from 'vue'
 
 /**
  * @description Table Pro 超级table 将各种业务与操作融合起来
@@ -19,11 +19,12 @@ interface Props {
   request: {
     get: (record: any) => {data, sum},
     params: any
-  }
+  },
+  easy: boolean
 }
 
 const TablePro: FunctionalComponent<Props> = (props) => {
-  const { request } = props
+  const { request, easy } = props
 
   console.log('defineComponent:', props)
 
@@ -46,7 +47,7 @@ const TablePro: FunctionalComponent<Props> = (props) => {
     onChange: (page: number, pageSize: number) => onChangePage(page, pageSize)
   }, typeof props.pagination === 'boolean' ? {} : { ...props.pagination }))
 
-  const dataSource = ref()
+  const dataSource = ref([])
 
   const opraMeun = (
     <Menu>
@@ -69,6 +70,8 @@ const TablePro: FunctionalComponent<Props> = (props) => {
   }
 
   const dispatchRequest = async () => {
+    console.log('调用')
+
     loading.value = true
     const { data, sum } = await request.get({
       ...request.params,
@@ -80,6 +83,14 @@ const TablePro: FunctionalComponent<Props> = (props) => {
     dataSource.value = data
   }
 
+  // dispatchRequest()
+
+  onMounted(() => {
+    console.log('onMounted')
+
+    dispatchRequest()
+  })
+
   /**
    * 展示或者隐藏对应的column
    */
@@ -87,10 +98,12 @@ const TablePro: FunctionalComponent<Props> = (props) => {
     columnsPro.value[index].hidden = !columnsPro.value[index].hidden
   }
 
-  return (
+  const RenderOpraRow = () => {
+    return (
       <>
-
-        <Row gutter={[8, 8]}>
+        {easy
+          ? null
+          : <Row gutter={[8, 8]}>
           <Col span={12} >
             {/* <solt name="search" ></solt> */}
           </Col>
@@ -126,16 +139,24 @@ const TablePro: FunctionalComponent<Props> = (props) => {
                 </DropdownButton>
             </Space>
           </Col>
-        </Row>
-        {/*       dataSource={dataSource} */}
-        {/* <Table
+        </Row>}
+      </>
+    )
+  }
+
+  return (
+      <>
+        <RenderOpraRow />
+        {/*       */}
+        <Table
           columns={columnsFilter.value}
           loading={loading.value}
           pagination={typeof props.pagination === 'boolean' ? false : pagination}
+          dataSource={dataSource.value}
         >
           <slot></slot>
           <slot name='action'></slot>
-        </Table> */}
+        </Table>
       </>
   )
 }

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -31,10 +31,16 @@
     <a-card
       style="margin-top: 20px"
     >
-      <TablePro
-        :request="CommonController.getTransport"
+      <a-table
+        :dataSource="dataSource"
         :columns="columns"
-      />
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a @click="useCopy(record.address)" >复制</a>
+          </template>
+        </template>
+      </a-table>
     </a-card>
 
     <!-- 资源 -->
@@ -56,6 +62,7 @@
 
 <script setup lang="ts" >
 import { CommonController, DeviceContriller, ModelController, RuleController } from '@/controller/index'
+import { useCopy } from '@/hooks/dom'
 import { useStaticImg } from '@/utils/static'
 import { nextTick, onMounted, reactive, Ref, ref, watch, watchEffect } from 'vue'
 
@@ -112,6 +119,8 @@ const sourceList = reactive([
   }
 ])
 
+const dataSource = ref([])
+
 const getStatisList = async () => {
   ModelController.count().then(r => {
     // sourceList[0].value = r.data.TOTAL
@@ -134,6 +143,9 @@ const getStatisList = async () => {
 
 onMounted(() => {
   getStatisList()
+  CommonController.getTransport().then(r => {
+    dataSource.value = r
+  })
 })
 
 </script>

src/pages/cvs/video/space.vue

@@ -10,7 +10,11 @@
     :steps="steps"
     :visible="visible"
   >
-    7788
+  <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>
@@ -18,7 +22,10 @@
 
 import { StepModal } from '@/components/StepModal'
 import { InputTsx } from '@/components/MicroComponents/index'
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
+import { Form, message } from 'ant-design-vue'
+
+const useForm = Form.useForm
 
 const steps = [{ title: '空间基本信息' }, { title: '空间配置' }, { title: '选择计费类型' }, { title: '确认订单' }]
 
@@ -69,6 +76,22 @@ const columns = [
   }
 ]
 
+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

src/type/cvs.d.ts

@@ -1,13 +1,13 @@
 declare namespace CVS {
   interface space {
     description: string
-    deviceCount: number
-    deviceMode: string
-    edgeId: number
-    edgeName: string
-    serialId: string
-    spaceId: number
-    status: 'RUNNING' | 'STOPPED' | 'OPERATING'
-    type: 'RTMP' | 'GB28181' | 'ONVIF' | 'BVCP' | 'RTSP' | 'JT808'
+    deviceCount: number | null
+    deviceMode: string | null
+    edgeId: number | null
+    edgeName: string | null
+    serialId: string | null
+    spaceId: number | null
+    status: 'RUNNING' | 'STOPPED' | 'OPERATING' | ''
+    type: 'RTMP' | 'GB28181' | 'ONVIF' | 'BVCP' | 'RTSP' | 'JT808' | ''
   }
 }