crmeb/admin/src/views/sys/dept/sysdept-add-and-update.vue

<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-dialog
      :title="!dataForm.deptId ? '添加' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="600px">
    <!-- 新增和修改表单 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="100px">
      <!-- 父部门选择 -->
      <el-form-item label="父部门" prop="parentId">
        <el-select
          v-model="dataForm.parentId"
          placeholder="请选择父部门"
          style="width: 100%;"
          filterable
          allow-create
          default-first-option
        >
          <el-option
            v-for="item in deptTreeOptions"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
            style="padding-left: 20px;"
          >
            <template slot="default">
              <span>{{ '└ ' + item.deptName }}</span>
            </template>
          </el-option>
        </el-select>
      </el-form-item>


      <!-- 部门名称 -->
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="dataForm.deptName" placeholder="请输入部门名称"></el-input>
      </el-form-item>

      <!-- 显示顺序 -->
      <el-form-item label="显示顺序" prop="orderNum">
        <el-input-number
          v-model="dataForm.orderNum"
          :min="0"
          :step="1"
          placeholder="请输入显示顺序"
          style="width: 100%;"
        ></el-input-number>
      </el-form-item>




      <!-- 部门状态 -->
      <el-form-item label="部门状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="'0'">正常</el-radio>
          <el-radio :label="'1'">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="dataForm.remark"
          type="textarea"
          placeholder="请输入备注信息"
          :rows="3"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import * as api from '@/api/sysdept.js'
  export default {
    data () {
      return {
        visible: false,
        // 部门树数据（扁平化）
        deptTreeOptions: [],
        // 部门树原始数据
        originalDeptTree: [],
        // 部门状态映射
        statusMap: {
          '0': '正常',
          '1': '停用'
        },
        dataForm: {
          deptId: 0,
          parentId: '0' , // 默认顶级部门
          ancestors: '0' , // 默认顶级部门祖级列表
          deptName: '' ,
          orderNum: 0 , // 默认显示顺序为0
          leader: '' ,
          phone: '' ,
          email: '' ,
          isWorkArea: 0 , // 默认否
          status: '0' , // 默认正常
          remark: '' ,
        },
        dataRule: {
          deptName: [
            { required: true, message: '部门名称为必填项', trigger: 'blur' },
          ],
          status: [
            { required: true, message: '部门状态为必填项', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      // 加载部门树数据
      this.loadDeptTree()
    },
    methods: {
      // 加载部门树
      async loadDeptTree() {
        try {
          const res = await api.deptTreeSelect()
          this.originalDeptTree = res
          // 将树形数据转换为扁平化列表
          this.deptTreeOptions = this.flattenDeptTree(res)
        } catch (error) {
          this.$message.error('加载部门树失败')
          console.error('加载部门树失败:', error)
        }
      },
      
      // 将树形部门结构转换为扁平化列表
      flattenDeptTree(tree, level = 0, prefix = '') {
        let result = []
        
        for (let i = 0; i < tree.length; i++) {
          const node = { ...tree[i] }
          
          // 添加缩进前缀
          let nodePrefix = prefix
          if (level > 0) {
            // 如果是最后一个子节点
            if (i === tree.length - 1) {
              nodePrefix += '└ ' 
            } else {
              nodePrefix += '├ ' 
            }
          }
          
          // 添加到结果列表
          result.push({
            ...node,
            displayName: nodePrefix + node.deptName,
            level: level
          })
          
          // 递归处理子节点
          if (node.children && node.children.length > 0) {
            const childPrefix = level > 0 ? (i === tree.length - 1 ? '  ' : '│ ') : ''
            result = result.concat(this.flattenDeptTree(node.children, level + 1, nodePrefix + childPrefix))
          }
        }
        
        return result
      },

      // 初始化表单
      async init(id) {
        this.dataForm.deptId = id || 0
        this.visible = true

        // 重置表单
        await this.$nextTick()
        this.$refs['dataForm'].resetFields()

        // 如果是修改，加载部门详情
        if (this.dataForm.deptId) {
          try {
            const res = await api.sysdeptDetailApi(id)
            this.dataForm = res
            // 初始化父部门选择
            this.initParentSelection(res)
          } catch (error) {
            this.$message.error('加载部门详情失败')
            console.error('加载部门详情失败:', error)
          }
        } else {
          // 新增时重置父部门选择
          this.parentIdPath = []
        }
      },

      // 初始化父部门选择
      initParentSelection(deptData) {
        // 父部门ID已经直接设置在dataForm中
        this.updateAncestorsByParentId()
      },
      
      // 根据父部门ID更新祖级列表
      updateAncestorsByParentId() {
        if (this.dataForm.parentId === '0') {
          // 顶级部门
          this.dataForm.ancestors = '0'
          return
        }
        
        // 从原始部门树中查找父部门的祖级列表
        const parentNode = this.findNodeById(this.originalDeptTree, this.dataForm.parentId)
        if (parentNode) {
          // 如果能找到父节点，使用父节点的祖级列表 + 父节点ID
          if (parentNode.parentId === '0') {
            this.dataForm.ancestors = '0,' + this.dataForm.parentId
          } else {
            this.dataForm.ancestors = parentNode.ancestors + ',' + this.dataForm.parentId
          }
        } else {
          // 如果找不到父节点，使用默认值
          this.dataForm.ancestors = '0'
        }
      },
      
      // 从部门树中查找指定ID的节点
      findNodeById(tree, id) {
        for (const node of tree) {
          if (node.deptId === id) {
            return node
          }
          if (node.children && node.children.length > 0) {
            const found = this.findNodeById(node.children, id)
            if (found) {
              return found
            }
          }
        }
        return null
      },

      // 监听父部门ID变化
      watch: {
        'dataForm.parentId': {
          handler(newVal) {
            this.updateAncestorsByParentId()
          },
          immediate: true
        }
      },
      
      // 表单数据提交
      async dataSubmit() {
        try {
          // 表单验证
          await this.$refs['dataForm'].validate()
          
          // 确保祖级列表正确
          this.updateAncestorsByParentId()
          
          if (this.dataForm.deptId) {
            // 更新部门
            await api.sysdeptUpdateApi(this.dataForm)
            this.$message.success('保存成功')
          } else {
            // 新增部门
            await api.sysdeptCreateApi(this.dataForm)
            this.$message.success('新增成功')
          }
          
          this.visible = false
          this.$emit('refreshDataList')
        } catch (error) {
          if (error !== false) { // 如果不是表单验证失败
            this.$message.error('操作失败，请重试')
            console.error('部门操作失败:', error)
          }
        }
      }
    }
  }
</script>