1

src/common/router/index.ts

@@ -105,14 +105,6 @@ export function reloadRouter() {
   const routNames = useAppSettingStore()
     .menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.SubPage)
     .map((it) => it.routeName)
-
-  routNames.push('menus')
-  routNames.push('user')
-  routNames.push('role')
-  routNames.push('dict')
-  routNames.push('db-table')
-  routNames.push('tpl')
-
   if (Colls.isEmpty(routNames)) {
     return false
   }

src/dts/components.d.ts

@@ -5,6 +5,7 @@
 // ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import { GlobalComponents } from 'vue'
 
 export {}
 

src/pages/sys/endpoint/Endpoint.vue

@@ -0,0 +1,193 @@
+<template>
+  <Page>
+    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
+      <ElFormItem label="端点地址">
+        <ElInput
+          v-model="searchForm.endpointPath"
+          placeholder="端点地址"/>
+      </ElFormItem>
+
+      <ElFormItem>
+        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
+        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
+      </ElFormItem>
+    </ElForm>
+
+    <div class="tool-bar">
+      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
+      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
+    </div>
+
+    <ElTable v-loading="searching" :data="tableData"
+      cell-class-name="table-cell"
+      class="table-list"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id">
+      <ElTableColumn label="请求方式" prop="requestMethod"/>
+      <ElTableColumn label="路由前缀" prop="routingPath"/>
+      <ElTableColumn label="端点地址" prop="endpointPath"/>
+      <ElTableColumn label="访问模式" prop="accessModelTxt"/>
+      <ElTableColumn label="备注" prop="memo"/>
+      <ElTableColumn label="操作" width="180">
+        <template #default="scope">
+          <div class="action-btn">
+            <ElPopconfirm
+              cancel-button-text="否"
+              cancel-button-type="primary"
+              confirm-button-text="是"
+              confirm-button-type="danger"
+              placement="top"
+              title="是否删除当前数据?"
+              width="180"
+              @confirm="delHandler(scope)">
+              <template #reference>
+                <ElButton :loading="deling" text type="danger">删除</ElButton>
+              </template>
+            </ElPopconfirm>
+            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <ElPagination
+      :page-size="pagination.size"
+      :total="pagination.total"
+      class="pagination"
+      layout="prev, pager, next"
+      @change="pageChangeHandler"/>
+    <EndpointForm ref="endpointForm" @edit-succ="paging"/>
+  </Page>
+</template>
+
+<script lang="ts" setup>
+import EndpointApi from '@/pages/sys/endpoint/endpoint-api.ts'
+import EndpointForm from '@/pages/sys/endpoint/EndpointForm.vue'
+import Page from '@/components/page/Page.vue'
+import { elIcons } from '@/common/element/element.ts'
+
+const tableData = ref<EndpointTypes.SearchEndpointResult[]>([])
+const searchForm = reactive<EndpointTypes.SearchEndpointParam>({
+  current: 1,
+  size: 20,
+})
+const searching = ref(false)
+const deling = ref(false)
+const showSearchForm = ref(true)
+const endpointFormIns = useTemplateRef<InstanceType<typeof EndpointForm>>('endpointForm')
+const pagination = reactive<G.Pagination>({
+  total: 0,
+  current: 1,
+  size: 1,
+})
+
+function pageChangeHandler(currentPage: number, pageSize: number) {
+  searchForm.current = currentPage
+  searchForm.size = pageSize
+  paging()
+}
+
+function showDialog(data?: EndpointTypes.SearchEndpointResult) {
+  endpointFormIns.value?.open(data)
+}
+
+function delHandler({row}: { row: EndpointTypes.SearchEndpointResult }) {
+  deling.value = true
+  EndpointApi.del([ row.id! ])
+    .then(() => {
+      ElMessage.success('删除成功')
+      paging()
+    })
+    .finally(() => {
+      deling.value = false
+    })
+}
+
+function modifyHandler({row}: { row: EndpointTypes.SearchEndpointResult }) {
+  showDialog(row)
+}
+
+function addHandler() {
+  showDialog()
+}
+
+function reset() {
+  Object.assign(searchForm, {})
+  paging()
+}
+
+function paging() {
+  searching.value = true
+  EndpointApi.paging(searchForm)
+    .then(res => {
+      tableData.value = res.data?.records ?? []
+    })
+    .finally(() => {
+      searching.value = false
+    })
+}
+
+onMounted(() => {
+  paging()
+})
+
+</script>
+
+<style lang="stylus" scoped>
+.table-list {
+  flex 1;
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
+}
+
+.pagination {
+  justify-content: end;
+  margin: 8px;
+}
+</style>

src/pages/sys/endpoint/EndpointForm.vue

