mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
优化
This commit is contained in:
dengfuchuan
parent
4c22e42513
commit
8f72fa7fb7
@ -1,102 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper">
|
<div :class="classObj" class="app-wrapper">
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||||
<sidebar class="sidebar-container" />
|
<sidebar class="sidebar-container" />
|
||||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
<div :class="{'fixed-header':fixedHeader}">
|
||||||
<navbar />
|
<navbar />
|
||||||
<tags-view v-if="needTagsView" />
|
<tags-view v-if="needTagsView" />
|
||||||
</div>
|
</div>
|
||||||
<app-main />
|
<app-main />
|
||||||
<right-panel v-if="showSettings">
|
<right-panel v-if="showSettings">
|
||||||
<settings />
|
<settings />
|
||||||
</right-panel>
|
</right-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RightPanel from '@/components/RightPanel'
|
import RightPanel from '@/components/RightPanel'
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
import ResizeMixin from './mixin/ResizeHandler'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Layout',
|
name: 'Layout',
|
||||||
components: {
|
components: {
|
||||||
AppMain,
|
AppMain,
|
||||||
Navbar,
|
Navbar,
|
||||||
RightPanel,
|
RightPanel,
|
||||||
Settings,
|
Settings,
|
||||||
Sidebar,
|
Sidebar,
|
||||||
TagsView
|
TagsView
|
||||||
},
|
},
|
||||||
mixins: [ResizeMixin],
|
mixins: [ResizeMixin],
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
sidebar: state => state.app.sidebar,
|
sidebar: state => state.app.sidebar,
|
||||||
device: state => state.app.device,
|
device: state => state.app.device,
|
||||||
showSettings: state => state.settings.showSettings,
|
showSettings: state => state.settings.showSettings,
|
||||||
needTagsView: state => state.settings.tagsView,
|
needTagsView: state => state.settings.tagsView,
|
||||||
fixedHeader: state => state.settings.fixedHeader
|
fixedHeader: state => state.settings.fixedHeader
|
||||||
}),
|
}),
|
||||||
classObj() {
|
classObj() {
|
||||||
return {
|
return {
|
||||||
hideSidebar: !this.sidebar.opened,
|
hideSidebar: !this.sidebar.opened,
|
||||||
openSidebar: this.sidebar.opened,
|
openSidebar: this.sidebar.opened,
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
mobile: this.device === 'mobile'
|
mobile: this.device === 'mobile'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClickOutside() {
|
handleClickOutside() {
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/styles/mixin.scss";
|
@import "~@/styles/mixin.scss";
|
||||||
@import "~@/styles/variables.scss";
|
@import "~@/styles/variables.scss";
|
||||||
|
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.mobile.openSidebar {
|
&.mobile.openSidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-bg {
|
.drawer-bg {
|
||||||
background: #000;
|
background: #000;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-header {
|
.fixed-header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: calc(100% - #{$sideBarWidth});
|
width: calc(100% - #{$sideBarWidth});
|
||||||
transition: width 0.28s;
|
transition: width 0.28s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
.hideSidebar .fixed-header {
|
||||||
width: calc(100% - 54px)
|
width: calc(100% - 54px)
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile .fixed-header {
|
.mobile .fixed-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,7 +2,15 @@
|
|||||||
<div>
|
<div>
|
||||||
<el-card>
|
<el-card>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<buttons funid="safe_insp" style="margin-bottom:20px" @save="save" />
|
<div class="buttons">
|
||||||
|
<el-button type="primary" @click="create">新增</el-button>
|
||||||
|
<el-button type="primary" @click="del">删除</el-button>
|
||||||
|
<el-button type="primary" @click="save">保存</el-button>
|
||||||
|
<el-button type="primary" @click="audit">提交</el-button>
|
||||||
|
<el-button type="primary" @click="unaudit">反提交</el-button>
|
||||||
|
<el-button type="primary" @click="upload">图文附件</el-button>
|
||||||
|
<el-button type="primary" @click="back">返回列表</el-button>
|
||||||
|
</div>
|
||||||
<el-button type="primary" @click="back">返回列表</el-button>
|
<el-button type="primary" @click="back">返回列表</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
||||||
@ -122,14 +130,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import api from '../../api'
|
import api from '../../api'
|
||||||
import publicApi from '@/api/public'
|
import publicApi from '@/api/public'
|
||||||
import buttons from '@/components/formBtn'
|
|
||||||
import InspDet from '../insp_det'
|
import InspDet from '../insp_det'
|
||||||
import SelUser from '@/components/selUser'
|
import SelUser from '@/components/selUser'
|
||||||
import InspName from '../inspName'
|
import InspName from '../inspName'
|
||||||
export default {
|
export default {
|
||||||
name: 'AuditForm',
|
name: 'AuditForm',
|
||||||
components: {
|
components: {
|
||||||
buttons,
|
|
||||||
SelUser,
|
SelUser,
|
||||||
InspDet,
|
InspDet,
|
||||||
InspName
|
InspName
|
||||||
@ -294,6 +300,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-bottom:20px;
|
||||||
.el-button--primary {
|
.el-button--primary {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
height: 26.8px;
|
height: 26.8px;
|
||||||
|
|||||||
@ -14,12 +14,12 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="7">
|
<el-col :span="7">
|
||||||
<el-form-item label="巡检单编号">
|
<el-form-item label="巡检单编号">
|
||||||
<el-input v-model="form.safe_insp__insp_code" />
|
<el-input v-model="form.safe_insp__insp_code" disabled />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="7">
|
<el-col :span="7">
|
||||||
<el-form-item label="巡检状态">
|
<el-form-item label="巡检状态">
|
||||||
<el-select v-model="form.safe_insp__insp_state" placeholder="请选择">
|
<el-select v-model="form.safe_insp__insp_state" disabled placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.funall_control__value_data"
|
:key="item.funall_control__value_data"
|
||||||
@ -96,7 +96,8 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
<InspDet :id="id" />
|
<InspDet :id="id" @updateList="getList" />
|
||||||
|
<InspDet :id="id" @updateList="getList" />
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-if="selUserVisible"
|
v-if="selUserVisible"
|
||||||
title="选择人员"
|
title="选择人员"
|
||||||
|
|||||||
@ -268,6 +268,7 @@ export default {
|
|||||||
this.dialogFormVisible = false
|
this.dialogFormVisible = false
|
||||||
this.$refs['form'].resetFields()
|
this.$refs['form'].resetFields()
|
||||||
this.$message.success('保存成功！')
|
this.$message.success('保存成功！')
|
||||||
|
this.$emit('updateList')
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(data.message)
|
this.$message.error(data.message)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user