测试组件结构

src/api/modules/system/organization.js

@@ -0,0 +1,34 @@
+import {httpApi} from "../../request/httpApi";
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore();
+
+export default {
+    //列表数据
+    async deptList() {
+        return httpApi({
+            url: '/api/blade-system/dept/tree',
+            method: 'get',
+            params: {
+                tenantId: useAppState.tenantId,
+            }
+        }, false);
+    },
+    //删除
+    async remove(ids) {
+        return httpApi({
+            url: '/api/blade-system/dept/remove',
+            method: 'post',
+            params: {
+                ids,
+            }
+        }, false);
+    },
+    //提交
+    async submit(form) {
+        return httpApi({
+            url: '/api/blade-system/dept/submit',
+            method: 'post',
+            data: form
+        }, false);
+    },
+}

src/api/modules/system/user.js

@@ -1,14 +1,32 @@
 import {httpApi} from "../../request/httpApi";
-import website from "~src/config/index";
-//获取用户分页
-export const getSelectUserlist= (form, msg = true) => httpApi({
-    url: '/api/blade-control/sysinfo/selectUserlist',
-    method: 'get',
-    params: form
-}, msg);
-//新增或修改用户
-export const submitSaveUser = (form, msg = true) => httpApi({
-    url: '/api/blade-control/sysinfo/saveUser',
-    method: 'post',
-    data: form
-}, msg);
+
+export default {
+    //列表数据
+    async deptList() {
+        return httpApi({
+            url: '/api/blade-system/dept/tree',
+            method: 'get',
+            params: {
+                tenantId: useAppState.tenantId,
+            }
+        }, false);
+    },
+    //删除
+    async remove(ids) {
+        return httpApi({
+            url: '/api/blade-system/dept/remove',
+            method: 'post',
+            params: {
+                ids,
+            }
+        }, false);
+    },
+    //提交
+    async submit(form) {
+        return httpApi({
+            url: '/api/blade-system/dept/submit',
+            method: 'post',
+            data: form
+        }, false);
+    },
+}

src/views/system/organization.vue

@@ -1,11 +1,10 @@
 <template>
-    <HcCard actionSize="lg" scrollbar>
+    <HcCard :scrollbar="!isShowIcon && isedit">
         <template #extra>
-            <el-button type="primary" @click="editClick" size="large" v-if="!isShowIcon&&!isedit">
+            <el-button type="primary" @click="editClick" size="large" v-if="!isShowIcon && !isedit">
                 <span>编辑组织机构</span>
             </el-button>
-
-            <el-button type="primary" @click="goback" size="large" v-if="!isShowIcon&&isedit">
+            <el-button type="primary" @click="goback" size="large" v-if="!isShowIcon && isedit">
                 <span>返回上一级</span>
             </el-button>
         </template>
@@ -13,26 +12,13 @@
         <div class="content-box" v-if="isShowIcon">
             <HcIcon name="add-box" class="add_icon" @click="addClick"/>
         </div>
-        <div class="content-box1" v-if="!isShowIcon&&!isedit">
-            <div style="height: 400px;text-align: center;">
-                <vue3-tree-org
-                    :data="testdata"
-                    :horizontal="false"
-                    :collapsable="false"
-                    :node-draggable="false"
-                    draggable
-                    center
-                    :scalable="false"
-                    :default-expand-level="5"
-                    :define-menus="[]"
-                    disabled
-                    @on-node-click="onNodeClick"
-                >
-                    <template v-slot="{node}">
-                        <div class="hac-node-vue3-tree-org-label">{{ node.label }}</div>
-                    </template>
-                </vue3-tree-org>
-            </div>
+        <div class="h-full text-center" v-if="!isShowIcon && !isedit">
+            <vue3-tree-org :data="testdata" :horizontal="false" :collapsable="false" :node-draggable="false" draggable
+                center :scalable="false" :default-expand-level="5" :define-menus="[]" disabled @on-node-click="onNodeClick">
+                <template v-slot="{node}">
+                    <div class="hac-node-vue3-tree-org-label">{{ node.label }}</div>
+                </template>
+            </vue3-tree-org>
         </div>
         <div v-if="!isShowIcon&&isedit">
             <div class="tree-box blue">
