Merge pull request #71 from jumpserver/orange_tmp

[update]添加根据时间搜索条

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -962,6 +962,11 @@ export default {
       this.innerQuery = attrs
       return this.getList()
     },
+    searchDate(attrs) {
+      this.extraQuery = attrs
+      return this.getList()
+    },
+
     /**
      * 重置查询，相当于点击「重置」按钮
      *

src/components/DataTable/index.vue

@@ -95,6 +95,9 @@ export default {
     getData() {
       return this.$refs.table.data
     },
+    searchDate(attrs) {
+      return this.$refs.table.searchDate(attrs)
+    },
     search(attrs) {
       return this.$refs.table.search(attrs)
     },

src/components/DateTimePicker/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-date-picker
+    v-model="value"
+    type="daterange"
+    :range-separator="this.$t('common.To')"
+    :start-placeholder="this.$t('common.StartDate')"
+    :end-placeholder="this.$t('common.StartDate')"
+    align="center"
+    size="large"
+    value-format="timestamp"
+    :clearable="false"
+    class="datepicker"
+    @change="handleDateChange"
+  />
+</template>
+
+<script>
+export default {
+  name: '',
+  components: {},
+  data() {
+    return {
+      value: ''
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+    handleDateChange(val) {
+      this.$emit('dateChange', val)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+  .datepicker{
+    width: 280px;
+  }
+  .el-input__inner{
+    border: 1px solid #dcdee2;
+    border-radius: 3px;
+    height: 36px;
+  }
+  .el-date-editor /deep/ .el-input__icon{
+    line-height: 28px;
+  }
+  .el-date-editor /deep/ .el-range-separator{
+    line-height: 28px;
+  }
+</style>

src/components/ListTable/TableAction/index.vue

@@ -3,11 +3,13 @@
     <slot name="header">
       <div class="table-header-left-side">
         <LeftSide v-if="hasLeftActions" :selected-rows="selectedRows" :table-url="tableUrl" v-bind="$attrs" v-on="$listeners" />
-        <span v-else>
+        <span v-else style="display: flex;flex-direction: row">
+          <DateTimePicker v-if="hasDatePicker" class="datepicker" @dateChange="handleDateChange" />
           <AutoDataSearch v-if="hasSearch" class="right-side-item action-search" :config="searchConfig" :url="tableUrl" @tagSearch="handleTagSearch" />
         </span>
       </div>
       <div class="table-action-right-side">
+        <DateTimePicker v-if="hasDatePicker && hasLeftActions" class="datepicker" @dateChange="handleDateChange" />
         <AutoDataSearch v-if="hasLeftActions && hasSearch" class="right-side-item action-search" :config="searchConfig" :url="tableUrl" @tagSearch="handleTagSearch" />
         <RightSide v-if="hasRightActions" :selected-rows="selectedRows" :table-url="tableUrl" v-bind="$attrs" v-on="$listeners" />
       </div>
@@ -18,21 +20,24 @@
 <script>
 import AutoDataSearch from '@/components/AutoDataSearch'
 import LeftSide from './LeftSide'
+import DateTimePicker from '@/components/DateTimePicker'
 import RightSide from './RightSide'
 
 const defaultTrue = { type: Boolean, default: true }
-
+const defaultFalse = { type: Boolean, default: false }
 export default {
   name: 'TableAction',
   components: {
     AutoDataSearch,
     LeftSide,
+    DateTimePicker,
     RightSide
   },
   props: {
     hasLeftActions: defaultTrue,
     hasSearch: defaultTrue,
     hasRightActions: defaultTrue,
+    hasDatePicker: defaultFalse,
     searchConfig: {
       type: Object,
       default: () => ({})
@@ -41,6 +46,10 @@ export default {
       type: String,
       default: ''
     },
+    datePick: {
+      type: Function,
+      default: (val) => {}
+    },
     searchTable: {
       type: Function,
       default: (val) => {}
@@ -63,6 +72,9 @@ export default {
   methods: {
     handleTagSearch(val) {
       this.searchTable(val)
+    },
+    handleDateChange(val) {
+      this.datePick(val)
     }
   }
 }
@@ -118,5 +130,8 @@ export default {
     display: block;
     padding: 5px 20px;
   }
+  .datepicker{
+    margin-right: 15px;
+  }
 
 </style>

src/components/ListTable/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <TableAction :table-url="tableConfig.url" :search-table="search" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
+    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable :key="tableConfig.url" ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange" v-on="$listeners" @update="handleDataChange" />
+      <AutoDataTable :key="iTableConfig.url" ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" @update="handleDataChange" />
     </IBox>
   </div>
 </template>
@@ -35,7 +35,14 @@ export default {
   data() {
     return {
       selectedRows: [],
-      init: false
+      init: false,
+      iTableConfig: {
+        extraQuery: {
+          date_from: '',
+          date_to: ''
+        },
+        ...this.tableConfig
+      }
     }
   },
   computed: {
@@ -57,6 +64,17 @@ export default {
     search(attrs) {
       return this.dataTable.search(attrs)
     },
+    handleDateChange(attrs) {
+      console.log(attrs)
+      this.iTableConfig.extraQuery = {
+        date_from: attrs[0],
+        date_to: attrs[1]
+      }
+      return this.dataTable.searchDate({
+        date_from: attrs[0],
+        date_to: attrs[1]
+      })
+    },
     toggleRowSelection(row, isSelected) {
       return this.dataTable.toggleRowSelection(row, isSelected)
     },

src/i18n/langs/cn.json

@@ -155,6 +155,9 @@
     "Info": "提示",
     "Members": "成员",
     "More": "更多",
+    "StartDate": "开始日期",
+    "EndDate": "结束日期",
+    "To": "至",
     "MoreActions": "更多操作",
     "Name": "名称",
     "NoData": "暂无数据",

src/i18n/langs/en.json

@@ -136,6 +136,9 @@
     "Activate": "Activate",
     "Active": "Active",
     "Add": "Add",
+    "StartDate": "Start date",
+    "EndDate": "End date",
+    "To": "To",
     "Auth": "Authorization",
     "Basic": "Basic",
     "BasicInfo": "Basic info",

src/views/sessions/CommandList.vue

@@ -69,7 +69,8 @@ export default {
       headerActions: {
         hasLeftActions: false,
         hasImport: false,
-        hasExport: false
+        hasExport: false,
+        hasDatePicker: true
       }
     }
   }

src/views/sessions/SessionList/BaseList.vue

@@ -99,7 +99,8 @@ export default {
         hasLeftActions: false,
         hasExport: false,
         hasImport: false,
-        hasRefresh: false
+        hasRefresh: false,
+        hasDatePicker: true
       }
     }
   }