admin-ui/src/views/iot/network/server/component/list.vue

<template>
  <el-table v-loading="loading" :data="data" style="width: 100%">
    <el-table-column align="center" prop="id" label="ID" width="100" v-col="'id'" />
    <!-- <el-table-column align="center" prop="server" label="服务器"/> -->
    <el-table-column align="center" prop="name" label="名称" v-col="'name'" />
    <el-table-column align="center" prop="types" v-col="'types'" label="类型" :formatter="(a: any) => typesFormat(a.types)" />
    <el-table-column align="center" prop="addr" label="地址" v-col="'addr'" />
    <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间" width="170" v-col="'createdAt'" />
    <!-- <el-table-column align="center" prop="last" label="最近上线"/> -->
    <el-table-column align="center" prop="types" label="状态" v-col="'status'">
      <template #default="scope">
        <el-tag v-if="!scope.row.status" class="ml-2" type="info">未启动</el-tag>
        <el-tag v-else class="ml-2" type="success">启动</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="200" v-col="'auth'">
      <template #default="scope">

        <el-button @click="toDetail(scope.row.id)" size="small" type="text" v-auth="'detail'">详情</el-button>
        <el-button size="small" link key="info" type="info" v-auth="'edit'" @click="toEdit(scope.row.id)">编辑</el-button>

        <el-popover placement="bottom" :width="170" trigger="click">
          <template #reference>
            <el-button size="small" type="text" class="more-btn" @click="isShowMore = !isShowMore" v-auth="'more'">更多
              <i style="margin-left: 2px;" :class="isShowMore ? 'fa fa-angle-down' : 'fa fa-angle-up'"></i>
            </el-button>
          </template>
          <div class="more-opearte-wrap">
            <el-button @click="onChangeStatus(scope.row.id, 1)" :disabled="scope.row.status" link size="small" key="success" type="success" v-auth="'on'">启 用</el-button>
            <el-divider direction="vertical" />
            <el-button @click="onChangeStatus(scope.row.id, 0)" :disabled="!scope.row.status" link size="small" key="warning" type="warning" v-auth="'off'">禁 用</el-button>
            <el-divider direction="vertical" />
            <el-button @click="onRowDel(scope.row)" link size="small" key="danger" type="danger" v-auth="'delete'">删 除</el-button>
          </div>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" v-model:current-page="param.page" background v-model:page-size="param.pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="total">
  </el-pagination>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, nextTick, getCurrentInstance, unref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

import api from '/@/api/network';

// 定义接口来定义对象的类型
interface TableDataForm {
  id: number;
  server: string;
  name: string;

}
interface TableData {
  data: Array<TableDataForm>;
  total: number;
  loading: boolean;
  param: {
    page: number;
    pageSize: number;
  };
  isShowMore: boolean
}

export default defineComponent({
  name: 'tunnel',
  props: {
    // 输入框前置内容
    keyWord: {
      type: Object,
      default: () => { },
    },
  },
  setup(props, { emit }) {
    const router = useRouter();

    const { proxy } = getCurrentInstance() as any;

    const { network_server_type } = proxy.useDict('network_server_type');

    const typesFormat = (types: string) => {
      return proxy.selectDictLabel(unref(network_server_type), types);
    };

    const state = reactive<TableData>({
      data: [],
      total: 0,
      loading: false,
      param: {
        page: 1,
        pageSize: 10,
      },
      isShowMore: true


    });
    // 改变状态
    const onChangeStatus = (id: number, status: number) => {
      api.server.changeServerStatus({ id: id, status: status }).then((res: any) => {
        ElMessage.success(status ? '已开启' : '已关闭');
        fetchList();
      })
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.param.pageSize = val;
      fetchList()
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.param.page = val;
      fetchList()
    };
    // 初始化表格数据
    const initTableData = () => {
      fetchList()
    };
    // 获取数据
    const fetchList = () => {
      state.loading = true
      let params = {
        keyWord: props.keyWord,
        pageNum: state.param.page,
        PageSize: state.param.pageSize
      }
      api.server.getList(params).then((res: any) => {
        const { list, total, page } = res
        state.data = list
        state.total = total
        state.param.page = page
        state.loading = false
      });


    };
    // 删除
    const onRowDel = (row: TableDataForm) => {
      ElMessageBox.confirm(`此操作将永久删除“${row.name}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.server.deleteItem({ ids: [row.id] }).then((res: any) => {
            fetchList()
            ElMessage.success('删除成功');
          });
        })
        .catch(() => { });
    };
    const toDetail = (id: number) => {
      router.push(`/iotmanager/network/server/detail/${id}`)
    };
    const toEdit = (id: number) => {
      router.push(`/iotmanager/network/server/edit/${id}`)
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      fetchList,
      toDetail,
      toEdit,
      typesFormat,
      onChangeStatus,
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
    };
  }
});
</script>

<style lang="scss" scoped>
::v-deep div.more-opearte-wrap {
  flex-direction: row;
  background-color: pink;

  // padding: 4px!important;
  div {}
}
</style>