Cascader.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <style lang="scss">
  2. .hcst-cascader{
  3. .el-cascader {
  4. display: inline-block;
  5. position: relative;
  6. font-size: 14px;
  7. height: 32px;
  8. }
  9. .el-input__inner{
  10. height: 32px !important;
  11. }
  12. }
  13. </style>
  14. <template>
  15. <div class="hcst-cascader">
  16. <!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
  17. <a-checkbox
  18. v-for="item of selectOption"
  19. :label="item.label"
  20. :key="item.value"
  21. :value="item.value"
  22. :class="{
  23. item: true && userButton,
  24. selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
  25. bgcolor: item.disabled,
  26. }"
  27. >{{ item.label }}</a-checkbox
  28. >
  29. </a-checkbox-group> -->
  30. <!-- :show-all-levels="false" -->
  31. <el-cascader
  32. v-model='selectedVal'
  33. :disabled="disabled"
  34. :props="props"
  35. clearable
  36. collapse-tags
  37. ></el-cascader>
  38. {{selectedVal}}
  39. </div>
  40. </template>
  41. <script>
  42. // import { dictionary } from '@/components/service/core/dictionary'
  43. import { isArray } from '@/utils/Tools'
  44. import { httpAction, getAction } from '@/api/manage'
  45. let id = 0;
  46. export default {
  47. name: 'Cascader', // Cascader组件二次封装
  48. props: {
  49. userButton: {
  50. type: Boolean,
  51. default() {
  52. return true
  53. },
  54. },
  55. code: {
  56. // 参数code
  57. type: String,
  58. default: '',
  59. },
  60. allValue: {
  61. type: Boolean,
  62. default() {
  63. return false
  64. },
  65. },
  66. options: {
  67. // 外部传入的option 可替代请求项
  68. type: Array,
  69. default() {
  70. return []
  71. },
  72. },
  73. value: {
  74. // v-model绑定值
  75. type: [Number, Array, String],
  76. default() {
  77. return []
  78. },
  79. },
  80. label: {
  81. // label 绑定值
  82. type: [Array, String],
  83. default: '',
  84. },
  85. radioStyle: {
  86. // 是否复选框模拟单选效果
  87. type: Boolean,
  88. default: false,
  89. },
  90. disabled: {
  91. // 是否禁用
  92. type: Boolean,
  93. default: false,
  94. },
  95. isLazy: {
  96. // 是否禁用
  97. type: Boolean,
  98. default: false,
  99. },
  100. },
  101. components: {},
  102. data() {
  103. return {
  104. // selectOption: [],
  105. props: {
  106. multiple: true ,
  107. // checkStrictly: true ,
  108. emitPath:false,
  109. lazy: this.isLazy,
  110. lazyLoad (node, resolve) {
  111. console.log(node,resolve)
  112. const { level } = node;
  113. // const nodes = Array.from({ length: level + 1 })
  114. // .map(item => ({
  115. // value: ++id,
  116. // label: `选项${id}`,
  117. // leaf: level >= 2
  118. // }));
  119. let params={}
  120. if(node.root){
  121. params.level=1;
  122. }else{
  123. params.parent=node.root?0:node.data.regionId
  124. }
  125. getAction('/kuaishou/batch/getRegion',params).then(res=>{
  126. console.log(res)
  127. const nodes =res.result.map(item => ({
  128. value: item.id,
  129. label: item.name,
  130. level:item.level,
  131. parent:item.parent,
  132. regionId:item.regionId,
  133. leaf: item.level >= 3
  134. }));
  135. // 通过调用resolve将子节点数据返回,通知组件数据加载完成
  136. resolve(nodes);
  137. })
  138. }
  139. },
  140. }
  141. },
  142. watch: {
  143. options(val) {
  144. if (isArray(val)) {
  145. this.selectOption.splice(0, this.selectOption.length)
  146. this.selectOption.push(...val)
  147. }
  148. },
  149. selectedVal(n, o) {
  150. if (this.radioStyle && !this.allValue) {
  151. if (n.length == 0) {
  152. this.selectedVal = o
  153. }
  154. }
  155. },
  156. },
  157. computed: {
  158. selectedVal: {
  159. get: function () {
  160. return this.value
  161. },
  162. set: function (val) {
  163. this.selectChange(val)
  164. },
  165. },
  166. },
  167. mounted() {
  168. this.$nextTick(() => {
  169. if (this.code && this.options.length == 0) {
  170. // 如果code值不为空且options.lengt==0, 则去请求字典项
  171. this.getOptions()
  172. } else {
  173. // 否则直接获取外部传入的options
  174. this.selectOption.splice(0, this.selectOption.length)
  175. this.selectOption.push(...this.options)
  176. }
  177. })
  178. },
  179. methods: {
  180. getOptions() {
  181. // 获取字典项
  182. getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
  183. if (res.success && isArray(res.result.records)) {
  184. var data = res.result.records
  185. data = data.map((item) => {
  186. return {
  187. label: item.itemText,
  188. value: item.itemValue,
  189. ...item,
  190. }
  191. })
  192. if (this.allValue) {
  193. data.unshift({ label: '不检查', value: 'unlimited' })
  194. if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
  195. this.selectedVal = ['unlimited']
  196. }
  197. } else {
  198. if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
  199. this.selectedVal = []
  200. }
  201. }
  202. this.selectOption.push(...data)
  203. }
  204. })
  205. },
  206. selectChange(val) {
  207. // 选择事件
  208. // 多选
  209. var retrunData = []
  210. // let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
  211. // if (this.allValue) {
  212. // if (val.findIndex((item) => item == 'unlimited') == 0) {
  213. // retrunData = val.slice(-1)
  214. // } else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
  215. // retrunData = ['unlimited']
  216. // } else {
  217. // retrunData = val
  218. // }
  219. // } else {
  220. // retrunData = val
  221. // }
  222. this.$emit('input', val)
  223. this.$emit('update:label', val)
  224. this.$emit('change', val)
  225. // this.consoleFun('VALUE: ', val, 'LABEL:', label)
  226. },
  227. emitChange(...args) {
  228. // emit change事件
  229. this.$emit('change', ...args)
  230. },
  231. consoleFun(...args) {
  232. // 打印信息
  233. if (process.env.NODE_ENV == 'development') {
  234. console.log(...args)
  235. }
  236. },
  237. },
  238. }
  239. </script>