github.com/v2pro/plz@v0.0.0-20221028024117-e5f9aec5b631/witch/webroot/data-sources.html (about)

     1  <script type="text/x-template" id="data-sources-template">
     2  <div>
     3      <h4>Data Source <i class="el-icon-refresh" style="cursor: pointer" @click="clearDataSources()"></i></h4>
     4      <el-select
     5              v-model="selection"
     6              filterable
     7              allow-create
     8              placeholder="Data Source..." style="margin-top: 8px;">
     9          <el-option
    10                  v-for="ds in dataSources"
    11                  :key="ds"
    12                  :label="ds"
    13                  :value="ds">
    14          </el-option>
    15      </el-select>
    16  </div>
    17  </script>
    18  <script>
    19      Vue.component('data-sources', {
    20          template: '#data-sources-template',
    21          props: ['dataSource'],
    22          data: function() {
    23              var dataSources = [];
    24              var selection = this.dataSource;
    25              var persistedModel = localStorage.getItem('dataSources::persistedModel');
    26              if (persistedModel) {
    27                  var model = JSON.parse(persistedModel);
    28                  dataSources = model.dataSources;
    29                  selection = model.selection;
    30              }
    31              if (dataSources.indexOf(selection) === -1) {
    32                  dataSources.push(selection);
    33              }
    34              if (dataSources.indexOf(window.location.host) === -1) {
    35                  dataSources.push(window.location.host);
    36              }
    37              if (selection !== this.dataSource) {
    38                  this.$emit('update:dataSource', selection);
    39              }
    40              return {
    41                  selection: selection,
    42                  dataSources: dataSources
    43              }
    44          },
    45          watch: {
    46              selection: function(val) {
    47                  if (this.dataSources.indexOf(val) === -1) {
    48                      this.dataSources.push(val);
    49                  }
    50                  localStorage.setItem('dataSources::persistedModel', JSON.stringify({
    51                      'dataSources': this.dataSources,
    52                      'selection': val
    53                  }));
    54                  this.$emit('update:dataSource', val);
    55              }
    56          },
    57          methods: {
    58              clearDataSources: function() {
    59                  this.dataSources = [];
    60                  this.selection = window.location.host;
    61                  this.$notify.info({
    62                      title: 'info',
    63                      message: 'user added data source options cleared'
    64                  });
    65              }
    66          }
    67      });
    68  </script>