@@ -117,9 +103,47 @@
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import {onActivated, ref} from "vue";
+import mainApi from "~api/system/organization";
 import HcTreeData from "./components/HcTreeData.vue";
+import {getArrValue} from "js-fast-way";
+
+//页面被激活时
+onActivated(() => {
+    getTreeData()
+})
+
+//获取树数据
+const deptTreeData = ref([])
+const getTreeData = async () => {
+    const {error, code, data} = await mainApi.deptList()
+    if (!error && code === 200) {
+        const res = getArrValue(data)
+        console.log(res)
+        const testData = await setDeptTreeData(res)
+        console.log(testData)
+        //tableData.value =
+    } else {
+        //tableData.value = []
+    }
+}
+
+//组织架构显示信息
+const lavel1_style = {color: "#fff", background: "#108ffe", borderColor: "#108ffe", padding: '10px 15px'}
+const lavel2_style = {background: "#E8E8E8", padding: '10px 15px'}
+const lavel3_style = {
+    background: "none", border: 'none', borderBottom: '1px solid #c8c8c8', borderRadius: '0',
+    boxShadow: 'none', fontSize: '14px', padding: '6px 2px'
+}
+
+//遍历处理组织结构数据树
+//公司1，部门2，岗位3
+const setDeptTreeData = async (data) => {
+
+}
+
+
+
 
 const isShowIcon = ref(false)
 const isedit = ref(false)
@@ -270,18 +294,6 @@ const loadNode = (node, resolve) => {
     }, 500)
 }
 
