From 647ef6974a149e21bc88e4b559ba9badaafe367e Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: Mon, 11 Jul 2022 18:02:28 +0800
Subject: [PATCH] 添加我的申请tab切换页面，优化组件表单的校验
---
src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue | 173 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 95 insertions(+), 78 deletions(-)
diff --git a/src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue b/src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue
index 39513f7..bf26c37 100644
--- a/src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue
+++ b/src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue
@@ -1,6 +1,6 @@
<template>
<div class="comp-container">
- <el-form :model="bpForm" label-width="180px" :rules="bpFormRules" ref="ruleFormRef">
+ <el-form :model="bpForm" label-width="180px" :rules="bpFormRules" ref="bpRef">
<div class="homeCard">
<el-row>
<el-col :span="8">
@@ -14,9 +14,9 @@
<el-col :span="8">
<el-form-item label="申请人" prop="bpApplyName">
<el-input
- v-model="bpForm.bpApplyName"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpApplyName"
+ placeholder="请输入"
+ class="input-with-select"
>
<template #append>
<el-button :icon="Search" />
@@ -29,9 +29,9 @@
<el-col :span="24">
<el-form-item label="设备管道名称" prop="bpTubeName">
<el-input
- v-model="bpForm.bpTubeName"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpTubeName"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -40,9 +40,9 @@
<el-col :span="24">
<el-form-item label="主要介质" prop="bpMainMatter">
<el-input
- v-model="bpForm.bpMainMatter"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpMainMatter"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -51,18 +51,18 @@
<el-col :span="8">
<el-form-item label="温度" prop="bpTemperature">
<el-input
- v-model="bpForm.bpTemperature"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpTemperature"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="压力" prop="bpPressure">
<el-input
- v-model="bpForm.bpPressure"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpPressure"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -71,9 +71,9 @@
<el-col :span="24">
<el-form-item label="盲板材质" prop="bpMaterial">
<el-input
- v-model="bpForm.bpMaterial"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpMaterial"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -82,9 +82,9 @@
<el-col :span="24">
<el-form-item label="盲板规格" prop="bpFormat">
<el-input
- v-model="bpForm.bpFormat"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpFormat"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -93,9 +93,9 @@
<el-col :span="24">
<el-form-item label="盲板编号" prop="bpNum">
<el-input
- v-model="bpForm.bpNum"
- placeholder="请输入"
- class="input-with-select"
+ v-model="bpForm.bpNum"
+ placeholder="请输入"
+ class="input-with-select"
/>
</el-form-item>
</el-col>
@@ -104,27 +104,27 @@
<el-col :span="24">
<el-form-item label="盲板位置" prop="bpLocation">
<el-input
- v-model="bpForm.bpLocation"
- placeholder="请输入"
- class="input-with-select"
- type="textarea"
+ v-model="bpForm.bpLocation"
+ placeholder="请输入"
+ class="input-with-select"
+ type="textarea"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
- <el-form-item label="盲板位置图" prop="fileList">
+ <el-form-item label="盲板位置图">
<el-upload
- v-model:file-list="fileList"
- class="upload-demo"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
- multiple
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :before-remove="beforeRemove"
- :limit="3"
- :on-exceed="handleExceed"
+ v-model:file-list="bpForm.picList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ multiple
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :limit="3"
+ :on-exceed="handleExceed"
>
<el-button type="primary">上传附件</el-button>
<template #tip>
@@ -150,9 +150,9 @@
<el-col :span="24">
<el-form-item label="装盲板时间" prop="bpInstallTime">
<el-date-picker
- v-model="bpForm.bpInstallTime"
- type="datetime"
- placeholder="请选择"
+ v-model="bpForm.bpInstallTime"
+ type="datetime"
+ placeholder="请选择"
/>
</el-form-item>
</el-col>
@@ -207,44 +207,47 @@
}
export default defineComponent({
name: 'blindPanelForm',
- setup() {
+ props: {
+ bpForm: Object,
+ },
+ setup(props) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
const state = reactive<stateType>({});
- const bpForm = reactive({
- bpDepartment: '',
- bpApplyName: '',
- bpTubeName: '',
- bpMainMatter: '',
- bpTemperature: '',
- bpPressure: '',
- bpMaterial: '',
- bpFormat: '',
- bpNum: '',
- bpLocation: '',
- fileList: [],
- bpPrincipals: [],
- bpInstallTime: '',
- bpDePrincipals: [],
- bpUninstallTime: ''
- })
- const ruleFormRef = ref<FormInstance>()
+ const bpForm1 = reactive(props.bpForm)
+ // const bpForm = reactive({
+ // bpDepartment: '',
+ // bpApplyName: '',
+ // bpTubeName: '',
+ // bpMainMatter: '',
+ // bpTemperature: '',
+ // bpPressure: '',
+ // bpMaterial: '',
+ // bpFormat: '',
+ // bpNum: '',
+ // bpLocation: '',
+ // fileList: [],
+ // bpPrincipals: [],
+ // bpInstallTime: '',
+ // bpDePrincipals: [],
+ // bpUninstallTime: ''
+ // })
+ const bpRef = ref<FormInstance>()
const bpFormRules = reactive<FormRules>({
- bpDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpTubeName: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpMainMatter: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpTemperature: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpPressure: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpMaterial: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpFormat: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpNum: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpLocation: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- fileList: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
- bpPrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
- bpInstallTime: [{required: true,message: '此处不可为空',trigger: 'blur'}],
- bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
- bpUninstallTime: [{required: true,message: '此处不可为空',trigger: 'blur'}]
+ bpDepartment:[{required: true,message: '此处不可为空'}],
+ bpApplyName:[{required: true,message: '此处不可为空'}],
+ bpTubeName: [{required: true,message: '此处不可为空'}],
+ bpMainMatter: [{required: true,message: '此处不可为空'}],
+ bpTemperature: [{required: true,message: '此处不可为空'}],
+ bpPressure: [{required: true,message: '此处不可为空'}],
+ bpMaterial: [{required: true,message: '此处不可为空'}],
+ bpFormat: [{required: true,message: '此处不可为空'}],
+ bpNum: [{required: true,message: '此处不可为空'}],
+ bpLocation: [{required: true,message: '此处不可为空'}],
+ bpPrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger:'blur'}],
+ bpInstallTime: [{required: true,message: '此处不可为空'}],
+ bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger:'blur'}],
+ bpUninstallTime: [{required: true,message: '此处不可为空'}]
})
const fileList = ref<UploadUserFile[]>([
{
@@ -278,6 +281,18 @@
() => false
)
}
+
+ const validateForm = async () => {
+ let flag = null
+ await bpRef.value.validate(valid=>{
+ if(valid){
+ flag = true
+ }else{
+ flag = false
+ }
+ })
+ return flag
+ }
// 折线图
const renderMenu = async (value: string) => {
Session.set('projectId',value)
@@ -286,10 +301,12 @@
};
return {
renderMenu,
- bpForm,
+ bpForm1,
bpFormRules,
- ruleFormRef,
+ bpRef,
fileList,
+ Search,
+ validateForm,
handleRemove,
handlePreview,
handleExceed,
--
Gitblit v1.9.2