refactor: 消息设置页面重构

2024-12-02 12:09:13 +08:00 · 2020-12-03 16:27:10 +08:00 · 2020-12-03 16:27:10 +08:00 · 882c1d3b17
commit 882c1d3b17
parent 3ebec6a84a
6 changed files with 145 additions and 146 deletions
--- a/frontend/src/business/components/common/components/MsScheduleEdit.vue
+++ b/frontend/src/business/components/common/components/MsScheduleEdit.vue
@ -31,7 +31,8 @@
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane :label="$t('schedule.task_notification')" name="second">
-          <schedule-task-notification :is-tester-permission="isTesterPermission" :test-id="testId" :schedule-receiver-options="scheduleReceiverOptions"></schedule-task-notification>
+            <schedule-task-notification :is-tester-permission="isTesterPermission" :test-id="testId"
+                                        :schedule-receiver-options="scheduleReceiverOptions"/>
          </el-tab-pane>
        </el-tabs>
      </div>
@ -40,20 +41,19 @@
 </template>

 <script>
-import {getCurrentUser} from "@/common/js/utils";
+import {checkoutTestManagerOrTestUser, getCurrentUser, listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import Crontab from "../cron/Crontab";
 import CrontabResult from "../cron/CrontabResult";
 import {cronValidate} from "@/common/js/cron";
-import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import ScheduleTaskNotification from "../../settings/organization/components/ScheduleTaskNotification";
-import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
+
 function defaultCustomValidate() {
  return {pass: true};
 }

 export default {
  name: "MsScheduleEdit",
-  components: {CrontabResult, Crontab,ScheduleTaskNotification},
+  components: {CrontabResult, Crontab, ScheduleTaskNotification},
  props: {
    testId: String,
    save: Function,
@ -92,7 +92,7 @@ export default {
      }
    };
    return {
-      scheduleReceiverOptions:[],
+      scheduleReceiverOptions: [],
      operation: true,
      dialogVisible: false,
      showCron: false,
@ -122,13 +122,13 @@ export default {
      }

    },
-   /* handleClick() {
-      if (this.activeName === "second") {
-          this.result = this.$get('/notice/search/message/'+this.testId, response => {
-            this.scheduleTask = response.data;
-          })
-      }
-    },*/
+    /* handleClick() {
+       if (this.activeName === "second") {
+           this.result = this.$get('/notice/search/message/'+this.testId, response => {
+             this.scheduleTask = response.data;
+           })
+       }
+     },*/
    buildParam() {
      let param = {};
      param.notices = this.tableData
--- a/frontend/src/business/components/settings/organization/components/DefectTaskNotification.vue
+++ b/frontend/src/business/components/settings/organization/components/DefectTaskNotification.vue
@ -11,7 +11,7 @@
    <el-row>
      <el-col :span="24">
        <el-table
-          :data="form.defectTask"
+          :data="defectTask"
          class="tb-edit"
          border
          :cell-style="rowClass"
@ -76,7 +76,7 @@
              <el-button
                size="mini"
                v-show="scope.row.isSet"
-                @click.native.prevent="removeRowTask(scope.$index,form.defectTask)"
+                @click.native.prevent="removeRowTask(scope.$index,defectTask)"
              >{{ $t('commons.cancel') }}
              </el-button>
              <el-button
@ -113,18 +113,16 @@ export default {
  },
  data() {
    return {
-      form: {
-        defectTask: [{
-          taskType: "defectTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-      },
+      defectTask: [{
+        taskType: "defectTask",
+        event: "",
+        userIds: [],
+        type: [],
+        webhook: "",
+        isSet: true,
+        identification: "",
+        isReadOnly: false,
+      }],
      defectEventOptions: [
        {value: 'CREATE', label: this.$t('commons.create')},
      ],
@ -141,7 +139,7 @@ export default {
  methods: {
    initForm() {
      this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
-        this.form.defectTask = response.data;
+        this.defectTask = response.data;
      })
    },
    handleEdit(index, data) {
@ -169,7 +167,7 @@ export default {
      Task.isSet = true;
      Task.identification = '';
      Task.taskType = TASK_TYPE
-      this.form.defectTask.push(Task)
+      this.defectTask.push(Task)
    },
    handleAddTask(index, data) {

--- a/frontend/src/business/components/settings/organization/components/JenkinsNotification.vue
+++ b/frontend/src/business/components/settings/organization/components/JenkinsNotification.vue
@ -11,11 +11,11 @@
    <el-row>
      <el-col :span="24">
        <el-table
-          :data="form.jenkinsTask"
-          class="tb-edit"
-          border
-          :cell-style="rowClass"
-          :header-cell-style="headClass">
+            :data="jenkinsTask"
+            class="tb-edit"
+            border
+            :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"
@ -23,10 +23,10 @@
                         size="mini"
                         prop="events" :disabled="!scope.row.isSet">
                <el-option
-                  v-for="item in jenkinsEventOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                    v-for="item in jenkinsEventOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                </el-option>
              </el-select>
            </template>
@ -36,10 +36,10 @@
              <el-select v-model="row.userIds" filterable multiple size="mini"
                         :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">
+                    v-for="item in jenkinsReceiverOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
                </el-option>
              </el-select>
            </template>
@ -51,10 +51,10 @@
                         :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">
+                    v-for="item in receiveTypeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
                </el-option>
              </el-select>
            </template>
@ -69,31 +69,31 @@
          <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)"
+                  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)"
+                  size="mini"
+                  v-show="scope.row.isSet"
+                  @click.native.prevent="removeRowTask(scope.$index,jenkinsTask)"
              >{{ $t('commons.cancel') }}
              </el-button>
              <el-button
-                type="primary"
-                size="mini"
-                v-show="!scope.row.isSet"
-                @click="handleEditTask(scope.$index,scope.row)"
+                  type="primary"
+                  size="mini"
+                  v-show="!scope.row.isSet"
+                  @click="handleEditTask(scope.$index,scope.row)"
              >{{ $t('commons.edit') }}
              </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)"
+                  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>
@ -115,18 +115,16 @@ export default {
  },
  data() {
    return {
-      form: {
-        jenkinsTask: [{
-          taskType: "jenkinsTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-      },
+      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')}
@ -144,7 +142,7 @@ export default {
  methods: {
    initForm() {
      this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
-        this.form.jenkinsTask = response.data;
+        this.jenkinsTask = response.data;
      })
    },
    handleEdit(index, data) {
@ -163,7 +161,7 @@ export default {
      Task.isSet = true;
      Task.identification = '';
      Task.taskType = TASK_TYPE
-      this.form.jenkinsTask.push(Task)
+      this.jenkinsTask.push(Task)
    },
    handleAddTask(index, data) {
      if (data.event && data.userIds.length > 0 && data.type) {
--- a/frontend/src/business/components/settings/organization/components/ScheduleTaskNotification.vue
+++ b/frontend/src/business/components/settings/organization/components/ScheduleTaskNotification.vue
@ -2,7 +2,8 @@
  <div>
    <el-row>
      <el-col :span="10">
-        <el-button :disabled="!isTesterPermission" icon="el-icon-circle-plus-outline" plain size="mini" @click="handleAddTaskModel('scheduleTask')">
+        <el-button :disabled="!isTesterPermission" icon="el-icon-circle-plus-outline" plain size="mini"
+                   @click="handleAddTaskModel">
          {{ $t('organization.message.create_new_notification') }}
        </el-button>
      </el-col>
@ -10,7 +11,7 @@
    <el-row>
      <el-col :span="24">
        <el-table
-          :data="form.scheduleTask"
+          :data="scheduleTask"
          class="tb-edit"
          border
          size="mini"
@ -77,7 +78,7 @@
                size="mini"
                v-show="scope.row.isSet"
                :disabled="!isTesterPermission"
-                @click.native.prevent="removeRowTask(scope.$index,form.scheduleTask)"
+                @click.native.prevent="removeRowTask(scope.$index,scheduleTask)"
              >{{ $t('commons.cancel') }}
              </el-button>
              <el-button
@ -86,7 +87,8 @@
                v-show="!scope.row.isSet"
                :disabled="!isTesterPermission"
                @click="handleEditTask(scope.$index,scope.row)"
-              >{{ $t('commons.edit') }}</el-button>
+              >{{ $t('commons.edit') }}
+              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
@ -108,8 +110,8 @@
 export default {
  name: "ScheduleTaskNotification",
  props: {
-    testId:String,
-    scheduleReceiverOptions:Array,
+    testId: String,
+    scheduleReceiverOptions: Array,
    isTesterPermission: {
      type: Boolean,
      default: true
@ -117,19 +119,18 @@ export default {
  },
  data() {
    return {
-      form: {
-        scheduleTask: [{
-          taskType: "scheduleTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-          testId:this.testId,
-        }],
-      },
+
+      scheduleTask: [{
+        taskType: "scheduleTask",
+        event: "",
+        userIds: [],
+        type: [],
+        webhook: "",
+        isSet: true,
+        identification: "",
+        isReadOnly: false,
+        testId: this.testId,
+      }],
      scheduleEventOptions: [
        {value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')},
        {value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')}
@ -141,14 +142,14 @@ export default {
      ],
    }
  },
-  mounted(){
+  mounted() {
    this.initForm()
  },
  methods: {
-    initForm(){
-      this.result = this.$get('/notice/search/message/'+this.testId, response => {
+    initForm() {
+      this.result = this.$get('/notice/search/message/' + this.testId, response => {
        // console.log(response.data);
-        this.form.scheduleTask = response.data;
+        this.scheduleTask = response.data;
      })
    },
    handleEdit(index, data) {
@ -158,7 +159,7 @@ export default {
        data.webhook = '';
      }
    },
-    handleAddTaskModel(type) {
+    handleAddTaskModel() {
      let Task = {};
      Task.event = [];
      Task.userIds = [];
@ -166,13 +167,11 @@ export default {
      Task.webhook = '';
      Task.isSet = true;
      Task.identification = '';
-      if (type === 'scheduleTask') {
-        Task.taskType = 'SCHEDULE_TASK';
-        Task.testId=this.testId;
-        this.form.scheduleTask.push(Task);
-      }
+      Task.taskType = 'SCHEDULE_TASK';
+      Task.testId = this.testId;
+      this.scheduleTask.push(Task);
    },
-    handleEditTask(index,data) {
+    handleEditTask(index, data) {
      data.isSet = true;
      data.testId = this.testId;
      if (data.type === 'EMAIL') {
--- a/frontend/src/business/components/settings/organization/components/TestPlanTaskNotification.vue
+++ b/frontend/src/business/components/settings/organization/components/TestPlanTaskNotification.vue
@ -11,7 +11,7 @@
    <el-row>
      <el-col :span="24">
        <el-table
-          :data="form.testCasePlanTask"
+          :data="testCasePlanTask"
          class="tb-edit"
          border
          :cell-style="rowClass"
@ -76,7 +76,7 @@
              <el-button
                size="mini"
                v-show="scope.row.isSet"
-                @click.native.prevent="removeRowTask(scope.$index,form.testCasePlanTask)"
+                @click.native.prevent="removeRowTask(scope.$index,testCasePlanTask)"
              >{{ $t('commons.cancel') }}
              </el-button>
              <el-button
@ -114,18 +114,16 @@ export default {
  },
  data() {
    return {
-      form: {
-        testCasePlanTask: [{
-          taskType: "testPlanTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-      },
+      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')},
@ -138,14 +136,11 @@ export default {
      ],
    };
  },
-  activated() {
-    this.initForm()
-  },
  methods: {
    initForm() {
      this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
-        this.form.testCasePlanTask = response.data;
-        this.form.testCasePlanTask.forEach(planTask => {
+        this.testCasePlanTask = response.data;
+        this.testCasePlanTask.forEach(planTask => {
          this.handleTestPlanReceivers(planTask);
        });
      })
@ -175,7 +170,7 @@ export default {
      Task.isSet = true;
      Task.identification = '';
      Task.taskType = TASK_TYPE
-      this.form.testCasePlanTask.push(Task)
+      this.testCasePlanTask.push(Task)
    },
    handleAddTask(index, data) {

@ -236,6 +231,13 @@ export default {
      }
      row.testPlanReceiverOptions = testPlanReceivers;
    },
+  },
+  watch: {
+    testPlanReceiverOptions(value) {
+      if (value && value.length > 0) {
+        this.initForm();
+      }
+    }
  }
 }
 </script>
--- a/frontend/src/business/components/settings/organization/components/TestReviewNotification.vue
+++ b/frontend/src/business/components/settings/organization/components/TestReviewNotification.vue
@ -11,7 +11,7 @@
    <el-row>
      <el-col :span="24">
        <el-table
-          :data="form.reviewTask"
+          :data="reviewTask"
          class="tb-edit"
          border
          :cell-style="rowClass"
@ -77,7 +77,7 @@
              <el-button
                size="mini"
                v-show="scope.row.isSet"
-                @click.native.prevent="removeRowTask(scope.$index,form.reviewTask)"
+                @click.native.prevent="removeRowTask(scope.$index,reviewTask)"
              >{{ $t('commons.cancel') }}
              </el-button>
              <el-button
@ -114,18 +114,16 @@ export default {
  },
  data() {
    return {
-      form: {
-        reviewTask: [{
-          taskType: "reviewTask",
-          event: "",
-          userIds: [],
-          type: [],
-          webhook: "",
-          isSet: true,
-          identification: "",
-          isReadOnly: false,
-        }],
-      },
+      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')},
@ -139,14 +137,11 @@ export default {
      ],
    };
  },
-  activated() {
-    this.initForm()
-  },
  methods: {
    initForm() {
      this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
-        this.form.reviewTask = response.data;
-        this.form.reviewTask.forEach(planTask => {
+        this.reviewTask = response.data;
+        this.reviewTask.forEach(planTask => {
          this.handleReviewReceivers(planTask);
        });
      })
@ -176,7 +171,7 @@ export default {
      Task.isSet = true;
      Task.identification = '';
      Task.taskType = TASK_TYPE
-      this.form.reviewTask.push(Task)
+      this.reviewTask.push(Task)
    },
    handleAddTask(index, data) {

@ -242,6 +237,13 @@ export default {
      }
      row.reviewReceiverOptions = reviewReceiverOptions;
    }
+  },
+  watch: {
+    reviewReceiverOptions(value) {
+      if (value && value.length > 0) {
+        this.initForm();
+      }
+    }
  }
 }
 </script>