diff --git a/flowable-engine-web/src/api/processDefinition.js b/flowable-engine-web/src/api/processDefinition.js
index 9464c66..1ef3313 100644
--- a/flowable-engine-web/src/api/processDefinition.js
+++ b/flowable-engine-web/src/api/processDefinition.js
@@ -35,6 +35,13 @@ export function getHistoryVersion(processDefinitionKey) {
     })
 }
 
+export function deleteHistoryVersion(deploymentId) {
+    return request({
+        url: "/workflow/process/definition/" + deploymentId,
+        method: "delete",
+    })
+}
+
 export function suspendProcessDefinition(processDefinitionId) {
     return request({
         url: "/workflow/process/definition/suspend",
@@ -158,5 +165,5 @@ export function updateFormDetail(param) {
 
 export default {
     getFormGroups, groupItemsSort, createForm, getFormDetail,
-    updateGroup, getGroup, updateForm, updateFormDetail,getHistoryVersion
+    updateGroup, getGroup, updateForm, updateFormDetail,getHistoryVersion,deleteHistoryVersion
 }
diff --git a/flowable-engine-web/src/views/admin/FormsPanel.vue b/flowable-engine-web/src/views/admin/FormsPanel.vue
index 72021a0..3c3f1da 100644
--- a/flowable-engine-web/src/views/admin/FormsPanel.vue
+++ b/flowable-engine-web/src/views/admin/FormsPanel.vue
@@ -40,8 +40,8 @@
             <div class="desp">{{ item.remark }}</div>
             <div>
               <el-tag type="success" v-if="item.state === '1'" style="margin-right: 10px">启用</el-tag>
-              <el-tag type="danger" v-else>停用</el-tag>
-              <el-tag type="success">{{ item.version }}</el-tag>
+              <el-tag type="danger" v-else style="margin-right: 10px">停用</el-tag>
+              <el-tag type="success" v-if="item.version">{{ item.version }}</el-tag>
             </div>
             <div>
               <span>最后更新时间：{{ item.updateTime }}</span>
@@ -50,9 +50,10 @@
               <el-button type="text" icon="el-icon-edit" size="mini" @click="editProcessDefinition(item)">编辑</el-button>
               <el-button type="text" icon="el-icon-edit-outline" size="mini" @click="designProcessDefinition(item)">设计
               </el-button>
-              <el-button type="text" icon="el-icon-document" size="mini" @click="viewHistoricalVersion(item)">历史版本
+              <el-button type="text" icon="el-icon-document" size="mini" @click="viewHistoricalVersion(item)" v-if="item.version=='v1'">历史版本
               </el-button>
-              <el-button type="text" :icon="item.state ? 'el-icon-check':'el-icon-close'" size="mini"
+              <el-button type="text" :icon="item.state!== '1' ? 'el-icon-check':'el-icon-close'" size="mini"
+                         :style="item.state== '1' ?'color: red':''"
                          @click="suspendOrActivateProcessDefinition(item)">
                 {{ item.state !== "1" ? "启用" : "停用" }}
               </el-button>
@@ -87,11 +88,16 @@
               :data="historyVersionList"
               border
               style="width: 100%"
+              v-loading="loading"
           >
             <el-table-column
                 prop="logo"
                 label="logo"
-                width="180">
+                width="180"
+            >
+              <template slot-scope="scope">
+                <i class="logo_icon" :class="scope.row.logo.icon" :style="'background: '+scope.row.logo.background"></i>
+              </template>
             </el-table-column>
             <el-table-column
                 prop="deploymentName"
@@ -103,17 +109,41 @@
                 label="备注说明"
                 width="180">
             </el-table-column>
-            <el-table-column
-                prop="date"
-                label="最后更新时间">
-            </el-table-column>
             <el-table-column
                 prop="state"
                 label="是否启用">
+              <template slot-scope="scope">
+                <el-tag type="success" v-if="scope.row.state =='1'" style="margin-right: 10px">启用</el-tag>
+                <el-tag type="danger" v-if="scope.row.state =='2'">停用</el-tag>
+              </template>
             </el-table-column>
             <el-table-column
                 prop="version"
-                label="版本">
+                label="版本"
+                width="180"
+            >
+              <template slot-scope="scope">
+                <el-tag type="success">{{ scope.row.version }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+                fixed="right"
+                label="操作"
+                width="200">
+              <template slot-scope="scope">
+                <el-button type="text" :icon="scope.row.state!== '1' ? 'el-icon-check':'el-icon-close'" size="mini"
+                           :style="scope.row.state== '1' ?'color: red':''"
+                           @click="suspendOrActivateHistoryView(scope.row)">
+                  {{ scope.row.state == "1" ? "挂起" : "启用" }}
+                </el-button>
+                <el-button type="text" icon="el-icon-delete" size="mini" style="color: red"
+                           @click="deleteHistoryVersion(scope.row)" v-if="scope.row.state == '1'">
+                  删除
+                </el-button>
+                <el-button type="text" icon="el-icon-copy-document" size="mini">
+                  复制
+                </el-button>
+              </template>
             </el-table-column>
           </el-table>
         </el-dialog>
@@ -127,7 +157,9 @@ import draggable from "vuedraggable";
 import {
   activateProcessDefinition,
   getProcessDefinitionList,
-  suspendProcessDefinition,getHistoryVersion
+  suspendProcessDefinition,
+  getHistoryVersion,
+  deleteHistoryVersion
 } from "@/api/processDefinition";
 
 export default {
@@ -135,6 +167,7 @@ export default {
   components: {draggable},
   data() {
     return {
+      loading: true,
       openhistory: false,
       moveSelect: "",
       visible: false,
@@ -241,22 +274,59 @@ export default {
     //查看历史版本
     viewHistoricalVersion(item) {
       getHistoryVersion(item.processDefinitionKey).then(res => {
-        console.log('历史版本数据==',res.data);
-        let groupItems =res.data.rows
-        groupItems.forEach(item => {
+        this.loading = false;
+        console.log("历史版本数据==", res.data);
+        res.data.forEach(item => {
           item.logo = JSON.parse(item.logo);
         });
-        this.historyVersionList.push(groupItems)
-        // groupItem.items = res.data.rows;
-        // groupItem.items.forEach(item => {
-        //   item.logo = JSON.parse(item.logo);
-        // });
-        // this.historyVersionList.push(groupItem);
+        this.historyVersionList = res.data;
       }).catch(err => {
         this.$message.error(err.response.data);
       });
       this.openhistory = true;
     },
+    //启用,挂起历史版本
+    // suspendOrActivateHistoryView(row) {
+    //   let tip = row.state === "1" ? " 您正在停用 [ " + row.deploymentName + " ] 流程，是否继续？" : " 您正在激活 [ " + row.deploymentName + " ] 流程，是否继续?";
+    //   this.$confirm(tip, "提示", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "warning"
+    //   }).then(() => {
+    //
+    //     // let processDefinitionId = row.processDefinitionId;
+    //     if (row.state === "1") {
+    //       //停用
+    //       suspendProcessDefinition( row.processDefinitionId).then(res => {
+    //         console.log(res);
+    //         this.viewHistoricalVersion(row)
+    //         this.$message.success(res.msg);
+    //
+    //       });
+    //     } else {
+    //       //启用
+    //       activateProcessDefinition(row.processDefinitionId).then(res => {
+    //         this.viewHistoricalVersion(row)
+    //         this.$message.success(res.msg);
+    //
+    //       });
+    //     }
+    //   });
+    // },
+
+    //删除工作流历史版本
+    deleteHistoryVersion(row) {
+      this.$confirm("您确定要删除表单 " + row.deploymentName + " 吗，删除后无法恢复，是否继续？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        deleteHistoryVersion(row.deploymentId).then(res => {
+          console.log('删除工作流历史版本',res);
+        })
+      });
+    },
+
     suspendOrActivateProcessDefinition(item) {
       let tip = item.state === "1" ? " 您正在停用 [ " + item.deploymentName + " ] 流程，是否继续？" : " 您正在激活 [ " + item.deploymentName + " ] 流程，是否继续?";
       this.$confirm(tip, "提示", {
@@ -281,6 +351,7 @@ export default {
         }
       });
     },
+
     moveFrom(item) {
       if (item.isStop) {
         this.$confirm("您确定要删除表单 " + item.name + " 吗，删除后无法恢复，是否继续？", "提示", {
@@ -311,6 +382,18 @@ body {
   background: #ffffff !important;
 }
 
+/deep/ .el-dialog {
+  width: 70%;
+}
+
+.logo_icon {
+  border-radius: 10px;
+  padding: 7px;
+  font-size: 20px;
+  color: #ffffff;
+  margin-right: 10px;
+}
+
 .undrag {
   background: #ebecee !important;
 }
@@ -333,6 +416,7 @@ body {
   //height: 100vh;
 }
 
+
 .choose {
   background: #e9ebee;
 }