kg-viewer/src/components/NodeLinksEditDialog.vue

<template>

  <el-dialog
    v-model="visible"
    width="850"
    :before-close="handleClose"
  >
  <el-form :model="formData" :rules="formRules">
    <el-row class="data-category">{{message}}</el-row>
    
    <el-row class="props-content">
      
      <el-table
      tooltip-effect="dark"
      :data="formData.links"
      style="width: 100%"
      @selection-change="">
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column
        prop="src_node.name"
        label="源"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="链接名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="dest_node.name"
        label="目的">
      </el-table-column>
      <el-table-column
        prop="dest_node.status"
        label="状态">
        <template v-slot="scope">
          <div v-if="scope.row.status==0">正常</div>
          <div v-if="scope.row.status==-1"><el-tag type="danger">无效</el-tag></div>
          
        </template>
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="180">
      <template #default="scope">
        <el-button type="danger" size="small" @click="handleEdgeDelete(scope.row, -99)" >删除</el-button>        
        <el-button v-if="scope.row.status==0" type="warning" size="small" @click="handleEdgeDelete(scope.row, -1)" >设置无效</el-button>       
        <el-button v-if="scope.row.status==-1" type="success" size="small" @click="handleEdgeDelete(scope.row, 0)" >设置有效</el-button>
      </template>
    </el-table-column>
    </el-table>


    </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: {},
  },
  links: {
    type: Object,
    default: {},
  },
  message: {
    type: String,
    default: '您确定要执行此操作吗？'
  },
});

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

watch(()=>props.links,(newvalue, oldvalue)=>{
  console.log("watch nodes");
  formData.value.links = 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,
  links: [],
  checkAll: false,    
  isIndeterminate: true,
  selectedLinks: []
});
const formRules = ref({
  linkType: [{required: true, message:"链接类型必须选择", trigger:"blur"}],
});
const loadEdgeData = (data) => {
  const response = r.request<string[]>({
      url: "/api/edge-of-node/"+props.data.id,
      method: "get"
    });
    response.then(result => {   
      formData.value.links = result["edges"];
    });
}
const handleEdgeDelete = (data, status) =>{
  var message = "";
  if (status == -99){
    message = '您确认要删除这个链接吗？';
  }
  if (status == -1)
  {
    message = '您确认要将这个链接设置为无效吗？';
  }
  if (status == 0)
  {
    message = '您确认要将这个链接设置为有效吗？';
  }
  ElMessageBox.confirm(message,'提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    console.log("handleEdgeDelete(): " + data.id);
    
    const response = r.request<string[]>({
      url: "/api/edge-delete/"+data.id+"/"+status,
      method: "get"
    });
    response.then(result => {       
      loadEdgeData(data);
    });
  }).catch(() => {
    console.log('取消')
  })
};
/**********ui_handler**********/

const handleConfirm = () => {        
  emit('created');
  emit('update:modelValue', false);
  emit('server-saved');
};

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

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

});



/**********vue_export_def**********/
const openDialog = ()=>{
//visible.value = true;
}

defineExpose({openDialog});
</script>
 
<style scoped>
.data-category{
  width: 100%;
  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: 350px;
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow: auto;
}

.checkbox-content{
width: 600px;

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>