添加/编辑部门/分组 弹窗

package.json

@@ -16,6 +16,7 @@
     "crypto-js": "^4.2.0",
     "element-plus": "2.4.4",
     "jquery": "^3.7.1",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0",

src/views/system_manage/approvalManage.vue

@@ -546,10 +546,10 @@ getApprovalDetail()
         }
     }
     .add-wrap{
-        :deep .el-input{
+        :deep(.el-input){
             width: 100% !important;
         }
-        :deep .search-box{
+        :deep(.search-box){
             width: 500px;
         }
     }

src/views/system_manage/depart_manage/components/ModifyNodeDialog.vue

@@ -1,13 +1,168 @@
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch, nextTick } from 'vue'
+import $icon from '@/utils/icon'
+import _ from 'lodash'
+const props = defineProps({
+    isShow: Boolean,
+    type:String,
+    nodeInfo:{
+        type:Object,
+        default:{}
+    },
+})
+const titleMap = [
+    {'add':'部门'},//0
+    {'add':'分组','edit':'部门'},//1
+    {'add':'分组','edit':'分组'},//2
+    {'edit':'分组'},//3
+]
+const emit = defineEmits(["closeDia","submitForm"])
+let dialogTitle = ref('')
+let node = reactive({
+    departName:'',
+    groupName:'',
+    group:[]
+})
+watch(()=>props.isShow,(newval)=>{
+    if(newval){
+        //level为0 增加部门
+        //level为1 编辑部门&增加分组
+        //level为2 编辑分组&增加分组
+        //level为3 编辑分组
+        const type = props.type==='add'?'添加':'编辑'
+        const title = titleMap[props.nodeInfo.level||0][props.type||'add']
+        dialogTitle.value = type+title
+        Object.assign(node,{
+            departName:props.nodeInfo.data.DepartmentName,
+            groupName:props.nodeInfo.data.DepartmentName,
+            group:_.cloneDeep(props.nodeInfo.data.Child||[])
+        })
+    }
+})
+let saveTagInput = ref(null)
+let inputVisible = ref(false)
+let inputValue = ref('')
+function showInput(){
+    inputVisible.value = true;
+    nextTick(() => {
+        saveTagInput.value?.input.focus();
+    });
+}
+function InputConfirm(){
+    if (inputValue.value) {
+        node.group.push({
+            DepartmentName:inputValue.value
+        })
+    }
+    inputVisible.value = false
+    inputValue.value = '';
+}
+
+const rules = reactive({
+    group:[
+        { required: true, message: '请添加分组', trigger: 'blur' },
+    ],
+    departName:[
+        { required: true, message: '请输入部门名称', trigger: 'blur' },
+    ],
+    groupName:[
+        { required: true, message: '请输入分组名称', trigger: 'blur' },
+    ]
+})
+let formRef = ref(null)
+async function handleSubmitForm(){
+    try{
+        await formRef.value?.validate()
+    }catch(e){
+        console.log(e)
+        return
+    }
+    //通过校验
+    emit("submitForm",{
+        type:props.type,
+        nodeForm:node,
+        nodeInfo,
+    })
+}
+
 </script>
 
 <template>
-    <div>
-        编辑树节点弹窗
-    </div>
+    <el-dialog
+        :model-value="props.isShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        width="30%"
+        @close="emit('closeDia')"
+    >
+        <template #header style="display:flex;align-items:center;">
+            <img :src="props.type==='add'?$icon.add:$icon.edit"
+                style="color:#fff;width:16px;height:16px;margin-right:5px;">
+            <span style="font-size:16px;">{{ dialogTitle }}</span>
+        </template>
+        <div class="dialog-content">
+            <el-form :model="node" :rules="rules" ref="formRef" 
+                label-width="100px" class="demo-ruleForm">
+                <el-form-item label="部门" prop="departName" v-if="dialogTitle.includes('部门')">
+                    <el-input v-model="node.departName" placeholder="请填写部门名称" style="width: 90%"></el-input>
+                </el-form-item>
+                <el-form-item label="分组" prop="groupName" v-if="dialogTitle==='编辑分组'">
+                    <el-input v-model="node.groupName" placeholder="请填写分组名称" style="width: 90%"></el-input>
+                </el-form-item>
+                <div class="add-group-wrap" v-if="dialogTitle==='添加分组'">
+                    <el-form-item label="部门" >
+                        <span>{{ node.departName }}</span>
+                    </el-form-item>
+                    <el-form-item label="分组" prop="group">
+                        <el-tag
+                            :key="index"
+                            v-for="(tag,index) in node.group"
+                            closable
+                            :disable-transitions="false"
+                            @close="node.group.splice(index, 1)">
+                            {{tag.DepartmentName}}
+                        </el-tag>
+                        <el-input
+                            class="input-new-tag"
+                            v-if="inputVisible"
+                            v-model="inputValue"
+                            placeholder="分组名"
+                            ref="saveTagInput"
+                            size="small"
+                            style="width:120px"
+                            @keyup.enter.native="InputConfirm"
+                            @blur="InputConfirm"
+                        >
+                        </el-input>
+                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加分组</el-button>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="btn-content">
+                <el-button type="primary" style="width:80px;margin-right:24px;" @click="handleSubmitForm">保存</el-button>
+                <el-button style="width:80px;" @click="emit('closeDia')">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
+.el-dialog{
+    .dialog-content{
+        .add-group-wrap{
+            :deep(.el-form-item__content){
+                &:last-child{
+                    display: flex;
+                    gap:10px;
+                }
+            }
+        }
+    }
+    .btn-content{
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
 </style>

src/views/system_manage/depart_manage/departManage.vue

@@ -4,11 +4,12 @@ import {useDepart} from './hooks/use-depart'
 import { departInterence } from '@/api/api.js'
 
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import { Search } from '@element-plus/icons-vue'
+import { Search, InfoFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 
 import UserDetail from './components/UserDetail.vue'
 import ModifyUserDialog from './components/ModifyUserDialog.vue'
+import ModifyNodeDialog from './components/ModifyNodeDialog.vue'
 
 const {
         defaultDepart,defaultGroup,departArr,tableParams,tableData,groupTeamId,
@@ -16,7 +17,10 @@ const {
         useTreeMove,useTreeEvent,useDepartTable
     } = useDepart()
 const {checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
-const {act_node,clickNode,initDepart,openNodeDialog,removeNode} = useTreeEvent()
+const {
+        act_node,clickNode,initDepart,removeNode,
+        modifyNodeType,modifyNode,isModifyNodeShow,openNodeDialog
+    } = useTreeEvent()
 const {
         isShowUserdtl,userObj,
         changeStatus,getUserDetail,
@@ -118,12 +122,12 @@ getRoles()
                             <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
                             <img src="~@/assets/img/set_m/edit.png" alt="" class="icon-img" @click.stop="openNodeDialog('edit',data,node)">
                             <el-popconfirm
-                                @onConfirm="removeNode(node,data)"
-                                confirmButtonText='删除'
-                                cancelButtonText='取消'
-                                confirmButtonType="text"
-                                icon="el-icon-info"
-                                iconColor="red"
+                                @confirm="removeNode(node,data)"
+                                confirm-button-text='删除'
+                                cancel-button-text='取消'
+                                confirm-button-type="primary"
+                                :icon="InfoFilled"
+                                icon-color="red"
                                 title="确定删除吗"
                                 v-if="data.DepartmentId!=shareCustomDepartmentId"
                             >
@@ -235,6 +239,14 @@ getRoles()
         @submitForm="modifyUser"
         @closeDia="isModifyUserShow = false"
     />
+    <!-- 添加/编辑节点弹窗 -->
+    <ModifyNodeDialog 
+        :isShow="isModifyNodeShow"
+        :type="modifyNodeType"
+        :nodeInfo="modifyNode"
+        @submitForm="isModifyNodeShow = false"
+        @closeDia="isModifyNodeShow = false"
+    />
 </template>
 
 <style scoped lang="scss">

src/views/system_manage/depart_manage/hooks/use-depart.js

@@ -234,21 +234,54 @@ export function useDepart(){
         }
 
         //打开添加/编辑部门/分组弹窗 (原项目中的addNode editNode addDepart合成一个)
+        let modifyNodeType = ref('add')
+        let modifyNode = ref(null)
+        let isModifyNodeShow = ref(false)
         function openNodeDialog(type,data,{level}){
             console.log('type',type)
             console.log('data',data)
             console.log('level',level)
-            //level为0 增加部门
-            //level为1 编辑部门&增加分组
-            //level为2 编辑分组&增加分组
-            //level为3 编辑分组
+    
+            modifyNodeType.value = type
+            modifyNode.value = {data,level}
+            isModifyNodeShow.value = true
         }
         //删除节点 
-        function removeNode(){}
+        function removeNode(data){
+            if(data.IsDepartment) {
+                departInterence.delDepart({
+                    DepartmentId:data.DepartmentId
+                }).then(res =>{
+                    if(res.Ret === 200) {
+                        ElMessage.success('删除部门成功')
+                        getDepartArr()
+                    }
+                })
+            }else if(data.IsGroup) {
+                /* 删除分组 */
+                departInterence.delGroup({
+                    GroupId:data.DepartmentId
+                }).then(res =>{
+                    if(res.Ret === 200) {
+                        ElMessage.success('删除分组成功')
+                        getDepartArr()
+                    }
+                })
+            }else {
+                departInterence.delTeamGroup({
+                    TeamId:data.DepartmentId
+                }).then(res =>{
+                    if(res.Ret === 200) {
+                        ElMessage.success('删除成功')
+                        getDepartArr()
+                    }
+                })
+            }
+        }
         return {
             act_node,
             clickNode,initDepart,
-            openNodeDialog,
+            modifyNodeType,modifyNode,isModifyNodeShow,openNodeDialog,
             removeNode
         }