style:房屋明细查询样式修改
Showing
2 changed files
with
222 additions
and
222 deletions
| 1 | <template> | 1 | <template> |
| 2 | <dialogBox title="房屋明细查询" @closeDialog="closeDialog" width="70%" :isButton="false" v-model="myValue"> | 2 | <dialogBox title="房屋明细查询" @closeDialog="closeDialog" width="75%" :isButton="false" v-model="myValue"> |
| 3 | <el-steps :active="activeStep" finish-status="success"> | 3 | <el-steps :active="activeStep" finish-status="success"> |
| 4 | <el-step title="条件录入"></el-step> | 4 | <el-step title="条件录入"></el-step> |
| 5 | <el-step title="结果查询"></el-step> | 5 | <el-step title="结果查询"></el-step> |
| 6 | <el-step title="结果展示"></el-step> | 6 | <el-step title="结果展示"></el-step> |
| 7 | </el-steps> | 7 | </el-steps> |
| 8 | <div v-if="isSearch"> | 8 | <div v-if="isSearch"> |
| 9 | <dydjbInfo ref="dydjbInfo"/> | 9 | <dydjbInfo ref="dydjbInfo" /> |
| 10 | </div> | 10 | </div> |
| 11 | <div class="jtfccx-edit" v-else> | 11 | <div class="jtfccx-edit" v-else> |
| 12 | <div class="jtfccx-edit-con"> | 12 | <div class="jtfccx-edit-con"> |
| 13 | <b class="title"></b> | 13 | <b class="title"></b> |
| 14 | <el-form :model="form" label-width="120px"> | 14 | <el-form :model="form" label-width="110px"> |
| 15 | <el-row> | 15 | <el-row> |
| 16 | <el-col :span="6"> | 16 | <el-col :span="6"> |
| 17 | <el-form-item label="查询用途" label-width="90px"> | 17 | <el-form-item label="查询用途" label-width="90px"> |
| 18 | <el-input v-model="form.djSqcxDO.cxyt" class="width200px"></el-input> | 18 | <el-input v-model="form.djSqcxDO.cxyt" class="width100"></el-input> |
| 19 | </el-form-item> | 19 | </el-form-item> |
| 20 | </el-col> | 20 | </el-col> |
| 21 | <el-col :span="6"> | 21 | <el-col :span="8"> |
| 22 | <el-form-item label="不动产权证号" label-width="120px"> | 22 | <el-form-item label="不动产权证号"> |
| 23 | <el-input v-model="form.djSqcxDO.bdcqzh" class="width200px"></el-input> | 23 | <el-input v-model="form.djSqcxDO.bdcqzh" class="width100"></el-input> |
| 24 | </el-form-item> | 24 | </el-form-item> |
| 25 | </el-col> | 25 | </el-col> |
| 26 | <el-col :span="12"> | 26 | <el-col :span="10"> |
| 27 | <el-form-item label="与产权人的关系"> | 27 | <el-form-item label="与产权人的关系"> |
| 28 | <el-radio-group v-model="form.djSqcxDO.ycqrgx"> | 28 | <el-radio-group v-model="form.djSqcxDO.ycqrgx"> |
| 29 | <el-radio label="1">房屋权利人</el-radio> | 29 | <el-radio label="1">房屋权利人</el-radio> |
| ... | @@ -43,9 +43,9 @@ | ... | @@ -43,9 +43,9 @@ |
| 43 | :pagination="false"> | 43 | :pagination="false"> |
| 44 | </lb-table> | 44 | </lb-table> |
| 45 | <div class="submit-button" style="padding-bottom:50px"> | 45 | <div class="submit-button" style="padding-bottom:50px"> |
| 46 | <el-button @click="resetClick" v-show="!isSearch">重置</el-button> | 46 | <el-button @click="resetClick" v-show="!isSearch">重置</el-button> |
| 47 | <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button> | 47 | <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button> |
| 48 | <el-button @click="closeDialog">关闭</el-button> | 48 | <el-button @click="closeDialog">关闭</el-button> |
| 49 | </div> | 49 | </div> |
| 50 | </div> | 50 | </div> |
| 51 | </div> | 51 | </div> |
| ... | @@ -53,230 +53,230 @@ | ... | @@ -53,230 +53,230 @@ |
| 53 | </template> | 53 | </template> |
| 54 | 54 | ||
| 55 | <script> | 55 | <script> |
| 56 | import { addFwmxCxjgXx, getFwmxInfo,printJtcfInfo } from "@/api/jtfc.js"; | 56 | import { addFwmxCxjgXx, getFwmxInfo, printJtcfInfo } from "@/api/jtfc.js"; |
| 57 | import { getPrintTemplateByCode } from "@/api/print"; | 57 | import { getPrintTemplateByCode } from "@/api/print"; |
| 58 | import { datas, sendThis } from "./dydjbdata"; | 58 | import { datas, sendThis } from "./dydjbdata"; |
| 59 | import { getLodop } from "@/utils/LodopFuncs" | 59 | import { getLodop } from "@/utils/LodopFuncs" |
| 60 | import dydjbInfo from "./dydjbInfo.vue"; | 60 | import dydjbInfo from "./dydjbInfo.vue"; |
| 61 | import { mapGetters } from "vuex"; | 61 | import { mapGetters } from "vuex"; |
| 62 | export default { | 62 | export default { |
| 63 | computed: { | 63 | computed: { |
| 64 | ...mapGetters(["dictData"]), | 64 | ...mapGetters(["dictData"]), |
| 65 | }, | 65 | }, |
| 66 | components: { dydjbInfo }, | 66 | components: { dydjbInfo }, |
| 67 | props: { | 67 | props: { |
| 68 | value: { type: Boolean, default: false }, | 68 | value: { type: Boolean, default: false }, |
| 69 | sqcxBsm: { type: String, default: "" }, | 69 | sqcxBsm: { type: String, default: "" }, |
| 70 | }, | 70 | }, |
| 71 | mounted () { | 71 | mounted () { |
| 72 | sendThis(this); | 72 | sendThis(this); |
| 73 | }, | 73 | }, |
| 74 | data () { | 74 | data () { |
| 75 | return { | 75 | return { |
| 76 | activeStep: 0, | 76 | activeStep: 0, |
| 77 | myValue: this.value, | 77 | myValue: this.value, |
| 78 | //是否查询 | 78 | //是否查询 |
| 79 | isSearch: false, | 79 | isSearch: false, |
| 80 | //查询结果列表字段 | 80 | //查询结果列表字段 |
| 81 | cxjgColumns: datas.columns(), | 81 | cxjgColumns: datas.columns(), |
| 82 | //申请人列表字段 | 82 | //申请人列表字段 |
| 83 | sqrColumns: datas.sqrCol(), | 83 | sqrColumns: datas.sqrCol(), |
| 84 | //权利人列表字段 | 84 | //权利人列表字段 |
| 85 | qlrColumns: datas.qlrCol(), | 85 | qlrColumns: datas.qlrCol(), |
| 86 | newData: { | 86 | newData: { |
| 87 | sqrxm: "", | 87 | sqrxm: "", |
| 88 | sqrzjlxbm: "", | 88 | sqrzjlxbm: "", |
| 89 | sqrzjhm: "", | 89 | sqrzjhm: "", |
| 90 | lxdh: "", | 90 | lxdh: "", |
| 91 | inputErr: false, | 91 | inputErr: false, |
| 92 | }, | 92 | }, |
| 93 | form: { | 93 | form: { |
| 94 | djSqcxDO: { ycqrgx: "1", cxyt: "",bdcqzh: "" }, | 94 | djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" }, |
| 95 | sqrList: [], | 95 | sqrList: [], |
| 96 | qlrList: [], | 96 | qlrList: [], |
| 97 | cxjgList: [], | 97 | cxjgList: [], |
| 98 | dyjlList: [], | 98 | dyjlList: [], |
| 99 | }, | ||
| 100 | }; | ||
| 101 | }, | ||
| 102 | watch: { | ||
| 103 | value (val) { | ||
| 104 | this.myValue = val; | ||
| 105 | let that = this | ||
| 106 | if (val) { | ||
| 107 | this.form.sqrList = [] | ||
| 108 | this.form.qlrList = [] | ||
| 109 | this.isSearch = false | ||
| 110 | if (this.sqcxBsm == "") { | ||
| 111 | that.add("sqr"); | ||
| 112 | that.add("qlr"); | ||
| 113 | } else { | ||
| 114 | that.loadData(); | ||
| 115 | } | ||
| 116 | } | ||
| 99 | }, | 117 | }, |
| 100 | }; | 118 | "form.djSqcxDO.ycqrgx" (val) { |
| 101 | }, | 119 | if (val == "1") { |
| 102 | watch: { | 120 | this.form.qlrList = _.cloneDeep(this.form.sqrList); |
| 103 | value (val) { | ||
| 104 | this.myValue = val; | ||
| 105 | let that = this | ||
| 106 | if (val) { | ||
| 107 | this.form.sqrList = [] | ||
| 108 | this.form.qlrList = [] | ||
| 109 | this.isSearch = false | ||
| 110 | if (this.sqcxBsm == "") { | ||
| 111 | that.add("sqr"); | ||
| 112 | that.add("qlr"); | ||
| 113 | } else { | 121 | } else { |
| 114 | that.loadData(); | 122 | this.form.qlrList = []; |
| 123 | this.add("qlr"); | ||
| 124 | } | ||
| 125 | }, | ||
| 126 | "form.sqrList" (val) { | ||
| 127 | if (this.form.djSqcxDO.ycqrgx == '1') { | ||
| 128 | this.form.qlrList = _.cloneDeep(this.form.sqrList) | ||
| 115 | } | 129 | } |
| 116 | } | 130 | } |
| 117 | }, | 131 | }, |
| 118 | "form.djSqcxDO.ycqrgx" (val) { | 132 | methods: { |
| 119 | if (val == "1") { | 133 | /** |
| 120 | this.form.qlrList = _.cloneDeep(this.form.sqrList); | 134 | * @description: closeDialog |
| 121 | } else { | 135 | * @author: renchao |
| 122 | this.form.qlrList = []; | 136 | */ |
| 123 | this.add("qlr"); | 137 | closeDialog () { |
| 124 | } | 138 | this.$emit("input", false); |
| 125 | }, | 139 | this.activeStep = 0; |
| 126 | "form.sqrList" (val) { | 140 | this.form = { |
| 127 | if (this.form.djSqcxDO.ycqrgx == '1') { | 141 | djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" }, |
| 128 | this.form.qlrList = _.cloneDeep(this.form.sqrList) | 142 | sqrList: [], |
| 129 | } | 143 | qlrList: [], |
| 130 | } | 144 | cxjgList: [], |
| 131 | }, | 145 | dyjlList: [], |
| 132 | methods: { | 146 | } |
| 133 | /** | 147 | }, |
| 134 | * @description: closeDialog | 148 | //加载详细信息 |
| 135 | * @author: renchao | 149 | /** |
| 136 | */ | 150 | * @description: 加载详细信息 |
| 137 | closeDialog () { | 151 | * @author: renchao |
| 138 | this.$emit("input", false); | 152 | */ |
| 139 | this.activeStep = 0; | 153 | loadData () { |
| 140 | this.form = { | 154 | this.$startLoading(); |
| 141 | djSqcxDO: { ycqrgx: "1", cxyt: "" ,bdcqzh: ""}, | 155 | getFwmxInfo({ sqcxBsm: this.sqcxBsm }).then((res) => { |
| 142 | sqrList: [], | 156 | this.$endLoading(); |
| 143 | qlrList: [], | 157 | if (res.code == 200) { |
| 144 | cxjgList: [], | 158 | this.activeStep = 2; |
| 145 | dyjlList: [], | 159 | this.isSearch = true; |
| 146 | } | 160 | this.$nextTick(() => { |
| 147 | }, | 161 | this.$refs.dydjbInfo.setResult(res.result) |
| 148 | //加载详细信息 | 162 | }) |
| 149 | /** | 163 | } |
| 150 | * @description: 加载详细信息 | 164 | }); |
| 151 | * @author: renchao | 165 | }, |
| 152 | */ | 166 | //查询结果 |
| 153 | loadData () { | 167 | /** |
| 154 | this.$startLoading(); | 168 | * @description: 查询结果 |
| 155 | getFwmxInfo({ sqcxBsm: this.sqcxBsm }).then((res) => { | 169 | * @author: renchao |
| 156 | this.$endLoading(); | 170 | */ |
| 157 | if (res.code == 200) { | 171 | queryChick () { |
| 158 | this.activeStep = 2; | 172 | this.$startLoading(); |
| 173 | this.activeStep = 1; | ||
| 174 | addFwmxCxjgXx(this.form).then((res) => { | ||
| 175 | this.$endLoading(); | ||
| 176 | if (res.code == 200) { | ||
| 177 | this.activeStep = 2; | ||
| 159 | this.isSearch = true; | 178 | this.isSearch = true; |
| 160 | this.$nextTick(() => { | 179 | this.$nextTick(() => { |
| 161 | this.$refs.dydjbInfo.setResult(res.result) | 180 | this.$refs.dydjbInfo.setResult(res.result) |
| 162 | }) | 181 | }) |
| 182 | this.$parent.queryClick(); | ||
| 183 | } | ||
| 184 | }); | ||
| 185 | }, | ||
| 186 | //重置 | ||
| 187 | /** | ||
| 188 | * @description: 重置 | ||
| 189 | * @author: renchao | ||
| 190 | */ | ||
| 191 | resetClick () { | ||
| 192 | this.form.djSqcxDO = { ycqrgx: "1", cxyt: "", bdcqzh: "" }; | ||
| 193 | this.form.sqrList = _.cloneDeep([this.newData]); | ||
| 194 | this.form.qlrList = _.cloneDeep([this.newData]); | ||
| 195 | this.form.cxjgList = []; | ||
| 196 | this.form.dyjlList = []; | ||
| 197 | this.isSearch = false; | ||
| 198 | }, | ||
| 199 | /** | ||
| 200 | * @description: handleRead | ||
| 201 | * @author: renchao | ||
| 202 | */ | ||
| 203 | handleRead (scope) { }, | ||
| 204 | //添加申请人或权利人 | ||
| 205 | /** | ||
| 206 | * @description: 添加申请人或权利人 | ||
| 207 | * @param {*} type | ||
| 208 | * @author: renchao | ||
| 209 | */ | ||
| 210 | add (type) { | ||
| 211 | if (type == "sqr") { | ||
| 212 | this.form.sqrList.push(_.cloneDeep(this.newData)); | ||
| 213 | } else { | ||
| 214 | this.form.qlrList.push(_.cloneDeep(this.newData)); | ||
| 163 | } | 215 | } |
| 164 | }); | 216 | }, |
| 165 | }, | 217 | //移除申请人或权利人 |
| 166 | //查询结果 | 218 | /** |
| 167 | /** | 219 | * @description: 移除申请人或权利人 |
| 168 | * @description: 查询结果 | 220 | * @param {*} index |
| 169 | * @author: renchao | 221 | * @param {*} row |
| 170 | */ | 222 | * @param {*} type |
| 171 | queryChick () { | 223 | * @author: renchao |
| 172 | this.$startLoading(); | 224 | */ |
| 173 | this.activeStep = 1; | 225 | remove (index, row, type) { |
| 174 | addFwmxCxjgXx(this.form).then((res) => { | 226 | if (type == "sqr") { |
| 175 | this.$endLoading(); | 227 | this.form.sqrList.splice(index, 1); |
| 176 | if (res.code == 200) { | 228 | } else { |
| 177 | this.activeStep = 2; | 229 | this.form.qlrList.splice(index, 1); |
| 178 | this.isSearch = true; | ||
| 179 | this.$nextTick(() => { | ||
| 180 | this.$refs.dydjbInfo.setResult(res.result) | ||
| 181 | }) | ||
| 182 | this.$parent.queryClick(); | ||
| 183 | } | 230 | } |
| 184 | }); | 231 | }, |
| 185 | }, | 232 | //电话号码校验 |
| 186 | //重置 | 233 | /** |
| 187 | /** | 234 | * @description: 电话号码校验 |
| 188 | * @description: 重置 | 235 | * @param {*} row |
| 189 | * @author: renchao | 236 | * @author: renchao |
| 190 | */ | 237 | */ |
| 191 | resetClick () { | 238 | teltest (row) { |
| 192 | this.form.djSqcxDO = { ycqrgx: "1", cxyt: "",bdcqzh: "" }; | 239 | const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/; |
| 193 | this.form.sqrList = _.cloneDeep([this.newData]); | 240 | if (row.lxdh == "" || row.lxdh.length <= 10 || !reg.test(row.lxdh)) { |
| 194 | this.form.qlrList = _.cloneDeep([this.newData]); | 241 | row.inputErr = true; |
| 195 | this.form.cxjgList = []; | 242 | return false; |
| 196 | this.form.dyjlList = []; | 243 | } else { |
| 197 | this.isSearch = false; | 244 | row.inputErr = false; |
| 198 | }, | 245 | return true; |
| 199 | /** | 246 | } |
| 200 | * @description: handleRead | 247 | }, |
| 201 | * @author: renchao | ||
| 202 | */ | ||
| 203 | handleRead (scope) { }, | ||
| 204 | //添加申请人或权利人 | ||
| 205 | /** | ||
| 206 | * @description: 添加申请人或权利人 | ||
| 207 | * @param {*} type | ||
| 208 | * @author: renchao | ||
| 209 | */ | ||
| 210 | add (type) { | ||
| 211 | if (type == "sqr") { | ||
| 212 | this.form.sqrList.push(_.cloneDeep(this.newData)); | ||
| 213 | } else { | ||
| 214 | this.form.qlrList.push(_.cloneDeep(this.newData)); | ||
| 215 | } | ||
| 216 | }, | ||
| 217 | //移除申请人或权利人 | ||
| 218 | /** | ||
| 219 | * @description: 移除申请人或权利人 | ||
| 220 | * @param {*} index | ||
| 221 | * @param {*} row | ||
| 222 | * @param {*} type | ||
| 223 | * @author: renchao | ||
| 224 | */ | ||
| 225 | remove (index, row, type) { | ||
| 226 | if (type == "sqr") { | ||
| 227 | this.form.sqrList.splice(index, 1); | ||
| 228 | } else { | ||
| 229 | this.form.qlrList.splice(index, 1); | ||
| 230 | } | ||
| 231 | }, | ||
| 232 | //电话号码校验 | ||
| 233 | /** | ||
| 234 | * @description: 电话号码校验 | ||
| 235 | * @param {*} row | ||
| 236 | * @author: renchao | ||
| 237 | */ | ||
| 238 | teltest (row) { | ||
| 239 | const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/; | ||
| 240 | if (row.lxdh == "" || row.lxdh.length <= 10 || !reg.test(row.lxdh)) { | ||
| 241 | row.inputErr = true; | ||
| 242 | return false; | ||
| 243 | } else { | ||
| 244 | row.inputErr = false; | ||
| 245 | return true; | ||
| 246 | } | ||
| 247 | }, | 248 | }, |
| 248 | }, | 249 | }; |
| 249 | }; | ||
| 250 | </script> | 250 | </script> |
| 251 | <style scoped lang="scss"> | 251 | <style scoped lang="scss"> |
| 252 | @import "~@/styles/mixin.scss"; | 252 | @import "~@/styles/mixin.scss"; |
| 253 | @import "~@/styles/public.scss"; | 253 | @import "~@/styles/public.scss"; |
| 254 | 254 | ||
| 255 | .title { | 255 | .title { |
| 256 | padding-bottom: 10px; | 256 | padding-bottom: 10px; |
| 257 | margin-bottom: 10px; | 257 | margin-bottom: 10px; |
| 258 | display: block; | 258 | display: block; |
| 259 | border-bottom: 1px solid $borderColor; | 259 | border-bottom: 1px solid $borderColor; |
| 260 | } | 260 | } |
| 261 | 261 | ||
| 262 | .jtfccx-edit { | 262 | .jtfccx-edit { |
| 263 | @include flex; | 263 | @include flex; |
| 264 | flex-direction: column; | 264 | flex-direction: column; |
| 265 | overflow-y: hidden; | 265 | overflow-y: hidden; |
| 266 | max-height: 85vh; | 266 | max-height: 85vh; |
| 267 | padding: 0 2px; | 267 | padding: 0 2px; |
| 268 | 268 | ||
| 269 | .jtfccx-edit-con { | 269 | .jtfccx-edit-con { |
| 270 | flex: 1; | 270 | flex: 1; |
| 271 | height: 100%; | 271 | height: 100%; |
| 272 | overflow-y: scroll; | 272 | overflow-y: scroll; |
| 273 | } | 273 | } |
| 274 | 274 | ||
| 275 | .submit-button { | 275 | .submit-button { |
| 276 | text-align: center; | 276 | text-align: center; |
| 277 | height: 52px; | 277 | height: 52px; |
| 278 | padding-top: 10px; | 278 | padding-top: 10px; |
| 279 | background-color: #fff; | 279 | background-color: #fff; |
| 280 | } | ||
| 280 | } | 281 | } |
| 281 | } | ||
| 282 | </style> | 282 | </style> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-row> | 5 | <el-row> |
| 6 | <el-col :span="24" class="btnColRight"> | 6 | <el-col :span="24" class="btnColRight"> |
| 7 | <el-form-item> | 7 | <el-form-item> |
| 8 | <el-button type="primary" @click="fetchData">查询</el-button> | 8 | <!-- <el-button type="primary" @click="fetchData">查询</el-button> --> |
| 9 | <el-button type="primary" @click="openAddDialog">新增</el-button> | 9 | <el-button type="primary" @click="openAddDialog">新增</el-button> |
| 10 | </el-form-item> | 10 | </el-form-item> |
| 11 | </el-col> | 11 | </el-col> | ... | ... |
-
Please register or sign in to post a comment