大数据模型练习2

<template>
  <el-dialog v-model="visible" title="搜索项配置" width="700px" @open="initTransferData">
    <div style="text-align: center">
      <el-transfer
        v-model="targetKeys"
        :data="transferData"
        :titles="['全部搜索项', '已选搜索项']"
        target-order="original"
        filterable
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useSearchStore } from '../../stores/searchStore'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const searchStore = useSearchStore()
const targetKeys = ref([]) // 右侧已选的 key 数组

// 计算属性实现 v-model
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

// 将 Store 中的字段转换为 Transfer 需要的格式 { key, label }
const transferData = computed(() => {
  return searchStore.allFields.map((f) => ({
    key: f.key,
    label: f.label,
    disabled: false,
  }))
})

// 弹窗打开时，从 Store 同步当前状态
const initTransferData = () => {
  targetKeys.value = [...searchStore.activeFieldKeys]
}

const handleConfirm = () => {
  // 更新 Store
  searchStore.updateActiveFields(targetKeys.value)
  visible.value = false
}
</script>