工作流上下文参数 增加管理页面

public/iconify/system.json

@@ -0,0 +1,16 @@
+{
+  "prefix": "system",
+  "lastModified": 1716123717,
+  "aliases": {},
+  "width": 32,
+  "height": 32,
+  "icons": {
+    "config": {
+      "body": "<path d=\"M32 26v-2h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49l-1.414-1.414l-1.49 1.49A4.968 4.968 0 0 0 26 20.101V18h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49l-1.414 1.414l1.49 1.49A4.968 4.968 0 0 0 20.101 24H18v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49l1.414 1.414l1.49-1.49a4.968 4.968 0 0 0 1.753.732V32h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49l1.414-1.414l-1.49-1.49A4.968 4.968 0 0 0 29.899 26zm-7 2a3 3 0 1 1 3-3a3.003 3.003 0 0 1-3 3z\" fill=\"currentColor\"></path><circle cx=\"7\" cy=\"20\" r=\"2\" fill=\"currentColor\"></circle><path d=\"M14 20a4 4 0 1 1 4-4a4.012 4.012 0 0 1-4 4zm0-6a2 2 0 1 0 2 2a2.006 2.006 0 0 0-2-2z\" fill=\"currentColor\"></path><circle cx=\"21\" cy=\"12\" r=\"2\" fill=\"currentColor\"></circle><path d=\"M13.02 28.271L3 22.427V9.574l11-6.416l11.496 6.706l1.008-1.728l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 1 9v14a1 1 0 0 0 .496.864L12.013 30z\" fill=\"currentColor\"></path>"
+    },
+    "parameter": {
+      "body": "<path d=\"M28 13V8a2.002 2.002 0 0 0-2-2h-3v2h3v5a3.976 3.976 0 0 0 1.382 3A3.976 3.976 0 0 0 26 19v5h-3v2h3a2.002 2.002 0 0 0 2-2v-5a2.002 2.002 0 0 1 2-2v-2a2.002 2.002 0 0 1-2-2z\" fill=\"currentColor\"></path><path d=\"M17 9l-.857 3h2L19 9h2l-.857 3H22v2h-2.428l-1.143 4H21v2h-3.143L17 23h-2l.857-3h-2L13 23h-2l.857-3H10v-2h2.429l1.143-4H11v-2h3.143L15 9zm.572 5h-2l-1.143 4h2z\" fill-rule=\"evenodd\" fill=\"currentColor\"></path><path d=\"M6 13V8h3V6H6a2.002 2.002 0 0 0-2 2v5a2.002 2.002 0 0 1-2 2v2a2.002 2.002 0 0 1 2 2v5a2.002 2.002 0 0 0 2 2h3v-2H6v-5a3.976 3.976 0 0 0-1.382-3A3.976 3.976 0 0 0 6 13z\" fill=\"currentColor\"></path>"
+    }
+
+  }
+}

src/constants/business.ts

@@ -289,6 +289,12 @@ export const retryOperationReasonRecord: Record<Api.Common.RetryOperationReason,
 };
 export const retryOperationReasonOptions = transformRecordToNumberOption(retryOperationReasonRecord);
 
