menduner/src/components/AreaSelect/index.vue

<template>
  <v-card class="card rightCardBox">
      <div v-if="showSelect" class="pa-3 currentSelect">
        <span>已选择：</span>
        <v-chip 
          class="mr-3" 
          label
          size="small"
          color="primary"
          closable
          v-for="k in currentSelect" 
          :key="k.id"
          @click:close="handleClick(k)"
        >{{ k.name }}</v-chip>
      </div>
      <div class="rightCard" :style="{'width': isMobile ? '100%' : '786px', 'height': isMobile ? '300px' : '384px'}">
        <div v-for="item in items" :key="item.id">
          <div class="rowItem d-flex">
            <div class="categoryName2">{{ item.name }}</div>
            <div class="rightContent">
              <div v-if="!item.children?.length"></div>
              <div
                v-else
                :class="['jobItem', {'active': idChecked.includes(val.id)}]"
                v-for="val in item.children" :key="val.id"
                @click="handleClick(val)"
              >{{ val.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </v-card>
</template>

<script setup>
defineOptions({ name:'common-components-area'})
import { getDict } from '@/hooks/web/useDictionaries'
import { ref } from 'vue'
import Snackbar from '@/plugins/snackbar'

const emits = defineEmits(['handleClick'])
const props = defineProps({
  limit: { // 限制最大可选择数量, 不限制传false或者0
    type: [Number, Boolean],
    default: 3
  },
  select: {
    type: Array,
    default: () => []
  },
  showSelect: {
    type: Boolean,
    default: false
  },
  currentData: {
    type: Array,
    default: () => []
  },
  isMobile: {
    type: Boolean,
    default: false
  }
})

let items = ref()
let idChecked = ref([])
let currentSelect = ref([])
// 回显
if (props.currentData.length) currentSelect.value = props.currentData
if (props.select.length) idChecked.value = props.select.map(e => e + '') // 数据中的id是字符串

getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
  data = data?.length && data || []
  // const china = data.find(e => e.id === '1')
  // items.value = china?.children?.length ? china.children : []
  items.value = data
})

// 设置选中ids
const handleClick = (val) => {
  const isExist = idChecked.value.includes(val.id)
  if (!isExist) {
    // 添加
    if (props.limit === 1) {
      currentSelect.value = [val]
      idChecked.value = [val.id]
    } else {
      if (props.limit === idChecked.value.length) return Snackbar.warning(`最多可选${props.limit}个城市`)
      currentSelect.value.push(val)
      idChecked.value.push(val.id)
    }
  } else {
    // 删除
    currentSelect.value = currentSelect.value.filter(e => e.id !== val.id)
    idChecked.value = idChecked.value.filter(e => e !== val.id)
  }
  emits('handleClick', idChecked.value, currentSelect.value)
}
</script>

<style lang="scss" scoped>
.currentSelect {
  position: sticky;
  background-color: var(--color-f2f4f7);
}
.card { border-radius: 12px; }
.rightCard {
  position: relative;
  // height: 384px;
  // width: 786px;
  margin: 4px 0;
  padding: 0 16px;
  overflow-y: auto;
  .categoryName2 { font-size: 14px; color: #000; width: 150px; margin-right: 4px;}
  .jobItem { font-size: 14px; color: var(--color-333); }
  .active { color: var(--v-primary-base); font-weight: 700; }
  .rowItem {
    padding: 8px 0;
  }
  .divider {
    margin-left: 150px;
  }
  .rightContent {
    flex: 1;
    div {
      margin: 4px 28px 2px 0;
      float: left;
      cursor: pointer;
      &:hover {
        color: var(--v-primary-base);
      }
    }
  }
}

::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>