-//组织架构显示信息
-const lavel1_style = {color: "#fff", background: "#108ffe", borderColor: "#108ffe", padding: '10px 15px'}
-const lavel2_style = {background: "#E8E8E8", padding: '10px 15px'}
-const lavel3_style = {
-    background: "none",
-    border: 'none',
-    borderBottom: '1px solid #c8c8c8',
-    borderRadius: '0',
-    boxShadow: 'none',
-    fontSize: '14px',
-    padding: '6px 2px'
-}
 
 const testdata = ref({
     id: 1,

src/views/system/user.vue

@@ -1,6 +1,5 @@
 <template>
     <HcCard>
-        
         <template #header>
             <div class="w-40">
                 <el-select v-model="searchForm.postType" placeholder="选择岗位类型" clearable size="large">
@@ -35,7 +34,6 @@
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"></HcPages>
         </template>
-
         <!--新增编辑弹窗-->
         <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle" @close="addModalClose" widths="51rem">
             <HcCardItem ui="hac-bg-grey">
@@ -110,20 +108,21 @@
 </template>
 
 <script setup>
-import {ref, watch,onMounted} from "vue";
+import {ref, watch, onMounted} from "vue";
 import {isPhone} from "js-fast-way"
-import {getSelectUserlist} from '~api/system/user.js';
+import mainApi from '~api/system/user.js';
 import {getArrValue} from "js-fast-way"
+
 onMounted(() => {
-    
     getTableData()
-   
 })
+
 const value = ref('')
 const tableLoaing=ref(false)
 const getTableData=async()=>{
     tableLoaing.value=true
-    const { error, code, data,msg } = await getSelectUserlist({
+    //mainApi
+    /*const { error, code, data,msg } = await getSelectUserlist({
        ...searchForm.value
     })
     tableLoaing.value=false
@@ -131,11 +130,10 @@ const getTableData=async()=>{
         console.log(data,'data');
         tableData.value = getArrValue(data['records'])
         searchForm.value.total=data['total']
-    } 
+    }
     else {
         window.$message?.warning(msg)
-    }
-
+    }*/
 }
 const searchForm = ref({
     current: 1, size: 20, total: 0

src/views/user/index.vue

@@ -1,105 +1,108 @@
 <template>
-     <HcCard actionSize="lg" scrollbar>
+    <HcCard actionSize="lg" scrollbar>
         <HcCardItem ui="hac-card-item mt-4" style="height:160px">
             <div class="user-avatar-box">
-                        <div class="user-avatar" v-loading="avatarLoading">
-                            <img :src="userInfo['avatar'] || avatarPng" alt=""  />
-                            <div class="user-avatar-upload">
-                                <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()" :data="upData" :show-file-list="false" :on-success="uploadFinish" :on-error="uploadError" :before-upload="beforeUpload">
-                                    
-                                    <HcIcon name="camera" fill/> 
-                                </el-upload>
-                            </div>
-                        </div>
-                        <div class="user-name truncate">{{ userInfo['real_name'] || '游客' }}
-                            <div class="el-upload__tip" style="margin-top: 27px;">支持.jpg 、png格式</div>
-                        </div>
+                <div class="user-avatar" v-loading="avatarLoading">
+                    <img :src="userInfo['avatar'] || avatarPng" alt=""/>
+                    <div class="user-avatar-upload">
+                        <el-upload class="upload-dom" :action="action" :accept="accept" :headers="getTokenHeader()"
+                                   :data="upData" :show-file-list="false" :on-success="uploadFinish"
+                                   :on-error="uploadError" :before-upload="beforeUpload">
+                            <HcIcon name="camera" fill/>
+                        </el-upload>
+                    </div>
+                </div>
+                <div class="user-name truncate">{{ userInfo['real_name'] || '游客' }}
+                    <div class="el-upload__tip" style="margin-top: 27px;">支持.jpg 、png格式</div>
+                </div>
             </div>
             <div class="btn_box">
-                        <el-button type="primary"  size="large"  @click="updatePassword" v-if="!updatePasswordshow">
-                                    <span>修改密码</span>
-                        </el-button>
-                        <el-button type="primary"  size="large"   @click="submit" :loading="saveUserLoading">
-                                    <span>保存</span>
-                        </el-button>
+                <el-button type="primary" size="large" @click="updatePassword" v-if="!updatePasswordshow">
+                    <span>修改密码</span>
+                </el-button>
+                <el-button type="primary" size="large" @click="submit" :loading="saveUserLoading">
+                    <span>保存</span>
+                </el-button>
             </div>
-         </HcCardItem>
+        </HcCardItem>
         <HcCardItem ui="hac-card-item mt-4" :class="updatePasswordshow  ? 'half-height' : 'all-height'">
-                <template #header>
-                                        <div class="hac-card-title">基础信息</div>
-                </template>
-                <div>
-                    <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-width="auto">
-                                    <el-row :gutter="20">
-                                        <el-col :span="12">
-                                            <el-form-item label="用户姓名:">
-                                                <el-input v-model="formUserModel.real_name" />
-                                            </el-form-item>
-                                        </el-col>
-                                        <el-col :span="12">
-                                            <el-form-item label="身份证号:">
-                                                <el-input v-model="formUserModel.idNumber" placeholder="" />
-                                            </el-form-item>
-                                        </el-col>
-                                        <el-col :span="12">
-                                            <el-form-item label="手机号码:" :prop="basicFormEdit?'phone':''">
-                                                <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机" />
-                                            </el-form-item>
-                                        </el-col>
-                                        <el-col :span="12">
-                                            <el-form-item label="所属岗位:">
-                                                <el-select v-model="formUserModel.position" class=" block" placeholder="请选择" size="large"  disabled>
-                                                    <el-option
-                                                    v-for="item in posotionoptions"
-                                                    :key="item.value"
-                                                    :label="item.label"
-                                                    :value="item.value"
-                                                    />
-                                                </el-select>
-                                            </el-form-item>
-                                        </el-col>
-                                        <el-col :span="12">
-                                            <el-form-item label="登录账号:">
-                                                <el-input v-model="formUserModel.account" placeholder=""  disabled/>
-                                            </el-form-item>
-                                        </el-col>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    </el-row>
-                    </el-form>
-                    
-                </div>
+            <template #header>
+                <div class="hac-card-title">基础信息</div>
+            </template>
+            <div>
+                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large"
+                         label-width="auto">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="用户姓名:">
+                                <el-input v-model="formUserModel.real_name"/>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="身份证号:">
+                                <el-input v-model="formUserModel.idNumber" placeholder=""/>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="手机号码:" :prop="basicFormEdit?'phone':''">
+                                <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机"/>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="所属岗位:">
+                                <el-select v-model="formUserModel.position" class=" block" placeholder="请选择"
+                                           size="large" disabled>
+                                    <el-option
+                                        v-for="item in posotionoptions"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="登录账号:">
+                                <el-input v-model="formUserModel.account" placeholder="" disabled/>
+                            </el-form-item>
+                        </el-col>
+
+
+                    </el-row>
+                </el-form>
+            </div>
         </HcCardItem>
-        
-        <HcCardItem ui="hac-card-item mt-4" style="height:38%"  v-if="updatePasswordshow">
-                <template #header>
-                                        <div class="hac-card-title">修改密码</div>
-                </template>
-                <div>
-                    <el-form ref="formUserPassRef" :model="formUserPassModel" :rules="formUserPassRules" label-position="left"  label-width="auto"
-                                        size="large" >
-                                    <el-form-item label="原密码:" prop="oldPassword"  >
-                                        <el-input v-model="formUserPassModel.oldPassword" placeholder="请输入原密码"  autocomplete="new-password"
-                                                show-password type="password"/>
-                                    </el-form-item>
-                            
-                                    <el-form-item label="新的密码:" prop="newPassword"  >
-                                        <el-input v-model="formUserPassModel.newPassword" placeholder="请输入新的密码"  autocomplete="new-password"
-                                                show-password type="password"/>
-                                    </el-form-item>
-                                    <el-form-item label="确认新密码:" prop="newPassword1"   >
-                                        <el-input v-model="formUserPassModel.newPassword1" placeholder="请输入确认新密码" autocomplete="new-password"
-                                                show-password type="password"/>
-                                    </el-form-item>
-                    </el-form>
-               
-                </div>
+
+        <HcCardItem ui="hac-card-item mt-4" style="height:38%" v-if="updatePasswordshow">
+            <template #header>
+                <div class="hac-card-title">修改密码</div>
+            </template>
+            <div>
+                <el-form ref="formUserPassRef" :model="formUserPassModel" :rules="formUserPassRules"
+                         label-position="left" label-width="auto"
+                         size="large">
+                    <el-form-item label="原密码:" prop="oldPassword">
+                        <el-input v-model="formUserPassModel.oldPassword" placeholder="请输入原密码"
+                                  autocomplete="new-password"
+                                  show-password type="password"/>
+                    </el-form-item>
+
+                    <el-form-item label="新的密码:" prop="newPassword">
+                        <el-input v-model="formUserPassModel.newPassword" placeholder="请输入新的密码"
+                                  autocomplete="new-password"
+                                  show-password type="password"/>
+                    </el-form-item>
+                    <el-form-item label="确认新密码:" prop="newPassword1">
+                        <el-input v-model="formUserPassModel.newPassword1" placeholder="请输入确认新密码"
+                                  autocomplete="new-password"
+                                  show-password type="password"/>
+                    </el-form-item>
+                </el-form>
+
+            </div>
         </HcCardItem>
-     </HcCard>
-  
+    </HcCard>
+
 </template>
 
 <script setup>
@@ -110,6 +113,7 @@ import {getTokenHeader} from '~src/api/request/header';
 import userApi from '~src/api/modules/userInfo/index.js'
 import {arrIndex, formValidate, getArrValue, isPhone} from "js-fast-way"
 import md5 from 'js-md5';
+
 const useAppState = useAppStore()
 
 //全局变量信息
@@ -133,7 +137,7 @@ const uploadFinish = async (res) => {
     const link = res?.data?.link ?? '';
     const user_id = userInfo.value?.user_id ?? '';
     if (link) {
-        const { error, code } = await userApi.updateUserInfo({avatar: link, id: user_id})
+        const {error, code} = await userApi.updateUserInfo({avatar: link, id: user_id})
         if (!error && code === 200) {
             avatarLoading.value = false
             userInfo.value.avatar = link
@@ -155,7 +159,7 @@ const uploadError = () => {
 //基础信息表单
 const formUserRef = ref(null)
 const formUserModel = ref(userInfo.value)
-const formUserPassRef=ref(null)
+const formUserPassRef = ref(null)
 const formUserRules = {
     phone: {
         required: true,
@@ -204,23 +208,23 @@ const formUserPassRules = {
         trigger: "blur"
     }
 }
-const updatePasswordshow=ref(false)
-const updatePassword=()=>{
-    updatePasswordshow.value=true
+const updatePasswordshow = ref(false)
+const updatePassword = () => {
+    updatePasswordshow.value = true
 }
-const submit=()=>{
+const submit = () => {
     // updatePasswordshow.value=false
-    
-    if(  updatePasswordshow.value){
+
+    if (updatePasswordshow.value) {
         saveUpdatePassword()
     }
     saveUserInfoData()
-     updatePasswordshow.value=false
+    updatePasswordshow.value = false
 }
-const saveUserLoading=ref(false)
+const saveUserLoading = ref(false)
 //保存用户信息
 const saveUserInfoData = async () => {
-    const {phone, user_id,idNumber} = formUserModel.value
+    const {phone, user_id, idNumber} = formUserModel.value
     if (phone && isPhone(phone)) {
         saveUserLoading.value = true
         const {error, code} = await userApi.updateUserInfo({
@@ -265,81 +269,88 @@ const saveUpdatePassword = async () => {
         }
     }
 }
-const posotionoptions=ref([
-    {label:'总经理',value:'1'}
+const posotionoptions = ref([
+    {label: '总经理', value: '1'}
 ])
 </script>
 
 <style lang="scss" scoped>
-        .user-avatar-box {
+.user-avatar-box {
+    display: flex;
+    position: relative;
+    text-align: left;
+    // padding: 24px;
+    .user-avatar {
+        position: relative;
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+        background: #d8d8d8;
+        // margin: 24px 0 0;
+        border: 2px solid #ffffff;
+        // box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            border-radius: 50%;
+        }
+
+        .user-avatar-upload {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 24px;
+            height: 24px;
             display: flex;
-            position: relative;
-            text-align: left;
-            // padding: 24px;
-            .user-avatar {
-                position: relative;
-                height: 100px;
-                width: 100px;
-                border-radius: 50%;
-                background: #d8d8d8;
-                // margin: 24px 0 0;
-                border: 2px solid #ffffff;
-                // box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
-                img {
-                    display: block;
-                    object-fit: cover;
-                    height: 100%;
-                    width: 100%;
-                    border-radius: 50%;
-                }
-                .user-avatar-upload {
-                    position: absolute;
-                    right: 0;
-                    bottom: 0;
-                    width: 24px;
-                    height: 24px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background: #f1f5f8;
-                    border-radius: 50%;
-                    color: #838791;
-                    cursor: pointer;
-                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15);
-                    transition: color 0.2s;
-                    &:hover {
-                        color: var(--el-color-primary);
-                    }
-                }
-            }
-            .user-name {
-                position: relative;
-                margin-top: 20px;
-                font-weight: bold;
-                color: #1a1a1a;
-                font-size: 28px;
-                margin-left: 20px;
+            align-items: center;
+            justify-content: center;
+            background: #f1f5f8;
+            border-radius: 50%;
+            color: #838791;
+            cursor: pointer;
+            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15);
+            transition: color 0.2s;
+
+            &:hover {
+                color: var(--el-color-primary);
             }
         }
-    .top-box{
-        display: flex;
-        // position: relative;
-        height: 100%;
-    
     }
-    .btn_box{
-            float: right;
-            position: absolute;
-            bottom: 10px;
-            right: 0px;
-           
-        }
-        .half-height{
-            height: 50%;
-        }
-        .all-height{
-            height: 100%;
-        }
+
+    .user-name {
+        position: relative;
+        margin-top: 20px;
+        font-weight: bold;
+        color: #1a1a1a;
+        font-size: 28px;
+        margin-left: 20px;
+    }
+}
+
+.top-box {
+    display: flex;
+    // position: relative;
+    height: 100%;
+
+}
+
+.btn_box {
+    float: right;
+    position: absolute;
+    bottom: 10px;
+    right: 0px;
+
+}
+
+.half-height {
+    height: 50%;
+}
+
+.all-height {
+    height: 100%;
+}
 </style>
 
 <style lang="scss">