组织管理

src/assets/css/index.css

@@ -1478,23 +1478,25 @@ border-radius:8px;
 }
 
 .flex_left {
-  background-color: #fff;
   height: calc(100% - 20px);
   width: 320px;
-  box-shadow: 0px 1px 4px 0px 
-		rgba(0, 7, 101, 0.15);
-	border-radius: 6px;
   margin-right: 10px;
   overflow: hidden;
 }
 .flex_right {
-  background-color: #fff;
+  
   height: calc(100% - 20px);
   flex: 1;
+  
+  overflow: hidden;
+}
+
+.bgc_white {
   box-shadow: 0px 1px 4px 0px 
 		rgba(0, 7, 101, 0.15);
 	border-radius: 6px;
-  overflow: hidden;
+  background-color: #fff;
+ 
 }
 
 .tree::-webkit-scrollbar {

src/page/main/develop/account/add/index.vue

@@ -47,9 +47,13 @@
                     <systemForm v-show="step === 1" ref="systemFormRef" :data="tempFormData" @action="getSystemFormData"></systemForm>
                     <contactForm v-show="step === 2" ref="contactFormRef" :data="tempFormData" @action="getContactFormData"></contactForm>
                     <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 type="primary" @click="continueCreate">继续创建</el-button>
                         </div>
+                            
+                    </div>
                 </div>
             </div>
             <div class="content_bottom" v-if="step !== 3">
@@ -81,7 +85,7 @@ const step = ref(1);
 const systemFormRef = ref(null);
 const contactFormRef = ref(null);
 const tempFormData = ref(null)
-const formData = ref({
+const formData = reactive({
   org: '',
   code: '',
   name: '',
@@ -99,37 +103,6 @@ const formData = ref({
   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 = () => {
     systemFormRef.value.submitForm();
@@ -170,6 +143,37 @@ const cancel = () => {
     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>
 
 <style scoped>
@@ -228,10 +232,15 @@ const cancel = () => {
     vertical-align: middle;
 }
 .process_end {
-    text-align: center;
-    padding: 50px 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     
 }
+.process_end div {
+    text-align: center;
+}
 .step_icon {
     color: #fff;
     font-weight: 600;
@@ -260,13 +269,13 @@ const cancel = () => {
     border: 4px solid #e6e9ef;
     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;
 }
-.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%);
 }
-.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%);
 }
 </style>

src/page/main/develop/account/add/system-form.vue

@@ -115,6 +115,7 @@ const clearForm = () => {
   if (!systemRef) return
   systemRef.value.resetFields()
 } 
+
 const setForm = (data) => {
   systemForm.value = Object.assign(systemForm, data);
 }

src/page/main/develop/account/index.vue

@@ -7,7 +7,7 @@
             </el-breadcrumb>
         </div>
          <div class="flex_row">
-           <div class="flex_left">
+           <div class="flex_left bgc_white">
              <div class="tree_header">
                  政务机构
              </div>
@@ -24,7 +24,7 @@
                </div>
              </div>
            </div>
-           <div class="flex_right">
+           <div class="flex_right bgc_white">
              <div class="main_container">
               <div class="apaas_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';
   height: calc(100% - 65px);
   padding: 5px;
 }
-.tree /deep/ .el-tree-node>.el-tree-node__children {
+.tree :deep() .el-tree-node>.el-tree-node__children {
   overflow: unset;
 }
 .main_container {
@@ -287,6 +287,7 @@ import { useRouter } from 'vue-router';
 }
 .pagination_box {
   position: sticky;
+  position: -webkit-sticky;
   margin-top: 16px;
   bottom: 0px;
   background-color: #fff;

src/page/main/system/organization/directory-form.vue

+<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/org-form.vue

+<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

+<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

@@ -14,7 +14,7 @@ export default {
     vue()
   ],
   //本地运行基础路径，如：http://localhost:5173/apaas/ui/
-  base: "/apaas/manage/ui",
+  base: "/apaas/manage/ui/",
   clearScreen:false,
   resolve:{
     //别名，代码引入时方便引入