dengjie commit : 部门选择器样式初步完成

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

flowable-engine-web/src/api/org.js

@@ -26,7 +26,14 @@ export function getUserByName(param) {
     params: param
   })
 }
+//获取采取树形控件的部门option
+export function getDepartmentTree() {
+  return request({
+    url: 'admin/dept/option',
+    method: 'get'
+  })
+}
 
 export default {
-  getOrgTree, getUserByName, getRole
+  getOrgTree, getUserByName, getRole,getDepartmentTree
 }

flowable-engine-web/src/api/processDefinition.js

@@ -37,7 +37,7 @@ export function getHistoryVersion(processDefinitionKey) {
 
 export function deleteHistoryVersion(deploymentId) {
     return request({
-        url: "/workflow/process/definition/" + deploymentId,
+        url: "/flowable/process/definition/" + deploymentId,
         method: "delete",
     })
 }

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

@@ -2,19 +2,16 @@
   <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
-        <div class="role-header">
-          <div>系统角色</div>
-        </div>
-        <div class="org-items">
-          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
-          <!-- 系统角色-->
-          <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"></el-checkbox>
-            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-            <span>{{ roleItem.name }}</span>
-          </div>
+        <div style="padding: 5px 8px;">
+          <el-input v-model="filterText" @input="searchUser" 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
+                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
+        </el-scrollbar>
       </div>
 
       <div class="selected">
@@ -22,12 +19,11 @@
           <span>已选 {{ selectList.length }} 项</span>
           <span @click="clearSelected">清空</span>
         </div>
-        <div class="org-items">
+        <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-role-item">
-            <i class="el-icon-user-solid"></i>
-            <span>{{ org.name }}</span>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
+          <div v-for="(org, index) in selectList" :key="index" class="org-item">
+            <i class="el-icon-folder-opened"></i>
+            <span>{{ org.label }}</span>
           </div>
         </div>
       </div>
@@ -36,87 +32,68 @@
 </template>
 
 <script>
-import {getRole} from "@/api/org";
+import {getDepartmentTree} from "@/api/org";
 
 export default {
-  name: "OrgPicker",
+  name: "departmentPicker",
   data() {
     return {
       visible: false,
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
-      roleList: [
-        {
-          value: 1,
-          name: "超级管理员"
-        },
-        {
-          value: 2,
-          name: "普通角色"
-        },
-        {
-          value: 100,
-          name: "前端开发人员"
-        },
-        {
-          value: 101,
-          name: "图片文件管理员"
-        },
-        {
-          value: 102,
-          name: "附件管理员"
-        },
-        {
-          value: 103,
-          name: "权限测试角色"
-        }
-      ],
-      selectList: []
+      selectList: [],
+      filterText: "",
+      deptList: []
     };
   },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
-    this.getRole();
+    this.getDepartmentTree();
   },
   methods: {
     //获取角色信息
-    getRole() {
-      getRole().then(res => {
-        console.log("获取角色信息:==", res);
+    getDepartmentTree() {
+      getDepartmentTree().then(res => {
+        console.log(res);
+        this.deptList=res.data
       });
     },
+    //通过关键字过滤树节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
     //用于首页选择本次登录者,显示弹窗
     show() {
       this.visible = true;
       this.init();
-      // this.getOrgList();
     },
-    //选中角色
-    selectChange(userItem) {
+    //初始化
+    init() {
+      this.selectList = Object.assign([], this.selected);
+    },
+    //选中部门
+    handleCheckChange(data, checked) {
       //多选
       if (this.multiple) {
         for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === userItem.value) {
+          if (this.selectList[i].value === data.value) {
             this.selectList.splice(i, 1);
             break;
           }
         }
-        userItem.selected = true;
-        this.selectList.push(userItem);
-      } else {//单选
-        userItem.selected = true;
-        this.selectList = [userItem];
-      }
-    },
-    //右侧的×
-    noSelected(org) {
-      for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === org.value) {
-          this.selectList.splice(i, 1);
-          break;
+        if (checked) {
+          this.selectList.push(data);
         }
+      } else {//单选
+        checked = true;
+        this.selectList = [data];
       }
-      org.selected = false;
     },
     //确定按钮
     selectOk() {
@@ -134,11 +111,22 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.recover();
+        this.selectList = [];
       });
     },
-    init() {
-      this.selectList = Object.assign([], this.selected);
+
+    searchUser() {
+      let userName = this.search.trim();
+      this.searchUsers = [];
+      this.loading = true;
+      // getUserByName({userName: userName}).then(rsp => {
+      //   this.loading = false
+      //   this.searchUsers = rsp.data
+      //   this.selectToLeft()
+      // }).catch(err => {
+      //   this.loading = false
+      //   this.$message.error("接口异常")
+      // })
     }
   }
 };
@@ -146,11 +134,11 @@ export default {
 
 <style lang="less" scoped>
 @containWidth: 278px;
+
 /deep/ .el-dialog__body {
   padding: 10px 20px;
 }
 
-
 .picker {
   height: 402px;
   position: relative;
@@ -160,12 +148,6 @@ export default {
     left: 0;
     top: 0;
   }
-
-  .role-header {
-    padding: 10px !important;
-    margin-bottom: 5px;
-    border-bottom: 1px solid #e8e8e8;
-  }
 }
 
 .candidate, .selected {
@@ -194,29 +176,20 @@ export default {
       cursor: pointer;
     }
   }
-
 }
 
-
 .org-items {
   overflow-y: auto;
   height: 350px;
 
-  .el-icon-close {
-    position: absolute;
-    right: 5px;
-    cursor: pointer;
-    font-size: larger;
-  }
-
-  .org-role-item {
+  .org-item {
+    margin: 0 5px;
+    border-radius: 5px;
+    position: relative;
     padding: 7px 5px;
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin: 0 5px;
-    border-radius: 5px;
-    position: relative;
 
     &:hover {
       background: #f1f1f1;
@@ -225,10 +198,12 @@ export default {
     > span {
       margin-left: 5px;
     }
-
   }
 }
 
+/deep/ .el-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
 
 ::-webkit-scrollbar {
   float: right;
@@ -241,4 +216,5 @@ export default {
   border-radius: 16px;
   background-color: #efefef;
 }
+
 </style>

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

@@ -10,9 +10,9 @@
           <!-- 系统角色-->
           <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"></el-checkbox>
+            <el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
             <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-            <span>{{ roleItem.name }}</span>
+            <span>{{ roleItem.label }}</span>
           </div>
         </div>
       </div>
@@ -26,7 +26,7 @@
           <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
           <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
             <i class="el-icon-user-solid"></i>
-            <span>{{ org.name }}</span>
+            <span>{{ org.label }}</span>
             <i class="el-icon-close" @click="noSelected(org)"></i>
           </div>
         </div>
@@ -46,32 +46,7 @@ export default {
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
-      roleList: [
-        {
-          value: 1,
-          name: "超级管理员"
-        },
-        {
-          value: 2,
-          name: "普通角色"
-        },
-        {
-          value: 100,
-          name: "前端开发人员"
-        },
-        {
-          value: 101,
-          name: "图片文件管理员"
-        },
-        {
-          value: 102,
-          name: "附件管理员"
-        },
-        {
-          value: 103,
-          name: "权限测试角色"
-        }
-      ],
+      roleList: [],
       selectList: []
     };
   },
@@ -82,14 +57,16 @@ export default {
     //获取角色信息
     getRole() {
       getRole().then(res => {
-        console.log("获取角色信息:==", res);
+        this.roleList=res.data
       });
     },
     //用于首页选择本次登录者,显示弹窗
     show() {
       this.visible = true;
       this.init();
-      // this.getOrgList();
+    },
+    init() {
+      this.selectList = Object.assign([], this.selected);
     },
     //选中角色
     selectChange(userItem) {
@@ -134,12 +111,10 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.recover();
+        this.selectList=[]
       });
-    },
-    init() {
-      this.selectList = Object.assign([], this.selected);
     }
+
   }
 };
 </script>

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

@@ -0,0 +1,220 @@
+<template>
+  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :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"
+                    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
+                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
+        </el-scrollbar>
+      </div>
+
+      <div class="selected">
+        <div class="count">
+          <span>已选 {{ selectList.length }} 项</span>
+          <span @click="clearSelected">清空</span>
+        </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">
+            <i class="el-icon-folder-opened"></i>
+            <span>{{ org.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </w-dialog>
+</template>
+
+<script>
+import {getDepartmentTree} from "@/api/org";
+
+export default {
+  name: "departmentPicker",
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      title: "请选择",
+      multiple: true,//是否多选
+      selectList: [],
+      filterText: "",
+      deptList: []
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getDepartmentTree();
+  },
+  methods: {
+    //获取角色信息
+    getDepartmentTree() {
+      getDepartmentTree().then(res => {
+        console.log(res);
+        this.deptList=res.data
+      });
+    },
+    //通过关键字过滤树节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    //用于首页选择本次登录者,显示弹窗
+    show() {
+      this.visible = true;
+      this.init();
+    },
+    //初始化
+    init() {
+      this.selectList = Object.assign([], this.selected);
+    },
+    //选中部门
+    handleCheckChange(data, checked) {
+      //多选
+      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;
+          }
+        }
+        if (checked) {
+          this.selectList.push(data);
+        }
+      } 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("您确定要清空已选中的项?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.selectList = [];
+      });
+    },
+
+    searchUser() {
+      let userName = this.search.trim();
+      this.searchUsers = [];
+      this.loading = true;
+      // getUserByName({userName: userName}).then(rsp => {
+      //   this.loading = false
+      //   this.searchUsers = rsp.data
+      //   this.selectToLeft()
+      // }).catch(err => {
+      //   this.loading = false
+      //   this.$message.error("接口异常")
+      // })
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@containWidth: 278px;
+
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+
+.picker {
+  height: 402px;
+  position: relative;
+  text-align: left;
+
+  .candidate {
+    left: 0;
+    top: 0;
+  }
+}
+
+.candidate, .selected {
+  position: absolute;
+  display: inline-block;
+  width: @containWidth;
+  height: 400px;
+  border: 1px solid #e8e8e8;
+}
+
+.selected {
+  border-left: none;
+  right: 0;
+  top: 0;
+
+  .count {
+    width: calc(@containWidth - 20px);
+    padding: 10px;
+    display: inline-block;
+    border-bottom: 1px solid #e8e8e8;
+    margin-bottom: 5px;
+
+    & > span:nth-child(2) {
+      float: right;
+      color: #c75450;
+      cursor: pointer;
+    }
+  }
+}
+
+.org-items {
+  overflow-y: auto;
+  height: 350px;
+
+  .org-item {
+    margin: 0 5px;
+    border-radius: 5px;
+    position: relative;
+    padding: 7px 5px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background: #f1f1f1;
+    }
+
+    > span {
+      margin-left: 5px;
+    }
+  }
+}
+
+/deep/ .el-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  float: right;
+  width: 4px;
+  height: 4px;
+  background-color: white;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 16px;
+  background-color: #efefef;
+}
+
+</style>

