ioc-admin-ui/src/views/securityManagement/messageDialog/alterTask.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="修改任务内容"
      :visible.sync="dialogVisible"
      width="480px"
      height="400px"
      left
    >
      <el-divider></el-divider>
      <el-form ref="form" label-position="left" label-width="75px">
        <el-form-item label="任务名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="任务组名：">
          <el-select v-model="form.groupName" placeholder="请输入任务组名">
            <el-option
              v-for="item in taskGroupOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调用方法：">
          <div style="display: flex">
            <el-tooltip effect="light" content="提示信息" placement="top-start">
              <i class="el-icon-question" style="padding: 13px 5px 0 0"></i>
            </el-tooltip>
            <el-input class="method" v-model="form.method"></el-input>
          </div>
        </el-form-item>
        <el-form-item label-width="100px" label="cron表达式：">
          <el-input
            class="cron_xepression"
            v-model="form.cron_expression"
          ></el-input>
        </el-form-item>
        <el-button
          type="text"
          style="margin: 0px 0 0 330px; color: #2ea8e6"
          @click="showDialog"
          >生成表达式</el-button
        >
      </el-form>
      <div slot="footer">
        <el-button style="background: #2ea8e6" @click="resetForm('form')"
          >重置</el-button
        >
        <el-button
          style="background: #2ea8e6"
          type="primary"
          @click="submitForm('form')"
          >确认</el-button
        >
      </div>
      <el-dialog
        v-dialog-drag
        class="innerDialog"
        title="cron 表达式生成器"
        :visible.sync="showCron"
        width="30%"
        append-to-body
      >
        <el-divider></el-divider>
        <div style="width: 100%; height: 100%; overflow-y: auto">
          <vabCron
            @hide="showCron = false"
            @fill="crontabFill"
            :expression="expression"
          ></vabCron>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import vabCron from "vab-cron";
export default {
  components: { vabCron },
  data() {
    return {
      expression: "",
      dialogVisible: false,
      showCron: false,
      activeName: "min",
      radio: 2,
      num1: 1,
      num2: 1,
      form: {
        taskID: "",
        name: "",
        groupName: "",
        method: "",
        cron_expression: "",
        assignValue: "",
        minitesValue: 1,
      },
      innerForm1: {},
      innerForm2: {},
      innerForm3: {},
      minitesOptions: [],
      secondsOptions: [],
      hoursOptions: [],
      taskGroupOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "系统",
        },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    crontabFill(value) {
      this.form.cron_expression = value;
      this.showCron = false;
    },
    showDialog() {
      this.expression = this.form.cron_expression;
      this.showCron = true;
    },
    initData() {
      this.minitesOptions = [];
      for (let i = 1; i < 60; i++) {
        this.minitesOptions.push({
          value: i,
          label: i < 10 ? "0" + i : i,
        });
      }
    },
    handleNodeClick() {},
    cronExpression() {
      this.$refs.cron_expression.dialogVisible = true;
    },
    resetForm() {
      this.form.cron_expression = "";
      this.form.groupName = "";
    },
    submitForm() {
      this.$emit("submitForm", this.form);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  // height: 480px !important;
}

.el-radio {
  margin-top: 20px;
}

.el-input-number {
  // width: 100px !important;
  // height: 30px !important;
  /deep/.el-input__inner {
    width: 180px !important;
    height: 40px !important;
  }
}

/deep/.el-tabs__content {
  height: 200px;
  padding: 0;
}

.el-form {
  .el-form-item {
    margin: 20px 0 0 40px;
    width: 400px;

    /deep/.el-form-item__label {
      padding: 0;
      font-size: 15px;
    }

    /deep/.el-input__inner {
      width: 300px;
      height: 30px;
    }

    .method {
      /deep/.el-input__inner {
        width: 281px !important;
      }
    }

    .cron_xepression {
      /deep/.el-input__inner {
        width: 275px !important;
      }
    }
  }
}

/deep/.el-dialog__header {
  padding-bottom: 0;
  color: #333333;
  text-align: left;
}

// /deep/.el-dialog__title {
//   margin-right: 330px;
// }

/deep/.el-dialog__headerbtn {
  font-size: 25px;
}

/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 95%;
  margin: 0;
  margin-left: 2.5%;
}

/deep/.el-dialog__footer {
  text-align: center;
}

.el-button {
  width: 100px;
  height: 30px;
  text-align: center;
  margin: 30px;
  padding: 5px;
  &:nth-child(1) {
    background: #2ea8e6;
    color: #fff;
  }
  &:nth-child(2) {
    color: #fff;
    background: #2ea8e6;
  }
  &:nth-child(3) {
    background: #2ea8e6;
    color: #fff;
  }
}
</style>