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

     1  <script type="text/x-template" id="columns-template">
     2      <div>
     3          <h4>Columns <i class="el-icon-refresh" style="cursor: pointer" @click="clearColumns()"></i></h4>
     4          <el-select
     5                  v-model="selection"
     6                  filterable
     7                  multiple
     8                  allow-create
     9                  placeholder="Columns..." style="margin-top: 8px;">
    10              <el-option
    11                      v-for="col in propKeys"
    12                      :key="col"
    13                      :label="col"
    14                      :value="col">
    15              </el-option>
    16          </el-select>
    17          <el-switch
    18                  v-model="expandAll"
    19                  active-text="Expand Details"
    20                  style="margin-top: 8px;">
    21          </el-switch>
    22      </div>
    23  </script>
    24  <script>
    25      Vue.component('columns', {
    26          template: '#columns-template',
    27          props: ['columns', 'propKeys', 'showTimestamp', 'showLevel'],
    28          data: function() {
    29              var selection = ['timestamp', 'level'];
    30              var expandAll = true;
    31              var persistedModel = localStorage.getItem('columns::persistedModel');
    32              if (persistedModel) {
    33                  var model = JSON.parse(persistedModel);
    34                  expandAll = model.expandAll;
    35                  selection = model.selection;
    36              }
    37              return {
    38                  selection: selection,
    39                  expandAll: expandAll
    40              };
    41          },
    42          mounted: function() {
    43              this.$emit('expandAll', this.expandAll);
    44              this.onSelection();
    45          },
    46          watch: {
    47              selection: function(val) {
    48                  this.onSelection();
    49                  this.persistModel();
    50              },
    51              expandAll: function(val) {
    52                  this.$emit('expandAll', val);
    53                  this.persistModel();
    54              }
    55          },
    56          methods: {
    57              persistModel: function() {
    58                  localStorage.setItem('columns::persistedModel', JSON.stringify({
    59                      'expandAll': this.expandAll,
    60                      'selection': this.selection
    61                  }));
    62              },
    63              clearColumns: function() {
    64                  this.selection = ['timestamp', 'level'];
    65                  this.expandAll = true;
    66                  this.$notify.info({
    67                      title: 'info',
    68                      message: 'columns reset'
    69                  });
    70              },
    71              onSelection: function() {
    72                  var userDefinedColumns = [];
    73                  var showTimestamp = false;
    74                  var showLevel = false;
    75                  for (var i in this.selection) {
    76                      var propKey = this.selection[i];
    77                      if (propKey === 'timestamp') {
    78                          showTimestamp = true;
    79                      } else if (propKey === 'level') {
    80                          showLevel = true;
    81                      } else {
    82                          userDefinedColumns.push(propKey);
    83                      }
    84                  }
    85                  this.$emit('update:showTimestamp', showTimestamp);
    86                  this.$emit('update:showLevel', showLevel);
    87                  this.$emit('update:columns', userDefinedColumns);
    88              }
    89          }
    90      });
    91  </script>