执行任务模块修改

src/views/tool/crontab/edit.vue

@@ -7,14 +7,24 @@
     :mask-closable="false"
     :ok-loading="loading"
     @cancel="close"
-    @before-ok="submit">
+    @before-ok="submit"
+  >
     <!-- 表单信息 start -->
-    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :auto-label-width="true"
+    >
       <a-form-item label="任务名称" field="name">
         <a-input v-model="formData.name" placeholder="请输入任务名称" />
       </a-form-item>
       <a-form-item label="任务类型" field="type">
-        <a-select v-model="formData.type" :options="types" placeholder="请选择任务类型" />
+        <a-select
+          v-model="formData.type"
+          :options="types"
+          placeholder="请选择任务类型"
+        />
       </a-form-item>
       <a-form-item label="定时规则" field="task_style">
         <a-space>
@@ -29,14 +39,30 @@
             <a-option :value="8">每年</a-option>
           </a-select>
           <template v-if="formData.task_style == 8">
-            <a-input-number v-model="formData.month" :precision="0" :min="1" :max="12" :style="{ width: '80px' }" />
+            <a-input-number
+              v-model="formData.month"
+              :precision="0"
+              :min="1"
+              :max="12"
+              :style="{ width: '80px' }"
+            />
             <span>月</span>
           </template>
           <template v-if="formData.task_style > 6">
-            <a-input-number v-model="formData.day" :precision="0" :min="1" :max="31" :style="{ width: '80px' }" />
+            <a-input-number
+              v-model="formData.day"
+              :precision="0"
+              :min="1"
+              :max="31"
+              :style="{ width: '80px' }"
+            />
             <span>日</span>
           </template>
-          <a-select v-if="formData.task_style == 6" v-model="formData.week" :style="{ width: '80px' }">
+          <a-select
+            v-if="formData.task_style == 6"
+            v-model="formData.week"
+            :style="{ width: '80px' }"
+          >
             <a-option :value="1">周一</a-option>
             <a-option :value="2">周二</a-option>
             <a-option :value="3">周三</a-option>
@@ -46,15 +72,33 @@
             <a-option :value="0">周日</a-option>
           </a-select>
           <template v-if="[1, 3, 6, 7, 8].includes(formData.task_style)">
-            <a-input-number v-model="formData.hour" :precision="0" :min="0" :max="23" :style="{ width: '80px' }" />
+            <a-input-number
+              v-model="formData.hour"
+              :precision="0"
+              :min="0"
+              :max="23"
+              :style="{ width: '80px' }"
+            />
             <span>时</span>
           </template>
           <template v-if="formData.task_style != 5">
-            <a-input-number v-model="formData.minute" :precision="0" :min="0" :max="59" :style="{ width: '80px' }" />
+            <a-input-number
+              v-model="formData.minute"
+              :precision="0"
+              :min="0"
+              :max="59"
+              :style="{ width: '80px' }"
+            />
             <span>分</span>
           </template>
           <template v-if="formData.task_style == 5">
-            <a-input-number v-model="formData.second" :precision="0" :min="0" :max="59" :style="{ width: '80px' }" />
+            <a-input-number
+              v-model="formData.second"
+              :precision="0"
+              :min="0"
+              :max="59"
+              :style="{ width: '80px' }"
+            />
             <span>秒</span>
           </template>
         </a-space>
@@ -66,7 +110,11 @@
         <a-textarea v-model="formData.parameter" placeholder="请输入任务参数" />
       </a-form-item>
       <a-form-item label="状态" field="status">
-        <sa-radio v-model="formData.status" dict="data_status" placeholder="请选择状态" />
+        <sa-radio
+          v-model="formData.status"
+          dict="data_status"
+          placeholder="请选择状态"
+        />
       </a-form-item>
       <a-form-item label="备注" field="remark">
         <a-textarea v-model="formData.remark" placeholder="请输入备注" />
