github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/components/FieldInfo.vue (about)

     1  <template>
     2    <div>
     3      <a-form-model ref="editForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
     4        <a-form-model-item :label="$t('form.name')" prop="field" :wrapper-col="wrapperColHalf">
     5          <a-input v-model="model.field" />
     6        </a-form-model-item>
     7  
     8        <a-form-model-item :label="$t('form.prefix')" :wrapper-col="wrapperColHalf">
     9          <div class="input-group">
    10            <a-form-model-item prop="prefix">
    11              <a-input v-model="model.prefix" />
    12            </a-form-model-item>
    13            <span class="input-group-addon">{{$t('form.postfix')}}</span>
    14            <a-form-model-item prop="postfix">
    15              <a-input v-model="model.postfix" />
    16            </a-form-model-item>
    17            <span class="input-group-addon">{{$t('form.divider')}}</span>
    18            <a-form-model-item prop="divider">
    19              <a-input v-model="model.divider" />
    20            </a-form-model-item>
    21          </div>
    22        </a-form-model-item>
    23  
    24        <a-form-model-item :label="$t('form.loop')" :wrapper-col="wrapperColHalf">
    25          <div class="input-group">
    26            <a-form-model-item prop="loop">
    27              <a-input v-model="model.loop" :placeholder="$t('tips.range.int')" />
    28            </a-form-model-item>
    29            <span class="input-group-addon">{{$t('form.loopfix')}}</span>
    30            <a-form-model-item prop="loopfix">
    31              <a-input v-model="model.loopfix" />
    32            </a-form-model-item>
    33          </div>
    34        </a-form-model-item>
    35  
    36        <a-form-model-item :label="$t('form.type')" :wrapper-col="wrapperColHalf">
    37          <div class="input-group">
    38            <a-form-model-item prop="type">
    39              <a-select v-model="model.type">
    40                <a-select-option value="list">{{$t('form.type.list')}}</a-select-option>
    41                <a-select-option value="timestamp">{{$t('form.type.timestamp')}}</a-select-option>
    42              </a-select>
    43            </a-form-model-item>
    44            <span class="input-group-addon"> {{$t('form.mode')}}</span>
    45            <a-form-model-item prop="mode">
    46              <a-select v-model="model.mode">
    47                <a-select-option value="parallel">{{$t('form.mode.parallel')}}</a-select-option>
    48                <a-select-option value="recursive">{{$t('form.mode.recursive')}}</a-select-option>
    49              </a-select>
    50            </a-form-model-item>
    51          </div>
    52        </a-form-model-item>
    53  
    54        <a-form-model-item :label="$t('form.width')" :wrapper-col="wrapperColHalf">
    55          <div class="input-group">
    56            <a-form-model-item prop="length">
    57              <a-input v-model="model.length" :min="0" />
    58            </a-form-model-item>
    59            <span class="input-group-addon">{{$t('form.left.pad')}}</span>
    60            <a-form-model-item prop="leftPad">
    61              <a-input v-model="model.leftPad" />
    62            </a-form-model-item>
    63            <span class="input-group-addon">{{$t('form.right.pad')}}</span>
    64            <a-form-model-item prop="rightPad">
    65              <a-input v-model="model.rightPad" />
    66            </a-form-model-item>
    67          </div>
    68        </a-form-model-item>
    69  
    70        <a-form-model-item :label="$t('form.format')" prop="format" :wrapperCol="wrapperColHalf">
    71          <div class="input-group">
    72            <a-input v-model="model.format">
    73              <a-select v-model="model.format" slot="addonAfter" default-value="" style="width: 100px">
    74                <a-select-option value="">
    75                  {{$t('form.function')}}
    76                </a-select-option>
    77                <a-select-option value="md5">md5</a-select-option>
    78                <a-select-option value="sha1">sha1</a-select-option>
    79                <a-select-option value="base64">base64</a-select-option>
    80                <a-select-option value="urlencode">urlencode</a-select-option>
    81              </a-select>
    82            </a-input>
    83            <a-form-model-item :label="$t('form.rand')" prop="rand" :wrapperCol="wrapperColHalf">
    84              <a-switch v-model="model.rand" />
    85            </a-form-model-item>
    86          </div>
    87        </a-form-model-item>
    88  
    89        <a-form-model-item :label="$t('form.desc')" prop="note">
    90          <a-input v-model="model.note" type="textarea" rows="3" />
    91        </a-form-model-item>
    92  
    93        <a-form-model-item class="center" :wrapper-col="{ span: 19, offset: 4 }">
    94          <a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
    95          <a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
    96        </a-form-model-item>
    97      </a-form-model>
    98    </div>
    99  </template>
   100  
   101  <script>
   102  import {saveDefField, saveInstancesItem} from "../api/manage";
   103  import {checkLoop} from "../api/utils";
   104  import {labelColFull, wrapperColFull} from "../utils/const";
   105  
   106  export default {
   107    name: 'FieldInfoComponent',
   108    data() {
   109      return {
   110        labelCol: labelColFull,
   111        wrapperCol: wrapperColFull,
   112  
   113        colsFull: 24,
   114        colsHalf: 12,
   115        labelColFull: { lg: { span: 4 }, sm: { span: 4 } },
   116        wrapperColFull: { lg: { span: 16 }, sm: { span: 16 } },
   117        labelColHalf: { lg: { span: 8}, sm: { span: 8 } },
   118        labelColHalf2: { lg: { span: 4}, sm: { span: 4 } },
   119        wrapperColHalf: { lg: { span: 10 }, sm: { span: 10 } },
   120        rules: {
   121          field: [
   122            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
   123          ],
   124          // loop: [
   125          //   { validator: checkLoop, message: this.$i18n.t('valid.loop.check'), trigger: 'change' },
   126          // ],
   127        },
   128      };
   129    },
   130    props: {
   131      type: {
   132        type: String,
   133        default: () => ''
   134      },
   135      model: {
   136        type: Object,
   137        default: () => null
   138      },
   139    },
   140  
   141    computed: {
   142    },
   143    created () {
   144      console.log('created')
   145    },
   146    mounted () {
   147      console.log('mounted')
   148    },
   149    methods: {
   150      save() {
   151        console.log('save')
   152        this.$refs.editForm.validate(valid => {
   153          console.log(valid, this.model)
   154          if (!valid) {
   155            console.log('validation fail')
   156            return
   157          }
   158  
   159          if (this.type === 'def') {
   160            saveDefField(this.model).then(json => {
   161              console.log('saveDefField', json)
   162              this.$emit('save')
   163            })
   164          } else {
   165            saveInstancesItem(this.model).then(json => {
   166              console.log('saveInstancesItem', json)
   167              this.$emit('save')
   168            })
   169          }
   170        })
   171      },
   172      reset() {
   173        console.log('reset')
   174        this.$refs.editForm.reset()
   175      },
   176    }
   177  }
   178  </script>
   179  
   180  <style lang="less" scoped>
   181  </style>