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>