添加、更正、综合查询模块完善
Showing
3 changed files
with
335 additions
and
26 deletions
src/views/panel/add/index.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class="main"> | ||
| 3 | <SearchHead @getSearchCondition="getData"></SearchHead> | ||
| 4 | <div class="dataGrid" ref="dataGrid"> | ||
| 5 | <el-table | ||
| 6 | :data="tableData" | ||
| 7 | :height="tableHeight" | ||
| 8 | :row-class-name="tableRowClassName" | ||
| 9 | > | ||
| 10 | <el-table-column type="index" width="80" align="center" label="序号"> | ||
| 11 | </el-table-column> | ||
| 12 | <el-table-column label="操作" width="100"> | ||
| 13 | <template slot-scope="scope"> | ||
| 14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
| 15 | >办理</el-button | ||
| 16 | > | ||
| 17 | <el-button type="text" size="small">定位</el-button> | ||
| 18 | </template> | ||
| 19 | </el-table-column> | ||
| 20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | ||
| 21 | </el-table-column> | ||
| 22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> | ||
| 23 | </el-table-column> | ||
| 24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | ||
| 25 | </el-table-column> | ||
| 26 | <el-table-column prop="lx" align="left" width="120" label="类型"> | ||
| 27 | </el-table-column> | ||
| 28 | <el-table-column prop="qlr" align="left" width="120" label="权利人"> | ||
| 29 | </el-table-column> | ||
| 30 | <el-table-column prop="zl" align="left" label="坐落"> </el-table-column> | ||
| 31 | <el-table-column prop="zrsj" align="left" width="120" label="转入时间"> | ||
| 32 | </el-table-column> | ||
| 33 | <el-table-column prop="cjr" align="left" width="120" label="创建人"> | ||
| 34 | </el-table-column> | ||
| 35 | </el-table> | ||
| 36 | <div class="pagination"> | ||
| 37 | <el-pagination background layout="prev, pager, next" :total="1000"> | ||
| 38 | </el-pagination> | ||
| 39 | </div> | ||
| 40 | </div> | ||
| 41 | </div> | ||
| 42 | </template> | ||
| 43 | |||
| 44 | <script> | ||
| 45 | import SearchHead from "../../../components/searchHead/searchHead"; | ||
| 46 | export default { | ||
| 47 | name: "", | ||
| 48 | components: { SearchHead }, | ||
| 49 | props: {}, | ||
| 50 | data() { | ||
| 51 | return { | ||
| 52 | formData: { | ||
| 53 | user: "", | ||
| 54 | region: "", | ||
| 55 | type: [], | ||
| 56 | }, | ||
| 57 | tableData: [ | ||
| 58 | { | ||
| 59 | bdcdyh: "610101001001GB00001W", | ||
| 60 | xmmc: "万科集团万科城", | ||
| 61 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
| 62 | lx: "宗地", | ||
| 63 | qlr: "李子新", | ||
| 64 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
| 65 | zrsj: "2020.09.07 ", | ||
| 66 | cjr: "李子新", | ||
| 67 | }, | ||
| 68 | ], | ||
| 69 | tableHeight: "", | ||
| 70 | }; | ||
| 71 | }, | ||
| 72 | created() {}, | ||
| 73 | mounted() { | ||
| 74 | for (let i = 0; i < 11; i++) { | ||
| 75 | let obj = { | ||
| 76 | bdcdyh: "610101001001GB00001W", | ||
| 77 | xmmc: "万科集团万科城", | ||
| 78 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
| 79 | lx: "自然幢", | ||
| 80 | qlr: "李子新", | ||
| 81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
| 82 | zrsj: "2020.09.07 ", | ||
| 83 | cjr: "李子新", | ||
| 84 | }; | ||
| 85 | this.tableData.push(obj); | ||
| 86 | } | ||
| 87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
| 88 | }, | ||
| 89 | methods: { | ||
| 90 | onSubmit() {}, | ||
| 91 | tableRowClassName({ row, rowIndex }) { | ||
| 92 | if (rowIndex % 2 !== 0) { | ||
| 93 | return "even-row"; | ||
| 94 | } else { | ||
| 95 | return ""; | ||
| 96 | } | ||
| 97 | }, | ||
| 98 | |||
| 99 | //获取子组件点击查询触发的事件 | ||
| 100 | getData(obj) { | ||
| 101 | console.log(obj); | ||
| 102 | //将obj作为参数调用接口查询表格数据 | ||
| 103 | }, | ||
| 104 | //点击办理 | ||
| 105 | handleClick(row) { | ||
| 106 | let path = ""; | ||
| 107 | switch (row.lx) { | ||
| 108 | case "自然幢": | ||
| 109 | path = "/zrz"; | ||
| 110 | break; | ||
| 111 | case "宗地": | ||
| 112 | path = "/zd"; | ||
| 113 | break; | ||
| 114 | default: | ||
| 115 | break; | ||
| 116 | } | ||
| 117 | this.$router.push(path); | ||
| 118 | }, | ||
| 119 | }, | ||
| 120 | computed: {}, | ||
| 121 | watch: {}, | ||
| 122 | }; | ||
| 123 | </script> | ||
| 124 | <style scoped lang="less"> | ||
| 125 | .main { | ||
| 126 | width: 100%; | ||
| 127 | height: 100%; | ||
| 128 | box-sizing: border-box; | ||
| 129 | padding: 0 18px; | ||
| 130 | display: flex; | ||
| 131 | flex-direction: column; | ||
| 132 | background-color: #fcfdff; | ||
| 133 | .demo-form-inline { | ||
| 134 | margin-top: 18px; | ||
| 135 | .moreSearchBtn { | ||
| 136 | background-color: #1ad6e1; | ||
| 137 | border-color: #1ad6e1; | ||
| 138 | } | ||
| 139 | .moreSearchBtn:focus, | ||
| 140 | .moreSearchBtn:hover { | ||
| 141 | background-color: rgba(28, 200, 229, 0.6); | ||
| 142 | } | ||
| 143 | } | ||
| 144 | .dataGrid { | ||
| 145 | flex: 1; | ||
| 146 | .pagination { | ||
| 147 | padding: 18px 0; | ||
| 148 | } | ||
| 149 | } | ||
| 150 | } | ||
| 151 | </style> |
| 1 | <template> | 1 | <template> |
| 2 | <div class=""></div> | 2 | <div class="main"> |
| 3 | <SearchHead @getSearchCondition="getData"></SearchHead> | ||
| 4 | <div class="dataGrid" ref="dataGrid"> | ||
| 5 | <el-table | ||
| 6 | :data="tableData" | ||
| 7 | :height="tableHeight" | ||
| 8 | :row-class-name="tableRowClassName" | ||
| 9 | > | ||
| 10 | <el-table-column type="index" width="80" align="center" label="序号"> | ||
| 11 | </el-table-column> | ||
| 12 | <el-table-column label="操作" width="100"> | ||
| 13 | <template slot-scope="scope"> | ||
| 14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
| 15 | >办理</el-button | ||
| 16 | > | ||
| 17 | <el-button type="text" size="small">定位</el-button> | ||
| 18 | </template> | ||
| 19 | </el-table-column> | ||
| 20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | ||
| 21 | </el-table-column> | ||
| 22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> | ||
| 23 | </el-table-column> | ||
| 24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | ||
| 25 | </el-table-column> | ||
| 26 | <el-table-column prop="lx" align="left" width="120" label="类型"> | ||
| 27 | </el-table-column> | ||
| 28 | <el-table-column prop="qlr" align="left" width="120" label="权利人"> | ||
| 29 | </el-table-column> | ||
| 30 | <el-table-column prop="zl" align="left" label="坐落"> </el-table-column> | ||
| 31 | <el-table-column prop="zrsj" align="left" width="120" label="转入时间"> | ||
| 32 | </el-table-column> | ||
| 33 | <el-table-column prop="cjr" align="left" width="120" label="创建人"> | ||
| 34 | </el-table-column> | ||
| 35 | </el-table> | ||
| 36 | <div class="pagination"> | ||
| 37 | <el-pagination background layout="prev, pager, next" :total="1000"> | ||
| 38 | </el-pagination> | ||
| 39 | </div> | ||
| 40 | </div> | ||
| 41 | </div> | ||
| 3 | </template> | 42 | </template> |
| 4 | 43 | ||
| 5 | <script> | 44 | <script> |
| 45 | import SearchHead from "../../../components/searchHead/searchHead"; | ||
| 6 | export default { | 46 | export default { |
| 7 | name:"", | 47 | name: "", |
| 8 | components:{}, | 48 | components: { SearchHead }, |
| 9 | props:{}, | 49 | props: {}, |
| 10 | data(){ | 50 | data() { |
| 11 | return { | 51 | return { |
| 12 | } | 52 | formData: { |
| 13 | }, | 53 | user: "", |
| 14 | created(){}, | 54 | region: "", |
| 15 | mounted(){}, | 55 | type: [], |
| 16 | methods:{}, | 56 | }, |
| 17 | computed: {}, | 57 | tableData: [ |
| 18 | watch: {}, | 58 | { |
| 19 | } | 59 | bdcdyh: "610101001001GB00001W", |
| 60 | xmmc: "万科集团万科城", | ||
| 61 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
| 62 | lx: "宗地", | ||
| 63 | qlr: "李子新", | ||
| 64 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
| 65 | zrsj: "2020.09.07 ", | ||
| 66 | cjr: "李子新", | ||
| 67 | }, | ||
| 68 | ], | ||
| 69 | tableHeight: "", | ||
| 70 | }; | ||
| 71 | }, | ||
| 72 | created() {}, | ||
| 73 | mounted() { | ||
| 74 | for (let i = 0; i < 11; i++) { | ||
| 75 | let obj = { | ||
| 76 | bdcdyh: "610101001001GB00001W", | ||
| 77 | xmmc: "万科集团万科城", | ||
| 78 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
| 79 | lx: "自然幢", | ||
| 80 | qlr: "李子新", | ||
| 81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
| 82 | zrsj: "2020.09.07 ", | ||
| 83 | cjr: "李子新", | ||
| 84 | }; | ||
| 85 | this.tableData.push(obj); | ||
| 86 | } | ||
| 87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
| 88 | }, | ||
| 89 | methods: { | ||
| 90 | onSubmit() {}, | ||
| 91 | tableRowClassName({ row, rowIndex }) { | ||
| 92 | if (rowIndex % 2 !== 0) { | ||
| 93 | return "even-row"; | ||
| 94 | } else { | ||
| 95 | return ""; | ||
| 96 | } | ||
| 97 | }, | ||
| 98 | |||
| 99 | //获取子组件点击查询触发的事件 | ||
| 100 | getData(obj) { | ||
| 101 | console.log(obj); | ||
| 102 | //将obj作为参数调用接口查询表格数据 | ||
| 103 | }, | ||
| 104 | //点击办理 | ||
| 105 | handleClick(row) { | ||
| 106 | let path = ""; | ||
| 107 | switch (row.lx) { | ||
| 108 | case "自然幢": | ||
| 109 | path = "/zrz"; | ||
| 110 | break; | ||
| 111 | case "宗地": | ||
| 112 | path = "/zd"; | ||
| 113 | break; | ||
| 114 | default: | ||
| 115 | break; | ||
| 116 | } | ||
| 117 | this.$router.push(path); | ||
| 118 | }, | ||
| 119 | }, | ||
| 120 | computed: {}, | ||
| 121 | watch: {}, | ||
| 122 | }; | ||
| 20 | </script> | 123 | </script> |
| 21 | <style scoped lang="less"> | ||
| 22 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 124 | <style scoped lang="less"> | ||
| 125 | .main { | ||
| 126 | width: 100%; | ||
| 127 | height: 100%; | ||
| 128 | box-sizing: border-box; | ||
| 129 | padding: 0 18px; | ||
| 130 | display: flex; | ||
| 131 | flex-direction: column; | ||
| 132 | background-color: #fcfdff; | ||
| 133 | .demo-form-inline { | ||
| 134 | margin-top: 18px; | ||
| 135 | .moreSearchBtn { | ||
| 136 | background-color: #1ad6e1; | ||
| 137 | border-color: #1ad6e1; | ||
| 138 | } | ||
| 139 | .moreSearchBtn:focus, | ||
| 140 | .moreSearchBtn:hover { | ||
| 141 | background-color: rgba(28, 200, 229, 0.6); | ||
| 142 | } | ||
| 143 | } | ||
| 144 | .dataGrid { | ||
| 145 | flex: 1; | ||
| 146 | .pagination { | ||
| 147 | padding: 18px 0; | ||
| 148 | } | ||
| 149 | } | ||
| 150 | } | ||
| 151 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="main"> | 2 | <div class="main"> |
| 3 | <SearchHead @getSearchCondition="getData"></SearchHead> | 3 | <SearchHead @getSearchCondition="getData"></SearchHead> |
| 4 | <div class="dataGrid"> | 4 | <div class="dataGrid" ref="dataGrid"> |
| 5 | <el-table :data="tableData" :row-class-name="tableRowClassName"> | 5 | <el-table |
| 6 | :data="tableData" | ||
| 7 | :height="tableHeight" | ||
| 8 | :row-class-name="tableRowClassName" | ||
| 9 | > | ||
| 6 | <el-table-column type="index" width="80" align="center" label="序号"> | 10 | <el-table-column type="index" width="80" align="center" label="序号"> |
| 7 | </el-table-column> | 11 | </el-table-column> |
| 12 | <el-table-column label="操作" width="100"> | ||
| 13 | <template slot-scope="scope"> | ||
| 14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
| 15 | >办理</el-button | ||
| 16 | > | ||
| 17 | <el-button type="text" size="small">定位</el-button> | ||
| 18 | </template> | ||
| 19 | </el-table-column> | ||
| 8 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | 20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> |
| 9 | </el-table-column> | 21 | </el-table-column> |
| 10 | <el-table-column prop="xmmc" align="left" label="项目名称"> | 22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> |
| 11 | </el-table-column> | 23 | </el-table-column> |
| 12 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | 24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> |
| 13 | </el-table-column> | 25 | </el-table-column> |
| ... | @@ -33,7 +45,7 @@ | ... | @@ -33,7 +45,7 @@ |
| 33 | import SearchHead from "../../../components/searchHead/searchHead"; | 45 | import SearchHead from "../../../components/searchHead/searchHead"; |
| 34 | export default { | 46 | export default { |
| 35 | name: "", | 47 | name: "", |
| 36 | components: {SearchHead}, | 48 | components: { SearchHead }, |
| 37 | props: {}, | 49 | props: {}, |
| 38 | data() { | 50 | data() { |
| 39 | return { | 51 | return { |
| ... | @@ -54,6 +66,7 @@ export default { | ... | @@ -54,6 +66,7 @@ export default { |
| 54 | cjr: "李子新", | 66 | cjr: "李子新", |
| 55 | }, | 67 | }, |
| 56 | ], | 68 | ], |
| 69 | tableHeight: "", | ||
| 57 | }; | 70 | }; |
| 58 | }, | 71 | }, |
| 59 | created() {}, | 72 | created() {}, |
| ... | @@ -63,7 +76,7 @@ export default { | ... | @@ -63,7 +76,7 @@ export default { |
| 63 | bdcdyh: "610101001001GB00001W", | 76 | bdcdyh: "610101001001GB00001W", |
| 64 | xmmc: "万科集团万科城", | 77 | xmmc: "万科集团万科城", |
| 65 | bdcqzh: "陕(2017)西安市不动产权第00000", | 78 | bdcqzh: "陕(2017)西安市不动产权第00000", |
| 66 | lx: "宗地", | 79 | lx: "自然幢", |
| 67 | qlr: "李子新", | 80 | qlr: "李子新", |
| 68 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | 81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", |
| 69 | zrsj: "2020.09.07 ", | 82 | zrsj: "2020.09.07 ", |
| ... | @@ -71,6 +84,7 @@ export default { | ... | @@ -71,6 +84,7 @@ export default { |
| 71 | }; | 84 | }; |
| 72 | this.tableData.push(obj); | 85 | this.tableData.push(obj); |
| 73 | } | 86 | } |
| 87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
| 74 | }, | 88 | }, |
| 75 | methods: { | 89 | methods: { |
| 76 | onSubmit() {}, | 90 | onSubmit() {}, |
| ... | @@ -83,10 +97,25 @@ export default { | ... | @@ -83,10 +97,25 @@ export default { |
| 83 | }, | 97 | }, |
| 84 | 98 | ||
| 85 | //获取子组件点击查询触发的事件 | 99 | //获取子组件点击查询触发的事件 |
| 86 | getData(obj){ | 100 | getData(obj) { |
| 87 | console.log(obj); | 101 | console.log(obj); |
| 88 | //将obj作为参数调用接口查询表格数据 | 102 | //将obj作为参数调用接口查询表格数据 |
| 89 | } | 103 | }, |
| 104 | //点击办理 | ||
| 105 | handleClick(row) { | ||
| 106 | let path = ""; | ||
| 107 | switch (row.lx) { | ||
| 108 | case "自然幢": | ||
| 109 | path = "/zrz"; | ||
| 110 | break; | ||
| 111 | case "宗地": | ||
| 112 | path = "/zd"; | ||
| 113 | break; | ||
| 114 | default: | ||
| 115 | break; | ||
| 116 | } | ||
| 117 | this.$router.push(path); | ||
| 118 | }, | ||
| 90 | }, | 119 | }, |
| 91 | computed: {}, | 120 | computed: {}, |
| 92 | watch: {}, | 121 | watch: {}, |
| ... | @@ -99,8 +128,8 @@ export default { | ... | @@ -99,8 +128,8 @@ export default { |
| 99 | box-sizing: border-box; | 128 | box-sizing: border-box; |
| 100 | padding: 0 18px; | 129 | padding: 0 18px; |
| 101 | display: flex; | 130 | display: flex; |
| 102 | flex-direction: column; | 131 | flex-direction: column; |
| 103 | background-color: #FCFDFF; | 132 | background-color: #fcfdff; |
| 104 | .demo-form-inline { | 133 | .demo-form-inline { |
| 105 | margin-top: 18px; | 134 | margin-top: 18px; |
| 106 | .moreSearchBtn { | 135 | .moreSearchBtn { |
| ... | @@ -113,7 +142,7 @@ export default { | ... | @@ -113,7 +142,7 @@ export default { |
| 113 | } | 142 | } |
| 114 | } | 143 | } |
| 115 | .dataGrid { | 144 | .dataGrid { |
| 116 | flex: auto; | 145 | flex: 1; |
| 117 | .pagination { | 146 | .pagination { |
| 118 | padding: 18px 0; | 147 | padding: 18px 0; |
| 119 | } | 148 | } | ... | ... |
-
Please register or sign in to post a comment