This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
cyber-narrator-cn-ui/src/components/rightBox/report/ReportBox.vue

428 lines
20 KiB
Vue
Raw Normal View History

2022-06-08 15:31:41 +08:00
<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>