github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2026-01-30 05:42:19 +00:00
Code Issues Projects Releases Wiki Activity

perf: 整理 acl 位置 (#734)

Browse Source 
* stash

* s

* 界面调整

* feat: 添加分时段选择组件

* feat: 添加分时段选择组件

* feat: 分时段登录组件创建时传参

* 分时登陆

* feat: 分时段组件展示默认数据

* feat: 分时段选中时间在详情里展示

* alc 部分优化

* fix: 修复用户规则登录error报错

* feat: 调整规则详情-时段展示

Co-authored-by: ibuler <ibuler@qq.com>
Co-authored-by: feng626 <1304903146@qq.com>
Co-authored-by: “怀磊” <2280131253@qq.com>
This commit is contained in:
fit2bot
2021-10-20 18:56:59 +08:00
committed by GitHub
parent ae9b3f2707
commit 224b13b4e7
13 changed files with 658 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/DetailCard/ItemValue.vue
View File

@@ -32,6 +32,16 @@ export default {
<span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
)
}
if (this.value instanceof Array) {
const newArr = this.value || []
return (
<span class='item-value'>
{
newArr.map((item, index) => <div key={index}>{item.key}：{item.value} </div>)
}
</span>
)
}
return (
<span class='item-value'>{this.value}</span>
)

558
src/components/FormFields/WeekCronSelect.vue
View File

