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 @@ ...@@ -8,93 +8,102 @@
</div> </div>
<app-build-steps :active-step="step"> <app-build-steps :active-step="step">
<app-build-step <app-build-step
title="上传应用镜像" title="应用基础信息填写"
:step="0" :step="0"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')" :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
:done="done"
> >
<el-form <el-form
ref="step1_form" ref="app_info_form"
class="step_form" class="step_form"
label-position="top" label-position="top"
:model="image_info" :model="app_info"
:rules="image_rules" :rules="app_rules"
> >
<el-form-item label="镜像名称：" prop="image_name"> <el-form-item label="应用名称：" prop="name">
<el-input <el-input
v-model="image_info.image_name" v-model="app_info.name"
placeholder="请输入镜像名称" placeholder="请输入应用名称"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="版本号：" prop="tag"> <el-form-item label="应用版本：" prop="version">
<el-input <el-input
v-model="image_info.tag" v-model="app_info.version"
placeholder="请输入版本号" placeholder="请输入应用版本，例：1.0.0"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="业务领域：" prop="ywly">
label="上传镜像包：" <el-select v-model="app_info.ywly" placeholder="请选择业务领域">
prop="file" <el-option
ref="step1_upload_item" v-for="item in ywlys"
> :key="item.value"
<el-upload :label="item.name"
ref="step1_upload" :value="item.id"
: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
> >
<i class="el-icon-upload"></i> </el-option>
<div class="el-upload__text"> </el-select>
将镜像文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</el-form-item> </el-form-item>
<div class="apass_button upload_action"> <el-form-item label="应用类型：" prop="type">
<el-button <el-select v-model="app_info.type" placeholder="请选择应用类型">
type="primary" <el-option
@click="submitImage('step1_form')" v-for="item in types"
:loading="step1UplaodLoading" :key="item.value"
> :label="item.name"
确认 :value="item.id"
</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"
> >
<apass-table </el-option>
:header="image_headers" </el-select>
:data="image_datas" </el-form-item>
:padding-left="60" <el-form-item label="应用封面：" prop="logo">
></apass-table> <upload-file
<p style="text-align: center" v-if="image_loading">加载中...</p> :multiple="false"
<p :max="1"
style="text-align: center" type="cropper"
v-if="image_noMore && image_datas.length > 0" :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-option>
</p> </el-select>
</div> </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-item>
</el-form> </el-form>
<div class="apass_button step_action"> <div class="apass_button step_action">
<el-button type="primary" @click="goToStep1"> <el-button type="primary" @click="step1Action">
下一步 下一步
</el-button> </el-button>
</div> </div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step> </app-build-step>
<app-build-step <app-build-step
title="上传部署文件" title="上传部署文件"
...@@ -102,7 +111,7 @@ ...@@ -102,7 +111,7 @@
:active-icon="require('@/assets/imgs/progress_ic_bushudata.png')" :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
> >
<el-form <el-form
ref="step2_form" ref="deploy_info_form"
class="step_form" class="step_form"
label-position="top" label-position="top"
:model="deploy_info" :model="deploy_info"
...@@ -149,122 +158,112 @@ ...@@ -149,122 +158,112 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="apass_button step_action" style="margin-top: 120px;"> <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>
<el-button type="primary" @click="goToStep2('step2_form')"> <el-button
下一步 type="primary"
:loading="step2Loading"
@click="step2Action"
>
创建应用
</el-button> </el-button>
</div> </div>
</app-build-step> </app-build-step>
<app-build-step <app-build-step
title="应用基础信息填写" title="上传应用镜像"
:step="2" :step="2"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')" :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
> >
<el-form <el-form
ref="step3_form" ref="image_info_form"
class="step_form" class="step_form"
label-position="top" label-position="top"
:model="app_info" :model="image_info"
:rules="app_rules" :rules="image_rules"
> >
<el-form-item label="应用名称：" prop="name"> <el-form-item label="镜像名称：" prop="image_name">
<el-input <el-input
v-model="app_info.name" v-model="image_info.image_name"
placeholder="请输入应用名称" placeholder="请输入镜像名称"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="应用版本：" prop="version"> <el-form-item label="版本号：" prop="tag">
<el-input <el-input
v-model="app_info.version" v-model="image_info.tag"
placeholder="请输入应用版本，例：1.0.0" placeholder="请输入版本号"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="业务领域：" prop="ywly"> <el-form-item
<el-select v-model="app_info.ywly" placeholder="请选择业务领域"> label="上传镜像包："
<el-option prop="file"
v-for="item in ywlys" ref="step1_upload_item"
: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-option> <el-upload
</el-select> ref="step1_upload"
</el-form-item> :auto-upload="false"
<el-form-item label="应用封面：" prop="logo"> :data="{
<upload-file app_id: app_id,
:multiple="false" image_name: image_info.image_name,
:max="1" tag: image_info.tag,
type="cropper" }"
:readOnly="false" :limit="1"
fit="fill" :on-change="imageUploadChange"
:list="logo" :on-remove="imageUploadRemove"
@getNewList="getNewList" :on-success="imageUploadSuccess"
directory="hub" :on-error="imageUploadError"
></upload-file> action="/apaas/hubApi/image/upload"
</el-form-item> name="file"
<el-form-item label="所属组织：" prop="org"> drag
<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-option> <i class="el-icon-upload"></i>
</el-select> <div class="el-upload__text">
</el-form-item> 将镜像文件拖到此处，或<em>点击上传</em>
<el-form-item label="应用简介：" prop="yyjj"> </div>
<el-input </el-upload>
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-item>
</el-form> <div class="apass_button upload_action">
<div class="apass_button step_action">
<el-button <el-button
type="primary" type="primary"
plain @click="addImage"
:loading="submitLoading" :loading="addImageLoading"
@click="preStep"
> >
上一步 确认
</el-button> </el-button>
<el-button </div>
type="primary" <div class="form_line"></div>
:loading="submitLoading" <el-form-item label="上传镜像列表：">
@click="sunbmitAction('step3_form')" <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> </el-button>
</div> </div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step> </app-build-step>
</app-build-steps> </app-build-steps>
...@@ -281,46 +280,30 @@ ...@@ -281,46 +280,30 @@
import appBuildSteps from "@/components/app-build-steps/app-build-steps"; import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step"; import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassTable from "@/components/apass-table"; import apassTable from "@/components/apass-table";
import uploadFile from "@/components/general/upload_file"; import uploadFile from "@/components/general/upload_file";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import imageDetail from "@/components/image-detail"; import imageDetail from "@/components/image-detail";
export default { export default {
components: { components: {
appBuildSteps, appBuildSteps,
appBuildStep, appBuildStep,
apassTable, apassTable,
uploadFile, uploadFile,
apassDialog, apassDialog,
imageDetail, 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: "",
}, },
deploy_rules: { data: () => ({
file: [{ required: true, message: "请选择部署文件", trigger: "change" }], dialogInfo: {
title: "",
msg: "",
submit: null,
}, },
step: 0,
ywlys: [],
types: [],
orgs: [],
logo: [],
app_info: { app_info: {
name: "", // 应用名称 name: "", // 应用名称
version: "", // 应用版本 version: "", // 应用版本
...@@ -350,31 +333,149 @@ export default { ...@@ -350,31 +333,149 @@ export default {
{ required: true, message: "请选择应用场景示例", trigger: "change" }, { required: true, message: "请选择应用场景示例", trigger: "change" },
], ],
}, },
ywlys: [], deploy_info: {
types: [], file: "",
orgs: [], },
logo: [], deploy_rules: {
submitLoading: false, file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
dialogInfo: { },
title: "", step2Loading: false,
msg: "", app_id: "",
submit: null, 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: { methods: {
preStep() { getYwlys() {
this.step--; 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() { deployUploadError() {
this.step++; 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() { initImageList() {
this.image_loading = true;
this.$http this.$http
.get("/apaas/hubApi/image/imageUpList", { .get("/apaas/hubApi/image/imageUpList", {
params: { params: {
page: this.image_page, page: this.image_page,
size: 10, size: 10,
app_id: this.app_id,
}, },
}) })
.then(({ data }) => { .then(({ data }) => {
...@@ -391,8 +492,9 @@ export default { ...@@ -391,8 +492,9 @@ export default {
loadImageList() { loadImageList() {
if (this.image_datas.length < this.image_total) { if (this.image_datas.length < this.image_total) {
this.image_page++; this.image_page++;
this.image_loading = true;
this.initImageList(); this.initImageList();
} else { } else if (this.image_total > 0) {
this.image_noMore = true; this.image_noMore = true;
} }
}, },
...@@ -416,7 +518,7 @@ export default { ...@@ -416,7 +518,7 @@ export default {
this.image_info.tag = ""; this.image_info.tag = "";
this.image_info.file = ""; this.image_info.file = "";
this.$refs.step1_upload.clearFiles(); this.$refs.step1_upload.clearFiles();
this.step1UplaodLoading = false; this.addImageLoading = false;
this.image_datas = []; this.image_datas = [];
this.image_page = 1; this.image_page = 1;
this.initImageList(); this.initImageList();
...@@ -425,7 +527,7 @@ export default { ...@@ -425,7 +527,7 @@ export default {
message: response.errMsg || `上传镜像失败`, message: response.errMsg || `上传镜像失败`,
type: "warning", type: "warning",
}); });
this.step1UplaodLoading = false; this.addImageLoading = false;
} }
}, },
imageUploadError() { imageUploadError() {
...@@ -433,22 +535,22 @@ export default { ...@@ -433,22 +535,22 @@ export default {
message: `上传镜像失败`, message: `上传镜像失败`,
type: "warning", type: "warning",
}); });
this.step1UplaodLoading = false; this.addImageLoading = false;
}, },
imageUploadRemove() { imageUploadRemove() {
this.image_info.file = ""; this.image_info.file = "";
}, },
submitImage(formName) { addImage() {
this.$refs[formName].validate((valid) => { this.$refs.image_info_form.validate((valid) => {
if (valid) { if (valid) {
this.step1UplaodLoading = true; this.addImageLoading = true;
this.$refs.step1_upload.submit(); this.$refs.step1_upload.submit();
} else { } else {
return false; return false;
} }
}); });
}, },
deleteItem(item) { deleteImage(item) {
this.dialogInfo.title = ""; this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该镜像？"; this.dialogInfo.msg = "是否删除该镜像？";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
...@@ -480,122 +582,19 @@ export default { ...@@ -480,122 +582,19 @@ export default {
}; };
this.$refs.dialog.show(); 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) { showImageDetail(item) {
this.$refs.imageDetail.showDialog(item); this.$refs.imageDetail.showDialog(item);
}, },
stepsDone() {
this.done = true;
this.$router.push(`/yygl/${this.$store.getters.level}/0`);
}, // TODO: 增加成功的状态页
}, },
mounted() { mounted() {
this.getYwlys();
this.getTypes();
this.getOrgs();
this.image_headers = [ this.image_headers = [
{ {
label: "镜像名称", label: "镜像名称",
...@@ -617,17 +616,11 @@ export default { ...@@ -617,17 +616,11 @@ export default {
{ {
label: "删除", label: "删除",
class: "warn", class: "warn",
callback: this.deleteItem, callback: this.deleteImage,
}, },
], ],
}, },
]; ];
this.image_datas = [];
this.image_page = 1;
this.initImageList();
this.getYwlys();
this.getTypes();
this.getOrgs();
}, },
}; };
</script> </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