目录结构

── enniot-docker-manage
    ├── DockerManage.vue
    ├── README.md
    ├── DockerManageInfo.json
    └── package.json

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------------------------------------------------ | ------ | ---------- | ---------- | | ref | 用于父组件调用子组件的变量和方法 | string | dockerForm | dockerForm | | schema | 规定 form 格式的 json 文件 | json | — | — | | data | 用于将后台读取的数据填入 form 组件；以及获取 form 中数据，并将这些数据打包作为参数提交。 | object | — | — |

Data

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------------------------ | ------- | ---------- | ------ | | enable | 启动 Docker 管理器 | Boolean | true/false | — | | version | Docker 版本 | string | — | — | | username | 用户名 | string | — | — | | password | 新密码（若有则会重置密码，否则不重置） | string | — | — | | new_password | 当前密码（数据库密码登陆失败的时候，需要用户重新传入登录密码） | string | — | — | | port | 端口号 | int | — | — |

Usage

<template>
  <el-row
    :gutter="20"
    class="page-box"
  >
    <el-col>
      <Breadcrumb
        :breadcrumbs="[
          {
            label: 'docker 管理',
          },
        ]"
      />
    </el-col>
    <el-col>
      <el-card
        ref="dockerLoading"
        v-loading="loading"
        class="grid-card"
      >
        <DockerForm
          ref="dockerForm"
          :data="dockerForm"
          style="width: 60%"
        />
        <div style="margin-bottom: 20px">
          <el-link
            type="primary"
            @click="routerURL()"
          >
            进入Docker管理页面
          </el-link>
        </div>
        <el-button
          type="primary"
          @click="onSubmit()"
        >
          提交
        </el-button>
        <el-button @click="resetForm()">
          重置
        </el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Breadcrumb from '@/component/breadcrumb.vue';
import baseUrl from '@/service/api';
import DockerForm from '@/views/components/container/DockerManage.vue';

export default {
  components: {
    Breadcrumb,
    DockerForm,
  },
  data() {
    return {
      loading: false,
      router_port: 10000,
      dockerForm: {
        port: 10000,
      },
    };
  },
  async created() {
    await this.resetForm();
  },
  methods: {
    async onSubmit() {
      const isValid = await this.$refs.dockerForm.validate();
      if (isValid) {
        if (!_.has(this.dockerForm, 'password')) {
          this.dockerForm.password = '';
        }
        if (!_.has(this.dockerForm, 'new_password')) {
          this.dockerForm.new_password = '';
        }
        const dockerSubmitForm = _.omit(this.dockerForm, ['version', 'username', 'id']);
        await this.$api.post(`${baseUrl}/api/docker-management`, dockerSubmitForm, { target: this.$refs.networkTab });
        await this.resetForm();
      }
    },
    async resetForm() {
      const res = await this.$api.get(`${baseUrl}/api/docker-management`);
      this.dockerForm = res;
    },
    routerURL() {
      window.open(`url${this.dockerForm.port}`);
    },
  },
};
</script>