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

<template>
  <el-form :inline="true" :model="formInline" label-position="top" class="form-inline">
    <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-select v-model="formInline.timeGrantIntervals" :disabled="isDisabled">
                <el-option label="1小时" value="1"></el-option>
              </el-select>
            </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.periodReissue" :disabled = "isDisabled">
                <el-option label="1小时" value="1"></el-option>
                <el-option label="6小时" value="6"></el-option>
                <el-option label="12小时" value="12"></el-option>
                <el-option label="24小时" value="24"></el-option>
                <el-option label="168小时" value="168"></el-option>
                <el-option label="360小时" value="360"></el-option>
                <el-option label="720小时" value="720"></el-option>
              </el-select>
            </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.timingType">
                <el-option label="自动站授时" value="0"></el-option>
                <el-option label="始终服务器授时" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="formInline.timingType==='1'">
            <el-form-item label="自动站" style="width: 200px">
              <el-select v-model="formInline.timingPlatform" :disabled = "isDisabled">
                <el-option label="test1" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="4" v-if="formInline.timingType==='2'">
              <el-form-item label="地址" style="width: 200px">
                <el-input v-model="formInline.timingIP" :disabled="isDisabled"></el-input>
              </el-form-item>
            </el-col>
              <el-col :span="4" v-if="formInline.timingType==='2'">
                <el-form-item label="端口号" style="width: 200px">
                  <el-input v-model="formInline.timingPlatformPORT" :disabled="isDisabled"></el-input>
                </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button disabled> 重置 </el-button>
        <el-button type="primary" disabled> 确定 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import { onMounted, ref, watch} from "vue";
import { defineModel } from 'vue';
const modelValue = defineModel();
const isDisabled = ref(true)
const formInline = ref<any>({
  timeGrantIntervals:'1',
  periodReissue:'',
  timingType:'',
  timingPlatform:'',
  timingIP:'',
  timingPlatformPORT:'',



  user:"",
  region:""
})
onMounted(() => {

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

const dataProcessing= async ()=>{
  modelValue.value.forEach(function(item) {
    const itemValue = item.item_value
    if (!itemValue) {
      return;
    }
    if(item.item_key==='10'){
      formInline.value.periodReissue = itemValue
      console.log(formInline.value.periodReissue)
    }
    if(item.item_key==='8'){
      const [timingType, timingPlatform,timingIP,timingPlatformPORT] = itemValue.split('#');
      formInline.value.timingType = timingType
      formInline.value.timingPlatform = timingPlatform
      formInline.value.timingIP = timingIP
      formInline.value.timingPlatformPORT = timingPlatformPORT
    }
  });
}
</script>

<style scoped>
</style>