Skip to content

Q
qr-consistency-vue3
Commit ea6f45ed authored by 祁正's avatar 祁正
Browse files
Options

通知单管理-新增表单验证

parent a45fdc77
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 4 deletions
src/views/controlPlan/controlPlanNotice/notificationManagement/index.vue
View file @ ea6f45ed
...@@ -104,9 +104,9 @@ ...@@ -104,9 +104,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="button-container" style="position: relative;"> <el-form-item class="button-container" style="position: relative;">
<el-button type="primary" @click="handleQuery">查询</el-button> <el-button type="primary" class="btn-A" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button> <el-button @click="resetQuery" class="btn-B">重置</el-button>
<el-button style="position: absolute; right: 0;" plain>新增</el-button> <el-button style="position: absolute; right: 0;" class="btn-C" @click="addNotifiction">新增</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -139,18 +139,231 @@ ...@@ -139,18 +139,231 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 抽屉-->
<el-drawer v-model="drawer">
<template #header>
<div style="font-weight: bold;font-size: 14px">
新增通知单
</div>
</template>
<template #default>
<el-form class="drawer-form" :rules="rules" v-model="drawerQueryParams" label-width="100px" ref="drawerQueryRef" >
<el-row >
<el-col :offset="1" :span="22">
<el-form-item label="认证机构" prop="certificationBody">
<el-select
v-model="drawerQueryParams.certificationBody"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="11">
<el-form-item label="事业部" prop="businessDivisionId">
<el-select
v-model="drawerQueryParams.businessDivisionId"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="品牌" prop="brandId">
<el-select
v-model="drawerQueryParams.brandId"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="22">
<el-form-item label="车型代码" prop="vehicleModelCode">
<el-select
v-model="drawerQueryParams.vehicleModelCode"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="22">
<el-form-item label="车型系列" prop="vehicleSeries">
<el-select
v-model="drawerQueryParams.groupName"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="22">
<el-form-item label="生产地址" prop="productionAddress">
<el-select
v-model="drawerQueryParams.productionAddress"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in 4"
:label="dict"
:value="dict"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="17">
<el-form-item label="批准人" prop="approvalPerson">
<el-input disabled v-model="drawerQueryParams.approvalPerson"></el-input>
</el-form-item>
</el-col>
<el-col :offset="1" :span="5">
<el-button type="primary" icon="User" class="btn-C" plain>选择用户</el-button>
</el-col>
</el-row>
<el-row >
<el-col :offset="1" :span="17">
<el-form-item label="认证负责人" prop="certificationResponsiblePerson">
<el-input disabled v-model="drawerQueryParams.certificationResponsiblePerson"></el-input>
</el-form-item>
</el-col>
<el-col :offset="1" :span="5">
<el-button type="primary" icon="User" class="btn-C" plain>选择用户</el-button>
</el-col>
</el-row>
</el-form>
</template>
<template #footer>
<div style="flex: auto">
<el-button class="btn-B" @click="cancelClick">取消</el-button>
<el-button class="btn-A" type="primary" @click="confirmClick">保存</el-button>
</div>
</template>
</el-drawer>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const tableList =ref([])
const tableList =ref([])
const drawer = ref(false)
const drawerQueryParams = ref({})
const queryParams = ref({ const queryParams = ref({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
businessUnitId: null, businessUnitId: null,
number: "" number: ""
}); });
const drawerQueryRef = ref()
function addNotifiction(){
drawer.value = true
}
const rules = ref({
certificationBody: [
{ required: true, message: '请选择认证机构', trigger: 'blur' }
],
businessDivisionId: [
{ required: true, message: '请选择事业部', trigger: 'blur' }
],
brandId: [
{ required: true, message: '请选择品牌', trigger: 'blur' }
],
vehicleModelCode: [
{ required: true, message: '请输入车型代码', trigger: 'blur' }
],
vehicleSeries: [
{ required: true, message: '请选择车型系列', trigger: 'blur' }
],
productionAddress: [
{ required: true, message: '请选择生产地址', trigger: 'blur' }
],
approvalPerson: [
{ required: true, message: '请选择批准人', trigger: 'blur' }
],
certificationResponsiblePerson: [
{ required: true, message: '请选择认证负责人', trigger: 'blur' }
]
});
function confirmClick(){
drawerQueryRef.value.validate((v)=>{
if(v){
console.log(drawerQueryParams)
}
})
}
</script> </script>
...@@ -163,4 +376,9 @@ const queryParams = ref({ ...@@ -163,4 +376,9 @@ const queryParams = ref({
width: 50%; width: 50%;
} }
:deep(.el-drawer__header) {
margin-bottom: 0;
padding-bottom: 20px;
background-color: rgb(245, 245, 245);
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment