feat: 列表刷新，分页

src/components/rightBox/report/reportTestBox.vue

@@ -15,57 +15,91 @@
           </el-form-item>
           <!--time limit-->
           <el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
-            <template v-if="tabNum === 2">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.config.timeConfig.type"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
+                       size="small"
+                       @change="timeLimitChange">
+              <template v-for="time in timeLimit" :key="time.value">
+                <el-option :label="time.name" :value="time.value"></el-option>
+              </template>
+            </el-select>
+            <template v-if="showChange === 'this'">
               <el-select id="account-input-roleIds"
                          v-model="editObject.id"
                          class="right-box__select"
                          clearable
                          collapse-tags
-                         placeholder="select"
-                         popper-class="right-box-select-dropdown prevent-clickoutside"
+                         placeholder=""
+                         popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                          size="small"
                          @change="()=>{ this.$forceUpdate() }">
-                <template v-for="time in perMonthList" :key="time.value">
+                <template v-for="time in latsList" :key="time.value">
                   <el-option :label="time.name" :value="time.value"></el-option>
                 </template>
               </el-select>
             </template>
-            <el-select id="account-input-roleIds"
-                       v-model="editObject.name"
-                       class="right-box__select"
-                       clearable
-                       collapse-tags
-                       placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
-                       @change="()=>{ this.$forceUpdate() }">
-              <template v-for="time in timeLimit" :key="time.value">
-                <el-option :label="time.name" :value="time.value"></el-option>
-              </template>
-            </el-select>
-            <template v-if="tabNum === 3">
-              <el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="Please input">
+            <template v-if="showChange === 'last' || showChange === 'previous'">
+              <el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="">
                 <template #prepend><i @click="add" class="cn-icon cn-icon-a-1"></i></template>
                 <template #append><i @click="piece" class="cn-icon cn-icon-a-"></i></template>
               </el-input>
               <el-select id="account-input-roleIds"
-                         v-model="editObject.id"
+                         v-model="editObject.type"
                          class="right-box__select right-box__select-single"
                          clearable
                          collapse-tags
-                         placeholder="1"
-                         popper-class="right-box-select-dropdown prevent-clickoutside"
+                         placeholder=""
+                         popper-class="right-box-select-dropdown prevent-clickoutside el-select-last"
                          size="small"
                          @change="()=>{ this.$forceUpdate() }">
-                <template v-for="time in timeLimit" :key="time.value">
+                <template v-for="time in latsList" :key="time.value">
                   <el-option :label="time.name" :value="time.value"></el-option>
                 </template>
               </el-select>
             </template>
           </el-form-item>
+          <!--startTime-->
+          <el-form-item :label="$t('report.startTime')" prop="startTime" v-if="showChange === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.startTime"
+                    size="small"
+                    :format="format"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder="Select date and time"
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--endTime-->
+          <el-form-item :label="$t('report.endTime')" prop="endTime" v-if="showChange === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.endTime"
+                    size="small"
+                    :format="format"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder="Select date and time"
+                />
+              </div>
+            </div>
+          </el-form-item >
+          <el-form-item class="el-height">
+            <el-checkbox v-model="scheduleChecked" @change="scheduleCheckedChange" :disabled="showChange === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
+          </el-form-item>
           <!--Enable time schedule-->
-          <el-form-item prop="enableTimeSchedule">
-            <el-checkbox v-model="scheduleChecked" :label="$t('report.enableTimeSchedule')" size="large" />
+          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
             <div class="enable-tab">
               <div class="enable-tabs" @click="enableTabs(0)" :class="{'active': tabNum === 0}">{{$t('report.daily')}}</div>
               <div class="enable-tabs" @click="enableTabs(1)" :class="{'active': tabNum === 1}">{{$t('report.weekly')}}</div>
@@ -83,15 +117,15 @@
               <el-input v-model="week" size="small" placeholder="Please input">
                 <template #append>{{$t('report.week')}}</template>
               </el-input>
