kg-viewer/src/components/NodeCreateDialog.vue

<template>

    <el-dialog
      v-model="visible"
      width="650"
      :before-close="handleClose"
    >
    <el-row class="data-category">{{data.name}}</el-row>
    <el-row>
      <div class="data-name"><div class="prop-name">&nbsp;节点名称&nbsp;</div> 
      <el-input maxlength="64" show-word-limit v-model="formData.name"></el-input></div></el-row> 
    <el-row class="props-content">
      <template v-for="item in formData.props" >
        <div class="data-prop"><div class="prop-name">{{ item.prop_title }}</div>
          <el-input v-model="item.prop_value" type="textarea" :rows="5" resize="none" class="data-text"  maxlength="1000" show-word-limit></el-input>
        </div>
      </template>      
    </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">保 存</el-button>
        </span>
      </template>
    </el-dialog>

  </template>
   
  <script setup lang="ts">

import { ref, watch, toRefs } from 'vue';
import r from '@/utils/request.ts';
import { ElNotification } from 'element-plus';
const formData = ref({
  id: 0,
  category: "",
  name: "",
  props: [],
  status: 0,
});
const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作'
    },
    data: {
      type: Object,
      default: () => ({})
    },
    message: {
      type: String,
      default: '您确定要执行此操作吗？'
    }
});

  
  const emit = defineEmits(['update:modelValue', 'confirm', 'cancel','server-saved']);
  
  const visible = ref(props.modelValue);
  
  watch(() => props.modelValue, (newValue) => {
    visible.value = newValue;
  });
  
  const handleClose = (done) => {
    emit('update:modelValue', false);
    done();
  };
  
  const handleConfirm = () => {
    
    emit('created');
    emit('update:modelValue', false);

    const response = r.request<string[]>({
      url: "/api/node-create",
      method: "post",
      data: formData.value,
    });
    response.then(result => {
      if (result.error_code == 0){
        ElNotification({
          title: '成功',
          message: '节点已经成功创建了',
          type: 'success'
        });
        console.log("Node created: "+ result.id);
        emit('server-saved', result.id);
      } else {
        ElNotification({
          title: '失败',
          message: '节点创建失败 '+result.error_msg,
          type: 'error'
        });

      }
      
      visible.value = false;
    });
  };
  
  const handleCancel = () => {
    emit('cancel');
    emit('update:modelValue', false);
    visible.value = false;
  };

  watch(()=>props.data,(newvalue, oldvalue)=>{
    formData.value.name = '';
    formData.value.id = 0;
    formData.value.category = newvalue.category;
    formData.value.props =[];

    newvalue.props.forEach(element => {
      formData.value.props.push({id:0, ref_id: 0, prop_title: element.prop_title, prop_name: element.prop_name, prop_value:element.prop_value, category: element.category});
    });

  });
  const openDialog = ()=>{
    //visible.value = true;
  }
  
defineExpose({openDialog});
  </script>
   
  <style scoped>
.data-category{
    width: 600px;
    font-size: 18pt;
    color:rgb(3, 57, 123);
    font-weight: 800;
    justify-content: center;
    margin-bottom: 10px;
}
.data-name{
  margin: 5px;
  display: flex;
  flex-direction: column;
  width: 580px;
}
.props-content{
  height: 450px;
  overflow-y: scroll;
}
.data-prop{
  margin: 5px;
  width: 600px;
  display: flex;
  flex-direction: column;
}
.prop-name{
  background-color: #efefef;
  color:rgb(11, 117, 247);
  width:580px;
}
.data-text{
  width: 580px;
  background-color: #efefef;
}
  </style>