refactor: 合并代码修改部分页面显示

frontend/src/business/components/common/components/MsScheduleConfig.vue

 <template>
-    <div class="schedule-config">
-      <div>
+  <div class="schedule-config">
+    <div>
         <span class="cron-ico" @click="scheduleEdit">
           <i class="el-icon-date" size="small"></i>
           <span class="character">SCHEDULER</span>
         </span>
-        <el-switch :disabled="!schedule.value || isReadOnly" v-model="schedule.enable" @change="scheduleChange"/>
-        <ms-schedule-edit :is-read-only="isReadOnly" :schedule="schedule" :save="save" :custom-validate="customValidate" ref="scheduleEdit"/>
+      <el-switch :disabled="!schedule.value || isReadOnly" v-model="schedule.enable" @change="scheduleChange"/>
+      <ms-schedule-edit :is-read-only="isReadOnly" :schedule="schedule" :save="save" :custom-validate="customValidate"
+                        ref="scheduleEdit"/>
 
-      </div>
-      <div>
+    </div>
+    <div>
         <span>
-          {{$t('schedule.next_execution_time')}}：
-          <span :class="{'disable-character': !schedule.enable}" v-if="!schedule.enable">{{$t('schedule.not_set')}}</span>
+          {{ $t('schedule.next_execution_time') }}：
+          <span :class="{'disable-character': !schedule.enable}"
+                v-if="!schedule.enable">{{ $t('schedule.not_set') }}</span>
           <crontab-result v-if="schedule.enable" :enable-simple-mode="true" :ex="schedule.value" ref="crontabResult"/>
         </span>
-      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    import MsScheduleEdit from "./MsScheduleEdit";
-    import CrontabResult from "../cron/CrontabResult";
+import MsScheduleEdit from "./MsScheduleEdit";
+import CrontabResult from "../cron/CrontabResult";
 
-    function defaultCustomValidate() {return {pass: true};}
+function defaultCustomValidate() {
+  return {pass: true};
+}
 
