cmc-web/webs/ams-web/src/views/resource/resource-topo/index.vue

<template>
  <div>
    <AmsPosition></AmsPosition>
    <cb-advance-table title="拓扑列表" :search-configs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getList" :total="total" :loading="loading">
      <template #action v-if="isLeaderPosition">
        <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">
        <template v-if="isLeaderPosition">
          <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>
      </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'
import usePostion from '@/views/usePosition'
import AmsPosition from '@/views/AmsPosition.vue'

export default defineComponent({
  components: {
    AddData: () => import('./components/AddData.vue'),
    Detail: () => import('./detail/index.vue'),
    AmsPosition,
  },
  setup() {
    const { isLeaderPosition } = usePostion(() => getList())
    const { list, total, loading, getList, params, handleDelete } = useTable({
      getService: getInstanceTopo,
      removeService: removeInstanceTopo,
    })

    const state = reactive({
      addData: {
        dialog: false,
        data: {},
      },
      detail: {},
      visible: false,
    })

    function handleCreate(record?: Object) {
      if (record) {
        // 编辑
        state.addData.data = {
          ...state.addData.data,
          ...record,
        }
      } else {
        // 新增
        state.addData.data = {
          startType: 'ALL',
          topologyLevelUp: 2,
          topologyLevelDown: 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),
      isLeaderPosition,
    }
  },
})
</script>

<style></style>