kg-viewer/src/components/NodeLinkDialog.vue

<template>

    <el-dialog
      v-model="visible"
      width="650"
      :before-close="handleClose"
    >
    <el-form :model="formData" :rules="formRules">
      <el-row class="data-category">{{message}}</el-row>
      <el-row>
        <el-input maxlength="64" show-word-limit v-model="formData.search"></el-input><el-button @click="handleSearch">搜索</el-button></el-row> 
      <el-row>
        <el-form-item prop="linkDirection">
        <el-radio v-model="formData.linkDirection" label="1">进</el-radio>
        <el-radio v-model="formData.linkDirection" label="2">出</el-radio>
        </el-form-item>
        <el-form-item prop="linkType">
          <el-select v-model="formData.linkType" placeholder="请选择" style="width: 200px">
            <el-option
                v-for="item in formData.linkOptions"
                :key="item.category"
                :label="item.name"
                :value="item.category">
              </el-option>
            </el-select>
        </el-form-item>
      </el-row>
      <el-row class="props-content">
        <el-checkbox :indeterminate="formData.isIndeterminate" v-model="formData.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>        
        <el-form-item prop="selectedNodes">
          <el-checkbox-group v-model="formData.selectedNodes" class="checkbox-content" >
            <el-checkbox style="width:220px" v-for="item in formData.nodes" :value="item.id" :key="item.id">{{item.name}}({{item.category}})</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-row>
    </el-form>
      <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, onMounted} from 'vue';
import r from '@/utils/request.ts';
import { ElMessageBox, ElNotification } from 'element-plus';
/**********emits**********/
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel','server-saved']);

/**********props**********/
const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作'
    },
    data: {
      type: Object,
      default: {},
    },
    nodes: {
      type: Object,
      default: {},
    },
    message: {
      type: String,
      default: '您确定要执行此操作吗？'
    },
});

/**********props_watch**********/
watch(() => props.modelValue, (newValue) => {
  console.log("watch modelValue "+newValue);
  
  visible.value = newValue;
  if (newValue){
    formData.value.id = 0;
    formData.value.search = '';
    formData.value.category = props.data.category;
    formData.value.name = props.data.name;  
    formData.value.selectedNodes = [];
    formData.value.nodes = props.nodes;
  }
});
watch(()=>props.data,(newvalue, oldvalue)=>{
  console.log("watch data");
});

watch(()=>props.nodes,(newvalue, oldvalue)=>{
  console.log("watch nodes");
  //formData.value.nodes = newvalue;
});
const handleClose = (done) => {
  emit('update:modelValue', false);
  done();
};

/**********ui_data**********/
const visible = ref(props.modelValue);
const formData = ref({
  id: 0,
  category: "",
  name: "",
  status: 0,
  search: "",
  nodes: {},
  linkType: "",
  linkDirection: "2",
  linkOptions: [{category:0, name:"has"},{category:1, name:"belongs_to"}],
  checkAll: false,    
  isIndeterminate: true,
  selectedNodes: []
});
const formRules = ref({
  linkType: [{required: true, message:"链接类型必须选择", trigger:"blur"}],
});
/**********ui_handler**********/
function handleCheckAllChange(val) {
  formData.value.selectedNodes = val ? props.data.nodes.map((data,index)=>{ return data.id;}) : [];
  formData.value.isIndeterminate = false;
};
function handleCheckedCitiesChange(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === data.nodes.length;
  this.isIndeterminate = checkedCount > 0 && checkedCount < data.nodes.length;
}
const handleSearch = () =>{
  const response = r.request<string[]>({
      url: "/api/nodes/search/"+formData.value.search+"/0/1",
      method: "get"
    });
  response.then(result => {    
    formData.value.nodes = result["nodes"];    
  });
}
const handleConfirm = () => {    
    if (formData.value.linkType.length < 3){

      ElMessageBox.alert(
        '必须要设置链接的类型',
        '警告',
        {
          confirmButtonText: '确定',
          callback: action => {
            console.log(action)
          }
        }
      );
      return;
    }
    if (formData.value.selectedNodes.length < 1){
      ElMessageBox.alert(
        '至少需要选择一个目标节点',
        '警告',
        {
          confirmButtonText: '确定',
          callback: action => {
            console.log(action)
          }
        }
      );
      return;
      }
    var requestData = [];
    var edgeData = {
      src_id: 0,
      dest_id: 0,
      category: "",
      name: "",
      version:"1.1",
      status: 1,
    }
    
    edgeData.src_id = props.data.id;
    if (formData.value.linkDirection == "1"){
      edgeData.dest_id = props.data.id;
    }
    formData.value.selectedNodes.forEach((value)=>{      
      edgeData.src_id = props.data.id;
      edgeData.dest_id = value;
      if (formData.value.linkDirection == "1"){
        edgeData.dest_id = props.data.id;
        edgeData.src_id = value;
      }
      edgeData.category = formData.value.linkType;
      edgeData.name = formData.value.linkOptions.find(obj=>obj.category == edgeData.category)?.name;
      requestData.push({...edgeData})
    });
    
    const response = r.request<string[]>({
      url: "/api/edge-create",
      method: "post",
      data: requestData,
    });
    response.then(result => {
      if (result.error_code == 0){
        ElNotification({
          title: '成功',
          message: '链接已经成功创建了',
          type: 'success'
        });
        emit('server-saved', result.edges);        
        emit('created');
      } else {
        ElNotification({
          title: '失败',
          message: '链接创建失败 '+ result.error_msg,
          type: 'error'
        });

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

/**********vue_event_handler**********/
onMounted( ()=>{

  const response = r.request<string[]>({
      url: "/api/edges/c/all",
      method: "get",
    });
    response.then(result => {
      formData.value.linkOptions = result['records'];
    });
});

  

/**********vue_export_def**********/
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{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  overflow-y: auto;
}

.checkbox-content{
  width: 600px;  
  height: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow-y: auto;
}

.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>