优化

lib/vue-form-making-v3/src/components/Upload/file.vue

@@ -17,12 +17,12 @@
     </div>
 
     <ul class="upload-list">
-      <li class="list_item" 
+      <li class="list_item"
         :class="{uploading: item.status=='uploading', 'is-success': item.status=='success', 'is-disabled': disabled}"
         v-for="(item) in fileList" :key="item.key"
       >
         <a class="list_item-name" :href="item.url" target="_blank">
-          <i class="fm-iconfont icon-file"></i> 
+          <i class="fm-iconfont icon-file"></i>
           {{item.name}}
         </a>
 
@@ -160,7 +160,7 @@ export default {
         this.$refs.uploadInput.value = []
         return false
       }
-      
+
       for (let i = 0; i < files.length; i++) {
         let file = files[i]
 
@@ -179,7 +179,7 @@ export default {
         reader.onload = () => {
 
           key = key + '_' + file.name
-          
+
           if (this.editIndex >= 0) {
 
             this.fileList[this.editIndex] = {
@@ -211,11 +211,11 @@ export default {
         }
       }
       this.$refs.uploadInput.value = []
-    }, 
+    },
     uploadAction (res, file, key) {
       let changeIndex = this.fileList.findIndex(item => item.key === key)
       const xhr = new XMLHttpRequest()
-      
+
       const url = this.action
       xhr.open('POST', url, true)
       // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
@@ -224,17 +224,38 @@ export default {
       })
 
       let formData = new FormData()
+      formData.append('multiPartFile', file)
       formData.append('file', file)
       formData.append('fname', file.name)
       formData.append('key', key)
 
       xhr.withCredentials = this.withCredentials
-      
+
       xhr.onreadystatechange = () => {
         if (xhr && xhr.readyState === 4) {
-          
+
           let resData = xhr.response ? JSON.parse(xhr.response) : {}
-          if (resData && resData.url) {
+          if (resData && resData.code == 0) {
+            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+              percent: 100,
+              ...resData.data
+            })
+            setTimeout(() => {
+              this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              this.$emit('on-upload-success', {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              console.log(this.fileList, '====');
+              this.$emit('input', this.fileList)
+            }, 200)
+          } else if (resData && resData.url) {
             this.fileList[this.fileList.findIndex(item => item.key === key)] = {
               ...this.fileList[this.fileList.findIndex(item => item.key === key)],
               url: resData.url,
@@ -291,7 +312,7 @@ export default {
       observable.subscribe({
         next (res) {
           _this.fileList[_this.fileList.findIndex(item => item.key === key)].percent = parseInt(res.total.percent)
-          
+
           _this.$emit('on-upload-progress', {
             ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
             status: 'uploading',
@@ -326,7 +347,7 @@ export default {
               ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
               status: 'success'
             })
-            
+
             _this.$emit('update:modelValue', _this.fileList)
           }, 200)
         }
@@ -350,7 +371,7 @@ export default {
     handlePreviewFile (key) {
       this.viewer && this.viewer.destroy()
       this.uploadId = 'upload_' + new Date().getTime()
-      
+
       this.$nextTick(() => {
         this.viewer = new Viewer(document.getElementById(this.uploadId))
         this.viewer.view(this.fileList.findIndex(item => item.key === key))

lib/vue-form-making-v3/src/components/Upload/index.vue

@@ -9,7 +9,7 @@
       item-key="key"
     >
       <template #item="{element:item}">
-        <div 
+        <div
           :id="item.key"
           :style="{width: width+'px', height: height+'px'}"
           :class="{uploading: item.status=='uploading', 'is-success': item.status=='success', 'is-disabled': disabled}"
@@ -19,7 +19,7 @@
           <template v-if="item.status=='uploading' && ui == 'element'">
             <el-progress :width="miniWidth*0.9" class="upload-progress" type="circle" :percentage="item.percent"></el-progress>
           </template>
-          
+
           <template v-if="item.status=='uploading' && ui == 'antd'">
             <a-progress :size="miniWidth*0.9" class="upload-progress" type="circle" :percent="item.percent"></a-progress>
           </template>
@@ -35,10 +35,10 @@
           </div>
         </div>
       </template>
-      
+
     </draggable>
 
-    <div 
+    <div
       :class="{'is-disabled': disabled, 'el-upload': ui == 'element', 'el-upload--picture-card': ui == 'element', 'ant-upload': ui == 'antd', 'ant-upload-select' : ui == 'antd', 'ant-upload-select-picture-card': ui == 'antd'}"
       v-show="(!isQiniu || (isQiniu && token)) && fileList.length < limit"
       :style="{width: width+'px', height: height+'px'}"
@@ -187,7 +187,7 @@ export default {
         this.$refs.uploadInput.value = []
         return false
       }
-      
+
       for (let i = 0; i < files.length; i++) {
         let file = files[i]
 
@@ -203,7 +203,7 @@ export default {
         const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
         reader.readAsDataURL(file)
         reader.onload = () => {
-          
+
           if (this.editIndex >= 0) {
             this.fileList[this.editIndex] = {
               key,
@@ -232,11 +232,11 @@ export default {
         }
       }
       this.$refs.uploadInput.value = []
-    }, 
+    },
     uploadAction (res, file, key) {
       let changeIndex = this.fileList.findIndex(item => item.key === key)
       const xhr = new XMLHttpRequest()
-      
+
       const url = this.action
       xhr.open('POST', url, true)
       // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
@@ -245,6 +245,7 @@ export default {
       })
 
       let formData = new FormData()
+      formData.append('multiPartFile', file)
       formData.append('file', file)
       formData.append('fname', file.name)
       formData.append('key', key)
@@ -253,9 +254,29 @@ export default {
 
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4) {
-          
+
           let resData = JSON.parse(xhr.response)
-          if (resData && resData.url) {
+          if (resData && resData.code == 0) {
+            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+              percent: 100,
+              ...resData.data
+            })
+            setTimeout(() => {
+              this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              this.$emit('on-upload-success', {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              console.log(this.fileList, '====');
+              this.$emit('input', this.fileList)
+            }, 200)
+          } else if (resData && resData.url) {
             this.fileList[this.fileList.findIndex(item => item.key === key)] = {
               ...this.fileList[this.fileList.findIndex(item => item.key === key)],
               url: resData.url,
@@ -360,9 +381,9 @@ export default {
       })
     },
     handleEdit (key) {
-      
+
       this.editIndex = this.fileList.findIndex(item => item.key === key)
-      
+
       this.$refs.uploadInput.click()
     },
     handleMeitu (key) {
@@ -378,7 +399,7 @@ export default {
     handlePreviewFile (key) {
       this.viewer && this.viewer.destroy()
       this.uploadId = 'upload_' + new Date().getTime()
-      
+
       this.$nextTick(() => {
         this.viewer = new Viewer(document.getElementById(this.uploadId))
         this.viewer.view(this.fileList.findIndex(item => item.key === key))

lib/vue-form-making/src/components/Upload/index.vue

@@ -53,6 +53,7 @@ import { EventBus } from '../../util/event-bus.js'
 import * as qiniu from 'qiniu-js'
 require('viewerjs/dist/viewer.css')
 import { executeExpression } from '../../util/expression'
+import {getToken} from "../../util/token";
 
 export default {
   components: {
@@ -240,12 +241,15 @@ export default {
       this.headers.map(item => {
         item.key && xhr.setRequestHeader(item.key, item.fx ? executeExpression(item.value, {}, this.formContext) : item.value)
       })
-
+      this.headers = [{
+        key: Object.keys(getToken())[0],
+        value: Object.values(getToken())[0]
+      }]
       let formData = new FormData()
-      formData.append('file', file)
+      formData.append('multiPartFile', file)
       formData.append('fname', file.name)
       formData.append('key', key)
-
+      //formData.append('module', 'file')
       xhr.withCredentials = this.withCredentials
 
       xhr.onreadystatechange = () => {
@@ -253,7 +257,27 @@ export default {
         if (xhr.readyState === 4) {
 
           let resData = JSON.parse(xhr.response)
-          if (resData && resData.url) {
+          if (resData && resData.code == 0) {
+            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+              percent: 100,
+              ...resData.data
+            })
+            setTimeout(() => {
+              this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              this.$emit('on-upload-success', {
+                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+                status: 'success',
+                ...resData.data
+              })
+              console.log(this.fileList, '====');
+              this.$emit('input', this.fileList)
+            }, 200)
+          } else if (resData && resData.url) {
             this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
               ...this.fileList[this.fileList.findIndex(item => item.key === key)],
               url: resData.url,

lib/vue-form-making/src/util/request.js

@@ -9,8 +9,10 @@ const request = axios.create({
 request.interceptors.request.use(
   config => {
     const token = getToken();
+    console.log(222222);
     if (token && config.headers) {
-     // config.headers['Authorization'] = Object.values(token)[0];
+      console.log(11111);
+      config.headers['Authorization'] = Object.values(token)[0];
     }
     return config
   },

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -42,7 +42,8 @@
           cursor: pointer;
           width: 15px;
         "
-        @click="() => (isRight = !isRight)">
+        @click="() => (isRight = !isRight)"
+      >
         <span
           style="
             align-self: center;
@@ -496,7 +497,10 @@ this.postOptions.push(...response.data);
       async submit() {
         this.form.valueJson = await this.generateFormValid();
         this.form.processType = '1';
-        await processInstanceCreateAPI(this.form);
+        await processInstanceCreateAPI({
+          ...this.form,
+          variables: { ...this.form.valueJson }
+        });
         this.$message('提交审核成功');
         this.$emit('reload');
         this.cancel();
@@ -539,7 +543,9 @@ this.postOptions.push(...response.data);
   }
 
   .form-box {
+    max-height: 500px;
     min-width: 300px;
+    overflow: auto;
   }
   ::v-deep .el-dialog {
     min-width: 400px;

src/styles/transition/common.scss

@@ -162,6 +162,9 @@
   .el-form-item__error {
     display: none !important;
   }
+  .ele-form-search .el-form-item, .ele-form-search .ele-form-actions{
+    margin-bottom: 0 !important;
+  }
 }
 
 

src/views/bpm/collaborative/index.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="ele-body">
-    <el-card class="card_box" :body-style="{display:'flex',alignItems: 'flex-start'}" shadow="never">
+    <el-card class="card_box" :body-style="{display:'flex',flexDirection: 'column',alignItems: 'flex-start'}"
+             shadow="never">
       <!--    动态表单配置-->
       <div class="content-box">
         <div v-for="category in Object.keys(templateList)" :key="category" class="category_box">
-          <div class="category_box_title">{{ getDictV('collaborative_type',category) }}</div>
+          <div class="category_box_title">{{ getDictV('collaborative_type', category) }}</div>
           <div class="category_box_content">
             <div v-for="v in templateList[category]" :key="v.id" class="category_content"
                  @click="handleStartProcess(v)">
-              <span :class="v.icon"></span>
+              <svg-icon
+                style="width: 1.5em;height: 1.5em;"
+                :icon-class="v.icon"
+                className="svg-icon-set"
+              ></svg-icon>
               <span>
               {{ v.name }}
             </span>
@@ -16,82 +21,91 @@
           </div>
         </div>
       </div>
-      <div class="tab-box" >
+      <div class="tab-box el-form-box">
         <el-tabs type="border-card">
           <el-tab-pane label="个人记录">
-            <div class="filter-container">
-              <el-form
-                label-width="90px"
-                class="ele-form-search"
-                @keyup.enter.native="reload"
-                @submit.native.prevent
-              >
-                <el-row :gutter="15">
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="分类：">
-                     <el-select  v-model="params.formId" >
-                       <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id" :label="item.name" ></el-option>
-                     </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="结果：" prop="result" label-width="70px">
-                      <!-- <el-select
-                        v-model="params.status"
-                        placeholder="请选择状态"
-                        clearable
-                      >
-                        <el-option
-                          v-for="dict in statusList"
-                          :key="dict.value"
-                          :label="dict.label"
-                          :value="dict.value"
-                        />
-                      </el-select> -->
-                      <DictSelection
-                        dictName="流程实例的结果"
-                        clearable
-                        v-model="params.result"
-                      >
-                      </DictSelection>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
-                    <el-form-item label="创建时间：" prop="createTime">
-                      <el-date-picker
-                        v-model="params.createTime"
-                        style="width: 100%"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        type="daterange"
-                        range-separator="-"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        :default-time="['00:00:00', '23:59:59']"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
-                    <div class="ele-form-actions">
-                      <el-button
-                        type="primary"
-                        icon="el-icon-search"
-                        class="ele-btn-icon"
-                        @click="reload"
-                      >
-                        查询
-                      </el-button>
-                      <el-button @click="reset">重置</el-button>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
+
             <ele-pro-table
               ref="table"
+              :toolkit="[]"
+              height="calc(100vh - 450px)"
               :columns="columns"
               :datasource="datasource"
               cache-key="datasource-1"
+              :init-load="false"
             >
+              <template v-slot:toolbar="{ row }">
+                <div class="filter-container">
+                  <el-form
+                    class="ele-form-search"
+                    @keyup.enter.native="reload"
+                    @submit.native.prevent
+                  >
+                    <el-row :gutter="15" style="display: flex;align-items: center">
+                      <el-col v-bind="{ span: 3 }">
+                        <el-form-item label="分类：" label-width="60px">
+                          <el-select v-model="params.formId">
+                            <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id"
+                                       :label="item.name"></el-option>
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 4 }">
+                        <el-form-item label="结果：" prop="result" label-width="60px">
+                          <!-- <el-select
+                            v-model="params.status"
+                            placeholder="请选择状态"
+                            clearable
+                          >
+                            <el-option
+                              v-for="dict in statusList"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value"
+                            />
+                          </el-select> -->
+                          <DictSelection
+                            dictName="流程实例的结果"
+                            clearable
+                            v-model="params.result"
+                          >
+                          </DictSelection>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 10 }">
+                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
+                          <el-date-picker
+                            v-model="params.createTime"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :default-time="['00:00:00', '23:59:59']"
+                          />
+                        </el-form-item>
+                      </el-col>
+
+                    </el-row>
+                  </el-form>
+                </div>
+              </template>
+              <template v-slot:toolkit="{ row }">
+                <div class="filter-container">
+                  <div class="ele-form-actions">
+                    <el-button
+                      type="primary"
+                      icon="el-icon-search"
+                      class="ele-btn-icon"
+                      @click="reload"
+                    >
+                      查询
+                    </el-button>
+                    <el-button @click="reset">重置</el-button>
+                  </div>
+                </div>
+              </template>
               <template v-slot:result="{ row }">
                 <el-tag size="medium" :type="getTimelineItemType(getDictValue('流程实例的结果', row.result))">
                   {{ getDictValue('流程实例的结果', row.result) }}
@@ -107,6 +121,34 @@
                 </el-link
                 >
               </template>
+              <template v-if="formColumnList.length" v-for="(item,index) in formColumnList"
+                        v-slot:[item.model]="{ row }">
+                <div v-if="item.type=='imgupload'">
+                  <el-image
+                    v-if="row[item.model].length"
+                    style="width: 100px; height: 100px"
+                    :src="row[item.model][0].url"
+                    :preview-src-list="row[item.model].map(i=>i.url)">
+                  </el-image>
+                </div>
+                <div v-else-if="item.type=='fileupload'">
+                  <el-button type="text" @click="getFiles(row[item.model])">下载</el-button>
+                </div>
+
+                <div v-else-if="item.type=='userSelect'">
+                  {{ getUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptAndUserCascader'">
+                  {{ getDeptAndUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptCascader'">
+                  {{ getDeptName(row[item.model]) }}
+                </div>
+                <div v-else>
+                  {{ row[item.model] }}
+                </div>
+
+              </template>
               <!-- 操作列 -->
               <template v-slot:action="{ row }">
                 <el-button
@@ -121,80 +163,121 @@
             </ele-pro-table>
 
           </el-tab-pane>
-          <el-tab-pane label="部门记录" >
-            <div class="filter-container">
-              <el-form
-                label-width="90px"
-                class="ele-form-search"
-                @keyup.enter.native="deptReload"
-                @submit.native.prevent
-              >
-                <el-row :gutter="15">
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="分类：">
-                      <el-select  v-model="params.formId" >
-                        <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id" :label="item.name" ></el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="结果：" prop="result" label-width="70px">
-                      <!-- <el-select
-                        v-model="params.status"
-                        placeholder="请选择状态"
-                        clearable
-                      >
-                        <el-option
-                          v-for="dict in statusList"
-                          :key="dict.value"
-                          :label="dict.label"
-                          :value="dict.value"
-                        />
-                      </el-select> -->
-                      <DictSelection
-                        dictName="流程实例的结果"
-                        clearable
-                        v-model="params.result"
-                      >
-                      </DictSelection>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
-                    <el-form-item label="创建时间：" prop="createTime">
-                      <el-date-picker
-                        v-model="params.createTime"
-                        style="width: 100%"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        type="daterange"
-                        range-separator="-"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        :default-time="['00:00:00', '23:59:59']"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
-                    <div class="ele-form-actions">
-                      <el-button
-                        type="primary"
-                        icon="el-icon-search"
-                        class="ele-btn-icon"
-                        @click="deptReload"
-                      >
-                        查询
-                      </el-button>
-                      <el-button @click="deptReset">重置</el-button>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
+          <el-tab-pane label="部门记录">
+
             <ele-pro-table
               ref="deptTable"
               :columns="deptColumns"
               :datasource="deptDatasource"
               cache-key="deptDatasource"
+              :toolkit="[]"
+              height="calc(100vh - 450px)"
+              :init-load="false"
             >
+              <template v-slot:toolbar="{ row }">
+                <div class="filter-container">
+                  <el-form
+                    class="ele-form-search"
+                    @keyup.enter.native="reload"
+                    @submit.native.prevent
+                  >
+                    <el-row :gutter="15" style="display: flex;align-items: center">
+                      <el-col v-bind="{ span: 3 }">
+                        <el-form-item label="分类：" label-width="60px">
+                          <el-select v-model="params.formId">
+                            <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id"
+                                       :label="item.name"></el-option>
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 4 }">
+                        <el-form-item label="结果：" prop="result" label-width="60px">
+                          <!-- <el-select
+                            v-model="params.status"
+                            placeholder="请选择状态"
+                            clearable
+                          >
+                            <el-option
+                              v-for="dict in statusList"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value"
+                            />
+                          </el-select> -->
+                          <DictSelection
+                            dictName="流程实例的结果"
+                            clearable
+                            v-model="params.result"
+                          >
+                          </DictSelection>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 4 }">
+                        <el-form-item label="发起人：" prop="startUserName" label-width="70px">
+                          <el-input v-model="params.startUserName"></el-input>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 10 }">
+                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
+                          <el-date-picker
+                            v-model="params.createTime"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :default-time="['00:00:00', '23:59:59']"
+                          />
+                        </el-form-item>
+                      </el-col>
+
+                    </el-row>
+                  </el-form>
+                </div>
+              </template>
+              <template v-slot:toolkit="{ row }">
+                <div class="filter-container">
+                  <div class="ele-form-actions">
+                    <el-button
+                      type="primary"
+                      icon="el-icon-search"
+                      class="ele-btn-icon"
+                      @click="reload"
+                    >
+                      查询
+                    </el-button>
+                    <el-button @click="reset">重置</el-button>
+                  </div>
+                </div>
+              </template>
+              <template v-if="formColumnList.length" v-for="(item,index) in formColumnList"
+                        v-slot:[item.model]="{ row }">
+                <div v-if="item.type=='imgupload'">
+                  <el-image
+                    v-if="row[item.model].length"
+                    style="width: 100px; height: 100px"
+                    :src="row[item.model][0].url"
+                    :preview-src-list="row[item.model].map(i=>i.url)">
+                  </el-image>
+                </div>
+                <div v-else-if="item.type=='fileupload'">
+                  <el-button type="text" @click="getFiles(row[item.model])">下载</el-button>
+                </div>
+                <div v-else-if="item.type=='userSelect'">
+                  {{ getUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptAndUserCascader'">
+                  {{ getDeptAndUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptCascader'">
+                  {{ getDeptName(row[item.model]) }}
+                </div>
+                <div v-else>
+                  {{ row[item.model] }}
+                </div>
+
+              </template>
               <template v-slot:result="{ row }">
                 <el-tag size="medium" :type="getTimelineItemType(getDictValue('流程实例的结果', row.result))">
                   {{ getDictValue('流程实例的结果', row.result) }}
@@ -224,79 +307,120 @@
             </ele-pro-table>
           </el-tab-pane>
           <el-tab-pane label="通知记录">
-            <div class="filter-container">
-              <el-form
-                label-width="90px"
-                class="ele-form-search"
-                @keyup.enter.native="noticeReload"
-                @submit.native.prevent
-              >
-                <el-row :gutter="15">
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="分类：">
-                      <el-select  v-model="params.formId" >
-                        <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id" :label="item.name" ></el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 5 }">
-                    <el-form-item label="结果：" prop="result" label-width="70px">
-                      <!-- <el-select
-                        v-model="params.status"
-                        placeholder="请选择状态"
-                        clearable
-                      >
-                        <el-option
-                          v-for="dict in statusList"
-                          :key="dict.value"
-                          :label="dict.label"
-                          :value="dict.value"
-                        />
-                      </el-select> -->
-                      <DictSelection
-                        dictName="流程实例的结果"
-                        clearable
-                        v-model="params.result"
-                      >
-                      </DictSelection>
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
-                    <el-form-item label="创建时间：" prop="createTime">
-                      <el-date-picker
-                        v-model="params.createTime"
-                        style="width: 100%"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        type="daterange"
-                        range-separator="-"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        :default-time="['00:00:00', '23:59:59']"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
-                    <div class="ele-form-actions">
-                      <el-button
-                        type="primary"
-                        icon="el-icon-search"
-                        class="ele-btn-icon"
-                        @click="noticeReload"
-                      >
-                        查询
-                      </el-button>
-                      <el-button @click="noticeReset">重置</el-button>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
+
             <ele-pro-table
               ref="noticeTable"
               :columns="deptColumns"
               :datasource="noticeDatasource"
               cache-key="noticeDatasource"
+              height="calc(100vh - 450px)"
+              :toolkit="[]"
+              :init-load="false"
             >
+              <template v-slot:toolbar="{ row }">
+                <div class="filter-container">
+                  <el-form
+                    class="ele-form-search"
+                    @keyup.enter.native="reload"
+                    @submit.native.prevent
+                  >
+                    <el-row :gutter="15" style="display: flex;align-items: center">
+                      <el-col v-bind="{ span: 3 }">
+                        <el-form-item label="分类：" label-width="60px">
+                          <el-select v-model="params.formId">
+                            <el-option v-for="(item,index) in defaultTemplateList" :key="index" :value="item.id"
+                                       :label="item.name"></el-option>
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 4 }">
+                        <el-form-item label="结果：" prop="result" label-width="60px">
+                          <!-- <el-select
+                            v-model="params.status"
+                            placeholder="请选择状态"
+                            clearable
+                          >
+                            <el-option
+                              v-for="dict in statusList"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value"
+                            />
+                          </el-select> -->
+                          <DictSelection
+                            dictName="流程实例的结果"
+                            clearable
+                            v-model="params.result"
+                          >
+                          </DictSelection>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 4 }">
+                        <el-form-item label="发起人：" prop="startUserName" label-width="70px">
+                          <el-input v-model="params.startUserName"></el-input>
+                        </el-form-item>
+                      </el-col>
+                      <el-col v-bind="{ span: 10 }">
+                        <el-form-item label="创建时间：" prop="createTime" label-width="90px">
+                          <el-date-picker
+                            v-model="params.createTime"
+                            style="width: 100%"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            :default-time="['00:00:00', '23:59:59']"
+                          />
+                        </el-form-item>
+                      </el-col>
+
+                    </el-row>
+                  </el-form>
+                </div>
+              </template>
+              <template v-slot:toolkit="{ row }">
+                <div class="filter-container">
+                  <div class="ele-form-actions">
+                    <el-button
+                      type="primary"
+                      icon="el-icon-search"
+                      class="ele-btn-icon"
+                      @click="reload"
+                    >
+                      查询
+                    </el-button>
+                    <el-button @click="reset">重置</el-button>
+                  </div>
+                </div>
+              </template>
+              <template v-if="formColumnList.length" v-for="(item,index) in formColumnList"
+                        v-slot:[item.model]="{ row }">
+                <div v-if="item.type=='imgupload'">
+                  <el-image
+                    v-if="row[item.model].length"
+                    style="width: 100px; height: 100px"
+                    :src="row[item.model][0].url"
+                    :preview-src-list="row[item.model].map(i=>i.url)">
+                  </el-image>
+                </div>
+                <div v-else-if="item.type=='fileupload'">
+                  <el-button type="text" @click="getFiles(row[item.model])">下载</el-button>
+                </div>
+                <div v-else-if="item.type=='userSelect'">
+                  {{ getUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptAndUserCascader'">
+                  {{ getDeptAndUserName(row[item.model]) }}
+                </div>
+                <div v-else-if="item.type=='deptCascader'">
+                  {{ getDeptName(row[item.model]) }}
+                </div>
+                <div v-else>
+                  {{ row[item.model] }}
+                </div>
+
+              </template>
               <template v-slot:result="{ row }">
                 <el-tag size="medium" :type="getTimelineItemType(getDictValue('流程实例的结果', row.result))">
                   {{ getDictValue('流程实例的结果', row.result) }}
@@ -312,6 +436,7 @@
                 </el-link
                 >
               </template>
+
               <!-- 操作列 -->
               <template v-slot:action="{ row }">
                 <el-button
@@ -345,12 +470,14 @@ import {getDate} from "@/utils/dateUtils";
 import dictMixins from "@/mixins/dictMixins";
 import detail from "@/views/bpm/processInstance/detail.vue";
 import {getByCode} from "@/api/system/dictionary-data";
-
+import {getFile} from "@/api/system/file";
+import {getUserPage} from '@/api/tickets';
+import {listOrganizations} from "@/api/system/organization";
 // 默认表单数据
 const defaultParams = {
   status: '',
   name: '',
-  formId:''
+  formId: ''
 };
 export default {
   name: "index",
@@ -365,6 +492,8 @@ export default {
       templateList: {},
       dictList: {},
       defaultTemplateList: [],
+      userList: [],
+      deptList: [],
       params: {...defaultParams},
       statusList: [],
       formColumnList: [],
@@ -396,13 +525,21 @@ export default {
           showOverflowTooltip: true,
           fixed: 'left'
         },
+        {
+          prop: 'formName',
+          label: '分类',
+          align: 'center',
+          slot: 'formName',
+          showOverflowTooltip: true,
+          minWidth: 100
+        },
         {
           prop: 'name',
           label: '名称',
           align: 'center',
           slot: 'name',
           showOverflowTooltip: true,
-          minWidth: 150
+          minWidth: 100
         },
         ...list,
         {
@@ -469,6 +606,14 @@ export default {
           showOverflowTooltip: true,
           fixed: 'left'
         },
+        {
+          prop: 'formName',
+          label: '分类',
+          align: 'center',
+          slot: 'formName',
+          showOverflowTooltip: true,
+          minWidth: 150
+        },
         {
           prop: 'name',
           label: '名称',
@@ -528,10 +673,46 @@ export default {
         // }
       ]
     },
+    getUserName() {
+      return (id) => {
+        if (!id) return ''
+        let find = this.userList.find(item => item.id == id) || {}
+        return find.name
+      }
+    },
+    getDeptAndUserName() {
+      return (id = []) => {
+        if (!id.length) return ''
+        let find = this.userList.find(item => item.id == id[id.length - 1]) || {}
+        return find.name
+      }
+    },
+    getDeptName() {
+      return (id = []) => {
+
+        if (!id.length) return ''
+        let find = this.deptList.find(item => item.id == id[id.length - 1]) || {}
+        console.log(find.name,'===========');
+        return find.name
+      }
+    },
+
+  },
+  watch: {
+    'params.formId': {
+      handler(val) {
+        this.reload()
+        this.deptReload()
+        this.reload()
+        this.noticeReload()
+      }
+    }
   },
-  created() {
-    this.getDictList('collaborative_type')
-    this.getTemplateList()
+  async created() {
+    await this.getDictList('collaborative_type')
+    await this.getTemplateList()
+    await this.getUserList()
+    await this.getDeptList()
   },
   methods: {
     getDictV(code, val) {
@@ -548,12 +729,30 @@ export default {
         }
       })
     },
+    //获取人员数据
+    async getUserList() {
+      let params = {pageNum: 1, size: -1};
+      let {list} = await getUserPage(params);
+      this.userList = list
+    },
+    //获取部门数据
+    async getDeptList() {
+      this.deptList = await listOrganizations()
+      console.log(this.deptList);
+    },
+    getFiles(row = []) {
+      row.forEach(item => {
+        getFile({objectName: item.storePath}, item.name);
+      })
+
+    },
     async getTemplateList() {
       this.defaultTemplateList = await getBpmCustomFormList()
       this.templateList = _.groupBy(this.defaultTemplateList, 'dictType');
-      this.params.formId =  this.defaultTemplateList[0]?.id
-      let makingJson =  JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {}
+      this.params.formId = this.defaultTemplateList[0]?.id
+      let makingJson = JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {}
       this.formColumnList = makingJson.list
+      console.log(this.formColumnList);
     },
     handleStartProcess(i) {
       this.processSubmitDialogFlag = true;
@@ -562,28 +761,29 @@ export default {
       })
     },
     /* 表格数据源 */
-   async datasource({page, limit, where, order}) {
-     let data = await getProcessInstancePage({
-       pageNo: page,
-       pageSize: limit,
-       ...this.params,
-       processType: '1',
-     });
-     data = data.list.map(item => {
-       return {
-         ...
-           item,
-         ...
-           item.valueJson
-       }
-     })
-     return data
+    async datasource({page, limit, where, order}) {
+      let data = await getProcessInstancePage({
+        pageNo: page,
+        pageSize: limit,
+        ...this.params,
+        processType: '1',
+      });
+      data = data.list.map(item => {
+        return {
+          ...
+            item,
+          ...
+            item.valueJson
+        }
+      })
+      return data
     },
     /* 刷新表格 */
     reload(where) {
-      let find  = this.defaultTemplateList.find(item=>item.id==this.params.formId)||{};
-      let makingJson =  JSON.parse(find.formJson.makingJson) || {}
+      let find = this.defaultTemplateList.find(item => item.id == this.params.formId) || {};
+      let makingJson = JSON.parse(find.formJson.makingJson) || {}
       this.formColumnList = makingJson.list
+      console.log(this.formColumnList);
       this.$refs.table.reload({page: 1, where});
       this.$refs.table.reRenderTable()
     },
@@ -591,13 +791,12 @@ export default {
     /*  重置 */
     reset() {
       this.params = {...defaultParams};
-      this.params.formId =  this.defaultTemplateList[0]?.id
+      this.params.formId = this.defaultTemplateList[0]?.id
       this.reload();
     },
     /* 表格数据源 */
-   async deptDatasource({page, limit, where, order}) {
-     console.log(11112222);
-     let data = await getProcessInstanceDeptPage({
+    async deptDatasource({page, limit, where, order}) {
+      let data = await getProcessInstanceDeptPage({
         pageNo: page,
         pageSize: limit,
         ...this.params,
@@ -615,19 +814,19 @@ export default {
     },
     /* 刷新表格 */
     deptReload(where) {
-      let find  = this.defaultTemplateList.find(item=>item.id==this.params.formId)||{};
-      let makingJson =  JSON.parse(find.formJson.makingJson) || {}
+      let find = this.defaultTemplateList.find(item => item.id == this.params.formId) || {};
+      let makingJson = JSON.parse(find.formJson.makingJson) || {}
       this.formColumnList = makingJson.list
       this.$refs.deptTable.reload({page: 1, where});
     },
     /*  重置 */
     deptReset() {
       this.params = {...defaultParams};
-      this.params.formId =  this.defaultTemplateList[0]?.id
+      this.params.formId = this.defaultTemplateList[0]?.id
       this.deptReload();
     },
     /* 表格数据源 */
-  async  noticeDatasource({page, limit, where, order}) {
+    async noticeDatasource({page, limit, where, order}) {
       let data = await getProcessInstanceNoticePage({
         pageNo: page,
         pageSize: limit,
@@ -646,15 +845,15 @@ export default {
     },
     /* 刷新表格 */
     noticeReload(where) {
-      let find  = this.defaultTemplateList.find(item=>item.id==this.params.formId)||{};
-      let makingJson =  JSON.parse(find.formJson.makingJson) || {}
+      let find = this.defaultTemplateList.find(item => item.id == this.params.formId) || {};
+      let makingJson = JSON.parse(find.formJson.makingJson) || {}
       this.formColumnList = makingJson.list
       this.$refs.noticeTable.reload({page: 1, where});
     },
     /*  重置 */
     noticeReset() {
       this.params = {...defaultParams};
-      this.params.formId =  this.defaultTemplateList[0]?.id
+      this.params.formId = this.defaultTemplateList[0]?.id
       this.noticeReload();
     },
     /** 处理审批按钮 */
@@ -689,18 +888,19 @@ export default {
 }
 
 .content-box {
-
-  flex: 1;
+  width: 100%;
+  //max-width: 273px;
+  //min-width: 90px;
   margin-right: 10px;
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  //flex-wrap: wrap;
+  //justify-content: space-between;
 
   .category_box {
     border: 1px solid #e1e1e1;
     border-radius: 1px;
-    width: 100%;
+    width: 25%;
     margin-top: 5px;
 
     .category_box_title {
@@ -718,10 +918,11 @@ export default {
     .category_box_content {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
 
       .category_content {
-        width: 90px;
-        height: 90px;
+        width: 60px;
+        height: 60px;
         display: flex;
         flex-direction: column;
         border-right: 1px solid #e1e1e1;
@@ -736,7 +937,7 @@ export default {
           }
 
           span:nth-child(2) {
-            padding-top: 10px;
+            padding-top: 5px;
           }
         }
       }
@@ -752,7 +953,9 @@ export default {
 }
 
 .tab-box {
- width: 80%;
+  width: 100%;
+  //max-width: 1100px;
+  //min-width: 600px;
   margin-top: 6px;
   height: 98%;
 

src/views/bpm/formConfig/addOrEditDialog.vue

@@ -27,7 +27,7 @@
             <fm-making-form
               ref="makingform"
               style="height: 700px"
-
+              generate-json
               preview
 
               @ready="handleFormReady"

src/views/home/index.vue

@@ -128,8 +128,10 @@
                 </template>
                 <div class="scroll-box-content-item">
                   <span class="item-date">{{ o.createTime }}</span>
-                  <span class="item-text" :title="`${ o.templateNickname + ':'+o.templateContent}`">{{
-                      o.templateNickname + ':' + o.templateContent
+                  <span class="item-text" :title="`${ o.templateNickname + ':'+o.templateContent}`">
+                    <span style="font-size: 0.8vw;">{{o.templateNickname +':'}}</span>
+                    {{
+                       o.templateContent
                     }}</span>
                 </div>
               </el-timeline-item>
@@ -187,6 +189,7 @@
     <detail ref="detailRef"></detail>
     <commonDialog ref="commonDialogRef" v-if="commonDialogFlag"
                   :common-dialog-flag.sync="commonDialogFlag" @reload="getUserResourceList"></commonDialog>
+    <handleFormParserTask v-if="formParserDialogFlag"  @reload="reload" :formParserDialogFlag.sync="formParserDialogFlag" ref="formParserDialogRef" ></handleFormParserTask>
   </div>
 </template>
 
@@ -205,10 +208,11 @@ import {statistics} from "@/api/bpm/components/inspectionManage";
 import commonDialog from "@/views/home/common-dialog.vue";
 import xyy from '@/assets/xyy.jpg'
 import draggable from 'vuedraggable';
+import handleFormParserTask from "@/views/bpm/handleTask/formParser/formParserDialog.vue";
 
 export default {
   name: "index",
-  components: {handleTask, detail, vueSeamlessScroll, commonDialog, draggable},
+  components: {handleFormParserTask, handleTask, detail, vueSeamlessScroll, commonDialog, draggable},
   data() {
     return {
       xyy,
@@ -216,6 +220,7 @@ export default {
       date: '',
       week: '',
       commonDialogFlag: false,
+      formParserDialogFlag: false,
       updateTimer: null,
       projectNum: 0,
       taskNum: 0,
@@ -425,7 +430,19 @@ export default {
 
     handleAudit(type, row) {
 
-      if (type == 'audit') {
+      if(Object.keys(row.formJson).length){
+        this.formParserDialogFlag = true
+        this.$nextTick(()=>{
+          this.$refs.formParserDialogRef.open({
+            // id: row.processInstance.id,
+            // taskId: row.id,
+            // taskDefinitionKey: row.taskDefinitionKey,
+            // formJson:row.formJson,
+            // valueJsom:row.formJson,
+            ...row
+          });
+        })
+      }else if (type == 'audit') {
         this.$refs.handleTaskRef.open({
           id: row.processInstance.id,
           businessId: row.businessId,
@@ -712,7 +729,7 @@ export default {
       .item-text {
         width: 80%;
         color: #555555;
-        font-size: 0.8vw;
+        font-size: 0.7vw;
 
         line-height: 16px;
         white-space: nowrap;