Cascader.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  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. .el-cascader__tags {
  13. top: 64%;
  14. }
  15. }
  16. </style>
  17. <template>
  18. <div class="hcst-cascader">
  19. <!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
  20. <a-checkbox
  21. v-for="item of selectOption"
  22. :label="item.label"
  23. :key="item.value"
  24. :value="item.value"
  25. :class="{
  26. item: true && userButton,
  27. selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
  28. bgcolor: item.disabled,
  29. }"
  30. >{{ item.label }}</a-checkbox
  31. >
  32. </a-checkbox-group> -->
  33. <!-- :show-all-levels="false" :clearCheckedNodes='clearCheckedNodes'-->
  34. <el-cascader
  35. v-model='selectedVal'
  36. :disabled="disabled"
  37. :props="props"
  38. clearable
  39. collapse-tags
  40. ></el-cascader>
  41. <!-- {{selectedVal}} -->
  42. </div>
  43. </template>
  44. <script>
  45. // import { dictionary } from '@/components/service/core/dictionary'
  46. import { isArray } from '@/utils/Tools'
  47. import { httpAction, getAction } from '@/api/manage'
  48. let id = 0;
  49. export default {
  50. name: 'Cascader', // Cascader组件二次封装
  51. props: {
  52. userButton: {
  53. type: Boolean,
  54. default() {
  55. return true
  56. },
  57. },
  58. code: {
  59. // 参数code
  60. type: String,
  61. default: '',
  62. },
  63. allValue: {
  64. type: Boolean,
  65. default() {
  66. return false
  67. },
  68. },
  69. options: {
  70. // 外部传入的option 可替代请求项
  71. type: Array,
  72. default() {
  73. return []
  74. },
  75. },
  76. value: {
  77. // v-model绑定值
  78. type: [Number, Array, String],
  79. default() {
  80. return []
  81. },
  82. },
  83. cascaderValue: {
  84. // v-model绑定值
  85. type: [Number, Array, String],
  86. default() {
  87. return []
  88. },
  89. },
  90. label: {
  91. // label 绑定值
  92. type: [Array, String],
  93. default: '',
  94. },
  95. radioStyle: {
  96. // 是否复选框模拟单选效果
  97. type: Boolean,
  98. default: false,
  99. },
  100. disabled: {
  101. // 是否禁用
  102. type: Boolean,
  103. default: false,
  104. },
  105. isLazy: {
  106. // 是否禁用
  107. type: Boolean,
  108. default: false,
  109. },
  110. },
  111. components: {},
  112. data() {
  113. return {
  114. // selectOption: [],
  115. totalData:[],
  116. selectedVal:[],
  117. props: {
  118. multiple: true ,
  119. // checkStrictly: true ,
  120. emitPath:false,
  121. lazy: this.isLazy,
  122. lazyLoad :(node, resolve) =>{
  123. // console.log(node,resolve)
  124. const { level } = node;
  125. // const nodes = Array.from({ length: level + 1 })
  126. // .map(item => ({
  127. // value: ++id,
  128. // label: `选项${id}`,
  129. // leaf: level >= 2
  130. // }));
  131. let params={}
  132. if(node.root){
  133. params.level=1;
  134. }else{
  135. params.parent=node.root?0:node.value
  136. }
  137. getAction('/kuaishou/batch/getRegion',params).then(res=>{
  138. // console.log(res)
  139. const nodes =res.result.map(item => ({
  140. value: item.regionId,
  141. label: item.name,
  142. level:item.level,
  143. parent:item.parent,
  144. leaf: item.level >= 2
  145. }));
  146. if(!node.root&&node.level==1){
  147. if(this.totalData.length){
  148. let dataArr=[];
  149. dataArr=this.totalData.filter(item=>{
  150. return item.value==node.value
  151. });
  152. if(!dataArr.length){
  153. this.totalData.push({
  154. label:node.label,
  155. value:node.value,
  156. children:res.result.length
  157. })
  158. }
  159. }else{
  160. this.totalData.push({
  161. label:node.label,
  162. value:node.value,
  163. children:res.result.length
  164. })
  165. }
  166. }
  167. // console.log(this.totalData)
  168. // 通过调用resolve将子节点数据返回,通知组件数据加载完成
  169. resolve(nodes);
  170. })
  171. }
  172. },
  173. }
  174. },
  175. watch: {
  176. selectedVal(n, o) {
  177. console.log(n,o)
  178. if(n.length){
  179. var retrunData = []
  180. if(n.length){
  181. retrunData=JSON.parse(JSON.stringify(n))
  182. this.totalData.forEach(element => {
  183. let arr=[];
  184. arr=n.filter(item=>{
  185. let number=(item+'').substr(0,2)
  186. // console.log(number)
  187. return element.value==number
  188. })
  189. if(arr.length==element.children ){
  190. retrunData=retrunData.filter(ele=>{
  191. return element.value!=(ele+'').substr(0,2)
  192. })
  193. console.log(retrunData)
  194. // this.selectedVal=[];
  195. retrunData=[
  196. ...retrunData,
  197. element.value,
  198. ]
  199. }
  200. });
  201. }
  202. console.log('retrunData',retrunData)
  203. // this.$emit('input', val)
  204. // this.$emit('change', val)
  205. this.$emit('update:cascaderValue',retrunData)
  206. // this.consoleFun('VALUE: ', val, 'LABEL:', label)
  207. }else{
  208. this.$emit('update:cascaderValue',n)
  209. }
  210. },
  211. },
  212. //
  213. mounted() {
  214. this.$nextTick(() => {
  215. })
  216. },
  217. methods: {
  218. getOptions() {
  219. // 获取字典项
  220. getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
  221. if (res.success && isArray(res.result.records)) {
  222. var data = res.result.records
  223. data = data.map((item) => {
  224. return {
  225. label: item.itemText,
  226. value: item.itemValue,
  227. ...item,
  228. }
  229. })
  230. if (this.allValue) {
  231. data.unshift({ label: '不检查', value: 'unlimited' })
  232. if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
  233. this.selectedVal = ['unlimited']
  234. }
  235. } else {
  236. if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
  237. this.selectedVal = []
  238. }
  239. }
  240. this.selectOption.push(...data)
  241. }
  242. })
  243. },
  244. selectChange(val) {
  245. // 多选
  246. var retrunData = []
  247. console.log(val)
  248. if(val.length){
  249. this.totalData.forEach(element => {
  250. let arr=[];
  251. arr=val.filter(item=>{
  252. let number=(item+'').substr(0,2)
  253. // console.log(number)
  254. return element.value==number
  255. })
  256. if(arr.length==element.children ){
  257. let otherArr=[]
  258. otherArr=this.selectedVal.filter(ele=>{
  259. return element.value!=(ele+'').substr(0,2)
  260. })
  261. console.log(otherArr)
  262. // this.selectedVal=[];
  263. retrunData=[
  264. ...retrunData,
  265. element.value,
  266. ...otherArr,
  267. ]
  268. }else{
  269. retrunData=[
  270. ...retrunData,
  271. ...arr
  272. ]
  273. }
  274. });
  275. }
  276. console.log('retrunData',retrunData)
  277. // this.$emit('input', val)
  278. // this.$emit('change', val)
  279. this.$emit('update:cascaderValue',retrunData)
  280. // this.consoleFun('VALUE: ', val, 'LABEL:', label)
  281. },
  282. emitChange(...args) {
  283. // emit change事件
  284. this.$emit('change', ...args)
  285. },
  286. consoleFun(...args) {
  287. // 打印信息
  288. if (process.env.NODE_ENV == 'development') {
  289. console.log(...args)
  290. }
  291. },
  292. // clearCheckedNodes(){
  293. // },
  294. },
  295. }
  296. </script>