kyj-yanglao-web-new/src/views/elderly/contracts/components/AttachmentSelector.vue

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  visible?: boolean
  title?: string
  list?: any[]
}>()

const emit = defineEmits<{
  (e: 'update:visible', val: boolean): void
  (e: 'select', row: any): void
}>()

const localVisible = ref(false)
const selectedRow = ref<any>(null)

watch(
  () => props.visible,
  (val) => {
    localVisible.value = val || false
    if (val) selectedRow.value = null
  },
  { immediate: true }
)

const close = () => {
  localVisible.value = false
  emit('update:visible', false)
}

const handleSelect = (row: any) => {
  selectedRow.value = row
}

const handleConfirm = () => {
  if (!selectedRow.value) return
  emit('select', selectedRow.value)
  close()
}

const mockList = ref<any[]>([
  { id: 1, title: '示例数据1 - 2026年1月版本', createTime: '2026-01-15', version: 'V1.0' },
  { id: 2, title: '示例数据2 - 2026年3月版本', createTime: '2026-03-20', version: 'V1.1' },
  { id: 3, title: '示例数据3 - 2026年5月版本', createTime: '2026-05-10', version: 'V2.0' }
])
</script>

<template>
  <el-drawer
    v-model="localVisible"
    :title="`选择${title}数据`"
    size="60%"
    direction="rtl"
    destroy-on-close
    @close="close"
  >
    <el-alert
      title="请根据日期从以下列表中选择一份数据用于此附件"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 12px;"
    />

    <el-table
      :data="list && list.length > 0 ? list : mockList"
      border
      highlight-current-row
      @current-change="handleSelect"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="title" label="名称/说明" min-width="260" />
      <el-table-column prop="version" label="版本" width="100" align="center" />
      <el-table-column prop="createTime" label="日期/创建时间" width="160" align="center" />
    </el-table>

    <template #footer>
      <div style="text-align: right;">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :disabled="!selectedRow" @click="handleConfirm">确认选择</el-button>
      </div>
    </template>
  </el-drawer>
</template>