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

     1  <template>
     2    <div class="mock-preview-list main-table">
     3      <div>
     4        <a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id" :custom-row="customRow">
     5          <a slot="recordTitle" slot-scope="text, record" @click="view(record)">
     6            {{record.name}}
     7          </a>
     8  
     9          <a slot="createTime" slot-scope="text, record">
    10            {{record.createdAt | formatTime}}
    11          </a>
    12  
    13          <span slot="action" slot-scope="record">
    14            <a @click="modifyDataConfig(record)" :title="$t('action.edit.data')">
    15              <Icon type="control" :style="{fontSize: '16px'}" />
    16            </a> &nbsp;
    17            <a @click="modifyMockConfig(record)" :title="$t('action.edit.mock')">
    18              <Icon type="code" :style="{fontSize: '16px'}" />
    19            </a> &nbsp;
    20  
    21            <a v-if="isStart(record.id)==false" @click="startMockService(record)" :title="$t('action.start.mock')">
    22              <Icon type="right-circle" :style="{fontSize: '16px'}" />
    23            </a> &nbsp;
    24            <a v-if="isStart(record.id)==true" @click="startMockService(record)" :title="$t('action.stop.mock')">
    25              <Icon type="pause-circle" :style="{fontSize: '16px'}" />
    26            </a> &nbsp;
    27  
    28            <a @click="showDeleteConfirm(record)" :title="$t('action.delete')">
    29              <Icon type="delete" :style="{fontSize: '16px'}" />
    30            </a>
    31          </span>
    32        </a-table>
    33  
    34        <div class="pagination-wrapper">
    35          <a-pagination size="small" simple @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" />
    36        </div>
    37      </div>
    38  
    39      <div class="full-screen-modal">
    40        <mock-edit-comp
    41            ref="editComp"
    42            :type="type"
    43            :visible="editVisible"
    44            :mock="editModel"
    45            :time="time"
    46            :current="currentTab"
    47            @ok="handleEditSave"
    48            @cancel="handleEditCancel" >
    49        </mock-edit-comp>
    50      </div>
    51  
    52    </div>
    53  </template>
    54  
    55  <script>
    56  
    57  import {Icon, Modal} from 'ant-design-vue'
    58  import {formatTime, PageSize, pathToRelated, replacePathSep, ResTypeDef} from "../../api/utils";
    59  import debounce from "lodash.debounce"
    60  import mockMixin from "@/store/mockMixin";
    61  import Bus from '../../utils/bus.js'
    62  import {listMock, removeMock, startMockService} from "@/api/mock";
    63  import MockEditComp from './components/Edit'
    64  
    65  export default {
    66    name: 'MockList',
    67    components: {
    68      Icon,
    69      MockEditComp,
    70    },
    71    props: {
    72    },
    73    mixins: [mockMixin],
    74    filters: {
    75      formatTime: formatTime
    76    },
    77    data() {
    78      const columns = [
    79        {
    80          title: this.$i18n.t('form.name'),
    81          dataIndex: 'title',
    82          'class': 'title',
    83          scopedSlots: { customRender: 'recordTitle' },
    84        },
    85        {
    86          title: this.$i18n.t('msg.create.time'),
    87          dataIndex: 'createTime',
    88          scopedSlots: { customRender: 'createTime' },
    89          width: '300px'
    90        },
    91        {
    92          title: this.$i18n.t('form.opt'),
    93          key: 'action',
    94          scopedSlots: { customRender: 'action' },
    95          width: '100px'
    96        },
    97      ];
    98  
    99      return {
   100        models: [],
   101        serviceStatusMap: {},
   102        columns,
   103        selected: null,
   104  
   105        designVisible: false,
   106        designModel: {},
   107        type: ResTypeDef,
   108        time: 0,
   109        currentTab:'mock',
   110  
   111        keywords: '',
   112        page: 1,
   113        total: 0,
   114        pageSize: PageSize,
   115  
   116        editVisible: false,
   117        editModel: null,
   118      };
   119    },
   120    computed: {
   121    },
   122    created () {
   123      this.loadData()
   124    },
   125    mounted () {
   126      Bus.$on('loadMock',(data) => {
   127        console.log('loadMock event', data)
   128        this.loadData()
   129      })
   130  
   131      Bus.$on('createMock',(data) => {
   132        console.log('createMock event', data)
   133        this.editModel = {}
   134        this.editVisible = true;
   135      })
   136    },
   137    methods: {
   138      loadData() {
   139        listMock(this.keywords, this.page).then(json => {
   140          this.models = json.data.list
   141          this.total = json.data.total
   142          this.selected = json.data.list.length ? json.data.list[0].id : null
   143        })
   144      },
   145      create() {
   146        this.editVisible = true;
   147      },
   148  
   149      modifyMockConfig(record) {
   150        this.setMockItem(record)
   151        this.editVisible = true;
   152        this.currentTab = 'mock';
   153      },
   154      modifyDataConfig(record) {
   155        this.setMockItem(record)
   156        this.editVisible = true;
   157        this.currentTab = 'data';
   158      },
   159      setMockItem(record) {
   160          this.editModel = record;
   161      },
   162      startMockService(record) {
   163        console.log('startMockService')
   164        const act = this.serviceStatusMap[record.id] ? 'stop' : 'start'
   165        startMockService(record.id, act).then(json => {
   166          this.serviceStatusMap[record.id] = !this.serviceStatusMap[record.id]
   167          this.loadData()
   168        })
   169      },
   170  
   171      handleEditSave() {
   172        this.setMockItem({})
   173        this.editVisible = false;
   174        this.loadData();
   175      },
   176      handleEditCancel() {
   177        this.setMockItem({})
   178        this.editVisible = false;
   179      },
   180      remove(record) {
   181        console.log(record)
   182        removeMock(record.id).then(json => {
   183          this.loadData()
   184          this.previewMockItem(null)
   185        })
   186      },
   187      view(record) {
   188        this.previewMockItem(record)
   189      },
   190  
   191      onPageChange(page, pageSize) {
   192        console.log('onPageChange', page, pageSize)
   193        this.page= page
   194        this.loadData()
   195      },
   196      onSearch: debounce(function() {
   197        console.log('onSearch', this.keywords)
   198        this.loadData()
   199      }, 500),
   200      handleClickRow: function(event) {
   201        const id = event.target.closest('tr').getAttribute('data-row-key');
   202        this.selected = id;
   203      },
   204      customRow: function(record) {
   205        const {selected} = this;
   206        return {
   207          attrs: {
   208            'class': record.id == selected ? 'selected' : ''
   209          },
   210          on: {
   211            click: this.handleClickRow
   212          }
   213        }
   214      },
   215      showDeleteConfirm: function(record) {
   216        Modal.confirm({
   217          title: this.$t('tips.delete'),
   218          content: (h) => <strong>{record.title}</strong>,
   219          okText: this.$t('msg.yes'),
   220          cancelText: this.$t('msg.no'),
   221          cancelType: 'danger',
   222          onOk: () => {
   223            this.remove(record)
   224          },
   225        });
   226      },
   227      isStart(id) {
   228        return !!this.serviceStatusMap[id]
   229      },
   230    }
   231  }
   232  </script>
   233  
   234  <style lang="less" scoped>
   235  .mock-preview-list {
   236    .no-data-tips {
   237      padding: 15px;
   238      text-align: center;
   239    }
   240  }
   241  </style>