90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<cb-advance-table title="拓扑列表" :search-configs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getList" :total="total" :loading="loading">
|
|
<template #action>
|
|
<el-button type="primary" @click="handleCreate()" icon="el-icon-plus">新增</el-button>
|
|
</template>
|
|
<template #name="name, record">
|
|
<span class="detail-href" @click="getDetail(record.id)">{{ name }}</span>
|
|
</template>
|
|
<template #operate="val, record">
|
|
<el-button type="text" @click="handleCreate(record)"><i class="el-icon-edit"></i> 编辑</el-button>
|
|
<div class="action-divider"></div>
|
|
<el-button type="text" @click="handleDelete(record)"><i class="el-icon-delete"></i> 删除</el-button>
|
|
</template>
|
|
</cb-advance-table>
|
|
<Detail :detail="detail" v-if="visible" @goBack="visible = false"></Detail>
|
|
<AddData :add-data="addData" v-if="addData.dialog" @getList="getList"></AddData>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, toRefs } from 'vue'
|
|
import { useTable } from '@cmp/cmp-element'
|
|
import { columns, searchConfigs } from './config'
|
|
import { getInstanceTopo, removeInstanceTopo, getInstanceTopoDetail } from 'services/resource'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AddData: () => import('./components/AddData.vue'),
|
|
Detail: () => import('./detail/index.vue'),
|
|
},
|
|
setup() {
|
|
const { list, total, loading, getList, params, handleDelete } = useTable({
|
|
getService: getInstanceTopo,
|
|
removeService: removeInstanceTopo,
|
|
})
|
|
|
|
const state = reactive({
|
|
addData: {
|
|
dialog: false,
|
|
data: {
|
|
topologyLevel: 2,
|
|
},
|
|
},
|
|
detail: {},
|
|
visible: false,
|
|
})
|
|
|
|
function handleCreate(record?: Object) {
|
|
if (record) {
|
|
// 编辑
|
|
state.addData.data = {
|
|
...state.addData.data,
|
|
...record,
|
|
}
|
|
} else {
|
|
// 新增
|
|
state.addData.data = {
|
|
topologyLevel: 2,
|
|
}
|
|
}
|
|
state.addData.dialog = true
|
|
}
|
|
|
|
async function getDetail(id: Number) {
|
|
const res = await getInstanceTopoDetail(id)
|
|
if (res.success) {
|
|
state.detail = res.data
|
|
state.visible = true
|
|
}
|
|
}
|
|
return {
|
|
list,
|
|
total,
|
|
loading,
|
|
getList,
|
|
params,
|
|
columns,
|
|
searchConfigs,
|
|
handleCreate,
|
|
handleDelete,
|
|
getDetail,
|
|
...toRefs(state),
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style></style>
|