Skip to content

A
apaas-ui
Commit fcd1cc85 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

应用构建（镜像形式）步骤调整

parent 3c9b2420
Show whitespace changes
Inline Side-by-side
Showing with 335 additions and 342 deletions
src/pages/workbench/app_build.vue
View file @ fcd1cc85
......@@ -8,93 +8,102 @@
</div>
<app-build-steps :active-step="step">
<app-build-step
title="上传应用镜像"
title="应用基础信息填写"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
:done="done"
>
<el-form
ref="step1_form"
ref="app_info_form"
class="step_form"
label-position="top"
:model="image_info"
:rules="image_rules"
:model="app_info"
:rules="app_rules"
>
<el-form-item label="镜像名称：" prop="image_name">
<el-form-item label="应用名称：" prop="name">
<el-input
v-model="image_info.image_name"
placeholder="请输入镜像名称"
v-model="app_info.name"
placeholder="请输入应用名称"
></el-input>
</el-form-item>
<el-form-item label="版本号：" prop="tag">
<el-form-item label="应用版本：" prop="version">
<el-input
v-model="image_info.tag"
placeholder="请输入版本号"
v-model="app_info.version"
placeholder="请输入应用版本，例：1.0.0"
></el-input>
</el-form-item>
<el-form-item
label="上传镜像包："
prop="file"
ref="step1_upload_item"
>
<el-upload
ref="step1_upload"
:auto-upload="false"
:data="{
image_name: image_info.image_name,
tag: image_info.tag,
}"
:limit="1"
:on-change="imageUploadChange"
:on-remove="imageUploadRemove"
:on-success="imageUploadSuccess"
:on-error="imageUploadError"
action="/apaas/hubApi/image/upload"
name="file"
drag
<el-form-item label="业务领域：" prop="ywly">
<el-select v-model="app_info.ywly" placeholder="请选择业务领域">
<el-option
v-for="item in ywlys"
:key="item.value"
:label="item.name"
:value="item.id"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将镜像文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-option>
</el-select>
</el-form-item>
<div class="apass_button upload_action">
<el-button
type="primary"
@click="submitImage('step1_form')"
:loading="step1UplaodLoading"
>
确认
</el-button>
</div>
<div class="form_line"></div>
<el-form-item label="上传镜像列表：">
<div
v-if="image_datas"
class="image_list_container"
v-infinite-scroll="loadImageList"
<el-form-item label="应用类型：" prop="type">
<el-select v-model="app_info.type" placeholder="请选择应用类型">
<el-option
v-for="item in types"
:key="item.value"
:label="item.name"
:value="item.id"
>
<apass-table
:header="image_headers"
:data="image_datas"
:padding-left="60"
></apass-table>
<p style="text-align: center" v-if="image_loading">加载中...</p>
<p
style="text-align: center"
v-if="image_noMore && image_datas.length > 0"
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用封面：" prop="logo">
<upload-file
:multiple="false"
:max="1"
type="cropper"
:readOnly="false"
fit="fill"
:list="logo"
@getNewList="getNewList"
directory="hub"
></upload-file>
</el-form-item>
<el-form-item label="所属组织：" prop="org">
<el-select v-model="app_info.org" placeholder="请选择所属组织">
<el-option
v-for="item in orgs"
:key="item.value"
:label="item.name"
:value="item.id"
>
没有更多了
</p>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用简介：" prop="yyjj">
<el-input
v-model="app_info.yyjj"
type="textywly"
placeholder="请输入应用简介"
></el-input>
</el-form-item>
<el-form-item label="功能简介：" prop="gnjj">
<el-input
v-model="app_info.gnjj"
type="textywly"
placeholder="请输入功能简介"
></el-input>
</el-form-item>
<el-form-item label="应用场景示例：" prop="cjsl">
<el-input
v-model="app_info.cjsl"
type="textywly"
placeholder="请输入应用场景示例"
></el-input>
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" @click="goToStep1">
<el-button type="primary" @click="step1Action">
下一步
</el-button>
</div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
<app-build-step
title="上传部署文件"
......@@ -102,7 +111,7 @@
:active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
>
<el-form
ref="step2_form"
ref="deploy_info_form"
class="step_form"
label-position="top"
:model="deploy_info"
......@@ -149,122 +158,112 @@
</el-form-item>
</el-form>
<div class="apass_button step_action" style="margin-top: 120px;">
<el-button type="primary" plain @click="preStep">
<el-button
type="primary"
:loading="step2Loading"
plain
@click="step = 0"
>
上一步
</el-button>
<el-button type="primary" @click="goToStep2('step2_form')">
下一步
<el-button
type="primary"
:loading="step2Loading"
@click="step2Action"
>
创建应用
</el-button>
</div>
</app-build-step>
<app-build-step
title="应用基础信息填写"
title="上传应用镜像"
:step="2"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
>
<el-form
ref="step3_form"
ref="image_info_form"
class="step_form"
label-position="top"
:model="app_info"
:rules="app_rules"
:model="image_info"
:rules="image_rules"
>
<el-form-item label="应用名称：" prop="name">
<el-form-item label="镜像名称：" prop="image_name">
<el-input
v-model="app_info.name"
placeholder="请输入应用名称"
v-model="image_info.image_name"
placeholder="请输入镜像名称"
></el-input>
</el-form-item>
<el-form-item label="应用版本：" prop="version">
<el-form-item label="版本号：" prop="tag">
<el-input
v-model="app_info.version"
placeholder="请输入应用版本，例：1.0.0"
v-model="image_info.tag"
placeholder="请输入版本号"
></el-input>
</el-form-item>
<el-form-item label="业务领域：" prop="ywly">
<el-select v-model="app_info.ywly" placeholder="请选择业务领域">
<el-option
v-for="item in ywlys"
:key="item.value"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用类型：" prop="type">
<el-select v-model="app_info.type" placeholder="请选择应用类型">
<el-option
v-for="item in types"
:key="item.value"
:label="item.name"
:value="item.id"
<el-form-item
label="上传镜像包："
prop="file"
ref="step1_upload_item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用封面：" prop="logo">
<upload-file
:multiple="false"
:max="1"
type="cropper"
:readOnly="false"
fit="fill"
:list="logo"
@getNewList="getNewList"
directory="hub"
></upload-file>
</el-form-item>
<el-form-item label="所属组织：" prop="org">
<el-select v-model="app_info.org" placeholder="请选择所属组织">
<el-option
v-for="item in orgs"
:key="item.value"
:label="item.name"
:value="item.id"
<el-upload
ref="step1_upload"
:auto-upload="false"
:data="{
app_id: app_id,
image_name: image_info.image_name,
tag: image_info.tag,
}"
:limit="1"
:on-change="imageUploadChange"
:on-remove="imageUploadRemove"
:on-success="imageUploadSuccess"
:on-error="imageUploadError"
action="/apaas/hubApi/image/upload"
name="file"
drag
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用简介：" prop="yyjj">
<el-input
v-model="app_info.yyjj"
type="textywly"
placeholder="请输入应用简介"
></el-input>
</el-form-item>
<el-form-item label="功能简介：" prop="gnjj">
<el-input
v-model="app_info.gnjj"
type="textywly"
placeholder="请输入功能简介"
></el-input>
</el-form-item>
<el-form-item label="应用场景示例：" prop="cjsl">
<el-input
v-model="app_info.cjsl"
type="textywly"
placeholder="请输入应用场景示例"
></el-input>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将镜像文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-form>
<div class="apass_button step_action">
<div class="apass_button upload_action">
<el-button
type="primary"
plain
:loading="submitLoading"
@click="preStep"
@click="addImage"
:loading="addImageLoading"
>
上一步
确认
</el-button>
<el-button
type="primary"
:loading="submitLoading"
@click="sunbmitAction('step3_form')"
</div>
<div class="form_line"></div>
<el-form-item label="上传镜像列表：">
<div
v-if="image_datas"
class="image_list_container"
v-infinite-scroll="loadImageList"
>
提交
<apass-table
:header="image_headers"
:data="image_datas"
:padding-left="60"
></apass-table>
<p style="text-align: center" v-if="image_loading">
加载中...
</p>
<p style="text-align: center" v-else-if="image_noMore">
没有更多了
</p>
</div>
</el-form-item>
</el-form>
<div class="apass_button step_action">
<el-button type="primary" @click="stepsDone">
完成
</el-button>
</div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
</app-build-steps>
......@@ -281,46 +280,30 @@
import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default {
components: {
appBuildSteps,
appBuildStep,
apassTable,
uploadFile,
apassDialog,
imageDetail,
},
data: () => ({
step: 0,
image_info: {
image_name: "",
tag: "",
file: "",
},
image_rules: {
image_name: [
{ required: true, message: "请输入镜像名称", trigger: "blur" },
],
tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
},
step1UplaodLoading: false,
image_headers: [],
image_datas: [],
image_total: 0,
image_loading: false,
image_noMore: false,
image_page: 0,
deploy_info: {
file: "",
import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail";
export default {
components: {
appBuildSteps,
appBuildStep,
apassTable,
uploadFile,
apassDialog,
imageDetail,
},
deploy_rules: {
file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
data: () => ({
dialogInfo: {
title: "",
msg: "",
submit: null,
},
step: 0,
ywlys: [],
types: [],
orgs: [],
logo: [],
app_info: {
name: "", // 应用名称
version: "", // 应用版本
......@@ -350,31 +333,149 @@ export default {
{ required: true, message: "请选择应用场景示例", trigger: "change" },
],
},
ywlys: [],
types: [],
orgs: [],
logo: [],
submitLoading: false,
dialogInfo: {
title: "",
msg: "",
submit: null,
deploy_info: {
file: "",
},
deploy_rules: {
file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
},
step2Loading: false,
app_id: "",
image_info: {
image_name: "",
tag: "",
file: "",
},
image_rules: {
image_name: [
{ required: true, message: "请输入镜像名称", trigger: "blur" },
],
tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
},
addImageLoading: false,
image_headers: [],
image_datas: [],
image_total: 0,
image_loading: false,
image_noMore: false,
image_page: 0,
done: false,
}),
methods: {
preStep() {
this.step--;
getYwlys() {
this.$http
.get("/apaas/hubApi/market/businessAreas")
.then((response) => {
this.ywlys = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getTypes() {
this.$http
.get("/apaas/hubApi/market/appTypes")
.then((response) => {
this.types = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getOrgs() {
this.$http
.get("/apaas/hubApi/market/departments")
.then((response) => {
this.orgs = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getNewList(file) {
this.app_info.logo = file.url;
},
step1Action() {
this.$refs.app_info_form.validate((valid) => {
if (valid) {
this.step = 1;
} else {
return false;
}
});
},
getFileType(fileName) {
const startIndex = fileName.lastIndexOf(".");
if (startIndex != -1) {
return fileName
.substring(startIndex + 1, fileName.length)
.toLowerCase();
} else {
return "";
}
},
deployUploadChange(file) {
const filtType = this.getFileType(file.name);
if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
this.deploy_info.file = file;
this.$refs.step2_upload_item.clearValidate();
} else {
this.$message.error("部署文件格式错误!");
this.deploy_info.file = "";
this.$refs.step2_upload.clearFiles();
}
},
deployUploadRemove() {
this.deploy_info.file = "";
},
deployUploadSuccess(response) {
if (response.success == 1) {
this.$message({
message: `提交成功`,
type: "success",
});
this.step2Loading = false;
this.step = 2;
this.app_id = response.data;
this.image_datas = [];
this.image_page = 1;
this.initImageList();
} else {
this.$message({
message: response.errMsg || `提交失败`,
type: "warning",
});
this.step2Loading = false;
}
},
nextStep() {
this.step++;
deployUploadError() {
this.$message({
message: `提交失败`,
type: "warning",
});
this.step2Loading = false;
},
step2Action() {
this.$refs.deploy_info_form.validate((valid) => {
if (valid) {
this.step2Loading = true;
this.$refs.step2_upload.submit();
} else {
return false;
}
});
},
initImageList() {
this.image_loading = true;
this.$http
.get("/apaas/hubApi/image/imageUpList", {
params: {
page: this.image_page,
size: 10,
app_id: this.app_id,
},
})
.then(({ data }) => {
......@@ -391,8 +492,9 @@ export default {
loadImageList() {
if (this.image_datas.length < this.image_total) {
this.image_page++;
this.image_loading = true;
this.initImageList();
} else {
} else if (this.image_total > 0) {
this.image_noMore = true;
}
},
......@@ -416,7 +518,7 @@ export default {
this.image_info.tag = "";
this.image_info.file = "";
this.$refs.step1_upload.clearFiles();
this.step1UplaodLoading = false;
this.addImageLoading = false;
this.image_datas = [];
this.image_page = 1;
this.initImageList();
......@@ -425,7 +527,7 @@ export default {
message: response.errMsg || `上传镜像失败`,
type: "warning",
});
this.step1UplaodLoading = false;
this.addImageLoading = false;
}
},
imageUploadError() {
......@@ -433,22 +535,22 @@ export default {
message: `上传镜像失败`,
type: "warning",
});
this.step1UplaodLoading = false;
this.addImageLoading = false;
},
imageUploadRemove() {
this.image_info.file = "";
},
submitImage(formName) {
this.$refs[formName].validate((valid) => {
addImage() {
this.$refs.image_info_form.validate((valid) => {
if (valid) {
this.step1UplaodLoading = true;
this.addImageLoading = true;
this.$refs.step1_upload.submit();
} else {
return false;
}
});
},
deleteItem(item) {
deleteImage(item) {
this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该镜像？";
this.dialogInfo.submit = () => {
......@@ -480,122 +582,19 @@ export default {
};
this.$refs.dialog.show();
},
goToStep1() {
// if (this.image_total > 0) {
this.nextStep();
/* } else {
this.$message({
message: `您尚未上传任何镜像`,
type: "warning",
});
} */
},
goToStep2(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.nextStep();
} else {
return false;
}
});
},
getNewList(file) {
this.app_info.logo = file.url;
},
getYwlys() {
this.$http
.get("/apaas/hubApi/market/businessAreas")
.then((response) => {
this.ywlys = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getTypes() {
this.$http
.get("/apaas/hubApi/market/appTypes")
.then((response) => {
this.types = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
getOrgs() {
this.$http
.get("/apaas/hubApi/market/departments")
.then((response) => {
this.orgs = response.data.data;
})
.catch((error) => {
console.log(error);
});
},
deployUploadChange(file) {
const filtType = this.getFileType(file.name);
if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
this.deploy_info.file = file;
this.$refs.step2_upload_item.clearValidate();
} else {
this.$message.error("部署文件格式错误!");
this.deploy_info.file = "";
this.$refs.step2_upload.clearFiles();
}
},
deployUploadRemove() {
this.deploy_info.file = "";
},
deployUploadSuccess(response) {
if (response.success == 1) {
this.$message({
message: `提交成功`,
type: "success",
});
this.submitLoading = false;
this.$router.push("/yygl/2/0");
} else {
this.$message({
message: response.errMsg || `提交失败`,
type: "warning",
});
this.submitLoading = false;
}
},
deployUploadError() {
this.$message({
message: `提交失败`,
type: "warning",
});
this.submitLoading = false;
},
sunbmitAction(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitLoading = true;
this.$refs.step2_upload.submit();
} else {
return false;
}
});
},
getFileType(fileName) {
const startIndex = fileName.lastIndexOf(".");
if (startIndex != -1) {
return fileName
.substring(startIndex + 1, fileName.length)
.toLowerCase();
} else {
return "";
}
},
showImageDetail(item) {
this.$refs.imageDetail.showDialog(item);
},
stepsDone() {
this.done = true;
this.$router.push(`/yygl/${this.$store.getters.level}/0`);
}, // TODO: 增加成功的状态页
},
mounted() {
this.getYwlys();
this.getTypes();
this.getOrgs();
this.image_headers = [
{
label: "镜像名称",
......@@ -617,17 +616,11 @@ export default {
{
label: "删除",
class: "warn",
callback: this.deleteItem,
callback: this.deleteImage,
},
],
},
];
this.image_datas = [];
this.image_page = 1;
this.initImageList();
this.getYwlys();
this.getTypes();
this.getOrgs();
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment