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

<template>
  <div class="resourceanization-container">
    <div class="left">
      <TreeParts
        :treeData="resourcetree_data"
        :title="$t('permission.resource.tree_title')"
        :fieldNames="{
          key: 'menuId',
          title: 'menuName',
          children: 'children'
        }"
        :permission="tree_permission_list"
        @nodeClick="onNodeClick"
        @addBtnClick="onAddBtnClick"
        @deleteBtnClick="onDeleteBtnClick"
      />
    </div>

    <div class="right">
      <a-card :title="$t('permission.resource.details')" style="height: 100%">
        <ResourceForm
          :resource_form="resource_form"
          @statusChange="resourceFromStatusChange"
          @save="resourceFromSave"
          @reset="resourceFromReset"
        >
          <template #actions>
            <a-button v-hasPerm="'system:menu:edit'" @click="resourceFromSave">{{
              $t('permission.resource.save')
            }}</a-button>
            <a-button @click="resourceFromReset">{{ $t('permission.resource.reset') }}</a-button>
          </template>
        </ResourceForm>
      </a-card>
    </div>

    <Modal
      :visible.sync="resource_visible"
      @ok="resourceFromSave"
      @cancel="resourceFromCancel"
      :title="$t('permission.resource.add')"
    >
      <ResourceForm ref="resourceForm" :resource_form="resource_form"></ResourceForm>
    </Modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import TreeParts from '../../../views/permission/TreeParts.vue';
import ResourceForm from './ResourceForm.vue';
import Modal from '../../../views/permission/Modal.vue';
import { hasPermission } from '../../../utils/permission';
import {
  QueryResourceTree,
  QueryResourceDetail,
  UpdateResourceStatus,
  UpdateResource,
  CreateResource,
  DeleteResource
} from '../../../apis/permission/resource';

const router = useRouter();

const resourceForm = ref(null);
const resource_visible = ref(false);
const is_edit_mode = ref(true);
const resourcetree_data = ref([]);
const tree_permission_list = {
  add_permission: 'system:menu:add',
  delete_permission: 'system:menu:delete'
};

const resource_form = reactive({
  parentName: '',
  status: 0,
  menuName: '',
  path: '',
  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.path = data.path;
  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;

  is_edit_mode.value = true;

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

  resource_form.parentId = nodeData.menuId;
  resource_form.parentName = nodeData.menuName;
  resource_form.menuName = '';
  resource_form.path = '';
  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_visible.value = true;
  is_edit_mode.value = false;
};

const onDeleteBtnClick = async ({ menuId }) => {
  const { code } = await DeleteResource(menuId);
  if (code === 200) {
    Message.success({
      content: t('permission.org.delete_success')
    });
  }
  getResourceTree();
};
const resourceFromStatusChange = async (status) => {
  const data = {
    menuId: resource_form.resourceId[0],
    status
  };
  const { code } = await UpdateResourceStatus(data);
  if (code === 200) {
    Message.success({
      content: t('permission.status_switch_success')
    });
    getResourceTree();
  }
};

const resourceFromSave = async () => {
  if (resourceForm.value.$refs.resourceFormRef.validate) {
    resourceForm.value.$refs.resourceFormRef.validate(async (valid) => {
      if (!valid) {
        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 ? t('permission.edit') : t('permission.add');
          Message.success({
            content: `${action}${t('permission.success')}`
          });

          getResourceTree();
          resource_visible.value = false;
        }
      }
    });
  }
};

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

const resourceFromCancel = () => {
  is_edit_mode.value = true;
  resource_visible.value = false;
};
onMounted(() => {
  if (hasPermission('system:menu:list')) {
    getResourceTree();
  } else {
    router.push('/noPer');
  }
});
</script>

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

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

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