gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 列表刷新，分页

Browse Source
This commit is contained in:
@changcode
2022-06-06 17:37:01 +08:00
parent 2a05817a51
commit e053e00f4b
12 changed files with 445 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/common/right-box-common.scss
View File

@@ -267,6 +267,13 @@
.right-box-select-dropdown {
width: 625px;
}
.right-box-select-report.right-box-select-dropdown {
width: 640px;
}
.el-select-last.right-box-select-dropdown {
width: 434px;
left: 1698px;
}
.limit-height .el-cascader-menu {
max-height: 200px;
overflow: auto;

9
src/assets/css/components/components/rightBox/report/builtinReportBox.scss
View File

@@ -1,9 +1,18 @@
.right-box.right-box-report {
.right-box__container {
.container__form {
.el-height.el-form-item {
margin-bottom: 18px;
.el-form-item__content {
height: 20px;
line-height: 20px;
}
}
.enable-tab {
display: flex;
width: 100%;
.enable-tabs {
flex: 1;
height: 32px;
width: 160px;
text-align: center;

35
src/assets/css/components/views/report/builtinReport.scss
View File

@@ -46,17 +46,34 @@
border-left: none;
display: none;
}
.el-table__row .el-table-column--selection .cell {
padding: 0;
}
.el-table__expanded-cell {
.down {
margin-left: 32px;
height: 100%;
width: 1256px;
.cn-detection__footer {
text-align: center;
.el-pagination__jump {
margin-left: 3px;
}
}
}
.block.drop-down-time {
margin: 15px 0 14px 0;
}
.expand {
width: 100%;
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
.expand-cell {
display: flex;
background: #FFFFFF;
border: 1px solid #E7EAED;
border-radius: 2px;
margin-right: 16px;
margin: 0 12px 16px 0;
width: 300px;
height: 97px;
.expand-right {
@@ -89,15 +106,23 @@
}
.expand-time {
font-size: 12px;
color: #999999;
font-weight: 400;
color: #666666;
margin-bottom: 4px;
div:nth-of-type(1) {
font-size: 12px;
color: #999999;
}
}
.expand-icon {
display: flex;
justify-content: space-evenly;
margin: 0 8px;
font-size: 14px;
.table-operation-item--no-border {
cursor: pointer;
position: relative;
font-size: 16px;
}
}
}
}

200
src/components/rightBox/report/reportTestBox.vue
View File

@@ -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.id"
class="right-box__select"
clearable
collapse-tags
placeholder="select"
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in perMonthList" :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"
v-model="editObject.config.timeConfig.type"
class="right-box__select"
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() }">
@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="tabNum === 3">
<el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="Please input">
<template v-if="showChange === 'this'">
<el-select id="account-input-roleIds"
v-model="editObject.id"
class="right-box__select"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in latsList" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
</template>
<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)
}
}
}
}

2
src/components/table/CnDataList.vue
View File

@@ -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>

247
src/components/table/report/reportTestTable.vue
View File

@@ -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="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">
<dov class="expand-cell">
<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="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
<el-progress type="circle" :percentage="item.percent" :color="item.percent === 100 ? '#5cb87a' : '#1989fa'" />
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon"></i>admin</div>
<div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{props.row.startTime}}</div>
<div>{{dateFormatByAppearance(item.ctime)}}</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>
<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', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<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="tableOperation(['delete', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<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>
</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 class="cn-detection__footer">
<chart-detection-pagination
ref="pagination"
:page-obj="pageObj"
@pageJump="pageJump"
:pageSizeForAlarm="pageObj.pageSize"
></chart-detection-pagination>
</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>
</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
}
}
}

52
src/mixins/data-list.js
View File

