oa外部表单调整

src/share/modal/OuterFormCheck.vue

@@ -0,0 +1,85 @@
+<template>
+  <!-- 表单编辑器 -->
+  <a-drawer
+    :title="title"
+    width="100%"
+    style="top:0%;height: 100%;"
+    :visible="editorVisible"
+    @close="closeDialog"
+  >
+    <iframe
+      :src="editorJumpUrlMy"
+      width="100%"
+      height="800"
+      frameborder="0"
+      scrolling="auto"
+      id="outerFormCheckFrame"
+      name="outerFormCheckFrame"
+    ></iframe>
+    <div
+      :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1,
+        }"
+    >
+    <todoManageOperation
+          v-if="processData.operationType && processData.operationType == '1'"
+          :processData="processData"
+          disabled="true"
+          btndisabled="true"
+          @refreshToDo="refreshToDo"
+        ></todoManageOperation>
+      <a-button style="margin-left:10px;margin-right:10px;" @click="closeDialog">关闭</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import todoManageOperation from '../../views/activiti/operation/todoManageOperation'
+
+export default {
+  name: 'OuterFormCheck',
+  
+  props: {
+      // editorJumpUrl:{
+      //     type:String,
+      //     required: false
+      // }
+    },
+  components: {
+        todoManageOperation,
+    },
+  data() {
+    return {
+      editorVisible: false,
+      editorJumpUrlMy:'',
+      title:"",
+      processData:{},
+    }
+  },
+  methods: {
+    //编辑表单弹框关闭按钮
+    closeDialog() {
+      this.editorVisible = false;
+      this.editorJumpUrlMy = ''
+    },
+    openDialog(url,title,processData){
+        this.title = title;
+        this.editorJumpUrlMy = url;
+        this.editorVisible = true;
+        this.processData = processData;
+    },
+    refreshToDo(){
+      this.$emit('refreshData');
+      this.closeDialog();
+    }
+  }
+}
+</script>

src/views/activiti/applyList.vue

@@ -52,13 +52,13 @@
           </a-col>
         </a-row>
 
-        <!-- <a-row>
+        <a-row>
           <a-col :md="12" :sm="12" style="margin:10px 0;">
             <a-button type="primary" @click="addApply" :loading="addApplyLoading" icon="plus-circle">
               发起申请
             </a-button>
           </a-col>
-        </a-row> -->
+        </a-row>
       </a-form>
     </div>
 
@@ -323,7 +323,7 @@
       </div>
     </a-modal>
     <!-- 项目管理整合 打开合同页面 -->
-  <my-iframe ref="MyIframe" ></my-iframe>
+  <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
   </a-card>
 </template>
 
@@ -337,7 +337,7 @@ import pick from 'lodash.pick'
 import JTreeSelect from '@/components/jeecg/JTreeSelect'
 import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
 import historicDetail from '@/views/activiti/historicDetail'