flowable-engine-web/src/views/admin/FormsPanel.vue

@@ -50,7 +50,8 @@
               <el-button type="text" icon="el-icon-edit" size="mini" @click="editProcessDefinition(item)">编辑</el-button>
               <el-button type="text" icon="el-icon-edit-outline" size="mini" @click="designProcessDefinition(item)">设计
               </el-button>
-              <el-button type="text" icon="el-icon-document" size="mini" @click="viewHistoricalVersion(item)" v-if="item.version=='v1'">历史版本
+              <el-button type="text" icon="el-icon-document" size="mini" @click="viewHistoricalVersion(item)"
+                         v-if="item.version!=='v1'">历史版本
               </el-button>
               <el-button type="text" :icon="item.state!== '1' ? 'el-icon-check':'el-icon-close'" size="mini"
                          :style="item.state== '1' ?'color: red':''"
@@ -82,62 +83,55 @@
           </el-button>
         </div>
 
-        <el-dialog title="历史版本" :visible.sync="openhistory" :close-on-click-modal="false">
+        <el-dialog title="历史版本" :visible.sync="openHhistory"
+                   width="1000px"
+                   :close-on-click-modal="true">
           <el-table
               :header-cell-style="{background:'#f5f6f6'}"
               :data="historyVersionList"
               border
