<template>
  <el-form :inline="true" :model="formInline" class="form-inline" label-position="top">
    <div style="display: flex;flex-direction: column;height: 86vh">
      <div style="flex-grow: 1;">
        <div class="disposition-title">采集服务器配置</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="采集服务地址" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="采集服务端口" style="width: 200px">
              <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">数据库参数配置</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="数据库类型" style="width: 200px">
              <el-select v-model="formInline.region">
                <el-option label="数据库1" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="数据库实例名" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库地址" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库端口" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库账号" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库密码" style="width: 250px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">前端地图配置</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="前端地图地址" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">本地网页服务</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="地址" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="端口" style="width: 200px">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 重置 </el-button>
        <el-button type="primary"> 确定 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import {ref} from "vue";

const formInline = ref<any>({
  user:"",
  region:""
})
</script>

<style scoped>

</style>
