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>