@@ -44,7 +44,7 @@ export default {
asce: tableSort.asce,
desc: tableSort.desc,
strToDate: tableSort.strToDate,
tableOperation ([command, row, param]) {
tableOperation ([command, row]) {
switch (command) {
case 'edit': {
this.edit(row)
@@ -59,7 +59,7 @@ export default {
break
}
case 'download': {
this.download(row, param)
this.download(row)
break
}
case 'preview': {
@@ -90,7 +90,16 @@ export default {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
if (this.tableId === 'builtinReportTable') {
this.tableData = response.data.list.map(item => {
return {
...item,
config: JSON.parse(item.config)
}
})
} else {
this.tableData = response.data.list
}
this.pageObj.total = response.data.total
// TODO 回到顶部
}
@@ -148,44 +157,25 @@ export default {
this.object = { ...u, name: 'Copy from ' + u.name, id: '' }
this.rightBox.show = true
},
download (u, n) {
if (this.$refs.dataTable.loading && n === 2) { // 批量下载
return
} else if (this.$refs.dataTable.loadingTableId === u.id && n === 1) { // 列表单个下载
download (u) {
if (this.$refs.dataTable.loadingTableId === u.id) { // 列表单个下载
return
}
let fileName = ''
let url = ''
let params = {}
if (n === 2) { // 批量下载
fileName = 'builtinReport' + '-' + this.getTimeString() + '.zip' // 文件名称
url = api.reportBatchDownloadPdf // 批量 zip 下载
params = {
ids: u
}
} else if (n === 1) {
fileName = u.name + '.pdf' // 文件名称
url = api.reportDownloadPdf // 单个 pdf 下载
params = {
id: u.id
}
}
if (n === 2) { // 批量下载
this.$refs.dataTable.loading = true
} else if (n === 1) { // 列表单个下载
this.$refs.dataTable.loadingTableId = u.id // 列表单个下载
}
if (!u && n === 2) { // 批量下载
this.$refs.dataTable.loading = false
return
} else if (!u && n === 1) { // 列表单个下载
if (!u) { // 列表单个下载
this.$refs.dataTable.loadingTableId = u.id
return
}
// 判断是否成功登陆成功
if (!localStorage.getItem(storageKey.token) && n === 2) {
return window.location.replace('/')
} else if (!localStorage.getItem(storageKey.token) && n === 1) {
if (!localStorage.getItem(storageKey.token)) {
return window.location.replace('/')
}
get(api.reportTemp).then(res => {
@@ -205,11 +195,7 @@ export default {
a.click()
a.remove() // 将a标签移除
}
if (n === 2) { // 批量下载
this.$refs.dataTable.loading = false
} else if (n === 1) { // 列表单个下载
this.$refs.dataTable.loadingTableId = !u.id
}
}, error => {
const $self = this
const reader = new FileReader()
@@ -223,17 +209,9 @@ export default {
}
}
reader.readAsText(error.response.data)
if (n === 2) { // 批量下载
this.$refs.dataTable.loading = false
} else if (n === 1) { // 列表单个下载
this.$refs.dataTable.loadingTableId = !u.id
}
}).catch(() => {
if (n === 2) { // 批量下载
this.$refs.dataTable.loading = false
} else if (n === 1) { // 列表单个下载
this.$refs.dataTable.loadingTableId = !u.id
}
})
}
})

4
src/mixins/table.js
View File

@@ -38,10 +38,10 @@ export default {
}
},
methods: {
tableOperation ([command, row, param]) {
tableOperation ([command, row]) {
switch (command) {
default:
this.$emit(command, row, param)
this.$emit(command, row)
break
}
},

2
src/utils/api.js
View File

@@ -34,7 +34,9 @@ export const api = {
// 报告相关
reportJob: '/report/job',
reportJobCount: '/report/job/count',
reportTemp: '/report/temp',
reportCategory: '/report/category',
reportBatchDownloadPdf: '/report/job/batchDownloadPdf',
reportDownloadPdf: '/report/job/downloadPdf',
reportView: '/report/job/view',

13
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

1
src/views/charts/charts/chartDetectionService.vue
View File

@@ -63,7 +63,6 @@ export default {
pageNo: val,
pageSize: this.pageObj.pageSize
}
console.log(this.pag)
this.$emit('getDetectionData', this.chartInfo.params.url, extraParams, false, {
startTime: this.queryParams.startTime,
endTime: this.queryParams.endTime

101
src/views/report/reportTest.vue
View File

@@ -39,9 +39,9 @@
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@download="download"
@delete="del"
@edit="edit"
@download="download"
@preview="preview"
@orderBy="tableDataSort"
@reload="getTableData"
@@ -84,38 +84,67 @@ export default {
builtinReportLeftMenu: [], // 左侧列表菜单数据
builtinColor: false,
builtinId: '',
url: api.reportJob,
blankObject: { // 空白对象
url: api.reportTemp,
blankObject: {
id: '',
name: '',
ctime: '',
type: '',
// config: '',
source: '',
cTime: '',
uTime: '',
htmContent: '',
remark: '',
uniq: '',
config: {
isRepeat: 0,
cronExpression: '',
startTime: '',
endTime: ''
endTime: '',
queryConfig: {
key1: '',
key2: ''
},
schedulerConfig: {
// type: '',
week_dates: [1, 2, 3, 4, 5, 6, 7],
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
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],
month_week_dates: [0, 1, 2, 3, 4, 5, 6],
interval: 1
},
timeConfig: {
type: 'day',
offset: 0,
unit: ''
}
},
schedulerStart: '',
schedulerEnd: '',
category_id: 1
},
checkWeekListData: [
this.$t('report.sunday'),
this.$t('report.onMonday'),
this.$t('report.tuesday'),
this.$t('report.wednesday'),
this.$t('report.thursday'),
this.$t('report.friday'),
this.$t('report.saturday')
'report.sunday',
'report.onMonday',
'report.tuesday',
'report.wednesday',
'report.thursday',
'report.friday',
'report.saturday'
],
checkMonthsListData: [
this.$t('report.january'),
this.$t('report.february'),
this.$t('report.march'),
this.$t('report.april'),
this.$t('report.may'),
this.$t('report.june'),
this.$t('report.july'),
this.$t('report.august'),
this.$t('report.september'),
this.$t('report.october'),
this.$t('report.november'),
this.$t('report.december')
'report.january',
'report.february',
'report.march',
'report.april',
'report.may',
'report.june',
'report.july',
'report.august',
'report.september',
'report.october',
'report.november',
'report.december'
],
tableId: 'builtinReportTable'
}
@@ -128,7 +157,14 @@ export default {
},
methods: {
queryGetTempData () {
get(api.reportTemp).then(res => {
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
}
@@ -137,6 +173,21 @@ export default {
builtinTabs (id) {
this.getTableData({ tempId: id })
this.builtinId = id
},
edit (u) {
get(this.url, { id: u.id, name: u.name }).then(response => {
if (response.code === 200) {
let dataList = []
dataList = response.data.list.map(item => {
return {
...item,
config: JSON.parse(item.config)
}
})
this.object = dataList[0]
this.rightBox.show = true
}
})
}
},
mounted () {