Newer
Older
DH_Apicture / src / components / Crontab / index.vue
@zhangqy zhangqy on 29 Nov 9 KB first commit
  1. <template>
  2. <div>
  3. <el-tabs type="border-card">
  4. <el-tab-pane label="秒" v-if="shouldHide('second')">
  5. <CrontabSecond
  6. @update="updateCrontabValue"
  7. :check="checkNumber"
  8. :cron="crontabValueObj"
  9. ref="cronsecond"
  10. />
  11. </el-tab-pane>
  12.  
  13. <el-tab-pane label="分钟" v-if="shouldHide('min')">
  14. <CrontabMin
  15. @update="updateCrontabValue"
  16. :check="checkNumber"
  17. :cron="crontabValueObj"
  18. ref="cronmin"
  19. />
  20. </el-tab-pane>
  21.  
  22. <el-tab-pane label="小时" v-if="shouldHide('hour')">
  23. <CrontabHour
  24. @update="updateCrontabValue"
  25. :check="checkNumber"
  26. :cron="crontabValueObj"
  27. ref="cronhour"
  28. />
  29. </el-tab-pane>
  30.  
  31. <el-tab-pane label="日" v-if="shouldHide('day')">
  32. <CrontabDay
  33. @update="updateCrontabValue"
  34. :check="checkNumber"
  35. :cron="crontabValueObj"
  36. ref="cronday"
  37. />
  38. </el-tab-pane>
  39.  
  40. <el-tab-pane label="月" v-if="shouldHide('month')">
  41. <CrontabMonth
  42. @update="updateCrontabValue"
  43. :check="checkNumber"
  44. :cron="crontabValueObj"
  45. ref="cronmonth"
  46. />
  47. </el-tab-pane>
  48.  
  49. <el-tab-pane label="周" v-if="shouldHide('week')">
  50. <CrontabWeek
  51. @update="updateCrontabValue"
  52. :check="checkNumber"
  53. :cron="crontabValueObj"
  54. ref="cronweek"
  55. />
  56. </el-tab-pane>
  57.  
  58. <el-tab-pane label="年" v-if="shouldHide('year')">
  59. <CrontabYear
  60. @update="updateCrontabValue"
  61. :check="checkNumber"
  62. :cron="crontabValueObj"
  63. ref="cronyear"
  64. />
  65. </el-tab-pane>
  66. </el-tabs>
  67.  
  68. <div class="popup-main">
  69. <div class="popup-result">
  70. <p class="title">时间表达式</p>
  71. <table>
  72. <thead>
  73. <th v-for="item of tabTitles" :key="item">{{item}}</th>
  74. <th>Cron 表达式</th>
  75. </thead>
  76. <tbody>
  77. <td>
  78. <span v-if="crontabValueObj.second.length < 10">{{crontabValueObj.second}}</span>
  79. <el-tooltip v-else :content="crontabValueObj.second" placement="top"><span>{{crontabValueObj.second}}</span></el-tooltip>
  80. </td>
  81. <td>
  82. <span v-if="crontabValueObj.min.length < 10">{{crontabValueObj.min}}</span>
  83. <el-tooltip v-else :content="crontabValueObj.min" placement="top"><span>{{crontabValueObj.min}}</span></el-tooltip>
  84. </td>
  85. <td>
  86. <span v-if="crontabValueObj.hour.length < 10">{{crontabValueObj.hour}}</span>
  87. <el-tooltip v-else :content="crontabValueObj.hour" placement="top"><span>{{crontabValueObj.hour}}</span></el-tooltip>
  88. </td>
  89. <td>
  90. <span v-if="crontabValueObj.day.length < 10">{{crontabValueObj.day}}</span>
  91. <el-tooltip v-else :content="crontabValueObj.day" placement="top"><span>{{crontabValueObj.day}}</span></el-tooltip>
  92. </td>
  93. <td>
  94. <span v-if="crontabValueObj.month.length < 10">{{crontabValueObj.month}}</span>
  95. <el-tooltip v-else :content="crontabValueObj.month" placement="top"><span>{{crontabValueObj.month}}</span></el-tooltip>
  96. </td>
  97. <td>
  98. <span v-if="crontabValueObj.week.length < 10">{{crontabValueObj.week}}</span>
  99. <el-tooltip v-else :content="crontabValueObj.week" placement="top"><span>{{crontabValueObj.week}}</span></el-tooltip>
  100. </td>
  101. <td>
  102. <span v-if="crontabValueObj.year.length < 10">{{crontabValueObj.year}}</span>
  103. <el-tooltip v-else :content="crontabValueObj.year" placement="top"><span>{{crontabValueObj.year}}</span></el-tooltip>
  104. </td>
  105. <td class="result">
  106. <span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
  107. <el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
  108. </td>
  109. </tbody>
  110. </table>
  111. </div>
  112. <CrontabResult :ex="crontabValueString"></CrontabResult>
  113.  
  114. <div class="pop_btn">
  115. <el-button type="primary" @click="submitFill">确定</el-button>
  116. <el-button type="warning" @click="clearCron">重置</el-button>
  117. <el-button @click="hidePopup">取消</el-button>
  118. </div>
  119. </div>
  120. </div>
  121. </template>
  122.  
  123. <script setup>
  124. import CrontabSecond from "./second.vue"
  125. import CrontabMin from "./min.vue"
  126. import CrontabHour from "./hour.vue"
  127. import CrontabDay from "./day.vue"
  128. import CrontabMonth from "./month.vue"
  129. import CrontabWeek from "./week.vue"
  130. import CrontabYear from "./year.vue"
  131. import CrontabResult from "./result.vue"
  132. const { proxy } = getCurrentInstance()
  133. const emit = defineEmits(['hide', 'fill'])
  134. const props = defineProps({
  135. hideComponent: {
  136. type: Array,
  137. default: () => [],
  138. },
  139. expression: {
  140. type: String,
  141. default: ""
  142. }
  143. })
  144. const tabTitles = ref(["秒", "分钟", "小时", "日", "月", "周", "年"])
  145. const tabActive = ref(0)
  146. const hideComponent = ref([])
  147. const expression = ref('')
  148. const crontabValueObj = ref({
  149. second: "*",
  150. min: "*",
  151. hour: "*",
  152. day: "*",
  153. month: "*",
  154. week: "?",
  155. year: "",
  156. })
  157. const crontabValueString = computed(() => {
  158. const obj = crontabValueObj.value
  159. return obj.second
  160. + " "
  161. + obj.min
  162. + " "
  163. + obj.hour
  164. + " "
  165. + obj.day
  166. + " "
  167. + obj.month
  168. + " "
  169. + obj.week
  170. + (obj.year === "" ? "" : " " + obj.year)
  171. })
  172. watch(expression, () => resolveExp())
  173. function shouldHide(key) {
  174. return !(hideComponent.value && hideComponent.value.includes(key))
  175. }
  176. function resolveExp() {
  177. // 反解析 表达式
  178. if (expression.value) {
  179. const arr = expression.value.split(/\s+/)
  180. if (arr.length >= 6) {
  181. //6 位以上是合法表达式
  182. let obj = {
  183. second: arr[0],
  184. min: arr[1],
  185. hour: arr[2],
  186. day: arr[3],
  187. month: arr[4],
  188. week: arr[5],
  189. year: arr[6] ? arr[6] : ""
  190. }
  191. crontabValueObj.value = {
  192. ...obj,
  193. }
  194. }
  195. } else {
  196. // 没有传入的表达式 则还原
  197. clearCron()
  198. }
  199. }
  200. // tab切换值
  201. function tabCheck(index) {
  202. tabActive.value = index
  203. }
  204. // 由子组件触发,更改表达式组成的字段值
  205. function updateCrontabValue(name, value, from) {
  206. crontabValueObj.value[name] = value
  207. }
  208. // 表单选项的子组件校验数字格式(通过-props传递)
  209. function checkNumber(value, minLimit, maxLimit) {
  210. // 检查必须为整数
  211. value = Math.floor(value)
  212. if (value < minLimit) {
  213. value = minLimit
  214. } else if (value > maxLimit) {
  215. value = maxLimit
  216. }
  217. return value
  218. }
  219. // 隐藏弹窗
  220. function hidePopup() {
  221. emit("hide")
  222. }
  223. // 填充表达式
  224. function submitFill() {
  225. emit("fill", crontabValueString.value)
  226. hidePopup()
  227. }
  228. function clearCron() {
  229. // 还原选择项
  230. crontabValueObj.value = {
  231. second: "*",
  232. min: "*",
  233. hour: "*",
  234. day: "*",
  235. month: "*",
  236. week: "?",
  237. year: "",
  238. }
  239. }
  240. onMounted(() => {
  241. expression.value = props.expression
  242. hideComponent.value = props.hideComponent
  243. })
  244. </script>
  245.  
  246. <style lang="scss" scoped>
  247. .pop_btn {
  248. text-align: center;
  249. margin-top: 20px;
  250. }
  251. .popup-main {
  252. position: relative;
  253. margin: 10px auto;
  254. background: #fff;
  255. border-radius: 5px;
  256. font-size: 12px;
  257. overflow: hidden;
  258. }
  259. .popup-title {
  260. overflow: hidden;
  261. line-height: 34px;
  262. padding-top: 6px;
  263. background: #f2f2f2;
  264. }
  265. .popup-result {
  266. box-sizing: border-box;
  267. line-height: 24px;
  268. margin: 25px auto;
  269. padding: 15px 10px 10px;
  270. border: 1px solid #ccc;
  271. position: relative;
  272. }
  273. .popup-result .title {
  274. position: absolute;
  275. top: -28px;
  276. left: 50%;
  277. width: 140px;
  278. font-size: 14px;
  279. margin-left: -70px;
  280. text-align: center;
  281. line-height: 30px;
  282. background: #fff;
  283. }
  284. .popup-result table {
  285. text-align: center;
  286. width: 100%;
  287. margin: 0 auto;
  288. }
  289. .popup-result table td:not(.result) {
  290. width: 3.5rem;
  291. min-width: 3.5rem;
  292. max-width: 3.5rem;
  293. }
  294. .popup-result table span {
  295. display: block;
  296. width: 100%;
  297. font-family: arial;
  298. line-height: 30px;
  299. height: 30px;
  300. white-space: nowrap;
  301. overflow: hidden;
  302. border: 1px solid #e8e8e8;
  303. }
  304. .popup-result-scroll {
  305. font-size: 12px;
  306. line-height: 24px;
  307. height: 10em;
  308. overflow-y: auto;
  309. }
  310. </style>