saas-web/src/views/manage/setting/basic/index.vue

<template>
    <el-container>
        <el-main>
                <el-card shadow="never" header="系统设置" class="borderNone mt10">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                        <el-tab-pane label="基础设置" name="service" v-loading="isLoading">
                            <el-form :model="sys" :rules="rules" ref="form" label-position="top" @keyup.enter="saveForm">
                                <el-form-item label="系统名称" prop="title" class="label-item">
                                    <el-input v-model="sys.title" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                                <el-form-item label="客服联系电话" prop="tel" class="label-item">
                                    <el-input v-model="sys.tel" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                                <el-form-item label="系统Logo" prop="logo">
                                    <sc-upload v-model="sys.logo"></sc-upload>
                                </el-form-item>
                                <el-form-item label="备案号" prop="miitbeian" class="label-item">
                                    <el-input v-model="sys.miitbeian" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg">支持Html格式</div>
                                </el-form-item>
                                <el-form-item label="公安安备号" prop="beian" class="label-item">
                                    <el-input v-model="sys.beian" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg">网站备案号和公安备案号可以在<a href="https://beian.miit.gov.cn/" target="_blank">备案管理中心</a>查询并获取，网站上线时必需配置备案号，备案号会链接到信息备案管理系统 ~</div>
                                </el-form-item>
                                <el-form-item label="版权信息" prop="copyright" class="label-item">
                                    <el-input v-model="sys.copyright" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                                <el-form-item label="隐私协议" prop="privacy" class="label-item">
                                    <sc-editor v-model="sys.privacy" placeholder="请输入" :height="400"></sc-editor>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                                <el-form-item label="服务协议" prop="agreements" class="label-item">
                                    <sc-editor v-model="sys.agreements" placeholder="请输入" :height="400"></sc-editor>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="短信设置（非代理）" name="sms" v-loading="isLoading">
                            <el-form :model="sys" :rules="rules2" ref="form" label-position="top" @keyup.enter="saveForm" v-if="activeName=='sms'">
                                <el-form-item label="短信平台" prop="sms_type" class="label-item">
                                    <el-select v-model="sys.sms_type" style="width: 100%;" placeholder="请选择渠道" size="large">
                                        <el-option
                                            v-for="(item, index) in smsRegion"
                                            :key="index"
                                            :label="item.name"
                                            :value="item.type"
                                        />
                                    </el-select>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                                <div v-if="sys.sms_type == 'aliyun'">
                                    <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                        <el-input v-model="sys.AccessKeyId" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="AccessKeySecret" prop="AccessKeySecret" class="label-item">
                                        <el-input v-model="sys.AccessKeySecret" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="短信签名 Sign" prop="sign" class="label-item">
                                        <el-input v-model="sys.sign" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </div>
                                <div v-if="sys.sms_type == 'qcloud'">
                                    <el-form-item label="SdkAppID" prop="SdkAppID" class="label-item">
                                        <el-input v-model="sys.SdkAppID" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                        <el-input v-model="sys.AccessKeyId" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="AccessKeySecret" prop="AccessKeySecret" class="label-item">
                                        <el-input v-model="sys.AccessKeySecret" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="短信签名 Sign" prop="sign" class="label-item">
                                        <el-input v-model="sys.sign" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </div>
                                <div v-if="sys.sms_type == 'qiniu'">
                                    <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                        <el-input v-model="sys.AccessKeyId" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="SecretKey" prop="AccessKeySecret" class="label-item">
                                        <el-input v-model="sys.AccessKeySecret" placeholder="请输入" clearable />
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </div>
                                
                                <el-divider content-position="left">模板通知 (验证码)</el-divider>
                                <el-form-item label="模板内容" class="label-item">
                                    <el-input placeholder="请输入" v-model="sys.login_sms" disabled>
                                        <template #prepend>
                                            <el-button text icon="el-icon-document-copy" v-copy="sys.login_sms"></el-button>
                                        </template>
                                    </el-input>
                                    <div class="el-form-item-msg">按照该内容向供应商申请</div>
                                </el-form-item>
                                <el-form-item label="模板ID/Code" prop="login" class="label-item">
                                    <el-input v-model="sys.login" placeholder="请输入" clearable />
                                    <div class="el-form-item-msg">例如：SMS_139800030</div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
        </el-main>
        <el-footer style="text-align: right;">
            <el-button type="primary" :loading="isSaveing" @click="saveForm">保存</el-button>
        </el-footer>
    </el-container>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
    components: {
        scEditor
    },
    data(){
        return {
            activeName:"service",
            isSaveing: false,
            sys: {},
            smsRegion:[],
            rules2:{
                sms_type: [
                    { required: true, message: '请选择' }
                ],
                login: [
                    { required: true, message: '请输入' }
                ],
            },
            rules: {
                title: [
                    { required: true, message: '请输入' }
                ],
                tel: [
                    { required: true, message: '请输入' }
                ],
                logo: [
                    { required: true, message: '请选择', trigger:"change" }
                ],
                miitbeian: [
                    { required: true, message: '请输入' }
                ],
                beian: [
                    { required: true, message: '请输入' }
                ],
                copyright: [
                    { required: true, message: '请输入' }
                ]
            },
            isLoading:false
        }
    },
    created() {
        this.getConfig();
    },
    methods: {
        handleClick(event){
            this.activeName = event;
            this.getConfig();
        },
        saveForm() {
            this.isSaveing = true;
            this.$refs.form.validate(async (valid) => {
                console.log(valid)
                if (valid) {
                    var result = await this.$API.setting.configSave.post({type:this.activeName,data: this.sys });
                    this.isSaveing = false;
                    if(result.code == 0)
                    {
                        this.$message.error(result.msg);
                        return false;
                    }
                    if (this.activeName == "service") {
                        this.$TOOL.data.set("SERVICE", this.sys)
                    }
                    this.$message.success(result.msg);
                } else {
                    this.isSaveing = false;
                    return false;
                }
            })
        },
        async getConfig() {
            this.isLoading = true;
            var result = await this.$API.setting.config.get({ type: this.activeName });
            this.isLoading = false;
            if (result.code == 0) {
                this.$message.error(result.msg);
                return;
            }
            if (this.activeName == "sms") {
                this.smsRegion = result.data.channel
            }
            this.sys = result.data;
        },
    }
}
</script>