-import MyIframe from '../../share/modal/MyIframe'
+import outerFormCheck from '../../share/modal/OuterFormCheck'
 import {getEditorJumpUrl,getProjctManageUrl}from '../../../url.config'
 export default {
   name: 'applyList',
@@ -346,7 +346,7 @@ export default {
     JEllipsis,
     JTreeSelect,
     historicDetail,
-    MyIframe
+    outerFormCheck
   },
   data() {
     return {
@@ -359,7 +359,8 @@ export default {
         delByIds: '/actBusiness/delByIds',
         getFirstNode: '/actProcessIns/getFirstNode',
         applyBusiness: '/actBusiness/apply',
-        cancelApply: '/actBusiness/cancel'
+        cancelApply: '/actBusiness/cancel',
+        outformViewUrl:"/actBusiness/external/getViewUrl",
       },
       // 查询条件
       queryParam: {
@@ -613,11 +614,12 @@ export default {
       }
       if (r.routeName.indexOf('外部表单') != -1||r.tableName.indexOf('外部表单') != -1) {
         //其他项目的表单流程
-        var id = r.tableId //项目管理合同数据id
+        //var id = r.tableId //项目管理合同数据id
         //打开MyIframe弹框
-        this.$refs.MyIframe.editorVisible = true
+        //this.$refs.MyIframe.editorVisible = true
         //并传入地址参数
-        this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        //this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        this.showOuterFormViewDlg(r.tableId, '查看业务流程：' + r.processName, r);
       } else if (r.routeName.indexOf('自定义') != -1) {
         isView = isView || false
         this.lcModa.disabled = isView
@@ -728,7 +730,29 @@ export default {
     afterSub(formData) {
       this.lcModa.visible = false
       this.loadData()
-    }
+    },
+    showOuterFormViewDlg(tableId, title, processData){
+      getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
+          if (res.success){
+            var url = res.result.url;
+            var param = res.result.param;
+            url = url+"?"+this.jsonToUrlParam(param);
+
+            this.$refs.outerFormCheck.openDialog(url, title, processData);
+          }else{
+              this.$message.error(res.message);
+          }        
+      });
+    },
+    jsonToUrlParam(query){
+      var tmpArr = [];
+      for (var i in query){
+        var key = encodeURIComponent(i);
+        var value = encodeURIComponent(query[i]);
+        tmpArr.push(key+"="+value);
+      }
+      return tmpArr.join("&");
+    },
   }
 }
 </script>

src/views/activiti/doneManage.vue

@@ -148,20 +148,21 @@
     </a-modal>
     
     <!-- 项目管理整合 打开合同页面 -->
-  <my-iframe ref="MyIframe" ></my-iframe>
+  <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
   </div>
 </template>
 
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
-import MyIframe from '../../share/modal/MyIframe'
 import {getEditorJumpUrl,getProjctManageUrl}from '../../../url.config'
+import outerFormCheck from '../../share/modal/OuterFormCheck'
+import { getAction } from '@/api/manage'
 export default {
   name: 'done-manage',
   mixins: [activitiMixin, JeecgListMixin],
   components:{
-    MyIframe
+    outerFormCheck
   },
   data() {
     return {
@@ -194,7 +195,8 @@ export default {
       deleteId: '',
       url: {
         doneList: '/actTask/doneList',
-        deleteHistoricTask: '/actTask/deleteHistoric/'
+        deleteHistoricTask: '/actTask/deleteHistoric/',
+        outformViewUrl:"/actBusiness/external/getViewUrl",
       },
       modalLsVisible: false,
       procInstId: '',
@@ -249,11 +251,12 @@ export default {
       if (r.routeName.indexOf('外部表单') != -1||r.tableName.indexOf('外部表单') != -1) {
         //外部项目开发的表单
         //其他项目的表单流程
-        var id = r.tableId //项目管理合同数据id
+        //var id = r.tableId //项目管理合同数据id
         //打开MyIframe弹框
-        this.$refs.MyIframe.editorVisible = true
+        //this.$refs.MyIframe.editorVisible = true
         //并传入地址参数
-        this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        //this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        this.showOuterFormViewDlg(r.tableId, '查看业务流程：' + r.processName, r);
       } else if (r.routeName.indexOf('自定义') != -1) {
         //自定义的表单流程
         this.lcModa.disabled = true
@@ -300,7 +303,29 @@ export default {
       }
       this.ipagination = pagination
       // this.loadData();
-    }
+    },
+    showOuterFormViewDlg(tableId, title, processData){
+      getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
+          if (res.success){
+            var url = res.result.url;
+            var param = res.result.param;
+            url = url+"?"+this.jsonToUrlParam(param);
+
+            this.$refs.outerFormCheck.openDialog(url, title, processData);
+          }else{
+              this.$message.error(res.message);
+          }        
+      });
+    },
+    jsonToUrlParam(query){
+      var tmpArr = [];
+      for (var i in query){
+        var key = encodeURIComponent(i);
+        var value = encodeURIComponent(query[i]);
+        tmpArr.push(key+"="+value);
+      }
+      return tmpArr.join("&");
+    },
   },
   watch: {}
 }

src/views/activiti/processFinishManage.vue

@@ -147,7 +147,7 @@
     </a-modal>
     
     <!-- 项目管理整合 打开合同页面 -->
-  <my-iframe ref="MyIframe" ></my-iframe>
+  <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
   </div>
 </template>
 
@@ -155,13 +155,14 @@
 
 import {activitiMixin} from "./mixins/activitiMixin";
 import {JeecgListMixin} from "../../mixins/JeecgListMixin";
-import MyIframe from '../../share/modal/MyIframe'
+import outerFormCheck from '../../share/modal/OuterFormCheck'
+import { getAction } from '@/api/manage'
 import {getEditorJumpUrl,getProjctManageUrl}from '../../../url.config'
 export default {
   mixins:[JeecgListMixin,activitiMixin],
   name: "process-finish-manage",
   components:{
-    MyIframe
+    outerFormCheck
   },
   data() {
     return {
@@ -192,7 +193,8 @@ export default {
       deleteId: "",
       url: {
         getFinishedProcess:'/actProcessIns/getFinishedProcess',
-        delHistoricIns:'/actProcessIns/delHistoricInsByIds/'
+        delHistoricIns:'/actProcessIns/delHistoricInsByIds/',
+        outformViewUrl:"/actBusiness/external/getViewUrl",
       }
     };
   },
@@ -247,11 +249,12 @@ export default {
       }
       if(r.routeName.indexOf("外部表单")!=-1||r.tableName.indexOf('外部表单') != -1){//外面的表单
           //其他项目的表单流程
-        var id = r.tableId //项目管理合同数据id
+        //var id = r.tableId //项目管理合同数据id
         //打开MyIframe弹框
-        this.$refs.MyIframe.editorVisible = true
+        //this.$refs.MyIframe.editorVisible = true
         //并传入地址参数
-        this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        //this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        this.showOuterFormViewDlg(r.tableId, '查看业务流程：' + r.processName, r);
       }else if(r.routeName.indexOf("自定义")!=-1){//自定义的表单流程
         this.lcModa.disabled = true;
         this.lcModa.title = '查看流程业务信息：'+r.name;
@@ -287,6 +290,28 @@ export default {
         }
       });
     },
+    showOuterFormViewDlg(tableId, title, processData){
+      getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
+          if (res.success){
+            var url = res.result.url;
+            var param = res.result.param;
+            url = url+"?"+this.jsonToUrlParam(param);
+
+            this.$refs.outerFormCheck.openDialog(url, title, processData);
+          }else{
+              this.$message.error(res.message);
+          }        
+      });
+    },
+    jsonToUrlParam(query){
+      var tmpArr = [];
+      for (var i in query){
+        var key = encodeURIComponent(i);
+        var value = encodeURIComponent(query[i]);
+        tmpArr.push(key+"="+value);
+      }
+      return tmpArr.join("&");
+    },
   },
   mounted() {
     this.init();

src/views/activiti/processInsManage.vue

@@ -141,21 +141,22 @@
                  @close="lcModa.visible=false,lcModa.disabled = false"></component>
     </a-modal>
     
-    <!-- 项目管理整合 打开合同页面 -->
-  <my-iframe ref="MyIframe" ></my-iframe>
+        <!-- 项目管理整合 打开合同页面 -->
+  <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
   </div>
 </template>
 
 <script>
 import {activitiMixin} from "./mixins/activitiMixin";
 import {JeecgListMixin} from "../../mixins/JeecgListMixin";
-import MyIframe from '../../share/modal/MyIframe'
+import outerFormCheck from '../../share/modal/OuterFormCheck'
+import { getAction } from '@/api/manage'
 import {getEditorJumpUrl,getProjctManageUrl}from '../../../url.config'
 export default {
   mixins:[activitiMixin,JeecgListMixin],
   name: "process-ins-manage",
   components:{
-    MyIframe
+    outerFormCheck
   },
   data() {
     return {
@@ -189,6 +190,7 @@ export default {
         getRunningProcess:'/actProcessIns/getRunningProcess',
         deleteProcessIns:'/actProcessIns/delInsByIds/',
         updateInsStatus:'/actProcessIns/updateInsStatus/',
+        outformViewUrl:"/actBusiness/external/getViewUrl",
       },
       modalLsVisible: false,
       procInstId: '',
@@ -281,11 +283,12 @@ export default {
       }
       if(r.routeName.indexOf("外部表单")!=-1||r.tableName.indexOf('外部表单') != -1){//外部项目的表单
           //其他项目的表单流程
-        var id = r.tableId //项目管理合同数据id
+        //var id = r.tableId //项目管理合同数据id
         //打开MyIframe弹框
-        this.$refs.MyIframe.editorVisible = true
+        //this.$refs.MyIframe.editorVisible = true
         //并传入地址参数
-        this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        //this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        this.showOuterFormViewDlg(r.tableId, '查看业务流程：' + r.processName, r);
       }else if(r.routeName.indexOf("自定义")!=-1){//自定义的表单流程
         this.lcModa.disabled = true;
         this.lcModa.title = '查看流程业务信息：'+r.name;
@@ -327,7 +330,29 @@ export default {
       }
       this.ipagination = pagination;
       // this.loadData();
-    }
+    },
+    showOuterFormViewDlg(tableId, title, processData){
+      getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
+          if (res.success){
+            var url = res.result.url;
+            var param = res.result.param;
+            url = url+"?"+this.jsonToUrlParam(param);
+
+            this.$refs.outerFormCheck.openDialog(url, title, processData);
+          }else{
+              this.$message.error(res.message);
+          }        
+      });
+    },
+    jsonToUrlParam(query){
+      var tmpArr = [];
+      for (var i in query){
+        var key = encodeURIComponent(i);
+        var value = encodeURIComponent(query[i]);
+        tmpArr.push(key+"="+value);
+      }
+      return tmpArr.join("&");
+    },
   },
   mounted() {
     this.init();

src/views/activiti/todoManage.vue

@@ -201,7 +201,7 @@
         <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
       </div>
     </a-modal>
-    <my-iframe ref="MyIframe" :editorJumpUrl="editorJumpUrl"></my-iframe>
+    <outerForm-check ref="outerFormCheck" @refreshData="handleSearch" ></outerForm-check>
   </div>
 </template>
 
@@ -209,12 +209,13 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
-import MyIframe from '../../share/modal/MyIframe'
+import outerFormCheck from '../../share/modal/OuterFormCheck'
 import {getEditorJumpUrl,getProjctManageUrl}from '../../../url.config'
+import { getAction } from '@/api/manage'
 export default {
   name: 'todo-manage',
   mixins: [activitiMixin, JeecgListMixin],
-  components: { JSelectUserByDep, MyIframe },
+  components: { JSelectUserByDep, outerFormCheck },
   data() {
     return {
       editorJumpUrl: '', //申请详情跳转外部项目的地址
@@ -278,7 +279,8 @@ export default {
         getNode: '/activiti_process/getNode/',
         getBackList: '/actTask/getBackList/',
         passAll: '/actTask/passAll/',
-        backAll: '/actTask/backAll/'
+        backAll: '/actTask/backAll/',
+        outformViewUrl:"/actBusiness/external/getViewUrl",
       },
       /*历史*/
       modalLsVisible: false,
@@ -422,9 +424,10 @@ export default {
         //其他项目的表单流程
         var id = r.tableId //项目管理合同数据id
         //打开MyIframe弹框
-        this.$refs.MyIframe.editorVisible = true
+        //this.$refs.MyIframe.editorVisible = true
         //并传入地址参数
-        this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        //this.$refs.MyIframe.editorJumpUrlMy = getProjctManageUrl()+'/contract-process-view?id=' + id
+        this.showOuterFormViewDlg(r.tableId, '业务流程审批：' + r.processName, r);
       } else if (r.routeName.indexOf('自定义') != -1) {
         //自定义的表单流程
         this.lcModa.disabled = true
@@ -613,7 +616,29 @@ export default {
           })
         }
       })
-    }
+    },
+    showOuterFormViewDlg(tableId, title, processData){
+      getAction(this.url.outformViewUrl,{tableId:tableId}).then(res=>{
+          if (res.success){
+            var url = res.result.url;
+            var param = res.result.param;
+            url = url+"?"+this.jsonToUrlParam(param);
+
+            this.$refs.outerFormCheck.openDialog(url, title, processData);
+          }else{
+              this.$message.error(res.message);
+          }        
+      });
+    },
+    jsonToUrlParam(query){
+      var tmpArr = [];
+      for (var i in query){
+        var key = encodeURIComponent(i);
+        var value = encodeURIComponent(query[i]);
+        tmpArr.push(key+"="+value);
+      }
+      return tmpArr.join("&");
+    },
   }
 }
 </script>

