acdb0f46b22fc51916a7687d5565ac5aedede20d.svn-base 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. # JSelectDepart 部门选择组件
  2. 选择部门组件,存储部门ID,显示部门名称
  3. ## 参数配置
  4. | 参数 | 类型 | 必填 |说明|
  5. |--------------|---------|----|---------|
  6. | modalWidth |Number | | 弹框宽度 默认500 |
  7. | multi |Boolean | | 是否多选 默认false |
  8. | rootOpened |Boolean | | 是否展开根节点 默认true |
  9. | disabled |Boolean | | 是否禁用 默认false|
  10. 使用示例
  11. ----
  12. ```vue
  13. <template>
  14. <a-form :form="form">
  15. <a-form-item label="部门选择v-decorator" style="width: 300px">
  16. <j-select-depart v-decorator="['bumen']"/>
  17. {{ getFormFieldValue('bumen') }}
  18. </a-form-item>
  19. <a-form-item label="部门选择v-model" style="width: 300px">
  20. <j-select-depart v-model="bumen"/>
  21. {{ bumen }}
  22. </a-form-item>
  23. <a-form-item label="部门多选v-model" style="width: 300px">
  24. <j-select-depart v-model="bumens" :multi="true"/>
  25. {{ bumens }}
  26. </a-form-item>
  27. </a-form >
  28. </template>
  29. <script>
  30. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  31. export default {
  32. components: {JSelectDepart},
  33. data() {
  34. return {
  35. form: this.$form.createForm(this),
  36. bumen:"",
  37. bumens:""
  38. }
  39. },
  40. methods:{
  41. getFormFieldValue(field){
  42. return this.form.getFieldValue(field)
  43. }
  44. }
  45. }
  46. </script>
  47. ```
  48. # JSelectMultiUser 用户多选组件
  49. 使用示例
  50. ----
  51. ```vue
  52. <template>
  53. <a-form :form="form">
  54. <a-form-item label="用户选择v-decorator" style="width: 500px">
  55. <j-select-multi-user v-decorator="['users']"/>
  56. {{ getFormFieldValue('users') }}
  57. </a-form-item>
  58. <a-form-item label="用户选择v-model" style="width: 500px">
  59. <j-select-multi-user v-model="users" ></j-select-multi-user>
  60. {{ users }}
  61. </a-form-item>
  62. </a-form >
  63. </template>
  64. <script>
  65. import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
  66. export default {
  67. components: {JSelectMultiUser},
  68. data() {
  69. return {
  70. form: this.$form.createForm(this),
  71. users:"",
  72. }
  73. },
  74. methods:{
  75. getFormFieldValue(field){
  76. return this.form.getFieldValue(field)
  77. }
  78. }
  79. }
  80. </script>
  81. ```
  82. # JSelectUserByDep 根据部门选择用户
  83. ## 参数配置
  84. | 参数 | 类型 | 必填 |说明|
  85. |--------------|---------|----|---------|
  86. | modalWidth |Number | | 弹框宽度 默认1250 |
  87. | disabled |Boolean | | 是否禁用 |
  88. 使用示例
  89. ----
  90. ```vue
  91. <template>
  92. <a-form :form="form">
  93. <a-form-item label="用户选择v-decorator" style="width: 500px">
  94. <j-select-user-by-dep v-decorator="['users']"/>
  95. {{ getFormFieldValue('users') }}
  96. </a-form-item>
  97. <a-form-item label="用户选择v-model" style="width: 500px">
  98. <j-select-user-by-dep v-model="users" ></j-select-user-by-dep>
  99. {{ users }}
  100. </a-form-item>
  101. </a-form >
  102. </template>
  103. <script>
  104. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  105. export default {
  106. components: {JSelectUserByDep},
  107. data() {
  108. return {
  109. form: this.$form.createForm(this),
  110. users:"",
  111. }
  112. },
  113. methods:{
  114. getFormFieldValue(field){
  115. return this.form.getFieldValue(field)
  116. }
  117. }
  118. }
  119. </script>
  120. ```