From ffbfeb3709556b0cae5c23db192feeed9a04ac33 Mon Sep 17 00:00:00 2001
From: OrangeM21 <orangemtony@gmail.com>
Date: Thu, 7 May 2020 11:28:19 +0800
Subject: [PATCH] =?UTF-8?q?[update]=E6=B7=BB=E5=8A=A0CodeMirror=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E5=92=8Cxterm=E6=8F=92=E4=BB=B6,=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E5=91=BD=E4=BB=A4=E6=89=A7=E8=A1=8C=E9=A1=B5=E9=9D=A2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  3 +
 src/components/CodeMirror/index.vue           | 20 ++++
 src/components/Term/index.vue                 | 52 ++++++++++
 .../TreeTable/components/AssetTree.vue        | 17 ++++
 src/components/TreeTable/index.vue            | 13 ++-
 src/views/jobcenter/CommandExecution.vue      | 95 ++++++++++++++-----
 yarn.lock                                     | 22 +++++
 7 files changed, 198 insertions(+), 24 deletions(-)
 create mode 100644 src/components/CodeMirror/index.vue
 create mode 100644 src/components/Term/index.vue
 create mode 100644 src/components/TreeTable/components/AssetTree.vue

diff --git a/package.json b/package.json
index 4b09dfe86..053833fbb 100644
--- a/package.json
+++ b/package.json
@@ -40,12 +40,15 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-codemirror-lite": "^1.0.4",
     "vue-cookie": "^1.1.4",
     "vue-i18n": "^8.15.5",
     "vue-router": "3.0.6",
     "vue-select": "^3.9.5",
     "vuejs-logger": "^1.5.4",
     "vuex": "3.1.0",
