1

lzhe

2024-05-06 465fde7abd473338a3bfe80c8338a63d162ab2b3

1

 src/views/console/soam/addOss.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,196 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
        <p class="title-tip" v-if="isShowWrite">
            <el-icon><Warning /></el-icon>
            <span>关联后，企业微信的部门结构和成员同步给本系统。本系统企业组织架构将不再支持手动维护</span>
        </p>
        <el-form :model="addOssForm" :rules="addOssRules" :disabled="mode=='show'" ref="dialogForm" label-width="192px" label-position="center" v-if="isShowWrite">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="企业CorpId" prop="wxCorpId">
                        <el-input v-model="addOssForm.wxCorpId" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="AgentID" prop="wxAgentId">
                        <el-input v-model="addOssForm.wxAgentId" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="应用的Secret" prop="wxAppSecret">
                        <el-input v-model="addOssForm.wxAppSecret" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="通讯录的Secret" prop="wxBookSecret">
                        <el-input v-model="addOssForm.wxBookSecret" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="回调配置Token" prop="wxCallbackToken">
                        <el-input v-model="addOssForm.wxCallbackToken" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="回调配置EncodingAesKey" prop="wxAesKey">
                        <el-input v-model="addOssForm.wxAesKey" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="回调配置域名" prop="wxDomain">
                        <el-input v-model="addOssForm.wxDomain" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div v-if="!isShowWrite">
            <p class="sync-res">
                <el-icon v-if="!userResult" class="cr"><CircleClose /></el-icon>
                <el-icon v-if="userResult" class="cg"><CircleCheck /></el-icon>
                <span>员工同步</span><span>{{userResult == false?"失败":"成功"}}</span>
            </p>
            <p class="sync-res">
                <el-icon v-if="!groupResult" class="cr"><CircleClose /></el-icon>
                <el-icon v-if="groupResult" class="cg"><CircleCheck /></el-icon>
                <span>部门同步</span><span>{{groupResult == false?"失败":"成功"}}</span>
            </p>
            <p class="sync-res">
                <el-icon v-if="!postResult" class="cr"><CircleClose /></el-icon>
                <el-icon v-if="postResult" class="cg"><CircleCheck /></el-icon>
                <span>岗位同步</span><span>{{postResult == false?"失败":"成功"}}</span>
            </p>
        </div>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show' && isShowWrite" type="primary" :loading="isSaveing" @click="ossSubmit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                userResult: true,
                groupResult: true,
                postResult: true,
                isShowWrite: true,
                addOssForm: {
                    wxCorpId: "",
                    wxAgentId: "",
                    wxAppSecret: "",
                    wxBookSecret: "",
                    wxCallbackToken: "",
                    wxAesKey: "",
                    wxDomain: ""
                },
                //验证规则
                addOssRules: {
                    wxCorpId:[{required: true, message: '请输入企业CorpId'}],
                    wxAgentId:[{required: true, message: '请输入AgentID'}],
                    wxAppSecret: [{required: true, message: '请输入应用的Secret'}],
                    wxBookSecret: [{required: true, message: '请输入通讯录的Secret'}],
                    wxCallbackToken: [{required: true, message: '请输入回调配置Token'}],
                    wxAesKey: [{required: true, message: '请输入回调配置EncodingAesKey'}],
                    wxDomain: [{required: true, message: '请输入回调配置域名'}]
                },
                value1: true,
                mode: "add",
                titleMap: {
                    add: '关联',
                    edit: '修改',
                    show: '查看',
                    end: '立即同步'
                },
                visible: false,
                isSaveing: false,
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
		
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            ossSubmit(){
                var obj = Object.assign({},this.addOssForm);
                obj.appType = 1;
                obj.id = "1787499893602787330";
                obj.domain = obj.wxDomain;
                obj.wxid = "1787499893602787330";
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.post("/api/blade-sync/outer-app-config/submit",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.mode = "end";
                                this.isShowWrite = false;
                                this.userResult = res.data.userResult;
                                this.groupResult = res.data.groupResult;
                                this.postResult = res.data.postResult;
                                this.$emit('success', this.addOssForm, this.mode);
                                //this.visible = false;
                                this.$message.success("操作成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.addOssForm, data);
            }
        }
    }
