From 3ad5511aa89a2916bed4fa5cf7679a464da44d0b Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Wed, 23 Aug 2023 14:14:39 +0800
Subject: [PATCH] feat: bpm views

---
 src/api/bpm/activity/index.ts                 |  5 ++
 src/api/bpm/model/index.ts                    | 22 ++---
 src/api/bpm/task/index.ts                     |  5 ++
 src/api/bpm/task/types.ts                     | 39 ---------
 src/components/Upload/src/data.tsx            |  4 +-
 src/views/base/profile/data.ts                |  2 +-
 src/views/bpm/form/form.data.ts               | 11 +--
 src/views/bpm/form/index.vue                  |  2 +-
 src/views/bpm/group/group.data.ts             |  2 +-
 src/views/bpm/group/index.vue                 |  2 +-
 src/views/bpm/model/ModelImportModal.vue      | 78 ++++++++++++++++++
 src/views/bpm/model/ModelModal.vue            |  2 +-
 src/views/bpm/model/index.vue                 | 27 ++++---
 src/views/bpm/oa/leave/create.vue             | 41 +++++++++-
 src/views/bpm/oa/leave/detail.vue             | 39 ++++++++-
 src/views/bpm/oa/leave/index.vue              | 81 ++++++++++++++++++-
 src/views/bpm/oa/leave/leave.data.ts          | 75 ++++++++++++++++-
 .../bpm/processInstance/create/index.vue      |  2 +-
 .../bpm/processInstance/detail/index.vue      |  2 +-
 src/views/bpm/processInstance/index.vue       |  2 +-
 20 files changed, 349 insertions(+), 94 deletions(-)
 create mode 100644 src/api/bpm/activity/index.ts
 delete mode 100644 src/api/bpm/task/types.ts
 create mode 100644 src/views/bpm/model/ModelImportModal.vue

diff --git a/src/api/bpm/activity/index.ts b/src/api/bpm/activity/index.ts
new file mode 100644
index 00000000..7af0c2e1
--- /dev/null
+++ b/src/api/bpm/activity/index.ts
@@ -0,0 +1,5 @@
+import { defHttp } from '@/utils/http/axios'
+
+export function getActivityList(params) {
+  return defHttp.get({ url: '/bpm/activity/list', params })
+}
diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index cc86f023..483e9d86 100644
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -1,11 +1,5 @@
-import type { AxiosProgressEvent } from 'axios'
-import type { UploadApiResult } from '@/api/base/model/uploadModel'
-import { useGlobSetting } from '@/hooks/setting'
-import type { UploadFileParams } from '@/types/axios'
 import { defHttp } from '@/utils/http/axios'
 
