github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/components/FieldRefer.vue (about) 1 <template> 2 <div class="panel"> 3 <a-form-model ref="editForm" :model="refer" :rules="rules"> 4 <a-row :gutter="colsFull"> 5 <a-form-model-item :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 6 <span>{{$t('tips.range.and.refer')}}</span> 7 </a-form-model-item> 8 </a-row> 9 10 <a-row :gutter="colsFull"> 11 <a-form-model-item :label="$t('form.type')" prop="type" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 12 <a-select v-model="refer.type" @change="onReferTypeChanged"> 13 <a-select-option value="config">{{$t('msg.config')}}</a-select-option> 14 <a-select-option value="ranges">{{$t('msg.ranges')}}</a-select-option> 15 <a-select-option value="instances">{{$t('msg.instances')}}</a-select-option> 16 <a-select-option value="excel">{{$t('msg.excel')}}</a-select-option> 17 <a-select-option value="text">{{$t('msg.text')}}</a-select-option> 18 <a-select-option value="yaml">{{$t('msg.exec')}}</a-select-option> 19 <a-select-option value="value">{{$t('form.expr')}}</a-select-option> 20 </a-select> 21 </a-form-model-item> 22 </a-row> 23 24 <!-- file list --> 25 <a-row v-if="refer.type && refer.type!='value'" :gutter="colsFull"> 26 <a-form-model-item :label="$t('form.file')" prop="file" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 27 28 <a-select v-if="fileMultiple === 'multiple'" v-model="referFiles" @change="onReferFileChanged" :mode="fileMultiple"> 29 <a-select-option v-for="(f, i) in files" :value="f.referName" :key="i"> 30 <span v-if="refer.type != 'excel'">{{ f.title }}</span> 31 <span v-if="refer.type == 'excel'">{{ f.referName }}</span> 32 </a-select-option> 33 </a-select> 34 35 <a-select v-if="fileMultiple !== 'multiple'" v-model="refer.file" @change="onReferFileChanged"> 36 <a-select-option v-for="(f, i) in files" :value="f.referName" :key="i"> 37 <span v-if="refer.type != 'excel'">{{ f.title }}</span> 38 <span v-if="refer.type == 'excel'">{{ f.referName }}</span> 39 </a-select-option> 40 </a-select> 41 42 </a-form-model-item> 43 </a-row> 44 45 <!-- sheet list --> 46 <a-row v-if="refer.type==='excel'" :gutter="colsFull"> 47 <a-form-model-item :label="$t('msg.excel.sheet')" prop="sheet" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 48 <a-select v-model="refer.sheet" @change="onReferSheetChanged"> 49 <a-select-option value="">{{$t('tips.pls.select')}}</a-select-option> 50 <a-select-option v-for="(f, i) in sheets" :value="f.sheet" :key="i"> 51 {{ f.sheet }} 52 </a-select-option> 53 </a-select> 54 </a-form-model-item> 55 </a-row> 56 57 <!-- column list --> 58 <a-row v-if="showColSection" :gutter="colsFull"> 59 <a-form-model-item :label="$t('form.col')" prop="colName" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 60 <a-select v-if="fileMultiple === 'multiple'" v-model="referColNames" :mode="fieldMultiple"> 61 <a-select-option v-for="f in fields" :key="f.name"> 62 {{ f.name }} 63 </a-select-option> 64 </a-select> 65 66 <a-select v-if="fileMultiple !== 'multiple'" v-model="refer.colName"> 67 <a-select-option v-for="f in fields" :key="f.name"> 68 {{ f.name }} 69 </a-select-option> 70 </a-select> 71 72 </a-form-model-item> 73 </a-row> 74 75 <!-- sql where --> 76 <a-row v-if="refer.type==='excel'" :gutter="colsFull"> 77 <a-form-model-item :label="$t('form.where')" prop="colName" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 78 <a-input v-model="refer.condition" /> 79 </a-form-model-item> 80 </a-row> 81 82 <a-row v-if="showCount" :gutter="colsFull"> 83 <a-col :span="colsHalf"> 84 <a-form-model-item :label="$t('form.count')" prop="count" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf"> 85 <a-input v-model="refer.count" /> 86 {{$t('tips.zero')}} 87 </a-form-model-item> 88 </a-col> 89 </a-row> 90 91 <a-row v-if="showStep" :gutter="colsFull"> 92 <a-col :span="colsHalf"> 93 <a-form-model-item :label="$t('form.step')" prop="step" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf"> 94 <a-input v-model="refer.step" :disabled="refer.rand" /> 95 </a-form-model-item> 96 </a-col> 97 <a-col :span="colsHalf"> 98 <a-form-model-item :label="$t('form.rand')" prop="rand" :labelCol="labelColHalf" :wrapperCol="wrapperColHalf"> 99 <a-switch v-model="refer.rand" /> 100 </a-form-model-item> 101 </a-col> 102 </a-row> 103 104 <a-row v-if="refer.type=='value'" :gutter="colsFull"> 105 <a-form-model-item :label="$t('form.expr')" prop="value" :labelCol="labelColFull" :wrapperCol="wrapperColFull"> 106 <a-input v-model="refer.value" /> 107 <span class="input-tips">{{$t('tips.expr')}}</span> 108 </a-form-model-item> 109 </a-row> 110 111 <a-row :gutter="colsFull"> 112 <a-form-model-item class="center"> 113 <a-button @click="save" type="primary">{{$t('form.save')}}</a-button> 114 <a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button> 115 </a-form-model-item> 116 </a-row> 117 118 </a-form-model> 119 </div> 120 </template> 121 122 <script> 123 import {listReferFileForSelection, listReferSheetForSelection, 124 listReferResFieldForSelection, listReferExcelColForSelection, getRefer, updateRefer, 125 } from "../api/refer"; 126 import { 127 colsFull, 128 colsHalf, 129 labelColFull, 130 labelColHalf, 131 labelColHalf2, 132 wrapperColFull, 133 wrapperColHalf 134 } from "@/utils/const"; 135 136 export default { 137 name: 'FieldReferComponent', 138 data() { 139 return { 140 colsFull: colsFull, 141 colsHalf: colsHalf, 142 labelColFull: labelColFull, 143 wrapperColFull: wrapperColFull, 144 labelColHalf: labelColHalf, 145 labelColHalf2: labelColHalf2, 146 wrapperColHalf: wrapperColHalf, 147 148 refer: {}, 149 referFiles: [], // for range's multi values 150 referColNames: [], // for ranges and instances refer to multi values 151 rules: { 152 }, 153 154 res: {}, 155 files: [], 156 sheets: [], 157 fields: [], 158 159 referFieldName: '', 160 referFieldIndex: '', 161 }; 162 }, 163 props: { 164 type: { 165 type: String, 166 default: () => '' 167 }, 168 model: { 169 type: Object, 170 default: () => null 171 }, 172 time2: { 173 type: Number, 174 default: () => 0 175 }, 176 }, 177 178 computed: { 179 showStep() { 180 return this.refer.type === 'text' 181 }, 182 showCount() { 183 return this.refer.type === 'yaml' || this.refer.type === 'ranges' || this.refer.type === 'instances' 184 }, 185 showColSection() { 186 return this.refer.type === 'ranges' || this.refer.type === 'instances' || this.refer.type === 'excel' 187 }, 188 fileMultiple() { 189 if (this.refer.type === 'text' || this.refer.type === 'yaml') { 190 return 'multiple' 191 } else { 192 return '' 193 } 194 }, 195 fieldMultiple() { 196 if (this.refer.type === 'ranges' || this.refer.type === 'instances') { 197 return 'multiple' 198 } else { 199 return '' 200 } 201 } 202 }, 203 created () { 204 console.log('created') 205 206 this.loadData() 207 this.$watch('time2', () => { 208 console.log('time2 changed', this.time2) 209 this.loadData("") 210 }) 211 }, 212 mounted () { 213 console.log('mounted') 214 }, 215 methods: { 216 loadData() { 217 if (!this.model.id) return 218 219 getRefer(this.model.id, this.type).then(json => { 220 console.log('getRefer', json) 221 this.refer = json.data 222 this.referFiles = this.refer.file.split(',').map((file) => { 223 return file.split(':')[0] 224 }) 225 this.referColNames = this.refer.colName.split(',').map((col) => { 226 return col.split(':')[0] 227 }) 228 229 this.convertExcelFileColToPath() 230 this.listReferFileForSelection(this.refer.type, true) 231 }) 232 }, 233 234 onReferTypeChanged() { 235 console.log('onReferTypeChanged') 236 if (this.refer.type === 'text') { 237 this.refer.step = 1 238 } 239 this.listReferFileForSelection(this.refer.type, false) 240 }, 241 onReferFileChanged() { 242 console.log("onReferFileChanged") 243 244 if (this.refer.type == 'excel') { 245 this.listReferSheetForSelection(false) 246 } else { 247 this.listReferResFieldForSelection(false) 248 } 249 }, 250 onReferSheetChanged() { 251 console.log("onReferSheetChanged") 252 253 if (this.refer.type == 'excel') { 254 this.listReferResFieldForSelection(false) 255 } 256 }, 257 258 save() { 259 console.log('save') 260 this.$refs.editForm.validate(valid => { 261 console.log(valid, this.refer) 262 if (!valid) { 263 console.log('validation fail') 264 return 265 } 266 267 if (this.refer.type == 'text' || this.refer.type == 'yaml') { 268 this.refer.file = this.referFiles.join(',') 269 this.refer.colName = this.referColNames 270 271 } else if (this.refer.type == 'config' || this.refer.type == 'ranges' || this.refer.type == 'instances') { 272 console.log('') 273 274 } else if (this.refer.type === 'excel') { 275 if (this.refer.file.lastIndexOf('.xlsx') > 0) { 276 this.refer.file = this.refer.file.substring(0, this.refer.file.lastIndexOf('.xlsx')) 277 } 278 279 } else { 280 this.refer.file = this.referFiles 281 this.refer.colName = this.referColNames 282 } 283 284 let data = JSON.parse(JSON.stringify(this.refer)) 285 if (data.type === 'excel') data.file = data.file + '.' + data.sheet 286 287 data.count = parseInt(data.count) 288 data.step = parseInt(data.step) 289 290 console.log('###', data) 291 292 updateRefer(data, this.type).then(json => { 293 console.log('updateRefer', json) 294 if (json.code == 1) { 295 this.loadData() 296 this.$notification['success']({ 297 message: this.$i18n.t('tips.success.to.submit'), 298 duration: 3, 299 }); 300 } 301 }) 302 }) 303 }, 304 reset() { 305 console.log('reset') 306 this.$refs.editForm.reset() 307 }, 308 309 listReferFileForSelection(resType, init) { 310 if (!this.refer.type) return 311 312 listReferFileForSelection(resType).then(json => { 313 console.log('listReferFileForSelection', json) 314 this.files = json.data 315 316 if (init) { 317 if (this.refer.type === 'excel') { 318 this.listReferSheetForSelection(init) 319 } else { 320 this.listReferResFieldForSelection(init) 321 } 322 } else { 323 this.referFiles = [] 324 this.referColNames = [] 325 this.refer.file = '' 326 this.refer.sheet = '' 327 this.refer.colName = '' 328 } 329 }) 330 }, 331 listReferSheetForSelection(init) { 332 if (!this.refer.type) return 333 334 listReferSheetForSelection(this.refer.file + '.' + this.refer.sheet ).then(json => { 335 console.log('listReferSheetForSelection', json) 336 this.sheets = json.data 337 338 if (init) { 339 this.listReferResFieldForSelection(true) 340 } else { 341 this.refer.sheet = '' 342 this.refer.colName = '' 343 } 344 }) 345 }, 346 listReferResFieldForSelection(init) { 347 if (!this.refer.type) return 348 349 let id = 0 350 if (this.refer.type === 'excel') { 351 listReferExcelColForSelection(this.refer.file + '.' + this.refer.sheet).then(json => { 352 console.log('listReferExcelColForSelection', json) 353 this.fields = json.data 354 355 if (!init) { 356 this.refer.colName = '' 357 } 358 }) 359 360 } else if (this.refer.type != 'value') { 361 console.log('***', this.files, this.referFiles) 362 363 this.files.forEach((fi) => { 364 if (fi.referName === this.refer.file) id = fi.id 365 }) 366 367 listReferResFieldForSelection(id, this.refer.type).then(json => { 368 console.log('listReferResFieldForSelection', json) 369 this.fields = json.data 370 371 if (!init) { 372 this.refer.colName = '' 373 } 374 }) 375 } 376 }, 377 convertExcelFileColToPath() { 378 // excel refer has a sheet file after last "." 379 if (this.refer.type == 'excel') { 380 this.refer.file = this.refer.file.substring(0, this.refer.file.lastIndexOf('.')) + '.xlsx' 381 } 382 } 383 } 384 } 385 </script> 386 387 <style lang="less" scoped> 388 .panel { 389 padding: 4px 8px; 390 } 391 </style>