vue.userselect2.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. (function($) {
  2. //0并行分支,1手动分支,2条件分支
  3. Vue.component('user-select', {
  4. template: '\
  5. <section>\
  6. <input type="hidden" id="selTmodelId" value="" />\
  7. <template v-for="(dept,index) in depts">\
  8. <a href="#" @click="getParentGroup(dept.id,index)">\
  9. <label v-if="index > 0">></label>\
  10. {{dept.name}}\
  11. </a>\
  12. </template>\
  13. <ul class="mui-table-view">\
  14. <li class="mui-table-view-cell" v-for="groupUser in groupUsers" v-if="groupUser.type == \'dept\'">\
  15. <a class="mui-navigate-right" href="#" @click="getChildGroup(groupUser.id,groupUser.text);">{{groupUser.text}}</a>\
  16. </li>\
  17. </ul>\
  18. <div class="mui-table-view-cell mui-radio" style="padding:5px;" v-for="groupUser in groupUsers" v-if="groupUser.type == \'user\'">\
  19. <label style="width: 60%;padding:5px;">{{groupUser.text}}</label>\
  20. <input name="radio1" type="radio" :value="groupUser.id" @click="incrementHandler(groupUser)">\
  21. </div>\
  22. </section>\
  23. ',
  24. props: ['groupUsers', 'depts'],
  25. methods: {
  26. incrementHandler: function (user) {
  27. vmdepts.curUser = user;
  28. this.$emit('increment')
  29. }
  30. },
  31. //组件渲染之前
  32. created: function() {},
  33. //组件渲染之后
  34. mounted: function() {}
  35. });
  36. })(jQuery);
  37. var vmdepts = new Vue({
  38. el: '#personData',
  39. data: {
  40. groupUsers: [],
  41. depts: [{
  42. id: API.UNIT_ID,
  43. name: '联系人'
  44. }],
  45. curUser: {}
  46. }
  47. });
  48. function getParentGroup(groupId, index) {
  49. console.log(vmdepts.depts)
  50. vmdepts.depts.splice(index+1,vmdepts.depts.length);
  51. getGroupUser(groupId);
  52. }
  53. function getChildGroup(groupId, groupName) {
  54. var dept = {}
  55. dept.id = groupId;
  56. dept.name = groupName;
  57. vmdepts.depts.push(dept);
  58. getGroupUser(groupId);
  59. }
  60. //获取人员选择列表信息
  61. function getGroupUser(groupId) {
  62. mui('#person-scroll').scroll().scrollTo(0, 0);
  63. console.log(groupId);
  64. var state = app.getState(); //获取登陆信息
  65. var staffId = state.user.useId;
  66. mui.ajax(url, {
  67. dataType: 'json', //服务器返回json格式数据
  68. type: 'post', //HTTP请求类型
  69. data: {
  70. 'serviceId': 'eu_20180308loadUserByGroup',
  71. 'params': '{staffId:"' + staffId + '",groupId:"' + groupId + '"}'
  72. },
  73. timeout: 10000, //超时时间设置为10秒;
  74. headers: {
  75. 'Accept': 'application/json'
  76. },
  77. success: function(data) {
  78. //服务器返回响应
  79. console.log("人员信息:" + JSON.stringify(data));
  80. if(data.returnCode == "1") {
  81. vmdepts.groupUsers = data.returnParams;
  82. } else {
  83. mui.toast("获取人员信息错误");
  84. }
  85. },
  86. error: function(xhr, type, errorThrown) {
  87. //异常处理;
  88. console.log(xhr + "========" + type + "===========" + errorThrown);
  89. }
  90. });
  91. };