CN-599 feat: 新报告大部分功能
This commit is contained in:
chenjinsong
427
src/components/rightBox/report/ReportBox.vue
Normal file
427
src/components/rightBox/report/ReportBox.vue
Normal file
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
end-placeholder="End date"
|
||||
@change="datePickerChange(props)"
|
||||
:start-placeholder="$t('detections.startTime')"
|
||||
:end-placeholder="$t('detections.endTime')"
|
||||
@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'">
|
||||
{{dateFormatByAppearance(scope.row.utime)}}
|
||||
<span v-else-if="item.prop === 'timePlan'">
|
||||
{{(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--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) {
|
||||
const isExpand = rows.some(t => t.id === row.id)
|
||||
if (isExpand) {
|
||||
this.dropDownQueryChange({ tempId: row.id })
|
||||
dropExpandChange (row, expandedRows) {
|
||||
this.expandedIds = []
|
||||
if (expandedRows.length > 0 && row) {
|
||||
this.expandedIds.push(row.id)
|
||||
this.datePickerChange(row)
|
||||
}
|
||||
},
|
||||
datePickerChange (props) {
|
||||
const row = {
|
||||
tempId: props.row.id,
|
||||
datePickerChange (row) {
|
||||
const param = {
|
||||
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
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user