From d57a6d8cca922c9a701887c0403c10d663a258cb Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期一, 18 七月 2022 17:47:56 +0800 Subject: [PATCH] 全屏功能 --- src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue | 197 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 197 insertions(+), 0 deletions(-) diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue new file mode 100644 index 0000000..93be57f --- /dev/null +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue @@ -0,0 +1,197 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="新建应急物资保养" + 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="teamName"> + <el-input + v-model="ruleForm.teamLeader" + 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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="正常" value="admin"></el-option> + <el-option label="异常" value="common"></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="telephone"> + <el-input + v-model="ruleForm.teamLeader" + 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="telephone"> + <el-date-picker + class="w100" + v-model="value1" + type="datetime" + placeholder="选择日期时间" + /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + <Material ref="showRef"/> + <userSelections ref="userRef"/> + </div> +</template> + +<script lang="ts"> +import { + reactive, + ref, + defineComponent +} from 'vue'; + +import type { + FormInstance, + // FormRules, +} from 'element-plus' + +import { + Search, + FullScreen +} from '@element-plus/icons-vue' +import Material from '/@/components/material/index.vue' +import UserSelections from "/@/components/userSelections/index.vue" + +export default defineComponent({ + name: 'openAdd', + components: { + UserSelections, + Material, + }, + setup() { + const isShowDialog = ref(false) + + const ruleFormRef = ref<FormInstance>() + //定义表单 + const ruleForm = reactive({ + teamName: '', // 队伍名称 + teamLeader: '', //队伍负责人 + department: [], // 负责人部门 + phone: '', // 负责人手机 + telephone: '', // 固定电话 + }); + // 打开弹窗 + const openDialog = () => { + // state.ruleForm = row; + isShowDialog.value = true; + }; + // 关闭弹窗 + const closeDialog = () => { + isShowDialog.value = false; + }; + // 取消 + const onCancel = () => { + closeDialog(); + }; + //日期选择器 + const value1 = ref('') + // 表单提交验证必填项 + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + } else { + console.log('error submit!', fields) + } + }) + } + // 应急物资弹窗 + const showRef=ref() + const daiInpt=()=>{ + showRef.value.openDailog() + } + // 编写人弹窗 + 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, + closeDialog, + isShowDialog, + onCancel, + Search, + ruleForm, + value1, + daiInpt, + showRef, + ruleFormRef, + submitForm, + openUser, + userRef, + toggleFullscreen, + FullScreen, + full, + }; + }, +}); +</script> +<style scoped lang="scss"> +.textarea{ + height: 168px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 168px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +.el-divider--horizontal{ + height: 0; + margin: 0; + border-top: transparent; +} +.el-select{ + width: 100%; +} +</style> \ No newline at end of file -- Gitblit v1.9.2