一、添加视图
在根目录下src文件夹下views文件夹下param文件夹下system文件夹下,新建index.vue,代码如下
<template><el-tabs type="border-card"><el-tab-pane v-if="$store.getters.butts.includes('ParamSystemIndexDetails')" label="上传参数"><el-form ref="resUploadForm" :rules="resUploadRules" :model="resUploadModel" label-width="140px"class="demo-ruleForm"><el-form-item label="上传类型" prop="upload_type"><el-radio-group v-model="resUploadModel.upload_type"><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 label="图片上传类型" prop="checked_images"><div style="width:5%;float:left;"><el-checkbox v-model="checkImageAll" :indeterminate="isImageIndeterminate"@change="handleCheckAllImageChange">全选</el-checkbox></div><div style="width:95%;float:left;"><el-checkbox-group v-model="resUploadModel.checked_images" @change="handleCheckedImageChange"><el-checkbox v-for="image in images" :key="image" :label="image">{{ image }}</el-checkbox></el-checkbox-group></div></el-form-item><el-form-item label="视频上传类型" prop="checked_videos"><div style="width:5%;float:left;"><el-checkbox v-model="checkVideoAll" :indeterminate="isVideoIndeterminate"@change="handleCheckAllVideoChange">全选</el-checkbox></div><div style="width:95%;float:left;"><el-checkbox-group v-model="resUploadModel.checked_videos" @change="handleCheckedVideoChange"><el-checkbox v-for="video in videos" :key="video" :label="video">{{ video }}</el-checkbox></el-checkbox-group></div></el-form-item><el-form-item label="文件上传类型" prop="checked_filedocs"><div style="width:5%;float:left;"><el-checkbox v-model="checkFiledocAll" :indeterminate="isFiledocIndeterminate"@change="handleCheckAllFiledocChange">全选</el-checkbox></div><div style="width:95%;float:left;"><el-checkbox-group v-model="resUploadModel.checked_filedocs" @change="handleCheckedFiledocChange"><el-checkbox v-for="filedoc in filedocs" :key="filedoc" :label="filedoc">{{ filedoc }}</el-checkbox></el-checkbox-group></div></el-form-item><el-form-item label="上传大小(M)" prop="upload_number"><el-input-number v-model="resUploadModel.upload_number" :min="1" :max="upload_max_filesize" :step="1"/></el-form-item><el-form-item v-if="resUploadModel.upload_type > 1" label="Endpoint域名" prop="example_name"><el-input v-model="resUploadModel.example_name"/></el-form-item><el-form-item v-if="resUploadModel.upload_type > 1" label="accessKey" prop="access_key"><el-input v-model="resUploadModel.access_key"/></el-form-item><el-form-item v-if="resUploadModel.upload_type > 1" label="secretKey" prop="secret_key"><el-input v-model="resUploadModel.secret_key"/></el-form-item><el-form-item v-if="resUploadModel.upload_type > 1" label="空间名称" prop="bucket_name"><el-input v-model="resUploadModel.bucket_name"/></el-form-item><el-form-item v-if="resUploadModel.upload_type > 1" label="Bucket域名" prop="domain_name"><el-input v-model="resUploadModel.domain_name"/></el-form-item><el-form-item v-if="$store.getters.butts.includes('ParamSystemIndexSave')"><el-button type="primary" @click="saveUploadForm()">保存</el-button></el-form-item><el-form-item><b style="color:red;">如果采用内网上传,外网访问,就需要配置Bucket域名</b><br /><b style="color:red;">如果上传类型改成本站的情况下,请关闭nginx黑名单或是搭建自己的文件存储</b></el-form-item></el-form></el-tab-pane><el-tab-pane v-if="$store.getters.butts.includes('ParamUploadIndexDetails')" label="系统参数"><el-form ref="resSystemForm" :rules="resSystemRules" :model="resSystemModel" label-width="130px"class="demo-ruleForm"><el-form-item label="网站名称" prop="website_name"><el-input v-model="resSystemModel.website_name"></el-input></el-form-item><el-form-item label="网站描述" prop="website_describe"><el-input type="textarea" v-model="resSystemModel.website_describe" maxlength="180" rows="4"show-word-limit></el-input></el-form-item><el-form-item label="网站关键字" prop="website_keyword"><el-input type="textarea" v-model="resSystemModel.website_keyword" maxlength="120" rows="4"show-word-limit></el-input></el-form-item><el-form-item label="二次密码" prop="security_password"><el-input v-model="resSystemModel.security_password" :disabled="true"></el-input></el-form-item><el-form-item label="Log" prop="checkedLog"><el-col :span="3"><el-upload:action="action":headers="customHeaders"class="backend-uploader":on-success="uploadSuccess3":on-error="uploadError":show-file-list="false":before-upload="beforeUpload":accept="imageAccept":on-progress="uploadProcess":data="uploadData"><img v-if="resSystemModel.checked_backend_log != '' && !uploadFlag" ref="backend":src="resSystemModel.checked_backend_log" class="backend"><i v-else-if="resSystemModel.checked_backend_log =='' && !uploadFlag"class="el-icon-plus backend-uploader-icon"></i><el-progress v-if="uploadFlag == true" type="circle" :percentage="uploadPercent"class="backend"></el-progress></el-upload><el-link type="danger" disabled>后端</br>宽度:100px</br>高度:100px</el-link></el-col></el-form-item><el-form-item label="网站备案申明" prop="website_filing_applica"><el-input type="textarea" v-model="resSystemModel.website_filing_applica" maxlength="250" rows="4"show-word-limit></el-input></el-form-item><el-form-item label="平台端token过期时间" prop="platform_token_expira"><el-input-number v-model="resSystemModel.platform_token_expira" :step="60"></el-input-number></el-form-item><el-form-item v-if="$store.getters.butts.includes('ParamUploadIndexSave')"><el-button type="primary" @click="saveSystemForm()">保存</el-button></el-form-item></el-form></el-tab-pane></el-tabs>
</template>
<style>.el-select .el-input-number {width: 130px;}.input-with-select .el-input-group__prepend {background-color: #fff;}
</style>
<script>import { err, succ, warn } from '@/utils/message'import { getSystemInfo, saveSystemInfo, getUploadInfo, saveUploadInfo } from '@/api/param/system'import { getAll as getImageAll } from '@/api/param/image'import { getAll as getVideoAll } from '@/api/param/video'import { getAll as getFiledocAll } from '@/api/param/filedoc'import {getToken} from '@/utils/auth'import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。const baseUrl = process.env.VUE_APP_BASE_APIexport default {name: 'ParamSystemIndex',data() {const validateCheckedLog = (rule, value, callback) => {if (this.resSystemModel.checked_backend_log === '') {callback(new Error('前端Log图、后端Log图及手机端Log图是必传的!'))} else {callback()}}return {customHeaders:{Authorization: ""},checkImageAll: false,isImageIndeterminate: false,images: [],checkVideoAll: false,isVideoIndeterminate: false,videos: [],checkFiledocAll: false,isFiledocIndeterminate: false,filedocs: [],imageAccept: '',//图片上传类型upload_number: 0,//最大上传大小imageOptions:[],//图片上传类型验证videoOptions:[],//视频上传类型验证filedocOptions:[],//文件上传类型验证uploadFlag: false,//上传是否显示滚动条uploadPercent: "",//上传滚动条进度action: baseUrl + '/upload/file', //用来强制刷新uploadData: {type: 'image'},upload_max_filesize:1,//php.ini里面设置的最大文件上传resUploadModel: {id: 1,upload_type: '1',example_name: '',access_key: '',secret_key: '',bucket_name: '',domain_name:'',checked_images: [],checked_videos: [],checked_filedocs:[],upload_number: 3},resUploadRules: {upload_type: [{required: true, message: '请选择上传类型', trigger: 'change'}],example_name: [{required: true, message: '请输入实例名称', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],access_key: [{required: true, message: '请输入accessKey', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],secret_key: [{required: true, message: '请输入secretKey', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],bucket_name: [{required: true, message: '请输入空间名称', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],domain_name: [{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],checked_images: [{type: 'array', required: true, message: '请至少选择一个图片上传类型', trigger: 'change'}],checked_videos: [{type: 'array', required: true, message: '请至少选择一个视频上传类型', trigger: 'change'}],checked_filedocs: [{type: 'array', required: true, message: '请至少选择一个文件上传类型', trigger: 'change'}],upload_number: [{type: 'number', required: true, message: '请输入活动名称', trigger: 'blur'}]},resSystemModel: {id: 1,website_name: '',website_describe: '',website_keyword: '',security_password: '',checked_backend_log: '',website_filing_applica: '',platform_token_expira: 0},resSystemRules: {website_name: [{required: true, message: '请输入网站名称', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 60 个字符', trigger: 'blur'}],website_describe: [{required: true, message: '请输入网站描述', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 180 个字符', trigger: 'blur'}],website_keyword: [{required: true, message: '请输入网站关键字', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 120 个字符', trigger: 'blur'}],security_password: [{required: true, message: '请输入二次安全密码', trigger: 'blur'},{min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur'}],checkedLog: [{required: true, trigger: 'change', validator: validateCheckedLog}],website_filing_applica: [{required: true, message: '请输入网站备案申明', trigger: 'blur'},{min: 3, max: 120, message: '长度在 3 到 250 个字符', trigger: 'blur'}],platform_token_expira: [{required: true, message: '请输入平台端token过期时间', trigger: 'blur'}]}}},// 初始化执行的created() {this.getImage()//获取图片类型this.getVideo()//获取视频类型this.getFiledoc()//获取文件类型this.getParamUpload()// 获取参数上传数据this.getSystemUpload()// 获取参数系统数据this.accToken()//获取token},methods: {async getImage(){const res = await getImageAll();this.images = res.data;},async getVideo(){const res = await getVideoAll();this.videos = res.data;},async getFiledoc(){const res = await getFiledocAll();this.filedocs = res.data;},accToken(){// 公钥keyconst publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDYW5f4L5yz1myyGXrvEmrAlfpV\n" +"HHRrZKsYdAGBvx0IHRV3zwCnACAFnpBQqfreZX3TKUBbA7Kfyh1XG7ytW6reBGLO\n" +"xjJC2SncYXjtEydCMdjMaY0BSAV2J9238If5K5htt0pGWkUVt6BnTPAWUDzwRYQN\n" +"XZaDIIkQ1yBLvJPfQQIDAQAB";const PUBLIC_KEY = publicKeyvar encryptor = new Encrypt()encryptor.setPublicKey(PUBLIC_KEY)// 如果是对象/数组的话,需要先JSON.stringify转换成字符串var Base64 = require('js-base64').Base64this.customHeaders.Authorization= encryptor.encryptLong(Base64.decode(getToken()))},async getParamUpload() {await getUploadInfo({id: 1}).then(res => {var row = res.datathis.resUploadModel.upload_type = row.upload_type + ''this.resUploadModel.upload_number = row.upload_numberthis.resUploadModel.example_name = row.example_namethis.resUploadModel.access_key = row.access_keythis.resUploadModel.secret_key = row.secret_keythis.resUploadModel.bucket_name = row.bucket_namethis.resUploadModel.domain_name = row.domain_namethis.upload_number = row.upload_number * 1;this.upload_max_filesize = row.upload_max_filesize * 1;const checkedImage = row.checked_images.split(',')// 拆分成数组this.resUploadModel.checked_images = checkedImageconst checkedImagesCou = checkedImage.lengththis.checkImageAll = checkedImagesCou === this.images.lengththis.isImageIndeterminate = checkedImagesCou > 0 && checkedImagesCou < this.images.lengthfor (let i = 0; i < checkedImage.length; i++) {this.imageOptions.push('.' + checkedImage[i]);if(i == checkedImage.length - 1){this.imageAccept += '.' + checkedImage[i];}else{this.imageAccept += '.' + checkedImage[i] + ',';}}const checkedVideo = row.checked_videos.split(',')// 拆分成数组this.resUploadModel.checked_videos = checkedVideoconst checkedVideosCou = checkedVideo.lengththis.checkVideoAll = checkedVideosCou === this.videos.lengththis.isVideoIndeterminate = checkedVideosCou > 0 && checkedVideosCou < this.videos.lengthfor (let j = 0; j < checkedVideo.length; j++) {this.videoOptions.push('.' + checkedVideo[j]);}const checkedFiledocs = row.checked_filedocs.split(',')// 拆分成数组this.resUploadModel.checked_filedocs = checkedFiledocsconst checkedFiledocsCou = checkedFiledocs.lengththis.checkFiledocAll = checkedFiledocsCou === this.filedocs.lengththis.isFiledocIndeterminate = checkedFiledocsCou > 0 && checkedFiledocsCou < this.filedocs.lengthfor (let j = 0; j < checkedFiledocs.length; j++) {this.filedocOptions.push('.' + checkedFiledocs[j]);}this.$nextTick(() => {this.$refs['resUploadForm'].clearValidate()})})},async getSystemUpload() {await getSystemInfo({id: 1}).then(res => {var row = res.datathis.resSystemModel.website_name = row.website_namethis.resSystemModel.website_describe = row.website_describethis.resSystemModel.website_keyword = row.website_keywordthis.resSystemModel.security_password = row.security_passwordthis.resSystemModel.checked_backend_log = row.checked_backend_logthis.resSystemModel.website_filing_applica = row.website_filing_applicathis.resSystemModel.platform_token_expira = row.platform_token_expirathis.$nextTick(() => {this.$refs['resSystemForm'].clearValidate()})})},saveUploadForm() {this.$refs.resUploadForm.validate((valid) => {if (valid) {this.loading = truesaveUploadInfo(this.resUploadModel).then(res => {this.loading = falsesucc(res.message)this.getParamUpload()})}})},saveSystemForm() {this.$refs.resSystemForm.validate((valid) => {if (valid) {this.loading = truesaveSystemInfo(this.resSystemModel).then(res => {this.loading = falsesucc(res.message)this.getSystemUpload()})}})},// 上传前验证beforeUpload(file) {let fileName = file.name;let fileType = fileName.substring(fileName.length * 1 - 4, fileName.length);if (this.imageOptions.findIndex((v) => (v === fileType)) === -1) {err('图片格式只能是 JPG|png|gif 格式!')return false}const isLt3M = file.size / 1024 / 1024 < this.upload_numberif (!isLt3M) {err('上传文件大小不能超过' + this.upload_number + 'MB!')return false}},//上传进度条uploadProcess(event, file) {this.accToken()//获取tokenthis.uploadFlag = true;this.uploadPercent = file.percentage.toFixed(0) * 1;},//上传成功提醒uploadSuccess3(res) {this.uploadFlag = false;this.uploadPercent = 0;if (res.code == 20000) {this.resSystemModel.checked_backend_log = res.data.urlsucc(res.message)} else {err(res.message)}return false},//上传错误提醒uploadError(er) {if (er != '') {err('上传失败')}return false},handleCheckAllImageChange(val) {this.resUploadModel.checked_images = val ? this.images : []this.isImageIndeterminate = false},handleCheckedImageChange(value) {const checkedCount = value.lengththis.checkImageAll = checkedCount === this.images.lengththis.isImageIndeterminate = checkedCount > 0 && checkedCount < this.images.length},handleCheckAllVideoChange(val) {this.resUploadModel.checked_videos = val ? this.videos : []this.isVideoIndeterminate = false},handleCheckedVideoChange(value) {const checkedCount = value.lengththis.checkVideoAll = checkedCount === this.videos.lengththis.isVideoIndeterminate = checkedCount > 0 && checkedCount < this.videos.length},handleCheckAllFiledocChange(val) {this.resUploadModel.checked_filedocs = val ? this.filedocs : []this.isFiledocIndeterminate = false},handleCheckedFiledocChange(value) {const checkedCount = value.lengththis.checkFiledocAll = checkedCount === this.filedocs.lengththis.isFiledocIndeterminate = checkedCount > 0 && checkedCount < this.filedocs.length}}}
</script>
<style lang="scss" scoped>.icons-container {margin: 10px 20px 0;overflow: hidden;.grid {position: relative;display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}.icon-item {margin: 20px;height: 85px;text-align: center;width: 100px;float: left;font-size: 30px;color: #24292e;cursor: pointer;}span {display: block;font-size: 16px;margin-top: 10px;}.disabled {pointer-events: none;}}.backend-uploader {border: 1px solid #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;width: 128px;height: 128px;}.backend-uploader:hover {border-color: #409EFF;}.backend-uploader-icon {font-size: 28px;color: #8c939d;width: 128px;height: 128px;line-height: 128px;text-align: center;}.backend {width: 128px;height: 128px;display: block;}.avatar-uploader {border: 1px solid #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;width: 347px;height: 86px;}.avatar-uploader:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 347px;height: 86px;line-height: 86px;text-align: center;}.avatar {width: 347px;height: 86px;display: block;}.h5-uploader {border: 1px solid #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;width: 347px;height: 86px;}.h5-uploader:hover {border-color: #409EFF;}.h5-uploader-icon {font-size: 28px;color: #8c939d;width: 347px;height: 86px;line-height: 86px;text-align: center;}.h5 {width: 347px;height: 86px;display: block;}
</style>
二、添加ajax请求
在根目录下src文件夹下api文件夹下param文件夹下system.js,代码如下
import request from '@/utils/request'
// 保存上传配置信息
export function saveUploadInfo(data) {return request({url: '/param/upload/save_info',method: 'post',data})
}
// 获取上传配置信息
export function getUploadInfo(data) {return request({url: '/param/upload/get_info',method: 'post',data})
}
// 保存系统配置信息
export function saveSystemInfo(data) {return request({url: '/param/system/save_info',method: 'post',data})
}
// 获取系统配置信息
export function getSystemInfo(data) {return request({url: '/param/system/get_info',method: 'post',data})
}export function getParamSms(data) {return request({url: '/param/get_param_sms',method: 'post',data})
}export function saveParamSms(data) {return request({url: '/param/save_param_sms',method: 'post',data})
}export function getParamMao(data) {return request({url: '/param/get_param_mao',method: 'post',data})
}export function saveParamMao(data) {return request({url: '/param/save_param_mao',method: 'post',data})
}export function saveParamMaoStatus(data) {return request({url: '/param/save_param_maostatus',method: 'post',data})
}export function getParamGugong(data) {return request({url: '/param/get_param_gugong',method: 'post',data})
}export function saveParamGugong(data) {return request({url: '/param/save_param_gugong',method: 'post',data})
}export function saveParamGugongStatus(data) {return request({url: '/param/save_param_gugongstatus',method: 'post',data})
}
三、提前说明
明天将开发管理员及邮箱配置开发、短信配置开发