小程序设置模块页面

src/assets/main.css

@@ -34,3 +34,22 @@ a {
   background: #fff;
   width: 6px;
 }
+
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}

src/components/form/FormComp.vue

@@ -25,7 +25,19 @@ const placeholder = (item: BasicFormItem) => {
 </script>
 
 <template>
+  <el-cascader
+    v-if="item.type === 'cascader'"
+    style="width: 100%"
+    v-model="modelValue"
+    v-bind="item.props"
+    :placeholder="item.placeholder || placeholder(item)"
+  />
+  <el-upload class="avatar-uploader" v-model="modelValue" v-bind="item.props" v-else-if="item.type === 'upload'">
+    <img v-if="modelValue" :src="modelValue" class="avatar" />
+    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+  </el-upload>
   <component
+    v-else
     :is="'el-' + item.type"
     v-model="modelValue"
     v-bind="item.props"

src/router/asyncRouter.ts

@@ -10,15 +10,6 @@ const asyncRouter: RouteRecordRaw[] = [
       icon: 'House'
     }
   },
-  {
-    path: '/setting',
-    name: 'setting',
-    component: () => import('@/views/exception/403.vue'),
-    meta: {
-      title: '设置',
-      icon: 'Setting'
-    }
-  },
   {
     path: '/system',
     name: 'system',
@@ -70,7 +61,7 @@ const asyncRouter: RouteRecordRaw[] = [
     name: 'org',
     meta: {
       title: '组织机构',
-      icon: 'icon-system'
+      icon: 'OfficeBuilding'
     },
     children: [
       {
@@ -79,8 +70,63 @@ const asyncRouter: RouteRecordRaw[] = [
         component: () => import('@/views/org/Org.vue'),
         meta: {
           title: '机构管理',
+          icon: 'OfficeBuilding'
+        }
+      }
+    ]
+  },
+  {
+    path: '/miniprogram',
+    name: 'miniprogram',
+    meta: {
+      title: '小程序管理',
+      icon: 'icon-system'
+    },
+    children: [
+      {
+        path: 'banner',
+        name: 'miniBanner',
+        component: () => import('@/views/miniprogram/Banner.vue'),
+        meta: {
+          title: '轮播图',
+          icon: 'picture'
+        }
+      },
+      {
+        path: 'question',
+        name: 'miniQuestion',
+        component: () => import('@/views/miniprogram/Question.vue'),
+        meta: {
+          title: '常见问题',
+          icon: 'QuestionFilled'
+        }
+      },
+      {
+        path: 'feedback',
+        name: 'miniFeedback',
+        component: () => import('@/views/miniprogram/Feedback.vue'),
+        meta: {
+          title: '意见反馈',
+          icon: 'Promotion'
+        }
+      },
+      {
+        path: 'about',
+        name: 'miniAbout',
+        component: () => import('@/views/miniprogram/About.vue'),
+        meta: {
+          title: '关于我们',
           icon: 'user'
         }
+      },
+      {
+        path: 'version',
+        name: 'miniVersion',
+        component: () => import('@/views/miniprogram/Version.vue'),
+        meta: {
+          title: '版本信息',
+          icon: 'list'
+        }
       }
     ]
   },

src/views/miniprogram/About.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const formData = ref<any>({})
+const formRef = ref(null)
+
+const handleSave = () => {
+  // 保存接口
+}
+</script>
+
+<template>
+  <el-form :model="formData" ref="formRef">
+    <el-form-item>
+      <el-editor></el-editor>
+    </el-form-item>
+    <el-form-item>
+      <div class="text-center w-full"><el-button type="primary" @click="handleSave">保存</el-button></div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style lang="scss" scoped></style>

src/views/miniprogram/Banner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return Promise.resolve()
+  }
+}
+
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: [
+    {
+      label: '图片',
+      value: '',
+      name: 'image',
+      type: 'upload',
+      rules: [{ required: true, message: '请上传图片', trigger: 'blur' }],
+      props: {
+        class: 'avatar-uploader',
+        'show-file-list': false
+      }
+    },
+    {
+      label: '标题',
+      value: '',
+      name: 'name',
+      type: 'input'
+    },
+    {
+      label: '跳转地址',
+      value: 'src',
+      name: 'phone',
+      type: 'input'
+    }
+  ]
+})
+</script>
+
+<template>
+  <pro-table :crud="CRUD" :formConfig="formConfig">
+    <el-table-column prop="name" label="标题"></el-table-column>
+    <el-table-column prop="image" label="图片">
+      <template #default="{ row }">
+        <el-image :src="row.src" style="width: 100px"></el-image>
+      </template>
+    </el-table-column>
+    <el-table-column prop="src" label="跳转地址"></el-table-column>
+  </pro-table>
+</template>
+
+<style lang="scss" scoped></style>

