From 8a1c08baaf0ee002b471996b195e7da180b90209 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期一, 21 七月 2025 09:38:47 +0800
Subject: [PATCH] 增加了前端代码库
---
src/components/Crontab/index.vue | 430 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 430 insertions(+), 0 deletions(-)
diff --git a/src/components/Crontab/index.vue b/src/components/Crontab/index.vue
new file mode 100644
index 0000000..395f615
--- /dev/null
+++ b/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.1