Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
efdff42e by renchao@pashanhoo.com
Options

style:登记薄模块功能的重构

1 parent 9dc1be45
Inline Side-by-side
Showing 5 changed files with 271 additions and 86 deletions
1 import ElCollapse from './src/collapse';
2
3 /* istanbul ignore next */
4 ElCollapse.install = function(Vue) {
5 Vue.component(ElCollapse.name, ElCollapse);
6 };
7
8 export default ElCollapse;
9
1 <template>
2 <div class="el-collapse-item"
3 :class="{'is-active': isActive, 'is-disabled': disabled }">
4 <div
5 role="tab"
6 :aria-expanded="isActive"
7 :aria-controls="`el-collapse-content-${id}`"
8 :aria-describedby="`el-collapse-content-${id}`">
9 <div
10 class="el-collapse-item__header"
11 @click="handleHeaderClick"
12 role="button"
13 :id="`el-collapse-head-${id}`"
14 :tabindex="disabled ? undefined : 0"
15 @keyup.space.enter.stop="handleEnterClick"
16 :class="{
17 'focusing': focusing,
18 'is-active': isActive
19 }"
20 @focus="handleFocus"
21 @blur="focusing = false">
22 <slot name="title">{{title}}</slot>
23 <i
24 class="el-collapse-item__arrow el-icon-arrow-right"
25 :class="{'is-active': isActive}">
26 </i>
27 </div>
28 </div>
29 <el-collapse-transition>
30 <div
31 class="el-collapse-item__wrap"
32 v-show="isActive"
33 role="tabpanel"
34 :aria-hidden="!isActive"
35 :aria-labelledby="`el-collapse-head-${id}`"
36 :id="`el-collapse-content-${id}`">
37 <div class="el-collapse-item__content">
38 <slot></slot>
39 </div>
40 </div>
41 </el-collapse-transition>
42 </div>
43 </template>
44 <script>
45 import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
46 import Emitter from 'element-ui/src/mixins/emitter';
47 import { generateId } from 'element-ui/src/utils/util';
48
49 export default {
50 name: 'ElCollapseItem',
51
52 componentName: 'ElCollapseItem',
53
54 mixins: [Emitter],
55
56 components: { ElCollapseTransition },
57
58 data () {
59 return {
60 contentWrapStyle: {
61 height: 'auto',
62 display: 'block'
63 },
64 contentHeight: 0,
65 focusing: false,
66 isClick: false,
67 id: generateId()
68 };
69 },
70
71 inject: ['collapse'],
72
73 props: {
74 title: String,
75 name: {
76 type: [String, Number],
77 default () {
78 return this._uid;
79 }
80 },
81 disabled: Boolean
82 },
83
84 computed: {
85 isActive () {
86 return this.collapse.activeNames.indexOf(this.name) > -1;
87 }
88 },
89
90 methods: {
91 handleFocus () {
92 setTimeout(() => {
93 if (!this.isClick) {
94 this.focusing = true;
95 } else {
96 this.isClick = false;
97 }
98 }, 50);
99 },
100 handleHeaderClick () {
101 if (this.disabled) return;
102 this.dispatch('ElCollapse', 'item-click', this);
103 this.focusing = false;
104 this.isClick = true;
105 },
106 handleEnterClick () {
107 this.dispatch('ElCollapse', 'item-click', this);
108 }
109 }
110 };
111 </script>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-11-08 14:36:44
5 -->
6 <template>
7 <div class="el-collapse" role="tablist" aria-multiselectable="true">
8 <slot></slot>
9 </div>
10 </template>
11 <script>
12 export default {
13 name: 'ElCollapse',
14
15 componentName: 'ElCollapse',
16
17 props: {
18 accordion: Boolean,
19 value: {
20 type: [Array, String, Number],
21 default () {
22 return [];
23 }
24 }
25 },
26
27 data () {
28 return {
29 activeNames: [].concat(this.value)
30 };
31 },
32
33 provide () {
34 return {
35 collapse: this
36 };
37 },
38
39 watch: {
40 value (value) {
41 this.activeNames = [].concat(value);
42 }
43 },
44
45 methods: {
46 setActiveNames (activeNames) {
47 activeNames = [].concat(activeNames);
48 let value = this.accordion ? activeNames[0] : activeNames;
49 this.activeNames = activeNames;
50 this.$emit('input', value);
51 this.$emit('change', value);
52 },
53 handleItemClick (item) {
54 if (this.accordion) {
55 this.setActiveNames(
56 (this.activeNames[0] || this.activeNames[0] === 0) &&
57 this.activeNames[0] === item.name
58 ? '' : item.name
59 );
60 } else {
61 let activeNames = this.activeNames.slice(0);
62 let index = activeNames.indexOf(item.name);
63
64 if (index > -1) {
65 activeNames.splice(index, 1);
66 } else {
67 activeNames.push(item.name);
68 }
69 this.setActiveNames(activeNames);
70 }
71 }
72 },
73
74 created () {
75 this.$on('item-click', this.handleItemClick);
76 }
77 };
78 </script>
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 09:52:07 4 * @LastEditTime: 2023-11-08 14:12:17
5 --> 5 -->
6 <template> 6 <template>
7 <div class="bdcqljqtsx"> 7 <div class="bdcqljqtsx">
8 <el-button class="print" v-print="printObj">打印</el-button> 8 <el-button class="print" v-print="printObj">打印</el-button>
9 <div class="content" v-if="qlxxList.ztqlmc" id="box"> 9 <div class="content" v-if="qlxxList.ztqlmc" id="box">
10 <div class="title">不动产权利及其他事项<br />登记信息</div> 10 <div class="title">不动产权利及其他事项<br />登记信息</div>
11 <div> 11 <div style="text-align:center">
12 不动产单元号: 12 不动产单元号:
13 <div class="underline">{{ propsParam.bdcdyh }}</div> 13 <div class="underline">{{ propsParam.bdcdyh }}</div>
14 </div> 14 </div>
15 <br /><br /><br /> 15 <br /><br /><br />
16 <div> 16 <div class="detail">
17 <div class="underline">{{ qlxxList.ztqlmc }}</div> 17 <div class="underline">{{ qlxxList.ztqlmc }}</div>
18 登记 共 18 登记 共
19 <div class="underline">{{ qlxxList.ztql.total }}</div> 19 <div class="underline">{{ qlxxList.ztql.total }}</div>
20 条 20 条
21 </div> 21 </div>
22 <br /><br /> 22 <br /><br />
23 <div> 23 <div class="detail">
24 抵押权登记 共 24 抵押权登记 共
25 <div class="underline">{{ qlxxList.diyaq.total }}</div> 25 <div class="underline">{{ qlxxList.diyaq.total }}</div>
26 条 26 条
27 </div> 27 </div>
28 <br /> 28 <br />
29 <div> 29 <div class="detail">
30 地役权登记 共 30 地役权登记 共
31 <div class="underline">{{ qlxxList.diyiq.total }}</div> 31 <div class="underline">{{ qlxxList.diyiq.total }}</div>
32 条 32 条
33 </div> 33 </div>
34 <br /> 34 <br />
35 <div> 35 <div class="detail">
36 预告登记 共 36 预告登记 共
37 <div class="underline">{{ qlxxList.ygdj.total }}</div> 37 <div class="underline">{{ qlxxList.ygdj.total }}</div>
38 条 38 条
39 </div> 39 </div>
40 <br /> 40 <br />
41 <div> 41 <div class="detail">
42 异议登记 共 42 异议登记 共
43 <div class="underline">{{ qlxxList.yydj.total }}</div> 43 <div class="underline">{{ qlxxList.yydj.total }}</div>
44 条 44 条
45 </div> 45 </div>
46 <br /> 46 <br />
47 <div> 47 <div class="detail">
48 查封登记 共 48 查封登记 共
49 <div class="underline">{{ qlxxList.cfdj.total }}</div> 49 <div class="underline">{{ qlxxList.cfdj.total }}</div>
50 条 50 条
...@@ -60,10 +60,10 @@ ...@@ -60,10 +60,10 @@
60 name: "bdcqljqtsx", 60 name: "bdcqljqtsx",
61 data () { 61 data () {
62 return { 62 return {
63 printObj: { 63 printObj: {
64 id: "box", 64 id: "box",
65 //其他配置项， 65 //其他配置项，
66 }, 66 },
67 //传递参数 67 //传递参数
68 propsParam: this.$attrs, 68 propsParam: this.$attrs,
69 qlxxList: "", 69 qlxxList: "",
...@@ -83,44 +83,45 @@ ...@@ -83,44 +83,45 @@
83 </script> 83 </script>
84 84
85 <style lang="scss" scoped> 85 <style lang="scss" scoped>
86 .detail {
87 margin-right: 19%;
88 }
86 .bdcqljqtsx { 89 .bdcqljqtsx {
87 width: 100%; 90 width: 100%;
88 height: 100%; 91 height: 100%;
89 background: #fff; 92 background: #fff;
90 position: relative; 93 position: relative;
91 .print { 94 .print {
92 // background-color: #0079fe; 95 // background-color: #0079fe;
93 z-index: 10; 96 z-index: 10;
94 position: absolute; 97 position: absolute;
95 left: 11px; 98 left: 11px;
96 top: 5px; 99 top: 5px;
97 } 100 }
98
99 } 101 }
100 .content { 102 .content {
101 width: 50%; 103 width: 50%;
102 height: 100%; 104 height: 100%;
103 margin: 0 auto; 105 margin: 0 auto;
104 text-align: right; 106 text-align: right;
105 color: #333; 107 color: #333;
106 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; 108 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
107 font-weight: 700; 109 font-weight: 700;
108 font-size: 18px; 110 font-size: 18px;
109 line-height: 16px; 111 line-height: 16px;
110
111 112
112 .title { 113 .title {
113 font-size: 32px; 114 font-size: 32px;
114 text-align: center; 115 text-align: center;
115 padding: 40px 0; 116 padding: 40px 0;
116 line-height: 34px; 117 line-height: 34px;
117 } 118 }
118 119
119 .underline { 120 .underline {
120 font-size: 14px; 121 font-size: 14px;
121 font-weight: normal; 122 font-weight: normal;
122 text-decoration: underline; 123 text-decoration: underline;
123 display: inline-block; 124 display: inline-block;
124 }
125 } 125 }
126 }
126 </style> 127 </style>
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-10-13 14:30:26 4 * @LastEditTime: 2023-11-08 14:56:03
5 --> 5 -->
6 <template> 6 <template>
7 <div class="content"> 7 <div class="content">
...@@ -16,15 +16,15 @@ ...@@ -16,15 +16,15 @@
16 node-key="id" 16 node-key="id"
17 :default-checked-keys="[showTab]"> 17 :default-checked-keys="[showTab]">
18 </el-tree> 18 </el-tree>
19 <el-collapse v-model="activeName" accordion> 19 <ElCollapse v-model="activeName" accordion>
20 <el-collapse-item 20 <ElCollapse-item
21 class="sfqqq" 21 class="sfqqq"
22 ref="sfq" 22 ref="sfq"
23 v-for="(item, index) in sfqdata" 23 v-for="(item, index) in sfqdata"
24 :key="index" 24 :key="index"
25 :name="index"> 25 :name="index">
26 <template slot="title"> 26 <template slot="title">
27 <span class="text" @click="tap(item, index)"> 27 <span class="text" :class="[titleActive == index ? 'nameSelect' : '']" @click="tap(item, index)">
28 <span> {{ item.label }}</span> 28 <span> {{ item.label }}</span>
29 </span> 29 </span>
30 </template> 30 </template>
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
41 {{ item.zt }} 41 {{ item.zt }}
42 </span> 42 </span>
43 </p> 43 </p>
44 </el-collapse-item> 44 </ElCollapse-item>
45 </el-collapse> 45 </ElCollapse>
46 </div> 46 </div>
47 <div class="right"> 47 <div class="right">
48 <component 48 <component
...@@ -54,11 +54,17 @@ ...@@ -54,11 +54,17 @@
54 </template> 54 </template>
55 <script> 55 <script>
56 import { getBdcqljqtsx } from "@/api/djbDetail.js"; 56 import { getBdcqljqtsx } from "@/api/djbDetail.js";
57 import ElCollapse from "@/components/collapse/index";
58 import ElCollapseItem from "@/components/collapse/src/collapse-item.vue";
57 import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js"; 59 import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
58 export default { 60 export default {
61 comments: {
62 ElCollapse, ElCollapseItem
63 },
59 data () { 64 data () {
60 return { 65 return {
61 activeName: 0, 66 activeName: 0,
67 titleActive: "",
62 //接收参数 68 //接收参数
63 // propsParam: this.$attrs, 69 // propsParam: this.$attrs,
64 //左侧目录 70 //左侧目录
...@@ -109,18 +115,16 @@ ...@@ -109,18 +115,16 @@
109 if (res.code === 200) { 115 if (res.code === 200) {
110 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) { 116 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
111 let index = this.sfqdata.findIndex((item) => { 117 let index = this.sfqdata.findIndex((item) => {
112 return item.bdcdyid == val.bdcdyid; 118 return item.bdcdyid == val.bdcdyid
113 }); 119 })
114 this.activeName = index; 120 this.activeName = index
115 121 this.titleActive = -1
116 // this.setstyle(index, 0, this.iskey); 122 this.titleActive = this.activeName
117 } else { 123 } else {
118 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid)); 124 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
119 this.activeName = this.sfqdata.length - 1; 125 this.activeName = this.sfqdata.length - 1;
120 this.isActive = "" 126 this.isActive = ""
121 // this.$nextTick(() => { 127 this.titleActive = this.activeName
122 // this.setstyle(this.sfqdata.length - 1, 0, this.iskey);
123 // })
124 } 128 }
125 } 129 }
126 }); 130 });
...@@ -157,7 +161,6 @@ ...@@ -157,7 +161,6 @@
157 this.isActive = index; 161 this.isActive = index;
158 } 162 }
159 }); 163 });
160 // this.setstyle(0, 0, this.iskey);
161 }); 164 });
162 } 165 }
163 }); 166 });
...@@ -176,25 +179,6 @@ ...@@ -176,25 +179,6 @@
176 handleNodeClick (data) { 179 handleNodeClick (data) {
177 this.loadComponent(data.form); 180 this.loadComponent(data.form);
178 }, 181 },
179 // setstyle(newindex, index, key) {
180 // if (key != undefined || this.keyy == index) {
181 // if (key != undefined) {
182 // this.keyy = key;
183 // }
184 // this.loadComponent(
185 // this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form
186 // );
187 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
188 // dpme.style.backgroundColor = "#f5f5f5";
189 // dpme.style.color = "#0079fe";
190 // dpme.style.borderRight = "4px solid #0079fe";
191 // } else {
192 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
193 // dpme.style.backgroundColor = "#ffffff";
194 // dpme.style.color = "black";
195 // dpme.style.border = "none";
196 // }
197 // },
198 /** 182 /**
199 * @description: addlist 183 * @description: addlist
200 * @param {*} data 184 * @param {*} data
...@@ -202,6 +186,9 @@ ...@@ -202,6 +186,9 @@
202 * 新增列表功能 186 * 新增列表功能
203 */ 187 */
204 tap (data, index) { 188 tap (data, index) {
189 this.activeName = index.toString()
190 this.isActive = -1
191 this.titleActive = index
205 this.loadComponent(data.form); 192 this.loadComponent(data.form);
206 }, 193 },
207 taplist (data, index) { 194 taplist (data, index) {
...@@ -216,15 +203,11 @@ ...@@ -216,15 +203,11 @@
216 loadComponent (form) { 203 loadComponent (form) {
217 this.componentTag = (r) => 204 this.componentTag = (r) =>
218 require.ensure([], () => r(require("@/views/registerBook/" + form))); 205 require.ensure([], () => r(require("@/views/registerBook/" + form)));
219 }, 206 }
220 }, 207 }
221 }; 208 }
222 </script> 209 </script>
223 <style scoped lang="scss"> 210 <style scoped lang="scss">
224 // /deep/.rollTable {
225 // height: calc(100vh - 300px) !important;
226 // }
227
228 .content { 211 .content {
229 width: 100%; 212 width: 100%;
230 height: 100%; 213 height: 100%;
...@@ -322,7 +305,10 @@ ...@@ -322,7 +305,10 @@
322 align-items: center; 305 align-items: center;
323 } 306 }
324 } 307 }
325 308 .nameSelect {
309 color: #000000;
310 font-weight: 700;
311 }
326 .select { 312 .select {
327 border: none; 313 border: none;
328 cursor: pointer; 314 cursor: pointer;
......