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