From d6b4708cede4ae7a5e06d5fb10271d4ea1132986 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期六, 06 八月 2022 15:32:20 +0800 Subject: [PATCH] 对接 --- src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue | 523 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 258 insertions(+), 265 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue index fb47da5..7dff034 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue @@ -1,287 +1,280 @@ <template> - <div class="system-edit-user-container"> - <el-dialog - :title="titles" - v-model="isShowDialog" - width="769px" - draggable - :fullscreen="full" - > - <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form - ref="ruleFormRef" - :model="ruleForm" - size="default" - label-width="120px" - :disabled="disabled" - > - <el-row :gutter="35"> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="应急物资" prop="suppliesId"> - <el-input - v-model="ruleForm.suppliesId" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search" @click="daiInpt"/> - </template> - </el-input> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="检查结果" prop="inspectResult"> - <el-select v-model="ruleForm.inspectResult" class="w100" placeholder="请选择"> - <el-option label="正常" value="正常"></el-option> - <el-option label="异常" value="异常"></el-option> - </el-select> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="创建人" prop="userUid"> - <el-input - v-model="ruleForm.userUid" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search" @click="openUser" /> - </template> - </el-input> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="创建时间" prop="inspectTime"> - <el-date-picker - class="w100" - v-model="ruleForm.inspectTime" - type="datetime" - value-format="YYYY-MM-DD HH:mm:ss" - placeholder="选择日期时间" - /> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> + <div class="system-edit-user-container"> + <el-dialog :title="titles" @close="resetForm(ruleFormRef)" v-model="isShowDialog" width="50%" draggable :fullscreen="full"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form ref="ruleFormRef" :disabled="titles=='查看应急物资检查'?true:false" :rules="rules" :model="ruleForm" size="default" label-width="120px"> + <el-row :gutter="35"> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="应急物资" prop="suppliesName"> + <el-input v-model="ruleForm.suppliesName" placeholder="请选择" class="input-with-select"> + <template #append> + <el-button :icon="Search" @click="daiInpt" /> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="检查结果" prop="inspectResult"> + <el-select v-model="ruleForm.inspectResult" class="w100" placeholder="请选择"> + <el-option label="正常" value="1"></el-option> + <el-option label="异常" value="2"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="创建人" prop="userName"> + <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select"> + <template #append> + <el-button :icon="Search" @click="openUser(0)" /> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="创建时间" prop="inspectTime"> + <el-date-picker + class="w100" + v-model="ruleForm.inspectTime" + type="datetime" + value-format="YYYY-MM-DD HH:mm:ss" + placeholder="选择日期时间" + /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> <span class="dialog-footer"> <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> - <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> + <el-button size="default" type="primary" v-if="titles=='查看应急物资检查'?false:true" @click="submitForm(titles, ruleFormRef)">确定</el-button> </span> - </template> - </el-dialog> - <EmergencySupplies ref="showRef" @SearchUser="onUser"/> - <userSelections ref="userRef"/> - </div> + </template> + </el-dialog> + <EmergencySupplies ref="showRef" @SearchUser="onUser" /> + <DailogSearchUser ref="userRef" @SearchUser="onUsers" /> + </div> </template> <script lang="ts"> -import { - ref, - defineComponent -} from 'vue'; +import { ref, defineComponent, reactive } from 'vue'; -import type { - FormInstance, - // FormRules, -} from 'element-plus' +import type { FormInstance, FormRules } from 'element-plus'; import { ElMessage } from 'element-plus'; -import { - Search, - FullScreen, -} from '@element-plus/icons-vue' -import EmergencySupplies from '/@/components/emergencySupplies/index.vue' -import UserSelections from "/@/components/userSelections/index.vue" -import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection"; -import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials"; +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import EmergencySupplies from '/@/components/emergencySupplies/index.vue'; +import UserSelections from '/@/components/userSelections/index.vue'; +import { emergencyMaterialsInspectionApi } from '/@/api/emergencyMaterialsInspection'; +import { maintenanceEmergencyMaterialsApi } from '/@/api/maintenanceEmergencyMaterials'; export default defineComponent({ - name: 'openAdd', - components: { - UserSelections, - EmergencySupplies, - }, - setup(props, { emit }) { - const isShowDialog = ref(false) + name: 'openAdd', + components: { + DailogSearchUser, + EmergencySupplies, + }, + setup(props, { emit }) { + const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = ref ({ - suppliesId: '', // 物资ID - inspectResult: '', //检查结果 - inspectTime: '', // 创建时间 - userList:[ - { - userUid: '' - }, - { - userUid: '' - } - ] - }); - const titles = ref(); - const disabled = ref(); - // 打开弹窗 - const openDialog = (title: string, id: number, type: boolean) => { - isShowDialog.value = true; - titles.value = title; - disabled.value = type; - if (title == '查看应急物资检查' || title == '修改应急物资检查') { - emergencyMaterialsInspectionApi() - .seeEmergencyMaterialsInspection(id) - .then((res) => { - if (res.data.code == 200) { - ruleForm.value = res.data.data; - } - }); - } - }; - //日期选择器 - const value1 = ref('') - // 表单提交验证必填项 - const submitForm = async (title: string, formEl: FormInstance | undefined) => { - if (title == '新建应急物资检查') { - if (!formEl) return; - await formEl.validate((valid, fields) => { - if (valid) { - isShowDialog.value = false; - emergencyMaterialsInspectionApi() - .addEmergencyMaterialsInspection(ruleForm.value) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'success', - }); - emit('myAdd', true); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - emit('myAdd', true); - } - formEl.resetFields(); - }); - } else { - console.log('error submit!', fields); - } - }); - } - else if (title == '修改应急物资检查') { - if (!formEl) return; - await formEl.validate((valid, fields) => { - if (valid) { - isShowDialog.value = false; - emergencyMaterialsInspectionApi() - .editEmergencyMaterialsInspection(ruleForm.value) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - showClose: true, - message: '修改成功', - type: 'success', - }); - emit('myAdd', true); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - emit('myAdd', true); - } - formEl.resetFields(); - }); - } else { - console.log('error submit!', fields); - } - }); - formEl.resetFields(); - ruleForm.value = { - suppliesId: '', // 物资ID - inspectResult: '', //检查结果 - inspectTime: '', // 创建时间 - userList:[ - { - userUid: '' - }, - { - userUid: '' - } - ] - } - } - } - const resetForm = (formEl: FormInstance | undefined) => { - isShowDialog.value = false; - if (!formEl) return; - formEl.resetFields(); - }; - // 应急物资弹窗 - const showRef=ref() - const daiInpt=()=>{ - showRef.value.openDailog() - } - const onUser = (e:any) => { - ruleForm.value.suppliesId=e.id - }; - // 编写人弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDialog(); - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - isShowDialog, - Search, - ruleForm, - value1, - daiInpt, - showRef, - ruleFormRef, - submitForm, - openUser, - userRef, - resetForm, - toggleFullscreen, - FullScreen, - full, - titles, - disabled, - emit, - onUser, - }; - }, + const ruleFormRef = ref<FormInstance>(); + //定义表单 + const ruleForm = ref({ + suppliesId: '', // 物资ID + inspectResult: '', //检查结果 + inspectTime: '', // 创建时间 + userList: [], + }); + const titles = ref(); + const disableds = ref(); + // 打开弹窗 + const openDialog = (title: string, id: number) => { + isShowDialog.value = true; + titles.value = title; + if (title == '查看应急物资检查' || title == '修改应急物资检查') { + emergencyMaterialsInspectionApi() + .seeEmergencyMaterialsInspection(id) + .then((res) => { + if (res.data.code == 200) { + ruleForm.value = res.data.data; + let arr = []; + for (let i = 0; i < ruleForm.value.userList.length; i++) { + arr.push(ruleForm.value.userList[i].userName); + } + ruleForm.value.userName = arr.toString(); + } + }); + } + }; + //日期选择器 + const value1 = ref(''); + const rules = reactive<FormRules>({ + nameTitle: [], + inspectResult: [ + { + required: true, + message: '保养结果不能为空', + trigger: 'change', + }, + ], + userName: [ + { + required: true, + message: '创建人不能为空', + trigger: 'change', + }, + ], + inspectTime: [ + { + required: true, + message: '创建时间不能为空', + trigger: 'blur', + }, + ], + }); + // 表单提交验证必填项 + const submitForm = async (title: string, formEl: FormInstance | undefined) => { + if (title == '新建应急物资检查') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + emergencyMaterialsInspectionApi() + .addEmergencyMaterialsInspection(ruleForm.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + emit('myAdd', true); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + emit('myAdd', true); + } + formEl.resetFields(); + }); + } else { + console.log('error submit!', fields); + } + }); + } else if (title == '修改应急物资检查') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + emergencyMaterialsInspectionApi() + .editEmergencyMaterialsInspection(ruleForm.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: '修改成功', + type: 'success', + }); + emit('myAdd', true); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + emit('myAdd', true); + } + formEl.resetFields(); + }); + } else { + console.log('error submit!', fields); + } + }); + formEl.resetFields(); + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 应急物资弹窗 + const showRef = ref(); + const daiInpt = () => { + showRef.value.openDailog(); + }; + const onUser = (e: any) => { + ruleForm.value.suppliesId = e.id; + ruleForm.value.suppliesName = e.name; + }; + // 编写人弹窗 + const userRef = ref(); + const openUser = (data: any) => { + userRef.value.openDailog(data); + }; + const onUsers = (val: any) => { + let arr = []; + for (let i = 0; i < val.length; i++) { + arr.push(val[i].realName); + ruleForm.value.userList.push({ + userUid: val[i].uid, + userName: val[i].realName, + }); + } + ruleForm.value.userName = arr.toString(); + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + isShowDialog, + Search, + ruleForm, + value1, + onUsers, + daiInpt, + showRef, + ruleFormRef, + submitForm, + openUser, + rules, + userRef, + resetForm, + toggleFullscreen, + FullScreen, + full, + titles, + disableds, + emit, + onUser, + }; + }, }); </script> <style scoped lang="scss"> -.textarea{ - height: 168px!important; +.textarea { + height: 168px !important; } -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; +.textarea ::v-deep .el-textarea__inner { + height: 168px !important; } ::v-deep .el-table__cell { - font-weight: 400; + font-weight: 400; } -.el-divider--horizontal{ - height: 0; - margin: 0; - border-top: transparent; +.el-divider--horizontal { + height: 0; + margin: 0; + border-top: transparent; } -.el-select{ - width: 100%; +.el-select { + width: 100%; } </style> \ No newline at end of file -- Gitblit v1.9.2