资源库接口对接

src/api/resource/repository.ts

@@ -6,11 +6,20 @@ import type { ResourceFieldDto, ResourceRepositoryTreeDto } from './model/reposi
 export type ResourceSaveParamsDto = Omit<ResourceRepositoryTreeDto, 'childNode'>
 
 enum Api {
+  /*查询全部资源 */
   REPOSITORY_LIST = '/resource/findList',
+  /*根据资源类型id，查询资源字段 */
   GET_RESOURCE_FIELD = '/resourceField/getResourceField',
+  /*根据资源类型id，获取资源值 */
   GET_RESOURCE_FIELD_VALUE = '/resourceField/getResourceFieldValue',
+  /* 新增资源类型时，根据对象的父类表名，返回父类和超类及所属的字段 */
   FIND_PARENT_RESOURCE = '/resource/findParentResourceTypeAndFields',
-  RESOURCE_SAVE = '/resource/save'
+  /* 保存资源库 */
+  RESOURCE_SAVE = '/resource/save',
+  /*修改-查看资源类型时，根据当前表名，返回自己和父类和超类及所属的字段 */
+  FIND_RESOURCE_TYPE_FIELDS = '/resource/findResourceTypeAndFields',
+  /*根据id删除资源库 */
+  DELETE_RESOURCE = '/resource/delete'
 }
 
 export const apiGetRepositoryList = () => {
@@ -58,3 +67,23 @@ export const apiResourceSave = (data: ResourceSaveParamsDto) => {
     data
   })
 }
+
+export const apiFindResourceTypeFields = (tableName: string) => {
+  return defHttp.get<ApiResult<ResourceRepositoryTreeDto>>({
+    url: Api.FIND_RESOURCE_TYPE_FIELDS,
+    params: { tableName },
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED
+    }
+  })
+}
+
+export const apiDeleteResource = (id: string) => {
+  return defHttp.delete<ApiResult<Recordable>>({
+    url: Api.DELETE_RESOURCE,
+    params: { id },
+    headers: {
+      'Content-Type': ContentTypeEnum.FORM_URLENCODED
+    }
+  })
+}

src/views/resource/repository/components/RepositoryTree/RepositoryModal.vue

 <template>
-  <Modal v-bind="getBindValue" @cancel="handleCancel" @ok="confirmFrom">
+  <Modal v-bind="getBindValue" @cancel="handleCancel">
     <!-- 模态框内容 -->
     <Form ref="formRef" :model="formState" :label-col="{ style: { width: '5em' } }">
       <Row :gutter="24">
@@ -73,17 +73,35 @@
           </template>
         </el-select>
       </template>
+      <template #sortNum="{row}">
+        <el-input placeholder="排序" size="small" v-model="row.sortNum" />
+      </template>
       <template #action="{ row, $rowIndex }">
-        <el-button v-if="!row.resourceFieldId" size="small" @click="removeRow($rowIndex)" type="danger" :icon="Delete" circle />
+        <el-button
+          v-if="!row.resourceFieldId"
+          size="small"
+          @click="removeRow($rowIndex)"
+          type="danger"
+          :icon="Delete"
+          circle
+        />
       </template>
     </vxe-grid>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="confirmFrom">确认</el-button>
+    </template>
   </Modal>
 </template>
 
 <script lang="ts">
 import { Delete } from '@element-plus/icons-vue'
 import { apiDictFindById, apiGetDictByCode, apiGetDictList } from '@/api/common/dict'
-import { apiFindParentResource, apiResourceSave } from '@/api/resource/repository'
+import {
+  apiFindParentResource,
+  apiResourceSave,
+  type ResourceSaveParamsDto
+} from '@/api/resource/repository'
 import { Row, Col, Modal, Form, FormItem, Input, Select, Button, Tooltip } from 'ant-design-vue'
 import { onMounted, reactive } from 'vue'
 import { watch } from 'vue'
