115 lines
2.7 KiB
Vue
115 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="open = true"
|
|
>添加</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<BaseTable
|
|
ref="table"
|
|
:loading="loading"
|
|
:tableOptions="tableOptions"
|
|
:tableData="tableData"
|
|
>
|
|
<template #action="{ row }">
|
|
<el-button
|
|
circle
|
|
icon="el-icon-minus"
|
|
@click="handleMinus(row)"
|
|
></el-button>
|
|
</template>
|
|
</BaseTable>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<ChooseDialog
|
|
title="添加接口"
|
|
:visible.sync="open"
|
|
:queryOptions="queryOptions"
|
|
:tableOptions="chooseTableOptions"
|
|
:request="listInterface"
|
|
@chooseEnd="chooseEnd"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseTable from '@/views/gateway/components/BaseTable';
|
|
import ChooseDialog from './chooseDialog.vue'
|
|
import { listInterface } from "@/api/gateway/interface";
|
|
export default {
|
|
components: {
|
|
BaseTable,
|
|
ChooseDialog,
|
|
},
|
|
dicts: ['gateway_data_status', 'gateway_strategy_type'],
|
|
data() {
|
|
return {
|
|
listInterface,
|
|
tableOptions: [
|
|
{ label: '接口ID', prop: 'id', width: '80' },
|
|
{ label: '接口名称', prop: 'interfaceName' },
|
|
{ label: '接口路径', prop: 'interfacePath' },
|
|
{ label: '接口描述', prop: 'description' },
|
|
{ label: '接口版本', prop: 'version', width: '120' },
|
|
{ type: 'slot', prop: 'action', label: '操作', fixed: 'right', width: '100px' }
|
|
],
|
|
loading: false,
|
|
tableData: [],
|
|
total: 1,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
|
|
// 弹出框相关
|
|
open: false,
|
|
}
|
|
},
|
|
computed: {
|
|
chooseTableOptions() {
|
|
return this.tableOptions.filter(item => item.prop !== 'action');
|
|
},
|
|
queryOptions() {
|
|
return [
|
|
{ label: '接口名称', prop: 'interfaceName', type: 'input' },
|
|
]
|
|
},
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
console.log('getList');
|
|
// 调用配置详情接口
|
|
this.tableData = []
|
|
},
|
|
handleMinus(row) {
|
|
console.log(row);
|
|
this.tableData = this.tableData.filter(item => item.id !== row.id);
|
|
},
|
|
chooseEnd(rows) {
|
|
// TODO 调用接口 管理策略到该服务 并刷新列表
|
|
this.tableData = this.tableData.concat(rows);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |