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

     1  <template>
     2    <div class="mock-index-main">
     3      <div class="head">
     4        <div class="title">
     5          <Icon type="database" :style="{fontSize: '16px'}" />
     6          <span>{{$t('menu.data.mock')}}</span>
     7        </div>
     8        <div class="filter">
     9          <a-input-search v-model="keywords" @change="search" :allowClear="true" :placeholder="$t('tips.search')" style="width: 300px" />
    10        </div>
    11        <div class="buttons">
    12          <a-button type="primary" @click="create()"><Icon type="plus" :style="{fontSize: '16px'}" /> {{$t('action.create')}}</a-button>
    13        </div>
    14      </div>
    15  
    16      <a-row :gutter="10">
    17        <a-col :span="12">
    18          <List />
    19        </a-col>
    20        <a-col :span="12">
    21          <Preview />
    22        </a-col>
    23      </a-row>
    24  
    25    </div>
    26  </template>
    27  
    28  <script>
    29  
    30  import {Icon, Modal} from 'ant-design-vue'
    31  import {PageSize, ResTypeDef, replacePathSep, pathToRelated} from "../../api/utils";
    32  import debounce from "lodash.debounce"
    33  import Bus from '../../utils/bus.js'
    34  import List from './List';
    35  import Preview from './Preview';
    36  
    37  export default {
    38    name: 'MockIndex',
    39    components: {
    40      Icon,
    41      List, Preview,
    42    },
    43    mixins: [],
    44    data() {
    45      return {
    46        keywords: '',
    47        page: 1,
    48        total: 0,
    49        pageSize: PageSize,
    50      };
    51    },
    52  
    53    methods: {
    54      search: debounce(function() {
    55        console.log('search', this.keywords)
    56        Bus.$emit('loadMock',{keywords: this.keywords})
    57      }, 500),
    58  
    59      create() {
    60        Bus.$emit('createMock',{})
    61      },
    62    }
    63  }
    64  </script>
    65  
    66  <style lang="less" scoped>
    67    .mock-index-main {
    68  
    69    }
    70  </style>