@@ -0,0 +1,162 @@
+<template>
+  <ElDialog ref="endpointForm"
+    v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="fit-content"
+    @close="dialogCloseHandler">
+    <ElForm :model="formData"
+      :rules="rules"
+      class="form-panel"
+      label-width="auto">
+
+      <ElFormItem label="请求方式" prop="requestMethod">
+        <ElSelect
+          v-model="formData.requestMethod"
+          :disabled="status === 'view'"
+          placeholder="请求方式">
+          <ElOption label="GET 请求" value="GET"/>
+          <ElOption label="POST 请求" value="POST"/>
+          <ElOption label="PUT 请求" value="PUT"/>
+          <ElOption label="DELETE 请求" value="DELETE"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="路由前缀" prop="routingPath">
+        <ElInput
+          v-model="formData.routingPath"
+          :disabled="status === 'view'"
+          placeholder="以 / 开头 或 为空"/>
+      </ElFormItem>
+      <ElFormItem label="端点地址" prop="endpointPath">
+        <ElInput
+          v-model="formData.endpointPath"
+          :disabled="status === 'view'"
+          placeholder="以 / 开头"/>
+      </ElFormItem>
+      <ElFormItem label="访问模式" prop="accessModel">
+        <ElSelect
+          v-model="formData.accessModel"
+          :disabled="status === 'view'"
+          placeholder="访问模式">
+          <ElOption label="允许匿名访问" value="Anonymous"/>
+          <ElOption label="允许已登录用户访问" value="Logined"/>
+          <ElOption label="仅拥有权限的用户访问" value="Authenticated"/>
+          <ElOption label="禁止访问" value="Forbidden"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="备注" prop="memo">
+        <ElInput
+          v-model="formData.memo"
+          :disabled="status === 'view'"
+          placeholder="备注"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+import EndpointApi from '@/pages/sys/endpoint/endpoint-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import FormUtil from '@/common/utils/formUtil.ts'
+import {
+  ElMessage,
+  type FormInstance,
+  type FormRules,
+} from 'element-plus'
+import type { InternalRuleItem } from 'async-validator/dist-types/interface'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+
+const endpointFormIns = useTemplateRef<FormInstance>('endpointForm')
+
+const formData = ref<EndpointTypes.SearchEndpointResult>({})
+const rules = reactive<FormRules<EndpointTypes.SearchEndpointResult>>({
+  requestMethod: [ {required: true, message: '请选择请求方式', trigger: 'blur'} ],
+  routingPath: [ {
+    validator(_: InternalRuleItem, value: string, callback: (error?: string | Error) => void) {
+      if (!Strings.isEmpty(value)) {
+        if (!value.startsWith('/')) {
+          callback('必须以“/”开头')
+          return
+        }
+      }
+      callback()
+    }, message: '请填写路由前缀', trigger: 'blur',
+  } ],
+  endpointPath: [ {
+    required: true, validator(_: InternalRuleItem, value: string, callback: (error?: string | Error) => void) {
+      if (Strings.isBlank(value)) {
+        callback(new Error('请填写端点地址'))
+        return
+      }
+      if (!Strings.isEmpty(value)) {
+        if (!value.startsWith('/')) {
+          callback(new Error('必须以“/”开头'))
+          return
+        }
+      }
+      callback()
+    }, trigger: 'blur',
+  } ],
+  accessModel: [ {required: true, message: '请选择访问模式', trigger: 'blur'} ],
+})
+
+function dialogCloseHandler() {
+  formData.value = {}
+}
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (formData.value.id != null) {
+    FormUtil.submit(endpointFormIns, () => EndpointApi.modify(formData.value))
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    FormUtil.submit(endpointFormIns, () => EndpointApi.add(formData.value))
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: EndpointTypes.SearchEndpointResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      EndpointApi.detail(data.id!)
+        .then(res => {
+          formData.value = res.data
+        })
+    } else {
+      status.value = 'add'
+      formData.value = data
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.form-panel {
+  padding 20px
+}
+</style>

src/pages/sys/endpoint/endpoint-api.ts

@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: EndpointTypes.SearchEndpointParam) {
+    return get<G.PageResult<EndpointTypes.SearchEndpointResult>>('/endpoint/paging', data)
+  },
+  detail(id: string) {
+    return get<EndpointTypes.SearchEndpointResult>('/endpoint/detail', {id})
+  },
+  add(data: EndpointTypes.AddEndpointParam) {
+    return post('/endpoint/add', data)
+  },
+  modify(data: EndpointTypes.ModifyEndpointParam) {
+    return post('/endpoint/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/endpoint/del', ids)
+  },
+}

src/pages/sys/endpoint/endpoint.d.ts

