fs-admin/src/views/system/Configure.vue

<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: any) => {
  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: '130px'
  },
  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>