diff --git a/flowable-engine-web/src/utils/date.js b/flowable-engine-web/src/utils/date.js
new file mode 100644
index 0000000..43be1e3
--- /dev/null
+++ b/flowable-engine-web/src/utils/date.js
@@ -0,0 +1,87 @@
+//时间转换为String类型
+function simpleDateFormat(pattern) {
+    var fmt = new Object();
+    fmt.pattern = pattern;
+
+    fmt.parse = function (source) {
+        try {
+            return new Date(source);
+        } catch (e) {
+            console.log("字符串 " + source + " 转时间格式失败！");
+            return null;
+        }
+    };
+
+    fmt.format = function (date) {
+        if (typeof (date) == "undefined" || date == null || date == "") {
+            return "";
+        }
+
+        try {
+            date = new Date(date);
+        } catch (e) {
+            console.log("时间 " + date + " 格式化失败！");
+            return "";
+        }
+
+        var strTime = this.pattern;//时间表达式的正则
+
+        var o = {
+            "M+": date.getMonth() + 1, //月份
+            "d+": date.getDate(), //日
+            "H+": date.getHours(), //小时
+            "m+": date.getMinutes(), //分
+            "s+": date.getSeconds(), //秒
+            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+            "S": date.getMilliseconds() //毫秒
+        };
+
+        if (/(y+)/.test(strTime)) {
+            strTime = strTime
+                .replace(RegExp.$1, (date.getFullYear() + "")
+                    .substr(4 - RegExp.$1.length));
+        }
+        for (var k in o) {
+            if (new RegExp("(" + k + ")").test(strTime)) {
+                strTime = strTime.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+            }
+        }
+
+        return strTime;
+    };
+    return fmt;
+}
+
+//时间格式化为yyyy-MM-dd
+function simpleDateFormatByMoreLine(date) {
+    var fmt = simpleDateFormat("yyyy-MM-dd");
+    date = fmt.parse(date)
+    return fmt.format(date)
+}
+
+/**
+ * @param dateBegin 开始时间
+ * @param dateEnd 结束时间
+ * @returns {string} 时间差
+ */
+function consumingTime(dateBegin,dateEnd) {
+    // //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
+    let submitTime = new Date(dateBegin)
+    let endTime = new Date(dateEnd)
+    var dateDiff = endTime - submitTime;//时间差的毫秒数
+    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
+    var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
+    var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
+    //计算相差分钟数
+    var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
+    var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
+    //计算相差秒数
+    var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
+    var seconds = Math.round(leave3 / 1000)
+    return dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒";
+}
+
+module.exports = {
+    formatToYYYYMMDD: simpleDateFormatByMoreLine,
+    consumingTime: consumingTime
+}
diff --git a/flowable-engine-web/src/views/admin/layout/FormDesign.vue b/flowable-engine-web/src/views/admin/layout/FormDesign.vue
index 8a03af4..30e0e76 100644
--- a/flowable-engine-web/src/views/admin/layout/FormDesign.vue
+++ b/flowable-engine-web/src/views/admin/layout/FormDesign.vue
@@ -119,6 +119,7 @@ export default {
       select: null,
       drag: false,
       formPreviewModel:"E",
+      formValue:{}
     }
   },
   computed: {
@@ -200,6 +201,14 @@ export default {
     },
     viewForms() {
       this.viewFormVisible = true
+      this.$nextTick(function(){
+        this.formValue=this.$refs.form.value
+      })
+        for (const key in this.formValue) {
+          if(this.formValue[key]!=undefined){
+            this.formValue[key]=[]
+          }
+        }
     },
     selectItem(cp) {
       this.selectFormItem = cp
diff --git a/flowable-engine-web/src/views/common/form/ComponentsConfigExport.js b/flowable-engine-web/src/views/common/form/ComponentsConfigExport.js
index 24e1647..ba9f2cd 100644
--- a/flowable-engine-web/src/views/common/form/ComponentsConfigExport.js
+++ b/flowable-engine-web/src/views/common/form/ComponentsConfigExport.js
@@ -120,7 +120,8 @@ export const baseComponents = [
           enablePrint: true,
           placeholder: ['开始时间', '结束时间'],
           format: 'yyyy-MM-dd HH:mm',
-          showLength: false
+          showLength: false,
+          length:0
         }
       },
       {
diff --git a/flowable-engine-web/src/views/common/form/FormRenderView.vue b/flowable-engine-web/src/views/common/form/FormRenderView.vue
index ead8a75..0f80e55 100644
--- a/flowable-engine-web/src/views/common/form/FormRenderView.vue
+++ b/flowable-engine-web/src/views/common/form/FormRenderView.vue
@@ -59,7 +59,6 @@ export default {
     }
   },
   mounted() {
-    console.log(JSON.stringify(this.formItems))
     this.loadFormConfig(this.formItems)
   },
   methods: {
diff --git a/flowable-engine-web/src/views/common/form/components/DateTimeRange.vue b/flowable-engine-web/src/views/common/form/components/DateTimeRange.vue
index 491e519..e9d4b40 100644
--- a/flowable-engine-web/src/views/common/form/components/DateTimeRange.vue
+++ b/flowable-engine-web/src/views/common/form/components/DateTimeRange.vue
@@ -14,6 +14,11 @@
                         :start-placeholder="placeholder[0]" :end-placeholder="placeholder[1]"/>
       </template>
       <template v-else-if="perm === 'R'">
+<!--        <div v-if="type==='daterange'">-->
+<!--          <span style="float:left;">{{_value[0]}}</span>-->
+<!--          <span style="padding:0 9px">至</span>-->
+<!--          <span>{{ _value[1] }}</span>-->
+<!--        </div>-->
         <div>
           <span style="float:left;">{{ _value[0] }}</span>
           <span style="padding:0 9px">至</span>
@@ -22,7 +27,8 @@
       </template>
       <div v-if="showLength" class="length">
         <span>时长：</span>
-        <span>{{ timeLength }}</span>
+        <span>{{timeLength}}</span>
+<!--        <span>{{type==='daterange'? parseInt(timeLength)+1: timeLength }}</span>-->
       </div>
     </template>
   </div>
@@ -31,7 +37,6 @@
 <script>
 import componentMinxins from "../ComponentMinxins";
 import moment from "moment";
-
 export default {
   mixins: [componentMinxins],
   name: "DateTimeRange",
@@ -60,6 +65,10 @@ export default {
     showLength: {
       type: Boolean,
       default: false
+    },
+    length: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
diff --git a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
index c027653..dfef9a6 100644
--- a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
+++ b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
@@ -57,7 +57,8 @@
           <div class="top_right">
             <div style="margin-bottom: 12px">
               <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
-              <el-tag style="font-size: 12px;margin:0 15px" size="mini">进行中</el-tag>
+              <el-tag style="font-size: 12px;margin:0 15px;" size="mini" type="success" v-if="selectProcessInstance.state==4">审批通过</el-tag>
+              <el-tag style="font-size: 12px;margin:0 15px;" size="mini" v-else >进行中</el-tag>
               <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
                 <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
               </el-tooltip>
@@ -87,7 +88,7 @@ import Comment from "@/components/common/Comment";
 import FormRenderView from '@/views/common/form/FormRender'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
 import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
-
+import {consumingTime} from '@/utils/date'
 export default {
   name: "InitiatedInstance",
   components: {Comment, FormRenderView, ProcessDiagramViewer},
@@ -111,7 +112,6 @@ export default {
   },
   methods: {
     clickRow(row) {
-      console.log(row)
       this.approveOpen = true;
       this.loadProcessInstance(row.processInstanceId)
       this.selectProcessInstance = row
@@ -155,9 +155,8 @@ export default {
     },
     getTimeConsuming(instance) {
       if (instance.state != 1) {
-        let submitTime = new Date(instance.submitTime)
-        let endTime = new Date(instance.endTime)
-        return endTime - submitTime;
+        //dateFormat(开始时间,结束时间)
+        return consumingTime(instance.submitTime,instance.endTime);
       }
     }
   }