refactor: ♻️ 更改了部分命名规则，调整部分内容

增加请求参数对于数组的判断和处理，编辑使用popup，页面优化
2024-11-24 02:43:04 +08:00
parent 1bedd90d81
commit 8017903c1e
7 changed files with 221 additions and 343 deletions
--- a/src/pages.json
+++ b/src/pages.json
@@ -55,12 +55,6 @@
        "navigationBarTitleText": "系统配置"
      }
    },
-    {
-      "path": "pages/work/config/edit",
-      "style": {
-        "navigationBarTitleText": "新增修改配置页面"
-      }
-    },
    {
      "path": "pages/work/notice/index",
      "style": {
--- a/src/pages/work/config/edit.vue
+++ b/src/pages/work/config/edit.vue
@@ -1,217 +0,0 @@
-<template>
-  <view class="form-container">
-    <wd-form ref="formRef" :model="form">
-      <wd-cell-group border>
-        <wd-input
-          v-model="form.configName"
-          label="配置名称"
-          label-width="100px"
-          label-align="right"
-          prop="configName"
-          clearable
-          placeholder="请输入配置名称"
-          :rules="[{ required: true, message: '请填写配置名称' }]"
-        />
-        <wd-input
-          v-model="form.configKey"
-          label="配置键"
-          label-width="100px"
-          label-align="right"
-          prop="configKey"
-          clearable
-          placeholder="请输入配置键"
-          :rules="[{ required: true, message: '请填写配置键' }]"
-        />
-        <wd-input
-          v-model="form.configValue"
-          label="配置值"
-          label-width="100px"
-          label-align="right"
-          prop="configValue"
-          clearable
-          placeholder="请输入配置值"
-          :rules="[{ required: true, message: '请填写配置值' }]"
-        />
-        <wd-textarea
-          v-model="form.remark"
-          prop="remark"
-          label="配置描述"
-          label-align="right"
-          clearable
-          :maxlength="100"
-          show-word-limit
-          label-width="100px"
-          placeholder="请输入配置描述"
-        />
-      </wd-cell-group>
-      <view class="footer">
-        <view class="button-container">
-          <wd-button type="info" size="large" block @click="handleBack">返回</wd-button>
-          <wd-button
-            type="primary"
-            size="large"
-            native-type="submit"
-            :disabled="subDisable"
-            block
-            @click="handleSubmit"
-          >
-            提交
-          </wd-button>
-        </view>
-      </view>
-    </wd-form>
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref, onMounted } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import ConfigAPI, { ConfigForm, ConfigPageVO } from "@/api/system/config";
-import { FormInstance } from "wot-design-uni/components/wd-form/types";
-
-const form = ref<ConfigForm>({
-  id: undefined,
-  configName: "",
-  configKey: "",
-  configValue: "",
-  remark: "",
-});
-
-const formRef = ref<FormInstance>();
-const subDisable = ref(false);
-
-/**
- * 返回
- */
-const handleBack = () => {
-  uni.navigateBack();
-};
-
-/**
- * 提交
- */
-const handleSubmit = () => {
-  subDisable.value = true;
-  if (formRef.value) {
-    formRef.value!.validate().then(({ valid, errors }) => {
-      if (valid) {
-        if (form.value.id) {
-          // 如果 id 不为 null，调用更新 API
-          ConfigAPI.update(form.value.id as number, form.value)
-            .then((response) => {
-              uni.showToast({
-                title: "更新成功",
-                icon: "success",
-                duration: 2000,
-              });
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 2000);
-            })
-            .catch((error) => {
-              console.error("更新失败:", error);
-              subDisable.value = false;
-            });
-        } else {
-          // 如果 id 为 null，调用新增 API
-          ConfigAPI.add(form.value)
-            .then((response) => {
-              uni.showToast({
-                title: "提交成功",
-                icon: "success",
-                duration: 2000,
-              });
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 2000);
-            })
-            .catch((error) => {
-              console.error("提交失败:", error);
-              subDisable.value = false;
-            });
-        }
-      } else {
-        uni.showToast({
-          title: "请按照要求填写表单",
-          icon: "error",
-          duration: 2000,
-        });
-        subDisable.value = false;
-      }
-    });
-  }
-};
-
-// 定义接收的参数
-const item = ref<ConfigPageVO | null>(null);
-
-// 获取传递的参数
-onLoad((options) => {
-  const title = options && options.item ? "编辑配置" : "新增配置";
-  uni.setNavigationBarTitle({
-    title: title,
-  });
-  if (options && options.item) {
-    try {
-      item.value = JSON.parse(decodeURIComponent(options.item));
-      if (item.value) {
-        form.value = {
-          id: item.value.id,
-          configName: item.value.configName,
-          configKey: item.value.configKey,
-          configValue: item.value.configValue,
-          remark: item.value.remark,
-        };
-      }
-    } catch (error) {
-      console.error("解析参数失败:", error);
-    }
-  }
-});
-</script>
-
-<style scoped>
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  padding: 40rpx;
-  background: #f8f8f8;
-}
-
-.form-container {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 40rpx;
-  background: #fff;
-  border-radius: 8rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
-}
-
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.button-container {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.button-container .wd-button {
-  flex: 1;
-  margin: 0 5px; /* 调整按钮之间的间距 */
-}
-
-.wd-cell-group {
-  margin-bottom: 20rpx;
-}
-
-.wd-button {
-  width: 100%;
-  margin-top: 10rpx; /* 调整按钮间距 */
-}
-</style>
--- a/src/pages/work/config/index.vue
+++ b/src/pages/work/config/index.vue
@@ -12,8 +12,10 @@
            placeholder="请输入关键字"
          />
          <view class="flex flex-row items-center mb-20rpx">
-            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="search()">查询</wd-button>
-            <wd-button size="medium" type="info" @click="reset">重置</wd-button>
+            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleQuery()">
+              查询
+            </wd-button>
+            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
          </view>
        </view>
      </wd-drop-menu-item>
@@ -57,9 +59,7 @@
          </wd-row>

          <template #footer>
-            <view class="flex justify-end pr-20rpx">
-              <wd-button size="small" type="primary" @click="handleAction(item)">操作</wd-button>
-            </view>
+            <wd-button size="small" type="primary" @click="handleAction(item)">···</wd-button>
          </template>
        </wd-card>
      </view>
@@ -69,10 +69,55 @@
    <wd-loadmore :state="state" @reload="handleQuery" />

    <!-- 底部按钮 -->
-    <view class="fixed bottom-0 left-0 right-0 flex justify-around p-20rpx bg-#fff">
-      <wd-button size="medium" type="primary" @click="add">添加</wd-button>
+    <view class="fixed bottom-0 w-full flex justify-around items-center p-20rpx bg-#fff">
+      <wd-button size="medium" type="primary" @click="handleOpenDialog">添加</wd-button>
      <wd-button size="medium" type="success" @click="refreshCache">刷新缓存</wd-button>
    </view>
+
+    <wd-popup v-model="showEditPopup" position="bottom">
+      <view class="p-20rpx">
+        <wd-form ref="formRef" :model="form">
+          <wd-input
+            v-model="form.configName"
+            label="配置名称"
+            type="text"
+            placeholder="请输入配置名称"
+            :rules="[{ required: true, message: '请填写配置名称' }]"
+          />
+          <wd-input
+            v-model="form.configKey"
+            label="配置键名"
+            type="text"
+            placeholder="请输入配置键名"
+            :rules="[{ required: true, message: '请填写配置键' }]"
+          />
+          <wd-input
+            v-model="form.configValue"
+            label="配置键值"
+            type="text"
+            placeholder="请输入配置键值"
+            :rules="[{ required: true, message: '请填写配置值' }]"
+          />
+          <wd-textarea
+            v-model="form.remark"
+            prop="remark"
+            label="配置描述"
+            label-align="right"
+            clearable
+            :maxlength="100"
+            show-word-limit
+            label-width="100px"
+            placeholder="请输入配置描述"
+          />
+        </wd-form>
+        <view class="flex justify-around mt-20rpx">
+          <wd-button @click="showEditPopup = false">取消</wd-button>
+          <wd-button type="primary" native-type="submit" :loading="loading" @click="submitForm">
+            确定
+          </wd-button>
+        </view>
+      </view>
+    </wd-popup>
  </view>
 </template>

@@ -80,7 +125,8 @@
 import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
 import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
-import { debounce } from "@/utils/commonUtil";
+import { FormInstance } from "wot-design-uni/components/wd-form/types";
+import { debounce } from "@/utils";
 const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
 const total = ref(0);
 const queryParams = reactive<ConfigPageQuery>({
@@ -90,6 +136,9 @@ const queryParams = reactive<ConfigPageQuery>({
 });
 // 系统配置表格数据
 const pageData = ref<ConfigPageVO[]>([]);
+const formRef = ref<FormInstance>();
+
+const loading = ref(false);
 /**
 * 搜索栏
 */
@@ -98,17 +147,57 @@ const dropMenu = ref<DropMenuItemExpose>();
 /**
 * 搜索
 */
-function search() {
+function handleQuery() {
  pageData.value = [];
  dropMenu.value?.close();
  queryParams.pageNum = 1;
-  handleQuery();
+  loadmore();
+}
+
+const showEditPopup = ref(false);
+const form = ref<ConfigForm>({});
+
+// 修改编辑函数
+function handleEdit(id: number) {
+  ConfigAPI.getFormData(id).then((data) => {
+    Object.assign(form.value, data);
+    // 显示弹窗
+    showEditPopup.value = true;
+  });
+}
+
+// 提交表单
+async function submitForm() {
+  loading.value = true;
+  try {
+    if (formRef.value) {
+      formRef.value!.validate().then(async ({ valid, errors }) => {
+        if (valid) {
+          if (form.value.id) {
+            await ConfigAPI.update(form.value.id, form.value);
+            uni.showToast({ title: "更新成功", icon: "success" });
+          } else {
+            await ConfigAPI.add(form.value);
+            uni.showToast({ title: "添加成功", icon: "success" });
+          }
+          showEditPopup.value = false;
+          handleQuery(); // 刷新列表
+        } else {
+          uni.showToast({ title: "请检查表单", icon: "error" });
+          loading.value = false;
+        }
+      });
+    }
+  } catch (error) {
+    uni.showToast({ title: "操作失败", icon: "error" });
+    loading.value = false;
+  }
 }

 /**
 * 重置搜索条件
 */
-function reset() {
+function handleReset() {
  queryParams.pageNum = 1;
  queryParams.keywords = "";
  pageData.value = [];
@@ -125,9 +214,9 @@ onReachBottom(() => {
 });

 /**
- * 查询
+ * 加载更多
 */
-function handleQuery() {
+function loadmore() {
  state.value = "loading";
  ConfigAPI.getPage(queryParams)
    .then((data) => {
@@ -146,10 +235,13 @@ function handleQuery() {
 /**
 * 添加
 */
-function add() {
-  uni.navigateTo({
-    url: "/pages/work/config/edit",
-  });
+function handleOpenDialog() {
+  form.id = undefined;
+  form.configName = "";
+  form.configKey = "";
+  form.configValue = "";
+  form.remark = "";
+  showEditPopup.value = true;
 }

 /**
@@ -165,16 +257,6 @@ const refreshCache = debounce(() => {
  });
 }, 1000);

-/**
- * 编辑
- */
-function handleEdit(item: ConfigPageVO) {
-  // 直接传递整个 item 对象
-  uni.navigateTo({
-    url: "/pages/work/config/edit?item=" + encodeURIComponent(JSON.stringify(item)),
-  });
-}
-
 /**
 * 删除
 */
@@ -204,7 +286,7 @@ function handleAction(item: ConfigPageVO) {
    success: ({ tapIndex }) => {
      switch (actions[tapIndex]) {
        case "编辑":
-          handleEdit(item);
+          handleEdit(item.id || 0);
          break;
        case "删除":
          handleDelete(item);
--- a/src/pages/work/notice/detail.vue
+++ b/src/pages/work/notice/detail.vue
@@ -8,18 +8,19 @@
        </h2>
        <div class="notice-meta">
          <div class="meta-row">
-            <span>发布人：{{ noticeDetail.publisherName }}</span>
-            <wd-divider direction="vertical" />
-            <span>发布时间：{{ formatDate(noticeDetail.publishTime ?? "") }}</span>
-          </div>
-          <div class="meta-row">
-            <span class="priority-wrapper">
+            <span>
              优先级：
-              <wd-tag :type="getLevelType(noticeDetail.level) as TagType">
+              <wd-tag :type="getLevelType(noticeDetail.level)">
                {{ getLevelText(noticeDetail.level) }}
              </wd-tag>
            </span>
          </div>
+          <div class="meta-row">
+            <span>发布人：{{ noticeDetail.publisherName }}</span>
+          </div>
+          <div class="meta-row">
+            <span>发布时间：{{ noticeDetail.publishTime }}</span>
+          </div>
        </div>
      </div>
      <wd-divider />
@@ -29,10 +30,8 @@
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
 import type { NoticeDetailVO } from "@/api/system/notice";
 import NoticeAPI from "@/api/system/notice";
-import { TagType } from "wot-design-uni/components/wd-tag/types";

 const noticeDetail = ref<NoticeDetailVO>({});

@@ -44,8 +43,8 @@ const getLevelText = (level?: string) => {
  };
  return textMap[level || "L"];
 };
-const getLevelType = (level?: string) => {
-  const typeMap: Record<string, string> = {
+const getLevelType = (level?: string): "primary" | "warning" | "danger" => {
+  const typeMap: Record<string, "primary" | "warning" | "danger"> = {
    L: "primary",
    M: "warning",
    H: "danger",
@@ -67,15 +66,6 @@ const getNoticeDetail = async (id: string) => {
  }
 };

-/**
- * 格式化日期
- * @param date 日期
- * @returns 格式化后的日期
- */
-const formatDate = (date: string | Date): string => {
-  return date ? date.toString().split(" ")[0] : "-";
-};
-
 onLoad((options: any) => {
  if (options && options.id) {
    getNoticeDetail(options.id as string);
--- a/src/pages/work/notice/index.vue
+++ b/src/pages/work/notice/index.vue
@@ -12,10 +12,10 @@
          />

          <view class="flex flex-row items-center mb-20rpx">
-            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleSearch()">
+            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleQuery()">
              查询
            </wd-button>
-            <wd-button size="medium" type="info" @click="reset">重置</wd-button>
+            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
          </view>
        </view>
      </wd-drop-menu-item>
@@ -33,33 +33,15 @@
          </view>
        </template>
        <wd-row class="mb-20rpx">
-          <wd-col :span="12">
-            <wd-col :span="12">
+          <wd-col :span="24">
+            <wd-col :span="8">
              <view>通告目标类型：</view>
            </wd-col>
-            <wd-col :span="12">
+            <wd-col :span="16">
              <view>{{ item.targetType === 1 ? "指定" : "全体" }}</view>
            </wd-col>
          </wd-col>
-          <wd-col v-if="item.publishStatus === 1" :span="12">
-            <wd-col :span="8">
-              <view>发布时间：</view>
-            </wd-col>
-            <wd-col :span="16">
-              <view>{{ formatDate(item.publishTime) }}</view>
-            </wd-col>
-          </wd-col>
-          <wd-col v-else :span="12">
-            <wd-col :span="8">
-              <view>撤回时间：</view>
-            </wd-col>
-            <wd-col :span="16">
-              <view>{{ formatDate(item.revokeTime) }}</view>
-            </wd-col>
-          </wd-col>
-        </wd-row>
-        <wd-row class="mb-20rpx">
-          <wd-col :span="12">
+          <wd-col :span="24">
            <wd-col :span="8">
              <view>发布人：</view>
            </wd-col>
@@ -67,7 +49,23 @@
              <view>{{ item.publisherName || "-" }}</view>
            </wd-col>
          </wd-col>
-          <wd-col :span="12">
+          <wd-col v-if="item.publishStatus === 1" :span="24">
+            <wd-col :span="8">
+              <view>发布时间：</view>
+            </wd-col>
+            <wd-col :span="16">
+              <view>{{ formatDate(item.publishTime) }}</view>
+            </wd-col>
+          </wd-col>
+          <wd-col v-else :span="24">
+            <wd-col :span="8">
+              <view>撤回时间：</view>
+            </wd-col>
+            <wd-col :span="16">
+              <view>{{ formatDate(item.revokeTime) }}</view>
+            </wd-col>
+          </wd-col>
+          <wd-col :span="24">
            <wd-col :span="8">
              <view>紧急程度：</view>
            </wd-col>
@@ -78,10 +76,7 @@
        </wd-row>

        <template #footer>
-          <view class="flex justify-end gap-20rpx">
-            <wd-button size="small" plain @click="handleView(item)">查看详情</wd-button>
-            <wd-button size="small" type="primary" @click="handleAction(item)">更多操作</wd-button>
-          </view>
+          <wd-button size="small" type="primary" @click="handleAction(item)">···</wd-button>
        </template>
      </wd-card>
    </view>
@@ -92,20 +87,12 @@
 </template>

 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
 import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
 import NoticeAPI, { NoticePageQuery, NoticePageVO } from "@/api/system/notice";
 const loadState = ref<LoadMoreState>("finished");
 const dataList = ref<NoticePageVO[]>([]);
 const total = ref(0);
-// 添加新的响应式数据
-const statusOptions = [
-  { value: "", label: "全部状态" },
-  { value: 0, label: "未发布" },
-  { value: 1, label: "已发布" },
-  { value: -1, label: "已撤回" },
-];

 // 修改查询参数
 const queryParams = ref<NoticePageQuery>({
@@ -116,14 +103,14 @@ const queryParams = ref<NoticePageQuery>({

 // 添加搜索处理函数
 const dropMenu = ref<DropMenuItemExpose>();
-const handleSearch = () => {
+const handleQuery = () => {
  queryParams.value.pageNum = 1;
  loadMore();
  dropMenu.value?.close();
 };

 // 重置
-const reset = () => {
+const handleReset = () => {
  queryParams.value = { pageNum: 1, pageSize: 10 };
  dropMenu.value?.close();
  loadMore();
@@ -201,13 +188,13 @@ const handleView = (notice: NoticePageVO) => {

 // 操作按钮
 const handleAction = (notice: NoticePageVO) => {
-  const actions = notice.publishStatus !== 1 ? ["删除", "发布"] : ["撤回"];
+  const actions = notice.publishStatus !== 1 ? ["查看", "删除", "发布"] : ["查看", "撤回"];
  uni.showActionSheet({
    itemList: actions,
    success: ({ tapIndex }) => {
      switch (actions[tapIndex]) {
-        case "编辑":
-          handleEdit(notice);
+        case "查看":
+          handleView(notice);
          break;
        case "删除":
          handleDelete(notice);
@@ -216,42 +203,13 @@ const handleAction = (notice: NoticePageVO) => {
          handlePublish(notice);
          break;
        case "撤回":
-          uni.showModal({
-            title: "提示",
-            content: "确定要撤回该通知吗？",
-            success: async (res) => {
-              if (res.confirm) {
-                try {
-                  await NoticeAPI.revoke(Number(notice.id));
-                  uni.showToast({
-                    title: "撤回成功",
-                    icon: "success",
-                  });
-                  // 刷新列表
-                  queryParams.value.pageNum = 1;
-                  loadMore();
-                } catch (error) {
-                  uni.showToast({
-                    title: "撤回失败",
-                    icon: "error",
-                  });
-                }
-              }
-            },
-          });
+          handleRevoke(notice);
          break;
      }
    },
  });
 };

-// 编辑
-const handleEdit = (notice: NoticePageVO) => {
-  uni.navigateTo({
-    url: `/pages/work/notice/edit?id=${notice.id}`,
-  });
-};
-
 // 删除
 const handleDelete = (notice: NoticePageVO) => {
  uni.showModal({
@@ -294,6 +252,33 @@ const handlePublish = (notice: NoticePageVO) => {
  });
 };

+// 撤回
+const handleRevoke = (notice: NoticePageVO) => {
+  uni.showModal({
+    title: "提示",
+    content: "确定要撤回该通知吗？",
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          await NoticeAPI.revoke(Number(notice.id));
+          uni.showToast({
+            title: "撤回成功",
+            icon: "success",
+          });
+          // 刷新列表
+          queryParams.value.pageNum = 1;
+          loadMore();
+        } catch (error) {
+          uni.showToast({
+            title: "撤回失败",
+            icon: "error",
+          });
+        }
+      }
+    },
+  });
+};
+
 onReachBottom(() => {
  if (loadState.value === "loading" || loadState.value === "finished") return;
  loadMore();
--- a/src/utils/commonUtil.ts
+++ b/src/utils/commonUtil.ts
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -16,6 +16,7 @@ export default function request<T>(options: UniApp.RequestOptions): Promise<T> {
        ...options.header,
        Authorization: getToken() ? `Bearer ${getToken()}` : "",
      },
+      data: handleData(options.data),
      success: (response) => {
        console.log("success response", response);
        const resData = response.data as ResponseData<T>;
@@ -59,3 +60,46 @@ export default function request<T>(options: UniApp.RequestOptions): Promise<T> {
    });
  });
 }
+
+/**
+ * 处理请求数据
+ * @param data 请求数据
+ * @returns 处理后的数据
+ */
+function handleData(data: any) {
+  if (!data) return data;
+
+  // 如果是对象，遍历处理每个属性
+  if (typeof data === "object") {
+    const result: Record<string, any> = {};
+    for (const key in data) {
+      const value = data[key];
+      if (Array.isArray(value)) {
+        let res = handleArray(value);
+        if (res) {
+          result[key] = res;
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+
+  return data;
+}
+
+/**
+ * 处理数组
+ * @param value 数组
+ * @returns 逗号分隔字符串
+ */
+function handleArray(value: any[]) {
+  let str = "";
+  for (const item of value) {
+    if (item != 0 && item) {
+      str += `${item},`;
+    }
+  }
+  return str;
+}