-const { apiUrl = '' } = useGlobSetting()
-
 export interface ProcessDefinitionVO {
   id: string
   version: number
@@ -43,7 +37,11 @@ export function updateModel(data: ModelVO) {
 }
 
 // 任务状态修改
-export function updateModelState(data) {
+export function updateModelState(id: number, state: number) {
+  const data = {
+    id,
+    state,
+  }
   return defHttp.put({ url: '/bpm/model/update-state', data })
 }
 
@@ -59,12 +57,6 @@ export function deployModel(id: number) {
   return defHttp.post({ url: `/bpm/model/deploy?id=${id}` })
 }
 
-export function importModel(params: UploadFileParams, onUploadProgress: (progressEvent: AxiosProgressEvent) => void) {
-  return defHttp.uploadFile<UploadApiResult>(
-    {
-      url: `${apiUrl}/bpm/model/import`,
-      onUploadProgress,
-    },
-    params,
-  )
+export function importModel(data) {
+  return defHttp.post({ url: '/bpm/model/import', data })
 }
diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index 1b980b21..f3721b85 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -32,3 +32,8 @@ export function getTaskListByProcessInstanceId(processInstanceId) {
     url: `/bpm/task/list-by-process-instance-id?processInstanceId=${processInstanceId}`,
   })
 }
+
+// 导出任务
+export async function exportTask(params) {
+  return await defHttp.download({ url: '/bpm/task/export', params })
+}
diff --git a/src/api/bpm/task/types.ts b/src/api/bpm/task/types.ts
deleted file mode 100644
index 29c2e173..00000000
--- a/src/api/bpm/task/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export interface FormVO {
-  id: number
-  name: string
-  conf: string
-  fields: string[]
-  status: number
-  remark: string
-  createTime: string
-}
-
-export interface TaskProcessVO {
-  id: string
-  name: string
-  startUserId: number
-  startUserNickname: string
-  processDefinitionId: string
-}
-
-export interface TaskTodoVO {
-  id: string
-  name: string
-  claimTime: string
-  createTime: string
-  suspensionState: number
-  processInstance: TaskProcessVO
-}
-
-export interface TaskDoneVO {
-  id: string
-  name: string
-  claimTime: string
-  createTime: string
-  endTime: string
-  durationInMillis: number
-  suspensionState: number
-  result: number
-  reason: string
-  processInstance: TaskProcessVO
-}
diff --git a/src/components/Upload/src/data.tsx b/src/components/Upload/src/data.tsx
index 1bdaded5..08a4cfe1 100644
--- a/src/components/Upload/src/data.tsx
+++ b/src/components/Upload/src/data.tsx
@@ -88,7 +88,7 @@ export function createActionColumn(handleRemove: Function): BasicColumn {
       const actions: ActionItem[] = [
         {
           label: t('component.upload.del'),
-          color: 'error',
+          danger: true,
           onClick: handleRemove.bind(null, record),
         },
       ]
@@ -132,7 +132,7 @@ export function createPreviewActionColumn({ handleRemove, handleDownload }: { ha
       const actions: ActionItem[] = [
         {
           label: t('component.upload.del'),
-          color: 'error',
+          danger: true,
           onClick: handleRemove.bind(null, record),
         },
         {
diff --git a/src/views/base/profile/data.ts b/src/views/base/profile/data.ts
index 57e34e2e..61f74668 100644
--- a/src/views/base/profile/data.ts
+++ b/src/views/base/profile/data.ts
@@ -1,4 +1,4 @@
-import type { FormSchema } from '@/components/Form/index'
+import type { FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 
 const { t } = useI18n()
diff --git a/src/views/bpm/form/form.data.ts b/src/views/bpm/form/form.data.ts
index 93a921c8..f2bac499 100644
--- a/src/views/bpm/form/form.data.ts
+++ b/src/views/bpm/form/form.data.ts
@@ -1,6 +1,6 @@
 import type { BasicColumn, FormSchema } from '@/components/Table'
 import { useRender } from '@/components/Table'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE } from '@/utils/dict'
 
 export const columns: BasicColumn[] = [
   {
@@ -43,13 +43,4 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Input',
     colProps: { span: 8 },
   },
-  {
-    label: '状态',
-    field: 'status',
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS),
-    },
-    colProps: { span: 8 },
-  },
 ]
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index f5b1004c..d65d0db7 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -67,7 +67,7 @@ async function handleDelete(record: Recordable) {
               { icon: IconEnum.VIEW, label: t('action.detail'), auth: 'bpm:form:query', onClick: openDetail.bind(null, record) },
               {
                 icon: IconEnum.DELETE,
-                color: 'error',
+                danger: true,
                 label: t('action.delete'),
                 auth: 'bpm:form:delete',
                 popConfirm: {
diff --git a/src/views/bpm/group/group.data.ts b/src/views/bpm/group/group.data.ts
index 932a8100..fff6dd42 100644
--- a/src/views/bpm/group/group.data.ts
+++ b/src/views/bpm/group/group.data.ts
@@ -126,7 +126,7 @@ export const formSchema: FormSchema[] = [
   {
     label: '状态',
     field: 'status',
-    component: 'Select',
+    component: 'RadioGroup',
     componentProps: {
       options: getDictOptions(DICT_TYPE.COMMON_STATUS),
     },
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index d549fe86..0848c84b 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -59,7 +59,7 @@ async function handleDelete(record: Recordable) {
               { icon: IconEnum.EDIT, label: t('action.edit'), auth: 'bpm:user-group:update', onClick: handleEdit.bind(null, record) },
               {
                 icon: IconEnum.DELETE,
-                color: 'error',
+                danger: true,
                 label: t('action.delete'),
                 auth: 'bpm:user-group:delete',
                 popConfirm: {
diff --git a/src/views/bpm/model/ModelImportModal.vue b/src/views/bpm/model/ModelImportModal.vue
new file mode 100644
index 00000000..e30aefa8
--- /dev/null
+++ b/src/views/bpm/model/ModelImportModal.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import type { FormSchema } from '@/components/Form'
+import { BasicForm, useForm } from '@/components/Form'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { importModel } from '@/api/bpm/model'
+
+defineOptions({ name: 'ModelImportForm' })
+
+const emit = defineEmits(['success', 'register'])
+
+const formSchema: FormSchema[] = [
+  {
+    label: '流程标识',
+    field: 'key',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '流程名称',
+    field: 'name',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '流程描述',
+    field: 'description',
+    component: 'Input',
+  },
+  {
+    label: '流程文件',
+    field: 'bpmnFile',
+    component: 'FileUpload',
+    componentProps: {
+      maxCount: 1,
+      fileType: 'file',
+    },
+  },
+]
+
+const { t } = useI18n()
+const { createMessage } = useMessage()
+
+const [registerForm, { resetFields, validate }] = useForm({
+  labelWidth: 120,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: { span: 23 },
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+})
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    setModalProps({ confirmLoading: true })
+    console.info(values)
+    await importModel(values)
+    closeModal()
+    emit('success')
+    createMessage.success(t('common.saveSuccessText'))
+  }
+  finally {
+    setModalProps({ confirmLoading: false })
+  }
+}
+</script>
+
+<template>
+  <BasicModal v-bind="$attrs" title="导入流程" @register="registerModal" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
diff --git a/src/views/bpm/model/ModelModal.vue b/src/views/bpm/model/ModelModal.vue
index f015a443..6517ec0f 100644
--- a/src/views/bpm/model/ModelModal.vue
+++ b/src/views/bpm/model/ModelModal.vue
@@ -7,7 +7,7 @@ import { BasicForm, useForm } from '@/components/Form'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { createModel, getModel, updateModel } from '@/api/bpm/model'
 
-defineOptions({ name: 'BpmModelModal' })
+defineOptions({ name: 'ModelForm' })
 
 const emit = defineEmits(['success', 'register'])
 const { t } = useI18n()
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 0e830979..48a40825 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import ModelModal from './ModelModal.vue'
+import ModelImportModal from './ModelImportModal.vue'
 import { columns, searchFormSchema } from './model.data'
 import { useGo } from '@/hooks/web/usePage'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
 import { IconEnum } from '@/enums/appEnum'
-import { BasicUpload } from '@/components/Upload'
 import { BasicTable, TableAction, useTable } from '@/components/Table'
-import { deleteModel, deployModel, getModelPage, importModel } from '@/api/bpm/model'
-import { getAccessToken, getTenantId } from '@/utils/auth'
+import { deleteModel, deployModel, getModelPage } from '@/api/bpm/model'
+
+// import { getAccessToken, getTenantId } from '@/utils/auth'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -18,11 +18,12 @@ const go = useGo()
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
+const [registerImportModal, { openModal: openImportModal }] = useModal()
 
-const uploadParams = ref({
-  'Authorization': `Bearer ${getAccessToken()}`,
-  'tenant-id': getTenantId(),
-})
+// const uploadParams = ref({
+//   'Authorization': `Bearer ${getAccessToken()}`,
+//   'tenant-id': getTenantId(),
+// })
 
 const [registerTable, { reload }] = useTable({
   title: '流程模型图列表',
@@ -83,7 +84,10 @@ async function handleDelete(record: Recordable) {
         <a-button v-auth="['bpm:model:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
           {{ t('action.create') }}
         </a-button>
-        <BasicUpload
+        <a-button v-auth="['bpm:model:import']" type="primary" :pre-icon="IconEnum.UPLOAD" @click="openImportModal">
+          {{ t('action.import') }}
+        </a-button>
+        <!-- <BasicUpload
           :max-size="20"
           :max-number="1"
           :empty-hide-preview="true"
@@ -92,7 +96,7 @@ async function handleDelete(record: Recordable) {
           class="my-5"
           :accept="['.bpmn', '.xml']"
           @change="reload"
-        />
+        /> -->
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -119,7 +123,7 @@ async function handleDelete(record: Recordable) {
               },
               {
                 icon: IconEnum.DELETE,
-                color: 'error',
+                danger: true,
                 label: t('action.delete'),
                 auth: 'bpm:model:delete',
                 popConfirm: {
@@ -134,5 +138,6 @@ async function handleDelete(record: Recordable) {
       </template>
     </BasicTable>
     <ModelModal @register="registerModal" @success="reload()" />
+    <ModelImportModal @register="registerImportModal" @success="reload()" />
   </div>
 </template>
diff --git a/src/views/bpm/oa/leave/create.vue b/src/views/bpm/oa/leave/create.vue
index 36487dd5..6005a85f 100644
--- a/src/views/bpm/oa/leave/create.vue
+++ b/src/views/bpm/oa/leave/create.vue
@@ -1,3 +1,42 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { formSchema } from './leave.data'
+import { BasicForm, useForm } from '@/components/Form'
+import { PageWrapper } from '@/components/Page'
+import { createLeave } from '@/api/bpm/leave'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+
+defineOptions({ name: 'LeaveCreate' })
+const { t } = useI18n()
+const { createMessage } = useMessage()
+
+const [registerForm, { resetFields, validate }] = useForm({
+  labelWidth: 140,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showResetButton: false,
+  submitButtonOptions: { text: t('common.saveText') },
+  actionColOptions: { span: 23 },
+})
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    await createLeave(values)
+  }
+  finally {
+    createMessage.success(t('common.saveSuccessText'))
+  }
+}
+
+onMounted(() => {
+  resetFields()
+})
+</script>
+
 <template>
-  123
+  <PageWrapper>
+    <BasicForm class="mt-10 w-200 h-120" @register="registerForm" @submit="handleSubmit" />
+  </PageWrapper>
 </template>
diff --git a/src/views/bpm/oa/leave/detail.vue b/src/views/bpm/oa/leave/detail.vue
index 36487dd5..bc35a3fc 100644
--- a/src/views/bpm/oa/leave/detail.vue
+++ b/src/views/bpm/oa/leave/detail.vue
@@ -1,3 +1,40 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { descSchema } from './leave.data'
+import { Description, useDescription } from '@/components/Description'
+import { PageWrapper } from '@/components/Page'
+import { getLeave } from '@/api/bpm/leave'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'InfraJobModal' })
+
+const props = defineProps({
+  id: propTypes.number.def(undefined),
+})
+
+const { query } = useRoute()
+const datas = ref()
+
+const [registerDesc] = useDescription({
+  schema: descSchema,
+  data: datas,
+})
+
+async function getInfo() {
+  const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
+  const res = await getLeave(props.id || queryId)
+  datas.value = res
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getInfo()
+})
+</script>
+
 <template>
-  123
+  <PageWrapper>
+    <Description :column="1" @register="registerDesc" />
+  </PageWrapper>
 </template>
diff --git a/src/views/bpm/oa/leave/index.vue b/src/views/bpm/oa/leave/index.vue
index caa07726..ddcd441b 100644
--- a/src/views/bpm/oa/leave/index.vue
+++ b/src/views/bpm/oa/leave/index.vue
@@ -1,14 +1,20 @@
 <script lang="ts" setup>
 import { columns, searchFormSchema } from './leave.data'
 import { useI18n } from '@/hooks/web/useI18n'
-import { BasicTable, useTable } from '@/components/Table'
+import { IconEnum } from '@/enums/appEnum'
+import { BasicTable, TableAction, useTable } from '@/components/Table'
 import { getLeavePage } from '@/api/bpm/leave'
+import { useGo } from '@/hooks/web/usePage'
+import { useMessage } from '@/hooks/web/useMessage'
+import { cancelProcessInstance } from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'BpmLeave' })
 
 const { t } = useI18n()
+const go = useGo()
+const { createMessage } = useMessage()
 
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   title: '请假列表',
   api: getLeavePage,
   columns,
@@ -16,16 +22,83 @@ const [registerTable] = useTable({
   useSearchForm: true,
   showTableSetting: true,
   actionColumn: {
-    width: 140,
+    width: 160,
     title: t('common.action'),
     dataIndex: 'action',
     fixed: 'right',
   },
 })
+
+/** 添加操作 */
+function handleCreate() {
+  go({ name: 'OALeaveCreate' })
+}
+
+/** 详情操作 */
+function handleDetail(row) {
+  go({
+    name: 'OALeaveDetail',
+    query: {
+      id: row.id,
+    },
+  })
+}
+
+/** 取消请假操作 */
+async function cancelLeave(row) {
+  // // 二次确认
+  // const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+  //   confirmButtonText: t('common.ok'),
+  //   cancelButtonText: t('common.cancel'),
+  //   inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+  //   inputErrorMessage: '取消原因不能为空',
+  // })
+  const value = ''
+  // 发起取消
+  await cancelProcessInstance(row.id, value)
+  createMessage.success(t('common.delSuccessText'))
+  reload()
+}
+
+/** 审批进度 */
+function handleProcessDetail(row) {
+  go({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId,
+    },
+  })
+}
 </script>
 
 <template>
   <div>
-    <BasicTable @register="registerTable" />
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
+          发起请假
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              { icon: IconEnum.SEARCH, label: t('action.detail'), auth: 'bpm:oa-leave:query', onClick: handleDetail.bind(null, record) },
+              { icon: IconEnum.LOG, label: '进度', auth: 'bpm:oa-leave:query', onClick: handleProcessDetail.bind(null, record) },
+              {
+                icon: IconEnum.DELETE,
+                danger: true,
+                label: t('action.cancel'),
+                auth: 'bpm:oa-leave:create',
+                ifShow: () => {
+                  return record.result === 1
+                },
+                onClick: cancelLeave.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
   </div>
 </template>
diff --git a/src/views/bpm/oa/leave/leave.data.ts b/src/views/bpm/oa/leave/leave.data.ts
index 1590326c..0f71890c 100644
--- a/src/views/bpm/oa/leave/leave.data.ts
+++ b/src/views/bpm/oa/leave/leave.data.ts
@@ -1,3 +1,4 @@
+import type { DescItem } from '@/components/Description'
 import type { BasicColumn, FormSchema } from '@/components/Table'
 import { useRender } from '@/components/Table'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
@@ -47,7 +48,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '申请时间',
-    dataIndex: 'applyTime',
+    dataIndex: 'createTime',
     width: 180,
     customRender: ({ text }) => {
       return useRender.renderDate(text)
@@ -58,7 +59,7 @@ export const columns: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     label: '请假类型',
-    field: 'status',
+    field: 'type',
     component: 'Select',
     componentProps: {
       options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE),
@@ -73,7 +74,7 @@ export const searchFormSchema: FormSchema[] = [
   },
   {
     label: '结果',
-    field: 'status',
+    field: 'result',
     component: 'Select',
     componentProps: {
       options: getDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
@@ -87,3 +88,71 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 },
   },
 ]
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '请假类型',
+    field: 'type',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE),
+    },
+  },
+  {
+    label: '开始时间',
+    field: 'startTime',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'x',
+    },
+  },
+  {
+    label: '结束时间',
+    field: 'endTime',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'x',
+    },
+  },
+  {
+    label: '原因',
+    field: 'reason',
+    required: true,
+    component: 'Input',
+  },
+]
+
+export const descSchema: DescItem[] = [
+  {
+    label: '请假类型',
+    field: 'merchantOrderId',
+    render: (curVal) => {
+      return useRender.renderTag(curVal)
+    },
+  },
+  {
+    label: '开始时间',
+    field: 'startTime',
+    render: (curVal) => {
+      return useRender.renderDate(curVal, 'YYYY-MM-DD')
+    },
+  },
+  {
+    label: '结束时间',
+    field: 'endTime',
+    render: (curVal) => {
+      return useRender.renderDate(curVal, 'YYYY-MM-DD')
+    },
+  },
+  {
+    label: '原因',
+    field: 'reason',
+  },
+]
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 36487dd5..6256e616 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -1,3 +1,3 @@
 <template>
-  123
+  <div>123</div>
 </template>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 36487dd5..6256e616 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -1,3 +1,3 @@
 <template>
-  123
+  <div>123</div>
 </template>
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 668489ac..2cb93d3d 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -65,7 +65,7 @@ async function handleCancel(record: Recordable) {
               },
               {
                 icon: IconEnum.DELETE,
-                color: 'error',
+                danger: true,
                 label: t('action.cancel'),
                 ifShow: record.result === 1,
                 auth: 'bpm:process-instance:cancel',