menduner/src/components/FormUI/cascade/index.vue

<!-- 级联选择器 -->
<template>
  <div class="d-flex" style="width: 100%;">
    <div class="mr-2" :class="`${prop.size}Title`">
      <span style="color: #777;">{{ item?.label }}</span>
      <span v-if="prop.required" style="color: var(--v-error-base);"> *</span>
      <!-- <span style="color: #777;"> :</span> -->
    </div>
    <div style="flex: 1;">
      <el-cascader
        v-model="value"
        :show-all-levels="prop.checkStrictly"
        :size="prop.size"
        :clearable="item.clearable"
        :placeholder="item.placeholder || getPlaceholder()"
        :class="{'required': requiredTxt}"
        style="width: 100%;"
        :props="prop"
        :options="item.items"
        :collapse-tags="item.collapseTags || false"
        :collapse-tags-tooltip="true"
        @blur="handleBlur"
        @change="handleChange"
      ></el-cascader>
      <div v-if="!prop.hideDetails" :style="{'display': requiredTxt? 'block' : 'inline-block'}" class="requiredTxt">{{ requiredTxt }}</div>
    </div>
  </div>
</template>

<script setup>
// import 'element-plus/es/components/cascader-panel/style/css'
// import { ElCascaderPanel  } from 'element-plus'
import 'element-plus/es/components/cascader/style/css'
import { ElCascader  } from 'element-plus'
import { ref, watch } from 'vue'
defineOptions({ name:'FormUI-el-cascade'})

const props = defineProps({item: Object, modelValue: [String, Number, Object]})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item
const prop = {
  ...item,
  label: item.itemText || 'label',
  value: item.itemValue || 'value',
  required: item.required || false,
  size: item.size || 'large', // 'large' | 'default' | 'small'
  multiple: item.multiple || false,
  emitPath: item.emitPath || false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
  // checkStrictly: item.checkStrictly || false, // 是否严格的遵守父子节点不互相关联
}

const value = ref()
watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal
  },
  { immediate: true },
  { deep: true }
)

const handleChange = (val) => {
  value.value = val
  handleBlur()
  emit('update:modelValue', value.value)
  emit('change', value.value)
}

const requiredTxt = ref('')
const handleBlur = () => {
  if (prop.required && (value.value === '' || value.value === null || value.value === undefined)) requiredTxt.value = '请选择' + item?.label
  else requiredTxt.value = ''
  return requiredTxt.value
}

const getPlaceholder = () => {
  return prop.required ? item?.label + ' *' : item?.label
}

defineExpose({
  handleBlur
})

</script>
<style lang="scss" scoped>
.requiredTxt {
  font-size: 12px;
  padding: 6px 16px 0;
  color: var(--v-error-base)
}

.largeTitle {
  line-height: 40px;
}
.defaultTitle {
  line-height: 32px;
}


:deep(.icon-circle-close) {
  color: #666;
  font-size: 22px;
  &:hover {
    color: #333 !important;
  }
}

:deep(.el-input--large) {
  font-size: 16px;
  color: #000;
}
:deep(.el-cascader-node__label) {
  font-weight: normal !important;
}

:deep(.el-input.is-focus) {
  box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
  border-radius: 5px;
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
  border-radius: 5px;
  &:hover {
    box-shadow: 0 0 0 2px var(--v-primary-base, var(--el-color-primary)) inset;
  }
}
:deep(.required) {
  --el-border-color: var(--v-error-base) !important;
  --el-border-color-hover: var(--v-error-base) !important;
  .el-input.is-focus {
    box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
    border-radius: 5px;
  }
  .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
    border-radius: 5px;
    &:hover {
      box-shadow: 0 0 0 2px var(--v-error-base, var(--v-error-base)) inset !important;
    }
  }
}
</style>