0.0.2 • Published 3 years ago
目录结构
── 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>