diff --git a/src/api/plugin/workflow/category.js b/src/api/plugin/workflow/category.js
index 91dddc7..d980996 100644
--- a/src/api/plugin/workflow/category.js
+++ b/src/api/plugin/workflow/category.js
@@ -2,6 +2,13 @@ import request from '@/router/axios';
 
 const prefix = '/api/blade-workflow/design/category'
 
+export const tree = () => {
+  return request({
+    url: `${prefix}/tree`,
+    method: 'get',
+  })
+}
+
 export const treeList = () => {
   return request({
     url: `${prefix}/allTree`,
diff --git a/src/api/plugin/workflow/form.js b/src/api/plugin/workflow/form.js
index 06ccc6e..6235f78 100644
--- a/src/api/plugin/workflow/form.js
+++ b/src/api/plugin/workflow/form.js
@@ -52,4 +52,12 @@ export const listType = (params) => {
     method: 'get',
     params
   })
+}
+
+export const changeCategory = (row) => {
+  return request({
+    url: `${prefix}/changeCategory`,
+    method: 'post',
+    data: row
+  })
 }
\ No newline at end of file
diff --git a/src/api/plugin/workflow/model.js b/src/api/plugin/workflow/model.js
index 79756af..32ef060 100644
--- a/src/api/plugin/workflow/model.js
+++ b/src/api/plugin/workflow/model.js
@@ -46,4 +46,12 @@ export const deploy = (row) => {
     method: 'post',
     data: row
   })
+}
+
+export const changeCategory = (row) => {
+  return request({
+    url: `${prefix}/changeCategory`,
+    method: 'post',
+    data: row
+  })
 }
\ No newline at end of file
diff --git a/src/views/plugin/workflow/design/deployment.vue b/src/views/plugin/workflow/design/deployment.vue
index 2ef70ef..4571a24 100644
--- a/src/views/plugin/workflow/design/deployment.vue
+++ b/src/views/plugin/workflow/design/deployment.vue
@@ -1,48 +1,66 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               v-model="form"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="onLoad(page, query)"
-               @on-load="onLoad">
-      <template slot="status"
-                slot-scope="{row}">
-        <el-tag size="small"
-                :type="row.status == 1? '': 'danger'">{{row.$status}}</el-tag>
-      </template>
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_design_deployment_status && row.status == 1"
-                   type="text"
-                   size="small"
-                   icon="el-icon-refresh-left"
-                   @click="handleChangeStatus(row, 'suspended')">挂起</el-button>
-        <el-button v-if="permission.wf_design_deployment_status && row.status == 2"
-                   type="text"
-                   size="small"
-                   icon="el-icon-refresh-right"
-                   @click="handleChangeStatus(row, 'active')">激活</el-button>
-        <el-button v-if="permission.wf_design_deployment_category"
-                   type="text"
-                   size="small"
-                   icon="el-icon-pie-chart"
-                   @click="handleCategory(row)">更改分类</el-button>
-      </template>
-    </avue-crud>
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   :page.sync="page"
+                   :permission="permissionList"
+                   v-model="form"
+                   @row-del="rowDel"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @refresh-change="onLoad(page, query)"
+                   @on-load="onLoad">
+          <template #menuLeft>
+            <el-button type="success"
+                       size="mini"
+                       icon="el-icon-connection"
+                       v-if="permission.wf_design_deployment_category"
+                       @click="handleChangeCategory"> 更改分类
+            </el-button>
+          </template>
+          <template slot="status"
+                    slot-scope="{row}">
+            <el-tag size="small"
+                    :type="row.status == 1? '': 'danger'">{{row.$status}}</el-tag>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_design_deployment_status && row.status == 1"
+                       type="text"
+                       size="small"
+                       icon="el-icon-refresh-left"
+                       @click="handleChangeStatus(row, 'suspended')">挂起</el-button>
+            <el-button v-if="permission.wf_design_deployment_status && row.status == 2"
+                       type="text"
+                       size="small"
+                       icon="el-icon-refresh-right"
+                       @click="handleChangeStatus(row, 'active')">激活</el-button>
+            <el-button v-if="permission.wf_design_deployment_category"
+                       type="text"
+                       size="small"
+                       icon="el-icon-pie-chart"
+                       @click="handleCategory(row)">更改分类</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
 
     <el-dialog :visible.sync="categoryVisible"
                append-to-body
                title="选择分类">
