123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- <style lang="scss">
- .hcst-cascader{
- .el-cascader {
- display: inline-block;
- position: relative;
- font-size: 14px;
- height: 32px;
- }
- .el-input__inner{
- height: 32px !important;
- }
- .el-cascader__tags {
- top: 64%;
- }
- }
- </style>
- <template>
- <div class="hcst-cascader">
- <!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
- <a-checkbox
- v-for="item of selectOption"
- :label="item.label"
- :key="item.value"
- :value="item.value"
- :class="{
- item: true && userButton,
- selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
- bgcolor: item.disabled,
- }"
- >{{ item.label }}</a-checkbox
- >
- </a-checkbox-group> -->
- <!-- :show-all-levels="false" :clearCheckedNodes='clearCheckedNodes'-->
- <el-cascader
- v-model='selectedVal'
- :disabled="disabled"
- :props="props"
- clearable
- collapse-tags
-
- ></el-cascader>
- <!-- {{selectedVal}} -->
- </div>
- </template>
- <script>
- // 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: {
- userButton: {
- type: Boolean,
- default() {
- return true
- },
- },
- code: {
- // 参数code
- type: String,
- default: '',
- },
- allValue: {
- type: Boolean,
- default() {
- return false
- },
- },
- options: {
- // 外部传入的option 可替代请求项
- type: Array,
- default() {
- return []
- },
- },
- value: {
- // v-model绑定值
- type: [Number, Array, String],
- default() {
- return []
- },
- },
- cascaderValue: {
- // v-model绑定值
- type: [Number, Array, String],
- default() {
- return []
- },
- },
- label: {
- // label 绑定值
- type: [Array, String],
- default: '',
- },
- radioStyle: {
- // 是否复选框模拟单选效果
- type: Boolean,
- default: false,
- },
- disabled: {
- // 是否禁用
- type: Boolean,
- default: false,
- },
- isLazy: {
- // 是否禁用
- type: Boolean,
- default: false,
- },
- },
- components: {},
- data() {
- return {
- // selectOption: [],
- totalData:[],
- selectedVal:[],
- 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.value
- }
-
- getAction('/kuaishou/batch/getRegion',params).then(res=>{
- // console.log(res)
-
- const nodes =res.result.map(item => ({
- value: item.regionId,
- label: item.name,
- level:item.level,
- parent:item.parent,
- leaf: item.level >= 2
- }));
- if(!node.root&&node.level==1){
- if(this.totalData.length){
- let dataArr=[];
- dataArr=this.totalData.filter(item=>{
- return item.value==node.value
- });
- if(!dataArr.length){
- this.totalData.push({
- label:node.label,
- value:node.value,
- children:res.result.length
- })
- }
- }else{
- this.totalData.push({
- label:node.label,
- value:node.value,
- children:res.result.length
- })
- }
- }
- // console.log(this.totalData)
- // 通过调用resolve将子节点数据返回,通知组件数据加载完成
- resolve(nodes);
- })
-
-
- }
- },
- }
- },
- watch: {
-
- selectedVal(n, o) {
- console.log(n,o)
- if(n.length){
- var retrunData = []
-
- if(n.length){
- retrunData=JSON.parse(JSON.stringify(n))
- this.totalData.forEach(element => {
- let arr=[];
- arr=n.filter(item=>{
- let number=(item+'').substr(0,2)
- // console.log(number)
- return element.value==number
- })
- if(arr.length==element.children ){
-
- retrunData=retrunData.filter(ele=>{
- return element.value!=(ele+'').substr(0,2)
- })
- console.log(retrunData)
- // this.selectedVal=[];
- retrunData=[
- ...retrunData,
- element.value,
-
- ]
- }
-
-
- });
- }
- console.log('retrunData',retrunData)
- // this.$emit('input', val)
- // this.$emit('change', val)
- this.$emit('update:cascaderValue',retrunData)
- // this.consoleFun('VALUE: ', val, 'LABEL:', label)
-
- }else{
- this.$emit('update:cascaderValue',n)
- }
-
-
- },
- },
- //
- mounted() {
- this.$nextTick(() => {
-
- })
- },
- methods: {
- getOptions() {
- // 获取字典项
- getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
- if (res.success && isArray(res.result.records)) {
- var data = res.result.records
- data = data.map((item) => {
- return {
- label: item.itemText,
- value: item.itemValue,
- ...item,
- }
- })
- if (this.allValue) {
- data.unshift({ label: '不检查', value: 'unlimited' })
- if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
- this.selectedVal = ['unlimited']
- }
- } else {
- if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
- this.selectedVal = []
- }
- }
- this.selectOption.push(...data)
- }
- })
- },
- selectChange(val) {
-
- // 多选
- var retrunData = []
-
- console.log(val)
-
- if(val.length){
- this.totalData.forEach(element => {
- let arr=[];
- arr=val.filter(item=>{
- let number=(item+'').substr(0,2)
- // console.log(number)
- return element.value==number
- })
- if(arr.length==element.children ){
- let otherArr=[]
- otherArr=this.selectedVal.filter(ele=>{
- return element.value!=(ele+'').substr(0,2)
- })
- console.log(otherArr)
- // this.selectedVal=[];
- retrunData=[
- ...retrunData,
- element.value,
- ...otherArr,
- ]
-
- }else{
- retrunData=[
- ...retrunData,
- ...arr
- ]
- }
-
- });
- }
- console.log('retrunData',retrunData)
- // this.$emit('input', val)
- // this.$emit('change', val)
- this.$emit('update:cascaderValue',retrunData)
- // this.consoleFun('VALUE: ', val, 'LABEL:', label)
-
- },
- emitChange(...args) {
- // emit change事件
- this.$emit('change', ...args)
- },
- consoleFun(...args) {
- // 打印信息
- if (process.env.NODE_ENV == 'development') {
- console.log(...args)
- }
- },
- // clearCheckedNodes(){
- // },
- },
- }
- </script>
|