|
@@ -1,131 +1,19 @@
|
|
|
<style lang="scss">
|
|
|
-.ul-radio-group {
|
|
|
- border-radius: 5px;
|
|
|
- height: 32px;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- border: none;
|
|
|
- background: transparent;
|
|
|
-
|
|
|
- .btn {
|
|
|
- background: transparent;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .item {
|
|
|
- min-width: 80px;
|
|
|
- padding: 0px 15px;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-left: 0;
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- cursor: pointer;
|
|
|
- .checkbox-button-input {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- opacity: 0;
|
|
|
+.hcst-cascader{
|
|
|
+ .el-cascader {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 32px;
|
|
|
}
|
|
|
- .ant-checkbox {
|
|
|
- display: none;
|
|
|
+ .el-input__inner{
|
|
|
+ height: 32px !important;
|
|
|
}
|
|
|
- }
|
|
|
- .bgcolor {
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-color: #d9d9d9;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- .item::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: 1px;
|
|
|
- top: -2px;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 6px solid transparent;
|
|
|
- border-bottom: 6px solid transparent;
|
|
|
- border-left: 6px solid;
|
|
|
- border-left-color: #e0e0e0;
|
|
|
- -webkit-transform: rotate(-45deg);
|
|
|
- -ms-transform: rotate(-45deg);
|
|
|
- transform: rotate(-45deg);
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
- .item:hover {
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
- .selection {
|
|
|
- color: #fff;
|
|
|
- background: #1890ff;
|
|
|
- // border-color: #1890ff;
|
|
|
- }
|
|
|
- .item.selection:hover {
|
|
|
- color: #fff;
|
|
|
- background: #40a9ff;
|
|
|
- }
|
|
|
- .item.selection:after {
|
|
|
- border-left: 6px solid #1890ff;
|
|
|
- }
|
|
|
- .item:hover::after {
|
|
|
- // border-color: #40a9ff;
|
|
|
- border-left: 6px solid #40a9ff;
|
|
|
- }
|
|
|
- .bgcolor:hover {
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-color: #d9d9d9;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- .bgcolor:hover::after {
|
|
|
- // border-color: #40a9ff;
|
|
|
- border-left: 6px solid #e0e0e0;
|
|
|
- }
|
|
|
- .bgcolor.selection:after {
|
|
|
- border-left: 6px solid #e0e0e0;
|
|
|
- }
|
|
|
- .bgcolor.selection {
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-color: #d9d9d9;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- .bgcolor.selection:hover {
|
|
|
- // color: #1890ff;
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-color: #d9d9d9;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- .bgcolor.selection:after {
|
|
|
- border-left: 6px solid #e0e0e0;
|
|
|
- }
|
|
|
- .ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-.ul-radio-group .item:first-child {
|
|
|
- border-radius: 5px 0 0 5px;
|
|
|
- border-left: 1px solid #ccc;
|
|
|
-}
|
|
|
-.ul-radio-group .item.selection:first-child {
|
|
|
- border-radius: 5px 0 0 5px;
|
|
|
- border-left: 1px solid #1890ff;
|
|
|
-}
|
|
|
-.ul-radio-group .item.selection:nth-child(2) {
|
|
|
- border-left: 1px solid #1890ff;
|
|
|
-}
|
|
|
-.ul-radio-group .item:first-child:after {
|
|
|
- border-left: 0;
|
|
|
-}
|
|
|
-.ul-radio-group .item:last-child {
|
|
|
- border-radius: 0px 5px 5px 0px;
|
|
|
}
|
|
|
+
|
|
|
</style>
|
|
|
<template>
|
|
|
- <div class="ul-radio-group">
|
|
|
+ <div class="hcst-cascader">
|
|
|
<!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
|
|
|
<a-checkbox
|
|
|
v-for="item of selectOption"
|
|
@@ -140,15 +28,17 @@
|
|
|
>{{ item.label }}</a-checkbox
|
|
|
>
|
|
|
</a-checkbox-group> -->
|
|
|
+
|
|
|
+ <!-- :show-all-levels="false" -->
|
|
|
<el-cascader
|
|
|
v-model='selectedVal'
|
|
|
- :disabled="disabled"
|
|
|
- :options="selectOption"
|
|
|
+ :disabled="disabled"
|
|
|
:props="props"
|
|
|
clearable
|
|
|
collapse-tags
|
|
|
- :show-all-levels="false"
|
|
|
+
|
|
|
></el-cascader>
|
|
|
+ {{selectedVal}}
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -156,6 +46,9 @@
|
|
|
// import { dictionary } from '@/components/service/core/dictionary'
|
|
|
import { isArray } from '@/utils/Tools'
|
|
|
import { httpAction, getAction } from '@/api/manage'
|
|
|
+
|
|
|
+let id = 0;
|
|
|
+
|
|
|
export default {
|
|
|
name: 'Cascader', // Cascader组件二次封装
|
|
|
props: {
|
|
@@ -205,12 +98,54 @@ export default {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
+ isLazy: {
|
|
|
+ // 是否禁用
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
},
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- selectOption: [],
|
|
|
- props: { multiple: true },
|
|
|
+ // selectOption: [],
|
|
|
+ props: {
|
|
|
+ multiple: true ,
|
|
|
+ // checkStrictly: true ,
|
|
|
+ emitPath:false,
|
|
|
+ lazy: this.isLazy,
|
|
|
+ lazyLoad (node, resolve) {
|
|
|
+ console.log(node,resolve)
|
|
|
+ const { level } = node;
|
|
|
+
|
|
|
+ // const nodes = Array.from({ length: level + 1 })
|
|
|
+ // .map(item => ({
|
|
|
+ // value: ++id,
|
|
|
+ // label: `选项${id}`,
|
|
|
+ // leaf: level >= 2
|
|
|
+ // }));
|
|
|
+ let params={}
|
|
|
+ if(node.root){
|
|
|
+ params.level=1;
|
|
|
+ }else{
|
|
|
+ params.parent=node.root?0:node.data.regionId
|
|
|
+ }
|
|
|
+ getAction('/kuaishou/batch/getRegion',params).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ const nodes =res.result.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ label: item.name,
|
|
|
+ level:item.level,
|
|
|
+ parent:item.parent,
|
|
|
+ regionId:item.regionId,
|
|
|
+ leaf: item.level >= 3
|
|
|
+ }));
|
|
|
+ // 通过调用resolve将子节点数据返回,通知组件数据加载完成
|
|
|
+ resolve(nodes);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -279,50 +214,27 @@ export default {
|
|
|
},
|
|
|
selectChange(val) {
|
|
|
// 选择事件
|
|
|
- if (!this.radioStyle) {
|
|
|
+
|
|
|
// 多选
|
|
|
var retrunData = []
|
|
|
- let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
|
|
|
- if (this.allValue) {
|
|
|
- if (val.findIndex((item) => item == 'unlimited') == 0) {
|
|
|
- retrunData = val.slice(-1)
|
|
|
- } else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
|
|
|
- retrunData = ['unlimited']
|
|
|
- } else {
|
|
|
- retrunData = val
|
|
|
- }
|
|
|
- } else {
|
|
|
- retrunData = val
|
|
|
- }
|
|
|
+ // let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
|
|
|
+ // if (this.allValue) {
|
|
|
+ // if (val.findIndex((item) => item == 'unlimited') == 0) {
|
|
|
+ // retrunData = val.slice(-1)
|
|
|
+ // } else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
|
|
|
+ // retrunData = ['unlimited']
|
|
|
+ // } else {
|
|
|
+ // retrunData = val
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // retrunData = val
|
|
|
+ // }
|
|
|
|
|
|
- this.$emit('input', retrunData)
|
|
|
- this.$emit('update:label', label)
|
|
|
+ this.$emit('input', val)
|
|
|
+ this.$emit('update:label', val)
|
|
|
this.$emit('change', val)
|
|
|
// this.consoleFun('VALUE: ', val, 'LABEL:', label)
|
|
|
- } else {
|
|
|
- // 模拟单选radio效果
|
|
|
- let selectVal = []
|
|
|
- if (this.allValue) {
|
|
|
- if (val.length == 0) {
|
|
|
- selectVal = ['unlimited']
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (val.length == 0) {
|
|
|
- selectVal = []
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (val.length > 0) {
|
|
|
- selectVal = val.slice(-1)
|
|
|
- }
|
|
|
- let label = this.selectOption
|
|
|
- .filter((v) => selectVal.findIndex((item) => item == v.value) > -1)
|
|
|
- .map((v) => v.label)
|
|
|
- this.$emit('input', selectVal)
|
|
|
- this.$emit('update:label', label)
|
|
|
- this.$emit('change', selectVal)
|
|
|
- // this.consoleFun('VALUE: ', selectVal, 'LABEL:', label)
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
emitChange(...args) {
|
|
|
// emit change事件
|