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