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

<template>
  <div class="organization-container">
    <div class="left">
      <TreeParts :treeData="resourcetree_data" :title="'资源'" :fieldNames="{
        key: 'menuId',
        title: 'menuName',
        children: 'children',
      }" @nodeClick="onNodeClick" @addBtnClick="onAddBtnClick" @deleteBtnClick="onDeleteBtnClick" />
    </div>

    <div class="right">
      <a-card title="详情" style="height: 100%;">
        <ResourceForm :resource_form="resource_form" @save="orgFromSave" @reset="orgFromReset">
          <template #actions>
            <a-button @click="orgFromSave">保存</a-button>
            <a-button @click="orgFromReset">重置</a-button>
          </template>
        </ResourceForm>
      </a-card>
    </div>

    <Modal :visible.sync="resourcevisible" @ok="orgFromSave" @cancel="orgFromCancel" :title="'新增'">
      <ResourceForm :resource_form="resource_form"></ResourceForm>
    </Modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import TreeParts from '../TreeParts.vue';
import ResourceForm from './ResourceForm.vue';
import Modal from '../Modal.vue';

import {
  QueryResourceTree, QueryResourceDetail, UpdateResource, CreateResource, DeleteResource
} from '../../../apis/permission/resource';

const resourcevisible = ref(false);
const is_edit_mode = ref(true);
const resourcetree_data = ref([]);

const resource_form = reactive({
  parentName: '',
  status: 0,
  menuName: '',
  icon: '',
  menuType: '0',
  description: '',
  perms: '',
  component: '',
});

const getResourceTree = async () => {
  const { code, data: { rows } } = await QueryResourceTree();
  if (code == 200) {
    resourcetree_data.value = rows;
  }
}


// 树节点操作相关
const onNodeClick = async (id) => {
  const { data: { data } } = await QueryResourceDetail(id);
  resource_form.resourceId = id;
  resource_form.parentId = data.parentId;
  resource_form.parentName = data.parentName;
  resource_form.menuName = data.menuName;
  resource_form.status = data.status;
  resource_form.icon = data.icon;
  resource_form.menuType = data.menuType;
  resource_form.description = data.description;
  resource_form.perms = data.perms;
  resource_form.component = data.component;

  // 多余的参数
  resource_form.orderNum = 0;
  resource_form.path = '';
}
const onAddBtnClick = (nodeData) => {
  resource_form.resourceId = null;

  resource_form.parentId = nodeData.menuId
  resource_form.parentName = nodeData.menuName;
  resource_form.menuName = '';
  resource_form.status = '0';
  resource_form.icon = '';
  resource_form.menuType = '0';
  resource_form.description = '';
  resource_form.perms = '';
  resource_form.component = '';

  // 多余的参数
  resource_form.orderNum = 0;
  resource_form.path = '';

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

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

const orgFromSave = async () => {
  console.log('is_edit_mode.value', is_edit_mode.value)
  console.log('resource_form.resourceId', resource_form.resourceId)
  const data = {
    ...resource_form,
    menuId: (is_edit_mode.value && resource_form.resourceId) ? resource_form.resourceId[0] : null
  }

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

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

    getResourceTree()
    resourcevisible.value = false;
  }
}

const orgFromReset = () => {
  resource_form.resourceId = null;
  resource_form.parentName = '';
  resource_form.status = 0;
  resource_form.resourceName = '';
  resource_form.leader = '';
  resource_form.orderNum = '';
  resource_form.address = '';
}

const orgFromCancel = () => {
  is_edit_mode.value = true;
  resourcevisible.value = false;
}
onMounted(() => {
  getResourceTree();
})
</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;
  /* TODO优化 使用滚动组件 */
  overflow-y: auto;
}

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