用户选择组件，角色选择组件

CatarcStandard.md

@@ -16,17 +16,19 @@
 2. 以英文字母(小写)开头，驼峰或**短横杠**命名，其中不得包含汉字、空格和特殊字符
 3. 公共组件命名以公司名称简拼为命名空间(mt-xxx.vue)
 4. 文件夹命名主要以功能模块代表命名
-5. 每个模块文件夹下需具有 index.html 或 index.vue 文件
+5. 每个模块文件夹下需具有 index.html、index.vue 或 index.js  文件
 6. 每层文件夹下需具有 README.md 文件，用来添加文件夹内部的解释说明
 
 ### 示例
 
 ![文件命名示例](./doc/文件命名示例图片.png)
 
-## HTML编写规范
+## HTML 及 Vue.js 编写规范
 
 ### 规则
 
+#### HTML
+
 1. 使用常用且熟悉的语义类标签，不能确定使用哪个就用 `div` 或 `span` 。  
 
    如: `<ul>/<ol> > <li> `, `<h1> - <h6>`, `<pre>`, `<a>`, `<button>`, `<input>`  
@@ -51,4 +53,60 @@
 4. 给每个 `<table>`  和 `<form>`  加上唯一的 id
 5. 给每个 `<img>` 加上 alt 属性
 
+#### Vue.js
+
+1. 模板结构  
+    该模板是按照 vue 加载时的触发机制以及钩子执行顺序来定义的，
+    其他选项请选择合适的位置插入。
+    ```vue
+    <template>
+      <div>
+        template example
+      </div>
+    </template>
+    
+    <script>
+      export default {
+        name: 'templateExample',
+        components: {},
+        props: {},
+        data() {
+           return {}
+        },
+        created() {},
+        mounted() {},
+        updated() {},
+        beforeRouteUpdate(to, from, next) {},
+        methods: {},
+        filter: {},
+        computed: {},
+        watch: {}
+      }
+    </script>
+    
+    <style scoped>
+    
+    </style>
+    ```
+   
+2. 组件参数传递  
+    例子:  
+    
+    ![组件参数传递](./doc/组件参数传递图片.png)
+    
+3. vue指令规范  
+
+    * 不要将 `v-if` `v-hide` 与 `v-for` 出现在同一标签内以免渲染本该隐藏的列表
+    * `v-for` 需设置 `key` 避免页面出现警告，在多循环状态时，避免重复的`key`值，
+    请使用具有唯一性的值。
+     
+4. $emit 规范
+
+    每当添加一个`$emit`后需要在`README.md`处写上文档，告知组内人员避免事件重复
+    
+    例子:  
+    
+
 ## CSS 编写规范
+
+## VUE 规范

src/api/task.js

@@ -19,7 +19,8 @@ const api = {
   updateGroupById: '/task/work-type/updateById',
   getTempletById: '/task/work-template/queryTemplateByTemplateId',
   copyTemplate: '/task/work-template/templateCopy',
-  moveTemplate: '/task/work-template/templateMove'
+  moveTemplate: '/task/work-template/templateMove',
+  roleTree: 'http://localhost:8080/roleTree'
 }
 
 export default api
@@ -177,3 +178,12 @@ export function copyOrMoveTemplate(data, type) {
     data: data
   })
 }
+
+export function roleTree(params) {
+  const url = api.roleTree
+  return axios({
+    url,
+    method: 'get',
+    params: params
+  })
+}

src/components/mt-show-input/README.md

+# FooterToolbar 底部工具栏
+
+固定在底部的工具栏。
+
+
+
+## 何时使用
+
+固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
+
+
+
+引用方式：
+
+```javascript
+import FooterToolBar from '@/components/FooterToolbar'
+
+export default {
+    components: {
+        FooterToolBar
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<footer-tool-bar>
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+或
+```html
+<footer-tool-bar extra="扩展信息提示">
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+children (slot) | 工具栏内容，向右对齐 | - | -
+extra | 额外信息，向左对齐 | String, Object | -
+

src/components/mt-show-input/index.js

+import ShowInput from './index.vue'
+
+export default ShowInput

src/components/mt-show-input/index.vue

