yg-yygl 0.0.1

package/src/views/sys/quartz/index.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import type {
+  BaseExportParams,
+  BusinessFilterItem,
+  IconActionItem,
+} from '@udp/component-ui';
+
+import { computed, h, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  ExportButton,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  deleteBatch,
+  deleteSingle,
+  exportJobExcel,
+  page,
+  start,
+  stop,
+} from '../../../api/quartz';
+import { MainContainer } from '../../../components/main-container';
+
+import JobForm from './job-form.vue';
+import ItemIdex from './joblog-index.vue';
+
+// 查询
+const searchParams = ref({
+  jobName: '',
+});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'jobName',
+    type: 'input',
+    width: 240,
+    placeholder: '输入任务名称',
+  },
+];
+
+// 列表信息
+const columns = [
+  { prop: 'jobName', label: '任务名称' },
+  {
+    prop: 'jobGroup',
+    label: '任务组名',
+    render: ({ row }: any) => {
+      return h('el-tag', row.jobGroup === '2' ? '系统' : '默认');
+    },
+  },
+  { prop: 'invokeTarget', label: '调用目标字符串' },
+  { prop: 'cronExpression', label: 'cron执行表达式' },
+  {
+    prop: 'jobStatus',
+    label: '任务状态',
+    render: ({ row }: any) => {
+      return h(
+        'el-tag',
+        {
+          type: +row.jobStatus === 0 ? 'success' : 'info',
+        },
+        +row.jobStatus === 0 ? '正常' : '暂停',
+      );
+    },
+  },
+];
+
+// 配置 API
+const api = {
+  list: (params: any) => page(params),
+  delete: (id: string) => {
+    const param = { id };
+    return deleteSingle(param);
+  },
+  batchDelete: (ids: string[]) => {
+    const param = { ids };
+    return deleteBatch(param);
+  },
+};
+
+const dataLayout = 'table';
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  deleteRow,
+  batchDelete,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+});
+
+const drawerVisible = ref(false);
+const jobFormRef = ref<typeof JobForm>();
+const itemDrawerVisible = ref(false);
+const addFlag = ref(true);
+
+const handleAdd = () => {
+  drawerVisible.value = true;
+  addFlag.value = true;
+};
+
+const editRow = ref<any>(null);
+const handleEdit = (row: any) => {
+  editRow.value = row;
+  drawerVisible.value = true;
+  addFlag.value = false;
+};
+
+const stopTask = async (row: any) => {
+  try {
+    const res = stop(row);
+    if (await res) {
+      ElMessage.success('操作成功!');
+      refresh();
+      return true;
+    } else {
+      ElMessage.error('操作失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+    return false;
+  }
+};
+
+const startTask = async (row: any) => {
+  try {
+    const res = start(row);
+    if (await res) {
+      ElMessage.success('操作成功!');
+      refresh();
+      return true;
+    } else {
+      ElMessage.error('操作失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+    return false;
+  }
+};
+
+const handleConfigItem = (row: any) => {
+  editRow.value = row;
+  itemDrawerVisible.value = true;
+};
+
+const handleAddSuccess = async () => {
+  const flag = await jobFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+const tableRef = ref<InstanceType<typeof Table>>();
+
+// 计算导出参数
+const exportParams = computed<BaseExportParams>(() => {
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  return {
+    // 查询条件
+    queryCondition: searchParams.value,
+    // 选择导出的字段列表，使用表格当前显示的列
+    selectedFields: normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop),
+    // 文件名
+    fileName: '定时任务数据.xlsx',
+    // 基础字段（保持兼容性）
+    columns: normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop),
+    filter: searchParams.value,
+  };
+});
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'log',
+    label: '调度日志',
+    icon: 'mdi:file-document-search-outline',
+    onClick: (row: any) => handleConfigItem(row),
+  },
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row),
+  },
+  {
+    key: 'toggle',
+    label: '启停切换',
+    icon: 'mdi:play-pause',
+    show: (row: any) => row.jobStatus === '0' || row.jobStatus === '1',
+    onClick: (row: any) => {
+      if (row.jobStatus === '0') {
+        stopTask(row);
+      } else {
+        startTask(row);
+      }
+    },
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => deleteRow(row),
+  },
+];
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  searchParams.value = {
+    ...searchParams.value,
+    ...params,
+  };
+  search(params);
+};
+
+const handleFilterReset = () => {
+  searchParams.value = { jobName: '' };
+  reset();
+};
+</script>
+<template>
+  <MainContainer>
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        ref="tableRef"
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="false"
+        :show-setting="false"
+        :layout-type="dataLayout"
+        action-width="124px"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增任务
+            </IconButton>
+            <ExportButton
+              :export-api="exportJobExcel"
+              :params="exportParams"
+              text="导出"
+              loading-type="progress"
+              :show-progress="true"
+              :min-loading-time="1200"
+              success-message="定时任务数据导出成功"
+              error-message="定时任务数据导出失败，请重试"
+            />
+          </div>
+        </template>
+
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+    <Drawer
+      v-model="drawerVisible"
+      :title="addFlag ? '新增任务' : '编辑任务'"
+      :type="addFlag ? 'add' : 'edit'"
+      size="808px"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <JobForm ref="jobFormRef" :edit-data="editRow" />
+    </Drawer>
+
+    <Drawer
+      v-model="itemDrawerVisible"
+      :hide-footer="true"
+      title="调度日志列表"
+      icon="mdi:drive-document"
+      size="1200px"
+    >
+      <ItemIdex ref="jobFormRef" :task-data="editRow" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>