-              style="width: 100%"
-              v-loading="loading"
-          >
-            <el-table-column
-                prop="logo"
-                label="logo"
-                width="180"
-            >
-              <template slot-scope="scope">
-                <i class="logo_icon" :class="scope.row.logo.icon" :style="'background: '+scope.row.logo.background"></i>
-              </template>
-            </el-table-column>
+              v-loading="loading">
             <el-table-column
                 prop="deploymentName"
                 label="名称"
                 width="180">
-            </el-table-column>
-            <el-table-column
-                prop="remark"
-                label="备注说明"
-                width="180">
+              <template slot-scope="scope">
+                <i class="logo_icon" :class="scope.row.logo.icon" :style="'background: '+scope.row.logo.background"></i>
+                {{ scope.row.deploymentName }}
+              </template>
             </el-table-column>
             <el-table-column
                 prop="state"
+                width="180"
                 label="是否启用">
               <template slot-scope="scope">
-                <el-tag type="success" v-if="scope.row.state =='1'" style="margin-right: 10px">启用</el-tag>
-                <el-tag type="danger" v-if="scope.row.state =='2'">停用</el-tag>
+                <el-tag type="success" v-if="scope.row.state ==='1'" style="margin-right: 10px">启用</el-tag>
+                <el-tag type="danger" v-if="scope.row.state ==='2'">停用</el-tag>
               </template>
             </el-table-column>
             <el-table-column
                 prop="version"
                 label="版本"
-                width="180"
-            >
+                width="180">
               <template slot-scope="scope">
                 <el-tag type="success">{{ scope.row.version }}</el-tag>
               </template>
             </el-table-column>
