可视化流程节点操作的页面

src/api/wf/PROTEMPLATE.js

@@ -51,3 +51,49 @@ export function delPROTEMPLATE(id) {
     method: 'get'
   })
 }
+
+// 获取流程节点
+export function getProcode(id) {
+  return request({
+    url: '/defAction/list',
+    method: 'get',
+    params: {proId : id}
+  })
+}
+
+
+// 获取流程节点
+export function delPro(id) {
+  return request({
+    url: '/defAction/remove/' + id,
+    method: 'get'
+  })
+}
+
+
+// 获取流程节点详情
+export function getProInfo(id) {
+  return request({
+    url: '/defAction/getInfo/' + id,
+    method: 'get'
+  })
+}
+
+
+// 新增流程节点
+export function addPro(data) {
+  return request({
+    url: '/defAction/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改流程节点
+export function updatePro(data) {
+  return request({
+    url: '/defAction/edit',
+    method: 'post',
+    data: data
+  })
+}

src/views/wf/index.vue

@@ -76,7 +76,13 @@
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="流程编码" align="center" prop="procode" />
-      <el-table-column label="流程名称" align="center" prop="proname" />
+      <el-table-column label="流程名称" align="center" prop="proname">
+        <template slot-scope="scope">
+          <button type="info" @click="showProname(scope.row.id)">
+            {{ scope.row.proname }}
+          </button>
+        </template>
+      </el-table-column>
       <el-table-column label="版本" align="center" prop="version" />
       <el-table-column label="关键字" align="center" prop="keyword" />
       <el-table-column label="排序" align="center" prop="seqno" />
@@ -179,6 +185,143 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 添加或修改流程模板对话框 -->
+    <el-dialog
+      title="流程节点"
+      :visible.sync="openProname"
+      width="90%"
+      append-to-body
+    >
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleProAdd"
+            >新增</el-button
+          >
+        </el-col>
+        
+      </el-row>
+      <el-table :data="pronameform" style="width: 100%">
+        <el-table-column prop="acname" label="节点名称"></el-table-column>
+        <el-table-column
+          prop="approvaltype"
+          label="活动审批类型"
+        ></el-table-column>
+        <el-table-column
+          prop="dealhours"
+          label="办理期限 小时"
+        ></el-table-column>
+        <el-table-column prop="exelIds" label="审核人"></el-table-column>
+        <el-table-column prop="parentnr" label="父级活动"></el-table-column>
+        <el-table-column prop="proId" label="流程模板ID"></el-table-column>
+        <el-table-column prop="reemail" label="邮件提醒"></el-table-column>
+        <el-table-column prop="remessage" label="消息提醒"></el-table-column>
+        <el-table-column prop="seqno" label="活动顺序"></el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleProUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-popconfirm
+              title="确定删除吗？"
+              @confirm="handleProDelete(scope.row)"
+            >
+              <el-button
+                slot="reference"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+     <!-- 添加或修改流程节点对话框 -->
+     <el-dialog :title="Protitle" :visible.sync="openProAddOrEdit" width="60%" append-to-body>
+      <el-form ref="form2" :model="Proform" label-width="140px">
+        <el-form-item label="节点名称" prop="acname">
+          <el-input
+            v-model="Proform.acname"
+            placeholder="请输入节点名称"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="活动审批类型" prop="approvaltype">
+          <el-input
+            v-model="Proform.approvaltype"
+            placeholder="请输入活动审批类型"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="办理期限 小时" prop="dealhours">
+          <el-input
+            v-model="Proform.keyword"
+            placeholder="请输入办理期限 小时"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="seqno">
+          <el-input v-model="Proform.seqno" placeholder="排序" type="number" />
+        </el-form-item>
+        <el-form-item label="流程说明" prop="pronotes">
+          <el-input
+            v-model="Proform.pronotes"
+            placeholder="请输入流程说明"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="审核人" prop="exelIds">
+          <el-input
+            v-model="Proform.exelIds"
+            placeholder="请输入审核人"
+            type="text"
+          />
+        </el-form-item>
+   
+      
+        <el-form-item label="邮件提醒" prop="reemail">
+          <el-input
+            v-model="Proform.reemail"
+            placeholder="请输入邮件提醒"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="消息提醒" prop="remessage">
+          <el-input
+            v-model="Proform.remessage"
+            placeholder="请输入消息提醒"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="活动顺序" prop="seqno">
+          <el-input
+            v-model="Proform.seqno"
+            placeholder="请输入活动顺序"
+            type="text"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm2">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -189,12 +332,18 @@ import {
   delPROTEMPLATE,
   addPROTEMPLATE,
   updatePROTEMPLATE,
+  getProcode,
+  delPro,
+  getProInfo,
+  addPro,
+  updatePro,
 } from "@/api/wf/PROTEMPLATE";
 
 export default {
   name: "PROTEMPLATE",
   data() {
     return {
+      pronameform: [],
       // 根路径
       baseURL: process.env.VUE_APP_BASE_API,
       // 遮罩层
@@ -213,8 +362,11 @@ export default {
       PROTEMPLATEList: [],
       // 弹出层标题
       title: "",
+      Protitle:'',
       // 是否显示弹出层
       open: false,
+      openProname: false,
+      openProAddOrEdit:false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -237,6 +389,7 @@ export default {
       },
       // 表单参数
       form: {},
+      Proform:{},
       // 表单校验
       rules: {
         id: [{ required: true, message: "$comment不能为空", trigger: "blur" }],
@@ -277,6 +430,26 @@ export default {
     this.getList();
   },
   methods: {
+    handleProAdd(){   //节点的新增
+      this.reset();
+      this.openProAddOrEdit = true
+      this.Protitle = '新增节点'
+      this.Proform.proId = this.PROTEMPLATEID
+    },
+    handleProUpdate(r) {  //节点的修改
+      this.reset();
+      this.openProAddOrEdit = true
+      getProInfo(r.id).then(res=>{
+      this.Protitle = '修改节点'
+      this.Proform = res.data
+      this.Proform.proId = this.PROTEMPLATEID
+      })
+    },
+    handleProDelete(r) {
+      delPro(r.id).then((res) => {
+        this.showProname(r.proId)
+      });
+    },
     /** 查询流程模板列表 */
     getList() {
       this.loading = true;
@@ -286,9 +459,19 @@ export default {
         this.loading = false;
       });
     },
+    showProname(id) {
+      this.openProname = true;
+      this.PROTEMPLATEID = id
+      
+      //获取流程节点
+      getProcode(id).then((res) => {
+        this.pronameform = res.rows;
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
+      this.openProAddOrEdit = false
       this.reset();
     },
     // 表单重置
@@ -306,7 +489,22 @@ export default {
         serviceUrl: null,
         infoUrl: null,
       };
+
+      this.Proform = {
+        acname:null,
+        approvaltype:null,
+        keyword:null,
+        seqno:null,
+        pronotes:null,
+        exelIds:null,
+        parentnr:null,
+        proId:null,
+        reemail:null,
+        remessage:null,
+        seqno:null,
+      }
       this.resetForm("form");
+      this.resetForm("form2");
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -360,6 +558,27 @@ export default {
         }
       });
     },
+    /** 提交按钮 流程节点*/
+    submitForm2() {
+      this.$refs["form2"].validate((valid) => {
+        if (valid) {
+          if (this.Proform.id != null) {
+            updatePro(this.Proform).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.openProAddOrEdit = false
+              this.showProname(this.PROTEMPLATEID);
+            });
+          } else {
+            addPro(this.Proform).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.openProAddOrEdit = false
+              this.open = false;
+              this.showProname(this.PROTEMPLATEID);
+            });
+          }
+        }
+      });
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;