工作流动态编辑组件

src/components/app-wf-approval/app-wf-approva1l.vue

+<template>
+  <div class="app-wf-approval">
+    <div class="app-wf-approval-header">
+      <span class="approval-header-left">{{data.startTime}}</span>
+      <span>{{data.startUserName}}提交</span>
+    </div>
+    <van-collapse v-model="activeNames" v-if="data.usertasks && data.usertasks.length >0">
+      <van-collapse-item
+        :title="usertask.userTaskName"
+        :name="index"
+        v-for="(usertask,index) in data.usertasks"
+        :key="index"
+      >
+        <div class="app-wf-approval-content" v-if="data.usertasks && data.usertasks.length >0">
+          <div class="approval-content-item-right">
+            <div class="approval-content-item-wait" v-if="usertask.identitylinks.length >0">
+
+              <!-- <van-steps direction="vertical" >
+  <van-step  v-for="(identitylink,inx) in usertask.identitylinks" :key="inx">
+    <h3>{{identitylink.displayname}}</h3>
+  </van-step>
+</van-steps> -->
+              等待
+              <span v-for="(identitylink,inx) in usertask.identitylinks" :key="inx">
+                {{identitylink.displayname}}
+                <span v-if="inx >0">、</span>
+              </span>处理
+            </div>
+            <div class="approval-content-item-info" v-if="usertask.comments.length >0">
+              <div v-for="(comment,commentInx) in usertask.comments" :key="commentInx">
+                <div
+                  class="approval-content-item-info-item approval-content-item-info-top"
+                >{{`【${comment.type}】${comment.fullMessage}`}}</div>
+                <div class="approval-content-item-info-item approval-content-item-info-bottom">
+                  <span class="info-bottom-name">{{comment.authorName}}</span>
+                  <span>{{comment.time}}</span>
+                </div>
+              </div>
+            </div>
+            <div
+              class="approval-content-item-memo"
+              v-if="usertask.userTaskId === viewparams.userTaskId"
+            >
+              <ion-input
+                debounce="300"
+                type="textarea"
+                :value="initmemo"
+                placeholder="请输入内容"
+                @ionBlur="handleBlur"
+              ></ion-input>
+            </div>
+          </div>
+        </div>
+        <div class="app-wf-approval-bottom">
+          <span v-if="data.endTime">{{data.endTime}}结束</span>
+        </div>
+      </van-collapse-item>
+
+      <!-- <van-collapse-item title="被驳回" name="2">内容</van-collapse-item>
+      <van-collapse-item title="标题3" name="3">内容</van-collapse-item>-->
+    </van-collapse>
+    <!--<div class="app-wf-approval-header">
+            <span class="approval-header-left">{{data.startTime}}</span>
+            <span>{{data.startUserName}}提交</span>
+        </div>
+        <div class="app-wf-approval-content" v-if="data.usertasks && data.usertasks.length >0">
+            <div class="approval-content-item" v-for="(usertask,index) in data.usertasks" :key="index">
+                <div class="approval-content-item-left">
+                    {{usertask.userTaskName}}
+                </div>
+                <div class="approval-content-item-right">
+                    <div class="approval-content-item-wait" v-if="usertask.identitylinks.length >0">
+                        等待<span v-for="(identitylink,inx) in usertask.identitylinks" :key="inx">{{identitylink.displayname}}<span v-if="inx >0">、</span></span>处理
+                    </div>
+                    <div class="approval-content-item-info" v-if="usertask.comments.length >0">
+                        <div v-for="(comment,commentInx) in usertask.comments" :key="commentInx">
+                            <div class="approval-content-item-info-item approval-content-item-info-top">
+                                {{`【${comment.type}】${comment.fullMessage}`}}
+                            </div>
+                             <div class="approval-content-item-info-item approval-content-item-info-bottom">
+                                <span class="info-bottom-name">{{comment.authorName}}</span>
+                                <span>{{comment.time}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="approval-content-item-memo" v-if="usertask.userTaskId === viewparams.userTaskId">
+                         <ion-input  debounce="300" type="textarea" :value="initmemo" placeholder="请输入内容" @ionBlur="handleBlur"></ion-input>
+                    </div>
+                </div>
+            </div>
+        </div>
+         <div class="app-wf-approval-bottom">
+            <span v-if="data.endTime">{{data.endTime}}结束</span>
+    </div>-->
+  </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Model } from "vue-property-decorator";
+
+@Component({})
+export default class AppWFApproval extends Vue {
+  public activeNames= [];
+
+  /**
+   * 双向绑定值
+   *
+   *  @memberof AppWFApproval
+   */
+  @Model("change") value!: string;
+
+  /**
+   * 数据
+   *
+   *  @memberof AppWFApproval
+   */
+  public data: any = {};
+
+  /**
+   *  初始化memo
+   *
+   *  @memberof AppWFApproval
+   */
+  public initmemo: string = "";
+
+  /**
+   * 传入数据服务
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public service: any;
+
+  /**
+   *  上下文
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public context: any;
+
+  /**
+   *  视图参数
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public viewparams: any;
+
+  /**
+   * 初始化数据
+   *
+   *  @memberof AppWFApproval
+   */
+  public created() {
+    if (this.service) {
+      this.service.GetWFHistory(this.context).then((res: any) => {
+        if (res && res.status === 200) {
+          this.data = res.data;
+        }
+      });
+    }
+  }
+
+  /**
+   * 抛出wfprocmemo
+   *
+   *  @memberof AppWFApproval
+   */
+  public handleBlur($event: any) {
+    this.$emit("change", $event.target.value);
+  }
+}
+</script>
+
+<style lang="less">
+@import "./app-wf-approval.less";
+</style>
\ No newline at end of file

