NodeCreateDialog.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <el-dialog
  3. v-model="visible"
  4. width="650"
  5. :before-close="handleClose"
  6. >
  7. <el-row class="data-category">{{data.name}}</el-row>
  8. <el-row>
  9. <div class="data-name"><div class="prop-name">&nbsp;节点名称&nbsp;</div>
  10. <el-input maxlength="64" show-word-limit v-model="formData.name"></el-input></div></el-row>
  11. <el-row class="props-content">
  12. <template v-for="item in formData.props" >
  13. <div class="data-prop"><div class="prop-name">{{ item.prop_title }}</div>
  14. <el-input v-model="item.prop_value" type="textarea" :rows="5" resize="none" class="data-text" maxlength="1000" show-word-limit></el-input>
  15. </div>
  16. </template>
  17. </el-row>
  18. <template #footer>
  19. <span class="dialog-footer">
  20. <el-button @click="handleCancel">取 消</el-button>
  21. <el-button type="primary" @click="handleConfirm">保 存</el-button>
  22. </span>
  23. </template>
  24. </el-dialog>
  25. </template>
  26. <script setup lang="ts">
  27. import { ref, watch, toRefs } from 'vue';
  28. import r from '@/utils/request.ts';
  29. import { ElNotification } from 'element-plus';
  30. const formData = ref({
  31. id: 0,
  32. category: "",
  33. name: "",
  34. props: [],
  35. status: 0,
  36. });
  37. const props = defineProps({
  38. modelValue: {
  39. type: Boolean,
  40. default: false
  41. },
  42. title: {
  43. type: String,
  44. default: '确认操作'
  45. },
  46. data: {
  47. type: Object,
  48. default: () => ({})
  49. },
  50. message: {
  51. type: String,
  52. default: '您确定要执行此操作吗?'
  53. }
  54. });
  55. const emit = defineEmits(['update:modelValue', 'confirm', 'cancel','server-saved']);
  56. const visible = ref(props.modelValue);
  57. watch(() => props.modelValue, (newValue) => {
  58. visible.value = newValue;
  59. });
  60. const handleClose = (done) => {
  61. emit('update:modelValue', false);
  62. done();
  63. };
  64. const handleConfirm = () => {
  65. emit('created');
  66. emit('update:modelValue', false);
  67. const response = r.request<string[]>({
  68. url: "/api/node-create",
  69. method: "post",
  70. data: formData.value,
  71. });
  72. response.then(result => {
  73. if (result.error_code == 0){
  74. ElNotification({
  75. title: '成功',
  76. message: '节点已经成功创建了',
  77. type: 'success'
  78. });
  79. console.log("Node created: "+ result.id);
  80. emit('server-saved', result.id);
  81. } else {
  82. ElNotification({
  83. title: '失败',
  84. message: '节点创建失败 '+result.error_msg,
  85. type: 'error'
  86. });
  87. }
  88. visible.value = false;
  89. });
  90. };
  91. const handleCancel = () => {
  92. emit('cancel');
  93. emit('update:modelValue', false);
  94. visible.value = false;
  95. };
  96. watch(()=>props.data,(newvalue, oldvalue)=>{
  97. formData.value.name = '';
  98. formData.value.id = 0;
  99. formData.value.category = newvalue.category;
  100. formData.value.props =[];
  101. newvalue.props.forEach(element => {
  102. 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});
  103. });
  104. });
  105. const openDialog = ()=>{
  106. //visible.value = true;
  107. }
  108. defineExpose({openDialog});
  109. </script>
  110. <style scoped>
  111. .data-category{
  112. width: 600px;
  113. font-size: 18pt;
  114. color:rgb(3, 57, 123);
  115. font-weight: 800;
  116. justify-content: center;
  117. margin-bottom: 10px;
  118. }
  119. .data-name{
  120. margin: 5px;
  121. display: flex;
  122. flex-direction: column;
  123. width: 580px;
  124. }
  125. .props-content{
  126. height: 450px;
  127. overflow-y: scroll;
  128. }
  129. .data-prop{
  130. margin: 5px;
  131. width: 600px;
  132. display: flex;
  133. flex-direction: column;
  134. }
  135. .prop-name{
  136. background-color: #efefef;
  137. color:rgb(11, 117, 247);
  138. width:580px;
  139. }
  140. .data-text{
  141. width: 580px;
  142. background-color: #efefef;
  143. }
  144. </style>