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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

2、引用的公共样式

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

.box-main {
  padding: 0px;
  background: #f8f8f8;
}
.p-top78 {
  padding: 78px 0 0;
}
1
2
3
4
5
6
7

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,
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
}
1
2
3
4
5
6
7