src/views/form-design/outform/TbTableInfoList.vue

@@ -0,0 +1,164 @@
+<template>
+  <a-card :bordered="false">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="表单名">
+              <a-input placeholder="请输入表单名" v-model="queryParam.text"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+      </a-dropdown>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+        <span slot="type" slot-scope="text, record">
+          <a-tag color="cyan" v-if="record.type=='1'">PC端</a-tag>
+          <a-tag color="blue" v-if="record.type=='2'">钉钉端</a-tag>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <tbTableInfo-modal ref="modalForm" @ok="modalFormOk"></tbTableInfo-modal>
+  </a-card>
+</template>
+
+<script>
+  import TbTableInfoModal from './modules/TbTableInfoModal'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: "TbTableInfoList",
+    mixins:[JeecgListMixin],
+    components: {
+      TbTableInfoModal
+    },
+    data () {
+      return {
+        queryParam:{
+          outform: 1
+        },
+        description: '表单模板管理页面',
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key:'rowIndex',
+            width:60,
+            align:"center",
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+           },
+		   {
+            title: '表单名',
+            align:"center",
+            dataIndex: 'text'
+           },
+		   {
+            title: '列表页面',
+            align:"left",
+            dataIndex: 'listurl'
+           },
+		   {
+            title: '查看页面',
+            align:"left",
+            dataIndex: 'viewurl'
+           },
+		   {
+            title: '审批回调页面',
+            align:"left",
+            dataIndex: 'seturl'
+           },
+           {
+          title: '表单类型',
+          dataIndex: 'type',
+          align: 'left',
+          scopedSlots: { customRender: 'type' }
+        },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align:"center",
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+		url: {
+          list: "/activiti/tbTableInfoOuter/list",
+          delete: "/activiti/tbTableInfoOuter/delete",
+          deleteBatch: "/activiti/tbTableInfoOuter/deleteBatch",
+          exportXlsUrl: "activiti/tbTableInfoOuter/exportXls",
+          importExcelUrl: "activiti/tbTableInfoOuter/importExcel",
+       },
+    }
+  },
+  computed: {
+    importExcelUrl: function(){
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    }
+  },
+    methods: {
+     
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

src/views/form-design/outform/modules/TbTableInfoModal.vue

@@ -0,0 +1,144 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+      
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="表单名">
+          <a-input placeholder="请输入表单名" v-decorator="['text', validatorRules.text]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="列表页面URL">
+          <a-input placeholder="请输入列表页面URL" v-decorator="['listurl', validatorRules.listurl ]"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="查看页面URL">
+          <a-input placeholder="请输入查看页面URL" v-decorator="['viewurl', validatorRules.viewurl ]"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="审批回调URL">
+          <a-input placeholder="请输入审批回调URL" v-decorator="['seturl', {}]"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { httpAction } from '@/api/manage'
+  import pick from 'lodash.pick'
+  import moment from "moment"
+
+  export default {
+    name: "TbTableInfoModal",
+    data () {
+      return {
+        title:"操作",
+        visible: false,
+        model: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+        validatorRules:{
+        text:{rules: [{ required: true, message: '请输入表单名!' }]},
+        listurl:{rules: [{ required: true, message: '请输入列表页面URL!' }]},
+        viewurl:{rules: [{ required: true, message: '请输入查看页面URL!' }]},
+        },
+        url: {
+          add: "/activiti/tbTableInfoOuter/add",
+          edit: "/activiti/tbTableInfoOuter/edit",
+        },
+      }
+    },
+    created () {
+    },
+    methods: {
+      add () {
+        this.edit({});
+      },
+      edit (record) {
+        this.form.resetFields();
+        this.model = Object.assign({}, record);
+        this.visible = true;
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model,'id','text','routeName','delFlag','type','listurl','viewurl','seturl'))
+		  //时间格式化
+        });
+
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        const that = this;
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true;
+            let httpurl = '';
+            let method = '';
+            if(!this.model.id){
+              httpurl+=this.url.add;
+              method = 'post';
+            }else{
+              httpurl+=this.url.edit;
+               method = 'put';
+            }
+            let formData = Object.assign(this.model, values);
+            //时间格式化
+            
+            console.log(formData)
+            httpAction(httpurl,formData,method).then((res)=>{
+              if(res.success){
+                that.$message.success(res.message);
+                that.$emit('ok');
+              }else{
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+
+
+
+          }
+        })
+      },
+      handleCancel () {
+        this.close()
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/process-center/applyListOuter.vue

@@ -0,0 +1,49 @@
+<template>
+    <iframe :src="src" id="mainframe"  width="100%" :height="height" style="border:0"/>
+</template>
+<script>
+import { getAction } from '@/api/manage'
+import { ACCESS_TOKEN } from "@/store/mutation-types"
+export default {
+    data(){
+        return {
+            src:"",
+            height:"400px",
+            url:{
+                get:"/activiti/tbTableInfoOuter/queryByText",
+            },
+            queryParam:{
+                text:"",
+            },
+        }
+    },
+    created(){
+        this.height = (document.body.scrollHeight-190)+"px";
+        var index = this.$route.path.lastIndexOf("/");
+        this.queryParam.text = this.$route.path.substr(index+1);
+        this.loadSrc();
+        
+    },
+    mounted(){
+        window.startApply = this.startApply;
+    },
+    methods:{
+        loadSrc(){
+            getAction(this.url.get,this.queryParam).then(res=>{
+                if (res.success){
+                    this.src=res.result.listurl;
+                }else{
+                    this.$message.error(res.message);
+                }        
+            });
+        },
+        startApply(param){
+            this.$router.push({
+                path:"/process-center/applyouter",
+                query:param
+            })
+
+        }
+    }
+}
+</script>

src/views/process-center/applyOuter.vue

@@ -0,0 +1,211 @@
+<template>
+  <a-card :title="title">
+    <template #extra>
+      <a-button type="primary" @click="handleOk" :loading="btnLoading" :disabled="btnLoading">发起申请</a-button>
+      <a-button style="margin-left:10px" @click="handleCancel">取消</a-button>
+
+    </template>
+    <iframe :src="viewSrc" id="viewFrame"  width="100%" :height="height" style="border:0;background-color:#fff"/>
+    <a-modal title="提交申请" v-model="modalVisible" :mask-closable="false" :width="500" :footer="null">
+      <div v-if="modalVisible">
+        <a-form-item label="选择审批人" v-show="showAssign">
+          <a-select
+            style="width: 80%"
+            v-model="form.assignees"
+            placeholder="请选择"
+            mode="multiple"
+            :allowClear="true"
+          >
+            <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">
+              {{
+              item.realname
+              }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="下一审批人" v-show="isGateway">
+          <a-alert type="info" showIcon message="分支网关处不支持自定义选择下一审批人，将自动下发给所有可审批人。">，将发送给下一节点所有人</a-alert>
+        </a-form-item>
+        <a-form-item label="优先级" prop="priority">
+          <a-select
+            v-model="form.priority"
+            placeholder="请选择"
+            :allowClear="true"
+            style="width: 100%"
+          >
+            <a-select-option :value="0">普通</a-select-option>
+            <a-select-option :value="1">重要</a-select-option>
+            <a-select-option :value="2">紧急</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="消息通知">
+          <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
+        </a-form-item>
+        <div slot="footer">
+          <a-button type="text" @click="modalVisible = false">取消</a-button>
+          <div style="display:inline-block;width: 20px;"></div>
+          <a-button type="primary" :disabled="submitLoading" @click="applySubmit">提交</a-button>
+        </div>
+      </div>
+    </a-modal>
+  </a-card>
+  
+  
+</template>
+<script>
+import { getAction, postAction } from '@/api/manage'
+export default {
+    inject:['closeCurrent'],
+    data(){
+        return {
+            visible:true,
+            title:"",
+            viewSrc:"",
+            height:"300px",
+            btnLoading:false,
+            url:{
+                get:"/activiti/tbTableInfoOuter/queryByText", // 获取外部表单定义
+                apply:"/actBusiness/addOuter",  // 保存申请
+                getFirstNode: '/actProcessIns/getFirstNode',// 获取第一个节点
+                submitApply: '/actBusiness/external/apply',// 提交申请
+            },
+            query:{},
+            modalVisible:false,
+            showAssign:false,
+            assigneeList:[],
+            isGateway:false,
+            form:{
+            },
+            submitLoading:false,
+            procDefId:"",
+            error:"",
+        }
+    },
+    created(){
+      this.query = this.$route.query;
+      this.height=(document.body.scrollHeight-300)+"px";
+      this.title = "发起流程："+this.query.type;
+      this.gotoView();
+    },
+    mounted(){
+        
+    },
+    methods:{
+        gotoView(){
+            getAction(this.url.get,{text:this.query.type}).then(res=>{
+                if (res.success){
+                    this.viewSrc=res.result.viewurl+"?"+this.jsonToUrlParam();
+                }else{
+                    this.$message.error(res.message);
+                }        
+            });
+        },
+        handleCancel(){
+          this.closeCurrent();
+        },
+        handleOk(){
+          this.btnLoading = true;
+          postAction(this.url.apply,this.query).then(res=>{
+            this.btnLoading = false;
+            if (res.success){
+              this.form = res.result;
+              this.form.priority = 0;
+              this.form.assignees = [];
+              this.form.sendMessage = true;
+              this.showSubmitDlg();
+            }else{
+                this.$message.error(res.message);
+            }       
+
+          });
+
+        },
+        jsonToUrlParam(){
+          var tmpArr = [];
+          for (var i in this.query){
+            var key = encodeURIComponent(i);
+            var value = encodeURIComponent(this.query[i]);
+            tmpArr.push(key+"="+value);
+          }
+          return tmpArr.join("&");
+        },
+        showSubmitDlg(){
+          // 加载审批人
+          getAction(this.url.getFirstNode, { procDefId: this.form.procDefId }).then(res => {
+            if (res.success) {
+              if (res.result.type == 3 || res.result.type == 4) {
+                this.isGateway = true;
+                this.modalVisible = true;
+                this.showAssign = false;
+                this.error = '';
+                return;
+              }
+              this.isGateway = false;
+              if (res.result.users && res.result.users.length > 0) {
+                this.error = '';
+                this.assigneeList = res.result.users;
+                // 默认勾选
+                let ids = []
+                res.result.users.forEach(e => {
+                  ids.push(e.username)
+                })
+                this.form.assignees = ids
+                this.showAssign = true
+              } else {
+                this.form.assignees = []
+                this.showAssign = true
+                this.error = '审批节点未分配候选审批人员，请联系管理员！'
+              }
+              if (this.error) {
+                this.$message.error(this.error)
+                return;
+              }
+              this.modalVisible = true
+            } else {
+              this.$message.error(res.message)
+            }
+          })
+        },
+        applySubmit() {
+          if (this.showAssign && this.form.assignees.length < 1) {
+            this.error = '请至少选择一个审批人'
+            this.$message.error(this.error)
+            return
+          } else {
+            this.error = ''
+          }
+          this.submitLoading = true
+          var params = Object.assign({}, this.form)
+          params.assignees = params.assignees.join(',')
+          postAction(this.url.submitApply, params)
+            .then(res => {
+              if (res.success) {
+                this.modalVisible = false;
+                this.$message.success('提交成功,请等待审批',2).then(()=>{
+                  this.closeCurrent();
+                });
+                
+              } else {
+                this.$message.error(res.message)
+                
+              }
+            })
+            .finally(() => (this.submitLoading = false))
+        },
+    }
+}
+</script>
+<style scoped>
+.header{
+  color: #666;
+  background: #fff;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bolder;
+}
+.footer{
+  color: #666;
+  background: #fff;
+  text-align: center;
+}
+</style>

src/views/system/RoleUserList.vue

@@ -79,6 +79,9 @@
                     <a>删除</a>
                   </a-popconfirm>
                 </a-menu-item>
+                <a-menu-item>
+                  <a @click="handleApply(record)">发起审批</a>
+                </a-menu-item>
               </a-menu>
             </a-dropdown>
         </span>
@@ -301,7 +304,6 @@
             width: 120
           }],
 
-
         url: {
           list: '/sys/role/list',
           delete: '/sys/role/delete',
@@ -532,6 +534,9 @@
       handlePerssion(roleId){
         this.$refs.modalUserRole.show(roleId);
       },
+      handleApply(record){
+        window.parent.startApply({type:"角色申请",id:record.id});
+      },
     }
   }
 </script>