github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/views/data/buildin/Layout.vue (about)

     1  <template>
     2    <div class="container">
     3      <div class="head">
     4        <a-menu
     5          :default-selected-keys="['config']"
     6          :selectedKeys="[selectedKey]"
     7          mode="horizontal"
     8          @click="handleMenuClick"
     9          class="navbar-secondary"
    10        >
    11          <a-menu-item key="config">
    12            {{ $t('msg.config') }}
    13          </a-menu-item>
    14          <a-menu-item key="ranges">
    15            {{ $t('msg.ranges') }}
    16          </a-menu-item>
    17          <a-menu-item key="instances">
    18            {{ $t('msg.instances') }}
    19          </a-menu-item>
    20          <a-menu-item key="text">
    21            {{ $t('msg.text') }}
    22          </a-menu-item>
    23          <a-menu-item key="excel">
    24            {{ $t('msg.excel') }}
    25          </a-menu-item>
    26        </a-menu>
    27        <div class="filter">
    28          <a-input-search v-model="keywords" @change="onSearch" :allowClear="true" :placeholder="$t('tips.search')" style="width: 300px" />
    29        </div>
    30  
    31        <div class="buttons">
    32          <a-button v-if="selectedKey !== 'excel'" type="primary" @click="handleCreateClick()">
    33            <a-icon type="plus" :style="{fontSize: '16px'}" />
    34            {{$t('action.create')}}
    35          </a-button>
    36        </div>
    37  
    38      </div>
    39      <router-view />
    40    </div>
    41  </template>
    42  
    43  <script>
    44  export default {
    45    name: 'BuildinLayout',
    46    data () {
    47      return {
    48        selected: this.$route.path.split('/')[3] || 'config',
    49        keywords: '',
    50        createShow: false
    51      }
    52    },
    53    computed: {
    54      selectedKey: function() {
    55        return this.$route.path.split('/')[3];
    56      }
    57    },
    58    methods: {
    59      handleMenuClick: function(e) {
    60        this.selected = e.key;
    61        this.keywords = '';
    62        this.createShow = false;
    63        this.updateRoutePath();
    64      },
    65      onSearch: function() {
    66        this.updateRoutePath();
    67      },
    68      updateRoutePath: function() {
    69        const {selected, keywords, createShow} = this;
    70        const path = `/data/buildin/${selected}/list${createShow ? '/0' : ''}`;
    71        const {query = {}} = this.$router;
    72        const oldKeywords = typeof query.search === 'string' ? query.search : '';
    73        if (this.$route.path !== path || oldKeywords !== keywords) {
    74          if (keywords.length) {
    75            query.search = keywords;
    76          }
    77          this.$router.push({
    78            path,
    79            query
    80          }).then(() => {
    81            console.log(this.$route);
    82          });
    83        }
    84      },
    85      handleCreateClick: function() {
    86        this.createShow = true;
    87        this.updateRoutePath();
    88      }
    89    },
    90  }
    91  </script>