feat: 发起/通过时记录表单变量

src/views/plugin/workflow/api/design/form-variable.js

@@ -0,0 +1,50 @@
+import request from '@/axios';
+
+const prefix = '/blade-workflow/design/form/variable'
+
+export const getList = (current, size, params) => {
+  return request({
+    url: `${prefix}/list`,
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getDetail = (params) => {
+  return request({
+    url: `${prefix}/detail`,
+    method: 'get',
+    params
+  })
+}
+
+export const remove = (ids) => {
+  return request({
+    url: `${prefix}/remove`,
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return request({
+    url: `${prefix}/submit`,
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: `${prefix}/update`,
+    method: 'post',
+    data: row
+  })
+}
+

src/views/plugin/workflow/components/nf-form-variable/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="nf-form-variable">
+    <el-button
+      text
+      icon="el-icon-clock"
+      title="表单历史"
+      style="color: black; font-size: 18px"
+      @click="visible = true"
+    ></el-button>
+    <el-drawer v-model="visible" size="60%" append-to-body class="nf-drawer" destroy-on-close>
+      <template #header>
+        <span> 流程表单提交历史 <el-tag v-if="isDev">@nutflow1.8.1+</el-tag> </span>
+      </template>
+      <el-tabs v-model="active" class="nf-theme-custom">
+        <el-tab-pane v-for="(item, index) in list" :name="index" :key="index" lazy>
+          <template #label>
+            <el-popover placement="top" width="auto" trigger="hover">
+              {{ item.createUsername }} 于 {{ item.createTime }} 提交
+              <template #reference>{{ item.taskName }}</template>
+            </el-popover>
+          </template>
+          <nf-form
+            v-model="item.formVariable"
+            :option="item.formOption"
+            :style="themeCustomStyle"
+          ></nf-form>
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { getList } from '../../api/design/form-variable'
+import theme from '../../mixins/theme'
+export default {
+  name: 'nf-form-variable',
+  mixins: [theme],
+  props: {
+    processInsId: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isDev() {
+      return process.env.NODE_ENV === "development"
+    }
+  },
+  watch: {
+    processInsId: {
+      handler(val) {
+        this.getFormVariable(val)
+      },
+      immediate: true
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      active: 0,
+      list: []
+    }
+  },
+  methods: {
+    getFormVariable(processInsId) {
+      if (this.validatenull(processInsId)) return
+
+      getList(1, -1, { processInsId }).then(res => {
+        const list = res.data.data.records
+        list.forEach(item => {
+          item.formVariable = JSON.parse(item.formVariable)
+          item.formOption = JSON.parse(item.formOption)
+          item.formOption.detail = true
+        })
+        this.list = list
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nf-form-variable {
+  .el-button.is-text {
+    padding: 0;
+  }
+}
+.nf-drawer {
+  .nf-form {
+    padding: 0 10px;
+  }
+}
+</style>

src/views/plugin/workflow/components/nf-theme/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-popover popper-class="nf-theme-popover" placement="left" width="auto" trigger="click">
+    <el-radio-group v-model="theme">
+      <el-row :gutter="15">
+        <el-col v-for="(item, index) in themeList" :key="index" :span="8">
+          <el-radio :label="item.value">{{ item.label }}</el-radio>
+        </el-col>
+      </el-row>
+    </el-radio-group>
+    <template #reference>
+      <el-button
+        title="主题"
+        text
+        icon="el-icon-brush"
+        style="color: black; font-size: 18px"
+      ></el-button
+    ></template>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'nf-theme',
+  props: {
+    modelValue: {
+      type: String,
+      default: 'default',
+    },
+    themeList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        this.theme = val
+      },
+      immediate: true
+    },
+    theme: {
+      handler(val) {
+        this.$emit('update:modelValue', val)
+      }
+    }
+  },
+  data() {
+    return {
+      theme: ''
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.nf-theme-popover {
+  .el-radio {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>

src/views/plugin/workflow/mixins/ex-form.js

@@ -211,6 +211,8 @@ export default {
             }
           }
           if (valid) {
+            form['wf_form_option'] = JSON.stringify(this.option)
+            form['wf_form_variable'] = JSON.stringify(form)
             startProcess(form).then(res => {
               if (isExForm === true) {
                 resolve(res, done)
@@ -257,6 +259,8 @@ export default {
             }
           }
           if (valid) {
+            form['wf_form_option'] = JSON.stringify(this.option)
+            form['wf_form_variable'] = JSON.stringify(form)
             startProcessByKey(form).then(res => {
               if (isExForm === true) {
                 resolve(res, done)
@@ -344,6 +348,8 @@ export default {
           reject()
           return
         }
+        variables['wf_form_option'] = JSON.stringify(this.option)
+        variables['wf_form_variable'] = JSON.stringify(this.form)
         const {
           taskId,
           processInstanceId,

src/views/plugin/workflow/pages/external/Leave/detail.vue

@@ -4,14 +4,13 @@
       <el-affix position="top" :offset="110">
         <div class="header">
           <h3>{{ process.processDefinitionName }}</h3>
-          <div v-if="process.status != 'todo'">
+          <div style="display: flex">
-            主题：<el-select-v2
+            <nf-theme
+              v-if="process.status != 'todo'"
               v-model="theme"
-              size="default"
+              :theme-list="themeList"
-              :clearable="false"
+            ></nf-theme>
-              :options="themeList"
+            <nf-form-variable :process-ins-id="process.processInstanceId"></nf-form-variable>
-              @change="setThemeStyle"
-            ></el-select-v2>
           </div>
         </div>
       </el-affix>
@@ -95,6 +94,8 @@
 import NfExamineForm from '../../../components/nf-exam-form/index.vue'
 import NfButton from '../../../components/nf-button/index.vue'
 import NfFlow from '../../../components/nf-flow/index.vue'
+import NfTheme from '../../../components/nf-theme/index.vue'
+import NfFormVariable from '../../../components/nf-form-variable/index.vue'
 import NfUserSelect from '../../../components/nf-user-select/index.vue'
 
 import exForm from '../../../mixins/ex-form'
@@ -102,7 +103,7 @@ import theme from '../../../mixins/theme'
 
 export default {
   mixins: [exForm, theme],
-  components: { NfUserSelect, NfExamineForm, NfButton, NfFlow },
+  components: { NfUserSelect, NfExamineForm, NfButton, NfFlow, NfTheme, NfFormVariable },
   watch: {
     '$route.query.p': {
       handler(val) {

src/views/plugin/workflow/pages/external/Leave/start.vue

@@ -259,7 +259,7 @@ export default {
           submit({ id: data.id, processInsId }).then(() => {
             this.$message.success("发起成功")
             this.handleCloseTag('/plugin/workflow/pages/process/send')
-            done()
+            if (typeof done == 'function') done()
           })
         }).catch(() => {
           this.loading = false

src/views/plugin/workflow/pages/process/form/detail.vue

@@ -4,14 +4,13 @@
       <el-affix position="top" :offset="110">
         <div class="header">
           <h3>{{ process.processDefinitionName }}</h3>
-          <div v-if="process.status != 'todo'">
+          <div style="display: flex">
-            主题：<el-select-v2
+            <nf-theme
+              v-if="process.status != 'todo'"
               v-model="theme"
-              size="default"
+              :theme-list="themeList"
-              :clearable="false"
+            ></nf-theme>
-              :options="themeList"
+            <nf-form-variable :process-ins-id="process.processInstanceId"></nf-form-variable>
-              @change="setThemeStyle"
-            ></el-select-v2>
           </div>
         </div>
       </el-affix>
@@ -109,12 +108,14 @@ import NfExamineForm from '../../../components/nf-exam-form/index.vue'
 import NfButton from '../../../components/nf-button/index.vue'
 import NfFlow from '../../../components/nf-flow/index.vue'
 import NfUserSelect from '../../../components/nf-user-select/index.vue'
+import NfTheme from '../../../components/nf-theme/index.vue'
+import NfFormVariable from '../../../components/nf-form-variable/index.vue'
 import exForm from '../../../mixins/ex-form'
 import theme from '../../../mixins/theme'
 
 export default {
   mixins: [exForm, theme],
-  components: { NfUserSelect, NfExamineForm, NfButton, NfFlow },
+  components: { NfUserSelect, NfExamineForm, NfButton, NfFlow, NfTheme, NfFormVariable },
   watch: {
     '$route.params.params': {
       handler(val) {