@@ -77,36 +125,32 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import tool from '@/utils/tool'
-import api from '@/api/tool/crontab'
+import { ref, reactive, computed } from "vue";
+import { Message } from "@arco-design/web-vue";
+import tool from "@/utils/tool";
+import api from "@/api/tool/crontab";
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(["success"]);
 
 // 引用定义
-const formRef = ref()
-const cronRef = ref()
-const mode = ref('')
-const visible = ref(false)
-const loading = ref(false)
+const formRef = ref();
+const cronRef = ref();
+const mode = ref("");
+const visible = ref(false);
+const loading = ref(false);
 
 let title = computed(() => {
-  return '定时任务' + (mode.value == 'add' ? '-新增' : '-编辑')
-})
+  return "定时任务" + (mode.value == "add" ? "-新增" : "-编辑");
+});
 
-const types = [
-  { label: 'URL任务GET', value: 1 },
-  { label: 'URL任务POST', value: 2 },
-  { label: '类任务', value: 3 },
-]
+const types = [{ label: "类任务", value: 3 }];
 
 // 表单初始值
 const initialFormData = {
-  id: '',
-  name: '',
-  type: '',
-  rule: '',
+  id: "",
+  name: "",
+  type: "",
+  rule: "",
   task_style: 1,
   month: 1,
   day: 1,
@@ -114,88 +158,88 @@ const initialFormData = {
   hour: 1,
   minute: 1,
   second: 1,
-  target: '',
-  parameter: '',
+  target: "",
+  parameter: "",
   status: 1,
-  remark: '',
-}
+  remark: "",
+};
 
 // 表单信息
-const formData = reactive({ ...initialFormData })
+const formData = reactive({ ...initialFormData });
 
 // 验证规则
 const rules = {
-  name: [{ required: true, message: '任务名称不能为空' }],
-  type: [{ required: true, message: '任务类型不能为空' }],
-  task_style: [{ required: true, message: '定时规则不能为空' }],
-  target: [{ required: true, message: '调用目标不能为空' }],
-}
+  name: [{ required: true, message: "任务名称不能为空" }],
+  type: [{ required: true, message: "任务类型不能为空" }],
+  task_style: [{ required: true, message: "定时规则不能为空" }],
+  target: [{ required: true, message: "调用目标不能为空" }],
+};
 
 // 打开弹框
-const open = async (type = 'add') => {
-  mode.value = type
+const open = async (type = "add") => {
+  mode.value = type;
   // 重置表单数据
-  Object.assign(formData, initialFormData)
-  formRef.value.clearValidate()
-  visible.value = true
-  await initPage()
-}
+  Object.assign(formData, initialFormData);
+  formRef.value.clearValidate();
+  visible.value = true;
+  await initPage();
+};
 
 // 提取数字
 const extractNumber = (str) => {
-  const match = str.match(/\d+/)
-  return match ? Number.parseInt(match[0]) : 0
-}
+  const match = str.match(/\d+/);
+  return match ? Number.parseInt(match[0]) : 0;
+};
 
 // 初始化页面数据