src/components/app-wf-approval/app-wf-approval.less

+.app-wf-approval {
+  width: 100%;
+  .step-item {
+    display: flex;
+    justify-content: space-between;
+    .step-start-user {
+      .step-start-user-name {
+        color: #ccc;
+      }
+    }
+  }
+  .step-name {
+    display: flex;
+    justify-content: space-between;
+  }
+  .userTaskName {
+    font-size: 15px;
+    color: #201414;
+    padding-bottom: 10px;
+  }
+  .step-text {
+    padding-bottom: 5px;
+  }
+}

src/components/app-wf-approval/app-wf-approval.vue

+<template>
+  <div class="app-wf-approval">
+    <van-steps active-icon="success" active-color="#38f" direction="vertical" :active="0">
+      <van-step>
+        <div class="step-item">
+          <div class="step-start-user">
+            <div class="step-text">发起申请</div>
+            <div class="step-start-user-name">{{data.startUserName}}</div>
+          </div>
+          <div class="step-start-time">{{data.startTime}}</div>
+        </div>
+      </van-step>
+      <template v-for="(usertask,index) in data.usertasks" >
+      <van-step v-if="usertask.identitylinks.length >0"  :key="index">
+        <div class="step-start-user" >
+            <div class="step-text">等待处理</div>
+            <div  class="step-start-user-name">
+              <span v-for="(identitylink,inx) in usertask.identitylinks" :key="inx">{{identitylink.displayname}}<span v-if="inx >0">、</span></span>
+            </div>
+          </div>
+      </van-step>
+       </template>
+      <template v-for="(usertask,index) in data.usertasks" >
+        <van-step v-if="usertask.comments.length >0" :key="index">
+          <div class="userTaskName">{{usertask.userTaskName}}</div>
+            <div class="approval-content-item-info" >
+                <div class="step-name" v-for="(comment,commentInx) in usertask.comments" :key="commentInx">
+                  <div
+                    class="approval-content-item-info-item approval-content-item-info-top"
+                  >{{`【${comment.type}】${comment.fullMessage}`}}
+                  <div class="info-bottom-name">{{comment.authorName}}</div>
+                  </div>
+                  <div class="approval-content-item-info-item approval-content-item-info-bottom">
+                    <span class="step-start-time">{{comment.time}}</span>
+                  </div>
+                </div>
+            </div>
+            <div class="approval-content-item-memo" v-if="usertask.userTaskId === viewparams.userTaskId">
+                  <ion-textarea  debounce="300" type="textarea" :value="initmemo" placeholder="请输入内容" @ionBlur="handleBlur"></ion-textarea>
+            </div>
+        </van-step>
+      </template>
+    </van-steps>
+  </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Model } from "vue-property-decorator";
+
+@Component({})
+export default class AppWFApproval extends Vue {
+  public activeNames = [];
+
+  /**
+   * 双向绑定值
+   *
+   *  @memberof AppWFApproval
+   */
+  @Model("change") value!: string;
+
+  /**
+   * 数据
+   *
+   *  @memberof AppWFApproval
+   */
+  public data: any = {};
+
+  /**
+   *  初始化memo
+   *
+   *  @memberof AppWFApproval
+   */
+  public initmemo: string = "";
+
+  /**
+   * 传入数据服务
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public service: any;
+
+  /**
+   *  上下文
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public context: any;
+
+  /**
+   *  视图参数
+   *
+   *  @memberof AppWFApproval
+   */
+  @Prop() public viewparams: any;
+
+  /**
+   * 初始化数据
+   *
+   *  @memberof AppWFApproval
+   */
+  public created() {
+    if (this.service) {
+      this.service.GetWFHistory(this.context).then((res: any) => {
+        if (res && res.status === 200) {
+          this.data = res.data;
+        }
+      });
+    }
+  }
+
+  /**
+   * 抛出wfprocmemo
+   *
+   *  @memberof AppWFApproval
+   */
+  public handleBlur($event: any) {
+    this.$emit("change", $event.target.value);
+  }
+}
+</script>
+
+<style lang="less">
+@import "./app-wf-approval.less";
+</style>
\ No newline at end of file