+<template>
+  <div class="mt-show-input">
+    <input
+      ref="input"
+      :class="inputTypeClass"
+      v-model="value"
+      :readonly="!isEdit"
+      :placeholder="placeholder"
+      @click="handleClick"
+      @blur="handleBlur"
+    />
+    <div class="icon" @click="handleIconClick">
+      <slot name="icon"></slot>
+    </div>
+  </div>
+
+
+
+</template>
+
+<script>
+  export default {
+    name: 'mt-show-input',
+    data() {
+      return {
+        isEdit: false,
+        value: this.text
+      }
+    },
+    props: ['text', 'placeholder'],
+    model: {
+      prop: 'text',
+      event: 'change'
+    },
+    computed: {
+      inputTypeClass() {
+        return {
+          'text': !this.isEdit,
+          'has-icon': this.$slots.icon
+        }
+      }
+    },
+    watch: {
+      text(newVal) {
+        this.value = newVal
+      },
+      value(newVal) {
+        this.$emit('change', newVal)
+      }
+    },
+    methods: {
+      toggleInputType(e) {
+        this.isEdit = !this.isEdit
+        console.log('toggleInputType', e)
+        if (e.type === 'blur') {
+          this.$emit('blur')
+        }
+      },
+      handleClick() {
+        if (!this.isEdit) {
+          this.isEdit = !this.isEdit
+        }
+      },
+      handleIconClick() {
+        if (!this.isEdit) {
+          this.isEdit = !this.isEdit
+        }
+        this.$refs.input.focus()
+      },
+      handleBlur() {
+        this.isEdit = false
+        this.$emit('blur')
+      }
+    },
+    mounted() {
+      console.log('mt-show-input', this.$scopedSlots, this.$slots)
+    }
+  }
+</script>
+
+<style scoped>
+  .mt-show-input {
+    position: relative;
+  }
+  input {
+    border: none;
+    border-bottom: black 1px solid;
+  }
+  input:focus {
+    border: none;
+    border-bottom: black 1px solid;
+    outline-offset: 0;
+    outline: none;
+  }
+  .text {
+    /*background-color: black;*/
+    border: none;
+  }
+  .has-icon{
+    padding-right: 35px;
+  }
+
+  .text:focus {
+    /*background-color: black;*/
+    outline-offset: 0;
+    outline: none;
+  }
+  .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    cursor: pointer;
+  }
+</style>

src/config/router.config.js

@@ -92,6 +92,11 @@ export const constantRouterMap = [
         path: 'home',
         name: 'TestHome',
         component: () => import('@/views/Home')
+      },
+      {
+        path: 'test',
+        name: 'test',
+        component: () => import('@/views/testComponents')
       }
     ]
   },

src/mock/index.js

@@ -5,12 +5,13 @@ if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'tr
   // 使用同步加载依赖
   // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
   console.log('mock mounting')
-  require('./services/auth')
-  require('./services/user')
-  require('./services/manage')
-  require('./services/other')
-  require('./services/tagCloud')
-  require('./services/article')
+  // require('./services/auth')
+  // require('./services/user')
+  // require('./services/manage')
+  // require('./services/other')
+  // require('./services/tagCloud')
+  // require('./services/article')
+  require('./services/test')
 
   Mock.setup({
     timeout: 800 // setter delay time

src/mock/util.js

 const responseBody = {
-  message: '',
-  timestamp: 0,
-  result: null,
-  code: 0
-}
+  'code': 'M0000',
+  'msg': 'ok',
+  'ctime': 1560499805992,
+  'requestID': '1139444888657797122'
+};
 
 export const builder = (data, message, code = 0, headers = {}) => {
-  responseBody.result = data
+  responseBody.data = data;
   if (message !== undefined && message !== null) {
-    responseBody.message = message
+    responseBody.message = message;
   }
   if (code !== undefined && code !== 0) {
-    responseBody.code = code
-    responseBody._status = code
+    responseBody.code = code;
+    responseBody._status = code;
   }
   if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
-    responseBody._headers = headers
+    responseBody._headers = headers;
   }
-  responseBody.timestamp = new Date().getTime()
-  return responseBody
-}
+  responseBody.timestamp = new Date().getTime();
+  return responseBody;
+};
 
 export const getQueryParameters = (options) => {
-  const url = options.url
-  const search = url.split('?')[1]
+  const url = options.url;
+  const search = url.split('?')[1];
   if (!search) {
-    return {}
+    return {};
   }
   return JSON.parse('{"' + decodeURIComponent(search)
     .replace(/"/g, '\\"')
     .replace(/&/g, '","')
-    .replace(/=/g, '":"') + '"}')
-}
+    .replace(/=/g, '":"') + '"}');
+};
 
 export const getBody = (options) => {
-  return options.body && JSON.parse(options.body)
-}
+  return options.body && JSON.parse(options.body);
+};

