Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
a889f2a9 by 田浩浩
Options

提交新建的工作流程框架

1 parent 06981cd9
Inline Side-by-side
Showing 11 changed files with 554 additions and 427 deletions
1 <template>
2 <div class="djxxTable">
3 <div class="tableBox">
4 <div class="title">
5 {{ title }}
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <div class="xxTableBox">
15 <table class="xxTable">
16 <tr>
17 <th rowspan="3">业务类型</th>
18 </tr>
19 <!-- 第一行表头 -->
20 <tr class="one">
21 <th
22 v-for="(item, index) in ths"
23 :key="index"
24 :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"
25 >
26 <div class="icon" v-if="item.type == '临时'">正在办理</div>
27 {{ item.type }}
28 </th>
29 </tr>
30 <!-- 第二行表头 -->
31 <tr class="two">
32 <th v-for="(item, index) in ths" :key="index" :class="item.class">
33 <p>{{ item.qllxmc }}</p>
34 <p>{{ item.djlxmc }}</p>
35 </th>
36 </tr>
37 <!-- 数据 -->
38 <tr v-for="(item, index) in columns" :key="index">
39 <td>
40 {{ item.label }}
41 </td>
42 <td
43 v-for="(item1, index1) in showTableData"
44 :key="index1"
45 :class="[
46 item1.qszt == '2' ? 'lishi' : '',
47 item1.qszt == '0' ? 'linshi' : '',
48 ]"
49 >
50 {{ item1[item.prop] }}
51 </td>
52 </tr>
53 </table>
54 </div>
55 </div>
56 </div>
57 </template>
58
59 <script>
60 import { datas } from "./jsydsyq";
61 import { getJsydsyqList } from "@/api/zhcx.js";
62 export default {
63 name: "jsydsyq",
64 data() {
65 return {
66 checkList: ["临时", "现势", "历史"],
67 tableData: [],
68 showTableData: [],
69 ths: [],
70 columns: [],
71 title: "建设用地使用权、宅基地使用权登记信息",
72 emptyData: {
73 ssywh: "",
74 dah: "",
75 ywh: "",
76 bdcdyh: "",
77 zl: "",
78 qlrlx: "",
79 qlrmc: "",
80 qlrzjzl: "",
81 qlrzjhm: "",
82 gyfs: "",
83 mj: null,
84 qlxz: "",
85 ytmc: "",
86 syqqzsj: null,
87 tdsyqx: null,
88 qdjg: null,
89 djyy: "",
90 bdcqzh: null,
91 djsj: "",
92 dbr: "",
93 fj: "",
94 qllxmc: "",
95 djlxmc: "",
96 qszt: "",
97 },
98 };
99 },
100 async created() {
101 var Sldy = this.$parent._data.unitData[0];
102 // 清空值
103 this.tableData = [];
104 this.ths = [];
105 this.columns = datas.columns();
106 let res = await getJsydsyqList({
107 bdcdyid: Sldy.bdcdyid,
108 qllx: Sldy.qllx,
109 qszt: [],
110 });
111 let resList = res.result.result ? res.result.result : [];
112 if (resList.length < 3) {
113 let num = 3 - resList.length;
114 for (let i = 0; i < num; i++) {
115 resList.push(this.emptyData);
116 }
117 }
118 let detail = resList;
119 detail.length > 0 &&
120 detail.forEach((item) => {
121 this.tableData.push(item);
122 if (item.qszt == "0") {
123 this.ths.push({
124 type: "临时",
125 qllxmc: item.qllxmc,
126 djlxmc: item.djlxmc,
127 prop: "linshi",
128 class: "linshi",
129 });
130 } else if (item.qszt == "1") {
131 this.ths.push({
132 type: "现势",
133 qllxmc: item.qllxmc,
134 djlxmc: item.djlxmc,
135 prop: "xianshi",
136 class: "xianshi",
137 });
138 } else if (item.qszt == "2") {
139 this.ths.push({
140 type: "历史",
141 qllxmc: item.qllxmc,
142 djlxmc: item.djlxmc,
143 prop: "lishi",
144 class: "lishi",
145 });
146 }
147 });
148 this.showTableData = this.tableData;
149 },
150 methods: {
151 checkChange() {},
152 },
153 };
154 </script>
155
156 <style lang="scss" scoped>
157 .djxxTable {
158 width: 100%;
159 height: 100%;
160 background: #fff;
161 overflow-y: scroll;
162 color: #333;
163
164 .tableBox {
165 margin: 0 auto;
166 display: flex;
167 flex-wrap: wrap;
168
169 .title {
170 width: 100%;
171 font-weight: 700;
172 font-size: 16px;
173 text-align: center;
174 background: #e9e9e9;
175 height: 62px;
176 line-height: 62px;
177 position: relative;
178 margin: 1px 0;
179
180 .checkbox {
181 position: absolute;
182 right: 20px;
183 bottom: -16px;
184 height: 62px;
185 }
186 }
187
188 .xxTableBox {
189 overflow-x: scroll;
190 width: 100%;
191 }
192
193 .xxTable > tr:first-child th {
194 width: 140px;
195 }
196
197 tr td {
198 border: 1px solid #ccc;
199 }
200
201 .xxTable {
202 // border-spacing: 0;
203 border-spacing: 1px;
204 width: 100%;
205
206 tr > th {
207 background: #464c5b;
208 color: #fff;
209 font-size: 16px;
210 height: 60px;
211 }
212
213 th.linshi,
214 th.xianshi {
215 background: #464c5b;
216 }
217
218 th.lishi {
219 background: rgba(70, 76, 91, 0.8);
220 }
221
222 .one th {
223 height: 25px;
224 font-size: 14px;
225 }
226
227 th.linshi {
228 color: #fe9400;
229 }
230
231 .two th {
232 height: 45px;
233
234 p:nth-child(2) {
235 font-size: 14px;
236 }
237 }
238
239 .linshiIcon {
240 position: relative;
241 }
242
243 .linshiIcon::after {
244 content: "";
245 display: block;
246 width: 0;
247 height: 0;
248 border-width: 0px 0px 55px 55px;
249 border-style: none solid solid;
250 border-color: transparent transparent #fe9400;
251 position: absolute;
252 top: 0;
253 right: 0;
254 transform: rotate(-90deg);
255 }
256
257 .icon {
258 position: absolute;
259 top: 13px;
260 right: -4px;
261 transform: rotate(45deg);
262 color: #fff;
263 font-size: 12px;
264 z-index: 10;
265 }
266
267 tr td {
268 text-align: center;
269 height: 40px;
270 padding: 4px;
271 font-size: 13px;
272 width: 140px;
273 }
274
275 > tr:nth-child(odd) td {
276 background: #f2f2f2;
277 }
278
279 > tr:nth-child(even) td {
280 background: #f9f9f9;
281 }
282
283 td.linshi {
284 color: #fe9400;
285 }
286
287 tr > td.lishi {
288 color: #7f7f7f;
289 }
290 }
291 }
292 }
293 </style>
...@@ -150,8 +150,8 @@ export default { ...@@ -150,8 +150,8 @@ export default {
150 }); 150 });
151 }, 151 },
152 ywhClick (item) { 152 ywhClick (item) {
153 const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1'); 153 //const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
154 //const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1'); 154 const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');
155 window.open(href, '_blank'); 155 window.open(href, '_blank');
156 }, 156 },
157 }, 157 },
......
...@@ -289,10 +289,11 @@ import InformationTable from "./InformationTable"; ...@@ -289,10 +289,11 @@ import InformationTable from "./InformationTable";
289 import { Init, fristReg } from "@/api/jsydsyqFlow.js"; 289 import { Init, fristReg } from "@/api/jsydsyqFlow.js";
290 import { mapGetters } from "vuex"; 290 import { mapGetters } from "vuex";
291 export default { 291 export default {
292 async created() { 292 async created() {
293 var bsmSldy = this.$parent._data.unitData[0].bsmSldy; 293 //var bsmSldy = this.$parent._data.unitData[0].bsmSldy;
294 this.propsParam = this.$attrs;
294 var formdata = new FormData(); 295 var formdata = new FormData();
295 formdata.append("bsmSldy", bsmSldy); 296 formdata.append("bsmSldy", this.propsParam.bsmSldy);
296 Init(formdata).then((res) => { 297 Init(formdata).then((res) => {
297 if (res.code === 200 && res.result) { 298 if (res.code === 200 && res.result) {
298 this.ruleForm = { 299 this.ruleForm = {
...@@ -347,6 +348,8 @@ export default { ...@@ -347,6 +348,8 @@ export default {
347 // 持证人 348 // 持证人
348 czr: "", 349 czr: "",
349 }, 350 },
351 //传递参数
352 propsParam: {},
350 rules: {}, 353 rules: {},
351 }; 354 };
352 }, 355 },
......
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
260 loadViewSlsq() { 260 loadViewSlsq() {
261 return (r) => 261 return (r) =>
262 require.ensure([], () => 262 require.ensure([], () =>
263 r(require("../../components/jsydsyq/jsydsyq.vue")) 263 r(require("../../zhcx/djbcx/components/jsydsyq.vue"))
264 ); 264 );
265 }, 265 },
266 }, 266 },
......
1
2 // 时间戳转化
3 // export default {
4 // timestampToTime(timestamp) {
5 // let strDate;
6 // var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
7 // var Y = date.getFullYear() + '-';
8 // var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
9 // var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
10 // var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
11 // var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
12 // strDate = Y + M + D + h + m;
13 // return strDate;
14 // },
15 // }
16
17
18 //流程环节操作按钮
19 export function operation(index, item) {
20 let that = this;
21 switch (item.value) {
22 case "zsyl":
23 this.zsylFlag = true;
24 break;
25 case "clfp":
26 this.key++;
27 this.issplitScreen = !this.issplitScreen;
28 this.flag = !this.flag;
29 if (this.issplitScreen) {
30 this.tabList.splice(1, 1);
31 } else {
32 this.tabList = [...this.tabList1];
33 }
34 break;
35 case "th":
36 this.thflag = true;
37 this.$nextTick(() => {
38 this.$refs.thdialogRef.tablelistFn();
39 });
40 break;
41 case "zc":
42 this.zcDialog = true;
43 this.$refs.zcDialogRef.tablelistFn();
44 break;
45 case "tc":
46 window.close();
47 break;
48 case "db":
49 var formdata = new FormData();
50 formdata.append("bsmSlsq", this.bsmSlsq);
51 formdata.append("bestepid", this.bestepid);
52 // comMsg;
53 this.$confirm("请确认是否登簿", "提示", {
54 iconClass: "el-icon-question", //自定义图标样式
55 confirmButtonText: "确认", //确认按钮文字更换
56 cancelButtonText: "取消", //取消按钮文字更换
57 showClose: true, //是否显示右上角关闭按钮
58 type: "warning", //提示类型 success/info/warning/error
59 }).then(function () {
60 record(formdata).then((res) => {
61 if (res.code === 200 || res.code === 2002) {
62 that.$alert(res.message);
63 }
64 });
65 });
66 break;
67 }
68 }
69
70 export function loadBdcdylist(that) {
71 var formdata = new FormData();
72 formdata.append("bsmSlsq", that.bsmSlsq);
73 formdata.append("bestepid", that.bestepid);
74 leftMenu(formdata).then((res) => {
75 if (res.code === 200) {
76 that.unitData = res.result;
77 that.currentSelectProps = res.result[0];
78 //debugger;
79 //this.$alert(res.result[0].bsmSldy);
80 // setTimeout(() => {
81 // that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
82 // this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
83 // }, 300);
84 }
85 });
86 }
...\ No newline at end of file ...\ No newline at end of file
1
2 #ContainerFrame {
3 height: 100%;
4 width: 100%;
5 position: sticky;
6 top: 80px;
7 //background-color: #ffffff;
8 border: 1px solid #ebeef5;
9 z-index: 100;
10 @include flex;
11 }
12
13 #leftmenu {
14 width: 250px;
15 border-right: 1px solid #ebeef5;
16 position: relative;
17 box-sizing: border-box;
18 ul {
19 position: relative;
20 .xian {
21 background: #f2f2f2;
22 padding: 2px;
23 }
24 .title {
25 padding: 5px;
26 text-align: center;
27 }
28 li {
29 padding: 5px;
30 font-size: 14px;
31 color: #606266;
32 line-height: 20px;
33 }
34 li:hover {
35 color: #0f93f6;
36 cursor: pointer;
37 }
38 }
39 }
40 #rightContainer {
41 .tabDiv {
42 width: 100%;
43 height: 100%;
44 }
45 // .fenpin {
46 // min-width: 50%;
47 // border-right: 1px solid #ebeef5;
48 // }
49
50 background-color: #ffffffe7;
51 width: 100%;
52 height: 100%;
53 z-index: 100;
54 @include flex;
55 }
56
57 .svg-icon {
58 width: 2.5em;
59 height: 2.5em;
60 }
61 .iconName {
62 line-height: 24px;
63 font-size: 12px;
64 }
65 .container {
66 width: 100%;
67 height: 100%;
68 padding: 0;
69 box-sizing: border-box;
70 background-color: #ffffff;
71 overflow: hidden;
72 }
73 .topButton {
74 @include flex;
75 width: 100%;
76 height: 80px;
77 background-color: #3498db;
78 color: #ffffff;
79 justify-content: space-between;
80 padding-left: 15px;
81 position: sticky;
82 top: 0;
83 z-index: 100;
84
85 ul {
86 @include flex;
87
88 li {
89 @include flex-center;
90 cursor: pointer;
91 flex-direction: column;
92 margin-right: 15px;
93 box-sizing: border-box;
94 width: 70px;
95 margin: 0 5px;
96 }
97
98 li:hover {
99 border: 1px solid #ffffff;
100 border-radius: 5px;
101 //color: $light-blue ;
102
103 .svg-icon {
104 //color: $light-blue ;
105 }
106 }
107 }
108 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -29,21 +29,33 @@ ...@@ -29,21 +29,33 @@
29 <div id="ContainerFrame"> 29 <div id="ContainerFrame">
30 <!-- 左侧菜单栏 --> 30 <!-- 左侧菜单栏 -->
31 <div id="leftmenu"> 31 <div id="leftmenu">
32 <ul> 32 <div class="title">申请单元列表({{ unitData.length }})</div>
33 <p class="title">申请单元列表({{ unitData.length }})</p> 33 <!-- <ul>
34 <div v-for="(item, index) in unitData" :key="index"> 34 <div v-for="(item, index) in unitData" :key="index">
35 <li @click="unitClick(item)"> 35 <li @click="unitClick(item)">
36 <p>{{ item.bdcdyh }}</p> 36 <p>{{ item.bdcdyh }}</p>
37 <p>{{ item.zl }}</p> 37 <p>{{ item.zl }}</p>
38 </li> 38 </li>
39 <!-- <div class="xian"></div> -->
40 </div> 39 </div>
41 </ul> 40 </ul> -->
41 <el-menu default-active="0" @select="selectItems">
42 <el-menu-item
43 :index="index"
44 v-for="(item, index) in unitData"
45 :key="index"
46 >
47 <i>
48 <p>{{ item.bdcdyh }}</p>
49 <p>{{ item.zl }}</p>
50 </i>
51 </el-menu-item>
52 </el-menu>
53
42 </div> 54 </div>
43 <!-- 表单内容区域 --> 55 <!-- 表单内容区域 -->
44 <div id="rightContainer"> 56 <div id="rightContainer">
45 <div class="tabDiv"> 57 <div class="tabDiv">
46 <el-tabs v-model="activeName" @tab-click="tabClick"> 58 <el-tabs v-model="tabName" @tab-click="tabClick">
47 <el-tab-pane 59 <el-tab-pane
48 :label="item.name" 60 :label="item.name"
49 :name="item.value" 61 :name="item.value"
...@@ -52,7 +64,11 @@ ...@@ -52,7 +64,11 @@
52 > 64 >
53 </el-tab-pane> 65 </el-tab-pane>
54 </el-tabs> 66 </el-tabs>
55 <component :is="componentTag" v-bind="currentSelectProps" /> 67 <component
68 :key="fresh"
69 :is="componentTag"
70 v-bind="currentSelectProps"
71 />
56 </div> 72 </div>
57 <!-- <div style="width: 100%"> 73 <!-- <div style="width: 100%">
58 74
...@@ -64,142 +80,40 @@ ...@@ -64,142 +80,40 @@
64 80
65 <style scoped lang='scss'> 81 <style scoped lang='scss'>
66 @import "~@/styles/mixin.scss"; 82 @import "~@/styles/mixin.scss";
67 83 @import "./workFrame.scss";
68 #ContainerFrame {
69 // margin-left: 5px;
70 // border: 1px solid #ebeef5;
71 // position: relative;
72 // box-sizing: border-box;
73 // width: 100%;
74 // height: 100%;
75 // display: inline;
76 height: 100%;
77 width: 100%;
78 position: sticky;
79 top: 80px;
80 //background-color: #ffffff;
81 border: 1px solid #ebeef5;
82 z-index: 100;
83 @include flex;
84 }
85
86 #leftmenu {
87 width: 250px;
88 border-right: 1px solid #ebeef5;
89 position: relative;
90 box-sizing: border-box;
91 ul {
92 position: relative;
93 .xian {
94 background: #f2f2f2;
95 padding: 2px;
96 }
97 .title {
98 padding: 5px;
99 text-align: center;
100 }
101 li {
102 padding: 5px;
103 font-size: 14px;
104 color: #606266;
105 line-height: 20px;
106 }
107 li:hover {
108 color: #0f93f6;
109 cursor: pointer;
110 }
111 }
112 }
113 #rightContainer {
114 .tabDiv {
115 width: 100%;
116 height: 100%;
117 }
118 // .fenpin {
119 // min-width: 50%;
120 // border-right: 1px solid #ebeef5;
121 // }
122
123 background-color: #ffffffe7;
124 width: 100%;
125 height: 100%;
126 z-index: 100;
127 @include flex;
128 }
129
130 .svg-icon {
131 width: 2.5em;
132 height: 2.5em;
133 }
134 .iconName {
135 line-height: 24px;
136 font-size: 12px;
137 }
138 .container {
139 width: 100%;
140 height: 100%;
141 padding: 0;
142 box-sizing: border-box;
143 background-color: #ffffff;
144 overflow: hidden;
145 }
146 .topButton {
147 @include flex;
148 width: 100%;
149 height: 80px;
150 background-color: #3498db;
151 color: #ffffff;
152 justify-content: space-between;
153 padding-left: 15px;
154 position: sticky;
155 top: 0;
156 z-index: 100;
157
158 ul {
159 @include flex;
160
161 li {
162 @include flex-center;
163 cursor: pointer;
164 flex-direction: column;
165 margin-right: 15px;
166 box-sizing: border-box;
167 width: 70px;
168 margin: 0 5px;
169 }
170
171 li:hover {
172 border: 1px solid #ffffff;
173 border-radius: 5px;
174 //color: $light-blue ;
175
176 .svg-icon {
177 //color: $light-blue ;
178 }
179 }
180 }
181 }
182 </style> 84 </style>
183 85
184 <script> 86 <script>
185 import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js"; 87 import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
186 export default { 88 export default {
187 components: { 89 components: {
90 //注册表单组件，后期改为路由模式
188 slxx: () => import("./components/slxx.vue"), 91 slxx: () => import("./components/slxx.vue"),
189 spyj: () => import("./components/spyj.vue"), 92 spyj: () => import("./components/spyj.vue"),
190 zdjbxx: () => import("../../zhcx/djbcx/components/zdxx.vue"), 93 zdjbxx: () => import("../../zhcx/djbcx/components/zdxx.vue"),
191 qlxx: () => import("../../components/jsydsyq/jsydsyq.vue"), 94 qlxx: () => import("../../zhcx/djbcx/components/jsydsyq.vue"),
192 }, 95 },
193 data() { 96 data() {
194 return { 97 return {
98 //受理申请标识码
195 bsmSlsq: "", 99 bsmSlsq: "",
100 //当前流程所在环节
196 bestepid: "", 101 bestepid: "",
102 //顶部左侧按钮集合
197 leftButtonList: [], 103 leftButtonList: [],
104 //顶部右侧按钮集合
198 rightButtonList: [], 105 rightButtonList: [],
106 //左侧菜单数据集合
199 unitData: [], 107 unitData: [],
200 activeName: "", 108 //设置那个表单选中
109 tabName: "",
110 //表单集合
201 tabList: [], 111 tabList: [],
112 //选择加载哪一个组件
202 componentTag: "", 113 componentTag: "",
114 //设置表单组件是否刷选值
115 fresh: 0,
116 //设置表单传递数据
203 currentSelectProps: {}, 117 currentSelectProps: {},
204 }; 118 };
205 }, 119 },
...@@ -210,6 +124,18 @@ export default { ...@@ -210,6 +124,18 @@ export default {
210 this.flowInitParam(); 124 this.flowInitParam();
211 }, 125 },
212 methods: { 126 methods: {
127 selectItems(index) {
128 //this.$alert(index);
129 //this.$store.state.adminleftnavnum = index;
130
131 if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
132 this.currentSelectProps = this.unitData[index];
133 this.fresh += 1;
134 }
135
136
137 //按钮选中之后设置当前的index为store里的值。
138 },
213 //加载流程初始参数 139 //加载流程初始参数
214 flowInitParam() { 140 flowInitParam() {
215 var formdata = new FormData(); 141 var formdata = new FormData();
...@@ -221,7 +147,7 @@ export default { ...@@ -221,7 +147,7 @@ export default {
221 this.rightButtonList = res.result.operation; 147 this.rightButtonList = res.result.operation;
222 this.tabList = res.result.form; 148 this.tabList = res.result.form;
223 //默认选择第一个选项卡内容 149 //默认选择第一个选项卡内容
224 this.activeName = res.result.form[0].value; 150 this.tabName = res.result.form[0].value;
225 //默认加载第一个选项卡的组件内容 151 //默认加载第一个选项卡的组件内容
226 this.componentTag = res.result.form[0].value; 152 this.componentTag = res.result.form[0].value;
227 } 153 }
...@@ -285,6 +211,37 @@ export default { ...@@ -285,6 +211,37 @@ export default {
285 leftMenu(formdata).then((res) => { 211 leftMenu(formdata).then((res) => {
286 if (res.code === 200) { 212 if (res.code === 200) {
287 this.unitData = res.result; 213 this.unitData = res.result;
214 this.unitData.push({
215 bsmSldy: "edd5ffc12c8dcc237ad06447618dcddc",
216 bsmBusiness: "ee5187fa978c9002c3a2991ae5d70482",
217 bsmSsql: null,
218 ybdcqzsh: null,
219 bdcdyid: "dded1d6615be4fbf02de75c93bb5084e",
220 bdcdyh: "610102123666GB10165W00000000",
221 bdcdylx: null,
222 xmmc: null,
223 jzwmc: null,
224 fh: null,
225 zl: "陕西省新城区大庆路1号村",
226 bglx: "0",
227 wqhtid: null,
228 wqhtbh: null,
229 htlx: null,
230 wqsj: null,
231 ydybh: null,
232 djyy: "GYJSY2222D",
233 qllx: "A03",
234 djlx: "200",
235 sqzsbs: null,
236 gyfs: null,
237 sqfbcz: null,
238 sfxysczs: null,
239 sfxyffzs: null,
240 issave: null,
241 taskId: null,
242 });
243 // this.unitData.push(res.result[0]);
244 // this.unitData.push(res.result[0]);
288 this.currentSelectProps = res.result[0]; 245 this.currentSelectProps = res.result[0];
289 //debugger; 246 //debugger;
290 //this.$alert(res.result[0].bsmSldy); 247 //this.$alert(res.result[0].bsmSldy);
......
...@@ -7,9 +7,20 @@ class data extends filter { ...@@ -7,9 +7,20 @@ class data extends filter {
7 columns () { 7 columns () {
8 return [ 8 return [
9 { 9 {
10 prop: "qszt",
11 label: "权属状态",
12 },
13 {
14 prop: "qllxmc",
15 label: "权利类型",
16 },
17 {
18 prop: "djlxmc",
19 label: "登记类型",
20 },
21 {
10 prop: "ssywh", 22 prop: "ssywh",
11 label: "上手业务号", 23 label: "上手业务号",
12 width: "120"
13 }, 24 },
14 { 25 {
15 prop: "dah", 26 prop: "dah",
......
1 <template>
2 <div class="djxxTable">
3 <div class="tableBox">
4 <div class="title">
5 {{ title }}
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange">
8 <el-checkbox
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="item in columns" :key="item">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { datas } from "./jsydsyq.js";
51 import { getJsydsyqList } from "@/api/zhcx.js";
52 export default {
53 data() {
54 return {
55 qsztList: [
56 {
57 value: "0",
58 label: "临时",
59 },
60 {
61 value: "1",
62 label: "现势",
63 },
64 {
65 value: "2",
66 label: "历史",
67 },
68 ],
69 checkList: ["0", "1", "2"],
70 //传递参数
71 propsParam: {},
72 //列表数据
73 tableData: [],
74 //空列值个数
75 emptycolNum: 0,
76 //列名称对象
77 columns: [],
78 title: "建设用地使用权、宅基地使用权登记信息",
79 };
80 },
81 created() {
82 this.propsParam = this.$attrs;
83 this.columns = datas.columns();
84 this.loadData();
85 },
86 methods: {
87 loadData() {
88 //this.$alert(this.propsParam.bdcdyh);
89 getJsydsyqList({
90 bdcdyid: this.propsParam.bdcdyid,
91 qllx: this.propsParam.qllx,
92 qszt: this.checkList,
93 }).then((res) => {
94 if (res.code === 200) {
95 this.tableData = res.result;
96 this.emptycolNum = 3 - this.tableData.length;
97 }
98 });
99 },
100 checkChange() {
101 this.loadData();
102 },
103 getQsztName(code) {
104 let name = "";
105 for (let item of this.qsztList) {
106 if (item.value == code) {
107 name = item.label;
108 break;
109 }
110 }
111 return name;
112 },
113 },
114 };
115 </script>
116
117 <style lang="scss" scoped>
118 @import "./qlxxCommon.scss";
119 </style>
1 .djxxTable {
2 width: 100%;
3 height: 100%;
4 background: #fff;
5 overflow-y: scroll;
6 color: #333;
7
8 .tableBox {
9 margin: 0 auto;
10 display: flex;
11 flex-wrap: wrap;
12
13 .title {
14 width: 100%;
15 font-weight: 700;
16 font-size: 16px;
17 text-align: center;
18 background: #e9e9e9;
19 height: 62px;
20 line-height: 62px;
21 position: relative;
22 margin: 1px 0;
23
24 .checkbox {
25 position: absolute;
26 right: 20px;
27 bottom: -16px;
28 height: 62px;
29 }
30 }
31
32 .xxTableBox {
33 overflow-x: scroll;
34 width: 100%;
35 }
36
37 .xxTable > tr:first-child th {
38 width: 140px;
39 }
40 // tr td {
41 // border: 1px solid #ccc;
42 // }
43
44 .xxTable {
45 // border-spacing: 0;
46 border-spacing: 1px;
47 width: 100%;
48
49 tr > th {
50 border: 1px solid #ccc;
51 background: #F2F2F2;
52 color: #333333;
53 font-size: 16px;
54 height: 40px;
55 }
56
57 th.linshi,
58 th.xianshi {
59 background: #464c5b;
60 }
61
62 th.lishi {
63 background: rgba(70, 76, 91, 0.8);
64 }
65
66 .one th {
67 height: 25px;
68 font-size: 14px;
69 }
70
71 th.linshi {
72 color: #fe9400;
73 }
74
75 .two th {
76 height: 45px;
77
78 p:nth-child(2) {
79 font-size: 14px;
80 }
81 }
82
83 .linshiIcon {
84 position: relative;
85 }
86
87 .linshiIcon::after {
88 content: "";
89 display: block;
90 width: 0;
91 height: 0;
92 border-width: 0px 0px 55px 55px;
93 border-style: none solid solid;
94 border-color: transparent transparent #fe9400;
95 position: absolute;
96 top: 0;
97 right: 0;
98 transform: rotate(-90deg);
99 }
100
101 .icon {
102 position: absolute;
103 top: 13px;
104 right: -4px;
105 transform: rotate(45deg);
106 color: #fff;
107 font-size: 12px;
108 z-index: 10;
109 }
110
111 tr td {
112 border: 1px solid #ccc;
113 text-align: center;
114 height: 40px;
115 padding: 4px;
116 font-size: 13px;
117 width: 140px;
118 }
119 > tr:nth-child(odd) td {
120 background: #f2f2f2;
121 }
122
123 > tr:nth-child(even) td {
124 background: #f9f9f9;
125 }
126
127 td.linshi {
128 color: #fe9400;
129 }
130
131 tr > td.lishi {
132 color: #7f7f7f;
133 }
134 }
135 }
136 }
...@@ -174,7 +174,7 @@ export default { ...@@ -174,7 +174,7 @@ export default {
174 // computed: { 174 // computed: {
175 // ...mapGetters(["djbxx"]), 175 // ...mapGetters(["djbxx"]),
176 // }, 176 // },
177 mounted() { 177 created() {
178 this.propsParam = this.$attrs; 178 this.propsParam = this.$attrs;
179 this.loadData(); 179 this.loadData();
180 //this.$alert(this.param.bdcdyh); 180 //this.$alert(this.param.bdcdyh);
......