smartai2dian0/src/modules/permission/org/index.vue

<template>
  <div class="organization-container">
    <div class="left">
      <TreeParts :treeData="org_tree_data" :title="'机构'" :showLock="true" :fieldNames="{
        key: 'deptId',
        title: 'deptName',
        children: 'children',
      }" :permission="tree_permission_list" @nodeClick="onNodeClick" @addBtnClick="onAddBtnClick"
        @deleteBtnClick="onDeleteBtnClick" @drop="onNodeDrop" />
    </div>
    <div class="right">
      <a-card title="详情" style="height: 100%">
        <OrgForm :org_form="org_form" @save="orgFromSave" @reset="orgFromReset">
          <template #actions>
            <a-button v-hasPerm="'system:dept:edit'" @click="orgFromSave">保存</a-button>
            <a-button @click="orgFromReset">重置</a-button>
          </template>
        </OrgForm>
      </a-card>
    </div>

    <Modal :visible.sync="org_visible" @ok="orgFromSave" @cancel="orgFromCancel" :title="'新增'">
      <OrgForm :org_form="org_form"></OrgForm>
    </Modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import TreeParts from '../TreeParts.vue';
import OrgForm from './OrgForm.vue';
import Modal from '../Modal.vue';
import { hasPermission } from '../../../utils/permission';
import { QueryDeptDetail, UpdateDept, UpdateDeptParent, CreateDept, DeleteDept } from '../../../apis/permission/org';
import { QueryDeptTree } from '../../../apis/permission/common';

const org_visible = ref(false);
const is_edit_mode = ref(true);
const org_tree_data = ref([]);
const tree_permission_list = {
  add_permission: 'system:dept:add',
  delete_permission: 'system:dept:delete',
}

const org_form = reactive({
  parentName: '',
  status: 0,
  deptName: '',
  leader: '',
  phone: '',
  address: '',

  // 多余的参数
  orderNum: 0,
});

const getDeptTree = async () => {
  const {
    code,
    data: { rows }
  } = await QueryDeptTree();
  if (code == 200) {
    org_tree_data.value = rows;
  }
};

// 树节点操作相关
const onNodeClick = async (id) => {
  const {
    data: { data }
  } = await QueryDeptDetail(id);
  org_form.deptId = id;
  org_form.parentName = data.parentName;
  org_form.status = data.status;
  org_form.deptName = data.deptName;
  org_form.leader = data.leader;
  org_form.phone = data.phone;
  org_form.address = data.address;

  is_edit_mode.value = true;
};
const onAddBtnClick = (nodeData) => {
  org_form.deptId = '';
  org_form.parentName = nodeData.deptName;
  org_form.parentId = nodeData.deptId;
  org_form.status = 0;
  org_form.deptName = '';
  org_form.leader = '';
  org_form.phone = '';
  org_form.address = '';

  org_visible.value = true;
  is_edit_mode.value = false;
};

const onDeleteBtnClick = async ({ deptId }) => {
  const { code } = await DeleteDept(deptId);
  if (code === 200) {
    Message.success({
      title: '删除',
      content: '删除成功'
    });
  }
  getDeptTree();
};

const orgFromSave = async () => {
  const data = {
    ...org_form,
    deptId: is_edit_mode.value && org_form.deptId ? org_form.deptId[0] : null
  };

  const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
  const { code } = await apiCall(data);

  if (code === 200) {
    const action = is_edit_mode.value ? '编辑' : '新增';
    Message.success({
      title: `${action}用户`,
      content: `${action}成功`
    });

    getDeptTree();
    org_visible.value = false;
  }
};

const orgFromReset = () => {
  org_form.deptId = null;
  org_form.parentName = '';
  org_form.status = 0;
  org_form.deptName = '';
  org_form.leader = '';
  org_form.phone = '';
  org_form.address = '';
};

const orgFromCancel = () => {
  is_edit_mode.value = true;
  org_visible.value = false;
};

const onNodeDrop = async ({ dropNode, dragNode, dropPosition }) => {
  const data = org_tree_data.value;
  UpdateDeptParent({
    orderNum: '0',
    parentId: dropNode.deptId,
    deptId: dragNode.deptId
  });
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
      if (item.deptId === key) {
        callback(item, index, arr);
        return true;
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
      return false;
    });
  };

  loop(data, dragNode.deptId, (_, index, arr) => {
    arr.splice(index, 1);
  });

  if (dropPosition === 0) {
    loop(data, dropNode.deptId, (item) => {
      item.children = item.children || [];
      item.children.push(dragNode);
    });
  } else {
    loop(data, dropNode.deptId, (_, index, arr) => {
      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
    });
  }
};
onMounted(() => {
  if (hasPermission('system:dept:list')) {
    getDeptTree();
  }
});
</script>

<style lang="css" scoped>
.organization-container {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 40px);
  width: 100%;
}

.left {
  width: 30%;
  height: 100%;
  background-color: #fff;
}

.right {
  width: 69%;
  height: 100%;
  background-color: #fff;
}
</style>