-const initPage = async () => {}
+const initPage = async () => {};
 
 // 设置数据
 const setFormData = async (data) => {
   for (const key in formData) {
     if (data[key] != null && data[key] != undefined) {
-      formData[key] = data[key]
+      formData[key] = data[key];
     }
   }
-  const words = formData['rule'].split(' ')
-  formData['second'] = extractNumber(words[0])
-  formData['minute'] = extractNumber(words[1])
-  formData['hour'] = extractNumber(words[2])
-  formData['day'] = extractNumber(words[3])
-  formData['month'] = extractNumber(words[4])
-  formData['week'] = extractNumber(words[5])
-}
+  const words = formData["rule"].split(" ");
+  formData["second"] = extractNumber(words[0]);
+  formData["minute"] = extractNumber(words[1]);
+  formData["hour"] = extractNumber(words[2]);
+  formData["day"] = extractNumber(words[3]);
+  formData["month"] = extractNumber(words[4]);
+  formData["week"] = extractNumber(words[5]);
+};
 
 // 数据保存
 const submit = async (done) => {
-  const validate = await formRef.value?.validate()
+  const validate = await formRef.value?.validate();
   if (!validate) {
-    loading.value = true
-    let data = { ...formData }
-    let result = {}
-    if (mode.value === 'add') {
+    loading.value = true;
+    let data = { ...formData };
+    let result = {};
+    if (mode.value === "add") {
       // 添加数据
-      data.id = undefined
-      result = await api.save(data)
+      data.id = undefined;
+      result = await api.save(data);
     } else {
       // 修改数据
-      result = await api.update(data.id, data)
+      result = await api.update(data.id, data);
     }
     if (result.code === 200) {
-      Message.success('操作成功')
-      emit('success')
-      done(true)
+      Message.success("操作成功");
+      emit("success");
+      done(true);
     }
     // 防止连续点击提交
     setTimeout(() => {
-      loading.value = false
-    }, 500)
+      loading.value = false;
+    }, 500);
   }
-  done(false)
-}
+  done(false);
+};
 
 // 关闭弹窗
-const close = () => (visible.value = false)
+const close = () => (visible.value = false);
 
-defineExpose({ open, setFormData })
+defineExpose({ open, setFormData });
 </script>

src/views/tool/crontab/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="ma-content-block lg:flex justify-between">
     <!-- CRUD 组件 -->
-    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
+    <sa-table
+      ref="crudRef"
+      :options="options"
+      :columns="columns"
+      :searchForm="searchForm"
+    >
       <!-- 搜索区 tableSearch -->
       <template #tableSearch>
         <a-col :sm="8" :xs="24">
@@ -11,12 +16,22 @@
         </a-col>
         <a-col :sm="8" :xs="24">
           <a-form-item field="type" label="任务类型">
-            <a-select v-model="searchForm.type" :options="types" allow-clear placeholder="请选择任务类型" />
+            <a-select
+              v-model="searchForm.type"
+              :options="types"
+              allow-clear
+              placeholder="请选择任务类型"
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="8" :xs="24">
           <a-form-item field="status" label="状态">
-            <sa-select v-model="searchForm.status" dict="data_status" allow-clear placeholder="请选择状态" />
+            <sa-select
+              v-model="searchForm.status"
+              dict="data_status"
+              allow-clear
+              placeholder="请选择状态"
+            />
           </a-form-item>
         </a-col>
       </template>
@@ -28,13 +43,22 @@
       </template>
       <!-- 状态列 -->
       <template #status="{ record }">
-        <sa-switch v-model="record.status" @change="changeStatus($event, record.id)"></sa-switch>
+        <sa-switch
+          v-model="record.status"
+          @change="changeStatus($event, record.id)"
+        ></sa-switch>
       </template>
 
       <!-- 操作前置扩展 -->
       <template #operationBeforeExtend="{ record }">
-        <a-popconfirm content="确定立刻执行一次?" position="bottom" @ok="run(record)">
-          <a-link v-auth="['/tool/crontab/run']"><icon-caret-right /> 执行一次</a-link>
+        <a-popconfirm
+          content="确定立刻执行一次?"
+          position="bottom"
+          @ok="run(record)"
+        >
+          <a-link v-auth="['/tool/crontab/run']"
+            ><icon-caret-right /> 执行一次</a-link
+          >
         </a-popconfirm>
         <a-link @click="openLogModal(record)"><icon-history /> 日志 </a-link>
       </template>
@@ -49,53 +73,49 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
+import { ref, reactive, onMounted } from "vue";
+import { Message } from "@arco-design/web-vue";
 
-import api from '@/api/tool/crontab'
-import LogList from './logList.vue'
-import EditForm from './edit.vue'
+import api from "@/api/tool/crontab";
+import LogList from "./logList.vue";
+import EditForm from "./edit.vue";
 
