1

lzhe

2024-05-10 30b1c69588849ae6d6bde99ff909d8b275ebabc6

1

 src/views/notification/configuration.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,167 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-10 17:39:49
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="aposcope-main">
        <div class="debugging">
            <el-button type="primary" plain style="width: 80px;">调试</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="first">
                    <div>{{item.id == "internalMessage"?"站内信配置":"配置名称"}}</div>
                </div> 
                <div class="second">
                    <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>
                </div>
            </div>
            <div class="conBottom" v-if="!item.isBindBusiness">
                <el-button type="primary" plain style="margin-left: 20px;" @click="addallocation">新增配置</el-button>
            </div>
        </div>
    </div>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="addconfigSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    import saveDialog from './editconfiguration'
    export default {
        name: "configuration",
        data(){
            return {
                dialog: {
                    save: false
                },
                tableData: []
            }
        },
        created(){
			
        },
        mounted(){
            this.getConfiguration();
        },
        components: {
            ...ElementPlusIconsVue,saveDialog
        },
        methods: {
            addallocation() {
                ///api/blade-notify/notifier/config/sms/aliyunSms/metadata
            },
            table_edit(row){
                console.log(row)
                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/email/embedded/metadata`;
                }
                this.dialog.save = true
                this.$HTTP.get(url).then(res=> {
                    if(res.code == 200) {
                        this.dialog.save = true;
                        this.$nextTick(() => {
                            console.log(row,res.data)
                            var obj = Object.assign(row,res.data);
                            this.$refs.saveDialog.open('edit').setData(obj);
                        })
                    }
                })
            },
            getConfiguration() {
                this.$HTTP.get(`/api/blade-notify/notifier/config/service-list`).then(res=> {
                    if(res.code == 200) {
                        res.data.forEach(item=> {
                            if(item.configEntity != null) {
                                item.pname = item.configEntity.name;
                            }else {
                                item.pname = "";
                            }
                        })
                        this.tableData = res.data;
                    }
                })
            },
            addconfigSuccess() {
                this.getbusiness();
            }
        }
    }
</script>
<style scoped>
.aposcope-main {
    min-height: 100%;
    margin: 8px;
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}
.conList {
    margin: 0 16px 24px 16px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
    padding: 23px 0 15px 16px;
    box-sizing: border-box;
    height: 126px;
    width: 47%;
    position: relative;
    float: left;
}
.conTop {
    font-size: 18px;
}
.conBottom {
    display: flex;
    margin-top: 20px;
    position: absolute;
    width: 100%;
    bottom: 20px;
    left:0;
}
.conList .conBottom .first {
    width: 20%;
    padding-left: 30px;
}
.conList .conBottom div {
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #333;
}
.conList .conBottom .second {
    width: 60%;
    justify-content: flex-start;
}
.conList .conBottom .thrid {
    width: 20%;
    cursor: pointer;
}
.conList .conBottom .thrid span:nth-child(1) {
    margin-right: 16px;
}
.debugging {
    text-align: right;
    margin-bottom: 20px;
    margin-right: 30px;
}
</style>

 src/views/notification/editconfiguration.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <div class="modelTitle">
            <span>通知类型 {{addBusinessForm.businessName}}</span>
            <span>服务商 {{addBusinessForm.notifyName}}</span>
        </div>
        <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-input v-model="addBusinessForm.notifyTemplateName" placeholder="模版名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-for="item in addBusinessForm.properties">
                    <el-form-item :label="item.name">
                        <el-input v-model="addBusinessForm[item.property]" :placeholder="item.name" clearable></el-input>
                    </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="businessSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                mode: "add",
                titleMap: {
                    add: '新增',
                    edit: '编辑配置',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                addBusinessForm: {
                    notifyTemplateName: "",
                    agentId: "",
                    title: "",
                    message: ""
                },
                //验证规则
                addBusinessRules: {
                    notifyTemplateName:[{required: true, message: '请输入模版名称'}]
                },
            }
        },
        mounted() {
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            businessSubmit(){
                var obj = Object.assign({},this.addBusinessForm);
                obj.notifyType = obj.notifyType;
                obj.id = obj.notifyTemplateId;
                obj.business = obj.businessKey;
                obj.name = obj.notifyTemplateName;
                obj.provider = obj.providerType;
                obj.type = obj.notifyType;
                var template = JSON.parse(obj.template);
                for(var key in template) {
                    template[key] = obj[key];
                }
                obj.template = JSON.stringify(template);
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.put("/api/blade-notify/business-notify/modify",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.$emit('success', this.addBusinessForm, this.mode);
                                this.visible = false;
                                this.$message.success("编辑成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                Object.assign(this.addBusinessForm, data);
                console.log(this.addBusinessForm)
            }
        }
    }
</script>

<style scoped>
.modelTitle {
    padding-left: 45px;
    padding-bottom: 20px;
}
.modelTitle span {
    display: inline-block;
    width:30%;
}
</style>