封装流程属性面板：结束节点、子流程。流程分类相关接口对接

src/api/sys/WFSchemeInfo.ts

@@ -0,0 +1,51 @@
+// WFSchemeInfo 流程模版基本信息 
+import { defHttp } from '@/utils/http/axios';
+import {SchemeListParams,GetSchemeModel,AddParams,
+  DeleteParams,UpdateParams,StateParams,HistoryParams,GetHistoryModel} from './model/wfSchemeInfoModel'
+enum Api {
+  // 流程模板基本信息
+  LoadPage = '/api/WFSchemeInfo/LoadPage',
+  Add = '/api/WFSchemeInfo/Add',
+  Update = '/api/WFSchemeInfo/Update',
+  Delete = '/api/WFSchemeInfo/Delete',
+  UpDateState = '/api/WFSchemeInfo/UpDateState',
+  // 流程模板详细信息
+  loadHistoryPage= '/api/WFScheme/LoadPage'
+}
+
+/**
+ * @description: getLoadPage 模板列表
+ */
+export function getLoadPage(params?: SchemeListParams) {
+  return defHttp.get<GetSchemeModel>({ url: Api.LoadPage, params });
+}
+/**
+ * @description: postAdd
+ */
+export function postAdd( params?:AddParams) {
+  return defHttp.post(
+    {
+      url: Api.Add,
+      params,
+    },
+  );
+}
+
+export function update(params:UpdateParams) {
+  return defHttp.post({
+    url: Api.Update,
+    params
+  });
+}
+
+export function del(params:DeleteParams) {
+  return defHttp.post({ url: Api.Delete + "?id=" + params.id });
+}
+
+export function updateState(params:StateParams){
+  return defHttp.post({ url: Api.UpDateState + "?id=" + params.id +"&state="+params.state});
+}
+
+export function getLoadHistoryPage(params?:HistoryParams){
+  return defHttp.get<GetHistoryModel>({url:Api.loadHistoryPage,params})
+}

src/api/sys/model/sysDataItemDetailModel.ts

@@ -0,0 +1,61 @@
+/**
+ * @description: 字典明细接口区分参数
+ */
+export interface CodeParams {
+  code: string;
+}
+
+/**
+ * @description: 字典明细添加参数
+ */
+export interface AddParams {
+  itemName: string;
+  itemValue: string;
+  sortCode: number;
+  enabledMark: number;
+  description: string;
+}
+
+/**
+ * @description: 字典明细更新参数
+ */
+ export interface UpdateParams {
+  itemDetailId:string;
+  itemName: string;
+  itemValue: string;
+  sortCode: number;
+  enabledMark: number;
+  description: string;
+}
+
+
+/**
+ * @description: 分类明细删除参数
+ */
+export interface DeleteParams {
+  id: string ;
+}
+
+/**
+ * @description: 获取分类明细返回值
+ */
+export interface GetSysDataItemDetailModel {
+  itemDetailId: string;
+  itemId: string;
+  parentId: string;
+  itemCode: string;
+  itemName: string;
+  itemValue: string;
+  quickQuery: string;
+  simpleSpelling: string;
+  isDefault: string;
+  sortCode: number;
+  deleteMark: number;
+  enabledMark: number;
+  description: string;
+  createDate: string;
+  createUserName: string;
+  modifyDate: string;
+  modifyUserId: string;
+  modifyUserName: string;
+}

src/api/sys/model/wfSchemeInfoModel.ts

