Skip to content

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

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents cd4915af 0089a728
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1046 additions and 74 deletions
src/assets/css/index.css
View file @ ddf702bf
......@@ -201,6 +201,9 @@ div{
color: #8890a7;
line-height: 24px!important;
}
.el-tabs__nav-scroll .el-tabs__item {
line-height: 40px!important;
}
.el-tabs__item:hover {
color: #687087;
......
src/components/commodity.vue
View file @ ddf702bf
......@@ -119,7 +119,9 @@ export default {
}),
computed: {},
watch: {},
methods: {},
methods: {
handleChange() {}
},
mounted() {}
};
</script>
......
src/components/dialog-action.vue 0 → 100644
View file @ ddf702bf
<template>
<transition name="mask-bg-fade">
<el-dialog
:visible.sync="show"
width="400px"
top="25vh"
class="user-dialog"
>
<span slot="title">
<b class="iconLeft"></b>
<span style=" display: inline-block;vertical-align: middle;">
{{ confirmOptions.title || "提示" }}
</span>
</span>
<span>{{ confirmOptions.message || "" }}</span>
<span slot="footer" class="dialog-footer">
<el-button
class="form_c"
type="defalut"
size="mini"
@click="hideModel"
>{{ confirmOptions.btnCancelText || "取消" }}</el-button
>
<el-button
class="form_t"
type="primary"
size="mini"
@click="confirmSubmit"
>{{ confirmOptions.btnSubmitText || "确定" }}</el-button
>
</span>
</el-dialog>
</transition>
</template>
<script>
export default {
name: "dialogAction",
props: {
confirmOptions: {
type: Object,
default: () => ({}),
},
},
data() {
return {
show: false,
};
},
methods: {
showModel() {
this.show = true;
},
hideModel() {
this.show = false;
},
confirmSubmit() {
typeof this.confirmOptions.confirmSubmit === "function" &&
this.confirmOptions.confirmSubmit();
},
},
};
</script>
<style>
.el-dialog__header {
border-bottom: 1px solid #edf0ff;
padding: 20px 20px 16px !important;
font-family: "MicrosoftYaHei";
font-size: 16px;
color: #1d1e20;
font-weight: 800;
}
.el-dialog__header .iconLeft {
width: 4px;
height: 16px;
background-color: #0367f6;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
margin-right: 3px;
}
.el-icon-close:before {
font-weight: 800 !important;
}
.el-dialog__body {
padding: 49px 20px !important;
}
</style>
<style scoped>
.group-dialog.el-dialog__wrapper {
width: 100% !important;
left: 0 !important;
overflow: hidden;
}
.user-dialog {
overflow: hidden;
}
</style>
src/components/servive-info.vue 0 → 100644
View file @ ddf702bf
This diff is collapsed.
src/components/servive-step.vue 0 → 100644
View file @ ddf702bf
<template>
<div class="service_step">
<div class="step_bg"></div>
<ul class="step_items">
<li class="step_item">
<div class="step_icon">
<span>1</span>
</div>
<p class="step_title">服务申请</p>
</li>
<li class="step_item">
<div class="step_icon">
<span>2</span>
</div>
<p class="step_title">审核确认</p>
</li>
<li class="step_item">
<div class="step_icon">
<span>3</span>
</div>
<p class="step_title">费用支付</p>
</li>
<li class="step_item">
<div class="step_icon">
<span>4</span>
</div>
<p class="step_title">服务获取</p>
</li>
</ul>
</div>
</template>
<style scoped>
.service_step {
position: relative;
min-height: 48px;
}
.service_step > .step_bg {
position: absolute;
top: 23px;
right: 24px;
left: 24px;
border: 1px solid #1abc9c;
}
.service_step > .step_items {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-start;
text-align: center;
}
.service_step .step_item > .step_icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #1abc9c;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: bold;
color: #fff;
}
.service_step .step_item > .step_title {
font-size: 12px;
line-height: 24px;
color: #1abc9c;
}
</style>
src/components/side-nav-bar.vue
View file @ ddf702bf
......@@ -9,14 +9,16 @@
<span v-text="title"></span>
</h3>
<ul class="side_nav_bar_list">
<li
<router-link
tag="li"
active-class="current"
v-for="(nav, index) in navList"
:class="{ current: $route.path.indexOf(nav.path) > -1 }"
:key="'nav' + index"
@click="navAction(nav)"
:to="nav.path"
>
<span v-text="nav.name"></span>
</li>
</router-link>
</ul>
</div>
</template>
......@@ -39,9 +41,6 @@ export default {
},
},
methods: {
navAction(nav) {
this.$router.push(nav.path);
},
titleAction() {
if (this.titlePath) {
this.$router.push(this.titlePath);
......
src/components/table-um.vue
View file @ ddf702bf
......@@ -115,15 +115,17 @@
<span v-if="item.type === 'Button'">
<b v-for="(btn, key) in item.btnList" :key="key">
<em
class="action"
v-if="btn.label == '分配'||btn.label == '已分配'"
>
<em v-if="btn.label == '分配'&&scope.row.state == 0" style="color: #0f2683" @click="handleClick(btn.type, scope.row)">{{ btn.label }}</em>
<em v-if="btn.label == '已分配'&&scope.row.state == 1">{{ btn.label }}</em>
</em>
<em
class="action"
v-else
:class="btn.type"
style="color: #0f2683"
:style="{color: btn.label=='删除' ? '#830f53' : '#0f2683'}"
@click="handleClick(btn.type, scope.row)"
>{{ btn.label }}</em>
<em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em>
......@@ -601,6 +603,10 @@ export default {
}
em {
font-style: normal;
user-select: none;
}
em.action {
cursor: pointer;
}
.ces-table .el-table--mini td,
.ces-table .el-table--mini th {
......
src/pages/example_commodity.vue
View file @ ddf702bf
......@@ -2,7 +2,10 @@
<div class="com_ex">
<block-radius>
<h3>按原型大致做了一下，调优等后续</h3>
<Commodity :datas="datas" />
<servive-info></servive-info>
</block-radius>
</div>
</template>
......@@ -11,10 +14,12 @@
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info";
export default {
components: {
Commodity,
BlockRadius
BlockRadius,
serviveInfo,
},
data: () => ({
datas: {
......@@ -24,19 +29,18 @@ export default {
updated: "2020-03-12 18:31:12",
dataField: "经济建设",
serviceType: "综合应用服务",
resourceSummary:
"提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
openLevel: "共享",
views: "99999",
numberOfAcquisitions: "99999",
specifications:
"用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
}
specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
},
}),
mounted() {},
methods: {}
methods: {},
};
</script>
<style scoped>
.com_ex {
margin-top: 100px;
......
src/pages/fwgl.vue
View file @ ddf702bf
<template>
<div class="fwgl_container">
<side-nav-bar :nav-list="navList" title-path="/fwgl"></side-nav-bar>
<side-nav-bar :nav-list="navList" :title-path="navList[0].path"></side-nav-bar>
<div class="main_container">
<router-view
:key="'type_' + $route.params && $route.params.type"
......
src/pages/fwglList.vue
View file @ ddf702bf
......@@ -8,37 +8,47 @@
<ces-table
class="r_yhgl_table"
size="mini"
url="tableData"
detailsUrl="/fwgl/servicedetail/"
:border="false"
:headers="headers"
url="tableData"
:searchShow="true"
:autoAdd="false"
:isDialog="true"
:confirmOptions="confirmOptions"
detailsUrl="/fwgl/servicedetail/"
@primary-edit="editItem"
@sold-out="soldOutItem"
:emptyText="emptyText"
:stripe="true"
:pageSizeShow="true"
:filterList="filterList"
:isIndex="false"
@action-delete="deleteItem"
@action-edit="editItem"
@action-sold-out="soldOutItem"
@action-cancel="cancelItem"
@action-examine="examineItem"
@action-detail="detailItem"
></ces-table>
</div>
<dialog-action
ref="myConfirm"
:confirm-options="confirmOptions"
></dialog-action>
</div>
</template>
<script>
import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
export default {
data: () => ({
headers: [],
url: "",
detailsUrl: "ss/",
confirmOptions: {
title: "提示", //提示
message: "确认删除该条数据？", //""
btnCancelText: "取消", //取消
btnSubmitText: "确定", //确定
title: "",
message: "",
btnCancelText: "",
btnSubmitText: "",
item: null,
},
emptyText: "暂时没数据",
filterList: [
......@@ -79,55 +89,95 @@ export default {
}),
components: {
cesTable,
dialogAction,
},
methods: {
deleteItem(item) {
this.confirmOptions.title = "";
this.confirmOptions.message = "是否删除该条服务？";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "";
this.confirmOptions.confirmSubmit = () => {
console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
editItem(item) {
this.$router.push("/fwgl/serviceedit/" + item.id);
},
soldOutItem(item) {
console.log(item);
this.confirmOptions.title = "是否删除该条服务？";
this.confirmOptions.message =
"下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "发送通知";
this.confirmOptions.confirmSubmit = () => {
console.log("soldOutItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
this.$refs.myConfirm.showModel();
},
cancelItem(item) {
console.log("cancelItem - " + item.name);
},
examineItem(item) {
console.log("examineItem - " + item.name);
},
detailItem(item) {
console.log("detailItem - " + item.name);
},
confirmSubmit(item) {
console.log(item.name);
},
},
mounted() {
this.headers = [];
this.headers.push(
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务url", prop: "date", type: "href", align: "center" },
{ label: "开放程度", prop: "address", type: "href", align: "center" },
{ label: "服务描述", prop: "address", type: "href", align: "left" },
{ label: "注册发布时间", prop: "address", type: "href", align: "center" },
{ label: "服务类型", prop: "address", type: "href", align: "center" }
);
switch (parseInt(this.$route.params.type)) {
case 0:
this.headers.push({
this.headers = [
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务url", prop: "date", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{
label: "注册发布时间",
prop: "address",
type: "",
align: "center",
},
{ label: "服务类型", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 240,
btnList: [
{
type: "primary-edit",
type: "action-edit",
label: "编辑",
line: "|",
},
{
type: "sold-out",
type: "action-sold-out",
label: "申请下架",
line: "|",
},
{
type: "primary-del",
type: "action-delete",
label: "删除",
},
],
});
},
];
break;
case 1:
this.headers.push(
{ label: "申请状态", prop: "address", type: "href", align: "center" },
this.headers = [
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务领域", prop: "date", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{ label: "申请时间", prop: "address", type: "", align: "left" },
{ label: "服务类型", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
......@@ -135,22 +185,28 @@ export default {
width: 160,
btnList: [
{
type: "sold-out",
type: "action-cancel",
label: "取消",
line: "|",
},
{
type: "primary-del",
type: "action-delete",
label: "删除",
},
],
}
);
},
];
break;
case 2:
this.headers.push(
{ label: "审批时间", prop: "address", type: "href", align: "center" },
{ label: "审批状态", prop: "address", type: "href", align: "center" },
this.headers = [
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务领域", prop: "address", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "请求方式", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{ label: "审批时间", prop: "address", type: "", align: "center" },
{ label: "服务类型", prop: "address", type: "", align: "center" },
{ label: "审批状态", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
......@@ -158,17 +214,78 @@ export default {
width: 160,
btnList: [
{
type: "sold-out",
type: "action-examine",
label: "审批",
line: "|",
},
{
type: "primary-del",
type: "action-delete",
label: "删除",
},
],
}
);
},
];
break;
case 3:
this.headers = [
{ label: "工作区域", prop: "name", type: "href", align: "left" },
{ label: "网络环境", prop: "name", type: "", align: "center" },
{ label: "CPU（核）", prop: "name", type: "", align: "center" },
{ label: "内存（GB）", prop: "name", type: "", align: "center" },
{ label: "资源总量（GB）", prop: "name", type: "", align: "center" },
{ label: "实例数（个）", prop: "name", type: "", align: "center" },
{ label: "申请时间", prop: "name", type: "", align: "center" },
{ label: "申请状态", prop: "name", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "action-detail",
label: "查看详情",
},
],
},
];
break;
default:
this.headers = [
{ label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "服务url", prop: "date", type: "", align: "center" },
{ label: "开放程度", prop: "address", type: "", align: "center" },
{ label: "服务描述", prop: "address", type: "", align: "left" },
{
label: "注册发布时间",
prop: "address",
type: "",
align: "center",
},
{ label: "服务类型", prop: "address", type: "", align: "center" },
{
label: "操作",
type: "Button",
align: "center",
width: 160,
btnList: [
{
type: "action-edit",
label: "编辑",
line: "|",
},
{
type: "action-sold-out",
label: "申请下架",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
break;
}
},
......
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