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
Hide 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{ ...@@ -201,6 +201,9 @@ div{
color: #8890a7; color: #8890a7;
line-height: 24px!important; line-height: 24px!important;
} }
.el-tabs__nav-scroll .el-tabs__item {
line-height: 40px!important;
}
.el-tabs__item:hover { .el-tabs__item:hover {
color: #687087; color: #687087;
......
src/components/commodity.vue
View file @ ddf702bf
...@@ -119,7 +119,9 @@ export default { ...@@ -119,7 +119,9 @@ export default {
}), }),
computed: {}, computed: {},
watch: {}, watch: {},
methods: {}, methods: {
handleChange() {}
},
mounted() {} mounted() {}
}; };
</script> </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
<template>
<el-tabs
v-model="serviceTabsActiveName"
type="card"
@tab-click="handleClick"
:stretch="true"
style="margin-top: 20px;"
>
<el-tab-pane label="服务详情信息" name="first">
<ul class="service_info">
<li
class="fwxqxx_item"
v-for="(item, index) in fwxqxxDatas"
:key="'fwxqxx_' + index"
>
<h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
<servive-step
v-if="item.type == 'step'"
style="margin: 0 20px;"
></servive-step>
<p
v-else-if="item.type == 'text'"
class="fwxqxx_text"
v-text="item.value"
></p>
<ul v-else-if="item.type == 'list'">
<li
v-for="(v, i) in item.value"
:key="'fwxqxx_li_' + index + '_' + i"
>
<p class="fwxqxx_text">
<span v-text="v.name + '：'"></span>
<span v-text="v.value"></span>
</p>
</li>
</ul>
<el-table
v-else-if="item.type == 'table'"
class="fwxqxx_table"
:data="item.value.datas"
border
>
<el-table-column
type="index"
:index="(index) => index + 1"
align="center"
>
</el-table-column>
<el-table-column
v-for="(v, i) in item.value.columns"
:key="'table_column_' + index + '_' + i"
:prop="v.prop"
:label="v.label"
:align="v.align || 'left'"
></el-table-column>
</el-table>
<el-table
v-else-if="item.type == 'table2'"
class="fwxqxx_table fwxqxx_table_2"
:data="item.value.datas"
border
>
<el-table-column prop="name" label="" align="right" width="200">
<template slot-scope="scope">
<span v-text="scope.row.name + '：'"></span>
</template>
</el-table-column>
<el-table-column prop="value" label="">
<template slot-scope="scope">
<pre
v-if="scope.row.type == 'code'"
v-html="scope.row.value"
></pre>
<span v-else v-text="scope.row.value"></span>
</template>
</el-table-column>
</el-table>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="规格定价" name="second">
<div class="service_info">
<div class="ggdj_header">
<span>购买方式：</span>
<el-button-group>
<el-button type="danger">
按月
</el-button>
<el-button type="default">
按年
</el-button>
</el-button-group>
</div>
<el-table class="ggdj_table" :data="ggdjData" border>
<el-table-column prop="gg" label="规格"></el-table-column>
<el-table-column prop="ggsm" label="规格说明"></el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="提供机构" name="third">
<div class="service_info">
<p class="tgjg_dw" v-text="tgjgData.name"></p>
<div class="tgjg_img">
<img :src="tgjgData.img" width="100%" />
</div>
<div class="tgjg_lxfs">
<p>联系人：<span v-text="tgjgData.lxr"></span></p>
<p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth">
<div class="service_info">
<div class="fwpjxx_score">
<div class="fwpjxx_score_left">
<p v-text="ffpjxxData.baseInfo.score + '分'"></p>
<p>满分5分</p>
<p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
</div>
<ul class="fwpjxx_score_right">
<li
class="fwpjxx_score_item"
v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
:key="'star_info_' + index"
>
<el-rate
:value="item.star"
disabled
text-color="#ff9900"
score-template="{value}"
>
</el-rate>
<el-progress
:percentage="item.percent"
:show-text="false"
></el-progress>
</li>
</ul>
</div>
<ul class="fwpjxx_items">
<li
class="fwpjxx_item"
v-for="(item, index) in ffpjxxData.ffpjxxList"
:key="'fwpjxx_' + index"
>
<el-avatar :size="60" :src="item.img"> </el-avatar>
<div class="fwpjxx_content">
<p>
<span v-text="item.name"></span>
<el-rate
:value="item.star"
disabled
text-color="#ff9900"
score-template="{value}"
>
</el-rate>
<span v-text="item.time"></span>
</p>
<p v-text="item.description"></p>
</div>
</li>
</ul>
<div class="fwpjxx_pages">
<el-pagination
background
layout="prev, pager, next"
:page-size="10"
:total="ffpjxxData.baseInfo.total"
></el-pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveStep from "@/components/servive-step";
export default {
components: {
Commodity,
BlockRadius,
serviveStep,
},
data: () => ({
serviceTabsActiveName: "first",
fwxqxxDatas: [
{
name: "获取流程",
type: "step",
},
{
name: "服务说明",
type: "text",
value:
"提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务",
},
{
name: "服务属性",
type: "list",
value: [
{
name: "大小",
value: "66kb",
},
{
name: "API",
value: "Java",
},
{
name: "用途",
value: "即用型",
},
{
name: "空间范围（WGS84）",
value: "未设置",
},
{
name: "标签",
value: "T003 智能地图 T001",
},
{
name: "制作单位",
value: "应急管理厅",
},
{
name: "离线模式",
value: "禁用",
},
{
name: "附加代码",
value: "无",
},
],
},
{
name: "字段说明",
type: "table",
value: {
datas: [
{
zdmc: "排名",
zdbm: "grade",
zdlx: "string",
zdms: "企业水路货物周转量排名",
slz: "1",
},
{
zdmc: "同比增长",
zdbm: "increase",
zdlx: "string",
zdms: "同比增长量信息",
slz: '"100%"',
},
],
columns: [
{
prop: "zdmc",
label: "字段名称",
},
{
prop: "zdbm",
label: "字段编码",
align: "center",
},
{
prop: "zdlx",
label: "字段类型",
align: "center",
},
{
prop: "zdms",
label: "字段描述",
},
{
prop: "slz",
label: "示例值",
align: "center",
},
],
},
},
{
name: "接口详情信息",
type: "table2",
value: {
datas: [
{
name: "接口地址",
value: "/cigservice/baseservice/fillder/turnover",
type: "text",
},
{
name: "请求方式",
value: "GET",
type: "text",
},
{
name: "编码格式",
value: "UTF-8",
type: "text",
},
{
name: "接口编码",
value: "turnover",
type: "text",
},
{
name: "接口描述",
value: "水路货运周转量排名",
type: "text",
},
{
name: "请求参数",
value: "无请求参数",
type: "text",
},
{
name: "响应参数",
value: "无响应参数",
type: "text",
},
{
name: "响应示例",
value: `
{
success: 1,
data: [
{
data: [
{
grade: "19",
increase: "100%"
}
],
column: [
{
title: "排名",
key: "grade"
},
{
title: "同比增长",
key: "increase"
},
],
},
],
}
`,
type: "code",
},
{
name: "请求示例NodeJs",
value: `
var http = require("http");
var options = {
"method": "GET",
"hostname": "www.giscloud.cx",
"port": "80",
"path": "/cigservice/baseservice/fillder/turnover",
"headers": {
"Content-Type":"application/x-www-form-urlencoded",
"charset":"utf-8"
}
};
var req = http.request(options, function (res) {
var chunks = [];
res.on("data", function (chunk) {
chunks.push(chunk);
});
res.on("end", function () {
var body = Buffer.concat(chunks);
console.log(body.toString());
});
});
req.end();
`,
type: "code",
},
],
},
},
{
name: "微服务响应列表",
type: "table",
value: {
datas: [
{
name: "apaas-mapvideos",
description: "地图视频融合应用服务",
},
{
name: "apaas-mapvideos",
description: "地图视频融合应用服务",
},
],
columns: [
{
prop: "name",
label: "*微服务名称",
},
{
prop: "description",
label: "微服务描述",
align: "center",
},
],
},
},
], // 服务详情信息
ggdjData: [
{
gg: "访问次数：20/日 访问量：100/日",
ggsm:
"用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
},
{
gg: "访访问次数：200/日 访问量：1000/日",
ggsm:
"用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。",
},
{
gg: "访问次数：无上限 访问量",
ggsm: "",
},
], // 规格定价
tgjgData: {
name: "贵州省交通运输厅",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
lxr: "张先生",
lxdh: "010-66666666",
}, // 提供机构
ffpjxxData: {
baseInfo: {
score: 3.5,
total: 23,
starInfo: [
{
star: 5,
percent: 40,
},
{
star: 4,
percent: 30,
},
{
star: 3,
percent: 20,
},
{
star: 2,
percent: 10,
},
{
star: 1,
percent: 0,
},
],
},
ffpjxxList: [
{
name: "禺彊",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 5,
description: "这个应用非常实用，可以应用到多个业务领域！",
time: " 2019-12-12",
},
{
name: "海纳",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 5,
description:
"赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
{
name: "左宜",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
star: 3,
description: "赞！",
time: " 2019-12-12",
},
],
}, // 服务评价信息
}),
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
},
mounted() {},
};
</script>
<style scoped>
.service_info {
width: 80%;
padding: 10px 20px;
margin: 0 auto;
box-sizing: border-box;
background-color: #eee;
}
.service_info .fwxqxx_item {
margin-bottom: 20px;
}
.service_info .fwxqxx_item > .fwxqxx_title {
font-size: 13px;
font-weight: bold;
line-height: 20px;
margin-bottom: 5px;
}
.service_info .fwxqxx_item > .fwxqxx_text {
font-size: 16px;
line-height: 24px;
color: #333;
}
.service_info .fwxqxx_item > .fwxqxx_table {
width: 100%;
}
.service_info .ggdj_header {
margin-bottom: 10px;
}
.service_info .ggdj_table {
width: 100%;
}
.service_info .tgjg_dw {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px;
}
.service_info .tgjg_img {
width: 400px;
margin-bottom: 10px;
}
.service_info .tgjg_lxfs {
font-size: 16px;
line-height: 24px;
}
.service_info .fwpjxx_score {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 10px 0;
}
.service_info .fwpjxx_score > .fwpjxx_score_left {
flex-shrink: 0;
margin-right: 20px;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
font-size: 32px;
font-weight: bold;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
font-size: 14px;
color: #333;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
font-size: 18px;
color: #ccc;
}
.service_info .fwpjxx_score > .fwpjxx_score_right {
flex-grow: 1;
}
.service_info .fwpjxx_score_item {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 480px;
}
.service_info .fwpjxx_score_item > .el-progress {
flex-grow: 1;
margin-left: 10px;
}
.service_info .fwpjxx_item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
}
.service_info .fwpjxx_item > .el-avatar {
flex-shrink: 0;
margin-right: 20px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
display: inline-flex;
justify-content: flex-start;
align-items: center;
font-size: 18px;
color: #999;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
margin: 0 60px 0 30px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
font-size: 18px;
color: #666;
}
.service_info .fwpjxx_pages {
text-align: center;
margin: 20px 0 10px;
}
</style>
<style>
.fwpjxx_score_item .el-progress-bar__outer {
background: #fff;
}
.fwxqxx_table_2 .el-table__header-wrapper {
display: none;
}
</style>
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 @@ ...@@ -9,14 +9,16 @@
<span v-text="title"></span> <span v-text="title"></span>
</h3> </h3>
<ul class="side_nav_bar_list"> <ul class="side_nav_bar_list">
<li <router-link
tag="li"
active-class="current"
v-for="(nav, index) in navList" v-for="(nav, index) in navList"
:class="{ current: $route.path.indexOf(nav.path) > -1 }" :class="{ current: $route.path.indexOf(nav.path) > -1 }"
:key="'nav' + index" :key="'nav' + index"
@click="navAction(nav)" :to="nav.path"
> >
<span v-text="nav.name"></span> <span v-text="nav.name"></span>
</li> </router-link>
</ul> </ul>
</div> </div>
</template> </template>
...@@ -39,9 +41,6 @@ export default { ...@@ -39,9 +41,6 @@ export default {
}, },
}, },
methods: { methods: {
navAction(nav) {
this.$router.push(nav.path);
},
titleAction() { titleAction() {
if (this.titlePath) { if (this.titlePath) {
this.$router.push(this.titlePath); this.$router.push(this.titlePath);
......
src/components/table-um.vue
View file @ ddf702bf
...@@ -115,15 +115,17 @@ ...@@ -115,15 +115,17 @@
<span v-if="item.type === 'Button'"> <span v-if="item.type === 'Button'">
<b v-for="(btn, key) in item.btnList" :key="key"> <b v-for="(btn, key) in item.btnList" :key="key">
<em <em
class="action"
v-if="btn.label == '分配'||btn.label == '已分配'" 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 == 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 v-if="btn.label == '已分配'&&scope.row.state == 1">{{ btn.label }}</em>
</em> </em>
<em <em
class="action"
v-else v-else
:class="btn.type" :class="btn.type"
style="color: #0f2683" :style="{color: btn.label=='删除' ? '#830f53' : '#0f2683'}"
@click="handleClick(btn.type, scope.row)" @click="handleClick(btn.type, scope.row)"
>{{ btn.label }}</em> >{{ btn.label }}</em>
<em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em> <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em>
...@@ -601,6 +603,10 @@ export default { ...@@ -601,6 +603,10 @@ export default {
} }
em { em {
font-style: normal; font-style: normal;
user-select: none;
}
em.action {
cursor: pointer;
} }
.ces-table .el-table--mini td, .ces-table .el-table--mini td,
.ces-table .el-table--mini th { .ces-table .el-table--mini th {
......
src/pages/example_commodity.vue
View file @ ddf702bf
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<div class="com_ex"> <div class="com_ex">
<block-radius> <block-radius>
<h3>按原型大致做了一下，调优等后续</h3> <h3>按原型大致做了一下，调优等后续</h3>
<Commodity :datas="datas" /> <Commodity :datas="datas" />
<servive-info></servive-info>
</block-radius> </block-radius>
</div> </div>
</template> </template>
...@@ -11,10 +14,12 @@ ...@@ -11,10 +14,12 @@
// @ is an alias to /src // @ is an alias to /src
import Commodity from "@/components/commodity.vue"; import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius"; import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info";
export default { export default {
components: { components: {
Commodity, Commodity,
BlockRadius BlockRadius,
serviveInfo,
}, },
data: () => ({ data: () => ({
datas: { datas: {
...@@ -24,22 +29,21 @@ export default { ...@@ -24,22 +29,21 @@ export default {
updated: "2020-03-12 18:31:12", updated: "2020-03-12 18:31:12",
dataField: "经济建设", dataField: "经济建设",
serviceType: "综合应用服务", serviceType: "综合应用服务",
resourceSummary: resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
"提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
openLevel: "共享", openLevel: "共享",
views: "99999", views: "99999",
numberOfAcquisitions: "99999", numberOfAcquisitions: "99999",
specifications: specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
"用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问" },
}
}), }),
mounted() {}, mounted() {},
methods: {} methods: {},
}; };
</script> </script>
<style scoped> <style scoped>
.com_ex { .com_ex {
margin-top: 100px; margin-top: 100px;
padding: 20px; padding: 20px;
} }
</style> </style>
\ No newline at end of file
src/pages/fwgl.vue
View file @ ddf702bf
<template> <template>
<div class="fwgl_container"> <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"> <div class="main_container">
<router-view <router-view
:key="'type_' + $route.params && $route.params.type" :key="'type_' + $route.params && $route.params.type"
......
src/pages/fwglList.vue
View file @ ddf702bf
...@@ -8,37 +8,47 @@ ...@@ -8,37 +8,47 @@
<ces-table <ces-table
class="r_yhgl_table" class="r_yhgl_table"
size="mini" size="mini"
url="tableData"
detailsUrl="/fwgl/servicedetail/"
:border="false" :border="false"
:headers="headers" :headers="headers"
url="tableData"
:searchShow="true" :searchShow="true"
:autoAdd="false" :autoAdd="false"
:isDialog="true"
:confirmOptions="confirmOptions"
detailsUrl="/fwgl/servicedetail/"
@primary-edit="editItem"
@sold-out="soldOutItem"
:emptyText="emptyText" :emptyText="emptyText"
:stripe="true" :stripe="true"
:pageSizeShow="true" :pageSizeShow="true"
:filterList="filterList" :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> ></ces-table>
</div> </div>
<dialog-action
ref="myConfirm"
:confirm-options="confirmOptions"
></dialog-action>
</div> </div>
</template> </template>
<script> <script>
import cesTable from "@/components/table-um"; import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
export default { export default {
data: () => ({ data: () => ({
headers: [], headers: [],
url: "", url: "",
detailsUrl: "ss/", detailsUrl: "ss/",
confirmOptions: { confirmOptions: {
title: "提示", //提示 title: "",
message: "确认删除该条数据？", //"" message: "",
btnCancelText: "取消", //取消 btnCancelText: "",
btnSubmitText: "确定", //确定 btnSubmitText: "",
item: null,
}, },
emptyText: "暂时没数据", emptyText: "暂时没数据",
filterList: [ filterList: [
...@@ -79,55 +89,95 @@ export default { ...@@ -79,55 +89,95 @@ export default {
}), }),
components: { components: {
cesTable, cesTable,
dialogAction,
}, },
methods: { 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) { editItem(item) {
this.$router.push("/fwgl/serviceedit/" + item.id); this.$router.push("/fwgl/serviceedit/" + item.id);
}, },
soldOutItem(item) { 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() { 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)) { switch (parseInt(this.$route.params.type)) {
case 0: case 0:
this.headers.push({ this.headers = [
label: "操作", { label: "服务名称", prop: "name", type: "href", align: "left" },
type: "Button", { label: "服务url", prop: "date", type: "", align: "center" },
align: "center", { label: "开放程度", prop: "address", type: "", align: "center" },
width: 240, { label: "服务描述", prop: "address", type: "", align: "left" },
btnList: [ {
{ label: "注册发布时间",
type: "primary-edit", prop: "address",
label: "编辑", type: "",
line: "|", align: "center",
}, },
{ { label: "服务类型", prop: "address", type: "", align: "center" },
type: "sold-out", {
label: "申请下架", label: "操作",
line: "|", type: "Button",
}, align: "center",
{ width: 240,
type: "primary-del", btnList: [
label: "删除", {
}, type: "action-edit",
], label: "编辑",
}); line: "|",
},
{
type: "action-sold-out",
label: "申请下架",
line: "|",
},
{
type: "action-delete",
label: "删除",
},
],
},
];
break; break;
case 1: case 1:
this.headers.push( this.headers = [
{ label: "申请状态", prop: "address", type: "href", align: "center" }, { 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: "操作", label: "操作",
type: "Button", type: "Button",
...@@ -135,22 +185,28 @@ export default { ...@@ -135,22 +185,28 @@ export default {
width: 160, width: 160,
btnList: [ btnList: [
{ {
type: "sold-out", type: "action-cancel",
label: "取消", label: "取消",
line: "|", line: "|",
}, },
{ {
type: "primary-del", type: "action-delete",
label: "删除", label: "删除",
}, },
], ],
} },
); ];
break; break;
case 2: case 2:
this.headers.push( this.headers = [
{ label: "审批时间", prop: "address", type: "href", align: "center" }, { label: "服务名称", prop: "name", type: "href", align: "left" },
{ label: "审批状态", prop: "address", type: "href", align: "center" }, { 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: "操作", label: "操作",
type: "Button", type: "Button",
...@@ -158,17 +214,78 @@ export default { ...@@ -158,17 +214,78 @@ export default {
width: 160, width: 160,
btnList: [ btnList: [
{ {
type: "sold-out", type: "action-examine",
label: "审批", label: "审批",
line: "|", 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: "删除", label: "删除",
}, },
], ],
} },
); ];
break; 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