fix: realview增加footer

config/proxy.ts

@@ -21,7 +21,7 @@ module.exports = {
       pathRewrite: { '^/iot': '' }
     },
     '/dataSource': {
-      target: 'http://bynt9d.natappfree.cc',
+      target: 'http://124.222.113.37:8888',
       changeOrigin: true,
       pathRewrite: { '^/dataSource': '' }
     }

src/api/schedule/apiCenter.ts

@@ -211,8 +211,7 @@ export function disableVersion (id: string) {
   })
 }
 
-/**
- * 发布
+/** *发布
  * @id api 版本主键
  */
 export function disableVersionPush (id: string) {

src/components/RealView/index.less

@@ -33,4 +33,15 @@
     overflow: hidden;
     overflow-y: auto;
   }
+
+
+  .footer {
+    width: 100%;
+    height: 60px;
+    background-color: #fff;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding-left: 18px;
+  }
 }

src/components/RealView/index.tsx

@@ -1,10 +1,9 @@
 import { defineComponent, onMounted, PropType, ref, Teleport, toRef, toRefs } from 'vue'
-import { Row, Col, Tabs } from 'ant-design-vue'
+import { Row, Col, Tabs, Space, Button } from 'ant-design-vue'
 import { LeftOutlined } from '@ant-design/icons-vue'
 import './index.less'
 
 const RealView = defineComponent({
-
   props: {
     open: {
       type: Boolean,
@@ -17,14 +16,20 @@ const RealView = defineComponent({
     tabsList: {
       type: Array as PropType<{key: string, tab: string}[]>,
       default: () => []
+    },
+    footer: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['cancel', 'tabChang'],
+  emits: ['cancel', 'tabChang', 'ok'],
   setup (props, ctx) {
-    const { open, tabKey, tabsList } = toRefs(props)
+    const { open, tabKey, tabsList, footer } = toRefs(props)
 
     const cancel = () => ctx.emit('cancel')
 
+    const ok = () => ctx.emit('ok')
+
     const onTabChange = (key) => ctx.emit('tabChang', key)
 
     const TabsRender =
@@ -54,6 +59,19 @@ const RealView = defineComponent({
               <div class='real-view-content' >
                 {ctx.slots.default?.()}
               </div>
+
+              {/* footer */}
+              {
+                footer.value
+                  ? <Row class='footer' >
+                  <Space>
+                    <Button onClick={() => cancel()}>取消</Button>
+                    <Button type='primary' onClick={() => ok()}>确定</Button>
+                  </Space>
+                </Row>
+                  : null
+              }
+
             </div>
           </Teleport>
 

src/controller/schedule/dataSource.ts

@@ -2,6 +2,8 @@ import { addDataSource, dataSourceConnect, dataSourceConnectTest, delDataSource,
 import { message } from 'ant-design-vue'
 
 export class DataSourceController {
+  static dataSourceType = ['MYSQL', 'PGSQL', 'DM', 'ORACLE', 'DORIS']
+
   static async page (params: COMMON.API.QueryParams & {label: string, dataSourceType: SCHEDULE.SOURCE.DataSourceType}) {
     return await getDataSourcePage(params)
   }

src/pages/Iot/devOps/onlineTest.vue

@@ -284,14 +284,10 @@ const openCmdModal = () => {
 }
 
 const handleSelectDevice = () => {
-  console.log('我不处罚')
   const _device = selectDeviceRef.value.getSelectDevice()
-  console.log('_device:', _device)
 
   if (_device) {
     state.device = _device
-    console.log('state.device:', state.device)
-
     state.drawerVisible = false
   } else {
     message.warn('请选择产品')

src/pages/schedule/dataSource/manage/index.vue

@@ -1,28 +1,51 @@
 <template>
 <a-card title="数据源管理" >
 
-  <a-row>
-    <a-col></a-col>
-  </a-row>
-
-  <a-table
-      style="margin-top: 10px;"
-      :columns="columns"
-      :data-source="state.dataSource"
-      :loading="state.loading"
-      :pagination="queryState"
-      @change="changePage"
-    >
-    <template #bodyCell="{column, record}">
-        <template v-if="column.key === 'action'" >
-        </template>
+  <!--     :server="DataSourceController.page" -->
+  <table-pro
+
+    :columns="columns"
+    ref="tableProDom"
+    @add="openModal"
+  >
+    <template #search >
+      <a-space>
+        <InputTsx v-model:value="serverParams.label"  ></InputTsx>
+        <a-select style="width: 170px;" >
+          <a-select-option
+            v-for="item in DataSourceController.dataSourceType"
+            :key="item"
+            :value="item"
+          >
+            {{item}}
+          </a-select-option>
+        </a-select>
+        <a-button type="primary" @click="search" >搜索</a-button>
+      </a-space>
+    </template>
+    <template #render="{column, record}" >
+      <template v-if="column.key === 'action'" >
+      </template>
     </template>
-  </a-table>
+  </table-pro>
 </a-card>
+
+<RealView
+  :open="visible"
+  @cancel="visible = false"
+  tab-key="base"
+  :tabs-list="[{ key: 'base', tab: '基础信息' },]"
+  @ok="submit"
+>
+
+</RealView>
 </template>
 <script lang='ts' setup >
 import { DataSourceController } from '@/controller'
-import { reactive, onMounted } from 'vue'
+import { reactive, ref } from 'vue'
+import { InputTsx } from '@/components/MicroComponents'
+import { RealView } from '@/components/RealView/index'
+import { Form } from 'ant-design-vue'
 
 const columns = [
   {
@@ -44,32 +67,64 @@ const columns = [
   }
 ]
 
-const queryState = reactive({
-  page: 1,
-  pageSize: 10,
-  total: 0
+const useForm = Form.useForm
+
+const tableProDom = ref()
+
+const serverParams = ref({
+  label: ''
 })
 
 const state = reactive({
-  loading: false,
-  dataSource: []
+
+})
+
+const oracleConnectTypes = ['ORACLE_SERVICE_NAME', 'ORACLE_SID']
+
+const sourceState = reactive({
+  label: '',
+  description: '',
+  dataSourceConnectParam: {
+    dataSourceType: 'MYSQL',
+    username: '',
+    password: '',
+    address: '',
+    port: '',
+    database: '',
+    driverClassName: '',
+    validateQuery: '',
+    minimumIdle: 5,
+    maximumPoolSize: 50,
+    connectType: 'ORACLE_SERVICE_NAME' // ORACLE_SID
+  }
 })
 
-const changePage = ({ current }) => {
-  queryState.page = current
-  getDataSource()
+const visible = ref<boolean>(true)
+
+const search = () => {
+  tableProDom.value.reload()
 }
 
-const getDataSource = async () => {
-  state.loading = true
-  const { data } = await DataSourceController.page(queryState)
-  state.loading = false
-  state.dataSource = data
+const openModal = () => {
+  visible.value = true
 }
 
-onMounted(() => {
-  // getDataSource()
+const { resetFields, validate, validateInfos } = useForm(sourceState, {
+  label: [{ required: true, message: '请填写数据源名称' }],
+  description: [{ required: true, message: '请填写数据源描述' }],
+  username: [{ required: true, message: '请填写用户名' }],
+  password: [{ required: true, message: '请填写用户名' }],
+  address: [{ required: true, message: '请填写用户名' }],
+  port: [{ required: true, message: '请填写用户名' }],
+  database: [{ required: true, message: '请填写用户名' }],
+  driverClassName: [{ required: true, message: '请填写用户名' }],
+  validateQuery: [{ required: true, message: '请填写用户名' }]
 })
+
+const submit = () => {
+
+}
+
 </script>
 <style lang='less' scoped >
 </style>