资源库接口对接

src/api/resource/repository.ts

@@ -3,11 +3,14 @@ import { defHttp } from '@/utils/axios/index'
 import type { ApiResult } from '../model/baseModel'
 import type { ResourceFieldDto, ResourceRepositoryTreeDto } from './model/repositoryModel'
 
+export type ResourceSaveParamsDto = Omit<ResourceRepositoryTreeDto, 'childNode'>
+
 enum Api {
   REPOSITORY_LIST = '/resource/findList',
   GET_RESOURCE_FIELD = '/resourceField/getResourceField',
   GET_RESOURCE_FIELD_VALUE = '/resourceField/getResourceFieldValue',
-  FIND_PARENT_RESOURCE = '/resource/findParentResourceTypeAndFields'
+  FIND_PARENT_RESOURCE = '/resource/findParentResourceTypeAndFields',
+  RESOURCE_SAVE = '/resource/save'
 }
 
 export const apiGetRepositoryList = () => {
@@ -48,3 +51,10 @@ export const apiFindParentResource = (tableName: string) => {
     }
   })
 }
+
+export const apiResourceSave = (data: ResourceSaveParamsDto) => {
+  return defHttp.post<ApiResult<ResourceRepositoryTreeDto>>({ 
+    url: Api.RESOURCE_SAVE,
+    data
+  })
+}

src/main.ts

@@ -4,6 +4,10 @@ import 'vxe-table/lib/style.css'
 // register svgIcon
 import 'virtual:svg-icons-register'
 
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import 'element-plus/dist/index.css'
+
 import { router, setupRouter } from './router'
 import { setupStore } from './stores'
 import { setupRouterGuard } from './router/guard'
@@ -26,6 +30,7 @@ function bootstrap() {
   setupRouterGuard(router)
 
   setupGlobalComponents(app)
+  app.use(ElementPlus, { locale: zhCn })
 
   app.mount('#app')
 }

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

 <template>
-  <Modal v-bind="getBindValue" @cancel="handleCancel">
+  <Modal v-bind="getBindValue" @cancel="handleCancel" @ok="confirmFrom">
     <!-- 模态框内容 -->
     <Form ref="formRef" :model="formState" :label-col="{ style: { width: '5em' } }">
       <Row :gutter="24">
@@ -42,59 +42,48 @@
       </template>
 
       <template #resourceFiledTitle="{ row }">
-        <Input placeholder="输入字段名" size="small" v-model:value="row.resourceFiledTitle" />
+        <el-input placeholder="输入字段名" size="small" v-model="row.resourceFiledTitle" />
       </template>
       <template #resourceFieldType="{ row }">
-        <Select
-          v-bind="selectOptions"
-          placeholder="请选择类型"
-          :options="dictOptions['resourceFieldType']"
-          v-model:value="row.resourceFieldType"
-        />
+        <el-select v-model="row.resourceFieldType" size="small" clearable>
+          <template v-for="item in dictOptions['resourceFieldType']" key="item.dictItemValue">
+            <el-option :label="item.dictItemText" :value="item.dictItemValue"></el-option>
+          </template>
+        </el-select>
       </template>
       <template #dictCode="{ row }">
-        <Select
-          style="display: block"
+        <el-select
+          clearable
+          filterable
+          remote
           size="small"
-          :field-names="{
-            label: 'dictName',
-            value: 'dictCode'
-          }"
-          allowClear
-          placeholder="请选择字典"
-          :options="dictOptions['dict']"
-          show-search
-          @search="handleSearch"
-          v-model:value="row.dictCode"
-        />
+          :remote-method="handleSearch"
+          v-model="row.dictCode"
+          :loading="searchLoading"
+        >
+          <template v-for="item in dictOptions['dict']" key="item.dictCode">
+            <el-option :label="item.dictName" :value="item.dictCode"></el-option>
+          </template>
+        </el-select>
       </template>
       <template #resourceFieldShow="{ row }">
-        <Select
-          placeholder="是否可见"
-          v-bind="selectOptions"
-          :options="dictOptions['resourceFieldShow']"
-          v-model:value="row.resourceFieldShow"
-        />
+        <el-select size="small" v-model="row.resourceFieldShow" clearable>
+          <template v-for="item in dictOptions['resourceFieldShow']" key="item.dictItemValue">
+            <el-option :label="item.dictItemText" :value="item.dictItemValue"></el-option>
+          </template>
+        </el-select>
       </template>
       <template #action="{ row, $rowIndex }">
-        <Tooltip title="删除">
-          <Button
-            v-if="!row.resourceFieldId"
-            danger
-            size="small"
-            @click="removeRow($rowIndex)"
-            shape="circle"
-            ><DeleteOutlined
-          /></Button>
-        </Tooltip>
+        <el-button v-if="!row.resourceFieldId" size="small" @click="removeRow($rowIndex)" type="danger" :icon="Delete" circle />
       </template>
     </vxe-grid>
   </Modal>
 </template>
 
 <script lang="ts">
