From 3f25be49ff124a55c6aede983f0159289c771e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=A2=E6=B5=A9=E4=B8=9C?= <975115611@qq.com>
Date: Fri, 27 Dec 2024 18:18:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(system):=20=E6=96=B0=E5=A2=9E=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=86=85=E9=83=A8=E7=94=A8=E6=88=B7=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增组织管理页面，实现组织结构的添加、编辑和删除功能
- 优化内部用户页面布局，增加角色选择功能
- 修改环境变量中的静态资源 URL
- 更新 .gitignore 文件，忽略更多的环境变量配置
---
 .env.development                          |   2 +-
 .gitignore                                |   7 +-
 src/pages/index.vue                       |   2 +-
 src/pages/systemSetting/internalusers.vue |  34 +++-
 src/pages/systemSetting/management.vue    | 222 ++++++++++++++++++++++
 src/utils/request.js                      |  13 ++
 6 files changed, 264 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/systemSetting/management.vue

diff --git a/.env.development b/.env.development
index 4bd3fe9..396dfc6 100644
--- a/.env.development
+++ b/.env.development
@@ -17,4 +17,4 @@ VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3001"
 # 开发环境WebSocket地址
 VITE_PROXY_DOMAIN_SOCKET = "ws://127.0.0.1:3000"
 # 开发环境静态资源地址：
-VITE_STATIC_URL = "http://127.0.0.1:3000/uploads/"
\ No newline at end of file
+VITE_STATIC_URL = "http://127.0.0.1:3001/api/"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 6ac7ccd..e97e5c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,10 +38,9 @@ lerna-debug.log*
 
 # dotenv environment variable files
 .env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
+.env.test
+.env.production
+.env
 
 # temp directory
 .temp
diff --git a/src/pages/index.vue b/src/pages/index.vue
index b775766..47dc4a6 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -60,7 +60,7 @@
                     </el-col> -->
                     <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                         <el-form-item label="资源序号" prop="sorts">
-                            <el-input v-model="form.sorts" placeholder="请输入"></el-input>
+                            <el-input-number v-model="form.sorts" placeholder="请输入"></el-input-number>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
diff --git a/src/pages/systemSetting/internalusers.vue b/src/pages/systemSetting/internalusers.vue
index e3b24f9..f7a70e9 100644
--- a/src/pages/systemSetting/internalusers.vue
+++ b/src/pages/systemSetting/internalusers.vue
@@ -12,8 +12,8 @@
             >
         </div>
         <el-table :data="tableData" border style="width: 100%">
-            <el-table-column prop="name" label="账号" width="180"> </el-table-column>
-            <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
+            <el-table-column prop="username" label="账号" width="180"> </el-table-column>
+            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
             <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
             <el-table-column prop="role" label="权限"> </el-table-column>
             <el-table-column prop="is_active" label="状态">
@@ -66,12 +66,12 @@
         ></el-pagination>
         <el-dialog :title="ruleForm.id ? '编辑' : '新增'" v-model="dialogVisible" width="50%">
             <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="100px">
-                <el-form-item label="账号" prop="name">
-                    <el-input v-model="ruleForm.name"></el-input>
-                </el-form-item>
-                <el-form-item label="姓名" prop="username">
+                <el-form-item label="账号" prop="username">
                     <el-input v-model="ruleForm.username"></el-input>
                 </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="ruleForm.name"></el-input>
+                </el-form-item>
                 <el-form-item label="邮箱" prop="email">
                     <el-input v-model="ruleForm.email"></el-input>
                 </el-form-item>
@@ -86,10 +86,16 @@
                         name="avatar"
                         :data="{ userId: ruleForm.id || '' }"
                     >
-                        <img v-if="ruleForm.avatar.filePath" :src="proxy.$api.img_url + ruleForm.avatar.filePath" class="avatar" />
+                        <img v-if="ruleForm.avatar?.filePath" :src="proxy.$api.img_url + ruleForm.avatar?.filePath" class="avatar" />
                         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                     </el-upload>
                 </el-form-item>
+                <!-- 所属角色 -->
+                <el-form-item label="所属角色" prop="roleIds">
+                    <el-select v-model="ruleForm.roleIds" multiple placeholder="请选择角色">
+                        <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                    </el-select>
+                </el-form-item>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -111,6 +117,7 @@ const headers = { Authorization: localStorage.getItem('token') };
 const currentPage = ref(1);
 const pageSize = ref(10);
 const total = ref(0);