-const crudRef = ref()
-const editRef = ref()
-const logsRef = ref()
+const crudRef = ref();
+const editRef = ref();
+const logsRef = ref();
 
 // 搜索表单
 const searchForm = ref({
-  name: '',
-  type: '',
-  status: '',
-})
+  name: "",
+  type: "",
+  status: "",
+});
 
 // 类型字典
-const types = [
-  { label: 'URL任务GET', value: 1 },
-  { label: 'URL任务POST', value: 2 },
-  { label: '类任务', value: 3 },
-]
+const types = [{ label: "类任务", value: 3 }];
 
 // 修改状态
 const changeStatus = async (status, id) => {
-  const response = await api.changeStatus({ id, status })
+  const response = await api.changeStatus({ id, status });
   if (response.code === 200) {
-    Message.success(response.message)
-    crudRef.value.refresh()
+    Message.success(response.message);
+    crudRef.value.refresh();
   }
-}
+};
 
 // 执行
 const run = async (row) => {
-  const response = await api.run({ id: row.id })
+  const response = await api.run({ id: row.id });
   if (response.code === 200) {
-    Message.success(response.message)
-    crudRef.value.refresh()
+    Message.success(response.message);
+    crudRef.value.refresh();
   }
-}
+};
 
 // 日志窗口
 const openLogModal = (row) => {
-  logsRef.value.open(row.id)
-}
+  logsRef.value.open(row.id);
+};
 
 // SaTable 基础配置
 const options = reactive({
@@ -104,53 +124,59 @@ const options = reactive({
   operationColumnWidth: 280,
   add: {
     show: true,
-    auth: ['/tool/crontab/save'],
+    auth: ["/tool/crontab/save"],
     func: async () => {
-      editRef.value?.open()
+      editRef.value?.open();
     },
   },
   edit: {
     show: true,
-    auth: ['/tool/crontab/update'],
+    auth: ["/tool/crontab/update"],
     func: async (record) => {
-      editRef.value?.open('edit')
-      editRef.value?.setFormData(record)
+      editRef.value?.open("edit");
+      editRef.value?.setFormData(record);
     },
   },
   delete: {
     show: true,
-    auth: ['/tool/crontab/destroy'],
+    auth: ["/tool/crontab/destroy"],
     func: async (params) => {
-      const resp = await api.destroy(params)
+      const resp = await api.destroy(params);
       if (resp.code === 200) {
-        Message.success(`删除成功！`)
-        crudRef.value?.refresh()
+        Message.success(`删除成功！`);
+        crudRef.value?.refresh();
       }
     },
   },
-})
+});
 
 // SaTable 列配置
 const columns = reactive([
-  { title: '任务名称', dataIndex: 'name', width: 180 },
-  { title: '任务类型', dataIndex: 'type', type: 'dict', options: types, width: 140 },
-  { title: '定时规则', dataIndex: 'rule', width: 260 },
-  { title: '调用目标', dataIndex: 'target', width: 260 },
-  { title: '状态', dataIndex: 'status', dict: 'data_status', width: 120 },
-  { title: '创建时间', dataIndex: 'create_time', width: 180 },
-])
+  { title: "任务名称", dataIndex: "name", width: 180 },
+  {
+    title: "任务类型",
+    dataIndex: "type",
+    type: "dict",
+    options: types,
+    width: 140,
+  },
+  { title: "任务传参", dataIndex: "parameter", width: 260 },
+  { title: "调用目标", dataIndex: "target", width: 260 },
+  { title: "状态", dataIndex: "status", dict: "data_status", width: 120 },
+  { title: "创建时间", dataIndex: "create_time", width: 180 },
+]);
 
 // 页面数据初始化
-const initPage = async () => {}
+const initPage = async () => {};
 
 // SaTable 数据请求
 const refresh = async () => {
-  crudRef.value?.refresh()
-}
+  crudRef.value?.refresh();
+};
 
 // 页面加载完成执行
 onMounted(async () => {
-  initPage()
-  refresh()
-})
+  initPage();
+  refresh();
+});
 </script>