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

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

@@ -0,0 +1,50 @@
+import request from '@/router/axios';
+
+const prefix = '/api/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/mixins/ex-form.js

@@ -162,6 +162,8 @@ export default {
             form = { ...form, copyUser, assignee }
           }
           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)
@@ -201,6 +203,8 @@ export default {
             form = { ...form, copyUser, assignee }
           }
           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)
@@ -266,6 +270,8 @@ export default {
           reject()
           return
         }
+        variables['wf_form_option'] = JSON.stringify(this.option)
+        variables['wf_form_variable'] = JSON.stringify(this.form)
         const { taskId, processInstanceId, processDefinitionName, processDefinitionId } = this.process
         const param = {
           taskId, processInstanceId, processDefinitionName, processDefinitionId, pass,

src/views/plugin/workflow/process/components/detail.vue

@@ -7,12 +7,9 @@
                   :offset-top="114">
         <div class="header">
           <avue-title :value="process.processDefinitionName"></avue-title>
-          <div v-if="process.status != 'todo'">
+          <div style="display: flex;">
-            主题：<avue-select v-model="theme"
+            <wf-theme v-if="process.status != 'todo'" v-model="theme" :theme-list="themeList"></wf-theme>
-                         size="mini"
+            <wf-form-variable v-if="permission.wf_form_variable_view" :process-ins-id="process.processInstanceId"></wf-form-variable>
-                         :clearable="false"
-                         :dic="themeList"
-                         @change="setThemeStyle"></avue-select>
           </div>
         </div>
       </avue-affix>
@@ -99,6 +96,8 @@
 import WfExamineForm from './examForm.vue'
 import WfButton from './button.vue'
 import WfFlow from './flow.vue'
+import WfTheme from './theme.vue'
+import WfFormVariable from './form-variable.vue'
 import userSelect from './user-select'
 
 import exForm from '../../mixins/ex-form'
@@ -106,7 +105,7 @@ import theme from '../../mixins/theme'
 
 export default {
   mixins: [exForm, theme],
-  components: { userSelect, WfExamineForm, WfButton, WfFlow },
+  components: { userSelect, WfExamineForm, WfButton, WfFlow, WfTheme, WfFormVariable },
   watch: {
     '$route.params.params': {
       handler(val) {

src/views/plugin/workflow/process/components/form-variable.vue

@@ -0,0 +1,102 @@
+<template>
+  <div style="margin-left: 15px">
+    <el-button
+      type="text"
+      icon="el-icon-time"
+      title="表单历史"
+      style="color: black; font-size: 18px"
+      @click="visible = true"
+    ></el-button>
+    <el-drawer
+      :visible.sync="visible"
+      size="60%"
+      append-to-body
+      custom-class="wf-drawer"
+      destroy-on-close
+    >
+      <template #title>
+        <span>
+          流程表单提交历史 <el-tag v-if="isDev">@nutflow1.8.1+</el-tag>
+        </span>
+      </template>
+      <el-tabs v-model="active" class="wf-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 }} 提交
+              <span slot="reference">{{ item.taskName }}</span>
+            </el-popover>
+          </template>
+          <avue-form
+            v-model="item.formVariable"
+            :option="item.formOption"
+            :style="themeCustomStyle"
+          ></avue-form>
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/plugin/workflow/form-variable'
+import theme from '../../mixins/theme'
+export default {
+  name: 'wf-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">
+.wf-drawer {
+  .el-tabs__header {
+    padding: 0 15px;
+  }
+}
+</style>

src/views/plugin/workflow/process/components/theme.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-popover
+    popper-class="wf-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>
+    <el-button
+      slot="reference"
+      title="主题"
+      type="text"
+      icon="el-icon-brush"
+      style="color: black; font-size: 18px;"
+    ></el-button>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'wf-theme',
+  props: {
+    value: {
+      type: String,
+      default: 'default',
+    },
+    themeList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.theme = val
+      },
+      immediate: true
+    },
+    theme: {
+      handler(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  data() {
+    return {
+      theme: ''
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.wf-theme-popover {
+  .el-radio {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>

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

@@ -7,11 +7,9 @@
                   :offset-top="114">
         <div class="header">
           <avue-title :value="process.processDefinitionName"></avue-title>
-          <div v-if="process.status != 'todo'">
+          <div style="display: flex;">
-            主题：<avue-select v-model="theme"
+            <wf-theme v-if="process.status != 'todo'" v-model="theme" :theme-list="themeList"></wf-theme>
-                         size="mini"
+            <wf-form-variable :process-ins-id="process.processInstanceId"></wf-form-variable>
-                         :clearable="false"
-                         :dic="themeList"></avue-select>
           </div>
         </div>
       </avue-affix>
@@ -91,6 +89,8 @@
 import WfExamineForm from '@/views/plugin/workflow/process/components/examForm.vue'
 import WfButton from '@/views/plugin/workflow/process/components/button.vue'
 import WfFlow from '@/views/plugin/workflow/process/components/flow.vue'
+import WfTheme from '@/views/plugin/workflow/process/components/theme.vue'
+import WfFormVariable from '@/views/plugin/workflow/process/components/form-variable.vue'
 import userSelect from '@/views/plugin/workflow/process/components/user-select'
 
 import exForm from '@/views/plugin/workflow/mixins/ex-form'
@@ -98,7 +98,7 @@ import theme from '@/views/plugin/workflow/mixins/theme'
 
 export default {
   mixins: [exForm, theme],
-  components: { userSelect, WfExamineForm, WfButton, WfFlow },
+  components: { userSelect, WfExamineForm, WfButton, WfFlow, WfTheme, WfFormVariable },
   watch: {
     '$route.query.p': {
       handler(val) {