-              <el-checkbox-group v-model="checkWeeklyList">
-                <el-checkbox v-for="(item, index) in citiesWeekly" :key="index" :label="item" />
+              <el-checkbox-group v-model="checkWeeklyList" @change="checkWeeklyChange">
+                <el-checkbox v-for="(item, index) in citiesWeekly" :key="index" :label="$t(item)" />
               </el-checkbox-group>
             </div>
             <div class="enable-tabs-per-month" v-if="tabNum === 2">
               <div class="enable-month-tab">
                 <div class="enable-month-tabs" @click="enableMonthTabs(0)" :class="{'active': tabMonthNum === 0}">{{$t('report.date')}}</div>
                 <div class="enable-month-tabs" @click="enableMonthTabs(1)" :class="{'active': tabMonthNum === 1}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="perMonthChecked" @change="checkboxChange" :label="$t('report.cycle')" size="large" />
+                <el-checkbox v-model="perMonthChecked" @change="checkboxCycleChange" :label="$t('report.cycle')" size="large" />
               </div>
               <div class="enable-month-data-tab" v-if="tabMonthNum === 0">
                 <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
@@ -103,7 +137,7 @@
                     <el-checkbox v-model="dateCheckedAll" :indeterminate="isIndeterminateDate" @change="checkAllChange" :label="$t('report.all')" size="large" />
                   </div>
                   <el-checkbox-group v-model="dateList" @change="checkedCitiesChange">
-                    <el-checkbox v-for="(item, index) in citiesDate" :key="index" :label="item" />
+                    <el-checkbox v-for="(item, index) in citiesDate" :key="index" :label="item" @change="(val)=>checkboxChange(val, item)" />
                   </el-checkbox-group>
                 </div>
                 <div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
@@ -113,8 +147,8 @@
                   <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                   <div class="enable-month-all">
                     <el-checkbox v-model="allMonthsChecked" class="enable-month-all-months" :indeterminate="isIndeterminateMonths" @change="checkMonthsAllChange" :label="$t('report.allMonths')" size="large" />
-                    <el-checkbox-group v-model="checkMonthsList">
-                      <el-checkbox v-for="(item, index) in citiesMonths" :key="index" :label="item" @change="checkedMonthsCitiesChange" />
+                    <el-checkbox-group v-model="checkMonthsList" @change="checkedMonthsCitiesChange">
+                      <el-checkbox v-for="(item, index) in citiesMonths" :key="index" :label="$t(item)" />
                     </el-checkbox-group>
                   </div>
                 </template>
@@ -125,11 +159,11 @@
                   </el-input>
                 </template>
                 <el-select id="account-input-roleIds"
-                           v-model="editObject.id"
+                           v-model="editObject.type"
                            class="right-box__select"
                            multiple
-                           placeholder="Select"
-                           popper-class="right-box-select-dropdown prevent-clickoutside"
+                           placeholder=""
+                           popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                            size="small"
                            @change="()=>{ this.$forceUpdate() }">
                   <template v-for="time in timeLimit" :key="time.value">
@@ -138,8 +172,8 @@
                 </el-select>
                 <div class="enable-month-week">
                   <el-checkbox v-model="checkedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="isIndeterminateWeek" @change="checkWeekAllChange" size="large" />
-                  <el-checkbox-group v-model="checkWeekList" >
-                    <el-checkbox v-for="(item, index) in citiesWeek" @change="checkedWeekCitiesChange" :key="index" :label="item" />
+                  <el-checkbox-group v-model="checkWeekList" @change="checkedWeekCitiesChange">
+                    <el-checkbox v-for="(item, index) in citiesWeek"  :key="index" :label="$t(item)" />
                   </el-checkbox-group>
                 </div>
 
@@ -147,12 +181,12 @@
             </div>
           </el-form-item>
           <!--startTime-->
-          <el-form-item :label="$t('report.startTime')" prop="startTime">
+          <el-form-item :label="$t('report.startTime')" prop="startTime" v-if="scheduleChecked">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
                     style="width: 100%"
-                    v-model="editObject.startTime"
+                    v-model="editObject.schedulerStart"
                     size="small"
                     :format="format"
                     prefix-icon="cn-icon cn-icon-shijian"
@@ -163,12 +197,12 @@
             </div>
           </el-form-item>
           <!--endTime-->
-          <el-form-item :label="$t('report.endTime')" prop="endTime">
+          <el-form-item :label="$t('report.endTime')" prop="endTime" v-if="scheduleChecked">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
                     style="width: 100%"
