this.table.

src/api/cs-system-boot/appinfo.ts

@@ -0,0 +1,19 @@
+import createAxios from '@/utils/request'
+
+/**
+ * 查询app个人中心信息详情
+ * @param id
+ */
+
+export const queryAppInfo = (type: string) => {
+    let form = new FormData()
+    form.append('type', type)
+    return createAxios({
+        url: '/cs-system-boot/appinfo/queryAppInfoByType',
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}

src/components/wangEditor/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <div style='border: 1px solid #ccc'>
+        <Toolbar
+            style='border-bottom: 1px solid #ccc'
+            :editor='editorRef'
+            :defaultConfig='toolbarConfig'
+            mode='default'
+        />
+        <Editor
+            style='height: 500px; overflow-y: hidden;'
+            v-model='valueHtml'
+            :defaultConfig='editorConfig'
+            mode='default'
+            @onCreated='handleCreated'
+        />
+    </div>
+</template>
+<script lang='ts' setup>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 内容 HTML
+const valueHtml = ref('<p>hello</p>')
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+    setTimeout(() => {
+        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
+    }, 1500)
+})
+
+const toolbarConfig = {}
+const editorConfig = { placeholder: '请输入内容...' }
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+})
+
+const handleCreated = (editor) => {
+    editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+</script>

src/layouts/admin/index.vue

@@ -84,7 +84,7 @@ const init = async () => {
                 icon: 'el-icon-List',
                 menu_type: 'tab',
                 url: '',
-                component: '/src/views/govern/setting/statisticalType/index.vue',
+                component: '/src/views/govern/setting/app/index.vue',
                 keepalive: 'test',
                 extend: 'none',
                 children: [
@@ -98,7 +98,7 @@ const init = async () => {
                         icon: 'el-icon-List',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/govern/setting/statisticalType/index.vue',
+                        component: '/src/views/govern/setting/app/index.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []

src/styles/element.scss

@@ -92,5 +92,5 @@
     color: var(--el-color-white);
 }
 .el-tabs__header{
-    margin-bottom: 10px;
+    margin-bottom: 0;
 }

src/utils/tableStore.ts

@@ -14,6 +14,7 @@ interface TableStoreParams {
     publicHeight?: number
     resetCallback?: () => void
     loadCallback?: () => void
+    beforeSearchFun?: () => void
 }
 
 export default class TableStore {
@@ -37,6 +38,7 @@ export default class TableStore {
         column: [],
         loadCallback: null,
         resetCallback: null,
+        beforeSearchFun: null,
         height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
         publicHeight: 0
     })
@@ -51,6 +53,7 @@ export default class TableStore {
         this.table.publicHeight = options.publicHeight || 0
         this.table.resetCallback = options.resetCallback || null
         this.table.loadCallback = options.loadCallback || null
+        this.table.beforeSearchFun = options.beforeSearchFun || null
         Object.assign(this.table.params, options.params)
     }
 
@@ -91,6 +94,7 @@ export default class TableStore {
             [
                 'search',
                 () => {
+                    this.table.beforeSearchFun && this.table.beforeSearchFun()
                     this.table.params.pageNum = 1
                     this.index()
                 }

src/views/govern/setting/app/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class='default-main'>
+        <el-tabs v-model='activeName' type='card' @tab-click='init'>
+            <el-tab-pane label='用户协议' name='User_Agreement'></el-tab-pane>
+            <el-tab-pane label='个人信息保护政策' name='Personal_Infor_Protect'></el-tab-pane>
+            <el-tab-pane label='系统介绍' name='introduction'></el-tab-pane>
+            <el-tab-pane label='使用手册' name='User_Manual'></el-tab-pane>
+            <el-tab-pane label='公司介绍' name='Company_Profile'></el-tab-pane>
+        </el-tabs>
+        <div class='agreement' style='height: calc(100vh - 190px)'>
+            <div style='margin-top: 5px; right: 10px; position: absolute; z-index: 9999999'>
+                <el-button type='primary' @click='submit' icon='el-icon-Checked'>保存</el-button>
+            </div>
+            <WangEditor v-model='html' style='height: 100%' />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+import { BasicDictData } from '@/stores/interface'
+import { queryAppInfo } from '@/api/cs-system-boot/appinfo'
+import WangEditor from '@/components/wangEditor/index.vue'
+
+defineOptions({
+    name: 'govern/setting/app'
+})
+const dic = useDictData().getBasicData('appInformationType')
+const id = ref('')
+const activeName = ref('User_Agreement')
+const html = ref('')
+const submit = () => {
+
+}
+const init = () => {
+    dic.forEach((item: BasicDictData) => {
+        if (item.code == activeName.value) {
+            id.value = item.id
+        }
+    })
+    queryAppInfo(id.value).then((res: any) => {
+        html.value = res.data.content
+    })
+}
+init()
+
+</script>