@@ -119,10 +137,12 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:open'],
+  emits: ['update:open', 'onSuccess'],
   setup(props, { emit }) {
     const xGrid = ref()
     const formRef = ref()
+    const loadding = ref(false)
+    const btnLoadding = ref(false)
     const searchLoading = ref(false)
     const visibleRef = ref(false)
     const formState = reactive({
@@ -184,6 +204,13 @@ export default defineComponent({
             default: 'resourceFieldShow'
           }
         },
+        {
+          field: 'sortNum',
+          title: '排序',
+          slots: {
+            default: 'sortNum'
+          }
+        },
         {
           field: 'action',
           title: '操作',
@@ -214,6 +241,7 @@ export default defineComponent({
     )
 
     const getResourceDetail = async () => {
+      if (!props.resNode.resourceTableName) return
       const { result } = await apiFindParentResource(props.resNode.resourceTableName)
       formState.parentTableName = result.parentTableName
       formState.parentTableTitle = result.parentTableTitle
@@ -255,7 +283,13 @@ export default defineComponent({
         ...unref(formState),
         resourceFileds: gridOptions.data
       }
-      const {result} = await apiResourceSave(params)
+      try {
+        btnLoadding.value = true
+        const { result } = await apiResourceSave(params as ResourceSaveParamsDto)
+        handleCancel()
+        emit('onSuccess', result)
+      } catch {}
+      btnLoadding.value = false
     }
 
     const resetModalState = () => {

src/views/resource/repository/components/RepositoryTree/index.vue

 <template>
-  <el-card shadow="never" header="资源分类" style="height: 100%;">
-    <el-input v-model="searchText" placeholder="请输入要搜索的内容" :prefix-icon="Search" style="margin-bottom: 10px;"></el-input>
+  <el-card shadow="never" header="资源分类" style="height: 100%">
+    <el-space style="margin-bottom: 10px">
+      <el-input
+        v-model="searchText"
+        placeholder="请输入要搜索的内容"
+        :prefix-icon="Search"
+      ></el-input>
+      <el-button type="primary" :icon="Plus" @click="onContextMenuClick('add', {})" />
+    </el-space>
     <el-tree
       ref="treeRef"
       :data="treeList"
@@ -25,9 +32,9 @@
           <p style="width: 100%">{{ node.label }}</p>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>添加资源分类</el-dropdown-item>
-              <el-dropdown-item>修改资源分类</el-dropdown-item>
-              <el-dropdown-item>删除资源分类</el-dropdown-item>
+              <el-dropdown-item command="add">添加资源分类</el-dropdown-item>
+              <el-dropdown-item command="update">修改资源分类</el-dropdown-item>
+              <el-dropdown-item command="del">删除资源分类</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -35,11 +42,17 @@
     </el-tree>
   </el-card>
 
-  <RepositoryModal v-model:open="open" width="700px" :res-node="openNode" title="添加资源分类" />
+  <RepositoryModal
+    @on-success="onSuccess"
+    v-model:open="open"
+    width="700px"
+    :res-node="openNode"
+    title="添加资源分类"
+  />
 </template>
 
 <script lang="ts">
-import { Search } from '@element-plus/icons-vue'
+import { Search, Plus } from '@element-plus/icons-vue'
 import { Tree, Dropdown, Menu, MenuItem } from 'ant-design-vue'
 import RepositoryModal from './RepositoryModal.vue'
 import { defineComponent, ref } from 'vue'
@@ -55,6 +68,7 @@ export default defineComponent({
   setup() {
     const repositoryState = useRepositoryTree()
     return {
+      Plus,
       Search,
       ...repositoryState
     }

src/views/resource/repository/components/RepositoryTree/useRepositoryTree.ts

 import type { ResourceRepositoryTreeDto } from '@/api/resource/model/repositoryModel'
-import { apiGetRepositoryList } from '@/api/resource/repository'
+import { apiDeleteResource, apiGetRepositoryList } from '@/api/resource/repository'
 import { onMounted, reactive, ref, unref, watch } from 'vue'
 import mitter from '@/utils/eventBus'
-import type { ElTree, TreeNode } from 'element-plus'
+import { ElMessage, type ElTree, type TreeNode } from 'element-plus'
 
 export function useRepositoryTree() {
+  const open = ref(false)
+  const searchText = ref('')
+  const treeLoading = ref(false)
+  const selectedKey = ref<string | number>('')
+  const treeRef = ref<InstanceType<typeof ElTree>>()
+  const treeList = ref<ResourceRepositoryTreeDto[]>([])
+  const selectedNodeData = reactive<Recordable>({})
+  const openNode = reactive<Recordable>({})
   const fieldNames = reactive({
     children: 'childNode',
     title: 'resourceTableTitle',
     key: 'resourceTypeId'
   })
-  const treeLoading = ref(false)
-  const treeRef = ref<InstanceType<typeof ElTree>>()
-  const searchText = ref('')
-  const selectedNodeData = reactive<Recordable>({})
-  const openNode = reactive<Recordable>({})
-  const selectedKey = ref<(string | number)>('')
-  const treeList = ref<ResourceRepositoryTreeDto[]>([])
-  const open = ref(false)
 
   watch(searchText, (val) => {
     treeRef.value?.filter(val)
   })
 
+  const treeAddNode = (data: any) => treeRef.value?.append(data, openNode.resourceTypeId)
+  const treeRemoveNode = async (data: any) => {
+    try {
+      await apiDeleteResource(data.resourceTypeId)
+      treeRef.value?.remove(data)
+      ElMessage.success('删除成功！')
+    } catch {}
+  }
+
   const filterNode = (value: string, data: Recordable) => {
     if (!value) return true
     return data.resourceTableTitle.includes(value)
@@ -35,9 +44,9 @@ export function useRepositoryTree() {
     onSelect([result[0]])
   }
 
-  // const onSelect = (keys: (string | number)[], e?: any) => {
-  const onSelect = (node: any) => {
+  const onSuccess = (data) => treeAddNode(data)
 
+  const onSelect = (node: any) => {
     node && Object.assign(selectedNodeData, unref(node))
     selectedKey.value = node.resourceTypeId
     // 触发 表格 查询
@@ -48,9 +57,18 @@ export function useRepositoryTree() {
   }
 
   const onContextMenuClick = (key: any, data: any) => {
-    console.log('data', data)
-    Object.assign(openNode, unref(data))
+    switch (key) {
+      case 'add':
+        Object.assign(unref(openNode), unref(data))
         open.value = true
+        break
+      case 'del':
+        treeRemoveNode(data)
+        break
+      case 'update':
+        open.value = true
+        break
+    }
   }
 
   onMounted(async () => {
@@ -68,6 +86,7 @@ export function useRepositoryTree() {
     fieldNames,
     treeList,
     selectedKey,
+    onSuccess,
     onSelect,
     filterNode,
     onContextMenuClick