@@ -0,0 +1,153 @@
+/**
+ * @description: 流程模板基本信息参数
+ */
+export interface SchemeListParams {
+  key: string;
+  page: number;
+  limit: number;
+  category: string;
+  ids?: string;
+}
+
+/**
+ * @description: 流程模板添加参数
+ */
+export interface AddParams {
+  schemeinfo: {
+    id: string,
+    code: string,
+    name: string,
+    category: string,
+    color: string,
+    icon: string,
+    schemeId: string,
+    enabledMark: 0,
+    mark: 0,
+    isInApp: 0,
+    authType: 0,
+    description: string,
+    type: 0,
+    createDate: string,
+    createUserId: string,
+    createUserName: string
+  },
+  schemeAuthList: [
+    {
+      id: string,
+      schemeInfoId: string,
+      objName: string,
+      objId: string,
+      objType: 0
+    }
+  ],
+  scheme: {
+    id: string,
+    schemeInfoId: string,
+    type: 0,
+    createDate: string,
+    createUserId: string,
+    createUserName: string,
+    content: string
+  }
+}
+
+/**
+ * @description: 字典明细更新参数
+ */
+export interface UpdateParams {
+  schemeinfo: {
+    id: string,
+    code: string,
+    name: string,
+    category: string,
+    color: string,
+    icon: string,
+    schemeId: string,
+    enabledMark: 0,
+    mark: 0,
+    isInApp: 0,
+    authType: 0,
+    description: string,
+    type: 0,
+    createDate: string,
+    createUserId: string,
+    createUserName: string
+  },
+  schemeAuthList: [
+    {
+      id: string,
+      schemeInfoId: string,
+      objName: string,
+      objId: string,
+      objType: 0
+    }
+  ],
+  scheme: {
+    id: string,
+    schemeInfoId: string,
+    type: 0,
+    createDate: string,
+    createUserId: string,
+    createUserName: string,
+    content: string
+  }
+}
+
+
+/**
+ * @description: 分类明细删除参数
+ */
+export interface DeleteParams {
+  id: string;
+}
+
+export interface StateParams{
+  id:string;
+  state:number;
+}
+
+/**
+ * @description: 获取分类明细返回值
+ */
+export interface GetSchemeModel {
+  itemDetailId: string;
+  itemId: string;
+  parentId: string;
+  itemCode: string;
+  itemName: string;
+  itemValue: string;
+  quickQuery: string;
+  simpleSpelling: string;
+  isDefault: string;
+  sortCode: number;
+  deleteMark: number;
+  enabledMark: number;
+  description: string;
+  createDate: string;
+  createUserName: string;
+  modifyDate: string;
+  modifyUserId: string;
+  modifyUserName: string;
+}
+
+/**
+ * @description: 历史记录查询参数
+ */
+export interface HistoryParams{
+  key: string;
+  page: number;
+  limit: number;
+  id?: string;
+}
+/**
+ * @description: 历史记录返回值
+ */
+export interface GetHistoryModel{
+  id: string,
+  schemeInfoId: string,
+  type: number,
+  createDate: string,
+  createUserId: string,
+  createUserName: string,
+  content: string
+}

src/api/sys/sysDataItemDetail.ts

@@ -0,0 +1,42 @@
+// sysDataItemDetail 字典明细接口api
+import { defHttp } from '@/utils/http/axios';
+import {CodeParams,AddParams,UpdateParams ,DeleteParams,GetSysDataItemDetailModel} from './model/sysDataItemDetailModel'
+enum Api {
+  Load = '/api/SysDataItemDetail/Load',
+  Add = '/api/SysDataItemDetail/Add',
+  Update = '/api/SysDataItemDetail/Update',
+  Delete = '/api/SysDataItemDetail/Delete',
+}
+
+/**
+ * @description: postAdd
+ */
+export function postAdd(code:CodeParams, params:AddParams) {
+  return defHttp.post(
+    {
+      url: Api.Add + "?code=" + code,
+      params,
+    },
+  );
+}
+
+/**
+ * @description: getLoad
+ */
+export function getLoad(params: CodeParams) {
+  return defHttp.get<GetSysDataItemDetailModel>({ url: Api.Load, params });
+}
+
+export function update(params?:UpdateParams) {
+  console.log(params)
+  return defHttp.post({
+    url: Api.Update,
+    params
+  });
+}
+
+export function del(params:DeleteParams) {
+  return defHttp.post({ url: Api.Delete + "?id=" + params.id });
+}
+
+

src/components/ProcessDesigner/package/penal/PropertiesPanel.vue

@@ -13,9 +13,12 @@
       <a-tab-pane key="4" tab="审核节点">
         <user-task-option ref="task"></user-task-option>
       </a-tab-pane>
-      <a-tab-pane key="3" tab="结束节点">
+      <a-tab-pane key="5" tab="结束节点">
         <end-event-option ref="end" :element="data.elementData"></end-event-option>
       </a-tab-pane>
+      <a-tab-pane key="6" tab="子流程">
+        <subprocess-option ref="subprocess" :element="data.elementData"></subprocess-option>
+      </a-tab-pane>
     </a-tabs>
     <!-- <el-tabs v-model="configActiveName" :stretch="true">
       <el-tab-pane :label="$t(wfNodeName[currentWfNode.type])" name="tab01" v-if="currentWfNode != undefined">
