1

lzhe

2024-05-12 d58f901f9614d6fd3ad2334a2e4592addb77d8fa

1

 src/views/notification/configuration.vue

@@ -9,13 +9,13 @@
<template>
    <div class="aposcope-main">
        <div class="debugging">
            <el-button type="primary" plain style="width: 80px;">调试</el-button>
            <el-button type="primary" plain style="width: 80px;" @click="debugerBtn">调试</el-button>
        </div>
        <div class="conList" v-for="item in tableData">
            <div class="conTop">
                <span class="titile">{{item.name}}</span>
            </div>
            <div class="conBottom" v-if="item.isBindBusiness">
            <div class="conBottom" v-if="item.configEntity != null">
                <div class="first">
                    <div>{{item.id == "internalMessage"?"站内信配置":"配置名称"}}</div>
                </div> 
@@ -23,16 +23,17 @@
                    <div>{{item.pname}}</div>
                </div>
                <div class="thrid" v-if="item.id != 'internalMessage'">
                    <span @click="table_edit(item, index)"><el-icon><EditPen /></el-icon>编辑</span>
                    <span><el-icon><Delete /></el-icon>删除</span>
                    <span @click="table_edit(item, index ,2)"><el-icon><EditPen /></el-icon>编辑</span>
                    <span @click="table_del(item,index)"><el-icon><Delete /></el-icon>删除</span>
                </div>
            </div>
            <div class="conBottom" v-if="!item.isBindBusiness">
                <el-button type="primary" plain style="margin-left: 20px;" @click="addallocation">新增配置</el-button>
            <div class="conBottom" v-if="item.configEntity == null">
                <el-button type="primary" plain style="margin-left: 20px;" @click="table_edit(item, index ,1)">新增配置</el-button>
            </div>
        </div>
    </div>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="addconfigSuccess" @closed="dialog.save=false"></save-dialog>
    <save-debug v-if="dialog.debugging" ref="saveDebugging" @success="adddebugSuccess" @closed="dialog.debugging=false"></save-debug>
</template>
<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
@@ -41,12 +42,14 @@
        icons.push(key)
    }
    import saveDialog from './editconfiguration'
    import saveDebug from './sendDebug'
    export default {
        name: "configuration",
        data(){
            return {
                dialog: {
                    save: false
                    save: false,
                    debugging: false
                },
                tableData: []
            }
@@ -58,19 +61,31 @@
            this.getConfiguration();
        },
        components: {
            ...ElementPlusIconsVue,saveDialog
            ...ElementPlusIconsVue,saveDialog,saveDebug
        },
        methods: {
            addallocation() {
                ///api/blade-notify/notifier/config/sms/aliyunSms/metadata
            table_del(item,index) {
                this.$confirm(`确定将选择数据删除?`, '', {
                    type: 'warning'
                }).then(() => {
                    this.$HTTP.delete(`/api/blade-notify/notifier/config/${item.configEntity.id}`).then(res=> {
                        if(res.code == 200) {
                            this.getConfiguration();
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                }).catch(() => {

                })
            },
            table_edit(row){
            table_edit(row,index,type){
                if(row.name == "钉钉") {
                    var url = `/api/blade-notify/notifier/config/dingTalk/dingTalkMessage/metadata`;
                }else if(row.name == "企业微信") {
                    var url = `/api/blade-notify/notifier/config/weiXinQY/qyTextMessage/metadata`;
                }else if(row.name == "站内信") {
                    //var url = `/api/blade-notify/notifier/template/internalMessage/systemDefault/config/metadata`;
                }else if(row.name == "短信") {
                    var url = `/api/blade-notify/notifier/config/sms/aliyunSms/metadata`;
                }else if(row.name == "邮件") {
                    var url = `/api/blade-notify/notifier/config/email/embedded/metadata`;
                }
@@ -80,9 +95,19 @@
                        this.dialog.save = true;
                        this.$nextTick(() => {
                            var obj = Object.assign(res.data,row);
                            this.$refs.saveDialog.open('edit').setData(obj);
                            if(type == 1) {
                                this.$refs.saveDialog.open('add',obj);
                            }else if(type == 2) {  //编辑
                                this.$refs.saveDialog.open('edit',{}).setData(obj);
                            }
                        })
                    }
                })
            },
            debugerBtn() {
                this.dialog.debugging = true;
                this.$nextTick(() => {
                    this.$refs.saveDebugging.open(this.tableData);
                })
            },
            getConfiguration() {
@@ -100,7 +125,10 @@
                })
            },
            addconfigSuccess() {
                this.getbusiness();
                this.getConfiguration();
            },
            adddebugSuccess() {

            }
        }
    }

 src/views/notification/editconfiguration.vue

