[BD2.0] 一个包含api请求, 下拉列表的导入页面

<template>
    <div class="centered-container">
      <el-form :model="form">

        <el-form-item label="用户">
            <el-select v-model="form.uid" placeholder="用户">
              <el-option v-for="user in userList" :key="user.id" :label="user.title" :value="user.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="">
            <el-select v-model="form.mobile_id" placeholder="">
                <el-option v-for="(value,key) in mobileConfig"  :key="key" :label="value" :value="key" />
            </el-select>
        </el-form-item>

        <el-form-item label="">
            <el-select v-model="form.meal_id" placeholder="">
              <el-option v-for="item in mealList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.remark" autocomplete="off" />
        </el-form-item>

        <el-form-item label="文件">
          <el-upload ref="upload" :action="importSim" :auto-upload="false" :data="form" :on-success="onSuccess">
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button type="warning" @click="submitUpload">开始导入</el-button>
        <el-button>清空</el-button>
      </span>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref} from 'vue';
  import { ElNotification, UploadInstance } from 'element-plus';
  import { importSim } from '/@/api/controllerUrls'
  import mobileConfig from '/@/api/config/sim/mobile'
  import {getUserList} from '/@/api/public/member/member'
  import {getMealList} from '/@/api/public/sim/sim'
  
  const userList = ref([] as any[]);
  getUserList().then((res)=> {
      userList.value = res.data.list
  })

  const mealList = ref([] as any[]);
  getMealList().then((res)=> {
      mealList.value = res.data.list
  })


  const upload = ref<UploadInstance>();
  
  const submitUpload = () => {
    upload.value!.submit();
  };
  const form = reactive({
    remark: '',
    uid: "",
    meal_id:"",
    mobile_id:""
  });

  // 上传成功的回调
  const onSuccess = (res: any) => {
    if (res.code === 1) {
      ElNotification({message: '导入成功'});
    } else {
      ElNotification({message: res.msg});
    }
  };
  </script>
  
  <style scoped>
  /* 将元素居中 */
  .centered-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%; /* 宽度占用50% */
    margin: 100px auto; /* 水平居中 */
  }
  </style>

• 封装的http请求和配置

import createAxios from '/@/utils/axios'

export function getUserTree() {
    return createAxios({
        url: '/admin/member/getUserTree',
        method: 'get',
    })
}

// 获取用户列表,一位数组
export function getUserList() {
    return createAxios({
        url: '/admin/member/getUserList',
        method: 'get',
    })
}

// mobileConfig
export default {
    1: '单人套餐',
    2: '双人火锅套餐',
    3: '多人火锅套餐'
}