</script>

<style>
.title-tip {
    padding: 0 24px;
    text-align: center;
    color: #ea3c4a;
    font-size: 12px;
    margin-bottom:20px;
}
.sync-res {
    text-align: center;
}
.sync-res .cr {
    color: red;
    margin-right: 8px;
}
.sync-res .cg {
    color: green;
    margin-right: 8px;
}
</style>

 src/views/console/soam/logo.png

 src/views/console/soam/oss-system.vue

@@ -40,36 +40,19 @@
                <div class="tabTitle">企业LOGO</div>
                <span class="logotitle">上传logo</span>
                <div class="logo1">
                    <el-upload
                        class="avatar-uploader"
                        :headers="authorization"
                        action="/api/blade-resource/oss/endpoint/put-file"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload"
                        type="0"
                    >
                    <el-upload class="avatar-uploader" :headers="authorization" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <span>建议无底色、大小180*40px</span>
                </div>
                <div class="logo2">
                    <el-upload
                        class="avatar-uploader"
                        :headers="authorization"
                        action="/api/blade-resource/oss/endpoint/put-file"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess2"
                        :before-upload="beforeAvatarUpload"
                        type="1"
                    >
                    <el-upload class="avatar-uploader" :headers="authorization" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <span>建议无底色、大小180*40px</span>
                </div>
				
            </el-tab-pane>
            <el-tab-pane label="应用设置">
                <div class="tabTitle">应用设置</div>
@@ -146,11 +129,46 @@
                    </el-form>
                 </el-card>
            </el-tab-pane>
            <el-tab-pane label="授权">
                <div class="tabTitle">授权</div>
                <div class="license-detail">
                    <div><span class="left">授予： </span>{{licenseDetail.account}}</div>
                    <div><span class="left">授权方式：</span>永久授权</div>
                    <div><span class="left">授权日期：</span>{{licenseDetail.applyDate}}~{{licenseDetail.expireDate}}</div>
                    <div><span class="left">已授权模块：</span>{{licenseDetail.moduleNames.VISION}}|{{licenseDetail.moduleNames.CPS}}</div>
                    <div><span class="left">设备标识：</span><span class="licenseCopy" @click="licenseCopy">复制</span></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="服务集成">
                <div class="tabTitle">服务集成</div>
                <div class="card">
                    <div class="top">
                        <div class="title">
                            <img src="./logo.png" />
                            <span>企业微信</span>
                            <div class="desc">CPS与企业微信关联，协作与沟通更加高效。绑定后将同步企业微信的人员名单和组织架构，并允许成员使用企业微信账号登录</div>
                        </div>
                        <el-button class="btn" @click="addOss(1)">关联</el-button>
                    </div>
                </div>
                <div class="card">
                    <div class="top">
                        <div class="title">
                            <img src="./logo.png"/>
                            <span >钉钉</span>
                            <div class="desc">CPS与钉钉关联，协作与沟通更加高效。绑定后将同步钉钉的人员名单和组织架构，并允许成员使用钉钉账号登录</div>
                        </div>
                        <el-button class="btn" @click="addOss(2)">关联</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <save-dialog v-if="dialog.save" ref="saveDialog" @success="addOssSuccess" @closed="dialog.save=false"></save-dialog>
    </div>
</template>

