Merge pull request 'dengjie commit : 角色选择器完善及部分细节样式' (#5) from DJ into master

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

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

@@ -1,16 +1,21 @@
 <template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
+  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
         <div style="padding: 5px 8px;">
-          <el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
+          <el-input v-model="filterText" style="width: 100%;" size="small"
                     clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
         </div>
         <!-- 部门 -->
         <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
         <el-scrollbar style="height:350px">
-          <el-tree :data="deptList" ref="tree" empty-text=""  default-expand-all show-checkbox
+          <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
-                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
+                   :show-checkbox="showCheckbox"
+                   @check="handleCheckChange" :filter-node-method="filterNode">
+             <span class="custom-tree-node" slot-scope="{ node, data }">
+                   <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
+             </span>
+          </el-tree>
         </el-scrollbar>
       </div>
 
@@ -24,6 +29,7 @@
           <div v-for="(org, index) in selectList" :key="index" class="org-item">
             <i class="el-icon-folder-opened"></i>
             <span>{{ org.label }}</span>
+            <i class="el-icon-close" @click="noSelected(org)"></i>
           </div>
         </div>
       </div>
@@ -42,9 +48,34 @@ export default {
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
+      showCheckbox: true,//是否显示左侧选择框
       selectList: [],
       filterText: "",
-      deptList: []
+      deptList: [
+        {
+          value:1,
+          label: '一级 1',
+          children: [{
+            value:2,
+            label: '二级 1-1',
+            children: [{
+              value:3,
+              label: '三级 1-1-1'
+            }]
+          }]
+        }, {
+          value:4,
+          label: '一级 2',
+          children: [{
+            value:5,
+            label: '二级 2-1',
+            children: [{
+              value:6,
+              label: '三级 2-1-1'
+            }]
+          }]
+        }
+      ]
     };
   },
   watch: {
@@ -56,11 +87,11 @@ export default {
     this.getDepartmentTree();
   },
   methods: {
-    //获取角色信息
+    //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log(res);
+        console.log("获取部门信息", res);
-        this.deptList=res.data
+        this.deptList = res.data;
       });
     },
     //通过关键字过滤树节点
