UA 日志修改 表格时间段搜索

he wei

2022-07-21 812e7c697cf31e798abe6bb58148a76c661e89f7

UA 日志修改 表格时间段搜索

 src/components/datetimeRange/datetimeRange.vue

New file
@@ -0,0 +1,91 @@
<template>
  <div>
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="Start"
      :open="startOpen"
      size="small"
      @openChange="handleStartOpenChange"
      @change="change"
    />
    -
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="End"
      :open="endOpen"
      size="small"
      @change="change"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      startOpen: false,
      endOpen: false,
    };
  },
  props: ['value'],
  model: {
    prop: 'value',
    event: 'change'
  },
  watch: {
    value(newV) {
      this.resultData = newV;
    }
  },
  computed: {
    resultData: {
      get () {
        return [this.startValue, this.endValue];
      },
      set (value) {
        this.startValue = value[0];
        this.endValue = value[1];
      }
    }
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      this.startOpen = open;
      if (!open && !this.endValue) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
      // if (!open && !this.startValue) {
      //   this.startOpen = true;
      // }
    },
    change() {
      this.$emit('change', this.resultData);
    }
  },
};
</script>

 src/components/datetimeRange/index.js

New file
@@ -0,0 +1,2 @@
import datetimeRange from './datetimeRange'
export default datetimeRange

 src/components/table/advance/SearchArea.vue

@@ -34,12 +34,19 @@
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
        <a-date-picker :format="col.search.format" v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
      </div>
      <div v-else-if="col.dataType === 'datetimeRange'" :class="['title', {active: col.search.value && (col.search.value[0] || col.search.value[1])}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
        <datetime-range v-model="col.search.value" @change="onDateRangeChange(col)"></datetime-range>
      </div>
      <div v-else-if="col.dataType === 'select'" :class="['title', {active: col.search.value !== undefined}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
        <a-select :showSearch="true" :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small" :get-popup-container="() => $refs.selectRoot">
        <a-select :showSearch="true" :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small" :get-popup-container="() => $refs.selectRoot" style="width: 8em;">
        </a-select>
      </div>
      <div v-else :class="['title', {active: col.search.value}]">
@@ -67,11 +74,15 @@
<script>
  import fastEqual from 'fast-deep-equal'
  import moment from 'moment'
  import datetimeRange from '@/components/datetimeRange'

  export default {
    name: 'SearchArea',
    props: ['columns', 'formatConditions'],
    inject: ['table'],
    components: {
      datetimeRange
    },
    created() {
      this.formatColumns(this.columns)
    },
@@ -159,6 +170,14 @@
          backupAndEmitChange(col, moment(value))
        }
      },
      onDateRangeChange(col) {
        const {momentEqual, backupAndEmitChange} = this
        let {value, backup, format} = col.search
        backup = backup || [undefined, undefined];
        if (!momentEqual(value[0], backup[0], format) || !momentEqual(value[1], backup[1], format)) {
          backupAndEmitChange(col, value)
        }
      },
      getFormat(col) {
        if (col.search && col.search.format) {
          return col.search.format
@@ -168,6 +187,7 @@
          case 'time': return 'HH:mm:ss'
          case 'date': return 'YYYY-MM-DD'
          case 'datetime': return 'YYYY-MM-DD HH:mm:ss'
          case 'datetimeRange': return 'YYYY-MM-DD HH:mm:ss'
          default: return undefined
        }
      },

 src/pages/system/logs/list.vue

@@ -1,5 +1,4 @@
<template>
  <a-card>
    <div>
      <!-- title="用户列表" -->
      <advance-table
@@ -7,7 +6,7 @@
        :data-source="dataSource"
        :loading="loading"
        title="日志"
        rowKey="id"
        rowKey="num"
        @search="onSearch"
        @refresh="onRefresh"
        :format-conditions="true"
@@ -27,7 +26,6 @@
      >
      </advance-table>
    </div>
  </a-card>
</template>

<script>
@@ -52,6 +50,7 @@
        {
          title: "操作时间",
          searchAble: true,
          dataType: "datetimeRange",
          dataIndex: "oprateDay",
        },
        {
@@ -81,13 +80,19 @@
      this.loading = true;
      const { pageCurr, pageSize, conditions } = this;
      let params = {};
      // console.log(conditions, '=========')
      Object.keys(conditions).forEach((v) => {
        switch (v) {
          case 'operationTypeStr':
            params['oprateType'] = conditions[v];
            break;
          case 'drole,roleName':
            params['roleId'] = conditions[v];
          case 'oprateDay':
            if (conditions[v][0]) {
              params['oprateDay'] = conditions[v][0].format('YYYY-MM-DD HH:mm:ss');
            }
            if (conditions[v][1]) {
              params['oprateDay2'] = conditions[v][1].format('YYYY-MM-DD HH:mm:ss');
            }
            break;
          default:
            params[v] = conditions[v];