Merge branch 'master-dev' into feature-Beta-dev-renpy

src/components/CustomTable/index.vue

@@ -2,6 +2,7 @@
   <a-table
     ref="tableRef"
     class="custom-table"
+    :class="['custom-table', canSelect && multiple && mouseMoveSelect ? 'mouse-move-select' : '']"
     v-bind="$attrs"
     :data-source="list"
     :columns="columns"
@@ -9,7 +10,7 @@
     :row-key="rowKey"
     :loading="loading"
     :pagination="pagination"
-    :customRow="customRow"
+    :customRow="multiple && mouseMoveSelect ? customMouseMoveSelectRow : customRow"
     :rowClassName="() => (canSelect ? 'custom-table-row' : '')"
     @change="handleTableChange"
   >
@@ -58,10 +59,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 多选
     multiple: {
       type: Boolean,
       default: false,
     },
+    // 鼠标移动选择
+    mouseMoveSelect: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -69,6 +76,14 @@ export default {
       innerSelectedRows: [],
     }
   },
+  mounted() {
+    if (this.canSelect && this.multiple && this.mouseMoveSelect) {
+      const tbody = this.$el.querySelector('.ant-table-tbody')
+      tbody.addEventListener('mouseleave', () => {
+        this.mouseMoveStartIndex = undefined
+      })
+    }
+  },
   methods: {
     // 实现单击选中/反选功能
     customRow(record, index) {
@@ -105,6 +120,34 @@ export default {
         },
       }
     },
+
+    // 实现鼠标拖移动多选功能
+    customMouseMoveSelectRow(record, index) {
+      const key = record[this.rowKey]
+      return {
+        class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
+        on: {
+          mousedown: () => {
+            this.innerSelectedRowKeys = []
+            this.mouseMoveStartIndex = index
+          },
+          mouseenter: () => {
+            if (this.mouseMoveStartIndex !== undefined) {
+              const indexes = [this.mouseMoveStartIndex, index].sort((a, b) => a - b)
+              this.innerSelectedRowKeys = this.list.slice(indexes[0], indexes[1] + 1).map((item) => item[this.rowKey])
+            }
+          },
+          mouseup: () => {
+            // 开始和结束在同一个，相当于click
+            if (this.mouseMoveStartIndex == index) {
+              this.innerSelectedRowKeys = [key]
+            }
+            this.mouseMoveStartIndex = undefined
+          },
+        },
+      }
+    },
+
     handleTableChange(pagination, filters, sorter) {
       this.$emit('change', pagination, filters, sorter)
     },
@@ -136,8 +179,20 @@ export default {
   },
 }
 </script>
