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">
                <template v-if="stationList.length > 0">
                    <el-row :gutter="20">
                        <div v-for="item in stationList" class="text item">
                            <el-col :span="8">
                                <el-card class="box-card" shadow="hover" style="margin-bottom: 20px;">
                                    <div slot="header" class="clearfix">
                                        <span>站点信息</span>
                                        <el-button style="float: right; padding: 3px 0" type="text"
                                            @click="clickDrawer(item.stationId, item.stationName)">打开推送菜单</el-button>
                                    </div>
                                    <el-descriptions class="margin-top" :column="1" border>
                                        <el-descriptions-item label="站点id">{{ item.stationId }}</el-descriptions-item>
                                        <el-descriptions-item label="站点名称">{{ item.stationName }}</el-descriptions-item>
                                        <!--<el-descriptions-item label="操作">
                                            <el-button @click="clickDrawer(item.stationId, item.stationName)" type="primary" style="margin-left: 16px;">
                                                打开推送菜单
                                            </el-button>
                                        </el-descriptions-item>-->
                                    </el-descriptions>
                                </el-card>
                            </el-col>
                        </div>
                    </el-row>
                </template>
                <el-empty description="暂无数据" v-else></el-empty>

                <el-drawer :title="drawerTitle" :visible.sync="drawer" :direction="direction">
                    <el-row>
                        <el-col :span="24">
                            <el-card class="box-card" style="margin: 0 20px;" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>推送充电站信息变化</span>
                                    <el-button style="float: right; padding: 3px 0" type="text"
                                        @click="clickNotificationStationInfo">推送</el-button>
                                </div>
                                <div class="text item">
                                    推送站点最新信息到第三方平台
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>推送设备状态</span>
                                    <el-button style="float: right; padding: 3px 0" type="text"
                                        @click="clickNotificationStationStatus">推送</el-button>
                                </div>
                                <el-form ref="notificationForm" :model="notificationForm" label-width="20%">
                                    <el-form-item label="充电桩编号" class="getCard">
                                        <el-input v-model="notificationForm.pileSn"></el-input>
                                    </el-form-item>
                                    <!--<el-form-item>
                                        <el-button type="primary" @click="clickNotificationStationStatus">推送设备状态</el-button>
                                    </el-form-item>-->
                                </el-form>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>推送设备充电中状态</span>
                                    <el-button style="float: right; padding: 3px 0" type="text"
                                        @click="clickNotificationConnectorChargeStatus">推送</el-button>
                                </div>
                                <el-form ref="notificationForm" :model="notificationForm" label-width="20%">
                                    <el-form-item label="充电枪口编号">
                                        <el-input v-model="notificationForm.pileConnectorCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="充电枪口状态" class="getCard">
                                        <el-input v-model="notificationForm.status"></el-input>
                                    </el-form-item>
                                    <!--<el-form-item>
                                        <el-button type="primary" @click="clickNotificationConnectorChargeStatus">推送设备充电中状态</el-button>
                                    </el-form-item>-->
                                </el-form>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>推送充电订单信息</span>
                                    <el-button style="float: right; padding: 3px 0" type="text"
                                        @click="clickNotificationChargeOrderInfo">推送</el-button>
                                </div>
                                <el-form ref="notificationForm" :model="notificationForm" label-width="20%">
                                    <el-form-item label="订单编号" class="getCard">
                                        <el-input v-model="notificationForm.orderCode"></el-input>
                                    </el-form-item>
                                    <!--<el-form-item>
                                        <el-button type="primary" @click="clickNotificationChargeOrderInfo">推送充电订单信息</el-button>
                                    </el-form-item>-->
                                </el-form>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-card class="box-card" style="margin: 20px 20px 0 20px;" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>推送站点费率</span>
                                    <el-button style="float: right; padding: 3px 0" type="text"
                                        @click="clickNotificationStationFee">推送</el-button>
                                </div>
                                <div class="text item">
                                    推送站点最新计费模板到第三方平台
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-drawer>
            </el-tab-pane>

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

<script>


import { addSecret, getSecret, selectStationList, updateSecret } from "@/api/thirdParty/secret";
import { generateRandomID, isEmptyString } from "@/utils/common";
import Template from "@/views/billing/template";
import {
    notificationChargeOrderInfo,
    notificationConnectorChargeStatus, notificationStationFee,
    notificationStationInfo,
    notificationStationStatus
} from "@/api/thirdParty/notification";

export default {
    dicts: ["third_party_type"],
    components: { Template },
    data() {
        return {
            activeName: "secret",
            id: this.$route.params.id,
            platformName: this.$route.params.platformName,
            // 表单参数
            form: {},
            notificationStationId: null,
            notificationForm: {},
            // 表单校验
            rules: {},
            stationList: [],
            platformType: null,
            drawer: false,
            direction: 'rtl',
            drawerTitle: null,
        };
    },
    created() {
        this.updateTitle();
    },
    methods: {
        // 提交
        onSubmit() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            console.log(this.notificationForm);
        },
        // 点击推送站点信息
        clickNotificationStationInfo() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            notificationStationInfo(this.notificationForm).then(response => {
                this.$modal.msgSuccess("操作成功");
            });
        },
        // 点出推送设备状态
        clickNotificationStationStatus() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            notificationStationStatus(this.notificationForm).then(response => {
                this.$modal.msgSuccess("操作成功");
            });
        },
        // 点击推送设备充电中状态
        clickNotificationConnectorChargeStatus() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            notificationConnectorChargeStatus(this.notificationForm).then(response => {
                this.$modal.msgSuccess("操作成功");
            });
        },
        // 点击推送订单信息
        clickNotificationChargeOrderInfo() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            notificationChargeOrderInfo(this.notificationForm).then(response => {
                this.$modal.msgSuccess("操作成功");
            });
        },
        // 点击推送站点费率
        clickNotificationStationFee() {
            this.notificationForm.stationId = this.notificationStationId;
            this.notificationForm.platformType = this.platformType;
            notificationStationFee(this.notificationForm).then(response => {
                this.$modal.msgSuccess("操作成功");
            });
        },
        // 点击打开 通知菜单
        clickDrawer(stationId, stationName) {
            // console.log("站点id：", stationId);
            this.drawerTitle = "同步【" + stationName + "】站点的数据到【" + this.platformName + "】";
            this.drawer = true;
            this.notificationStationId = stationId;
        },
        // Drawer  :before-close="handleClose"
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 查询站点列表
        queryStationList() {
            const param = {
                platformType: this.platformType
            };
            selectStationList(param).then(response => {
                this.stationList = response.data;
                console.log(this.stationList);
            });
        },
        // 生成密钥
        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("handleClick", tab, event);
            this.initializeData(tab.name);
        },
        initializeData(name) {
            if (name === "secret") {
                this.querySecretDetail();
            } else if (name === "notification") {
                this.queryStationList();
            }
        },
        querySecretDetail() {
            getSecret(this.id).then(response => {
                this.form = response.data;
                this.platformType = response.data.platformType;
            });
        },
        // 更新页面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() {
        this.initializeData(this.activeName);
    },
};
</script>

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

::v-deep .el-card__body {
    padding: 20px !important;
}

.getCard {
    margin-bottom: 0px;
}
</style>