一堆组件和示例，+fwcs的一点点

package.json

@@ -11,10 +11,13 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.8.0",
+    "ace-builds": "^1.4.11",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^5.45.0",
     "echarts": "^4.2.1",
     "element-ui": "^2.11.1",
+    "js-yaml": "^3.13.1",
+    "json2yaml": "^1.1.0",
     "material-design-icons-iconfont": "^4.0.5",
     "string-format": "^2.0.0",
     "svg-sprite-loader": "^4.2.1",

src/components/block-radius.vue

+<template>
+  <div class="block_radius">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.block_radius {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 10px;
+}
+</style>
+

src/components/codes.vue

+<template>
+  <div>
+    <div class="ace-container">
+      <div class="ace-editor" ref="ace"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ace from "ace-builds";
+import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
+import "ace-builds/src-noconflict/mode-yaml"; // 默认设置的语言模式
+import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
+import yaml from "json2yaml"; //json转yaml
+import json from "js-yaml"; //yaml转json
+export default {
+  props: ["items", "acemodePath"],
+  data() {
+    return {
+      aceEditor: null,
+      themePath: "ace/theme/monokai", // 不导入 webpack-resolver，该模块路径会报错
+      modePath: this.acemodePath
+    };
+  },
+
+  mounted() {
+    this.aceEditor = ace.edit(this.$refs.ace, {
+      maxLines: 40,
+      minLines: 10,
+      fontSize: 14,
+      mode: this.acemodePath,
+      wrap: this.wrap,
+      tabSize: 4,
+      highlightActiveLine: false
+    });
+
+    if (this.acemodePath == "ace/mode/yaml") {
+      var obj = yaml.stringify(this.items);
+      this.aceEditor.getSession().setValue(obj);
+    } else if (this.acemodePath == "ace/mode/json") {
+      this.aceEditor
+        .getSession()
+        .setValue(JSON.stringify(this.items, null, "\t"));
+    }
+  },
+  watch: {},
+  methods: {
+    // updatechild: function() {
+    //   json.load(this.aceEditor.getSession().getValue());
+    //   console.log(json.load(this.aceEditor.getSession().getValue()));
+    // },
+    parentHandleclick: function() {
+      this.$emit(
+        "jsonyamlvalue",
+        json.load(this.aceEditor.getSession().getValue())
+      );
+    }
+  }
+};
+</script>
+<style scoped>
+.ace-container {
+  width: 60%;
+  height: 629px;
+  margin: 50px;
+}
+</style>
+<style>
+.ace-container /deep/ .ace-editor {
+  width: 100% !important;
+  height: 633px !important;
+}
+.ace-container /deep/ .ace_content {
+  /* width: 100% !important; */
+  height: 633px !important;
+}
+.ace-container /deep/ .ace_text-layer {
+  /* width: 100% !important; */
+  word-break: break-all;
+  /* background:yellowgreen; */
+}
+.ace_print-margin {
+  display: none !important;
+}
+.ace-tm {
+  background-color: #f8f9fd !important;
+  border-radius: 0 8px 8px 0 !important;
+}
+.ace-tm .ace_gutter {
+  background-color: #1a2236 !important;
+  border-radius: 8px 0px 0px 8px !important;
+  color: #e3e5ef !important;
+}
+.ace_gutter-layer {
+  background-color: #1a2236 !important;
+  border-radius: 8px 0px 0px 8px !important;
+  color: #e3e5ef !important;
+}
+.ace-tm .ace_gutter-active-line {
+  background-color: #315efc !important;
+}
+.ace_editor {
+  overflow: inherit;
+}
+</style>

src/components/table-input.vue

