jsowell-charger-web/jsowell-ui/src/views/thirdparty/secret/detail.vue

<template>
    <div class="app-container Input">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="密钥配置" name="secret">
                <el-form ref="form" :model="form" :rules="rules" label-width="230px">
                    <!-- 上 -->
                    <el-col :span="24">
                        <el-form-item label="对接平台名称" prop="platformName">
                            <el-input v-model="form.platformName" placeholder="请输入对接平台名称" style="width: 90%"/>
                        </el-form-item>
                        <el-form-item label="接口地址前缀" prop="urlPrefix">
                            <el-input v-model="form.urlPrefix" placeholder="请输入接口地址前缀" style="width: 90%"/>
                        </el-form-item>
                        <el-form-item label="对接平台标识(OperatorId)" prop="theirOperatorId">
                            <el-input v-model="form.theirOperatorId" placeholder="请输入对接平台标识(OperatorId)"
                                      style="width: 90%"/>
                        </el-form-item>
                    </el-col>
                    <!-- 左侧 -->
                    <el-col :span="12">
                        <el-card class="box-card" style="margin-right: 50px;">
                            <div slot="header" class="clearfix">对接平台密钥信息</div>
                            <el-form-item label="唯一识别密钥(OperatorSecret)" prop="theirOperatorSecret"
                                          style="margin-top: 20px;">
                                <el-input v-model="form.theirOperatorSecret"
                                          placeholder="请输入对接平台生成的唯一识别密钥(OperatorSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="消息密钥(DataSecret)" prop="theirDataSecret">
                                <el-input v-model="form.theirDataSecret"
                                          placeholder="请输入对接平台生成的消息密钥(DataSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="初始化向量(DataSecretIv)" prop="theirDataSecretIv">
                                <el-input v-model="form.theirDataSecretIv"
                                          placeholder="请输入对接平台生成的初始化向量(DataSecretIv)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="签名密钥(SigSecret)" prop="theirSigSecret">
                                <el-input v-model="form.theirSigSecret"
                                          placeholder="请输入对接平台生成的签名密钥(SigSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                        </el-card>
                    </el-col>
                    <!-- 右侧 -->
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>我方生成密钥信息</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                           @click="clickGenerateSecret">生成密钥
                                </el-button>
                            </div>
                            <el-form-item label="唯一识别密钥(OperatorSecret)" prop="ourOperatorSecret"
                                          style="margin-top: 20px;">
                                <el-input v-model="form.ourOperatorSecret"
                                          placeholder="请输入我方生成的唯一识别密钥(OperatorSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="消息密钥(DataSecret)" prop="ourDataSecret">
                                <el-input v-model="form.ourDataSecret"
                                          placeholder="请输入我方生成的消息密钥(DataSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="初始化向量(DataSecretIv)" prop="ourDataSecretIv">
                                <el-input v-model="form.ourDataSecretIv"
                                          placeholder="请输入我方生成的初始化向量(DataSecretIv)"
                                          style="width: 90%"/>
                            </el-form-item>
                            <el-form-item label="签名密钥(SigSecret)" prop="ourSigSecret">
                                <el-input v-model="form.ourSigSecret" placeholder="请输入我方生成的签名密钥(SigSecret)"
                                          style="width: 90%"/>
                            </el-form-item>
                        </el-card>
                    </el-col>
                </el-form>
                <div class="save">
                    <el-button type="primary" @click="submitForm" style="margin-top: 20px;">保存</el-button>
                </div>
            </el-tab-pane>

            <el-tab-pane label="同步数据" name="notification">

            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>


import {addSecret, getSecret, updateSecret} from "@/api/thirdParty/secret";
import {generateRandomID, isEmptyString} from "@/utils/common";

export default {
    dicts: ["third_party_type"],
    components: {},
    data() {
        return {
            activeName: "secret",
            id: this.$route.params.id,
            platformName: this.$route.params.platformName,
            // 表单参数
            form: {},
            // 表单校验
            rules: {}
        };
    },
    created() {
        this.updateTitle();
        this.querySecretDetail();
    },
    methods: {
        // 生成密钥
        clickGenerateSecret() {
            // 是否有值，默认false
            let hasValue = false;
            if (!isEmptyString(this.form.ourOperatorSecret) || !isEmptyString(this.form.ourDataSecret)
                || !isEmptyString(this.form.ourDataSecretIv) || !isEmptyString(this.form.ourSigSecret)) {
                // 任一字段不为空，hasValue为true
                hasValue = true;
            }
            if (hasValue) {
                // 有值时弹出提示框
                this.$confirm('当前已经有值, 此操作将覆盖原值, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 点击确定生成密钥
                    this.generateSecret();
                });
            } else {
                // 没有值，直接生成密钥
                this.generateSecret();
            }
        },
        // 生成密钥方法
        generateSecret() {
            this.form.ourOperatorSecret = generateRandomID(16);
            this.form.ourDataSecret = generateRandomID(16);
            this.form.ourDataSecretIv = generateRandomID(16);
            this.form.ourSigSecret = generateRandomID(16);
        },
        handleClick(tab, event) {
            console.log(tab, event);
            // this.initializeData(tab.name);
        },
        querySecretDetail() {
            getSecret(this.id).then(response => {
                this.form = response.data;
                this.open = true;
                // this.title = "修改对接三方平台配置";
            });
        },
        // 更新页面title显示
        updateTitle() {
            const platformName = this.platformName;
            const title = "【" + platformName + "】平台配置";
            const route = Object.assign({}, this.$route, {title: `${title}`});
            this.$store.dispatch("tagsView/updateVisitedView", route);
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateSecret(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addSecret(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        }
    },
    mounted() {

    },
};
</script>

<style scoped lang="scss">
.save {
    text-align: right;
}
</style>