diff --git a/sop-admin/sop-admin-backend/backend-boot/src/main/resources/application-test.properties b/sop-admin/sop-admin-backend/backend-boot/src/main/resources/application-test.properties index 53e5d0bc..bd1c17c0 100644 --- a/sop-admin/sop-admin-backend/backend-boot/src/main/resources/application-test.properties +++ b/sop-admin/sop-admin-backend/backend-boot/src/main/resources/application-test.properties @@ -1,2 +1,8 @@ - dubbo.registry.address=nacos://localhost:8848 + +mybatis.print-sql=true + +# mysql config +mysql.host=127.0.0.1:3306 +mysql.username=root +mysql.password=root diff --git a/sop-admin/sop-admin-frontend/src/views/serve/api/index.ts b/sop-admin/sop-admin-frontend/src/views/serve/api/index.ts index baa4b718..0c9c7850 100644 --- a/sop-admin/sop-admin-frontend/src/views/serve/api/index.ts +++ b/sop-admin/sop-admin-frontend/src/views/serve/api/index.ts @@ -1,4 +1,4 @@ -import { computed, ref } from "vue"; +import { computed, onMounted, ref } from "vue"; import { type ButtonsCallBackParams, type PageInfo, @@ -11,392 +11,416 @@ import { api } from "@/api/serveApi"; import { hasPerms } from "@/utils/auth"; import { PermCode } from "@/utils/perm"; -const isAdd = ref(false); +export function useServeApi() { + const isAdd = ref(false); -// ========= search form ========= + // ========= search form ========= -// 查询表单对象 -export const searchFormData = ref({ - apiName: "", - status: "", - pageIndex: 1, - pageSize: 10 -}); - -// 查询表单字段定义 -export const searchFormColumns: PlusColumn[] = [ - { - label: "接口名称", - prop: "apiName" - }, - { - label: "状态", - prop: "status", - width: 80, - valueType: "select", - options: [ - { - label: "启用", - value: StatusEnum.ENABLE, - color: "green" - }, - { - label: "禁用", - value: StatusEnum.DISABLE, - color: "red" - } - ] - } -]; - -// ========= table ========= - -// 表格对象 -export const { - tableData, - total, - pageInfo, - buttons: actionButtons -} = useTable(); -// 默认每页条数,默认10 -pageInfo.value.pageSize = 10; - -// 表格字段定义 -export const tableColumns: PlusColumn[] = [ - { - label: "所属应用", - prop: "application", - minWidth: 150 - }, - { - label: "接口名称", - prop: "apiName", - minWidth: 200 - }, - { - label: "版本号", - prop: "apiVersion", - minWidth: 80 - }, - { - label: "接口描述", - prop: "description", - minWidth: 100 - }, - { - label: "备注", - prop: "remark" - }, - { - label: "需要授权", - prop: "isPermission", - width: 100, - valueType: "select", - options: [ - { - label: "否", - value: 0 - }, - { - label: "是", - value: 1, - color: "green" - } - ] - }, - { - label: "需要token", - prop: "isNeedToken", - width: 100, - valueType: "select", - options: [ - { - label: "否", - value: 0 - }, - { - label: "是", - value: 1, - color: "green" - } - ] - }, - { - label: "公共参数", - prop: "hasCommonResponse", - width: 100, - valueType: "select", - options: [ - { - label: "无", - value: 0, - color: "red" - }, - { - label: "有", - value: 1 - } - ] - }, - { - label: "注册来源", - prop: "regSource", - width: 100, - valueType: "select", - options: [ - { - label: "系统", - value: 1, - color: "blue" - }, - { - label: "手动", - value: 2, - color: "green" - } - ] - }, - { - label: "状态", - prop: "status", - width: 80, - valueType: "select", - options: [ - { - label: "启用", - value: StatusEnum.ENABLE, - color: "green" - }, - { - label: "禁用", - value: StatusEnum.DISABLE, - color: "red" - } - ] - }, - { - width: 120, - label: "添加时间", - prop: "addTime" - }, - { - width: 120, - label: "修改时间", - prop: "updateTime" - } -]; -// 表格按钮权限 -const btnCode = PermCode.api; -// 表格按钮定义 -actionButtons.value = [ - { - // 修改 - text: "修改", - code: "edit", - props: { - type: "primary" - }, - onClick(params: ButtonsCallBackParams) { - isAdd.value = false; - editFormData.value = Object.assign({}, params.row); - dlgTitle.value = "修改接口"; - dlgShow.value = true; - }, - show: () => hasPerms(btnCode.update) - }, - { - // 启用/禁用 - text: row => (row.status === StatusEnum.ENABLE ? "禁用" : "启用"), - code: "delete", - confirm: { - message: data => { - const opt = data.row.status === StatusEnum.ENABLE ? "禁用" : "启用"; - return `确定${opt}吗?`; - }, - options: { draggable: false } - }, - onConfirm(params: ButtonsCallBackParams) { - const data = { - id: params.row.id, - status: - params.row.status === StatusEnum.ENABLE - ? StatusEnum.DISABLE - : StatusEnum.ENABLE - }; - api.updateStatus(data).then(() => { - ElMessage.success("修改成功"); - search(); - }); - }, - show: () => hasPerms(btnCode.updateStatus) - } -]; - -// ========= dialog form ========= - -// 弹窗显示 -export const dlgShow = ref(false); -export const dlgTitle = ref(""); -// 表单值 -const editFormDataGen = () => { - return { - application: "", + // 查询表单对象 + const searchFormData = ref({ apiName: "", - apiVersion: "", - status: 1, - isPermission: 0, - description: "", - regSource: RegSource.CUSTOM, - isNeedToken: 0 - }; -}; + status: "", + pageIndex: 1, + pageSize: 10 + }); -export const editFormData = ref(editFormDataGen()); -export const editFormRules = { - application: [{ required: true, message: "请输入应用名称" }], - apiName: [{ required: true, message: "请输入接口名称" }], - apiVersion: [{ required: true, message: "请输入版本号" }] -}; -export const isCustomRegSource = computed(() => { - return editFormData.value.regSource === RegSource.CUSTOM; -}); - -// 表单内容 -export const editFormColumns: PlusColumn[] = [ - { - label: "所属应用", - prop: "application", - valueType: "text" - }, - { - label: "接口名称", - prop: "apiName", - valueType: "text" - }, - { - label: "版本号", - prop: "apiVersion", - valueType: "text" - }, - { - label: "接口描述", - prop: "description", - valueType: "text" - }, - { - label: "备注", - prop: "remark", - valueType: "textarea", - fieldProps: { - maxlength: 5000, - showWordLimit: true, - autosize: { minRows: 2, maxRows: 4 } + // 查询表单字段定义 + const searchFormColumns: PlusColumn[] = [ + { + label: "接口名称", + prop: "apiName" + }, + { + label: "状态", + prop: "status", + width: 80, + valueType: "select", + options: [ + { + label: "启用", + value: StatusEnum.ENABLE, + color: "green" + }, + { + label: "禁用", + value: StatusEnum.DISABLE, + color: "red" + } + ] } - }, - { - label: "需要授权", - prop: "isPermission", - valueType: "radio", - options: [ - { - label: "否", - value: YesOrNoEnum.NO, - color: "red" - }, - { - label: "是", - value: YesOrNoEnum.YES, - color: "green" - } - ] - }, - { - label: "需要token", - prop: "isNeedToken", - valueType: "radio", - options: [ - { - label: "否", - value: YesOrNoEnum.NO, - color: "red" - }, - { - label: "是", - value: YesOrNoEnum.YES, - color: "green" - } - ] - }, - { - label: "状态", - prop: "status", - valueType: "radio", - options: [ - { - label: "禁用", - value: StatusEnum.DISABLE, - color: "red" - }, - { - label: "启用", - value: StatusEnum.ENABLE, - color: "green" - } - ] - } -]; + ]; -// ========= event ========= + // ========= table ========= -// 添加按钮事件 -export const handleAdd = () => { - isAdd.value = true; - editFormData.value = editFormDataGen(); - dlgTitle.value = "新增接口"; - dlgShow.value = true; -}; + // 表格对象 + const { + tableData, + total, + pageInfo, + buttons: actionButtons + } = useTable(); + // 默认每页条数,默认10 + pageInfo.value.pageSize = 10; -// 保存按钮事件,校验成功后触发 -export const handleSave = () => { - const postData = editFormData.value; - const pms = isAdd.value ? api.add(postData) : api.update(postData); - pms.then(() => { - ElMessage.success("保存成功"); - dlgShow.value = false; + // 表格字段定义 + const tableColumns: PlusColumn[] = [ + { + label: "所属应用", + prop: "application", + minWidth: 150 + }, + { + label: "接口名称", + prop: "apiName", + minWidth: 200 + }, + { + label: "版本号", + prop: "apiVersion", + minWidth: 80 + }, + { + label: "接口描述", + prop: "description", + minWidth: 100 + }, + { + label: "备注", + prop: "remark" + }, + { + label: "需要授权", + prop: "isPermission", + width: 100, + valueType: "select", + options: [ + { + label: "否", + value: 0 + }, + { + label: "是", + value: 1, + color: "green" + } + ] + }, + { + label: "需要token", + prop: "isNeedToken", + width: 100, + valueType: "select", + options: [ + { + label: "否", + value: 0 + }, + { + label: "是", + value: 1, + color: "green" + } + ] + }, + { + label: "公共参数", + prop: "hasCommonResponse", + width: 100, + valueType: "select", + options: [ + { + label: "无", + value: 0, + color: "red" + }, + { + label: "有", + value: 1 + } + ] + }, + { + label: "注册来源", + prop: "regSource", + width: 100, + valueType: "select", + options: [ + { + label: "系统", + value: 1, + color: "blue" + }, + { + label: "手动", + value: 2, + color: "green" + } + ] + }, + { + label: "状态", + prop: "status", + width: 80, + valueType: "select", + options: [ + { + label: "启用", + value: StatusEnum.ENABLE, + color: "green" + }, + { + label: "禁用", + value: StatusEnum.DISABLE, + color: "red" + } + ] + }, + { + width: 120, + label: "添加时间", + prop: "addTime" + }, + { + width: 120, + label: "修改时间", + prop: "updateTime" + } + ]; + // 表格按钮权限 + const btnCode = PermCode.api; + // 表格按钮定义 + actionButtons.value = [ + { + // 修改 + text: "修改", + code: "edit", + props: { + type: "primary" + }, + onClick(params: ButtonsCallBackParams) { + isAdd.value = false; + editFormData.value = Object.assign({}, params.row); + dlgTitle.value = "修改接口"; + dlgShow.value = true; + }, + show: () => hasPerms(btnCode.update) + }, + { + // 启用/禁用 + text: row => (row.status === StatusEnum.ENABLE ? "禁用" : "启用"), + code: "delete", + confirm: { + message: data => { + const opt = data.row.status === StatusEnum.ENABLE ? "禁用" : "启用"; + return `确定${opt}吗?`; + }, + options: { draggable: false } + }, + onConfirm(params: ButtonsCallBackParams) { + const data = { + id: params.row.id, + status: + params.row.status === StatusEnum.ENABLE + ? StatusEnum.DISABLE + : StatusEnum.ENABLE + }; + api.updateStatus(data).then(() => { + ElMessage.success("修改成功"); + search(); + }); + }, + show: () => hasPerms(btnCode.updateStatus) + } + ]; + + // ========= dialog form ========= + + // 弹窗显示 + const dlgShow = ref(false); + const dlgTitle = ref(""); + // 表单值 + const editFormDataGen = () => { + return { + application: "", + apiName: "", + apiVersion: "", + status: 1, + isPermission: 0, + description: "", + regSource: RegSource.CUSTOM, + isNeedToken: 0 + }; + }; + + const editFormData = ref(editFormDataGen()); + const editFormRules = { + application: [{ required: true, message: "请输入应用名称" }], + apiName: [{ required: true, message: "请输入接口名称" }], + apiVersion: [{ required: true, message: "请输入版本号" }] + }; + const isCustomRegSource = computed(() => { + return editFormData.value.regSource === RegSource.CUSTOM; + }); + + // 表单内容 + const editFormColumns: PlusColumn[] = [ + { + label: "所属应用", + prop: "application", + valueType: "text" + }, + { + label: "接口名称", + prop: "apiName", + valueType: "text" + }, + { + label: "版本号", + prop: "apiVersion", + valueType: "text" + }, + { + label: "接口描述", + prop: "description", + valueType: "text" + }, + { + label: "备注", + prop: "remark", + valueType: "textarea", + fieldProps: { + maxlength: 5000, + showWordLimit: true, + autosize: { minRows: 2, maxRows: 4 } + } + }, + { + label: "需要授权", + prop: "isPermission", + valueType: "radio", + options: [ + { + label: "否", + value: YesOrNoEnum.NO, + color: "red" + }, + { + label: "是", + value: YesOrNoEnum.YES, + color: "green" + } + ] + }, + { + label: "需要token", + prop: "isNeedToken", + valueType: "radio", + options: [ + { + label: "否", + value: YesOrNoEnum.NO, + color: "red" + }, + { + label: "是", + value: YesOrNoEnum.YES, + color: "green" + } + ] + }, + { + label: "状态", + prop: "status", + valueType: "radio", + options: [ + { + label: "禁用", + value: StatusEnum.DISABLE, + color: "red" + }, + { + label: "启用", + value: StatusEnum.ENABLE, + color: "green" + } + ] + } + ]; + + // ========= event ========= + + // 添加按钮事件 + const handleAdd = () => { + isAdd.value = true; + editFormData.value = editFormDataGen(); + dlgTitle.value = "新增接口"; + dlgShow.value = true; + }; + + // 保存按钮事件,校验成功后触发 + const handleSave = () => { + const postData = editFormData.value; + const pms = isAdd.value ? api.add(postData) : api.update(postData); + pms.then(() => { + ElMessage.success("保存成功"); + dlgShow.value = false; + search(); + }); + }; + + // 点击查询按钮 + const handleSearch = () => { + pageInfo.value.page = 1; + search(); + }; + + // 分页事件 + const handlePaginationChange = (_pageInfo: PageInfo): void => { + pageInfo.value = _pageInfo; + search(); + }; + + // 查询 + const search = async () => { + try { + const { data } = await doSearch(); + tableData.value = data.list; + total.value = data.total; + } catch (error) {} + }; + // 请求接口 + const doSearch = async () => { + // 查询参数 + const data = searchFormData.value; + // 添加分页参数 + data.pageIndex = pageInfo.value.page; + data.pageSize = pageInfo.value.pageSize; + + return api.page(data); + }; + + // 页面加载 + onMounted(() => { search(); }); -}; -// 点击查询按钮 -export const handleSearch = () => { - pageInfo.value.page = 1; - search(); -}; - -// 分页事件 -export const handlePaginationChange = (_pageInfo: PageInfo): void => { - pageInfo.value = _pageInfo; - search(); -}; - -// 查询 -export const search = async () => { - try { - const { data } = await doSearch(); - tableData.value = data.list; - total.value = data.total; - } catch (error) {} -}; -// 请求接口 -const doSearch = async () => { - // 查询参数 - const data = searchFormData.value; - // 添加分页参数 - data.pageIndex = pageInfo.value.page; - data.pageSize = pageInfo.value.pageSize; - - return api.page(data); -}; - -// 页面加载 -search(); + return { + actionButtons, + dlgShow, + dlgTitle, + editFormColumns, + editFormData, + editFormRules, + handleAdd, + handlePaginationChange, + handleSave, + handleSearch, + isCustomRegSource, + pageInfo, + searchFormColumns, + searchFormData, + tableColumns, + tableData, + total + }; +} diff --git a/sop-admin/sop-admin-frontend/src/views/serve/api/index.vue b/sop-admin/sop-admin-frontend/src/views/serve/api/index.vue index 1dc44661..f0a1b951 100644 --- a/sop-admin/sop-admin-frontend/src/views/serve/api/index.vue +++ b/sop-admin/sop-admin-frontend/src/views/serve/api/index.vue @@ -1,5 +1,6 @@