refactor: 消息设置页面重构

This commit is contained in:
Captain.B 2020-12-03 16:27:10 +08:00
parent 3ebec6a84a
commit 882c1d3b17
6 changed files with 145 additions and 146 deletions

View File

@ -31,7 +31,8 @@
</el-dialog> </el-dialog>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('schedule.task_notification')" name="second"> <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-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -40,20 +41,19 @@
</template> </template>
<script> <script>
import {getCurrentUser} from "@/common/js/utils"; import {checkoutTestManagerOrTestUser, getCurrentUser, listenGoBack, removeGoBackListener} from "@/common/js/utils";
import Crontab from "../cron/Crontab"; import Crontab from "../cron/Crontab";
import CrontabResult from "../cron/CrontabResult"; import CrontabResult from "../cron/CrontabResult";
import {cronValidate} from "@/common/js/cron"; import {cronValidate} from "@/common/js/cron";
import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
import ScheduleTaskNotification from "../../settings/organization/components/ScheduleTaskNotification"; import ScheduleTaskNotification from "../../settings/organization/components/ScheduleTaskNotification";
import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
function defaultCustomValidate() { function defaultCustomValidate() {
return {pass: true}; return {pass: true};
} }
export default { export default {
name: "MsScheduleEdit", name: "MsScheduleEdit",
components: {CrontabResult, Crontab,ScheduleTaskNotification}, components: {CrontabResult, Crontab, ScheduleTaskNotification},
props: { props: {
testId: String, testId: String,
save: Function, save: Function,
@ -92,7 +92,7 @@ export default {
} }
}; };
return { return {
scheduleReceiverOptions:[], scheduleReceiverOptions: [],
operation: true, operation: true,
dialogVisible: false, dialogVisible: false,
showCron: false, showCron: false,
@ -122,13 +122,13 @@ export default {
} }
}, },
/* handleClick() { /* handleClick() {
if (this.activeName === "second") { if (this.activeName === "second") {
this.result = this.$get('/notice/search/message/'+this.testId, response => { this.result = this.$get('/notice/search/message/'+this.testId, response => {
this.scheduleTask = response.data; this.scheduleTask = response.data;
}) })
} }
},*/ },*/
buildParam() { buildParam() {
let param = {}; let param = {};
param.notices = this.tableData param.notices = this.tableData

View File

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

View File

@ -11,11 +11,11 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table <el-table
:data="form.jenkinsTask" :data="jenkinsTask"
class="tb-edit" class="tb-edit"
border border
:cell-style="rowClass" :cell-style="rowClass"
:header-cell-style="headClass"> :header-cell-style="headClass">
<el-table-column :label="$t('schedule.event')" min-width="20%" prop="events"> <el-table-column :label="$t('schedule.event')" min-width="20%" prop="events">
<template slot-scope="scope"> <template slot-scope="scope">
<el-select v-model="scope.row.event" <el-select v-model="scope.row.event"
@ -23,10 +23,10 @@
size="mini" size="mini"
prop="events" :disabled="!scope.row.isSet"> prop="events" :disabled="!scope.row.isSet">
<el-option <el-option
v-for="item in jenkinsEventOptions" v-for="item in jenkinsEventOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
@ -36,10 +36,10 @@
<el-select v-model="row.userIds" filterable multiple size="mini" <el-select v-model="row.userIds" filterable multiple size="mini"
:placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet"> :placeholder="$t('commons.please_select')" style="width: 100%;" :disabled="!row.isSet">
<el-option <el-option
v-for="item in jenkinsReceiverOptions" v-for="item in jenkinsReceiverOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
@ -51,10 +51,10 @@
:disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)" :disabled="!scope.row.isSet" @change="handleEdit(scope.$index, scope.row)"
> >
<el-option <el-option
v-for="item in receiveTypeOptions" v-for="item in receiveTypeOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
@ -69,31 +69,31 @@
<el-table-column :label="$t('commons.operating')" min-width="20%" prop="result"> <el-table-column :label="$t('commons.operating')" min-width="20%" prop="result">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-button <el-button
type="primary" type="primary"
size="mini" size="mini"
v-show="scope.row.isSet" v-show="scope.row.isSet"
@click="handleAddTask(scope.$index,scope.row)" @click="handleAddTask(scope.$index,scope.row)"
>{{ $t('commons.add') }} >{{ $t('commons.add') }}
</el-button> </el-button>
<el-button <el-button
size="mini" size="mini"
v-show="scope.row.isSet" v-show="scope.row.isSet"
@click.native.prevent="removeRowTask(scope.$index,form.jenkinsTask)" @click.native.prevent="removeRowTask(scope.$index,jenkinsTask)"
>{{ $t('commons.cancel') }} >{{ $t('commons.cancel') }}
</el-button> </el-button>
<el-button <el-button
type="primary" type="primary"
size="mini" size="mini"
v-show="!scope.row.isSet" v-show="!scope.row.isSet"
@click="handleEditTask(scope.$index,scope.row)" @click="handleEditTask(scope.$index,scope.row)"
>{{ $t('commons.edit') }} >{{ $t('commons.edit') }}
</el-button> </el-button>
<el-button <el-button
type="danger" type="danger"
icon="el-icon-delete" icon="el-icon-delete"
size="mini" size="mini"
v-show="!scope.row.isSet" v-show="!scope.row.isSet"
@click.native.prevent="deleteRowTask(scope.$index,scope.row)" @click.native.prevent="deleteRowTask(scope.$index,scope.row)"
></el-button> ></el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -115,18 +115,16 @@ export default {
}, },
data() { data() {
return { return {
form: { jenkinsTask: [{
jenkinsTask: [{ taskType: "jenkinsTask",
taskType: "jenkinsTask", event: "",
event: "", userIds: [],
userIds: [], type: [],
type: [], webhook: "",
webhook: "", isSet: true,
isSet: true, identification: "",
identification: "", isReadOnly: false,
isReadOnly: false, }],
}],
},
jenkinsEventOptions: [ jenkinsEventOptions: [
{value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')}, {value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')},
{value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')} {value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')}
@ -144,7 +142,7 @@ export default {
methods: { methods: {
initForm() { initForm() {
this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => { this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
this.form.jenkinsTask = response.data; this.jenkinsTask = response.data;
}) })
}, },
handleEdit(index, data) { handleEdit(index, data) {
@ -163,7 +161,7 @@ export default {
Task.isSet = true; Task.isSet = true;
Task.identification = ''; Task.identification = '';
Task.taskType = TASK_TYPE Task.taskType = TASK_TYPE
this.form.jenkinsTask.push(Task) this.jenkinsTask.push(Task)
}, },
handleAddTask(index, data) { handleAddTask(index, data) {
if (data.event && data.userIds.length > 0 && data.type) { if (data.event && data.userIds.length > 0 && data.type) {

View File

@ -2,7 +2,8 @@
<div> <div>
<el-row> <el-row>
<el-col :span="10"> <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') }} {{ $t('organization.message.create_new_notification') }}
</el-button> </el-button>
</el-col> </el-col>
@ -10,7 +11,7 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table <el-table
:data="form.scheduleTask" :data="scheduleTask"
class="tb-edit" class="tb-edit"
border border
size="mini" size="mini"
@ -77,7 +78,7 @@
size="mini" size="mini"
v-show="scope.row.isSet" v-show="scope.row.isSet"
:disabled="!isTesterPermission" :disabled="!isTesterPermission"
@click.native.prevent="removeRowTask(scope.$index,form.scheduleTask)" @click.native.prevent="removeRowTask(scope.$index,scheduleTask)"
>{{ $t('commons.cancel') }} >{{ $t('commons.cancel') }}
</el-button> </el-button>
<el-button <el-button
@ -86,7 +87,8 @@
v-show="!scope.row.isSet" v-show="!scope.row.isSet"
:disabled="!isTesterPermission" :disabled="!isTesterPermission"
@click="handleEditTask(scope.$index,scope.row)" @click="handleEditTask(scope.$index,scope.row)"
>{{ $t('commons.edit') }}</el-button> >{{ $t('commons.edit') }}
</el-button>
<el-button <el-button
type="danger" type="danger"
icon="el-icon-delete" icon="el-icon-delete"
@ -108,8 +110,8 @@
export default { export default {
name: "ScheduleTaskNotification", name: "ScheduleTaskNotification",
props: { props: {
testId:String, testId: String,
scheduleReceiverOptions:Array, scheduleReceiverOptions: Array,
isTesterPermission: { isTesterPermission: {
type: Boolean, type: Boolean,
default: true default: true
@ -117,19 +119,18 @@ export default {
}, },
data() { data() {
return { return {
form: {
scheduleTask: [{ scheduleTask: [{
taskType: "scheduleTask", taskType: "scheduleTask",
event: "", event: "",
userIds: [], userIds: [],
type: [], type: [],
webhook: "", webhook: "",
isSet: true, isSet: true,
identification: "", identification: "",
isReadOnly: false, isReadOnly: false,
testId:this.testId, testId: this.testId,
}], }],
},
scheduleEventOptions: [ scheduleEventOptions: [
{value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')}, {value: 'EXECUTE_SUCCESSFUL', label: this.$t('schedule.event_success')},
{value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')} {value: 'EXECUTE_FAILED', label: this.$t('schedule.event_failed')}
@ -141,14 +142,14 @@ export default {
], ],
} }
}, },
mounted(){ mounted() {
this.initForm() this.initForm()
}, },
methods: { methods: {
initForm(){ initForm() {
this.result = this.$get('/notice/search/message/'+this.testId, response => { this.result = this.$get('/notice/search/message/' + this.testId, response => {
// console.log(response.data); // console.log(response.data);
this.form.scheduleTask = response.data; this.scheduleTask = response.data;
}) })
}, },
handleEdit(index, data) { handleEdit(index, data) {
@ -158,7 +159,7 @@ export default {
data.webhook = ''; data.webhook = '';
} }
}, },
handleAddTaskModel(type) { handleAddTaskModel() {
let Task = {}; let Task = {};
Task.event = []; Task.event = [];
Task.userIds = []; Task.userIds = [];
@ -166,13 +167,11 @@ export default {
Task.webhook = ''; Task.webhook = '';
Task.isSet = true; Task.isSet = true;
Task.identification = ''; Task.identification = '';
if (type === 'scheduleTask') { Task.taskType = 'SCHEDULE_TASK';
Task.taskType = 'SCHEDULE_TASK'; Task.testId = this.testId;
Task.testId=this.testId; this.scheduleTask.push(Task);
this.form.scheduleTask.push(Task);
}
}, },
handleEditTask(index,data) { handleEditTask(index, data) {
data.isSet = true; data.isSet = true;
data.testId = this.testId; data.testId = this.testId;
if (data.type === 'EMAIL') { if (data.type === 'EMAIL') {

View File

@ -11,7 +11,7 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table <el-table
:data="form.testCasePlanTask" :data="testCasePlanTask"
class="tb-edit" class="tb-edit"
border border
:cell-style="rowClass" :cell-style="rowClass"
@ -76,7 +76,7 @@
<el-button <el-button
size="mini" size="mini"
v-show="scope.row.isSet" v-show="scope.row.isSet"
@click.native.prevent="removeRowTask(scope.$index,form.testCasePlanTask)" @click.native.prevent="removeRowTask(scope.$index,testCasePlanTask)"
>{{ $t('commons.cancel') }} >{{ $t('commons.cancel') }}
</el-button> </el-button>
<el-button <el-button
@ -114,18 +114,16 @@ export default {
}, },
data() { data() {
return { return {
form: { testCasePlanTask: [{
testCasePlanTask: [{ taskType: "testPlanTask",
taskType: "testPlanTask", event: "",
event: "", userIds: [],
userIds: [], type: [],
type: [], webhook: "",
webhook: "", isSet: true,
isSet: true, identification: "",
identification: "", isReadOnly: false,
isReadOnly: false, }],
}],
},
otherEventOptions: [ otherEventOptions: [
{value: 'CREATE', label: this.$t('commons.create')}, {value: 'CREATE', label: this.$t('commons.create')},
{value: 'UPDATE', label: this.$t('commons.update')}, {value: 'UPDATE', label: this.$t('commons.update')},
@ -138,14 +136,11 @@ export default {
], ],
}; };
}, },
activated() {
this.initForm()
},
methods: { methods: {
initForm() { initForm() {
this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => { this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
this.form.testCasePlanTask = response.data; this.testCasePlanTask = response.data;
this.form.testCasePlanTask.forEach(planTask => { this.testCasePlanTask.forEach(planTask => {
this.handleTestPlanReceivers(planTask); this.handleTestPlanReceivers(planTask);
}); });
}) })
@ -175,7 +170,7 @@ export default {
Task.isSet = true; Task.isSet = true;
Task.identification = ''; Task.identification = '';
Task.taskType = TASK_TYPE Task.taskType = TASK_TYPE
this.form.testCasePlanTask.push(Task) this.testCasePlanTask.push(Task)
}, },
handleAddTask(index, data) { handleAddTask(index, data) {
@ -236,6 +231,13 @@ export default {
} }
row.testPlanReceiverOptions = testPlanReceivers; row.testPlanReceiverOptions = testPlanReceivers;
}, },
},
watch: {
testPlanReceiverOptions(value) {
if (value && value.length > 0) {
this.initForm();
}
}
} }
} }
</script> </script>

View File

@ -11,7 +11,7 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-table <el-table
:data="form.reviewTask" :data="reviewTask"
class="tb-edit" class="tb-edit"
border border
:cell-style="rowClass" :cell-style="rowClass"
@ -77,7 +77,7 @@
<el-button <el-button
size="mini" size="mini"
v-show="scope.row.isSet" v-show="scope.row.isSet"
@click.native.prevent="removeRowTask(scope.$index,form.reviewTask)" @click.native.prevent="removeRowTask(scope.$index,reviewTask)"
>{{ $t('commons.cancel') }} >{{ $t('commons.cancel') }}
</el-button> </el-button>
<el-button <el-button
@ -114,18 +114,16 @@ export default {
}, },
data() { data() {
return { return {
form: { reviewTask: [{
reviewTask: [{ taskType: "reviewTask",
taskType: "reviewTask", event: "",
event: "", userIds: [],
userIds: [], type: [],
type: [], webhook: "",
webhook: "", isSet: true,
isSet: true, identification: "",
identification: "", isReadOnly: false,
isReadOnly: false, }],
}],
},
reviewTaskEventOptions: [ reviewTaskEventOptions: [
{value: 'CREATE', label: this.$t('commons.create')}, {value: 'CREATE', label: this.$t('commons.create')},
{value: 'UPDATE', label: this.$t('commons.update')}, {value: 'UPDATE', label: this.$t('commons.update')},
@ -139,14 +137,11 @@ export default {
], ],
}; };
}, },
activated() {
this.initForm()
},
methods: { methods: {
initForm() { initForm() {
this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => { this.result = this.$get('/notice/search/message/type/' + TASK_TYPE, response => {
this.form.reviewTask = response.data; this.reviewTask = response.data;
this.form.reviewTask.forEach(planTask => { this.reviewTask.forEach(planTask => {
this.handleReviewReceivers(planTask); this.handleReviewReceivers(planTask);
}); });
}) })
@ -176,7 +171,7 @@ export default {
Task.isSet = true; Task.isSet = true;
Task.identification = ''; Task.identification = '';
Task.taskType = TASK_TYPE Task.taskType = TASK_TYPE
this.form.reviewTask.push(Task) this.reviewTask.push(Task)
}, },
handleAddTask(index, data) { handleAddTask(index, data) {
@ -242,6 +237,13 @@ export default {
} }
row.reviewReceiverOptions = reviewReceiverOptions; row.reviewReceiverOptions = reviewReceiverOptions;
} }
},
watch: {
reviewReceiverOptions(value) {
if (value && value.length > 0) {
this.initForm();
}
}
} }
} }
</script> </script>