电子围栏功能 - 全屏弹窗

jnpf-java-boot/jnpf-web/src/views/stationarea/Detail.vue

@@ -1,9 +1,15 @@
 <template>
-<el-dialog title="详情"
-           :close-on-click-modal="false" append-to-body
-           :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll
-           width="600px">
-<el-row :gutter="15" class="">
+<transition name="el-zoom-in-center">
+<div class="JNPF-preview-main">
+    <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
+    <div class="JNPF-common-page-header">
+        <el-page-header @back="goBack"
+                        content="详情"/>
+        <div class="options">
+            <el-button @click="goBack">取 消</el-button>
+        </div>
+    </div>
+<el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
 <el-form ref="formRef" :model="dataForm" size="small" label-width="100px" label-position="right" >
     <template v-if="!loading">
             <el-col :span="24"  >
@@ -57,11 +63,8 @@
     </template>
 </el-form>
     </el-row>
-    <span slot="footer" class="dialog-footer">
-        <el-button @click="visible = false"> 取 消</el-button>
-    </span>
-    <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
-    </el-dialog>
+    </div>
+</transition>
 </template>
 <script>
     import request from '@/utils/request'
@@ -121,6 +124,9 @@
                 this.dataForm = _dataAll
             },
 
+                goBack() {
+                    this.$emit('refresh')
+                },
             init(id) {
                 this.dataForm.id = id || 0;
                 this.visible = true;

jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue

@@ -2,11 +2,35 @@
 
 
     <template>
-        <el-dialog :title="!dataForm.id ? '新建' :'编辑'"
-                   :close-on-click-modal="false" append-to-body
-                   :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll
-                   width="600px">
-        <el-row :gutter="15" class="">
+            <transition name="el-zoom-in-center">
+            <div class="JNPF-preview-main">
+                <div class="JNPF-common-page-header">
+                    <el-page-header @back="goBack"
+                                    :content="!dataForm.id ? '新建':'编辑'"/>
+                    <div class="options">
+                            <el-dropdown class="dropdown" placement="bottom">
+                                <el-button style="width:70px">
+                                    更 多<i class="el-icon-arrow-down el-icon--right"></i>
+                                </el-button>
+                                <el-dropdown-menu slot="dropdown">
+                                        <template v-if="dataForm.id">
+                                            <el-dropdown-item @click.native="prev" :disabled='prevDis'>
+                                                {{'上一条'}}
+                                            </el-dropdown-item>
+                                            <el-dropdown-item @click.native="next" :disabled='nextDis'>
+                                                {{'下一条'}}
+                                            </el-dropdown-item>
+                                        </template>
+                                    <el-dropdown-item type="primary" @click.native="dataFormSubmit(2)"
+                                                      :loading="continueBtnLoading" :disabled='btnLoading'>
+                                        {{!dataForm.id ?'确定并新增':'确定并继续'}}</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading" :disabled='continueBtnLoading'> 保 存</el-button>
+                        <el-button @click="goBack"> 取 消</el-button>
+                    </div>
+                </div>
+            <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
     <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="100px" label-position="right" >
     <template v-if="!loading">
         <!-- 具体表单 -->
@@ -80,21 +104,8 @@
     <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                   ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
     </el-row>
-    <span slot="footer" class="dialog-footer">
-                    <div class="upAndDown-button" v-if="dataForm.id">
-                <el-button @click="prev" :disabled='prevDis'>
-                  {{'上一条'}}
-                </el-button>
-                <el-button @click="next" :disabled='nextDis'>
-                  {{'下一条'}}
-                </el-button>
-              </div>
-                <el-button type="primary" @click="dataFormSubmit(2)" :loading="continueBtnLoading">
-            {{!dataForm.id ?'确定并新增':'确定并继续'}}</el-button>
-              <el-button @click="visible = false"> 取 消</el-button>
-              <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
-        </span>
-    </el-dialog>
+    </div>
+    </transition>
     </template>
 
 
@@ -310,6 +321,9 @@
                         this.statusOptions = res.data.list
                     })
                 },
+                goBack() {
+                this.$emit('refresh')
+            },
             clearData(){
                 this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
             },