Merge pull request 'dengjie commit : 部门选择器和添加评论组件样式完善' (#6) from DJ into master

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/6

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

@@ -0,0 +1,161 @@
+<template>
+  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible">
+    <div class="el-textarea">
+      <el-input
+          type="textarea"
+          :rows="4"
+          maxlength="255"
+          show-word-limit
+          placeholder="评论内容"
+          v-model="textarea">
+      </el-input>
+    </div>
+    <div style="margin: 20px 0">
+      <el-upload :file-list="fileList" action="#"
+                 :limit="maxSize" with-credentials
+                 :multiple="maxSize > 0"
+                 :data="uploadParams"
+                 list-type="picture-card"
+                 :action="uploadFileUrl"
+                 :headers="headers"
+                 :auto-upload="false"
+                 :on-success="handleUploadSuccess"
+                 :before-upload="beforeUpload">
+        <i slot="default" class="el-icon-plus"></i>
+        <div slot="file" slot-scope="{file}" style="width: 65px;height: 65px">
+          <img style="width: 100%;height: 100%" :src="file.url" alt="">
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-check"></i>
+          </label>
+          <span class="el-upload-list__item-actions">
+              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                <i class="el-icon-delete"></i>
+              </span>
+          </span>
+        </div>
+        <div slot="tip" class="el-upload__tip">添加图片 {{ sizeTip }}</div>
+      </el-upload>
+    </div>
+    <el-upload :file-list="attachmentList"
+               :limit="attachmentMaxSize" with-credentials
+               :multiple="attachmentMaxSize > 0"
+               :action="uploadFileUrl"
+               :headers="headers"
+               :auto-upload="false"
+               :on-success="handleUploadSuccess"
+               :before-upload="beforeUpload"
+    >
+      <el-button size="small" round>
+        <i class="el-icon-paperclip"></i>
+        <span>选择文件</span>
+      </el-button>
+      <div slot="tip" class="el-upload__tip"> 添加附件 {{ attachmentTip }}</div>
+    </el-upload>
+  </w-dialog>
+</template>
+
+<script>
+import {deleteFile} from "@/api/common";
+
+export default {
+  name: "Comment",
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    maxSize: {
+      type: Number,
+      default: 10
+    },
+    attachmentMaxSize: {
+      type: Number,
+      default: 100
+    }
+  },
+  computed: {
+    sizeTip() {
+      return this.maxSize > 0 ? `| 每张图不超过${this.maxSize}MB` : "";
+    },
+    attachmentTip() {
+      return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
+    }
+  },
+  created() {
+    this.fileList = this._value;
+    console.log(this.value, "images");
+  },
+  data() {
+    return {
+      visible: false,
+      title: "添加评论",
+      fileList: [],
+      attachmentList: [],
+      disabled: false,
+      uploadParams: {},
+      uploadFileUrl: "http://security-react.mytwins.top/flowable/process/file",
+      headers: {
+        authorization: localStorage.getItem("token")
+      },
+      textarea:''
+    };
+  },
+
+  methods: {
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-3);
+    },
+    handleUploadSuccess(res, file) {
+      if (res.code !== 1000) {
+        this.$message.error("上传失败");
+      }
+      let data = res.data;
+      this.fileList.push(data);
+      this.$emit("input", this.fileList);
+      console.log(res, file, this.fileList);
+    },
+    beforeUpload(file) {
+      const alows = ["image/jpeg", "image/png", "image/gif", "image/jpg"];
+      if (alows.indexOf(file.type) === -1) {
+        this.$message.warning("存在不支持的图片格式");
+      } else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
+        this.$message.warning(`单张图片最大不超过 ${this.maxSize}MB`);
+      } else {
+        return true;
+      }
+      return false;
+    },
+    handlePictureCardPreview(file) {
+      console.log(file, this._value);
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+    handleRemove(file, fileList) {
+      deleteFile(file.id).then(res => {
+        this.$message.success("删除成功");
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-upload--picture-card {
+  width: 65px;
+  height: 65px;
+  line-height: 70px;
+}
+/deep/ .el-upload-list--picture-card{
+  .is-ready {
+    width: 65px!important;
+    height: 65px!important;
+  }
+}
+
+.el-upload-list__item-status-label {
+  display: block;
+}
+</style>

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

@@ -1,5 +1,6 @@
 <template>
   <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
+    <div>
       <div class="picker">
         <div class="candidate" v-loading="loading">
           <div style="padding: 5px 8px;">
@@ -10,11 +11,11 @@
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
             <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
-                   :show-checkbox="showCheckbox"
+                     :show-checkbox="showCheckbox" check-strictly highlight-current
-                   @check="handleCheckChange" :filter-node-method="filterNode">
+                     @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"  :filter-node-method="filterNode">
-             <span class="custom-tree-node" slot-scope="{ node, data }">
+              <div class="custom-tree-node" slot-scope="{ node, data }"  style="width: 100%">
                 <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
-             </span>
+              </div>
             </el-tree>
           </el-scrollbar>
         </div>
@@ -26,9 +27,11 @@
           </div>
           <div class="org-items" style="height: 350px;">
             <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in selectList" :key="index" class="org-item">
+            <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
               <i class="el-icon-folder-opened"></i>
-            <span>{{ org.label }}</span>
+              <span>{{ selectItem.label }}</span>
+              <i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
+            </div>
           </div>
         </div>
       </div>
@@ -41,16 +44,66 @@ import {getDepartmentTree} from "@/api/org";
 
 export default {
   name: "departmentPicker",
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    multiple: { //是否多选
+      default: true,
+      type: Boolean
+    },
+    showCheckbox: { //是否显示左侧选择框
+      default: true,
+      type: Boolean
+    }
+  },
   data() {
     return {
       visible: false,
       loading: false,
       title: "请选择",
-      multiple: true,//是否多选
-      showCheckbox: true,//是否显示左侧选择框
       selectList: [],
       filterText: "",
-      deptList: []
+      deptList: [
+        {
+          value: 1,
+          label: '一级 1',
+          children: [{
+            value: 4,
+            label: '二级 1-1',
+            children: [{
+              value: 9,
+              label: '31'
+            }, {
+              value: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          value: 2,
+          label: '一级 2',
+          children: [{
+            value: 5,
+            label: '二级 2-1'
+          }, {
+            value: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          value: 3,
+          label: '一级 3',
+          children: [{
+            value: 7,
+            label: '二级 3-1'
+          }, {
+            value: 8,
+            label: '二级 3-2'
+          }]
+        }
+      ]
     };
   },
   watch: {
@@ -61,6 +114,16 @@ export default {
   created() {
     this.getDepartmentTree();
   },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit("input", val)
+      }
+    }
+  },
   methods: {
     //获取部门信息
     getDepartmentTree() {
@@ -78,40 +141,84 @@ export default {
     showDeptPicker() {
       this.visible = true;
     },
-    //选中部门
+    /**
+     * 选中部门
+     * @param data 选择的每个节点item
+     * @param checked 是否选中
+     */
     handleCheckChange(data, checked) {
       // 左侧有选择框
       if (this.showCheckbox) {
         // 左侧有选择框 + 多选
         if (this.multiple) {
+          //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
             if (this.selectList[i].value === data.value) {
               this.selectList.splice(i, 1);
               break;
             }
           }
-          // checked= true;
-          // this.selectList.push(data);
           if (checked) {
             this.selectList.push(data);
-          } else {
+          } else if(data==='1') {
-            // this.$refs.tree.setCheckedKeys(data);
+            this.$refs.tree.setCheckedKeys([]);
+            this.selectList = [];
           }
         } else {// 左侧有选择框 + 单选
+          //不添加重复的数据到右边
+          for (let i = 0; i < this.selectList.length; i++) {
+            if (this.selectList[i].value === data.value) {
+              this.selectList.splice(i, 1);
+              break;
+            }
+          }
           if (checked) {
             this.$refs.tree.setCheckedNodes([data]);
             this.selectList = [data];
-          } else {
+          } else if(data==='1') {
             this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
           }
         }
-      }else {// 左侧没有选择框
+      }
-        // 左侧没有选择框 + 多选
+      // this._value = this.selectList
-        if (this.multiple) {
+    },
-
-        }else {// 左侧没有选择框 + 单选
 
+    //左侧没有选择框时,点击tree-item
+    /**
+     * 可以点击树节点label,进行选择
+     * @param node 选择的每个节点item
+     * @param check checked(checkbox选择框)是否选中
+     */
+    handle(node,check) {
+      if(this.multiple){
+        //不添加重复的数据到右边
+        for (let i = 0; i < this.selectList.length; i++) {
+          if (this.selectList[i].value === node.value) {
+            this.selectList.splice(i, 1);
+            break;
+          }
+        }
+        check.checked=true
+        this.selectList.push(node);
+      }else {
+        check.checked=true
+        this.selectList=[node];
+      }
+    },
+    //左侧无选择框时,右侧显示×
+    noSelected(selectItem) {
+      for (let i = 0; i < this.selectList.length; i++) {
+        if (this.selectList[i].value === selectItem.value) {
+          this.selectList.splice(i, 1);
+          this.$refs.tree.setCheckedKeys(i);
+          break;
+        }
+      }
+      if (this.showCheckbox) {
+        // 左侧有选择框 + 单选
+        if (this.multiple===false) {
+          this.$refs.tree.setCheckedKeys([]);
         }
       }
     },
@@ -122,20 +229,17 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-
+        this.handleCheckChange("1");
-        this.handleCheckChange("", false);
+        if(!this.showCheckbox){
+          this.selectList=[]
+        }
       });
     },
     //确定按钮
     selectConfirm() {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
+      // this.$emit("input", this.selectList)
-      //   v.avatar = undefined;
+      // this.$emit("dengjie")
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
     }
-
   }
 };
 </script>
@@ -143,10 +247,11 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
-/deep/.el-tree-node {
+/deep/ .el-tree-node {
   .is-leaf + .el-checkbox .el-checkbox__inner {
     display: inline-block;
   }
+
   .el-checkbox .el-checkbox__inner {
     display: none;
   }
@@ -199,6 +304,13 @@ export default {
   overflow-y: auto;
   height: 350px;
 
+  .el-icon-close {
+    position: absolute;
+    right: 5px;
+    cursor: pointer;
+    font-size: larger;
+  }
+
   .org-item {
     margin: 0 5px;
     border-radius: 5px;
@@ -206,6 +318,7 @@ export default {
     padding: 7px 5px;
     display: flex;
     align-items: center;
+
     cursor: pointer;
 
     &:hover {

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

@@ -1,5 +1,5 @@
 <template>
-  <!--  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">-->
+  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
     <div>
       <div class="picker">
         <div class="candidate" v-loading="loading">
@@ -11,11 +11,11 @@
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
             <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
-                   :show-checkbox="showCheckbox"
+                     :show-checkbox="showCheckbox" check-strictly highlight-current
-                   @check="handleCheckChange" :filter-node-method="filterNode">
+                     @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"  :filter-node-method="filterNode">
-             <span class="custom-tree-node" slot-scope="{ node, data }">
+             <div class="custom-tree-node" slot-scope="{ node, data }"  style="width: 100%">
                    <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
-             </span>
+             </div>
             </el-tree>
           </el-scrollbar>
         </div>
@@ -27,20 +27,17 @@
           </div>
           <div class="org-items" style="height: 350px;">
             <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in selectList" :key="index" class="org-item">
+            <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
               <i class="el-icon-folder-opened"></i>
-            <span>{{ org.label }}</span>
+              <span>{{ selectItem.label }}</span>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
+              <i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
             </div>
           </div>
         </div>
       </div>
-    <div slot="footer">
-      <el-button size="mini" @click="selectConfirm">确认</el-button>
     </div>
-  </div>
+  </w-dialog>
-  <!--  </w-dialog>-->
+</template>
-</template>//
 
 <script>
 import {getDepartmentTree} from "@/api/org";
@@ -54,14 +51,20 @@ export default {
         return [];
       }
     },
+    multiple: { //是否多选
+      default: true,
+      type: Boolean
+    },
+    showCheckbox: { //是否显示左侧选择框
+      default: true,
+      type: Boolean
+    }
   },
   data() {
     return {
       visible: false,
       loading: false,
       title: "请选择",
-      multiple: true,//是否多选
-      showCheckbox: true,//是否显示左侧选择框
       selectList: [],
       filterText: "",
       deptList: [
@@ -69,23 +72,35 @@ export default {
           value: 1,
           label: '一级 1',
           children: [{
-            value: 2,
+            value: 4,
             label: '二级 1-1',
             children: [{
-              value: 3,
+              value: 9,
-              label: '三级 1-1-1'
+              label: '31'
+            }, {
+              value: 10,
+              label: '三级 1-1-2'
             }]
           }]
         }, {
-          value: 4,
+          value: 2,
           label: '一级 2',
           children: [{
             value: 5,
-            label: '二级 2-1',
+            label: '二级 2-1'
-            children: [{
+          }, {
             value: 6,
-              label: '三级 2-1-1'
+            label: '二级 2-2'
           }]
+        }, {
+          value: 3,
+          label: '一级 3',
+          children: [{
+            value: 7,
+            label: '二级 3-1'
+          }, {
+            value: 8,
+            label: '二级 3-2'
           }]
         }
       ]
@@ -128,8 +143,8 @@ export default {
     },
     /**
      * 选中部门
-     * @param data
+     * @param data 选择的每个节点item
-     * @param checked
+     * @param checked 是否选中
      */
     handleCheckChange(data, checked) {
       // 左侧有选择框
@@ -145,39 +160,67 @@ export default {
           }
           if (checked) {
             this.selectList.push(data);
-          } else {
+          } else if(data==='1') {
-            // this.$refs.tree.setCheckedKeys(data);
             this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
           }
         } else {// 左侧有选择框 + 单选
-          if (checked) {
+          //不添加重复的数据到右边
-            this.$refs.tree.setCheckedNodes([data]);
-            this.selectList = [data];
-          } else {
-            this.$refs.tree.setCheckedKeys([]);
-            this.selectList = [];
-          }
-        }
-      } else {// 左侧没有选择框
-        // 左侧没有选择框 + 多选
-        if (this.multiple) {
-
-        } else {// 左侧没有选择框 + 单选
-
-        }
-      }
-      this._value = this.selectList
-    },
-    //右侧的×
-    noSelected(org) {
           for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === org.value) {
+            if (this.selectList[i].value === data.value) {
               this.selectList.splice(i, 1);
               break;
             }
           }
-      org.selected = false;
+          if (checked) {
+            this.$refs.tree.setCheckedNodes([data]);
+            this.selectList = [data];
+          } else if(data==='1') {
+            this.$refs.tree.setCheckedKeys([]);
+            this.selectList = [];
+          }
+        }
+      }
+      // this._value = this.selectList
+    },
+
+    //左侧没有选择框时,点击tree-item
+    /**
+     * 可以点击树节点label,进行选择
+     * @param node 选择的每个节点item
+     * @param check checked(checkbox选择框)是否选中
+     */
+    handle(node,check) {
+      if(this.multiple){
+        //不添加重复的数据到右边
+        for (let i = 0; i < this.selectList.length; i++) {
+          if (this.selectList[i].value === node.value) {
+            this.selectList.splice(i, 1);
+            break;
+          }
+        }
+        check.checked=true
+        this.selectList.push(node);
+      }else {
+        check.checked=true
+        this.selectList=[node];
+      }
+    },
+    //左侧无选择框时,右侧显示×
+    noSelected(selectItem) {
+      for (let i = 0; i < this.selectList.length; i++) {
+        if (this.selectList[i].value === selectItem.value) {
+          this.selectList.splice(i, 1);
+          this.$refs.tree.setCheckedKeys(i);
+          break;
+        }
+      }
+      if (this.showCheckbox) {
+        // 左侧有选择框 + 单选
+        if (this.multiple===false) {
+          this.$refs.tree.setCheckedKeys([]);
+        }
+      }
     },
     //清空
     clearSelected() {
@@ -186,13 +229,16 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.handleCheckChange("", false);
+        this.handleCheckChange("1");
+        if(!this.showCheckbox){
+            this.selectList=[]
+        }
       });
     },
     //确定按钮
     selectConfirm() {
-      this.$emit("input", this.selectList)
+      // this.$emit("input", this.selectList)
-      this.$emit("dengjie")
+      // this.$emit("dengjie")
     }
   }
 };

flowable-engine-web/src/views/Index.vue

@@ -32,19 +32,19 @@
     </div>
 
 
-    <org-picker type="user" ref="orgPicker" :v-model="select" :value="select" @dengjie="dengjie"
+    <test type="user" ref="orgPicker" :v-model="select" :value="select" @dengjie="dengjie"
-                @ok="selected"></org-picker>
+                @ok="selected"></test>
 
 
   </div>
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import Test from "@/components/common/Test";
 
 export default {
   name: "Index",
-  components: {OrgPicker},
+  components: {Test},
   data() {
     return {
       select: [],

flowable-engine-web/src/views/admin/layout/FormBaseSetting.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 import iconfont from '@/assets/iconfont/iconfont.json'
 
 export default {

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

@@ -25,7 +25,7 @@
 
 <script>
 import componentMinxins from '../ComponentMinxins'
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 
 export default {
   mixins: [componentMinxins],

flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 import RolePickerMe from "../../../../components/common/RolePickerMe";
 import RoleItems from "../RoleItems";
 import OrgItems from "../OrgItems";

flowable-engine-web/src/views/common/process/config/CcNodeConfig.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 import OrgItems from "../OrgItems";
 
 export default {

flowable-engine-web/src/views/common/process/config/ConditionGroupItemConfig.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 import OrgItems from '../OrgItems'
 import {ValueType} from '@/views/common/form/ComponentsConfigExport'
 

flowable-engine-web/src/views/common/process/config/RootNodeConfig.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import OrgPicker from "@/components/common/OrgPicker";
+import OrgPicker from "@/components/common/Test";
 import OrgItems from "../OrgItems";
 
 export default {