src/views/miniprogram/Feedback.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return Promise.resolve({
+      data: [
+        {
+          content: 'dfdf'
+        }
+      ],
+      total: 1
+    })
+  }
+}
+
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: []
+})
+
+const dialogVisible = ref(false)
+const replyConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: [
+    {
+      label: '回复内容',
+      value: '',
+      name: 'reply',
+      type: 'input',
+      rules: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
+      props: {
+        type: 'textarea'
+      }
+    }
+  ]
+})
+const curQuestion = ref<any>(null)
+const formData = ref<any>({})
+
+const openDiolog = (row: any) => {
+  dialogVisible.value = true
+  curQuestion.value = row
+}
+const handleReply = () => {
+  // 回复接口
+}
+</script>
+
+<template>
+  <pro-table
+    :formConfig="formConfig"
+    :crud="CRUD"
+    :selection="false"
+    :showToolbar="false"
+    :tableConfig="{ showOperate: false }"
+  >
+    <el-table-column prop="content" label="反馈内容"></el-table-column>
+    <el-table-column prop="publishDate" label="反馈时间"></el-table-column>
+    <el-table-column fixed="right" label="操作" width="100">
+      <template #default="{ row }">
+        <el-button link type="primary" size="small" @click="openDiolog(row)">回复</el-button>
+      </template>
+    </el-table-column>
+  </pro-table>
+
+  <dialog-form
+    v-model="dialogVisible"
+    :formConfig="replyConfig"
+    :create="handleReply"
+    :update="handleReply"
+    :formData="formData"
+    v-if="dialogVisible"
+  />
+</template>
+
+<style lang="scss" scoped></style>

src/views/miniprogram/Question.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return Promise.resolve()
+  }
+}
+
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: [
+    {
+      label: '标题',
+      value: '',
+      name: 'title',
+      type: 'input',
+      rules: [{ required: true, message: '请输入标题', trigger: 'blur' }]
+    },
+    {
+      label: '内容',
+      value: '',
+      name: 'content',
+      type: 'editor',
+      rules: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+    },
+    {
+      label: '是否使用',
+      value: '',
+      name: 'isEnable',
+      type: 'switch'
+    },
+    {
+      label: '排序',
+      value: '',
+      name: 'sort',
+      type: 'input-number'
+    }
+  ]
+})
+</script>
+
+<template>
+  <pro-table :crud="CRUD" :formConfig="formConfig">
+    <el-table-column prop="title" label="标题"></el-table-column>
+  </pro-table>
+</template>
+
+<style lang="scss" scoped></style>

src/views/miniprogram/Version.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+
+const CRUD = {
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
+  getList() {
+    return Promise.resolve()
+  }
+}
+
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  formItems: [
+    {
+      label: '版本号',
+      value: '',
+      name: 'number',
+      type: 'input',
+      rules: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
+    },
+    {
+      label: '标题',
+      value: '',
+      name: 'title',
+      type: 'input'
+    },
+    {
+      label: '内容',
+      value: '',
+      name: 'content',
+      type: 'editor',
+      rules: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+    },
+    {
+      label: '发布日期',
+      value: '',
+      name: 'publishDate',
+      type: 'date-picker',
+      props: {
+        type: 'date'
+      }
+    }
+  ]
+})
+</script>
+
+<template>
+  <pro-table :crud="CRUD" :formConfig="formConfig">
+    <el-table-column prop="number" label="版本号"></el-table-column>
+    <el-table-column prop="title" label="标题"></el-table-column>
+    <el-table-column prop="publishDate" label="发布日期"></el-table-column>
+  </pro-table>
+</template>
+
+<style lang="scss" scoped></style>