+const roleList = ref([]);
 // 初始模板对象
 const formTemplate = {
     username: '',
@@ -123,8 +130,8 @@ const formTemplate = {
 let ruleForm = reactive({ ...formTemplate });
 // 重置ruleForm数据函数
 const rules = {
-    name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-    username: [
+    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+    name: [
         {
             required: true,
             message: '请输入姓名',
@@ -142,6 +149,7 @@ const rules = {
             trigger: ['blur', 'change'],
         },
     ],
+    roleIds: [{ required: true, message: '请选择角色', trigger: 'change' }],
 };
 // 重置表单sF
 const resetForm = () => {
@@ -171,6 +179,9 @@ const handleCurrentChange = val => {
 };
 onMounted(() => {
     getInternalUsers();
+    proxy.$api.getRolsList().then(res => {
+        roleList.value = res.data;
+    });
 });
 onBeforeUnmount(() => {
     // proxy.$websocket.close();
@@ -227,7 +238,10 @@ const onSubmit = formEl => {
 // 修改
 const handleEdit = row => {
     dialogVisible.value = true;
-    Object.assign(ruleForm, row);
+    proxy.$api.internalusersDetail({ id: row.id }).then(res => {
+        Object.assign(ruleForm, res.data);
+        // ruleForm.roleIds = res.data.data.map(item => item.id);
+    });
 };
 // 删除
 const handleDelete = row => {
diff --git a/src/pages/systemSetting/management.vue b/src/pages/systemSetting/management.vue
new file mode 100644
index 0000000..6814209
--- /dev/null
+++ b/src/pages/systemSetting/management.vue
@@ -0,0 +1,222 @@
+<template>
+    <div>
+        <!--首页 -->
+        <div class="mb-4">
+            <el-button
+                type="primary"
+                @click="
+                    dialogVisible = true;
+                    resetForm(ruleFormRef);
+                "
+                >新增组织</el-button
+            >
+        </div>
+        <!-- 生成一个菜单树表格 -->
+        <el-table :data="treeData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
+            <el-table-column prop="organame" label="组织名" />
+            <el-table-column prop="organid" label="organid" />
+            <el-table-column label="操作" width="140" align="left">
+                <template #default="scope">
+                    <el-button v-if="scope.row.organid" type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
+                    <el-button v-if="scope.row.organid" type="primary" link @click="handleDelete(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog v-model="dialogVisible" :title="form.organid ? '修改组织' : '新增组织'" width="650" :before-close="handleClose">
+            <el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="ruleFormRef">
+                <el-row>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                        <el-form-item label="组织名称" prop="name">
+                            <el-input v-model="form.organame" autocomplete="off" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                        <el-form-item label="上级组织" prop="parentId">
+                            <el-tree-select
+                                @change="val => handleUnitChange(val)"
+                                v-model="form.parentId"
+                                node-key="id"
+                                :data="treeData"
+                                :props="treeProps"
+                                :default-expanded-keys="[0]"
+                                check-strictly
+                                :render-after-expand="false"
+                                placeholder="请选择上级组织"
+                            />
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                        <el-form-item prop="orgcode">
+                            <template #label>
+                                <el-tooltip content="组织的唯一编码" placement="top">
+                                    <el-icon class="iconsStyle"><InfoFilled /></el-icon>
+                                </el-tooltip>
+                                组织编码
+                            </template>
+                            <el-input v-model="form.orgcode" placeholder="请输入" clearable />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="onSubmit(ruleFormRef)"> 确定 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
+import useUserInfoStore from '@/stortes/user'; //引入仓库
+import { storeToRefs } from 'pinia'; //引入pinia转换
+const { proxy } = getCurrentInstance();
+const dialogVisible = ref(false);
+const userInfoStore = useUserInfoStore();
+
+const { userInfo } = storeToRefs(userInfoStore); // 响应式
+const formLabelWidth = '100px';
+const ruleFormRef = ref();
+const treeProps = {
+    children: 'children',
+    label: 'name',
+};
+const rules = {
+    organame: [{ required: true, message: '请输入组织名', trigger: 'blur' }],
+    parentId: [{ required: false, message: '请选择上级菜单', trigger: 'change' }],
+    orgcode: [{ required: true, message: '请输入编码', trigger: 'blur' }],
+};
+const visible = ref(false);
+const form = reactive({
+    organame: '',
+    parentId: 0,
+    orgcode: '',
+});
+const treeData = ref(null);
+const handleClose = done => {
+    done();
+};
+const handleUnitChange = val => {};
+// 重置表单
+const resetForm = () => {
+    if (ruleFormRef.value) ruleFormRef.value.resetFields();
+};
+
+const onSubmit = formEl => {
+    formEl.validate(async valid => {
+        if (!valid) {
+            return false;
+        }
+        if (form.organid) {
+            // 更新菜单
+            proxy.$api.updatemenu(form).then(res => {
+                if (res.code == 200) {
+                    proxy.$message.success(res.message);
+                    dialogVisible.value = false;
+                    getOrganizationList();
+                }
+            });
+        } else {
+            // 新增菜单
+            if (form.parentId == 0) {
+                form.parentId = '';
+            }
+            console.log(form);
+            const data = await proxy.$api.addOrganization(form);
+            if (data.code == 200) {
+                dialogVisible.value = false;
+                proxy.$message.success(data.message);
+                getOrganizationList();
+            }
+        }
+    });
+};
+// 删除
+const handleDelete = async row => {
+    proxy.$messageBox
+        .confirm('确定要删除吗?', '提示', {
+            type: '提示',
+        })
+        .then(async () => {
+            const data = await proxy.$api.deletemenu({ id: row });
+            if (data.code == 200) {
+                proxy.$message.success(data.message);
+                getOrganizationList();
+            }
+        });
+};
+// 修改
+const handleEdit = async row => {
+    dialogVisible.value = true;
+    // 调用详情接口
+    const data = await proxy.$api.detail({ id: row.id });
+    Object.assign(form, data.data);
+    if (!data.data.parentId) {
+        form.parentId = 0;
+    }
+};
+
+// 获取
+const getOrganizationList = async () => {
+    const res = await proxy.$api.getOrganizationList();
+    console.log(res.data, '66');
+    // const treedata = getParentMenuTree(res.data);
+    treeData.value = res.data;
+};
+
+const getParentMenuTree = tableTreeDdata => {
+    let parent = {
+        parentId: '',
+        name: '顶级菜单',
+        id: 0,
+        children: tableTreeDdata,
+    };
+    return [parent];
+};
+
+onMounted(async () => {
+    try {
+        await getOrganizationList();
+    } catch (error) {
+        console.error('失败信息:', error);
+    }
+});
+</script>
+<style>
+.iconsStyle {
+    top: 9px;
+    right: 3px;
+    cursor: pointer;
+}
+
+.mod-menu__icon-list {
+    overflow: auto;
+    height: 100%;
+}
+
+.mod-menu__icon-popover {
+    width: 510px;
+    height: 350px !important;
+    overflow: hidden !important;
+}
+.buttonP {
+    margin-left: 10px !important;
+    margin-bottom: 10px !important;
+}
+
+.el-button--medium {
+    padding: 10px 20px;
+    font-size: 13px;
+    border-radius: 4px;
+}
+.popover-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    padding-left: 9px;
+    color: #303133;
+}
+</style>
diff --git a/src/utils/request.js b/src/utils/request.js
index ed00fd2..ff01dc6 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -185,6 +185,10 @@ export default {
     delete(params) {
         return oPost(baseUrl + '/internalusers/delete', params);
     },
+    // 用户详情
+    internalusersDetail(params) {
+        return oGet(baseUrl + '/internalusers/detail', params);
+    },
     // 禁用
     ban(params) {
         return oPost(baseUrl + '/internalusers/ban', params);
@@ -218,6 +222,15 @@ export default {
     getRoleMenus(params) {
         return oGet(baseUrl + '/role/getRoleMenus', params);
     },
+
+    // 组织列表
+    getOrganizationList(params) {
+        return oGet(baseUrl + '/orgManagement', params);
+    },
+    // 添加组织
+    addOrganization(params) {
+        return oPost(baseUrl + '/orgManagement/add', params);
+    },
 };
 
 //封装post/get请求
-- 
Gitee