github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/components/InstancesItem.vue (about) 1 <template> 2 <div> 3 <div class="head"> 4 <div class="title"> 5 {{$t('menu.instances.item.edit')}} 6 </div> 7 <div class="buttons"></div> 8 </div> 9 <div> 10 <a-form-model ref="editForm" :model="model" :rules="rules"> 11 <a-row :gutter="colsFull"> 12 <a-form-model-item :label="$t('form.name')" prop="name" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 13 <a-input v-model="model.name" /> 14 </a-form-model-item> 15 </a-row> 16 17 <a-row :gutter="colsFull"> 18 <a-form-model-item :label="$t('form.value')" prop="value" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 19 <a-input v-model="model.value" /> 20 </a-form-model-item> 21 </a-row> 22 23 <a-row :gutter="colsFull"> 24 <a-form-model-item class="center"> 25 <a-button @click="save" type="primary">{{$t('form.save')}}</a-button> 26 <a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button> 27 </a-form-model-item> 28 </a-row> 29 </a-form-model> 30 </div> 31 </div> 32 </template> 33 34 <script> 35 import {saveInstancesItem} from "../api/manage"; 36 import {colsFull, colsHalf, labelColFull, wrapperColFull} from "@/utils/const"; 37 38 export default { 39 name: 'ResInstancesItemComponent', 40 data() { 41 return { 42 colsFull: colsFull, 43 colsHalf: colsHalf, 44 labelColFull: labelColFull, 45 wrapperColFull: wrapperColFull, 46 47 rules: { 48 field: [ 49 { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' }, 50 ], 51 }, 52 }; 53 }, 54 props: { 55 model: { 56 type: Object, 57 default: () => null 58 }, 59 time: { 60 type: Number, 61 default: () => 0 62 }, 63 }, 64 65 computed: { 66 }, 67 created () { 68 console.log('created') 69 }, 70 mounted () { 71 console.log('mounted') 72 }, 73 methods: { 74 save() { 75 console.log('save') 76 this.$refs.editForm.validate(valid => { 77 console.log(valid, this.model) 78 if (!valid) { 79 console.log('validation fail') 80 return 81 } 82 83 saveInstancesItem(this.model).then(json => { 84 console.log('saveInstancesItem', json) 85 this.$emit('save') 86 }) 87 }) 88 }, 89 reset() { 90 console.log('reset') 91 this.$refs.editForm.reset() 92 }, 93 } 94 } 95 </script> 96 97 <style lang="less" scoped> 98 </style>