kyj-yanglao-web-new/src/views/living-home/serviceTeam/districtManagement/index.vue

<template>
  <!-- 列表 -->
  <ContentWrap>
    <div class="flex justify-between items-center mb-4">
      <div class="text-base font-medium">服务区域列表</div>
      <div>
        <el-button type="primary" @click="openForm('create')">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedIds.length">
          <Icon icon="ep:delete" class="mr-5px" /> 删除
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="areaName" label="服务区域" />
      <el-table-column prop="areaName" label="备注" />
      <el-table-column label="操作" align="center" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
          >
            <Icon icon="ep:edit" class="mr-5px" /> 编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ServiceAreaForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import * as ServiceAreaApi from '@/api/living-home/elderly'
import ServiceAreaForm from './ServiceAreaForm.vue'

defineOptions({ name: 'ServiceArea' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<ServiceAreaApi.ServiceAreaVO[]>([]) // 列表的数据
const selectedIds = ref<number[]>([]) // 选中的ID列表

// 默认测试数据
const defaultData: ServiceAreaApi.ServiceAreaVO[] = [
  {
    id: 1,
    areaCode: '441900',
    areaName: '东莞市/茶山镇',
    remark: '服务人员、应急人员、志愿者可选择此区域提供服务'
  },
  {
    id: 2,
    areaCode: '341600,341621,341621100',
    areaName: '亳州市/涡阳县/陈大镇',
    remark: '主要服务区域，覆盖多个社区'
  },
  {
    id: 3,
    areaCode: '440300,440305',
    areaName: '深圳市/南山区',
    remark: '南山区全部街道'
  },
  {
    id: 4,
    areaCode: '440100,440106',
    areaName: '广州市/天河区',
    remark: '天河区核心服务区域'
  },
  {
    id: 5,
    areaCode: '440600,440604',
    areaName: '佛山市/禅城区',
    remark: '禅城区志愿者服务范围'
  }
]

/** 查询服务区域列表 */
const getList = async () => {
  loading.value = true
  try {
    // 先尝试从接口获取数据
    const data = await ServiceAreaApi.getServiceAreaList()
    // 如果接口返回数据为空，则使用默认数据
    list.value = data && data.length > 0 ? data : defaultData
  } catch (error) {
    // 接口调用失败时，使用默认数据
    console.log('使用默认数据')
    list.value = defaultData
  } finally {
    loading.value = false
  }
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: ServiceAreaApi.ServiceAreaVO[]) => {
  selectedIds.value = selection.map((item) => item.id)
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 批量删除按钮操作 */
const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) {
    message.warning('请选择要删除的数据')
    return
  }
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ServiceAreaApi.deleteServiceArea(selectedIds.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>