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>