vue3 advanced (1) - How to write Promise.all to request multiple interfaces & the form must be filled in and verified before saving or submitting & @import url imports public styles & module.exports defines objects and require imports js files
Method 1: The form must be filled in and verified before saving or submitting.
1. vue details/new/edit page
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. Referenced public styles
src\app\science\views\style\main.scss
.box-main {
padding: 0px;
background: #f8f8f8;
}
.p-top78 {
padding: 78px 0 0;
}
3. Referenced interface
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
}