Skip to content

A
apaas-ui
Commit c3a530db authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

数据+时空+表格超长缩进+select

parent 14ead145
Hide whitespace changes
Inline Side-by-side
Showing with 380 additions and 143 deletions
src/assets/css/index.css
View file @ c3a530db
...@@ -139,32 +139,10 @@ div{ ...@@ -139,32 +139,10 @@ div{
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #edf0ff; border-bottom: 1px solid #edf0ff;
} }
.r_yhgl { .padding_table {
background: #fff;
border-radius: 8px;
box-shadow: 0px 3px 6px 0px #f4f7fc;
}
.r_yhgl_table {
padding: 0 20px; padding: 0 20px;
} }
/* 设置抽屉的样式 */ /* 设置抽屉的样式 */
.user-dialog,
.r_yhgl .el-dialog__wrapper{
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 999;
}
.r_yhgl .el-drawer{
height: calc(100% - 134px)!important;
top: 114px!important;
outline: none!important;
border-radius: 8px;
}
.r_yhgl .el-drawer.rtl{
right: 20px;
}
.el-drawer__header{ .el-drawer__header{
display: none; display: none;
} }
...@@ -457,4 +435,20 @@ width: 620px!important; ...@@ -457,4 +435,20 @@ width: 620px!important;
} }
.el-popper[x-placement^=top] .popper__arrow::after { .el-popper[x-placement^=top] .popper__arrow::after {
border-top-color: transparent; border-top-color: transparent;
}
/* 单选激活样式 */
.el-radio__input.is-checked .el-radio__inner {
border-color: #838383;
background-color: #fff;
}
.el-radio__input.is-checked+.el-radio__label {
color: #1a2236;
font-weight: 700;
}
.el-radio__inner::after {
width: 8px;
height: 8px;
}
.el-radio__input.is-checked .el-radio__inner::after {
background-color: #e56600;
} }
\ No newline at end of file
src/components/codes.vue
View file @ c3a530db
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
mounted() { mounted() {
this.aceEditor = ace.edit(this.$refs.ace, { this.aceEditor = ace.edit(this.$refs.ace, {
maxLines: 40, maxLines: 36,
minLines: 10, minLines: 10,
fontSize: 14, fontSize: 14,
mode: this.acemodePath, mode: this.acemodePath,
...@@ -60,9 +60,9 @@ export default { ...@@ -60,9 +60,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ace-container { .ace-container {
width: 60%; width: 100%;
height: 629px; height: 633px !important;
margin: 50px; border-radius: 8px;
} }
</style> </style>
<style> <style>
......
src/components/table-um.vue
View file @ c3a530db
...@@ -92,11 +92,17 @@ ...@@ -92,11 +92,17 @@
:couldNotEdit="couldNotEdit" :couldNotEdit="couldNotEdit"
@changeInputValue="changeInputValue" @changeInputValue="changeInputValue"
></v-apaas-table-select> ></v-apaas-table-select>
<!-- 其他 --> <!-- popover -->
<span <el-popover
v-else v-else-if="item.type==='popover'"
:class="scope.row.spec && scope.row.spec.disable && scope.row.spec.disable == true? 'disture':'disfail'" placement="top-start"
>{{scope.row[item.prop]}}</span> trigger="hover"
:content="scope.row[item.prop]"
>
<span slot="reference" class="overlit">{{scope.row[item.prop]}}</span>
</el-popover>
<!-- others -->
<span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -322,7 +328,7 @@ export default { ...@@ -322,7 +328,7 @@ export default {
// console.log(this.emptyText); // console.log(this.emptyText);
// the if statement is to choose which data could be show, only used for test and template // the if statement is to choose which data could be show, only used for test and template
this.selectedTabsPage = []; this.selectedTabsPage = [];
this.pagination.total = this.selectedTabsPage.length; this.pagination.total = 0;
if (this.autoAdd) { if (this.autoAdd) {
this.addRow(); this.addRow();
} }
...@@ -350,6 +356,7 @@ export default { ...@@ -350,6 +356,7 @@ export default {
.get(this.all_url) .get(this.all_url)
.then(response => { .then(response => {
let newArr = response.data.data[this.url]; let newArr = response.data.data[this.url];
// if it is true url, total is response's total
let total = newArr.length; let total = newArr.length;
resolve({ newArr, total }); resolve({ newArr, total });
}) })
...@@ -547,12 +554,6 @@ em { ...@@ -547,12 +554,6 @@ em {
.chName[x-placement^="top"] .popper__arrow::after { .chName[x-placement^="top"] .popper__arrow::after {
border-top-color: #5c82ff !important; border-top-color: #5c82ff !important;
} }
.ces-table .disfail {
color: #58617a !important;
}
.ces-table .disture {
color: #bcc1d0 !important;
}
.el-table__row--striped td { .el-table__row--striped td {
background: #f8f9fd !important; background: #f8f9fd !important;
} }
...@@ -605,4 +606,9 @@ em { ...@@ -605,4 +606,9 @@ em {
.table_radius { .table_radius {
border-radius: 10px; border-radius: 10px;
} }
.overlit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style> </style>
\ No newline at end of file
src/pages/example_code.vue
View file @ c3a530db
...@@ -36,71 +36,4 @@ export default { ...@@ -36,71 +36,4 @@ export default {
</script> </script>
<style scoped> <style scoped>
.detail_container {
margin: 8px 0 30px 0;
}
.tab-tit {
height: 48px;
background-color: #e1e3ee;
border-radius: 8px;
list-style: none;
padding: 6px 0 6px 6px;
display: inline-block;
}
.tab-li {
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 10px;
color: #58617a;
margin-right: 10px;
cursor: pointer;
}
.tabactive {
padding: 0 10px;
height: 36px;
background-color: #264dd9;
box-shadow: 0px 2px 4px 0px #5d7be5;
border-radius: 6px;
color: #f4f7fc;
}
.tab-content {
margin-top: 30px;
padding: 20px;
background: #fff;
border-radius: 8px;
}
.tab-bgcolor {
background: #fff;
border-radius: 8px;
}
.gray-btn {
width: 150px;
height: 40px;
background-color: #e3e5ef;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 46px auto 40px;
}
.gray-btn span {
margin-left: 20px;
}
.cpu-info {
font-size: 18px;
color: #242c43;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
width: 170px;
}
.cpu-info span {
font-size: 16px;
color: #8890a7;
}
.code-main {
margin-top: 100px;
}
</style> </style>
\ No newline at end of file
src/pages/fwzc_fwcs.vue
View file @ c3a530db
<template> <template>
<div class="fwcs"> <div class="fwcs">
<el-breadcrumb separator="/" class="bread_crumb"> <el-breadcrumb separator="/" class="bread_crumb">
<el-breadcrumb-item :to="{ path: '/' }">服务注册</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
<el-breadcrumb-item>服务测试</el-breadcrumb-item> <el-breadcrumb-item>服务测试</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<block-radius> <block-radius>
...@@ -26,37 +26,128 @@ ...@@ -26,37 +26,128 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-input> </el-input>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button> <el-button v-if="activeBtn == 0" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
</div>
<div v-if="activeBtn == 0">
<el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
<el-tab-pane label="请求参数" name="0">
<ces-table
ref="fwcs_sjfw_qq"
size="mini"
:border="true"
:headers="sjfw_qqcs"
url
:searchShow="false"
:addRowBtn="false"
:autoAdd="true"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></ces-table>
</el-tab-pane>
<el-tab-pane label="请求体" name="1">
<div class="sjfw_qqt">
<el-radio v-model="sjfwQqt" label="JSON">JSON</el-radio>
</div>
<v-apaas-code></v-apaas-code>
</el-tab-pane>
<el-tab-pane label="授权信息" name="2">
<el-row class="sqxx_row">
<el-col :span="6">
<div class="sqxx_title">授权方式：</div>
<el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
<el-option
v-for="item in optionsSq"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
<el-col :span="2" class="center_line_c">
<div class="center_line"></div>
</el-col>
<el-col :span="16">
<div class="sqxx_title">Token：</div>
<el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
<div v-if="activeBtn == 1">
<div class="skfw_fwlx">服务类型：</div>
<div class="skfw_fwlx_radios">
<el-radio
v-for="item in skfwRadios"
:key="item"
v-model="sjfwQqt"
:label="item"
>{{ item }}</el-radio>
<el-button v-if="activeBtn == 1" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
</div>
</div> </div>
<el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
<el-tab-pane label="请求参数" name="0">
<ces-table
ref="fwcs_sjfw"
class="r_yhgl_table"
size="mini"
:border="true"
:headers="headers"
url
:searchShow="false"
:addRowBtn="false"
:autoAdd="true"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></ces-table>
</el-tab-pane>
<el-tab-pane label="请求体" name="1"></el-tab-pane>
<el-tab-pane label="授权信息" name="2"></el-tab-pane>
</el-tabs>
</block-radius> </block-radius>
<block-radius> <block-radius v-if="activeBtn == 0 && resultShow">
s <div class="sjfw_qqcstx">请求参数信息填写：</div>
<ces-table
ref="fwcs_sjfw_qqcs"
size="mini"
:border="true"
:headers="sjfw_qqcstx"
url="qqcstx"
:searchShow="false"
:addRowBtn="false"
:autoAdd="false"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></ces-table>
<div class="sjfw_fhcstx">返回参数信息填写：</div>
<ces-table
ref="fwcs_sjfw_fhcs"
size="mini"
:border="true"
:headers="sjfw_fhcstx"
url="fhcstx"
:searchShow="false"
:addRowBtn="false"
:autoAdd="false"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></ces-table>
<div class="btn_footer">
<el-button class="reset" @click="resetSjfw">重置</el-button>
<el-button class="next" @click="nextJcxx">下一步</el-button>
</div>
</block-radius>
<block-radius v-if="activeBtn == 1 && resultShow">
<div class="skfw_csfwxx">测试服务信息：</div>
<div class="test_succ">
<div>测试成功</div>
</div>
<div class="btn_footer">
<el-button class="next" @click="nextJcxx">下一步</el-button>
</div>
</block-radius> </block-radius>
</div> </div>
</template> </template>
...@@ -64,10 +155,12 @@ ...@@ -64,10 +155,12 @@
<script> <script>
import blockRadius from "@/components/block-radius"; import blockRadius from "@/components/block-radius";
import cesTable from "@/components/table-um"; import cesTable from "@/components/table-um";
import codes from "@/components/codes";
export default { export default {
components: { components: {
blockRadius, blockRadius,
cesTable cesTable,
"v-apaas-code": codes
}, },
data: () => ({ data: () => ({
btnList: [ btnList: [
...@@ -85,7 +178,7 @@ export default { ...@@ -85,7 +178,7 @@ export default {
{ label: "POST", value: "POST" } { label: "POST", value: "POST" }
], ],
activeName: 0, activeName: 0,
headers: [ sjfw_qqcs: [
{ {
label: "请求字段编码", label: "请求字段编码",
prop: "requestEncoding", prop: "requestEncoding",
...@@ -94,8 +187,42 @@ export default { ...@@ -94,8 +187,42 @@ export default {
}, },
{ label: "请求值", prop: "requestValue", type: "input", align: "left" } { label: "请求值", prop: "requestValue", type: "input", align: "left" }
], ],
sjfw_qqcstx: [
{ label: "字段编码", prop: "unicode", type: "", align: "left" },
{ label: "示例值", prop: "examples", type: "input", align: "left" },
{ label: "字段类型", prop: "type", type: "", align: "left" },
{ label: "字段名称", prop: "name", type: "input", align: "left" },
{
label: "是否必须",
prop: "needable",
type: "select",
align: "left",
width: 100
},
{ label: "字段说明", prop: "explanation", type: "input", align: "left" }
],
sjfw_fhcstx: [
{ label: "字段编码", prop: "unicode", type: "", align: "left" },
{ label: "字段类型", prop: "type", type: "popover", align: "left" },
{ label: "字段名称", prop: "name", type: "input", align: "left" },
{ label: "字段说明", prop: "explanation", type: "input", align: "left" }
],
url: "", url: "",
emptyText: "暂时没数据" emptyText: "暂时没数据",
resultShow: false,
optionsSq: [{ label: "Bearer Token", value: "Bearer Token" }],
sqfsVal: "",
tokenVal: "",
sjfwQqt: "JSON",
skfwRadios: [
"ArcGIS Server Web",
"文档",
"KML",
"OGC(WMS)",
"OGS(WMTS)",
"OGS(WFS)",
"OGS(WCS)"
]
}), }),
computed: {}, computed: {},
watch: {}, watch: {},
...@@ -103,11 +230,15 @@ export default { ...@@ -103,11 +230,15 @@ export default {
clickBtn(val) { clickBtn(val) {
this.activeBtn = val; this.activeBtn = val;
}, },
clickFwcs() {}, clickFwcs() {
this.resultShow = true;
},
clickTab() {}, clickTab() {},
clickNext() { clickNext() {
console.log(this.$refs.fwcs_sjfw.getTableData()); console.log(this.$refs.fwcs_sjfw_qq.getTableData());
} },
resetSjfw() {},
nextJcxx() {},
}, },
mounted() {} mounted() {}
}; };
...@@ -115,12 +246,14 @@ export default { ...@@ -115,12 +246,14 @@ export default {
<style scoped> <style scoped>
.fwcs { .fwcs {
width: 96vw;
} }
.bread_crumb { .bread_crumb {
margin: 20px; margin: 20px;
font-size: 14px; font-size: 14px;
} }
.fwcs_btn_act { .fwcs_btn_act {
width: 100px;
background-color: #e56600; background-color: #e56600;
color: #ffffff; color: #ffffff;
} }
...@@ -145,6 +278,73 @@ export default { ...@@ -145,6 +278,73 @@ export default {
.fwcs_btn_fwcs { .fwcs_btn_fwcs {
background-color: #0f2683; background-color: #0f2683;
color: #ffffff; color: #ffffff;
margin-left: 10px;
}
.sjfw_qqcstx {
color: #58617a;
margin: 10px 15px;
font-size: 14px;
}
.skfw_csfwxx {
color: #58617a;
margin: 10px 15px;
font-size: 14px;
}
.sjfw_fhcstx {
color: #58617a;
margin: 40px 15px 10px;
font-size: 14px;
}
.btn_footer {
display: flex;
justify-content: flex-end;
margin: 40px 20px 10px;
}
.btn_footer .reset {
width: 100px;
background-color: #c3caf8;
color: #0f2683;
}
.btn_footer .next {
width: 100px;
background-color: #0f2683;
color: #f8f9fd;
}
.sqxx_row {
padding: 0 20px;
}
.sqxx_title {
color: #58617a;
font-size: 14px;
margin: 10px 15px;
}
.sqxx_select {
width: 100%;
}
.center_line_c {
margin: 0 auto;
}
.center_line {
background-color: #f4f7fc;
width: 2px;
height: 400px;
position: relative;
left: 50%;
}
.sjfw_qqt {
margin: 0 20px 15px;
}
.skfw_fwlx {
margin: 20px 15px;
color: #58617a;
font-size: 14px;
}
.skfw_fwlx_radios {
margin: 10px 0 0;
}
.test_succ {
width: 100%;
margin: 0 auto;
} }
</style> </style>
<style> <style>
......
src/pages/index.vue
View file @ c3a530db
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
background-color: #0f2683; background-color: #0f2683;
} }
.contain{ .contain{
width: 1200px; /* width: 1200px; */
margin: 0 auto; margin: 0 auto;
margin-top: -157px; margin-top: -157px;
} }
......
static/data.json
View file @ c3a530db
...@@ -87,6 +87,110 @@ ...@@ -87,6 +87,110 @@
"requestEncoding": "2016-05-02", "requestEncoding": "2016-05-02",
"requestValue": "王小虎" "requestValue": "王小虎"
} }
],
"qqcstx": [
{
"id": 1,
"unicode": "2016-05-02",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 2,
"unicode": "2016-05-04",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1517 弄"
},
{
"id": 3,
"unicode": "2016-05-01",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1519 弄",
"children": [
{
"id": 31,
"unicode": "2016-05-01",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1519 弄"
},
{
"id": 32,
"unicode": "2016-05-01",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1519 弄"
}
]
},
{
"id": 4,
"unicode": "2016-05-03",
"examples": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"needable": "0",
"explanation": "上海市普陀区金沙江路 1516 弄"
}
],
"fhcstx": [
{
"id": 1,
"unicode": "2016-05-02",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 2,
"unicode": "2016-05-04",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1517 弄"
},
{
"id": 3,
"unicode": "2016-05-01",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1519 弄",
"children": [
{
"id": 31,
"unicode": "2016-05-01",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1519 弄"
},
{
"id": 32,
"unicode": "2016-05-01",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1519 弄"
}
]
},
{
"id": 4,
"unicode": "2016-05-03",
"type": "ssdNW",
"name": "王小虎",
"explanation": "上海市普陀区金沙江路 1516 弄"
}
] ]
} }
} }
\ No newline at end of file
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