feat: Log Manage页面编写，按设计自定义带连接线的树组件

.env.development

@@ -1,5 +1,5 @@
 NODE_ENV=development
-VUE_APP_API_BASE_URL=http://182.92.183.230:8080/jeecg-boot
+VUE_APP_API_BASE_URL=http://182.92.183.230:9999
 VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
 

src/components/CustomModal/index.vue

@@ -1,12 +1,10 @@
 <template>
-  <a-modal v-bind="$attrs" v-model="visible" :title="title">
+  <a-modal v-bind="$attrs" v-model="visible" :title="title" :footer="null">
     <slot></slot>
-    <template slot="footer">
+    <a-space v-if="showFooter" class="operators" :size="20">
-      <a-space class="operators" :size="20">
+      <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
-        <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
+      <a-button type="warn" @click="onCancel">Cancel</a-button>
-        <a-button type="warn" @click="onCancel">Cancel</a-button>
+    </a-space>
-      </a-space>
-    </template>
   </a-modal>
 </template>
 <script>
@@ -20,6 +18,10 @@ export default {
     },
     title: {
       type: String
+    },
+    showFooter: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -60,6 +62,8 @@ export default {
 </script>
 <style lang="less" scoped>
 .operators {
+  width: 100%;
+  justify-content: center;
   .ant-btn {
     width: 92px;
   }

src/components/CustomTable/index.vue

@@ -9,6 +9,7 @@
     :loading="loading"
     :pagination="pagination"
     :customRow="customRow"
+    :rowClassName="() => canSelect? 'custom-table-row': ''"
     @change="handleTableChange"
   >
     <!-- 处理 scopedSlots -->
@@ -41,15 +42,19 @@ export default {
       type: Boolean
     },
     pagination: {
-      type: Object
+      type: [Object, Boolean]
     },
     selectedRowKeys: {
       type: Array
+    },
+    canSelect: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-        innerSelectedRowKeys: cloneDeep(this.selectedRowKeys)
+        innerSelectedRowKeys: cloneDeep(this.selectedRowKeys) || []
     }
   },
   methods: {
@@ -59,6 +64,9 @@ export default {
         class: this.innerSelectedRowKeys.includes(record[this.rowKey]) ? 'ant-table-row-selected' : '',
         on: {
           click: () => {
+            if(!this.canSelect) {
+              return
+            }
             if (this.innerSelectedRowKeys.includes(record[this.rowKey])) {
               this.innerSelectedRowKeys = []
             } else {
@@ -85,12 +93,8 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
-.custom-table {
+.custom-table-row {
-  ::v-deep {
+  cursor: pointer;
-    .ant-table-row {
-      cursor: pointer;
-    }
-  }
 }
 </style>

src/components/TreeWithLine/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="tree-with-line">
+    <a-tree v-bind="$attrs" :defaultExpandAll="true">
+      <template slot="switcherIcon">
+        <div></div>
+      </template>
+    </a-tree>
+  </div>
+</template>
+<script>
+export default {}
+</script>
+<style lang="less" scoped>
+.tree-with-line {
+  @borderColor: #0a544e;
+  @bgColor: #022024;
+  ::v-deep .ant-tree {
+    border-left: 1px dotted @borderColor;
+    &-switcher {
+      background: transparent !important;
+      width: 17px;
+      height: 17px;
+      &-noop {
+        display: none;
+      }
+      &-icon {
+        margin-top: 3px;
+        background: url(~@/assets/images/global/switcher.png) center center no-repeat;
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        transform: none;
+      }
+      &_open {
+        .ant-tree-switcher-icon {
+          background-image: url(~@/assets/images/global/switcher-open.png);
+        }
+      }
+    }
+
+    &-treenode-switcher {
+      &-open,
+      &-close {
+        &::before {
+          content: '';
+          border-top: 1px dotted @borderColor;
+          width: 19px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    li ul {
+      padding-left: 28px;
+    }
+
+    &-child-tree {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        border-left: 1px dotted @borderColor;
+        top: -14px;
+        height: 100%;
+        z-index: 0;
+      }
+      li {
+        &:last-child {
+          position: relative;
+          padding-top: 4px;
+          &::after {
+            content: '';
+            background-color: @bgColor;
+            position: absolute;
+            top: 16px;
+            left: -1;
+            height: calc(100% - 14px);
+            width: 3px;
+            z-index: 1;
+          }
+        }
+      }
+    }
+
+    > li:last-child {
+      position: relative;
+      &::after {
+        content: '';
+        background-color: @bgColor;
+        width: 3px;
+        height: 100%;
+        position: absolute;
+        top: 16px;
+        left: -1px;
+        z-index: 1;
+      }
+    }
+  }
+}
+</style>

src/style.less

@@ -490,6 +490,10 @@ body {
       color: #0cebc9;
     }
   }
+
+  &-title {
+    user-select: none;
+  }
 }
 
 // 按钮
@@ -636,11 +640,6 @@ body {
     }
   }
   &-body {
-    padding-bottom: 0;
-  }
-  &-footer {
-    border-top: none;
-    text-align: center;
     padding-bottom: 22px;
   }
 }

src/views/logManage/index.vue

@@ -1,3 +1,249 @@
 <template>
-    <div>日志管理警页面</div>
+  <div class="log">
+    <a-card class="log-tree" :bordered="false">
+      <!-- 标题 -->
+      <template slot="title">
+        <div class="title">
+          <div class="title-text">LOG</div>
+          <div class="title-rect">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      </template>
+      <!-- 标题结束 -->
+      <!-- 内容 -->
+      <tree-with-line :treeData="treeData"> </tree-with-line>
+      <!-- 内容结束 -->
+    </a-card>
+    <div class="log-list">
+      <custom-table
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="false"
+        :loading="loading"
+        :can-select="false"
+        @change="handleTableChange"
+        :scroll="{ y: 'calc(100vh - 365px)' }"
+      >
+        <template slot="operate" slot-scope="{ record }">
+          <a-space :size="20">
+            <img src="@/assets/images/log/operate.png" alt="" style="cursor: pointer" @click.stop="onOperate(record)" />
+            <img
+              src="@/assets/images/log/download.png"
+              alt=""
+              style="cursor: pointer"
+              @click.stop="onDownload(record)"
+            />
+          </a-space>
+        </template>
+      </custom-table>
+    </div>
+
+    <custom-modal title="Log" v-model="visible" :show-footer="false">
+        这里是Log内容
+    </custom-modal>
+  </div>
 </template>
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import TreeWithLine from '@/components/TreeWithLine/index.vue'
+
+const columns = [
+  {
+    title: 'Name',
+    align: 'center',
+    dataIndex: 'name'
+  },
+  {
+    title: 'date',
+    align: 'center',
+    dataIndex: 'date'
+  },
+  {
+    title: 'size',
+    align: 'center',
+    dataIndex: 'size'
+  },
+  {
+    title: 'Operate',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'operate'
+    }
+  }
+]
+
+export default {
+  mixins: [JeecgListMixin],
+  components: {
+    TreeWithLine
+  },
+  data() {
+    this.columns = columns
+    return {
+      url: {
+        list: ''
+      },
+      treeData: [
+        {
+          title: 'Db',
+          key: '1',
+          children: [
+            {
+              title: '2022',
+              key: '1-1',
+              children: [
+                {
+                  title: '04',
+                  key: '1-1-1'
+                },
+                {
+                  title: '05',
+                  key: '1-1-2'
+                }
+              ]
+            },
+            {
+              title: '2023',
+              key: '1-2',
+              children: [
+                {
+                  title: '04',
+                  key: '1-2-1'
+                },
+                {
+                  title: '05',
+                  key: '1-2-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'Error',
+          key: '2',
+          children: [
+            {
+              title: '2022',
+              key: '2-1',
+              children: [
+                {
+                  title: '04',
+                  key: '2-1-1'
+                },
+                {
+                  title: '05',
+                  key: '2-1-2'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB' }],
+      visible: false
+    }
+  },
+  methods: {
+    onOperate(record) {
+      console.log('%c [  ]-147', 'font-size:13px; background:pink; color:#bf2c9f;', record)
+      this.visible = true
+    },
+    onDownload(record) {
+      console.log('%c [  ]-151', 'font-size:13px; background:pink; color:#bf2c9f;', record)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.log {
+  height: 100%;
+  display: flex;
+  &-tree {
+    width: 290px;
+    height: 100%;
+    flex-shrink: 0;
+    margin-right: 20px;
+    background-color: #022024;
+    border: 1px solid #0c6a66;
+    ::v-deep {
+      .ant-card {
+        &-head {
+          border-bottom: 4px solid rgba(12, 235, 201, 0.2);
+          height: auto;
+          &-title {
+            height: 45px;
+            line-height: 45px;
+            padding: 0;
+            padding-right: 20px;
+            font-family: MicrogrammaD-MediExte;
+            font-size: 18px;
+            font-weight: bold;
+            color: #0cebc9;
+          }
+        }
+        &-body {
+          padding: 0 20px;
+          height: calc(100% - 50px);
+          overflow: auto;
+        }
+      }
+    }
+    .title {
+      display: flex;
+      justify-content: space-between;
+      &-text {
+        padding-left: 20px;
+        width: 100px;
+        background-color: rgba(12, 235, 201, 0.05);
+      }
+
+      &-rect {
+        span {
+          display: inline-block;
+          background-color: rgba(12, 235, 201, 0.2);
+          vertical-align: middle;
+          &:first-child {
+            width: 4px;
+            height: 4px;
+          }
+          &:nth-child(2) {
+            width: 6px;
+            height: 6px;
+            margin-right: 6px;
+          }
+          &:nth-child(3) {
+            width: 4px;
+            height: 4px;
+            margin-right: 9px;
+          }
+          &:nth-child(4) {
+            width: 1px;
+            height: 16px;
+            margin-right: 23px;
+          }
+          &:nth-child(5) {
+            width: 2px;
+            height: 2px;
+            margin-right: 24px;
+          }
+          &:nth-child(6) {
+            width: 4px;
+            height: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  &-list {
+  }
+}
+</style>

src/views/system/Scheduling.vue

@@ -550,6 +550,13 @@ export default {
         }
       } else {
         this.checkedAccount = selected ? '' : eventKey
+        // 将所有右侧的穿梭状态重置
+        this.accountTreeData.forEach(account => {
+          // 将所有右侧的穿梭状态重置
+          account.children.forEach(child => {
+            itemSelect(child.key, false)
+          })
+        })
       }
     },
 
@@ -574,6 +581,7 @@ export default {
         }
       } else {
         const moveKey = moveKeys[0]
+        console.log('%c [ moveKey ]-577', 'font-size:13px; background:pink; color:#bf2c9f;', moveKey)
         let parentIndex = -1,
           childIndex = -1
         for (const pIndex in this.accountTreeData) {
@@ -587,6 +595,7 @@ export default {
           }
         }
         this.accountTreeData[parentIndex].children.splice(childIndex, 1)
+        console.log('%c [ childIndex ]-591', 'font-size:13px; background:pink; color:#bf2c9f;', childIndex)
       }
       this.targetKeys = targetKeys
     }