src/store/modules/task-template.js

@@ -57,13 +57,17 @@ const taskTemplate = {
     workTemplate: state => state.workTemplate,
     workApproveList: state => state.workApproveList,
     fieldCondition: state => state.fieldCondition,
-    workTemplateOtherSettings: state => state.workTemplateOtherSettings
+    workTemplateOtherSettings: state => state.workTemplateOtherSettings,
+    createRoles: state => state.workTemplate.createRoles || []
   },
 
   mutations: {
     SET_WORKTEMPLATE: (state, workTemplate) => {
       state.workTemplate = workTemplate;
     },
+    SET_WORKTEMPLATE_CREATEROLES: (state, data) => {
+      state.workTemplate.createRoles = data;
+    },
     SET_FROMDATA: (state, data) => {
       state.createformData = data;
       // state.workTemplateField = fromData
@@ -300,20 +304,23 @@ const taskTemplate = {
         resolve();
       });
     },
+    saveWorkTemplateCreateRole({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        commit('SET_WORKTEMPLATE_CREATEROLES', data);
+        console.log('SET_WORKTEMPLATE_CREATEROLES', data);
+        resolve();
+      });
+    },
     saveWorkTemplateField({ commit, state }, data) {
       return new Promise((resolve, reject) => {
-        console.log(data);
-        console.log(state.workTemplateField);
         for (const obj in state.workTemplateField) {
           const data2 = JSON.parse(JSON.stringify(data));
-          console.log(state.workTemplateField[obj].template);
           const workTemplateFieldObj = new Map();
           const data1 = state.workTemplateField[obj].template;
           if (data1 !== undefined) {
             data1.forEach((item) => {
               workTemplateFieldObj.set(item.fieldId, item.permission);
             });
-            console.log(workTemplateFieldObj);
             data2.forEach((item) => {
               if (workTemplateFieldObj.get(item.fieldId) === undefined) {
                 item.permission = '';
@@ -322,7 +329,6 @@ const taskTemplate = {
               }
             });
             state.workTemplateField[obj].template = data2;
-            console.log(data2);
           }
         }
         commit('SET_FROMDATA', data);

src/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree/README.md

+# 文件夹说明
+
+此文件夹是 `任务分组列表模块` 
+
+## 使用位置示例
+
+![任务分组列表模块](../../../../../../doc/任务分组列表模块.png)
+
+## 事件
+
+| 事件名称 | 说明 | 回调参数 |
+| :---: | :---: | :---: |
+| deploymentTask | 部署按钮点击的回调 | (id)=>{} | 
+| editTask | 模板编辑按钮点击的回调 | (id)=>{} | 
+| moveTask | 移动按钮点击的回调 | (id)=>{} | 
+| copyTask | 复制按钮点击的回调 | (id)=>{} | 
+| toggleTaskStatus | 部署按钮点击的回调 | (id, status)=>{} | 
+| deleteGroup | 删除按钮点击的回调 | (id)=>{} | 
+| editGroup | 分组编辑按钮点击的回调 | (groupItem)=>{} | 

src/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree/index.js

+import RoleSelectTree from './index.vue';
+
+export default RoleSelectTree;

src/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree/index.vue

+<template>
+  <div class="selector">
+    <div class="role">
+      <div class="tree">
+        <a-row class="wrap" type="flex" :gutter="16">
+          <a-col class="content left" :span="12">
+            <div class="ant-card-bordered">
+              <div><strong>选择</strong></div>
+              <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange"/>
+              <a-tree
+                @expand="onExpand"
+                :expandedKeys="expandedKeys"
+                :autoExpandParent="autoExpandParent"
+                :treeData="gData"
+                :checkable="true"
+                :checkStrictly="true"
+                v-model="selectedList"
+              >
+                <template slot="title" slot-scope="{title}">
+                  <span v-if="title.indexOf(searchValue) > -1">
+                    {{title.substr(0, title.indexOf(searchValue))}}
+                    <span style="color: #f50">{{searchValue}}</span>
+                    {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
+                  </span>
+                  <span v-else>{{title}}</span>
+                </template>
+              </a-tree>
+            </div>
+          </a-col>
+
+          <a-col class="content right" :span="12">
+            <div class="ant-card-bordered">
+              <div><strong>已选</strong></div>
+              <template v-for="(role, index) in selectedList.checked">
+                <a-tooltip v-if="role.name.length > 20" :key="role.id" :title="role.name">
+                  <a-tag class="role" :key="role.id" :closable="true" :afterClose="() => handleClose(role)">
+                    {{`${role.name.slice(0, 20)}...`}}
+                  </a-tag>
+                </a-tooltip>
+                <a-tag class="role" v-else :key="role.id" :closable="true" :afterClose="() => handleClose(role)">
+                  {{role.name}}
+                </a-tag>
+              </template>
+              <div v-if="!hasSelectedData">
+                暂无
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { Ellipsis } from '@/components'
+  import ACol from 'ant-design-vue/es/grid/Col';
+
+  const getParentKey = (key, tree) => {
+    let parentKey
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i]
+      if (node.children) {
+        if (node.children.some(item => item.key === key)) {
+          parentKey = node.key
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children)
+        }
+      }
+    }
+    return parentKey
+  }
+  export default {
+    name: 'RoleSelectTree',
+    components: {
+      ACol,
+      Ellipsis
+    },
+    props: ['gData'],
+    data() {
+      return {
+        expandedKeys: [],
+        searchValue: '',
+        autoExpandParent: true,
+        selectedList: {}
+      }
+    },
+    computed: {
+      hasSelectedData() {
+        const flag = this.selectedList.checked && this.selectedList.checked.length > 0
+        return flag
+      }
+    },
+    methods: {
+      handleClose(removedTag) {
+        const selectedList = this.selectedList && this.selectedList.checked
+        const tags = selectedList.filter(tag => tag !== removedTag)
+        console.log(tags)
+        this.selectedList = Object.assign({}, this.selectedList, {
+          checked: tags
+        })
+        // this.$set(this.selectedList, 'checked', tags)
+        // this.selectedList.checked = tags
+        // this.$forceUpdate();
+      },
+      onExpand(expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      onChange(e) {
+        const value = e.target.value
+        const expandedKeys = this.gData.map((item) => {
+          if (item.key.indexOf(value) > -1) {
+            return getParentKey(item.key, this.gData)
+          }
+          return null
+        }).filter((item, i, self) => item && self.indexOf(item) === i)
+        Object.assign(this, {
+          expandedKeys,
+          searchValue: value,
+          autoExpandParent: true,
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+  .tree {
+    overflow: hidden;
+  }
+
+  .wrap > .content {
+    /*flex: 1;*/
+    /*padding: 20px;*/
+    display: flex;
+  }
+
+  .wrap > .content > div {
+    /*flex: 1;*/
+    padding: 20px;
+    width: 100%;
+  }
+
+  .wrap .right .role {
+    display: block;
+    position: relative;
+    margin-bottom: 5px;
+  }
+
+  .wrap .right .role /deep/ .anticon-close {
+    position: absolute;
+    right: 3px;
+    line-height: 22px;
+  }
+</style>

src/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree/README.md

+# 文件夹说明
+
+此文件夹是 `任务分组列表模块` 
+
+## 使用位置示例
+
+![任务分组列表模块](../../../../../../doc/任务分组列表模块.png)
+
+## 事件
+
+| 事件名称 | 说明 | 回调参数 |
+| :---: | :---: | :---: |
+| deploymentTask | 部署按钮点击的回调 | (id)=>{} | 
+| editTask | 模板编辑按钮点击的回调 | (id)=>{} | 
+| moveTask | 移动按钮点击的回调 | (id)=>{} | 
+| copyTask | 复制按钮点击的回调 | (id)=>{} | 
+| toggleTaskStatus | 部署按钮点击的回调 | (id, status)=>{} | 
+| deleteGroup | 删除按钮点击的回调 | (id)=>{} | 
+| editGroup | 分组编辑按钮点击的回调 | (groupItem)=>{} | 

src/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree/index.js

+import UserSelectTree from './index.vue';
+
+export default UserSelectTree;

src/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree/index.vue

+<template>
+  <div class="selector">
+    <div class="role">
+      <div class="tree">
+        <a-row class="wrap" type="flex" :gutter="16">
+          <a-col class="content left" :span="12">
+            <div class="ant-card-bordered">
+              <div><strong>选择</strong></div>
+              <a-row>
+                <a-col :span="18">
+                  <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange"/>
+                  <a-tree
+                    @expand="onExpand"
+                    :defaultExpandAll="true"
+                    :treeData="gData"
+                    :showIcon="true"
+                    @select="handleSelect"
+                  >
+                    <template slot="title" slot-scope="{title}">
+                      <span v-if="title.indexOf(searchValue) > -1">
+                        {{title.substr(0, title.indexOf(searchValue))}}
+                        <span style="color: #f50">{{searchValue}}</span>
+                        {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
+                      </span>
+                      <span v-else>{{title}}</span>
+                    </template>
+                    <template slot="icon" slot-scope="{title}">
+                      1111
+                    </template>
+                  </a-tree>
+                </a-col>
+                <a-col :span="18">
+                  <div style="background-color: black"></div>
+                </a-col>
+              </a-row>
+
+            </div>
+          </a-col>
+
+          <a-col class="content right" :span="12">
+            <div class="ant-card-bordered">
+              <div><strong>已选</strong></div>
+              <template v-for="(role, index) in selectedList.checked">
+                <a-tooltip v-if="role.length > 20" :key="role" :title="role">
+                  <a-tag class="role" :key="role" :closable="true" :afterClose="() => handleClose(role)">
+                    {{`${role.slice(0, 20)}...`}}
+                  </a-tag>
+                </a-tooltip>
+                <a-tag class="role" v-else :key="role" :closable="true" :afterClose="() => handleClose(role)">
+                  {{role}}
+                </a-tag>
+              </template>
+              <div v-if="!hasSelectedData">
+                暂无
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { Ellipsis } from '@/components'
+  import ACol from 'ant-design-vue/es/grid/Col';
+  import ARow from 'ant-design-vue/es/grid/Row';
+
+  const x = 3
+  const y = 2
+  const z = 1
+  const gData = []
+
+  const generateData = (_level, _preKey, _tns) => {
+    const preKey = _preKey || '0'
+    const tns = _tns || gData
+
+    const children = []
+    for (let i = 0; i < x; i++) {
+      const key = `${preKey}-${i}`
+      tns.push({ title: key, key, scopedSlots: { title: 'title' } })
+      if (i < y) {
+        children.push(key)
+      }
+    }
+    if (_level < 0) {
+      return tns
+    }
+    const level = _level - 1
+    children.forEach((key, index) => {
+      tns[index].children = []
+      return generateData(level, key, tns[index].children)
+    })
+  }
+  generateData(z)
+
+  const dataList = []
+  const generateList = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i]
+      const key = node.key
+      dataList.push({ key, title: key })
+      if (node.children) {
+        generateList(node.children, node.key)
+      }
+    }
+  }
+  generateList(gData)
+
+  const getParentKey = (key, tree) => {
+    let parentKey
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i]
+      if (node.children) {
+        if (node.children.some(item => item.key === key)) {
+          parentKey = node.key
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children)
+        }
+      }
+    }
+    return parentKey
+  }
+  export default {
+    name: 'UserSelectTree',
+    components: {
+      ARow,
+      ACol,
+      Ellipsis
+    },
+    props: {},
+    data() {
+      return {
+        expandedKeys: [],
+        searchValue: '',
+        autoExpandParent: true,
+        gData,
+        selectedList: {}
+      }
+    },
+    computed: {
+      hasSelectedData() {
+        const flag = this.selectedList.checked && this.selectedList.checked.length > 0
+        return flag
+      }
+    },
+    methods: {
+      handleClose(removedTag) {
+        const selectedList = this.selectedList && this.selectedList.checked
+        const tags = selectedList.filter(tag => tag !== removedTag)
+        console.log(tags)
+        this.selectedList = Object.assign({}, this.selectedList, {
+          checked: tags
+        })
+        // this.$set(this.selectedList, 'checked', tags)
+        // this.selectedList.checked = tags
+        // this.$forceUpdate();
+      },
+      onExpand(expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      handleSelect(selectedKeys, e){
+        console.log('handleSelect', selectedKeys, e)
+      },
+      onChange(e) {
+        const value = e.target.value
+        const expandedKeys = dataList.map((item) => {
+          if (item.key.indexOf(value) > -1) {
+            return getParentKey(item.key, gData)
+          }
+          return null
+        }).filter((item, i, self) => item && self.indexOf(item) === i)
+        Object.assign(this, {
+          expandedKeys,
+          searchValue: value,
+          autoExpandParent: true,
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+  .tree {
+    overflow: hidden;
+  }
+
+  .wrap > .content {
+    /*flex: 1;*/
+    /*padding: 20px;*/
+    display: flex;
+  }
+
+  .wrap > .content > div {
+    /*flex: 1;*/
+    padding: 20px;
+    width: 100%;
+  }
+
+  .wrap .right .role {
+    display: block;
+    position: relative;
+    margin-bottom: 5px;
+  }
+
+  .wrap .right .role /deep/ .anticon-close {
+    position: absolute;
+    right: 3px;
+    line-height: 22px;
+  }
+</style>

src/views/taskTemplate/taskDesign/taskFlow/customControls/CustomContextPad.js

@@ -34,15 +34,29 @@ export default class CustomContextPad {
 
       create.start(event, shape, element);
     }
+    function appendUserTaskStart(event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });
+
+      create.start(event, shape, element);
+    }
 
     return {
-      'append.service-task': {
+      // 'append.service-task': {
+      //   group: 'model',
+      //   className: 'bpmn-icon-service-task',
+      //   title: translate('Append ServiceTask'),
+      //   action: {
+      //     click: appendServiceTask,
+      //     dragstart: appendServiceTaskStart
+      //   }
+      // },
+      'create.user-task': {
         group: 'model',
-        className: 'bpmn-icon-service-task',
-        title: translate('Append ServiceTask'),
+        className: 'bpmn-icon-user-task',
+        title: translate('Create {type}', { type: 'User Task' }),
         action: {
-          click: appendServiceTask,
-          dragstart: appendServiceTaskStart
+          dragstart: appendUserTaskStart,
+          click: appendUserTaskStart
         }
       }
     };

src/views/taskTemplate/taskDesign/taskSetting/index.vue

@@ -332,10 +332,10 @@
                   value: this.workTemplate.phone
                 }),
                 createRoles: this.$form.createFormField({
-                  value: this.workTemplate.phone
+                  value: this.workTemplate.createRoles
                 }),
                 managerRoles: this.$form.createFormField({
-                  value: this.workTemplate.phone
+                  value: this.workTemplate.managerRoles
                 }),
                 iconImage: this.$form.createFormField({
                   value: this.workTemplate.iconImage

src/views/taskTemplate/taskGrouping/components/group-list/README.md

@@ -5,3 +5,15 @@
 ## 使用位置示例
 
 ![任务分组列表模块](../../../../../../doc/任务分组列表模块.png)
+
+## 事件
+
+| 事件名称 | 说明 | 回调参数 |
+| :---: | :---: | :---: |
+| deploymentTask | 部署按钮点击的回调 | (id)=>{} | 
+| editTask | 模板编辑按钮点击的回调 | (id)=>{} | 
+| moveTask | 移动按钮点击的回调 | (id)=>{} | 
+| copyTask | 复制按钮点击的回调 | (id)=>{} | 
+| toggleTaskStatus | 部署按钮点击的回调 | (id, status)=>{} | 
+| deleteGroup | 删除按钮点击的回调 | (id)=>{} | 
+| editGroup | 分组编辑按钮点击的回调 | (groupItem)=>{} | 

src/views/testComponents/index.vue

+<template>
+  <div>
+    <mt-show-input v-model="mtShowInputText"></mt-show-input>
+    <role-select-tree :gData="roleTree"></role-select-tree>
+    <!--<user-select-tree></user-select-tree>-->
+  </div>
+
+</template>
+
+<script>
+  import mtShowInput from "@comp/mt-show-input";
+  import roleSelectTree from "@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree";
+  import userSelectTree from "@/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree";
+
+  import { roleTree } from '@/api/task';
+
+  const generateData = (_obj, _keys) => {
+
+    const children = []
+    for (let i = 0; i < _obj; i++) {
+      tns.push({ title: key, key, scopedSlots: { title: 'title' }})
+      if (i < y) {
+        children.push(key)
+      }
+    }
+    if (_level < 0) {
+      return tns
+    }
+    const level = _level - 1
+    children.forEach((key, index) => {
+      tns[index].children = []
+      return generateData(level, key, tns[index].children)
+    })
+  }
+
+  export default {
+    name: 'test',
+    data() {
+      return {
+        mtShowInputText: '王旭',
+        roleTree: []
+      }
+    },
+    components: {
+      mtShowInput,
+      roleSelectTree,
+      userSelectTree
+    },
+    methods: {
+      getRoleTreeData() {
+        roleTree().then(res => {
+          const list = res.data || []
+          const treeData = list.map(role => {
+            const obj = Object.assign({}, {
+              key: role,
+              title: role.name,
+              children: role.roles.map(cRole => {
+                const cObj = Object.assign({}, {
+                  key: cRole,
+                  title: cRole.name
+                })
+                return cObj
+              })
+            })
+            return obj
+          })
+          this.roleTree = treeData
+          console.log('getRoleTreeData', this.roleTree)
+        })
+      },
+
+    },
+    mounted() {
+      this.getRoleTreeData()
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/testComponents/roleTree.json

+{
+  "code": "M0000",
+  "msg": "ok",
+  "ctime": 1560499805992,
+  "requestID": "1139444888657797122",
+  "data": [
+    {
+      "id": "1128488217616879618",
+      "name": "拜拜",
+      "corpId": "6",
+      "roles": [
+        {
+          "id": "1128488267411656706",
+          "name": "部长",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1128488267466182657"
+        },
+        {
+          "id": "1128488322302513154",
+          "name": "事业部总经理",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1128488322373816322"
+        },
+        {
+          "id": "1130685864499691521",
+          "name": "角色1",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1130685864529051650"
+        },
+        {
+          "id": "1130685903745794049",
+          "name": "角色2",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1130685903749988354"
+        },
+        {
+          "id": "1130685935211462657",
+          "name": "角色3",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1130685935219851265"
+        },
+        {
+          "id": "1130685961195175937",
+          "name": "角色4",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1130685961203564546"
+        },
+        {
+          "id": "1133639571700965377",
+          "name": "角色5",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1133639571705159681"
+        }
+      ]
+    },
+    {
+      "id": "1129624598993682434",
+      "name": "测试回归",
+      "corpId": "6",
+      "roles": []
+    },
+    {
+      "id": "1128488217616879666",
+      "name": "默认",
+      "corpId": "6",
+      "roles": [
+        {
+          "id": "1122772706182307842",
+          "name": "负责人",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1122772706220056577"
+        },
+        {
+          "id": "1122772746460209154",
+          "name": "部门负责人",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1122772746502152194"
+        },
+        {
+          "id": "1122772772804632577",
+          "name": "主管理员",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1122772772833992706"
+        },
+        {
+          "id": "1122772797135790082",
+          "name": "子管理员",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1122772797135790083"
+        }
+      ]
+    },
+    {
+      "id": "1130743774923698178",
+      "name": "角色组",
+      "corpId": "6",
+      "roles": [
+        {
+          "id": "1133984556459741186",
+          "name": "角色1",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1133984556522655745"
+        }
+      ]
+    },
+    {
+      "id": "1133554212900167681",
+      "name": "功能1",
+      "corpId": "6",
+      "roles": []
+    },
+    {
+      "id": "1133639603669950465",
+      "name": "测试师傅电话多少",
+      "corpId": "6",
+      "roles": [
+        {
+          "id": "1133639636142252034",
+          "name": "方法为",
+          "corpId": 6,
+          "creator": null,
+          "createAt": null,
+          "updator": null,
+          "updateAt": null,
+          "rgid": "1133639636150640642"
+        }
+      ]
+    }
+  ]
+}

webstorm.config.js

@@ -10,7 +10,9 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      '@': resolve('src')
+      '@': resolve('src'),
+      '@comp': resolve('src/components')
+
     }
   }
 };