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/emergencySupplies/component/maintain.vue | 413 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 209 insertions(+), 204 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue index e8a4261..0100a95 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue @@ -1,230 +1,235 @@ <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" - > - <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> + <div class="system-edit-user-container"> + <el-dialog title="修改应急物资保养" @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" :model="ruleForm" :rules="rules" 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="nameTitle"> + <el-input v-model="nameTitle" disabled 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="maintainResult"> - <el-select v-model="ruleForm.maintainResult" 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="maintainTime"> - <el-date-picker - class="w100" - v-model="ruleForm.maintainTime" - type="datetime" - placeholder="选择日期时间" - value-format="YYYY-MM-DD HH:mm:ss" - /> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> + </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="maintainResult"> + <el-select v-model="ruleForm.maintainResult" 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="maintainTime"> + <el-date-picker + class="w100" + v-model="ruleForm.maintainTime" + type="datetime" + placeholder="选择日期时间" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </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" @click="submitForm(titles, ruleFormRef)">确定</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> </span> - </template> - </el-dialog> - <EmergencySupplies ref="showRef" @SearchUser="onUser"/> - <DailogSearchUser ref="userRef" @SearchUser="onUsers"/> - </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, -} 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 DailogSearchUser from "../../../../../components/DailogSearchUser/index.vue" -import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials"; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import EmergencySupplies from '/@/components/emergencySupplies/index.vue'; +import DailogSearchUser from '../../../../../components/DailogSearchUser/index.vue'; +import { maintenanceEmergencyMaterialsApi } from '/@/api/maintenanceEmergencyMaterials'; export default defineComponent({ - name: 'maintain', - components: { - DailogSearchUser, - EmergencySupplies, - }, - setup(props, { emit }) { - const isShowDialog = ref(false) + name: 'maintain', + components: { + DailogSearchUser, + EmergencySupplies, + }, + setup(props, { emit }) { + const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = ref ({ - suppliesId: '', // 物资ID - maintainResult: '', //保养结果 - maintainTime: '', // 创建时间 - userList: [] - }); - const titles = ref(); - const disabled = ref(); - // 打开弹窗 - const openDialog = (title: string,) => { - isShowDialog.value = true; - titles.value = title; - }; - // 表单提交验证必填项 - const submitForm = async (title: string, formEl: FormInstance | undefined) => { - if (title == '修改应急物资保养') { - if (!formEl) return; - await formEl.validate((valid, fields) => { - if (valid) { - isShowDialog.value = false; - maintenanceEmergencyMaterialsApi() - .addMaintenanceEmergencyMaterials(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); - } - }); - } - } - const resetForm = (formEl: FormInstance | undefined) => { - isShowDialog.value = false; - if (!formEl) return; - formEl.resetFields(); - }; + const ruleFormRef = ref<FormInstance>(); + //定义表单 + const ruleForm = ref({ + suppliesId: '', // 物资ID + maintainResult: '', //保养结果 + maintainTime: '', // 创建时间 + userList: [], + }); + const disabled = ref(); + // 打开弹窗 + const nameTitle = ref(); + const openDialog = (data: string) => { + isShowDialog.value = true; + ruleForm.value.suppliesId = data.id; + nameTitle.value = data.name; + }; + const rules = reactive<FormRules>({ + nameTitle: [], + maintainResult: [ + { + required: true, + message: '保养结果不能为空', + trigger: 'change', + }, + ], + userName: [ + { + required: true, + message: '创建人不能为空', + trigger: 'change', + }, + ], + maintainTime: [ + { + required: true, + message: '创建时间不能为空', + trigger: 'blur', + }, + ], + }); + // 表单提交验证必填项 + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + maintenanceEmergencyMaterialsApi() + .addMaintenanceEmergencyMaterials(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); + } + }); + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; - //日期选择器 - const value1 = ref('') + //日期选择器 + const value1 = ref(''); - // 应急物资弹窗 - const showRef=ref() - const daiInpt=()=>{ - showRef.value.openDailog() - } - const onUser = (e:any) => { - ruleForm.value.suppliesId=e.id - }; + // 应急物资弹窗 + const showRef = ref(); + const daiInpt = () => { + showRef.value.openDailog(); + }; + const onUser = (e: any) => { + ruleForm.value.suppliesId = e.id; + }; - // 编写人弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDailog(); - }; - const onUsers = (e:any) => { - ruleForm.value.userUid=e.uid - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - isShowDialog, - resetForm, - Search, - ruleForm, - value1, - daiInpt, - onUsers, - showRef, - ruleFormRef, - onUser, - submitForm, - openUser, - userRef, - toggleFullscreen, - FullScreen, - full, - titles, - disabled, - emit, - }; - }, + // 编写人弹窗 + const userRef = ref(); + const openUser = (type: any) => { + userRef.value.openDailog(type); + }; + 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, + rules, + isShowDialog, + resetForm, + Search, + ruleForm, + value1, + daiInpt, + onUsers, + showRef, + ruleFormRef, + onUser, + submitForm, + openUser, + userRef, + toggleFullscreen, + FullScreen, + full, + disabled, + emit, + nameTitle, + }; + }, }); </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