A 新增系统配置和消息提醒

src/components/GlobalNews.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import router from '@/router'
 const props = defineProps({
   modelValue: Boolean
 })
@@ -8,10 +9,19 @@ const visible = computed({
   get: () => props.modelValue,
   set: value => emits('update:modelValue', value)
 })
+
+const handleGoToNotice = () => {
+  visible.value = false
+  router.push({ path: '/monitor/messageNotif' })
+}
 </script>
 
 <template>
-  <el-drawer v-model="visible" title="消息提醒" size="400px"> </el-drawer>
+  <el-drawer v-model="visible" title="消息提醒" size="400px">
+    <div class="btn flex justify-center">
+      <el-button type="primary" @click="handleGoToNotice">消息中心</el-button>
+    </div>
+  </el-drawer>
 </template>
 
 <style lang="scss" scoped></style>

src/router/asyncRouter.ts

@@ -80,7 +80,16 @@ const asyncRouter: RouteRecordRaw[] = [
           title: '区域管理',
           icon: 'Reading'
         }
-      }
+      },
+      {
+        path: '/system/configure',
+        name: 'systemConfigure',
+        component: () => import('@/views/system/Configure.vue'),
+        meta: {
+          title: '系统配置',
+          icon: 'Edit'
+        }
+      },
     ]
   },
   {

src/views/monitor/MessageNotif.vue

@@ -13,7 +13,26 @@ const CRUD: ICRUD = {
   getList() {
     return new Promise(resolve => {
       resolve({
-        list: [],
+        list: [
+          {
+            id: 1,
+            name: '名称',
+            content: '内容',
+            type: '通告',
+            attachment: '',
+            status: '已读',
+            publisher: '超管'
+          },
+          {
+            id: 2,
+            name: '名称',
+            content: '内容',
+            type: '通告',
+            attachment: '',
+            status: '已读',
+            publisher: '超管'
+          },
+        ],
         total: 2
       })
     })
@@ -80,8 +99,15 @@ const handleEdit = (row: any) => {
     @click-edit="handleEdit"
   >
     <vxe-column field="name" title="消息名称"></vxe-column>
-    <vxe-column field="loginName" title="消息内容"></vxe-column>
-    <vxe-column field="phone" title="消息类型"></vxe-column>
+    <vxe-column field="content" title="消息内容"></vxe-column>
+    <vxe-column field="type" title="消息类型"></vxe-column>
+    <vxe-column field="attachment" title="附件"></vxe-column>
+    <vxe-column field="status" title="查阅状态">
+      <template #default="{ row }">
+        <el-tag class="ml-2" type="success">{{ row.status }}</el-tag>
+      </template>
+    </vxe-column>
+    <vxe-column field="publisher" title="发布者"></vxe-column>
   </pro-table>
 </template>
 

src/views/system/Configure.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { BasicForm } from '@/types/form'
+import type { TabsPaneContext } from 'element-plus'
+// menu start
+const activeName = ref<string>('login')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+// menu end
+
+// loginConfig start
+// checkbox
+const isSingleLogin = ref<boolean>(false)
+const handleChange = val => {
+  isSingleLogin.value = val
+}
+// radio
+const singleLoginType = ref<string>('1')
+// loginConfig end
+
+// messageConfig start
+const proFormRef = ref<any>()
+const formData = reactive<any>({})
+const formConfig = reactive<BasicForm>({
+  span: 24,
+  props: {
+    labelPosition: 'right',
+    labelWidth: '120px'
+  },
+  formItems: [
+    {
+      label: 'accessKeyId',
+      value: '',
+      name: 'accessKeyId',
+      type: 'input',
+      rules: [{ required: true, message: '请输入accessKeyId', trigger: 'blur' }]
+    },
+    {
+      label: 'accessKeySecret',
+      value: '',
+      name: 'accessKeySecret',
+      type: 'input',
+      rules: [{ required: true, message: '请输入accessKeySecret', trigger: 'blur' }]
+    },
+    {
+      label: '短信签名',
+      value: '',
+      name: 'messageSign',
+      type: 'input',
+      rules: [{ required: true, message: '请输入短信签名', trigger: 'blur' }]
+    },
+    {
+      label: '短信模版',
+      value: '',
+      name: 'messageTemplate',
+      type: 'input',
+      rules: [{ required: true, message: '请输入短信模版', trigger: 'blur' }]
+    },
+  ]
+})
+const handleSaveMessage = () => {
+  proFormRef.value.submit()
+}
+// messageConfig end
+
+// mailConfig start
+const proFormEmailRef = ref<any>()
+const formEmailData = reactive<any>({})
+const formEmailConfig = reactive<BasicForm>({
+  span: 24,
+  props: {
+    labelPosition: 'right',
+    labelWidth: '120px'
+  },
+  formItems: [
+    {
+      label: '邮箱服务器地址',
+      value: '',
+      name: 'serverAddress',
+      type: 'input',
+      rules: [{ required: true, message: '请输入邮箱服务器地址', trigger: 'blur' }]
+    },
+    {
+      label: '邮箱服务器端口',
+      value: '',
+      name: 'serverPort',
+      type: 'input',
+      rules: [{ required: true, message: '请输入邮箱服务器端口', trigger: 'blur' }]
+    },
+    {
+      label: '系统邮箱地址',
+      value: '',
+      name: 'mailAddress',
+      type: 'input',
+      rules: [{ required: true, message: '请输入系统邮箱地址', trigger: 'blur' }]
+    },
+    {
+      label: '系统邮箱密码',
+      value: '',
+      name: 'mailPassword',
+      type: 'input',
+      rules: [{ required: true, message: '请输入系统邮箱密码', trigger: 'blur' }]
+    },
+  ]
+})
+const handleSaveEmail = () => {
+  proFormEmailRef.value.submit()
+}
+// mailConfig end
+</script>
+
+<template>
+  <div class="configure-container">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="登录" name="login">
+        <el-card class="box-card">
+          <div  class="login-container">
+            <div class="title">单一登录配置</div>
+            <div>
+              <el-checkbox v-model="isSingleLogin" @change="handleChange">单一登录</el-checkbox>
+            </div>
+            <div>
+              <el-radio-group v-model="singleLoginType"  :disabled="!isSingleLogin">
+                <el-radio label="1" size="large">后登录踢出先登录</el-radio>
+                <el-radio label="2" size="large">已登录禁止再登录</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="btn">
+              <el-button type="primary">保存</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-tab-pane>
+      <el-tab-pane label="短信" name="message">
+        <el-card class="box-card">
+          <div class="message-container">
+            <div class="title">短信配置</div>
+            <pro-form :formConfig="formConfig" :formData="formData" ref="proFormRef">
+            </pro-form>
+            <div class="btn">
+              <el-button type="primary" @click="handleSaveMessage">保存</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-tab-pane>
+      <el-tab-pane label="邮箱" name="mail">
+        <el-card class="box-card">
+          <div class="mail-container">
+            <div class="title">发件人账户</div>
+            <pro-form :formConfig="formEmailConfig" :formData="formEmailData" ref="proFormEmailRef">
+            </pro-form>
+            <div class="btn">
+              <el-button type="primary" @click="handleSaveEmail">保存</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.configure-container {
+  .box-card {
+    margin-top: 10px;
+    .login-container {
+      div:not(:first-child) {
+        margin-top: 20px;
+      }
+    }
+    .message-container, .mail-container, .login-container {
+      .title {
+        font-size: 17px;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+</style>