@@ -4,7 +4,7 @@
            <span>通知类型 {{addBusinessForm.name}}</span>
            <span>
                æœåŠ¡å•†
                <el-select style="width: 80%"  v-model="serviceproviders" disabled>
                <el-select style="width: 80%"  v-model="serviceproviders" :disabled="mode != 'add'">
                    <el-option v-for="item in addBusinessForm.providerInfos" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
            </span>
@@ -12,7 +12,7 @@
        <el-form :model="addBusinessForm" :rules="addBusinessRules" :disabled="mode=='show'" ref="dialogForm" label-width="140px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="请输入配置名称" prop="notifyTemplateName">
                    <el-form-item label="请输入配置名称" prop="pname">
                        <el-input v-model="addBusinessForm.pname" placeholder="模版名称" clearable></el-input>
                    </el-form-item>
                </el-col>
@@ -57,7 +57,7 @@
                serviceproviders: "",
                mode: "add",
                titleMap: {
                    add: '新增',
                    add: '新增配置',
                    edit: '编辑配置',
                    show: '查看'
                },
@@ -73,7 +73,7 @@
                },
                //验证规则
                addBusinessRules: {
                    notifyTemplateName:[{required: true, message: '请输入模版名称'}]
                    pname:[{required: true, message: '请输入模版名称'}]
                },
            }
        },
