diff --git a/backend/src/main/java/io/metersphere/api/dto/scenario/request/Request.java b/backend/src/main/java/io/metersphere/api/dto/scenario/request/Request.java
index 49426bb96f..0d8276b0fc 100644
--- a/backend/src/main/java/io/metersphere/api/dto/scenario/request/Request.java
+++ b/backend/src/main/java/io/metersphere/api/dto/scenario/request/Request.java
@@ -19,7 +19,7 @@ import lombok.Data;
         @JsonSubTypes.Type(value = SqlRequest.class, name = RequestType.SQL),
         @JsonSubTypes.Type(value = TCPRequest.class, name = RequestType.TCP)
 })
-@JSONType(seeAlso = {HttpRequest.class, DubboRequest.class, SqlRequest.class}, typeKey = "type")
+@JSONType(seeAlso = {HttpRequest.class, DubboRequest.class, SqlRequest.class, TCPRequest.class}, typeKey = "type")
 @Data
 public abstract class Request {
     @JSONField(ordinal = 1)
diff --git a/backend/src/main/resources/logback.xml b/backend/src/main/resources/logback.xml
index becb9adf51..0f3cef9423 100644
--- a/backend/src/main/resources/logback.xml
+++ b/backend/src/main/resources/logback.xml
@@ -153,7 +153,7 @@
 		<appender-ref ref="errorAsyncAppender"/>
 	</logger>
 
-	<logger name="io.metersphere.base.mapper" level="${logger.sql.level:ERROR}">
+	<logger name="io.metersphere.base.mapper" level="${logger.sql.level}">
 		<appender-ref ref="console"/>
 	</logger>
 
diff --git a/frontend/src/business/components/settings/organization/TaskNotification.vue b/frontend/src/business/components/settings/organization/TaskNotification.vue
index 058d4c9b51..7b6838795e 100644
--- a/frontend/src/business/components/settings/organization/TaskNotification.vue
+++ b/frontend/src/business/components/settings/organization/TaskNotification.vue
@@ -1,488 +1,48 @@
 <template>
-  <div style="margin-left: 40px">
-    <el-alert
-      :title="$t('organization.message.notes')"
-      type="info">
-    </el-alert>
-    <el-form :model="form" ref="from">
-      <el-row class="row">
-        <el-col :span="24">
-          <div class="grid-content bg-purple-dark">
-            <el-row>
-              <el-col :span="10">
-                <span style="font-weight:bold;">{{ $t('organization.message.jenkins_task_notification') }}</span>
-              </el-col>
-              <el-col :span="10">
-                <el-button type="text" icon="el-icon-plus" size="mini"
-                           @click="handleAddTaskModel('jenkinsTask')">
-                  {{ $t('organization.message.create_new_notification') }}
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-
-          <el-table
-            :data="form.jenkinsTask"
-            class="tb-edit"
-            border
-            size="mini"
-            :cell-style="rowClass"
-            :header-cell-style="headClass">
-            <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.event"
-                           :placeholder="$t('organization.message.select_events')"
-                           prop="events" :disabled="!scope.row.isSet">
-                  <el-option
-                    v-for="item in jenkinsEventOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiver')" prop="userIds" min-width="20%">
-              <template v-slot:default="{row}">
-                <el-select v-model="row.userIds" filterable multiple
-                           :placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet">
-                  <el-option
-                    v-for="item in jenkinsReceiverOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
-                           :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)"
-                >
-                  <el-option
-                    v-for="item in receiveTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="webhook" min-width="20%" prop="webhook">
-              <template v-slot:default="scope">
-                <el-input v-model="scope.row.webhook" placeholder="webhook地址"
-                          :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
-              <template v-slot:default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click="handleAddTask(scope.$index,scope.row)"
-                >{{ $t('commons.add') }}
-                </el-button>
-                <el-button
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click.native.prevent="removeRowTask(scope.$index,form.jenkinsTask)"
-                >{{ $t('commons.cancel') }}
-                </el-button>
-                <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  size="mini"
-                  v-show="!scope.row.isSet"
-                  @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-
-        </el-col>
-      </el-row>
-      <el-row class="row">
-        <el-col :span="24">
-          <div class="grid-content bg-purple-dark">
-            <el-row>
-              <el-col :span="10">
-                <span style="font-weight:bold;">{{ $t('organization.message.test_plan_task_notification') }}</span>
-              </el-col>
-              <el-col :span="10">
-                <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAddTaskModel('testPlanTask')">
-                  {{ $t('organization.message.create_new_notification') }}
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-          <el-table
-            :data="form.testCasePlanTask"
-            class="tb-edit"
-            border
-            size="mini"
-            :cell-style="rowClass"
-            :header-cell-style="headClass"
-          >
-            <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
-                           @change="handleTestPlanReceivers(scope.row)"
-                           prop="events" :disabled="!scope.row.isSet">
-                  <el-option
-                    v-for="item in otherEventOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiver')" prop="userIds" min-width="20%">
-              <template v-slot:default="{row}">
-                <el-select v-model="row.userIds" filterable multiple
-                           :placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet">
-                  <el-option
-                    v-for="item in row.testPlanReceiverOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
-                           :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
-                  <el-option
-                    v-for="item in receiveTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="webhook" min-width="20%" prop="webhook">
-              <template v-slot:default="scope">
-                <el-input v-model="scope.row.webhook" placeholder="webhook地址"
-                          :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
-              <template v-slot:default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click="handleAddTask(scope.$index,scope.row)"
-                >{{ $t('commons.add') }}
-                </el-button>
-                <el-button
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click.native.prevent="removeRowTask(scope.$index,form.testCasePlanTask)"
-                >{{ $t('commons.cancel') }}
-                </el-button>
-                <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  size="mini"
-                  v-show="!scope.row.isSet"
-                  @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-      <el-row class="row">
-        <el-col :span="24">
-          <div class="grid-content bg-purple-dark">
-            <el-row>
-              <el-col :span="10">
-                <span style="font-weight:bold;">{{ $t('organization.message.test_review_task_notice') }}</span>
-              </el-col>
-              <el-col :span="10">
-                <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAddTaskModel('reviewTask')">
-                  {{ $t('organization.message.create_new_notification') }}
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-          <el-table
-            :data="form.reviewTask"
-            class="tb-edit"
-            border
-            size="mini"
-            :cell-style="rowClass"
-            :header-cell-style="headClass"
-          >
-            <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
-                           @change="handleReviewReceivers(scope.row)"
-                           prop="event" :disabled="!scope.row.isSet">
-                  <el-option
-                    v-for="item in reviewTaskEventOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiver')" prop="receiver" min-width="20%">
-              <template v-slot:default="{row}">
-                <el-select v-model="row.userIds" filterable multiple
-                           :placeholder="$t('commons.please_select')"
-                           style="width: 100%;" :disabled="!row.isSet">
-                  <el-option
-                    v-for="item in row.reviewReceiverOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
-                           :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
-                  <el-option
-                    v-for="item in receiveTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="webhook" min-width="20%" prop="webhook">
-              <template v-slot:default="scope">
-                <el-input v-model="scope.row.webhook" placeholder="webhook地址"
-                          :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
-              <template v-slot:default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click="handleAddTask(scope.$index,scope.row)"
-                >{{ $t('commons.add') }}
-                </el-button>
-                <el-button
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click.native.prevent="removeRowTask(scope.$index,form.reviewTask)"
-                >{{ $t('commons.cancel') }}
-                </el-button>
-                <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  size="mini"
-                  v-show="!scope.row.isSet"
-                  @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-      <el-row class="row">
-        <el-col :span="24">
-          <div class="grid-content bg-purple-dark">
-            <el-row>
-              <el-col :span="10">
-                <span style="font-weight:bold;">{{ $t('organization.message.defect_task_notification') }}</span>
-              </el-col>
-              <el-col :span="10">
-                <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAddTaskModel('defectTask')">
-                  {{ $t('organization.message.create_new_notification') }}
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-          <el-table
-            :data="form.defectTask"
-            class="tb-edit"
-            border
-            size="mini"
-            :cell-style="rowClass"
-            :header-cell-style="headClass"
-          >
-            <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
-                           prop="event" :disabled="!scope.row.isSet">
-                  <el-option
-                    v-for="item in defectEventOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiver')" prop="receiver" min-width="20%">
-              <template v-slot:default="{row}">
-                <el-select v-model="row.userIds" filterable multiple
-                           :placeholder="$t('commons.please_select')"
-                           style="width: 100%;" :disabled="!row.isSet">
-                  <el-option
-                    v-for="item in defectReceiverOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
-                           :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
-                  <el-option
-                    v-for="item in receiveTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="webhook" min-width="20%" prop="webhook">
-              <template v-slot:default="scope">
-                <el-input v-model="scope.row.webhook" placeholder="webhook地址"
-                          :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
-              <template v-slot:default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click="handleAddTask(scope.$index,scope.row)"
-                >{{ $t('commons.add') }}
-                </el-button>
-                <el-button
-                  size="mini"
-                  v-show="scope.row.isSet"
-                  @click.native.prevent="removeRowTask(scope.$index,form.defectTask)"
-                >{{ $t('commons.cancel') }}
-                </el-button>
-                <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  size="mini"
-                  v-show="!scope.row.isSet"
-                  @click="deleteRowTask(scope.$index,scope.row)"
-                ></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
+  <ms-container>
+    <ms-main-container>
+      <el-alert
+        :title="$t('organization.message.notes')"
+        type="info">
+      </el-alert>
+      <jenkins-notification :jenkins-receiver-options="jenkinsReceiverOptions"/>
+      <test-plan-task-notification :test-plan-receiver-options="testPlanReceiverOptions"/>
+      <test-review-notification :review-receiver-options="reviewReceiverOptions"/>
+      <defect-task-notification :defect-receiver-options="defectReceiverOptions"/>
+    </ms-main-container>
+  </ms-container>
 </template>
 
 <script>
 import {getCurrentUser} from "@/common/js/utils";
