Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8f94739e by 任超
Options

style:弹框组件

1 parent fce42c95
Inline Side-by-side
Showing 7 changed files with 305 additions and 168 deletions
1 <template>
2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
3 :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" :show-close="false"
4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
5 id="dialogBox">
6 <div slot="title">
7
8 </div>
9 <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }">
10 <slot></slot>
11 </div>
12 <div slot="footer" class="dialog_footer" v-if="isButton">
13 <el-button @click="closeDialog" v-if="isReset">取消</el-button>
14 <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
15 {{ saveButton }}</el-button>
16 </div>
17 </el-dialog>
18 </template>
19 <script>
20 export default {
21 props: {
22 value: { type: Boolean, default: false },
23 isMain: {
24 type: Boolean,
25 default: false
26 },
27 isButton: {
28 type: Boolean,
29 default: true,
30 },
31 width: {
32 type: String,
33 default: '70%',
34 },
35 title: {
36 type: String,
37 default: '',
38 },
39 isFullscreen: {
40 type: Boolean,
41 default: true,
42 },
43 isSave: {
44 type: Boolean,
45 default: true,
46 },
47 saveButton: {
48 type: String,
49 default: '提交',
50 },
51 isReset: {
52 type: Boolean,
53 default: true,
54 },
55 saveloding: {
56 type: Boolean,
57 default: false,
58 },
59 },
60 data () {
61 return {
62 key: 0,
63 dialogVisible: false,
64 fullscreen: false,
65 scrollerHeight: '520px',
66 }
67 },
68 watch: {
69 value (val) {
70 this.dialogVisible = val
71 }
72 },
73 methods: {
74 handleFullscreen (val) {
75 this.fullscreen = !this.fullscreen
76 let height = document.getElementById('dialogBox').clientHeight
77 if (!this.fullscreen) {
78 this.scrollerHeight = false
79 } else {
80 this.scrollerHeight = (window.innerHeight - 180) + 'px'
81 }
82 },
83 submitForm () {
84 this.$emit('submitForm');
85 },
86 closeDialog () {
87 this.key++
88 this.$emit('input', false)
89 this.$emit('closeDialog')
90 }
91 },
92 }
93 </script>
94 <style rel="stylesheet/scss" scoped lang="scss" >
95 @import "~@/styles/mixin.scss";
96 @import "./dialogBox.scss";
97
98 /deep/.el-dialog__header {
99 background-color: #409EFF;
100 }
101 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -16,13 +16,6 @@ ...@@ -16,13 +16,6 @@
16 } 16 }
17 } 17 }
18 18
19 .el-dialog__header {
20 height: 50px;
21 background: #FCFDFD;
22 border-radius: 4px 4px 0 0;
23 position: relative;
24 }
25
26 .dialog_full { 19 .dialog_full {
27 position: absolute; 20 position: absolute;
28 top: 0; 21 top: 0;
...@@ -41,6 +34,37 @@ ...@@ -41,6 +34,37 @@
41 } 34 }
42 } 35 }
43 36
37 .dialog_title {
38 @include flex;
39 justify-content: space-between;
40 width: 100%;
41 }
42
43 .el-dialog__header {
44 margin-bottom: 10px;
45 color: #4A4A4A;
46 }
47
48 .borderBottom {
49 border-bottom: 1px solid #E4EBF4;
50 }
51
52 .el-dialog__body {
53 padding-top: 10px;
54 padding-bottom: 0;
55 }
56
57 .el-dialog__headerbtn .el-dialog__close {
58 color: #6B7A99 !important;
59 position: relative;
60 top: -2px;
61 }
62
63
64 .el-form-item {
65 @include flex;
66 width: 100%;
67 }
44 68
45 .el-dialog__wrapper { 69 .el-dialog__wrapper {
46 width: 100%; 70 width: 100%;
......
1 <template> 1 <template>
2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true" 2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
3 :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" 3 :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox" 4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
5 id="dialogBox"> 5 id="dialogBox">
6 <div slot="title" class="dialog_title" ref="dialogTitle"> 6 <div slot="title">
7 <b>{{ title }}</b> 7 <div class="dialog_title">
8 <div v-if="isFullscreen" class="dialog_full"> 8 <b>{{ title }}</b>
9 <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i> 9 <div v-if="isFullscreen" class="dialog_full">
10 <i class="el-icon-full-screen" v-else @click="handleFullscreen" /> 10 <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
11 <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
12 </div>
11 </div> 13 </div>
12 </div> 14 </div>
13 <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }" :key="key"> 15 <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }">
14 <slot></slot> 16 <slot></slot>
15 </div> 17 </div>
16 <div slot="footer" class="dialog_footer" v-if="isButton"> 18 <div slot="footer" class="dialog_footer" v-if="isButton">
...@@ -74,6 +76,11 @@ export default { ...@@ -74,6 +76,11 @@ export default {
74 this.dialogVisible = val 76 this.dialogVisible = val
75 } 77 }
76 }, 78 },
79 mounted () {
80 var header = document.getElementsByClassName("el-dialog__header")[0].style
81 header.borderBottom = '1px solid #E4EBF4'
82 header.background = '#FCFDFD'
83 },
77 methods: { 84 methods: {
78 handleFullscreen (val) { 85 handleFullscreen (val) {
79 this.fullscreen = !this.fullscreen 86 this.fullscreen = !this.fullscreen
...@@ -90,7 +97,7 @@ export default { ...@@ -90,7 +97,7 @@ export default {
90 closeDialog () { 97 closeDialog () {
91 this.key++ 98 this.key++
92 this.$emit('input', false) 99 this.$emit('input', false)
93 this.$emit('closeDialog'); 100 this.$emit('closeDialog')
94 } 101 }
95 }, 102 },
96 } 103 }
......
1 .dialog_title {
2 @include flex;
3 justify-content: space-between;
4 width: 100%;
5 }
6
7 .el-dialog__header {
8 margin-bottom: 10px;
9 color: #4A4A4A;
10 border-bottom: 1px solid #E4EBF4;
11 }
12
13 .el-dialog__body {
14 padding-top: 10px;
15 padding-bottom: 0;
16 }
17
18 .el-dialog__headerbtn .el-dialog__close {
19 color: #6B7A99 !important;
20 position: relative;
21 top: -2px;
22 }
23
24
25 .el-form-item {
26 @include flex;
27 width: 100%;
28 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
3 @import './transition.scss'; 3 @import './transition.scss';
4 @import './element-ui.scss'; 4 @import './element-ui.scss';
5 @import './sidebar.scss'; 5 @import './sidebar.scss';
6 @import './dialog.scss';
7 @import './btn.scss'; 6 @import './btn.scss';
8 7
9 /* CSS 初始化 */ 8 /* CSS 初始化 */
......
1 <template>
2 <cusDialogBox @closeDialog="closeDialog" width="80%" v-model="value">
3 <template #header>
4 <div class="header">
5 <ul class="header-left">
6 <li>
7 图形定位
8 </li>
9 <li>
10 登记薄
11 </li>
12 <li>
13 证书预览
14 </li>
15 <li>
16 流程图
17 </li>
18 <li>
19 材料导入
20 </li>
21 <li>
22 打印申请书
23 </li>
24 </ul>
25
26 <ul class="header-right">
27 <li>
28 登簿
29 </li>
30 <li>
31 退回
32 </li>
33 <li>
34 转出
35 </li>
36 </ul>
37 </div>
38
39 </template>
40 </cusDialogBox>
41 </template>
42
43 <script>
44 import cusDialogBox from '@/components/DialogBox/cusDialogBox'
45 export default {
46 props: {
47 value: { type: Boolean, default: false },
48 },
49 components: {
50 cusDialogBox
51 },
52 data () {
53 return {
54 applicationDialog: false,
55 }
56 },
57 methods: {
58 closeDialog () {
59 this.$emit('input', false)
60 }
61 }
62 }
63 </script>
64 <style scoped lang="scss">
65 @import "~@/styles/mixin.scss";
66
67 .header {
68 @include flex;
69 justify-content: space-between;
70
71 ul {
72 @include flex;
73
74 li {
75 margin-right: 20px;
76 }
77 }
78 }
79 </style>
1 <template> 1 <template>
2 <dialogBox title="查询权利信息" @submitForm="submitForm" @closeDialog="closeDialog" v-model="value"> 2 <div>
3 <div class="from-clues"> 3 <dialogBox title="查询权利信息" @submitForm="submitForm" saveButton="发起申请" width="80%" @closeDialog="closeDialog"
4 <!-- 表单部分 --> 4 v-model="value">
5 <div class="from-clues-header"> 5 <div class="from-clues">
6 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 6 <!-- 表单部分 -->
7 <el-row> 7 <div class="from-clues-header">
8 <el-col :span="8"> 8 <el-form :model="queryForm" ref="queryForm" label-width="100px">
9 <el-form-item label="权利类型"> 9 <el-row>
10 <el-select 10 <el-col :span="6">
11 v-model="queryForm.qllx" 11 <el-form-item label="权利类型">
12 filterable 12 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
13 clearable 13 <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
14 placeholder="请选择权利类型" 14 </el-option>
15 > 15 </el-select>
16 <el-option 16 </el-form-item>
17 v-for="item in qllxs" 17 </el-col>
18 :key="item.value" 18 <el-col :span="6">
19 :label="item.label" 19 <el-form-item label="不动产单元号">
20 :value="item.value" 20 <el-input placeholder="请输入不动产单元号" v-model="queryForm.dyh" clearable class="width200px">
21 > 21 </el-input>
22 </el-option> 22 </el-form-item>
23 </el-select> 23 </el-col>
24 </el-form-item> 24 <el-col :span="6">
25 </el-col> 25 <el-form-item label="业务号">
26 <el-col :span="8"> 26 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
27 <el-form-item label="不动产单元号"> 27 </el-input>
28 <el-input 28 </el-form-item>
29 placeholder="请输入不动产单元号" 29 </el-col>
30 v-model="queryForm.dyh"
31 clearable
32 class="width200px"
33 >
34 </el-input>
35 </el-form-item>
36 </el-col>
37 <el-col :span="8">
38 <el-form-item label="业务号">
39 <el-input
40 placeholder="请输入业务号"
41 v-model="queryForm.ywh"
42 clearable
43 class="width200px"
44 >
45 </el-input>
46 </el-form-item>
47 </el-col>
48 </el-row> 30 </el-row>
49 <el-row> 31 <el-row>
50 <el-col :span="8"> 32 <el-col :span="6">
51 <el-form-item label="不动产权证号"> 33 <el-form-item label="不动产权证号">
52 <el-input 34 <el-input placeholder="请输入不动产权证号" v-model="queryForm.cqzh" clearable class="width200px">
53 placeholder="请输入不动产权证号" 35 </el-input>
54 v-model="queryForm.cqzh" 36 </el-form-item>
55 clearable 37 </el-col>
56 class="width200px" 38 <el-col :span="16" class="btnCol">
57 > 39 <el-form-item>
58 </el-input> 40 <el-button type="primary" @click="queryClick()">查询</el-button>
59 </el-form-item> 41 </el-form-item>
60 </el-col> 42 </el-col>
61 <el-col :span="16" class="btnCol"> 43 </el-row>
62 <el-form-item> 44 </el-form>
63 <el-button type="primary" @click="queryClick()">查询</el-button> 45 </div>
64 </el-form-item> 46 <!-- 表格 -->
65 </el-col> 47 <div class="from-clues-content">
66 </el-row> 48 <lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current"
67 </el-form> 49 :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
68 </div> 50 :column="tableData.columns" :data="tableData.data">
69 <!-- 表格 --> 51 </lb-table>
70 <div class="from-clues-content"> 52 </div>
71 <lb-table
72 :page-size="pageData.size"
73 :current-page.sync="pageData.current"
74 :total="pageData.total"
75 @selection-change="handleSelectionChange"
76 @size-change="handleSizeChange"
77 @p-current-change="handleCurrentChange"
78 :column="tableData.columns"
79 :data="tableData.data"
80 >
81 </lb-table>
82 </div> 53 </div>
83 </div> 54 </dialogBox>
84 </dialogBox> 55 <applicationDialog v-model="appliDialog" />
56 </div>
57
85 </template> 58 </template>
86 59
87 <script> 60 <script>
88 import { datas } from "../ywsqdata.js"; 61 import { datas } from "../ywsqdata.js";
62 import applicationDialog from '../../components/applicationDialog.vue'
89 export default { 63 export default {
90 components: { 64 components: {
65 applicationDialog
91 }, 66 },
92 props: { 67 props: {
93 value: { type: Boolean, default: false }, 68 value: { type: Boolean, default: false },
94 }, 69 },
95 data () { 70 data () {
96 return { 71 return {
72 appliDialog: false,
97 queryForm: { 73 queryForm: {
98 qllx:"", 74 qllx: "",
99 dyh:"", 75 dyh: "",
100 ywh:"", 76 ywh: "",
101 cqzh:"", 77 cqzh: "",
102 }, 78 },
103 qllxs:[], 79 qllxs: [],
104 pageData: { 80 pageData: {
105 current: 1, 81 current: 1,
106 size: 10, 82 size: 10,
...@@ -110,53 +86,30 @@ export default { ...@@ -110,53 +86,30 @@ export default {
110 columns: datas.columns(), 86 columns: datas.columns(),
111 data: [ 87 data: [
112 { 88 {
113 status:'已查封', 89 status: '已查封',
114 qllx:"国有建设用地使用权", 90 qllx: "国有建设用地使用权",
115 zddm:"610100008004GB00001", 91 zddm: "610100008004GB00001",
116 bdcdyh:"610100008004GB00001W00000000", 92 bdcdyh: "610100008004GB00001W00000000",
117 qlxz:"出让", 93 qlxz: "出让",
118 zdmj:'22384.1700', 94 zdmj: '22384.1700',
119 qlsdfs:'地表', 95 qlsdfs: '地表',
120 tdyt:"商业、住宅用地", 96 tdyt: "商业、住宅用地",
121 zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧", 97 zl: "汉台区汉中路街道办事处汉中路居委会太白路北侧",
122 }, 98 }
123 { 99 ]
124 status:'已查封', 100 }
125 qllx:"国有建设用地使用权",
126 zddm:"610100008004GB00001",
127 bdcdyh:"610100008004GB00001W00000000",
128 qlxz:"出让",
129 zdmj:'22384.1700',
130 qlsdfs:'地表',
131 tdyt:"商业、住宅用地",
132 zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
133 },
134 {
135 status:'已查封',
136 qllx:"国有建设用地使用权",
137 zddm:"610100008004GB00001",
138 bdcdyh:"610100008004GB00001W00000000",
139 qlxz:"出让",
140 zdmj:'22384.1700',
141 qlsdfs:'地表',
142 tdyt:"商业、住宅用地",
143 zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
144 },
145 ],
146 },
147 } 101 }
148 }, 102 },
149 methods: { 103 methods: {
150
151 submitForm () { 104 submitForm () {
152 this.$emit('input', false) 105 this.$emit('input', false)
106 this.appliDialog = true
153 }, 107 },
154 closeDialog () { 108 closeDialog () {
155 this.$emit('input', false) 109 this.$emit('input', false)
156 }, 110 },
157 handleSelectionChange(){}, 111 handleSizeChange () { },
158 handleSizeChange(){}, 112 handleCurrentChange () { },
159 handleCurrentChange(){},
160 } 113 }
161 } 114 }
162 </script> 115 </script>
...@@ -168,9 +121,11 @@ export default { ...@@ -168,9 +121,11 @@ export default {
168 border-bottom: 1px solid $borderColor; 121 border-bottom: 1px solid $borderColor;
169 margin-bottom: 10px; 122 margin-bottom: 10px;
170 } 123 }
171 /deep/.el-input{ 124
125 /deep/.el-input {
172 width: 187px; 126 width: 187px;
173 } 127 }
128
174 ul { 129 ul {
175 @include flex; 130 @include flex;
176 border-radius: 5px; 131 border-radius: 5px;
......