Skip to content

S
so-manage-ui
Commit e2d28a02 authored by 何小勇's avatar 何小勇
Browse files
Options

merge

parents 83d44134 133893b6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1347 additions and 274 deletions
src/assets/css/index.css
View file @ e2d28a02
...@@ -274,8 +274,8 @@ div { ...@@ -274,8 +274,8 @@ div {
} }
.el-dialog__body { .el-dialog__body {
font-size: 18px; font-size: 16px;
color: #242c43; color: #404a62;
text-align: center; text-align: center;
padding: 0 16px; padding: 0 16px;
} }
...@@ -285,12 +285,6 @@ div { ...@@ -285,12 +285,6 @@ div {
.dialog_box .el-dialog__footer { .dialog_box .el-dialog__footer {
padding: 16px; padding: 16px;
} }
.result_box .el-dialog__body {
padding: 0px;
}
.sold_up_dialog .el-dialog__body {
padding: 24px 24px 4px;
}
/* 设置tab切换的样式 */ /* 设置tab切换的样式 */
.el-tabs__item.is-disabled { .el-tabs__item.is-disabled {
color: #8890a7 !important; color: #8890a7 !important;
...@@ -332,9 +326,17 @@ div { ...@@ -332,9 +326,17 @@ div {
} }
/* 设置tree的样式 */ /* 设置tree的样式 */
.el-tree {
position: static!important;
}
.el-tree-node__content{ .el-tree-node__content{
height: 36px; height: 36px;
} }
.el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
}
/* .usrrole .el-tree-node:focus>.el-tree-node__content{ /* .usrrole .el-tree-node:focus>.el-tree-node__content{
background: rgb(248, 249, 253) !important; background: rgb(248, 249, 253) !important;
} }
...@@ -994,39 +996,32 @@ border-radius:8px; ...@@ -994,39 +996,32 @@ border-radius:8px;
display: flex; display: flex;
} }
.top_fliter .filter_list { .filter_list {
flex-grow: 1; flex-grow: 1;
min-width: 550px;
font-size: 0; font-size: 0;
padding-left: 16px;
} }
.filter_list>.filter_item {
display: inline-block;
vertical-align: middle;
margin-top: 16px;
}
.filter_list>.filter_item { .filter_list>.filter_item {
margin-right:34px; display: flex;
align-items: center;
margin: 0 34px 16px 0;
} }
.filter_list>.filter_item>* { /* .filter_list>.filter_item>* {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} } */
.filter_list>.filter_item>.filter_title { .filter_list>.filter_item>.filter_title {
min-width: 56px;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
font-weight: 700;
color: #242c43; color: #242c43;
margin-right: 10px; margin-right: 10px;
white-space: nowrap; width: 84px;
white-space: pre-wrap;
font-weight: normal;
} }
.filter_list>.filter_item>.filter_title+* { /* .filter_list>.filter_item>.filter_title+* {
width: 300px; width: 300px;
} }
...@@ -1038,7 +1033,7 @@ border-radius:8px; ...@@ -1038,7 +1033,7 @@ border-radius:8px;
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 1px; top: 1px;
} } */
.top_fliter .filter_action { .top_fliter .filter_action {
flex-shrink: 0; flex-shrink: 0;
...@@ -1478,14 +1473,24 @@ border-radius:8px; ...@@ -1478,14 +1473,24 @@ border-radius:8px;
} }
.flex_left { .flex_left {
<<<<<<< HEAD
height: calc(100% - 20px); height: calc(100% - 20px);
=======
background-color: #fff;
height: calc(100% - 16px);
>>>>>>> 133893b61e0b75788c7111d07959c747c7a0fa2d
width: 320px; width: 320px;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
} }
.flex_right { .flex_right {
<<<<<<< HEAD
height: calc(100% - 20px); height: calc(100% - 20px);
=======
background-color: #fff;
height: calc(100% - 16px);
>>>>>>> 133893b61e0b75788c7111d07959c747c7a0fa2d
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
...@@ -1500,13 +1505,13 @@ border-radius:8px; ...@@ -1500,13 +1505,13 @@ border-radius:8px;
} }
.tree::-webkit-scrollbar { .tree::-webkit-scrollbar {
width: 5px; width: 6px;
height: 5px; height: 6px;
} }
.tree::-webkit-scrollbar-thumb { .tree::-webkit-scrollbar-thumb {
background: #bcc1d0; background: #bcc1d0;
border-radius: 10px; border-radius: 10px;
height: 5px; height: 6px;
} }
.tree::-webkit-scrollbar-track { .tree::-webkit-scrollbar-track {
background: transparent; background: transparent;
...@@ -1528,3 +1533,7 @@ border-radius:8px; ...@@ -1528,3 +1533,7 @@ border-radius:8px;
.pl-1 { .pl-1 {
padding-left: 1rem; padding-left: 1rem;
} }
.label-text {
font-size: 14px;
color: #404a62;
}
src/assets/item.css
View file @ e2d28a02
:root { :root {
--font-color: #404a62; --font-color: #404a62;
/* --el-color-primary-light-9: #f7f7f9; */ /* --el-color-primary-light-9: #f7f7f9; */
--el-color-white: #ffffff;
--el-color-black: #1a1a1a;
--el-color-primary: #2b4695;
--el-color-primary-light-3: #6b7eb5;
--el-color-primary-light-5: #95a3ca;
--el-color-primary-light-7: #c0c8df;
--el-color-primary-light-8: #d5daea;
--el-color-primary-light-9: #eaedf5;
--el-color-primary-dark-2: #223877;
--el-color-success: #429e8a;
--el-color-success-light-3: #7bbbad;
--el-color-success-light-5: #a1cfc5;
--el-color-success-light-7: #c7e2dc;
--el-color-success-light-8: #d9ece8;
--el-color-success-light-9: #ecf5f4;
--el-color-success-dark-2: #357e6e;
--el-color-warning: #e56600;
--el-color-warning-light-3: #ed944d;
--el-color-warning-light-5: #f2b380;
--el-color-warning-light-7: #f7d1b3;
--el-color-warning-light-8: #fae0cc;
--el-color-warning-light-9: #fcf0e6;
--el-color-warning-dark-2: #b75200;
--el-color-danger: #d75138;
--el-color-danger-light-3: #e38674;
--el-color-danger-light-5: #eba89c;
--el-color-danger-light-7: #f3cbc4;
--el-color-danger-light-8: #f7dcd7;
--el-color-danger-light-9: #fbeeeb;
--el-color-danger-dark-2: #ac412d;
--el-color-error: #d75138;
--el-color-error-light-3: #e38674;
--el-color-error-light-5: #eba89c;
--el-color-error-light-7: #f3cbc4;
--el-color-error-light-8: #f7dcd7;
--el-color-error-light-9: #fbeeeb;
--el-color-error-dark-2: #ac412d;
--el-color-info: #404a62;
--el-color-info-light-3: #7a8191;
--el-color-info-light-5: #a0a5b1;
--el-color-info-light-7: #c6c9d0;
--el-color-info-light-8: #d9dbe0;
--el-color-info-light-9: #ecedf0;
--el-color-info-dark-2: #333b4e;
--el-bg-color: #ffffff;
--el-bg-color-page: #f2f3f5;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #202531;
--el-text-color-regular: #404a62;
--el-text-color-secondary: #909bb6;
--el-text-color-placeholder: #a9b1c7;
--el-text-color-disabled: #a9b1c7;
--el-border-color: #dadee7;
--el-border-color-light: #e3e5eb;
--el-border-color-lighter: #e6e9ef;
--el-border-color-extra-light: #edf0f5;
--el-border-color-dark: #d1d5de;
--el-border-color-darker: #cbced7;
--el-fill-color: #f0f2f5;
--el-fill-color-light: #f2f3f7;
--el-fill-color-lighter: #f7f7f9;
--el-fill-color-extra-light: #fafcff;
--el-fill-color-dark: #ebedf0;
--el-fill-color-darker: #e6e8eb;
--el-fill-color-blank: #ffffff;
--el-component-size: 36px;
}
--el-color-white: #ffffff;
--el-color-black: #1a1a1a;
--el-color-primary: #2b4695;
--el-color-primary-light-3: #6b7eb5;
--el-color-primary-light-5: #95a3ca;
--el-color-primary-light-7: #c0c8df;
--el-color-primary-light-8: #d5daea;
--el-color-primary-light-9: #eaedf5;
--el-color-primary-dark-2: #223877;
--el-color-success: #429e8a;
--el-color-success-light-3: #7bbbad;
--el-color-success-light-5: #a1cfc5;
--el-color-success-light-7: #c7e2dc;
--el-color-success-light-8: #d9ece8;
--el-color-success-light-9: #ecf5f4;
--el-color-success-dark-2: #357e6e;
--el-color-warning: #e56600;
--el-color-warning-light-3: #ed944d;
--el-color-warning-light-5: #f2b380;
--el-color-warning-light-7: #f7d1b3;
--el-color-warning-light-8: #fae0cc;
--el-color-warning-light-9: #fcf0e6;
--el-color-warning-dark-2: #b75200;
--el-color-danger: #d75138;
--el-color-danger-light-3: #e38674;
--el-color-danger-light-5: #eba89c;
--el-color-danger-light-7: #f3cbc4;
--el-color-danger-light-8: #f7dcd7;
--el-color-danger-light-9: #fbeeeb;
--el-color-danger-dark-2: #ac412d;
--el-color-error: #d75138;
--el-color-error-light-3: #e38674;
--el-color-error-light-5: #eba89c;
--el-color-error-light-7: #f3cbc4;
--el-color-error-light-8: #f7dcd7;
--el-color-error-light-9: #fbeeeb;
--el-color-error-dark-2: #ac412d;
--el-color-info: #404a62;
--el-color-info-light-3: #7a8191;
--el-color-info-light-5: #a0a5b1;
--el-color-info-light-7: #c6c9d0;
--el-color-info-light-8: #d9dbe0;
--el-color-info-light-9: #ecedf0;
--el-color-info-dark-2: #333b4e;
--el-bg-color: #ffffff;
--el-bg-color-page: #f2f3f5;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #202531;
--el-text-color-regular: #404a62;
--el-text-color-secondary: #909bb6;
--el-text-color-placeholder: #a9b1c7;
--el-text-color-disabled: #a9b1c7;
--el-border-color: #dadee7;
--el-border-color-light: #e3e5eb;
--el-border-color-lighter: #e6e9ef;
--el-border-color-extra-light: #edf0f5;
--el-border-color-dark: #d1d5de;
--el-border-color-darker: #cbced7;
--el-fill-color: #f0f2f5;
--el-fill-color-light: #f2f3f7;
--el-fill-color-lighter: #f7f7f9;
--el-fill-color-extra-light: #fafcff;
--el-fill-color-dark: #ebedf0;
--el-fill-color-darker: #e6e8eb;
--el-fill-color-blank: #ffffff;
}
.text-hide1{
.text-hide1{ overflow: hidden;
overflow: hidden; text-overflow:ellipsis;
text-overflow:ellipsis; white-space: nowrap;
white-space: nowrap; }
} .log_content_nor::-webkit-scrollbar {
width: 0px; /*对垂直流动条有效*/
.log_content_nor::-webkit-scrollbar { height: 0px; /*对水平流动条有效*/
width: 0px; /*对垂直流动条有效*/ }
height: 0px; /*对水平流动条有效*/ \ No newline at end of file
}
\ No newline at end of file
src/bg-ui/bg-filter-group.vue
View file @ e2d28a02
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<slot name="left_action"></slot> <slot name="left_action"></slot>
</div> </div>
<div class="right-filter"> <div class="right-filter">
<el-input :placeholder="placeholder" v-model="modelValue"> <el-input :placeholder="placeholder" v-model="value">
<template #append> <template #append>
<div class="append-btn" @click="search"> <div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon> <bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
...@@ -28,17 +28,17 @@ ...@@ -28,17 +28,17 @@
</template> </template>
<script setup> <script setup>
import { computed, onMounted, reactive, toRefs, watch,ref } from "vue-demi" import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
const state = reactive({ const state = reactive({
showFlag: false, showFlag: false,
modelValue: "" value: ""
}) })
const props = defineProps({ const props = defineProps({
keyword: { modelValue: {
type: String, type: String,
default: "" default: '',
}, },
placeholder: { placeholder: {
type: String, type: String,
...@@ -47,17 +47,20 @@ const props = defineProps({ ...@@ -47,17 +47,20 @@ const props = defineProps({
}) })
watch(props,(n,o) => { watch(props,(n,o) => {
state.modelValue = n.keyword state.value = n.modelValue
}) })
const emit = defineEmits(['search']) watch(() => state.value,(n,o) => {
emit('update:modelValue',n)
})
const emit = defineEmits(['search','update:modelValue'])
const search = () => { const search = () => {
emit('search',state.modelValue) emit('search',state.value)
} }
const moreFilter = () => { const moreFilter = () => {
state.showFlag = !state.showFlag state.showFlag = !state.showFlag
} }
onMounted(() => { onMounted(() => {
state.modelValue = props.keyword state.value = props.modelValue
}) })
const { modelValue,showFlag } = toRefs(state) const { value,showFlag } = toRefs(state)
</script> </script>
\ No newline at end of file
src/bg-ui/bg-switch-ele.vue 0 → 100644
View file @ e2d28a02
<template>
<el-switch
class="bg-switch-ele"
v-model="value"
:active-value="1"
:inactive-value="0"
inline-prompt
:active-text="activeText"
:inactive-text="inactiveText"
@change="changeState"
/>
</template>
<script setup>
import { onMounted, reactive, toRefs, watch } from "vue"
const props = defineProps({
modelValue: {
type: Number,
default: 0
},
activeText: {
type: String,
default: "是",
},
inactiveText: {
type: String,
default: "否"
},
rowId: {
type: Number,
default: null
}
})
const state = reactive({
value: 1
})
const emit = defineEmits(['changeState'])
const changeState = () => {
if (props.rowId) {
let params = {
state: state.value,
id: props.rowId
}
emit('changeState',params)
}else {
emit('changeState',state.value)
}
}
onMounted(()=> {
state.value = props.modelValue
})
const { value } = toRefs(state)
</script>
src/bg-ui/bg-switch.vue
View file @ e2d28a02
...@@ -58,24 +58,22 @@ export default { ...@@ -58,24 +58,22 @@ export default {
}, },
now_style() { now_style() {
return { return {
color: this.colors[this.now_index],
borderColor: this.colors[this.now_index], borderColor: this.colors[this.now_index],
backgroundColor: this.colors[this.now_index],
}; };
}, },
now_label_style() { now_label_style() {
return this.now_index == 0 return this.now_index == 0
? { left: this.circle_height + this.gap + 5 + "px" } ? { left: this.circle_height + this.gap + 5 + "px" }
: { left: "10px" }; : { left: "6px" };
}, },
now_circle_style() { now_circle_style() {
return this.now_index == 0 return this.now_index == 0
? { ? {
left: this.gap + "px", left: this.gap + "px",
backgroundColor: this.colors[this.now_index],
} }
: { : {
right: this.gap + "px", right: this.gap + "px",
backgroundColor: this.colors[this.now_index],
}; };
}, },
}, },
......
src/bg-ui/bg-table-btns-more.vue 0 → 100644
View file @ e2d28a02
<template>
<div class="bg-table-btns-more" :style="style" @click.stop>
<bg-table-btn
v-for="(item, index) in operations"
:key="index"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
{{ getName(item) }}
</bg-table-btn>
</div>
</template>
<script>
export default {
name: "BgTableBtnsMore",
props: {
operations: {
type: Array,
default: () => [],
},
},
data() {
return {
style: {},
};
},
methods: {
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
} else if (typeof disabled === "boolean") {
return disabled;
} else if (typeof disabled === "undefined") {
return false;
} else {
return !!disabled;
}
},
clickAction({ callback }) {
typeof callback === "function" && callback();
},
getName({ name }) {
if (typeof name === "function") {
return name();
} else {
return name;
}
},
upStyle() {
let { top, right } = this.$parent.$el.getBoundingClientRect();
let { width } = window.document.body.getBoundingClientRect();
this.style = {
position: "fixed",
top: `${top + 16}px`,
right: `${width - right - 16}px`,
};
},
},
mounted() {
document.body.append(this.$el);
this.upStyle();
},
beforeDestroy() {
this.$el && this.$el.remove();
},
};
</script>
src/bg-ui/bg-table-btns.vue 0 → 100644
View file @ e2d28a02
<template>
<div class="bg-table-btns">
<bg-table-btn
v-for="(item, index) in curOperations"
:key="index"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
{{ getName(item) }}
</bg-table-btn>
<a
class="bg-table-btn"
@mouseenter="showMOreBtns"
@mouseleave="hideMoreBtns"
v-if="otherOperations.length > 0"
>
<!-- <i class="el-icon-more" /> -->
<bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
<bg-table-btns-more
:operations="otherOperations"
@mouseenter="showMOreBtns"
@mouseleave="hideMoreBtns"
v-if="showMore"
/>
</a>
</div>
</template>
<script>
import BgTableBtnsMore from "./bg-table-btns-more.vue";
export default {
name: "BgTableBtns",
components: { BgTableBtnsMore },
props: {
operations: {
type: Array,
default: () => [],
},
},
data() {
return {
showMore: false,
timer: null,
};
},
computed: {
curOperations() {
return this.operations.slice(0, this.operations.length > 3 ? 2 : 3);
},
otherOperations() {
return this.operations.slice(2, this.operations.length);
},
},
methods: {
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
} else if (typeof disabled === "boolean") {
return disabled;
} else if (typeof disabled === "undefined") {
return false;
} else {
return !!disabled;
}
},
clickAction({ callback }) {
typeof callback === "function" && callback();
},
getName({ name }) {
if (typeof name === "function") {
return name();
} else {
return name;
}
},
showMOreBtns() {
if (this.timer) clearTimeout(this.timer);
this.showMore = true;
},
hideMoreBtns() {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.showMore = false;
}, 50);
},
},
};
</script>
src/bg-ui/bg-table.vue
View file @ e2d28a02
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
@select="selectActionRow" @select="selectActionRow"
@select-all="selectActionAll" @select-all="selectActionAll"
:stripe="stripe" :stripe="stripe"
:row-class-name="stripe ? tableRowClassName : ''"
tooltip-effect="light"
> >
<template v-slot:empty> <template v-slot:empty>
<div class="empty_container"> <div class="empty_container">
...@@ -16,6 +18,10 @@ ...@@ -16,6 +18,10 @@
</div> </div>
</div> </div>
</template> </template>
<el-table-column
v-if="paddingLeft > 10"
:width="paddingLeft - 10"
></el-table-column>
<el-table-column <el-table-column
type="selection" type="selection"
:selectable="selectable" :selectable="selectable"
...@@ -30,7 +36,7 @@ ...@@ -30,7 +36,7 @@
type="index" type="index"
:label="indexLabel" :label="indexLabel"
width="80" width="80"
align="center" align="left"
> >
<!-- 序号 --> <!-- 序号 -->
</el-table-column> </el-table-column>
...@@ -111,7 +117,11 @@ export default { ...@@ -111,7 +117,11 @@ export default {
stripe: { stripe: {
type: Boolean, type: Boolean,
default: false default: false
} },
paddingLeft: {
type: [Number, String],
default: () => 33,
},
}, },
/* filters: { /* filters: {
ellipsis(value, max) { ellipsis(value, max) {
...@@ -172,7 +182,14 @@ export default { ...@@ -172,7 +182,14 @@ export default {
this.allSelectData={} this.allSelectData={}
this.nowSelectData=[] this.nowSelectData=[]
this.clearSelection(); this.clearSelection();
} },
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return "white-row";
} else {
return "stripe-row";
}
},
}, },
}; };
</script> </script>
src/bg-ui/index.js
View file @ e2d28a02
...@@ -32,6 +32,9 @@ ...@@ -32,6 +32,9 @@
import debounce from './debounce' import debounce from './debounce'
import BgPagination from './bg-pagination.vue' import BgPagination from './bg-pagination.vue'
import BgInnerTabs from './bg-inner-tabs.vue' import BgInnerTabs from './bg-inner-tabs.vue'
import BgFilterGroup from './bg-filter-group.vue'
import BgSwitchEle from './bg-switch-ele.vue'
import BgTableBtns from './bg-table-btns.vue'
const components = { const components = {
BgIcon,//字体图标 BgIcon,//字体图标
...@@ -65,6 +68,9 @@ const components = { ...@@ -65,6 +68,9 @@ const components = {
debounce,//防抖组件 debounce,//防抖组件
BgPagination,// 分页组件 BgPagination,// 分页组件
BgInnerTabs,//内部tab BgInnerTabs,//内部tab
BgFilterGroup,//高级搜索
BgSwitchEle,
BgTableBtns,
}; };
const install = (Vue) => { const install = (Vue) => {
......
src/bg-ui/index.scss
View file @ e2d28a02
...@@ -659,17 +659,16 @@ a { ...@@ -659,17 +659,16 @@ a {
} }
th, th,
td { td {
padding: 12px 0!important; padding: 11px 0!important;
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
color: #404a62; color: #404a62;
line-height: 18px; line-height: 14px;
} }
} }
&.el-table--border { &.el-table--border {
border-top-color: #b0bee8; border-top-color: #b0bee8;
border-bottom: 1px solid #ebeef5;
.el-table__header-wrapper { .el-table__header-wrapper {
position: relative; position: relative;
...@@ -687,7 +686,7 @@ a { ...@@ -687,7 +686,7 @@ a {
&::after { &::after {
content: ""; content: "";
width: 1px; width: 0px;
height: 100%; height: 100%;
background-color: #b0bee8; background-color: #b0bee8;
position: absolute; position: absolute;
...@@ -705,7 +704,12 @@ a { ...@@ -705,7 +704,12 @@ a {
} }
} }
} }
.stripe-row td {
background-color: #fff!important;
}
.white-row td {
background-color: #f7f7f9!important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td { .el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f7f7f9; background-color: #f7f7f9;
} }
...@@ -738,6 +742,15 @@ a { ...@@ -738,6 +742,15 @@ a {
margin: 0 !important; margin: 0 !important;
} }
} }
.el-popper {
max-width: 388px;
padding: 15px 12px;
color: #202531;
box-shadow: 0px 4px 12px 0px
rgba(18, 30, 63, 0.1);
border: solid 1px #e6e9ef;
font-size: 14px;
}
} }
.bg-table-pro{ .bg-table-pro{
...@@ -2023,29 +2036,31 @@ a { ...@@ -2023,29 +2036,31 @@ a {
.bg-switch { .bg-switch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 64px; width: 44px;
height: 28px; height: 20px;
border-radius: 14px; border-radius: 10px;
border: solid 2px #275a9d; border: solid 2px #2b4695;
position: relative; position: relative;
color: #275a9d; color: #fff;
background-color: #2b4695;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
> .label { > .label {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 400;
line-height: 24px; line-height: 15px;
position: absolute; position: absolute;
color: #fff;
} }
> .circle { > .circle {
width: 18px; width: 16px;
height: 18px; height: 16px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 3px; // top: 2px;
background-color: #275a9d; background-color: #fff;
} }
&.disabled { &.disabled {
...@@ -2312,9 +2327,8 @@ a { ...@@ -2312,9 +2327,8 @@ a {
.bg-pagination { .bg-pagination {
height: 32px; height: 32px;
position: absolute; margin-top: 16px;
right: 24px; float: right;
bottom: 16px;
.el-pagination { .el-pagination {
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
...@@ -2459,4 +2473,64 @@ a { ...@@ -2459,4 +2473,64 @@ a {
border: 1px solid #e6e9ef; border: 1px solid #e6e9ef;
padding: 24px 16px 8px; padding: 24px 16px 8px;
} }
}
// 表格操作按钮组
.bg-table-btns {
position: relative;
display: inline-block;
vertical-align: middle;
}
.bg-table-btns-more {
position: absolute;
top: 28px;
right: -16px;
z-index: 19;
padding: 4px 0;
background-color: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border-radius: 4px;
border: solid 1px #e6e9ef;
width: 88px;
.bg-table-btn {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
display: block;
padding: 0 16px;
margin: 0;
color: #202531;
line-height: 34px;
padding-left: 16px;
&:hover {
background-color: #f2f3f7;
color: #202531;
}
&.disabled {
color: #a9b1c7;
}
&::before {
display: none;
}
}
&::before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 10px;
width: 100%;
}
}
.bg-switch-ele {
width: 44px;
height: 20px;
.el-switch__core {
width: 100%;
}
} }
\ No newline at end of file
src/page/main/config/dict/index.vue
View file @ e2d28a02
This diff is collapsed.
src/page/main/develop/menu/index.vue
View file @ e2d28a02
<template> <template>
<div class="detail_container"> <div class="page_container">
菜单管理 <div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
<el-breadcrumb-item > 菜单管理 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="flex_row">
<div class="flex_left">
<div class="tree_content">
<div class="search">
<el-input
v-model="search"
placeholder="请输入内容"
:prefix-icon="Search"
/>
</div>
<div class="tree">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expand-all="true"
:highlight-current="true"
node-key="menu_id"
ref="menuTree"
>
<template #default="{ node, data }">
<div class="custom-tree-node" pointer-events="none">
<span
class="label-text text_clip"
:title="data.menu_name"
>{{ data.menu_name }}</span
>
</div>
<span class="tree-action-box">
<bg-icon
@click.stop="showAction($event, data,node)"
class="tree-more"
icon="#bg-ic-s-more"
></bg-icon>
</span>
</template>
</el-tree >
<Teleport to="body">
<div
class="tree-action"
ref="treeAction"
v-show="actionFlag"
:style="{ top: acTop, left: acLeft,bottom:acBottom }"
>
<div class="action" @click="fileAction(1,selectData,selectParentData)">
新建本级
</div>
<div class="action" @click="fileAction(2,selectData,selectParentData)">
新建下级
</div>
<div class="action" @click="fileAction(3,selectData,selectParentData)">
删除
</div>
<div class="action" :class="{'disable':moveIndex==0}" @click="fileAction(4,selectData,selectParentData,moveIndex==0)">
上移
</div>
<div class="action" :class="{'disable': !selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1}" @click="fileAction(5,selectData,selectParentData,!selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1)" >
下移
</div>
</div>
</Teleport>
</div>
</div>
</div>
<div class="flex_right">
<div class="main_container">
</div>
</div>
</div>
</div> </div>
</template> </template>
<script > <script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity' import { Search } from '@element-plus/icons-vue'
import { getCurrentInstance } from 'vue' import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
export default { import { ElMessage } from 'element-plus'
components: { import axios from '../../../../request/http.js'
const router = useRouter();
const menuTree = ref(null)
const treeAction = ref(null)
const acTop = ref('');
const acLeft = ref('');
const acBottom = ref('');
const actionFlag = ref(false)
const state = reactive({
data: [],
search: "",
selectData:null,
selectParentData:null,
treeAction,
menuTree,
bottomGap:30,//弹窗吸底高度
defaultProps: {
children: 'Child',
label: 'menu_name',
}, },
setup() { actionDataIndex: 0,
})
const moveIndex = computed({
get: () => {
let index = 0
if(state.selectData) {
console.log(state.selectData)
findIndex(state.selectData.menu_id,state.data)
index = state.actionDataIndex
}
return index
}
})
const getMenuTree = () => {
axios
.get(`/apaas/system/v5/menu/tree`)
.then((res) => {
if (res.data.code == 200) {
state.data = res.data.data || []
nextTick().then(() => {
state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
handleNodeClick(state.data[0]);
})
}else {
ElMessage.error(res.data.data)
}
})
}
const findIndex= (code,arr) => {
arr.forEach((e,i) => {
if (e.menu_id == code) {
state.actionDataIndex = i
console.log(e,i)
}else {
if (e.Child && e.Child.length > 0) {
findIndex(code,e.Child)
}
}
})
}
const showAction = (e, data,node) => {
acTop.value = ''
acLeft.value = ''
acBottom.value = ''
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
var allHeight = document.body.scrollHeight
console.log(rect, data,node);
onBeforeMount(() => { actionFlag.value = true;
state.selectData = data
if(node.parent.data.Child){
state.selectParentData = node.parent.data
}else{
//没有children则是最上层元素
state.selectParentData = null
}
nextTick().then(()=>{
setTimeout(()=>{
var height = window.getComputedStyle(state.treeAction).height
height = parseInt(height)
//判断弹窗位置是否超过屏幕，超过则吸底展示
if(height+rect.y - 17>allHeight-state.bottomGap){
acBottom.value = state.bottomGap+ "px";
acLeft.value = rect.x + 35 + "px";
}else{
acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px";
}
}) })
return { })
...toRefs(), };
const handleNodeClick = (data) => {
if (state.selectData && state.selectData.menu_id == data.menu_id) {
return
}
state.selectData = data
console.log(data)
closeAction()
}
const fileAction = (val,data,parent,disabled=false) => {
if (val == 1) {
console.log("新建本级", data ,parent,disabled)
test()
}else if (val == 2) {
console.log("新建下级",data,parent,disabled)
test()
}else if (val == 3) {
console.log("删除",data,parent,disabled)
test()
}else if (val == 4) {
console.log("上移",data,parent,disabled)
test()
if (disabled) {
return
} }
}, test()
}else {
console.log("下移",data,parent,disabled)
if (disabled) {
return
}
test()
}
}
const test = () => {
console.log("执行了")
}
const closeAction = () => {
actionFlag.value = false;
} }
onBeforeMount(()=>{
window.addEventListener("click", closeAction)
window.addEventListener("scroll", closeAction,true)
getMenuTree()
})
onBeforeUnmount(()=>{
window.removeEventListener('click', closeAction);
window.removeEventListener('scroll', closeAction);
})
const {
data,
search,
defaultProps,
selectParentData,
selectData,
} = toRefs(state)
</script> </script>
<style lang="scss" scoped> <style scoped>
.tree_content {
overflow: hidden;
height: calc(100% - 4px);
position: relative;
}
.search {
padding: 16px 16px 10px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
}
.tree :deep().el-tree-node .el-tree-node__content {
padding: 0 16px!important;
}
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
padding-left: 16px;
}
.tree-action-box {
display: none;
position: absolute;
right: 0px;
background-color: #f2f3f7;
width: 44px;
text-align: center;
height: 36px;
line-height: 36px;
}
.tree .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.tree-more {
font-size: 12px;
color: #3759be;
}
.tree-action {
width: 144px;
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
padding: 4px 0;
border-radius: 4px;
position: fixed;
z-index: 9;
}
.tree-action .action {
width: 100%;
height: 34px;
line-height: 34px;
padding-left: 16px;
font-size: 14px;
color: #202531;
cursor: pointer;
}
.tree-action .action:hover {
background-color: #f2f3f7;
color: #3759be;
}
.tree-action .disable{
cursor: not-allowed;
color: #616f94;
}
.tree-action .disable:hover{
background-color: #fff;
color: #616f94;
}
.main_container {
padding: 15px;
height: 100%;
}
.table_container {
height: calc(100% - 30px);
overflow: auto;
}
.pagination_box {
position: sticky;
margin-top: 16px;
bottom: 0px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 8px;
}
.bg-pagination {
bottom: unset
}
</style> </style>
\ No newline at end of file
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