-<style lang="less">
-.custom-table-row {
+<style lang="less" scoped>
+::v-deep {
+  .custom-table-row {
     cursor: pointer;
+  }
+}
+
+.mouse-move-select {
+  user-select: none;
+
+  ::v-deep {
+    td {
+      transition: none !important;
+    }
+  }
 }
 </style>

src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue

@@ -13,6 +13,7 @@
               :list="dataSource"
               :loading="loading"
               :canSelect="false"
+              :scroll="{ y: 390 }"
             >
               <template slot="info" slot-scope="{ record }">
                 <a-popover>

src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue

@@ -10,6 +10,7 @@
           :list="dataSource"
           :loading="loading"
           :pagination="false"
+          :scroll="{ y: 655 }"
           @rowDbclick="rowClick"
         >
           <!-- <template slot="stationList" slot-scope="{ text }">

src/views/abnormalAlarm/analysisMonitor/avgNuclide/index.vue

@@ -53,6 +53,7 @@
         :loading="loading"
         :pagination="false"
         :canSelect="false"
+        :scroll="{ y: 655 }"
       >
       </TableList>
       <a-pagination

src/views/logManage/index.vue

@@ -30,6 +30,21 @@
     </a-card>
     <!-- 日志列表 -->
     <div class="log-list">
+      <div class="search-bar">
+        <a-row type="flex">
+          <a-col flex="290px">
+            <a-form-model-item label="Name">
+              <a-input v-model="nameStr" placeholder="Please Input..." />
+            </a-form-model-item>
+          </a-col>
+          <a-col flex="108px">
+            <a-button class="search-btn" type="primary" @click="onSearch">
+              <img src="@/assets/images/global/search.png" alt="" />
+              Search
+            </a-button>
+          </a-col>
+        </a-row>
+      </div>
       <custom-table
         size="middle"
         rowKey="id"
@@ -39,7 +54,7 @@
         :loading="isGettingTreeData || loading"
         :can-select="false"
         @change="handleTableChange"
-        :scroll="{ y: 'calc(100vh - 175px)' }"
+        :scroll="{ y: 'calc(100vh - 275px)' }"
       >
         <template slot="operate" slot-scope="{ record }">
           <a-space :size="20">
@@ -53,6 +68,22 @@
           </a-space>
         </template>
       </custom-table>
+      <a-pagination
+        size="small"
+        v-model="ipagination.current"
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="
+          (total, range) =>
+            `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
+        "
+        show-less-items
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
     </div>
     <!-- 日志列表结束 -->
     <custom-modal title="Log" :width="950" v-model="visible" :footer="null">
@@ -108,6 +139,7 @@ export default {
   data() {
     this.columns = columns
     return {
+      nameStr: '',
       disableMixinCreated: true,
       url: {
         list: '/logManage/findFiles',
@@ -121,12 +153,37 @@ export default {
       visible: false,
       isGettingDetail: false,
       logInfo: [],
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0,
+      },
     }
   },
   created() {
     this.getTreeData()
   },
   methods: {
+    onSearch() {
+      this.loadData()
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.loadData()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.loadData()
+    },
     async getTreeData() {
       try {
         this.isGettingTreeData = true
@@ -164,6 +221,8 @@ export default {
     },
     onSelect() {
       this.queryParam.path = this.selectedKeys[0]
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 10
       this.loadData()
     },
 
@@ -179,10 +238,14 @@ export default {
       this.onClearSelected()
 
       var params = this.getQueryParams() //查询条件
+      params.name = this.nameStr
+      params.pageNo = this.ipagination.current
+      params.pageSize = this.ipagination.pageSize
       this.loading = true
       getAction(this.url.list, params)
-        .then((res) => {
-          this.dataSource = res
+        .then(({ result: { records, total } }) => {
+          this.dataSource = records
+          this.ipagination.total = total
         })
         .finally(() => {
           this.loading = false
@@ -302,6 +365,10 @@ export default {
       }
     }
   }
+  &-list {
+    position: relative;
+    overflow: hidden;
+  }
 }
 
 .log-detail {
@@ -314,4 +381,59 @@ export default {
     }
   }
 }
+.search-bar {
+  height: 50px;
+  border-top: 1px solid rgba(13, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
+  margin-bottom: 15px;
+  padding: 8px 10px;
+  background: rgba(12, 235, 201, 0.05);
+}
+.ant-input {
+  width: 266px;
+}
+::v-deep {
+  .ant-form-item {
+    display: flex;
+    margin-bottom: 0;
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 32px;
+      height: 32px;
+    }
+    .ant-form-item-label {
+      flex-shrink: 0;
+      margin-right: 10px;
+      label {
+        font-size: 16px;
+        font-family: ArialMT;
+        color: #ade6ee;
+        &::after {
+          display: none;
+        }
+      }
+    }
+    .ant-calendar-range-picker-separator {
+      color: white;
+    }
+    .ant-form-item-control-wrapper {
+      width: 100%;
+      // overflow: hidden;
+    }
+  }
+}
+.search-btn {
+  margin-bottom: 10px;
+  img {
+    width: 16px;
+    height: 17px;
+    margin-right: 9px;
+  }
+}
+.ant-pagination {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
 </style>