Skip to content

A
apaas-ui
Commit a0e27297 authored by 张俊's avatar 张俊
Browse files
Options

应用仓库详情

parent 1be6ec77
Show whitespace changes
Inline Side-by-side
Showing with 1448 additions and 134 deletions
src/components/dialog-action.vue
View file @ a0e27297
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
:visible.sync="show" :visible.sync="show"
width="400px" width="400px"
top="25vh" top="25vh"
class="user-dialog" :class="{'user-dialog':true,'out':confirmOptions.position}"
> >
<span slot="title"> <span slot="title">
<b class="iconLeft"></b> <b class="iconLeft"></b>
...@@ -85,6 +85,9 @@ export default { ...@@ -85,6 +85,9 @@ export default {
.el-dialog__body { .el-dialog__body {
padding: 49px 20px !important; padding: 49px 20px !important;
} }
.out .el-dialog__body{
text-align: left;
}
</style> </style>
<style scoped> <style scoped>
.group-dialog.el-dialog__wrapper { .group-dialog.el-dialog__wrapper {
......
src/components/infoList.vue
View file @ a0e27297
<template> <template>
<div class="outlist"> <div class="outlist">
<div v-for="(item,index) in list_arr" :key="index+1100" class="list"> <div v-for="(item, index) in list_arr" :key="index + 1100" class="list">
<p :class="item.prop&&item.prop=='title'?'service_title':''"><span class="line" v-if="item.prop&&item.prop=='title'"></span> {{item.title}}</p> <p :class="item.prop && item.prop == 'title' ? 'service_title' : ''">
<p v-if="!(item.prop&&item.prop=='title')">{{item.info}} <span v-if="item.type&&item.type=='down'" class="filebtn">下载文件</span> </p> <span class="line" v-if="item.prop && item.prop == 'title'"></span>
<slot v-if="item.type&&item.type=='solt'" :name="item.solt_name"></slot> {{ item.title }}
</p>
<p v-if="!(item.prop && item.prop == 'title')">
<span v-html="item.info" style="white-space:pre-wrap;"></span>
<span v-if="item.type && item.type == 'down'" class="filebtn"
>下载文件</span
>
</p>
<slot
v-if="item.type && item.type == 'solt'"
:name="item.solt_name"
></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {};
}
}, },
props:['list_arr'], props: ["list_arr"],
mounted(){ mounted() {
console.log(this.$solts); console.log(this.$solts);
} },
}; };
</script> </script>
<style scoped> <style scoped>
.list p{ .list p {
line-height: 32px; line-height: 32px;
color: #8890a7; color: #8890a7;
} }
.list{ .list {
margin-bottom: 20px; margin-bottom: 20px;
} }
.list p:nth-of-type(2){ .list p:nth-of-type(2) {
color: #242c43; color: #242c43;
} }
.outlist .list:nth-last-of-type(1){ .outlist .list:nth-last-of-type(1) {
margin: 0; margin: 0;
} }
.service_title{ .service_title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #58617a; color: #58617a;
...@@ -46,7 +55,7 @@ export default { ...@@ -46,7 +55,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
margin-left: -10px; margin-left: -10px;
} }
.service_title span{ .service_title span {
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 16px; height: 16px;
...@@ -56,7 +65,7 @@ export default { ...@@ -56,7 +65,7 @@ export default {
margin-top: 9px; margin-top: 9px;
margin-right: 15px; margin-right: 15px;
} }
.filebtn{ .filebtn {
width: 76px; width: 76px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
......
src/components/service-header.vue
View file @ a0e27297
...@@ -2,15 +2,35 @@ ...@@ -2,15 +2,35 @@
<div class="info_logo"> <div class="info_logo">
<div class="logo"></div> <div class="logo"></div>
<div class="info"> <div class="info">
<p class="info_title"><span>{{data.name}}</span> <span class="info_fix" v-if="data.fixed">我要修改</span></p> <p class="info_title">
<span>{{ data.name }}</span>
<span class="bs" v-if="data.yydetail" @click="subevent(0)">一键部署</span>
<span class="info_fix" v-if="data.yydetail" @click="subevent(1)">我要编辑</span>
<span class="right gap" v-if="data.yydetail">|</span>
<span class="right underline" v-if="data.yydetail" @click="subevent(2)" title="申请下线至开发者应用">申请下线</span>
<span class="right undersell" v-if="data.yydetail" @click="subevent(3)">申请下架</span>
<span class="info_fix" v-if="data.fixed">我要修改</span>
</p>
<div class="info_detail"> <div class="info_detail">
<p> <p>
<label v-for="(item,index) in data.first" :key="index+2000">{{item.name}}: <span :style="item.color?{color:item.color}:{}">{{item.text}}</span> </label> <label v-for="(item, index) in data.first" :key="index + 2000"
>{{ item.name }}:
<span :style="item.color ? { color: item.color } : {}">{{
item.text
}}</span>
</label>
</p> </p>
<p> <p>
<label v-for="(item,index) in data.second" :key="index+2500">{{item.name}}: <label v-for="(item, index) in data.second" :key="index + 2500"
<a v-if="item.name.indexOf('地址')!==-1" style="color:#515fe7;text-decoration: none;" target="_blank" :href="item.text">{{item.text}}</a> >{{ item.name }}:
<span v-else>{{item.text}}</span> <a
v-if="item.name.indexOf('地址') !== -1"
style="color:#515fe7;text-decoration: none;"
target="_blank"
:href="item.text"
>{{ item.text }}</a
>
<span v-else>{{ item.text }}</span>
</label> </label>
</p> </p>
</div> </div>
...@@ -20,58 +40,56 @@ ...@@ -20,58 +40,56 @@
<script> <script>
export default { export default {
props:['data'], props: ["data"],
components: { components: {},
},
data() { data() {
return { return {};
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
}, },
watch: {},
computed: {},
created() {},
mounted() {},
methods: { methods: {
subevent(val){
if(val == 0){
this.$emit('deploy')
}else if(val == 1){
this.$emit('editapp')
}else if(val == 2){
this.$emit('unline',0)
}else if(val == 3){
this.$emit('unsell',1)
}
}
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.info_logo{ .info_logo {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
} }
.logo{ .logo {
float: left; float: left;
width: 144px; width: 144px;
height: 144px; height: 144px;
background-color: #0f6ac7; background-color: #0f6ac7;
margin-right: 13px; margin-right: 13px;
} }
.info{ .info {
float: left; float: left;
width: calc(100% - 157px); width: calc(100% - 157px);
} }
.info_title{ .info_title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #0d1847; color: #0d1847;
padding-left: 10px; padding-left: 10px;
margin-bottom: 26px; margin-bottom: 26px;
} }
.info_fix{ .info_fix {
display: inline-block; display: inline-block;
width: 76px; width: 76px;
height: 32px; height: 32px;
...@@ -85,21 +103,68 @@ export default { ...@@ -85,21 +103,68 @@ export default {
cursor: pointer; cursor: pointer;
float: right; float: right;
} }
.info_detail{ .bs{
display: inline-block;
width: 76px;
height: 32px;
box-sizing: border-box;
line-height: 28px;
font-size: 14px;
cursor: pointer;
text-align: center;
font-weight: 400;
background-color: #d0d5e7;
border-radius: 8px;
border: solid 2px #a5afd6;
color: #0f2683;
}
.gap{
color: #b4c0f5;
margin: 0 10px;
line-height: 30px;
}
.underline{
width: 76px;
height: 32px;
background-color: #f6f7fb;
border-radius: 8px;
font-size: 14px;
font-weight: normal;
color: #0f2683;
line-height: 32px;
cursor: pointer;
text-align: center;
margin-left: 10px;
}
.undersell{
width: 76px;
height: 32px;
background-color: #0f2683;
border-radius: 8px;
font-size: 14px;
font-weight: normal;
color: #f8f9fd;
line-height: 32px;
cursor: pointer;
text-align: center;
}
.info_detail {
width: 100%; width: 100%;
height: 96px; height: 96px;
background-color: #f6f7fb; background-color: #f6f7fb;
border-radius: 8px; border-radius: 8px;
line-height: 40px; line-height: 40px;
padding: 8px 20px; padding: 8px 20px;
} }
.info_detail p{ .info_detail p {
color: #8890a7; color: #8890a7;
} }
.info_detail span{ .info_detail span {
color: #242c43; color: #242c43;
font-weight: 600; font-weight: 600;
margin-right: 48px; margin-right: 48px;
} }
.right{
float: right;
}
</style> </style>
src/pages/app_detail.vue 0 → 100644
View file @ a0e27297
<template>
<div class="detail_contain">
<p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
<div class="info_contain">
<service-header
:data="service_header_arr"
@deploy="deploy"
@editapp="editapp"
@unline="unline"
@unsell="unsell"
></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr[now_user]"
:key="index + 1000"
class="type_select"
@click="now_service = index"
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list
:list_arr="list_arr"
v-if="now_service == 0"
>
<div class="appcode" v-html="appcode" slot="app_code"></div>
</info-list>
<div v-if="now_service == 1&&now_user == 0">
<p style="color:#8890a7;">镜像列表：</p>
<table-um
:headers="header_arr"
url="imagearr"
@actiondelete="actiondelete"
></table-um>
<p>
<span class="addimage" @click="addImage">新增镜像</span>
</p>
<div v-if="addImageFlag">
<el-form ref="form" :rules="rules" :model="form" label-width="0px">
<el-form-item prop="name">
<p class="formname">镜像名称：</p>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="taps">
<p class="formname">镜像标签：</p>
<el-input v-model="form.taps"></el-input>
</el-form-item>
<el-form-item>
<p class="formname">上传镜像包：</p>
<upload-file :multiple="false" :max="1" :drag="true" :list="imgList" @getNewList="getNewList"></upload-file>
</el-form-item>
</el-form>
</div>
<div class="savebtn" v-if="addImageFlag">
<el-button>保存</el-button>
<el-button>取消</el-button>
</div>
</div>
<div v-if="now_service == 2&&now_user == 0">
<p style="color:#8890a7;">压缩包：</p>
<p><img src="../assets/imgs/ic_olddata.png" alt="">{{oldpag_name}} <span class="download">下载原压缩包</span> </p>
<p style="color:#8890a7;margin:20px 0;">上传新的压缩包：</p>
<div class="uploadtips">
<p style="margin-left:-11px;"><i class="el-icon-warning-outline"></i>压缩包上传提示：</p>
<p>1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png；</p>
<p>2.上述文件必须按照上述名称进行命名；</p>
<p>3.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。</p>
</div>
<upload-file :multiple="false" :max="1" :drag="true" :list="imgList1" @getNewList="getNewList1"></upload-file>
<div class="savebtn">
<el-button>保存</el-button>
<el-button>取消</el-button>
</div>
</div>
<div v-if="(now_service == 3&&now_user == 0)||(now_service == 1&&now_user !== 0)">
<service-tab-comments url="sjfw"></service-tab-comments>
</div>
</div>
</div>
</div>
<dialog-action
ref="myConfirm"
:confirmOptions="tipsOptions"
></dialog-action>
</div>
</template>
<script>
import infoList from "../components/infoList";
import tableUm from "../components/table-um";
import serviceHeader from "../components/service-header";
import dialogAction from "@/components/dialog-action";
import uploadFile from '@/components/upload_file'
import serviceTabComments from '@/components/service-tab-comments'
import { getRole } from "../utils/common";
export default {
components: {
infoList,
tableUm,
serviceHeader,
dialogAction,
uploadFile,
serviceTabComments,
},
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
buy_style: 0,
oldpag_name:'镜像文件002.rar',
imgList: [],
imgList1: [],
form:{
name: '',
fileList:'',
taps:''
},
fileList:'',
rules:{
name:[
{required: true, message: '请输入镜像名称', trigger: 'blur'}
],
taps:[
{required: true, message: '请输入镜像标签', trigger: 'blur'}
],
},
tipsOptions: {
title:'',
message:"",
btnSubmitText: "",
btnCancelText: "",
position: "",
},
service_arr: [
["基本信息", "镜像文件管理", "部署文件管理", "评分及评论"],
["基本信息", "评分及评论"],
["基本信息", "评分及评论"],
],
service_header_arr: {
name: "",
first: [],
second: [],
yydetail: true,
},
now_service: 0,
header_arr: [
{
prop: "jxmc",
label: "镜像名称",
minWidth: "33.33%",
align: "center",
},
{
prop: "bbh",
label: "版本号",
minWidth: "33.33%",
align: "center",
},
{
label: "操作",
type: "Button",
align: "center",
minWidth: "33.33%",
btnList: [
{
type: "actiondelete",
label: "删除",
},
],
},
],
list_arr: [
{
title: "应用简介：",
info: "",
},
{
title: "功能简介：",
info: "",
},
{
title: "应用场景：",
info: "",
},
{
title: "应用参数：",
info: "",
type: "solt",
solt_name: "app_code",
},
],
appcode: "",
addImageFlag:false
};
},
watch: {
},
created() {
this.now_user = this.$store.state.role;
getRole().then((data) => {
this.now_user = data;
this.$store.commit("rolefun", data);
this.getServiceInfo();
this.getServiceBaseInfo();
});
},
mounted() {},
methods: {
getNewList(val) {
console.log(val);
this.form.fileList = ""
this.form.fileList = url.map((v,k)=>{
return v.url
}).join(';')
console.log(this.form.fileList)
},
getNewList1(val) {
console.log(val);
this.fileList = ""
this.fileList = url.map((v,k)=>{
return v.url
}).join(';')
console.log(this.fileList)
},
addImage(){
this.addImageFlag = true
},
actiondelete(){
this.tipsOptions= {
title:'',
message:"",
btnSubmitText: "",
btnCancelText: "",
position: "",
}
this.tipsOptions.message="是否删除该数据"
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
deploy(){
console.log('0000');
},
editapp(){
console.log('11111');
},
unline(val){
console.log(val);
this.tipsOptions= {
title:'',
message:"",
btnSubmitText: "",
btnCancelText: "",
position: "",
}
this.tipsOptions.message="该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。"
this.tipsOptions.btnSubmitText="发送通知"
this.tipsOptions.position="left"
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
unsell(val){
console.log(val);
this.tipsOptions= {
title:'',
message:"",
btnSubmitText: "",
btnCancelText: "",
position: "",
}
this.tipsOptions.message="申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。"
this.tipsOptions.btnSubmitText="发送通知"
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
getServiceInfo() {
this.$http
.get("/static/appdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.service_header_arr, "name", data.appInfo.name);
this.$set(this.service_header_arr, "first", data.appInfo.first);
this.$set(this.service_header_arr, "second", data.appInfo.second);
})
.catch(function(response) {});
},
getServiceBaseInfo() {
this.$http
.get("/static/appdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
this.appcode = data.appbaseinfo.appcode;
})
.catch(function(response) {});
},
},
};
</script>
<style>
.savebtn .el-button {
float: right;
margin-left: 20px;
letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1) {
background-color: #0f2683;
color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2) {
background-color: #c3caf8;
color: #0f2683;
}
</style>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
}
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px;
}
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.type_box {
width: 100%;
}
.type_title {
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.type_select {
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.type_box_select {
padding: 30px 10px 10px 10px;
width: 100%;
}
.savebtn {
margin-top: 50px;
overflow: hidden;
}
.appcode {
white-space: pre-wrap;
width: 100%;
background-color: #f8f9fd;
border-radius: 8px;
padding: 24px;
color: #58617a;
}
.addimage,.download{
display: inline-block;
color: #f8f9fd;
font-size: 16px;
width: 124px;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #0f2683;
border-radius: 8px;
margin-top: 20px;
cursor: pointer;
}
.download{
background-color: #495feb;
margin-left: 10px;
}
.formname{
color: #8890a7;
}
.uploadtips{
width: 750px;
height: 141px;
background-color: #f8f9fd;
border-radius: 8px;
padding: 20px 40px;
color: #8890a7;
line-height: 22px;
margin-bottom: 20px;
}
</style>
src/pages/app_edit.vue 0 → 100644
View file @ a0e27297
<template>
<div class="detail_contain">
<p class="now_page_title">
我的应用 / 应用仓库 / 应用详情 /
<span>应用编辑</span>
</p>
<div class="info_contain">
<el-form ref="form" :rules="rules" :model="form" label-width="0px">
<el-form-item prop="name">
<p class="formname">应用名称：</p>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="vision">
<p class="formname">应用版本：</p>
<el-input v-model="form.vision"></el-input>
</el-form-item>
<el-form-item prop="area">
<p class="formname">业务领域：</p>
<el-select v-model="form.area" placeholder="请选择">
<el-option
v-for="item in area_arr"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<p class="formname">应用类型：</p>
<el-select v-model="form.type" placeholder="请选择">
<el-option
v-for="item in type_arr"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="fileList">
<p class="formname">应用封面：</p>
<upload-file
:multiple="false"
:max="1"
type="picture"
:readOnly="false"
fit="fill"
:list="imgList"
@getNewList="getNewList"
ref="servicepic"
></upload-file>
<span class="removepic" @click="removepic">更换封面</span>
</el-form-item>
<el-form-item
prop="origin"
:rules="[
{ required: true, message: '请选择所属组织', trigger: 'change' },
]"
>
<p class="formname">所属组织：</p>
<el-select v-model="form.origin" placeholder="请选择">
<el-option
v-for="item in origin_arr"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="appdesc">
<p class="formname">应用简介：</p>
<el-input type="textarea" v-model="form.appdesc"></el-input>
</el-form-item>
<el-form-item prop="actiondesc">
<p class="formname">功能简介：</p>
<el-input type="textarea" v-model="form.actiondesc"></el-input>
</el-form-item>
<el-form-item prop="example">
<p class="formname">应用场景示例：</p>
<el-input type="textarea" v-model="form.example"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')" class="right">保存</el-button>
<el-button class="right">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import uploadFile from '../components/upload_file'
import { getRole } from "../utils/common";
export default {
props: {},
components: {
uploadFile
},
data() {
return {
form: {
name: '',
area:'',
origin:'',
vision:'',
type:'',
appdesc:'',
actiondesc:"",
example:'',
fileList:''
},
open:true,
open1:false,
open2:'true',
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
imgList: [],
area_arr:[
{
label:'应急领域',
value:0,
},
{
label:'公安领域',
value:1,
},
{
label:'交通领域',
value:2,
},
{
label:'全领域',
value:3,
}
],
type_arr:[
{
label:'基础工具',
value:0,
},
{
label:'通用应用',
value:1,
},
{
label:'业务应用',
value:2,
},
{
label:'其他',
value:3,
}
],
origin_arr:[],
rules:{
name:[
{ required: true, message: '请输入应用名称', trigger: 'blur' },
],
vision:[
{ required: true, message: '请输入应用版本', trigger: 'blur' },
],
appdesc:[
{ required: true, message: '请输入应用版本', trigger: 'blur' },
],
actiondesc:[
{ required: true, message: '请输入应用版本', trigger: 'blur' },
],
example:[
{ required: true, message: '请输入应用版本', trigger: 'blur' },
],
desc:[
{ required: true, message: '请输入服务描述', trigger: 'blur' },
{ max: 200, message: '长度小于200个字符', trigger: 'blur' }
],
area:[
{ required: true, message: '请选择业务领域', trigger: 'change' },
],
type:[
{ required: true, message: '请选择应用类型', trigger: 'change' },
],
fileList:[
{required: true, message: '请上传图片', trigger: 'change'}
]
}
};
},
watch: {},
computed: {},
created() {
this.now_user = this.$store.state.role
getRole().then(data => {
this.now_user = data;
this.$store.commit('rolefun',data)
this.getOriginArr()
});
},
mounted() {},
methods: {
getOriginArr(){
this.$http
.get('/static/serviceedit.json')
.then(response => {
let data = response.data.data
this.origin_arr = data.origin_arr
})
.catch(function(response) {
});
},
removepic(){
this.$refs.servicepic.handleRemove()
},
onSubmit(formName) {
console.log('submit!');
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
getNewList(val) {
console.log(val);
this.form.fileList = ""
this.form.fileList = url.map((v,k)=>{
return v.url
}).join(';')
console.log(this.form.fileList)
}
}
};
</script>
<style>
.info_contain .el-input__inner{
background-color: #f7f8f9;
width: 1022px;
}
.info_contain .el-textarea__inner{
background-color: #f7f8f9;
width: 1022px;
}
.limitsd .timeslect .el-input__inner{
width: 150px;
border-radius: 0 8px 8px 0;
background-color: rgba(15, 38, 131, 1);
color: rgba(248, 249, 253, 1);
border: 0;
}
</style>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
}
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px;
position: relative;
}
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.formname{
color: #58617a;
}
.right{
float: right;
margin-left: 20px;
}
.removepic{
display: inline-block;
margin-top: -40px;
float: left;
margin-left: 180px;
width: 76px;
height: 32px;
background-color: #495feb;
border-radius: 8px;
line-height: 32px;
text-align: center;
color: #e6ebfe;
cursor: pointer;
}
.edit_change{
width: 100%;
border-bottom: 2px solid #f4f7fc;
overflow: hidden;
}
.edit_change_box{
width: 163px;
height: 48px;
line-height: 48px;
background-color: #e3e5ef;
border-radius: 8px;
color: #8890a7;
text-align: center;
float: left;
margin-right: 20px;
font-weight: 600;
margin-bottom: 25px;
font-size: 16px;
cursor: pointer;
}
.edit_change_box img{
vertical-align: -3px;
margin-right: 5px;
}
.safe_title{
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.safe_select{
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.safe_box_select{
padding: 30px 10px 10px 10px;
width: 100%;
height: 100%;
}
.openbgc{
width: 56px;
height: 23px;
background-image: url('../assets/imgs/btn_on_hov.png');
background-size:contain;
cursor: pointer;
}
.formtitle{
color: #58617a;
margin: 15px 0;
}
.savebtn{
position: absolute;
right: 20px;
bottom:20px;
width: 278px;
overflow: hidden;
}
.btnsty{
width: 124px;
height: 44px;
line-height: 44px;
background-color: rgba(195, 202, 248, 0.5);
border-radius: 8px;
color: rgba(15, 38, 131, 1);
text-align: center;
float: left;
margin-right: 30px;
cursor: pointer;
}
.savebtn .btnsty:nth-last-of-type(1){
margin-right: 0px;
background-color: rgba(15, 38, 131, 1);
color: rgba(248, 249, 253, 1);
}
.limitsd{
position: relative;
width: 1022px;
}
.limitsd .timeslect{
position: absolute;
right: 0;
}
</style>
src/pages/approval_app_detail.vue 0 → 100644
View file @ a0e27297
<template>
<div class="detail_contain">
<p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
<div class="info_contain">
<service-header
:data="service_header_arr"
@deploy="deploy"
@editapp="editapp"
@unline="unline"
@unsell="unsell"
></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr[now_user]"
:key="index + 1000"
class="type_select"
@click="now_service = index"
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list :list_arr="list_arr" v-if="now_service == 0">
<div class="appcode" v-html="appcode" slot="app_code"></div>
</info-list>
</div>
</div>
</div>
<dialog-action
ref="myConfirm"
:confirmOptions="tipsOptions"
></dialog-action>
</div>
</template>
<script>
import infoList from "../components/infoList";
import tableUm from "../components/table-um";
import serviceHeader from "../components/service-header";
import dialogAction from "@/components/dialog-action";
import uploadFile from "@/components/upload_file";
import { getRole } from "../utils/common";
export default {
components: {
infoList,
tableUm,
serviceHeader,
dialogAction,
uploadFile,
},
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
buy_style: 0,
oldpag_name: "镜像文件002.rar",
imgList: [],
imgList1: [],
form: {
name: "",
fileList: "",
taps: "",
},
fileList: "",
rules: {
name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
},
tipsOptions: {
title: "",
message: "",
btnSubmitText: "",
btnCancelText: "",
position: "",
},
service_arr: [
["基本信息", "运行状态"],
["基本信息", "运行状态"],
["基本信息", "运行状态","服务访问排名"],
],
service_header_arr: {
name: "",
first: [],
second: [],
bsdetail: true,
},
now_service: 0,
header_arr: [
{
prop: "jxmc",
label: "镜像名称",
minWidth: "33.33%",
align: "center",
},
{
prop: "bbh",
label: "版本号",
minWidth: "33.33%",
align: "center",
},
{
label: "操作",
type: "Button",
align: "center",
minWidth: "33.33%",
btnList: [
{
type: "actiondelete",
label: "删除",
},
],
},
],
list_arr: [
{
title: "应用简介：",
info: "",
},
{
title: "功能简介：",
info: "",
},
{
title: "应用场景：",
info: "",
},
{
title: "应用参数：",
info: "",
type: "solt",
solt_name: "app_code",
},
],
appcode: "",
addImageFlag: false,
};
},
watch: {},
created() {
this.now_user = this.$store.state.role;
getRole().then((data) => {
this.now_user = data;
this.$store.commit("rolefun", data);
this.getServiceInfo();
this.getServiceBaseInfo();
});
},
mounted() {},
methods: {
getNewList(val) {
console.log(val);
this.form.fileList = "";
this.form.fileList = url
.map((v, k) => {
return v.url;
})
.join(";");
console.log(this.form.fileList);
},
getNewList1(val) {
console.log(val);
this.fileList = "";
this.fileList = url
.map((v, k) => {
return v.url;
})
.join(";");
console.log(this.fileList);
},
addImage() {
this.addImageFlag = true;
},
actiondelete() {
this.tipsOptions = {
title: "",
message: "",
btnSubmitText: "",
btnCancelText: "",
position: "",
};
this.tipsOptions.message = "是否删除该数据";
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
deploy() {
console.log("0000");
},
editapp() {
console.log("11111");
},
unline(val) {
console.log(val);
this.tipsOptions = {
title: "",
message: "",
btnSubmitText: "",
btnCancelText: "",
position: "",
};
this.tipsOptions.message =
"该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。";
this.tipsOptions.btnSubmitText = "发送通知";
this.tipsOptions.position = "left";
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
unsell(val) {
console.log(val);
this.tipsOptions = {
title: "",
message: "",
btnSubmitText: "",
btnCancelText: "",
position: "",
};
this.tipsOptions.message =
"申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。";
this.tipsOptions.btnSubmitText = "发送通知";
this.tipsOptions.confirmSubmit = () => {
console.log("deleteItem - ");
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
getServiceInfo() {
this.$http
.get("/static/appdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.service_header_arr, "name", data.appInfo.name);
this.$set(this.service_header_arr, "first", data.appInfo.first);
this.$set(this.service_header_arr, "second", data.appInfo.second);
})
.catch(function(response) {});
},
getServiceBaseInfo() {
this.$http
.get("/static/appdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
this.appcode = data.appbaseinfo.appcode;
})
.catch(function(response) {});
},
},
};
</script>
<style>
.savebtn .el-button {
float: right;
margin-left: 20px;
letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1) {
background-color: #0f2683;
color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2) {
background-color: #c3caf8;
color: #0f2683;
}
</style>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
}
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px;
}
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.type_box {
width: 100%;
}
.type_title {
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.type_select {
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.type_box_select {
padding: 30px 10px 10px 10px;
width: 100%;
}
.savebtn {
margin-top: 50px;
overflow: hidden;
}
.appcode {
white-space: pre-wrap;
width: 100%;
background-color: #f8f9fd;
border-radius: 8px;
padding: 24px;
color: #58617a;
}
.addimage {
display: inline-block;
color: #f8f9fd;
font-size: 16px;
width: 124px;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #0f2683;
border-radius: 8px;
margin-top: 20px;
cursor: pointer;
}
</style>
src/pages/workPlace.vue
View file @ a0e27297
...@@ -201,6 +201,7 @@ ...@@ -201,6 +201,7 @@
> >
{{now_user == 0?'我的应用':'平台应用'}} {{now_user == 0?'我的应用':'平台应用'}}
<img <img
@click="gotoyy"
style="vertical-align:-9px;" style="vertical-align:-9px;"
src="../assets/imgs/home_btn_enter.png" src="../assets/imgs/home_btn_enter.png"
alt alt
...@@ -933,6 +934,9 @@ export default { ...@@ -933,6 +934,9 @@ export default {
}); });
}, },
methods: { methods: {
gotoyy(){
this.$router.push('/yygl/'+this.now_user)
},
gotofw(){ gotofw(){
this.$router.push('/fwgl/'+this.now_user) this.$router.push('/fwgl/'+this.now_user)
}, },
......
src/router/index.js
View file @ a0e27297
...@@ -81,6 +81,21 @@ export default new Router({ ...@@ -81,6 +81,21 @@ export default new Router({
name: "yyglList", name: "yyglList",
component: () => import("@/pages/yyglList"), component: () => import("@/pages/yyglList"),
}, },
{
path: "/yygldetail/:level/0", // 应用仓库详情
name: "appdetail",
component: () => import("@/pages/app_detail"),
},
{
path: "/yygledit/:level/0", // 应用仓库编辑
name: "appedit",
component: () => import("@/pages/app_edit"),
},
{
path: "/yyglapprovaldetail/:level/1", // 应用仓库编辑
name: "approval_app_detail",
component: () => import("@/pages/approval_app_detail"),
},
], ],
}, // 工作台 - 应用管理模块 }, // 工作台 - 应用管理模块
{ {
......
src/store/index.js
View file @ a0e27297
...@@ -4,7 +4,7 @@ Vue.use(Vuex); ...@@ -4,7 +4,7 @@ Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
role: 1, // 0：普通用户，1：组织管理员，2：超级管理员 role: 2, // 0：普通用户，1：组织管理员，2：超级管理员
serviceShopMenu: "shopDataList", // 服务超市侧边栏 serviceShopMenu: "shopDataList", // 服务超市侧边栏
fwglNav: [ fwglNav: [
["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户 ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户
......
static/appdetail.json 0 → 100644
View file @ a0e27297
{
"data":{
"appInfo":{
"name":"Mapvideos",
"pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
"first": [
{
"name": "在线状态",
"text": "平台应用"
},
{
"name": "应用类型",
"text": "业务应用"
},
{
"name": "业务领域",
"text": "应急领域"
}
],
"second": [
{
"name": "申请类型",
"text": "申请开发"
},
{
"name": "申请开发次数",
"text": "41次"
},
{
"name": "申请部署次数",
"text": "41次"
},
{
"name":"创建时间",
"text":"2019-11-28"
}
]
},
"appbaseinfo":{
"intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
"action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
"use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
"appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>"
}
}
}
\ No newline at end of file
static/data.json
View file @ a0e27297
...@@ -535,6 +535,13 @@ ...@@ -535,6 +535,13 @@
} }
], ],
"imagearr":[
{
"id":1,
"jxmc":"五五五五呜呜呜",
"bbh":"1.0.2"
}
],
"fhcstx": [ "fhcstx": [
{ {
"id": 1, "id": 1,
......
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