Merge branch 'dev' of http://110.41.163.243:9980/kd-aiot/kd-aiot-frontend into dev

src/api/bpm/processClass.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export async function getProcessTypePageAPI(data) {
+  const res = await request.post('/bpm/processtype/page', data);
+  if (res.data.code == 0) {
+    return res.data.data.list
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function processTypeSaveAPI(data) {
+  const res = await request.post('/bpm/processtype/save', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function processTypeUpdateAPI(data) {
+
+  const res = await request.put('/bpm/processtype/update', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function getProcessTypeGetByIdAPI(id) {
+  const res = await request.get(`/bpm/processtype/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function processTypeDeleteAPI(data) {
+  const res = await request.delete(`/bpm/processtype/delete`, {data});
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/upload/fileUpload.vue

@@ -177,7 +177,7 @@
     methods: {
       //点击查看图片
       handleItem(file){
-   
+
        getFile({ objectName: file.storePath }, file.name);
       },
       delFileList () {
@@ -230,6 +230,7 @@
           this.$message.error(`最多上传 ${this.limit}个文件`);
           return false;
         }
+        console.log(file);
         return uploadFile({
           module: this.module,
           multiPartFile: file

src/views/bpm/model/components/modelSearch.vue

@@ -7,6 +7,13 @@
     @submit.native.prevent
   >
     <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="流程分类：" prop="queryParams.processTypeId">
+          <el-select v-model="queryParams.processTypeId" clearable style="width: 100%">
+            <el-option v-for="item in processTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
       <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <el-form-item label="流程标识：" prop="queryParams.key">
           <el-input
@@ -41,6 +48,9 @@
 </template>
 <script>
   export default {
+    props:{
+      processTypeList:Array
+    },
     data () {
       // 默认表单数据
       const defaultParams = {

src/views/bpm/model/index.vue

@@ -2,7 +2,7 @@
   <div class="ele-body">
     <el-card shadow="never">
       <div class="filter-container">
-        <modelSearch @search="reload"> </modelSearch>
+        <modelSearch @search="reload" :processTypeList="processTypeList"></modelSearch>
       </div>
       <ele-pro-table
         ref="table"
@@ -23,22 +23,24 @@
 
         <template v-slot:suspensionState="{ row }">
           <el-switch v-if="row.processDefinition" v-model="row.processDefinition.suspensionState"
-                     :active-value="1" :inactive-value="2" @change="handleChangeState(row)" />
+                     :active-value="1" :inactive-value="2" @change="handleChangeState(row)"/>
         </template>
         <template v-slot:version="{ row }">
-          <el-tag size="medium" v-if="row.processDefinition" v-model="row.processDefinition.version" >
-            v{{row.processDefinition.version}}
+          <el-tag size="medium" v-if="row.processDefinition" v-model="row.processDefinition.version">
+            v{{ row.processDefinition.version }}
           </el-tag>
         </template>
 
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)" >修改流程</el-button>
-          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(row)" >设计流程</el-button>
-          <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(row)" >分配规则</el-button>
-          <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(row)" >发布流程</el-button>
-          <el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(row)" >流程定义</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)" >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(row)">设计流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(row)">分配规则</el-button>
+          <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(row)">发布流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(row)">
+            流程定义
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
         </template>
       </ele-pro-table>
     </el-card>
@@ -46,24 +48,30 @@
     <!-- 对话框(添加 / 修改) -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="流程分类" prop="processTypeId">
+          <el-select v-model="form.processTypeId" clearable style="width: 100%" @change="handleProcessType">
+            <el-option v-for="item in processTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="流程标识" prop="key">
-          <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id" />
+          <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id"/>
           <el-tooltip v-if="!form.id" class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
-            <i style="padding-left: 5px;" class="el-icon-question" />
+            <i style="padding-left: 5px;" class="el-icon-question"/>
           </el-tooltip>
           <el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
-            <i style="padding-left: 5px;" class="el-icon-question" />
+            <i style="padding-left: 5px;" class="el-icon-question"/>
           </el-tooltip>
         </el-form-item>
         <el-form-item label="流程名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable />
+          <el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable/>
         </el-form-item>
         <el-form-item label="流程描述" prop="description">
-          <el-input type="textarea" v-model="form.description" clearable />
+          <el-input type="textarea" v-model="form.description" clearable/>
         </el-form-item>
         <div v-if="form.id">
-          <el-form-item label="表单路由" prop="formCustomCreatePath" >
-            <el-input v-model="form.formCustomCreatePath" placeholder="请按格式输入表单路由" style="width: 330px;" type="textarea" rows="3"/>
+          <el-form-item label="表单路由" prop="formCustomCreatePath">
+            <el-input v-model="form.formCustomCreatePath" placeholder="请按格式输入表单路由" style="width: 330px;"
+                      type="textarea" rows="3"/>
             <div style="line-height: 16px; color: red;">
               提示：<br/>
               1、表单路由中包含PC端和手机端的页面路由，路由分为处理路由和查看路由。<br/>
@@ -80,331 +88,358 @@
     </el-dialog>
 
     <!-- ========== 流程任务分配规则 ========== -->
-    <taskAssignRuleDialog ref="taskAssignRuleDialog" />
+    <taskAssignRuleDialog ref="taskAssignRuleDialog"/>
 
   </div>
 </template>
 
 <script>
-  import {
-    deleteModel,
-    deployModel,
-    getModelPage,
-    getModel,
-    updateModelState,
-    createModel,
-    updateModel
-  } from "@/api/bpm/model";
-  import Pagination from '@/components/Pagination';
-  import dictMixins from '@/mixins/dictMixins';
-  import modelSearch from './components/modelSearch.vue';
-  import taskAssignRuleDialog from '../taskAssignRule/taskAssignRuleDialog.vue';
+import {
+  deleteModel,
+  deployModel,
+  getModelPage,
+  getModel,
+  updateModelState,
+  createModel,
+  updateModel
+} from "@/api/bpm/model";
+import Pagination from '@/components/Pagination';
+import dictMixins from '@/mixins/dictMixins';
+import modelSearch from './components/modelSearch.vue';
+import taskAssignRuleDialog from '../taskAssignRule/taskAssignRuleDialog.vue';
+import {getProcessTypePageAPI} from "@/api/bpm/processClass";
 
-  export default {
-    mixins: [dictMixins],
-    name: 'BpmModel',
-    components: {
-      modelSearch, Pagination, taskAssignRuleDialog,
-    },
-    data () {
-      return {
-        columns: [
-          {
-            type: 'index',
-            label: '序号',
-            width: 50,
-            align: 'center',
-            fixed: 'left'
-          },
-          {
-            prop: 'key',
-            label: '流程标识',
-            align: 'center',
-            width: 150,
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'name',
-            label: '流程名称',
-            align: 'center',
-            width: 150,
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'formCustomCreatePath',
-            label: '表单信息',
-            align: 'center',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'createTime',
-            label: '创建时间',
-            align: 'center',
-            width: 160,
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'version',
-            label: '流程版本',
-            align: 'center',
-            width: 80,
-            slot: "version",
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'suspensionState',
-            label: '激活状态',
-            align: 'center',
-            width: 80,
-            slot: 'suspensionState',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'processDefinition.deploymentTime',
-            label: '部署时间',
-            align: 'center',
-            width: 160,
-            showOverflowTooltip: true
-          },
+export default {
+  mixins: [dictMixins],
+  name: 'BpmModel',
+  components: {
+    modelSearch, Pagination, taskAssignRuleDialog,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          type: 'index',
+          label: '序号',
+          width: 50,
+          align: 'center',
+          fixed: 'left'
+        },
+        {
+          prop: 'processTypeName',
+          label: '流程分类',
+          align: 'center',
+          width: 150,
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'key',
+          label: '流程标识',
+          align: 'center',
+          width: 150,
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'name',
+          label: '流程名称',
+          align: 'center',
+          width: 150,
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'formCustomCreatePath',
+          label: '表单信息',
+          align: 'center',
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          align: 'center',
+          width: 160,
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'version',
+          label: '流程版本',
+          align: 'center',
+          width: 80,
+          slot: "version",
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'suspensionState',
+          label: '激活状态',
+          align: 'center',
+          width: 80,
+          slot: 'suspensionState',
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'processDefinition.deploymentTime',
+          label: '部署时间',
+          align: 'center',
+          width: 160,
+          showOverflowTooltip: true
+        },
 
-          {
-            columnKey: 'action',
-            label: '操作',
-            width: 450,
-            align: 'center',
-            resizable: false,
-            slot: 'action',
-            showOverflowTooltip: true
-          }
-        ],
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 450,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ],
 
-        // 流程表单详情
-        detailOpen: false,
-        detailForm: {
-          fields: []
-        },
+      // 流程表单详情
+      detailOpen: false,
+      detailForm: {
+        fields: []
+      },
 
-        // 流程表单
-        title: "",
-        open: false,
-        form: {},
+      // 流程表单
+      title: "",
+      open: false,
+      form: {},
 
-        // BPMN 数据
-        showBpmnOpen: false,
-        bpmnXML: null,
-        bpmnControlForm: {
-          prefix: "flowable"
-        },
+      // BPMN 数据
+      showBpmnOpen: false,
+      bpmnXML: null,
+      processTypeList: [],
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
 
-        // 表单校验
-        rules: {
-          key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
-          name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
-        },
+      // 表单校验
+      rules: {
+        key: [{required: true, message: "流程标识不能为空", trigger: "blur"}],
+        name: [{required: true, message: "流程名称不能为空", trigger: "blur"}],
+        processTypeId: [{required: true, message: "流程分类不能为空", trigger: "change"}],
+      },
 
 
-      };
-    },
-    created () {
-      this.requestDict('工作流任务分配规则的类型');
-    },
-    computed: {
-      // 是否开启响应式布局
-      styleResponsive () {
-        return this.$store.state.theme.styleResponsive;
+    };
+  },
+  created() {
+    this.requestDict('工作流任务分配规则的类型');
+    this.getProcessTypeList()
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  watch: {
+    open(nV) {
+      if (!nV) {
+        this.reset();
       }
+
+    }
+  },
+  methods: {
+    handleProcessType(val) {
+      if (!val) return this.form.processTypeName = ''
+      this.form.processTypeName = this.processTypeList.find(item => item.id == val)?.name
+    },
+    async getProcessTypeList() {
+      this.processTypeList = await getProcessTypePageAPI({
+        pageNum: 1,
+        size: 9999,
+      });
     },
-    watch:{
-      open(nV){
-        if(!nV){
-          this.reset();
-        }
 
+    /* 表格数据源 */
+    async datasource({page, where, limit}) {
+      return await getModelPage({
+        pageNo: page,
+        pageSize: limit,
+        ...where
+      });
+    },
+    /* 刷新表格 */
+    reload(params) {
+      if (params && params.reset) {
+        this.$refs.table.reload({page: 1, where: params});
+      } else {
+        this.$refs.table.reload({where: params});
       }
     },
-    methods: {
-      /* 表格数据源 */
-      async datasource ({ page, where, limit }) {
-        return await getModelPage({
-          pageNo: page,
-          pageSize: limit,
-          ...where
-        });
-      },
-      /* 刷新表格 */
-      reload (params) {
-        if(params && params.reset){
-          this.$refs.table.reload({ page: 1, where: params });
-        } else {
-          this.$refs.table.reload({ where: params });
-        }
-      },
 
-      /** 取消按钮 */
-      cancel() {
-        this.open = false;
-      },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+    },
 
-      // 表单重置
-      reset() {
-        this.form = {
-          id: undefined,
-          key: undefined,
-          name: undefined,
-          description: undefined,
-          category: undefined,
-          formType: undefined,
-          formId: undefined,
-          formCustomCreatePath: undefined,
-          formCustomViewPath: undefined
-        };
-        console.log(this.$refs.form);
-        this.$refs.form.resetFields();
-      },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        key: undefined,
+        name: undefined,
+        description: undefined,
+        category: undefined,
+        formType: undefined,
+        formId: undefined,
+        formCustomCreatePath: undefined,
+        formCustomViewPath: undefined
+      };
+      console.log(this.$refs.form);
+      this.$refs.form.resetFields();
+    },
 
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.title = "新建模型";
-        this.open = true;
-      },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.title = "新建模型";
+      this.open = true;
+    },
 
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.open = true;
-        this.title = "修改模型";
-        // 设置 form
-        this.form = {
-          ...row
-        };
-      },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.open = true;
+      this.title = "修改模型";
+      // 设置 form
+      this.form = {
+        ...row
+      };
+    },
 
-      /** 设计按钮操作 */
-      handleDesign(row) {
-        this.$router.push({
-          name: "设计流程",
-          query:{
-            modelId: row.id
-          }
-        });
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          const that = this;
-          if (!valid) {
-            return;
-          }
-          // 更新
-          if (this.form.id) {
-            updateModel({
-              ...this.form,
-            }).then(response => {
-              this.$message.success('修改模型成功');
-              that.reload();
-              that.cancel();
-            });
-            return;
-          }
-          // 创建
-          createModel(this.form).then(response => {
-            this.open = false;
-            this.reload();
-            this.$alert('<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
-              '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
-              '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-              '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
-              '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
-              '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
-              '重要提示', {
-                dangerouslyUseHTMLString: true,
-                type: 'success'
-              });
+    /** 设计按钮操作 */
+    handleDesign(row) {
+      this.$router.push({
+        name: "设计流程",
+        query: {
+          modelId: row.id
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        const that = this;
+        if (!valid) {
+          return;
+        }
+        // 更新
+        if (this.form.id) {
+          updateModel({
+            ...this.form,
+          }).then(response => {
+            this.$message.success('修改模型成功');
+            that.reload();
+            that.cancel();
           });
+          return;
+        }
+        // 创建
+        createModel(this.form).then(response => {
+          this.open = false;
+          this.reload();
+          this.$alert('<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+            '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
+            '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
+            '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
+            '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+            '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
+            '重要提示', {
+              dangerouslyUseHTMLString: true,
+              type: 'success'
+            });
         });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const that = this;
-        this.$confirm('是否删除该流程？？？', '删除', {
-          type: 'warning'
-        })
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      this.$confirm('是否删除该流程？？？', '删除', {
+        type: 'warning'
+      })
         .then(() => {
           deleteModel(row.id).then(response => {
             that.reload();
             this.$message.success('删除成功');
           })
         })
-        .catch(() => {});
-      },
-      /** 部署按钮操作 */
-      handleDeploy(row) {
-        const that = this;
-        this.$confirm('是否部署该流程？？？')
+        .catch(() => {
+        });
+    },
+    /** 部署按钮操作 */
+    handleDeploy(row) {
+      const that = this;
+      this.$confirm('是否部署该流程？？？')
         .then(() => {
           deployModel(row.id).then(response => {
             that.reload();
             this.$message.success('部署成功');
-          }).catch(() => {});
-        })
-        .catch(() => {});
-      },
-      /** 流程图的详情按钮操作 */
-      handleBpmnDetail(row) {
-        getModel(row.id).then(response => {
-          this.bpmnXML = response.data.bpmnXml
-          // 弹窗打开
-          this.showBpmnOpen = true
+          }).catch(() => {
+          });
         })
-      },
-      /** 跳转流程定义的列表 */
-      handleDefinitionList(row) {
-        this.$router.push({
-          name: "流程定义",
-          query:{
-            key: row.key
-          }
+        .catch(() => {
         });
-      },
-      /** 更新状态操作 */
-      handleChangeState(row) {
-        const that = this;
+    },
+    /** 流程图的详情按钮操作 */
+    handleBpmnDetail(row) {
+      getModel(row.id).then(response => {
+        this.bpmnXML = response.data.bpmnXml
+        // 弹窗打开
+        this.showBpmnOpen = true
+      })
+    },
+    /** 跳转流程定义的列表 */
+    handleDefinitionList(row) {
+      this.$router.push({
+        name: "流程定义",
+        query: {
+          key: row.key
+        }
+      });
+    },
+    /** 更新状态操作 */
+    handleChangeState(row) {
+      const that = this;
 
-        const id = row.id;
-        let state = row.processDefinition.suspensionState;
-        let statusState = state === 1 ? '激活' : '挂起';
+      const id = row.id;
+      let state = row.processDefinition.suspensionState;
+      let statusState = state === 1 ? '激活' : '挂起';
 
-        this.$confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?')
+      this.$confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?')
         .then(() => {
           return updateModelState(id, state);
         }).then(() => {
-          that.reload();
-          this.$message.success(statusState + "成功");
-        })
+        that.reload();
+        this.$message.success(statusState + "成功");
+      })
         .catch(() => {
           // 取消后，进行恢复按钮
           row.processDefinition.suspensionState = (state === 1 ? 2 : 1);
         });
-      },
+    },
 
-      /** 处理任务分配规则列表的按钮操作 */
-      handleAssignRule(row) {
-        this.$refs['taskAssignRuleDialog'].initModel(row.id);
-      },
+    /** 处理任务分配规则列表的按钮操作 */
+    handleAssignRule(row) {
+      this.$refs['taskAssignRuleDialog'].initModel(row.id);
+    },
 
-    }
-  };
+  }
+};
 </script>
 <style scoped>
-  .app-container {
-    padding: 10px;
-  }
-  .filter-container .filter-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 5px;
-    margin-right: 4px;
-  }
-  .filter-container {
-    padding-bottom: 5px;
-  }
+.app-container {
+  padding: 10px;
+}
+
+.filter-container .filter-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 5px;
+  margin-right: 4px;
+}
+
+.filter-container {
+  padding-bottom: 5px;
+}
 </style>

src/views/bpm/processClass/components/edit.vue

@@ -0,0 +1,141 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <el-dialog
+    class="ele-dialog-form"
+    :title="title"
+    :visible.sync="visible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="450px"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="50px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item
+            label="名称"
+            prop="name">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.name"
+              placeholder="请输入分类名"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item
+            label="备注"
+            prop="remark">
+            <el-input
+              type="textarea"
+              clearable
+              :maxlength="20"
+              v-model="form.remark"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+    </el-form>
+    <template v-slot:footer>
+      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
+      <el-button @click="handleClose">取消</el-button>
+
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import {getProcessTypeGetByIdAPI, processTypeSaveAPI, processTypeUpdateAPI} from "@/api/bpm/processClass";
+import {deepClone} from "@/utils";
+
+
+export default {
+  data() {
+    const defaultForm = function () {
+      return {
+        id: '',
+        name: '',
+        remark: '',
+      };
+    };
+    return {
+      defaultForm,
+      // 表单数据
+      form: {...defaultForm()},
+      // 表单验证规则
+      rules: {
+        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
+      },
+      visible: false,
+      type: '', // add/edit
+      loading: false,
+    };
+  },
+  computed: {
+    title() {
+      switch (this.type) {
+        case 'add':
+          return '新增';
+          break;
+        case 'edit':
+          return '编辑';
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  methods: {
+    open(type, row) {
+      this.type = type;
+      this.visible = true;
+      if (type == 'edit') {
+        this.getInfo(row.id)
+      }
+    },
+    async getInfo(id) {
+      const res = await getProcessTypeGetByIdAPI(id)
+      this.form = deepClone(res)
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.loading = true;
+        if (this.type == 'add') {
+          delete this.form.id;
+        }
+        let API = this.type == 'add' ? processTypeSaveAPI : processTypeUpdateAPI
+        API(this.form)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success('操作成功');
+            this.handleClose();
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      });
+    },
+    restForm() {
+      this.form = {...this.defaultForm()};
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    handleClose() {
+      this.restForm();
+      this.visible = false;
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/bpm/processClass/components/search.vue

@@ -0,0 +1,92 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="75px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+
+        <el-form-item label="名称:">
+          <el-input v-model="where.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="组织机构:">
+          <auth-selection v-model="where.deptIds" style="width: 100%"></auth-selection>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }" >
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import AreaSelect from "@/views/enterpriseModel/regionalManage/components/area-cascader.vue";
+import {basicAreaPageAPI} from "@/api/regionalManage";
+
+export default {
+  components: {AreaSelect},
+  watch: {},
+  data() {
+    // 默认表单数据
+    const defaultWhere = {
+      name: '',
+    };
+    return {
+      defaultWhere,
+      // 表单数据
+      where: {...defaultWhere},
+    };
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  created() {
+    this.getBasicAreaList();
+  },
+  methods: {
+    /* 搜索 */
+    search() {
+      this.$emit('search', this.where);
+    },
+    /* 获取区域集合 */
+    async getBasicAreaList() {
+      const data = await basicAreaPageAPI(
+        {
+          pageNum: 1,
+          size: 9999
+        }
+      )
+      this.areaTreeList = this.$util.toTreeData({
+        data: data,
+        idField: 'id',
+        parentIdField: 'parentId'
+      });
+    },
+    /*  重置 */
+    reset() {
+      console.log(this.defaultWhere);
+      this.where = {...this.defaultWhere};
+      this.search();
+    },
+  }
+};
+</script>

src/views/bpm/processClass/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <search
+        ref="search"
+        @search="search"
+      ></search>
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable5"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="openEdit('add')"
+          >
+            添加
+          </el-button>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openEdit('edit', row)"
+          >
+            修改
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此角色吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <edit
+      ref="edit"
+      @done="done"
+    ></edit>
+  </div>
+</template>
+<script>
+import search from './components/search.vue';
+import edit from './components/edit.vue';
+import {getFactoryarea, deletefactoryarea} from '@/api/factoryModel';
+import {listOrganizations} from '@/api/system/organization';
+import {getProcessTypePageAPI, processTypeDeleteAPI} from "@/api/bpm/processClass";
+
+export default {
+  components: {
+    search,
+    edit
+  },
+  data() {
+    return {
+      columns: [
+        {
+          width: 45,
+          type: 'index',
+          columnKey: 'index',
+          align: 'center'
+        },
+        {
+          label: '名称',
+          prop: 'name',
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime',
+          align: 'center',
+          minWidth: 150
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 220,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ]
+    };
+  },
+
+  methods: {
+    datasource({page, where, limit}) {
+      return getProcessTypePageAPI({
+        ...where,
+        pageNum: page,
+        size: limit,
+      });
+    },
+    search(where) {
+      this.$refs.table.reload({
+        where: where,
+        page: 1
+      });
+    },
+    openEdit(type, row) {
+      this.$refs.edit.open(type, row);
+    },
+    remove(row) {
+      processTypeDeleteAPI([row.id])
+        .then((message) => {
+          this.$message.success('操作成功');
+          this.done();
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+        });
+    },
+    done() {
+      this.$refs.search.search();
+    }
+  }
+};
+</script>

src/views/enterpriseModel/regionalManage/index.vue

@@ -159,7 +159,7 @@ export default {
           showOverflowTooltip: true,
           align: 'center',
           formatter: (row, column) => {
-            return this.getDictV('main_area_type',row.areaLevel) ;
+            return this.getDictV('main_area_type',row.areaType) ;
           },
           minWidth: 110,
         },