<!-- 权限 -->
|
<template>
|
<div>
|
<div style="position: absolute; right: 25px; top: 65px;">
|
<!-- <el-button type="danger" style="margin-left:10px;border:none;" size='medium' icon="el-icon-delete">{{
|
$t('permission.deletePermission') }}</el-button> -->
|
<el-button type="primary" style="border:none;" size='medium' icon="el-icon-plus" @click="openTimeDialog">{{
|
$t('permission.addPermission') }}</el-button>
|
</div>
|
<div style="margin-top: 150px;">
|
<Table :table-label="tableHeader" :table-data="tableData" :table-option="tableOption"></Table>
|
</div>
|
<div class="dialog-footer" style="margin-top: 50px;">
|
<el-button type="warning" @click="doClose">{{ $t('common.close') }}</el-button>
|
</div>
|
<!-- 添加权限 -->
|
<el-dialog :title="$t('permission.timeRange')" append-to-body modal-append-to-body :visible.sync="timeVisible"
|
width="800px" :before-close="handleClose" class="time-range-dialog">
|
<el-form label-position="right" style="width:80%;margin:0 auto;">
|
<el-form-item>
|
<div> {{ $t('permission.effectiveType') }}</div>
|
<el-radio v-model="radio" :label="0">{{ $t('permission.unlimitedMode') }}</el-radio>
|
<el-radio v-model="radio" :label="1">{{ $t('permission.usualMode') }}</el-radio>
|
<el-radio v-model="radio" :label="2">{{ $t('permission.dailyMode') }}</el-radio>
|
<el-radio v-model="radio" :label="3">{{ $t('permission.weeklyRepetitionMode') }}</el-radio>
|
</el-form-item>
|
<el-form-item v-if="radio === 1">
|
<div>{{ $t('permission.effectiveTime') }}</div>
|
<el-date-picker :clearable="false" v-model="dateTimes" value-format="timestamp"
|
:default-time="['00:00:00', '23:59:59']" type="datetimerange" :range-separator="$t('common.to')"
|
:start-placeholder="$t('common.startDate')" :end-placeholder="$t('common.endDate')">
|
</el-date-picker>
|
</el-form-item>
|
|
<!-- <el-form-item v-if="radio === 2">
|
<div>{{ $t('permission.effectiveTime') }}</div>
|
<el-time-picker :default-value="['00:00', '23:59']" :clearable="false" is-range value-format="HH:mm"
|
format="HH:mm" v-model="timeRange" :range-separator="$t('common.to')"
|
:start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')"
|
:placeholder="$t('placeholder.placeholder_choose_time_priod')">
|
</el-time-picker>
|
<div style="margin-top:30px">{{ $t('permission.effectiveWeek') }}</div>
|
<el-date-picker :clearable="false" v-model="dateTimes" value-format="timestamp"
|
:default-time="['00:00:00', '23:59:59']" type="datetimerange" :range-separator="$t('common.to')"
|
:start-placeholder="$t('common.startDate')" :end-placeholder="$t('common.endDate')">
|
</el-date-picker>
|
</el-form-item> -->
|
|
<el-form-item v-if="radio === 2 || radio == 3">
|
<div>{{ $t('permission.effectiveTime') }}</div>
|
<el-date-picker style="width:400px;" v-model="dateTimes" value-format="timestamp"
|
:default-time="['00:00:00', '23:59:59']" :clearable="false" type="datetimerange"
|
:range-separator="$t('common.to')" :start-placeholder="$t('common.startDate')"
|
:end-placeholder="$t('common.endDate')">
|
</el-date-picker>
|
<div style="margin-top:30px">{{ $t('permission.effectiveWeek') }}</div>
|
<el-row class="the-week-box" v-if="radio == 2">
|
<el-col :span="24">
|
<div @click="goSetTime(dayInfo)">
|
<el-col :span="3">{{ $t('permission.time_range') }}</el-col>
|
<el-col :span="20">{{ dayInfo.timeArr ? dayInfo.timeArr : '-' }}</el-col>
|
<el-col :span="1"><img src="../../assets/right.png" alt=""></el-col>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row class="the-week-box" v-if="radio == 3">
|
<el-col :span="24" v-for="theDay in weeks" :key="theDay.id">
|
<div @click="goSetTime(theDay)">
|
<el-col :span="3">{{ theDay.label }}</el-col>
|
<el-col :span="20">{{ theDay.timeArr ? theDay.timeArr : '-' }}</el-col>
|
<el-col :span="1"><img src="../../assets/right.png" alt=""></el-col>
|
</div>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-form>
|
<div class="dialog-footer">
|
<el-button @click="handleClose" style="color:#1D2129;">{{ $t('common.cancel') }}</el-button>
|
<el-button type="primary" @click="doSubmit">{{ $t('common.confirm') }}</el-button>
|
</div>
|
</el-dialog>
|
<!-- 设置时间段 -->
|
<el-dialog append-to-body modal-append-to-body :title="title" :visible.sync="timeAreaVisible" width="500px"
|
:before-close="cancelTimeAdd">
|
<el-form label-position="right" label-width="30px">
|
<div>{{ $t('permission.timePeriod') }}
|
<el-button type="success" :disabled="timeArr.length >= 5" style="float: right;" size="mini"
|
icon="el-icon-s-grid" @click="addTime">{{ $t('permission.addTimePeriod') }}</el-button>
|
</div>
|
<el-form-item v-for="(item, index) in timeArr" :key="index" :label="index + 1 + ''">
|
<el-time-picker :data-num="index" :default-value="['00:00', '23:59']" :clearable="false" :key="index"
|
@focus="onTimePicker" @change="theTimeChange" size="mini" style="width:75%;" is-range value-format="HH:mm"
|
format="HH:mm" v-model="item.theTime" :range-separator="$t('common.to')"
|
:start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')"
|
:placeholder="$t('placeholder.placeholder_choose_time_priod')">
|
</el-time-picker>
|
<el-button style="margin-left:20px" type="text" icon="el-icon-circle-close"
|
@click.prevent="removeTime(index)">{{ $t('common.delete') }}</el-button>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button style="color:#1D2129;" @click="cancelTimeAdd">{{ $t('common.cancel') }}</el-button>
|
<el-button type="primary" @click="confirmTimeAdd">{{ $t('common.confirm') }}</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Table from "@/components/table/tableList";
|
import { parseTime, generateRandomString } from "@/utils/index.js"
|
export default {
|
props: {
|
formData: {
|
type: Object,
|
default: () => ({})
|
},
|
addOrEditType: {
|
type: String,
|
default: 'add'
|
}
|
},
|
components: {
|
Table
|
},
|
data () {
|
return {
|
localForm: {},
|
permissionIds: [],
|
curPermissionId: '',
|
tableHeader: [
|
{
|
label: this.$t('permission.permissionId'),
|
list: 'permissionId',
|
overflowShow: 'hidden',
|
width: '150px'
|
},
|
{
|
label: this.$t('permission.effectiveType'),
|
type: 'html',
|
overflowShow: 'hidden',
|
width: '100px',
|
code: (row) => {
|
let type = row.time.type
|
switch (type) {
|
case 0:
|
return this.$t('permission.unlimitedMode')
|
case 1:
|
return this.$t('permission.usualMode')
|
case 2:
|
return this.$t('permission.dailyMode')
|
case 3:
|
return this.$t('permission.weeklyRepetitionMode')
|
}
|
}
|
},
|
{
|
label: this.$t('permission.effectiveTime'),
|
type: 'html',
|
overflowShow: 'hidden',
|
code: (row) => {
|
let type = row.time.type
|
if (type == 0) {
|
return '-'
|
} else {
|
let { beginTime, endTime } = row.time.range
|
return `${parseTime(beginTime * 1000)} ~ ${parseTime(endTime * 1000)}`
|
}
|
}
|
},
|
{
|
label: this.$t('permission.effectiveWeek'),
|
type: 'html',
|
overflowShow: 'hidden',
|
code: (row) => {
|
let type = row.time.type
|
switch (type) {
|
case 0:
|
return '-'
|
case 1: {
|
return '-'
|
}
|
case 2: {
|
let dayPeriodTime = row.time.dayPeriodTime
|
let times = dayPeriodTime.split('|')
|
if (times.length === 0) return '-';
|
times = times.map(v => `<div>${v}<div>`)
|
return times.join("");
|
}
|
case 3: {
|
let weekPeriodTime = row.time.weekPeriodTime
|
const weekDays = [this.$t('common.monday'), this.$t('common.tuseday'), this.$t('common.wednesday'), this.$t('common.thursday'), this.$t('common.friday'), this.$t('common.saterday'), this.$t('common.sunday')];
|
let days = [];
|
for (let i = 1; i <= 7; i++) {
|
const dayKey = String(i);
|
if (weekPeriodTime[dayKey]) {
|
days.push(`${weekDays[i - 1]}： ${weekPeriodTime[dayKey]}`);
|
}
|
}
|
if (days.length === 0) return '-';
|
days = days.map(v => `<div>${v}<div>`)
|
return days.join("");
|
}
|
default:
|
break;
|
}
|
}
|
},
|
// {
|
// label: this.$t('permission.extra'),
|
// type: 'html',
|
// overflowShow: 'hidden',
|
// code: (row) => {
|
// if (row.extra) {
|
// return row.extra
|
// } else {
|
// return '-'
|
// }
|
// }
|
// },
|
],
|
tableOption: {
|
label: this.$t('common.operation'),
|
width: "100px",
|
value: 0,
|
options: [
|
{
|
label: this.$t('common.edit'),
|
key: 1,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.operationType = 'edit'
|
this.handleEdit({ ...row })
|
},
|
},
|
{
|
label: this.$t('common.delete'),
|
key: 1,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.handleDelete(row.permissionId)
|
},
|
}
|
]
|
},
|
tableData: [],
|
timeRange: ['00:00', '23:59'],
|
visible: false,
|
timeVisible: false,
|
timeAreaVisible: false,
|
chooseWeeks: [],
|
radio: 0,
|
title: "",
|
currentId: "",
|
dateTimes: [],
|
times: [],
|
nowTimeVal: [],
|
nowTimeIndex: 9,
|
count: '',
|
timeType: 'day',
|
dayInfo: {
|
timeArr: '',
|
},
|
initWeeks: [
|
{ label: this.$t('common.monday'), id: '1', timeArr: '' },
|
{ label: this.$t('common.tuseday'), id: '2', timeArr: '' },
|
{ label: this.$t('common.wednesday'), id: '3', timeArr: '' },
|
{ label: this.$t('common.thursday'), id: '4', timeArr: '' },
|
{ label: this.$t('common.friday'), id: '5', timeArr: '' },
|
{ label: this.$t('common.saterday'), id: '6', timeArr: '' },
|
{ label: this.$t('common.sunday'), id: '7', timeArr: '' }
|
],
|
weeks: [],
|
timeArr: [],
|
operationType: 'add'
|
}
|
},
|
created () {
|
this.weeks = [...this.initWeeks]
|
this.getUser()
|
},
|
mounted () { },
|
methods: {
|
openTimeDialog () {
|
this.timeVisible = true
|
this.operationType = 'add'
|
},
|
|
handleClose () {
|
this.weeks = [...this.initWeeks]
|
this.chooseWeeks.splice(0)
|
this.radio = 0
|
this.dateTimes.splice(0)
|
this.times.splice(0)
|
this.timeVisible = false
|
},
|
|
doClose () {
|
this.$emit('close-drawer', false);
|
},
|
|
async getUser () {
|
try {
|
let data = {
|
userId: this.formData.userId,
|
page: 0,
|
size: 99
|
}
|
const res = await this.$http.post('/getUser', { data })
|
if (res.code == 200) {
|
console.log(res)
|
let { userId, name, extra, permissionIds } = res.data.content[0]
|
this.localForm.userId = userId
|
this.localForm.name = name
|
this.localForm.extra = extra ? JSON.parse(extra) : ""
|
this.permissionIds = permissionIds ? permissionIds.split(',') : []
|
this.getPermission()
|
} else {
|
this.$message.error(res.message);
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
},
|
|
getPermission () {
|
let that = this
|
this.tableData = []
|
if (this.permissionIds) {
|
this.permissionIds.forEach(async v => {
|
let data = {
|
page: 0,
|
size: 100,
|
permissionId: v
|
}
|
try {
|
const res = await that.$http.post('/getPermission', { data })
|
if (res.code == 200) {
|
that.tableData = that.tableData.concat(res.data.content)
|
} else {
|
that.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even);
|
}
|
})
|
}
|
},
|
|
handleEdit (row) {
|
console.log(row)
|
this.curPermissionId = row.permissionId
|
this.radio = row.time.type
|
if (row.time.type != 0) {
|
let { beginTime, endTime } = row.time.range
|
this.dateTimes = [beginTime * 1000, endTime * 1000]
|
}
|
if (row.time.type == 2) {
|
this.dayInfo.timeArr = row.time.dayPeriodTime
|
}
|
if (row.time.type == 3) {
|
let weekPeriodTime = row.time.weekPeriodTime
|
this.weeks = this.initWeeks.map(week => ({
|
...week,
|
timeArr: weekPeriodTime[week.id] || ''
|
}))
|
}
|
this.timeVisible = true
|
},
|
|
handleDelete (permissionId) {
|
let that = this
|
this.$confirm(
|
this.$t('common.deleteTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
}
|
).then(async () => {
|
try {
|
const res = await that.$http.post("delPermission", {
|
data: {
|
permissionIds: [permissionId]
|
}
|
})
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.updatePerson('delete', permissionId)
|
} else {
|
that.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
}).catch(() => { })
|
},
|
|
handleAddClose () {
|
this.$emit('close-drawer', false);
|
},
|
|
async doSubmit () {
|
if (!this.formData.userId) {
|
this.$message.error(this.$t('person.userNotExist'))
|
return false
|
}
|
const that = this
|
let theData = {
|
time: {
|
type: this.radio
|
}
|
}
|
switch (that.radio) {
|
case 1:
|
if (!that.dateTimes.length) {
|
that.$message.warning(this.$t('permission.choose_time_range'));
|
return false
|
}
|
theData.time.range = {
|
beginTime: new Date(that.dateTimes[0]).getTime() / 1000,
|
endTime: new Date(that.dateTimes[1]).getTime() / 1000
|
}
|
console.log(theData);
|
|
break;
|
case 2:
|
if (that.dateTimes.length === 0) {
|
that.$message.warning(this.$t('power.choose_time_range'));
|
return false
|
}
|
theData.time.range = {
|
beginTime: new Date(that.dateTimes[0]).getTime() / 1000,
|
endTime: new Date(that.dateTimes[1]).getTime() / 1000
|
}
|
theData.time.dayPeriodTime = that.dayInfo.timeArr
|
console.log(theData);
|
break
|
case 3: {
|
if (that.dateTimes.length === 0) {
|
that.$message.warning(this.$t('power.choose_time_range'));
|
return false
|
}
|
theData.time.range = {
|
beginTime: new Date(that.dateTimes[0]).getTime() / 1000,
|
endTime: new Date(that.dateTimes[1]).getTime() / 1000
|
}
|
let obj = {}
|
this.weeks.forEach(item => {
|
if (item?.timeArr) {
|
obj[item.id] = item.timeArr
|
}
|
})
|
theData.time.weekPeriodTime = obj
|
console.log(theData);
|
break;
|
}
|
}
|
if (this.operationType == 'add') {
|
try {
|
theData.permissionId = generateRandomString()
|
const res = await this.$http.post('/insertPermission', { data: [theData] })
|
if (res.code == 200) {
|
this.$message.success(this.$t('common.addSuccess'))
|
this.timeVisible = false
|
this.updatePerson('add', theData.permissionId)
|
} else {
|
if (res.data && res.data[0]) {
|
this.$message.error(res.data[0].errmsg)
|
}
|
}
|
} catch (even) {
|
console.log(even);
|
}
|
} else if (this.operationType == 'edit') {
|
try {
|
theData.permissionId = this.curPermissionId
|
const res = await this.$http.post('/modifyPermission', { data: [theData] })
|
if (res.code == 200) {
|
this.$message.success(this.$t('common.editSuccess'))
|
this.timeVisible = false
|
this.getPermission()
|
} else {
|
if (res.data && res.data[0]) {
|
this.$message.error(res.data[0].errmsg)
|
}
|
}
|
} catch (even) {
|
console.log(even);
|
}
|
}
|
},
|
|
async updatePerson (type, permissionId) {
|
let data = {}
|
data.userId = this.localForm.userId
|
data.name = this.localForm.name
|
data.extra = this.localForm.extra
|
if (type == 'add') {
|
data.permissionIds = this.permissionIds && this.permissionIds.length ? this.permissionIds.concat([permissionId]) : [permissionId]
|
} else if (type == 'delete') {
|
data.permissionIds = this.permissionIds && this.permissionIds.length ? this.permissionIds.filter(v => v != permissionId) : []
|
}
|
const res = await this.$http.post(
|
"/modifyUser",
|
{ data: [data] }
|
);
|
if (res.code == 200) {
|
this.permissionIds = [...data.permissionIds]
|
this.getPermission()
|
this.$emit("operation-success", {...data, permissionIds: data.permissionIds ? data.permissionIds.join(',') : ''})
|
} else {
|
this.$message.error(res.message)
|
}
|
},
|
|
getSecondsFromMidnight (timeStr) {
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
return hours * 3600 + minutes * 60;
|
},
|
|
// 设置时间段
|
goSetTime (theDay) {
|
this.timeAreaVisible = true
|
this.timeArr.splice(0)
|
if (theDay.timeArr !== '') {
|
let aaa = theDay.timeArr.split('|')
|
aaa.forEach(item => {
|
this.timeArr.push({
|
theTime: [item.split('-')[0], item.split('-')[1]]
|
})
|
})
|
}
|
this.currentId = theDay.id
|
this.title = theDay.label
|
},
|
|
// 添加时段
|
addTime () {
|
if (this.timeArr.length > 0) {
|
let lastTime = this.timeArr[this.timeArr.length - 1].theTime
|
if (lastTime[0] === '00:00' && lastTime[1] === '23:59') {
|
this.$message.warning(this.$t('permission.modify_previous_time'))
|
return false
|
}
|
}
|
this.timeArr.push({ theTime: ['00:00', '23:59'] })
|
},
|
|
// 删除时段
|
removeTime (index) {
|
this.timeArr.splice(index, 1)
|
},
|
|
onTimePicker (val) {
|
if (val.$attrs['data-num'] !== this.nowTimeIndex) {
|
setTimeout(() => {
|
this.nowTimeIndex = val.$attrs['data-num']
|
this.nowTimeVal = val.value
|
}, 300)
|
}
|
},
|
|
// 时间段校验
|
async theTimeChange (val) {
|
const [startTime, endTime] = val;
|
// 校验开始时间不能晚于或等于结束时间
|
if (this.toChangeNumber(startTime) >= this.toChangeNumber(endTime)) {
|
this.timeArr[this.nowTimeIndex].theTime = this.nowTimeVal;
|
this.$message.warning(this.$t('permission.cannot_be_earlier'));
|
this.resetTimeSelection();
|
return;
|
}
|
// 检查时间段是否与其他时间段重叠
|
const hasOverlap = this.timeArr.some((item, index) =>
|
index !== this.nowTimeIndex && this.isCross(item.theTime, val)
|
);
|
if (hasOverlap) {
|
this.timeArr[this.nowTimeIndex].theTime = this.nowTimeVal;
|
this.$message.warning(this.$t('permission.times_cannot_overlap'));
|
}
|
this.$nextTick(() => {
|
this.nowTimeIndex = 9
|
this.nowTimeVal = []
|
})
|
},
|
|
// 转换为数字
|
toChangeNumber (str) {
|
let theList = str.split(':')
|
return theList[0] * 60 + (theList[1] - 0)
|
},
|
|
// 判断是否交叉
|
isCross (data1, data2) {
|
const toMinutes = (str) => {
|
const [hours, minutes] = str.split(':').map(Number);
|
return hours * 60 + minutes;
|
};
|
const [start1, end1] = data1.map(toMinutes);
|
const [start2, end2] = data2.map(toMinutes);
|
// 直接判断重叠条件：两个区间有交集
|
return start1 < end2 && start2 < end1;
|
},
|
|
// 取消添加时段
|
cancelTimeAdd () {
|
this.timeArr.splice(0)
|
this.timeAreaVisible = false
|
},
|
|
confirmTimeAdd () {
|
let that = this
|
if (that.timeArr.length > 1) {
|
// 检查最后一组是否与前面任何一组存在交叉
|
let lastTime = that.timeArr[that.timeArr.length - 1].theTime
|
const hasCrossWithAnyPrevious = that.timeArr
|
.slice(0, -1) // 排除最后一组
|
.some(item => that.isCross(item.theTime, lastTime));
|
if (hasCrossWithAnyPrevious) {
|
that.$message.warning(this.$t('permission.times_cannot_overlap'));
|
return false;
|
}
|
}
|
if (this.radio == 2) {
|
this.dayInfo.timeArr = this.timeArr.map(item => item.theTime.join('-')).join('|')
|
} else {
|
let timeLabel = []
|
if (that.timeArr.length > 0) {
|
that.timeArr.forEach(item => {
|
timeLabel.push(item.theTime[0] + '-' + item.theTime[1])
|
})
|
}
|
that.weeks.map(item => {
|
if (item.id === that.currentId) {
|
item.timeArr = timeLabel.join('|')
|
}
|
})
|
}
|
that.cancelTimeAdd()
|
},
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
::v-deep .el-dialog__header {
|
text-align: center !important;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
|
.tagStyle {
|
cursor: pointer;
|
}
|
|
::v-deep .el-tag--plain,
|
.el-tag--dark {
|
width: 60px;
|
height: 40px;
|
font-size: 16px;
|
text-align: center;
|
line-height: 40px;
|
}
|
|
.the-week-box {
|
position: relative;
|
|
.el-col-24 {
|
padding: 0 10px;
|
background-color: #eeeeee80;
|
height: 50px;
|
line-height: 50px;
|
margin-top: 10px;
|
overflow: hidden;
|
border-radius: 6px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #eeeeee;
|
}
|
}
|
|
img {
|
margin-top: 15px;
|
width: 20px;
|
height: 20px;
|
}
|
}
|
|
.weeks:hover {
|
background: #f5f7fa;
|
}
|
|
::v-deep .el-range-separator {
|
width: 8% !important;
|
}
|
</style>
|