+export const systemVariableTypeRecord: Record<Api.GroupConfig.VariableType, App.I18n.I18nKey> = {
+  1: 'common.variableType.variableType1',
+  2: 'common.variableType.variableType2'
+};
+export const systemVariableTypeOptions = transformRecordToNumberOption(systemVariableTypeRecord);
+
 export const jobOperationReasonEnum: Workflow.JobTagType = {
   0: {
     name: operationReasonRecord[0],

src/locales/langs/zh-cn.ts

@@ -144,6 +144,10 @@ const local: App.I18n.Schema = {
         python: 'Python'
       }
     },
+    variableType:{
+      variableType1: '字符变量',
+      variableType2: '表达式变量'
+    },
     taskType: {
       label: '任务类型',
       form: '请选择任务类型',
@@ -390,7 +394,9 @@ const local: App.I18n.Schema = {
     workflow_form_add: '新增工作流',
     job: '定时任务',
     job_task: '任务管理',
-    job_batch: '执行批次'
+    job_batch: '执行批次',
+    system: '系统参数',
+    system_variable: '参数管理'
   },
   page: {
     common: {
@@ -951,6 +957,29 @@ const local: App.I18n.Schema = {
         admin: '管理员'
       }
     },
+    system_variable: {
+      title: '系统参数',
+      variableKey: '变量标识',
+      variableName: '变量名称',
+      variableValue: '变量值',
+      variableType: '变量类型',
+      description:'变量描述',
+      detail: '变量详情',
+      add: '新增',
+      edit: '编辑',
+      addVariable: '新增变量',
+      editVariable: '编辑变量',
+      variableType1: '字符变量',
+      variableType2: '表达式变量',
+
+      form: {
+        variableName: '请输入变量名称',
+        variableKey: '请输入变量标识',
+        variableValue: '请输入变量值',
+        variableType: '请选择变量类型',
+        description: '请输入描述',
+      }
+    },
     log: {
       title: '日志详情',
       view: '查看日志',

src/router/elegant/imports.ts

@@ -34,6 +34,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   retry_info: () => import("@/views/retry/info/index.vue"),
   retry_scene: () => import("@/views/retry/scene/index.vue"),
   retry_task: () => import("@/views/retry/task/index.vue"),
+  system_manager: () => import("@/views/system/manager/index.vue"),
   user_manager: () => import("@/views/user/manager/index.vue"),
   workflow_batch: () => import("@/views/workflow/batch/index.vue"),
   workflow_form_add: () => import("@/views/workflow/form/add/index.vue"),

src/router/elegant/routes.ts

@@ -268,6 +268,26 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'system',
+    path: '/system',
+    component: 'layout.base',
+    meta: {
+      title: 'system',
+      i18nKey: 'route.system'
+    },
+    children: [
+      {
+        name: 'system_manager',
+        path: '/system/manager',
+        component: 'view.system_manager',
+        meta: {
+          title: 'system_manager',
+          i18nKey: 'route.system_manager'
+        }
+      }
+    ]
+  },
   {
     name: 'user',
     path: '/user',

src/service/api/system-variable.ts

@@ -0,0 +1,51 @@
+import { request } from '../request';
+
+export function fetchGetSystemVarPageList(params?: Api.SystemVariable.SystemVariableSearchParams) {
+  return request<Api.SystemVariable.SystemVariableList>({
+    url: '/system-variable/page/list',
+    method: 'get',
+    params
+  });
+}
+export function fetchGetSystemVarList() {
+  return request({
+    url: '/system-variable/list',
+    method: 'get'
+  });
+}
+
+/** add Variable */
+export function fetchAddVariable(data: Api.SystemVariable.SystemVariable) {
+  return request<boolean>({
+    url: '/system-variable',
+    method: 'post',
+    data
+  });
+}
+
+/** edit Variable */
+export function fetchEditVariable(data: Api.SystemVariable.SystemVariable) {
+  return request<boolean>({
+    url: '/system-variable',
+    method: 'put',
+    data
+  });
+}
+
+
+/** delete Variable */
+export function fetchDelVariable(id: number) {
+  return request<boolean>({
+    url: `/system-variable/${id}`,
+    method: 'delete'
+  });
+}
+
+/** batch delete Variable */
+export function fetchBatchDelteVariable(data: string[]) {
+  return request<boolean>({
+    url: `/system-variable/ids`,
+    method: 'delete',
+    data
+  });
+}

src/typings/api.d.ts

@@ -381,7 +381,7 @@ declare namespace Api {
     type GroupStatusType = 0 | 1;
 
     type YesOrNoType = 0 | 1;
-
+    type VariableType = 1 | 2;
     /** groupConfig */
     type GroupConfig = Common.CommonRecord<{
       /** 命名空间id */
@@ -1361,4 +1361,30 @@ declare namespace Api {
       throwable: string;
     };
   }
+
+  namespace SystemVariable {
+    type VariableType = 1 | 2;
+
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'page' | 'size'>;
+    type SystemVariable = Common.CommonRecord<{
+      /** 显示名：当前时间 */
+      variableName: string;
+      /** key：${date} */
+      variableKey: string;
+      /** value: yyyyMMdd */
+      variableValue: string;
+      /** 变量类型 1-字符串变量 2-表达式变量 */
+      variableType: string;
+      /** 描述 */
+      description: string;
+    }>;
+
+    /**搜索参数*/
+    type SystemVariableSearchParams = CommonType.RecordNullable<
+      Pick<Api.SystemVariable.SystemVariable, 'id' | 'variableName' | 'variableKey' | 'variableValue' | 'variableType' | 'description'> &
+      CommonSearchParams
+    >;
+
+    type SystemVariableList = Common.PaginatingQueryRecord<SystemVariable>;
+  }
 }

src/views/system/manager/index.vue

@@ -0,0 +1,196 @@
+<script setup lang="tsx">
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { ref } from 'vue';
+import { useBoolean } from '@sa/hooks';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { systemVariableTypeRecord } from '@/constants/business';
+import SystemVariableOperateDrawer from './modules/system-variable-operate-drawer.vue';
+import SystemVariableSearch from './modules/system-variable-search.vue';
+import SystemVariableDetailDrawer from './modules/system-variable-detail-drawer.vue';
+import { fetchDelVariable, fetchGetSystemVarPageList } from "@/service/api/system-variable";
+
+const appStore = useAppStore();
+
+/** 详情页属性数据 */
+const detailData = ref<Api.SystemVariable.SystemVariable | null>();
+/** 详情页可见状态 */
+const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+
+const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: fetchGetSystemVarPageList,
+  apiParams: {
+    page: 1,
+    size: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    variableName: null
+  },
+  columns: () => [
+    {
+      type: 'selection'
+    },
+    {
+      key: 'id',
+      title: $t('common.index'),
+      align: 'left',
+      minWidth: 50
+    },
+    {
+      key: 'variableName',
+      title: $t('page.system_variable.variableName'),
+      align: 'left',
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          openDetail();
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.variableName}
+          </n-button>
+        );
+      }
+    },
+    {
+      key: 'variableKey',
+      title: $t('page.system_variable.variableKey'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'variableValue',
+      title: $t('page.system_variable.variableValue'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'variableType',
+      title: $t('page.system_variable.variableType'),
+      align: 'left',
+      minWidth: 50,
+      render: row => {
+        if (row.role === null) {
+          return null;
+        }
+        const tagMap: Record<Api.SystemVariable.VariableType, NaiveUI.ThemeColor> = {
+          1: 'info',
+          2: 'warning'
+        };
+        const label = $t(systemVariableTypeRecord[row.variableType]);
+
+        return <NTag type={tagMap[row.variableType!]}>{label}</NTag>;
+      }
+    },
+
+    {
+      key: 'description',
+      title: $t('page.system_variable.description'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'createDt',
+      title: $t('common.createDt'),
+      align: 'left',
+      minWidth: 50
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" text onClick={() => edit(row.id!)}>
+            {$t('common.edit')}
+          </NButton>
+            <>
+              <n-divider vertical />
+              <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
+                {{
+                  default: () => $t('common.confirmDelete'),
+                  trigger: () => (
+                    <NButton type="error" text ghost size="small">
+                      {$t('common.delete')}
+                    </NButton>
+                  )
+                }}
+              </NPopconfirm>
+            </>
+
+        </div>
+      )
+    }
+  ]
+});
+
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onDeleted, onBatchDeleted } =
+  useTableOperate(data, getData);
+
+
+
+async function handleBatchDelete() {
+  const { error } = await fetchBatchDelteVariable(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+function edit(id: string) {
+  handleEdit(id);
+}
+async function handleDelete(id: string) {
+  const { error } = await fetchDelVariable(id as any);
+  if (error) return;
+  onDeleted();
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <SystemVariableSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <DeleteAlert />
+    <NCard
+      :title="$t('page.system_variable.title')"
+      :bordered="false"
+      size="small"
+      class="sm:flex-1-hidden card-wrapper"
+      header-class="view-card-header"
+    >
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <SystemVariableOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+      <SystemVariableDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/system/manager/modules/system-variable-detail-drawer.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { NTag } from 'naive-ui';
+import { roleRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+
+defineOptions({
+  name: 'SystemVariableDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.SystemVariable.SystemVariable | null;
+}
+
+defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.system_variable.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.system_variable.variableName')" :span="2">
+        {{ rowData?.variableName }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableType')" :span="2">
+        {{ rowData?.variableType }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableKey')" :span="2">
+        {{ rowData?.variableKey }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableValue')" :span="2">
+        {{ rowData?.variableValue }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.description')" :span="2">
+        {{ rowData?.description }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('common.updateDt')" :span="2">
+        {{ rowData?.updateDt }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped>
+.title {
+  font-weight: bolder !important;
+}
+</style>

src/views/system/manager/modules/system-variable-operate-drawer.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import type { OptionValue } from 'naive-ui/es/transfer/src/interface';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import OperateDrawer from '@/components/common/operate-drawer.vue';
+import { $t } from '@/locales';
+import { fetchGetAllGroupConfigList } from '@/service/api';
+import {systemVariableTypeOptions} from '@/constants/business';
+import {fetchEditVariable,fetchAddVariable} from "@/service/api/system-variable";
+
+defineOptions({
+  name: 'SystemVariableOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.SystemVariable.SystemVariable | null;
+}
+
+const valueRef = ref();
+const groupConfigs = ref();
+const updatePass = ref<number>(0);
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: $t('page.system_variable.addVariable'),
+    edit: $t('page.system_variable.editVariable')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemVariable.SystemVariable,
+  'id' | 'variableName' | 'variableKey' | 'variableValue' | 'variableType' | 'description'
+>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    variableName: '',
+    variableKey: '',
+    variableValue: '',
+    variableType: 1,
+    description: ''
+  };
+}
+
+type RuleRecord = Partial<Record<keyof Model, App.Global.FormRule[]>>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+
+    variableName: defaultRequiredRule,
+    variableKey: defaultRequiredRule,
+    variableValue: defaultRequiredRule,
+    variableType: defaultRequiredRule,
+    description: defaultRequiredRule
+
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  if (props.operateType === 'add') {
+    const {
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description } = model;
+    const { error } = await fetchAddVariable({
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description
+    });
+    if (error) return;
+    window.$message?.success($t('common.addSuccess'));
+  }
+
+  if (props.operateType === 'edit') {
+    const { id, variableKey,variableName,variableValue,variableType,description } = model;
+    const { error } = await fetchEditVariable({
+      id,
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description
+    });
+    if (error) return;
+    window.$message?.success($t('common.updateSuccess'));
+  }
+
+  closeDrawer();
+  emit('submitted');
+}
+
+const getAllGroupConfigList = async () => {
+  const res = await fetchGetAllGroupConfigList([]);
+  groupConfigs.value = res.data?.map(option => ({
+    value: `${option.groupName}@${option.namespaceId}`,
+    label: `${option.groupName}(${option.namespaceName})`
+  }));
+};
+
+onMounted(() => {
+  // 加载组列表数据
+  getAllGroupConfigList();
+});
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :label="$t('page.system_variable.variableName')" >
+        <NInput
+          v-model:value="model.variableName"
+          :placeholder="$t('page.system_variable.form.variableName')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableType')" path="variableType">
+        <!--        <NInput v-model:value="model.variableType" :placeholder="$t('page.system_variable.form.variableType')" />-->
+        <NRadioGroup v-model:value="model.variableType" name="initScene">
+          <NSpace>
+            <NRadio
+              v-for="item in systemVariableTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="$t(item.label)"
+            />
+          </NSpace>
+        </NRadioGroup>
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableKey')" path="variableKey">
+        <NInput v-model:value="model.variableKey" :placeholder="$t('page.system_variable.form.variableKey')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableValue')" path="variableValue">
+        <NInput v-model:value="model.variableValue" :placeholder="$t('page.system_variable.form.variableValue')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.description')" path="description">
+        <NInput v-model:value="model.description" :placeholder="$t('page.system_variable.form.description')" />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+      </NSpace>
+    </template>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>

src/views/system/manager/modules/system-variable-search.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import {translateOptions} from "@/utils/common";
+import {groupConfigStatusOptions} from "@/constants/business";
+
+defineOptions({
+  name: 'SystemVariableCenterSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const model = defineModel<Api.SystemVariable.SystemVariableSearchParams>('model', { required: true });
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.system_variable.variableName')" path="variableName" class="pr-24px">
+      <NInput v-model:value="model.variableName" :placeholder="$t('page.system_variable.form.variableName')" clearable />
+    </NFormItemGi>
+<!--    <NFormItemGi span="24 s:12 m:6" :label="$t('page.system_variable.varType')" path="groupStatus" class="pr-24px">-->
+<!--      <NSelect-->
+<!--        v-model:value="model.groupStatus"-->
+<!--        :placeholder="$t('page.system_variable.form.variableType')"-->
+<!--        :options="translateOptions(groupConfigStatusOptions)"-->
+<!--        clearable-->
+<!--      />-->
+<!--    </NFormItemGi>-->
+  </SearchForm>
+</template>
+
+<style scoped></style>