mirror of
https://gitee.com/durcframework/SOP.git
synced 2025-08-11 21:57:56 +08:00
5.0
This commit is contained in:
六如
315
sop-admin/sop-admin-frontend/src/views/serve/api/index.ts
Normal file
315
sop-admin/sop-admin-frontend/src/views/serve/api/index.ts
Normal file
@@ -0,0 +1,315 @@
|
||||
import { computed, ref } from "vue";
|
||||
import {
|
||||
type PlusColumn,
|
||||
useTable,
|
||||
type PageInfo,
|
||||
type FieldValues,
|
||||
type ButtonsCallBackParams
|
||||
} from "plus-pro-components";
|
||||
import { type PageResult } from "@/model";
|
||||
import { http } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// 后端请求接口
|
||||
const apiUrl = {
|
||||
page: "/serve/api/page",
|
||||
add: "/serve/api/add",
|
||||
update: "/serve/api/update",
|
||||
del: "/serve/api/delete"
|
||||
};
|
||||
|
||||
// 查询表单对象
|
||||
export const searchFormData = ref({
|
||||
apiName: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 表格对象
|
||||
export const {
|
||||
tableData,
|
||||
total,
|
||||
pageInfo,
|
||||
buttons: actionButtons
|
||||
} = useTable<any[]>();
|
||||
// 默认每页条数,默认10
|
||||
pageInfo.value.pageSize = 10;
|
||||
|
||||
// 查询表单字段定义
|
||||
export const searchFormColumns: PlusColumn[] = [
|
||||
{
|
||||
label: "接口名称",
|
||||
prop: "apiName"
|
||||
}
|
||||
];
|
||||
|
||||
// 表格字段定义
|
||||
export const tableColumns: PlusColumn[] = [
|
||||
{
|
||||
label: "应用名称",
|
||||
prop: "application"
|
||||
},
|
||||
{
|
||||
label: "接口名称",
|
||||
prop: "apiName"
|
||||
},
|
||||
{
|
||||
label: "版本号",
|
||||
prop: "apiVersion",
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
label: "接口描述",
|
||||
prop: "description"
|
||||
},
|
||||
{
|
||||
label: "需要授权",
|
||||
prop: "isPermission",
|
||||
width: 100,
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "否",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "是",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "需要token",
|
||||
prop: "isNeedToken",
|
||||
width: 100,
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "否",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "是",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 80,
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "禁用",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "启用",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "添加时间",
|
||||
prop: "addTime"
|
||||
}
|
||||
];
|
||||
|
||||
actionButtons.value = [
|
||||
{
|
||||
// 修改
|
||||
text: "修改",
|
||||
code: "edit",
|
||||
props: {
|
||||
type: "primary"
|
||||
},
|
||||
show: computed(() => true),
|
||||
onClick(params: ButtonsCallBackParams) {
|
||||
if (params?.formRefs) {
|
||||
// isEdit v0.1.8 新增
|
||||
const isEdit = params.formRefs[0].isEdit.value;
|
||||
isEdit
|
||||
? params.formRefs[0]?.stopCellEdit()
|
||||
: params.formRefs[0]?.startCellEdit();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 删除
|
||||
text: "删除",
|
||||
code: "delete",
|
||||
props: {
|
||||
type: "danger"
|
||||
},
|
||||
confirm: {
|
||||
options: { draggable: true }
|
||||
},
|
||||
onClick(params: ButtonsCallBackParams) {
|
||||
console.log(params, "onClick");
|
||||
},
|
||||
onConfirm(params: ButtonsCallBackParams) {
|
||||
console.log(params, "onConfirm");
|
||||
},
|
||||
onCancel(params: ButtonsCallBackParams) {
|
||||
console.log(params, "onCancel");
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 弹窗表单
|
||||
export const dlgShow = ref(false);
|
||||
export const editFormData = ref<FieldValues>({
|
||||
application: "",
|
||||
status: 1,
|
||||
isPermission: 0,
|
||||
isNeedToken: 0
|
||||
});
|
||||
export const editFormRules = {
|
||||
application: [{ required: true, message: "请输入应用名称" }],
|
||||
apiName: [{ required: true, message: "请输入接口名称" }],
|
||||
apiVersion: [{ required: true, message: "请输入版本号" }],
|
||||
description: [{ required: true, message: "请输入接口描述" }]
|
||||
};
|
||||
export const handleDlgOpen = () => {
|
||||
dlgShow.value = true;
|
||||
};
|
||||
|
||||
export const handleSave = () => {
|
||||
http
|
||||
.post<PageResult, any>(apiUrl.add, { data: editFormData.value })
|
||||
.then(resp => {
|
||||
if (resp.success) {
|
||||
ElMessage({
|
||||
message: "保存成功",
|
||||
type: "success"
|
||||
});
|
||||
dlgShow.value = false;
|
||||
search();
|
||||
} else {
|
||||
console.log(resp);
|
||||
ElMessage.error(`保存失败:${resp.msg}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const editFormColumns: PlusColumn[] = [
|
||||
{
|
||||
label: "应用名称",
|
||||
prop: "application",
|
||||
valueType: "copy"
|
||||
},
|
||||
{
|
||||
label: "接口名称",
|
||||
prop: "apiName",
|
||||
valueType: "copy"
|
||||
},
|
||||
{
|
||||
label: "版本号",
|
||||
prop: "apiVersion",
|
||||
valueType: "copy"
|
||||
},
|
||||
{
|
||||
label: "接口描述",
|
||||
prop: "description",
|
||||
valueType: "copy"
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "需要授权",
|
||||
prop: "isPermission",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "否",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "是",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "需要token",
|
||||
prop: "isNeedToken",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "否",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "是",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "禁用",
|
||||
value: 0,
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "启用",
|
||||
value: 1,
|
||||
color: "green"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 点击查询按钮
|
||||
export const handleSearch = () => {
|
||||
pageInfo.value.page = 1;
|
||||
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 http.get<PageResult, any>(apiUrl.page, { params: data });
|
||||
};
|
||||
// 分页事件
|
||||
export const handlePaginationChange = (_pageInfo: PageInfo): void => {
|
||||
pageInfo.value = _pageInfo;
|
||||
search();
|
||||
};
|
||||
// 页面加载
|
||||
search();
|
||||
Reference in New Issue
Block a user