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

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 } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10763.html