CN-599 feat: 新报告大部分功能

src/assets/css/components/components/rightBox/report/builtinReportBox.scss

@@ -1,6 +1,13 @@
 .right-box.right-box-report {
   .right-box__container {
     .container__form {
+      .el-checkbox {
+        margin-right: 24px;
+        line-height: 28px;
+      }
+      .el-checkbox-group {
+        line-height: 28px;
+      }
       .el-height.el-form-item {
         margin-bottom: 18px;
         .el-form-item__content {
@@ -19,6 +26,7 @@
           border: 1px solid #E7EAED;
           border-right: none;
           line-height: 32px;
+          color: #333;
         }
         .enable-tabs:nth-of-type(4) {
           border-right: 1px solid #E7EAED;
@@ -26,17 +34,16 @@
         .enable-tabs.active {
           border: 1px solid #1890FF;
           border-radius: 2px;
+          color: #1890FF;
+        }
+        .enable-tabs.disable {
+          cursor: not-allowed;
         }
       }
       .enable-tabs-per-month {
         margin-top: 10px;
         .enable-month-tab {
           display: flex;
-          .el-checkbox {
-            height: 32px;
-            line-height: 32px;
-            margin-left: 14px;
-          }
           .enable-month-tabs {
             height: 32px;
             width: 290px;
@@ -44,6 +51,7 @@
             border: 1px solid #E7EAED;
             border-right: none;
             line-height: 32px;
+            color: #333;
           }
           .enable-month-tabs:nth-of-type(2) {
             border-right: 1px solid #E7EAED;
@@ -51,58 +59,36 @@
           .enable-month-tabs.active {
             border: 1px solid #1890FF;
             border-radius: 2px;
+            color: #1890FF;
+          }
+          .enable-month-tabs.disable {
+            cursor: not-allowed;
+          }
+          .el-checkbox {
+            padding-left: 10px;
+            margin-right: 0;
           }
         }
         .enable-month-data-tab {
           margin-bottom: 20px;
-          .enable-month-data-tabs {
-            .el-checkbox-group {
-              width: calc(100% + 20px);
-              .el-checkbox:nth-of-type(10) {
-                margin-right: 0;
-              }
-              .el-checkbox {
-                height: 20px;
-                width: 36px;
-                line-height: 20px;
-              }
-            }
-          }
           .enable-month-value {
-            width: 393px;
-            height: 17px;
             font-size: 12px;
             color: #666666;
-            letter-spacing: 0;
+            height: 16px;
-            font-weight: 400;
+            line-height: 16px;
           }
         }
       }
-      .enable-month-moon {
+      .enable-month-moon-custom, .enable-tabs-custom {
-        .enable-month-moon-custom {
+        height: 32px;
-          height: 30px;
+        line-height: 40px;
+        color: #666;
       }
-        .enable-month-all {
+      .enable-month-all, .enable-month-data-tabs {
         display: flex;
-          .enable-month-all-months.el-checkbox {
-            margin-right: 20px;
-          }
       }
       .enable-month-week {
         display: flex;
-          .enable-month-week-all.el-checkbox {
-            margin-right: 20px;
-            height: 35px;
-            line-height: 35px;
-          }
-          .el-checkbox-group {
-            width: calc(100% - 52px);
-            height: 35px;
-            .el-checkbox {
-              line-height: 35px;
-            }
-          }
-        }
       }
       .el-input-single {
         width: 200px;
@@ -111,6 +97,12 @@
         .el-input__inner {
           text-align: center;
         }
+        .el-input-group__prepend, .el-input-group__append {
+          padding: 0 10px;
+          i {
+            font-size: 12px;
+          }
+        }
       }
       .right-box__select-single {
         width: 430px;

src/components/rightBox/report/ReportBox.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="right-box right-box-report">
+    <div class="right-box__header">
+      <div class="header__title">{{editObject.id ? $t('report.editReport') : $t('report.createReport')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label="$t('report.name')" prop="name">
+            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+          </el-form-item>
+          <!--time limit-->
+          <el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.config.timeConfig.type"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       :disabled="!!editObject.id"
+                       placeholder=""
+                       popper-class="right-box-select-dropdown right-box-select-report "
+                       size="small">
+              <template v-for="time in timeRuleList" :key="time.value">
+                <el-option :label="time.name" :value="time.value"></el-option>
+              </template>
+            </el-select>
+            <template v-if="editObject.config.timeConfig.type === 'this'">
+              <el-select id="reportBoxTimeUnitSelect"
+                         :disabled="!!editObject.id"
+                         v-model="editObject.config.timeConfig.unit"
+                         class="right-box__select"
+                         clearable
+                         collapse-tags
+                         placeholder=""
+                         popper-class="right-box-select-dropdown right-box-select-report "
+                         size="small"
+                         @change="()=>{ this.$forceUpdate() }">
+                <template v-for="time in timeUnitList" :key="time.value">
+                  <el-option :label="time.name" :value="time.value"></el-option>
+                </template>
+              </el-select>
+            </template>
+            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
+              <el-input v-model="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder="" :disabled="!!editObject.id">
+                <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
+                <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
+              </el-input>
+              <el-select id="reportBoxTimeUnitSelect"
+                         v-model="editObject.config.timeConfig.unit"
+                         class="right-box__select right-box__select-single"
+                         clearable
+                         collapse-tags
+                         :disabled="!!editObject.id"
+                         placeholder=""
+                         popper-class="right-box-select-dropdown  el-select-last"
+                         size="small"
+                         @change="()=>{ this.$forceUpdate() }">
+                <template v-for="time in timeUnitList" :key="time.value">
+                  <el-option :label="time.name" :value="time.value"></el-option>
+                </template>
+              </el-select>
+            </div>
+          </el-form-item>
+          <!--startTime-->
+          <el-form-item :label="$t('report.dataStartTime')" prop="startTime" v-if="editObject.config.timeConfig.type === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.startTime"
+                    size="small"
+                    :format="dateFormat"
+                    :disabled="!!editObject.id"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder=""
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--endTime-->
+          <el-form-item :label="$t('report.dataEndTime')" prop="endTime" v-if="editObject.config.timeConfig.type === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.endTime"
+                    size="small"
+                    :format="dateFormat"
+                    :disabled="!!editObject.id"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder=""
+                />
+              </div>
+            </div>
+          </el-form-item >
+          <el-form-item class="el-height">
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+          </el-form-item>
+          <!--Enable time schedule-->
+          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
+            <div class="enable-tab">
+              <div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
+            </div>
+            <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
+              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="" style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                <template #append>{{$t('report.day')}}</template>
+              </el-input>
+            </div>
+            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
+              <!-- 每隔几周暂时隐藏 -->
+              <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
+                <template #append>{{$t('report.week')}}</template>
+              </el-input>-->
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
+                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+            <!-- 月 -->
+            <div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
+              <div class="enable-month-tab">
+                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
+                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
+                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
+              </div>
+              <div class="enable-month-data-tab">
+                <!-- 自定义月，循环 -->
+                <template v-if="monthIsCycle">
+                  <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="" style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                    <template #append>{{$t('report.moon')}}</template>
+                  </el-input>
+                </template>
+                <!-- 自定义月，非循环 -->
+                <template v-else>
+                  <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
+                  <div class="enable-month-all">
+                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
+                      <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </template>
+                <!-- 按日期 -->
+                <template v-if="monthScheduleType === 'daily'">
+                  <div class="enable-month-data-tabs">
+                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
+                      <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
+                    </el-checkbox-group>
+                  </div>
+                  <div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
+                </template>
+                <!-- 按周 -->
+                <template v-else-if="monthScheduleType === 'weekly'">
+                  <el-select id="account-input-roleIds"
+                             v-model="editObject.config.schedulerConfig.monthWeekDates"
+                             class="right-box__select"
+                             multiple
+                             placeholder=""
+                             :disabled="!!editObject.id"
+                             popper-class="right-box-select-dropdown right-box-select-report "
+                             size="small"
+                             @change="()=>{ this.$forceUpdate() }">
+                    <template v-for="time in weekOptions" :key="time.value">
+                      <el-option :label="time.name" :value="time.value"></el-option>
+                    </template>
+                  </el-select>
+                  <div class="enable-month-week">
+                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
+                      <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </el-form-item>
+          <!--生效时间-->
+          <el-form-item :label="$t('report.effectiveTime')" prop="schedulerStart" v-if="scheduleChecked">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.schedulerStart"
+                    size="small"
+                    :format="dateFormat"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder=""
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--失效时间-->
+          <el-form-item :label="$t('report.expiryTime')" prop="schedulerEnd" v-if="scheduleChecked">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.schedulerEnd"
+                    size="small"
+                    :format="dateFormat"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder=""
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--categoryType-->
+          <el-form-item :label="$t('report.categoryType')" prop="categoryType">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.categoryId"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       :disabled="!!editObject.id"
+                       popper-class="right-box-select-dropdown right-box-select-report "
+                       size="small"
+                       @change="typeChange">
+              <template v-for="category in categoryList" :key="category.id">
+                <el-option :label="category.name" :value="category.id"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import rightBoxMixin from '@/mixins/right-box'
+import { storageKey, report } from '@/utils/constants'
+import { api } from '@/utils/api'
+import _ from 'lodash'
+import { post, put } from '@/utils/http'
+import { getMillisecond } from '@/utils/date-util'
+
+export default {
+  name: 'ReportBox',
+  mixins: [rightBoxMixin],
+  props: {
+    categoryList: Array
+  },
+  data () {
+    return {
+      url: api.reportTemp,
+
+      storageKey,
+      timeRuleList: report.timeRuleList,
+      timeUnitList: report.timeUnitList,
+      scheduleTypeList: report.scheduleTypeList,
+      weekdayList: report.weekdayList,
+      monthList: report.monthList,
+      weekOptions: report.weekOptions,
+      dateList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
+
+      dateFormat: localStorage.getItem(storageKey.dateFormat),
+
+      scheduleChecked: false,
+      scheduleType: '',
+      monthScheduleType: 'daily', // daily  weekly
+
+      monthIsCycle: true,
+      dateCheckedAll: false,
+      dateIsIndeterminate: false,
+      monthCheckedAll: false,
+      monthIsIndeterminate: false,
+      monthWeekdayCheckedAll: false,
+      monthWeekdayIsIndeterminate: false,
+
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    scheduleType (n, o) {
+      this.editObject.config.schedulerConfig.type = n
+    },
+    scheduleChecked (n) {
+      this.editObject.config.isScheduler = n ? 1 : 0
+    },
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.editObject = JSON.parse(JSON.stringify(n))
+        this.scheduleChecked = this.editObject.config.isScheduler === 1
+        if (n.config.schedulerConfig && n.config.schedulerConfig.type) {
+          this.scheduleType = n.config.schedulerConfig.type
+        }
+      }
+    }
+  },
+  methods: {
+    timeOffsetHandle (type) {
+      if (type === 'p') {
+        if (_.isNumber(this.editObject.config.timeConfig.offset)) {
+          this.editObject.config.timeConfig.offset++
+        } else {
+          this.editObject.config.timeConfig.offset = 1
+        }
+      } else if (type === 'm') {
+        if (_.isNumber(this.editObject.config.timeConfig.offset)) {
+          this.editObject.config.timeConfig.offset--
+        }
+      }
+    },
+    typeChange (id) {
+
+    },
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+
+      this.$refs.userForm.validate((valid) => {
+        let startTime = ''
+        let endTime = ''
+        let schedulerStart = ''
+        let schedulerEnd = ''
+        if (this.editObject.config && this.editObject.config.startTime) {
+          startTime = getMillisecond(this.editObject.config.startTime)
+        }
+        if (this.editObject.config && this.editObject.config.endTime) {
+          endTime = getMillisecond(this.editObject.config.endTime)
+        }
+        if (this.editObject.schedulerStart) {
+          schedulerStart = getMillisecond(this.editObject.schedulerStart)
+        }
+        if (this.editObject.schedulerEnd) {
+          schedulerEnd = getMillisecond(this.editObject.schedulerEnd)
+        }
+
+        console.info(this.editObject.config)
+        const copyObject = _.cloneDeep(this.editObject)
+        if (startTime) {
+          copyObject.config.startTime = startTime
+        }
+        if (endTime) {
+          copyObject.config.endTime = endTime
+        }
+        if (schedulerStart) {
+          copyObject.schedulerStart = schedulerStart
+        }
+        if (schedulerEnd) {
+          copyObject.schedulerEnd = schedulerEnd
+        }
+        copyObject.config = JSON.stringify(copyObject.config)
+        if (valid) {
+          if (copyObject.id) {
+            put(this.url, copyObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, copyObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.blockOperation.save = false
+          return false
+        }
+      })
+    },
+    dateCheckAllChange (checked) {
+      this.editObject.config.schedulerConfig.monthDates = checked ? this.dateList : []
+      this.dateIsIndeterminate = false
+    },
+    monthCheckAllChange (checked) {
+      this.editObject.config.schedulerConfig.months = checked ? this.monthList.map(m => m.value) : []
+      this.monthIsIndeterminate = false
+    },
+    monthWeekdayCheckAllChange (checked) {
+      this.editObject.config.schedulerConfig.weekDates = checked ? this.weekdayList.map(m => m.value) : []
+      this.monthWeekdayIsIndeterminate = false
+    },
+    dateCheckChange (val) {
+      const checkedCount = val.length
+      this.dateCheckedAll = checkedCount === this.dateList.length
+      this.dateIsIndeterminate = checkedCount > 0 && checkedCount < this.dateList.length
+    },
+    monthCheckChange (val) {
+      const checkedCount = val.length
+      this.monthCheckedAll = checkedCount === this.monthList.length
+      this.monthIsIndeterminate = checkedCount > 0 && checkedCount < this.monthList.length
+    },
+    monthWeekdayCheckChange (val) {
+      const checkedCount = val.length
+      this.monthWeekdayCheckedAll = checkedCount === this.weekdayList.length
+      this.monthWeekdayIsIndeterminate = checkedCount > 0 && checkedCount < this.weekdayList.length
+    }
+  }
+}
+</script>

src/components/rightBox/report/reportTestBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-report">
+  <div class="right-box right-box-report">
     <div class="right-box__header">
       <div class="header__title">{{editObject.id ? $t('report.editBuiltin') : $t('report.createBuiltin')}}</div>
       <div class="header__operation">

src/components/rightBox/settings/ChartBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
+  <div class="right-box right-box-user">
     <div class="right-box__header">
       <div class="header__title">{{editObject.id ? $t('config.chart.edit') : $t('config.chart.add')}}</div>
       <div class="header__operation">

src/components/rightBox/settings/GalaxyProxyBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editObject, func: esc}" class="right-box">
+  <div class="right-box">
     <div class="right-box__header">
       <div class="header__title">{{editObject.id ? $t('overall.edit') : $t('overall.new')}}</div>
       <div class="header__operation">

src/components/rightBox/settings/I18nBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
+  <div class="right-box right-box-user">
     <div class="right-box__header">
       <div class="header__title">{{editObject.id ? $t('config.i18n.edit') : $t('config.i18n.add')}}</div>
       <div class="header__operation">

src/components/rightBox/settings/RoleBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editRole, func: esc}" class="right-box right-box-role">
+  <div class="right-box right-box-role">
     <div class="right-box__header">
       <div class="header__title">{{editRole.id ? $t('config.roles.editRole') : $t('config.roles.createRole')}}</div>
       <div class="header__operation">

src/components/rightBox/settings/UserBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
+  <div class="right-box right-box-user">
     <div class="right-box__header">
       <div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
       <div class="header__operation">

src/components/table/report/reportTestTable.vue

@@ -1,16 +1,18 @@
 <template>
   <el-table
-      id="userTable"
+      id="reportTable"
       ref="dataTable"
       :data="tableData"
       :height="height"
       border
+      tooltip-effect="light"
+      :expand-row-keys="expandedIds"
       @header-dragend="dragend"
       @sort-change="tableDataSort"
       @expand-change="dropExpandChange"
       @selection-change="selectionChange"
   >
-    <el-table-column type="expand">
+    <el-table-column type="expand" width="30">
       <template #default="props">
         <div class="down">
           <loading :loading="loadingDown"></loading>
@@ -21,16 +23,20 @@
                 :format="format"
                 type="datetimerange"
                 range-separator="To"
-                start-placeholder="Start date"
+                :start-placeholder="$t('detections.startTime')"
-                end-placeholder="End date"
+                :end-placeholder="$t('detections.endTime')"
-                @change="datePickerChange(props)"
+                @change="datePickerChange(props.row)"
             />
           </div>
           <div class="expand">
             <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
               <div class="expand-right">
                 <div class="demo-progress">
-                  <el-progress type="circle" :percentage="item.percent" :color="item.percent === 100 ? '#5cb87a' : '#1989fa'" />
+                  <el-progress type="circle" :percentage="item.percent * 100" :color="item.percent === 1 ? '#21bf9a' : '#50b3ef'">
+                    <template #default="{ percentage }">
+                      <span style="font-size: 0.875rem;">{{ percentage }}%</span>
+                    </template>
+                  </el-progress>
                 </div>
               </div>
               <div class="expand-left">
@@ -66,7 +72,6 @@
                 ref="pagination"
                 :page-obj="pageObj"
                 @pageJump="pageJump"
-                :pageSizeForAlarm="pageObj.pageSize"
             ></chart-detection-pagination>
           </div>
         </div>
@@ -76,7 +81,7 @@
         :resizable="false"
         align="center"
         type="selection"
-        width="55">
+        width="30">
     </el-table-column>
     <el-table-column
         v-for="(item, index) in customTableTitles"
@@ -86,6 +91,7 @@
         :min-width="`${item.minWidth}`"
         :prop="item.prop"
         :resizable="true"
+        :show-overflow-tooltip="item.prop === 'timePlan'"
         :sort-orders="['ascending', 'descending']"
         :sortable="item.sortable"
         :width="`${item.width}`"
@@ -96,12 +102,18 @@
       </template>
       <template #default="scope" :column="item">
         <span v-if="item.prop === 'timeLimit'">
-          {{scope.row.config.timeConfig.type}}
+          {{handleTimeRange(scope.row)}}
         </span>
-        <span v-else-if="item.prop === 'utime'">
+        <span v-else-if="item.prop === 'timePlan'">
-          {{dateFormatByAppearance(scope.row.utime)}}
+          {{(scope.row.config && scope.row.config.schedulerConfig) || '-'}}
         </span>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else-if="item.prop === 'userName'">
+          {{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
+        </span>
+        <span v-else-if="item.prop === 'lastExecutionTime'">
+          {{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
+        </span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
     <el-table-column
@@ -115,12 +127,6 @@
         <div class="table-operation-items">
           <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
           <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
-          <!--          <div class="table-operation-item&#45;&#45;no-border" @click="tableOperation(['rerun', scope.row])">
-                      <loading :loading="loadingPreviewId === scope.row.id"></loading>
-                      <svg class="icon2" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                        <use xlink:href="#cn-icon-refresh"></use>
-                      </svg>
-                    </div>-->
         </div>
       </template>
     </el-table-column>
@@ -163,42 +169,44 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          minWidth: 80
+          width: 40
         }, {
           label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
+          minWidth: 200,
           sortable: 'custom'
         }, {
           label: this.$t('report.timeLimit'),
           prop: 'timeLimit',
-          show: true
+          show: true,
+          minWidth: 110
         }, {
           label: this.$t('report.timePlan'),
-          prop: 'type',
+          prop: 'timePlan',
           show: true,
           minWidth: 110
         }, {
           label: this.$t('report.operationUserName'),
           prop: 'userName',
           show: true,
-          minWidth: 170
+          minWidth: 70
         }, {
           label: this.$t('report.resultCount'),
-          prop: 'resultCount',
+          prop: 'total',
           show: true,
-          minWidth: 130
+          minWidth: 50
-        }, {
+        }, /*{
           label: this.$t('report.lastModified'),
           prop: 'utime',
           show: true,
           minWidth: 150,
           sortable: 'custom'
-        }, {
+        }, */{
           label: this.$t('report.lastExecutionTime'),
-          prop: 'lastExecutionTime',
+          prop: 'lastTime',
           show: true,
-          minWidth: 200,
+          width: 170,
           sortable: 'custom'
         }
       ],
@@ -214,9 +222,24 @@ export default {
       downDataList: [],
       pageObj: {
         pageNo: 1,
-        pageSize: 30,
+        pageSize: 20,
         total: 0,
         resetPageNo: true
+      },
+      expandedIds: []
+    }
+  },
+  computed: {
+    handleTimeRange () {
+      return function (row) {
+        let str = ''
+        if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
+          str += row.config.timeConfig.type
+          if (row.config.timeConfig.offset) {
+            str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}`
+          }
+        }
+        return str
       }
     }
   },
@@ -243,25 +266,32 @@ export default {
         this.$refs.dataTable.clearSelection()
       }
     },
-    dropExpandChange (row, rows) {
+    dropExpandChange (row, expandedRows) {
-      const isExpand = rows.some(t => t.id === row.id)
+      this.expandedIds = []
-      if (isExpand) {
+      if (expandedRows.length > 0 && row) {
-        this.dropDownQueryChange({ tempId: row.id })
+        this.expandedIds.push(row.id)
+        this.datePickerChange(row)
       }
     },
-    datePickerChange (props) {
+    datePickerChange (row) {
-      const row = {
+      const param = {
-        tempId: props.row.id,
+        tempId: row.id,
         startTime: getSecond(new Date(this.value[0]).getTime()),
-        endTime: getSecond(new Date(this.value[1]).getTime())
+        endTime: getSecond(new Date(this.value[1]).getTime()),
+        ...this.pageObj
       }
-      this.dropDownQueryChange(row)
+      this.dropDownQueryChange(param)
     },
-    dropDownQueryChange (row) {
+    dropDownQueryChange (param) {
       this.loadingDown = true
-      get(api.reportJob, row).then(res => {
+      this.downDataList = []
+      get(api.reportJob, param).then(res => {
         if (res.code === 200) {
           this.downDataList = res.data.list
+          this.pageObj.total = res.data.total
+          this.$nextTick(() => {
+            this.$refs.dataTable.doLayout()
+          })
         }
         this.loadingDown = false
       })

src/mixins/data-list.js

@@ -94,7 +94,7 @@ export default {
             this.tableData = response.data.list.map(item => {
               return {
                 ...item,
-                config: JSON.parse(item.config)
+                config: item.config ? JSON.parse(item.config) : {}
               }
             })
           } else {

src/utils/date-util.js

@@ -1,16 +1,6 @@
 import _ from 'lodash'
 import { storageKey } from '@/utils/constants'
-// 获取初始化时间
+
-/* Date.prototype.setStart = function () {
-  this.setHours(0)
-  this.setMinutes(0)
-  this.setSeconds(0)
-}
-Date.prototype.setEnd = function () {
-  this.setHours(23)
-  this.setMinutes(59)
-  this.setSeconds(59)
-} */
 // 将时间转化为秒
 export function getSecond (time) {
   const ms = getMillisecond(time)
@@ -20,17 +10,23 @@ export function getSecond (time) {
 export function getMillisecond (time) {
   let ms = null
   if (_.isDate(time)) {
-    ms = time.getTime()
+    ms = window.$dayJs.tz(new Date(time)).valueOf()
   } else if (_.isNumber(time)) {
     const timeStr = _.toString(time)
     const difference = timeStr.length - 13
     if (difference >= 0) {
-      ms = timeStr.slice(0, 13)
+      ms = window.$dayJs.tz(new Date(Number(timeStr.slice(0, 13)))).valueOf()
     } else {
-      ms = Math.floor(time * (10 ** (0 - difference)))
+      ms = window.$dayJs.tz(new Date(Math.floor(time * (10 ** (0 - difference))))).valueOf()
+    }
+  } else if (_.isString(time)) {
+    try {
+      ms = window.$dayJs.tz(new Date(time)).valueOf()
+    } catch (e) {
+      ms = null
     }
   }
-  return ms ? Number(ms) : null
+  return ms || null
 }
 // 初始化日期
 export function getNowTime (interval) {

src/utils/tools.js

@@ -277,74 +277,6 @@ export const cancelWithChange = {
     delete el.__vueDomClick__
   }
 }
-/* clickOutside指令 */
-const exceptClassName = ['prevent-click-outside'] // clickOutside排除的class(白名单)
-export const clickOutside = {
-  // 初始化指令
-  beforeMount (el, binding) {
-    /* let oldValue
-    try {
-      oldValue = JSON.parse(JSON.stringify(binding.value.object))
-    } catch (e) {
-
-    } */
-    function documentHandler (e) {
-      if (el.contains(e.target)) {
-        return false
-      } else {
-        let flag = true
-        const path = e.path || (e.composedPath && e.composedPath())
-        // eslint-disable-next-line no-labels
-        top: for (let i = 0; i < path.length; i++) {
-          for (let j = 0; j < exceptClassName.length; j++) {
-            if (path[i].className && path[i].className.indexOf(exceptClassName[j]) !== -1) {
-              flag = false
-              // eslint-disable-next-line no-labels
-              break top
-            }
-          }
-        }
-        if (!flag) {
-          return false
-        }
-        binding.value()
-        /* if (oldValue) {
-          const newValue = JSON.parse(JSON.stringify(binding.value.oldValue))
-          if (!isEqual(oldValue, newValue)) {
-            ElMessageBox.confirm('Confirm？', { // TODO 国际化
-              confirmButtonText: 'Yes', // TODO 国际化
-              cancelButtonText: 'No', // TODO 国际化
-              type: 'warning'
-            }).then(() => {
-              if (binding.value.func) {
-                binding.value.func()
-              }
-            })
-          } else {
-            binding.value.func()
-          }
-        } else {
-          if (binding.arg) {
-            binding.value(e, binding.arg)
-          } else {
-            if (binding.value) {
-              binding.value(e)
-            }
-          }
-        } */
-      }
-    }
-
-    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
-    el.__vueClickOutside__ = documentHandler
-    document.addEventListener('click', documentHandler)
-  },
-  unmounted (el, binding) {
-    // 解除事件监听
-    document.removeEventListener('click', el.__vueClickOutside__)
-    delete el.__vueClickOutside__
-  }
-}
 
 function noDataDomFactory () {
   const noDataDom = document.createElement('div')

src/views/report/reportTest.vue

@@ -58,10 +58,9 @@
           :with-header="false"
           :size="700"
           destroy-on-close>
-        <builtin-report-box
+        <report-box
             :object="object"
-            :check-week-list-data="checkWeekListData"
+            :category-list="builtinReportLeftMenu"
-            :check-months-list-data="checkMonthsListData"
             @close="closeRightBox"
         />
       </el-drawer>
@@ -75,7 +74,7 @@ import builtinReportTable from '@/components/table/report/reportTestTable'
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import { api } from '@/utils/api'
-import builtinReportBox from '@/components/rightBox/report/reportTestBox'
+import ReportBox from '@/components/rightBox/report/ReportBox'
 
 export default {
   name: 'Report',
@@ -89,43 +88,38 @@ export default {
         id: '',
         name: '',
         type: '',
-        // config: '',
         source: '',
         cTime: '',
         uTime: '',
-        htmContent: '',
         remark: '',
-        uniq: '',
         config: {
           isRepeat: 0,
+          isScheduler: 0,
           cronExpression: '',
           startTime: '',
           endTime: '',
-          queryConfig: {
+          queryConfig: {},
-            key1: '',
-            key2: ''
-          },
           schedulerConfig: {
-            // type: '',
+            type: 'day',
-            week_dates: [1, 2, 3, 4, 5, 6, 7],
+            weekDates: [],
-            months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            months: [],
-            month_dates: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
+            monthDates: [],
-            month_week_dates: [0, 1, 2, 3, 4, 5, 6],
+            monthWeekDates: [],
             interval: 1
           },
           timeConfig: {
-            type: 'day',
+            type: 'yesterday',
-            offset: 0,
+            offset: 1,
             unit: ''
           }
         },
         schedulerStart: '',
         schedulerEnd: '',
-        category_id: 1
+        categoryId: ''
       },
       checkWeekListData: [
         'report.sunday',
-        'report.onMonday',
+        'report.monday',
         'report.tuesday',
         'report.wednesday',
         'report.thursday',
@@ -153,41 +147,63 @@ export default {
   components: {
     cnDataList,
     builtinReportTable,
-    builtinReportBox
+    ReportBox
   },
   methods: {
     queryGetTempData () {
-      console.log(api.reportCategory)
       get(api.reportCategory).then(res => {
-        this.builtinReportLeftMenu = [
-          { id: 1, name: 'Tencent网络服务质量监测报告(IDC精简版)' },
-          { id: 2, name: '网络服务质量监测报告(IDC精简版)' },
-          { id: 3, name: '出入口整体流量监测报告' },
-          { id: 4, name: '出入口字节跳动流量监测报告' }
-        ]
         if (res.code === 200) {
           this.builtinReportLeftMenu = res.data.list
         }
       })
     },
     builtinTabs (id) {
-      this.getTableData({ tempId: id })
+      this.getTableData({ categoryId: id })
       this.builtinId = id
     },
     edit (u) {
-      get(this.url, { id: u.id, name: u.name }).then(response => {
+      this.initConfig(u)
-        if (response.code === 200) {
+      this.object = u
-          let dataList = []
-          dataList = response.data.list.map(item => {
-            return {
-              ...item,
-              config: JSON.parse(item.config)
-            }
-          })
-          this.object = dataList[0]
       this.rightBox.show = true
+    },
+    initConfig (u) {
+      if (!u.config) {
+        u.config = {
+          isRepeat: 0,
+          cronExpression: '',
+          startTime: '',
+          endTime: '',
+          queryConfig: {},
+          schedulerConfig: {
+            type: 'day',
+            weekDates: [],
+            months: [],
+            monthDates: [],
+            monthWeekDates: [],
+            interval: 1
+          },
+          timeConfig: {
+            type: 'yesterday',
+            offset: 1,
+            unit: ''
+          }
+        }
+      } else if (!u.config.schedulerConfig) {
+        u.config.schedulerConfig = {
+          type: 'day',
+          weekDates: [],
+          months: [],
+          monthDates: [],
+          monthWeekDates: [],
+          interval: 1
+        }
+      } else if (!u.config.timeConfig) {
+        u.config.timeConfig = {
+          type: 'yesterday',
+          offset: 1,
+          unit: ''
+        }
       }
-      })
     }
   },
   mounted () {