@@ -1,250 +1,398 @@
<template>
<div>
<div class="hours-container">
<div v-for="(item, index) in hours" :key="index" class="hours-item">
<div class="hours-item-header">{{ compItem(item) }}</div>
<div class="hours-item-value">
<div
:class="compClass(2 * item)"
@click="handleClick(2 * item)"
@mouseover="handleHover(2 * item)"
<div class="c-weektime">
<div class="c-schedue" />
<div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
<table class="c-weektime-table" :class="{'c-min-table': colspan < 2}">
<thead class="c-weektime-head">
<tr>
<th rowspan="8" class="week-td">{{ this.$t('common.WeekCronSelect.WeekOrTime') }}</th>
<th :colspan="12 * colspan">00:00 - 12:00</th>
<th :colspan="12 * colspan">12:00 - 24:00</th>
</tr>
<tr>
<td v-for="t in theadArr" :key="t" :colspan="colspan">{{ t }}</td>
</tr>
</thead>
<tbody class="c-weektime-body">
<tr v-for="t in weektimeData" :key="t.row">
<td>{{ t.value }}</td>
<td
v-for="n in t.child"
:key="`${n.row}-${n.col}`"
:data-week="n.row"
:data-time="n.col"
:class="selectClasses(n)"
class="weektime-atom-item"
@mouseenter="cellEnter(n)"
@mousedown="cellDown(n)"
@mouseup="cellUp(n)"
/>
</div>
</div>
</div>
<div class="tips">{{ tips }}</div>
</tr>
<tr>
<td colspan="49" class="c-weektime-preview">
<div class="g-clearfix c-weektime-con">
<span class="g-pull-left">{{ this.$t('common.WeekCronSelect.CanDragSelect') }}</span>
<a class="g-pull-right" @click.prevent="clearWeektime">{{ this.$t('common.WeekCronSelect.ClearSelection') }}</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
const createArr = len => {
return Array.from(Array(len)).map((ret, id) => id)
}
function splicing(list) {
let same
let i = -1
const len = list.length
const arr = []
if (!len) return
while (++i < len) {
const item = list[i]
if (item.check) {
if (item.check !== Boolean(same)) {
arr.push(...['、', item.begin, '~', item.end])
} else if (arr.length) {
arr.pop()
arr.push(item.end)
}
}
same = Boolean(item.check)
}
arr.shift()
return arr.join('')
}
export default {
model: {
prop: 'sendTimeList'
},
name: 'WeekCronSelect',
props: {
sendTimeList: {
type: Object,
required: true,
value: {
type: Array,
default: () => []
},
readonly: {
type: Boolean,
default: false
colspan: {
type: Number,
default() {
return 2
}
}
},
data() {
return {
hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], // 选项
selectStart: false, // 开始
startIndex: '', // 开始下标
timeRangeList: [], // 选择的时间段
timeRangeListIndex: [], // 选中的下标
tempRangeIndex: [], // 预选下标
tips: '向右选中，向左取消选择'
width: 0,
height: 0,
left: 0,
top: 0,
mode: 0,
row: 0,
col: 0,
theadArr: [],
weekArr: [
this.$t('common.WeekCronSelect.Monday'),
this.$t('common.WeekCronSelect.Tuesday'),
this.$t('common.WeekCronSelect.Wednesday'),
this.$t('common.WeekCronSelect.Thursday'),
this.$t('common.WeekCronSelect.Friday'),
this.$t('common.WeekCronSelect.Saturday'),
this.$t('common.WeekCronSelect.Sunday')
],
weektimeData: [],
timeRange: [] // 格式化之后数据
}
},
computed: {
},
watch: {
timeRangeList: function(value) {
this.$emit('change', value)
this.$parent.$emit('el.form.change')// 触发父组件的校验规则
styleValue() {
return {
width: `${this.width}px`,
height: `${this.height}px`,
left: `${this.left}px`,
top: `${this.top}px`
}
},
sendTimeList: {
handler() {
this.transformedIndex()
},
deep: true
selectClasses() {
return n => n.check ? 'ui-selected' : ''
}
},
mounted() {
this.transformedIndex()
created() {
this.init()
if (this.value.length > 0) this.nextValue()
},
methods: {
// 时间区间转换成下标区间
transformedIndex() {
this.timeRangeListIndex = []
this.timeRangeList = this.sendTimeList
this.timeRangeList.forEach(element => {
const [startTime, endTime] = element.match(/\d+\:\d+/g)
if (startTime && endTime) {
const [startHour, startMin] = startTime.split(':')
const [endHour, endMin] = endTime.split(':')
if (startHour && startMin && endHour && endMin) {
let startNum, endNum
if (startMin === '00') {
startNum = 2 * parseInt(startHour)
} else {
startNum = 2 * parseInt(startHour) + 1
// 初始化数据结构
init() {
this.theadArr = createArr(24)
const isData = this.weekArr.map((ret, index) => {
const children = (ret, row, max) => {
return createArr(max).map((t, col) => {
const curValue = this.formatWeektime(col)
return {
week: ret,
value: curValue,
begin: curValue.split('~')[0],
end: curValue.split('~')[1],
row: row,
col: col
}
if (endMin === '00') {
endNum = 2 * parseInt(endHour) - 1
} else {
endNum = 2 * parseInt(endHour)
}
while (endNum >= startNum) {
this.timeRangeListIndex.push(startNum)
startNum++
}
} else {
this.$message.error('时间段格式不正确')
}
} else {
this.$message.error('没有拿到开始时间或结束时间或者时间段格式不对')
})
}
return {
value: ret,
row: index,
child: children(ret, index, 48)
}
})
this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
this.weektimeData = isData
},
// 下标区间转换成时间区间
transformedSection() {
this.timeRangeList = []
let startTime = ''; let endTime = ''; const len = this.hours.length
for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
if (this.timeRangeListIndex.indexOf(index) > -1) {
if (startTime) { // 如果有开始时间，直接确定结束时间
const endHour = Math.floor((index + 1) / 2)
const endMin = (index + 1) % 2 === 0 ? '00' : '30'
endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
} else { // 没有开始时间，确定当前点为开始时间
const startHour = Math.floor(index / 2)
const startMin = index % 2 === 0 ? '00' : '30'
startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`
}
if (index === 2 * this.hours.length + 1) { // 如果是最后一格，直接结束
endTime = `${Math.floor((index + 1) / 2)}:00`
this.timeRangeList.push(`${startTime || '23:30'}-${endTime}`)
startTime = ''
endTime = ''
}
} else { // 若这个点不在选择区间，确定一个时间段
if (startTime && endTime) {
this.timeRangeList.push(`${startTime}-${endTime}`)
startTime = ''
endTime = ''
} else if (startTime && !endTime) { // 这里可能只选半个小时
const endHour = Math.floor(index / 2)
const endMin = index % 2 === 0 ? '00' : '30'
endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
this.timeRangeList.push(`${startTime}-${endTime}`)
startTime = ''
endTime = ''
}
}
}
this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
},
// 点击事件
handleClick(index) {
if (this.selectStart) {
if (index === this.startIndex) { // 双击取反
if (this.timeRangeListIndex.indexOf(index) > -1) {
this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
} else {
this.timeRangeListIndex.push(this.startIndex)
}
} else if (index > this.startIndex) { // 选取数据--向右添加，向左取消
while (index >= this.startIndex) {
this.timeRangeListIndex.push(this.startIndex)
this.startIndex++
}
this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex))
} else { // 删除数据
while (this.startIndex >= index) {
if (this.timeRangeListIndex.indexOf(index) > -1) {
this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
}
index++
}
}
this.startIndex = ''
this.tempRangeIndex = []
this.transformedSection()
} else {
this.startIndex = index
}
this.selectStart = !this.selectStart
},
// 预选区间
handleHover(index) {
if (this.selectStart) {
this.tempRangeIndex = []
if (index > this.startIndex) { // 选取数据--向右添加，向左取消
while (index >= this.startIndex) {
this.tempRangeIndex.push(index)
index--
}
} else { // 删除数据
while (this.startIndex >= index) {
this.tempRangeIndex.push(index)
index++
// 反解析传递过来的默认值
nextValue() {
const deepValue = _.cloneDeep(this.value)
for (let i = 0, len = deepValue.length; i < len; i++) {
const cur = deepValue[i]
const curValue = cur?.value
if (curValue.length > 0) {
const childValue = curValue.split('、')
for (let j = 0; j < childValue.length; j++) {
const curJ = childValue[j]
this.renderWeekRange(curJ, cur.id)
}
}
}
},
// 是否选中，计算className
compClass(index) {
if (index === this.startIndex) {
return 'hours-item-left preSelected'
// 渲染时间区间
renderWeekRange(val, id) {
const idNum = id === 0 ? 6 : id - 1
const [start, end] = val.split('~')
const startVal = this.countIndex(start)
const endVal = this.countIndex(end)
for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
const curWeek = this.weektimeData[idNum]
curWeek.child[i].check = true
}
if (index >= this.startIndex) {
if (this.tempRangeIndex.indexOf(index) > -1) {
return 'hours-item-left preSelected'
}
} else {
if (this.tempRangeIndex.indexOf(index) > -1) {
return 'hours-item-left unSelected'
}
}
return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left'
},
compItem(item) { // 不足10前面补0
return item < 10 ? `0${item}` : item
}
// 计算索引
countIndex(val) {
const one = val.substr(0, 2)
const a1 = one.startsWith('0') ? one.substr(1, 2) : one
var reg = RegExp(/30/)
const a2 = val.match(reg) ? 1 : 0
const curIndex = (a1 * 2) + a2
return curIndex
},
formatDate(date, fmt) {
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'S': date.getMilliseconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
},
formatWeektime(col) {
const timeStamp = 1542384000000 // '2018-11-17 00:00:00'
const beginStamp = timeStamp + col * 1800000 // col * 30 * 60 * 1000
const endStamp = beginStamp + 1800000
const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
const end = this.formatDate(new Date(endStamp), 'hh:mm')
return `${begin}~${end}`
},
// 清空时间段
clearWeektime() {
this.weektimeData.forEach(item => {
item.child.forEach(t => {
this.$set(t, 'check', false)
})
})
this.timeRange = []
this.$emit('change', this.timeRange)
},
setTimeRange() {
this.timeRange = this.weektimeData.map(item => {
return {
id: item.row === 6 ? 0 : item.row + 1,
value: splicing(item.child)
}
})
this.$emit('change', this.timeRange)
},
cellEnter(item) {
const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
if (ele && !this.mode) {
this.left = ele.offsetLeft
this.top = ele.offsetTop
} else {
if (item.col <= this.col && item.row <= this.row) {
this.width = (this.col - item.col + 1) * ele.offsetWidth
this.height = (this.row - item.row + 1) * ele.offsetHeight
this.left = ele.offsetLeft
this.top = ele.offsetTop
} else if (item.col >= this.col && item.row >= this.row) {
this.width = (item.col - this.col + 1) * ele.offsetWidth
this.height = (item.row - this.row + 1) * ele.offsetHeight
if (item.col > this.col && item.row === this.row) this.top = ele.offsetTop
if (item.col === this.col && item.row > this.row) this.left = ele.offsetLeft
} else if (item.col > this.col && item.row < this.row) {
this.width = (item.col - this.col + 1) * ele.offsetWidth
this.height = (this.row - item.row + 1) * ele.offsetHeight
this.top = ele.offsetTop
} else if (item.col < this.col && item.row > this.row) {
this.width = (this.col - item.col + 1) * ele.offsetWidth
this.height = (item.row - this.row + 1) * ele.offsetHeight
this.left = ele.offsetLeft
}
}
},
cellDown(item) {
const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
this.check = Boolean(item.check)
this.mode = 1
if (ele) {
this.width = ele.offsetWidth
this.height = ele.offsetHeight
}
this.row = item.row
this.col = item.col
},
cellUp(item) {
if (item.col <= this.col && item.row <= this.row) {
this.selectWeek([item.row, this.row], [item.col, this.col], !this.check)
} else if (item.col >= this.col && item.row >= this.row) {
this.selectWeek([this.row, item.row], [this.col, item.col], !this.check)
} else if (item.col > this.col && item.row < this.row) {
this.selectWeek([item.row, this.row], [this.col, item.col], !this.check)
} else if (item.col < this.col && item.row > this.row) {
this.selectWeek([this.row, item.row], [item.col, this.col], !this.check)
}
this.width = 0
this.height = 0
this.mode = 0
this.setTimeRange()
},
selectWeek(row, col, check) {
const [minRow, maxRow] = row
const [minCol, maxCol] = col
this.weektimeData.forEach(item => {
item.child.forEach(t => {
if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
this.$set(t, 'check', check)
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
<style lang='scss' scoped>
.hours-container {
display: flex;
cursor: pointer;
.hours-item {
width: 30px;
height: 60px;
border: 1px solid #c2d0f3;
border-right: none;
.c-weektime {
min-width: 640px;
position: relative;
display: inline-block;
}
.c-schedue {
background: #598fe6;
position: absolute;
width: 0;
height: 0;
opacity: .6;
pointer-events: none;
}
.c-schedue-notransi {
transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
}
.c-weektime-table {
border-collapse: collapse;
th {
vertical-align: inherit;
font-weight: bold;
}
tr {
height: 30px;
}
tr, td, th {
user-select: none;
border: 1px solid #dee4f5;
text-align: center;
&:last-child {
border-right: 1px solid #c2d0f3;
min-width: 12px;
line-height: 1.6em;
transition: background .16s ease;
}
.c-weektime-head {
font-size: 12px;
.week-td {
width: 72px;
}
.hours-item-header {
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #c2d0f3;
}
.c-weektime-body {
font-size: 12px;
td {
&.weektime-atom-item {
user-select: unset;
background-color: #f5f5f5;
}
&.ui-selected {
background-color: #598fe6;
}
}
.hours-item-value {
width: 100%;
height: 30px;
box-sizing: border-box;
display: flex;
}
.c-weektime-preview {
line-height: 2.4em;
padding: 0 10px;
font-size: 13px;
.c-weektime-con {
line-height: 42px;
user-select: none;
}
.selected {
background-color: #4e84fe;
border-bottom: 1px solid #c2d0f3;
}
.preSelected {
background-color: #8eaffc;
border-bottom: 1px solid #c2d0f3;
}
.unSelected {
background-color: #ffffff;
border-bottom: 1px solid #c2d0f3;
.c-weektime-time {
text-align: left;
line-height: 2.4em;
p {
max-width: 625px;
line-height: 1.4em;
word-break: break-all;
margin-bottom: 8px;
}
}
}
}
.tips {
width: 100%;
line-height: 30px;
.c-min-table {
tr, td, th {
min-width: 24px;
}
}
.g-clearfix {
&:after, &:before {
clear: both;
content: " ";
display: table;
}
}
.g-pull-left {
float: left;
}
.g-pull-right {
float: right;
color: #409eff!important;
}
.g-tip-text {
color: #999;
}
</style>