<template>
|
<div class='system-setting'>
|
<p class="title"> 系统设置 </p>
|
<!--导航选择事件-->
|
<div class='tabChosen'>
|
<el-tabs tab-position="top" style="height: 500px;">
|
<el-tab-pane label="基础设置">
|
<el-form :model="basicRuleForm" :rules="basicRules" ref="basicRuleForm" label-width="100px" class="basicForm">
|
<el-form-item label="网站名称" prop="name">
|
<el-input v-model="basicRuleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item label="网站域名" prop="webName">
|
<el-input v-model="basicRuleForm.webName"></el-input>
|
</el-form-item>
|
<el-form-item label="网站关键词">
|
<el-input type="textarea" v-model="basicRuleForm.keyWords"></el-input>
|
</el-form-item>
|
<el-form-item label="网站描述" prop="descripe">
|
<el-input type="textarea" v-model="basicRuleForm.descripe"></el-input>
|
</el-form-item>
|
<el-form-item label="公司名称" prop="companyName">
|
<el-input v-model="basicRuleForm.companyName"></el-input>
|
</el-form-item>
|
<el-form-item label="公司地址" prop="companyAddress">
|
<el-input v-model="basicRuleForm.companyAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="版本信息" prop="versionInfo">
|
<el-input type="textarea" v-model="basicRuleForm.versionInfo"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('basicRuleForm')">立即创建</el-button>
|
<el-button @click="resetForm('basicRuleForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="邮件设置">
|
<el-form :model="mailForm" :rules="mailRules" ref="mailForm" label-width="100px" class="basicForm">
|
<el-form-item label="SMTP服务器" prop="web">
|
<el-input v-model="mailForm.web"></el-input>
|
</el-form-item>
|
<el-form-item label="SSL加密连接" prop="connect">
|
<el-radio-group v-model="mailForm.connect">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="SMTP端口" required>
|
<el-input v-model="mailForm.port" type='number'></el-input>
|
</el-form-item>
|
<el-form-item label="发件人地址" prop="sendAddress">
|
<el-input v-model="mailForm.sendAddress"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱账号" prop="mailDress" required>
|
<el-input v-model="mailForm.mailDress"></el-input>
|
</el-form-item>
|
<el-form-item label="邮箱密码" prop="mailPsd" required>
|
<el-input v-model="mailForm.mailPsd"></el-input>
|
</el-form-item>
|
<el-form-item label="发件人昵称" prop="sendName" required>
|
<el-input v-model="mailForm.sendName"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('mailForm')">立即创建</el-button>
|
<el-button @click="resetForm('mailForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="提醒设置">
|
<el-form :model="alarmForm" ref="alarmForm" label-width="100px" class="basicForm">
|
<el-form-item label="是否开启通知" prop="isAlarm">
|
<el-radio-group v-model="alarmForm.isAlarm">
|
<el-radio label="是"></el-radio>
|
<el-radio label="否"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="通知方式" prop="alarmWay">
|
<el-radio-group v-model="alarmForm.alarmWay">
|
<el-radio :label='1'>站内信</el-radio>
|
<el-radio :label='2'>站内信+邮件</el-radio>
|
<el-radio :label='3'>站内信+短信</el-radio>
|
<el-radio :label='4'>站内信+邮件+短信</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('alarmForm')">立即创建</el-button>
|
<el-button @click="resetForm('alarmForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'systemSetting',
|
data () {
|
return {
|
basicRuleForm: {
|
name: '',
|
webName: '',
|
keyWords: '',
|
date1: '',
|
date2: '',
|
descripe: '',
|
companyName: '',
|
companyAddress: '',
|
versionInfo: ''
|
},
|
basicRules: {
|
name: [
|
{ required: true, message: '请输入网站名称', trigger: 'blur' },
|
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
|
],
|
webName: [
|
{ required: true, message: '请输入网站域名', trigger: 'blur' },
|
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
|
]
|
},
|
mailForm: {
|
web: '',
|
connect: '是',
|
port: '',
|
sendAddress: '',
|
mailDress: '',
|
mailPsd: '',
|
sendName: ''
|
},
|
mailRules: {
|
web: [
|
{ required: true, message: '请输入SMTP服务器', trigger: 'blur' },
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
],
|
port: [
|
{ required: true, message: '请输入SMTP端口', trigger: 'blur' }
|
],
|
mailDress: [
|
{ required: true, message: '请输入邮箱账号', trigger: 'blur' }
|
],
|
mailPsd: [
|
{ required: true, message: '请输入邮箱密码', trigger: 'blur' }
|
],
|
sendName: [
|
{ required: true, message: '请输入发件人昵称', trigger: 'blur' }
|
]
|
},
|
alarmForm: {
|
isAlarm: '是',
|
alarmWay: 1
|
}
|
}
|
},
|
methods: {
|
submitForm (formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!')
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
resetForm (formName) {
|
this.$refs[formName].resetFields()
|
}
|
},
|
mounted () {
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.system-setting{
|
width:100%;
|
.title {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
margin: 10px 0;
|
color: #333;
|
padding: 0 20px;
|
}
|
.tabChosen{
|
background-color: #fff;
|
height: 600px;
|
padding:20px;
|
}
|
.basicForm{
|
margin-left: 0;
|
width: 60%;
|
}
|
}
|
|
</style>
|