package/src/views/sys/quartz/job-form.vue

@@ -0,0 +1,309 @@
+<script setup lang="tsx">
+import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
+
+import { Dialog, Icon } from '@udp/component-ui';
+
+import { ElForm, ElMessage } from 'element-plus';
+
+import { create, update } from '../../../api/quartz';
+
+import Crontab from './cron/index.vue';
+
+const props = defineProps<{
+  editData?: any;
+}>();
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+
+export type TaskDataType = {
+  cronExpression?: string;
+  id?: string;
+  invokeTarget?: string;
+  jobConcurrent?: string;
+  jobGroup?: string;
+  jobName?: string;
+  jobStatus?: string;
+  misfirePolicy?: string;
+};
+
+const misfirePolicyList = reactive([
+  { label: '立即执行', value: '0' },
+  { label: '执行一次', value: '1' },
+  { label: '放弃执行', value: '2' },
+]);
+const concurrentList = reactive([
+  { label: '允许', value: '0' },
+  { label: '禁止', value: '1' },
+]);
+
+const statusList = reactive([
+  { label: '正常', value: '0' },
+  { label: '暂停', value: '1' },
+]);
+
+const jobGroups = reactive([
+  { itemValue: '默认', itemCode: '1' },
+  { itemValue: '系统', itemCode: '2' },
+]);
+
+const formData = reactive({
+  cronExpression: '',
+  id: null,
+  invokeTarget: '',
+  jobConcurrent: '1',
+  jobGroup: '',
+  jobName: '',
+  jobStatus: '1',
+  misfirePolicy: '2',
+});
+
+// const formData = ref<TaskDataType>({});
+const rules = reactive({
+  jobName: [
+    { required: true, message: '请输入任务名称' },
+    {
+      pattern: /^[\u4E00-\u9FA5a-z0-9]+$/i,
+      message: '仅支持中文，英文字母和数字',
+    },
+    { max: 60, message: '任务名称不可以超过64个字符' },
+  ],
+  jobGroup: [{ required: true, message: '请选择任务组名' }],
+  invokeTarget: [
+    { required: true, message: '请输入调用方法' },
+    { max: 500, message: '调用目标字符串长度不能超过500个字符' },
+  ],
+  cronExpression: [
+    { required: true, message: '请输入cron表达式' },
+    { max: 255, message: 'Cron执行表达式不能超过255个字符' },
+  ],
+});
+
+const cronVisible = ref(false);
+const cronLoading = ref(false);
+const cronTitle = ref('');
+const expression = ref('');
+
+/** cron表达式按钮操作 */
+const handleShowCron = () => {
+  expression.value = formData.cronExpression || '';
+  cronVisible.value = true;
+};
+declare type ComponentRef<T> = InstanceType<T>;
+/** 确定后回传值 */
+const crontabRef = ref<ComponentRef<typeof Crontab>>();
+const crontabFill = async () => {
+  formData.cronExpression = await unref(crontabRef)?.crontabValueString();
+  cronVisible.value = false;
+};
+const resetCron = async () => {
+  unref(crontabRef)?.clearCron();
+};
+
+const formRef = ref<ComponentRef<typeof ElForm>>();
+// const save = async () => {
+//   const valid = await unref(formRef)
+//     ?.validate()
+//     .catch(() => {});
+//   if (valid) {
+//     return formData;
+//   }
+//   // eslint-disable-next-line no-alert
+//   alert(2222);
+// };
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+    // 表单验证
+    const valid = await unref(formRef)?.validate();
+    //   .catch(() => {});
+    if (!valid) {
+      return false;
+    }
+    const submitData = {
+      ...formData,
+    };
+    // 模拟API调用
+    const res = await (isEdit.value ? update(submitData) : create(submitData));
+    console.log(res);
+    if (res) {
+      ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+      return true;
+    } else {
+      ElMessage.error(res.message || '操作失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('提交失败:', error);
+    // ElMessage.error('提交失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const initTask = () => {
+  initFormData(props?.editData);
+};
+
+// 初始化表单数据
+const initFormData = (data?: any) => {
+  if (data?.id) {
+    // 保持响应式，逐个属性赋值
+    Object.assign(formData, {
+      cronExpression: data.cronExpression || '',
+      id: data.id || null,
+      invokeTarget: data.invokeTarget || '',
+      jobConcurrent: data.jobConcurrent || '',
+      jobGroup: data.jobGroup || '',
+      jobName: data.jobName || '',
+      jobStatus: data.jobStatus || '',
+      misfirePolicy: data.misfirePolicy || '',
+    });
+  } else {
+    // 重置表单数据
+    Object.assign(formData, {
+      cronExpression: '',
+      id: null,
+      invokeTarget: '',
+      jobConcurrent: '1',
+      jobGroup: '',
+      jobName: '',
+      jobStatus: '1',
+      misfirePolicy: '2',
+    });
+  }
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    console.log('编辑数据变化:', newData);
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+onMounted(() => {
+  initTask();
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+
+<template>
+  <el-form :model="formData" ref="formRef" :rules="rules" label-width="auto">
+    <el-form-item prop="jobName" label="任务名称">
+      <el-input v-model.trim="formData.jobName" placeholder="请输入任务名称" />
+    </el-form-item>
+    <el-form-item prop="jobGroup" label="任务分组">
+      <el-select
+        v-model="formData.jobGroup"
+        placeholder="请选择任务组名"
+        clearable
+        :show-arrow="false"
+      >
+        <el-option
+          v-for="item in jobGroups"
+          :value="item.itemCode.toLocaleString()"
+          :key="item.itemCode.toLocaleString()"
+          :label="item.itemValue"
+        >
+          {{ item.itemValue }}
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="invokeTarget" label="调用方法">
+      <template #label>
+        <div class="flex items-center gap-1">
+          调用方法
+          <el-tooltip placement="top">
+            <template #content>
+              <div>
+                Bean调用示例：biyiTask.biyiParams('biyi')
+                <br />Class类调用示例：com.ctsi.ssdc.quartz.task.TestTask.biyiParams('biyi')
+                <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
+              </div>
+            </template>
+            <Icon
+              class="m-l-1 vertical--15%"
+              name="ep:question-filled"
+              color="var(--app-question-color)"
+            />
+          </el-tooltip>
+        </div>
+      </template>
+      <el-input
+        v-model.trim="formData.invokeTarget"
+        placeholder="请输入调用目标字符串"
+      />
+    </el-form-item>
+    <el-form-item prop="cronExpression" label="cron表达式">
+      <el-input
+        v-model.trim="formData.cronExpression"
+        placeholder="请输入cron表达式"
+      >
+        <template #append>
+          <el-button type="primary" @click="handleShowCron">
+            生成表达式
+            <Icon class="ml-1" name="tdesign:time" />
+          </el-button>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="misfirePolicy" label="错误策略">
+      <el-radio-group v-model="formData.misfirePolicy">
+        <el-radio
+          v-for="item in misfirePolicyList"
+          :label="item.value"
+          :key="item.value"
+        >
+          <span>{{ item.label }}</span>
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item prop="concurrent" label="是否并发">
+      <el-radio-group v-model="formData.jobConcurrent">
+        <el-radio
+          v-for="item in concurrentList"
+          :label="item.value"
+          :key="item.value"
+        >
+          <span>{{ item.label }}</span>
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item prop="concurrent" label="状态">
+      <el-radio-group v-model="formData.jobStatus">
+        <el-radio
+          v-for="item in statusList"
+          :label="item.value"
+          :key="item.value"
+        >
+          <span>{{ item.label }}</span>
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </el-form>
+  <Dialog
+    v-model="cronVisible"
+    title="生成表达式"
+    icon="mdi:timer-cog"
+    width="50%"
+    max-height="70vh"
+  >
+    <Crontab ref="crontabRef" :expression="expression" />
+    <template #footer>
+      <el-button @click="cronVisible = false">取消</el-button>
+      <el-button type="warning" @click="resetCron">重置</el-button>
+      <el-button type="primary" :loading="cronLoading" @click="crontabFill">
+        确定
+      </el-button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped lang="less"></style>