+    "xterm": "^4.5.0",
+    "xterm-addon-fit": "^0.3.0",
     "ztree": "^3.5.24"
   },
   "devDependencies": {
diff --git a/src/components/CodeMirror/index.vue b/src/components/CodeMirror/index.vue
new file mode 100644
index 000000000..a24a9cd01
--- /dev/null
+++ b/src/components/CodeMirror/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <codemirror v-bind="$attrs" v-on="$listeners" />
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror-lite'
+
+export default {
+  components: {
+    codemirror
+  },
+  props: {
+    ...codemirror.props
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/Term/index.vue b/src/components/Term/index.vue
new file mode 100644
index 000000000..7370e5c58
--- /dev/null
+++ b/src/components/Term/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="terminal" ref="terminal" class="xterm" />
+</template>
+
+<script>
+import 'xterm/css/xterm.css'
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+export default {
+  name: 'Term',
+  data() {
+    return {
+      xterm: ''
+    }
+  },
+
+  mounted: function() {
+    const terminalContainer = this.$refs.terminal
+    this.xterm = new Terminal(
+      {
+        fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+        lineHeight: 1.2,
+        fontSize: 15,
+        rightClickSelectsWord: true,
+        theme: {
+          background: '#1f1b1b'
+        }
+      })
+    const fitAddon = new FitAddon()
+    this.xterm.loadAddon(fitAddon)
+    this.xterm.open(terminalContainer)
+    fitAddon.fit()
+    this.xterm.scrollToBottom()
+  },
+  beforeDestroy() {
+    this.xterm.dispose()
+  },
+  methods: {
+    reset: function() {
+      this.xterm.reset()
+    },
+    write: function(val) {
+      this.xterm.write(val)
+    },
+    changeSelectedAssets() {
+
+    }
+  }
+
+}
+
+</script>
diff --git a/src/components/TreeTable/components/AssetTree.vue b/src/components/TreeTable/components/AssetTree.vue
new file mode 100644
index 000000000..0746029d9
--- /dev/null
+++ b/src/components/TreeTable/components/AssetTree.vue
@@ -0,0 +1,17 @@
+<template>
+  <div />
+</template>
+
+<script>
+export default {
+  name: '',
+  components: {},
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index a5fc66b5c..bce82d918 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -2,7 +2,13 @@
   <el-collapse-transition>
     <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
       <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
-        <AutoDataZTree :setting="treeSetting" class="auto-data-ztree" @urlChange="handleUrlChange" />
+        <!--        <AutoDataZTree :setting="treeSetting" class="auto-data-ztree" @urlChange="handleUrlChange" />-->
+        <component
+          :is="component"
+          :setting="treeSetting"
+          class="auto-data-ztree"
+          @urlChange="handleUrlChange"
+        />
       </div>
       <div :style="iShowTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
         <div class="mini">
@@ -38,6 +44,11 @@ export default {
     showTree: {
       type: Boolean,
       default: true
+    },
+    // 默认引用的Tree组件
+    component: {
+      type: String,
+      default: () => 'AutoDataZTree'
     }
   },
   data() {
diff --git a/src/views/jobcenter/CommandExecution.vue b/src/views/jobcenter/CommandExecution.vue
index 8e14bfe30..59770ed66 100644
--- a/src/views/jobcenter/CommandExecution.vue
+++ b/src/views/jobcenter/CommandExecution.vue
@@ -1,39 +1,84 @@
 <template>
-  <Page>
-    <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
-    <el-collapse-transition>
-      <el-row>
-        <el-col v-show="ShowTree" :span="4" class="transition-box">
-          <!--          <TreeNode :url="treeurl" @urlChanged="handleUrlChange" />-->
-          这里放资产树
-        </el-col>
-        <el-col :span="1" class="mini"><div style="display:block" class="mini-button" @click="ShowTree=!ShowTree"><i v-show="ShowTree" id="toggle-icon" class="fa fa-angle-left fa-x" /><i v-show="!ShowTree" id="toggle-icon" class="fa fa-angle-right fa-x" /></div></el-col>
-        <el-col :span="ShowTree?19:23" class="transition-box">
-          这里其它东西
-        </el-col>
-      </el-row>
-    </el-collapse-transition>
-  </Page>
+  <el-collapse-transition>
+    <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
+      <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
+        <!--        <AutoDataZTree :setting="treeSetting" class="auto-data-ztree" @urlChange="handleUrlChange" />-->
+        <component
+          :is="component"
+          :setting="treeSetting"
+          class="auto-data-ztree"
+          @urlChange="handleUrlChange"
+        />
+      </div>
+      <div :style="iShowTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
+        <div class="mini">
+          <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
+            <i v-show="iShowTree" class="fa fa-angle-left fa-x" /><i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
+          </div>
+        </div>
+        <IBox class="transition-box" style="width: calc(100% - 17px);">
+          <Term />
+          <div style="display: flex">
+            <div>
+              <CodeMirror @change="handleActionChange" />
+            </div>
+            <div>
+              <Select2 />
+            </div>
+          </div>
+        </IBox>
+      </div>
+    </div>
+  </el-collapse-transition>
 </template>
 
 <script>
-import { Page } from '@/layout/components'
-// import TreeNode from '@/components/TreeNode'
+import AutoDataZTree from '@/components/AutoDataZTree'
+import Term from '@/components/Term'
+import ListTable from '@/components/ListTable'
+import IBox from '@/components/IBox'
+import Select2 from '@/components/Select2'
+import CodeMirror from '@/components/CodeMirror'
 export default {
+  name: 'TreeTable',
   components: {
-    Page
-    // TreeNode
+    ListTable,
+    Term,
+    AutoDataZTree,
+    IBox,
+    Select2,
+    CodeMirror
+  },
+  props: {
+    ...ListTable.props,
+    treeSetting: {
+      type: Object,
+      default: () => AutoDataZTree.props.setting.default()
+    },
+    showTree: {
+      type: Boolean,
+      default: true
+    },
+    // 默认引用的Tree组件
+    component: {
+      type: String,
+      default: () => 'AutoDataZTree'
+    }
   },
   data() {
     return {
-      helpMessage: '',
-      ShowTree: true,
-      treeurl: '/api/v1/assets/nodes/children/tree/'
+      iTableConfig: this.tableConfig,
+      iShowTree: this.showTree,
+      actions: ''
     }
   },
   methods: {
     handleUrlChange(_url) {
-      console.log(_url)
+      this.$set(this.iTableConfig, 'url', _url)
+      console.log(this.iTableConfig)
+    },
+    handleActionChange(val) {
+      this.actions = val
     }
   }
 }
@@ -58,4 +103,8 @@ export default {
     width: 12px !important;
   }
 
+  .auto-data-ztree {
+    overflow: auto;
+    /*border-right: solid 1px red;*/
+  }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 545a7fa9d..74329ba36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2462,6 +2462,11 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@^5.22.0:
+  version "5.53.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.53.2.tgz#9799121cf8c50809cca487304e9de3a74d33f428"
+  integrity sha512-wvSQKS4E+P8Fxn/AQ+tQtJnF1qH5UOlxtugFLpubEZ5jcdH2iXTVinb+Xc/4QjshuOxRm4fUsU2QPF1JJKiyXA==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -9469,6 +9474,13 @@ vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
 
+vue-codemirror-lite@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
+  integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
+  dependencies:
+    codemirror "^5.22.0"
+
 vue-cookie@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npm.taobao.org/vue-cookie/download/vue-cookie-1.1.4.tgz#b8b46d112bda9f93a2f47017c2ed5282d2064fda"
@@ -9918,6 +9930,16 @@ xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
 
+xterm-addon-fit@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.3.0.tgz#341710741027de9d648a9f84415a01ddfdbbe715"
+  integrity sha512-kvkiqHVrnMXgyCH9Xn0BOBJ7XaWC/4BgpSWQy3SueqximgW630t/QOankgqkvk11iTOCwWdAY9DTyQBXUMN3lw==
+
+xterm@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.5.0.tgz#c7fd145c6cf91c9f2ef07011a9b35026cf4bfecc"
+  integrity sha512-4t12tsvtYnv13FBJwewddxdI/j4kSonmbQQv50j34R/rPIFbUNGtptbprmuUlTDAKvHLMDZ/Np2XcpNimga/HQ==
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"