Skip to content

Commit

Permalink
Merge branch 'main' of github.com:koderover/zadig-portal into variabl…
Browse files Browse the repository at this point in the history 
…e-choice

Signed-off-by: Jody <[email protected]>
  • Loading branch information
@facethesunsea
facethesunsea committed Jan 17, 2022
2 parents 495d6dd + 5b724de commit 0827566
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 154 deletions.
334 changes: 181 additions & 153 deletions src/components/projects/edit_pipeline/product_pipeline/switch_tab/notify.vue
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,112 @@
<template>
<div class="notify">
<el-card class="box-card">
<div>
<div class="script dashed-container">
<span class="title">通知</span>
</div>
<div class="notify dashed-container">
<div class="notify-container">
<el-form :model="notify"
:rules="notifyRules"
label-position="top"
ref="notify">
<el-form-item prop="webhook_type">
<span slot="label">
<span>Webhook 类型：</span>
</span>
<el-select v-model="notify.webhook_type"
@change="clearForm"
style="width: 350px;"
size="small"
placeholder="请选择类型">
<el-option label="钉钉"
value="dingding">
</el-option>
<el-option label="企业微信"
value="wechat">
</el-option>
<el-option label="飞书"
value="feishu">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='feishu'"
prop="feishu_webhook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看飞书 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.feishu_webhook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='wechat'"
prop="weChat_webHook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看企业微信 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.weChat_webHook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='dingding'"
prop="dingding_webhook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看钉钉 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.dingding_webhook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='dingding'"
prop="at_mobiles">
<span slot="label">
<span>@指定成员（输入指定通知接收人的手机号码，使用 ; 分割，为空则全员通知）：</span>
</span>
<el-input style="width: 350px;"
type="textarea"
:rows="3"
placeholder="输入指定通知接收人的手机号码，使用用 ; 分割"
v-model="mobileStr">
</el-input>
</el-form-item>
<el-card class="notify box-card">
<div class="script dashed-container" v-if="showTitle">
<span class="title">通知</span>
</div>
<div class="notify dashed-container">
<div class="notify-container">
<el-form :model="notify"
:rules="notifyRules"
label-position="top"
ref="notify">
<el-form-item prop="webhook_type">
<span slot="label">
<span>Webhook 类型：</span>
</span>
<el-select v-model="notify.webhook_type"
@change="clearForm"
style="width: 350px;"
size="small"
placeholder="请选择类型">
<el-option label="钉钉"
value="dingding">
</el-option>
<el-option label="企业微信"
value="wechat">
</el-option>
<el-option label="飞书"
value="feishu">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='feishu'"
prop="feishu_webhook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看飞书 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.feishu_webhook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='wechat'"
prop="weChat_webHook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看企业微信 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.weChat_webHook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='dingding'"
prop="dingding_webhook">
<span slot="label">
<span>Webhook 地址：
<el-tooltip class="item"
effect="dark"
content="点击查看钉钉 webhook 配置文档"
placement="top">
<a class="help-link"
href="https://docs.koderover.com/zadig/project/workflow/#%E7%8A%B6%E6%80%81%E9%80%9A%E7%9F%A5"
target="_blank"><i class="el-icon-question"></i></a>
</el-tooltip></span>
</span>
<el-input style="width: 350px;"
size="small"
v-model="notify.dingding_webhook"></el-input>
</el-form-item>
<el-form-item v-if="notify.webhook_type==='dingding'"
prop="at_mobiles">
<span slot="label">
<span>@指定成员（输入指定通知接收人的手机号码，使用 ; 分割，为空则全员通知）：</span>
</span>
<el-input style="width: 350px;"
type="textarea"
:rows="3"
placeholder="输入指定通知接收人的手机号码，使用用 ; 分割"
v-model="mobileStr">
</el-input>
</el-form-item>

