123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- <style lang="scss">
- .hcst-cascader{
- .el-cascader {
- display: inline-block;
- position: relative;
- font-size: 14px;
- height: 32px;
- }
- .el-input__inner{
- height: 32px !important;
- }
- }
- </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" -->
- <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 []
- },
- },
- 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: [],
- 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: {
- options(val) {
- if (isArray(val)) {
- this.selectOption.splice(0, this.selectOption.length)
- this.selectOption.push(...val)
- }
- },
- selectedVal(n, o) {
- if (this.radioStyle && !this.allValue) {
- if (n.length == 0) {
- this.selectedVal = o
- }
- }
- },
- },
- computed: {
- selectedVal: {
- get: function () {
- return this.value
- },
- set: function (val) {
- this.selectChange(val)
- },
- },
- },
- mounted() {
- this.$nextTick(() => {
- if (this.code && this.options.length == 0) {
- // 如果code值不为空且options.lengt==0, 则去请求字典项
- this.getOptions()
- } else {
- // 否则直接获取外部传入的options
- this.selectOption.splice(0, this.selectOption.length)
- this.selectOption.push(...this.options)
- }
- })
- },
- 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 = []
- // 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', val)
- this.$emit('update:label', val)
- this.$emit('change', val)
- // 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)
- }
- },
- },
- }
- </script>
|