+import JenkinsNotification from "@/business/components/settings/organization/components/JenkinsNotification";
+import TestPlanTaskNotification from "@/business/components/settings/organization/components/TestPlanTaskNotification";
+import TestReviewNotification from "@/business/components/settings/organization/components/TestReviewNotification";
+import DefectTaskNotification from "@/business/components/settings/organization/components/DefectTaskNotification";
+import MsContainer from "@/business/components/common/components/MsContainer";
+import MsMainContainer from "@/business/components/common/components/MsMainContainer";
 
 export default {
   name: "TaskNotification",
+  components: {
+    DefectTaskNotification, TestReviewNotification, TestPlanTaskNotification, JenkinsNotification, MsContainer,
+    MsMainContainer,
+  },
   data() {
 
     return {
-      form: {
-        jenkinsTask: [{
-          taskType: "jenkinsTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-        testCasePlanTask: [{
-          taskType: "testPlanTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-        reviewTask: [{
-          taskType: "reviewTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-        defectTask: [{
-          taskType: "defectTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-      },
-      jenkinsEventOptions: [
-        {value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')},
-        {value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')}
-      ],
       jenkinsReceiverOptions: [],
-      receiveTypeOptions: [
-        {value: 'EMAIL', label: this.$t('organization.message.mail')},
-        {value: 'NAIL_ROBOT', label: this.$t('organization.message.nail_robot')},
-        {value: 'WECHAT_ROBOT', label: this.$t('organization.message.enterprise_wechat_robot')}
-      ],
-      otherEventOptions: [
-        {value: 'CREATE', label: this.$t('commons.create')},
-        {value: 'UPDATE', label: this.$t('commons.update')},
-        {value: 'DELETE', label: this.$t('commons.delete')}
-      ],
-      reviewTaskEventOptions: [
-        {value: 'CREATE', label: this.$t('commons.create')},
-        {value: 'UPDATE', label: this.$t('commons.update')},
-        {value: 'DELETE', label: this.$t('commons.delete')},
-        {value: 'COMMENT', label: this.$t('commons.comment')}
-      ],
-      defectEventOptions: [
-        {value: 'CREATE', label: this.$t('commons.create')},
-      ],
       //测试计划
       testPlanReceiverOptions: [],
       //评审
       reviewReceiverOptions: [],
       //缺陷
       defectReceiverOptions: [],
-      rules: {},
-
     }
   },
 
   activated() {
-    this.initUserList(() => {
-      this.initForm()
-    });
+    this.initUserList();
   },
   methods: {
     handleEdit(index, data) {
@@ -494,20 +54,8 @@ export default {
     currentUser: () => {
       return getCurrentUser();
     },
-    initForm() {
-      this.result = this.$get('/notice/search/message', response => {
-        this.form = response.data
 
-        this.form.testCasePlanTask.forEach(planTask => {
-          this.handleTestPlanReceivers(planTask);
-        });
-
-        this.form.reviewTask.forEach(planTask => {
-          this.handleReviewReceivers(planTask);
-        });
-      })
-    },
-    initUserList(after) {
+    initUserList() {
       let param = {
         name: '',
         organizationId: this.currentUser().lastOrganizationId
@@ -517,115 +65,7 @@ export default {
         this.reviewReceiverOptions = response.data
         this.defectReceiverOptions = response.data
         this.testPlanReceiverOptions = response.data
-
-        after();
       });
-
-    },
-    handleAddTaskModel(type) {
-      let Task = {};
-      Task.event = [];
-      Task.userIds = [];
-      Task.type = "";
-      Task.webhook = "";
-      Task.isSet = true;
-      Task.identification = "";
-      if (type === 'jenkinsTask') {
-        Task.taskType = 'JENKINS_TASK'
-        this.form.jenkinsTask.push(Task)
-      }
-      if (type === 'testPlanTask') {
-        Task.taskType = 'TEST_PLAN_TASK'
-        this.form.testCasePlanTask.push(Task)
-      }
-      if (type === 'reviewTask') {
-        Task.taskType = 'REVIEW_TASK'
-        this.form.reviewTask.push(Task)
-      }
-      if (type === 'defectTask') {
-        Task.taskType = 'DEFECT_TASK'
-        this.form.defectTask.push(Task)
-      }
-    },
-    handleAddTask(index, data) {
-
-      if (data.event && data.userIds.length > 0 && data.type) {
-        console.log(data.type)
-        if (data.type === 'NAIL_ROBOT' || data.type === 'WECHAT_ROBOT') {
-          if (!data.webhook) {
-            this.$warning(this.$t('organization.message.message_webhook'));
-          } else {
-            this.addTask(data)
-          }
-        } else {
-          this.addTask(data)
-        }
-      } else {
-        this.$warning(this.$t('organization.message.message'));
-      }
-    },
-    addTask(data) {
-      let list = []
-      data.isSet = false
-      list.push(data)
-      let param = {};
-      param.messageDetail = list
-      this.result = this.$post("/notice/save/message/task", param, () => {
-        this.initForm()
-        this.$success(this.$t('commons.save_success'));
-      })
-    },
-    removeRowTask(index, data) { //移除
-      data.splice(index, 1)
-    },
-    deleteRowTask(index, data) { //删除
-      this.result = this.$get("/notice/delete/message/" + data.identification, response => {
-        this.$success(this.$t('commons.delete_success'));
-        this.initForm()
-      })
-    },
-    rowClass() {
-      return "text-align:center"
-    },
-    headClass() {
-      return "text-align:center;background:'#ededed'"
-    },
-    handleTestPlanReceivers(row) {
-      let testPlanReceivers = JSON.parse(JSON.stringify(this.testPlanReceiverOptions));
-      switch (row.event) {
-        case  "CREATE":
-          testPlanReceivers.unshift({id: 'EXECUTOR', name: this.$t('test_track.plan_view.executor')})
-          break;
-        case "UPDATE":
-        case "DELETE":
-        case "COMMENT":
-          testPlanReceivers.unshift({id: 'FOUNDER', name: this.$t('api_test.creator')});
-          break;
-        default:
-          break;
-      }
-      row.testPlanReceiverOptions = testPlanReceivers;
-    },
-    handleReviewReceivers(row) {
-      let reviewReceiverOptions = JSON.parse(JSON.stringify(this.reviewReceiverOptions));
-
-      switch (row.event) {
-        case  "CREATE":
-          reviewReceiverOptions.unshift({id: 'EXECUTOR', name: this.$t('test_track.review.reviewer')})
-          break;
-        case "UPDATE":
-          reviewReceiverOptions.unshift({id: 'FOUNDER', name: this.$t('test_track.review.review_creator')})
-          break;
-        case "DELETE":
-          reviewReceiverOptions.unshift({id: 'FOUNDER', name: this.$t('test_track.review.review_creator')})
-          break;
-        case "COMMENT":
-          reviewReceiverOptions.unshift({id: 'MAINTAINER', name: this.$t('test_track.case.maintainer')})
-          break;
-        default:
-          break;
-      }
-      row.reviewReceiverOptions = reviewReceiverOptions;
     }
   }
 }
@@ -637,10 +77,5 @@ export default {
   overflow: auto;
 }*/
 
-.row {
-  margin-bottom: 30px;
-
-}
-
 
 </style>
diff --git a/frontend/src/business/components/settings/organization/components/DefectTaskNotification.vue b/frontend/src/business/components/settings/organization/components/DefectTaskNotification.vue
new file mode 100644
index 0000000000..1dbceb08be
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/DefectTaskNotification.vue
@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="10">
+        <h3>{{ $t('organization.message.defect_task_notification') }}</h3>
+        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel('defectTask')">
+          {{ $t('organization.message.create_new_notification') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-table
+          :data="form.defectTask"
+          class="tb-edit"
+          border
+          size="mini"
+          :cell-style="rowClass"
+          :header-cell-style="headClass"
+        >
+          <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
+                         prop="event" :disabled="!scope.row.isSet">
+                <el-option
+                  v-for="item in defectEventOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiver')" prop="receiver" min-width="20%">
+            <template v-slot:default="{row}">
+              <el-select v-model="row.userIds" filterable multiple
+                         :placeholder="$t('commons.please_select')"
+                         style="width: 100%;" :disabled="!row.isSet">
+                <el-option
+                  v-for="item in defectReceiverOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
+                         :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
+                <el-option
+                  v-for="item in receiveTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="webhook" min-width="20%" prop="webhook">
+            <template v-slot:default="scope">
+              <el-input v-model="scope.row.webhook" placeholder="webhook地址"
+                        :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
+            <template v-slot:default="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                v-show="scope.row.isSet"
+                @click="handleAddTask(scope.$index,scope.row)"
+              >{{ $t('commons.add') }}
+              </el-button>
+              <el-button
+                size="mini"
+                v-show="scope.row.isSet"
+                @click.native.prevent="removeRowTask(scope.$index,form.defectTask)"
+              >{{ $t('commons.cancel') }}
+              </el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                v-show="!scope.row.isSet"
+                @click="deleteRowTask(scope.$index,scope.row)"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DefectTaskNotification",
+  props: {
+    defectReceiverOptions: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      form: {
+        defectTask: [{
+          taskType: "defectTask",
+          event: "",
+          userIds: [],
+          type: [],
+          webhook: "",
+          isSet: true,
+          identification: "",
+          isReadOnly: false,
+        }],
+      },
+      defectEventOptions: [
+        {value: 'CREATE', label: this.$t('commons.create')},
+      ],
+      receiveTypeOptions: [
+        {value: 'EMAIL', label: this.$t('organization.message.mail')},
+        {value: 'NAIL_ROBOT', label: this.$t('organization.message.nail_robot')},
+        {value: 'WECHAT_ROBOT', label: this.$t('organization.message.enterprise_wechat_robot')}
+      ],
+    };
+  },
+  activated() {
+    this.initForm()
+  },
+  methods: {
+    initForm() {
+      this.result = this.$get('/notice/search/message', response => {
+        this.form.defectTask = response.data.defectTask;
+      })
+    },
+    handleEdit(index, data) {
+      data.isReadOnly = true;
+      if (data.type === 'EMAIL') {
+        data.isReadOnly = !data.isReadOnly
+      }
+    },
+    handleAddTaskModel(type) {
+      let Task = {};
+      Task.event = [];
+      Task.userIds = [];
+      Task.type = "";
+      Task.webhook = "";
+      Task.isSet = true;
+      Task.identification = "";
+      if (type === 'jenkinsTask') {
+        Task.taskType = 'JENKINS_TASK'
+        this.form.jenkinsTask.push(Task)
+      }
+      if (type === 'testPlanTask') {
+        Task.taskType = 'TEST_PLAN_TASK'
+        this.form.testCasePlanTask.push(Task)
+      }
+      if (type === 'reviewTask') {
+        Task.taskType = 'REVIEW_TASK'
+        this.form.reviewTask.push(Task)
+      }
+      if (type === 'defectTask') {
+        Task.taskType = 'DEFECT_TASK'
+        this.form.defectTask.push(Task)
+      }
+    },
+    handleAddTask(index, data) {
+
+      if (data.event && data.userIds.length > 0 && data.type) {
+        console.log(data.type)
+        if (data.type === 'NAIL_ROBOT' || data.type === 'WECHAT_ROBOT') {
+          if (!data.webhook) {
+            this.$warning(this.$t('organization.message.message_webhook'));
+          } else {
+            this.addTask(data)
+          }
+        } else {
+          this.addTask(data)
+        }
+      } else {
+        this.$warning(this.$t('organization.message.message'));
+      }
+    },
+    addTask(data) {
+      let list = []
+      data.isSet = false
+      list.push(data)
+      let param = {};
+      param.messageDetail = list
+      this.result = this.$post("/notice/save/message/task", param, () => {
+        this.initForm()
+        this.$success(this.$t('commons.save_success'));
+      })
+    },
+    removeRowTask(index, data) { //移除
+      data.splice(index, 1)
+    },
+    deleteRowTask(index, data) { //删除
+      this.result = this.$get("/notice/delete/message/" + data.identification, response => {
+        this.$success(this.$t('commons.delete_success'));
+        this.initForm()
+      })
+    },
+    rowClass() {
+      return "text-align:center"
+    },
+    headClass() {
+      return "text-align:center;background:'#ededed'"
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/JenkinsNotification.vue b/frontend/src/business/components/settings/organization/components/JenkinsNotification.vue
new file mode 100644
index 0000000000..c1bb5da081
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/JenkinsNotification.vue
@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="10">
+        <h3>{{ $t('organization.message.jenkins_task_notification') }}</h3>
+        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel('jenkinsTask')">
+          {{ $t('organization.message.create_new_notification') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-table
+          :data="form.jenkinsTask"
+          class="tb-edit"
+          border
+          size="mini"
+          :cell-style="rowClass"
+          :header-cell-style="headClass">
+          <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.event"
+                         :placeholder="$t('organization.message.select_events')"
+                         prop="events" :disabled="!scope.row.isSet">
+                <el-option
+                  v-for="item in jenkinsEventOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiver')" prop="userIds" min-width="20%">
+            <template v-slot:default="{row}">
+              <el-select v-model="row.userIds" filterable multiple
+                         :placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet">
+                <el-option
+                  v-for="item in jenkinsReceiverOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
+                         :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)"
+              >
+                <el-option
+                  v-for="item in receiveTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="webhook" min-width="20%" prop="webhook">
+            <template v-slot:default="scope">
+              <el-input v-model="scope.row.webhook" placeholder="webhook地址"
+                        :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
+            <template v-slot:default="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                v-show="scope.row.isSet"
+                @click="handleAddTask(scope.$index,scope.row)"
+              >{{ $t('commons.add') }}
+              </el-button>
+              <el-button
+                size="mini"
+                v-show="scope.row.isSet"
+                @click.native.prevent="removeRowTask(scope.$index,form.jenkinsTask)"
+              >{{ $t('commons.cancel') }}
+              </el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                v-show="!scope.row.isSet"
+                @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JenkinsNotification",
+  props: {
+    jenkinsReceiverOptions: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      form: {
+        jenkinsTask: [{
+          taskType: "jenkinsTask",
+          event: "",
+          userIds: [],
+          type: [],
+          webhook: "",
+          isSet: true,
+          identification: "",
+          isReadOnly: false,
+        }],
+      },
+      jenkinsEventOptions: [
+        {value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')},
+        {value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')}
+      ],
+      receiveTypeOptions: [
+        {value: 'EMAIL', label: this.$t('organization.message.mail')},
+        {value: 'NAIL_ROBOT', label: this.$t('organization.message.nail_robot')},
+        {value: 'WECHAT_ROBOT', label: this.$t('organization.message.enterprise_wechat_robot')}
+      ],
+    }
+  },
+  activated() {
+    this.initForm();
+  },
+  methods: {
+    initForm() {
+      this.result = this.$get('/notice/search/message', response => {
+        this.form.jenkinsTask = response.data.jenkinsTask;
+      })
+    },
+    handleEdit(index, data) {
+      data.isReadOnly = true;
+      if (data.type === 'EMAIL') {
+        data.isReadOnly = !data.isReadOnly
+      }
+    },
+    handleAddTaskModel(type) {
+      let Task = {};
+      Task.event = [];
+      Task.userIds = [];
+      Task.type = "";
+      Task.webhook = "";
+      Task.isSet = true;
+      Task.identification = "";
+      if (type === 'jenkinsTask') {
+        Task.taskType = 'JENKINS_TASK'
+        this.form.jenkinsTask.push(Task)
+      }
+      if (type === 'testPlanTask') {
+        Task.taskType = 'TEST_PLAN_TASK'
+        this.form.testCasePlanTask.push(Task)
+      }
+      if (type === 'reviewTask') {
+        Task.taskType = 'REVIEW_TASK'
+        this.form.reviewTask.push(Task)
+      }
+      if (type === 'defectTask') {
+        Task.taskType = 'DEFECT_TASK'
+        this.form.defectTask.push(Task)
+      }
+    },
+    handleAddTask(index, data) {
+
+      if (data.event && data.userIds.length > 0 && data.type) {
+        console.log(data.type)
+        if (data.type === 'NAIL_ROBOT' || data.type === 'WECHAT_ROBOT') {
+          if (!data.webhook) {
+            this.$warning(this.$t('organization.message.message_webhook'));
+          } else {
+            this.addTask(data)
+          }
+        } else {
+          this.addTask(data)
+        }
+      } else {
+        this.$warning(this.$t('organization.message.message'));
+      }
+    },
+    addTask(data) {
+      let list = []
+      data.isSet = false
+      list.push(data)
+      let param = {};
+      param.messageDetail = list
+      this.result = this.$post("/notice/save/message/task", param, () => {
+        this.initForm()
+        this.$success(this.$t('commons.save_success'));
+      })
+    },
+    removeRowTask(index, data) { //移除
+      data.splice(index, 1)
+    },
+    deleteRowTask(index, data) { //删除
+      this.result = this.$get("/notice/delete/message/" + data.identification, response => {
+        this.$success(this.$t('commons.delete_success'));
+        this.initForm()
+      })
+    },
+    rowClass() {
+      return "text-align:center"
+    },
+    headClass() {
+      return "text-align:center;background:'#ededed'"
+    },
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/TestPlanTaskNotification.vue b/frontend/src/business/components/settings/organization/components/TestPlanTaskNotification.vue
new file mode 100644
index 0000000000..630f769e87
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/TestPlanTaskNotification.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="10">
+        <h3>{{ $t('organization.message.test_plan_task_notification') }}</h3>
+        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel('testPlanTask')">
+          {{ $t('organization.message.create_new_notification') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-table
+          :data="form.testCasePlanTask"
+          class="tb-edit"
+          border
+          size="mini"
+          :cell-style="rowClass"
+          :header-cell-style="headClass"
+        >
+          <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
+                         @change="handleTestPlanReceivers(scope.row)"
+                         prop="events" :disabled="!scope.row.isSet">
+                <el-option
+                  v-for="item in otherEventOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiver')" prop="userIds" min-width="20%">
+            <template v-slot:default="{row}">
+              <el-select v-model="row.userIds" filterable multiple
+                         :placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet">
+                <el-option
+                  v-for="item in row.testPlanReceiverOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
+                         :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
+                <el-option
+                  v-for="item in receiveTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="webhook" min-width="20%" prop="webhook">
+            <template v-slot:default="scope">
+              <el-input v-model="scope.row.webhook" placeholder="webhook地址"
+                        :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
+            <template v-slot:default="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                v-show="scope.row.isSet"
+                @click="handleAddTask(scope.$index,scope.row)"
+              >{{ $t('commons.add') }}
+              </el-button>
+              <el-button
+                size="mini"
+                v-show="scope.row.isSet"
+                @click.native.prevent="removeRowTask(scope.$index,form.testCasePlanTask)"
+              >{{ $t('commons.cancel') }}
+              </el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                v-show="!scope.row.isSet"
+                @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "TestPlanTaskNotification",
+  props: {
+    testPlanReceiverOptions: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      form: {
+        testCasePlanTask: [{
+          taskType: "testPlanTask",
+          event: "",
+          userIds: [],
+          type: [],
+          webhook: "",
+          isSet: true,
+          identification: "",
+          isReadOnly: false,
+        }],
+      },
+      otherEventOptions: [
+        {value: 'CREATE', label: this.$t('commons.create')},
+        {value: 'UPDATE', label: this.$t('commons.update')},
+        {value: 'DELETE', label: this.$t('commons.delete')}
+      ],
+      receiveTypeOptions: [
+        {value: 'EMAIL', label: this.$t('organization.message.mail')},
+        {value: 'NAIL_ROBOT', label: this.$t('organization.message.nail_robot')},
+        {value: 'WECHAT_ROBOT', label: this.$t('organization.message.enterprise_wechat_robot')}
+      ],
+    };
+  },
+  activated() {
+    this.initForm()
+  },
+  methods: {
+    initForm() {
+      this.result = this.$get('/notice/search/message', response => {
+        this.form.testCasePlanTask = response.data.testCasePlanTask;
+        this.form.testCasePlanTask.forEach(planTask => {
+          this.handleTestPlanReceivers(planTask);
+        });
+      })
+    },
+    handleEdit(index, data) {
+      data.isReadOnly = true;
+      if (data.type === 'EMAIL') {
+        data.isReadOnly = !data.isReadOnly
+      }
+    },
+    handleAddTaskModel(type) {
+      let Task = {};
+      Task.event = [];
+      Task.userIds = [];
+      Task.type = "";
+      Task.webhook = "";
+      Task.isSet = true;
+      Task.identification = "";
+      if (type === 'jenkinsTask') {
+        Task.taskType = 'JENKINS_TASK'
+        this.form.jenkinsTask.push(Task)
+      }
+      if (type === 'testPlanTask') {
+        Task.taskType = 'TEST_PLAN_TASK'
+        this.form.testCasePlanTask.push(Task)
+      }
+      if (type === 'reviewTask') {
+        Task.taskType = 'REVIEW_TASK'
+        this.form.reviewTask.push(Task)
+      }
+      if (type === 'defectTask') {
+        Task.taskType = 'DEFECT_TASK'
+        this.form.defectTask.push(Task)
+      }
+    },
+    handleAddTask(index, data) {
+
+      if (data.event && data.userIds.length > 0 && data.type) {
+        console.log(data.type)
+        if (data.type === 'NAIL_ROBOT' || data.type === 'WECHAT_ROBOT') {
+          if (!data.webhook) {
+            this.$warning(this.$t('organization.message.message_webhook'));
+          } else {
+            this.addTask(data)
+          }
+        } else {
+          this.addTask(data)
+        }
+      } else {
+        this.$warning(this.$t('organization.message.message'));
+      }
+    },
+    addTask(data) {
+      let list = []
+      data.isSet = false
+      list.push(data)
+      let param = {};
+      param.messageDetail = list
+      this.result = this.$post("/notice/save/message/task", param, () => {
+        this.initForm()
+        this.$success(this.$t('commons.save_success'));
+      })
+    },
+    removeRowTask(index, data) { //移除
+      data.splice(index, 1)
+    },
+    deleteRowTask(index, data) { //删除
+      this.result = this.$get("/notice/delete/message/" + data.identification, response => {
+        this.$success(this.$t('commons.delete_success'));
+        this.initForm()
+      })
+    },
+    rowClass() {
+      return "text-align:center"
+    },
+    headClass() {
+      return "text-align:center;background:'#ededed'"
+    },
+    handleTestPlanReceivers(row) {
+      let testPlanReceivers = JSON.parse(JSON.stringify(this.testPlanReceiverOptions));
+      switch (row.event) {
+        case  "CREATE":
+          testPlanReceivers.unshift({id: 'EXECUTOR', name: this.$t('test_track.plan_view.executor')})
+          break;
+        case "UPDATE":
+        case "DELETE":
+        case "COMMENT":
+          testPlanReceivers.unshift({id: 'FOUNDER', name: this.$t('api_test.creator')});
+          break;
+        default:
+          break;
+      }
+      row.testPlanReceiverOptions = testPlanReceivers;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/frontend/src/business/components/settings/organization/components/TestReviewNotification.vue b/frontend/src/business/components/settings/organization/components/TestReviewNotification.vue
new file mode 100644
index 0000000000..91aaadb4a6
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/components/TestReviewNotification.vue
@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="10">
+        <h3>{{ $t('organization.message.test_review_task_notice') }}</h3>
+        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel('reviewTask')">
+          {{ $t('organization.message.create_new_notification') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-table
+          :data="form.reviewTask"
+          class="tb-edit"
+          border
+          size="mini"
+          :cell-style="rowClass"
+          :header-cell-style="headClass"
+        >
+          <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.event" :placeholder="$t('organization.message.select_events')"
+                         @change="handleReviewReceivers(scope.row)"
+                         prop="event" :disabled="!scope.row.isSet">
+                <el-option
+                  v-for="item in reviewTaskEventOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiver')" prop="receiver" min-width="20%">
+            <template v-slot:default="{row}">
+              <el-select v-model="row.userIds" filterable multiple
+                         :placeholder="$t('commons.please_select')"
+                         style="width: 100%;" :disabled="!row.isSet">
+                <el-option
+                  v-for="item in row.reviewReceiverOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('schedule.receiving_mode')" min-width="20%" prop="type">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" :placeholder="$t('organization.message.select_receiving_method')"
+                         :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)">
+                <el-option
+                  v-for="item in receiveTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="webhook" min-width="20%" prop="webhook">
+            <template v-slot:default="scope">
+              <el-input v-model="scope.row.webhook" placeholder="webhook地址"
+                        :disabled="!scope.row.isSet||!scope.row.isReadOnly"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
+            <template v-slot:default="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                v-show="scope.row.isSet"
+                @click="handleAddTask(scope.$index,scope.row)"
+              >{{ $t('commons.add') }}
+              </el-button>
+              <el-button
+                size="mini"
+                v-show="scope.row.isSet"
+                @click.native.prevent="removeRowTask(scope.$index,form.reviewTask)"
+              >{{ $t('commons.cancel') }}
+              </el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                v-show="!scope.row.isSet"
+                @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestReviewNotification",
+  props: {
+    reviewReceiverOptions: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      form: {
+        reviewTask: [{
+          taskType: "reviewTask",
+          event: "",
+          userIds: [],
+          type: [],
+          webhook: "",
+          isSet: true,
+          identification: "",
+          isReadOnly: false,
+        }],
+      },
+      reviewTaskEventOptions: [
+        {value: 'CREATE', label: this.$t('commons.create')},
+        {value: 'UPDATE', label: this.$t('commons.update')},
+        {value: 'DELETE', label: this.$t('commons.delete')},
+        {value: 'COMMENT', label: this.$t('commons.comment')}
+      ],
+      receiveTypeOptions: [
+        {value: 'EMAIL', label: this.$t('organization.message.mail')},
+        {value: 'NAIL_ROBOT', label: this.$t('organization.message.nail_robot')},
+        {value: 'WECHAT_ROBOT', label: this.$t('organization.message.enterprise_wechat_robot')}
+      ],
+    };
+  },
+  activated() {
+    this.initForm()
+  },
+  methods: {
+    initForm() {
+      this.result = this.$get('/notice/search/message', response => {
+        this.form.reviewTask = response.data.reviewTask;
+        this.form.reviewTask.forEach(planTask => {
+          this.handleReviewReceivers(planTask);
+        });
+      })
+    },
+    handleEdit(index, data) {
+      data.isReadOnly = true;
+      if (data.type === 'EMAIL') {
+        data.isReadOnly = !data.isReadOnly
+      }
+    },
+    handleAddTaskModel(type) {
+      let Task = {};
+      Task.event = [];
+      Task.userIds = [];
+      Task.type = "";
+      Task.webhook = "";
+      Task.isSet = true;
+      Task.identification = "";
+      if (type === 'jenkinsTask') {
+        Task.taskType = 'JENKINS_TASK'
+        this.form.jenkinsTask.push(Task)
+      }
+      if (type === 'testPlanTask') {
+        Task.taskType = 'TEST_PLAN_TASK'
+        this.form.testCasePlanTask.push(Task)
+      }
+      if (type === 'reviewTask') {
+        Task.taskType = 'REVIEW_TASK'
+        this.form.reviewTask.push(Task)
+      }
+      if (type === 'defectTask') {
+        Task.taskType = 'DEFECT_TASK'
+        this.form.defectTask.push(Task)
+      }
+    },
+    handleAddTask(index, data) {
+
+      if (data.event && data.userIds.length > 0 && data.type) {
+        console.log(data.type)
+        if (data.type === 'NAIL_ROBOT' || data.type === 'WECHAT_ROBOT') {
+          if (!data.webhook) {
+            this.$warning(this.$t('organization.message.message_webhook'));
+          } else {
+            this.addTask(data)
+          }
+        } else {
+          this.addTask(data)
+        }
+      } else {
+        this.$warning(this.$t('organization.message.message'));
+      }
+    },
+    addTask(data) {
+      let list = []
+      data.isSet = false
+      list.push(data)
+      let param = {};
+      param.messageDetail = list
+      this.result = this.$post("/notice/save/message/task", param, () => {
+        this.initForm()
+        this.$success(this.$t('commons.save_success'));
+      })
+    },
+    removeRowTask(index, data) { //移除
+      data.splice(index, 1)
+    },
+    deleteRowTask(index, data) { //删除
+      this.result = this.$get("/notice/delete/message/" + data.identification, response => {
+        this.$success(this.$t('commons.delete_success'));
+        this.initForm()
+      })
+    },
+    rowClass() {
+      return "text-align:center"
+    },
+    headClass() {
+      return "text-align:center;background:'#ededed'"
+    },
+    handleReviewReceivers(row) {
+      let reviewReceiverOptions = JSON.parse(JSON.stringify(this.reviewReceiverOptions));
+
+      switch (row.event) {
+        case  "CREATE":
+          reviewReceiverOptions.unshift({id: 'EXECUTOR', name: this.$t('test_track.review.reviewer')})
+          break;
+        case "UPDATE":
+          reviewReceiverOptions.unshift({id: 'FOUNDER', name: this.$t('test_track.review.review_creator')})
+          break;
+        case "DELETE":
+          reviewReceiverOptions.unshift({id: 'FOUNDER', name: this.$t('test_track.review.review_creator')})
+          break;
+        case "COMMENT":
+          reviewReceiverOptions.unshift({id: 'MAINTAINER', name: this.$t('test_track.case.maintainer')})
+          break;
+        default:
+          break;
+      }
+      row.reviewReceiverOptions = reviewReceiverOptions;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 10px;
+}
+</style>