flowable-engine-web/src/components/common/DeptPicker.vue

@@ -7,11 +7,11 @@
             <el-input v-model="filterText" style="width: 100%;" size="small"
                       clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
           </div>
-          <!-- 部门 -->
+          <!-- 部门 check-strictly-->
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
-            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
+            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="value" default-expand-all
-                     :show-checkbox="showCheckbox" check-strictly highlight-current
+                     :show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
                      @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
                      :filter-node-method="filterNode">
               <div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
@@ -20,7 +20,6 @@
             </el-tree>
           </el-scrollbar>
         </div>
-
         <div class="selected">
           <div class="count">
             <span>已选 {{ selectList.length }} 项</span>
@@ -102,7 +101,7 @@ export default {
         // const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
         // const jsonc = jsonb.replace(/"label"/g, '"deptName"')
         this.deptList = res.data
-        console.log("获取部门信息===========", this.deptList);
+        // console.log("获取部门信息===========", this.deptList);
       });
     },
     //通过关键字过滤树节点
@@ -120,40 +119,43 @@ export default {
      * @param checked 是否选中
      */
     handleCheckChange(data, checked) {
-      // 左侧有选择框
+        // 左侧有选择框
-      if (this.showCheckbox) {
+        if (this.showCheckbox) {
-        // 左侧有选择框 + 多选
+          // 左侧有选择框 + 多选
-        if (this.multiple) {
+          if (this.multiple ) {
-          //不添加重复的数据到右边
+            //不添加重复的数据到右边
-          for (let i = 0; i < this.selectList.length; i++) {
+            for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === data.value) {
+              if (this.selectList[i].value === data.value) {
-              this.selectList.splice(i, 1);
+                this.selectList.splice(i, 1);
-              break;
+                break;
+              }
             }
-          }
+            if (checked) {
-          if (checked) {
+              if(data.children === undefined){
-            this.selectList.push(data);
+                this.selectList.push(data);
-          } else if (data === '1') {
+              }
-            this.$refs.tree.setCheckedKeys([]);
+            } else if (data === '1') {
-            this.selectList = [];
+              this.$refs.tree.setCheckedKeys([]);
-          }
+              this.selectList = [];
-        } else {// 左侧有选择框 + 单选
+            }
-          //不添加重复的数据到右边
+          } else {// 左侧有选择框 + 单选
-          for (let i = 0; i < this.selectList.length; i++) {
+            //不添加重复的数据到右边
-            if (this.selectList[i].value === data.value) {
+            for (let i = 0; i < this.selectList.length; i++) {
-              this.selectList.splice(i, 1);
+              if (this.selectList[i].value === data.value) {
-              break;
+                this.selectList.splice(i, 1);
+                break;
+              }
+            }
+            if (checked) {
+              this.$refs.tree.setCheckedNodes([data]);
+              // this.$refs.tree.setCheckedKeys([]);
+              this.selectList = [data];
+            } else if (data === '1') {
+              this.selectList = [];
+              this.$refs.tree.setCheckedKeys([]);
             }
-          }
-          if (checked) {
-            this.$refs.tree.setCheckedNodes([data]);
-            this.selectList = [data];
-          } else if (data === '1') {
-            this.$refs.tree.setCheckedKeys([]);
-            this.selectList = [];
           }
         }
-      }
       this._value = this.selectList
     },
 
@@ -164,19 +166,21 @@ export default {
      * @param check checked(checkbox选择框)是否选中
      */
     handle(node, check) {
-      if (this.multiple) {
+      if (check.isLeaf !== false) {
-        //不添加重复的数据到右边
+        if (this.multiple) {
-        for (let i = 0; i < this.selectList.length; i++) {
+          //不添加重复的数据到右边
-          if (this.selectList[i].value === node.value) {
+          for (let i = 0; i < this.selectList.length; i++) {
-            this.selectList.splice(i, 1);
+            if (this.selectList[i].value === node.value) {
-            break;
+              this.selectList.splice(i, 1);
+              break;
+            }
           }
+          check.checked = true
+          this.selectList.push(node);
+        } else {
+          check.checked = true
+          this.selectList = [node];
         }
-        check.checked = true
-        this.selectList.push(node);
-      } else {
-        check.checked = true
-        this.selectList = [node];
       }
       this._value = this.selectList
     },
@@ -203,9 +207,10 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.handleCheckChange("1");
         if (!this.showCheckbox) {
           this.selectList = []
+        }else {
+          this.handleCheckChange("1");
         }
       });
     },
@@ -221,15 +226,15 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
-/deep/ .el-tree-node {
+///deep/ .el-tree-node {
-  .is-leaf + .el-checkbox .el-checkbox__inner {
+//  .is-leaf + .el-checkbox .el-checkbox__inner {
-    display: inline-block;
+//    display: inline-block;
-  }
+//  }
-
+//
-  .el-checkbox .el-checkbox__inner {
+//  .el-checkbox .el-checkbox__inner {
-    display: none;
+//    display: none;
-  }
+//  }
-}
+//}
 
 /deep/ .el-dialog__body {
   padding: 10px 20px;

flowable-engine-web/src/utils/date.js

@@ -0,0 +1,118 @@
+//时间转换为String类型
+const moment = require("moment");
+
+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 + " 秒";
+}
+
+function timeLength(start, dateEnd) {
+    // //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
+    let mstart = moment(start);
+    let mend = moment(dateEnd);
+    let years = mend.diff(start, "years");
+    let months = mend.diff(start, "months");
+    let days = mend.diff(start, "days");
+    let hours = mend.diff(start, "hours");
+    let minutes = mend.diff(start, "minutes");
+    minutes = minutes % 60;
+    hours = hours % 24;
+    months = months % 12;
+    //因为每月天不固定，所以天要特殊动态处理
+    if (mstart.date() < mend.date()) {
+        days = mend.date() - mstart.date();
+        if (minutes > 0 || hours > 0) {
+            days--;
+        }
+    }
+    //处理超过俩月且天超过31
+    if (days > 31 && mend.month() - mstart.month() >= 2) {
+        //将日期推至上月求差
+        days = mend.diff(mstart.add(mend.month() - mstart.month() - 1, "month"), "days");
+    }
+    return `${years > 0 ? years + "年 " : " "}` + `${months > 0 ? months + "个月 " : " "}` + `${days > 0 ? days + "天 " : " "}`
+        + `${hours > 0 ? hours + "小时 " : " "}` + `${minutes > 0 ? minutes + "分钟 " : " "}`;
+}
+
+module.exports = {
+    formatToYYYYMMDD: simpleDateFormatByMoreLine,
+    consumingTime: consumingTime,
+    timeLength: timeLength
+}

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

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
         }
       },
       {
@@ -134,7 +135,8 @@ export const baseComponents = [
           enablePrint: true,
           maxSize: 5, //图片最大大小MB
           maxNumber: 10, //最大上传数量
-          enableZip: true //图片压缩后再上传
+          enableZip: true, //图片压缩后再上传
+          placeholder: '请选择图片',
         }
       },
       {
@@ -149,7 +151,8 @@ export const baseComponents = [
           onlyRead: false, //是否只读，false只能在线预览，true可以下载
           maxSize: 100, //文件最大大小MB
           maxNumber: 10, //最大上传数量
-          fileTypes: [] //限制文件上传类型
+          fileTypes: [], //限制文件上传类型,
+          placeholder: '请选择附件',
         }
       },
       {

flowable-engine-web/src/views/common/form/FormRender.vue

@@ -78,7 +78,6 @@ export default {
         if (item.name === 'SpanLayout'){
           this.loadFormConfig(item.props.items)
         }else {
-          console.log(item,!item.perm)
           if (!item.perm){
             this.$set(item, 'perm', 'E')
           }

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: {

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,7 @@
 <script>
 import componentMinxins from "../ComponentMinxins";
 import moment from "moment";
-
+import {timeLength} from '@/utils/date'
 export default {
   mixins: [componentMinxins],
   name: "DateTimeRange",
@@ -60,6 +66,10 @@ export default {
     showLength: {
       type: Boolean,
       default: false
+    },
+    length: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -76,36 +86,12 @@ export default {
     timeLength() {
       //求时长算法
       if (Array.isArray(this.value)) {
-        let start = moment(this.value[0]).format(this.format.replaceAll("dd", "DD"));
+        // let start = moment(this.value[0]).format(this.format.replaceAll("dd", "DD"));
-        let end = moment(this.value[1]).format(this.format.replaceAll("dd", "DD"));
+        // let end = moment(this.value[1]).format(this.format.replaceAll("dd", "DD"));
-        if (start === end) {
+        if (this.value[0] === this.value[1]) {
           return "0 （时长为0，请确认）";
         }
-        let mstart = moment(start);
+        return  timeLength(this.value[0],this.value[1])
-        let mend = moment(end);
-        let years = mend.diff(start, "years");
-        let months = mend.diff(start, "months");
-        let days = mend.diff(start, "days");
-        let hours = mend.diff(start, "hours");
-        let minutes = mend.diff(start, "minutes");
-        minutes = minutes % 60;
-        hours = hours % 24;
-        months = months % 12;
-        //因为每月天不固定，所以天要特殊动态处理
-        if (mstart.date() < mend.date()) {
-          days = mend.date() - mstart.date();
-          if (minutes > 0 || hours > 0) {
-            days--;
-          }
-        }
-        //处理超过俩月且天超过31
-        if (days > 31 && mend.month() - mstart.month() >= 2) {
-          //将日期推至上月求差
-          days = mend.diff(mstart.add(mend.month() - mstart.month() - 1, "month"), "days");
-        }
-        return `${years > 0 ? years + "年 " : " "}${months > 0 ? months + "个月 " : " "}
-                ${days > 0 ? days + "天 " : " "}${hours > 0 ? hours + "小时 " : " "}
-                ${minutes > 0 ? minutes + "分钟 " : " "}`;
       } else {
         return "先选择时间哦";
       }

flowable-engine-web/src/views/common/form/components/DeptPicker.vue

@@ -10,12 +10,12 @@
         <org-picker type="dept" :multiple="multiple" ref="deptPicker" :v-model="select" :selected="_value" @ok="selected"/>
         <span class="placeholder"> {{placeholder}}</span>
         <div style="margin-top: 5px">
-          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.deptName}}</el-tag>
+          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.label}}</el-tag>
         </div>
       </template>
       <template v-else-if="perm === 'R'">
         <div v-for="(dept, i) in _value" :key="i">
-          {{dept.deptName}}
+          {{dept.label}}
         </div>
       </template>
     </template>

flowable-engine-web/src/views/common/process/nodes/ConditionNode.vue

@@ -7,7 +7,7 @@
       <div class="node-body-main" @click="$emit('selected')">
         <div class="node-body-main-header">
           <ellipsis class="title" hover-tip :content="config.name ? config.name : ('条件' + level)"/>
-          <span class="level">优先级{{ level }}</span>
+<!--          <span class="level">优先级{{ level }}</span>-->
           <span class="option" v-if="designStart()">
             <el-tooltip effect="dark" content="复制条件" placement="top">
               <i class="el-icon-copy-document" @click.stop="$emit('copy')"></i>

flowable-engine-web/src/views/workspace/DisposalTask.vue

@@ -60,9 +60,8 @@
         <div style="height: 15px;background:#f5f5f5;"></div>
         <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
                           v-model="taskData.formData"/>
-        <!--        <process-diagram-viewer/>-->
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <footer class="footer">
+        <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
             <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
             <span style="font-size: 12px;">评论</span>
@@ -85,7 +84,7 @@
             </el-button>
             <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
           </div>
-        </footer>
+        </el-footer>
       </div>
     </el-drawer>
     <comment ref="comment"
@@ -131,6 +130,7 @@ export default {
       this.approveOpen = true;
       this.loadProcessTask(row.taskId);
       this.selectTask = row;
+
     },
     getList() {
       getTaskList().then(res => {
@@ -153,6 +153,13 @@ export default {
       let that = this;
       this.init();
       getTaskInfo(taskId).then(res => {
+        let data=res.data
+        data.formItems.map(item=>{
+          if(item.props.required){
+            item.props.required=!item.props.required
+          }
+          return item
+        })
         that.taskData = res.data;
         that.$store.state.design = that.taskData;
         that.$store.state.userTaskOption = that.taskData.userTaskOption;
@@ -296,15 +303,15 @@ export default {
 }
 
 .footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 30px;
   padding: 15px 0;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  left: 0;
   z-index: 99;
   background: #fff;
   border-top: 1px solid #dcdfe6;

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 {timeLength} 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)
+        //dateFormat(开始时间,结束时间)
-        let endTime = new Date(instance.endTime)
+        return timeLength(instance.submitTime,instance.endTime);
-        return endTime - submitTime;
       }
     }
   }