diff --git a/hb_client/package.json b/hb_client/package.json
index 99b40fa..7ff3a3c 100644
--- a/hb_client/package.json
+++ b/hb_client/package.json
@@ -25,6 +25,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-json-editor": "^1.4.3",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "xlsx": "^0.15.5"
diff --git a/hb_client/src/api/moritor.js b/hb_client/src/api/moritor.js
index e31aa10..659ca27 100644
--- a/hb_client/src/api/moritor.js
+++ b/hb_client/src/api/moritor.js
@@ -6,7 +6,8 @@ import request from '@/utils/request'
 export function getlogList(query) {
   return request({
     url: '/monitor/log/',
-    method: 'get'
+    method: 'get',
+    params: query
   })
 }
 //查看日志详情
diff --git a/hb_client/src/api/mtm.js b/hb_client/src/api/mtm.js
new file mode 100644
index 0000000..b8ce267
--- /dev/null
+++ b/hb_client/src/api/mtm.js
@@ -0,0 +1,117 @@
+import request from '@/utils/request'
+//物料
+export function getMaterialList(query) {
+  return request({
+    url: '/mtm/material/',
+    method: 'get',
+    params: query
+  })
+}
+export function createMaterial(data) {
+  return request({
+    url: '/mtm/material/',
+    method: 'post',
+    data
+  })
+}
+export function updateMaterial(id, data) {
+  return request({
+    url: `/mtm/material/${id}/`,
+    method: 'put',
+    data
+  })
+}
+export function deleteMaterial(id, data) {
+  return request({
+    url: `/mtm/material/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//工序
+export function getProcessList(query) {
+  return request({
+    url: '/mtm/process/',
+    method: 'get',
+    params: query
+  })
+}
+export function createProcess(data) {
+  return request({
+    url: '/mtm/process/',
+    method: 'post',
+    data
+  })
+}
+export function updateProcess(id, data) {
+  return request({
+    url: `/mtm/process/${id}/`,
+    method: 'put',
+    data
+  })
+}
+export function deleteProcess(id, data) {
+  return request({
+    url: `/mtm/process/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//子工序
+export function getStepList(id) {
+  return request({
+    url: `/mtm/process/${id}/steps/`,
+    method: 'get'
+  })
+}
+
+export function createStep(data) {
+  return request({
+    url: '/mtm/step/',
+    method: 'post',
+    data
+  })
+}
+export function updateStep(id, data) {
+  return request({
+    url: `/mtm/step/${id}/`,
+    method: 'put',
+    data
+  })
+}
+export function deleteStep(id, data) {
+  return request({
+    url: `/mtm/step/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//产品工艺
+export function getProductprocessList(query) {
+  return request({
+    url: '/mtm/productprocess/',
+    method: 'get',
+    params: query
+  })
+}
+export function createProductprocess(data) {
+  return request({
+    url: '/mtm/productprocess/',
+    method: 'post',
+    data
+  })
+}
+export function updateProductprocess(id, data) {
+  return request({
+    url: `/mtm/productprocess/${id}/`,
+    method: 'put',
+    data
+  })
+}
+export function deleteProductprocess(id, data) {
+  return request({
+    url: `/mtm/productprocess/${id}/`,
+    method: 'delete',
+    data
+  })
+}
\ No newline at end of file
diff --git a/hb_client/src/api/workflow.js b/hb_client/src/api/workflow.js
new file mode 100644
index 0000000..0b388a9
--- /dev/null
+++ b/hb_client/src/api/workflow.js
@@ -0,0 +1,123 @@
+import request from '@/utils/request'
+
+export function getWorkflowList(query) {
+  return request({
+    url: '/wf/workflow/',
+    method: 'get',
+    params: query
+  })
+}
+export function createWorkflow(data) {
+  return request({
+    url: '/wf/workflow/',
+    method: 'post',
+    data
+  })
+}
+export function updateWorkflow(id, data) {
+  return request({
+    url: `/wf/workflow/${id}/`,
+    method: 'put',
+    data
+  })
+}
+export function deleteWorkflow(id, data) {
+  return request({
+    url: `/wf/workflow/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//流转状态列表
+export function getWfStateList(id) {
+  return request({
+    url: `/wf/workflow/${id}/states`,
+    method: 'get'
+  })
+}
+//流转状态创建
+export function createWfState(data) {
+  return request({
+    url: '/wf/state/',
+    method: 'post',
+    data
+  })
+}
+//流转状态更新
+export function updateWfState(id, data) {
+  return request({
+    url: `/wf/state/${id}/`,
+    method: 'put',
+    data
+  })
+}
+//流转状态删除
+export function deleteWfState(id, data) {
+  return request({
+    url: `/wf/state/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//自定义字段列表
+export function getWfCustomfieldList(id) {
+  return request({
+    url: `/wf/workflow/${id}/customfields`,
+    method: 'get'
+  })
+}
+//自定义字段创建
+export function createWfCustomfield(data) {
+  return request({
+    url: '/wf/customfield/',
+    method: 'post',
+    data
+  })
+}
+//自定义字段更新
+export function updateWfCustomfield(id, data) {
+  return request({
+    url: `/wf/customfield/${id}/`,
+    method: 'put',
+    data
+  })
+}
+//自定义字段删除
+export function deleteWfCustomfield(id, data) {
+  return request({
+    url: `/wf/customfield/${id}/`,
+    method: 'delete',
+    data
+  })
+}
+//流转列表
+export function getWfTransitionList(id) {
+  return request({
+    url: `/wf/workflow/${id}/transitions/`,
+    method: 'get'
+  })
+}
+//流转创建
+export function createWfTransition(data) {
+  return request({
+    url: '/wf/transition/',
+    method: 'post',
+    data
+  })
+}
+//流转更新
+export function updateWfTransition(id, data) {
+  return request({
+    url: `/wf/transition/${id}/`,
+    method: 'put',
+    data
+  })
+}
+//流转删除
+export function deleteWfTransition(id, data) {
+  return request({
+    url: `/wf/transition/${id}/`,
+    method: 'delete',
+    data
+  })
+}
\ No newline at end of file
diff --git a/hb_client/src/router/index.js b/hb_client/src/router/index.js
index 9f7674f..0ed6d97 100644
--- a/hb_client/src/router/index.js
+++ b/hb_client/src/router/index.js
@@ -96,6 +96,42 @@ export const asyncRoutes = [
     ]
   },
   
+  
+    {
+      path: '/mtm',
+      component: Layout,
+      redirect: '/mtm/material/',
+      name: 'mtm',
+      meta: { title: '制造技术管理', icon: 'example', perms: ['procurement_set'] },
+      children: [
+        {
+          path: 'material',
+          name: 'material',
+          component: () => import('@/views/mtm/material'),
+          meta: { title: '物料', icon: 'example', perms: ['vendor_manage'] }
+        },
+        {
+          path: 'process',
+          name: 'process',
+          component: () => import('@/views/mtm/process'),
+          meta: { title: '工序', icon: 'example', perms: ['vendor_manage'] }
+        },
+        {
+          path: 'step/:id',
+          name: 'Step',
+          component: () => import('@/views/mtm/step.vue'),
+          meta: { title: '子工序', perms: ['vendor_manage'] },
+          hidden: true
+        },
+        {
+          path: '/mtm/productprocess/',
+          name: 'productprocess',
+          component: () => import('@/views/mtm/productprocess'),
+          meta: { title: '产品工艺', icon: 'example', perms: ['vendor_manage'] }
+        },
+      ]
+    },
+  
     {
       path: '/procurement',
       component: Layout,
@@ -111,6 +147,29 @@ export const asyncRoutes = [
         }
       ]
     },
+    {
+      path: '/workflow',
+      component: Layout,
+      redirect: '/workflow/index',
+      name: 'workflow',
+      meta: { title: '工作流管理', icon: 'example', perms: ['workflow_set'] },
+      children: [
+        {
+          path: 'index',
+          name: 'index',
+          component: () => import('@/views/workflow/index'),
+          meta: { title: '工作流配置', icon: 'example', perms: ['workflow_manage'] }
+        },
+        
+      {
+        path: 'configuration',
+        name: 'configuration',
+        component: () => import('@/views/workflow/configuration'),
+        meta: { title: '人员信息详情', icon: 'example', perms: ['configuration_manage'] },
+        hidden: true
+      },
+      ]
+    },
   {
     path: '/system',
     component: Layout,
diff --git a/hb_client/src/views/equipment/index.vue b/hb_client/src/views/equipment/index.vue
index 495d2b2..01f2e74 100644
--- a/hb_client/src/views/equipment/index.vue
+++ b/hb_client/src/views/equipment/index.vue
@@ -218,13 +218,13 @@ export default {
         count: 0,
       },
       options: [{
-          value: '0',
+          value: 0,
           label: '运转正常'
         }, {
-          value: '1',
+          value: 1,
           label: '停用'
         }, {
-          value: '2',
+          value: 2,
           label: '报废'
         }],
       listQuery: {
diff --git a/hb_client/src/views/monitor/service.vue b/hb_client/src/views/monitor/service.vue
index 3089d85..e81b97a 100644
--- a/hb_client/src/views/monitor/service.vue
+++ b/hb_client/src/views/monitor/service.vue
@@ -137,6 +137,29 @@
   <div slot="header" class="clearfix">
     <span>日志列表</span>
      </div>
+ <div>
+      <el-input
+              v-model="listQuery.name"
+              placeholder="日志名称"
+              style="width: 300px"
+              class="filter-item"
+              @keyup.enter.native="handleFilter"
+            />
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter"
+              >搜索</el-button
+            >
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-refresh-left"
+              @click="resetFilter"
+              >重置</el-button
+            >
+    </div>
     <el-table
       :data="tableData"
       style="width: 100%;height:400px">
@@ -163,11 +186,13 @@
  
   :visible.sync="dialogVisible"
   width="80%"
-  :before-close="handleClose">
- <el-descriptions title="日志信息">
-   <el-descriptions-item> {{logdec}}</el-descriptions-item>
+  height:300px
+  >
+
+   
+   <div v-html="logdec"> </div>
   
-</el-descriptions>
+
 </el-dialog>
 </el-card>
 </div>
@@ -190,6 +215,8 @@ export default {
       memoryData:[],
       dialogVisible: false,
       logdec:"",
+      text:"",
+      listQuery: {},
     };
   },
   computed: {},
@@ -199,14 +226,23 @@ export default {
     this.getServerList();
   },
   methods: {
+    
      getlogList() {
-      getlogList().then((response) => {
+      getlogList(this.listQuery).then((response) => {
         if(response.data) {
+        
           this.tableData=response.data;
         }
         
       });
     },
+   handleFilter() {
+      this.getlogList();
+    },
+    resetFilter() {
+     
+      this.getlogList();
+    },
      getServerList() {
       getServerList().then((response) => {
         if (response.data) {
@@ -221,7 +257,8 @@ export default {
      this.dialogVisible = true;
      getLog(row.name).then((response) => {
         if (response.data) {
-         this.logdec=response.data
+         this.logdec=response.data.replace(/\n/gm,"<br/>")
+        
         }
         
       });
diff --git a/hb_client/src/views/mtm/material.vue b/hb_client/src/views/mtm/material.vue
new file mode 100644
index 0000000..562a81e
--- /dev/null
+++ b/hb_client/src/views/mtm/material.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="app-container">
+    <el-card>
+        <div>
+      <el-input
+              v-model="listQuery.search"
+              placeholder="原料名称/原料编号"
+              style="width: 300px"
+              class="filter-item"
+              @keyup.enter.native="handleFilter"
+            />
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter"
+              >搜索</el-button
+            >
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-refresh-left"
+              @click="resetFilter"
+              >重置</el-button
+            >
+    </div>
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增物料</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="materialList.results"
+        border
+        fit
+        stripe
+        highlight-current-row
+        v-el-height-adaptive-table="{bottomOffset: 50}"
+      >
+        <el-table-column type="index" width="50" />
+         <el-table-column label="物料编号">
+          <template slot-scope="scope">{{ scope.row.number }}</template>
+        </el-table-column>
+
+       <el-table-column label="物料类别">
+          <template slot-scope="scope"> {{ options_[scope.row.type] }}</template>
+        </el-table-column>
+      
+        <el-table-column label="物料名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+       
+        <el-table-column label="物料编号">
+          <template slot-scope="scope">{{ scope.row.number }}</template>
+        </el-table-column>
+
+     
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+           
+            <el-link
+              v-if="checkPermission(['material_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['material_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="materialList.count > 0"
+        :total="materialList.count"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.page_size"
+        @pagination="getList"
+      />
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑物料' : '新增物料'"
+    >
+      <el-form
+        ref="Form"
+        :model="material"
+        label-width="80px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="物料名称" prop="name">
+          <el-input v-model="material.name" placeholder="物料名称" />
+        </el-form-item>
+        <el-form-item label="物料编号" prop="number">
+          <el-input v-model="material.number" placeholder="物料编号" />
+        </el-form-item>
+      
+      
+          <el-form-item label="物料类别" prop="type">
+         
+           <el-select  style="width: 100%" v-model="material.type" placeholder="请选择">
+             <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort_str">
+          <el-input v-model="material.sort_str" placeholder="排序" />
+        </el-form-item>
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getMaterialList, createMaterial,updateMaterial,deleteMaterial } from "@/api/mtm";
+import checkPermission from "@/utils/permission";
+
+
+import { genTree } from "@/utils";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultmaterial = {
+  name: "",
+  number: "",
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      material: defaultmaterial,
+      materialList: {
+        count: 0,
+      },
+       options_:{
+        
+        "1":'成品',
+        "2":'半成品',
+        "3":'原料',
+       
+      },
+      options: [{
+          value: 1,
+          label: '产品'
+        }, {
+          value: 2,
+          label: '半成品'
+        }, {
+          value: 3,
+          label: '原料'
+        }],
+      listQuery: {
+        page: 1,
+        page_size: 20,
+      },
+     
+      listLoading: true,
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        number: [{ required: true, message: "请输入", trigger: "blur" }],
+       
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList();
+   
+  },
+  methods: {
+    checkPermission,
+    //物料列表
+    getList() {
+      this.listLoading = true;
+      getMaterialList(this.listQuery).then((response) => {
+        if (response.data) {
+          this.materialList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    
+
+    
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
+    handleCreate() {
+      this.material = Object.assign({}, defaultmaterial);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.material = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteMaterial(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+            updateMaterial(this.material.id, this.material).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            createMaterial(this.material).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/hb_client/src/views/mtm/process.vue b/hb_client/src/views/mtm/process.vue
new file mode 100644
index 0000000..61b6464
--- /dev/null
+++ b/hb_client/src/views/mtm/process.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <el-card>
+        
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增工序</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="processList.results"
+        border
+        fit
+        stripe
+        highlight-current-row
+        max-height="600"
+         height="100"
+        v-el-height-adaptive-table="{bottomOffset: 50}"
+      >
+        <el-table-column type="index" width="50" />
+          <el-table-column label="工序编号">
+          <template slot-scope="scope">{{ scope.row.number }}</template>
+        </el-table-column>
+         <el-table-column label="工序名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+      <el-table-column align="center" label="指导书">
+          <template slot-scope="scope" v-if="scope.row.instruction_">
+            <el-link :href="scope.row.instruction_.path" >{{scope.row.instruction_.name}}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+           
+            
+             <el-link
+              type="primary"
+              @click="handleAdd(scope)"
+              >添加子工序</el-link
+            >
+            <el-link
+              v-if="checkPermission(['process_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['process_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="processList.count > 0"
+        :total="processList.count"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.page_size"
+        @pagination="getList"
+      />
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑工序' : '新增工序'"
+    >
+      <el-form
+        ref="Form"
+        :model="process"
+        label-width="100px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="工序名称" prop="name">
+          <el-input v-model="process.name" placeholder="工序名称" />
+        </el-form-item>
+        <el-form-item label="工序编号" prop="number">
+          <el-input v-model="process.number" placeholder="工序编号" />
+        </el-form-item>
+      
+       <el-form-item label="指导书内容" prop="instruction_content">
+          <el-input  type="textarea"  :rows="3" v-model="process.instruction_content" placeholder="指导书内容" />
+        </el-form-item>
+         <el-form-item label="指导书" prop="template" v-if="dialogVisible">
+          <el-upload
+          ref="upload"
+          :action="upUrl"
+          :on-preview="handlePreview"
+          :on-success="handleUpSuccess"
+          :on-remove="handleRemove"
+          :headers="upHeaders"
+          :file-list="fileList"
+          :limit="1"
+          accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
+        >
+          <el-button size="small" type="primary">上传文件</el-button>
+        </el-upload>
+        </el-form-item>
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getProcessList, createProcess,updateProcess,deleteProcess } from "@/api/mtm";
+import checkPermission from "@/utils/permission";
+
+import { upUrl, upHeaders } from "@/api/file";
+
+import { genTree } from "@/utils";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultprocess = {
+  name: "",
+  number: "",
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      process: defaultprocess,
+     processList: {
+        count: 0,
+      },
+       upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      fileList:[],
+      listQuery: {
+        page: 1,
+        page_size: 20,
+      },
+     
+      listLoading: true,
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        number: [{ required: true, message: "请输入", trigger: "blur" }],
+       
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList();
+   
+  },
+  methods: {
+    checkPermission,
+    //物料列表
+    getList() {
+      this.listLoading = true;
+      getProcessList(this.listQuery).then((response) => {
+        if (response.data) {
+          this.processList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    
+     handlePreview(file) {
+      if ("url" in file) {
+        window.open(file.url);
+      } else {
+        window.open(file.response.data.path);
+      }
+    },
+    handleUpSuccess(res, file, filelist) {
+      this.process.instruction = res.data.id;
+    },
+    handleRemove(file, filelist){
+      this.process.instruction = null;
+    },
+   //添加子工序
+   handleAdd(scope)
+   {
+     this.$router.push({name: "Step", params: { id: scope.row.id }, })
+   },
+    
+
+    
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
+    handleCreate() {
+      this.process = Object.assign({}, defaultprocess);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+       this.fileList=[];
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.process = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+       if (this.process.instruction) {
+        this.fileList = [
+          {
+            name:this.process.instruction_.name,
+            url: this.process.instruction_.path,
+          },
+        ];
+      }
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteProcess(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+           
+          if (isEdit) {
+            updateProcess(this.process.id, this.process).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            createProcess(this.process).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/hb_client/src/views/mtm/productprocess.vue b/hb_client/src/views/mtm/productprocess.vue
new file mode 100644
index 0000000..8709ab8
--- /dev/null
+++ b/hb_client/src/views/mtm/productprocess.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="app-container">
+<el-row :gutter="24">
+  <el-col :span="6" >
+ <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="materialList.results"
+        border
+        fit
+        stripe
+        highlight-current-row
+        height="100"
+        v-el-height-adaptive-table="{bottomOffset: 50}"
+     @current-change="handleCurrentChange">
+   
+        <el-table-column type="index" width="50" />
+         <el-table-column label="产品信息">
+          <template slot-scope="scope">{{ scope.row.number }}-{{ scope.row.name }}</template>
+       
+        
+        </el-table-column>
+
+     
+      </el-table>
+      <el-dialog
+      :visible.sync="dialogVisible"
+     
+    >
+      <el-form
+        ref="Form"
+        :model="productprocess"
+        label-width="80px"
+        label-position="right"
+         :title="dialogType === 'edit' ? '编辑工序' : '新增工序'"
+      >
+        
+      
+          <el-form-item label="工序" prop="process">
+         
+           <el-select  style="width: 100%" v-model="productprocess.process" placeholder="请选择">
+             <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+       <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="productprocess.sort"
+            :min="-2147483648"
+            :max="2147483647"
+          ></el-input-number>
+        </el-form-item>
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+    </el-card>
+
+  </el-col>
+  <el-col :span="18" >
+
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增工序</el-button
+      >
+ <el-card class="box-card">
+  <div slot="header" class="clearfix">
+    <span>产品信息</span>
+   
+  </div>
+  <div class="text item">
+   
+  </div>
+</el-card>
+  </el-col>
+</el-row>
+ </div>
+</template>
+<script>
+import { getMaterialList } from "@/api/mtm";
+import { getProcessList } from "@/api/mtm";
+import { getProductprocessList, createProductprocess,updateProductprocess,deleteProductprocess } from "@/api/mtm";
+import checkPermission from "@/utils/permission";
+import { genTree } from "@/utils";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultprocess = {
+ 
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      productprocess: defaultprocess,
+      materialList: {
+        count: 0,
+      },
+      listQuery: {
+        page: 1,
+        page_size: 20,
+      },
+      productprocessList:[],
+      dialogVisible:false,
+      listLoading: true,
+     options:[],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList();
+    this.getpList();
+   
+   
+  },
+  methods: {
+    checkPermission,
+    //物料列表
+    getList() {
+      this.listLoading = true;
+      this.listQuery.type=1;
+      getMaterialList(this.listQuery).then((response) => {
+        if (response.data) {
+          this.materialList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    
+    getpList() {
+      getProcessList({pageoff:true}).then((response) => {
+        if (response.data) {
+        
+          this.options = genTree(response.data.results);
+        }
+      });
+    },
+      getppList() {
+      getProductprocessList({product:this.product}).then((response) => {
+        if (response.data) {
+          this.productprocessList = response.data;
+        }
+      });
+    },
+    handleCurrentChange(row){
+     this.product=row.id;
+     this.getppList();
+    },
+     
+     handleCreate() {
+      this.productprocess = Object.assign({}, defaultprocess);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.process = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+      async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+           
+          if (isEdit) {
+            updateProcess(this.process.id, this.process).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+             this.productprocess.product=this.product;
+            createProductprocess(this.productprocess).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+     
+  },
+};
+</script>
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
\ No newline at end of file
diff --git a/hb_client/src/views/mtm/step.vue b/hb_client/src/views/mtm/step.vue
new file mode 100644
index 0000000..6240c91
--- /dev/null
+++ b/hb_client/src/views/mtm/step.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="app-container">
+    <el-card>
+        
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增工序</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="stepList"
+        border
+        fit
+        stripe
+        highlight-current-row
+        max-height="600"
+      >
+        <el-table-column type="index" width="50" />
+          <el-table-column label="工序步骤名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+         <el-table-column label="步骤编号">
+          <template slot-scope="scope">{{ scope.row.number }}</template>
+        </el-table-column>
+    
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+           
+            
+             <el-link
+              type="primary"
+              @click="handleAdd(scope)"
+              >操作</el-link
+            >
+            <el-link
+              v-if="checkPermission(['step_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['step_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑工序' : '新增工序'"
+    >
+      <el-form
+        ref="Form"
+        :model="step"
+        label-width="100px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="工序名称" prop="name">
+          <el-input v-model="step.name" placeholder="工序名称" />
+        </el-form-item>
+        <el-form-item label="步骤编号" prop="number">
+          <el-input v-model="step.number" placeholder="工序编号" />
+        </el-form-item>
+      
+       <el-form-item label="指导书内容" prop="instruction_content">
+          <el-input  type="textarea"  :rows="3" v-model="step.instruction_content" placeholder="指导书内容" />
+        </el-form-item>
+        
+           <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="step.sort"
+            :min="-2147483648"
+            :max="2147483647"
+          ></el-input-number>
+        </el-form-item>
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getStepList, createStep,updateStep,deleteStep } from "@/api/mtm";
+import checkPermission from "@/utils/permission";
+
+import { upUrl, upHeaders } from "@/api/file";
+
+import { genTree } from "@/utils";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultstep = {
+  name: "",
+  number: "",
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      step: defaultstep,
+     stepList:[],
+       upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      fileList:[],
+      listLoading: true,
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        number: [{ required: true, message: "请输入", trigger: "blur" }],
+       
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+     this.step.process = this.$route.params.id;
+    this.getList();
+   
+  },
+  methods: {
+    checkPermission,
+    //子工序列表
+    getList() {
+      this.listLoading = true;
+      getStepList(this.step.process).then((response) => {
+        if (response.data) {
+          this.stepList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    
+     handlePreview(file) {
+      if ("url" in file) {
+        window.open(file.url);
+      } else {
+        window.open(file.response.data.path);
+      }
+    },
+    handleUpSuccess(res, file, filelist) {
+      this.step.instruction = res.data.id;
+    },
+    handleRemove(file, filelist){
+      this.step.instruction = null;
+    },
+   //添加子工序
+   handleAdd(scope)
+   {
+     this.$router.push({name: "Step", params: { id: scope.row.id }, })
+   },
+    
+
+    
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
+    handleCreate() {
+      this.step = Object.assign({}, defaultstep);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.step = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+     
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteStep(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+           
+          if (isEdit) {
+            updateStep(this.step.id, this.step).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            console.log(this.step)
+            createStep(this.step).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/hb_client/src/views/workflow/configuration.vue b/hb_client/src/views/workflow/configuration.vue
new file mode 100644
index 0000000..1e55695
--- /dev/null
+++ b/hb_client/src/views/workflow/configuration.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="自定义字段" name="first">
+      
+       <CTF :ID="ID"></CTF>
+    </el-tab-pane>
+    <el-tab-pane label="状态" name="second">
+      
+        <State :ID="ID"></State>
+        
+    </el-tab-pane>
+    <el-tab-pane label="流转" name="third">
+       <TST :ID="ID"></TST>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import State from "@/views/workflow/state"
+import CTF from "@/views/workflow/customfield"
+import TST from "@/views/workflow/transitions"
+  export default {
+     components: {State,CTF,TST},
+    data() {
+      return {
+        activeName: 'first',
+        ID:null
+      };
+    },
+    created() {
+   
+     this.ID = this.$route.params.workflow;
+     
+  },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/hb_client/src/views/workflow/customfield.vue b/hb_client/src/views/workflow/customfield.vue
new file mode 100644
index 0000000..78b579a
--- /dev/null
+++ b/hb_client/src/views/workflow/customfield.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="app-container">
+    <el-card>
+     
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+      
+        :data="customfieldList"
+        style="width: 100%"
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column label="字段标识">
+          <template slot-scope="scope">{{ scope.row.field_key }}</template>
+        </el-table-column>
+        <el-table-column label="字段名称">
+          <template slot-scope="scope">{{ scope.row.field_name }}</template>
+        </el-table-column>
+         <el-table-column label="字段类型">
+          <template slot-scope="scope">{{ scope.row.field_type }}</template>
+        </el-table-column>
+         <el-table-column label="顺序ID">
+          <template slot-scope="scope">{{ scope.row.sort }}</template>
+        </el-table-column>
+         <el-table-column label="字段描述">
+          <template slot-scope="scope">{{ scope.row.description }}</template>
+        </el-table-column>
+         <el-table-column label="创建时间">
+          <template slot-scope="scope">{{ scope.row.create_time }}</template>
+        </el-table-column>
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+           
+            <el-link
+              v-if="checkPermission(['customfield_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['customfield_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+     
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑自定义字段' : '新增自定义字段'"
+    >
+      <el-form
+        ref="Form"
+        :model="customfield"
+        label-width="80px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="字段标识" prop="field_key">
+          <el-input v-model="customfield.field_key" placeholder="字段标识" />
+        </el-form-item>
+       
+         
+        <el-form-item label="字段名称" prop="field_name">
+           <el-input v-model="customfield.field_name" placeholder="字段名称" />
+        
+        </el-form-item>
+
+          <el-form-item label="字段描述" prop="description">
+              <el-input v-model="customfield.description" placeholder="字段描述" />
+        
+        </el-form-item>
+
+          <el-form-item label="占位符" prop="placeholder">
+           <el-input v-model="customfield.placeholder" placeholder="占位符" />
+        </el-form-item>
+
+          <el-form-item label="字段类型" prop="field_type">
+              <el-select  style="width: 100%" v-model="customfield.field_type" placeholder="请选择">
+             <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+          
+        </el-form-item>
+
+           <el-form-item label="顺序ID" prop="sort">
+              <el-input v-model="customfield.sort" type="number"  placeholder="顺序" />
+         
+        </el-form-item>
+
+          <el-form-item label="默认值" prop="default_value">
+              <el-input v-model="customfield.default_value" placeholder="默认值" />
+         
+        </el-form-item>
+
+        
+ <el-form-item
+          label="布尔显示定义"
+          prop="boolean_field_display"
+          label-width="120px"
+        >
+         <vue-json-editor
+      v-model="customfield.boolean_field_display"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+      @json-change="onJsonChange"
+      @json-save="onJsonSave"
+      @has-error="onError"
+    />
+       </el-form-item>
+    <el-form-item
+          label="选项"
+          prop="field_choice"
+          label-width="120px"
+        >
+         <vue-json-editor
+      v-model="customfield.field_choice"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+      @json-change="onJsonChange1"
+      @json-save="onJsonSave1"
+      @has-error="onError1"
+    />
+    
+     </el-form-item>
+       <el-form-item
+          label="标签"
+          prop="label"
+          label-width="120px"
+        >
+         <vue-json-editor
+      v-model="customfield.label"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+      @json-change="onJsonChange2"
+      @json-save="onJsonSave2"
+      @has-error="onError2"
+    />
+    
+     </el-form-item>
+
+         <el-form-item label="模板" prop="field_template">
+          <el-input v-model="customfield.field_template" placeholder="你有一个待办工单:{title}" />
+        </el-form-item>
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getWfCustomfieldList, createWfCustomfield,updateWfCustomfield,deleteWfCustomfield } from "@/api/workflow";
+import checkPermission from "@/utils/permission";
+ import vueJsonEditor from 'vue-json-editor'
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultcustomfield = {
+  field_key: "",
+  field_name: "",
+};
+export default {
+  components: { Pagination,vueJsonEditor  },
+  name: "CTF",
+  props: ["ID"],
+  data() {
+    return {
+      customfield: defaultcustomfield,
+      view_permission_check:false,
+       hasJsonFlag:true,  // json是否验证通过
+         hasJsonFlag1:true,  // json是否验证通过
+          hasJsonFlag2:true,  // json是否验证通过
+      customfieldList: {
+         count:0
+      },
+      options: [{
+          value: 'string',
+          label: '字符串'
+        }, {
+          value: 'int',
+          label: '整形'
+        }, {
+          value: 'float',
+          label: '浮点型'
+        }, {
+          value: 'bool',
+          label: '布尔'
+        }, {
+          value: 'date',
+          label: '日期'
+        }, {
+          value: 'datetime',
+          label: '日期时间'
+        }, {
+          value: 'radio',
+          label: '单选框'
+        }, {
+          value: 'checkbox',
+          label: '多选框'
+        }, {
+          value: 'select',
+          label: '下拉列表'
+        }, {
+          value: 'textarea',
+          label: '文本域'
+        }, {
+          value: 'selectuser',
+          label: '用户名'
+        }, {
+          value: 'selectusers',
+          label: '多选的用户名'
+        }, {
+          value: 'file',
+          label: '附件'
+        }],
+        
+     
+      boolean_field_display:[],
+      field_choice:[],
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        description: [{ required: true, message: "请输入", trigger: "blur" }]
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList();
+  },
+  methods: {
+    checkPermission,
+   
+    getList() {
+     
+      getWfCustomfieldList(this.ID).then((response) => {
+        if (response.data) {
+          this.customfieldList = response.data;
+        }
+       
+      });
+    },
+    
+    
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
+    handleCreate() {
+      this.customfield = Object.assign({}, defaultcustomfield);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.customfield = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handlecfgt(scope)
+    {
+      this.$router.push({name:"configuration",params:{customfield:scope.row.id}})
+    }
+    ,
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteWorkflow(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+             this.checkJson();
+             this.checkJson1();
+              this.checkJson2();
+            updateWfCustomfield(this.customfield.id, this.customfield).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            this.checkJson();
+             this.checkJson1();
+            this.checkJson2();
+              this.customfield.workflow=this.ID;
+              
+            createWfCustomfield(this.customfield).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+ handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteWfCustomfield(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+
+   onJsonChange (value) {
+        // console.log('更改value:', value);
+        // 实时保存
+        this.onJsonSave(value)
+      },
+      onJsonSave (value) {
+        // console.log('保存value:', value);
+        this.boolean_field_display = value
+        this.hasJsonFlag = true
+      },
+      onError(value) {
+        // console.log("json错误了value:", value);
+        this.hasJsonFlag = false
+      },
+      
+      // 检查json
+      checkJson(){
+        if (this.hasJsonFlag == false){
+          alert("布尔显示定义json验证失败")
+          return false
+        } else {
+          alert("布尔显示定义json验证成功")
+          return true
+        }
+      },
+       onJsonChange1 (value) {
+        // console.log('更改value:', value);
+        // 实时保存
+        this.onJsonSave1(value)
+      },
+      onJsonSave1 (value) {
+        this.field_choice = value
+        this.hasJsonFlag1 = true
+      },
+      onError1(value) {
+        this.hasJsonFlag1 = false
+      },
+       // 检查json
+      checkJson1(){
+        if (this.hasJsonFlag1 == false){
+          alert("选项json验证失败")
+          return false
+        } else {
+          alert("选项json1验证成功")
+          return true
+        }
+      },
+        onJsonChange2 (value) {
+        // console.log('更改value:', value);
+        // 实时保存
+        this.onJsonSave2(value)
+      },
+      onJsonSave2 (value) {
+        this.field_choice = value
+        this.hasJsonFlag2 = true
+      },
+      onError2(value) {
+        this.hasJsonFlag2 = false
+      },
+       // 检查json
+      checkJson2(){
+        if (this.hasJsonFlag2 == false){
+          alert("标签json验证失败")
+          return false
+        } else {
+          alert("标签json1验证成功")
+          return true
+        }
+      },
+
+
+  },
+};
+</script>
diff --git a/hb_client/src/views/workflow/index.vue b/hb_client/src/views/workflow/index.vue
new file mode 100644
index 0000000..3fcdf9a
--- /dev/null
+++ b/hb_client/src/views/workflow/index.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div>
+      <el-input
+              v-model="listQuery.search"
+              placeholder="名称"
+              style="width: 300px"
+              class="filter-item"
+              @keyup.enter.native="handleFilter"
+            />
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter"
+              >搜索</el-button
+            >
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-refresh-left"
+              @click="resetFilter"
+              >重置</el-button
+            >
+    </div>
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="workflowList.results"
+        border
+        fit
+        stripe
+        highlight-current-row
+        max-height="600"
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column label="名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+        <el-table-column label="描述">
+          <template slot-scope="scope">{{ scope.row.description }}</template>
+        </el-table-column>
+         <el-table-column label="工单查看权限校验">
+           <template slot-scope="scope">
+              {{ !!(scope.row.view_permission_check)?'是':'否' }}
+          </template>
+        </el-table-column>
+         <el-table-column  width="180" label="创建时间">
+          <template slot-scope="scope">{{ scope.row.create_time }}</template>
+        </el-table-column>
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+            <el-link
+              v-if="checkPermission(['workflow_update'])"
+              @click="handlecfgt(scope)"
+              >配置</el-link
+            >
+            <el-link
+              v-if="checkPermission(['workflow_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['workflow_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="workflowList.count > 0"
+        :total="workflowList.count"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.page_size"
+        @pagination="getList"
+      />
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑设备' : '新增设备'"
+    >
+      <el-form
+        ref="Form"
+        :model="workflow"
+        label-width="80px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="workflow.name" placeholder="名称" />
+        </el-form-item>
+       
+         
+        <el-form-item label="描述" prop="description">
+          <el-input
+            type="textarea"
+            :rows="4"
+            v-model="workflow.description"
+            placeholder="描述"
+          />
+        </el-form-item>
+         <el-form-item
+          label="查看权限校验"
+          prop="view_permission_check"
+          label-width="120px"
+        >
+          <el-switch v-model="workflow.view_permission_check"></el-switch>
+        </el-form-item>
+ <el-form-item
+          label="限制表达式"
+          prop="limit_expression"
+          label-width="120px"
+        >
+         <vue-json-editor
+      v-model="workflow.limit_expression"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+      @json-change="onJsonChange"
+      @json-save="onJsonSave"
+      @has-error="onError"
+    />
+    <br>
+       </el-form-item>
+    <el-form-item
+          label="展现表单字段"
+          prop="display_form_str"
+          label-width="120px"
+        >
+         <vue-json-editor
+      v-model="workflow.display_form_str"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+      @json-change="onJsonChange1"
+      @json-save="onJsonSave1"
+      @has-error="onError1"
+    />
+    <br>
+    
+     </el-form-item>
+
+         <el-form-item label="标题模板" prop="title_template">
+          <el-input v-model="workflow.title_template" placeholder="你有一个待办工单:{title}" />
+        </el-form-item>
+         <el-form-item label="内容模板" prop="content_template">
+          <el-input v-model="workflow.content_template" placeholder="标题:{title}, 创建时间:{create_time}" />
+        </el-form-item>
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getWorkflowList, createWorkflow,updateWorkflow,deleteWorkflow } from "@/api/workflow";
+import checkPermission from "@/utils/permission";
+ import vueJsonEditor from 'vue-json-editor'
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+const defaultworkflow = {
+  name: "",
+  number: "",
+};
+export default {
+  components: { Pagination,vueJsonEditor  },
+  data() {
+    return {
+      workflow: defaultworkflow,
+      view_permission_check:false,
+       hasJsonFlag:true,  // json是否验证通过
+         hasJsonFlag1:true,  // json是否验证通过
+      workflowList: {
+        count: 0,
+      },
+     
+      listQuery: {
+        page: 1,
+        page_size: 20,
+      },
+      display_form_str:[],
+      limit_expression:[],
+      listLoading: true,
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        description: [{ required: true, message: "请输入", trigger: "blur" }]
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getList();
+  },
+  methods: {
+    checkPermission,
+   
+    getList() {
+      this.listLoading = true;
+      getWorkflowList(this.listQuery).then((response) => {
+        if (response.data) {
+          this.workflowList = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    
+    
+    handleFilter() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
+    handleCreate() {
+      this.workflow = Object.assign({}, defaultworkflow);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.workflow = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    handlecfgt(scope)
+    {
+      this.$router.push({name:"configuration",params:{workflow:scope.row.id}})
+    }
+    ,
+    handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteWorkflow(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+             this.checkJson();
+             this.checkJson2();
+            updateWorkflow(this.workflow.id, this.workflow).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            this.checkJson();
+             this.checkJson2();
+            
+            createWorkflow(this.workflow).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+
+
+   onJsonChange (value) {
+        // console.log('更改value:', value);
+        // 实时保存
+        this.onJsonSave(value)
+      },
+      onJsonSave (value) {
+        // console.log('保存value:', value);
+        this.limit_expression = value
+        this.hasJsonFlag = true
+      },
+      onError(value) {
+        // console.log("json错误了value:", value);
+        this.hasJsonFlag = false
+      },
+       onJsonChange1 (value) {
+        // console.log('更改value:', value);
+        // 实时保存
+        this.onJsonSave1(value)
+      },
+      onJsonSave1 (value) {
+        // console.log('保存value:', value);
+        this.display_form_str = value
+        this.hasJsonFlag1 = true
+      },
+      onError1(value) {
+        // console.log("json错误了value:", value);
+        this.hasJsonFlag1 = false
+      },
+      // 检查json
+      checkJson(){
+        if (this.hasJsonFlag == false){
+          // console.log("json验证失败")
+          // this.$message.error("json验证失败")
+          alert("限制表达式json验证失败")
+          return false
+        } else {
+          // console.log("json验证成功")
+          // this.$message.success("json验证成功")
+          alert("限制表达式json验证成功")
+          return true
+        }
+      },
+       // 检查json
+      checkJson2(){
+        if (this.hasJsonFlag1 == false){
+          // console.log("json验证失败")
+          // this.$message.error("json验证失败")
+          alert("展现表单字段json验证失败")
+          return false
+        } else {
+          // console.log("json验证成功")
+          // this.$message.success("json验证成功")
+          alert("展现表单字段json1验证成功")
+          return true
+        }
+      },
+
+
+  },
+};
+</script>
diff --git a/hb_client/src/views/workflow/state.vue b/hb_client/src/views/workflow/state.vue
new file mode 100644
index 0000000..e103b8c
--- /dev/null
+++ b/hb_client/src/views/workflow/state.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        :data="wfstateList"
+        style="width: 100%"
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column  width="180" label="名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+         <el-table-column  width="180" label="是否隐藏">
+          <template slot-scope="scope"> 
+            {{ !!(scope.row.is_hidde)?'是':'否' }}
+          </template>
+        </el-table-column>
+        <el-table-column  width="180" label="顺序ID">
+          <template slot-scope="scope">{{ scope.row.sort }}</template>
+        </el-table-column>
+        <el-table-column  width="180" label="类型">
+          <template slot-scope="scope">
+             <el-tag effect="plain" v-if="scope.row.type==0">
+                  普通类型
+            </el-tag>
+             <el-tag effect="plain" v-if="scope.row.type==1">
+                  初始状态
+            </el-tag>
+            <el-tag effect="plain" v-if="scope.row.type==2">
+                  结束状态
+            </el-tag>
+          </template>
+        </el-table-column>
+           <el-table-column  width="180" label="参与人类型">
+          <template slot-scope="scope">{{ options_[scope.row.participant_type] }}</template>
+        </el-table-column>
+       
+         <el-table-column  width="180" label="创建时间">
+          <template slot-scope="scope">{{ scope.row.create_time }}</template>
+        </el-table-column>
+       
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+            <el-link
+              v-if="checkPermission(['wfstate_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['wfstate_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+     
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑状态' : '新增状态'"
+    >
+      <el-form
+        ref="Form"
+        :model="wfstate"
+        label-width="80px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="wfstate.name" placeholder="名称" />
+        </el-form-item>
+        <el-form-item
+          label="是否隐藏"
+          prop="is_hidden"
+          label-width="120px"
+        >
+          <el-switch v-model="wfstate.is_hidden"></el-switch>
+        </el-form-item>
+         
+      <el-form-item label="状态顺序" prop="sort">
+          <el-input v-model="wfstate.sort" type="number"  placeholder="状态顺序" />
+        </el-form-item>
+       <el-form-item label="状态类型" prop="type">
+         
+           <el-select  style="width: 100%" v-model="wfstate.type" placeholder="请选择">
+             <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+     <el-form-item
+          label="允许撤回"
+          prop="enable_retreat"
+          label-width="120px"
+        >
+          <el-switch v-model="wfstate.enable_retreat"></el-switch>
+        </el-form-item>
+         <el-form-item label="参与者类型" prop="participant_type">
+         
+           <el-select  style="width: 100%" v-model="wfstate.participant_type" placeholder="请选择">
+             <el-option
+                v-for="item in typeoptions"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getWfStateList, createWfState,updateWfState,deleteWfState } from "@/api/workflow";
+import checkPermission from "@/utils/permission";
+const defaultwfstate = {
+  name: "",
+};
+export default {
+  components: { },
+  name: "State",
+  props: ["ID"],
+  data() {
+    return {
+      wfstate: defaultwfstate,
+      is_hidden:false,
+      enable_retreat:false,
+      wfstateList: {
+        count:0
+      },
+      options_:{
+        "0":'无处理',
+        "1":'个人',
+        "2":'多人',
+        "3":'部门',
+        "4":'角色',
+        "5":'变量',
+        "6":'普通类型',
+        "5":'工单字段',
+        "6":'父工单字段',
+      },
+      options: [{
+          value: 0,
+          label: '普通类型'
+        }, {
+          value: 1,
+          label: '初始状态'
+        }, {
+          value: 2,
+          label: '结束状态'
+        }],
+         typeoptions: [{
+          value: 0,
+          label: '无处理'
+        }, {
+          value: 1,
+          label: '个人'
+        }, {
+          value: 2,
+          label: '多人'
+        }
+        , {
+          value: 3,
+          label: '部门'
+        }
+        , {
+          value: 4,
+          label: '角色'
+        }
+        , {
+          value: 5,
+          label: '变量'
+        }
+        , {
+          value: 7,
+          label: '工单字段'
+        }
+        , {
+          value: 8,
+          label: '父工单字段'
+        }],
+      display_form_str:[],
+      limit_expression:[],
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        sort: [{ required: true, message: "请输入", trigger: "blur" }],
+        type:[{ required: true, message: "选择", trigger: "blur" }],
+
+      },
+    };
+  },
+ 
+  created() {
+     
+    this.getList();
+  },
+  methods: {
+    checkPermission,
+   
+    getList() {
+    
+      getWfStateList(this.ID).then((response) => {
+
+        if (response.data) {
+          this.wfstateList = response.data;
+        }
+        
+      });
+    },
+    
+    
+   
+    handleCreate() {
+      this.wfstate = Object.assign({}, defaultwfstate);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.wfstate = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    
+   
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+            updateWfState(this.wfstate.id, this.wfstate).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            this.wfstate.workflow=this.ID;
+            createWfState(this.wfstate).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+
+
+   handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteWfState(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+     
+
+
+  },
+};
+</script>
diff --git a/hb_client/src/views/workflow/transitions.vue b/hb_client/src/views/workflow/transitions.vue
new file mode 100644
index 0000000..68c7c5b
--- /dev/null
+++ b/hb_client/src/views/workflow/transitions.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      
+    <div style="margin-top: 10px">
+      <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
+        >新增</el-button
+      >
+    </div>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        :data="wftransitionList"
+        style="width: 100%"
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column  width="180" label="名称">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+         
+         <el-table-column  width="180" label="定时器（单位秒）">
+             <template slot-scope="scope">{{ scope.row.timer }}</template>
+        </el-table-column>
+         <el-table-column  width="180" label="源状态">
+          
+              <template slot-scope="scope">
+               <span  v-for="item in stateoptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" >
+                {{lable}}</span>
+                </template>
+        </el-table-column>
+         <el-table-column  width="180" label="创建时间">
+          <template slot-scope="scope">{{ scope.row.create_time }}</template>
+        </el-table-column>
+       
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+        >
+          <template slot-scope="scope">
+            <el-link
+              v-if="checkPermission(['wftransition_update'])"
+              @click="handleEdit(scope)"
+              >编辑</el-link
+            >
+            <el-link
+              v-if="checkPermission(['wftransition_delete'])"
+              type="danger"
+              @click="handleDelete(scope)"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+     
+    </el-card>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑状态' : '新增状态'"
+    >
+      <el-form
+        ref="Form"
+        :model="wftransition"
+        label-width="130px"
+        label-position="right"
+        :rules="rule1"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="wftransition.name" placeholder="名称" />
+        </el-form-item>
+         <el-form-item label="定时器（单位秒）" prop="timer">
+          <el-input v-model="wftransition.timer" type="number" placeholder="0" />
+        </el-form-item>
+           <el-form-item label="源状态" prop="source_state">
+         
+          <el-select v-model="wftransition.source_state" placeholder="请选择" style="width:100%">
+            <el-option
+              v-for="item in stateoptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+         <el-form-item label="目的状态" prop="destination_state">
+            <el-select v-model="wftransition.destination_state" placeholder="请选择" style="width:100%">
+            <el-option
+              v-for="item in stateoptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="条件表达式" prop="condition_expression">
+          <el-input v-model="wftransition.condition_expression" placeholder="[]" />
+        </el-form-item>
+         <el-form-item label="属性类型" prop="attribute_type">
+        
+           <el-select  style="width: 100%" v-model="wftransition.attribute_type" placeholder="请选择">
+             <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="是否校验必填" prop="field_require_check">
+             <el-switch v-model="wftransition.field_require_check"></el-switch>
+         
+        </el-form-item>
+      
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirm('Form')">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {getWfStateList, getWfTransitionList, createWfTransition,updateWfTransition,deleteWfTransition } from "@/api/workflow";
+import checkPermission from "@/utils/permission";
+
+import { genTree } from "@/utils"
+const defaultwftransition = {
+  name: "",
+};
+export default {
+  components: { },
+  name: "TST",
+  props: ["ID"],
+  data() {
+    return {
+      wftransition: defaultwftransition,
+      condition_expression:false,
+      wftransitionList: {
+        count:0
+      },
+      options_:[],
+       options: [{
+          value: 1,
+          label: '同意'
+        }, {
+          value: 2,
+          label: '拒绝'
+        }, {
+          value: 3,
+          label: '其他'
+        }],
+     
+      stateoptions:[],
+      dialogVisible: false,
+      dialogType: "new",
+      rule1: {
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        
+
+      },
+    };
+  },
+ 
+  created() {
+     
+
+     this.getWfStateList();
+     this.getList();
+  },
+  methods: {
+    checkPermission,
+   
+    getList() {
+    
+      getWfTransitionList(this.ID).then((response) => {
+
+        if (response.data) {
+          this.wftransitionList = response.data;
+        }
+        
+      });
+    },
+     getWfStateList() {
+    
+      getWfStateList(this.ID).then((response) => {
+       
+        if (response.data) {
+          this.stateoptions = genTree(response.data);
+        }
+       
+      });
+    },
+    
+   
+    handleCreate() {
+      this.wftransition = Object.assign({}, defaultwftransition);
+      this.dialogType = "new";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+   
+    handleEdit(scope) {
+      this.wftransition = Object.assign({}, scope.row); // copy obj
+      this.dialogType = "edit";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["Form"].clearValidate();
+      });
+    },
+    
+   
+   
+    async confirm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === "edit";
+          if (isEdit) {
+            updateWfTransition(this.wftransition.id, this.wftransition).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          } else {
+            this.wftransition.workflow=this.ID;
+            createWfTransition(this.wftransition).then((res) => {
+              if (res.code >= 200) {
+                this.getList();
+                 this.dialogVisible = false;
+                this.$message.success("成功");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+
+
+   handleDelete(scope) {
+      this.$confirm("确认删除?", "警告", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(async () => {
+          await deleteWfTransition(scope.row.id);
+          this.getList();
+          this.$message.success("成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+     
+
+
+  },
+};
+</script>