@@ -0,0 +1,65 @@
+export {}
+
+declare global {
+  namespace EndpointTypes {
+    interface SearchEndpointParam extends G.PageParam {
+      // Id
+      id?: string
+      // 请求方式；字典代码：request_method
+      requestMethod?: string
+      // 路由前缀； 以 / 开头 或 为空
+      routingPath?: string
+      // 端点地址； 以 / 开头, Ant 匹配模式
+      endpointPath?: string
+      // 接口访问模式；字典代码：endpoint_access_model
+      accessModel?: string
+      // 备注
+      memo?: string
+    }
+
+    interface SearchEndpointResult {
+      // Id
+      id?: string
+      // 请求方式；字典代码：request_method
+      requestMethod?: string
+      // 路由前缀； 以 / 开头 或 为空
+      routingPath?: string
+      // 端点地址； 以 / 开头, Ant 匹配模式
+      endpointPath?: string
+      // 接口访问模式；字典代码：endpoint_access_model
+      accessModel?: string
+      // 备注
+      memo?: string
+    }
+
+    interface AddEndpointParam {
+      // Id
+      id?: string
+      // 请求方式；字典代码：request_method
+      requestMethod?: string
+      // 路由前缀； 以 / 开头 或 为空
+      routingPath?: string
+      // 端点地址； 以 / 开头, Ant 匹配模式
+      endpointPath?: string
+      // 接口访问模式；字典代码：endpoint_access_model
+      accessModel?: string
+      // 备注
+      memo?: string
+    }
+
+    interface ModifyEndpointParam {
+      // Id
+      id?: string
+      // 请求方式；字典代码：request_method
+      requestMethod?: string
+      // 路由前缀； 以 / 开头 或 为空
+      routingPath?: string
+      // 端点地址； 以 / 开头, Ant 匹配模式
+      endpointPath?: string
+      // 接口访问模式；字典代码：endpoint_access_model
+      accessModel?: string
+      // 备注
+      memo?: string
+    }
+  }
+}

src/pages/sys/endpoint/page.ts

@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/sys/endpoint/Endpoint.vue'),
+} as RouterTypes.RouteConfig

src/pages/sys/menus/MenuForm.vue

@@ -83,6 +83,7 @@ import {
 } from '@/components/a-icon/iconfont.ts'
 import AIcon from '@/components/a-icon/AIcon.tsx'
 import ClientUtil from '@/common/utils/client-util.ts'
+import Utils from '@/common/utils'
 
 const emits = defineEmits([ 'editSucc' ])
 
@@ -177,6 +178,8 @@ defineExpose({
   }) {
     if (!Strings.isBlank(data.id)) {
       status.value = 'modify'
+      data = Utils.clone(data)
+      data.clients = ClientUtil.getClients(data.clientCode!).map(it => it.val)
       menuForm.value = data
     } else {
       menuForm.value = {

src/pages/sys/resource/resource-api.ts

@@ -1,10 +1,10 @@
 import { get } from '@/common/utils/http-util.ts'
 
 export default {
-  list(data?: ResourceTypes.SearchResourceParam) {
+  list(tableName: string, keywords?: string) {
-    return get<ResourceTypes.SearchResourceResult[]>('/resource/list', data)
+    return get<ResourceTypes.SearchResourceResult[]>('/resource/list', {keywords, tableName})
   },
-  listRoleRes(roleId: string) {
+  listRoleRes(roleId: string, tableName: string) {
-    return get<ResourceTypes.SearchResourceResult[]>('/resource/list_role_res', {roleId})
+    return get<ResourceTypes.SearchResourceResult[]>('/resource/list_role_res', {roleId, tableName})
   },
 }

src/pages/sys/role/BindRes.vue

@@ -30,6 +30,24 @@
       <template #right-empty>
         <el-empty :image-size="60" description="暂无数据"/>
       </template>
+      <template #left-footer>
+        <ElSelect
+          v-model="resourceOrigin"
+          placeholder="资源类型"
+          @change="resourceOriginChangeHandle">
+          <ElOption label="菜单" value="sys_menu"/>
+          <ElOption label="端点" value="sys_endpoint"/>
+        </ElSelect>
+      </template>
+      <template #right-footer>
+        <ElSelect
+          v-model="resourceOrigin"
+          placeholder="资源类型"
+          @change="resourceOriginChangeHandle">
+          <ElOption label="菜单" value="sys_menu"/>
+          <ElOption label="端点" value="sys_endpoint"/>
+        </ElSelect>
+      </template>
     </ElTransfer>
     <template #footer>
       <ElButton @click="showDialog = false">取消</ElButton>
@@ -57,6 +75,21 @@ function filterMethod(query: string, item: TransferDataItem) {
   return Strings.isBlank(query) || (item as ResourceTypes.SearchResourceResult).memo!.includes(query) || (item as ResourceTypes.SearchResourceResult).memo!.includes(query)
 }
 
+const resourceOrigin = ref<'sys_menu' | 'sys_endpoint'>('sys_menu')
+
+function resourceOriginChangeHandle(val: 'sys_menu' | 'sys_endpoint') {
+  ResourceApi.listRoleRes(currentUserId.value, val)
+    .then(res => {
+      hadRes.value = res.data ?? []
+      rightValue.value = hadRes.value.map(it => it.id!)
+    })
+
+  ResourceApi.list(val)
+    .then(res => {
+      allRes.value = res.data ?? []
+    })
+}
+
 function submitHandler() {
   submiting.value = true
   RoleApi.bindRes({
@@ -75,15 +108,7 @@ defineExpose({
   open(roleId: string) {
     currentUserId.value = roleId
     showDialog.value = true
-    ResourceApi.listRoleRes(roleId)
+    resourceOriginChangeHandle(resourceOrigin.value)
-      .then(res => {
-        hadRes.value = res.data ?? []
-        rightValue.value = hadRes.value.map(it => it.id!)
-      })
-    ResourceApi.list()
-      .then(res => {
-        allRes.value = res.data ?? []
-      })
   },
 })
 </script>