-                    v-model="editObject.endTime"
+                    v-model="editObject.schedulerEnd"
                     size="small"
                     :format="format"
                     prefix-icon="cn-icon cn-icon-shijian"
@@ -186,7 +220,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                        size="small"
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="time in timeLimit" :key="time.value">
@@ -194,6 +228,14 @@
               </template>
             </el-select>
           </el-form-item>
+<!--          <el-form-item :label="$t('report.categoryType')" prop="categoryType">-->
+<!--            <el-input v-model="editObject.config.queryConfig.key1" placeholder="" size="small">-->
+<!--              <template #prepend>Key</template>-->
+<!--            </el-input>-->
+<!--            <el-input v-model="editObject.config.queryConfig.key2" placeholder="" size="small">-->
+<!--              <template #prepend>Key</template>-->
+<!--            </el-input>-->
+<!--          </el-form-item>-->
         </el-form>
       </div>
     </div>
@@ -211,7 +253,7 @@
 <script>
 import rightBoxMixin from '@/mixins/right-box'
 import { get, post, put } from '@/utils/http'
-import { themeData, langData, storageKey, timeLimit, perMonthList } from '@/utils/constants'
+import { themeData, langData, storageKey, timeLimit, latsList } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 export default {
@@ -227,7 +269,7 @@ export default {
   },
   data () {
     return {
-      url: api.user,
+      url: api.reportTemp,
       loginName: localStorage.getItem(storageKey.username),
       format: localStorage.getItem(storageKey.dateFormat),
       rules: { // 表单校验规则
@@ -237,31 +279,43 @@ export default {
       },
       scheduleChecked: false,
       perMonthChecked: false,
-      tabNum: '',
-      tabMonthNum: '',
+      tabNum: 0,
+      tabMonthNum: 0,
       single: 0,
+      showChange: '',
       themeData,
       langData,
       timeLimit,
-      perMonthList
+      latsList
     }
   },
   setup (props) {
     // weekly
-    const checkWeeklyList = ref([props.checkWeekListData[0]])
+    const checkWeeklyList = ref([])
     let citiesWeekly = ref([])
     citiesWeekly = props.checkWeekListData
+    const checkWeeklyChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.week_dates = val.map((item, index) => { return index + 1 })
+      }
+    }
     // week
-    const checkWeekList = ref([props.checkWeekListData[0]])
+    const checkWeekList = ref([])
     const checkedAll = ref(false)
     const isIndeterminateWeek = ref(true)
     const citiesWeek = ref([])
     citiesWeek.value = props.checkWeekListData
     const checkWeekAllChange = (val) => {
       checkWeekList.value = val ? citiesWeek.value : []
+      if (checkWeekList.value) {
+        props.object.config.schedulerConfig.month_week_dates = checkWeekList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateWeek.value = false
     }
     const checkedWeekCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month_week_dates = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       checkedAll.value = checkedCount === citiesWeek.value.length
       isIndeterminateWeek.value = checkedCount > 0 && checkedCount < citiesWeek.value.length
@@ -273,24 +327,36 @@ export default {
     const citiesDate = [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]
     const checkAllChange = (val) => {
       dateList.value = val ? citiesDate : []
+      if (dateList.value) {
+        props.object.config.schedulerConfig.month_dates = dateList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateDate.value = false
     }
     const checkedCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month_dates = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       dateCheckedAll.value = checkedCount === citiesDate.length
       isIndeterminateDate.value = checkedCount > 0 && checkedCount < citiesDate.length
     }
     // months
-    const checkMonthsList = ref([props.checkMonthsListData[0]])
+    const checkMonthsList = ref([])
     const allMonthsChecked = ref(false)
     const isIndeterminateMonths = ref(true)
     const citiesMonths = ref([])
     citiesMonths.value = props.checkMonthsListData
     const checkMonthsAllChange = (val) => {
       checkMonthsList.value = val ? citiesMonths.value : []
+      if (checkMonthsList.value) {
+        props.object.config.schedulerConfig.month = checkMonthsList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateMonths.value = false
     }
     const checkedMonthsCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       allMonthsChecked.value = checkedCount === citiesMonths.value.length
       isIndeterminateMonths.value = checkedCount > 0 && checkedCount < citiesMonths.value.length
@@ -299,6 +365,7 @@ export default {
       // weekly
       checkWeeklyList,
       citiesWeekly,
+      checkWeeklyChange,
       // week
       checkWeekList,
       citiesWeek,
@@ -330,6 +397,7 @@ export default {
       this.blockOperation.save = true
       this.$refs.userForm.validate((valid) => {
         if (valid) {
+          console.log(this.editObject)
           if (this.editObject.id) {
             put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
@@ -363,9 +431,28 @@ export default {
     enableMonthTabs (num) {
       this.tabMonthNum = num
     },
-    checkboxChange (val) {
+    checkboxCycleChange (val) {
       this.perMonthChecked = val
     },
+    scheduleCheckedChange (val) {
+      this.scheduleChecked = val
+      if (!val) {
+        this.tabNum = ''
+        this.tabMonthNum = ''
+        this.editObject.config.isRepeat = 0
+      } else {
+        this.editObject.config.isRepeat = 1
+      }
+    },
+    timeLimitChange (val) {
+      if (val === 'customize') {
+        this.scheduleChecked = false
+        this.editObject.config.isRepeat = 0
+      } else if (val === 'this') {
+        this.editObject.config.timeConfig.offset = 0
+      }
+      this.showChange = val
+    },
     singleChange (val) {
       this.single = val
     },
@@ -375,6 +462,13 @@ export default {
     piece () {
       if (this.single <= 0) return
       this.single--
+    },
+    checkboxChange (val, item) {
+      if (val) {
+        this.citiesDate.push(item)
+      } else {
+        this.citiesDate = this.citiesDate.filter(item => item !== item)
+      }
     }
   },
   watch: {
@@ -382,6 +476,10 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
+        if (n.id) {
+          this.editObject = n
+          console.log(this.editObject)
+        }
       }
     }
   }

src/components/table/CnDataList.vue

@@ -11,7 +11,7 @@
           <div class="top-tool-right">
 <!--           <el-input v-model="keyWord" value="keyWord"></el-input>
             <el-button @click="onsearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
-            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search" :class="{'margin-r-20': from !== fromRoute.builtinReport}">
+            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
               <div style="display: flex">
                 <el-input
                     v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>

src/components/table/report/reportTestTable.vue

@@ -7,147 +7,68 @@
       border
       @header-dragend="dragend"
       @sort-change="tableDataSort"
+      @expand-change="dropExpandChange"
       @selection-change="selectionChange"
   >
     <el-table-column type="expand">
       <template #default="props">
-        <div class="expand">
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
+        <div class="down">
+          <loading :loading="loadingDown"></loading>
+          <div class="block drop-down-time">
+            <el-date-picker
+                v-model="value"
+                size="small"
+                :format="format"
+                type="datetimerange"
+                range-separator="To"
+                start-placeholder="Start date"
+                end-placeholder="End date"
+                @change="datePickerChange(props)"
+            />
+          </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'" />
                 </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
+              </div>
+              <div class="expand-left">
+                <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
+                <div class="expand-time">
+                  <div>{{ $t('report.creationTime') }}</div>
+                  <div>{{dateFormatByAppearance(item.ctime)}}</div>
                 </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
+                <div class="expand-icon">
+                  <div class="table-operation-item--no-border" @click="tableOperation(['download', item])">
+                    <loading :loading="loadingTableId === item.id"></loading>
+                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
+                      <use xlink:href="#cn-icon-download2"></use>
+                    </svg>
+                  </div>
+                  <div class="table-operation-item--no-border" @click="tableOperation(['preview', item])">
+                    <loading :loading="loadingPreviewId === item.id"></loading>
+                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                      <use xlink:href="#cn-icon-preview"></use>
+                    </svg>
+                  </div>
+                  <div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#cn-icon-shanchu"></use>
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>
-          </dov>
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
+          </div>
+          <div class="cn-detection__footer">
+            <chart-detection-pagination
+                ref="pagination"
+                :page-obj="pageObj"
+                @pageJump="pageJump"
+                :pageSizeForAlarm="pageObj.pageSize"
+            ></chart-detection-pagination>
+          </div>
         </div>
       </template>
     </el-table-column>
@@ -174,20 +95,14 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <span v-if="item.prop === 'dataRange'">
-          <template v-if="scope.row.startTime && scope.row.endTime">
-            {{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
-          </template>
+        <span v-if="item.prop === 'timeLimit'">
+          {{scope.row.config.timeConfig.type}}
         </span>
-        <span v-else-if="item.prop === 'type'">
-            {{scope.row.reportTemp.name}}
-        </span>
-        <span v-else-if="item.prop === 'state'">
-            {{getJobStatus(scope.row)}}
+        <span v-else-if="item.prop === 'utime'">
+          {{dateFormatByAppearance(scope.row.utime)}}
         </span>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
-
     </el-table-column>
     <el-table-column
         :resizable="false"
@@ -197,7 +112,7 @@
         <div class="table-operation-title">{{$t('overall.option')}}</div>
       </template>
       <template #default="scope">
-        <div class="table-operation-items" v-if="scope.row.state === 1">
+        <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])">
@@ -225,19 +140,30 @@
 <script>
 import table from '@/mixins/table'
 import Loading from '@/components/common/Loading'
+import { del, get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { storageKey } from '@/utils/constants'
+import { ref } from 'vue'
+import { getSecond } from '@/utils/date-util'
+import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 export default {
   name: 'builtinReportTable',
   mixins: [table],
   components: {
-    Loading
+    Loading,
+    chartDetectionPagination
   },
+  inject: ['reload'],
   data () {
     return {
+      format: localStorage.getItem(storageKey.dateFormat),
+      username: localStorage.getItem(storageKey.username),
       tableTitle: [ // 原始table列
         {
           label: 'ID',
           prop: 'id',
-          show: true
+          show: true,
+          minWidth: 80
         }, {
           label: this.$t('config.user.name'),
           prop: 'name',
@@ -249,29 +175,30 @@ export default {
           show: true
         }, {
           label: this.$t('report.timePlan'),
-          prop: 'timePlan',
+          prop: 'type',
           show: true,
           minWidth: 110
         }, {
           label: this.$t('report.operationUserName'),
-          prop: 'operationUserName',
-          show: true
+          prop: 'userName',
+          show: true,
+          minWidth: 170
         }, {
           label: this.$t('report.resultCount'),
           prop: 'resultCount',
           show: true,
-          width: 130
+          minWidth: 130
         }, {
           label: this.$t('report.lastModified'),
-          prop: 'LastModified',
+          prop: 'utime',
           show: true,
-          width: 130,
+          minWidth: 150,
           sortable: 'custom'
         }, {
           label: this.$t('report.lastExecutionTime'),
           prop: 'lastExecutionTime',
           show: true,
-          width: 130,
+          minWidth: 200,
           sortable: 'custom'
         }
       ],
@@ -281,9 +208,16 @@ export default {
       builtinId: '',
       indeterminate: false,
       loading: false,
+      loadingDown: false,
       loadingTableId: '',
       loadingPreviewId: '',
-      percentage: 80
+      downDataList: [],
+      pageObj: {
+        pageNo: 1,
+        pageSize: 30,
+        total: 0,
+        resetPageNo: true
+      }
     }
   },
   methods: {
@@ -308,6 +242,55 @@ export default {
       } else {
         this.$refs.dataTable.clearSelection()
       }
+    },
+    dropExpandChange (row, rows) {
+      const isExpand = rows.some(t => t.id === row.id)
+      if (isExpand) {
+        this.dropDownQueryChange({ tempId: row.id })
+      }
+    },
+    datePickerChange (props) {
+      const row = {
+        tempId: props.row.id,
+        startTime: getSecond(new Date(this.value[0]).getTime()),
+        endTime: getSecond(new Date(this.value[1]).getTime())
+      }
+      this.dropDownQueryChange(row)
+    },
+    dropDownQueryChange (row) {
+      this.loadingDown = true
+      get(api.reportJob, row).then(res => {
+        if (res.code === 200) {
+          this.downDataList = res.data.list
+        }
+        this.loadingDown = false
+      })
+    },
+    downDeleteQueryChange (row, props) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        del(api.reportJob + '?ids=' + row.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.dropDownQueryChange({ tempId: props.row.id })
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    pageJump (val) {
+
+    }
+  },
+  setup () {
+    const value = ref('')
+    return {
+      value
     }
   }
 }