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

198
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.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)
}
}
}
}