!681 feat: BPM-更多设置-摘要设置

Merge pull request !681 from Lesan/feature/bpm-摘要设置
2025-01-24 11:30:14 +00:00 · 2025-01-24 11:30:14 +00:00 · ab83cee50f
parent 99a44e8c01 9e26e902a7
commit ab83cee50f
5 changed files with 108 additions and 30 deletions
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@ -75,12 +75,12 @@
        </el-radio-group>
      </div>
    </el-form-item>
-    <el-form-item v-if="modelData.customTitleSetting" class="mb-20px">
+    <el-form-item v-if="modelData.titleSetting" class="mb-20px">
      <template #label>
        <el-text size="large" tag="b">标题设置</el-text>
      </template>
      <div class="flex flex-col">
-        <el-radio-group v-model="modelData.customTitleSetting.enable">
+        <el-radio-group v-model="modelData.titleSetting.enable">
          <div class="flex flex-col">
            <el-radio :value="false"
              >系统默认 <el-text type="info"> 展示流程名称 </el-text></el-radio
@ -96,18 +96,50 @@
          </div>
        </el-radio-group>
        <el-mention
-          v-if="modelData.customTitleSetting.enable"
-          v-model="modelData.customTitleSetting.title"
+          v-if="modelData.titleSetting.enable"
+          v-model="modelData.titleSetting.title"
          type="textarea"
          prefix="{"
          split="}"
          whole
-          :options="formFieldOptions"
-          placeholder="请插入表单字段或输入文本"
+          :options="formFieldOptions4Title"
+          placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
          class="w-600px!"
        />
      </div>
    </el-form-item>
+    <el-form-item
+      v-if="modelData.summarySetting && modelData.formType === BpmModelFormType.NORMAL"
+      class="mb-20px"
+    >
+      <template #label>
+        <el-text size="large" tag="b">摘要设置</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-radio-group v-model="modelData.summarySetting.enable">
+          <div class="flex flex-col">
+            <el-radio :value="false">
+              系统默认 <el-text type="info"> 展示表单前 3 个字段 </el-text>
+            </el-radio>
+            <el-radio :value="true"> 自定义摘要 </el-radio>
+          </div>
+        </el-radio-group>
+        <el-select
+          class="w-500px!"
+          v-if="modelData.summarySetting.enable"
+          v-model="modelData.summarySetting.summary"
+          multiple
+          placeholder="请选择要展示的表单字段"
+        >
+          <el-option
+            v-for="item in formFieldOptions4Summary"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </el-form-item>
  </el-form>
 </template>

@ -174,21 +206,30 @@ const numberExample = computed(() => {
 })

 /** 表单选项 */
-const formField = ref<Array<{ field: ProcessVariableEnum; title: string }>>([])
-const formFieldOptions = computed(() => {
+const formField = ref<Array<{ field: string; title: string }>>([])
+const formFieldOptions4Title = computed(() => {
+  let cloneFormField = formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field
+    }
+  })
  // 固定添加发起人 ID 字段
-  formField.value.unshift({
-    field: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
-    title: '流程名称'
+  cloneFormField.unshift({
+    label: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
+    value: '流程名称'
  })
-  formField.value.unshift({
-    field: ProcessVariableEnum.START_TIME,
-    title: '发起时间'
+  cloneFormField.unshift({
+    label: ProcessVariableEnum.START_TIME,
+    value: '发起时间'
  })
-  formField.value.unshift({
-    field: ProcessVariableEnum.START_USER_ID,
-    title: '发起人'
+  cloneFormField.unshift({
+    label: ProcessVariableEnum.START_USER_ID,
+    value: '发起人'
  })
+  return cloneFormField
+})
+const formFieldOptions4Summary = computed(() => {
  return formField.value.map((item) => {
    return {
      label: item.title,
@ -211,12 +252,18 @@ const initData = () => {
  if (!modelData.value.autoApprovalType) {
    modelData.value.autoApprovalType = BpmAutoApproveType.NONE
  }
-  if (!modelData.value.customTitleSetting) {
-    modelData.value.customTitleSetting = {
+  if (!modelData.value.titleSetting) {
+    modelData.value.titleSetting = {
      enable: false,
      title: ''
    }
  }
+  if (!modelData.value.summarySetting) {
+    modelData.value.summarySetting = {
+      enable: false,
+      summary: []
+    }
+  }
 }
 defineExpose({ initData })

@ -224,9 +271,9 @@ defineExpose({ initData })
 watch(
  () => modelData.value.formId,
  async (newFormId) => {
-    if (newFormId && modelData.value.formType === BpmModelFormType.CUSTOM) {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
      const data = await FormApi.getForm(newFormId)
-      const result: Array<{ field: ProcessVariableEnum; title: string }> = []
+      const result: Array<{ field: string; title: string }> = []
      if (data.fields) {
        data.fields.forEach((fieldStr: string) => {
          parseFormFields(JSON.parse(fieldStr), result)
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@ -155,9 +155,13 @@ const formData: any = ref({
    length: 5
  },
  autoApprovalType: BpmAutoApproveType.NONE,
-  customTitleSetting: {
+  titleSetting: {
    enable: false,
    title: ''
+  },
+  summarySetting: {
+    enable: false,
+    summary: []
  }
 })

--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@ -130,6 +130,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="流程名称" align="center" prop="name" min-width="200px" fixed="left" />
+      <el-table-column label="摘要" prop="summary" min-width="180" fixed="left">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="流程分类"
        align="center"
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@ -64,7 +64,7 @@
            :value="dict.value"
          />
        </el-select>
-      </el-form-item> 
+      </el-form-item>

      <!-- 高级筛选 -->
      <el-form-item :style="{ position: 'absolute', right: '0px' }">
@ -77,9 +77,9 @@
        >
          <template #reference>
            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
            </el-button>
-            
+
          </template>
          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
            <el-select
@ -95,7 +95,7 @@
                :value="category.code"
              />
            </el-select>
-          </el-form-item>          
+          </el-form-item>
          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
@ -122,6 +122,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        align="center"
        label="发起人"
@ -195,7 +204,7 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
-  category: undefined,  
+  category: undefined,
  status: undefined,
  createTime: []
 })
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@ -60,9 +60,9 @@
        >
          <template #reference>
            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
            </el-button>
-            
+
          </template>
          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
            <el-select
@ -78,7 +78,7 @@
                :value="category.code"
              />
            </el-select>
-          </el-form-item>          
+          </el-form-item>
          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
@ -105,6 +105,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        align="center"
        label="发起人"