@@ -68,41 +99,57 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    //用于首页选择本次登录者,显示弹窗
+    //用于部门选择
-    show() {
+    showDeptPicker() {
       this.visible = true;
-      this.init();
-    },
-    //初始化
-    init() {
-      this.selectList = Object.assign([], this.selected);
     },
     //选中部门
     handleCheckChange(data, checked) {
-      //多选
+      // 左侧有选择框
-      if (this.multiple) {
+      if (this.showCheckbox) {
-        for (let i = 0; i < this.selectList.length; i++) {
+        // 左侧有选择框 + 多选
-          if (this.selectList[i].value === data.value) {
+        if (this.multiple) {
-            this.selectList.splice(i, 1);
+          //不添加重复的数据到右边
-            break;
+          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.selectList.push(data);
+          } else {
+            // 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 = [];
           }
         }
-        if (checked) {
+      } else {// 左侧没有选择框
-          this.selectList.push(data);
+        // 左侧没有选择框 + 多选
+        if (this.multiple) {
+
+        } else {// 左侧没有选择框 + 单选
+
         }
-      } else {//单选
-        checked = true;
-        this.selectList = [data];
       }
     },
-    //确定按钮
+    //右侧的×
-    selectOk() {
+    noSelected(org) {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
+      for (let i = 0; i < this.selectList.length; i++) {
-      //   v.avatar = undefined;
+        if (this.selectList[i].value === org.value) {
-      //   return v;
+          this.selectList.splice(i, 1);
-      // })));
+          break;
-      // this.visible = false;
+        }
-      // this.recover();
+      }
+      org.selected = false;
     },
     //清空
     clearSelected() {
@@ -111,23 +158,19 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.selectList = [];
+        this.handleCheckChange("", false);
       });
     },
-
+    //确定按钮
-    searchUser() {
+    selectConfirm() {
-      let userName = this.search.trim();
+      // this.$emit("ok", Object.assign([], this.select.map(v => {
-      this.searchUsers = [];
+      //   v.avatar = undefined;
-      this.loading = true;
+      //   return v;
-      // getUserByName({userName: userName}).then(rsp => {
+      // })));
-      //   this.loading = false
+      // this.visible = false;
-      //   this.searchUsers = rsp.data
+      // this.recover();
-      //   this.selectToLeft()
-      // }).catch(err => {
-      //   this.loading = false
-      //   this.$message.error("接口异常")
-      // })
     }
+
   }
 };
 </script>
@@ -135,6 +178,16 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
+/deep/ .el-tree-node {
+  .is-leaf + .el-checkbox .el-checkbox__inner {
+    display: inline-block;
+  }
+
+  .el-checkbox .el-checkbox__inner {
+    display: none;
+  }
+}
+
 /deep/ .el-dialog__body {
   padding: 10px 20px;
 }
@@ -182,6 +235,12 @@ 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;
@@ -189,6 +248,7 @@ export default {
     padding: 7px 5px;
     display: flex;
     align-items: center;
+
     cursor: pointer;
 
     &:hover {

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

@@ -1,5 +1,5 @@
 <template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
+  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
         <div class="role-header">
@@ -10,7 +10,7 @@
           <!-- 系统角色-->
           <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
                @click="selectChange(roleItem)">
-            <el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
+            <el-checkbox v-model="roleItem.selected" v-if="showCheckbox" @change="selectChange(roleItem)"></el-checkbox>
             <i class="el-icon-user-solid" style="margin-left: 5px"></i>
             <span>{{ roleItem.label }}</span>
           </div>
@@ -40,13 +40,47 @@ import {getRole} from "@/api/org";
 
 export default {
   name: "RolePicker",
+  props: {
+    selected: {
+      default: () => {
+        return [];
+      },
+      type: Array
+    }
+  },
   data() {
     return {
       visible: false,
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
-      roleList: [],
+      showCheckbox: true,//是否显示左侧选择框
+      roleList: [
+        // {
+        //   value: 1,
+        //   label: "超级管理员"
+        // },
+        // {
+        //   value: 2,
+        //   label: "普通角色"
+        // },
+        // {
+        //   value: 100,
+        //   label: "前端开发人员"
+        // },
+        // {
+        //   value: 101,
+        //   label: "图片文件管理员"
+        // },
+        // {
+        //   value: 102,
+        //   label: "附件管理员"
+        // },
+        // {
+        //   value: 103,
+        //   label: "权限测试角色"
+        // }
+      ],
       selectList: []
     };
   },
@@ -57,32 +91,56 @@ export default {
     //获取角色信息
     getRole() {
       getRole().then(res => {
-        this.roleList=res.data
+        this.roleList = res.data;
       });
     },
-    //用于首页选择本次登录者,显示弹窗
-    show() {
-      this.visible = true;
-      this.init();
-    },
-    init() {
-      this.selectList = Object.assign([], this.selected);
-    },
     //选中角色
-    selectChange(userItem) {
+    selectChange(roleItem) {
-      //多选
+      // 左侧有选择框
-      if (this.multiple) {
+      if (this.showCheckbox) {
-        for (let i = 0; i < this.selectList.length; i++) {
+        // 左侧有选择框 + 多选
-          if (this.selectList[i].value === userItem.value) {
+        if (this.multiple) {
-            this.selectList.splice(i, 1);
+          for (let i = 0; i < this.selectList.length; i++) {
-            break;
+            if (this.selectList[i].value === roleItem.value) {
+              this.selectList.splice(i, 1);
+              break;
+            }
+          }
+          if (roleItem.selected) {
+            this.selectList.push(roleItem);
+          }
+        } else {// 左侧有选择框 + 单选
+          //用于左侧选择框选中取消,引起右侧数据变化
+          for (let i = 0; i < this.selectList.length; i++) {
+            if (this.selectList[i].value === roleItem.value) {
+              this.selectList.splice(i, 1);
+              break;
+            }
+          }
+          if (roleItem.selected) {
+            this.selectList = [roleItem];
+          }
+          for (let i = 0; i < this.roleList.length; i++) {
+            for (let j = 0; j < this.selectList.length; j++) {
+              if (this.roleList[i].value !== this.selectList[j].value) {
+                this.roleList[i].selected = false;
+              }
+            }
           }
         }
-        userItem.selected = true;
+      } else {// 左侧没有选择框
-        this.selectList.push(userItem);
+        // 左侧没有选择框 + 多选
-      } else {//单选
+        if (this.multiple) {
-        userItem.selected = true;
+          for (let i = 0; i < this.selectList.length; i++) {
-        this.selectList = [userItem];
+            if (this.selectList[i].value === roleItem.value) {
+              this.selectList.splice(i, 1);
+              break;
+            }
+          }
+          this.selectList.push(roleItem);
+        }else {// 左侧没有选择框 + 单选
+          this.selectList = [roleItem];
+        }
       }
     },
     //右侧的×
@@ -95,15 +153,6 @@ export default {
       }
       org.selected = false;
     },
-    //确定按钮
-    selectOk() {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
-      //   v.avatar = undefined;
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
-    },
     //清空
     clearSelected() {
       this.$confirm("您确定要清空已选中的项?", "提示", {
@@ -111,8 +160,22 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.selectList=[]
+        for (let i = 0; i < this.selectList.length; i++) {
+          if (this.selectList[i].selected === true) {
+            this.selectList[i].selected = false;
+          }
+        }
+        this.selectList = [];
       });
+    },
+    //确定按钮
+    selectConfirm() {
+      // this.$emit("ok", Object.assign([], this.select.map(v => {
+      //   v.avatar = undefined;
+      //   return v;
+      // })));
+      // this.visible = false;
+      // this.recover();
     }
 
   }

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

@@ -1,16 +1,21 @@
 <template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
+  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
         <div style="padding: 5px 8px;">
-          <el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
+          <el-input v-model="filterText" style="width: 100%;" size="small"
                     clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
         </div>
         <!-- 部门 -->
         <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
         <el-scrollbar style="height:350px">
-          <el-tree :data="deptList" ref="tree" empty-text=""  default-expand-all show-checkbox
+          <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
-                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
+                   :show-checkbox="showCheckbox"
+                   @check="handleCheckChange" :filter-node-method="filterNode">
+             <span class="custom-tree-node" slot-scope="{ node, data }">
+                   <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
+             </span>
+          </el-tree>
         </el-scrollbar>
       </div>
 
@@ -42,6 +47,7 @@ export default {
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
+      showCheckbox: true,//是否显示左侧选择框
       selectList: [],
       filterText: "",
       deptList: []
@@ -56,11 +62,11 @@ export default {
     this.getDepartmentTree();
   },
   methods: {
-    //获取角色信息
+    //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log(res);
+        console.log("获取部门信息", res);
-        this.deptList=res.data
+        this.deptList = res.data;
       });
     },
     //通过关键字过滤树节点
@@ -68,42 +74,47 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    //用于首页选择本次登录者,显示弹窗
+    //用于部门选择
-    show() {
+    showDeptPicker() {
       this.visible = true;
-      this.init();
-    },
-    //初始化
-    init() {
-      this.selectList = Object.assign([], this.selected);
     },
     //选中部门
     handleCheckChange(data, checked) {
-      //多选
+      // 左侧有选择框
-      if (this.multiple) {
+      if (this.showCheckbox) {
-        for (let i = 0; i < this.selectList.length; i++) {
+        // 左侧有选择框 + 多选
-          if (this.selectList[i].value === data.value) {
+        if (this.multiple) {
-            this.selectList.splice(i, 1);
+          for (let i = 0; i < this.selectList.length; i++) {
-            break;
+            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 {
+            // this.$refs.tree.setCheckedKeys(data);
+          }
+        } else {// 左侧有选择框 + 单选
+          if (checked) {
+            this.$refs.tree.setCheckedNodes([data]);
+            this.selectList = [data];
+          } else {
+            this.$refs.tree.setCheckedKeys([]);
+            this.selectList = [];
           }
         }
-        if (checked) {
+      }else {// 左侧没有选择框
-          this.selectList.push(data);
+        // 左侧没有选择框 + 多选
+        if (this.multiple) {
+
+        }else {// 左侧没有选择框 + 单选
+
         }
-      } else {//单选
-        checked = true;
-        this.selectList = [data];
       }
     },
-    //确定按钮
-    selectOk() {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
-      //   v.avatar = undefined;
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
-    },
     //清空
     clearSelected() {
       this.$confirm("您确定要清空已选中的项?", "提示", {
@@ -111,23 +122,20 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.selectList = [];
+
+        this.handleCheckChange("", false);
       });
     },
-
+    //确定按钮
-    searchUser() {
+    selectConfirm() {
-      let userName = this.search.trim();
+      // this.$emit("ok", Object.assign([], this.select.map(v => {
-      this.searchUsers = [];
+      //   v.avatar = undefined;
-      this.loading = true;
+      //   return v;
-      // getUserByName({userName: userName}).then(rsp => {
+      // })));
-      //   this.loading = false
+      // this.visible = false;
-      //   this.searchUsers = rsp.data
+      // this.recover();
-      //   this.selectToLeft()
-      // }).catch(err => {
-      //   this.loading = false
-      //   this.$message.error("接口异常")
-      // })
     }
+
   }
 };
 </script>
@@ -135,6 +143,15 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
+/deep/.el-tree-node {
+  .is-leaf + .el-checkbox .el-checkbox__inner {
+    display: inline-block;
+  }
+  .el-checkbox .el-checkbox__inner {
+    display: none;
+  }
+}
+
 /deep/ .el-dialog__body {
   padding: 10px 20px;
 }

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

@@ -4,7 +4,7 @@
 
     <div class="work-panel">
       <div class="user">
-        <el-button type="primary" round size="small" @click="$refs.orgPicker.show()" icon="el-icon-user">选择本次登录者</el-button>
+        <el-button type="primary" round size="small" @click="showRolePicker()" icon="el-icon-user">选择本次登录者</el-button>
         <div v-if="loginUser !== '' && loginUser !== null">
           <span>{{loginUser.name}}</span>
         </div>
@@ -60,6 +60,10 @@ export default {
     }
   },
   methods:{
+    //显示角色选择框
+    showRolePicker(){
+      this.$refs.orgPicker.visible=true
+    },
     selected(select){
       this.select = select
       this.loginUser = select.length > 0 ? select[0]:''

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

@@ -48,7 +48,7 @@
         <div :class="{'mobile': showMobile, 'pc': !showMobile}">
           <div :class="{'bd': showMobile}">
             <div :class="{'form-content': showMobile}">
-              <div class="form">
+              <div class="form" >
                 <div class="tip" v-show="forms.length === 0 && !isStart">👈 请在左侧选择控件并拖至此处</div>
                 <draggable class="drag-from" :list="forms" group="form"
                            :options="{animation: 300, chosenClass:'choose', sort:true}"
@@ -392,7 +392,7 @@ export default {
 
     .pc {
       margin-top: 4%;
-
+     padding: 0 150px;
       .drag-from {
         height: calc(100vh - 190px);
         background-color: rgb(245, 246, 246);

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

@@ -16,12 +16,12 @@
         </div>
       </template>
       <template v-else-if="perm === 'R'">
-        <div style="display: flex">
+        <div style="display: flex;">
           <span>{{_value}}</span>
-          <div v-show="showChinese" style="margin-left: 30px;">
+          <span v-show="showChinese" style="margin-left: 30px;">
             <span>大写：</span>
             <span class="chinese">{{chinese}}</span>
-          </div>
+          </span>
         </div>
       </template>
     </template>

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

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