feat(bpm): 新增抄送任务页面并优化流程实例界面

- 新增抄送任务页面，支持查看抄送我的流程任务
-优化流程实例页面UI细节，调整按钮布局和间距
- 完善表单验证规则，确保必填字段校验正确
-修复流程取消功能，支持输入取消原因- 调整代码格式，统一导入语句和对象属性写法- 启用任务抄送按钮，完善审批操作栏功能

src/views/bpm/processInstance/index.vue

@@ -16,7 +16,7 @@
       @current-change="currentChange"
     >
       <template #category="{ row }">
-        <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''" />
+        <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''"/>
       </template>
       <template #status="scope">
         <dict-tag
@@ -39,7 +39,8 @@
       </template>
       <template #menu-left>
         <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+          <Icon icon="ep:plus" class="mr-5px"/>
+          发起流程
         </el-button>
       </template>
       <!-- 自定义操作栏 -->
@@ -52,7 +53,7 @@
         >
           详情
         </el-button>
-        <!-- <el-button
+        <el-button
           link
           type="danger"
           v-if="row.result === 1"
@@ -60,21 +61,21 @@
           @click="handleCancel(row)"
         >
           取消
-        </el-button> -->
+        </el-button>
       </template>
     </avue-crud>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, getSearchDate } from '@/utils/formatTime'
+import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
+import {dateFormatter, getSearchDate} from '@/utils/formatTime'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
-defineOptions({ name: 'BpmCCProcessInstance' })
+defineOptions({name: 'BpmCCProcessInstance'})
 const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { getCurrPermi } = useCrudPermi()
+const {t} = useI18n() // 国际化
+const {getCurrPermi} = useCrudPermi()
 
 const loading = ref(true) // 列表的加载中
 const tableOption = reactive({
@@ -104,7 +105,7 @@ const tableOption = reactive({
       type: 'select',
       span: 12,
       dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY),
-      rules: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
+      rules: [{required: true, message: '流程分类不能为空', trigger: 'blur'}]
     },
     tasks: {
       label: '当前审批任务'
@@ -115,7 +116,7 @@ const tableOption = reactive({
       type: 'select',
       span: 12,
       dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS),
-      rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+      rules: [{required: true, message: '状态不能为空', trigger: 'blur'}]
     },
     result: {
       label: '结果',
@@ -123,7 +124,7 @@ const tableOption = reactive({
       type: 'select',
       span: 12,
       dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
-      rules: [{ required: true, message: '结果不能为空', trigger: 'blur' }]
+      rules: [{required: true, message: '结果不能为空', trigger: 'blur'}]
     },
     createTime: {
       label: '提交时间',
@@ -203,7 +204,8 @@ const searchChange = (params, done) => {
 
 /** 清空按钮操作 */
 const resetChange = () => {
-  searchChange({}, () => {})
+  searchChange({}, () => {
+  })
 }
 
 const sizeChange = (pageSize) => {
@@ -218,7 +220,7 @@ const currentChange = (currentPage) => {
 /** 取消按钮操作 */
 const handleCancel = async (row) => {
   // 二次确认
-  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+  const {value} = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
     confirmButtonText: t('common.ok'),
     cancelButtonText: t('common.cancel'),
     inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格

src/views/bpm/task/copy/index.vue

@@ -0,0 +1,159 @@
+<!-- 工作流，抄送我的流程 -->
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import {dateFormatter} from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+defineOptions({
+  name: 'BpmCopyTask'
+})
+
+// 路由
+const {push} = useRouter()
+// 列表的加载中
+const loading = ref(true)
+
+const {getCurrPermi} = useCrudPermi()
+
+// 表格的配置
+const tableOption = reactive({
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  viewBtn: true,
+  viewBtnText: '详情',
+  viewBtnIcon: 'none',
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: {
+    taskId: {
+      label: '任务编号'
+    },
+    taskName: {
+      label: '任务名称'
+    },
+    processInstanceId: {
+      label: '流程编号',
+      display: false,
+      search: true,
+    },
+    processInstanceName: {
+      label: '所属流程',
+      search: true,
+    },
+    startUserNickname: {
+      label: '流程发起人',
+    },
+    reason: {
+      label: '抄送原因'
+    },
+    creatorNickname: {
+      label: '抄送人'
+    },
+    createTime: {
+      label: '抄送时间',
+      type: 'datetime',
+      width: 180,
+      search: true,
+      searchType: 'daterange',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row: any, value: any, rowv: any, column: any) => {
+        return dateFormatter(row, column, value)
+      }
+    }
+  }
+})
+
+const tableForm = ref<any>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const permission = getCurrPermi(['bpm:task'])
+
+const crudRef = ref()
+useCrudHeight(crudRef)
+
+const getTableData = async () => {
+  // 列表的加载中...
+  loading.value = true
+  // 拼接查询参数
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+  // 处理时间参数，如果为空则去掉这个属性
+  if (!searchObj.createTime?.length) delete searchObj.createTime
+  // 去掉空字符串属性
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+
+  // 请求我的待阅数据
+  try {
+    const data = await ProcessInstanceApi.getProcessInstanceCCPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    // 无论请求成功或者失败，这里都需要将加载中关闭
+    loading.value = false
+  }
+
+}
+
+const searchChange = (params: any, done: any) => {
+  tablePage.value.currentPage = 1
+  // 获取数据
+  getTableData().finally(() => done())
+}
+
+const resetChange = () => {
+  searchChange({}, () => {
+  })
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+
+</script>

src/views/bpm/task/todo/index.vue

@@ -26,7 +26,7 @@
       </template>
       <template #menu="{ row }">
         <el-button link type="primary" @click="handleAudit(row)">审批</el-button>
-<!--        <el-button link type="primary" @click="handleCC(row)">抄送</el-button>-->
+        <el-button link type="primary" @click="handleCC(row)">抄送</el-button>
       </template>
     </avue-crud>
     <TaskCCDialogForm ref="taskCCDialogForm" />