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>