aiforge/web_src/vuepages/pages/resources/components/SceneDialog.vue

<template>
  <div class="base-dlg">
    <BaseDialog :visible.sync="dialogShow" :width="`750px`" :title="type === 'add' ? `新建算力资源应用场景` : '编辑算力资源应用场景'"
      @open="open" @opened="opened" @close="close" @closed="closed">
      <div class="dlg-content">
        <div class="form">
          <div class="form-row">
            <div class="title required">
              <span>应用场景名称</span>
            </div>
            <div class="content">
              <el-input v-model="dataInfo.name" placeholder=""></el-input>
            </div>
          </div>
          <div class="form-row">
            <div class="title required">
              <span>任务类型</span>
            </div>
            <div class="content">
              <el-select v-model="dataInfo.taskType">
                <el-option v-for="item in taskTypeList" :key="item.k" :label="item.v" :value="item.k" />
              </el-select>
            </div>
          </div>
          <div class="form-row">
            <div class="title required">
              <span>是否专属</span>
            </div>
            <div class="content">
              <el-select v-model="dataInfo.isExclusive" @change="changeIsExclusive">
                <el-option v-for="item in isExclusiveList" :key="item.k" :label="item.v" :value="item.k" />
              </el-select>
            </div>
          </div>
          <div class="form-row" v-if="dataInfo.isExclusive === '1'">
            <div class="title required">
              <span>专属组织</span>
            </div>
            <div class="content">
              <el-input v-model="dataInfo.exclusiveOrg" placeholder="多个组织名之间用英文分号隔开"></el-input>
            </div>
          </div>
          <div class="form-row">
            <div class="title required">
              <span>资源池队列</span>
            </div>
            <div class="content">
              <el-select v-model="dataInfo.queue" @change="changeQueue">
                <el-option v-for="item in queueList" :key="item.k" :label="item.v" :value="item.k" />
              </el-select>
            </div>
          </div>
          <div class="form-row">
            <div class="title required">
              <span>资源规格</span>
            </div>
            <div class="content">
              <el-select v-model="dataInfo.specs" multiple collapse-tags>
                <el-option v-for="item in specsList" :key="item.k" :label="item.v" :value="item.k" />
              </el-select>
            </div>
          </div>
          <div class="form-row" style="margin-top: 20px">
            <div class="title"></div>
            <div class="content">
              <el-button type="primary" class="btn confirm-btn" @click="confirm">确定</el-button>
              <el-button class="btn" @click="cancel">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </BaseDialog>
  </div>
</template>
<script>
import BaseDialog from '~/components/BaseDialog.vue';
import { getQueueList } from '~/apis/modules/resources';

export default {
  name: "SceneDialog",
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '' },
    type: { type: String, defalut: 'add' },
    data: { type: Object, default: () => ({}) },
  },
  components: {
    BaseDialog
  },
  data() {
    return {
      dialogShow: false,
      dataInfo: {},
      taskTypeList: [{ k: '1', v: '调试任务' }, { k: '2', v: '训练任务' }, { k: '3', v: '评测任务' }, { k: '4', v: '推理任务' }],
      isExclusiveList: [{ k: '', v: '否' }, { k: '1', v: '是' }],
      queueList: [{ k: '1', v: '资源池1' }, { k: '2', v: '资源池2' }],
      specsList: [{ k: '1', v: 'spec1' }, { k: '2', v: 'spec2' }, { k: '3', v: 'spec3' }, { k: '4', v: 'spec4' }, { k: '5', v: 'spec5' }, { k: '6', v: 'spec6' }],
    };
  },
  watch: {
    visible: function (val) {
      this.dialogShow = val;
    },
  },
  methods: {
    resetDataInfo() {
      this.dataInfo = {
        id: '',
        name: '',
        taskType: '',
        isExclusive: '',
        exclusiveOrg: '',
        queue: '',
        specs: ['2', '3'],
      }
    },
    changeIsExclusive() {
      this.dataInfo.exclusiveOrg = '';
    },
    changeQueue() {

    },
    open() {
      this.resetDataInfo();
      if (this.type === 'add') {
        //
      } else if (this.type === 'edit') {
        this.dataInfo = Object.assign(this.dataInfo, { ...this.data });
      }
      console.log('open', this.type, this.data);
      this.$emit("open");
    },
    opened() {
      this.$emit("opened");
    },
    close() {
      this.$emit("close");
    },
    closed() {
      this.$emit("closed");
      this.$emit("update:visible", false);
    },
    confirm() {
      console.log(this.dataInfo);
    },
    cancel() {
      this.dialogShow = false;
      this.$emit("update:visible", false);
    }
  },
  mounted() {
    this.resetDataInfo();
  },
};
</script>
<style scoped lang="less">
.dlg-content {
  margin: 20px 0 25px 0;
  display: flex;
  justify-content: center;

  .form {
    width: 600px;

    .form-row {
      display: flex;
      min-height: 42px;
      margin-bottom: 4px;

      .title {
        width: 160px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 20px;
        color: rgb(136, 136, 136);
        font-size: 14px;

        &.required {
          span {
            position: relative;
          }

          span::after {
            position: absolute;
            right: -10px;
            top: -2px;
            vertical-align: top;
            content: '*';
            color: #db2828;
          }
        }
      }

      .content {
        width: 300px;
        display: flex;
        align-items: center;

        /deep/ .el-select {
          width: 100%;
        }
      }
    }
  }

  .btn {
    color: rgb(2, 0, 4);
    background-color: rgb(194, 199, 204);
    border-color: rgb(194, 199, 204);

    &.confirm-btn {
      color: #fff;
      background-color: rgb(56, 158, 13);
      border-color: rgb(56, 158, 13);
    }
  }
}
</style>