Skip to content

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

组织管理

parent 237504d7
Hide whitespace changes
Inline Side-by-side
Showing with 1034 additions and 64 deletions
src/assets/css/index.css
View file @ 7c0deb5f
...@@ -1478,23 +1478,25 @@ border-radius:8px; ...@@ -1478,23 +1478,25 @@ border-radius:8px;
} }
.flex_left { .flex_left {
background-color: #fff;
height: calc(100% - 20px); height: calc(100% - 20px);
width: 320px; width: 320px;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
} }
.flex_right { .flex_right {
background-color: #fff;
height: calc(100% - 20px); height: calc(100% - 20px);
flex: 1; flex: 1;
overflow: hidden;
}
.bgc_white {
box-shadow: 0px 1px 4px 0px box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15); rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
overflow: hidden; background-color: #fff;
} }
.tree::-webkit-scrollbar { .tree::-webkit-scrollbar {
......
src/assets/imgs/img_data-complete.png
View replaced file @ 237504d7 View file @ 7c0deb5f
src/assets/imgs/img_data-complete.png

41.1 KB | W: | H:

src/assets/imgs/img_data-complete.png

9.49 KB | W: | H:

src/assets/imgs/img_data-complete.png
src/assets/imgs/img_data-complete.png
src/assets/imgs/img_data-complete.png
src/assets/imgs/img_data-complete.png
  • 2-up
  • Swipe
  • Onion skin
src/page/main/develop/account/add/index.vue
View file @ 7c0deb5f
...@@ -47,8 +47,12 @@ ...@@ -47,8 +47,12 @@
<systemForm v-show="step === 1" ref="systemFormRef" :data="tempFormData" @action="getSystemFormData"></systemForm> <systemForm v-show="step === 1" ref="systemFormRef" :data="tempFormData" @action="getSystemFormData"></systemForm>
<contactForm v-show="step === 2" ref="contactFormRef" :data="tempFormData" @action="getContactFormData"></contactForm> <contactForm v-show="step === 2" ref="contactFormRef" :data="tempFormData" @action="getContactFormData"></contactForm>
<div class="process_end" v-show="step === 3"> <div class="process_end" v-show="step === 3">
<div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
<el-button @click="cancel">返回列表</el-button> <el-button @click="cancel">返回列表</el-button>
<el-button type="primary" @click="continueCreate">继续创建</el-button> <el-button type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -81,7 +85,7 @@ const step = ref(1); ...@@ -81,7 +85,7 @@ const step = ref(1);
const systemFormRef = ref(null); const systemFormRef = ref(null);
const contactFormRef = ref(null); const contactFormRef = ref(null);
const tempFormData = ref(null) const tempFormData = ref(null)
const formData = ref({ const formData = reactive({
org: '', org: '',
code: '', code: '',
name: '', name: '',
...@@ -99,37 +103,6 @@ const formData = ref({ ...@@ -99,37 +103,6 @@ const formData = ref({
remark: '', remark: '',
}); //业务系统表单+联系人表单 }); //业务系统表单+联系人表单
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.type === "1") {
setTimeout(()=> {
systemFormRef.value.setForm({
org: 'a',
code: 'b',
name: 'b',
desc: 'b',
logo: ['b'],
role: 'b',
account: 'b',
password: 'b',
confirm_password: 'b',
url: 'b',
firm_name: 'b',
is_use: 'b',
})
contactFormRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
})
},500)
}
})
// 下一步 // 下一步
const nextStep = () => { const nextStep = () => {
systemFormRef.value.submitForm(); systemFormRef.value.submitForm();
...@@ -170,6 +143,37 @@ const cancel = () => { ...@@ -170,6 +143,37 @@ const cancel = () => {
router.go(-1); router.go(-1);
} }
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.type === "1") {
setTimeout(()=> {
systemFormRef.value.setForm({
org: 'a',
code: 'b',
name: 'b',
desc: 'b',
logo: ['b'],
role: 'b',
account: 'b',
password: 'b',
confirm_password: 'b',
url: 'b',
firm_name: 'b',
is_use: 'b',
})
contactFormRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
})
},500)
}
})
</script> </script>
<style scoped> <style scoped>
...@@ -228,10 +232,15 @@ const cancel = () => { ...@@ -228,10 +232,15 @@ const cancel = () => {
vertical-align: middle; vertical-align: middle;
} }
.process_end { .process_end {
text-align: center; height: 100%;
padding: 50px 0; display: flex;
justify-content: center;
align-items: center;
} }
.process_end div {
text-align: center;
}
.step_icon { .step_icon {
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
...@@ -260,13 +269,13 @@ const cancel = () => { ...@@ -260,13 +269,13 @@ const cancel = () => {
border: 4px solid #e6e9ef; border: 4px solid #e6e9ef;
vertical-align: middle; vertical-align: middle;
} }
.content_process /deep/ .el-step.is-horizontal .el-step__line { .content_process :deep() .el-step.is-horizontal .el-step__line {
height: 4px; height: 4px;
} }
.content_process /deep/ .el-step__head.is-finish .el-step__line { .content_process :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%); background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%);
} }
.process_complete /deep/ .el-step__head.is-finish .el-step__line { .process_complete :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%); background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%);
} }
</style> </style>
src/page/main/develop/account/add/system-form.vue
View file @ 7c0deb5f
...@@ -115,6 +115,7 @@ const clearForm = () => { ...@@ -115,6 +115,7 @@ const clearForm = () => {
if (!systemRef) return if (!systemRef) return
systemRef.value.resetFields() systemRef.value.resetFields()
} }
const setForm = (data) => { const setForm = (data) => {
systemForm.value = Object.assign(systemForm, data); systemForm.value = Object.assign(systemForm, data);
} }
......
src/page/main/develop/account/index.vue
View file @ 7c0deb5f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="flex_row"> <div class="flex_row">
<div class="flex_left"> <div class="flex_left bgc_white">
<div class="tree_header"> <div class="tree_header">
政务机构 政务机构
</div> </div>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex_right"> <div class="flex_right bgc_white">
<div class="main_container"> <div class="main_container">
<div class="apaas_button"> <div class="apaas_button">
<el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button> <el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
...@@ -274,7 +274,7 @@ import { useRouter } from 'vue-router'; ...@@ -274,7 +274,7 @@ import { useRouter } from 'vue-router';
height: calc(100% - 65px); height: calc(100% - 65px);
padding: 5px; padding: 5px;
} }
.tree /deep/ .el-tree-node>.el-tree-node__children { .tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset; overflow: unset;
} }
.main_container { .main_container {
...@@ -287,6 +287,7 @@ import { useRouter } from 'vue-router'; ...@@ -287,6 +287,7 @@ import { useRouter } from 'vue-router';
} }
.pagination_box { .pagination_box {
position: sticky; position: sticky;
position: -webkit-sticky;
margin-top: 16px; margin-top: 16px;
bottom: 0px; bottom: 0px;
background-color: #fff; background-color: #fff;
......
src/page/main/system/organization/directory-form.vue 0 → 100644
View file @ 7c0deb5f
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="directoryForm"
:rules="directoryFormRules"
ref="directoryRef"
style="max-width: 66%"
>
<el-form-item label="上级目录" prop="parent">
<el-input v-model="directoryForm.parent" />
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="directoryForm.name" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const directoryForm = reactive({
parent: '',
name: '',
})
const directoryFormRules = reactive({
parent: [
{ required: true, message: '请输入上级目录', trigger: 'blur' },
],
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
})
const directoryRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!directoryRef) return
await directoryRef.value.validate((valid, fields) => {
if (valid) {
emit('action', directoryForm)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!directoryRef) return
directoryRef.value.resetFields()
}
const setForm = (data) => {
directoryForm.value = Object.assign(directoryForm, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
src/page/main/system/organization/index.vue
View file @ 7c0deb5f
<template> <template>
<div class="detail_container"> <div class="page_container">
组织管理 <div class="bg-breadcrumb">
</div> <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 bgc_white">
<div class="tree_header">
政务机构
</div>
<div class="tree_content">
<div class="search">
<el-input
v-model="search"
placeholder="请输入组织名称搜索"
:prefix-icon="Search"
/>
</div>
<div class="tree">
<!-- <el-tree class="file-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
<template #default="{ node, data }">
<div class="custom_tree_node">
<span
class="label-text "
:class="{'is_active': treeSelected === data.dept}"
:title="node.label"
>{{ node.label }}
</span>
<span class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)">
<bg-icon
class="tree-more"
icon="#bg-ic-s-more"
></bg-icon>
</span>
</div>
</template>
</el-tree>
<Teleport to="body">
<div
class="tree-action"
v-show="actionFlag"
:style="{ top: acTop, left: acLeft }"
>
<div class="action" >
上移
</div>
<div class="action" >
下移
</div>
</div>
</Teleport> -->
<tree></tree>
</div>
</div>
</div>
<div class="flex_right">
<div class="info_container bgc_white">
<div class="title"><span class="icon_box"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 基本信息 <bg-icon style="font-size: 14px" class="step_icon" icon="#bg-ic-arrow-right"></bg-icon> </div>
<bg-info :data="baseInfo"></bg-info>
</div>
<div class="main_container bgc_white">
<div class="apaas_button">
<el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
</div>
<div class="table_container apaas_scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:action="{ row }">
<bg-table-btn class="btn">
编辑
</bg-table-btn>
<bg-table-btn class="btn">
修改密码
</bg-table-btn>
<bg-table-btn class="btn">
删除
</bg-table-btn>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="1"
:size="10"
:total="100"
@change-page="changePage"
@change-size="changeSize"
>
</bg-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script > <script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, } from '@vue/reactivity' import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core' import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
export default { import tree from './tree.vue';
components: { const baseInfo = ref(
}, [
setup() { {
name: "能力名称",
onBeforeMount(() => { value: "",
nameWidth: 112
}) },
return { {
...toRefs(), name: "调用地址",
value: "",
nameWidth: 112
},
{
name: "是否TLS协议",
value: "",
full: true,
nameWidth: 112
},
{
name: "是否TLS协议",
value: "",
full: true,
nameWidth: 112
},
]
)
const headers = ref([
{
label: "账号",
prop: "account",
width: 180
},
{
label: "手机号",
prop: "phone",
minWidth: 180
},
{
label: "角色",
prop: "role",
width: 150
},
{
label: "创建时间",
prop: "create_time",
width: 150
},
{
label: "是否启用",
prop: "is_use",
width: 80
},
{
label: "操作",
prop: "action",
width: 220,
fixed: "right",
},
])
const tableRows = ref([
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
])
const search=ref("");
const router = useRouter();
onBeforeMount(() => {
})
const addAccount = (params) => {
router.push({
path: "/develop/account/add",
query: {
type: params
}
})
}
const treeSelected = ref(null);
const handleNodeClick = (data) => {
treeSelected.value = data.dept
console.log(treeSelected.value)
}
const data = [
{
label: '平台用户组织',
dept: 1
},
{
label: '湖北省efadsfasfdgsafgfdtrgsdfsfsd555',
dept: 4,
children: [
{
label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
children: [
{
label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
dept: 2
},
{
label: 'fddfsgdfgdfgdsfsffsdfsdfsdfwefadsgs',
dept: 3
},
{
label: '咯技术的卡洛斯达拉斯达拉斯昆德拉老师',
dept: 5,
},
],
},
{
label: '荆州市',
dept: 6,
children: [
{
label: '公安局',
dept: 7,
},
{
label: '应急管理局',
dept: 8,
},
],
}
],
},
{
label: '四川省',
dept: 9,
children: [
{
label: '成都市',
dept: 10,
children: [
{
label: '天府新区',
dept: 11,
},
],
},
],
},
{
label: '比格大数据',
dept: 12,
children: [
{
label: '武汉研发中心',
dept: 13,
children: [
{
label: '研发部',
dept: 14,
},
],
},
{
label: '西南大区',
dept: 15,
children: [
{
label: '事业部',
dept: 16,
},
{
label: '事业部',
dept: 17,
},
{
label: '事业部',
dept: 18,
},
{
label: '事业部',
dept: 19,
},
{
label: '事业部',
dept: 20,
},
{
label: '事业部',
dept: 21,
},
{
label: '事业部',
dept: 22,
},
],
},
],
},
]
const defaultProps = {
children: 'children',
label: 'label',
}
const changeSize = (size) => {
} }
},
} const changePage = (size) => {
}
const acTop = ref(0);
const acLeft = ref(0);
const actionFlag = ref(false)
const showAction = (e, data,node) => {
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
console.log(rect, data,node);
acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px";
actionFlag.value = true;
// state.selectData = data
// if(node.parent.data.children){
// state.selectParentData = node.parent.data
// }else{
// //没有children则是最上层元素
// state.selectParentData = null
// }
};
const isSticky = (data) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = '14px MicrosoftYaHei';
const { width } = context.measureText(data);
console.log(data)
console.log(width)
return width > 252 ? true : false;
}
</script> </script>
<style lang="scss" scoped> <style scoped>
.tree_header {
height: 40px;
line-height: 40px;
background-color: #f7f7f9;
border-radius: 6px 6px 0px 0px;
font-size: 16px;
letter-spacing: 0px;
color: #202531;
padding-left: 16px;
}
.tree_content {
overflow: hidden;
height: calc(100% - 45px);
}
.search {
padding: 16px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
padding: 5px;
}
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
}
.flex_right {
display: flex;
flex-direction: column;
}
.info_container {
padding: 15px;
margin-bottom: 10px;
}
.title {
font-size: 18px;
color: #202531;
font-weight: bold;
margin-bottom: 10px;
}
.icon_box {
background-color: rgb(42, 74, 167);
color: rgb(255, 255, 255);
padding: 2px 4px;
border-radius: 4px;
font-size: 14px;
}
.main_container {
padding: 15px;
flex: 1;
overflow: hidden;
}
.table_container {
height: calc(100% - 20px);
overflow: auto;
}
.pagination_box {
position: sticky;
position: -webkit-sticky;
margin-top: 16px;
bottom: 1px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 5px;
}
.bg-pagination {
bottom: unset
}
.tree-action-box {
display: none;
position: absolute;
right: -5px;
top: 0px;
width: 44px;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #f2f3f7;
box-shadow: -3px 0px 8px -3px
rgba(0, 7, 101, 0.15);
}
.position_sticky {
position: sticky;
position: -webkit-sticky;
}
.tree-more {
font-size: 12px;
color: #3759be;
}
.file-tree :deep() .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.file-tree :deep() .el-tree-node > .el-tree-node__children {
overflow: visible;
}
.file-tree :deep() .el-tree-node__content {
position: relative;
}
.action-box:hover .tree-action {
display: block;
}
.label-text {
font-size: 14px;
color: #404a62;
}
.tree-action-box:hover + .label-text {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.label-text:hover {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.is_active {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.custom_tree_node {
width: 100%;
font-size: 14px;
color: #202531;
padding-right: 16px;
}
.text_clip {
width: 100%;
display: inline-block;
}
.tree-action .action {
width: 100%;
height: 34px;
line-height: 34px;
padding-left: 16px;
font-size: 14px;
color: #202531;
cursor: pointer;
}
.tree-action :deep().el-upload {
width: 100%;
}
.tree-action .action:hover {
background-color: #eff2fa;
color: #3759be;
}
.tree-action .disable{
cursor: not-allowed;
color: #616f94;
}
.tree-action .disable:hover{
background-color: #fff;
color: #616f94;
}
.tree-action {
/* display: none; */
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;
}
</style> </style>
\ No newline at end of file
src/page/main/system/organization/org-form.vue 0 → 100644
View file @ 7c0deb5f
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="orgForm"
:rules="formRules"
ref="orgRef"
style="max-width: 66%"
>
<el-form-item label="上级目录" prop="parent">
<el-input v-model="orgForm.parent" />
</el-form-item>
<el-form-item label="政务机构名称" prop="orgName">
<el-input v-model="orgForm.orgName" />
</el-form-item>
<el-form-item label="组织机构代码" prop="code">
<el-input v-model="orgForm.code" />
</el-form-item>
<el-form-item label="组织介绍" prop="desc">
<el-input type="textarea" :rows="3" v-model="orgForm.desc" />
</el-form-item>
<el-form-item label="组织附件" prop="logo">
<bg-upload v-model="orgForm.file" customTips>
<span>将文件拖到此处，或 点击上传</span>
</bg-upload>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
const orgForm = reactive({
parent: '',
orgName: '',
code: '',
desc: '',
desc: '',
file: ''
})
const formRules = reactive({
parent: [
{ required: true, message: '输入上级目录', trigger: 'blur' },
],
orgName: [
{ required: true, message: '请输入机构名称', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入组织机构代码', trigger: 'blur' },
],
})
const orgRef = ref(null)
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!orgRef) return
await orgRef.value.validate((valid, fields) => {
if (valid) {
emit('action', orgForm)
} else {
emit('action',null)
}
})
}
const clearForm = () => {
if (!orgRef) return
orgRef.value.resetFields()
}
const setForm = (data) => {
orgForm.value = Object.assign(orgForm, data);
}
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm })
</script>
\ No newline at end of file
src/page/main/system/organization/tree.vue 0 → 100644
View file @ 7c0deb5f
<template>
<el-tree class="file-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
<template #default="{ node, data }">
<div class="custom_tree_node">
<span
class="label-text "
:class="{'is_active': treeSelected === data.dept}"
:title="node.label"
>{{ node.label }}
</span>
<span class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)">
<bg-icon
class="tree-more"
icon="#bg-ic-s-more"
></bg-icon>
</span>
</div>
</template>
</el-tree>
<Teleport to="body">
<div
class="tree-action"
v-show="actionFlag"
:style="{ top: acTop, left: acLeft }"
>
<div class="action" >新建本级目录</div>
<div class="action" >新建下级目录</div>
<div class="action" >新建本级组织</div>
<div class="action" >新建下级组织</div>
<div class="action" >编辑目录</div>
<div class="action" >删除</div>
<div class="action" >上移</div>
<div class="action" >下移</div>
</div>
</Teleport>
</template>
<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const treeSelected = ref(null);
const data = [
{
label: '平台用户组织',
dept: 1
},
{
label: '湖北省efadsfasfdgsafgfdtrgsdfsfsd555',
dept: 4,
children: [
{
label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
children: [
{
label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
dept: 2
},
{
label: 'fddfsgdfgdfgdsfsffsdfsdfsdfwefadsgs',
dept: 3
},
{
label: '咯技术的卡洛斯达拉斯达拉斯昆德拉老师',
dept: 5,
},
],
},
{
label: '荆州市',
dept: 6,
children: [
{
label: '公安局',
dept: 7,
},
{
label: '应急管理局',
dept: 8,
},
],
}
],
},
{
label: '四川省',
dept: 9,
children: [
{
label: '成都市',
dept: 10,
children: [
{
label: '天府新区',
dept: 11,
},
],
},
],
},
{
label: '比格大数据',
dept: 12,
children: [
{
label: '武汉研发中心',
dept: 13,
children: [
{
label: '研发部',
dept: 14,
},
],
},
{
label: '西南大区',
dept: 15,
children: [
{
label: '事业部',
dept: 16,
},
{
label: '事业部',
dept: 17,
},
{
label: '事业部',
dept: 18,
},
{
label: '事业部',
dept: 19,
},
{
label: '事业部',
dept: 20,
},
{
label: '事业部',
dept: 21,
},
{
label: '事业部',
dept: 22,
},
],
},
],
},
]
const defaultProps = {
children: 'children',
label: 'label',
}
const acTop = ref(0);
const acLeft = ref(0);
const actionFlag = ref(false)
const showAction = (e, data,node) => {
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
console.log(rect, data,node);
acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px";
actionFlag.value = true;
};
const isSticky = (data) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = '14px MicrosoftYaHei';
const { width } = context.measureText(data);
return width > 255 ? true : false;
}
const closeAction = ()=>{
actionFlag.value = false;
}
// const nodeClick = (node,nodeAttr,treeNode,event)=>{
// }
const emit = defineEmits(['action'])
const handleNodeClick = (node,nodeAttr,treeNode,event) => {
treeSelected.value = data.dept
console.log(treeSelected.value)
emit('select',{node,nodeAttr,treeNode,event})
//只读则无操作事件
closeAction()
}
onBeforeMount(()=>{
//只读则无操作事件
window.addEventListener("click", closeAction)
window.addEventListener("scroll", closeAction,true)
})
onBeforeUnmount(()=>{
//只读则无操作事件
window.removeEventListener('click', closeAction);
window.removeEventListener('scroll', closeAction);
})
</script>
<style scoped>
.tree-action-box {
display: none;
position: absolute;
right: -5px;
top: 0px;
width: 44px;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #f2f3f7;
box-shadow: -3px 0px 8px -3px
rgba(0, 7, 101, 0.15);
}
.position_sticky {
position: sticky;
position: -webkit-sticky;
}
.tree-more {
font-size: 12px;
color: #3759be;
}
.file-tree :deep() .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.file-tree :deep() .el-tree-node > .el-tree-node__children {
overflow: visible;
}
.file-tree :deep() .el-tree-node__content {
position: relative;
}
.action-box:hover .tree-action {
display: block;
}
.label-text {
font-size: 14px;
color: #404a62;
}
.tree-action-box:hover + .label-text {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.label-text:hover {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.is_active {
padding: 8px 0;
background-color: var(--el-tree-node-hover-bg-color);
}
.custom_tree_node {
width: 100%;
font-size: 14px;
color: #202531;
padding-right: 16px;
}
.text_clip {
width: 100%;
display: inline-block;
}
.tree-action .action {
width: 100%;
height: 34px;
line-height: 34px;
padding-left: 16px;
font-size: 14px;
color: #202531;
cursor: pointer;
}
.tree-action :deep().el-upload {
width: 100%;
}
.tree-action .action:hover {
background-color: #eff2fa;
color: #3759be;
}
.tree-action .disable{
cursor: not-allowed;
color: #616f94;
}
.tree-action .disable:hover{
background-color: #fff;
color: #616f94;
}
.tree-action {
/* display: none; */
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;
}
</style>
\ No newline at end of file
vite.config.js
View file @ 7c0deb5f
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
vue() vue()
], ],
//本地运行基础路径，如：http://localhost:5173/apaas/ui/ //本地运行基础路径，如：http://localhost:5173/apaas/ui/
base: "/apaas/manage/ui", base: "/apaas/manage/ui/",
clearScreen:false, clearScreen:false,
resolve:{ resolve:{
//别名，代码引入时方便引入 //别名，代码引入时方便引入
......
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