-    export default {
-      name: "MsScheduleConfig",
-      components: {CrontabResult, MsScheduleEdit},
-      data() {
+export default {
+  name: "MsScheduleConfig",
+  components: {CrontabResult, MsScheduleEdit},
+  data() {
+    return {
+      recentList: [],
+    }
+  },
+  props: {
+    save: Function,
+    schedule: {},
+    checkOpen: {
+      type: Function,
+      default() {
         return {
-          recentList: [],
-        }
-      },
-      props: {
-        save: Function,
-        schedule: {},
-        checkOpen: {
-          type: Function,
-          default() {
-            return {
-              checkOpen() {return true;}
-            }
+          checkOpen() {
+            return true;
           }
-        },
-        customValidate: {
-          type: Function,
-          default: defaultCustomValidate
-        },
-        isReadOnly: {
-          type: Boolean,
-          default: false
-        }
-      },
-      methods: {
-        scheduleEdit() {
-          if (!this.checkOpen()) {
-            return;
-          }
-          this.$refs.scheduleEdit.open();
-        },
-        scheduleChange() {
-          this.$emit('scheduleChange');
-        },
-        flashResultList() {
-          this.$refs.crontabResult.expressionChange();
         }
       }
+    },
+    customValidate: {
+      type: Function,
+      default: defaultCustomValidate
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    scheduleEdit() {
+      if (!this.checkOpen()) {
+        return;
+      }
+      this.$refs.scheduleEdit.open();
+    },
+    scheduleChange() {
+      this.$emit('scheduleChange');
+    },
+    flashResultList() {
+      this.$refs.crontabResult.expressionChange();
     }
+  }
+}
 </script>
 
 <style scoped>
 
-  .schedule-config {
-    float: right;
-    width: 250px;
-    height: 15px;
-    line-height: 25px;
-  }
+.schedule-config {
+  float: right;
+  width: 250px;
+  height: 15px;
+  line-height: 25px;
+}
 
-  .el-icon-date {
-    font-size: 20px;
-    margin-left: 5px;
-  }
+.el-icon-date {
+  font-size: 20px;
+  margin-left: 5px;
+}
 
-  .character {
-    font-weight: bold;
-    margin: 0 5px;
-  }
+.character {
+  font-weight: bold;
+  margin: 0 5px;
+}
 
-  .disable-character {
-    color: #cccccc;
-  }
+.disable-character {
+  color: #cccccc;
+}
 
-  .el-switch {
-    margin: 0 5px;
-  }
+.el-switch {
+  margin: 0 5px;
+}
 
-  .cron-ico {
-    cursor: pointer;
-  }
+.cron-ico {
+  cursor: pointer;
+}
 
 </style>

frontend/src/business/components/common/components/MsScheduleEdit.vue

 <template>
-  <el-dialog :close-on-click-modal="false" width="35%" class="schedule-edit" :visible.sync="dialogVisible"
+  <el-dialog :close-on-click-modal="false" width="70%" class="schedule-edit" :visible.sync="dialogVisible"
              @close="close">
-    <template>
-      <div>
-        <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
-            <el-form :model="form" :rules="rules" ref="from">
-              <el-form-item
-                prop="cronValue">
-                <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
-                          :placeholder="$t('schedule.please_input_cron_expression')"/>
-                <!--          <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
-                <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button>
-              </el-form-item>
-              <el-form-item>
-                <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
-                  {{$t('schedule.generate_expression')}}
-                </el-link>
-              </el-form-item>
-              <crontab-result :ex="form.cronValue" ref="crontabResult"/>
-            </el-form>
-            <el-dialog :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false">
-              <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
-            </el-dialog>
-          </el-tab-pane>
-          <el-tab-pane :label="$t('schedule.task_notification')" name="second">
-            <template>
-              <el-table
-                :data="tableData"
-                style="width: 100%">
-                <el-table-column
-                  prop="event"
-                  :label="$t('schedule.event')"
-                >
-                </el-table-column>
-                <el-table-column
-                  prop="receiver"
-                  :label="$t('schedule.receiver')"
-                  width="200"
-                >
-                  <template v-slot:default="{row}">
-                    <el-input
-                      size="mini"
-                      type="textarea"
-                      :rows="1"
-                      class="edit-input"
-                      v-model="row.receiver"
-                      :placeholder="$t('schedule.receiver')"
-                      clearable>
-                    </el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="email"
-                  :label="$t('schedule.receiving_mode')"
-                  width="300">
-                  <template v-slot:default="{row}">
-                    <el-input
-                      size="mini"
-                      type="textarea"
-                      :rows="1"
-                      class="edit-input"
-                      v-model="row.email"
-                      :placeholder="$t('schedule.input_email')"
-                      clearable>
-                    </el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  align="center"
-                  :label="$t('schedule.operation')"
-                  show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <el-switch
-                      v-model="scope.row.status"
-                      :active-value="1"
-                      :inactive-value="2"
-                      active-color="#13ce66"
-                      inactive-color="#ff4949"
-                    />
-                  </template>
-                </el-table-column>
-              </el-table>
-            </template>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </template>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
+        <el-form :model="form" :rules="rules" ref="from">
+          <el-form-item
+            prop="cronValue">
+            <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
+                      :placeholder="$t('schedule.please_input_cron_expression')"/>
+            <!--          <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
+            <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{ $t('commons.save') }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
+              {{ $t('schedule.generate_expression') }}
+            </el-link>
+          </el-form-item>
+          <crontab-result :ex="form.cronValue" ref="crontabResult"/>
+        </el-form>
+        <el-dialog :title="$t('schedule.generate_expression')" width="70%" :visible.sync="showCron" :modal="false">
+          <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
+        </el-dialog>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('schedule.task_notification')" name="second">
+        <template>
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column
+              prop="event"
+              :label="$t('schedule.event')"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="receiver"
+              :label="$t('schedule.receiver')"
+              width="200"
+            >
+              <template v-slot:default="{row}">
+                <el-input
+                  size="mini"
+                  type="textarea"
+                  :rows="1"
+                  class="edit-input"
+                  v-model="row.receiver"
+                  :placeholder="$t('schedule.receiver')"
+                  clearable>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="email"
+              :label="$t('schedule.receiving_mode')"
+              width="300">
+              <template v-slot:default="{row}">
+                <el-input
+                  size="mini"
+                  type="textarea"
+                  :rows="1"
+                  class="edit-input"
+                  v-model="row.email"
+                  :placeholder="$t('schedule.input_email')"
+                  clearable>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              :label="$t('schedule.operation')"
+              show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-switch
+                  v-model="scope.row.status"
+                  :active-value="1"
+                  :inactive-value="2"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
   </el-dialog>
 </template>
 
 <script>
 
-  import Crontab from "../cron/Crontab";
-  import CrontabResult from "../cron/CrontabResult";
-  import {cronValidate} from "../../../../common/js/cron";
-  import {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";
 
-  function defaultCustomValidate() {
-    return {pass: true};
-  }
+function defaultCustomValidate() {
+  return {pass: true};
+}
 
-  export default {
-    name: "MsScheduleEdit",
-    components: {CrontabResult, Crontab},
-    props: {
-      save: Function,
-      schedule: {},
-      customValidate: {
-        type: Function,
-        default: defaultCustomValidate
+export default {
+  name: "MsScheduleEdit",
+  components: {CrontabResult, Crontab},
+  props: {
+    save: Function,
+    schedule: {},
+    customValidate: {
+      type: Function,
+      default: defaultCustomValidate
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    'schedule.value'() {
+      this.form.cronValue = this.schedule.value;
+    }
+  },
+  data() {
+    const validateCron = (rule, cronValue, callback) => {
+      let customValidate = this.customValidate(this.getIntervalTime());
+      if (!cronValue) {
+        callback(new Error(this.$t('commons.input_content')));
+      } else if (!cronValidate(cronValue)) {
+        callback(new Error(this.$t('schedule.cron_expression_format_error')));
+      }
+        // else if(!this.intervalShortValidate()) {
+        //   callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
+      // }
+      else if (!customValidate.pass) {
+        callback(new Error(customValidate.info));
+      } else {
+        callback();
+      }
+    };
+    return {
+      operation: true,
+      dialogVisible: false,
+      showCron: false,
+      form: {
+        cronValue: ""
       },
-      isReadOnly: {
-        type: Boolean,
-        default: false
+      tableData: [
+        {
+          event: '执行成功',
+          receiver: '',
+          email: '',
+          operation: 1
+        }, {
+          event: '执行成功',
+          receiver: '',
+          email: '',
+          operation: 2
+        }
+      ],
+      email: "",
+      enable: true,
+      activeName: 'first',
+      rules: {
+        cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
       }
+    }
+  },
+  methods: {
+    handleClick() {
+
     },
-    watch: {
-      'schedule.value'() {
-        this.form.cronValue = this.schedule.value;
-      }
+    open() {
+      this.dialogVisible = true;
+      this.form.cronValue = this.schedule.value;
+      listenGoBack(this.close);
     },
-    data() {
-      const validateCron = (rule, cronValue, callback) => {
-        let customValidate = this.customValidate(this.getIntervalTime());
-        if (!cronValue) {
-          callback(new Error(this.$t('commons.input_content')));
-        } else if (!cronValidate(cronValue)) {
-          callback(new Error(this.$t('schedule.cron_expression_format_error')));
-        }
-          // else if(!this.intervalShortValidate()) {
-          //   callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
-        // }
-        else if (!customValidate.pass) {
-          callback(new Error(customValidate.info));
+    crontabFill(value, resultList) {
+      //确定后回传的值
+      this.form.cronValue = value;
+      this.$refs.crontabResult.resultList = resultList;
+      this.$refs['from'].validate();
+    },
+    showCronDialog() {
+      this.showCron = true;
+    },
+    saveCron() {
+      this.$refs['from'].validate((valid) => {
+        if (valid) {
+          this.intervalShortValidate();
+          this.save(this.form.cronValue);
+          this.dialogVisible = false;
         } else {
-          callback();
-        }
-      };
-      return {
-        operation: true,
-        dialogVisible: false,
-        showCron: false,
-        form: {
-          cronValue: ""
-        },
-        tableData: [
-          {
-            event: '执行成功',
-            receiver: '',
-            email: '',
-            operation: 1
-          }, {
-            event: '执行成功',
-            receiver: '',
-            email: '',
-            operation: 2
-          }
-        ],
-        email: "",
-        enable: true,
-        activeName: 'first',
-        rules: {
-          cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
+          return false;
         }
+      });
+    },
+    close() {
+      this.dialogVisible = false;
+      this.form.cronValue = '';
+      this.$refs['from'].resetFields();
+      if (!this.schedule.value) {
+        this.$refs.crontabResult.resultList = [];
       }
+      removeGoBackListener(this.close);
     },
-    methods: {
-      handleClick() {
-
-      },
-      open() {
-        this.dialogVisible = true;
-        this.form.cronValue = this.schedule.value;
-        listenGoBack(this.close);
-      },
-      crontabFill(value, resultList) {
-        //确定后回传的值
-        this.form.cronValue = value;
-        this.$refs.crontabResult.resultList = resultList;
-        this.$refs['from'].validate();
-      },
-      showCronDialog() {
-        this.showCron = true;
-      },
-      saveCron() {
-        this.$refs['from'].validate((valid) => {
-          if (valid) {
-            this.intervalShortValidate();
-            this.save(this.form.cronValue);
-            this.dialogVisible = false;
-          } else {
-            return false;
-          }
-        });
-      },
-      close() {
-        this.dialogVisible = false;
-        this.form.cronValue = '';
-        this.$refs['from'].resetFields();
-        if (!this.schedule.value) {
-          this.$refs.crontabResult.resultList = [];
-        }
-        removeGoBackListener(this.close);
-      },
-      intervalShortValidate() {
-        if (this.getIntervalTime() < 3 * 60 * 1000) {
-          // return false;
-          this.$info(this.$t('schedule.cron_expression_interval_short_error'));
-        }
-        return true;
-      },
-      resultListChange() {
-        this.$refs['from'].validate();
-      },
-      getIntervalTime() {
-        let resultList = this.$refs.crontabResult.resultList;
-        let time1 = new Date(resultList[0]);
-        let time2 = new Date(resultList[1]);
-        return time2 - time1;
+    intervalShortValidate() {
+      if (this.getIntervalTime() < 3 * 60 * 1000) {
+        // return false;
+        this.$info(this.$t('schedule.cron_expression_interval_short_error'));
       }
+      return true;
+    },
+    resultListChange() {
+      this.$refs['from'].validate();
+    },
+    getIntervalTime() {
+      let resultList = this.$refs.crontabResult.resultList;
+      let time1 = new Date(resultList[0]);
+      let time2 = new Date(resultList[1]);
+      return time2 - time1;
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .inp {
-    width: 50%;
-    margin-right: 20px;
-  }
+.inp {
+  width: 50%;
+  margin-right: 20px;
+}
 
-  .el-form-item {
-    margin-bottom: 10px;
-  }
+.el-form-item {
+  margin-bottom: 10px;
+}
 
 </style>