vue3进阶(一)——Promise.all请求多个接口的写法& 表单必填校验后再保存或提交 & @import url导入公共样式& module.exports定义对象和require导入js文件

最新推荐文章于 2025-04-29 14:01:21 发布

viceen

最新推荐文章于 2025-04-29 14:01:21 发布

阅读量1.9k

点赞数

分类专栏： vue3+ts-运维文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_44867717/article/details/132675490

版权

vue3+ts-运维专栏收录该内容

87 篇文章

订阅专栏

本文介绍了在Vue3中如何使用Promise.all并发请求多个接口，并演示了表单必填项校验后保存或提交的功能，以及使用import和module.exports进行样式和模块导入的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3进阶(一)——Promise.all请求多个接口的写法& 表单必填校验后再保存或提交 & @import url导入公共样式& module.exports定义对象和require导入js文件

写法一：表单必填校验后再保存或提交

1、vue详情/新增/编辑页面

needDetails.vue

<template>

  <div :class="route.query.type === 'view' ? 'box-main p-top58' : 'box-main'">
    <el-page-header class="page-header" :content="title" @back="goBack" />
    <el-form ref="formRef" label-width="128px" :model="formInline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="需求名称：" prop="needName" :rules="{
            required: true,
            message: '请输入需求名称',
            trigger: 'change',
          }">
            <el-input v-model="formInline.needName" :disabled="route.query.type === 'view'" placeholder="点击输入框选择需求" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需求编号：" prop="needCode">
            <el-input v-model="formInline.needCode" :disabled="route.query.type === 'view'" maxlength="100"
              placeholder="请输入" @input="(e) => (formInline.needCode = replaceCommonText(e))" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div style="padding-top: 22px">
    <div style="margin-bottom: 22px; font-size: 16px">变更信息：</div>
    <el-form ref="formRefTwo" label-width="128px" :model="formInline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="原组别：" prop="oldGroupName" :rules="{
            required: true,
            message: '请输入',
            trigger: 'blur',
          }">
            <el-input v-model="formInline.oldGroupName" :disabled="route.query.type === 'view'" maxlength="100"
              placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原技术领域：" prop="oldTechFieldName" :rules="[
            {
              validator: validateCommonText,
              trigger: ['blur', 'change'],
            },
          ]">
            <el-input v-model="formInline.oldTechFieldName" disabled placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div style="text-align: center" v-if="route.query.type !== 'view'">
    <el-button v-throttle="3000" style="margin: 5px 20px 0 0px" type="primary" @click="handleClick('save')">
      保存
    </el-button>
    <el-button v-throttle="3000" style="margin: 5px 20px 0 0px" type="primary" @click="handleClick('submit')">
      提交
    </el-button>
    <el-button plain style="margin: 5px 0px 0 0px" type="primary" @click="goBack">
      取消
    </el-button>
  </div>
</template>
<script setup>
import {
  saveDemandConvertGroup,
  updateDemandConvertData,
  batchGroupUpdateStatus,
} from '@/api/variousUnits/index.js'
import { replaceCommonText, validateCommonText } from '@src/utils/validate'
const formRef = ref()
const formRefTwo = ref(null)
const formInline = ref({
  needCode: '',
  needName: '',
  oldGroupName: '',
  oldTechFieldName: '',
})
const route = useRoute()
const router = useRouter()
const title = ref('需求添加')
if (route.query.type === 'view') {
  title.value = '需求管理详情'
} else if (route.query.type === 'edit') {
  title.value = '需求管理编辑'
}
// 返回列表
const goBack = async () => {
  if (JSON.parse(sessionStorage.getItem('manageZnIndex')) == '1') {
    sessionStorage.setItem('manageZnIndex', '1')
  }
  if (JSON.parse(sessionStorage.getItem('manageZnIndex')) == '2') {
    sessionStorage.setItem('manageZnIndex', '2')
  }
  router.push({
    path: '/comquart/variousUnits/comInplement',
  })
}
//点击按钮
const handleClick = async (item) => {
  // Promise.all 写法
  Promise.all([formRef.value.validate(), formRefTwo.value.validate()]).then(
    () => {
      method[item]()
    },
    () => { }
  )
}
const method = {
  // 方法-原生写法
  // 提交
  submit: function () {
    const ids = [formInline.value.id]
    const bizNames = [formInline.value.needName]
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    batchGroupUpdateStatus({ ids, bizNames })
      .then((res) => {
        console.log(res)
        if (res.code === '00000') {
          ElMessage.success('提交成功')
          goBack()
        } else {
          ElMessage.error(res.message)
        }
      })
      .finally(() => {
        loading.close()
      })
  },
  // 保存
  save: function () {
    const require =
      route.query?.type === 'add'
        ? saveDemandConvertGroup
        : updateDemandConvertData
    const req = { ...formInline.value }
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    require(req)
      .then((res) => {
        console.log(res)
        if (res.code === '00000') {
          ElMessage.success('保存成功')
          goBack()
        } else {
          ElMessage.error(res.message)
        }
      })
      .finally(() => {
        loading.close()
      })
  },
}
</script>
<style lang="scss" scoped>
@import url('../../style/main.scss');

.page-header {
  border-bottom: 20px solid #f8f8f8;

  :deep(.ym-page-header__header) {
    height: 40px;
    line-height: 40px;
  }
}
</style>

2、引用的公共样式

src\app\science\views\style\main.scss

.box-main {
  padding: 0px;
  background: #f8f8f8;
}
.p-top78 {
  padding: 78px 0 0;
}

3、引用的接口

src\app\science\api\variousUnits\index.js

import request from '@src/utils/request'
import { sciencePostUrl } from '@/config'

//指南编制-需求转租保存
export const saveDemandConvertGroup = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/saveDemandConvertGroup`,
    method: 'post',
    data,
  })
}

// 修改需求转租信息详情
export const updateDemandConvertData = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/updateDemandConvertData`,
    method: 'post',
    data,
  })
}

//指南编制-需求转租批量提交
export const batchGroupUpdateStatus = (data) => {
  return request({
    url: `${sciencePostUrl}/demandConvert/batchUpdateStatus`,
    method: 'post',
    data,
  })
}

src\app\science\config\index.js

/**
 * @description 4个子配置，vue/cli配置|通用配置|主题配置|网络配置导出
 *              config中的部分配置由vue.config.js读取，本质是node，故不可使用window等浏览器对象
 */
const cli = require('./cli.config')
const setting = require('./setting.config')
const theme = require('./theme.config')
const network = require('./net.config')
const prefixApi = require('./prefixApi.config')
module.exports = {
  ...cli,
  ...setting,
  ...theme,
  ...network,
  ...prefixApi,
}

src\app\science\config\prefixApi.config.js

module.exports = {
  planPostUrl: '/srbm-prj-plan-front/member',
  sciencePostUrl: '/srbm-prj-techprj-front/member',
  filePostUrl: '/srbm-bas-file-front/member',
  mgtPostUrl: '/srbm-mgt-gnlmgt-front/member',
  memPostUrl: '/inner/inner', //member
}