<script>
    import saveDialog from './addOss'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -160,6 +178,19 @@
        name: "oss-main",
        data(){
            return {
                dialog: {
                    save: false
                },
                copyStr: "",
                licenseDetail: {
                    account: "",
                    applyDate: "",
                    expireDate: "",
                    moduleNames: {
                        VISION: "",
                        CPS: ""
                    }
                },
                uploadData: {},
                logoType: "0",
                authorization: {Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"},
@@ -188,7 +219,7 @@
                temData: []
            }
        },
        components: {...ElementPlusIconsVue},
        components: {...ElementPlusIconsVue,saveDialog},
        created(){
            
        },
@@ -196,8 +227,40 @@
            this.getOssUpdata();  //文件存储
            this.setting();  //应用设置
            this.getFile();  //企业logo
            this.license(); //授权
        },
        methods: {
            addOss(type) {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open();
                })
            },
            addOssSuccess() {

            },
            licenseCopy() { 
                // å¤åˆ¶åˆ°å‰ªè´´æ¿  
                navigator.clipboard.writeText(this.copyStr).then(() => {  
                    console.log('拷贝完成');  
                }).catch(err => {  
                    console.error('Failed to copy text: ', err);  
                });
            },
            license() {
                this.$HTTP.get("/api/blade-cps/init/license-detail").then(res=> {
                    if(res.code == 200) {
                        res.data.moduleNames.VISION = JSON.stringify(res.data.moduleNames.VISION);
                        res.data.moduleNames.CPS = JSON.stringify(res.data.moduleNames.CPS);
                        this.licenseDetail = res.data;
                    }
                })
                this.$HTTP.get("/api/blade-cps/init/license-device").then(res=> {  //设备标识
                    if(res.code == 200) {
                        this.copyStr = res.data;
                    }
                })
            },
            getFile() {
                this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
                    if(res.code == 200) {
@@ -208,7 +271,6 @@
                })
            },
            handleAvatarSuccess1(resp, file) {
                this.getFile();
                this.logoType = "0";
                if(this.imageUrl1) {
                    resp.uploadMethod = "edit";
@@ -218,7 +280,6 @@
                this.handleAvatarSuccess(resp);
            },
            handleAvatarSuccess2(resp, file) {
                this.getFile();
                this.logoType = "1";
                if(this.imageUrl2) {
                    resp.uploadMethod = "edit";
@@ -232,22 +293,24 @@
                this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
                    if(res.code == 200) {
                        // å…ˆèµ‹å€¼
                        if(res.data.list.length == 0) res.data.list = [{},{}];
                        that.uploadData = res.data;
                        that.imageUrl1 = res.data.list[0].link;
                        that.imageUrl2 = res.data.list[1].link;
                        //添加接口
                        var url = "/api/blade-cps/enterprise/add";
                        if(that.logoType == "0") {
                            Object.assign({},res.data.list[0]);
                            var upData = Object.assign({},res.data.list[0]);
                            obj.type = "0";
                        }
                        if(that.logoType == "1") {
                            obj.type = "1";
                            var upData = Object.assign({},res.data.list[1]);
                        }
                        if(resp.uploadMethod == "edit") {
                            url = "/api/blade-cps/enterprise/edit";
                        }
                        that.$HTTP.post(url,resp.data).then(resJ=> {
                        that.$HTTP.post(url,upData).then(resJ=> {
                            if(resJ.code == 200) {
                                that.$message.success("操作成功");
                            }else {
@@ -258,9 +321,9 @@
                })
            },
            beforeAvatarUpload(file) {
                var isJPG = file.type === 'image/jpeg';
                var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                if (!isJPG) {
                this.$message.error('格式错误，请重新上传！');
                    this.$message.error('格式错误，请重新上传！');
                }
                return isJPG;
            },
@@ -480,4 +543,47 @@
    height: 92px;
    display: block;
}
.license-detail {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-size: 14px;
    padding-left: 70px;
}
.license-detail .left {
    width: 100px;
    display: inline-block;
    text-align: right;
    font-weight: 700;
}
.licenseCopy {
    color: #62a5a5;
    cursor: pointer;
}
.card {
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin-left: 12px;
    margin-right: 12px;
}
.card .top {
    margin-bottom: 20px;
    position: relative;
}
.card .top .title img {
    width: 42px;
    height: 42px;
    vertical-align: middle;
}
.card .top .title .desc {
    color: #bbb;
    font-size: 14px;
    margin: 20px 0;
}
.card .top .btn {
    position: absolute;
    right: 30px;
    top: 20px;
}
</style>