@@ -91,23 +91,53 @@
                this.addBusinessForm.configuration[index].value.splice(index1,1);
            },
            //显示
            open(mode='add'){
            open(mode='add',obj){
                if(mode == 'add') {
                    this.addBusinessForm = obj;
                    this.$nextTick(()=> {
                        this.serviceproviders = this.addBusinessForm.providerInfos[0].id;
                    })
                    var setArr = [];
                    obj.properties.forEach(item=> {
                        setArr.push({pname:item.name,value: "",name: item.name})
                    })
                    this.addBusinessForm.configuration = setArr;
                }
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            businessSubmit(){
                var obj = Object.assign({},this.addBusinessForm);
                console.log(this.addBusinessForm);
                var configuration = {};
                this.addBusinessForm.configuration.forEach(item=> {
                    configuration[item.name] = item.value;
                })
                var obj = {
                    configuration: {appKey: "3aa", appSecret: "4a"},
                    id: "1001",
                    name: "默认",
                    provider: "dingTalkMessage",
                    type: "dingTalk"
                    configuration: configuration,
                }
                return;
                if(this.mode == 'edit') {
                    obj.id = this.addBusinessForm.configEntity.id;
                    obj.name = this.addBusinessForm.configEntity.name;
                    obj.provider = this.addBusinessForm.configEntity.provider;
                    obj.type = this.addBusinessForm.configEntity.type;
                    if(this.addBusinessForm.configEntity.type == "email") {  //邮件
                        var newArr = [];
                        configuration.properties.forEach(item=> {
                            var formattedObject = {};
                            item.forEach(item => {  
                              formattedObject[item.name] = item.value;  
                            });
                            newArr.push(formattedObject);
                        })
                        configuration.properties = newArr;
                    }
                }
                if(this.mode == 'add') {  //新增
                    obj.name = this.addBusinessForm.pname;
                    obj.provider = this.serviceproviders;
                    obj.type = this.addBusinessForm.id;
                }
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
@@ -163,7 +193,6 @@
                        }
                    })
                })
                console.log(data.configuration,data)
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                Object.assign(this.addBusinessForm,data);
                this.$nextTick(()=> {

 src/views/notification/sendDebug.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="sendForm" :rules="sendRules" :disabled="mode=='show'" ref="dialogForm" label-width="140px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="通知方式">
                        <el-select style="width: 100%"  v-model="sendForm.provider">
                            <el-option v-for="item in providerList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务商">
                        <el-select style="width: 100%"  v-model="sendForm.type">
                            <el-option v-for="item in providerInfos" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="接收人">
                        <el-input v-model="sendForm.pname" placeholder="接收人" clearable></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-for="(item,index) in sendForm.configuration">
                    <el-form-item :label="item.pname" v-if="item.name != 'properties'">
                        <el-input v-model="item.value" :placeholder="item.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item :label="item.pname" v-if="item.name == 'properties'">
                        <div class="array-content">
                            <el-row v-for="(item1,index1) in item.value">
                                <el-col v-for="(item2,index2) in item1" :span="7">
                                    <el-input v-model="item2.value" placeholder ="请输入" style="width: 76%;margin-right: 10px;"></el-input>
                                    <el-icon style="vertical-align: -3px;"><ArrowRightBold /></el-icon>
                                </el-col>
                                <el-col :span="3" class="otherBtn">
                                    <el-button type="primary" size="small" plain @click="addpro(index,index1)" v-show="index1 == (item.value.length-1)">添加</el-button>
                                    <el-button type="danger" size="small" style="margin-left:0;" plain @click="delData(index,index1)" v-show="index1 != (item.value.length-1)">删除</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form-item>
                </el-col> -->
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="sendSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                providerInfos: [],
                providerList: [],
                serviceproviders: "",
                mode: "add",
                titleMap: {
                    add: '配置调试',
                    edit: '编辑配置',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                sendForm: {
                    provider: ""
                },
                //验证规则
                sendRules: {
                    pname:[{required: true, message: '请输入接收人'}]
                },
            }
        },
        mounted() {
        },
        methods: {
            addpro(index,index1) {
                this.sendForm.configuration[index].value.push([
                    {name: 'name', value: ''},
                    {name: 'value', value: ''},
                    {name: 'description', value: ''},
                ])
            },
            delData(index,index1) {
                this.sendForm.configuration[index].value.splice(index1,1);
            },
            //显示
            open(tableData,mode='add'){
                this.providerInfos = tableData[0].providerInfos;  //服务商
                this.getMetadata();  //内容
                var providerList = [];
                tableData.forEach(item=> {
                    if(item.isBindBusiness) {
                        providerList.push(item);
                    }
                })
                this.providerList = providerList;
                this.$nextTick(()=> {
                    this.sendForm.provider = this.providerList[0].id;
                    this.sendForm.type = this.providerInfos[0].id;

                    console.log(this.providerList,this.sendForm.provider)
                })
                this.mode = mode;
                this.visible = true;
                return this
            },
            getMetadata() {
                this.$HTTP.get(`/api/blade-notify/notifier/template/dingTalk/dingTalkMessage/config/metadata`).then(res=> {
                    if(res.code == 200) {
						
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //表单提交方法
            sendSubmit(){
                var configuration = {};
                this.sendForm.configuration.forEach(item=> {
                    configuration[item.name] = item.value;
                })
                var obj = {
                    configuration: configuration,
                }
                if(this.mode == 'edit') {
                    obj.id = this.sendForm.configEntity.id;
                    obj.name = this.sendForm.configEntity.name;
                    obj.provider = this.sendForm.configEntity.provider;
                    obj.type = this.sendForm.configEntity.type;
                    if(this.sendForm.configEntity.type == "email") {  //邮件
                        var newArr = [];
                        configuration.properties.forEach(item=> {
                            var formattedObject = {};
                            item.forEach(item => {  
                              formattedObject[item.name] = item.value;  
                            });
                            newArr.push(formattedObject);
                        })
                        configuration.properties = newArr;
                    }
                }
                if(this.mode == 'add') {  //新增
                    obj.name = this.sendForm.pname;
                    obj.provider = this.serviceproviders;
                    obj.type = this.sendForm.id;
                }
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.put("/api/blade-notify/notifier/config",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.$emit('success', this.sendForm, this.mode);
                                this.visible = false;
                                this.$message.success("编辑成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
				
            }
        },
        components: {},
    }
</script>

<style scoped>
.modelTitle {
    padding-left: 45px;
    padding-bottom: 20px;
}
.modelTitle span {
    display: inline-block;
    width:50%;
}
.array-content {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    min-height: 200px;
    width: 100%;
    padding: 12px;
}
.otherBtn {
    margin-bottom: 12px;
}
</style>