From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001
From: yanzhaofeige <yanzhaofeige@qq.com>
Date: Mon, 30 Sep 2024 12:10:57 +0800
Subject: [PATCH] init
---
cpzidc-ui/src/components/Crontab/index.vue | 430 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 430 insertions(+), 0 deletions(-)
diff --git a/cpzidc-ui/src/components/Crontab/index.vue b/cpzidc-ui/src/components/Crontab/index.vue
new file mode 100644
index 0000000..3963df2
--- /dev/null
+++ b/cpzidc-ui/src/components/Crontab/index.vue
@@ -0,0 +1,430 @@
+<template>
+ <div>
+ <el-tabs type="border-card">
+ <el-tab-pane label="秒" v-if="shouldHide('second')">
+ <CrontabSecond
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronsecond"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="分钟" v-if="shouldHide('min')">
+ <CrontabMin
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronmin"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="小时" v-if="shouldHide('hour')">
+ <CrontabHour
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronhour"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="日" v-if="shouldHide('day')">
+ <CrontabDay
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronday"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="月" v-if="shouldHide('month')">
+ <CrontabMonth
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronmonth"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="周" v-if="shouldHide('week')">
+ <CrontabWeek
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronweek"
+ />
+ </el-tab-pane>
+
+ <el-tab-pane label="年" v-if="shouldHide('year')">
+ <CrontabYear
+ @update="updateCrontabValue"
+ :check="checkNumber"
+ :cron="crontabValueObj"
+ ref="cronyear"
+ />
+ </el-tab-pane>
+ </el-tabs>
+
+ <div class="popup-main">
+ <div class="popup-result">
+ <p class="title">时间表达式</p>
+ <table>
+ <thead>
+ <th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
+ <th>Cron 表达式</th>
+ </thead>
+ <tbody>
+ <td>
+ <span>{{crontabValueObj.second}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.min}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.hour}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.day}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.month}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.week}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueObj.year}}</span>
+ </td>
+ <td>
+ <span>{{crontabValueString}}</span>
+ </td>
+ </tbody>
+ </table>
+ </div>
+ <CrontabResult :ex="crontabValueString"></CrontabResult>
+
+ <div class="pop_btn">
+ <el-button size="small" type="primary" @click="submitFill">确定</el-button>
+ <el-button size="small" type="warning" @click="clearCron">重置</el-button>
+ <el-button size="small" @click="hidePopup">取消</el-button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import CrontabSecond from "./second.vue";
+import CrontabMin from "./min.vue";
+import CrontabHour from "./hour.vue";
+import CrontabDay from "./day.vue";
+import CrontabMonth from "./month.vue";
+import CrontabWeek from "./week.vue";
+import CrontabYear from "./year.vue";
+import CrontabResult from "./result.vue";
+
+export default {
+ data() {
+ return {
+ tabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],
+ tabActive: 0,
+ myindex: 0,
+ crontabValueObj: {
+ second: "*",
+ min: "*",
+ hour: "*",
+ day: "*",
+ month: "*",
+ week: "?",
+ year: "",
+ },
+ };
+ },
+ name: "vcrontab",
+ props: ["expression", "hideComponent"],
+ methods: {
+ shouldHide(key) {
+ if (this.hideComponent && this.hideComponent.includes(key)) return false;
+ return true;
+ },
+ resolveExp() {
+ // 反解析 表达式
+ if (this.expression) {
+ let arr = this.expression.split(" ");
+ if (arr.length >= 6) {
+ //6 位以上是合法表达式
+ let obj = {
+ second: arr[0],
+ min: arr[1],
+ hour: arr[2],
+ day: arr[3],
+ month: arr[4],
+ week: arr[5],
+ year: arr[6] ? arr[6] : "",
+ };
+ this.crontabValueObj = {
+ ...obj,
+ };
+ for (let i in obj) {
+ if (obj[i]) this.changeRadio(i, obj[i]);
+ }
+ }
+ } else {
+ // 没有传入的表达式 则还原
+ this.clearCron();
+ }
+ },
+ // tab切换值
+ tabCheck(index) {
+ this.tabActive = index;
+ },
+ // 由子组件触发，更改表达式组成的字段值
+ updateCrontabValue(name, value, from) {
+ "updateCrontabValue", name, value, from;
+ this.crontabValueObj[name] = value;
+ if (from && from !== name) {
+ console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
+ this.changeRadio(name, value);
+ }
+ },
+ // 赋值到组件
+ changeRadio(name, value) {
+ let arr = ["second", "min", "hour", "month"],
+ refName = "cron" + name,
+ insValue;
+
+ if (!this.$refs[refName]) return;
+
+ if (arr.includes(name)) {
+ if (value === "*") {
+ insValue = 1;
+ } else if (value.indexOf("-") > -1) {
+ let indexArr = value.split("-");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].cycle01 = 0)
+ : (this.$refs[refName].cycle01 = indexArr[0]);
+ this.$refs[refName].cycle02 = indexArr[1];
+ insValue = 2;
+ } else if (value.indexOf("/") > -1) {
+ let indexArr = value.split("/");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].average01 = 0)
+ : (this.$refs[refName].average01 = indexArr[0]);
+ this.$refs[refName].average02 = indexArr[1];
+ insValue = 3;
+ } else {
+ insValue = 4;
+ this.$refs[refName].checkboxList = value.split(",");
+ }
+ } else if (name == "day") {
+ if (value === "*") {
+ insValue = 1;
+ } else if (value == "?") {
+ insValue = 2;
+ } else if (value.indexOf("-") > -1) {
+ let indexArr = value.split("-");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].cycle01 = 0)
+ : (this.$refs[refName].cycle01 = indexArr[0]);
+ this.$refs[refName].cycle02 = indexArr[1];
+ insValue = 3;
+ } else if (value.indexOf("/") > -1) {
+ let indexArr = value.split("/");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].average01 = 0)
+ : (this.$refs[refName].average01 = indexArr[0]);
+ this.$refs[refName].average02 = indexArr[1];
+ insValue = 4;
+ } else if (value.indexOf("W") > -1) {
+ let indexArr = value.split("W");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].workday = 0)
+ : (this.$refs[refName].workday = indexArr[0]);
+ insValue = 5;
+ } else if (value === "L") {
+ insValue = 6;
+ } else {
+ this.$refs[refName].checkboxList = value.split(",");
+ insValue = 7;
+ }
+ } else if (name == "week") {
+ if (value === "*") {
+ insValue = 1;
+ } else if (value == "?") {
+ insValue = 2;
+ } else if (value.indexOf("-") > -1) {
+ let indexArr = value.split("-");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].cycle01 = 0)
+ : (this.$refs[refName].cycle01 = indexArr[0]);
+ this.$refs[refName].cycle02 = indexArr[1];
+ insValue = 3;
+ } else if (value.indexOf("#") > -1) {
+ let indexArr = value.split("#");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].average01 = 1)
+ : (this.$refs[refName].average01 = indexArr[0]);
+ this.$refs[refName].average02 = indexArr[1];
+ insValue = 4;
+ } else if (value.indexOf("L") > -1) {
+ let indexArr = value.split("L");
+ isNaN(indexArr[0])
+ ? (this.$refs[refName].weekday = 1)
+ : (this.$refs[refName].weekday = indexArr[0]);
+ insValue = 5;
+ } else {
+ this.$refs[refName].checkboxList = value.split(",");
+ insValue = 6;
+ }
+ } else if (name == "year") {
+ if (value == "") {
+ insValue = 1;
+ } else if (value == "*") {
+ insValue = 2;
+ } else if (value.indexOf("-") > -1) {
+ insValue = 3;
+ } else if (value.indexOf("/") > -1) {
+ insValue = 4;
+ } else {
+ this.$refs[refName].checkboxList = value.split(",");
+ insValue = 5;
+ }
+ }
+ this.$refs[refName].radioValue = insValue;
+ },
+ // 表单选项的子组件校验数字格式（通过-props传递）
+ checkNumber(value, minLimit, maxLimit) {
+ // 检查必须为整数
+ value = Math.floor(value);
+ if (value < minLimit) {
+ value = minLimit;
+ } else if (value > maxLimit) {
+ value = maxLimit;
+ }
+ return value;
+ },
+ // 隐藏弹窗
+ hidePopup() {
+ this.$emit("hide");
+ },
+ // 填充表达式
+ submitFill() {
+ this.$emit("fill", this.crontabValueString);
+ this.hidePopup();
+ },
+ clearCron() {
+ // 还原选择项
+ ("准备还原");
+ this.crontabValueObj = {
+ second: "*",
+ min: "*",
+ hour: "*",
+ day: "*",
+ month: "*",
+ week: "?",
+ year: "",
+ };
+ for (let j in this.crontabValueObj) {
+ this.changeRadio(j, this.crontabValueObj[j]);
+ }
+ },
+ },
+ computed: {
+ crontabValueString: function() {
+ let obj = this.crontabValueObj;
+ let str =
+ obj.second +
+ " " +
+ obj.min +
+ " " +
+ obj.hour +
+ " " +
+ obj.day +
+ " " +
+ obj.month +
+ " " +
+ obj.week +
+ (obj.year == "" ? "" : " " + obj.year);
+ return str;
+ },
+ },
+ components: {
+ CrontabSecond,
+ CrontabMin,
+ CrontabHour,
+ CrontabDay,
+ CrontabMonth,
+ CrontabWeek,
+ CrontabYear,
+ CrontabResult,
+ },
+ watch: {
+ expression: "resolveExp",
+ hideComponent(value) {
+ // 隐藏部分组件
+ },
+ },
+ mounted: function() {
+ this.resolveExp();
+ },
+};
+</script>
+<style scoped>
+.pop_btn {
+ text-align: center;
+ margin-top: 20px;
+}
+.popup-main {
+ position: relative;
+ margin: 10px auto;
+ background: #fff;
+ border-radius: 5px;
+ font-size: 12px;
+ overflow: hidden;
+}
+.popup-title {
+ overflow: hidden;
+ line-height: 34px;
+ padding-top: 6px;
+ background: #f2f2f2;
+}
+.popup-result {
+ box-sizing: border-box;
+ line-height: 24px;
+ margin: 25px auto;
+ padding: 15px 10px 10px;
+ border: 1px solid #ccc;
+ position: relative;
+}
+.popup-result .title {
+ position: absolute;
+ top: -28px;
+ left: 50%;
+ width: 140px;
+ font-size: 14px;
+ margin-left: -70px;
+ text-align: center;
+ line-height: 30px;
+ background: #fff;
+}
+.popup-result table {
+ text-align: center;
+ width: 100%;
+ margin: 0 auto;
+}
+.popup-result table span {
+ display: block;
+ width: 100%;
+ font-family: arial;
+ line-height: 30px;
+ height: 30px;
+ white-space: nowrap;
+ overflow: hidden;
+ border: 1px solid #e8e8e8;
+}
+.popup-result-scroll {
+ font-size: 12px;
+ line-height: 24px;
+ height: 10em;
+ overflow-y: auto;
+}
+</style>
--
Gitblit v1.9.3