Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
67655b34 by 任超
Options

style:菜单

2 parents 8712b1bd b16b26e4
Inline Side-by-side
Showing 7 changed files with 541 additions and 642 deletions
<template>
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox dataReporting editDialogBox mainCenter"
:visible.sync="dialogVisible" width="92%">
<div slot="title" class="dialog_title" ref="dialogTitle">
{{ title || '详情' }}
......@@ -335,194 +335,11 @@
}
</script>
<style scoped lang="scss">
// @import "~@/styles/mixin.scss";
// @import "~@/styles/dialogBox.scss";
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
/deep/ .el-tabs {
color: #cef8ff;
}
.d-center {
z-index: 1000;
}
.sjmx {
display: flex;
flex-direction: column;
height: 49vh;
/deep/.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
.result {
flex: 1;
height: 100%;
}
.editDialogBox-con {
flex: 1;
height: 100%;
overflow-y: hidden;
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-tabs__nav-scroll {
background: none;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
/deep/.el-tabs__header {
border: none;
margin-bottom: 0;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-tabs__item.is-top {
background-color: none !important;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
border-top: none;
}
/deep/.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.dialog_footer {
flex-direction: column;
.dialog_button {
margin-top: 8px;
}
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
/deep/.el-select {
padding-right: 15px;
}
/deep/.el-icon-circle-close {
display: none;
}
/deep/.el-input__suffix {
right: -25px !important;
top: -5px;
}
/deep/.el-select,
/deep/.el-input {
flex: 1;
width: 100%;
}
/deep/.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 18px;
color: #d7eaee;
margin: 3px 0;
}
}
</style>
......
......@@ -5,6 +5,7 @@
background: none !important;
}
// 列表样式
.tableClass {
.el-table {
border: none !important;
......@@ -52,6 +53,7 @@
background-color: rgba(0, 0, 0, 0);
}
// 查询表单样式
.from-clues {
height: 100%;
width: 100%;
......@@ -264,7 +266,7 @@
}
}
// 角色配置
// 角色管理人员菜单配置弹框样式
.roleconfiguration {
.el-dialog__body {
display: flex;
......@@ -358,82 +360,7 @@
border-top: none;
}
.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
height: 825px !important;
.dialog-from {
padding: 13px;
border-radius: 2px;
box-sizing: border-box;
.el-row {
display: flex;
flex-wrap: nowrap;
}
.el-col {
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #b5d6dc;
border-radius: 2px;
border: 1px solid #224c7c;
margin: 5px;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: #02d9fd;
}
p {
flex: 1;
width: 100%;
padding-left: 5px;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
white-space: nowrap;
margin-right: 5px;
text-align: right;
}
}
}
.dialog_title {
display: flex;
position: relative;
font-size: 24px;
top: -8px;
width: 38%;
height: 40px;
margin-left: 28px;
justify-content: center;
}
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.el-dialog__footer {
padding-right: 40px;
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
......@@ -514,16 +441,7 @@
font-size: 12px;
}
.button:hover {
// width: 76px;
// height: 32px;
// color: #ffffff;
// cursor: pointer;
// border: 0;
// font-size: 12px;
// background: none;
}
// 按钮样式
.cx {
background: url("../image/btn.png") no-repeat 0 -34px;
background-size: cover;
......@@ -627,7 +545,7 @@
}
.item-content-input {
/deep/.el-input__inner {
.el-input__inner {
border: none !important;
text-align: right;
}
......@@ -742,6 +660,7 @@
}
}
.contentCenter {
position: absolute;
top: 50%;
......@@ -761,3 +680,347 @@
}
}
// 登簿日志弹出框
.entryJournal {
.el-tabs__header {
margin: 0;
}
.el-dialog {
display: flex;
flex-direction: column;
}
.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
height: 100%;
flex: 1;
position: relative;
}
.regularHeight {
display: flex;
flex-direction: column;
height: 87vh;
margin-bottom: 5px;
.editDialogBox-con,
.JsonEditor {
flex: 1;
}
}
.d-center {}
.dialog_title {
top: -6px
}
.el-tabs__item {
color: #CEF8FF !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.el-tabs__nav {
display: flex;
border: none !important;
}
.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
.el-icon-circle-close {
display: none;
}
.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.from-clues-content {
margin-top: 0;
background: none;
padding: 0;
}
.editDialogBox-box {
position: relative;
top: 10px;
height: 100%;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
.el-input {
flex: 1;
width: 100%;
}
.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 14px;
color: #d7eaee;
margin: 3px 0;
}
}
}
// 数据上报弹出框
.dataReporting {
.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
.el-tabs {
color: #cef8ff;
}
.d-center {
z-index: 1000;
}
.sjmx {
display: flex;
flex-direction: column;
height: 49vh;
.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
.result {
flex: 1;
height: 100%;
}
.editDialogBox-con {
flex: 1;
height: 100%;
overflow-y: hidden;
}
.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
.el-tabs__nav-scroll {
background: none;
}
.el-tabs__nav {
display: flex;
border: none !important;
}
.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
.el-tabs__header {
border: none;
margin-bottom: 0;
}
.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
.el-tabs__item.is-top {
background-color: none !important;
}
.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
border-top: none;
}
.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
.el-dialog__header {
display: flex;
margin-bottom: 10px;
}
.dialog_footer {
flex-direction: column;
.dialog_button {
margin-top: 8px;
}
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
.el-select {
padding-right: 15px;
}
.el-icon-circle-close {
display: none;
}
.el-input__suffix {
right: -25px !important;
top: -5px;
}
.el-select,
.el-input {
flex: 1;
width: 100%;
}
.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 18px;
color: #d7eaee;
margin: 3px 0;
}
}
}
// 人员管理上下移动按钮样式
.el-button.is-disabled.el-button--text {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
// 人员管理角色管理菜单管理修改新增弹框样式
.PersonnelDialog {
.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -7px;
width: 29%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
.selbig {
width: 500px;
}
}
......
<template>
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
<el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox entryJournal editDialogBox mainCenter"
:visible.sync="dialogVisible" width="90%">
<div slot="title" class="dialog_title" ref="dialogTitle">
{{ title || '登薄日志' }}
......@@ -458,119 +458,5 @@
}
</script>
<style scoped lang="scss">
// @import "~@/styles/mixin.scss";
// @import "~@/styles/dialogBox.scss";
/deep/.el-tabs__header {
margin: 0;
}
/deep/.el-dialog {
display: flex;
flex-direction: column;
}
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
padding-bottom: 30px;
height: 100%;
flex: 1;
position: relative;
}
.regularHeight {
display: flex;
flex-direction: column;
height: 87vh;
margin-bottom: 5px;
.editDialogBox-con,
.JsonEditor {
flex: 1;
}
}
.d-center {
}
.dialog_title {
top: -13px;
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-icon-circle-close {
display: none;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.from-clues-content {
margin-top: 0;
background: none;
padding: 0;
}
.editDialogBox-box {
position: relative;
top: 10px;
height: 100%;
}
.dialog-from {
padding-top: 0;
.el-col {
justify-content: space-between;
}
.bz {
height: 100%;
position: relative;
top: 3px;
}
/deep/.el-input {
flex: 1;
width: 100%;
}
/deep/.el-textarea__inner {
border: none !important;
margin: 0;
}
&_header {
margin: 0 -5px !important;
}
&_title {
font-size: 14px;
color: #d7eaee;
margin: 3px 0;
}
}
</style>
......
<template>
<dialogBox class="modifydialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
<dialogBox class="modifydialog PersonnelDialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="form" :rules="rules">
......@@ -63,208 +63,208 @@
</template>
<script>
import { getParentMenuListAction } from '@/api/authorityManage'
import IconList from '../../../components/IconList'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
IconList,
},
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
watch: {
value (val) {
this.myValue = val
}
},
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
},
// 选择图标
getIconName (data) {
this.form.icon = data;
import { getParentMenuListAction } from '@/api/authorityManage'
import IconList from '../../../components/IconList'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
IconList,
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
watch: {
value (val) {
this.myValue = val
}
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
this.$message.error({ message: res.message, showClose: true })
}
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
})
},
// 选择图标
getIconName (data) {
this.form.icon = data;
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
}
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
},
close () {
this.resetForm()
this.$emit('input', false)
}
},
close () {
this.resetForm()
this.$emit('input', false)
}
}
}
</script>
<style scoped lang="scss">
.modifydialog {
&-con {
background: #031a46;
}
// .modifydialog {
// &-con {
// background: #031a46;
// }
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 28%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
// /deep/.el-dialog__header {
// .dialog_title {
// display: -webkit-box;
// display: -ms-flexbox;
// display: flex;
// position: relative;
// top: -8px;
// width: 28%;
// height: 40px;
// margin-left: 28px;
// -webkit-box-pack: center;
// -ms-flex-pack: center;
// justify-content: center;
// white-space: nowrap;
b {
font-size: 16px;
}
}
// b {
// font-size: 16px;
// }
// }
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
}
// .el-dialog__headerbtn {
// right: 20px !important;
// top: 23px !important;
// }
// }
// }
</style>
......
<!-- 新增 & 修改角色 -->
<template>
<dialogBox
class="modifydialog"
class="modifydialog PersonnelDialog"
:title="title"
:width="'567px'"
:isMain="true"
......@@ -160,29 +160,4 @@
}
</script>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 24%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
}
</style>
......
<template>
<dialogBox :title="title" :width="'867px'" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
<dialogBox :title="title" :width="'867px'" class="modifydialog PersonnelDialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="form" :rules="rules">
......@@ -193,32 +193,4 @@
}
</script>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -7px;
width: 29%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
}
}
.el-dialog__headerbtn {
right: 20px !important;
top: 23px !important;
}
}
.selbig {
width: 500px;
}
}
</style>
......
......@@ -409,18 +409,4 @@ export default {
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
// .btnColRight {
// height: 30px;
// .button {
// position: absolute;
// left: 30px;
// }
// }
/deep/.el-button.is-disabled.el-button--text {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
</style>
......