From 649929c1c0ae6923e74f69176630710b8816bd36 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 13:49:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=94=B3=E8=AF=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B-=E5=A4=84=E7=90=86=E5=8A=9F=E8=83=BD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2-=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activiti/demo/abilitydemandapply-new.vue  | 417 ++++++++++++++++
 .../activiti/demo/abilitydemandapply.vue      | 448 ++++--------------
 .../demo/abilitydemandapply_before.vue        | 175 -------
 .../demo/correction-process2-before.vue       | 136 ++++++
 .../activiti/demo/correction-process2.vue     | 439 ++++++++++++++---
 5 files changed, 1016 insertions(+), 599 deletions(-)
 create mode 100644 back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
 delete mode 100644 back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
 create mode 100644 back/src/views/modules/activiti/demo/correction-process2-before.vue

diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue b/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
new file mode 100644
index 00000000..5b387ef7
--- /dev/null
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply-new.vue
@@ -0,0 +1,417 @@
+<!--  流程业务表单   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+
+  <!-- 申请人详情 -->
+  <div>
+     <h3>申请人信息</h3>
+    <div class="big-BOX">
+      <p>
+        <span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
+         <span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
+         <span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
+      </p>
+       <p>
+         <span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
+       <span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
+      <span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
+      </p>
+      <p>
+      <span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
+      </p>
+      <p>
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
+
+      </p>
+    </div>
+  </div>
+
+  <!-- 申请能力 -->
+  <div class="AbilityApply">
+     <h3>申请能力</h3>
+    <ul  v-for="item in dataList" :key="item.id">
+      <li class="title">{{item.address}}</li>
+      <li class="clearfix">
+            <img
+              src="~@/assets/img/imgLeft.png"
+            />
+            <div>
+            <h2>{{item.name}}<span>{{item.type}}</span></h2>
+            <p>{{item.describe}}</p>
+            </div>
+      </li>
+    </ul>
+  </div>
+    <!--  流程综合组件   -->
+  <!--   <ren-process-multiple
+      v-if="processVisible"
+      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
+      saveFormUrl="/processForm/tabilityapplication"
+      dataFormName="dataForm"
+      ref="renProcessMultiple"
+    ></ren-process-multiple> -->
+
+    <!-- 审批 -->
+    <div class="agreeOr">
+      <h3>审批</h3>
+      <div>
+        <el-radio-group v-model="agreeOrList" style="width:230px;">
+          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
+          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
+        </el-radio-group>
+        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意内容"></el-input>
+        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回内容"></el-input>
+         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
+      </div>
+    </div>
+
+ <!--  流程详情   -->
+    <ren-process-detail-import></ren-process-detail-import>
+  </el-card>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+import qs from 'qs'
+import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
+export default {
+  // 注入公共方法
+  mixins: [processModule],
+  data () {
+    return {
+      visible: true,
+      // 表单属性是否可编辑
+      // fieldDisabled: false,
+      // dataForm: {
+      //   id: '',
+      //   user: '',
+      //   phone: '',
+      //   unit: '',
+      //   area: '',
+      //   system: '',
+      //   scene: '',
+      //   basis: ''
+      // }
+      dataForm: {
+        id: '',
+        content: []
+      },
+      dataList: [
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        }
+      ],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意'
+    }
+  },
+  created () {
+    // 将业务KEY赋值给表单
+    this.dataForm.id = this.$route.params.businessKey
+    console.log(this.dataForm, 'ela')
+    this.init()
+    // 流程回调
+    var callbacks = {
+      startProcessSuccessCallback: this.closeCurrentTab,
+      startProcessErrorCallback: this.startProcessErrorCallback,
+      taskHandleSuccessCallback: this.closeCurrentTab,
+      taskHandleErrorCallback: this.taskHandleErrorCallback,
+      formSaveSuccessCallback: null,
+      formSaveErrorCallback: null
+    }
+    // 初始化综合组件
+    this.initProcessMultiple(callbacks)
+  },
+  computed: {
+    // dataRule () {
+    //   return {
+    //     inputAgree: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     inputNo: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ]
+    //   }
+    // }
+  },
+  components: {
+    RenProcessDetailImport
+  },
+  methods: {
+    init () {
+      // this.visible = true
+      this.$nextTick(() => {
+        // this.$refs.dataForm.resetFields()
+        if (this.dataForm.id) {
+          // 如业务KEY已存在，不允许编辑
+          // this.fieldDisabled = true
+          this.getInfo()
+          console.log(this.dataForm, 'init')
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/demanData/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data)
+            return this.$message.error(res.msg)
+          }
+          console.log(res.data, 'elas')
+          this.dataForm.content = res.data
+          console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+    // 申请能力
+    applyData () {
+      this.$http
+        .get(`/resource/select/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data, 'wh')
+            // return this.$message.error(res.msg)
+          }
+          // console.log(res.data, 'elas')
+          // this.dataForm.content = res.data
+          // console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+
+    // 同意与退回
+    agreeOrNot () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm', this.dataForm)
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res)
+            this.$message.error(res.msg)
+          }
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+    },
+    // 启动流程出错回调
+    startProcessErrorCallback (data) {
+      console.log(data)
+    },
+    // 任务处理出错回调
+    taskHandleErrorCallback (data) {}
+  },
+  mounted () {
+    this.applyData()
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .big-BOX{
+  background:rgba(244,245,248,0.8);
+  padding:24px;
+  h3{
+    font-size:16px;
+    color:#212121
+  }
+  p{
+    width:78%;
+    display:flex;
+    justify-content: space-between;
+    color:#212121;
+    font-size:14px;
+    span{
+      display:inline-block;
+      margin-left:8px;
+      line-height:32px;
+      span{
+        font-weight:bold;
+      }
+    }
+  }
+  p:last-of-type{
+    margin-top:16px;
+    width:100%;
+    span{
+      display:flex;
+      span{
+      padding-left:12px;
+      height:32px;
+      background:rgba(232,234,239,1);
+      border-radius:2px;
+      button{
+        background:unset;
+        border:0;
+        color:#0558e1;
+        font-size:14px;
+      }
+      }
+    }
+  }
+}
+::v-deep .AbilityApply{
+    margin-top:32px;
+
+  h3{
+     font-size:16px;
+    color:#212121;
+    border-bottom:1px solid #dddee1;
+    padding-bottom:10px;
+  }
+  ul{
+    padding-left: 0px;
+     li{
+      list-style:none;
+    padding: 30px 0;
+    border-bottom: 1px solid #dddee1;
+    display:flex;
+    img{
+      width:100px;
+      height:100px;
+    }
+    div{
+      margin-left:16px;
+          display: flex;
+    flex-direction: column;
+    justify-content: center;
+    h2{
+      margin-bottom:20px;
+      font-size:20px;
+      color:#000;
+      display:flex;
+      span{
+        display:block;
+        font-size:14px;
+        color:#ffffff;
+        margin-left:8px;
+        background:rgba(0,184,230,0.8);
+        display: flex;
+    align-items: center;
+    padding: 0 5px;
+    border-radius: 4px;
+      }
+    }
+     p{
+      margin-bottom:0;
+    }
+    }
+    }
+    .clearfix:after{
+      display:block;
+      content:"";
+      clear:both;
+    }
+    .title{
+      color:#0558e1;
+      font-size:18px;
+      padding-bottom:0;
+    border-bottom: 0;
+
+    }
+     .title:before {
+           content: "";
+           width: 6px;
+           height: 6px;
+           display: inline-block;
+           border-radius: 50%;
+           background: #0558e1;
+           vertical-align: middle;
+          margin-right: 10px;
+    margin-top: 6px;
+           }
+
+  }
+}
+::v-deep .agreeOr>div{
+  display:flex;
+      align-items: center;
+  .el-input{
+    margin-right: 10px;
+    margin-left: 32px;
+  }
+
+}
+::v-deep   .agreeOr>div:last-of-type{
+    margin-top:15px;
+  }
+  .blueAll{
+    ::v-deep .el-radio-button__inner{
+    width:80px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+  }
+  .inputBule{
+     width:55px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+   ::v-deep .is-active{
+   background:#ffffff;
+    color:#0558e1;
+  }
+  .redAll{
+    margin-left:10px;
+    ::v-deep .el-radio-button__inner{
+    width:80px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+   border:1px solid #e83a48;
+    background:#ffffff;
+    color:#e83a48;
+    margin-left:10px;
+    }
+    :v-deep .el-radio-button__inner{
+      box-shadow: unset;
+    }
+  }
+  .blueInput{
+    width:55px;
+  }
+</style>
diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply.vue b/back/src/views/modules/activiti/demo/abilitydemandapply.vue
index e17e29db..94acd632 100644
--- a/back/src/views/modules/activiti/demo/abilitydemandapply.vue
+++ b/back/src/views/modules/activiti/demo/abilitydemandapply.vue
@@ -1,134 +1,106 @@
 <!--  流程业务表单   -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
-
-  <!-- 申请人详情 -->
-  <div>
-     <h3>申请人信息</h3>
-    <div class="big-BOX">
-      <p>
-        <span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
-         <span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
-         <span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
-      </p>
-       <p>
-         <span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
-       <span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
-      <span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
-      </p>
-      <p>
-      <span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
-      </p>
-      <p>
-      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
-
-      </p>
-    </div>
-  </div>
-
-  <!-- 申请能力 -->
-  <div class="AbilityApply">
-     <h3>申请能力</h3>
-    <ul  v-for="item in dataList" :key="item.id">
-      <li class="title">{{item.address}}</li>
-      <li class="clearfix">
-            <img
-              src="~@/assets/img/imgLeft.png"
-            />
-            <div>
-            <h2>{{item.name}}<span>{{item.type}}</span></h2>
-            <p>{{item.describe}}</p>
-            </div>
-      </li>
-    </ul>
-  </div>
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item label="申请人" prop="user">
+        <el-input
+          v-model="dataForm.applyUserName"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请人"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="申请电话" prop="phone">
+        <el-input
+          v-model="dataForm.applyUserPhone"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请人电话"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="申请单位" prop="unit">
+        <el-input
+          v-model="dataForm.applyUserDeptName"
+          :disabled="fieldDisabled"
+          placeholder="请输入申请单位"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求标题" prop="area">
+        <el-input
+          v-model="dataForm.demandSubject"
+          :disabled="fieldDisabled"
+          placeholder="需求标题"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求类型" prop="system">
+        <el-input
+          v-model="dataForm.detailsType"
+          :disabled="fieldDisabled"
+          placeholder="需求类型"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="应用领域" prop="scene">
+        <el-input
+          v-model="dataForm.detailsField"
+          :disabled="fieldDisabled"
+          placeholder="应用领域"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="需求描述" prop="basis">
+         <el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
+        <el-input
+          v-model="dataForm.demandDetails"
+          :disabled="fieldDisabled"
+          placeholder="需求描述"
+        ></el-input>
+         </el-tooltip>
+      </el-form-item>
+      <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
+          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+      </el-form-item>
+    </el-form>
     <!--  流程综合组件   -->
-  <!--   <ren-process-multiple
+    <ren-process-multiple
       v-if="processVisible"
       updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
       saveFormUrl="/processForm/tabilityapplication"
       dataFormName="dataForm"
       ref="renProcessMultiple"
-    ></ren-process-multiple> -->
-
-    <!-- 审批 -->
-    <div class="agreeOr">
-      <h3>审批</h3>
-      <div>
-        <el-radio-group v-model="agreeOrList" style="width:230px;">
-          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
-          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
-        </el-radio-group>
-        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意内容"></el-input>
-        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回内容"></el-input>
-         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
-      </div>
-    </div>
-
- <!--  流程详情   -->
-    <ren-process-detail-import></ren-process-detail-import>
+    ></ren-process-multiple>
   </el-card>
 </template>
 
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
-import qs from 'qs'
-import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
   // 注入公共方法
   mixins: [processModule],
   data () {
     return {
-      visible: true,
+      visible: false,
       // 表单属性是否可编辑
-      // fieldDisabled: false,
-      // dataForm: {
-      //   id: '',
-      //   user: '',
-      //   phone: '',
-      //   unit: '',
-      //   area: '',
-      //   system: '',
-      //   scene: '',
-      //   basis: ''
-      // }
+      fieldDisabled: false,
       dataForm: {
         id: '',
-        content: []
-      },
-      dataList: [
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        },
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        },
-        {
-          // img: '~@/assets/img/imgLeft.png',
-          address: '青岛市应急管理局',
-          name: '组件名称',
-          type: '组件服务',
-          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
-        }
-      ],
-      inputAgree: '',
-      inputNo: '',
-      agreeOrList: '同意'
+        user: '',
+        phone: '',
+        unit: '',
+        area: '',
+        system: '',
+        scene: '',
+        basis: ''
+      }
     }
   },
   created () {
     // 将业务KEY赋值给表单
     this.dataForm.id = this.$route.params.businessKey
-    console.log(this.dataForm, 'ela')
+    console.log(this.$route.params)
     this.init()
     // 流程回调
     var callbacks = {
@@ -143,30 +115,37 @@ export default {
     this.initProcessMultiple(callbacks)
   },
   computed: {
-    // dataRule () {
-    //   return {
-    //     inputAgree: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ],
-    //     inputNo: [
-    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-    //     ]
-    //   }
-    // }
-  },
-  components: {
-    RenProcessDetailImport
+    dataRule () {
+      return {
+        user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '请输入申请人电话', trigger: 'blur' },
+          {
+            type: 'string',
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的电话号码',
+            trigger: 'blur'
+          }
+        ],
+        unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
+        area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
+        system: [
+          { required: true, message: '请输入申请应用', trigger: 'blur' }
+        ],
+        scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
+        basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
+      }
+    }
   },
   methods: {
     init () {
-      // this.visible = true
+      this.visible = true
       this.$nextTick(() => {
-        // this.$refs.dataForm.resetFields()
+        this.$refs.dataForm.resetFields()
         if (this.dataForm.id) {
           // 如业务KEY已存在，不允许编辑
-          // this.fieldDisabled = true
+          this.fieldDisabled = true
           this.getInfo()
-          console.log(this.dataForm, 'init')
         }
       })
     },
@@ -176,242 +155,21 @@ export default {
         .get(`/demanData/${this.dataForm.id}`)
         .then(({ data: res }) => {
           if (res.code !== 0) {
-            console.log(res.data)
             return this.$message.error(res.msg)
           }
-          console.log(res.data, 'elas')
-          this.dataForm.content = res.data
-          console.log(this.dataForm, 'ela')
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
         })
         .catch(() => {})
     },
-    // 申请能力
-    applyData () {
-      this.$http
-        .get(`/resource/select/${this.dataForm.id}`)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            console.log(res.data, 'wh')
-            // return this.$message.error(res.msg)
-          }
-          // console.log(res.data, 'elas')
-          // this.dataForm.content = res.data
-          // console.log(this.dataForm, 'ela')
-        })
-        .catch(() => {})
-    },
-
-    // 同意与退回
-    agreeOrNot () {
-      if (this.agreeOrList === '同意') {
-        console.log('this.dataForm', this.dataForm)
-        const params = qs.stringify({
-          taskId: this.dataForm.content.instanceId,
-          comment: this.inputAgree
-        })
-        console.log(params)
-        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            console.log(res)
-            this.$message.error(res.msg)
-          }
-        }).catch(() => {})
-      } else if (this.agreeOrList === '退回') {
-        const params = qs.stringify({
-          taskId: this.dataForm.content.instanceId,
-          comment: this.inputNo
-        })
-        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            this.$message.error(res.msg)
-          }
-        })
-      }
-    },
     // 启动流程出错回调
     startProcessErrorCallback (data) {
       console.log(data)
     },
     // 任务处理出错回调
     taskHandleErrorCallback (data) {}
-  },
-  mounted () {
-    this.applyData()
   }
 }
 </script>
-<style scoped lang="scss">
-::v-deep .big-BOX{
-  background:rgba(244,245,248,0.8);
-  padding:24px;
-  h3{
-    font-size:16px;
-    color:#212121
-  }
-  p{
-    width:78%;
-    display:flex;
-    justify-content: space-between;
-    color:#212121;
-    font-size:14px;
-    span{
-      display:inline-block;
-      margin-left:8px;
-      line-height:32px;
-      span{
-        font-weight:bold;
-      }
-    }
-  }
-  p:last-of-type{
-    margin-top:16px;
-    width:100%;
-    span{
-      display:flex;
-      span{
-      padding-left:12px;
-      height:32px;
-      background:rgba(232,234,239,1);
-      border-radius:2px;
-      button{
-        background:unset;
-        border:0;
-        color:#0558e1;
-        font-size:14px;
-      }
-      }
-    }
-  }
-}
-::v-deep .AbilityApply{
-    margin-top:32px;
-
-  h3{
-     font-size:16px;
-    color:#212121;
-    border-bottom:1px solid #dddee1;
-    padding-bottom:10px;
-  }
-  ul{
-    padding-left: 0px;
-     li{
-      list-style:none;
-    padding: 30px 0;
-    border-bottom: 1px solid #dddee1;
-    display:flex;
-    img{
-      width:100px;
-      height:100px;
-    }
-    div{
-      margin-left:16px;
-          display: flex;
-    flex-direction: column;
-    justify-content: center;
-    h2{
-      margin-bottom:20px;
-      font-size:20px;
-      color:#000;
-      display:flex;
-      span{
-        display:block;
-        font-size:14px;
-        color:#ffffff;
-        margin-left:8px;
-        background:rgba(0,184,230,0.8);
-        display: flex;
-    align-items: center;
-    padding: 0 5px;
-    border-radius: 4px;
-      }
-    }
-     p{
-      margin-bottom:0;
-    }
-    }
-    }
-    .clearfix:after{
-      display:block;
-      content:"";
-      clear:both;
-    }
-    .title{
-      color:#0558e1;
-      font-size:18px;
-      padding-bottom:0;
-    border-bottom: 0;
-
-    }
-     .title:before {
-           content: "";
-           width: 6px;
-           height: 6px;
-           display: inline-block;
-           border-radius: 50%;
-           background: #0558e1;
-           vertical-align: middle;
-          margin-right: 10px;
-    margin-top: 6px;
-           }
-
-  }
-}
-::v-deep .agreeOr>div{
-  display:flex;
-      align-items: center;
-  .el-input{
-    margin-right: 10px;
-    margin-left: 32px;
-  }
-
-}
-::v-deep   .agreeOr>div:last-of-type{
-    margin-top:15px;
-  }
-  .blueAll{
-    ::v-deep .el-radio-button__inner{
-    width:80px;
-    height:32px;
-    line-height:32px;
-    padding:0;
-    border-radius:2px;
-    background:#0558e1;
-    color:#ffffff;
-    border:1px solid #0558e1;
-  }
-  }
-  .inputBule{
-     width:55px;
-    height:32px;
-    line-height:32px;
-    padding:0;
-    border-radius:2px;
-    background:#0558e1;
-    color:#ffffff;
-    border:1px solid #0558e1;
-  }
-   ::v-deep .is-active{
-   background:#ffffff;
-    color:#0558e1;
-  }
-  .redAll{
-    margin-left:10px;
-    ::v-deep .el-radio-button__inner{
-    width:80px;
-    height:32px;
-    line-height:32px;
-    padding:0;
-    border-radius:2px;
-   border:1px solid #e83a48;
-    background:#ffffff;
-    color:#e83a48;
-    margin-left:10px;
-    }
-    :v-deep .el-radio-button__inner{
-      box-shadow: unset;
-    }
-  }
-  .blueInput{
-    width:55px;
-  }
-</style>
diff --git a/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue b/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
deleted file mode 100644
index 17fec47b..00000000
--- a/back/src/views/modules/activiti/demo/abilitydemandapply_before.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--  流程业务表单   -->
-<template>
-  <el-card shadow="never" class="aui-card--fill">
-    <el-form
-      :model="dataForm"
-      :rules="dataRule"
-      ref="dataForm"
-      @keyup.enter.native="dataFormSubmitHandle()"
-      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
-    >
-      <el-form-item label="申请人" prop="user">
-        <el-input
-          v-model="dataForm.applyUserName"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请人"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="申请电话" prop="phone">
-        <el-input
-          v-model="dataForm.applyUserPhone"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请人电话"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="申请单位" prop="unit">
-        <el-input
-          v-model="dataForm.applyUserDeptName"
-          :disabled="fieldDisabled"
-          placeholder="请输入申请单位"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求标题" prop="area">
-        <el-input
-          v-model="dataForm.demandSubject"
-          :disabled="fieldDisabled"
-          placeholder="需求标题"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求类型" prop="system">
-        <el-input
-          v-model="dataForm.detailsType"
-          :disabled="fieldDisabled"
-          placeholder="需求类型"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="应用领域" prop="scene">
-        <el-input
-          v-model="dataForm.detailsField"
-          :disabled="fieldDisabled"
-          placeholder="应用领域"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="需求描述" prop="basis">
-         <el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
-        <el-input
-          v-model="dataForm.demandDetails"
-          :disabled="fieldDisabled"
-          placeholder="需求描述"
-        ></el-input>
-         </el-tooltip>
-      </el-form-item>
-      <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
-          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
-      </el-form-item>
-    </el-form>
-    <!--  流程综合组件   -->
-    <ren-process-multiple
-      v-if="processVisible"
-      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
-      saveFormUrl="/processForm/tabilityapplication"
-      dataFormName="dataForm"
-      ref="renProcessMultiple"
-    ></ren-process-multiple>
-  </el-card>
-</template>
-
-<script>
-// 引入工作流公共方法
-import processModule from '@/mixins/process-module'
-export default {
-  // 注入公共方法
-  mixins: [processModule],
-  data () {
-    return {
-      visible: false,
-      // 表单属性是否可编辑
-      fieldDisabled: false,
-      dataForm: {
-        id: '',
-        user: '',
-        phone: '',
-        unit: '',
-        area: '',
-        system: '',
-        scene: '',
-        basis: ''
-      }
-    }
-  },
-  created () {
-    // 将业务KEY赋值给表单
-    this.dataForm.id = this.$route.params.businessKey
-    console.log(this.$route.params)
-    this.init()
-    // 流程回调
-    var callbacks = {
-      startProcessSuccessCallback: this.closeCurrentTab,
-      startProcessErrorCallback: this.startProcessErrorCallback,
-      taskHandleSuccessCallback: this.closeCurrentTab,
-      taskHandleErrorCallback: this.taskHandleErrorCallback,
-      formSaveSuccessCallback: null,
-      formSaveErrorCallback: null
-    }
-    // 初始化综合组件
-    this.initProcessMultiple(callbacks)
-  },
-  computed: {
-    dataRule () {
-      return {
-        user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
-        phone: [
-          { required: true, message: '请输入申请人电话', trigger: 'blur' },
-          {
-            type: 'string',
-            pattern: /^1[3456789]\d{9}$/,
-            message: '请输入正确的电话号码',
-            trigger: 'blur'
-          }
-        ],
-        unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
-        area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
-        system: [
-          { required: true, message: '请输入申请应用', trigger: 'blur' }
-        ],
-        scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
-        basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    init () {
-      this.visible = true
-      this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
-        if (this.dataForm.id) {
-          // 如业务KEY已存在，不允许编辑
-          this.fieldDisabled = true
-          this.getInfo()
-        }
-      })
-    },
-    // 获取信息
-    getInfo () {
-      this.$http
-        .get(`/demanData/${this.dataForm.id}`)
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          this.dataForm = {
-            ...this.dataForm,
-            ...res.data
-          }
-        })
-        .catch(() => {})
-    },
-    // 启动流程出错回调
-    startProcessErrorCallback (data) {
-      console.log(data)
-    },
-    // 任务处理出错回调
-    taskHandleErrorCallback (data) {}
-  }
-}
-</script>
diff --git a/back/src/views/modules/activiti/demo/correction-process2-before.vue b/back/src/views/modules/activiti/demo/correction-process2-before.vue
new file mode 100644
index 00000000..ccec2701
--- /dev/null
+++ b/back/src/views/modules/activiti/demo/correction-process2-before.vue
@@ -0,0 +1,136 @@
+<!--  流程业务表单   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+          <el-form-item label="申请人" prop="user">
+              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
+          </el-form-item>
+          <el-form-item label="申请电话" prop="phone">
+              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
+          </el-form-item>
+          <el-form-item label="申请单位" prop="unit">
+              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="所在地区" prop="area">
+              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
+          </el-form-item> -->
+          <el-form-item label="申请应用" prop="system">
+              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
+          </el-form-item>
+          <el-form-item label="应用场景" prop="scene">
+              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
+          </el-form-item>
+          <el-form-item label="申请依据" prop="basis">
+              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
+          </el-form-item>
+          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
+              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
+          </el-form-item>
+      </el-form>
+      <!--  流程综合组件   -->
+      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
+  </el-card>
+</template>
+
+<script>
+// 引入工作流公共方法
+import processModule from '@/mixins/process-module'
+export default {
+  // 注入公共方法
+  mixins: [processModule],
+  data () {
+    return {
+      visible: false,
+      // 表单属性是否可编辑
+      fieldDisabled: false,
+      dataForm: {
+        id: '',
+        user: '',
+        phone: '',
+        unit: '',
+        area: '',
+        system: '',
+        scene: '',
+        basis: '',
+        enclosure: ''
+      }
+    }
+  },
+  created () {
+    // 将业务KEY赋值给表单
+    this.dataForm.id = this.$route.params.businessKey
+    this.init()
+    // 流程回调
+    var callbacks = {
+      startProcessSuccessCallback: this.closeCurrentTab,
+      startProcessErrorCallback: this.startProcessErrorCallback,
+      taskHandleSuccessCallback: this.closeCurrentTab,
+      taskHandleErrorCallback: this.taskHandleErrorCallback,
+      formSaveSuccessCallback: null,
+      formSaveErrorCallback: null
+    }
+    // 初始化综合组件
+    this.initProcessMultiple(callbacks)
+  },
+  computed: {
+    dataRule () {
+      return {
+        user: [
+          { required: true, message: '请输入申请人', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入申请人电话', trigger: 'blur' },
+          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
+        ],
+        unit: [
+          { required: true, message: '请输入申请单位', trigger: 'blur' }
+        ],
+        // area: [
+        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
+        // ],
+        system: [
+          { required: true, message: '请输入申请应用', trigger: 'blur' }
+        ],
+        scene: [
+          { required: true, message: '请输入应用场景', trigger: 'blur' }
+        ],
+        basis: [
+          { required: true, message: '请输入申请依据', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetFields()
+        if (this.dataForm.id) {
+          // 如业务KEY已存在，不允许编辑
+          this.fieldDisabled = true
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 启动流程出错回调
+    startProcessErrorCallback (data) {
+      console.log(data)
+    },
+    // 任务处理出错回调
+    taskHandleErrorCallback (data) {
+    }
+  }
+}
+</script>
diff --git a/back/src/views/modules/activiti/demo/correction-process2.vue b/back/src/views/modules/activiti/demo/correction-process2.vue
index ccec2701..1672be48 100644
--- a/back/src/views/modules/activiti/demo/correction-process2.vue
+++ b/back/src/views/modules/activiti/demo/correction-process2.vue
@@ -1,64 +1,134 @@
 <!--  流程业务表单   -->
 <template>
   <el-card shadow="never" class="aui-card--fill">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="申请人" prop="user">
-              <el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
-          </el-form-item>
-          <el-form-item label="申请电话" prop="phone">
-              <el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
-          </el-form-item>
-          <el-form-item label="申请单位" prop="unit">
-              <el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
-          </el-form-item>
-          <!-- <el-form-item label="所在地区" prop="area">
-              <el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
-          </el-form-item> -->
-          <el-form-item label="申请应用" prop="system">
-              <el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
-          </el-form-item>
-          <el-form-item label="应用场景" prop="scene">
-              <el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
-          </el-form-item>
-          <el-form-item label="申请依据" prop="basis">
-              <el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
-          </el-form-item>
-          <el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
-              <el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
-          </el-form-item>
-      </el-form>
-      <!--  流程综合组件   -->
-      <ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
+
+  <!-- 申请人详情 -->
+  <div>
+     <h3>申请人信息</h3>
+    <div class="big-BOX">
+      <p>
+        <span>申请人：<span> {{dataForm.content.user || '--'}}</span></span>
+         <span>电话：<span>{{dataForm.content.phone || '--'}}</span></span>
+         <span>单位：<span>{{dataForm.content.unit || '--'}}</span></span>
+      </p>
+       <p>
+         <span>申请应用：<span>{{dataForm.content.system || '--'}}</span></span>
+       <span> 应用场景：<span> {{dataForm.content.scene || '--'}}</span></span>
+      <span> 申请依据： <span> {{dataForm.content.basis || '--'}}</span></span>
+      </p>
+      <p>
+      <span> 能力应用期望效果：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
+      </p>
+      <p v-if="dataForm.content.enclosure">
+      <span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button  @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
+
+      </p>
+    </div>
+  </div>
+
+  <!-- 申请能力 -->
+  <div class="AbilityApply">
+     <h3>申请能力</h3>
+    <ul  v-for="item in dataList" :key="item.id">
+      <li class="title">{{item.address}}</li>
+      <li class="clearfix">
+            <img
+              src="~@/assets/img/imgLeft.png"
+            />
+            <div>
+            <h2>{{item.name}}<span>{{item.type}}</span></h2>
+            <p>{{item.describe}}</p>
+            </div>
+      </li>
+    </ul>
+  </div>
+    <!--  流程综合组件   -->
+  <!--   <ren-process-multiple
+      v-if="processVisible"
+      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
+      saveFormUrl="/processForm/tabilityapplication"
+      dataFormName="dataForm"
+      ref="renProcessMultiple"
+    ></ren-process-multiple> -->
+
+    <!-- 审批 -->
+    <div class="agreeOr">
+      <h3>审批</h3>
+      <div>
+        <el-radio-group v-model="agreeOrList" style="width:230px;">
+          <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
+          <el-radio-button label="退回" class="redAll">退回</el-radio-button>
+        </el-radio-group>
+        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
+        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
+         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
+      </div>
+    </div>
+
+ <!--  流程详情   -->
+    <ren-process-detail-import></ren-process-detail-import>
   </el-card>
 </template>
 
 <script>
 // 引入工作流公共方法
 import processModule from '@/mixins/process-module'
+import qs from 'qs'
+import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
 export default {
   // 注入公共方法
   mixins: [processModule],
   data () {
     return {
-      visible: false,
+      visible: true,
       // 表单属性是否可编辑
-      fieldDisabled: false,
+      // fieldDisabled: false,
+      // dataForm: {
+      //   id: '',
+      //   user: '',
+      //   phone: '',
+      //   unit: '',
+      //   area: '',
+      //   system: '',
+      //   scene: '',
+      //   basis: ''
+      // }
       dataForm: {
         id: '',
-        user: '',
-        phone: '',
-        unit: '',
-        area: '',
-        system: '',
-        scene: '',
-        basis: '',
-        enclosure: ''
-      }
+        content: []
+      },
+      dataList: [
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        },
+        {
+          // img: '~@/assets/img/imgLeft.png',
+          address: '青岛市应急管理局',
+          name: '组件名称',
+          type: '组件服务',
+          describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
+        }
+      ],
+      inputAgree: '',
+      inputNo: '',
+      agreeOrList: '同意'
     }
   },
   created () {
     // 将业务KEY赋值给表单
     this.dataForm.id = this.$route.params.businessKey
+    console.log(this.dataForm, 'ela')
     this.init()
     // 流程回调
     var callbacks = {
@@ -73,64 +143,275 @@ export default {
     this.initProcessMultiple(callbacks)
   },
   computed: {
-    dataRule () {
-      return {
-        user: [
-          { required: true, message: '请输入申请人', trigger: 'blur' }
-        ],
-        phone: [
-          { required: true, message: '请输入申请人电话', trigger: 'blur' },
-          { type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
-        ],
-        unit: [
-          { required: true, message: '请输入申请单位', trigger: 'blur' }
-        ],
-        // area: [
-        //   { required: true, message: '请输入所在地区', trigger: 'blur' }
-        // ],
-        system: [
-          { required: true, message: '请输入申请应用', trigger: 'blur' }
-        ],
-        scene: [
-          { required: true, message: '请输入应用场景', trigger: 'blur' }
-        ],
-        basis: [
-          { required: true, message: '请输入申请依据', trigger: 'blur' }
-        ]
-      }
-    }
+    // dataRule () {
+    //   return {
+    //     inputAgree: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ],
+    //     inputNo: [
+    //       { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+    //     ]
+    //   }
+    // }
+  },
+  components: {
+    RenProcessDetailImport
   },
   methods: {
     init () {
-      this.visible = true
+      // this.visible = true
       this.$nextTick(() => {
-        this.$refs.dataForm.resetFields()
+        // this.$refs.dataForm.resetFields()
         if (this.dataForm.id) {
           // 如业务KEY已存在，不允许编辑
-          this.fieldDisabled = true
+          // this.fieldDisabled = true
           this.getInfo()
+          console.log(this.dataForm, 'init')
         }
       })
     },
     // 获取信息
     getInfo () {
-      this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data
-        }
-      }).catch(() => {})
+      this.$http
+        .get(`/processForm/tabilityapplication/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data)
+            return this.$message.error(res.msg)
+          }
+          console.log(res.data, 'elas')
+          this.dataForm.content = res.data
+          console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+    // 申请能力
+    applyData () {
+      this.$http
+        .get(`/resource/select/${this.dataForm.instanceId}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res.data, 'hhhhh')
+            // return this.$message.error(res.msg)
+          }
+          // console.log(res.data, 'elas')
+          // this.dataForm.content = res.data
+          // console.log(this.dataForm, 'ela')
+        })
+        .catch(() => {})
+    },
+
+    // 同意与退回
+    agreeOrNot () {
+      if (this.agreeOrList === '同意') {
+        console.log('this.dataForm', this.dataForm)
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputAgree
+        })
+        console.log(params)
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            console.log(res)
+            this.$message.error(res.msg)
+          }
+        }).catch(() => {})
+      } else if (this.agreeOrList === '退回') {
+        const params = qs.stringify({
+          taskId: this.dataForm.content.instanceId,
+          comment: this.inputNo
+        })
+        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+          }
+        })
+      }
     },
     // 启动流程出错回调
     startProcessErrorCallback (data) {
       console.log(data)
     },
     // 任务处理出错回调
-    taskHandleErrorCallback (data) {
-    }
+    taskHandleErrorCallback (data) {}
+  },
+  mounted () {
+    this.applyData()
   }
 }
 </script>
+<style scoped lang="scss">
+::v-deep .big-BOX{
+  background:rgba(244,245,248,0.8);
+  padding:24px;
+  h3{
+    font-size:16px;
+    color:#212121
+  }
+  p{
+    width:78%;
+    display:flex;
+    justify-content: space-between;
+    color:#212121;
+    font-size:14px;
+    span{
+      display:inline-block;
+      margin-left:8px;
+      line-height:32px;
+      span{
+        font-weight:bold;
+      }
+    }
+  }
+  p:last-of-type{
+    margin-top:16px;
+    width:100%;
+    span{
+      display:flex;
+      span{
+      padding:0 12px;
+      height:32px;
+      background:rgba(232,234,239,1);
+      border-radius:2px;
+      button{
+        background:unset;
+        border:0;
+        color:#0558e1;
+        font-size:14px;
+      }
+      }
+    }
+  }
+}
+::v-deep .AbilityApply{
+    margin-top:32px;
+
+  h3{
+     font-size:16px;
+    color:#212121;
+    border-bottom:1px solid #dddee1;
+    padding-bottom:10px;
+  }
+  ul{
+    padding-left: 0px;
+     li{
+      list-style:none;
+    padding: 30px 0;
+    border-bottom: 1px solid #dddee1;
+    display:flex;
+    img{
+      width:100px;
+      height:100px;
+    }
+    div{
+      margin-left:16px;
+          display: flex;
+    flex-direction: column;
+    justify-content: center;
+    h2{
+      margin-bottom:20px;
+      font-size:20px;
+      color:#000;
+      display:flex;
+      span{
+        display:block;
+        font-size:14px;
+        color:#ffffff;
+        margin-left:8px;
+        background:rgba(0,184,230,0.8);
+        display: flex;
+    align-items: center;
+    padding: 0 5px;
+    border-radius: 4px;
+      }
+    }
+     p{
+      margin-bottom:0;
+    }
+    }
+    }
+    .clearfix:after{
+      display:block;
+      content:"";
+      clear:both;
+    }
+    .title{
+      color:#0558e1;
+      font-size:18px;
+      padding-bottom:0;
+    border-bottom: 0;
+
+    }
+     .title:before {
+           content: "";
+           width: 6px;
+           height: 6px;
+           display: inline-block;
+           border-radius: 50%;
+           background: #0558e1;
+           vertical-align: middle;
+          margin-right: 10px;
+    margin-top: 6px;
+           }
+
+  }
+}
+::v-deep .agreeOr>div{
+  display:flex;
+      align-items: center;
+  .el-input{
+    margin-right: 10px;
+    margin-left: 32px;
+  }
+
+}
+::v-deep   .agreeOr>div:last-of-type{
+    margin-top:15px;
+  }
+  .blueAll{
+    ::v-deep .el-radio-button__inner{
+    width:80px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+  }
+  .inputBule{
+     width:55px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+    background:#0558e1;
+    color:#ffffff;
+    border:1px solid #0558e1;
+  }
+   ::v-deep .is-active{
+   background:#ffffff;
+    color:#0558e1;
+  }
+  .redAll{
+    margin-left:10px;
+    ::v-deep .el-radio-button__inner{
+    width:80px;
+    height:32px;
+    line-height:32px;
+    padding:0;
+    border-radius:2px;
+   border:1px solid #e83a48;
+    background:#ffffff;
+    color:#e83a48;
+    margin-left:10px;
+    }
+    :v-deep .el-radio-button__inner{
+      box-shadow: unset;
+    }
+  }
+  .blueInput{
+    width:55px;
+  }
+</style>