fix: 更新路由为后台配置，修改admim文件名称为admin

2025-03-12 09:05:28 +08:00
parent 6735d8dedb
commit ace23e89ee
29 changed files with 2107 additions and 617 deletions
--- a/src/views/admin/system/miniAppPages/config/add.ts
+++ b/src/views/admin/system/miniAppPages/config/add.ts
@@ -0,0 +1,91 @@
+import API, { type addRequest } from "@/api/system/miniAppPages";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增小程序页面",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    if (data.icon) {
+      data.icon = typeof data.icon === "string" ? data.icon : data.icon[0]
+    }
+    return API.add(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+
+    {
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+      rules: [{ required: false, message: "请上传图标", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传图标",
+      },
+    },
+    {
+      type: "input",
+      label: "小程序页面名称",
+      prop: "name",
+      rules: [{ required: true, message: "请输入小程序页面名称", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入小程序页面名称",
+      },
+    },
+    {
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      rules: [{ required: true, message: "请输入小程序页面路径", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入小程序页面路径",
+      },
+    },
+    {
+      type: "textarea",
+      label: "页面描述",
+      prop: "description",
+      rules: [{ required: false, message: "请输入页面描述", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入页面描述",
+      },
+    },
+    {
+      type: "input-number",
+      label: "排序",
+      prop: "sort",
+      rules: [{ required: false, message: "请输入排序", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入排序",
+      },
+      initialValue: 0,
+    },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: [
+        {
+          label: "启用",
+          value: 1,
+        },
+        {
+          label: "禁用",
+          value: 0,
+        },
+      ],
+      initialValue: 1,
+    }
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
--- a/src/views/admin/system/miniAppPages/config/config.ts
+++ b/src/views/admin/system/miniAppPages/config/config.ts
@@ -0,0 +1,31 @@
+import { property } from "lodash";
+
+export const statusOptions: options[] = [
+  { label: "全部", value: '' },
+  { label: "启用", value: 1 },
+  { label: "禁用", value: 0 },
+];
+
+
+export type optionsType = "status";
+
+export function returnOptions(type: optionsType) {
+  if (type === "status") {
+    return statusOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}
--- a/src/views/admin/system/miniAppPages/config/content.ts
+++ b/src/views/admin/system/miniAppPages/config/content.ts
@@ -0,0 +1,73 @@
+import API, { type editRequest } from "@/api/system/miniAppPages";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig<editRequest> = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexAction: function (params) {
+    return API.getList(params);
+  },
+  deleteAction: API.delete,
+  // modifyAction: function (data) {
+  //   // return API.edit(data);
+  // },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    {
+      label: "小程序页面名称",
+      align: "center",
+      prop: "name",
+    },
+    {
+      label: "图标",
+      align: "center",
+      prop: "icon",
+      templet: "custom",
+      slotName: "icon",
+    },
+    {
+      label: "小程序页面路径",
+      align: "center",
+      prop: "path",
+    },
+    {
+      label: "页面描述",
+      align: "center",
+      prop: "description",
+    },
+    {
+      label: "排序",
+      align: "center",
+      prop: "sort",
+    },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: ["edit", "delete"],
+    },
+  ],
+};
+
+export default contentConfig;
--- a/src/views/admin/system/miniAppPages/config/edit.ts
+++ b/src/views/admin/system/miniAppPages/config/edit.ts
@@ -0,0 +1,91 @@
+import API, { type editRequest } from "@/api/system/miniAppPages";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<editRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑小程序页面",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    if (data.icon) {
+      data.icon = typeof data.icon === "string" ? data.icon : data.icon[0]
+    }
+    return API.edit(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+
+    {
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+      rules: [{ required: false, message: "请上传图标", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传图标",
+      },
+    },
+    {
+      type: "input",
+      label: "小程序页面名称",
+      prop: "name",
+      rules: [{ required: true, message: "请输入小程序页面名称", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入小程序页面名称",
+      },
+    },
+    {
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      rules: [{ required: true, message: "请输入小程序页面路径", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入小程序页面路径",
+      },
+    },
+    {
+      type: "textarea",
+      label: "页面描述",
+      prop: "description",
+      rules: [{ required: false, message: "请输入页面描述", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入页面描述",
+      },
+    },
+    {
+      type: "input-number",
+      label: "排序",
+      prop: "sort",
+      rules: [{ required: false, message: "请输入排序", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入排序",
+      },
+      initialValue: 0,
+    },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: [
+        {
+          label: "启用",
+          value: 1,
+        },
+        {
+          label: "禁用",
+          value: 0,
+        },
+      ],
+      initialValue: 1,
+    }
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
--- a/src/views/admin/system/miniAppPages/config/search.ts
+++ b/src/views/admin/system/miniAppPages/config/search.ts
@@ -0,0 +1,40 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+import { statusOptions } from './config'
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "小程序页面路径",
+      prop: "name",
+      attrs: {
+        placeholder: "请输入小程序页面路径",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      attrs: {
+        placeholder: "请输入小程序页面路径",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: statusOptions,
+      initialValue: '',
+    }
+  ],
+};
+
+export default searchConfig;
--- a/src/views/admin/system/miniAppPages/index.vue
+++ b/src/views/admin/system/miniAppPages/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <!-- 搜索 -->
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+    <!-- 列表 -->
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #icon="scope">
+        <el-image
+          style="width: 50px; height: 50px"
+          :src="scope.row[scope.prop]"
+          :preview-src-list="[scope.row[scope.prop]]"
+        />
+      </template>
+      <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
+      <template #gender="scope">
+        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      </template>
+      <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+    </page-content>
+
+    <!-- 新增 -->
+    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    >
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import Api from "@/api/system/miniProgramVersion";
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // addModalConfig.formItems[2]!.attrs!.data =
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await Api.getFormData(row.id);
+  console.log({ ...row, icon: row.icon ? [row.icon] : [] });
+  editModalRef.value?.setFormData({ ...row, icon: row.icon ? [row.icon] : [] });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+}
+</script>