<el-form-item prop="notify_type"
label="通知事件：">
<el-checkbox :indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group @change="handleCheckedValueChange"
v-model="notify.notify_type">
<el-checkbox label="passed">任务成功</el-checkbox>
<el-checkbox label="failed">任务失败</el-checkbox>
<el-checkbox label="timeout">任务超时</el-checkbox>
<el-checkbox label="cancelled">任务取消</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</div>
<el-form-item prop="notify_type"
label="通知事件：">
<el-checkbox :indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group @change="handleCheckedValueChange"
v-model="notify.notify_type">
<el-checkbox v-for="type in notifyType" :key="type.label" :label="type.label">{{type.desc}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</div>
</el-card>
</template>

<script type="text/javascript">
Expand All @@ -122,6 +115,28 @@ import bus from '@utils/eventBus'
export default {
data () {
return {
notifyType: [
{
label: 'passed',
desc: '任务成功'
},
{
label: 'failed',
desc: '任务失败'
},
{
label: 'timeout',
desc: '任务超时'
},
{
label: 'cancelled',
desc: '任务取消'
},
{
label: 'changed',
desc: '状态变更'
}
],
isIndeterminate: true,
notifyRules: {
webhook_type: [
Expand Down Expand Up @@ -170,7 +185,10 @@ export default {
computed: {
checkAll: {
get: function () {
return this.notify.notify_type.length === 4
return this.notify.notify_type.length === this.notifyType.length
},
set (val) {
return val
}
},
'notify.at_mobiles': {
Expand Down Expand Up @@ -200,13 +218,13 @@ export default {
},
methods: {
handleCheckAllChange (val) {
this.notify.notify_type = val ? ['timeout', 'passed', 'failed', 'cancelled'] : []
this.notify.notify_type = val ? this.notifyType.map(type => type.label) : []
this.isIndeterminate = false
},
handleCheckedValueChange (value) {
const typeLength = this.notifyType.length
const checkedCount = value.length
this.checkAll = (checkedCount === 4)
this.isIndeterminate = (checkedCount > 0 && checkedCount < 4)
this.isIndeterminate = (checkedCount > 0 && checkedCount < typeLength)
},
clearForm () {
this.$refs.notify.clearValidate()
Expand All @@ -220,6 +238,14 @@ export default {
editMode: {
required: true,
type: Boolean
},
showTitle: {
type: Boolean,
default: true
},
fromWorkflow: {
type: Boolean,
default: true
}
},
Expand All @@ -229,6 +255,10 @@ export default {
bus.$emit('receive-tab-check:notify', valid)
})
})
// workflow don't show status changed
if (this.fromWorkflow) {
this.notifyType.pop()
}
},
beforeDestroy () {
bus.$off('check-tab:notify')
Expand All @@ -238,52 +268,50 @@ export default {
</script>

<style lang="less">
.notify {
.box-card {
.el-card__header {
text-align: center;
}
.notify.box-card {
.el-card__header {
text-align: center;
}
.el-form {
.el-form-item {
margin-bottom: 5px;
.el-form {
.el-form-item {
margin-bottom: 5px;
.env-form-inline {
width: 100%;
}
.env-form-inline {
width: 100%;
}
}
}
.divider {
width: 100%;
height: 1px;
margin: 13px 0;
background-color: #dfe0e6;
}
.divider {
width: 100%;
height: 1px;
margin: 13px 0;
background-color: #dfe0e6;
}
.notify-container {
margin: 10px 0;
}
.notify-container {
margin: 10px 0;
}
.help-link {
color: #303133;
}
.help-link {
color: #303133;
}
.script {
padding: 5px 0;
.script {
padding: 5px 0;
.title {
display: inline-block;
width: 100px;
padding-top: 6px;
color: #606266;
font-size: 14px;
}
.title {
display: inline-block;
width: 100px;
padding-top: 6px;
color: #606266;
font-size: 14px;
}
.item-title {
margin-left: 5px;
color: #909399;
}
.item-title {
margin-left: 5px;
color: #909399;
}
}
}
Expand Down
Loading

0 comments on commit 0827566

Please sign in to comment.