Skip to content

E
energyai_vue
Commit ffe28556 authored by xiexingan's avatar xiexingan
Browse files
Options

调整

parent 2b32c594
Hide whitespace changes
Inline Side-by-side
Showing with 1021 additions and 94 deletions
src/pages/components/cardWarp.vue
View file @ ffe28556
......@@ -2,6 +2,8 @@
.card-warp
.card-header(:style="{height,'line-height':height}" :class=" showBackground ? 'bg' : '' ")
span.card-title {{ title }}
div(style='margin-left:20px;')
slot(name="left" )
slot(name="right")
.card-content
slot(name="content")
......
src/pages/sys/road/index copy 1.vue 0 → 100644
View file @ ffe28556
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
span.title-bold.title-left-color 站点维护
el-main.box_main
el-card()
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px')
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点名称:" prop="stationName")
el-input(disabled v-model='dataForm.stationName' placeholder="" clearable )
el-col(:span='12')
el-form-item(label="车站编码:" prop="code")
el-input(v-model='dataForm.code' placeholder="" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点简称:" prop="shortName")
el-input(v-model='dataForm.shortName' placeholder="" clearable disabled)
el-col(:span='12')
el-form-item(label="站点排序:" prop="orderNum")
el-input(v-model.number='dataForm.orderNum' clearable disabled)
el-col(:span='24')
el-form-item(label="站点描述:" prop="remark")
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" disabled)
el-row(style="padding-bottom:15px;" :span="24")
el-col(:md='23' :sm="5")
div.title-bold(style='line-height: 40px;') 站点地图
//- el-divider(style='margin-top:0')
<div class="fileDiv">
<div class="fileList" v-for="(item,index) in fileList">
<el-input size="mini" v-model='item.name' clearable></el-input>
<img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="imgButton">
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
</div>
</div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 5">
<span class="el-icon-plus"></span>
</div>
<div>
el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
</div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
</div>
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
</template>
<script>
import { mapState } from 'vuex'
import Vue from 'vue'
export default {
computed: {
...mapState('d2admin/user', ['info'])
},
data() {
let validateNumber = (rule, value, callback) => {
if (value < 0) {
callback(new Error('只能输入正整数'))
} else if (value > 10000) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return {
clickFlag: false,
dataList: [],
dataListLoading: false,
currentRow: {},
urlPath: window.CONFIG.urlPath,
cImage: '',
fileList: [],
stationId: localStorage.getItem('stationId'),
imageUrl: '',
logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"',
typeList: [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' }
],
masterList: [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' }
],
dataForm: {},
dataRule: {
// stationName: [
// { required: true, message: '站点名称不能为空', trigger: 'blur' },
// { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
// ],
orderNum: [
{ required: true, message: '排序值不能为空' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
shortName: [
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
}
],
code: [
{ required: true, message: '车站编码不能为空', trigger: 'blur' },
{
min: 1,
max: 30,
message: '长度在 1 到 30 个字符',
trigger: 'blur'
}
],
type: [
{ required: true, message: '车站类型不能为空', trigger: 'blur' }
],
remark: [
{
min: 1,
max: 300,
message: '长度在 1 到 300 个字符',
trigger: 'blur'
}
]
}
}
},
created() {
this.initDataFrom(this.stationId)
this.cImage = ''
},
methods: {
initDataFrom(id) {
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams()
}).then((data) => {
if (data && data.code === 0) {
this.dataForm = data.bean
this.fileList = data.bean.mapList
this.fileList.forEach((element) => {
element.readPath = this.urlPath + element.filePath
})
}
})
},
initData() {
this.typeList = [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' }
]
this.masterList = [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' }
]
},
// 表单提交
dataFormSubmit(id) {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
let errorflag = false
this.fileList.forEach((e) => {
if (e.name && e.name.length > 10) {
this.$message.warning('地图名称长度在1到10个字符之间')
errorflag = true
return false
}
if (!e.name) {
this.$message.error('请填写地图名称！')
errorflag = true
return false
}
})
if (errorflag) {
return
}
this.clickFlag = true
for (var i in this.fileList) {
this.fileList[i].orderNum = Number(i) + 1
}
this.dataForm.mapList = this.fileList
this.$http({
url: this.$http.adornUrl(
`/liStation/${!this.dataForm.id ? 'save' : 'update'}`
),
method: 'post',
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: this.dataForm
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
} else {
this.$message.error(data.msg)
}
this.clickFlag = false
})
}
})
},
changeImage(item) {
this.cImage = item.id
// console.log('id:' + item.id)
if (this.cImage) {
document.getElementById('upload_file').click()
}
},
fileClick() {
this.cImage = ''
if (
this.cImage === '' ||
this.cImage === null ||
this.cImage === undefined
) {
document.getElementById('upload_file').click()
}
},
fileChange(el) {
// console.log('上传图片后的cImage', this.cImage)
this.$showLoading()
if (!el.target.files[0].size) return
let file = el.target.files[0]
if (this.beforeAvatarUpload(file)) {
let fd = new FormData()
fd.append('type', 'stationMap')
fd.append('id', this.cImage)
fd.append('stationId', this.dataForm.id)
fd.append('file', file)
this.$http({
url: this.$http.adornUrl(`/liStationMap/uploadFile`),
method: 'post',
data: fd
}).then((data) => {
if (data && data.code === 0) {
this.currentRow = data.bean
this.currentRow.readPath = this.urlPath + this.currentRow.filePath
// console.log('上传图片后的currentRow', this.currentRow)
var num = 0
var flag = false
var updateRes = {}
this.fileList.forEach((res, index) => {
if (res.id === this.currentRow.id) {
num = index
updateRes = res
flag = true
return false
}
})
// console.log('上传图片后的updateRes', updateRes)
if (flag) {
updateRes.fileName = this.currentRow.fileName
updateRes.filePath = this.currentRow.filePath
updateRes.readPath = this.currentRow.readPath
updateRes.updateTime = this.currentRow.updateTime
updateRes.updateUserId = this.currentRow.updateUserId
Vue.set(this.fileList, num, updateRes)
} else {
this.fileList.push(this.currentRow)
}
// console.log('上传图片后的fileList', this.fileList)
this.$message.success('上传成功!')
} else {
this.$message.error('上传失败!')
}
})
}
this.cImage = ''
el.target.value = ''
},
removeClick(item, index) {
var ids = [item.id]
this.$confirm(`确认删除站点地图?`, '删除站点地图', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: true
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
}
})
} else {
this.$message.error(data.msg)
}
})
})
.catch(() => {})
},
leftClick(index, row) {
let front = JSON.parse(JSON.stringify(this.fileList[index - 1]))
Vue.set(this.fileList, index - 1, row)
Vue.set(this.fileList, index, front)
// console.log(this.fileList)
},
rightClick(index, row) {
let after = JSON.parse(JSON.stringify(this.fileList[index + 1]))
Vue.set(this.fileList, index + 1, row)
Vue.set(this.fileList, index, after)
// console.log(this.fileList)
},
//文件上传前的验证
beforeAvatarUpload(file) {
const isJPG =
file.type === 'image/jpg' ||
file.type === 'image/png' ||
file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 10
if (!isJPG) {
this.$message.error('上传图片只能是 jpg,jpeg,png 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过10MB!')
}
return isJPG && isLt2M
}
}
}
</script>
<style lang="scss" scoped>
.fileDiv {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f6f7fb;
display: table-cell;
vertical-align: middle;
width: 1%;
.fileList {
height: 130px;
width: 100px;
margin: 10px 0 0 10px;
float: left;
border-radius: 5px;
overflow: hidden;
/deep/ .el-input--mini .el-input__inner {
text-align: center !important;
}
.el-button {
padding-left: 8px;
font-size: 14px;
}
img {
height: 100px;
width: 100px;
}
.imgButton {
position: relative;
top: -30px;
background: #ccc;
}
}
.shangchuan {
line-height: 100px;
text-align: center;
font-size: 30px;
height: 100px;
width: 100px;
float: left;
border: 1px solid #ccc;
margin-top: 40px;
margin-left: 10px;
border-radius: 5px;
}
/deep/ .el-alert--info.is-light {
background-color: #f6f7fb;
}
}
</style>
src/pages/sys/road/index.vue
View file @ ffe28556
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
span.title-bold.title-left-color 站点维护
el-main.box_main
el-card()
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px')
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点名称:" prop="stationName")
el-input(disabled v-model='dataForm.stationName' placeholder="" clearable )
el-col(:span='12')
el-form-item(label="车站编码:" prop="code")
el-input(v-model='dataForm.code' placeholder="" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点简称:" prop="shortName")
el-input(v-model='dataForm.shortName' placeholder="" clearable disabled)
el-col(:span='12')
el-form-item(label="站点排序:" prop="orderNum")
el-input(v-model.number='dataForm.orderNum' clearable disabled)
el-col(:span='24')
el-form-item(label="站点描述:" prop="remark")
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" disabled)
el-row(style="padding-bottom:15px;" :span="24")
el-col(:md='23' :sm="5")
div.title-bold(style='line-height: 40px;') 站点地图
//- el-divider(style='margin-top:0')
<div class="fileDiv">
<div class="fileList" v-for="(item,index) in fileList">
<el-input size="mini" v-model='item.name' clearable></el-input>
<img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="imgButton">
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
card-warp(title="站点维护", height="45px")
div(slot='content')
div
el-form(:model='dataForm', :rules='dataRule', ref='dataForm', label-width='100px')
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点名称:" prop="stationName")
el-input(disabled v-model='dataForm.stationName' placeholder="" clearable )
el-col(:span='12')
el-form-item(label="车站编码:" prop="code")
el-input(v-model='dataForm.code' placeholder="" clearable disabled)
el-row(:gutter='20')
el-col(:span='12')
el-form-item(label="站点简称:" prop="shortName")
el-input(v-model='dataForm.shortName' placeholder="" clearable disabled)
el-col(:span='12')
el-form-item(label="站点排序:" prop="orderNum")
el-input(v-model.number='dataForm.orderNum' clearable disabled)
el-col(:span='24')
el-form-item(label="站点描述:" prop="remark")
el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="" disabled)
el-row(style="padding-bottom:15px;" :span="24")
el-col(:md='23' :sm="5")
div.title-bold(style='line-height: 40px;') 站点地图
//- el-divider(style='margin-top:0')
<div class="fileDiv">
<div class="fileList" v-for="(item,index) in fileList">
<el-input size="mini" v-model='item.name' clearable></el-input>
<img :src="item.readPath" :onerror="logo" @click="changeImage(item)">
<div class="imgButton">
<el-button type="text" size="mini" :disabled="index == 0" icon="el-icon-back" @click='leftClick(index,item)'></el-button>
<el-button type="text" size="mini" icon="el-icon-delete" @click='removeClick(item,index)'></el-button>
<el-button type="text" size="mini" :disabled="index == fileList.length-1" icon="el-icon-right" @click='rightClick(index,item)'></el-button>
</div>
</div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 5">
<span class="el-icon-plus"></span>
</div>
<div>
el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
</div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
</div>
<div class="shangchuan" @click="fileClick" v-if="fileList.length < 5">
<span class="el-icon-plus"></span>
</div>
<div>
el-alert(title="上传图片格式仅支持jpg,jpeg,png,单个照片大小不超过10M" effect='light' :closable="false" style="margin-top:10px;")
</div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none"/>
</div>
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
el-button(type='primary' size='medium' @click='dataFormSubmit()' v-if="isAuth('line:station:save')" v-prevent-re-click style="margin-top:10px;margin-left:900px;") 保存
</template>
<script>
......@@ -53,7 +53,7 @@ import Vue from 'vue'
export default {
computed: {
...mapState('d2admin/user', ['info']),
...mapState('d2admin/user', ['info'])
},
data() {
let validateNumber = (rule, value, callback) => {
......@@ -78,11 +78,11 @@ export default {
logo: 'this.src="' + require('../../../assets/images/videoImg.png') + '"',
typeList: [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' },
{ id: '2', name: '换乘站点' }
],
masterList: [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
{ id: 2, name: '从站' }
],
dataForm: {},
dataRule: {
......@@ -93,15 +93,15 @@ export default {
orderNum: [
{ required: true, message: '排序值不能为空' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] },
{ validator: validateNumber, trigger: ['blur', 'change'] }
],
shortName: [
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur',
},
trigger: 'blur'
}
],
code: [
{ required: true, message: '车站编码不能为空', trigger: 'blur' },
......@@ -109,21 +109,21 @@ export default {
min: 1,
max: 30,
message: '长度在 1 到 30 个字符',
trigger: 'blur',
},
trigger: 'blur'
}
],
type: [
{ required: true, message: '车站类型不能为空', trigger: 'blur' },
{ required: true, message: '车站类型不能为空', trigger: 'blur' }
],
remark: [
{
min: 1,
max: 300,
message: '长度在 1 到 300 个字符',
trigger: 'blur',
},
],
},
trigger: 'blur'
}
]
}
}
},
created() {
......@@ -135,7 +135,7 @@ export default {
this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get',
params: this.$http.adornParams(),
params: this.$http.adornParams()
}).then((data) => {
if (data && data.code === 0) {
this.dataForm = data.bean
......@@ -149,11 +149,11 @@ export default {
initData() {
this.typeList = [
{ id: '1', name: '正线站点' },
{ id: '2', name: '换乘站点' },
{ id: '2', name: '换乘站点' }
]
this.masterList = [
{ id: 1, name: '主站' },
{ id: 2, name: '从站' },
{ id: 2, name: '从站' }
]
},
// 表单提交
......@@ -189,13 +189,13 @@ export default {
),
method: 'post',
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: this.dataForm,
data: this.dataForm
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
duration: 1500
})
} else {
this.$message.error(data.msg)
......@@ -237,7 +237,7 @@ export default {
this.$http({
url: this.$http.adornUrl(`/liStationMap/uploadFile`),
method: 'post',
data: fd,
data: fd
}).then((data) => {
if (data && data.code === 0) {
this.currentRow = data.bean
......@@ -281,13 +281,13 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: true,
closeOnClickModal: true
})
.then(() => {
this.$http({
url: this.$http.adornUrl('/liStationMap/delete'),
method: 'post',
data: this.$http.adornData(ids, false),
data: this.$http.adornData(ids, false)
}).then((data) => {
if (data && data.code === 0) {
this.$message({
......@@ -296,7 +296,7 @@ export default {
duration: 1500,
onClose: () => {
this.fileList.splice(index, 1)
},
}
})
} else {
this.$message.error(data.msg)
......@@ -334,8 +334,8 @@ export default {
this.$message.error('上传图片大小不能超过10MB!')
}
return isJPG && isLt2M
},
},
}
}
}
</script>
<style lang="scss" scoped>
......
src/pages/sys/role/index copy.vue 0 → 100644
View file @ ffe28556
<template lang="pug">
el-container(style="height:77.6vh")
el-aside( width="18vw" v-loading="leftLoading" style="z-index:1000;box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);")
div.tree_warp
div.title_warp
span.title-bold(style='padding-right:150px;margin-left:20px;z-index:1001;') 角色列表
el-button(type='primary' v-if="isAuth('sys:role:save')" size='mini' icon='el-icon-plus' @click="addOrUpdateHandle('')") 新增
div.tree_content(v-for='item in tableData' :key='item.roleId' @click='chooseRole(item)' :class="{'isActive': ids == item.roleId}" )
el-tooltip(v-if="item.roleName.replace(/[\u0391-\uFFE5]/g,'aa').length>14" :content="item.roleName" effect="light" placement="top")
div.role_name {{item.roleName | ellipsis}}
div.role_name(v-else) {{item.roleName | ellipsis}}
div(style="width:50%;text-align:right;padding-right:20px")
el-button(v-if="isAuth('sys:role:update')" plain type='primary' size='mini' @click="addOrUpdateHandle(item)") 编辑
el-button(v-if="isAuth('sys:role:delete')" plain type='primary' size='mini' style="margin-left:10px;" @click="delRole(item.roleId)") 删除
el-container(style="height:77vh")
el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border:1px solid rgba(196, 196, 196, 1);')
template()
span.title-bold.title-left-color {{roleName ? roleName : '权限详情'}}&emsp;
el-checkbox(v-model="checked" @change="checkAll(videoData)") 全选
el-main().box_main
el-card.tableCard( style='overflow:auto;box-sizing:border-box;' v-loading.fullscreen.lock="rightLoading")
div(v-loading="rightLoading1" class='div_tree')
//- el-tree(ref="tree" @check-change="handleNodeClick" :render-content="renderContent" @node-expand="handleNodeExpand" :default-expanded-keys="expandedKeys" :props="defaultProps" :data="videoData" show-checkbox node-key="menu_id")
//- 树结构
div.my_role_tree()
div.firstDiv(v-for='(item, index) in videoData' :key='index')
div.ffDiv(@click='changeOpen(item)' :class='{active1 : !item.isopen, active2 : item.isopen}')
el-checkbox(:indeterminate="item.indeterminate" v-model='item.checked' @change='checkboxClick(item)')
font {{item.name}}
div.div_content(:id="item.menu_id")
div.twoDiv(v-for='(ii, ini) in item.children' :key='ini' )
div.ttDiv
label
el-checkbox(:indeterminate="ii.indeterminate" v-model='ii.checked' @change='checkboxClick(ii)')
font {{ii.name}}
div.threeDiv(v-for='(itei, indee) in ii.children' :key='indee')
label
el-checkbox(v-model='itei.checked' @change='checkboxClick(itei)')
font {{itei.name}}
div(style="margin-top:20px;")
el-button(type='primary' size='medium' v-if="isAuth('sys:role:update')" @click="saveRoleMenu" v-prevent-re-click) 保存
//- el-button(type='primary' size='medium' @click='ccc') cccc
add-or-update( v-if="addOrUpdateVisible" ref="addOrUpdate" @reFreshDataList="reFreshDataList")
</template>
<script>
import AddOrUpdate from './role-add-or-update'
export default {
data() {
return {
isopen: true,
rightLoading: false,
clickFlag: false,
ids: '',
leftLoading: false,
rightLoading1: false,
selection: '',
expandedKeys: [],
addOrUpdateVisible: false,
tableData: [],
checked: false,
isIndeterminate: true,
roleName: '',
activeNames: ['1'], //手风琴
videoData: [],
totalCount: 0,
checkTotalCount: 0,
defaultProps: {
children: 'children',
label: 'name'
}
}
},
filters: {
ellipsis(value) {
// console.log(value)
if (!value) return ''
let len = value.length
let realLength = 0
for (var i = 0; i < len; i++) {
let charCode = value.charCodeAt(i)
if (charCode >= 0 && charCode <= 128) {
realLength += 1
} else {
realLength += 2
}
if (realLength > 14) {
return value.slice(0, i) + '...'
}
}
return value
}
},
components: {
AddOrUpdate
},
created() {
//查询角色信息
this.getAllRole()
this.getMenu()
},
methods: {
reFreshDataList() {
this.getAllRole()
this.getMenu()
},
// 打开关闭切换
changeOpen(item) {
this.$set(item, 'isopen', !item.isopen)
let sel = document.getElementById(item.menu_id)
let height = item.isopen ? (item.children.length || 0) * 48 : 0
sel.style.height = height + 'px'
// let f = document.body.offsetHeight;
},
// 新增或修改
addOrUpdateHandle(item) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(item)
})
},
saveRoleMenu() {
// let checkedKeys = this.$refs.tree
// .getCheckedKeys()
// .concat(this.$refs.tree.getHalfCheckedKeys())
// // console.log(checkedKeys)
let checkedKeys = this.checkKeys(this.videoData)
let checkedRow = this.selection
if (!checkedRow) {
this.$message({
type: 'warning',
message: '请先选择角色！',
duration: 1000
})
return
}
this.clickFlag = true
this.rightLoading = true
// console.log("checkedKeys", checkedKeys);
// console.log("checkedRow", checkedRow);
this.$http({
url: this.$http.adornUrl(`/sys/menu/updateRoleMenu`),
method: 'post',
data: {
roleId: checkedRow,
menuIds: checkedKeys,
stationId: localStorage.getItem('stationId')
}
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.reFreshDataList()
}
this.clickFlag = false
this.rightLoading = false
})
},
// 全选
checkAll(item) {
this.videoData.forEach((item) => {
this.checkedAll(item, this.checked)
})
},
// 递归勾选
checkedAll(data, bool) {
this.$set(data, 'checked', bool)
this.$set(data, 'indeterminate', false)
if (data.children && data.children.length > 0) {
data.children.forEach((ii) => {
this.checkedAll(ii, bool)
})
}
},
// 点击左侧角色列表
chooseRole(res) {
this.clickFlag = false
this.ids = res.roleId
this.selection = res.roleId
this.roleName = res.roleName
this.$http({
url: this.$http.adornUrl(`/sys/menu/getRoleMenu`),
method: 'get',
params: this.$http.adornParams({
roleId: res.roleId
})
}).then((data) => {
if (data && data.code === 0) {
let list = data.list.map((item) => {
return item.menu_id
})
this.$nextTick(() => {
this.addChecked(this.videoData, list)
this.checked = this.allChecked(this.videoData)
})
}
})
},
//节点勾选
checkboxClick(item) {
this.checkedAll(item, item.checked)
let list = this.check(this.videoData)
this.addChecked(this.videoData, list)
this.checked = this.allChecked(this.videoData)
},
// 获取选中状态
check(item) {
let list = []
item.forEach((ii) => {
if (ii.checked) list.push(ii.menu_id)
if (ii.children && ii.children.length > 0) {
list = list.concat(this.check(ii.children))
}
})
return list
},
// 获取所有选中和半选中的
checkKeys(item) {
let list = []
item.forEach((ii) => {
if (ii.checked || ii.indeterminate) list.push(ii.menu_id)
if (ii.children && ii.children.length > 0) {
list = list.concat(this.checkKeys(ii.children))
}
})
return list
},
// 勾选回显
addChecked(data, ids) {
data.forEach((item) => {
if (ids.indexOf(item.menu_id) >= 0) {
this.$set(item, 'checked', true)
} else {
this.$set(item, 'checked', false)
}
if (item.children && item.children.length > 0) {
this.addChecked(item.children, ids)
let num = item.children.length
let cnum = 0
let indete = false
item.children.forEach((ii, iiindex) => {
if (ii.checked) cnum++
if (ii.indeterminate) indete = true
})
if (cnum === 0) {
// 半选状态（子集全未选默认是false，子集有一个为半选为true）
this.$set(item, 'indeterminate', indete)
this.$set(item, 'checked', false)
} else if (cnum > 0 && cnum < num) {
// 半选
this.$set(item, 'indeterminate', true)
this.$set(item, 'checked', false)
} else if (cnum === num) {
// 全选了
this.$set(item, 'checked', true)
this.$set(item, 'indeterminate', false)
}
}
})
},
// 校验全选状态
allChecked(data) {
for (const ii of data) {
if (!ii.checked) {
return false
}
if (ii.children && ii.children.length > 0) {
if (!this.allChecked(ii.children)) return false
}
}
return true
},
getAllRole() {
this.leftLoading = true
this.$http({
url: this.$http.adornUrl(`/sys/role/getRoleList`),
method: 'get',
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
})
.then((data) => {
if (data && data.code === 0) {
this.tableData = data.list
// let row = this.$refs.roleTable.data[0]
// this.$refs.roleTable.setCurrentRow(row)
// this.chooseRole(row)
}
this.leftLoading = false
})
.then(() => {
this.$nextTick(() => {
if (this.tableData && this.tableData.length) {
this.chooseRole(this.tableData[0])
}
})
})
},
getMenu() {
this.rightLoading1 = true
this.$http({
url: this.$http.adornUrl(`/sys/menu/getMenu`),
method: 'get',
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then((data) => {
if (data && data.code === 0) {
this.videoData = data.result
// console.log(data.size, 'size')
// this.totalCount = data.size
// this.totalCount = this.videoData.length
// this.videoData.forEach(e => {
// if (e.children != null && e.children.length > 0) {
// this.totalCount += e.children.length
// e.children.forEach(j => {
// if (j.children != null && j.children.length > 0) {
// this.totalCount += j.children.length
// }
// })
// }
// })
}
this.rightLoading1 = false
})
},
delRole(roleId) {
this.$confirm('确认删除该角色?', '删除角色', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.leftLoading = true
let roleIds = [roleId]
this.$http({
url: this.$http.adornUrl(`/sys/role/delete`),
method: 'POST',
data: roleIds
}).then((data) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
} else {
this.$message.error(data.msg)
}
this.getMenu()
this.getAllRole()
this.leftLoading = false
})
})
}
}
}
</script>
<style lang="scss" scoped>
.item {
margin-bottom: 18px;
}
.is-leaf > span:nth-child(0) {
font-size: 11px;
font-weight: 100;
}
.tree_warp {
overflow: auto;
height: 100%;
box-sizing: border-box;
background: #f4f4f4;
/*border-right: 1px solid rgba(195, 195, 195, 1);*/
/*box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);*/
/*box-shadow: 2px 0 8px 0 red;*/
.title_warp {
height: 42px;
line-height: 42px;
background: #eef8ff;
color: #333333;
}
.tree_content {
display: flex;
height: 40px;
line-height: 40px;
background: #fff;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin: 10px 10px 0 20px;
// float: right;
.role_name {
margin-left: 20px;
width: 50%;
margin-left: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(51, 51, 51, 1);
display: inline-block;
}
}
}
.isActive {
background: #eef8ff !important;
}
.el-tree-node__content {
height: 40px;
.el-tree-node__expand-icon {
position: relative;
left: 126px;
}
}
</style>
<style lang="scss">
.my_role_tree {
background-color: #f6f7fb;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.firstDiv {
background-color: #f6f7fb;
.active1:after {
background: url("../../../assets/images/active1.png");
background-repeat: no-repeat;
transition: 0.3s;
content: "";
display: inline-flex;
width: 5px;
height: 10px;
left: 100px;
margin-left: 20px;
// border: 1px solid red;
}
.active2:after {
background: url("../../../assets/images/active1.png");
transform: rotate(90deg);
transition: 0.3s;
background-repeat: no-repeat;
content: "";
display: inline-flex;
width: 10px;
height: 10px;
margin-left: 20px;
}
.ffDiv {
// width: 200px;
border: 1px solid #edeef1;
padding: 0 12px;
height: 46px;
// background: #f6f7fb;
font {
line-height: 46px;
margin-left: 10px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
}
}
.div_content {
transition: height .3s;
height: 0;
overflow: hidden;
.twoDiv {
display: flex;
background: #e9eaee;
border: 1px solid #edeef1;
padding-left: 37px;
.ttDiv {
width: 150px;
height: 46px;
font {
line-height: 46px;
font-size: 14px;
margin-left: 10px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
}
}
.threeDiv {
width: 120px;
height: 46px;
font {
line-height: 46px;
margin-left: 10px;
font-size: 13px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
}
}
}
}
}
</style>
src/pages/sys/role/index.vue
View file @ ffe28556
......@@ -13,34 +13,36 @@
el-button(v-if="isAuth('sys:role:update')" plain type='primary' size='mini' @click="addOrUpdateHandle(item)") 编辑
el-button(v-if="isAuth('sys:role:delete')" plain type='primary' size='mini' style="margin-left:10px;" @click="delRole(item.roleId)") 删除
el-container(style="height:77vh")
el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border:1px solid rgba(196, 196, 196, 1);')
template()
span.title-bold.title-left-color {{roleName ? roleName : '权限详情'}}&emsp;
//- el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border:1px solid rgba(196, 196, 196, 1);')
//- template()
//- span.title-bold.title-left-color {{roleName ? roleName : '权限详情'}}&emsp;
card-warp(:title="roleName ? roleName: '权限详情'", height="45px")
div(slot="left")
el-checkbox(v-model="checked" @change="checkAll(videoData)") 全选
el-main().box_main
el-card.tableCard( style='overflow:auto;box-sizing:border-box;' v-loading.fullscreen.lock="rightLoading")
div(v-loading="rightLoading1" class='div_tree')
//- el-tree(ref="tree" @check-change="handleNodeClick" :render-content="renderContent" @node-expand="handleNodeExpand" :default-expanded-keys="expandedKeys" :props="defaultProps" :data="videoData" show-checkbox node-key="menu_id")
//- 树结构
div.my_role_tree()
div.firstDiv(v-for='(item, index) in videoData' :key='index')
div.ffDiv(@click='changeOpen(item)' :class='{active1 : !item.isopen, active2 : item.isopen}')
el-checkbox(:indeterminate="item.indeterminate" v-model='item.checked' @change='checkboxClick(item)')
font {{item.name}}
div.div_content(:id="item.menu_id")
div.twoDiv(v-for='(ii, ini) in item.children' :key='ini' )
div.ttDiv
label
el-checkbox(:indeterminate="ii.indeterminate" v-model='ii.checked' @change='checkboxClick(ii)')
font {{ii.name}}
div.threeDiv(v-for='(itei, indee) in ii.children' :key='indee')
label
el-checkbox(v-model='itei.checked' @change='checkboxClick(itei)')
font {{itei.name}}
div(style="margin-top:20px;")
el-button(type='primary' size='medium' v-if="isAuth('sys:role:update')" @click="saveRoleMenu" v-prevent-re-click) 保存
//- el-button(type='primary' size='medium' @click='ccc') cccc
add-or-update( v-if="addOrUpdateVisible" ref="addOrUpdate" @reFreshDataList="reFreshDataList")
div(slot='content')
div.tableCard( style='overflow:auto;box-sizing:border-box;' v-loading.fullscreen.lock="rightLoading")
div(v-loading="rightLoading1" class='div_tree')
//- el-tree(ref="tree" @check-change="handleNodeClick" :render-content="renderContent" @node-expand="handleNodeExpand" :default-expanded-keys="expandedKeys" :props="defaultProps" :data="videoData" show-checkbox node-key="menu_id")
//- 树结构
div.my_role_tree()
div.firstDiv(v-for='(item, index) in videoData' :key='index')
div.ffDiv(@click='changeOpen(item)' :class='{active1 : !item.isopen, active2 : item.isopen}')
el-checkbox(:indeterminate="item.indeterminate" v-model='item.checked' @change='checkboxClick(item)')
font {{item.name}}
div.div_content(:id="item.menu_id")
div.twoDiv(v-for='(ii, ini) in item.children' :key='ini' )
div.ttDiv
label
el-checkbox(:indeterminate="ii.indeterminate" v-model='ii.checked' @change='checkboxClick(ii)')
font {{ii.name}}
div.threeDiv(v-for='(itei, indee) in ii.children' :key='indee')
label
el-checkbox(v-model='itei.checked' @change='checkboxClick(itei)')
font {{itei.name}}
div(style="margin-top:20px;")
el-button(type='primary' size='medium' v-if="isAuth('sys:role:update')" @click="saveRoleMenu" v-prevent-re-click) 保存
//- el-button(type='primary' size='medium' @click='ccc') cccc
add-or-update( v-if="addOrUpdateVisible" ref="addOrUpdate" @reFreshDataList="reFreshDataList")
</template>
<script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment