vitesse-yitisheng-web/src/pages/dict-demo.vue

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-6">字典系统演示页面</h1>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 字典展示区域 -->
      <div class="bg-white p-4 rounded-lg shadow">
        <h2 class="text-xl font-semibold mb-4">字典项展示</h2>
        
        <div class="space-y-4">
          <div>
            <h3 class="font-medium mb-2">专业类别</h3>
            <div class="flex flex-wrap gap-2">
              <span 
                v-for="item in professionalCategoryItems" 
                :key="item.value"
                class="px-3 py-1 rounded-full text-sm"
                :style="{ backgroundColor: item.color ? item.color + '20' : '#f0f0f0', color: item.color || '#333' }"
              >
                {{ item.label }} ({{ item.value }})
              </span>
            </div>
          </div>
          
          <div>
            <h3 class="font-medium mb-2">学历层次</h3>
            <div class="flex flex-wrap gap-2">
              <span 
                v-for="item in educationalLevelItems" 
                :key="item.value"
                class="px-3 py-1 rounded-full text-sm"
                :style="{ backgroundColor: item.color ? item.color + '20' : '#f0f0f0', color: item.color || '#333' }"
              >
                {{ item.label }} ({{ item.value }})
              </span>
            </div>
          </div>
          
          <div>
            <h3 class="font-medium mb-2">科目列表</h3>
            <div class="flex flex-wrap gap-2">
              <span 
                v-for="item in subjectListItems" 
                :key="item.value"
                class="px-3 py-1 rounded-full text-sm"
                :style="{ backgroundColor: item.color ? item.color + '20' : '#f0f0f0', color: item.color || '#333' }"
              >
                {{ item.label }} ({{ item.value }})
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 表单使用示例 -->
      <div class="bg-white p-4 rounded-lg shadow">
        <h2 class="text-xl font-semibold mb-4">表单使用示例</h2>
        
        <form @submit.prevent="submitForm" class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-1">省份</label>
            <select 
              v-model="formData.province" 
              class="w-full border border-gray-300 rounded-md px-3 py-2"
            >
              <option value="">请选择省份</option>
              <option 
                v-for="item in provincesItems" 
                :key="item.value" 
                :value="item.value"
              >
                {{ item.label }}
              </option>
            </select>
            <div class="text-sm text-gray-500 mt-1">
              选中值: {{ formData.province }}, 标签: {{ dictStore.getDictLabel('provinces', formData.province) }}
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium mb-1">学历层次</label>
            <select 
              v-model="formData.educationalLevel" 
              class="w-full border border-gray-300 rounded-md px-3 py-2"
            >
              <option value="">请选择学历层次</option>
              <option 
                v-for="item in educationalLevelItems" 
                :key="item.value" 
                :value="item.value"
              >
                {{ item.label }}
              </option>
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-medium mb-1">专业类别</label>
            <select 
              v-model="formData.professionalCategory" 
              class="w-full border border-gray-300 rounded-md px-3 py-2"
            >
              <option value="">请选择专业类别</option>
              <option 
                v-for="item in professionalCategoryItems" 
                :key="item.value" 
                :value="item.value"
              >
                {{ item.label }}
              </option>
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-medium mb-1">科目选择 (多选)</label>
            <div class="flex flex-wrap gap-2">
              <label 
                v-for="item in subjectListItems" 
                :key="item.value"
                class="flex items-center space-x-2 p-2 border rounded cursor-pointer hover:bg-gray-50"
              >
                <input
                  type="checkbox"
                  :value="item.value"
                  v-model="formData.subjectList"
                  class="h-4 w-4 text-blue-600 rounded focus:ring-blue-500"
                />
                <span>{{ item.label }}</span>
              </label>
            </div>
          </div>
          
          <div class="pt-4">
            <button 
              type="submit"
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
            >
              提交
            </button>
            <button 
              type="button"
              @click="loadDynamicDicts"
              class="ml-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
            >
              加载动态字典
            </button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 动态加载状态 -->
    <div v-if="loading" class="mt-4 p-4 bg-blue-50 rounded-md">
      <p>正在加载动态字典...</p>
    </div>
    
    <!-- 表单数据预览 -->
    <div v-if="Object.keys(formData).length" class="mt-6 p-4 bg-gray-50 rounded-md">
      <h3 class="text-lg font-medium mb-2">表单数据预览</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
        <div><strong>省份:</strong> {{ dictStore.getDictLabel('provinces', formData.province) }}</div>
        <div><strong>学历层次:</strong> {{ dictStore.getDictLabel('educationalLevel', formData.educationalLevel) }}</div>
        <div><strong>专业类别:</strong> {{ dictStore.getDictLabel('professionalCategory', formData.professionalCategory) }}</div>
        <div><strong>科目列表:</strong> {{ getSubjectLabels(formData.subjectList).join(', ') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useDictStore } from '~/stores/dict'

// 使用字典Store
const dictStore = useDictStore()

// 表单数据
const formData = ref({
  province: '',
  educationalLevel: '',
  professionalCategory: '',
  subjectList: [] as string[],
})

// 加载状态
const loading = ref(false)

// 计算属性，获取字典项
const professionalCategoryItems = computed(() => dictStore.getDictItems('professionalCategory'))
const educationalLevelItems = computed(() => dictStore.getDictItems('educationalLevel'))
const subjectListItems = computed(() => dictStore.getDictItems('subjectList'))
const provincesItems = computed(() => dictStore.getDictItems('provinces'))

// 获取科目标签
const getSubjectLabels = (subjectValues: string[]): string[] => {
  return subjectValues.map(value => dictStore.getDictLabel('subjectList', value))
}

// 提交表单
const submitForm = () => {
  alert(`表单数据已提交:\n${JSON.stringify(formData.value, null, 2)}`)
}

// 加载动态字典
const loadDynamicDicts = async () => {
  loading.value = true
  try {
    await dictStore.loadDynamicDicts()
    alert('动态字典加载成功！')
  } catch (error) {
    console.error('加载动态字典失败:', error)
    alert('加载动态字典失败，请查看控制台')
  } finally {
    loading.value = false
  }
}

// 页面加载时初始化
onMounted(async () => {
  // 检查是否已有字典数据，如果没有则加载
  if (Object.keys(dictStore.allDicts).length === 0) {
    try {
      await dictStore.loadDynamicDicts()
    } catch (error) {
      console.warn('加载动态字典失败，使用静态字典:', error)
    }
  }
})
</script>