123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <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"> 节点名称 </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>
|