Skip to content

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

数据测试+表格数据提取+select模块

parent f3d8f7b9
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 105 deletions
src/assets/css/index.css
View file @ 0da35cd0
......@@ -216,22 +216,24 @@ div{
text-align: center;
}
/* 设置tab切换的样式 */
.el-tabs__nav{
left:50%;
transform: translateX(-50%)!important;
}
.el-tabs__item.is-disabled{
.el-tabs__item.is-disabled {
color: #8890a7 !important;
}
.el-tabs__item{
.el-tabs__item {
font-size: 16px;
color: #8890a7;
line-height: 24px!important;
}
.el-tabs__item.is-active{
color: #264dd9 !important;
.el-tabs__item:hover {
color: #687087;
}
.el-tabs__item.is-active {
color: #e56600 !important;
}
.el-tabs__active-bar{
background-color:#264dd9 !important;
height: 3px;
background-color:#e56600 !important;
}
.el-tabs__nav-wrap::after{
height: 1px;
......@@ -413,3 +415,46 @@ width: 620px!important;
.triangle-position {
margin-left: 35px;
} */
.el-input__inner {
border-radius: 8px;
}
.el-input-group__append, .el-input-group__prepend {
border-radius: 8px;
}
.el-button {
border-radius: 8px;
}
/* 下拉选样式 */
.el-select-dropdown {
border-radius: 8px;
}
.el-select-dropdown__list {
padding: 0;
background-color: #0f2683;
top: 10px;
border-radius: 4px;
}
.el-select-dropdown__item {
font-size: 12px;
padding: 0 20px;
color: #f4f7fc;
height: 34px;
line-height: 34px;
background-color: #0f2683;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #3f4f9c;
}
.el-select-dropdown__item.selected {
color: #f4f7fc;
}
.el-scrollbar {
border-radius: 8px;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: transparent;
}
.el-popper[x-placement^=top] .popper__arrow::after {
border-top-color: transparent;
}
\ No newline at end of file
src/components/block-radius.vue
View file @ 0da35cd0
......@@ -20,6 +20,7 @@ export default {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
</style>
src/components/table-input.vue
View file @ 0da35cd0
<template>
<div class="text-xs-center">
<el-input ref="inp" v-model="inputText" size="small" @input="changeValue" class="table_in_input"></el-input>
<el-input
ref="inp"
v-model="inputText"
:disabled="couldNotEdit"
size="small"
@input="changeValue"
class="table_in_input"
></el-input>
</div>
</template>
......@@ -19,6 +26,10 @@ export default {
rowId: {
type: Number,
default: 0
},
couldNotEdit: {
type: Boolean,
default: false
}
},
data: () => ({
......@@ -52,5 +63,9 @@ export default {
.text-xs-center input {
width: 100%;
background-color: #f7f8f9;
border-radius: 4px;
}
.text-xs-center .el-input.is-disabled .el-input__inner {
color: #70747C;
}
</style>
\ No newline at end of file
src/components/table-select.vue 0 → 100644
View file @ 0da35cd0
<template>
<div class="table_in_s">
<el-select
ref="inp"
v-model="selectValue" :disabled="couldNotEdit"
size="small"
@input="changeValue"
class="table_in_select"
placeholder="请选择"
>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
item: {
type: String,
default: ""
},
header: {
type: String,
default: ""
},
rowId: {
type: Number,
default: 0
},
couldNotEdit: {
type: Boolean,
default: false
},
},
data: () => ({
selectValue: ""
}),
mounted() {
this.selectValue = this.item;
},
methods: {
changeValue() {
this.$emit("changeInputValue", {
rowId: this.rowId,
header: this.header,
inputValue: this.selectValue
});
}
}
};
</script>
<style scoped>
.table_in_s {
height: 32px;
}
.table_in_select {
text-align: center;
font-size: 14px;
}
</style>
<style>
.table_in_s input {
width: 100%;
background-color: #f7f8f9;
border-radius: 4px;
}
.table_in_s .el-input.is-disabled .el-input__inner {
color: #70747C;
}
</style>
\ No newline at end of file
src/components/table-um.vue
View file @ 0da35cd0
......@@ -80,8 +80,18 @@
:item="helper.GetProperty(scope.row, item.prop)"
:header="item.prop"
:rowId="scope.$index"
:couldNotEdit="couldNotEdit"
@changeInputValue="changeInputValue"
></v-apaas-table-input>
<!-- could select -->
<v-apaas-table-select
v-else-if="item.type==='select'"
:item="helper.GetProperty(scope.row, item.prop)"
:header="item.prop"
:rowId="scope.$index"
:couldNotEdit="couldNotEdit"
@changeInputValue="changeInputValue"
></v-apaas-table-select>
<!-- 其他 -->
<span
v-else
......@@ -144,12 +154,14 @@
<script>
import services from "@/services";
import tableInput from "@/components/table-input";
import tableSelect from "@/components/table-select";
import helper from "@/services/helper";
import DConfirm from "@/components/dialog-remove";
import tableUmhref from "@/components/table-umhref";
export default {
components: {
"v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref,
"d-confirm": DConfirm
},
......@@ -198,6 +210,10 @@ export default {
type: Boolean,
default: false
},
couldNotEdit: {
type: Boolean,
default: false
},
// 是否显示删除弹窗
isDialog: { type: Boolean, default: false },
confirmOptions: {
......@@ -245,14 +261,10 @@ export default {
type: Boolean,
default: false
},
couldEditStyle: {
type: Boolean,
default: false
},
headerCellClassName: {
type: String,
default: ""
},
}
},
data() {
return {
......@@ -280,72 +292,6 @@ export default {
label: "50"
}
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
id: "ssss2722"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
id: "ssss2224"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
id: "ssss222"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
id: "ssss22"
}
],
tableData1: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
}
]
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
search: "",
times: null
};
......@@ -375,13 +321,7 @@ export default {
if (this.url == "") {
// console.log(this.emptyText);
// the if statement is to choose which data could be show, only used for test and template
if (this.emptyText == "暂时没数据") {
this.selectedTabsPage = this.tableData;
} else if (this.emptyText == "可输入表格暂时没数据") {
this.selectedTabsPage = this.tableData;
} else if (this.emptyText == "树结构暂时没数据") {
this.selectedTabsPage = this.tableData1;
}
this.selectedTabsPage = [];
this.pagination.total = this.selectedTabsPage.length;
if (this.autoAdd) {
this.addRow();
......@@ -405,12 +345,12 @@ export default {
getDataFromApi() {
return new Promise((resolve, reject) => {
const { page, rowsPerPage } = this.pagination;
this.all_url = `${this.url}`;
this.all_url = `/static/data.json`;
this.$http
.get(this.all_url)
.then(response => {
let newArr = response.data[this.rowprop];
let total = response.data.listMeta.totalItems;
let newArr = response.data.data[this.url];
let total = newArr.length;
resolve({ newArr, total });
})
.catch(function(response) {
......@@ -490,6 +430,9 @@ export default {
newRow[item] = "";
}
this.selectedTabsPage.push(newRow);
},
getTableData() {
return this.selectedTabsPage;
}
}
};
......
src/pages/example_table.vue
View file @ 0da35cd0
......@@ -7,7 +7,7 @@
size="mini"
:border="false"
:headers="headers"
:url="url"
url="tableData"
:searchShow="true"
:addRowBtn="addRowBtn"
:autoAdd="false"
......@@ -27,17 +27,17 @@
size="mini"
:border="true"
:headers="headers1"
:url="url"
url="tableData"
:searchShow="false"
:addRowBtn="false"
:autoAdd="true"
:couldNotEdit="true"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:confirmOptions="confirmOptions"
:detailsUrl="detailsUrl"
:radius="true"
@primary-edit="editItem"
:emptyText="emptyText1"
:stripe="false"
:paginationShow="false"
......@@ -49,7 +49,7 @@
size="mini"
:border="true"
:headers="headers2"
:url="url"
url="tableData1"
:searchShow="false"
:addRowBtn="false"
:autoAdd="false"
......@@ -59,7 +59,6 @@
:confirmOptions="confirmOptions"
:detailsUrl="detailsUrl"
:radius="true"
@primary-edit="editItem"
:emptyText="emptyText2"
:stripe="false"
:paginationShow="false"
......@@ -97,12 +96,12 @@ export default {
headers1: [
{ label: "服务url", prop: "date", type: "input", align: "left" },
{ label: "服务名称", prop: "name", type: "input", align: "center" },
{ label: "中文名", prop: "address", type: "input", align: "right" },
{ label: "是否必要", prop: "address", type: "select", align: "center", width: 100 }
],
headers2: [
{ label: "服务url", prop: "date", type: "", align: "left" },
{ label: "服务名称", prop: "name", type: "input", align: "center" },
{ label: "中文名", prop: "address", type: "input", align: "center" },
{ label: "中文名", prop: "address", type: "input", align: "center" }
],
url: "",
detailsUrl: "ss/",
......@@ -115,7 +114,7 @@ export default {
},
emptyText: "暂时没数据",
emptyText1: "可输入表格暂时没数据",
emptyText2: "树结构暂时没数据",
emptyText2: "树结构暂时没数据"
}),
components: {
cesTable
......
src/pages/fwzc_fwcs.vue
View file @ 0da35cd0
......@@ -26,16 +26,48 @@
></el-option>
</el-select>
</el-input>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
</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>
s
</block-radius>
</div>
</template>
<script>
import blockRadius from "@/components/block-radius";
import cesTable from "@/components/table-um";
export default {
components: {
blockRadius
blockRadius,
cesTable
},
data: () => ({
btnList: [
......@@ -51,13 +83,30 @@ export default {
optionType: [
{ label: "GET", value: "GET" },
{ label: "POST", value: "POST" }
]
],
activeName: 0,
headers: [
{
label: "请求字段编码",
prop: "requestEncoding",
type: "input",
align: "left"
},
{ label: "请求值", prop: "requestValue", type: "input", align: "left" }
],
url: "",
emptyText: "暂时没数据"
}),
computed: {},
watch: {},
methods: {
clickBtn(val) {
this.activeBtn = val;
},
clickFwcs() {},
clickTab() {},
clickNext() {
console.log(this.$refs.fwcs_sjfw.getTableData());
}
},
mounted() {}
......@@ -87,12 +136,16 @@ export default {
}
.fwcs_fwdz {
color: #58617a;
margin: 20px;
margin: 20px 15px 15px;
font-size: 14px;
}
.input-with-select {
width: 70%;
}
.fwcs_btn_fwcs {
background-color: #0f2683;
color: #ffffff;
}
</style>
<style>
.bread_crumb .el-breadcrumb__inner {
......@@ -105,6 +158,9 @@ export default {
width: 130px;
background-color: #0f2683;
color: #ffffff;
border-radius: 4px 0px 0px 4px;
border-radius: 8px 0px 0px 8px;
}
.fwcs_tabs .el-tabs__header {
margin: 20px 0;
}
</style>
static/data.json 0 → 100644
View file @ 0da35cd0
{
"data": {
"tableData": [
{
"date": "2016-05-02",
"name": "王小虎",
"address": "0",
"id": "ssss2722"
},
{
"date": "2016-05-04",
"name": "王小虎",
"address": "0",
"id": "ssss2224"
},
{
"date": "2016-05-01",
"name": "王小虎",
"address": "0",
"id": "ssss222"
},
{
"date": "2016-05-03",
"name": "王小虎",
"address": "0",
"id": "ssss22"
}
],
"tableData1": [
{
"id": 1,
"date": "2016-05-02",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1518 弄"
},
{
"id": 2,
"date": "2016-05-04",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1517 弄"
},
{
"id": 3,
"date": "2016-05-01",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1519 弄",
"children": [
{
"id": 31,
"date": "2016-05-01",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1519 弄"
},
{
"id": 32,
"date": "2016-05-01",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1519 弄"
}
]
},
{
"id": 4,
"date": "2016-05-03",
"name": "王小虎",
"address": "上海市普陀区金沙江路 1516 弄"
}
],
"fwzc_fwcs": [
{
"id": 1,
"requestEncoding": "2016-05-02",
"requestValue": "王小虎"
},
{
"id": 2,
"requestEncoding": "2016-05-02",
"requestValue": "王小虎"
},
{
"id": 13,
"requestEncoding": "2016-05-02",
"requestValue": "王小虎"
},
{
"id": 11,
"requestEncoding": "2016-05-02",
"requestValue": "王小虎"
}
]
}
}
\ 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