Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4d6dfe6f by 吴蕾
Options

登记簿弹窗样式编写

1 parent 32b9f044
Inline Side-by-side
Showing 14 changed files with 1017 additions and 19 deletions
1 import dialogBox from '@/components/DialogBox/dialogBox.vue' 1 import dialogBox from '@/components/dialogBox/dialogBox.vue'
2 import lbTable from '@/components/lb-table/lb-table.vue' 2 import lbTable from '@/components/lb-table/lb-table.vue'
3 import Theme from '@/components/Theme/theme.vue' 3 import Theme from '@/components/Theme/theme.vue'
4 export default { 4 export default {
......
1 <template>
2 <div class="bdcqldjml">
3 <table class="mlTable">
4 <tr>
5 <th colspan="5" class="title">
6 不动产权利登记目录
7 <font class="num">第 1 页</font>
8 </th>
9 </tr>
10 <tr>
11 <td>序号</td>
12 <td>不动产单元号</td>
13 <td>不动产类型</td>
14 <td>所在本数</td>
15 <td>备注</td>
16 </tr>
17 <tr v-for="(item, index) in data" :key="index">
18 <td>{{ index + 1 }}</td>
19 <td>{{ item.bdcdyh }}</td>
20 <td>{{ item.bdclx }}</td>
21 <td>{{ item.szbs }}</td>
22 <td>{{ item.bz }}</td>
23 </tr>
24 </table>
25 </div>
26 </template>
27
28 <script>
29 export default {
30 name: "bdcqldjml",
31 data() {
32 return {
33 data: [
34 {
35 bdcdyh: "370205004005GB10030W00000000",
36 bdclx: "土地",
37 szbs: "1",
38 bz: "",
39 },
40 {
41 bdcdyh: "370205004005GB10030W00000000",
42 bdclx: "土地",
43 szbs: "1",
44 bz: "",
45 },
46 {
47 bdcdyh: "370205004005GB10030W00000000",
48 bdclx: "土地",
49 szbs: "1",
50 bz: "",
51 },
52 {
53 bdcdyh: "370205004005GB10030W00000000",
54 bdclx: "土地",
55 szbs: "1",
56 bz: "",
57 },
58 {
59 bdcdyh: "370205004005GB10030W00000000",
60 bdclx: "土地",
61 szbs: "1",
62 bz: "",
63 },
64 {
65 bdcdyh: "370205004005GB10030W00000000",
66 bdclx: "土地",
67 szbs: "1",
68 bz: "",
69 },
70 {
71 bdcdyh: "370205004005GB10030W00000000",
72 bdclx: "土地",
73 szbs: "1",
74 bz: "",
75 },
76 {
77 bdcdyh: "370205004005GB10030W00000000",
78 bdclx: "土地",
79 szbs: "1",
80 bz: "",
81 },
82 {
83 bdcdyh: "370205004005GB10030W00000000",
84 bdclx: "土地",
85 szbs: "1",
86 bz: "",
87 },
88 {
89 bdcdyh: "370205004005GB10030W00000000",
90 bdclx: "土地",
91 szbs: "1",
92 bz: "",
93 },
94 {
95 bdcdyh: "370205004005GB10030W00000000",
96 bdclx: "土地",
97 szbs: "1",
98 bz: "",
99 },
100 {
101 bdcdyh: "370205004005GB10030W00000000",
102 bdclx: "土地",
103 szbs: "1",
104 bz: "",
105 },
106 {
107 bdcdyh: "370205004005GB10030W00000000",
108 bdclx: "土地",
109 szbs: "1",
110 bz: "",
111 },
112 {
113 bdcdyh: "370205004005GB10030W00000000",
114 bdclx: "土地",
115 szbs: "1",
116 bz: "",
117 },
118 {
119 bdcdyh: "370205004005GB10030W00000000",
120 bdclx: "土地",
121 szbs: "1",
122 bz: "",
123 },
124 {
125 bdcdyh: "370205004005GB10030W00000000",
126 bdclx: "土地",
127 szbs: "1",
128 bz: "",
129 },
130 ],
131 };
132 },
133 };
134 </script>
135
136 <style lang="scss" scoped>
137 .bdcqldjml {
138 width: 100%;
139 height: 702px;
140 background: #fff;
141 overflow-y: scroll;
142 .mlTable {
143 width: 640px;
144 margin: 0 auto;
145 color: #333;
146 border-spacing: 2px;
147 background-color: #333;
148
149 .title {
150 font-size: 28px;
151 line-height: 60px;
152 font-family: serif;
153 position: relative;
154
155 .num {
156 position: absolute;
157 font-size: 12px;
158 right: 20px;
159 font-family: initial;
160 font-weight: normal;
161 }
162 }
163
164 td,
165 th {
166 background-color: white;
167 line-height: 40px;
168 padding: 0 4px;
169 text-align: center;
170 }
171 }
172 }
173 </style>
1 <template>
2 <div class="bdcqljqtsx">
3 <div class="content">
4 <div class="title">不动产权利及其他事项<br />登记信息</div>
5 <div>
6 不动产单元号:
7 <div class="underline">440300 002109 GB00004 F00020001</div>
8 </div>
9 <br /><br /><br />
10 <div>
11 <div class="underline">国有建设用地使用权和房屋所有权</div>
12 登记 共
13 <div class="underline">9</div>
14 条
15 </div><br /><br />
16 <div>
17 抵押权登记 共
18 <div class="underline">3</div>
19 条
20 </div><br />
21 <div>
22 地役权登记 共
23 <div class="underline">3</div>
24 条
25 </div><br />
26 <div>
27 预告登记 共
28 <div class="underline">3</div>
29 条
30 </div><br />
31 <div>
32 异议登记 共
33 <div class="underline">3</div>
34 条
35 </div><br />
36 <div>
37 查封登记 共
38 <div class="underline">3</div>
39 条
40 </div>
41 <br />
42 </div>
43 </div>
44 </template>
45
46 <script>
47 export default {
48 name: "bdcqljqtsx",
49 data() {
50 return {};
51 },
52 };
53 </script>
54
55 <style lang="scss" scoped>
56 .bdcqljqtsx {
57 width: 100%;
58 height: 100%;
59 background: #fff;
60 .content {
61 width: 50%;
62 height: 100%;
63 margin: 0 auto;
64 text-align: right;
65 color: #333;
66 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
67 font-weight: 700;
68 font-size: 18px;
69 line-height: 16px;
70 .title {
71 font-size: 32px;
72 text-align: center;
73 padding: 40px 0;
74 line-height: 34px;
75 }
76 .underline {
77 font-size: 14px;
78 font-weight: normal;
79 text-decoration: underline;
80 display: inline-block;
81 }
82 }
83 }
84 </style>
1 <template>
2 <div>查封登记</div>
3 </template>
4
5 <script>
6 export default {
7 name: "cfdj",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div class="djbfm">
3 <br /><br />
4 <p>
5 <font>{{ data.province }}</font>
6 省 (区、市)
7 <font>{{ data.city }}</font>
8 市 (区)
9 <font>{{ data.area }}</font>
10 区 (县、市)
11 </p>
12 <p>
13 <font>{{ data.street }}</font>
14 街道 (乡、镇)
15 <font>{{ data.village }}</font>
16 街坊 (村)
17 <font style="width: 100px">{{ data.group }}</font>
18 组
19 </p>
20 <div class="title">不动产登记簿</div>
21 <br>
22 <p>
23 宗地/宗海号:
24 <font>{{ data.zdzhh }}</font>
25 </p>
26 <div class="bottom">
27 <p>
28 登记机构:
29 <font>{{ data.registration }}</font>
30 </p>
31 </div>
32 </div>
33 </template>
34
35 <script>
36 export default {
37 name: "djbfm",
38 data() {
39 return {
40 data: {
41 province: "A",
42 city: "B",
43 area: "C",
44 street: "兴隆路",
45 village: "兴隆",
46 group: "",
47 zdzhh: "370205004005GB10030",
48 registration: "B市国土资源局",
49 },
50 };
51 },
52 };
53 </script>
54
55 <style lang="scss" scoped>
56 .djbfm {
57 width: 100%;
58 height: 100%;
59 background: #fff;
60 border-right: 1px solid #ccc;
61 line-height: 45px;
62 text-align: center;
63 font-size: 18px;
64 font-family: serif;
65 position: relative;
66 p {
67 }
68 font {
69 border-bottom: 1px solid #000;
70 display: inline-block;
71 padding: 0 15px;
72 line-height: 16px;
73 }
74 .title {
75 height: 40%;
76 display: flex;
77 font-size: 38px;
78 color: #000;
79 justify-content: center;
80 align-items: center;
81 }
82 .bottom {
83 position: absolute;
84 bottom: 0px;
85 text-align: center;
86 width: 100%;
87 left: 0;
88 height: 100px;
89 line-height: 100px;
90 p {
91 font-size: 28px;
92 }
93 font {
94 font-size: 24px;
95 line-height: 24px;
96 }
97 }
98 }
99 </style>
1 <template>
2 <dialogBox
3 title="登记簿信息"
4 width="1200px"
5 @closeDialog="closeDialog"
6 v-model="value"
7 :isReset="false"
8 :isSave="false"
9 >
10 <div class="content">
11 <div class="left">
12 <el-tree
13 :data="treedata"
14 :props="defaultProps"
15 @node-click="handleNodeClick"
16 :default-expand-all="true"
17 :expand-on-click-node="false"
18 node-key="id"
19 :default-checked-keys="[showTab]"
20 ></el-tree>
21 </div>
22 <div class="right">
23 <components :is="showTab"></components>
24 </div>
25 </div>
26 </dialogBox>
27 </template>
28 <script>
29 import djbfm from "./djbfm.vue";
30 import zdxx from "./zdxx.vue";
31 import bdcqldjml from "./bdcqldjml.vue";
32 import bdcqljqtsx from "./bdcqljqtsx.vue";
33 import gyjsydsyq from "./gyjsydsyq.vue";
34 import dyaq from "./dyaq.vue";
35 import dyiq from "./dyiq.vue";
36 import ygdj from "./ygdj.vue";
37 import yydj from "./yydj.vue";
38 import cfdj from "./cfdj.vue";
39
40 export default {
41 name: "djbxxDialog",
42 components: {
43 djbfm,
44 zdxx,
45 bdcqldjml,
46 bdcqljqtsx,
47 gyjsydsyq,
48 dyaq,
49 dyiq,
50 ygdj,
51 yydj,
52 cfdj,
53 },
54 props: {
55 value: { type: Boolean, default: false },
56 },
57 data() {
58 return {
59 treedata: [
60 {
61 id: "djbfm",
62 label: "登记簿封面",
63 children: [
64 {
65 id: "zdxx",
66 label: "宗地信息",
67 },
68 {
69 id: "bdcqldjml",
70 label: "不动产权利登记目录",
71 children: [
72 {
73 id: "bdcqljqtsx",
74 label: "不动产权利及其他事项",
75 children: [
76 {
77 id: "gyjsydsyq",
78 label: "国有建设用地使用权(临:0，现:0，历:0)",
79 },
80 {
81 id: "dyaq",
82 label: "抵押权(临:0，现:0，历:0)",
83 },
84 {
85 id: "dyiq",
86 label: "地役权(临:0，现:0，历:0)",
87 },
88 {
89 id: "ygdj",
90 label: "预告登记(临:0，现:0，历:0)",
91 },
92 {
93 id: "yydj",
94 label: "异议登记(临:0，现:0，历:0)",
95 },
96 {
97 id: "cfdj",
98 label: "查封登记(临:0，现:0，历:0)",
99 },
100 ],
101 },
102 ],
103 },
104 ],
105 },
106 ],
107 defaultProps: {
108 children: "children",
109 label: "label",
110 },
111 showTab: "bdcqljqtsx", // 选中状态,根据表格中权利类型判断
112 };
113 },
114
115 methods: {
116 submitForm() {
117 this.$emit("input", false);
118 },
119 closeDialog() {
120 this.$emit("input", false);
121 },
122 handleNodeClick(data) {
123 console.log("1111111111", data);
124 this.showTab = data.id;
125 },
126 },
127 };
128 </script>
129 <style scoped lang="scss">
130 .content {
131 width: 100%;
132 height: 100%;
133 display: flex;
134 .left {
135 width: 256px;
136 height: 704px;
137 background-color: #f5f5f5;
138 color: #333;
139 border: 1px solid rgb(228, 228, 228);
140 }
141 .right {
142 width: calc(100% - 256px);
143 height: 704px;
144 overflow-y: scroll;
145 background-color: #f5f5f5;
146 }
147 }
148
149 /deep/ .expanded.el-tree-node__expand-icon,
150 /deep/ .el-tree-node__expand-icon {
151 visibility: hidden;
152 }
153 /deep/ .el-tree-node__content {
154 border: 1px solid rgb(228, 228, 228);
155 height: 45px;
156 }
157 /deep/ .el-tree-node:focus > .el-tree-node__content {
158 background-color: #f5f5f5;
159 color: #0079fe;
160 border-right: 4px solid #0079fe;
161 }
162 /deep/.el-tree-node {
163 white-space: pre-wrap;
164 }
165 </style>
1 <template>
2 <div>抵押权</div>
3 </template>
4
5 <script>
6 export default {
7 name: "dyaq",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div>地役权</div>
3 </template>
4
5 <script>
6 export default {
7 name: "dyiq",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div>国有建设用地使用权</div>
3 </template>
4
5 <script>
6 export default {
7 name: "gyjsydsyq",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div>预告登记</div>
3 </template>
4
5 <script>
6 export default {
7 name: "ygdj",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div>异议登记</div>
3 </template>
4
5 <script>
6 export default {
7 name: "yydj",
8 data() {
9 return {};
10 },
11 };
12 </script>
13
14 <style lang="scss" scoped>
15 </style>
1 <template>
2 <div class="zdxx">
3 <div class="tablebox">
4 <table cellpadding="0" cellspacing="0" class="zdxxTable">
5 <col width="80" />
6 <col width="60" />
7 <col width="90" />
8 <col width="235" />
9 <col width="150" />
10 <tr>
11 <td colspan="6" class="title">宗地基本信息</td>
12 </tr>
13 <tr>
14 <td colspan="6" class="unit">单位：■平方米 □公顷（□亩）、万元</td>
15 </tr>
16 <tr>
17 <td colspan="2">不动产类型</td>
18 <td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
19 </tr>
20 <tr>
21 <td colspan="2">坐落</td>
22 <td colspan="4"></td>
23 </tr>
24 <tr>
25 <td rowspan="8" class="title2">土地状况</td>
26 </tr>
27 <tr>
28 <td colspan="2">宗地面积</td>
29 <td></td>
30 <td>用途</td>
31 <td></td>
32 </tr>
33 <tr>
34 <td colspan="2">等级</td>
35 <td></td>
36 <td>价格</td>
37 <td></td>
38 </tr>
39 <tr>
40 <td colspan="2">权利类型</td>
41 <td></td>
42 <td>权利性质</td>
43 <td></td>
44 </tr>
45 <tr>
46 <td colspan="2">权利设定方式</td>
47 <td></td>
48 <td>容积率</td>
49 <td></td>
50 </tr>
51 <tr>
52 <td colspan="2">建筑密度</td>
53 <td></td>
54 <td>建筑限高</td>
55 <td></td>
56 </tr>
57 <tr>
58 <td colspan="2">图幅号</td>
59 <td></td>
60 <td>地籍号</td>
61 <td></td>
62 </tr>
63 <tr>
64 <td colspan="2">档案号</td>
65 <td></td>
66 <td>地块代码</td>
67 <td></td>
68 </tr>
69 <tr>
70 <td colspan="2">宗地四至-东</td>
71 <td colspan="4"></td>
72 </tr>
73 <tr>
74 <td colspan="2">宗地四至-南</td>
75 <td colspan="4"></td>
76 </tr>
77 <tr>
78 <td colspan="2">宗地四至-西</td>
79 <td colspan="4"></td>
80 </tr>
81 <tr>
82 <td colspan="2">宗地四至-北</td>
83 <td colspan="4"></td>
84 </tr>
85 <tr>
86 <td class="title2" height="96">备注</td>
87 <td colspan="5"></td>
88 </tr>
89 <tr>
90 <td class="title2" height="96">附记</td>
91 <td colspan="5"></td>
92 </tr>
93 <tr>
94 <td colspan="2">状态</td>
95 <td colspan="2"></td>
96 <td>区县代码</td>
97 <td></td>
98 </tr>
99 <tr>
100 <td class="title2">变化情况</td>
101 <td colspan="5" class="bhqk">
102 <div class="box">
103 <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
104 <tr>
105 <td class="bhqkTh">上手业务号</td>
106 <td>20191230048</td>
107 <td>20191230048</td>
108 <td>20191230048</td>
109 <td>20191230048</td>
110 <td>20191230048</td>
111 </tr>
112 <tr>
113 <td class="bhqkTh">宗地代码</td>
114 <td>610100008004GB00001</td>
115 <td>610100008004GB00001</td>
116 <td>610100008004GB00001</td>
117 <td>610100008004GB00001</td>
118 <td>610100008004GB00001</td>
119 </tr>
120 <tr>
121 <td class="bhqkTh">变化前宗地代码</td>
122 <td>610100008004GB00001</td>
123 <td>610100008004GB00001</td>
124 <td>610100008004GB00001</td>
125 <td>610100008004GB00001</td>
126 <td>610100008004GB00001</td>
127 </tr>
128 <tr>
129 <td class="bhqkTh">变化内容</td>
130 <td>土地面积1000改为2000</td>
131 <td>土地面积1000改为2000</td>
132 <td>土地面积1000改为2000</td>
133 <td>土地面积1000改为2000</td>
134 <td>土地面积1000改为2000</td>
135 </tr>
136 <tr>
137 <td class="bhqkTh">变化原因</td>
138 <td>因某某原因</td>
139 <td>因某某原因</td>
140 <td>因某某原因</td>
141 <td>因某某原因</td>
142 <td>因某某原因</td>
143 </tr>
144 <tr>
145 <td class="bhqkTh">登记时间</td>
146 <td>2008年3月11日</td>
147 <td>2008年3月11日</td>
148 <td>2008年3月11日</td>
149 <td>2008年3月11日</td>
150 <td>2008年3月11日</td>
151 </tr>
152 <tr>
153 <td class="bhqkTh">登簿人</td>
154 <td>路**</td>
155 <td>路**</td>
156 <td>路**</td>
157 <td>路**</td>
158 <td>路**</td>
159 </tr>
160 <tr>
161 <td class="bhqkTh">附记</td>
162 <td>2014年10月21日办理房屋首次登记"</td>
163 <td>2014年10月21日办理房屋首次登记"</td>
164 <td>2014年10月21日办理房屋首次登记"</td>
165 <td>2014年10月21日办理房屋首次登记"</td>
166 <td>2014年10月21日办理房屋首次登记"</td>
167 </tr>
168 </table>
169 </div>
170 </td>
171 </tr>
172 </table>
173 </div>
174 </div>
175 </template>
176
177 <script>
178 export default {
179 name: "zdxx",
180 data() {
181 return {
182 bhqkColumns: [
183 "上手业务号",
184 "宗地代码",
185 "变化前宗地代码",
186 "变化内容",
187 "变化原因",
188 "登记时间",
189 "登簿人",
190 "附记",
191 ],
192 bhqkData: [
193 {
194 ssywh: "20191230048",
195 zddm: "610100008004GB00001",
196 bhqzddm: "610100008004GB00001",
197 bhnr: "土地面积1000改为2000",
198 bhyy: "因某某原因",
199 djsj: "2008年3月11日",
200 dbr: "路**",
201 fj: "2014年10月21日办理房屋首次登记",
202 },
203 {
204 ssywh: "20191230048",
205 zddm: "610100008004GB00001",
206 bhqzddm: "610100008004GB00001",
207 bhnr: "土地面积1000改为2000",
208 bhyy: "因某某原因",
209 djsj: "2008年3月11日",
210 dbr: "路**",
211 fj: "2014年10月21日办理房屋首次登记",
212 },
213 {
214 ssywh: "20191230048",
215 zddm: "610100008004GB00001",
216 bhqzddm: "610100008004GB00001",
217 bhnr: "土地面积1000改为2000",
218 bhyy: "因某某原因",
219 djsj: "2008年3月11日",
220 dbr: "路**",
221 fj: "2014年10月21日办理房屋首次登记",
222 },
223 {
224 ssywh: "20191230048",
225 zddm: "610100008004GB00001",
226 bhqzddm: "610100008004GB00001",
227 bhnr: "土地面积1000改为2000",
228 bhyy: "因某某原因",
229 djsj: "2008年3月11日",
230 dbr: "路**",
231 fj: "2014年10月21日办理房屋首次登记",
232 },
233 ],
234 bhqkTableWidth: 744,
235 };
236 },
237 mounted() {
238 this.bhqkTableWidth = (this.bhqkData.length + 1) * 180 + 110;
239 },
240 };
241 </script>
242
243 <style lang="scss" scoped>
244 .zdxx {
245 width: 100%;
246 height: 100%;
247 background-color: #f5f5f5;
248 padding: 10px 25px;
249 .tablebox {
250 width: 100%;
251 height: 100%;
252 background: #fff;
253 border: 1px solid rgb(228, 228, 228);
254 text-align: center;
255 padding: 4px;
256 overflow-y: scroll;
257 .zdxxTable {
258 width: 100%;
259 color: #333;
260 td {
261 border: 1px solid rgb(228, 228, 228);
262 line-height: 30px;
263 padding: 0 4px;
264 }
265 .title {
266 line-height: 68px;
267 font-size: 20px;
268 }
269 .unit {
270 text-align: right;
271 }
272 .title2 {
273 writing-mode: vertical-lr;
274 letter-spacing: 6px;
275 }
276 .bhqk {
277 padding: 0;
278 .box {
279 width: 744px;
280 overflow-x: scroll;
281 }
282 .test {
283 }
284 table {
285 .bhqkTh {
286 width: 110px;
287 line-height: 40px;
288 background-color: #f5f5f5;
289 border: 1px solid rgb(228, 228, 228);
290 font-weight: bold;
291 }
292 td {
293 width: 180px;
294 }
295 }
296 }
297 }
298 }
299 }
300 </style>
...@@ -6,27 +6,52 @@ ...@@ -6,27 +6,52 @@
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="权利类型"> 8 <el-form-item label="权利类型">
9 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型"> 9 <el-select
10 <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value"> 10 v-model="queryForm.qllx"
11 filterable
12 clearable
13 placeholder="请选择权利类型"
14 >
15 <el-option
16 v-for="item in qllxs"
17 :key="item.value"
18 :label="item.label"
19 :value="item.value"
20 >
11 </el-option> 21 </el-option>
12 </el-select> 22 </el-select>
13 </el-form-item> 23 </el-form-item>
14 </el-col> 24 </el-col>
15 <el-col :span="5"> 25 <el-col :span="5">
16 <el-form-item label="不动产单元号"> 26 <el-form-item label="不动产单元号">
17 <el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width200px"> 27 <el-input
28 placeholder="请输入不动产单元号"
29 v-model="queryForm.bdcdyh"
30 clearable
31 class="width200px"
32 >
18 </el-input> 33 </el-input>
19 </el-form-item> 34 </el-form-item>
20 </el-col> 35 </el-col>
21 <el-col :span="5"> 36 <el-col :span="5">
22 <el-form-item label="不动产权证号"> 37 <el-form-item label="不动产权证号">
23 <el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width200px"> 38 <el-input
39 placeholder="请输入不动产权证号"
40 v-model="queryForm.bdcqzh"
41 clearable
42 class="width200px"
43 >
24 </el-input> 44 </el-input>
25 </el-form-item> 45 </el-form-item>
26 </el-col> 46 </el-col>
27 <el-col :span="5"> 47 <el-col :span="5">
28 <el-form-item label="业务号"> 48 <el-form-item label="业务号">
29 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px"> 49 <el-input
50 placeholder="请输入业务号"
51 v-model="queryForm.ywh"
52 clearable
53 class="width200px"
54 >
30 </el-input> 55 </el-input>
31 </el-form-item> 56 </el-form-item>
32 </el-col> 57 </el-col>
...@@ -42,24 +67,36 @@ ...@@ -42,24 +67,36 @@
42 </div> 67 </div>
43 <!-- 表格 --> 68 <!-- 表格 -->
44 <div class="from-clues-content"> 69 <div class="from-clues-content">
45 <lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current" 70 <lb-table
46 :total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange" 71 :page-size="pageData.size"
47 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data"> 72 @sort-change="handleSort"
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 >
48 </lb-table> 81 </lb-table>
49 </div> 82 </div>
83 <djbxxDialog v-model="isDialog" ref="djbxxDialog"/>
50 </div> 84 </div>
51 </template> 85 </template>
52 <script> 86 <script>
53 import table from "@/utils/mixin/table"; 87 import table from "@/utils/mixin/table";
54 import { datas, sendThis } from "./djbcxdata"; 88 import { datas, sendThis } from "./djbcxdata";
89 import djbxxDialog from "./components/djbxxDialog.vue";
55 export default { 90 export default {
56 name: "djbcx", 91 name: "djbcx",
57 components: {}, 92 components: {
93 djbxxDialog
94 },
58 mixins: [table], 95 mixins: [table],
59 mounted () { 96 mounted() {
60 sendThis(this); 97 sendThis(this);
61 }, 98 },
62 data () { 99 data() {
63 return { 100 return {
64 queryForm: { 101 queryForm: {
65 qllx: "", 102 qllx: "",
...@@ -72,34 +109,65 @@ export default { ...@@ -72,34 +109,65 @@ export default {
72 size: 10, 109 size: 10,
73 total: 2, 110 total: 2,
74 }, 111 },
75
76 ywlys: datas.ywlys(), 112 ywlys: datas.ywlys(),
77
78 tableData: { 113 tableData: {
79 columns: datas.columns(), 114 columns: datas.columns(),
80 data: [ 115 data: [
81 { 116 {
117 qszt: "1",
82 slsj: "2022-5-12", 118 slsj: "2022-5-12",
119 qllx: "预告买卖登记"
120 },
121 {
122 qszt: "2",
123 slsj: "2022-5-13",
124 qllx: "查封登记"
83 }, 125 },
84 { 126 {
127 qszt: "3",
85 slsj: "2022-5-13", 128 slsj: "2022-5-13",
129 qllx: "预告买卖登记"
86 }, 130 },
87 ], 131 ],
88 }, 132 },
133 qllxs: [],
134 isDialog: false,
89 }; 135 };
90 }, 136 },
91 methods: { 137 methods: {
92 // 初始化数据 138 // 初始化数据
93 fetchData () { }, 139 fetchData() {},
94 handleSort (name, sort) { 140 handleSort(name, sort) {
95 console.log(name, sort); 141 console.log(name, sort);
96 }, 142 },
97 openDialog () { 143 queryClick(){
98 console.log(999999999999999); 144
145 },
146 moreQueryClick(){},
147 openDialog(scope) {
148 this.isDialog = true;
149 // if(scope.row.qllx == '预告买卖登记'){
150 // this.$refs.djbxxDialog.showTab = 'ygdj'
151 // }
152 // else if(scope.row.qllx == '查封登记'){
153 // this.$refs.djbxxDialog.showTab = 'cfdj'
154 // }
99 }, 155 },
100 }, 156 },
101 }; 157 };
102 </script> 158 </script>
103 <style scoped lang="scss"> 159 <style scoped lang="scss">
104 @import "~@/styles/public.scss"; 160 @import "~@/styles/public.scss";
161 .icon-circle {
162 position: relative;
163 }
164 .icon-circle::before {
165 content: "";
166 width: 4px;
167 height: 4px;
168 border-radius: 50%;
169 background: #000;
170 top: 0px;
171 left: 0px;
172 }
105 </style> 173 </style>
......
...@@ -18,9 +18,28 @@ class data extends filter { ...@@ -18,9 +18,28 @@ class data extends filter {
18 { 18 {
19 label: "权属状态", 19 label: "权属状态",
20 render: (h, scope) => { 20 render: (h, scope) => {
21 let text = '';
22 let color=""
23 let obj = {
24 "1": {
25 text:'现势',
26 color:'#4BD863'
27 },
28 "2": {
29 text:'历史',
30 color:'#AAAAAA'
31 },
32 "3": {
33 text: '临时',
34 color: '#FE9400'
35 }
36 }
37 text = obj[scope.row.qszt].text
38 color = obj[scope.row.qszt].color
21 return ( 39 return (
22 <div> 40 <div>
23 <span>{scope.row.qszt}</span> 41 <span style={`color:${color}`}>●</span>
42 <span >{ text }</span>
24 </div> 43 </div>
25 ) 44 )
26 } 45 }
......