print-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="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="wechat" v-loading="isLoading">
                            <el-form :model="sys" :rules="rules2" ref="form" label-position="top" @keyup.enter="saveForm" v-if="activeName=='wechat'">
                                <el-row :gutter="15">
                                    <el-col :span="this.$store.state.global.ismobile?24:12">
                                        <fieldset>
                                            <legend><el-tag>公众号配置</el-tag></legend>
                                            <el-form-item label="Token(接口认证令牌)" prop="token">
                                                <el-input v-model="sys.token" clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">公众号平台与系统对接认证Token，请优先填写此参数并保存，然后再在微信公众号平台操作对接。</div>
                                            </el-form-item>
                                            <el-form-item label="AppId(公众号 APPID)" prop="appid">
                                                <el-input v-model="sys.appid" clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">公众号APPID是所有接口必要参数，可以在公众号平台 [ 开发 > 基本配置 ] 页面获取。</div>
                                            </el-form-item>
                                            <el-form-item label="AppSecret(公众号 Secret)" prop="secret">
                                                <el-input v-model="sys.secret" show-password clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">公众号应用密钥是所有接口必要参数，可以在公众号平台 [ 开发 > 基本配置 ] 页面授权后获取。</div>
                                            </el-form-item>
                                            <el-form-item label="AesKey(消息加密密钥)" prop="aeskey">
                                                <el-input v-model="sys.aeskey" clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">若开启了消息加密时必需填写，消息加密密钥必需填写并保持与公众号平台一致。</div>
                                            </el-form-item>
                                        </fieldset>
                                    </el-col>
                                    <el-col :span="this.$store.state.global.ismobile?24:12">
                                        <fieldset>
                                            <legend><el-tag>支付配置</el-tag></legend>
                                            <el-form-item label="MCH_ID(微信商户账号)" prop="mch_id">
                                                <el-input v-model="sys.mch_id" clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">微信商户账号，需要在微信商户平台获取，MCH_ID 与 APPID 匹配</div>
                                            </el-form-item>
                                            <el-form-item label="MCH_KEY(微信商户密钥)" prop="mch_key">
                                                <el-input v-model="sys.mch_key" show-password clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">微信商户 V2 密钥，需要在微信商户平台操作设置操作密码并获取商户接口密钥</div>
                                            </el-form-item>
                                            <el-form-item label="商户KEY证书" prop="cert_key">
                                                <scUploadFile v-model="sys.cert_key" tip="请上传apiclient_key.pem文件" btnTxt="上传KEY证书" accept=".pem" :apiObj="$API.common.uploadFile" :multiple="false" :limit="1"></scUploadFile>
                                                <div class="el-form-item-msg"></div>
                                            </el-form-item>
                                            <el-form-item label="商户CRET证书" prop="cert_cert">
                                                <scUploadFile v-model="sys.cert_cert" tip="请上传apiclient_cert.pem文件" btnTxt="上传CERT证书" accept=".pem" :apiObj="$API.common.uploadFile" :multiple="false" :limit="1"></scUploadFile>
                                                <div class="el-form-item-msg"></div>
                                            </el-form-item>
                                        </fieldset>
                                    </el-col>
                                    <el-col :span="this.$store.state.global.ismobile?24:12">
                                        <fieldset>
                                            <legend><el-tag>小程序配置</el-tag></legend>
                                            <el-form-item label="AppId(小程序 APPID)" prop="mini_appid">
                                                <el-input v-model="sys.mini_appid" clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">小程序后台获取</div>
                                            </el-form-item>
                                            <el-form-item label="AppSecret(小程序密钥)" prop="mini_secret">
                                                <el-input v-model="sys.mini_secret" show-password clearable placeholder="请输入"></el-input>
                                                <div class="el-form-item-msg">小程序后台获取</div>
                                            </el-form-item>
                                            <el-form-item label="分享图片" prop="share">
                                                <sc-upload v-model="sys.share"></sc-upload>
                                            </el-form-item>
                                        </fieldset>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                        
                    </el-tabs>
                </el-card>
        </el-main>
        <el-footer style="text-align: right;">
            <el-button type="primary" size="large" :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:{
                token: [
                    { required: true, message: '请输入' }
                ],
                appid: [
                    { required: true, message: '请输入' }
                ],
                secret: [
                    { required: true, message: '请输入' }
                ],
                mch_id: [
                    { required: true, message: '请输入' }
                ],
                mch_key: [
                    { required: true, message: '请输入' }
                ],
                mini_appid: [
                    { required: true, message: '请输入' }
                ],
                mini_secret: [
                    { 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>