gaoshp
2024-11-19 f29900986f01cf5d39b5755cec674825cef27961
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<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" @change="changeProvider">
                            <el-option v-for="item in providerList" :key="item.configEntity.provider" :label="item.name" :value="item.configEntity.provider"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务商">
                        <el-select style="width: 100%"  v-model="sendForm.type" disabled>
                            <el-option v-for="item in providerInfos" :key="item.type" :label="item.name" :value="item.type"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="接收人" prop="notifiedParty">
                        <el-input v-model="sendForm.notifiedParty" placeholder="接收人" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-for="(item,index) in sendContentForm.properties">
                    <el-form-item :label="item.name" v-if="item.property != 'content' && item.property != 'attachments'">
                        <el-input v-model="item.value" :placeholder="item.name" clearable></el-input>
                    </el-form-item>
                    <!-- 内容-富文本 -->
                    <el-form-item :label="item.name" v-if="item.property == 'content'">
                        <avue-ueditor v-model="item.value" v-bind="options"></avue-ueditor>
                    </el-form-item>
                    <!-- <el-form-item :label="item.name" v-if="item.property == 'content'">
                        <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 {
                options: {
                    //普通上传地址
                    action: "/api/blade-resource/oss/endpoint/put-file",
                    customConfig: {},//wangEditor编辑的配置
                    headers:{Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"},
                    data:{},
                    propsHttp: {
                      home:'',
                      url:'url',
                      res: 'data'
                    },
                },
                tableData: {},
                sendContentForm: {},
                providerInfos: [],
                providerList: [],
                serviceproviders: "",
                mode: "add",
                titleMap: {
                    add: '配置调试',
                    edit: '编辑配置',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                sendForm: {
                    provider: "",
                    notifiedParty: "",
                    template: "",
                    type: ""
                },
                //验证规则
                sendRules: {
                    notifiedParty:[{required: true, message: '请输入接收人'}]
                },
            }
        },
        mounted() {
        },
        methods: {
            changeProvider(val) {
                var id = "";
                this.providerList.forEach(item=> {
                    if(item.configEntity.provider == val) {
                        id = item.id;
                    }
                })
                this.getServiceProviders(id);
            },
            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.tableData = tableData;
                var providerList = [];
                tableData.forEach(item=> {
                    if(item.isBindBusiness) {
                        providerList.push(item);
                    }
                })
                this.providerList = providerList;  //通知方式list
                this.getServiceProviders(this.providerList[0].id); //获取供应商
                this.mode = mode;
                this.visible = true;
                return this
            },
            getServiceProviders(id) {
                console.log(id,this.tableData)
                this.tableData.forEach(item=> {
                    if(item.id == id) {
                        this.providerInfos = item.providerInfos;  //服务商
                        this.sendForm.provider = item.configEntity.provider;
                        this.sendForm.type = item.id;
                    }
                })
                this.$nextTick(()=> {
                    this.getMetadata(this.sendForm.provider);  //内容
                })
            },
            getMetadata(val) {
                var url = "";
                if(val == "dingTalkMessage") {
                    url = `/api/blade-notify/notifier/template/dingTalk/dingTalkMessage/config/metadata`;
                }else if(val == "qyTextMessage") {
                    url = `/api/blade-notify/notifier/template/weiXinQY/qyTextMessage/config/metadata`;
                }else if(val == "systemDefault") {
                    url = `/api/blade-notify/notifier/template/internalMessage/systemDefault/config/metadata`;
                }else if(val == "embedded") {
                    url = `/api/blade-notify/notifier/template/email/embedded/config/metadata`;
                }
                this.$HTTP.get(url).then(res=> {
                    if(res.code == 200) {
                        this.sendContentForm = res.data;
                        console.log(this.sendContentForm,8)
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //表单提交方法
            sendSubmit(){
                var template = {};
                this.sendContentForm.properties.forEach(item=> {
                    template[item['property']] = item.value;
                })
                var obj = {
                    notifiedParty: this.sendForm.notifiedParty,
                    provider: this.sendForm.provider,
                    template: JSON.stringify(template),
                    type: this.sendForm.type
                }
                var id = "";
                this.providerList.forEach(item=> {
                    if(item.id == this.sendForm.type){
                        id = item.configEntity.id;
                    }
                })
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        this.$HTTP.post(`/api/blade-notify/notifier/${id}/send`,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>