+import { Delete } from '@element-plus/icons-vue'
 import { apiDictFindById, apiGetDictByCode, apiGetDictList } from '@/api/common/dict'
-import { apiFindParentResource } from '@/api/resource/repository'
+import { apiFindParentResource, apiResourceSave } 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'
@@ -134,6 +123,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const xGrid = ref()
     const formRef = ref()
+    const searchLoading = ref(false)
     const visibleRef = ref(false)
     const formState = reactive({
       resourceTableTitle: '',
@@ -245,12 +235,14 @@ export default defineComponent({
     const removeRow = (index: number) => gridOptions.data?.splice(index, 1)
 
     const handleSearch = async (dictCode: string) => {
+      searchLoading.value = true
       const { result } = await apiGetDictByCode(dictCode)
       if (result !== null) {
         dictOptions['dict'] = [result]
       } else {
         dictOptions['dict'] = []
       }
+      searchLoading.value = false
     }
 
     const getDict = async (code: string) => {
@@ -258,6 +250,14 @@ export default defineComponent({
       dictOptions[code] = result
     }
 
+    const confirmFrom = async () => {
+      const params = {
+        ...unref(formState),
+        resourceFileds: gridOptions.data
+      }
+      const {result} = await apiResourceSave(params)
+    }
+
     const resetModalState = () => {
       Object.assign(unref(formState), {
         resourceTableTitle: '',
@@ -289,6 +289,9 @@ export default defineComponent({
       dictOptions,
       selectOptions,
       getBindValue,
+      searchLoading,
+      confirmFrom,
+      Delete,
       removeRow,
       addFieldRow,
       handleSearch,

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

 <template>
-  <Tree
-    v-if="treeList.length"
-    defaultExpandAll
-    :treeData="treeList"
-    :fieldNames="fieldNames"
-    :selectedKeys="selectedKeys"
-    @select="onSelect"
+  <el-card shadow="never" header="资源分类" style="height: 100%;">
+    <el-input v-model="searchText" placeholder="请输入要搜索的内容" :prefix-icon="Search" style="margin-bottom: 10px;"></el-input>
+    <el-tree
+    ref="treeRef"
+      :data="treeList"
+      highlight-current
+      :loading="treeLoading"
+      node-key="resourceTypeId"
+      @node-click="onSelect"
+      :current-node-key="selectedKey"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="{
+        children: 'childNode',
+        label: 'resourceTableTitle'
+      }"
     >
-    <template #title="node">
-      <Dropdown :trigger="['contextmenu']">
-        <span>{{ node.resourceTableTitle }}</span>
-        <template #overlay>
-          <Menu @click="({key}) => onContextMenuClick(key, node)">
-            <MenuItem key="add">添加资源分类</MenuItem>
-            <MenuItem key="modify">修改资源分类</MenuItem>
-            <MenuItem key="delete">删除资源分类</MenuItem>
-          </Menu>
+      <template #default="{ node, data }">
+        <el-dropdown
+          style="flex: 1"
+          trigger="contextmenu"
+          @command="(key) => onContextMenuClick(key, data)"
+        >
+          <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-menu>
           </template>
-      </Dropdown>
+        </el-dropdown>
       </template>
-  </Tree>
+    </el-tree>
+  </el-card>
 
-<RepositoryModal v-model:open="open" width="700px" :res-node="openNode" title="添加资源分类" />
+  <RepositoryModal v-model:open="open" width="700px" :res-node="openNode" title="添加资源分类" />
 </template>
 
 <script lang="ts">
+import { Search } from '@element-plus/icons-vue'
 import { Tree, Dropdown, Menu, MenuItem } from 'ant-design-vue'
 import RepositoryModal from './RepositoryModal.vue'
 import { defineComponent, ref } from 'vue'
 import { useRepositoryTree } from './useRepositoryTree'
 export default defineComponent({
   components: {
-    Tree,Menu,
+    Tree,
+    Menu,
     MenuItem,
     Dropdown,
     RepositoryModal
   },
   setup() {
     const repositoryState = useRepositoryTree()
-
     return {
+      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 { onMounted, reactive, ref, unref } from 'vue'
+import { onMounted, reactive, ref, unref, watch } from 'vue'
 import mitter from '@/utils/eventBus'
+import type { ElTree, TreeNode } from 'element-plus'
 
 export function useRepositoryTree() {
   const fieldNames = reactive({
@@ -9,42 +10,66 @@ export function useRepositoryTree() {
     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 selectedKeys = ref<(string | number)[]>([])
+  const selectedKey = ref<(string | number)>('')
   const treeList = ref<ResourceRepositoryTreeDto[]>([])
   const open = ref(false)
 
+  watch(searchText, (val) => {
+    treeRef.value?.filter(val)
+  })
+
+  const filterNode = (value: string, data: Recordable) => {
+    if (!value) return true
+    return data.resourceTableTitle.includes(value)
+  }
+
   const getTreeList = async () => {
     const { result } = await apiGetRepositoryList()
     treeList.value = result
     // 设置默认选中第一个
-    onSelect([result[0].resourceTypeId])
+    onSelect([result[0]])
   }
 
-  const onSelect = (keys: (string | number)[], e?: any) => {
-    e && Object.assign(selectedNodeData, e.node.data)
-    selectedKeys.value = keys
+  // const onSelect = (keys: (string | number)[], e?: any) => {
+  const onSelect = (node: any) => {
+
+    node && Object.assign(selectedNodeData, unref(node))
+    selectedKey.value = node.resourceTypeId
     // 触发 表格 查询
-    mitter.emit('treeSelect', unref(selectedKeys))
+    mitter.emit('treeSelect', {
+      key: unref(selectedKey),
+      node: unref(node)
+    })
   }
 
-  const onContextMenuClick = (key: any, node: any) => {
-    Object.assign(openNode, node)
+  const onContextMenuClick = (key: any, data: any) => {
+    console.log('data', data)
+    Object.assign(openNode, unref(data))
     open.value = true
   }
 
   onMounted(async () => {
+    treeLoading.value = true
     await getTreeList()
+    treeLoading.value = false
   })
 
   return {
     open,
+    treeRef,
+    treeLoading,
+    searchText,
     openNode,
     fieldNames,
     treeList,
-    selectedKeys,
+    selectedKey,
     onSelect,
+    filterNode,
     onContextMenuClick
   }
 }

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

 <template>
+  <h1 class="resource-table-title">
+    当前资源表：{{ selectedNode?.resourceTableTitle }}
+  </h1>
+  <el-button type="primary">新增</el-button>
   <vxe-table
-    border="none"
+    border="inner"
     ref="tableRef"
     :data="tableData"
     size="small"
+    min-height="400"
     :loading="loading"
-    row-class-name="query-table-row"
     header-row-class-name="query-table-header"
   >
     <template v-for="item in tableColumns" :key="item.resourceFieldId">
@@ -13,36 +17,37 @@
     </template>
     <vxe-column field="action" title="操作" key="action" fixed="right">
       <template #default="{ row }">
-        <Space>
-          <span><FormOutlined />授权</span>
-          <span><FormOutlined />修改</span>
-          <span><DeleteOutlined />删除</span>
-        </Space>
+        <el-button type="primary" size="small" :icon="Edit" circle />
+        <el-button type="danger" size="small" :icon="Delete" circle />
       </template>
     </vxe-column>
   </vxe-table>
 </template>
 
 <script lang="ts">
-import { Space } from 'ant-design-vue'
-import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { defineComponent } from 'vue'
+import {Edit, Star, Delete} from '@element-plus/icons-vue'
 import { useResourceFieldsTable } from './useResourceFieldsTable'
 
 export default defineComponent({
   name: 'ResourceFieldsTable',
   components: {
-    Space,
-    FormOutlined,
-    DeleteOutlined
   },
   setup() {
     const state = useResourceFieldsTable()
 
     return {
+      Edit,
+      Star,
+      Delete,
       ...state
     }
   }
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.resource-table-title {
+  line-height: 50px;
+  font-size: 18px;
+}
+</style>

src/views/resource/repository/components/ResourceFieldsTable/useResourceFieldsTable.ts

-import { onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount, reactive, ref } from 'vue'
 import mitter from '@/utils/eventBus'
 import { apiGetResourceField, apiGetResourceFieldValue } from '@/api/resource/repository'
-import type { ResourceFieldDto } from '@/api/resource/model/repositoryModel'
+import type { ResourceFieldDto, ResourceRepositoryTreeDto } from '@/api/resource/model/repositoryModel'
 
 export function useResourceFieldsTable() {
   const tableData = ref<Recordable[]>([])
   const tableColumns = ref<ResourceFieldDto[]>([])
+  const selectedNode = ref<ResourceRepositoryTreeDto>()
   const loading = ref(false)
 
-  mitter.on('treeSelect', async ([key]: any) => {
+  mitter.on('treeSelect', async (params) => {
+    const { key, node } = params as { key: string; node: ResourceRepositoryTreeDto }
     if (key) {
       loading.value = true
+      selectedNode.value = node
       try {
         await getColumn(key)
         await getTableData(key)
@@ -32,7 +35,7 @@ export function useResourceFieldsTable() {
    * 获取表格数据
    */
   const getTableData = async (key: any) => {
-    const {result } =await apiGetResourceFieldValue(key)
+    const { result } = await apiGetResourceFieldValue(key)
     tableData.value = result
   }
 
@@ -43,6 +46,7 @@ export function useResourceFieldsTable() {
   return {
     loading,
     tableData,
+    selectedNode,
     tableColumns
   }
 }

src/views/resource/repository/index.vue

@@ -2,7 +2,7 @@
   <div class="page-search">
     <PageTitle title="资源库" />
     <div class="page-search-wrap">
-      <Row>
+      <Row :gutter="24" style="height: 100%;">
         <Col span="6">
           <RepositoryTree />
         </Col>