SMO/src/views/system/disposition/components/configurationBasic.vue

<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.ipPart" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="采集服务端口" style="width: 200px">
              <el-input v-model="formInline.portPart" :disabled="isDisabled"></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" :disabled="isDisabled">
                <el-option label="达梦数据库" value="达梦数据库"></el-option>
                <el-option label="SQLite数据库" value="SQLite数据库"></el-option>
                <el-option label="SqlServer数据库" value="SqlServer数据库"></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" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库地址" style="width: 200px">
              <el-input v-model="formInline.user" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库端口" style="width: 200px" >
              <el-input v-model="formInline.user" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库账号" style="width: 200px" >
              <el-input v-model="formInline.user" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数据库密码" style="width: 250px">
              <el-input v-model="formInline.user" :disabled="isDisabled"></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" :disabled="isDisabled"></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.mapUrl" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="端口" style="width: 200px">
              <el-input v-model="formInline.user" :disabled="isDisabled"></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 {nextTick, onMounted, ref, watch} from "vue";
import { defineModel } from 'vue';
const modelValue = defineModel();
const isDisabled = ref(true)
const formInline = ref<any>({
  ipPart:"",
  portPart:"",
  mapUrl:""
})
onMounted(() => {

});
watch(modelValue, (newVal) => {
  // 在这里处理 modelValue 的变化
  dataProcessing()
});

const dataProcessing= async ()=>{
  await nextTick(); // 确保 DOM 更新完成
  modelValue.value.forEach(function(item) {
    if(item.item_key==='9'){
      const itemValue = item.item_value
      if (!itemValue) {
        return;
      }
      const [ipPart, portPart] = itemValue.split('#');
      if (!ipPart || !portPart) {
        return;
      }
      formInline.value.ipPart = ipPart
      formInline.value.portPart = portPart
    }

    if(item.item_key==='6'){
      const itemValue = item.item_value
      if (!itemValue) {
        return;
      }
      formInline.value.mapUrl = itemValue
    }
  });
}

</script>

<style scoped>

</style>