@@ -53,7 +56,7 @@
   // 审核节点
   import userTaskOption from './userTask/index.vue'
   // 结束节点
-  import endEventOption from './config/endEvent.vue'
+  import endEventOption from './endEvent/index.vue'
   // 网关和
   import gatewayAndOption from './config/gatewayAnd.vue'
   // 网关包容
@@ -63,7 +66,7 @@
   // 脚本任务
   import scriptTaskOption from './config/scriptTask.vue'
   // 子流程
-  import subprocessOption from './config/subprocess.vue'
+  import subprocessOption from './subprocess/index.vue'
   // 线
   import mylineOption from './config/myline.vue'
   /**
@@ -91,7 +94,7 @@
  
   provide('prefix', props.prefix)
   provide('width', props.width)
-  const activeKey = ref("5")
+  const activeKey = ref("6")
   const data = reactive({
     configActiveName: 'tab02',
     currentWfNode: undefined,

src/components/ProcessDesigner/package/penal/config/endEvent.vue

@@ -1,32 +0,0 @@
-<!-- 开始节点配置 -->
-<template>
-   <el-form
-        class="l-form-config"
-        label-width="88px"
-        label-position="left"
-        size="mini"
-    >
-    <el-form-item label="节点标识">
-      <el-input v-model="node.id" readonly ></el-input>
-    </el-form-item>
-   </el-form>
-</template>
-
-<script>
-export default {
-    name:'end-event-option',
-    data () {
-        return {
-        }
-    },
-    computed: {
-        node(){
-          return this.wfdesign.currentWfNode;
-        }
-    },
-    inject: ["wfdesign"]
-}
-</script>
-
-<style>
-</style>

src/components/ProcessDesigner/package/penal/config/subprocess.vue

@@ -1,70 +0,0 @@
-<!-- 开始节点配置 -->
-<template>
-  <el-form
-        class="l-form-config"
-        label-width="88px"
-        label-position="left"
-        size="mini">
-    <el-form-item label="节点标识">
-      <el-input  v-model="node.id" readonly ></el-input>
-    </el-form-item>
-    <el-form-item label="是否异步">
-      <el-switch :disabled="disabled" v-model="node.isAsync">
-      </el-switch>
-    </el-form-item>
-    <el-form-item label="流程模版">
-      <l-select :disabled="disabled"   v-model="node.wfschemeId" :options="list">
-      </l-select>
-    </el-form-item>
-    <el-form-item label="流程版本">
-      <l-select :disabled="disabled"   v-model="node.wfVersionId" :options="verisons">
-      </l-select>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-// const api = window.$api.workflow.scheme
-
-export default {
-    name:'subprocess-option',
-    props:{
-      disabled:{
-          type:Boolean,
-          default:false
-      }
-    },
-    data () {
-        return {
-        }
-    },
-    asyncComputed:{
-      list:{
-        async get(){
-          const data = []
-          // const data = await this.$awaitWraper(api.getList())
-          const res = data || []
-          return res.filter(t=>t.f_Id != this.wfdesign.schemeinfoId).map(t=>{return {label:t.f_Name,value:t.f_Id}})
-        }
-      },
-      verisons:{
-        async get(){
-            let res = []
-            if(!this.$validatenull(this.node.wfschemeId)){
-              // res = await this.$awaitWraper(api.getHistoryList(this.node.wfschemeId))
-            }
-            return (res || []).map(t=>{return { label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
-        }
-      }
-    },
-    computed: {
-        node(){
-          return this.wfdesign.currentWfNode;
-        }
-    },
-    inject: ["wfdesign"]
-}
-</script>
-
-<style>
-</style>

src/components/ProcessDesigner/package/penal/endEvent/index.vue

@@ -0,0 +1,22 @@
+<!-- 开始节点配置 -->
+<template>
+  <div class="end-event">
+    <a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-item label="节点标识">
+        <a-input v-model:value="node.id" placeholder="请输入" readonly />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue'
+  const node = reactive({
+    id: ""
+  })
+  const labelCol = { span: 7 };
+  const wrapperCol = { span: 17 };
+</script>
+
+<style>
+</style>

src/components/ProcessDesigner/package/penal/subprocess/index.vue

@@ -0,0 +1,44 @@
+<!-- 开始节点配置 -->
+<template>
+  <div class="subprocess">
+    <a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-item label="节点标识">
+        <a-input v-model:value="node.id" placeholder="请输入" readonly />
+      </a-form-item>
+      <a-form-item label="是否异步">
+        <a-switch v-model:checked="node.isAsync" />
+      </a-form-item>
+      <a-form-item label="流程模版">
+        <a-select v-model:value="node.wfschemeId" :options="data.list">
+        </a-select>
+      </a-form-item>
+      <a-form-item label="流程版本">
+        <a-select v-model:value="node.wfVersionId" :options="data.verisons">
+        </a-select>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
+  const labelCol = { span: 7 };
+  const wrapperCol = { span: 17 };
+  const props = defineProps({
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    element: Object
+  })
+  const node = reactive({
+    id:''
+  })
+  const data = reactive({
+    list: [],
+    verisons: []
+  })
+</script>
+
+<style>
+</style>

src/views/demo/system/menu/index.vue

@@ -73,7 +73,7 @@
       isUpdate: true,
     });
   }
-  async function editMenu(node: Recordable) {
+  async function editMenu(node) {
     var query = {
       id: node.id
     }

src/views/demo/workflow/scheme/HistoryDrawer.vue

@@ -0,0 +1,81 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%" @ok="handleSubmit">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="[
+              {
+                icon: 'clarity:info-standard-line',
+                tooltip: '查看历史记录',
+                onClick: handleHistory.bind(null, record),
+              }
+            ]" />
+        </template>
+      </template>
+
+    </BasicTable>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, onMounted } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import {columnsHistory} from './scheme.data'
+  import { getLoadHistoryPage } from '@/api/sys/WFSchemeInfo';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+
+  defineOptions({ name: 'HistoryDrawer' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const rowId = ref('');
+  const searchInfo = reactive < Recordable > ({});
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ confirmLoading: false });
+    searchInfo.id = data.record.id
+  });
+  const [registerTable, { reload, getPaginationRef, }] = useTable({
+    api: getLoadHistoryPage,
+    columns: columnsHistory,
+    useSearchForm: false,
+    showTableSetting: false,
+    tableSetting: { fullScreen: true },
+    showIndexColumn: false,
+    isCanResizeParent: true,
+    rowKey: 'id',
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  function handleHistory(record){
+
+  }
+  onMounted(() => {
+  });
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      let query = values
+      // 调用接口
+      if (!unref(isUpdate)) {
+        const data = await addRole(query);
+      } else {
+        const data = await updateRole(query);
+      }
+
+
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/demo/workflow/scheme/SchemeDrawer.vue

@@ -9,14 +9,14 @@
   import { formSchema } from './scheme.data';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
 
-  import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
+  import { postAdd, update } from '@/api/sys/sysDataItemDetail';
 
   defineOptions({ name: 'SchemeDrawer' });
 
   const emit = defineEmits(['success', 'register']);
 
   const isUpdate = ref(true);
-
+  const detail = ref({})
   const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
     labelWidth: 90,
     baseColProps: { span: 24 },
@@ -25,24 +25,17 @@
   });
 
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    console.log(data)
     resetFields();
     setDrawerProps({ confirmLoading: false });
     isUpdate.value = !!data?.isUpdate;
 
     if (unref(isUpdate)) {
+      detail.value = data.record
       setFieldsValue({
         ...data.record,
       });
     }
-    const treeData = await getMenuList();
-    updateSchema({
-      field: 'parentId',
-      componentProps: { treeData },
-    });
-    updateSchema({
-      field: 'moduleId',
-      componentProps: { treeData },
-    });
   });
 
   const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
@@ -51,28 +44,20 @@
     try {
       const values = await validate();
       setDrawerProps({ confirmLoading: true });
-      // TODO custom api
+      if (isUpdate.value) {
-      console.log(values)
+        console.log(values)
-      if (values.type == '1') {
+        console.log(detail.value)
-        console.log("新增菜单")
+        var querys = detail.value
-        delete values.type
+        querys.description = values.description
-        // 新增菜单
+        querys.enabledMark = values.enabledMark
-        if (!unref(isUpdate)) {
+        querys.itemName = values.itemName
-          const data = await addMenu(values);
+        querys.itemValue = values.itemValue
-        } else {
+        querys.sortCode = values.sortCode
-          const data = await editMenu(values);
+        const data = await update(querys);
-        }
         closeDrawer();
         emit('success');
       } else {
-        console.log("新增按钮")
+        const data = await postAdd('FlowSort', values);
-        // 新增按钮
-        delete values.type
-        if (!unref(isUpdate)) {
-          const data = await addButton(values);
-        } else {
-          const data = await editButton(values);
-        }
         closeDrawer();
         emit('success');
       }

src/views/demo/workflow/scheme/SchemeTree.vue

@@ -1,41 +1,43 @@
 <template>
   <div class="m-4 mr-0 overflow-hidden bg-white">
     <BasicTree ref="asyncExpandTreeRef" title="流程分类" toolbar search
-    treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
-    :renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+      :renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData"
-    :defaultExpandAll="true" @select="handleSelect" />
+      :fieldNames="{ key: 'itemDetailId', title: 'itemName' }" :defaultExpandAll="true" @select="handleSelect" />
     <BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
       确认要删除流程分类吗？
     </BasicModal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, h, nextTick, unref } from 'vue';
+  import { onMounted, ref, h, nextTick, unref, createVNode } from 'vue';
   import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
-  import { getMenuList, deleteMenu } from '@/api/demo/system';
+  import { getLoad, del } from '@/api/sys/sysDataItemDetail';
-  import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, FormOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  import { Card, Row, Col, Spin } from 'ant-design-vue';
+  import { Card, Row, Col, Spin, Modal } from 'ant-design-vue';
   import { BasicModal, useModal } from '@/components/Modal';
   import { router } from '@/router';
   const [register, { closeModal, openModal }] = useModal();
   defineOptions({ name: 'DeptTree' });
 
-  const emit = defineEmits(['select', 'edit']);
+  const emit = defineEmits(['select', 'edit', 'success']);
 
   const treeData = ref < TreeItem[] > ([]);
   let selectItemId = ref('')
   const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
   const treeLoading = ref(false);
   async function handleSubmit() {
-    var query = [selectItemId.value]
+    var query = {
-    const data = await deleteMenu(query);
+      id: selectItemId.value
-    closeModal();
+    }
-
+    console.log(query)
+    const data = await del(query);
+    emit('success')
   }
 
   async function fetch() {
     treeLoading.value = true;
-    treeData.value = (await getMenuList()) as unknown as TreeItem[];
+    treeData.value = (await getLoad({ code: 'FlowSort' })) as unknown as TreeItem[];
     // 展开全部
     nextTick(() => {
       treeLoading.value = false;
@@ -44,12 +46,19 @@
   }
 
   function handleSelect(keys) {
-    emit('select', keys[0]);
+    var itemDetailId = keys[0]
+    var itemName
+    treeData.value.forEach(element => {
+      if (itemDetailId == element.itemDetailId) {
+        itemName = element.itemName
+      }
+    });
+    emit('select', itemName);
   }
   const btnList = router.currentRoute.value.meta.elements
   const actionList: TreeActionItem[] = []
   btnList.forEach(element => {
-    if(element.domId=='btnAdd'){
+    if (element.domId == 'btnAdd') {
       actionList.push({
         render: (node) => {
           return h(PlusOutlined, {
@@ -60,13 +69,19 @@
           });
         },
       })
-    }else if (element.domId == 'btnEdit') {
+    } else if (element.domId == 'btnEdit') {
       actionList.push({
         render: (node) => {
+          let data = {}
+          treeData.value.forEach(element => {
+            if (element.itemDetailId == node.itemDetailId) {
+              data = element
+            }
+          });
           return h(FormOutlined, {
             class: 'ml-2',
             onClick: () => {
-              emit('edit', node);
+              emit('edit', data);
             },
           });
         },
@@ -77,9 +92,21 @@
           return h(DeleteOutlined, {
             class: 'ml-2',
             onClick: () => {
-              selectItemId.value = node.id
+              selectItemId.value = node.itemDetailId
-              openModal(true, {
+              Modal.confirm({
-                isUpdate: false,
+                title: '删除?',
+                icon: createVNode(ExclamationCircleOutlined),
+                content: '你确定要删除当前流程分类吗',
+                okText: '确定',
+                okType: 'danger',
+                cancelText: '取消',
+                onOk() {
+                  console.log('OK');
+                  handleSubmit()
+                },
+                onCancel() {
+                  console.log('Cancel');
+                },
               });
             },
           });

src/views/demo/workflow/scheme/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editMenu" @add='handleCreate'/>
+    <SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="classifyEdit" @add='handleCreate'  @success="handleSuccess"/>
     <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
       :searchInfo="searchInfo">
       <template #toolbar>
@@ -9,20 +9,19 @@
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
-          <TableAction
+          <TableAction :actions="[
-            :actions="[
               {
                 icon: 'clarity:info-standard-line',
                 tooltip: '查看历史记录',
-                onClick: handleView.bind(null, record),
+                onClick: handleHistory.bind(null, record),
               }
-            ]"
+            ]" />
-          />
         </template>
       </template>
-    
+
     </BasicTable>
     <SchemeDrawer @register="registerDrawer" @success="handleSuccess" />
+    <HistoryDrawer @register="registerHistoryDrawer" @success="handleSuccess" />
   </PageWrapper>
 
 </template>
@@ -30,17 +29,19 @@
   import { reactive, nextTick, ref } from 'vue';
 
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { getMenuList, getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
+  import { getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
+  import { getLoadPage } from '@/api/sys/WFSchemeInfo';
+
   import { PageWrapper } from '@/components/Page';
   import SchemeTree from './SchemeTree.vue';
 
   import { useDrawer } from '@/components/Drawer';
   import SchemeDrawer from './SchemeDrawer.vue';
-
+  import HistoryDrawer from './HistoryDrawer.vue'
   import { columns, searchFormSchema } from './scheme.data';
   import PermissionBtn from '@/components/PermissionBtn/index.vue'
   import { useMessage } from '@/hooks/web/useMessage';
-  const { createConfirm,createMessage } = useMessage();
+  const { createConfirm, createMessage } = useMessage();
 
   import { useGo } from '@/hooks/web/usePage';
   const go = useGo();
@@ -48,12 +49,13 @@
   defineOptions({ name: 'SchemeManagement' });
   const searchInfo = reactive < Recordable > ({});
 
+  const [registerHistoryDrawer, { openDrawer:openHistoryDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
-  const [registerTable, { reload, expandAll, getSelectRows,clearSelectedRowKeys }] = useTable({
+  const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
     title: '模板列表',
-    api: getButtonList,
+    api: getLoadPage,
     columns,
-    rowKey:'id',
+    rowKey: 'id',
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
@@ -87,9 +89,16 @@
   function handleView(record: Recordable) {
     go('/dashboard/scheme_preview/' + record.id);
   }
+  // 查看历史记录
+  function handleHistory(record){
+    console.log(record)
+    openHistoryDrawer(true,{
+      record
+    })
+  }
   function handleEdit() {
     let rows = getSelectRows();
-    if(rows.length == 0){
+    if (rows.length == 0) {
       return createMessage.warn('请选择一个按钮进行编辑');
     }
     const record = rows[0]
@@ -99,25 +108,20 @@
       isUpdate: true,
     });
   }
-  async function editMenu(node: Recordable) {
+  async function classifyEdit(record) {
-    var query = {
-      id: node.id
-    }
-    const record = await getMenuDetail(query);
-    record.type = '1'
     openDrawer(true, {
       record,
       isUpdate: true,
     });
   }
-  function handleSelect(ModuleId = '') {
+  function handleSelect(category = '') {
-    searchInfo.ModuleId = ModuleId;
+    searchInfo.category = category;
     clearSelectedRowKeys()
     reload();
   }
   async function handleDelete(record: Recordable) {
     let rows = getSelectRows();
-    if(rows.length == 0){
+    if (rows.length == 0) {
       return createMessage.warn('请选择一个按钮进行删除');
     }
     const query = [rows[0].id]
@@ -146,7 +150,7 @@
     console.log(domId)
     switch (domId) {
       case 'btnAdd':
-      go('/dashboard/scheme_preview/add');
+        go('/dashboard/scheme_preview/add');
         break;
       case 'btnEdit':
         handleEdit()

src/views/demo/workflow/scheme/scheme.data.ts

@@ -1,12 +1,14 @@
 import { BasicColumn, FormSchema } from '@/components/Table';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { Tag,Switch } from 'ant-design-vue';
 import Icon from '@/components/Icon/Icon.vue';
-
+import {updateState} from '@/api/sys/WFSchemeInfo'
+import { useMessage } from '@/hooks/web/useMessage';
+const { createConfirm, createMessage } = useMessage();
 export const columns: BasicColumn[] = [
   {
     title: '编号',
-    dataIndex: 'domId',
+    dataIndex: 'code',
   },
   {
     title: '名称',
@@ -14,11 +16,50 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '分类',
-    dataIndex: 'name',
+    dataIndex: 'category',
   },
   {
-    title: '排序',
+    title: '状态',
-    dataIndex: 'sort',
+    dataIndex: 'enabledMark',
+    width: 80,
+    customRender: ({ record }) => {
+      if (!record.type) {
+        const color = 'blue';
+        const text = '草稿';
+        return h(Tag, { color: color }, () => text);
+      } else {
+        return h(Switch, {
+          checked: record.enabledMark === 1,
+          checkedChildren: '启用',
+          unCheckedChildren: '停用',
+          loading: record.pendingStatus,
+          onChange(checked) {
+            record.pendingStatus = true;
+            const newStatus = checked ? 1 : 0;
+            const { createMessage } = useMessage();
+            updateState({ id: record.id, state: newStatus })
+              .then((data) => {
+                record.enabledMark = newStatus;
+                createMessage.success(data.message);
+              })
+              .catch((err) => {
+                createMessage.error(err.message);
+              })
+              .finally(() => {
+                record.pendingStatus = false;
+              });
+          },
+        });
+      }
+    },
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
   },
 
 ];
@@ -38,30 +79,30 @@ export const searchFormSchema: FormSchema[] = [
 
 export const formSchema: FormSchema[] = [
   {
-    field: 'id',
+    field: 'itemDetailId',
     label: '名称',
     component: 'Input',
     ifShow:false
   },
   {
-    field: 'name',
+    field: 'itemName',
     label: '名称',
     component: 'Input',
     required: true,
   },
   {
-    field: 'value',
+    field: 'itemValue',
     label: '值',
     component: 'Input',
     required: true,
   },
   {
-    field: 'sortNo',
+    field: 'sortCode',
     label: '排序',
     component: 'InputNumber',
   },
   {
-    field: 'status',
+    field: 'enabledMark',
     label: '是否有效',
     component: 'RadioButtonGroup',
     defaultValue: 1,
@@ -73,8 +114,71 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: 'remark',
+    field: 'description',
     label: '备注',
     component: 'InputTextArea',
   },
 ];
+// 历史记录表头
+export const columnsHistory: BasicColumn[] = [
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+  },
+  {
+    title: '状态',
+    dataIndex: 'type',
+    customRender: ({ record }) => {
+      if (record.type == 1) {
+        const color = 'green';
+        const text = '正式';
+        return h(Tag, { color: color }, () => text);
+      } else {
+        const color = 'blue';
+        const text = '草稿';
+        return h(Tag, { color: color }, () => text);
+      }
+    }
+  },
+  // {
+  //   title: '当前版本',
+  //   dataIndex: 'enabledMark',
+  //   width: 80,
+  //   customRender: ({ record }) => {
+  //     if (!record.type) {
+  //       const color = 'blue';
+  //       const text = '草稿';
+  //       return h(Tag, { color: color }, () => text);
+  //     } else {
+  //       return h(Switch, {
+  //         checked: record.enabledMark === 1,
+  //         checkedChildren: '启用',
+  //         unCheckedChildren: '停用',
+  //         loading: record.pendingStatus,
+  //         onChange(checked) {
+  //           record.pendingStatus = true;
+  //           const newStatus = checked ? 1 : 0;
+  //           const { createMessage } = useMessage();
+  //           updateState({ id: record.id, state: newStatus })
+  //             .then((data) => {
+  //               record.enabledMark = newStatus;
+  //               createMessage.success(data.message);
+  //             })
+  //             .catch((err) => {
+  //               createMessage.error(err.message);
+  //             })
+  //             .finally(() => {
+  //               record.pendingStatus = false;
+  //             });
+  //         },
+  //       });
+  //     }
+  //   },
+  // },
+  
+
+];