CN-119 feat: 完成interface页面

src/components/table/CnDataList.vue

@@ -14,7 +14,7 @@
             <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
               <div style="display: flex">
                 <el-input
-                    v-model="keyWord"  size="small" @keyup.enter.native="onsearch"></el-input>
+                    v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>
 <!--                <el-button icon="el-icon-search" @click="onsearch" size="small"></el-button>-->
                 <button   class="top-tool-btn" style="border-radius: 0px"
                         type="button" @click="onsearch">

src/components/table/settings/GalaxyProxyTable.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitles"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      :show-overflow-tooltip="['targetParam', 'targetHeader', 'preHandle', 'postHandle'].indexOf(item.prop) === -1"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template #default="scope" :column="item">
+        <template v-if="item.prop === 'targetParam' || item.prop === 'targetHeader'">
+          <template v-if="scope.row[item.prop]">
+            <el-popover
+                width="250px"
+                popper-class="js-code-highlight"
+                placement="left"
+                trigger="hover"
+            >
+              <template #reference>
+                <span style="color: #41ABFD">{...}</span>
+              </template>
+              <div class="highlight-box">
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <highlightjs
+                    language="json"
+                    :code="scope.row[item.prop]"
+                />
+              </div>
+            </el-popover>
+          </template>
+          <template v-else>-</template>
+        </template>
+        <template v-else-if="item.prop === 'preHandle' || item.prop === 'postHandle'">
+          <template v-if="scope.row[item.prop]">
+            <el-popover
+                width="250px"
+                popper-class="js-code-highlight"
+                placement="left"
+                trigger="hover"
+            >
+              <template #reference>
+                <span style="color: #41ABFD">{...}</span>
+              </template>
+              <div class="highlight-box">
+                <span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
+                <highlightjs
+                    language="js"
+                    :code="scope.row[item.prop]"
+                />
+              </div>
+            </el-popover>
+          </template>
+          <template v-else>-</template>
+        </template>
+        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items">
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
+          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+            <div class="table-operation-item table-operation-item--more">
+              <i class="cn-icon cn-icon-more-arrow-down"></i>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu >
+                <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { copyValue } from '@/utils/tools'
+
+export default {
+  name: 'galaxyProxyTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom',
+          width: 150
+        }, {
+          label: this.$t('overall.path'),
+          prop: 'path',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.method'),
+          prop: 'method',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.version'),
+          prop: 'version',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('galaxyProxy.targetUrl'),
+          prop: 'targetUrl',
+          show: true,
+          width: 250
+        }, {
+          label: this.$t('galaxyProxy.targetParam'),
+          prop: 'targetParam',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('galaxyProxy.targetHeader'),
+          prop: 'targetHeader',
+          show: true,
+          width: 150
+        }, {
+          label: 'Pre handle',
+          prop: 'preHandle',
+          show: true,
+          width: 150
+        }, {
+          label: 'Post handle',
+          prop: 'postHandle',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }
+      ]
+    }
+  },
+  setup () {
+    return {
+      copyValue
+    }
+  }
+}
+</script>
+<style lang="scss">
+.js-code-highlight {
+  height: 250px;
+
+  .highlight-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    .highlight-box__copy-btn {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      cursor: pointer;
+    }
+  }
+}
+pre code.hljs {
+  overflow-x: visible;
+}
+</style>

src/components/table/settings/I18nTable.vue

@@ -32,26 +32,7 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <template v-if="item.prop === 'roles'">
-          <template v-if="scope.row[item.prop]">
-            {{scope.row[item.prop].map(t=>t.name).join(',')}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'status'">
-          <el-switch
-              v-if="scope.row.id"
-              v-model="scope.row.status"
-              :active-color="theme.themeColor"
-              active-value="1"
-              :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
-              inactive-value="0"
-              @change="()=>{statusChange(scope.row)}">
-          </el-switch>
-        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
     <el-table-column
@@ -70,7 +51,7 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -82,14 +63,14 @@
 
 <script>
 import table from '@/mixins/table'
-import { put } from '@/utils/http'
+import { api } from '@/utils/api'
 
 export default {
   name: 'I18nTable',
   mixins: [table],
   data () {
     return {
-      loginName: localStorage.getItem('cn-username'),
+      url: api.i18n,
       tableTitle: [ // 原始table列
         {
           label: 'ID',
@@ -123,22 +104,6 @@ export default {
         }
       ]
     }
-  },
-  methods: {
-    statusChange (i18n) {
-      if (i18n.roles) {
-        i18n.roleIds = i18n.roles.map(t => t.id)
-      }
-      put('sys/i18n', i18n).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.$emit('reload')
-      })
-    }
   }
 }
 </script>

src/components/table/settings/RoleTable.vue

@@ -63,7 +63,7 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>

src/components/table/settings/UserTable.vue

@@ -70,7 +70,7 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu >
-                <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>