5.0

sop-admin/sop-admin-frontend/src/views/serve/api/index.ts

@@ -1,29 +1,55 @@
 import { computed, ref } from "vue";
 import {
-  type PlusColumn,
-  useTable,
-  type PageInfo,
+  type ButtonsCallBackParams,
   type FieldValues,
-  type ButtonsCallBackParams
+  type PageInfo,
+  type PlusColumn,
+  useTable
 } from "plus-pro-components";
-import { type PageResult } from "@/model";
-import { http } from "@/utils/http";
 import { ElMessage } from "element-plus";
+import { StatusEnum } from "@/model/enums";
+import { api } from "@/api/serveApi";
 
-// 后端请求接口
-const apiUrl = {
-  page: "/serve/api/page",
-  add: "/serve/api/add",
-  update: "/serve/api/update",
-  del: "/serve/api/delete"
-};
+const isAdd = ref(false);
+
+// ========= 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,
@@ -34,14 +60,6 @@ export const {
 // 默认每页条数,默认10
 pageInfo.value.pageSize = 10;
 
-// 查询表单字段定义
-export const searchFormColumns: PlusColumn[] = [
-  {
-    label: "接口名称",
-    prop: "apiName"
-  }
-];
-
 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
   {
@@ -104,14 +122,14 @@ export const tableColumns: PlusColumn[] = [
     valueType: "select",
     options: [
       {
-        label: "禁用",
-        value: 0,
-        color: "red"
+        label: "启用",
+        value: StatusEnum.ENABLE,
+        color: "green"
       },
       {
-        label: "启用",
-        value: 1,
-        color: "green"
+        label: "禁用",
+        value: StatusEnum.DISABLE,
+        color: "red"
       }
     ]
   },
@@ -120,7 +138,7 @@ export const tableColumns: PlusColumn[] = [
     prop: "addTime"
   }
 ];
-
+// 表格按钮定义
 actionButtons.value = [
   {
     // 修改
@@ -131,73 +149,66 @@ actionButtons.value = [
     },
     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();
-      }
+      isAdd.value = false;
+      editFormData.value = Object.assign({}, params.row);
+      dlgTitle.value = "修改接口";
+      dlgShow.value = true;
     }
   },
   {
     // 删除
-    text: "删除",
+    text: row => (row.status === StatusEnum.ENABLE ? "禁用" : "启用"),
     code: "delete",
-    props: {
-      type: "danger"
-    },
     confirm: {
-      options: { draggable: true }
-    },
-    onClick(params: ButtonsCallBackParams) {
-      console.log(params, "onClick");
+      message: data => {
+        const opt = data.row.status === StatusEnum.ENABLE ? "禁用" : "启用";
+        return `确定${opt}吗？`;
+      },
+      options: { draggable: false }
     },
     onConfirm(params: ButtonsCallBackParams) {
-      console.log(params, "onConfirm");
-    },
-    onCancel(params: ButtonsCallBackParams) {
-      console.log(params, "onCancel");
+      const data = {
+        id: params.row.id,
+        status:
+          params.row.status === StatusEnum.ENABLE
+            ? StatusEnum.DISABLE
+            : StatusEnum.ENABLE
+      };
+      api.updateStatus(data).then(() => {
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        dlgShow.value = false;
+        search();
+      });
     }
   }
 ];
 
-// 弹窗表单
+// ========= dialog form =========
+
+// 弹窗显示
 export const dlgShow = ref(false);
-export const editFormData = ref<FieldValues>({
-  application: "",
-  status: 1,
-  isPermission: 0,
-  isNeedToken: 0
-});
+export const dlgTitle = ref("");
+// 表单值
+const editFormDataGen = () => {
+  return {
+    application: "",
+    status: 1,
+    isPermission: 0,
+    isNeedToken: 0
+  };
+};
+export const editFormData = ref<FieldValues>(editFormDataGen());
 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: "应用名称",
@@ -224,7 +235,7 @@ export const editFormColumns: PlusColumn[] = [
     prop: "remark",
     valueType: "textarea",
     fieldProps: {
-      maxlength: 10,
+      maxlength: 5000,
       showWordLimit: true,
       autosize: { minRows: 2, maxRows: 4 }
     }
@@ -282,12 +293,42 @@ export const editFormColumns: PlusColumn[] = [
   }
 ];
 
+// ========= event =========
+
+// 添加按钮事件
+export const handleAdd = () => {
+  isAdd.value = true;
+  editFormData.value = editFormDataGen();
+  dlgTitle.value = "新增接口";
+  dlgShow.value = true;
+};
+
+// 保存按钮事件,校验成功后触发
+export const handleSave = () => {
+  const postData = editFormData.value;
+  const pms = isAdd.value ? api.add(postData) : api.update(postData);
+  pms.then(() => {
+    ElMessage({
+      message: "保存成功",
+      type: "success"
+    });
+    dlgShow.value = false;
+    search();
+  });
+};
+
 // 点击查询按钮
 export const handleSearch = () => {
   pageInfo.value.page = 1;
   search();
 };
 
+// 分页事件
+export const handlePaginationChange = (_pageInfo: PageInfo): void => {
+  pageInfo.value = _pageInfo;
+  search();
+};
+
 // 查询
 const search = async () => {
   try {
@@ -304,12 +345,8 @@ const doSearch = async () => {
   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();
+  return api.page(data);
 };
+
 // 页面加载
 search();