@@ -42,11 +42,15 @@ export default {
 .text-xs-center {
   height: 32px;
 }
-.text-xs-center input {
-  width: 100%;
-}
+
 .table_in_input {
   text-align: center;
   font-size: 14px;
 }
+</style>
+<style>
+.text-xs-center input {
+  width: 100%;
+  background-color: #f7f8f9;
+}
 </style>
\ No newline at end of file

src/components/table-um.vue

@@ -32,8 +32,12 @@
         element-loading-text="加载中..."
         :empty-text="emptyText"
         :stripe="stripe"
+        row-key="id"
+        default-expand-all
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         ref="cesTable"
         :class="radius?'table_radius':''"
+        :header-cell-class-name="headerCellClassName"
         v-cloak
       >
         <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
@@ -64,20 +68,20 @@
               </b>
             </span>
             <!--href 链接-->
-            <v-cloud-table-umhref
+            <v-apaas-table-umhref
               v-else-if="item.type =='href'"
               :header="item"
               :row="scope.row"
               :detailsUrl="detailsUrl"
-            ></v-cloud-table-umhref>
+            ></v-apaas-table-umhref>
             <!-- could edit -->
-            <v-cloud-table-input
+            <v-apaas-table-input
               v-else-if="item.type==='input'"
               :item="helper.GetProperty(scope.row, item.prop)"
               :header="item.prop"
               :rowId="scope.$index"
               @changeInputValue="changeInputValue"
-            ></v-cloud-table-input>
+            ></v-apaas-table-input>
             <!-- 其他 -->
             <span
               v-else
@@ -145,8 +149,8 @@ import DConfirm from "@/components/dialog-remove";
 import tableUmhref from "@/components/table-umhref";
 export default {
   components: {
-    "v-cloud-table-input": tableInput,
-    "v-cloud-table-umhref": tableUmhref,
+    "v-apaas-table-input": tableInput,
+    "v-apaas-table-umhref": tableUmhref,
     "d-confirm": DConfirm
   },
   props: {
@@ -244,7 +248,11 @@ export default {
     couldEditStyle: {
       type: Boolean,
       default: false
-    }
+    },
+    headerCellClassName: {
+      type: String,
+      default: ""
+    },
   },
   data() {
     return {
@@ -277,13 +285,13 @@ export default {
           date: "2016-05-02",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1518 弄",
-          id: "ssss222"
+          id: "ssss2722"
         },
         {
           date: "2016-05-04",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1517 弄",
-          id: "ssss222"
+          id: "ssss2224"
         },
         {
           date: "2016-05-01",
@@ -295,7 +303,47 @@ export default {
           date: "2016-05-03",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1516 弄",
-          id: "ssss222"
+          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: "",
@@ -325,7 +373,15 @@ export default {
     getDataFromApiSync() {
       console.log("get data >>>");
       if (this.url == "") {
-        this.selectedTabsPage = this.tableData;
+        // 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.pagination.total = this.selectedTabsPage.length;
         if (this.autoAdd) {
           this.addRow();
@@ -560,8 +616,12 @@ em {
 /* .el-table th>.cell {
   padding-left: 14px;
 } */
-.could_edit {
-  background-color: #5c82ff;
+.el-table__placeholder {
+  display: inline-block;
+  width: 40px;
+}
+.th_pink {
+  background-color: #faf2e2 !important;
 }
 </style>
 <style scoped>

src/pages/code_example.vue

+<template>
+  <div class="code-main">
+    <v-apaas-code></v-apaas-code>
+  </div>
+</template>
+
+<script>
+import codes from "@/components/codes";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    "v-apaas-code": codes
+  },
+  mounted: function() {
+    // this.init();
+  },
+  computed: {},
+  watch: {
+    search: {
+      handler() {
+        this.getDataFromApiSync();
+      },
+      deep: true
+    },
+    namespace: {
+      handler() {
+        this.getDataFromApiSync();
+      },
+      deep: true
+    }
+  },
+  methods: {}
+};
+</script>
+
+<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>
\ No newline at end of file

src/pages/fwzc_fwcs.vue

+<template>
+  <div class="fwcs">
+    <block-radius>
+      <el-row>
+        <el-button>默认按钮</el-button>
+        <el-button>默认按钮</el-button>
+        <el-button>默认按钮</el-button>
+        <el-button>默认按钮</el-button>
+        <el-button>默认按钮</el-button>
+      </el-row>
+      <div class="gray_line"></div>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+import blockRadius from "@/components/block-radius";
+export default {
+  components: {
+    blockRadius
+  },
+  data: () => ({
+    activeName: "second"
+  }),
+  computed: {},
+  watch: {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.fwcs {
+}
+.gray_line {
+    width: 98%;
+    margin: 20px auto;
+    height: 1px;
+    background-color: #DCDFE6;
+}
+</style>
+

src/pages/table_example.vue

@@ -3,14 +3,14 @@
     <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"
       :searchShow="true"
       :addRowBtn="addRowBtn"
-      :autoAdd="true"
+      :autoAdd="false"
       :isDialog="true"
       :isSelection="true"
       :isIndex="true"
@@ -38,11 +38,34 @@
       :detailsUrl="detailsUrl"
       :radius="true"
       @primary-edit="editItem"
-      :emptyText="emptyText"
+      :emptyText="emptyText1"
       :stripe="false"
       :paginationShow="false"
       :pageSizeShow="false"
     ></ces-table>
+    <h3>带树结构表格，供服务测试用</h3>
+    <ces-table
+      class="r_yhgl_table"
+      size="mini"
+      :border="true"
+      :headers="headers2"
+      :url="url"
+      :searchShow="false"
+      :addRowBtn="false"
+      :autoAdd="false"
+      :isDialog="false"
+      :isSelection="false"
+      :isIndex="true"
+      :confirmOptions="confirmOptions"
+      :detailsUrl="detailsUrl"
+      :radius="true"
+      @primary-edit="editItem"
+      :emptyText="emptyText2"
+      :stripe="false"
+      :paginationShow="false"
+      :pageSizeShow="false"
+      headerCellClassName="th_pink"
+    ></ces-table>
   </div>
 </template>
 
@@ -72,7 +95,12 @@ export default {
       }
     ],
     headers1: [
-      { label: "服务url", prop: "date", type: "input", align: "center" },
+      { label: "服务url", prop: "date", type: "input", align: "left" },
+      { label: "服务名称", prop: "name", type: "input", align: "center" },
+      { label: "中文名", prop: "address", type: "input", align: "right" },
+    ],
+    headers2: [
+      { label: "服务url", prop: "date", type: "", align: "left" },
       { label: "服务名称", prop: "name", type: "input", align: "center" },
       { label: "中文名", prop: "address", type: "input", align: "center" },
     ],
@@ -85,7 +113,9 @@ export default {
       btnCancelText: "取消", //取消
       btnSubmitText: "确定" //确定
     },
-    emptyText: "暂时没数据"
+    emptyText: "暂时没数据",
+    emptyText1: "可输入表格暂时没数据",
+    emptyText2: "树结构暂时没数据",
   }),
   components: {
     cesTable

src/router/index.js

@@ -16,11 +16,25 @@ export default new Router({
       name: "index",
       component: Index,
       redirect: "/workplace",
-      children:[{
+      children: [{
         path: "/workplace",
         name: "workPlace",
         component: workPlace,
-      }]
+      },
+      {
+        path: "/fwzc", // 服务注册
+        name: "fwzc",
+        redirect: "/fwzc/fwcs",
+        component: () => import("@/pages/fwzc_fwcs"),
+        children: [
+          {
+            path: "/fwzc/fwcs", // 服务注册/服务测试
+            name: "fwcs",
+            component: () => import("@/pages/fwzc_fwcs")
+          },
+        ]
+      }
+      ]
     },
     {
       path: "/table_example", // 表格实例
@@ -31,7 +45,11 @@ export default new Router({
       path: "/upload_example", // 表格实例
       name: "upload_example",
       component: () => import("@/pages/upload_example")
-    }, 
-    
+    },
+    {
+      path: "/code_example", // 编辑器实例
+      name: "code_example",
+      component: () => import("@/pages/code_example")
+    }
   ]
 });

yarn.lock

@@ -1005,6 +1005,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.4.11:
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.11.tgz#b1f19a891afcef1d26522473082baf80067e855f"
+  integrity sha512-keACH1d7MvAh72fE/us36WQzOFQPJbHphNpj33pXwVZOM84pTWcdFzIAvngxOGIGLTm7gtUP2eJ4Ku6VaPo8bw==
+
 acorn-walk@^6.1.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
@@ -3939,6 +3944,13 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json2yaml@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/json2yaml/-/json2yaml-1.1.0.tgz#5414d907f9816586b80c513ec2e3aeb2ab819a6c"
+  integrity sha1-VBTZB/mBZYa4DFE+wuOusquBmmw=
+  dependencies:
+    remedial "1.x"
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -5753,6 +5765,11 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remedial@1.x:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
+  integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"