zhengbasai/library/components/VabDictSelect/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2022-12-08 13:53:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-24 12:06:56
 字典类型选择
-->
<template>
  <div>
    <el-select
      v-model="dictId"
      class="m-2"
      :disabled="disabled"
      placeholder="请选择"
      style="width: 100%"
      @change="changeDists"
    >
      <el-option
        v-for="item in list"
        :key="Number(item.id)"
        :label="item.name"
        :value="Number(item.value)"
      />
    </el-select>
  </div>
</template>
<script setup>
  import { getDictList } from './api/index'
  const emit = defineEmits(['select-dicts'])
  const props = defineProps({
    keys: {
      type: Array,
      default: function () {
        return []
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number],
      default: '',
    },
  })
  const dictId = ref() //id
  const list = ref([])
  watch(
    () => props.value,
    () => {
      if (props.value) {
        dictId.value = props.value
        console.log(list.value, ' list.value')
      }
    }
  )
  const dictsSetting = localStorage.getItem('dictsSetting')
  const dicts = dictsSetting ? JSON.parse(dictsSetting) : false
  if (dicts) {
    console.log(props.keys, 'props.keys')
    dicts.map((item) => {
      if (item.code == props.keys) {
        list.value = item.detail
      }
    })
    // dictId.value = list[0].value
  } else {
    getDictList({ key: props.keys }).then((res) => {
      list.value = res.data
    })
  }
  const changeDists = () => {
    emit('select-dicts', dictId.value)
  }
</script>