+            <el-table-column
+                prop="remark"
+                label="备注说明"
+                width="180"/>
             <el-table-column
                 fixed="right"
-                label="操作"
-                width="200">
+                label="操作">
               <template slot-scope="scope">
                 <el-button type="text" :icon="scope.row.state!== '1' ? 'el-icon-check':'el-icon-close'" size="mini"
-                           :style="scope.row.state== '1' ?'color: red':''"
+                           :style="scope.row.state=== '1' ?'color: red':''"
                            @click="suspendOrActivateHistoryView(scope.row)">
-                  {{ scope.row.state == "1" ? "挂起" : "启用" }}
+                  {{ scope.row.state === "1" ? "挂起" : "启用" }}
                 </el-button>
                 <el-button type="text" icon="el-icon-delete" size="mini" style="color: red"
-                           @click="deleteHistoryVersion(scope.row)" v-if="scope.row.state == '1'">
+                           @click="deleteHistoryVersion(scope.row)" v-if="scope.row.state === '1'">
                   删除
                 </el-button>
                 <el-button type="text" icon="el-icon-copy-document" size="mini">
@@ -168,12 +162,13 @@ export default {
   data() {
     return {
       loading: true,
-      openhistory: false,
+      openHhistory: false,
       moveSelect: "",
       visible: false,
       groupsSort: false,
       processDefinitionList: [],
-      historyVersionList: []
+      historyVersionList: [],
+      selectDefinition: null,
     };
   },
   mounted() {
@@ -254,12 +249,6 @@ export default {
         // }).catch(err => this.$message.error(err.response.data))
       });
     },
-    updateForm(item, type) {
-      // updateForm({templateId: item.id, type: type}).then(rsp => {
-      //   this.$message.success(rsp.data)
-      //   this.getProcessDefinition()
-      // }).catch(err => this.$message.error(err.response.data))
-    },
     getTemplateData(data, group) {
       return data;
     },
@@ -273,6 +262,7 @@ export default {
     },
     //查看历史版本
     viewHistoricalVersion(item) {
+      this.selectDefinition = item
       getHistoryVersion(item.processDefinitionKey).then(res => {
         this.loading = false;
         console.log("历史版本数据==", res.data);
@@ -283,7 +273,7 @@ export default {
       }).catch(err => {
         this.$message.error(err.response.data);
       });
-      this.openhistory = true;
+      this.openHhistory = true;
     },
     //启用,挂起历史版本
     // suspendOrActivateHistoryView(row) {
@@ -315,14 +305,15 @@ export default {
     // },
 
     //删除工作流历史版本
-    deleteHistoryVersion(row) {
-      this.$confirm("您确定要删除表单 " + row.deploymentName + " 吗，删除后无法恢复，是否继续？", "提示", {
+    deleteHistoryVersion(item) {
+      this.$confirm("您确定要删除表单 " + item.deploymentName + " 吗，删除后无法恢复，是否继续？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        deleteHistoryVersion(row.deploymentId).then(res => {
-          console.log('删除工作流历史版本',res);
+        deleteHistoryVersion(item.deploymentId).then(res => {
+          this.viewHistoricalVersion(this.selectDefinition)
+          console.log('删除工作流历史版本', res);
         })
       });
     },

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

@@ -59,6 +59,7 @@ export default {
     }
   },
   mounted() {
+    console.log(JSON.stringify(this.formItems))
     this.loadFormConfig(this.formItems)
   },
   methods: {

flowable-engine-web/src/views/common/form/config/DateTimeRangeConfig.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-form-item label="提示文字">
-      <el-input size="small" v-model="value.placeholder[0]" placeholder="开始日期提示"/>
-      <el-input size="small" v-model="value.placeholder[1]" placeholder="结束日期提示"/>
+      <el-input size="small" v-model="placeholder[0]" @change="placeholderChange" placeholder="开始日期提示"/>
+      <el-input size="small" v-model="placeholder[1]" @change="placeholderChange" placeholder="结束日期提示"/>
     </el-form-item>
     <el-form-item label="日期格式">
       <el-select size="small" v-model="value.format">
@@ -31,9 +31,25 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      placeholder:[
+        "开始时间","结束时间"
+      ]
+    }
   },
-  methods: {}
+  created() {
+    console.log("出发了",this.value.placeholder,!this.value.placeholder)
+    if (undefined !== this.value.placeholder){
+      this.placeholder = this.value.placeholder
+    }else {
+      this.$set(this.value,"placeholder",this.placeholder)
+    }
+  },
+  methods: {
+    placeholderChange(){
+      this.value.placeholder = this.placeholder
+    }
+  }
 }
 </script>