-      <avue-form v-model="form"
+      <avue-form v-if="categoryVisible"
+                 v-model="form"
                  :option="{column:[{type:'tree',label:'流程分类',span:24,props:{label:'name',value:'id'},prop:'category',dicUrl:'/api/blade-workflow/design/category/tree',required:true,rules:[{required:true,message:'请选择分类'}]}]}"
                  @submit="handleCategorySubmit"></avue-form>
     </el-dialog>
@@ -51,6 +69,8 @@
 
 <script>
 import { getList, changeStatus, changeCategory, remove } from "@/api/plugin/workflow/deployment";
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 export default {
@@ -66,6 +86,8 @@ export default {
       },
       selectionList: [],
       option: {
+        size: 'mini',
+        searchSize: 'mini',
         height: 'auto',
         calcHeight: 30,
         tip: false,
@@ -98,9 +120,8 @@ export default {
             label: "分类",
             prop: "category",
             overHidden: true,
-            search: true,
             type: 'tree',
-            dicUrl: '/api/blade-workflow/design/category/tree',
+            dicData: [],
             props: {
               label: 'name',
               value: 'id'
@@ -133,7 +154,16 @@ export default {
       },
       data: [],
       row: '',
-      categoryVisible: false
+      categoryVisible: false,
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
     };
   },
   computed: {
@@ -149,17 +179,42 @@ export default {
     ids() {
       let ids = [];
       this.selectionList.forEach(ele => {
-        ids.push(ele.id);
+        ids.push(ele.deploymentId);
       });
       return ids.join(",");
     }
   },
+  mounted() {
+    this.getCategoryList()
+  },
   methods: {
+    handleChangeCategory() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.categoryVisible = true
+    },
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'category').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     handleCategorySubmit(form, done) {
-      const { deploymentId, category } = form
+      let { deploymentId, category } = form
+      if (!deploymentId) deploymentId = this.ids
       changeCategory({ deploymentId, category }).then(() => {
         this.$message.success("操作成功")
         done()
+        this.form = {}
         this.categoryVisible = false
         this.onLoad(this.page, this.query)
       })
@@ -241,6 +296,10 @@ export default {
     },
     onLoad(page, params = {}) {
       this.loading = true;
+
+      if (this.categoryId) params['category'] = this.categoryId
+      else delete params['category']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
diff --git a/src/views/plugin/workflow/design/form-history.vue b/src/views/plugin/workflow/design/form-history.vue
index bd23968..50879bc 100644
--- a/src/views/plugin/workflow/design/form-history.vue
+++ b/src/views/plugin/workflow/design/form-history.vue
@@ -1,41 +1,50 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :search.sync="query"
-               v-model="form"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="onLoad(page, query)">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="mini"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.wf_design_form_history_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_design_form_history_view"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-view"
-                   @click="handlePreview(row)">预览</el-button>
-        <el-button v-if="permission.wf_design_form_history_main"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-edit"
-                   @click="handleMain(row)">设为主版本</el-button>
-      </template>
-    </avue-crud>
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   :page.sync="page"
+                   :search.sync="query"
+                   v-model="form"
+                   @row-del="rowDel"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @refresh-change="onLoad(page, query)">
+          <template slot="menuLeft">
+            <el-button type="danger"
+                       size="mini"
+                       icon="el-icon-delete"
+                       plain
+                       v-if="permission.wf_design_form_history_delete"
+                       @click="handleDelete">删 除
+            </el-button>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_design_form_history_view"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-view"
+                       @click="handlePreview(row)">预览</el-button>
+            <el-button v-if="permission.wf_design_form_history_main"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-edit"
+                       @click="handleMain(row)">设为主版本</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
 
     <el-drawer :visible.sync="viewVisible"
                title="表单预览"
@@ -53,6 +62,8 @@
 
 <script>
 import { getList, remove, setMainVersion } from "@/api/plugin/workflow/form-history";
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 export default {
@@ -94,6 +105,21 @@ export default {
             prop: "name",
             search: true
           },
+          {
+            label: '分类',
+            prop: 'categoryId',
+            type: 'tree',
+            props: {
+              label: 'name',
+              value: 'id'
+            },
+            dicData: [],
+            rules: [{
+              required: true,
+              message: "请选择分类",
+              trigger: "change"
+            }],
+          },
           {
             label: '备注',
             prop: 'remark',
@@ -110,7 +136,16 @@ export default {
       data: [],
       viewVisible: false,
       viewForm: {},
-      viewOption: {}
+      viewOption: {},
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
     };
   },
   watch: {
@@ -132,7 +167,23 @@ export default {
       return ids.join(",");
     }
   },
+  mounted() {
+    this.getCategoryList()
+  },
   methods: {
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     handleMain(row) {
       this.$confirm("当前主版本会自动保存到历史，确定要将此版本设为主版本吗？", {
         confirmButtonText: "确定",
@@ -199,7 +250,7 @@ export default {
     searchChange(params, done) {
       this.query = params;
       this.onLoad(this.page, params);
-      done()
+      if (done) done()
     },
     selectionChange(list) {
       this.selectionList = list;
@@ -215,6 +266,10 @@ export default {
     onLoad(page, params = {}) {
       this.loading = true;
       params.formId = this.formId
+
+      if (this.categoryId) params['categoryId'] = this.categoryId
+      else delete params['categoryId']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
diff --git a/src/views/plugin/workflow/design/form.vue b/src/views/plugin/workflow/design/form.vue
index 4d6be3c..8a825f8 100644
--- a/src/views/plugin/workflow/design/form.vue
+++ b/src/views/plugin/workflow/design/form.vue
@@ -1,43 +1,59 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :search.sync="query"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               v-model="form"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="onLoad(page, query)"
-               @on-load="onLoad">
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_design_form_design"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-edit"
-                   @click="handleDesign(row)">设计</el-button>
-        <el-button v-if="permission.wf_design_form_copy"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-document-copy"
-                   @click="handleCopy(row)">拷贝</el-button>
-        <el-button v-if="permission.wf_design_form_history"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-time"
-                   @click="handleHistory(row)">历史</el-button>
-      </template>
-    </avue-crud>
-
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud ref="crud"
+                   :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   :page.sync="page"
+                   :search.sync="query"
+                   :permission="permissionList"
+                   v-model="form"
+                   @row-update="rowUpdate"
+                   @row-save="rowSave"
+                   @row-del="rowDel"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @refresh-change="onLoad(page, query)"
+                   @on-load="onLoad">
+          <template #menuLeft>
+            <el-button type="success"
+                       size="mini"
+                       icon="el-icon-connection"
+                       v-if="permission.wf_design_model_change_category"
+                       @click="handleChangeCategory"> 更改分类
+            </el-button>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_design_form_design"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-edit"
+                       @click="handleDesign(row)">设计</el-button>
+            <el-button v-if="permission.wf_design_form_copy"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-document-copy"
+                       @click="handleCopy(row)">拷贝</el-button>
+            <el-button v-if="permission.wf_design_form_history"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-time"
+                       @click="handleHistory(row)">历史</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
     <el-dialog :visible.sync="formVisible"
                append-to-body
                title="表单设计"
@@ -68,11 +84,21 @@
                  @submit="handleCopySubmit">
       </avue-form>
     </el-dialog>
+
+    <el-dialog :visible.sync="categoryVisible"
+               append-to-body
+               title="选择分类">
+      <avue-form v-model="form"
+                 :option="{column:[{type:'tree',label:'流程分类',span:24,props:{label:'name',value:'id'},prop:'category',dicUrl:'/api/blade-workflow/design/category/tree',required:true,rules:[{required:true,message:'请选择分类'}]}]}"
+                 @submit="handleChangeCategorySubmit"></avue-form>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-import { getList, add, update, remove, listType } from "@/api/plugin/workflow/form";
+import { getList, add, update, remove, listType, changeCategory } from "@/api/plugin/workflow/form";
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 import customFields from '../mixins/custom-fields'
@@ -126,10 +152,19 @@ export default {
             search: true
           },
           {
-            label: '备注',
-            prop: 'remark',
-            type: 'textarea',
-            span: 24
+            label: '分类',
+            prop: 'categoryId',
+            type: 'tree',
+            props: {
+              label: 'name',
+              value: 'id'
+            },
+            dicData: [],
+            rules: [{
+              required: true,
+              message: "请选择分类",
+              trigger: "change"
+            }],
           },
           {
             label: '版本',
@@ -140,6 +175,7 @@ export default {
             label: '状态',
             prop: 'status',
             type: 'select',
+            value: 1,
             dicData: [{
               label: '可用',
               value: 1
@@ -154,6 +190,12 @@ export default {
             }],
             search: true
           },
+          {
+            label: '备注',
+            prop: 'remark',
+            type: 'textarea',
+            span: 24
+          },
         ]
       },
       data: [],
@@ -178,15 +220,25 @@ export default {
           }],
         },
         {
-          label: '备注',
-          prop: 'remark',
-          type: 'textarea',
-          span: 24
+          label: '分类',
+          prop: 'categoryId',
+          type: 'tree',
+          props: {
+            label: 'name',
+            value: 'id'
+          },
+          dicData: [],
+          rules: [{
+            required: true,
+            message: "请选择分类",
+            trigger: "change"
+          }],
         },
         {
           label: '状态',
           prop: 'status',
           type: 'select',
+          value: 1,
           dicData: [{
             label: '可用',
             value: 1
@@ -199,11 +251,28 @@ export default {
             message: "请选择状态",
             trigger: "change"
           }],
+          search: true
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          type: 'textarea',
+          span: 24
         },]
       },
       isNewVersion: false,
       isCopy: false,
-      copyVisible: false
+      copyVisible: false,
+      categoryVisible: false,
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
     };
   },
   computed: {
@@ -226,8 +295,39 @@ export default {
   },
   mounted() {
     this.getDefaultValues()
+    this.getCategoryList()
   },
   methods: {
+    handleChangeCategorySubmit(form, done) {
+      const { category } = form
+      changeCategory({ ids: this.ids, category }).then(() => {
+        this.$message.success('修改成功')
+        done()
+        this.categoryVisible = false
+        this.onLoad(this.page, this.query)
+      })
+    },
+    handleChangeCategory() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.categoryVisible = true
+    },
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
+        this.findObject(this.copyOption.column, 'categoryId').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     handleSubmit() {
       this.$refs.formDesign.getData('string').then(data => {
         if (this.isCopy) {
@@ -388,12 +488,6 @@ export default {
           this.$refs.crud.toggleSelection();
         });
     },
-    beforeOpen(done, type) {
-      if (["add"].includes(type)) {
-        this.$set(this.form, 'status', 1)
-      }
-      done();
-    },
     searchReset() {
       this.query = {};
       this.onLoad(this.page);
@@ -401,7 +495,7 @@ export default {
     searchChange(params, done) {
       this.query = params;
       this.onLoad(this.page, params);
-      done()
+      if (done) done()
     },
     selectionChange(list) {
       this.selectionList = list;
@@ -414,6 +508,10 @@ export default {
     },
     onLoad(page, params = {}) {
       this.loading = true;
+
+      if (this.categoryId) params['categoryId_equal'] = this.categoryId
+      else delete params['categoryId_equal']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
diff --git a/src/views/plugin/workflow/design/model-history.vue b/src/views/plugin/workflow/design/model-history.vue
index f4b25a5..25ee5e4 100644
--- a/src/views/plugin/workflow/design/model-history.vue
+++ b/src/views/plugin/workflow/design/model-history.vue
@@ -1,41 +1,50 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :search.sync="query"
-               v-model="form"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="onLoad(page, query)">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="mini"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.wf_design_form_history_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_design_form_history_view"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-view"
-                   @click="handlePreview(row)">预览</el-button>
-        <el-button v-if="permission.wf_design_form_history_main"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-edit"
-                   @click="handleMain(row)">设为主版本</el-button>
-      </template>
-    </avue-crud>
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   :page.sync="page"
+                   :search.sync="query"
+                   v-model="form"
+                   @row-del="rowDel"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @refresh-change="onLoad(page, query)">
+          <template slot="menuLeft">
+            <el-button type="danger"
+                       size="mini"
+                       icon="el-icon-delete"
+                       plain
+                       v-if="permission.wf_design_form_history_delete"
+                       @click="handleDelete">删 除
+            </el-button>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_design_form_history_view"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-view"
+                       @click="handlePreview(row)">预览</el-button>
+            <el-button v-if="permission.wf_design_form_history_main"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-edit"
+                       @click="handleMain(row)">设为主版本</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
 
     <el-dialog :visible.sync="viewVisible"
                title="模型预览"
@@ -50,6 +59,8 @@
 
 <script>
 import { getList, remove, setMainVersion } from "@/api/plugin/workflow/model-history";
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 export default {
@@ -93,6 +104,21 @@ export default {
             overHidden: true,
             search: true
           },
+          {
+            label: '分类',
+            prop: 'categoryId',
+            type: 'tree',
+            props: {
+              label: 'name',
+              value: 'id'
+            },
+            dicData: [],
+            rules: [{
+              required: true,
+              message: "请选择分类",
+              trigger: "change"
+            }],
+          },
           {
             label: "描述",
             prop: "description",
@@ -107,7 +133,16 @@ export default {
       },
       data: [],
       viewVisible: false,
-      viewOption: {}
+      viewOption: {},
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
     };
   },
   watch: {
@@ -129,7 +164,23 @@ export default {
       return ids.join(",");
     }
   },
+  mounted() {
+    this.getCategoryList()
+  },
   methods: {
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     handleMain(row) {
       this.$confirm("当前主版本会自动保存到历史，确定要将此版本设为主版本吗？", {
         confirmButtonText: "确定",
@@ -196,7 +247,7 @@ export default {
     searchChange(params, done) {
       this.query = params;
       this.onLoad(this.page, params);
-      done()
+      if (done) done()
     },
     selectionChange(list) {
       this.selectionList = list;
@@ -212,6 +263,10 @@ export default {
     onLoad(page, params = {}) {
       this.loading = true;
       params.modelId = this.modelId
+
+      if (this.categoryId) params['categoryId'] = this.categoryId
+      else delete params['categoryId']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
diff --git a/src/views/plugin/workflow/design/model.vue b/src/views/plugin/workflow/design/model.vue
index 509295a..0230a41 100644
--- a/src/views/plugin/workflow/design/model.vue
+++ b/src/views/plugin/workflow/design/model.vue
@@ -1,52 +1,67 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               ref="crud"
-               v-model="form"
-               :page.sync="page"
-               :permission="permissionList"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="onLoad(page, query)"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="primary"
-                   size="mini"
-                   icon="el-icon-plus"
-                   v-if="permission.wf_design_model_add"
-                   @click="handleDesign({})"> 新 增
-        </el-button>
-      </template>
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_design_model_design"
-                   type="text"
-                   icon="el-icon-edit"
-                   size="small"
-                   @click="handleDesign(row)">设计</el-button>
-        <el-button v-if="permission.wf_design_model_deploy"
-                   type="text"
-                   icon="el-icon-s-promotion"
-                   size="small"
-                   @click="handleDeploy(row)">部署</el-button>
-        <el-button v-if="permission.wf_design_model_history"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-time"
-                   @click="handleHistory(row)">历史</el-button>
-        <el-button v-if="permission.wf_design_model_scope"
-                   type="text"
-                   size="mini"
-                   icon="el-icon-time"
-                   @click="handleScope(row)">权限</el-button>
-      </template>
-    </avue-crud>
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   ref="crud"
+                   v-model="form"
+                   :page.sync="page"
+                   :permission="permissionList"
+                   @row-del="rowDel"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @refresh-change="onLoad(page, query)"
+                   @on-load="onLoad">
+          <template slot="menuLeft">
+            <el-button type="primary"
+                       size="mini"
+                       icon="el-icon-plus"
+                       v-if="permission.wf_design_model_add"
+                       @click="handleDesign({})"> 新 增
+            </el-button>
+            <el-button type="success"
+                       size="mini"
+                       icon="el-icon-connection"
+                       v-if="permission.wf_design_model_change_category"
+                       @click="handleChangeCategory"> 更改分类
+            </el-button>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_design_model_design"
+                       type="text"
+                       icon="el-icon-edit"
+                       size="small"
+                       @click="handleDesign(row)">设计</el-button>
+            <el-button v-if="permission.wf_design_model_deploy"
+                       type="text"
+                       icon="el-icon-s-promotion"
+                       size="small"
+                       @click="handleDeploy(row)">部署</el-button>
+            <el-button v-if="permission.wf_design_model_history"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-time"
+                       @click="handleHistory(row)">历史</el-button>
+            <el-button v-if="permission.wf_design_model_scope"
+                       type="text"
+                       size="mini"
+                       icon="el-icon-time"
+                       @click="handleScope(row)">权限</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
 
     <el-dialog :visible.sync="categoryVisible"
                append-to-body
@@ -63,8 +78,10 @@
 </template>
 
 <script>
-import { getList, remove, deploy } from "@/api/plugin/workflow/model";
+import { getList, remove, deploy, changeCategory } from "@/api/plugin/workflow/model";
 import { getList as scopeList, submit as scopeSubmit } from '@/api/plugin/workflow/model-scope'
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 import UserOption from '../process/components/user-option.vue'
@@ -110,6 +127,21 @@ export default {
             overHidden: true,
             search: true
           },
+          {
+            label: '分类',
+            prop: 'categoryId',
+            type: 'tree',
+            props: {
+              label: 'name',
+              value: 'id'
+            },
+            dicData: [],
+            rules: [{
+              required: true,
+              message: "请选择分类",
+              trigger: "change"
+            }],
+          },
           {
             label: "描述",
             prop: "description",
@@ -130,6 +162,15 @@ export default {
         roleUrl: '/api/blade-system/search/role',
         deptUrl: '/api/blade-system/search/dept',
         postUrl: '/api/blade-system/search/post',
+      },
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
       }
     };
   },
@@ -151,7 +192,31 @@ export default {
       return ids.join(",");
     }
   },
+  mounted() {
+    this.getCategoryList()
+  },
   methods: {
+    handleChangeCategory() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.categoryType = 'change'
+      this.categoryVisible = true
+    },
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     handleScopeSubmit(list) {
       list.forEach(l => l.val = l.value)
 
@@ -179,11 +244,21 @@ export default {
     },
     handleDeploySubmit(form, done) {
       const { id, category } = form
-      deploy({ id, category }).then(() => {
-        this.$message.success("部署成功")
-        done()
-        this.categoryVisible = false
-      })
+      if (this.categoryType == 'change') {
+        changeCategory({ ids: this.ids, category }).then(() => {
+          this.$message.success('修改成功')
+          this.categoryType = ''
+          done()
+          this.categoryVisible = false
+          this.onLoad(this.page, this.query)
+        })
+      } else {
+        deploy({ id, category }).then(() => {
+          this.$message.success("部署成功")
+          done()
+          this.categoryVisible = false
+        })
+      }
     },
     handleDeploy(row) {
       this.form.id = row.id
@@ -265,6 +340,10 @@ export default {
     },
     onLoad(page, params = {}) {
       this.loading = true;
+
+      if (this.categoryId) params['categoryId_equal'] = this.categoryId
+      else delete params['categoryId_equal']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
diff --git a/src/views/plugin/workflow/mixins/ex-form.js b/src/views/plugin/workflow/mixins/ex-form.js
index 575110d..eb350ab 100644
--- a/src/views/plugin/workflow/mixins/ex-form.js
+++ b/src/views/plugin/workflow/mixins/ex-form.js
@@ -23,6 +23,7 @@ export default {
       bpmnOption: {}, // 流程图配置信息
       watermarkText: '', //水印文字
       defaultChecked: '', // 人员选择默认选中
+      waiting: true, // 骨架屏加载中
     }
   },
   mounted() {
diff --git a/src/views/plugin/workflow/process/components/detail.vue b/src/views/plugin/workflow/process/components/detail.vue
index 5503ca9..16121c2 100644
--- a/src/views/plugin/workflow/process/components/detail.vue
+++ b/src/views/plugin/workflow/process/components/detail.vue
@@ -1,53 +1,57 @@
 <template>
   <basic-container>
-    <avue-affix id="avue-view"
-                :offset-top="116">
-      <div class="header">
-        <avue-title :value="process.processDefinitionName"></avue-title>
-      </div>
-    </avue-affix>
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="申请信息"
-                   name="first">
-        <el-card shadow="never">
-          <div ref="printBody">
-            <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
-                       v-model="form"
-                       ref="form"
-                       :defaults.sync="defaults"
-                       :option="option"
-                       :upload-preview="handleUploadPreview">
-            </avue-form>
-          </div>
-        </el-card>
-        <el-card shadow="never"
-                 style="margin-top: 20px"
-                 v-if="process.status == 'todo'">
-          <wf-examine-form ref="examineForm"
-                           :comment.sync="comment"
-                           :process="process"
-                           @user-select="handleUserSelect"></wf-examine-form>
-        </el-card>
-      </el-tab-pane>
-      <el-tab-pane label="流转信息"
-                   name="second">
-        <el-card shadow="never"
-                 style="margin-top: 5px;">
-          <wf-flow :flow="flow"></wf-flow>
-        </el-card>
-      </el-tab-pane>
-      <el-tab-pane label="流程跟踪"
-                   name="third">
-        <template v-if="activeName == 'third'">
+    <avue-skeleton :loading="waiting"
+                   avatar
+                   :rows="8">
+      <avue-affix id="avue-view"
+                  :offset-top="116">
+        <div class="header">
+          <avue-title :value="process.processDefinitionName"></avue-title>
+        </div>
+      </avue-affix>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="申请信息"
+                     name="first">
+          <el-card shadow="never">
+            <div ref="printBody">
+              <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
+                         v-model="form"
+                         ref="form"
+                         :defaults.sync="defaults"
+                         :option="option"
+                         :upload-preview="handleUploadPreview">
+              </avue-form>
+            </div>
+          </el-card>
+          <el-card shadow="never"
+                   style="margin-top: 20px"
+                   v-if="process.status == 'todo'">
+            <wf-examine-form ref="examineForm"
+                             :comment.sync="comment"
+                             :process="process"
+                             @user-select="handleUserSelect"></wf-examine-form>
+          </el-card>
+        </el-tab-pane>
+        <el-tab-pane label="流转信息"
+                     name="second">
           <el-card shadow="never"
                    style="margin-top: 5px;">
-            <wf-design ref="bpmn"
-                       style="height: 500px;"
-                       :options="bpmnOption"></wf-design>
+            <wf-flow :flow="flow"></wf-flow>
           </el-card>
-        </template>
-      </el-tab-pane>
-    </el-tabs>
+        </el-tab-pane>
+        <el-tab-pane label="流程跟踪"
+                     name="third">
+          <template v-if="activeName == 'third'">
+            <el-card shadow="never"
+                     style="margin-top: 5px;">
+              <wf-design ref="bpmn"
+                         style="height: 500px;"
+                         :options="bpmnOption"></wf-design>
+            </el-card>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </avue-skeleton>
 
     <!-- 底部按钮 -->
     <template v-if="process.status == 'todo'">
@@ -166,6 +170,7 @@ export default {
 
           this.option = option
           this.form = variables
+          this.waiting = false
         }
       })
     },
diff --git a/src/views/plugin/workflow/process/components/form.vue b/src/views/plugin/workflow/process/components/form.vue
index 08b75df..5a53bcb 100644
--- a/src/views/plugin/workflow/process/components/form.vue
+++ b/src/views/plugin/workflow/process/components/form.vue
@@ -1,45 +1,49 @@
 <template>
   <basic-container>
-    <avue-title style="margin-bottom: 20px; "
-                :styles="{fontSize: '20px'}"
-                :value="process.name"></avue-title>
-    <el-card shadow="never"
-             style="margin-top: 20px">
-      <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
-                 v-model="form"
-                 ref="form"
-                 :option="option"
-                 :defaults.sync="defaults"
-                 @submit="handleSubmit"
-                 @error="loading = false"
-                 :upload-preview="handleUploadPreview">
-      </avue-form>
-    </el-card>
+    <avue-skeleton :loading="waiting"
+                   avatar
+                   :rows="8">
+      <avue-title style="margin-bottom: 20px; "
+                  :styles="{fontSize: '20px'}"
+                  :value="process.name"></avue-title>
+      <el-card shadow="never"
+               style="margin-top: 20px">
+        <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
+                   v-model="form"
+                   ref="form"
+                   :option="option"
+                   :defaults.sync="defaults"
+                   @submit="handleSubmit"
+                   @error="loading = false"
+                   :upload-preview="handleUploadPreview">
+        </avue-form>
+      </el-card>
 
-    <el-card shadow="never"
-             style="margin-top: 20px"
-             v-if="showExamForm">
-      <wf-examine-form ref="examineForm"
-                       :process="process"
-                       @user-select="handleUserSelect"></wf-examine-form>
-    </el-card>
-    <div style="height: 120px;"></div>
-    <el-row class="foot-item avue-affix"
-            :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"
-            id="avue-view">
-      <el-button type="primary"
-                 size="medium"
-                 v-loading="loading"
-                 @click="() => {
+      <el-card shadow="never"
+               style="margin-top: 20px"
+               v-if="showExamForm">
+        <wf-examine-form ref="examineForm"
+                         :process="process"
+                         @user-select="handleUserSelect"></wf-examine-form>
+      </el-card>
+      <div style="height: 120px;"></div>
+      <el-row class="foot-item avue-affix"
+              :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"
+              id="avue-view">
+        <el-button type="primary"
+                   size="medium"
+                   v-loading="loading"
+                   @click="() => {
                    loading = true;
                    $refs.form.submit()
                  }">发起</el-button>
-      <el-button v-if="permission.wf_process_draft"
-                 type="success"
-                 size="medium"
-                 v-loading="loading"
-                 @click="handleDraft(process.id, process.formKey, form)">存为草稿</el-button>
-    </el-row>
+        <el-button v-if="permission.wf_process_draft"
+                   type="success"
+                   size="medium"
+                   v-loading="loading"
+                   @click="handleDraft(process.id, process.formKey, form)">存为草稿</el-button>
+      </el-row>
+    </avue-skeleton>
 
     <!-- 人员选择弹窗 -->
     <wf-user-select ref="user-select"
@@ -122,6 +126,7 @@ export default {
             })
           }
         }
+        this.waiting = false
       })
     },
     handleSubmit(form, done) {
diff --git a/src/views/plugin/workflow/process/start.vue b/src/views/plugin/workflow/process/start.vue
index e946e73..2ed982b 100644
--- a/src/views/plugin/workflow/process/start.vue
+++ b/src/views/plugin/workflow/process/start.vue
@@ -1,38 +1,49 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               v-model="form"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @on-load="onLoad">
-      <template #menuLeft
-                v-if="isDev">
-        <el-tag type="warning"
-                effect="dark"
-                size="medium"><i class="el-icon-warning"></i> 部署的流程不显示？请查看使用文档或到 模型设计 中配置权限。
-        </el-tag>
-      </template>
-      <template slot="menu"
-                slot-scope="{row}">
-        <el-button v-if="permission.wf_process_start_flow"
-                   type="text"
-                   size="small"
-                   icon="el-icon-video-play"
-                   @click="dynamicRoute(row, 'start')">发起</el-button>
-      </template>
-    </avue-crud>
+    <el-container>
+      <el-aside width="200px">
+        <avue-tree :option="treeOption"
+                   :data="treeData"
+                   @node-click="nodeClick"></avue-tree>
+      </el-aside>
+      <el-main style="margin-left: 10px;">
+        <avue-crud :option="option"
+                   :table-loading="loading"
+                   :data="data"
+                   :page.sync="page"
+                   :permission="permissionList"
+                   v-model="form"
+                   @search-change="searchChange"
+                   @search-reset="searchReset"
+                   @selection-change="selectionChange"
+                   @current-change="currentChange"
+                   @size-change="sizeChange"
+                   @on-load="onLoad">
+          <template #menuLeft
+                    v-if="isDev">
+            <el-tag type="warning"
+                    effect="dark"
+                    size="medium"><i class="el-icon-warning"></i> 部署的流程不显示？请查看使用文档或到 模型设计 中配置权限。
+            </el-tag>
+          </template>
+          <template slot="menu"
+                    slot-scope="{row}">
+            <el-button v-if="permission.wf_process_start_flow"
+                       type="text"
+                       size="small"
+                       icon="el-icon-video-play"
+                       @click="dynamicRoute(row, 'start')">发起</el-button>
+          </template>
+        </avue-crud>
+      </el-main>
+    </el-container>
   </basic-container>
 </template>
 
 <script>
 import { processList as getList } from "@/api/plugin/workflow/process";
+import { tree } from '@/api/plugin/workflow/category';
+
 import { mapGetters } from "vuex";
 
 import exForm from '../mixins/ex-form'
@@ -79,13 +90,12 @@ export default {
             label: "流程分类",
             row: true,
             type: 'tree',
-            dicUrl: '/api/blade-workflow/design/category/tree',
+            dicData: [],
             props: {
               label: 'name',
               value: 'id'
             },
             prop: "category",
-            search: true,
           },
           {
             label: '版本',
@@ -107,7 +117,16 @@ export default {
       },
       data: [],
       row: '',
-      categoryVisible: false
+      categoryVisible: false,
+      treeData: [],
+      treeOption: {
+        size: 'mini',
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
     };
   },
   computed: {
@@ -131,7 +150,23 @@ export default {
       return process.env.NODE_ENV === "development"
     }
   },
+  mounted() {
+    this.getCategoryList()
+  },
   methods: {
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.findObject(this.option.column, 'category').dicData = this.deepClone(data)
+
+        this.treeData = data
+        this.treeData.unshift({ id: '', name: '全部' })
+      })
+    },
+    nodeClick({ id }) {
+      this.categoryId = id
+      this.searchChange(this.query)
+    },
     searchReset() {
       this.query = {};
       this.onLoad(this.page);
@@ -152,6 +187,10 @@ export default {
     },
     onLoad(page, params = {}) {
       this.loading = true;
+
+      if (this.categoryId) params['category'] = this.categoryId
+      else delete params['category']
+
       getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
         const data = res.data.data;
         this.page.total = data.total;