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

src/assets/css/index.css

@@ -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;
@@ -412,4 +414,47 @@ width: 620px!important;
 }
 .triangle-position {
   margin-left: 35px;
-} */
+} */
\ No newline at end of file
+.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

@@ -20,6 +20,7 @@ export default {
     background-color: #fff;
     border-radius: 10px;
     padding: 20px;
+    margin-bottom: 20px;
 }
 </style>
 

src/components/table-input.vue

 <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

+<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

@@ -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

@@ -3,11 +3,11 @@
     <div style="height: 60px"></div>
     <h3>常规表格</h3>
     <ces-table
-      class="r_yhgl_table"  
+      class="r_yhgl_table"
       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

@@ -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

+{
+    "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