aiforge/web_src/vuepages/pages/resources/scene/index.vue

<template>
  <div>
    <div class="title"><span>算力资源应用场景管理</span></div>
    <div class="tools-bar">
      <div>
        <el-select class="select" size="medium" v-model="selTaskType" @change="selectChange">
          <el-option v-for="item in taskTypeList" :key="item.k" :label="item.v" :value="item.k" />
        </el-select>
        <el-select class="select" size="medium" v-model="selIsExclusive" @change="selectChange">
          <el-option v-for="item in isExclusiveList" :key="item.k" :label="item.v" :value="item.k" />
        </el-select>
        <el-select class="select" size="medium" v-model="selQueue" @change="selectChange">
          <el-option v-for="item in queueList" :key="item.k" :label="item.v" :value="item.k" />
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus" size="medium" @click="showDialog('add')">新增应用场景</el-button>
      </div>
    </div>
    <div class="table-container">
      <div>
        <el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
          <el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column>
          <el-table-column prop="name" label="应用场景名称" align="center" header-align="center"></el-table-column>
          <el-table-column prop="taskType" label="任务类型" align="center" header-align="center"></el-table-column>
          <el-table-column prop="isExclusive" label="是否专属" align="center" header-align="center"></el-table-column>
          <el-table-column prop="exclusiveOrg" label="专属组织" align="center" header-align="center"></el-table-column>
          <el-table-column prop="queue" label="资源池(队列)" align="center" header-align="center"></el-table-column>
          <el-table-column prop="specs" label="资源规格" align="left" header-align="center">
            <template slot-scope="scope">
              {{ scope.row.specs }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" header-align="center" width="100">
            <template slot-scope="scope">
              <span class="op-btn" @click="showDialog('edit', scope.row)">修改</span>
              <span class="op-btn" style="color:red" @click="deleteRow(scope.row)">删除</span>
            </template>
          </el-table-column>
          <template slot="empty">
            <span style="font-size: 12px">{{
                loading ? '加载中...' : '暂无数据'
            }}</span>
          </template>
        </el-table>
      </div>
      <div class="__r_p_pagination">
        <div style="margin-top: 2rem">
          <div class="center">
            <el-pagination background @current-change="currentChange" :current-page="pageInfo.curpage"
              :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <SceneDialog :visible.sync="sceneDialogShow" :type="sceneDialogType" :data="sceneDialogData"
      @confirm="sceneDialogConfirm"></SceneDialog>
  </div>
</template>

<script>
import SceneDialog from '../components/SceneDialog.vue';
import { getQueueList } from '~/apis/modules/resources';

export default {
  data() {
    return {
      selTaskType: '',
      taskTypeList: [{ k: '', v: '全部任务类型' }, { k: '1', v: '调试任务' }, { k: '2', v: '训练任务' }, { k: '3', v: '评测任务' }, { k: '4', v: '推理任务' }],
      selIsExclusive: '',
      isExclusiveList: [{ k: '', v: '全部专属和通用' }, { k: '1', v: '专属' }, { k: '2', v: '通用' }],
      selQueue: '',
      queueList: [{ k: '', v: '全部资源池队列' }, { k: '1', v: '资源池1' }, { k: '2', v: '资源池2' }],
      loading: false,
      tableData: [],
      pageInfo: {
        curpage: 1,
        pageSize: 10,
        pageSizes: [10],
        total: 0,
      },
      sceneDialogShow: false,
      sceneDialogType: 'add',
      sceneDialogData: {},
    };
  },
  components: { SceneDialog },
  methods: {
    getTableData() {
      const params = {
        taskType: this.selTaskType,
        isExclusive: this.selIsExclusive,
        queue: this.selQueue,
        curpage: this.pageInfo.curpage,
        pagesize: this.pageInfo.pageSize,
      };
      console.log('params', params);
      this.loading = true;
      getQueueList(params).then(res => {
        this.loading = false;
        // const data = res.data.
        const data = new Array(20).fill(0).map((_, index) => {
          return {
            index: index,
            id: `id-${index}-${Math.random().toFixed(2)}`,
            name: `name-${index}-${Math.random().toFixed(2)}`,
            taskType: `taskType-${index}-${Math.random().toFixed(2)}`,
            isExclusive: `isExclusive-${index}-${Math.random().toFixed(2)}`,
            exclusiveOrg: `exclusiveOrg-${index}-${Math.random().toFixed(2)}`,
            queue: `queue-${index}-${Math.random().toFixed(2)}`,
            specs: `spec-${index}-${Math.random().toFixed(2)}`,
          };
        });
        this.tableData = data;
        this.pageInfo.total = 99;
      }).catch(err => {
        console.log(err);
        this.loading = false;
      });
    },
    selectChange() {
      this.pageInfo.curpage = 1;
      this.getTableData();
    },
    currentChange(val) {
      this.pageInfo.curpage = val;
      this.getTableData();
    },
    deleteRow(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showDialog(type, data) {
      this.sceneDialogType = type;
      this.sceneDialogData = data ? { ...data } : {};
      this.sceneDialogShow = true;
    },
    sceneDialogConfirm() {
      this.sceneDialogShow = false;
      this.getTableData();
    }
  },
  mounted() {
    this.getTableData();
  },
  beforeDestroy() {
  },
};
</script>

<style scoped lang="less">
.title {
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  span {
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
}

.tools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .select {
    margin-right: 10px;

    /deep/ .el-input__inner {
      border-radius: 0;
    }
  }
}

.table-container {
  margin-bottom: 16px;

  /deep/ .el-table__header {
    th {
      background: rgb(245, 245, 246);
      font-size: 12px;
      color: rgb(36, 36, 36);
    }
  }

  /deep/ .el-table__body {
    td {
      font-size: 12px;
    }
  }

  .op-btn {
    cursor: pointer;
    font-size: 12px;
    color: rgb(25, 103, 252);
    margin: 0 5px;
  }
}

.center {
  display: flex;
  justify-content: center;
}
</style>