111
Showing
27 changed files
with
0 additions
and
7190 deletions
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-17 13:51:29 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData"> | ||
| 8 | </lb-table> | ||
| 9 | </template> | ||
| 10 | <script> | ||
| 11 | import addQlr from './dialog/addQlr.vue' | ||
| 12 | import { mapGetters } from 'vuex' | ||
| 13 | export default { | ||
| 14 | components: { | ||
| 15 | addQlr | ||
| 16 | }, | ||
| 17 | computed: { | ||
| 18 | ...mapGetters(["dictData"]), | ||
| 19 | }, | ||
| 20 | props: { | ||
| 21 | tableData: { | ||
| 22 | type: Array, | ||
| 23 | default: function () { | ||
| 24 | return [] | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | gyfs: { | ||
| 28 | type: String, | ||
| 29 | default: '1' | ||
| 30 | } | ||
| 31 | }, | ||
| 32 | data () { | ||
| 33 | return { | ||
| 34 | key: 0, | ||
| 35 | dataIndex: 0, | ||
| 36 | dialog: false, | ||
| 37 | details: {}, | ||
| 38 | tableDataList: [], | ||
| 39 | qlrCommonTable: [ | ||
| 40 | { | ||
| 41 | label: '序号', | ||
| 42 | type: 'index', | ||
| 43 | width: '50', | ||
| 44 | render: (h, scope) => { | ||
| 45 | return ( | ||
| 46 | <div> | ||
| 47 | {scope.$index + 1} | ||
| 48 | </div> | ||
| 49 | ) | ||
| 50 | } | ||
| 51 | }, | ||
| 52 | { | ||
| 53 | prop: "qllxmc", | ||
| 54 | label: "权利类型" | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "bdcqzh", | ||
| 58 | label: "不动产权证号" | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "qlrmc", | ||
| 62 | label: "权利人" | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "qlrzjhm", | ||
| 66 | label: "证件号码" | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "bdcdyh", | ||
| 70 | label: "不动产单元号" | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "qlxzmc", | ||
| 74 | label: "权利性质" | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "qlytmc", | ||
| 78 | label: "用途" | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "qlmjmc", | ||
| 82 | label: "面积" | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "zl", | ||
| 86 | label: "坐落" | ||
| 87 | }, | ||
| 88 | ], | ||
| 89 | column: this.qlrCommonTable | ||
| 90 | } | ||
| 91 | }, | ||
| 92 | watch: { | ||
| 93 | tableData: { | ||
| 94 | handler: function (val, oldVal) { | ||
| 95 | let that = this | ||
| 96 | if (val.length == 0 || !val) { | ||
| 97 | that.tableDataList = _.cloneDeep([{ | ||
| 98 | sqrmc: '', | ||
| 99 | dlrzjlx: '', | ||
| 100 | dlrzjh: '', | ||
| 101 | fr: '' | ||
| 102 | }]) | ||
| 103 | } else { | ||
| 104 | that.tableDataList = _.cloneDeep(val) | ||
| 105 | } | ||
| 106 | }, | ||
| 107 | immediate: true, | ||
| 108 | deep: true | ||
| 109 | }, | ||
| 110 | gyfs: { | ||
| 111 | handler (newVal, oldValue) { | ||
| 112 | let dataList = _.cloneDeep(this.qlrCommonTable) | ||
| 113 | if (newVal == '1') { | ||
| 114 | this.column = _.cloneDeep(dataList).slice(1, dataList.length) | ||
| 115 | } else if ((newVal == '2')) { | ||
| 116 | this.column = dataList | ||
| 117 | } else { | ||
| 118 | this.column = _.cloneDeep(dataList) | ||
| 119 | this.column.splice( | ||
| 120 | 2, 0, { | ||
| 121 | prop: "qlbl", | ||
| 122 | label: "份数" | ||
| 123 | }) | ||
| 124 | } | ||
| 125 | }, | ||
| 126 | immediate: true | ||
| 127 | } | ||
| 128 | }, | ||
| 129 | methods: { | ||
| 130 | } | ||
| 131 | } | ||
| 132 | </script> | ||
| 133 | <style scoped lang='scss'> | ||
| 134 | /deep/.el-table th { | ||
| 135 | height: 30px !important; | ||
| 136 | } | ||
| 137 | /deep/.el-table--small .el-table__cell { | ||
| 138 | padding: 5px; | ||
| 139 | } | ||
| 140 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-17 13:51:29 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData"> | ||
| 8 | </lb-table> | ||
| 9 | </template> | ||
| 10 | <script> | ||
| 11 | import addQlr from './dialog/addQlr.vue' | ||
| 12 | import { mapGetters } from 'vuex' | ||
| 13 | export default { | ||
| 14 | components: { | ||
| 15 | addQlr | ||
| 16 | }, | ||
| 17 | computed: { | ||
| 18 | ...mapGetters(["dictData"]), | ||
| 19 | }, | ||
| 20 | props: { | ||
| 21 | tableData: { | ||
| 22 | type: Array, | ||
| 23 | default: function () { | ||
| 24 | return [] | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | gyfs: { | ||
| 28 | type: String, | ||
| 29 | default: '1' | ||
| 30 | } | ||
| 31 | }, | ||
| 32 | data () { | ||
| 33 | return { | ||
| 34 | key: 0, | ||
| 35 | dataIndex: 0, | ||
| 36 | dialog: false, | ||
| 37 | details: {}, | ||
| 38 | tableDataList: [], | ||
| 39 | qlrCommonTable: [ | ||
| 40 | { | ||
| 41 | label: '序号', | ||
| 42 | type: 'index', | ||
| 43 | width: '50', | ||
| 44 | render: (h, scope) => { | ||
| 45 | return ( | ||
| 46 | <div> | ||
| 47 | {scope.$index + 1} | ||
| 48 | </div> | ||
| 49 | ) | ||
| 50 | } | ||
| 51 | }, | ||
| 52 | { | ||
| 53 | prop: "yg", | ||
| 54 | label: "原告" | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "cfjg", | ||
| 58 | label: "查封机关" | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "cfwh", | ||
| 62 | label: "查封文号" | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "cfqssj", | ||
| 66 | label: "查封开始时间" | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "cfjssj", | ||
| 70 | label: "查封结束时间" | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "cflxmc", | ||
| 74 | label: "查封类型" | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "ywrmc", | ||
| 78 | label: "被执行人" | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "bcfzh", | ||
| 82 | label: "被查封证号" | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "bdcdyh", | ||
| 86 | label: "不动产单元号" | ||
| 87 | }, | ||
| 88 | { | ||
| 89 | prop: "zl", | ||
| 90 | label: "坐落" | ||
| 91 | }, | ||
| 92 | |||
| 93 | |||
| 94 | ], | ||
| 95 | column: this.qlrCommonTable | ||
| 96 | } | ||
| 97 | }, | ||
| 98 | watch: { | ||
| 99 | tableData: { | ||
| 100 | handler: function (val, oldVal) { | ||
| 101 | let that = this | ||
| 102 | if (val.length == 0 || !val) { | ||
| 103 | that.tableDataList = _.cloneDeep([{ | ||
| 104 | sqrmc: '', | ||
| 105 | dlrzjlx: '', | ||
| 106 | dlrzjh: '', | ||
| 107 | fr: '' | ||
| 108 | }]) | ||
| 109 | } else { | ||
| 110 | that.tableDataList = _.cloneDeep(val) | ||
| 111 | } | ||
| 112 | }, | ||
| 113 | immediate: true, | ||
| 114 | deep: true | ||
| 115 | }, | ||
| 116 | gyfs: { | ||
| 117 | handler (newVal, oldValue) { | ||
| 118 | let dataList = _.cloneDeep(this.qlrCommonTable) | ||
| 119 | if (newVal == '1') { | ||
| 120 | this.column = _.cloneDeep(dataList).slice(1, dataList.length) | ||
| 121 | } else if ((newVal == '2')) { | ||
| 122 | this.column = dataList | ||
| 123 | } else { | ||
| 124 | this.column = _.cloneDeep(dataList) | ||
| 125 | this.column.splice( | ||
| 126 | 2, 0, { | ||
| 127 | prop: "qlbl", | ||
| 128 | label: "份数" | ||
| 129 | }) | ||
| 130 | } | ||
| 131 | }, | ||
| 132 | immediate: true | ||
| 133 | } | ||
| 134 | }, | ||
| 135 | methods: { | ||
| 136 | } | ||
| 137 | } | ||
| 138 | </script> | ||
| 139 | <style scoped lang='scss'> | ||
| 140 | /deep/.el-table th { | ||
| 141 | height: 30px !important; | ||
| 142 | } | ||
| 143 | /deep/.el-table--small .el-table__cell { | ||
| 144 | padding: 5px; | ||
| 145 | } | ||
| 146 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-10-24 16:08:44 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="clxx"> | ||
| 8 | <!-- 材料预览 --> | ||
| 9 | <div class="clyl-box"> | ||
| 10 | <div class="menu-tree"> | ||
| 11 | <el-button | ||
| 12 | type="primary" | ||
| 13 | native-type="submit" | ||
| 14 | @click="viewDetail" | ||
| 15 | style="width: 100%; margin-top: 10px">申请材料目录</el-button> | ||
| 16 | <div class="item"> | ||
| 17 | 材料目录({{ tableData.length }}) | ||
| 18 | <div class="tableList"> | ||
| 19 | <div | ||
| 20 | style=" | ||
| 21 | text-align: center; | ||
| 22 | line-height: 20px; | ||
| 23 | color: black; | ||
| 24 | font-size: 14px; | ||
| 25 | " | ||
| 26 | v-if="tableData.length == 0"> | ||
| 27 | 暂无数据 | ||
| 28 | </div> | ||
| 29 | <div | ||
| 30 | v-for="(item, index) in tableData" | ||
| 31 | :key="item.bsmSj" | ||
| 32 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" | ||
| 33 | @click="treeClick(item, index)"> | ||
| 34 | <span v-if="item.isrequired == 1" class="required">必选</span> | ||
| 35 | <span class="item_name">{{ item.sjmc }}</span> | ||
| 36 | <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span> | ||
| 37 | </div> | ||
| 38 | </div> | ||
| 39 | </div> | ||
| 40 | <el-button | ||
| 41 | type="primary" | ||
| 42 | native-type="submit" | ||
| 43 | style="width: 100%" | ||
| 44 | @click="handleAdd()" | ||
| 45 | v-if="ableOperation">新增</el-button> | ||
| 46 | </div> | ||
| 47 | <image-preview | ||
| 48 | ref="imageRef" | ||
| 49 | :key="imgKey" | ||
| 50 | v-if="tableData.length > 0" | ||
| 51 | :previewImg="previewImg" | ||
| 52 | :ableOperation="ableOperation" | ||
| 53 | @updateList="updateList" | ||
| 54 | @nextPriview="nextPriview" | ||
| 55 | @prevPriview="prevPriview" /> | ||
| 56 | </div> | ||
| 57 | <clxxAddDialog v-model="isDialog" /> | ||
| 58 | </div> | ||
| 59 | </template> | ||
| 60 | <script> | ||
| 61 | import { mapGetters } from "vuex"; | ||
| 62 | import clxxAddDialog from "../dialog/clxxAddDialog.vue"; | ||
| 63 | import clxxDetailDialog from "../dialog/clxxDetailDialog.vue"; | ||
| 64 | import imagePreview from "@/views/components/imagePreview.vue"; | ||
| 65 | import { InitClml, saveClml, getClmxList } from "@/api/clxx.js"; | ||
| 66 | export default { | ||
| 67 | components: { clxxAddDialog, imagePreview, clxxDetailDialog }, | ||
| 68 | data () { | ||
| 69 | return { | ||
| 70 | imgKey: 0, | ||
| 71 | //表单是否可操作 | ||
| 72 | ableOperation: true, | ||
| 73 | isDialog: false, | ||
| 74 | iclass: "", | ||
| 75 | // 材料目录选中 | ||
| 76 | treeCheckIndex: 0, | ||
| 77 | treeCheckId: "", | ||
| 78 | key: 0, | ||
| 79 | tableData: [], | ||
| 80 | previewImg: { | ||
| 81 | // 收件标识码 | ||
| 82 | bsmSj: "", | ||
| 83 | bsmSlsq: this.$parent.bsmSlsq, | ||
| 84 | index: 0, | ||
| 85 | selectedIndex: 0, | ||
| 86 | imgList: [], | ||
| 87 | }, | ||
| 88 | }; | ||
| 89 | }, | ||
| 90 | computed: { | ||
| 91 | ...mapGetters(["dictData"]), | ||
| 92 | }, | ||
| 93 | created () { | ||
| 94 | this.clmlInitList(1); | ||
| 95 | }, | ||
| 96 | computed: { | ||
| 97 | ...mapGetters(["workFresh"]), | ||
| 98 | }, | ||
| 99 | watch: { | ||
| 100 | workFresh: { | ||
| 101 | handler (newVal, oldVal) { | ||
| 102 | if (newVal) this.clmlInitList(1); | ||
| 103 | }, | ||
| 104 | }, | ||
| 105 | }, | ||
| 106 | mounted () { | ||
| 107 | this.ableOperation = this.$parent.ableOperation; | ||
| 108 | }, | ||
| 109 | methods: { | ||
| 110 | /** | ||
| 111 | * @description: 自动预览 | ||
| 112 | * @author: renchao | ||
| 113 | */ | ||
| 114 | nextPriview () { | ||
| 115 | if (this.treeCheckIndex < this.tableData.length) { | ||
| 116 | this.treeCheckIndex++; | ||
| 117 | if (this.tableData[this.treeCheckIndex]) { | ||
| 118 | this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj; | ||
| 119 | // 判断页数 | ||
| 120 | let ys = this.tableData[this.treeCheckIndex].ys | ||
| 121 | this.previewImg.index = 0; | ||
| 122 | // 获取材料明细 | ||
| 123 | if (ys > 0) { | ||
| 124 | getClmxList(this.treeCheckId).then(res => { | ||
| 125 | this.previewImg.imgList = res.result ? res.result : []; | ||
| 126 | }) | ||
| 127 | } else { | ||
| 128 | this.previewImg.imgList = [] | ||
| 129 | } | ||
| 130 | this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj; | ||
| 131 | } else { | ||
| 132 | this.$message.error('没有最后一张了'); | ||
| 133 | } | ||
| 134 | } | ||
| 135 | }, | ||
| 136 | /** | ||
| 137 | * @description: prevPriview | ||
| 138 | * @author: renchao | ||
| 139 | */ | ||
| 140 | prevPriview () { | ||
| 141 | if (this.treeCheckIndex >= 1) { | ||
| 142 | this.treeCheckIndex--; | ||
| 143 | this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj; | ||
| 144 | // 判断页数 | ||
| 145 | let ys = this.tableData[this.treeCheckIndex].ys | ||
| 146 | if (ys > 0) { | ||
| 147 | // 获取材料明细 | ||
| 148 | getClmxList(this.treeCheckId).then(res => { | ||
| 149 | this.previewImg.imgList = res.result ? res.result : []; | ||
| 150 | this.previewImg.index = this.previewImg.imgList.length - 1; | ||
| 151 | }) | ||
| 152 | } else { | ||
| 153 | this.previewImg.imgList = []; | ||
| 154 | this.previewImg.index = 0 | ||
| 155 | } | ||
| 156 | this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj; | ||
| 157 | } else { | ||
| 158 | this.$message.error('没有第一张了'); | ||
| 159 | } | ||
| 160 | }, | ||
| 161 | /** | ||
| 162 | * @description: 材料目录明细初始化 | ||
| 163 | * @param {*} type | ||
| 164 | * @author: renchao | ||
| 165 | */ | ||
| 166 | clmlInitList (type) { | ||
| 167 | //type 1：列表初始化 2：新增材料 | ||
| 168 | return new Promise((resolve) => { | ||
| 169 | this.unitData = this.$parent.unitData; | ||
| 170 | var formdata = new FormData(); | ||
| 171 | formdata.append("bsmSlsq", this.$parent.bsmSlsq); | ||
| 172 | formdata.append("bsmSldy", this.$parent.currentSelectProps.bsmSldy); | ||
| 173 | |||
| 174 | InitClml(formdata).then((res) => { | ||
| 175 | if (res.code == 200) { | ||
| 176 | resolve(res.code); | ||
| 177 | if (res.result && res.result.length > 0) { | ||
| 178 | this.tableData = res.result; | ||
| 179 | if (type == 1) { | ||
| 180 | this.treeClick(this.tableData[0], 0); | ||
| 181 | } else if (type == 2) { | ||
| 182 | //新增材料后刷新列表焦点置于新增的对象上 | ||
| 183 | this.treeClick( | ||
| 184 | this.tableData[this.tableData.length - 1], | ||
| 185 | this.tableData.length - 1 | ||
| 186 | ); | ||
| 187 | } | ||
| 188 | } | ||
| 189 | } else { | ||
| 190 | this.$message.error(res.message); | ||
| 191 | } | ||
| 192 | }); | ||
| 193 | }); | ||
| 194 | }, | ||
| 195 | /** | ||
| 196 | * @description: setChecked | ||
| 197 | * @param {*} item | ||
| 198 | * @author: renchao | ||
| 199 | */ | ||
| 200 | setChecked (item) { | ||
| 201 | this.treeCheckId = item.bsmSj; | ||
| 202 | this.title = item.sjmc; | ||
| 203 | this.titleYs = 1; | ||
| 204 | this.titleNum = item.children.length; | ||
| 205 | this.previewImg.imgList = item.children; | ||
| 206 | this.previewImg.bsmSj = item.bsmSj; | ||
| 207 | }, | ||
| 208 | /** | ||
| 209 | * @description: updateList | ||
| 210 | * @param {*} val | ||
| 211 | * @author: renchao | ||
| 212 | */ | ||
| 213 | updateList (val) { | ||
| 214 | let that = this; | ||
| 215 | if (val.children.length != 0) { | ||
| 216 | //删除最后一张图片时 val=null | ||
| 217 | this.tableData.forEach((item) => { | ||
| 218 | if (item.bsmSj === val.bsmSj) { | ||
| 219 | item.ys = val.children.length; | ||
| 220 | } | ||
| 221 | }); | ||
| 222 | this.previewImg.imgList = _.cloneDeep(val.children); | ||
| 223 | if (this.previewImg.index == this.previewImg.imgList.length) { | ||
| 224 | this.previewImg.index = this.previewImg.index - 1; | ||
| 225 | } | ||
| 226 | this.key++ | ||
| 227 | } else { | ||
| 228 | this.previewImg.imgList = []; | ||
| 229 | this.tableData.forEach((item, index) => { | ||
| 230 | if (this.treeCheckId == item.bsmSj) { | ||
| 231 | item.ys = 0; | ||
| 232 | that.treeCheckIndex = index; | ||
| 233 | } | ||
| 234 | }); | ||
| 235 | } | ||
| 236 | }, | ||
| 237 | /** | ||
| 238 | * @description: 添加材料目录 | ||
| 239 | * @author: renchao | ||
| 240 | */ | ||
| 241 | handleAdd () { | ||
| 242 | this.isDialog = true; | ||
| 243 | }, | ||
| 244 | /** | ||
| 245 | * @description: 新增弹窗保存 | ||
| 246 | * @param {*} data | ||
| 247 | * @author: renchao | ||
| 248 | */ | ||
| 249 | addSave (data) { | ||
| 250 | let obj = { | ||
| 251 | bsmSlsq: this.$parent.bsmSlsq, | ||
| 252 | isrequired: "1", | ||
| 253 | sjmc: data.clmc, | ||
| 254 | sjsl: 0, | ||
| 255 | smzt: "", | ||
| 256 | ys: 0, | ||
| 257 | sjlx: data.cllx, | ||
| 258 | sfxjcl: "1", // 是否必选 | ||
| 259 | sfggcl: data.sfggcl, | ||
| 260 | }; | ||
| 261 | //是否公共材料 | ||
| 262 | if (data.sfggcl == "0") { | ||
| 263 | obj["bsmSldy"] = this.$parent.currentSelectProps.bsmSldy; | ||
| 264 | } | ||
| 265 | if (this.$route.query?.djywbm == "DJBBL") { | ||
| 266 | obj.bsmSldy = this.$parent.bsmRepair | ||
| 267 | } | ||
| 268 | saveClml(obj).then(async (res) => { | ||
| 269 | if (res.code == 200) { | ||
| 270 | let res = await this.clmlInitList(2); | ||
| 271 | if (res == 200) | ||
| 272 | this.$message({ | ||
| 273 | message: "新增成功", | ||
| 274 | type: "success", | ||
| 275 | }); | ||
| 276 | } | ||
| 277 | }); | ||
| 278 | }, | ||
| 279 | /** | ||
| 280 | * @description: 材料目录点击选中 | ||
| 281 | * @param {*} item | ||
| 282 | * @param {*} index | ||
| 283 | * @author: renchao | ||
| 284 | */ | ||
| 285 | treeClick (item, index) { | ||
| 286 | this.previewImg.index = 0; | ||
| 287 | this.treeCheckId = item?.bsmSj; | ||
| 288 | this.treeCheckIndex = index; | ||
| 289 | // 获取材料明细 | ||
| 290 | getClmxList(item.bsmSj).then(res => { | ||
| 291 | this.previewImg.imgList = res.result ? res.result : []; | ||
| 292 | }) | ||
| 293 | this.previewImg.bsmSj = item?.bsmSj; | ||
| 294 | if (this.$refs.imageRef) { | ||
| 295 | this.$refs.imageRef.initialIndex = 0 | ||
| 296 | } | ||
| 297 | this.imgKey++ | ||
| 298 | }, | ||
| 299 | /** | ||
| 300 | * @description: 小图片点击 | ||
| 301 | * @param {*} item | ||
| 302 | * @param {*} index | ||
| 303 | * @author: renchao | ||
| 304 | */ | ||
| 305 | imgClick (item, index) { | ||
| 306 | this.showImg = item; | ||
| 307 | this.titleYs = index + 1; | ||
| 308 | }, | ||
| 309 | //查看明细 | ||
| 310 | async viewDetail () { | ||
| 311 | await this.clmlInitList(); | ||
| 312 | this.$store.dispatch("user/reWorkFresh", false); | ||
| 313 | this.$popupDialog( | ||
| 314 | "申请材料目录", | ||
| 315 | "workflow/components/dialog/clxxDetailDialog", | ||
| 316 | { | ||
| 317 | data: this.tableData, | ||
| 318 | bsmSldy: this.$parent.currentSelectProps.bsmSldy, | ||
| 319 | unitData: this.$parent.unitData, | ||
| 320 | ableOperation: this.$parent.ableOperation, | ||
| 321 | bsmRepair: this.$parent.bsmRepair | ||
| 322 | }, | ||
| 323 | "60%", | ||
| 324 | true | ||
| 325 | ) | ||
| 326 | }, | ||
| 327 | //设置tableData | ||
| 328 | setTableData (tableData) { | ||
| 329 | this.$nextTick((res) => { | ||
| 330 | this.tableData = tableData; | ||
| 331 | }) | ||
| 332 | } | ||
| 333 | } | ||
| 334 | } | ||
| 335 | </script> | ||
| 336 | <style scoped lang="scss"> | ||
| 337 | @import "~@/styles/mixin.scss"; | ||
| 338 | |||
| 339 | .active { | ||
| 340 | background: $light-blue !important; | ||
| 341 | color: #fff; | ||
| 342 | } | ||
| 343 | |||
| 344 | .required { | ||
| 345 | font-size: 12px; | ||
| 346 | color: $pink; | ||
| 347 | float: left; | ||
| 348 | } | ||
| 349 | |||
| 350 | .cl_number { | ||
| 351 | width: 30px; | ||
| 352 | } | ||
| 353 | |||
| 354 | .clxx { | ||
| 355 | width: 100%; | ||
| 356 | display: flex; | ||
| 357 | padding-left: 5px; | ||
| 358 | height: calc(100vh - 125px); | ||
| 359 | |||
| 360 | .left { | ||
| 361 | display: flex; | ||
| 362 | flex-direction: column; | ||
| 363 | justify-content: space-between; | ||
| 364 | |||
| 365 | .item { | ||
| 366 | width: 28px; | ||
| 367 | height: 49%; | ||
| 368 | @include flex-center; | ||
| 369 | background-color: #e4e7ed; | ||
| 370 | border-bottom-right-radius: 10px; | ||
| 371 | padding: 5px; | ||
| 372 | cursor: pointer; | ||
| 373 | transition: all 0.3s; | ||
| 374 | |||
| 375 | &:hover { | ||
| 376 | @extend .active; | ||
| 377 | } | ||
| 378 | } | ||
| 379 | } | ||
| 380 | |||
| 381 | .clmlmx-box { | ||
| 382 | margin: 0 auto; | ||
| 383 | |||
| 384 | .title { | ||
| 385 | text-align: center; | ||
| 386 | height: 60px; | ||
| 387 | line-height: 60px; | ||
| 388 | border: 1px solid #dfe6ec; | ||
| 389 | font-size: 20px; | ||
| 390 | background: #81d3f81a; | ||
| 391 | margin-bottom: -1px; | ||
| 392 | } | ||
| 393 | } | ||
| 394 | |||
| 395 | .clyl-box { | ||
| 396 | width: 100%; | ||
| 397 | height: 100%; | ||
| 398 | display: flex; | ||
| 399 | .tableList { | ||
| 400 | margin-top: 10px; | ||
| 401 | } | ||
| 402 | .menu-tree { | ||
| 403 | width: 20%; | ||
| 404 | min-width: 160px; | ||
| 405 | height: 100%; | ||
| 406 | font-size: 14px; | ||
| 407 | border-right: 1px dotted #d9d9d9; | ||
| 408 | padding: 0 10px; | ||
| 409 | |||
| 410 | .item { | ||
| 411 | line-height: 30px; | ||
| 412 | padding-top: 5px; | ||
| 413 | border-bottom: 1px solid #e8e8e8; | ||
| 414 | font-size: 16px; | ||
| 415 | text-align: center; | ||
| 416 | color: $light-blue; | ||
| 417 | |||
| 418 | .itemIcon { | ||
| 419 | float: right; | ||
| 420 | line-height: 60px; | ||
| 421 | cursor: pointer; | ||
| 422 | } | ||
| 423 | |||
| 424 | .child { | ||
| 425 | line-height: 32px; | ||
| 426 | border-bottom: 1px solid #e8e8e8; | ||
| 427 | padding-left: 10px; | ||
| 428 | color: #6b6b6b; | ||
| 429 | cursor: pointer; | ||
| 430 | box-sizing: border-box; | ||
| 431 | border-radius: 6px; | ||
| 432 | line-height: 20px; | ||
| 433 | transition: all 0.3s; | ||
| 434 | padding: 8px 0; | ||
| 435 | overflow: hidden; | ||
| 436 | display: flex; | ||
| 437 | justify-content: space-between; | ||
| 438 | } | ||
| 439 | .item_name { | ||
| 440 | flex: 1; | ||
| 441 | font-size: 14px; | ||
| 442 | display: flex; | ||
| 443 | justify-content: center; | ||
| 444 | } | ||
| 445 | .child:hover { | ||
| 446 | color: $light-blue; | ||
| 447 | transform: scale(1.1); | ||
| 448 | } | ||
| 449 | |||
| 450 | .checked { | ||
| 451 | border: 1px solid $light-blue; | ||
| 452 | color: $light-blue; | ||
| 453 | box-sizing: border-box; | ||
| 454 | } | ||
| 455 | } | ||
| 456 | } | ||
| 457 | |||
| 458 | .clyl-img { | ||
| 459 | width: 75%; | ||
| 460 | height: 100%; | ||
| 461 | background: #f3f4f7; | ||
| 462 | margin: 0 auto; | ||
| 463 | position: relative; | ||
| 464 | } | ||
| 465 | } | ||
| 466 | } | ||
| 467 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-09-19 10:15:07 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <dialogBox title="新建材料信息" width="25%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit" | ||
| 8 | :isFullscreen="false"> | ||
| 9 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> | ||
| 10 | <el-row> | ||
| 11 | <el-col :span="24"> | ||
| 12 | <el-form-item label="材料类型" prop="cllx"> | ||
| 13 | <el-select v-model="ruleForm.cllx" class="width100" placeholder="请选择"> | ||
| 14 | <el-option v-for="item in dictData['A40']" :key="item.dcode" :label="item.dname" :value="item.dcode"> | ||
| 15 | </el-option> | ||
| 16 | </el-select> | ||
| 17 | </el-form-item> | ||
| 18 | </el-col> | ||
| 19 | </el-row> | ||
| 20 | <el-row :gutter="20"> | ||
| 21 | <el-col :span="24"> | ||
| 22 | <el-form-item label="材料名称" prop="clmc"> | ||
| 23 | <el-input v-model="ruleForm.clmc"></el-input> | ||
| 24 | </el-form-item> | ||
| 25 | </el-col> | ||
| 26 | </el-row> | ||
| 27 | <el-row :gutter="20"> | ||
| 28 | <el-col :span="24"> | ||
| 29 | <el-form-item | ||
| 30 | label="是否公共材料"> | ||
| 31 | <el-radio-group | ||
| 32 | v-model="ruleForm.sfggcl"> | ||
| 33 | <el-radio label="1">是</el-radio> | ||
| 34 | <el-radio label="0">否</el-radio> | ||
| 35 | </el-radio-group> | ||
| 36 | </el-form-item> | ||
| 37 | </el-col> | ||
| 38 | </el-row> | ||
| 39 | </el-form> | ||
| 40 | </dialogBox> | ||
| 41 | </template> | ||
| 42 | |||
| 43 | <script> | ||
| 44 | import { mapGetters } from "vuex"; | ||
| 45 | export default { | ||
| 46 | props: { | ||
| 47 | value: { type: Boolean, default: false }, | ||
| 48 | }, | ||
| 49 | data () { | ||
| 50 | return { | ||
| 51 | myValue: this.value, | ||
| 52 | ruleForm: { | ||
| 53 | cllx: "", | ||
| 54 | clmc: "", | ||
| 55 | sfggcl: "0" | ||
| 56 | }, | ||
| 57 | rules: { | ||
| 58 | cllx: [ | ||
| 59 | { required: true, message: '请选择材料类型', trigger: 'change' } | ||
| 60 | ], | ||
| 61 | clmc: [ | ||
| 62 | { required: true, message: '请输入材料名称', trigger: 'blur' } | ||
| 63 | ], | ||
| 64 | clbm: [ | ||
| 65 | { required: true, message: '请输入材料编码', trigger: 'blur' } | ||
| 66 | ] | ||
| 67 | } | ||
| 68 | } | ||
| 69 | }, | ||
| 70 | computed: { | ||
| 71 | ...mapGetters(["dictData"]), | ||
| 72 | }, | ||
| 73 | watch: { | ||
| 74 | value (val) { | ||
| 75 | this.myValue = val; | ||
| 76 | }, | ||
| 77 | }, | ||
| 78 | methods: { | ||
| 79 | /** | ||
| 80 | * @description: closeDialog | ||
| 81 | * @author: renchao | ||
| 82 | */ | ||
| 83 | closeDialog () { | ||
| 84 | this.$emit("input", false); | ||
| 85 | this.ruleForm = { | ||
| 86 | cllx: "", | ||
| 87 | clmc: "", | ||
| 88 | sfggcl: "0" | ||
| 89 | } | ||
| 90 | }, | ||
| 91 | /** | ||
| 92 | * @description: handleSubmit | ||
| 93 | * @author: renchao | ||
| 94 | */ | ||
| 95 | handleSubmit () { | ||
| 96 | this.$refs['ruleForm'].validate((valid) => { | ||
| 97 | if (valid) { | ||
| 98 | this.$parent.addSave(this.ruleForm); | ||
| 99 | this.ruleForm = { | ||
| 100 | cllx: "", | ||
| 101 | clmc: "", | ||
| 102 | sfggcl: "0" | ||
| 103 | } | ||
| 104 | this.$emit("input", false); | ||
| 105 | } else { | ||
| 106 | return false; | ||
| 107 | } | ||
| 108 | }) | ||
| 109 | } | ||
| 110 | } | ||
| 111 | }; | ||
| 112 | </script> | ||
| 113 | <style scoped lang="scss"> | ||
| 114 | .submit-button { | ||
| 115 | text-align: center; | ||
| 116 | height: 52px; | ||
| 117 | padding-top: 10px; | ||
| 118 | background-color: #fff; | ||
| 119 | } | ||
| 120 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-10-24 17:16:18 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="clmlmx-box"> | ||
| 8 | <lb-table :column="column" :key="key" row-key="bsmSj" ref="listTable" :heightNumSetting="true" :calcHeight="600" | ||
| 9 | :pagination="false" :data="tableData"> | ||
| 10 | </lb-table> | ||
| 11 | <div class="text-center"> | ||
| 12 | <el-button @click="$popupCacel">取消</el-button> | ||
| 13 | <el-button type="primary" @click="handleSubmit" :loading="loading" v-if="formData.ableOperation && tableData.length>0">保存</el-button> | ||
| 14 | </div> | ||
| 15 | </div> | ||
| 16 | </template> | ||
| 17 | <script> | ||
| 18 | import Vue from 'vue' | ||
| 19 | import Sortable from 'sortablejs' | ||
| 20 | import store from '@/store/index.js' | ||
| 21 | import { updateClml } from "@/api/clxx.js"; | ||
| 22 | export default { | ||
| 23 | props: { | ||
| 24 | formData: { | ||
| 25 | type: Object, | ||
| 26 | default: () => { | ||
| 27 | return {} | ||
| 28 | } | ||
| 29 | } | ||
| 30 | }, | ||
| 31 | data () { | ||
| 32 | return { | ||
| 33 | loading: false, | ||
| 34 | sortable: null, | ||
| 35 | column: [ | ||
| 36 | { | ||
| 37 | prop: "isrequired", | ||
| 38 | label: "是否必选", | ||
| 39 | width: "80", | ||
| 40 | render: (h, scope) => { | ||
| 41 | if (scope.row.isrequired === "1") { | ||
| 42 | return ( | ||
| 43 | <div> | ||
| 44 | <span>必选</span> | ||
| 45 | </div> | ||
| 46 | ); | ||
| 47 | } | ||
| 48 | else { | ||
| 49 | return ( | ||
| 50 | <div> | ||
| 51 | <span>可选</span> | ||
| 52 | </div> | ||
| 53 | ) | ||
| 54 | } | ||
| 55 | } | ||
| 56 | }, | ||
| 57 | { | ||
| 58 | label: "材料名称", | ||
| 59 | render: (h, scope) => { | ||
| 60 | return ( | ||
| 61 | (this.formData.ableOperation && scope.row.sfxjcl == '1') ? | ||
| 62 | <el-input value={scope.row.sjmc} onInput={(val) => { scope.row.sjmc = val }}></el-input> : <span>{scope.row.sjmc}</span> | ||
| 63 | ) | ||
| 64 | } | ||
| 65 | }, | ||
| 66 | { | ||
| 67 | label: "材料类型", | ||
| 68 | width: "110", | ||
| 69 | render: (h, scope) => { | ||
| 70 | return ( | ||
| 71 | this.formData.ableOperation ? | ||
| 72 | <el-select value={scope.row.sjlx} | ||
| 73 | onChange={(val) => { scope.row.sjlx = val }}> | ||
| 74 | { | ||
| 75 | store.getters.dictData['A40'].map(option => { | ||
| 76 | return ( | ||
| 77 | <el-option label={option.dname} value={option.dcode}></el-option> | ||
| 78 | ) | ||
| 79 | }) | ||
| 80 | } | ||
| 81 | </el-select> : <span>{this.dicStatus(scope.row.sjlx, "A40")}</span> | ||
| 82 | ) | ||
| 83 | } | ||
| 84 | }, | ||
| 85 | { | ||
| 86 | prop: "sjsl", | ||
| 87 | label: "收件数量", | ||
| 88 | width: "80", | ||
| 89 | render: (h, scope) => { | ||
| 90 | return ( | ||
| 91 | (this.formData.ableOperation) ? | ||
| 92 | <el-input value={scope.row.sjsl} onInput={(val) => { scope.row.sjsl = val }}></el-input> : <span>{ | ||
| 93 | scope.row.sjsl | ||
| 94 | }</span> | ||
| 95 | ) | ||
| 96 | } | ||
| 97 | }, | ||
| 98 | { | ||
| 99 | label: "扫描时间", | ||
| 100 | width: "140", | ||
| 101 | render: (h, scope) => { | ||
| 102 | return ( | ||
| 103 | <span>{scope.row.sjsj}</span> | ||
| 104 | ) | ||
| 105 | } | ||
| 106 | }, | ||
| 107 | { | ||
| 108 | label: "页数", | ||
| 109 | width: "60", | ||
| 110 | render: (h, scope) => { | ||
| 111 | if (scope.row.ys && scope.row.ys > 0) { | ||
| 112 | return ( | ||
| 113 | <div> | ||
| 114 | <span>{scope.row.ys}</span> | ||
| 115 | </div> | ||
| 116 | ); | ||
| 117 | } else { | ||
| 118 | return ( | ||
| 119 | <div> | ||
| 120 | <span>0</span> | ||
| 121 | </div> | ||
| 122 | ); | ||
| 123 | } | ||
| 124 | }, | ||
| 125 | }, | ||
| 126 | { | ||
| 127 | label: "是否新建材料", | ||
| 128 | width: "80", | ||
| 129 | render: (h, scope) => { | ||
| 130 | if (scope.row.sfxjcl && scope.row.sfxjcl == '1') { | ||
| 131 | return ( | ||
| 132 | <span>是</span> | ||
| 133 | ); | ||
| 134 | } else { | ||
| 135 | return ( | ||
| 136 | <span>否</span> | ||
| 137 | ); | ||
| 138 | } | ||
| 139 | }, | ||
| 140 | }, | ||
| 141 | { | ||
| 142 | label: "操作", | ||
| 143 | width: "100", | ||
| 144 | render: (h, scope) => { | ||
| 145 | return ( | ||
| 146 | <el-button | ||
| 147 | type="text" | ||
| 148 | icon="el-icon-delete" | ||
| 149 | disabled={!(scope.row.ys == 0 && scope.row.sfxjcl == '1') || !this.formData.ableOperation} | ||
| 150 | onClick={() => { | ||
| 151 | this.handleDelete(scope.$index, scope.row); | ||
| 152 | }} | ||
| 153 | > | ||
| 154 | 删除 | ||
| 155 | </el-button> | ||
| 156 | ) | ||
| 157 | } | ||
| 158 | } | ||
| 159 | ], | ||
| 160 | key: 0, | ||
| 161 | tableData: [] | ||
| 162 | } | ||
| 163 | }, | ||
| 164 | watch: { | ||
| 165 | 'formData.data': { | ||
| 166 | handler: function (val, oldVal) { | ||
| 167 | this.tableData = _.cloneDeep(val) | ||
| 168 | }, | ||
| 169 | immediate: true, | ||
| 170 | deep: true | ||
| 171 | } | ||
| 172 | }, | ||
| 173 | mounted () { | ||
| 174 | this.initSort() | ||
| 175 | }, | ||
| 176 | beforeDestroy () { | ||
| 177 | if (this.sortable) { | ||
| 178 | this.sortable.destroy(); | ||
| 179 | } | ||
| 180 | }, | ||
| 181 | methods: { | ||
| 182 | handleSubmit () { | ||
| 183 | this.loading = true | ||
| 184 | store.dispatch('user/reWorkFresh', false) | ||
| 185 | updateClml(this.tableData, this.formData.bsmSldy, Vue.prototype.$currentRoute.query.bsmSlsq).then(res => { | ||
| 186 | this.loading = false | ||
| 187 | if (res.code == 200) { | ||
| 188 | this.$message({ | ||
| 189 | message: '保存成功', | ||
| 190 | type: 'success' | ||
| 191 | }) | ||
| 192 | this.$popupCacel() | ||
| 193 | store.dispatch('user/reWorkFresh', true) | ||
| 194 | } | ||
| 195 | }).catch(() => { | ||
| 196 | this.loading = false | ||
| 197 | }) | ||
| 198 | }, | ||
| 199 | /** | ||
| 200 | * @description: 材料目录删除 | ||
| 201 | * @param {*} index | ||
| 202 | * @param {*} row | ||
| 203 | */ | ||
| 204 | handleDelete (index, row) { | ||
| 205 | this.$confirm('此操作将永久删除该 是否继续?', '提示', { | ||
| 206 | confirmButtonText: '确定', | ||
| 207 | cancelButtonText: '取消', | ||
| 208 | type: 'warning' | ||
| 209 | }).then(() => { | ||
| 210 | this.tableData.splice(index, 1); | ||
| 211 | }).catch(() => { | ||
| 212 | this.$message({ | ||
| 213 | type: 'info', | ||
| 214 | message: '已取消删除' | ||
| 215 | }) | ||
| 216 | }) | ||
| 217 | }, | ||
| 218 | initSort () { | ||
| 219 | const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] | ||
| 220 | this.sortable = Sortable.create(el, { | ||
| 221 | ghostClass: 'sortable-ghost', | ||
| 222 | setData: function (dataTransfer) { | ||
| 223 | dataTransfer.setData('Text', '') | ||
| 224 | }, | ||
| 225 | onEnd: evt => { | ||
| 226 | const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]; | ||
| 227 | this.tableData.splice(evt.newIndex, 0, targetRow); | ||
| 228 | } | ||
| 229 | }) | ||
| 230 | }, | ||
| 231 | dicStatus (val, code) { | ||
| 232 | let data = store.getters.dictData[code], | ||
| 233 | name = '暂无' | ||
| 234 | if (data) { | ||
| 235 | data.map((item) => { | ||
| 236 | if (item.dcode == val) { | ||
| 237 | name = item.dname | ||
| 238 | } | ||
| 239 | }) | ||
| 240 | return name | ||
| 241 | } | ||
| 242 | } | ||
| 243 | } | ||
| 244 | } | ||
| 245 | </script> | ||
| 246 | <style scoped lang='scss'> | ||
| 247 | @import "~@/styles/mixin.scss"; | ||
| 248 | .clmlmx-box { | ||
| 249 | margin: 0 auto; | ||
| 250 | .title { | ||
| 251 | text-align: center; | ||
| 252 | height: 60px; | ||
| 253 | line-height: 60px; | ||
| 254 | border: 1px solid #dfe6ec; | ||
| 255 | font-size: 20px; | ||
| 256 | background: #81d3f81a; | ||
| 257 | margin-bottom: -1px; | ||
| 258 | } | ||
| 259 | } | ||
| 260 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-05-04 14:13:28 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <lb-table :column="tableData.columns" heightNumSetting :pagination="false" :key="key" :data="tableData.data"> | ||
| 8 | </lb-table> | ||
| 9 | </template> | ||
| 10 | <script> | ||
| 11 | import { mapGetters } from 'vuex' | ||
| 12 | import { getSzRecordList } from "@/api/bdcqz.js"; | ||
| 13 | import table from "@/utils/mixin/table"; | ||
| 14 | import { szxxdatas } from "../../javascript/szxxdata"; | ||
| 15 | export default { | ||
| 16 | components: { | ||
| 17 | |||
| 18 | }, | ||
| 19 | mixins: [table], | ||
| 20 | computed: { | ||
| 21 | ...mapGetters(["dictData"]), | ||
| 22 | }, | ||
| 23 | props: { | ||
| 24 | formData: { | ||
| 25 | type: Object, | ||
| 26 | default: {} | ||
| 27 | } | ||
| 28 | }, | ||
| 29 | data () { | ||
| 30 | return { | ||
| 31 | key: 0, | ||
| 32 | dataIndex: 0, | ||
| 33 | dialog: false, | ||
| 34 | details: {}, | ||
| 35 | tableData: { | ||
| 36 | total: 0, | ||
| 37 | columns: szxxdatas.columns(), | ||
| 38 | data: [], | ||
| 39 | }, | ||
| 40 | } | ||
| 41 | }, | ||
| 42 | mounted () { | ||
| 43 | this.query() | ||
| 44 | }, | ||
| 45 | methods: { | ||
| 46 | /** | ||
| 47 | * @description: query | ||
| 48 | * @author: renchao | ||
| 49 | */ | ||
| 50 | query () { | ||
| 51 | getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then(res => { | ||
| 52 | if (res.code == 200) { | ||
| 53 | this.tableData.data = res.result; | ||
| 54 | this.key++ | ||
| 55 | } | ||
| 56 | }) | ||
| 57 | } | ||
| 58 | } | ||
| 59 | } | ||
| 60 | </script> | ||
| 61 | <style scoped lang='scss'> | ||
| 62 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-11-23 17:20:01 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <iframe :src="ip +'/txdw/#/' + formData.bsmZd" frameborder="0" style="width: 100%; height:710px;"></iframe> | ||
| 8 | </template> | ||
| 9 | <script> | ||
| 10 | export default { | ||
| 11 | props: { | ||
| 12 | formData: { | ||
| 13 | type: Object, | ||
| 14 | default: () => { | ||
| 15 | return {} | ||
| 16 | } | ||
| 17 | } | ||
| 18 | }, | ||
| 19 | data () { | ||
| 20 | return { | ||
| 21 | ip: window._config.services.management | ||
| 22 | } | ||
| 23 | } | ||
| 24 | } | ||
| 25 | </script> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-02-06 13:23:36 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div> | ||
| 8 | <div class="zsdy-content" v-Loading="loading"> | ||
| 9 | <el-form | ||
| 10 | :model="ruleForm" | ||
| 11 | ref="ruleForm" | ||
| 12 | label-width="120px"> | ||
| 13 | <el-form-item label="印刷序列号：" prop="ysxlh"> | ||
| 14 | <el-row> | ||
| 15 | <el-col :span="18"> | ||
| 16 | <el-select v-model="ruleForm.ysxlh" @change="handleSelect" :disabled="disabled" placeholder="请选择"> | ||
| 17 | <el-option | ||
| 18 | v-for="item in ysxlh" | ||
| 19 | :key="item.ysxlh" | ||
| 20 | :label="item.ysxlh" | ||
| 21 | :value="item.ysxlh"> | ||
| 22 | </el-option> | ||
| 23 | </el-select> | ||
| 24 | </el-col> | ||
| 25 | <el-col :span="4" v-if="this.formData.bdcqzlx==1"> | ||
| 26 | <el-tabs v-model="activeTitle"> | ||
| 27 | <el-tab-pane label="第一页" name="title1"></el-tab-pane> | ||
| 28 | <el-tab-pane label="第二页" name="title2"></el-tab-pane> | ||
| 29 | </el-tabs> | ||
| 30 | </el-col> | ||
| 31 | <el-col :span="2" v-if="this.formData.ysxlh" style="float:right"> | ||
| 32 | <el-button type="primary" @click="handleZF" v-if="disabled">作废</el-button> | ||
| 33 | </el-col> | ||
| 34 | </el-row> | ||
| 35 | |||
| 36 | </el-form-item> | ||
| 37 | </el-form> | ||
| 38 | <div class="zs-content"> | ||
| 39 | <canvas ref="zs1" width="1024" v-show="this.formData.bdcqzlx==1 && activeTitle=='title1'" height="739"></canvas> | ||
| 40 | <canvas ref="zs" width="1024" v-show="this.formData.bdcqzlx==1 && activeTitle=='title2'" height="739"></canvas> | ||
| 41 | <canvas ref="zm" width="1169" v-show="this.formData.bdcqzlx==2" height="828"></canvas> | ||
| 42 | </div> | ||
| 43 | </div> | ||
| 44 | <!-- 打印模板需要此模块 --> | ||
| 45 | <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false"> | ||
| 46 | <embed id="LODOP_EM" type="application/x-print-lodop" width="1180" height="720" pluginspage="install_lodop32.exe" /> | ||
| 47 | </object> | ||
| 48 | <div class="text-center pt-10"> | ||
| 49 | <el-button @click="$popupCacel">取消</el-button> | ||
| 50 | <el-button type="primary" @click="handlePrint" v-if="disabled">打印</el-button> | ||
| 51 | <el-button type="primary" @click="handleSubmit" v-else>确定</el-button> | ||
| 52 | </div> | ||
| 53 | |||
| 54 | <el-dialog title="证书作废" :visible.sync="invalidDiglog" width="40%" :modal-append-to-body="false" top="30vh"> | ||
| 55 | <div class="invalid-diglog"> | ||
| 56 | <div class="invalid-title"> | ||
| 57 | <i class="el-icon-question invalid-icon"></i> | ||
| 58 | <div class="invalid-body">您确定作废证书并再次打印？印刷序列号{{bdcqz.ysxlh}}</div> | ||
| 59 | </div> | ||
| 60 | <div class="invalid-reson">作废原因：</div> | ||
| 61 | <el-input v-model="zfyy" placeholder="请输入作废原因" type="textarea" :rows="4"></el-input> | ||
| 62 | <div class="text-center pt-10"> | ||
| 63 | <el-button @click="closeInvalidDiglog">取 消</el-button> | ||
| 64 | <el-button type="primary" @click="confirmInvalid">确 定</el-button> | ||
| 65 | </div> | ||
| 66 | </div> | ||
| 67 | </el-dialog> | ||
| 68 | </div> | ||
| 69 | </template> | ||
| 70 | |||
| 71 | <script> | ||
| 72 | import QRCode from 'qrcode' | ||
| 73 | import store from '@/store/index.js' | ||
| 74 | import { datas } from "../../javascript/zsyl.js"; | ||
| 75 | import { getPrintTemplateByCode } from "@/api/print"; | ||
| 76 | import { getLodop } from "@/utils/LodopFuncs" | ||
| 77 | import { readYsxlh, certificate, getBdcqzDetail, invalidCertificate } from "@/api/bdcqz.js"; | ||
| 78 | export default { | ||
| 79 | props: { | ||
| 80 | formData: { | ||
| 81 | type: Object, | ||
| 82 | default: () => { | ||
| 83 | return {} | ||
| 84 | } | ||
| 85 | } | ||
| 86 | }, | ||
| 87 | data () { | ||
| 88 | return { | ||
| 89 | activeTitle: 'title1', | ||
| 90 | // 详细信息 | ||
| 91 | bdcqz: {}, | ||
| 92 | key: 0, | ||
| 93 | disabled: false, | ||
| 94 | // 不动产证书图片地址 | ||
| 95 | imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'), | ||
| 96 | imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'), | ||
| 97 | bdczmSrc: require('@/image/bdcqz/bdczm.jpg'), | ||
| 98 | loading: false, | ||
| 99 | //印刷序列号集合 | ||
| 100 | ysxlh: [], | ||
| 101 | //列名称对象 | ||
| 102 | columns: [], | ||
| 103 | //tab选择绑定值 | ||
| 104 | activeName: '', | ||
| 105 | invalidDiglog: false, | ||
| 106 | zfyy: "", | ||
| 107 | ruleForm: { | ||
| 108 | bsmBdcqz: "", | ||
| 109 | szmc: "不动产权证书", | ||
| 110 | bdcqzlx: "", | ||
| 111 | szzh: "", | ||
| 112 | ysxlh: "" | ||
| 113 | } | ||
| 114 | } | ||
| 115 | }, | ||
| 116 | mounted () { | ||
| 117 | store.dispatch('user/refreshPage', false) | ||
| 118 | this.columns = datas.columns() | ||
| 119 | this.ysxlhList() | ||
| 120 | // 获取详细信息 | ||
| 121 | this.getDetail() | ||
| 122 | if (this.formData.ysxlh) { | ||
| 123 | this.disabled = true | ||
| 124 | } else { | ||
| 125 | this.disabled = false | ||
| 126 | } | ||
| 127 | }, | ||
| 128 | methods: { | ||
| 129 | /** | ||
| 130 | * @description: 获取详细信息 | ||
| 131 | * @author: renchao | ||
| 132 | */ | ||
| 133 | getDetail () { | ||
| 134 | this.loading = true | ||
| 135 | getBdcqzDetail(this.formData.bsmBdcqz).then(res => { | ||
| 136 | this.bdcqz = res.result | ||
| 137 | this.loading = false | ||
| 138 | if (this.bdcqz.ysxlh) this.ruleForm.ysxlh = this.bdcqz.ysxlh | ||
| 139 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 140 | this.drawTextOnImage() | ||
| 141 | } else { | ||
| 142 | this.drawTextzmImage() | ||
| 143 | } | ||
| 144 | }) | ||
| 145 | }, | ||
| 146 | /** | ||
| 147 | * @description: 获取印刷序列号列表 | ||
| 148 | * @author: renchao | ||
| 149 | */ | ||
| 150 | ysxlhList () { | ||
| 151 | readYsxlh({ zslx: this.formData.bdcqzlx }).then((res) => { | ||
| 152 | if (res.code === 200) { | ||
| 153 | this.ysxlh = res.result; | ||
| 154 | } | ||
| 155 | }) | ||
| 156 | }, | ||
| 157 | /** | ||
| 158 | * @description: handleSelect | ||
| 159 | * @param {*} val | ||
| 160 | * @author: renchao | ||
| 161 | */ | ||
| 162 | handleSelect (val) { | ||
| 163 | this.bdcqz.ysxlh = this.ruleForm.ysxlh | ||
| 164 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 165 | this.drawTextOnImage() | ||
| 166 | } else { | ||
| 167 | this.drawTextzmImage() | ||
| 168 | } | ||
| 169 | }, | ||
| 170 | /** | ||
| 171 | * @description: closeInvalidDiglog | ||
| 172 | * @author: renchao | ||
| 173 | */ | ||
| 174 | closeInvalidDiglog () { | ||
| 175 | this.zfyy = ""; | ||
| 176 | this.invalidDiglog = false | ||
| 177 | }, | ||
| 178 | /** | ||
| 179 | * @description: handleZF | ||
| 180 | * @author: renchao | ||
| 181 | */ | ||
| 182 | handleZF () { | ||
| 183 | this.invalidDiglog = true | ||
| 184 | }, | ||
| 185 | /** | ||
| 186 | * @description: 作废缮证信息 | ||
| 187 | * @author: renchao | ||
| 188 | */ | ||
| 189 | confirmInvalid () { | ||
| 190 | store.dispatch('user/reWorkFresh', false) | ||
| 191 | invalidCertificate({ bsmBdcqz: this.bdcqz.bsmBdcqz, zfyy: this.zfyy }).then((res) => { | ||
| 192 | if (res.code === 200) { | ||
| 193 | this.$message.success("作废成功"); | ||
| 194 | this.disabled = false | ||
| 195 | this.invalidDiglog = false; | ||
| 196 | this.zfyy = '' | ||
| 197 | this.ruleForm.ysxlh = '' | ||
| 198 | this.bdcqz.ysxlh = '' | ||
| 199 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 200 | this.drawTextOnImage() | ||
| 201 | } else { | ||
| 202 | this.drawTextzmImage() | ||
| 203 | } | ||
| 204 | store.dispatch('user/reWorkFresh', true) | ||
| 205 | } else { | ||
| 206 | this.$message.error(res.message); | ||
| 207 | } | ||
| 208 | }) | ||
| 209 | }, | ||
| 210 | /** | ||
| 211 | * @description: 不动产证书 | ||
| 212 | * @author: renchao | ||
| 213 | */ | ||
| 214 | drawTextOnImage1 () { | ||
| 215 | const canvas = this.$refs.zs1; | ||
| 216 | const context = canvas.getContext('2d'); | ||
| 217 | const image = new Image(); | ||
| 218 | image.onload = () => { | ||
| 219 | context.drawImage(image, 0, 0); | ||
| 220 | context.font = '18px 楷体'; | ||
| 221 | context.fillStyle = '#000000'; | ||
| 222 | let date = this.bdcqz.djsj.split(' ')[0].split('/'); | ||
| 223 | let nian = date[0] | ||
| 224 | let yue = date[1] | ||
| 225 | let ri = date[2] | ||
| 226 | this.bdcqz.nian = nian | ||
| 227 | this.bdcqz.yue = yue | ||
| 228 | this.bdcqz.ri = ri | ||
| 229 | context.fillText(nian ? nian : '', 780, 499); | ||
| 230 | context.fillText(yue ? yue : '', 840, 499); | ||
| 231 | context.fillText(ri ? ri : '', 885, 499); | ||
| 232 | QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 }) | ||
| 233 | .then(url => { | ||
| 234 | const qrImage = new Image(); | ||
| 235 | this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中 | ||
| 236 | qrImage.onload = () => { | ||
| 237 | context.drawImage(qrImage, 670, 400, 100, 100); | ||
| 238 | }; | ||
| 239 | qrImage.src = url; | ||
| 240 | }) | ||
| 241 | .catch(error => { | ||
| 242 | console.error(error); | ||
| 243 | }); | ||
| 244 | context.fillText(this.bdcqz.bdcqzbm ? this.bdcqz.bdcqzbm : '', 745, 633); | ||
| 245 | }; | ||
| 246 | image.src = this.imgSrc1; | ||
| 247 | }, | ||
| 248 | drawTextOnImage () { | ||
| 249 | this.drawTextOnImage1() | ||
| 250 | function getByteLen (val) { | ||
| 251 | var len = 0; | ||
| 252 | if (!val) return len; | ||
| 253 | for (var i = 0; i < val.length; i++) { | ||
| 254 | var length = val.charCodeAt(i); | ||
| 255 | if (length >= 0 && length <= 128) { | ||
| 256 | len += 1; | ||
| 257 | } else { | ||
| 258 | len += 2; | ||
| 259 | } | ||
| 260 | } | ||
| 261 | return len; | ||
| 262 | } | ||
| 263 | const canvas = this.$refs.zs; | ||
| 264 | const context = canvas.getContext('2d'); | ||
| 265 | const image = new Image(); | ||
| 266 | image.onload = () => { | ||
| 267 | context.drawImage(image, 0, 0); | ||
| 268 | context.font = '18px 楷体'; | ||
| 269 | context.fillStyle = '#000000'; | ||
| 270 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); | ||
| 271 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); | ||
| 272 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56); | ||
| 273 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56); | ||
| 274 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97); | ||
| 275 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136); | ||
| 276 | |||
| 277 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 278 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | ||
| 279 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223); | ||
| 280 | |||
| 281 | |||
| 282 | |||
| 283 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); | ||
| 284 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); | ||
| 285 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); | ||
| 286 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : []; | ||
| 287 | if (getByteLen(this.bdcqz.mj) > 37) { | ||
| 288 | lines6.forEach((line, index) => { | ||
| 289 | const y = 378 + (index * 27); // 每行文本的垂直位置 | ||
| 290 | let currentLine = ''; | ||
| 291 | let arr = []; | ||
| 292 | for (let word of line) { | ||
| 293 | const testLine = currentLine + word; | ||
| 294 | const lineWidth = context.measureText(testLine).width; | ||
| 295 | if (lineWidth <= 336) { | ||
| 296 | currentLine = testLine; | ||
| 297 | } else { | ||
| 298 | arr.push(currentLine); | ||
| 299 | currentLine = word; | ||
| 300 | } | ||
| 301 | } | ||
| 302 | arr.push(currentLine); | ||
| 303 | arr.forEach((line, index) => { | ||
| 304 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 305 | }) | ||
| 306 | }) | ||
| 307 | } else { | ||
| 308 | lines6.forEach((line, index) => { | ||
| 309 | const y = 386 + (index * 27); // 每行文本的垂直位置 | ||
| 310 | let currentLine = ''; | ||
| 311 | let arr = []; | ||
| 312 | for (let word of line) { | ||
| 313 | const testLine = currentLine + word; | ||
| 314 | const lineWidth = context.measureText(testLine).width; | ||
| 315 | if (lineWidth <= 336) { | ||
| 316 | currentLine = testLine; | ||
| 317 | } else { | ||
| 318 | arr.push(currentLine); | ||
| 319 | currentLine = word; | ||
| 320 | } | ||
| 321 | } | ||
| 322 | arr.push(currentLine); | ||
| 323 | arr.forEach((line, index) => { | ||
| 324 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 325 | }) | ||
| 326 | }) | ||
| 327 | } | ||
| 328 | // 权利其他状态 | ||
| 329 | const maxWidth = 332; // 最大宽度限制 | ||
| 330 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : []; | ||
| 331 | for (let i = 0; i < lines.length; i++) { | ||
| 332 | let num = Math.ceil(getByteLen(lines[i]) / 37) | ||
| 333 | if (getByteLen(lines[i]) > 37) { | ||
| 334 | let currentLine = ''; | ||
| 335 | let arr = []; | ||
| 336 | for (let word of lines[i]) { | ||
| 337 | const testLine = currentLine + word; | ||
| 338 | const lineWidth = context.measureText(testLine).width; | ||
| 339 | if (lineWidth <= maxWidth) { | ||
| 340 | currentLine = testLine; | ||
| 341 | } else { | ||
| 342 | arr.push(currentLine); | ||
| 343 | currentLine = word; | ||
| 344 | } | ||
| 345 | } | ||
| 346 | arr.push(currentLine); | ||
| 347 | if (i > 0) { | ||
| 348 | arr.forEach((line, index) => { | ||
| 349 | context.fillText(line, 129, 495 + (29 * (i - 1)) + 4 * num + (index * 14)); // 调整行高 | ||
| 350 | }) | ||
| 351 | } else { | ||
| 352 | arr.forEach((line, index) => { | ||
| 353 | context.fillText(line, 129, 493 + (26 * (i - 1)) + (index * 14)); // 调整行高 | ||
| 354 | }) | ||
| 355 | } | ||
| 356 | } else { | ||
| 357 | if (i > 0) { | ||
| 358 | context.fillText(lines[i] ? lines[i] : '', 129, 500 + 4 * num + (29 * (i - 1))); | ||
| 359 | } else { | ||
| 360 | context.fillText(lines[i] ? lines[i] : '', 129, 505 + (27 * (i - 1))); | ||
| 361 | } | ||
| 362 | } | ||
| 363 | } | ||
| 364 | |||
| 365 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : []; | ||
| 366 | lines1.forEach((line, index) => { | ||
| 367 | const y = 100 + (index * 30); // 每行文本的垂直位置 | ||
| 368 | let currentLine = ''; | ||
| 369 | let arr = []; | ||
| 370 | for (let word of line) { | ||
| 371 | const testLine = currentLine + word; | ||
| 372 | const lineWidth = context.measureText(testLine).width; | ||
| 373 | if (lineWidth <= 395) { | ||
| 374 | currentLine = testLine; | ||
| 375 | } else { | ||
| 376 | arr.push(currentLine); | ||
| 377 | currentLine = word; | ||
| 378 | } | ||
| 379 | } | ||
| 380 | arr.push(currentLine); | ||
| 381 | arr.forEach((line, index) => { | ||
| 382 | context.fillText(line, 580, y + (index * 30)); // 调整行高 | ||
| 383 | }) | ||
| 384 | }) | ||
| 385 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | ||
| 386 | if (getByteLen(this.bdcqz.syqx) > 37) { | ||
| 387 | lines3.forEach((line, index) => { | ||
| 388 | const y = 423 + (index * 27); // 每行文本的垂直位置 | ||
| 389 | let currentLine = ''; | ||
| 390 | let arr = []; | ||
| 391 | for (let word of line) { | ||
| 392 | const testLine = currentLine + word; | ||
| 393 | const lineWidth = context.measureText(testLine).width; | ||
| 394 | if (lineWidth <= 330) { | ||
| 395 | currentLine = testLine; | ||
| 396 | } else { | ||
| 397 | arr.push(currentLine); | ||
| 398 | currentLine = word; | ||
| 399 | } | ||
| 400 | } | ||
| 401 | arr.push(currentLine); | ||
| 402 | arr.forEach((line, index) => { | ||
| 403 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 404 | }) | ||
| 405 | }) | ||
| 406 | } else { | ||
| 407 | lines3.forEach((line, index) => { | ||
| 408 | const y = 430 + (index * 27); // 每行文本的垂直位置 | ||
| 409 | let currentLine = ''; | ||
| 410 | let arr = []; | ||
| 411 | for (let word of line) { | ||
| 412 | const testLine = currentLine + word; | ||
| 413 | const lineWidth = context.measureText(testLine).width; | ||
| 414 | if (lineWidth <= 315) { | ||
| 415 | currentLine = testLine; | ||
| 416 | } else { | ||
| 417 | arr.push(currentLine); | ||
| 418 | currentLine = word; | ||
| 419 | } | ||
| 420 | } | ||
| 421 | arr.push(currentLine); | ||
| 422 | arr.forEach((line, index) => { | ||
| 423 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 424 | }) | ||
| 425 | }) | ||
| 426 | } | ||
| 427 | |||
| 428 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | ||
| 429 | if (getByteLen(this.bdcqz.zl) > 37) { | ||
| 430 | lines2.forEach((line, index) => { | ||
| 431 | const y = 170 + (index * 20); // 每行文本的垂直位置 | ||
| 432 | let currentLine = ''; | ||
| 433 | let arr = []; | ||
| 434 | for (let word of line) { | ||
| 435 | const testLine = currentLine + word; | ||
| 436 | const lineWidth = context.measureText(testLine).width; | ||
| 437 | if (lineWidth <= 336) { | ||
| 438 | currentLine = testLine; | ||
| 439 | } else { | ||
| 440 | arr.push(currentLine); | ||
| 441 | currentLine = word; | ||
| 442 | } | ||
| 443 | } | ||
| 444 | arr.push(currentLine); | ||
| 445 | arr.forEach((line, index) => { | ||
| 446 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 447 | }) | ||
| 448 | }) | ||
| 449 | } else { | ||
| 450 | lines2.forEach((line, index) => { | ||
| 451 | const y = 180 + (index * 20); // 每行文本的垂直位置 | ||
| 452 | let currentLine = ''; | ||
| 453 | let arr = []; | ||
| 454 | for (let word of line) { | ||
| 455 | const testLine = currentLine + word; | ||
| 456 | const lineWidth = context.measureText(testLine).width; | ||
| 457 | if (lineWidth <= 336) { | ||
| 458 | currentLine = testLine; | ||
| 459 | } else { | ||
| 460 | arr.push(currentLine); | ||
| 461 | currentLine = word; | ||
| 462 | } | ||
| 463 | } | ||
| 464 | arr.push(currentLine); | ||
| 465 | arr.forEach((line, index) => { | ||
| 466 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 467 | }) | ||
| 468 | }) | ||
| 469 | } | ||
| 470 | } | ||
| 471 | image.src = this.imgSrc | ||
| 472 | }, | ||
| 473 | /** | ||
| 474 | * @description: 不动产证明 | ||
| 475 | * @author: renchao | ||
| 476 | */ | ||
| 477 | drawTextzmImage () { | ||
| 478 | function getByteLen (val) { | ||
| 479 | var len = 0; | ||
| 480 | if (!val) return len; | ||
| 481 | for (var i = 0; i < val.length; i++) { | ||
| 482 | var length = val.charCodeAt(i); | ||
| 483 | if (length >= 0 && length <= 128) { | ||
| 484 | len += 1; | ||
| 485 | } else { | ||
| 486 | len += 2; | ||
| 487 | } | ||
| 488 | } | ||
| 489 | return len; | ||
| 490 | } | ||
| 491 | |||
| 492 | const canvas = this.$refs.zm; | ||
| 493 | const context = canvas.getContext('2d'); | ||
| 494 | const image = new Image(); | ||
| 495 | image.onload = () => { | ||
| 496 | context.drawImage(image, 0, 0); | ||
| 497 | context.font = '18px 楷体'; | ||
| 498 | context.fillStyle = '#000000'; | ||
| 499 | // ysxlh | ||
| 500 | context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712); | ||
| 501 | // djsj | ||
| 502 | if (this.bdcqz.djsj) { | ||
| 503 | let djsjList = this.bdcqz.djsj.split(' ')[0].split('/') | ||
| 504 | context.fillText(djsjList[0] ? djsjList[0] : '', 327, 580); | ||
| 505 | context.fillText(djsjList[1] ? djsjList[1] : '', 393, 580); | ||
| 506 | context.fillText(djsjList[2] ? djsjList[2] : '', 443, 580); | ||
| 507 | } | ||
| 508 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125); | ||
| 509 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125); | ||
| 510 | // context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125); | ||
| 511 | |||
| 512 | if (getByteLen(this.bdcqz.sxqc) > 14) { | ||
| 513 | const originalFont = context.font; | ||
| 514 | // 设置新的字体大小 | ||
| 515 | context.font = '14px 楷体'; // 替换为你想要的字体和大小 | ||
| 516 | // 绘制 bdcdyh | ||
| 517 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 725, 125); | ||
| 518 | // 恢复原始字体设置 | ||
| 519 | context.font = originalFont; | ||
| 520 | } else { | ||
| 521 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 755, 125); | ||
| 522 | } | ||
| 523 | |||
| 524 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); | ||
| 525 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); | ||
| 526 | // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | ||
| 527 | // 权利人 | ||
| 528 | let qlrlines = this.bdcqz.qlr | ||
| 529 | if (getByteLen(this.bdcqz.qlr) > 32) { | ||
| 530 | let currentLine = ''; | ||
| 531 | let arr = []; | ||
| 532 | for (let word of qlrlines) { | ||
| 533 | const testLine = currentLine + word; | ||
| 534 | const lineWidth = context.measureText(testLine).width; | ||
| 535 | if (lineWidth <= 295) { | ||
| 536 | currentLine = testLine; | ||
| 537 | } else { | ||
| 538 | arr.push(currentLine); | ||
| 539 | currentLine = word; | ||
| 540 | } | ||
| 541 | } | ||
| 542 | arr.push(currentLine); // 将最后一行添加到数组 | ||
| 543 | // 绘制所有行 | ||
| 544 | for (let i = 0; i < arr.length; i++) { | ||
| 545 | context.fillText(arr[i], 775, 218 + i * 20); // lineHeight 为行高 | ||
| 546 | } | ||
| 547 | } else { | ||
| 548 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | ||
| 549 | } | ||
| 550 | // 义务人 | ||
| 551 | // context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | ||
| 552 | |||
| 553 | let ywrlines = this.bdcqz.ywr | ||
| 554 | if (getByteLen(this.bdcqz.ywr) > 32) { | ||
| 555 | let currentLine = ''; | ||
| 556 | let arr = []; | ||
| 557 | for (let word of ywrlines) { | ||
| 558 | const testLine = currentLine + word; | ||
| 559 | const lineWidth = context.measureText(testLine).width; | ||
| 560 | if (lineWidth <= 295) { | ||
| 561 | currentLine = testLine; | ||
| 562 | } else { | ||
| 563 | arr.push(currentLine); | ||
| 564 | currentLine = word; | ||
| 565 | } | ||
| 566 | } | ||
| 567 | arr.push(currentLine); // 将最后一行添加到数组 | ||
| 568 | // 绘制所有行 | ||
| 569 | for (let i = 0; i < arr.length; i++) { | ||
| 570 | context.fillText(arr[i], 775, 268 + i * 20); // lineHeight 为行高 | ||
| 571 | } | ||
| 572 | } else { | ||
| 573 | context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | ||
| 574 | } | ||
| 575 | |||
| 576 | |||
| 577 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | ||
| 578 | if (getByteLen(this.bdcqz.zl) > 32) { | ||
| 579 | lines2.forEach((line, index) => { | ||
| 580 | const y = 315 + (index * 20); // 每行文本的垂直位置 | ||
| 581 | let currentLine = ''; | ||
| 582 | let arr = []; | ||
| 583 | for (let word of line) { | ||
| 584 | const testLine = currentLine + word; | ||
| 585 | const lineWidth = context.measureText(testLine).width; | ||
| 586 | if (lineWidth <= 295) { | ||
| 587 | currentLine = testLine; | ||
| 588 | } else { | ||
| 589 | arr.push(currentLine); | ||
| 590 | currentLine = word; | ||
| 591 | } | ||
| 592 | } | ||
| 593 | arr.push(currentLine); | ||
| 594 | arr.forEach((line, index) => { | ||
| 595 | context.fillText(line, 775, y + (index * 20)); // 调整行高 | ||
| 596 | }) | ||
| 597 | }) | ||
| 598 | } else { | ||
| 599 | lines2.forEach((line, index) => { | ||
| 600 | const y = 325 + (index * 20); // 每行文本的垂直位置 | ||
| 601 | let currentLine = ''; | ||
| 602 | let arr = []; | ||
| 603 | for (let word of line) { | ||
| 604 | const testLine = currentLine + word; | ||
| 605 | const lineWidth = context.measureText(testLine).width; | ||
| 606 | if (lineWidth <= 295) { | ||
| 607 | currentLine = testLine; | ||
| 608 | } else { | ||
| 609 | arr.push(currentLine); | ||
| 610 | currentLine = word; | ||
| 611 | } | ||
| 612 | } | ||
| 613 | arr.push(currentLine); | ||
| 614 | arr.forEach((line, index) => { | ||
| 615 | context.fillText(line, 775, y + (index * 20)); // 调整行高 | ||
| 616 | }) | ||
| 617 | }) | ||
| 618 | } | ||
| 619 | // bdcdyh | ||
| 620 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 621 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | ||
| 622 | // 保存当前字体设置 | ||
| 623 | const originalFont = context.font; | ||
| 624 | // 设置新的字体大小 | ||
| 625 | context.font = '16px 楷体'; // 替换为你想要的字体和大小 | ||
| 626 | // 绘制 bdcdyh | ||
| 627 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373); | ||
| 628 | // 恢复原始字体设置 | ||
| 629 | context.font = originalFont; | ||
| 630 | // qlqtzk | ||
| 631 | function getByteLenBdcdy (val) { | ||
| 632 | var encoder = new TextEncoder('utf-8'); | ||
| 633 | return encoder.encode(val).length; | ||
| 634 | } | ||
| 635 | const maxWidth = 290; // 最大宽度限制 | ||
| 636 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : []; | ||
| 637 | let bdcdyNum = Math.ceil(getByteLenBdcdy(lines[0]) / 43) | ||
| 638 | // 单独处理不动产单元号 | ||
| 639 | let linesBdcdy = lines[0] ? lines[0].split(' ') : []; | ||
| 640 | if (getByteLenBdcdy(lines[0]) > 43) { | ||
| 641 | linesBdcdy.forEach((line, index) => { | ||
| 642 | const y = 412 + (index * 17); // 每行文本的垂直位置 | ||
| 643 | let currentLine = ''; | ||
| 644 | let arr = []; | ||
| 645 | for (let word of line) { | ||
| 646 | const testLine = currentLine + word; | ||
| 647 | const lineWidth = context.measureText(testLine).width; | ||
| 648 | if (lineWidth <= maxWidth) { | ||
| 649 | currentLine = testLine; | ||
| 650 | } else { | ||
| 651 | arr.push(currentLine); | ||
| 652 | currentLine = word; | ||
| 653 | } | ||
| 654 | } | ||
| 655 | arr.push(currentLine); | ||
| 656 | arr.forEach((line, index) => { | ||
| 657 | context.fillText(line, 770, y + (index * 17)); // 调整行高 | ||
| 658 | }) | ||
| 659 | }) | ||
| 660 | } else { | ||
| 661 | linesBdcdy.forEach((line, index) => { | ||
| 662 | const y = 418 + (index * 17); // 每行文本的垂直位置 | ||
| 663 | let currentLine = ''; | ||
| 664 | let arr = []; | ||
| 665 | for (let word of line) { | ||
| 666 | const testLine = currentLine + word; | ||
| 667 | const lineWidth = context.measureText(testLine).width; | ||
| 668 | if (lineWidth <= maxWidth) { | ||
| 669 | currentLine = testLine; | ||
| 670 | } else { | ||
| 671 | arr.push(currentLine); | ||
| 672 | currentLine = word; | ||
| 673 | } | ||
| 674 | } | ||
| 675 | arr.push(currentLine); | ||
| 676 | arr.forEach((line, index) => { | ||
| 677 | context.fillText(line, 770, y + (index * 17)); // 调整行高 | ||
| 678 | }) | ||
| 679 | }) | ||
| 680 | } | ||
| 681 | |||
| 682 | for (let i = 1; i < lines.length; i++) { | ||
| 683 | let num = Math.ceil(getByteLen(lines[i]) / 32) | ||
| 684 | if (getByteLen(lines[i]) > 32) { | ||
| 685 | let currentLine = ''; | ||
| 686 | let arr = []; | ||
| 687 | for (let word of lines[i]) { | ||
| 688 | const testLine = currentLine + word; | ||
| 689 | const lineWidth = context.measureText(testLine).width; | ||
| 690 | if (lineWidth <= maxWidth) { | ||
| 691 | currentLine = testLine; | ||
| 692 | } else { | ||
| 693 | arr.push(currentLine); | ||
| 694 | currentLine = word; | ||
| 695 | } | ||
| 696 | } | ||
| 697 | arr.push(currentLine); | ||
| 698 | if (i > 0) { | ||
| 699 | arr.forEach((line, index) => { | ||
| 700 | context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 | ||
| 701 | }) | ||
| 702 | } else { | ||
| 703 | arr.forEach((line, index) => { | ||
| 704 | context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + (index * 17)); // 调整行高 | ||
| 705 | }) | ||
| 706 | } | ||
| 707 | } else { | ||
| 708 | if (i > 0) { | ||
| 709 | context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + 6 * num + (25 * (i - 1))); | ||
| 710 | } else { | ||
| 711 | context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + (25 * (i - 1))); | ||
| 712 | } | ||
| 713 | } | ||
| 714 | } | ||
| 715 | // fj | ||
| 716 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : []; | ||
| 717 | for (let i = 0; i < lines1.length; i++) { | ||
| 718 | let num = Math.ceil(getByteLen(lines1[i]) / 37) | ||
| 719 | if (getByteLen(lines1[i]) > 37) { | ||
| 720 | let currentLine = ''; | ||
| 721 | let arr = []; | ||
| 722 | for (let word of lines1[i]) { | ||
| 723 | const testLine = currentLine + word; | ||
| 724 | const lineWidth = context.measureText(testLine).width; | ||
| 725 | if (lineWidth <= maxWidth) { | ||
| 726 | currentLine = testLine; | ||
| 727 | } else { | ||
| 728 | arr.push(currentLine); | ||
| 729 | currentLine = word; | ||
| 730 | } | ||
| 731 | } | ||
| 732 | arr.push(currentLine); | ||
| 733 | if (i > 0) { | ||
| 734 | arr.forEach((line, index) => { | ||
| 735 | context.fillText(line, 770, 605 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 | ||
| 736 | }) | ||
| 737 | } else { | ||
| 738 | arr.forEach((line, index) => { | ||
| 739 | context.fillText(line, 770, 605 + (24 * (i - 1)) + (index * 17)); // 调整行高 | ||
| 740 | }) | ||
| 741 | } | ||
| 742 | } else { | ||
| 743 | if (i > 0) { | ||
| 744 | context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + 6 * num + (25 * (i - 1))); | ||
| 745 | } else { | ||
| 746 | context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + (25 * (i - 1))); | ||
| 747 | } | ||
| 748 | } | ||
| 749 | } | ||
| 750 | } | ||
| 751 | image.src = this.bdczmSrc; | ||
| 752 | }, | ||
| 753 | /** | ||
| 754 | * @description: 打印 | ||
| 755 | * @author: renchao | ||
| 756 | */ | ||
| 757 | handlePrint () { | ||
| 758 | let that = this | ||
| 759 | if (this.ruleForm.ysxlh == '') { | ||
| 760 | this.$message.error('请选择印刷序列号'); | ||
| 761 | return; | ||
| 762 | } | ||
| 763 | store.dispatch('user/reWorkFresh', false) | ||
| 764 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 765 | if (this.activeTitle == 'title1') { | ||
| 766 | getPrintTemplateByCode({ tmpno: 'zsdy1' }).then(resInfo => { | ||
| 767 | if (resInfo.code == 200) { | ||
| 768 | //打开模板设计 | ||
| 769 | let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); | ||
| 770 | LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板 | ||
| 771 | console.log(that.bdcqz); | ||
| 772 | for (let key in that.bdcqz) { | ||
| 773 | LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]); | ||
| 774 | } | ||
| 775 | LODOP.PREVIEW(); | ||
| 776 | } else { | ||
| 777 | that.$message.error(resInfo.message) | ||
| 778 | } | ||
| 779 | that.$popupCacel() | ||
| 780 | //刷新列表 | ||
| 781 | store.dispatch('user/reWorkFresh', true) | ||
| 782 | }) | ||
| 783 | } else { | ||
| 784 | getPrintTemplateByCode({ tmpno: 'zsdy' }).then(resInfo => { | ||
| 785 | if (resInfo.code == 200) { | ||
| 786 | //打开模板设计 | ||
| 787 | let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); | ||
| 788 | LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板 | ||
| 789 | |||
| 790 | that.bdcqz.bdcdyh1 = that.bdcqz.bdcdyh.slice(0, 6) + ' ' + that.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 791 | that.bdcqz.bdcdyh.slice(12, 19) + ' ' + that.bdcqz.bdcdyh.slice(19, that.bdcqz.bdcdyh.length) | ||
| 792 | //todo 调取后端接口获取数据 循环set | ||
| 793 | for (let key in that.bdcqz) { | ||
| 794 | LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]); | ||
| 795 | } | ||
| 796 | LODOP.PREVIEW(); | ||
| 797 | } else { | ||
| 798 | that.$message.error(resInfo.message) | ||
| 799 | } | ||
| 800 | that.$popupCacel() | ||
| 801 | //刷新列表 | ||
| 802 | store.dispatch('user/reWorkFresh', true) | ||
| 803 | }) | ||
| 804 | } | ||
| 805 | } else { | ||
| 806 | getPrintTemplateByCode({ tmpno: 'zmdy' }).then(resInfo => { | ||
| 807 | if (resInfo.code == 200) { | ||
| 808 | //打开模板设计 | ||
| 809 | let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); | ||
| 810 | LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板 | ||
| 811 | |||
| 812 | // 年月日 | ||
| 813 | this.bdcqz.nian = this.bdcqz.djsj.split(' ')[0].split('/')[0] | ||
| 814 | this.bdcqz.yue = this.bdcqz.djsj.split(' ')[0].split('/')[1] | ||
| 815 | this.bdcqz.ri = this.bdcqz.djsj.split(' ')[0].split('/')[1] | ||
| 816 | this.bdcqz.bdcdyh1 = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 817 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | ||
| 818 | //todo 调取后端接口获取数据 循环set | ||
| 819 | for (let key in this.bdcqz) { | ||
| 820 | LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]); | ||
| 821 | } | ||
| 822 | LODOP.PREVIEW(); | ||
| 823 | } else { | ||
| 824 | this.$message.error(resInfo.message) | ||
| 825 | } | ||
| 826 | that.$popupCacel() | ||
| 827 | //刷新列表 | ||
| 828 | store.dispatch('user/reWorkFresh', true) | ||
| 829 | }) | ||
| 830 | } | ||
| 831 | }, | ||
| 832 | /** | ||
| 833 | * @description: 保存打印记录 | ||
| 834 | * @author: renchao | ||
| 835 | */ | ||
| 836 | handleSubmit () { | ||
| 837 | let that = this | ||
| 838 | if (this.ruleForm.ysxlh == '') { | ||
| 839 | this.$message.error('请选择印刷序列号'); | ||
| 840 | return; | ||
| 841 | } | ||
| 842 | store.dispatch('user/reWorkFresh', false) | ||
| 843 | this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz; | ||
| 844 | this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx; | ||
| 845 | this.ruleForm.szzh = this.bdcqz.bdcqzh; | ||
| 846 | this.bdcqz.ysxlh = this.ruleForm.ysxlh | ||
| 847 | certificate(this.ruleForm).then((res) => { | ||
| 848 | if (res.code === 200) { | ||
| 849 | that.$popupCacel() | ||
| 850 | this.handlePrint() | ||
| 851 | } else { | ||
| 852 | this.$message.error(res.message) | ||
| 853 | } | ||
| 854 | store.dispatch('user/reWorkFresh', true) | ||
| 855 | }) | ||
| 856 | } | ||
| 857 | } | ||
| 858 | } | ||
| 859 | </script> | ||
| 860 | <style scoped lang="scss"> | ||
| 861 | @import "~@/styles/mixin.scss"; | ||
| 862 | /deep/.el-tabs__nav-wrap::after { | ||
| 863 | display: none; | ||
| 864 | } | ||
| 865 | /deep/.el-tabs__header { | ||
| 866 | margin: 0; | ||
| 867 | } | ||
| 868 | /deep/.el-form-item--small.el-form-item { | ||
| 869 | margin-bottom: 0; | ||
| 870 | } | ||
| 871 | .zsdy-content { | ||
| 872 | height: 80vh; | ||
| 873 | overflow-y: scroll; | ||
| 874 | } | ||
| 875 | .zs-content { | ||
| 876 | text-align: center; | ||
| 877 | } | ||
| 878 | .invalid-diglog { | ||
| 879 | padding-bottom: 20px; | ||
| 880 | font-size: 16px; | ||
| 881 | font-weight: bold; | ||
| 882 | color: rgb(99, 99, 99); | ||
| 883 | |||
| 884 | .invalid-title { | ||
| 885 | display: flex; | ||
| 886 | align-content: center; | ||
| 887 | |||
| 888 | .invalid-icon { | ||
| 889 | color: rgb(254, 148, 0); | ||
| 890 | font-size: 34px; | ||
| 891 | margin-right: 10px; | ||
| 892 | } | ||
| 893 | |||
| 894 | .invalid-body { | ||
| 895 | line-height: 40px; | ||
| 896 | margin-bottom: 10px; | ||
| 897 | } | ||
| 898 | } | ||
| 899 | |||
| 900 | .invalid-reson { | ||
| 901 | margin-bottom: 10px; | ||
| 902 | } | ||
| 903 | |||
| 904 | .dialog-footer { | ||
| 905 | margin-top: 10px; | ||
| 906 | display: flex; | ||
| 907 | justify-content: flex-end; | ||
| 908 | } | ||
| 909 | } | ||
| 910 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-01-19 14:45:09 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> | ||
| 8 | <el-row> | ||
| 9 | <el-col :span="8"> | ||
| 10 | <el-form-item label="发证人姓名"> | ||
| 11 | <el-input v-model="ruleForm.fzrmc" disabled></el-input> | ||
| 12 | </el-form-item> | ||
| 13 | </el-col> | ||
| 14 | <el-col :span="8"> | ||
| 15 | <el-form-item label="发证时间"> | ||
| 16 | <el-input v-model="ruleForm.fzsj" disabled></el-input> | ||
| 17 | </el-form-item> | ||
| 18 | </el-col> | ||
| 19 | <el-col :span="8"> | ||
| 20 | <el-form-item label="发证数量"> | ||
| 21 | <el-input v-model="ruleForm.fzsl" disabled></el-input> | ||
| 22 | </el-form-item> | ||
| 23 | </el-col> | ||
| 24 | </el-row> | ||
| 25 | <lb-table :column="tableData.columns" @row-dblclick="handleRowClick" ref="table" @selection-change="handleSelectionChange" | ||
| 26 | :data="tableData.data" | ||
| 27 | :pagination="false" | ||
| 28 | :calcHeight="300"> | ||
| 29 | </lb-table> | ||
| 30 | <el-row> | ||
| 31 | <el-col :span="3"> | ||
| 32 | <el-form-item label="身份证读卡器"> | ||
| 33 | <el-button type="text" icon="el-icon-tickets" @click="readClick">读取</el-button> | ||
| 34 | </el-form-item> | ||
| 35 | </el-col> | ||
| 36 | <el-col :span="5"> | ||
| 37 | <el-form-item label="领证人" prop="lzrxm" label-width="70px"> | ||
| 38 | <el-input v-model="ruleForm.lzrxm"></el-input> | ||
| 39 | </el-form-item> | ||
| 40 | </el-col> | ||
| 41 | <el-col :span="5"> | ||
| 42 | <el-form-item label="证件类型" prop="lzrzjlb" label-width="80px"> | ||
| 43 | <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择"> | ||
| 44 | <el-option v-for="item in lzrzjlbData" :key="item.dcode" :label="item.dname" :value="item.dcode"> | ||
| 45 | </el-option> | ||
| 46 | </el-select> | ||
| 47 | </el-form-item> | ||
| 48 | </el-col> | ||
| 49 | <el-col :span="5"> | ||
| 50 | <el-form-item label="证件号" prop="lzrzjh" label-width="70px"> | ||
| 51 | <el-input v-model="ruleForm.lzrzjh"></el-input> | ||
| 52 | </el-form-item> | ||
| 53 | </el-col> | ||
| 54 | <el-col :span="5"> | ||
| 55 | <el-form-item label="领证人电话" prop="lzrdh"> | ||
| 56 | <el-input v-model="ruleForm.lzrdh"></el-input> | ||
| 57 | </el-form-item> | ||
| 58 | </el-col> | ||
| 59 | </el-row> | ||
| 60 | <el-form-item class="text-center"> | ||
| 61 | <el-button @click="$popupCacel">取消</el-button> | ||
| 62 | <el-button type="primary" @click="handleSubmit">确定</el-button> | ||
| 63 | </el-form-item> | ||
| 64 | </el-form> | ||
| 65 | </template> | ||
| 66 | <script> | ||
| 67 | const checkPhone = (rule, value, callback) => { | ||
| 68 | let regPone = null | ||
| 69 | let mobile = /^(1[3456789]\d{9})$/ //手机号 | ||
| 70 | let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机 | ||
| 71 | if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined | ||
| 72 | regPone = tel | ||
| 73 | } else if (value && value[0] !== '0') { | ||
| 74 | regPone = mobile | ||
| 75 | } | ||
| 76 | if (regPone === null) { | ||
| 77 | return callback( | ||
| 78 | new Error('请输入电话') | ||
| 79 | ) | ||
| 80 | } else if (!regPone.test(value)) { | ||
| 81 | return callback( | ||
| 82 | new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'") | ||
| 83 | ) | ||
| 84 | } else { | ||
| 85 | callback() | ||
| 86 | } | ||
| 87 | }; | ||
| 88 | import Vue from 'vue' | ||
| 89 | import store from '@/store/index.js' | ||
| 90 | import table from "@/utils/mixin/table"; | ||
| 91 | import { getIdCardInfo } from '@/utils/operation.js' | ||
| 92 | import { getUnclaimedBdcqz, issueCertificate, getBdcqzQlr } from "@/api/bdcqz.js"; | ||
| 93 | import { datas } from "../../javascript/fzxxdata"; | ||
| 94 | export default { | ||
| 95 | props: { | ||
| 96 | formData: { | ||
| 97 | type: Object, | ||
| 98 | default: () => { | ||
| 99 | return {} | ||
| 100 | } | ||
| 101 | } | ||
| 102 | }, | ||
| 103 | mixins: [table], | ||
| 104 | data () { | ||
| 105 | return { | ||
| 106 | lzrzjlbData: store.getters.dictData['A30'], | ||
| 107 | ruleForm: { | ||
| 108 | fzrmc: '', | ||
| 109 | fzsj: '', | ||
| 110 | fzsl: '', | ||
| 111 | bdcqzList: [], | ||
| 112 | lzrxm: '', | ||
| 113 | lzrzjlb: '', | ||
| 114 | lzrzjh: '', | ||
| 115 | lzrdh: '' | ||
| 116 | }, | ||
| 117 | rules: { | ||
| 118 | lzrxm: [ | ||
| 119 | { required: true, message: '请输入领证人', trigger: 'blur' } | ||
| 120 | ], | ||
| 121 | lzrzjlb: [ | ||
| 122 | { required: true, message: '请选择证件类型', trigger: 'change' } | ||
| 123 | ], | ||
| 124 | lzrzjh: [ | ||
| 125 | { required: true, message: '请输入证件号', trigger: 'blur' } | ||
| 126 | ], | ||
| 127 | lzrdh: [ | ||
| 128 | { required: true, validator: checkPhone, trigger: ["blur"] } | ||
| 129 | ] | ||
| 130 | }, | ||
| 131 | tableData: { | ||
| 132 | total: 0, | ||
| 133 | columns: datas.columns().lzgrid, | ||
| 134 | data: [] | ||
| 135 | } | ||
| 136 | } | ||
| 137 | }, | ||
| 138 | mounted () { | ||
| 139 | this.$nextTick(() => { | ||
| 140 | this.loadGrid() | ||
| 141 | }) | ||
| 142 | }, | ||
| 143 | methods: { | ||
| 144 | /** | ||
| 145 | * @description: 身份证打卡器 | ||
| 146 | * @author: renchao | ||
| 147 | */ | ||
| 148 | readClick () { | ||
| 149 | function getObjectByValue (arrayOfObjects, value) { | ||
| 150 | var name = '' | ||
| 151 | arrayOfObjects.forEach(item => { | ||
| 152 | if (item.dname.includes(value)) name = item.dcode | ||
| 153 | }) | ||
| 154 | return name | ||
| 155 | } | ||
| 156 | getIdCardInfo(this.BASE_API.gaopaiyi).then(res => { | ||
| 157 | if (this.BASE_API.gaopaiyi == 'jy') { | ||
| 158 | const { | ||
| 159 | Name, | ||
| 160 | IdNo, | ||
| 161 | } = JSON.parse(res) | ||
| 162 | if (Name) { | ||
| 163 | this.ruleForm.lzrxm = Name; | ||
| 164 | this.ruleForm.lzrzjlb = '1'; | ||
| 165 | this.ruleForm.lzrzjh = IdNo; | ||
| 166 | this.$message({ | ||
| 167 | message: '读取成功！', | ||
| 168 | type: 'success' | ||
| 169 | }) | ||
| 170 | } else { | ||
| 171 | this.$message({ | ||
| 172 | message: '请放置身份证', | ||
| 173 | type: 'warning' | ||
| 174 | }) | ||
| 175 | } | ||
| 176 | } else { | ||
| 177 | if (res.data.code == 0) { | ||
| 178 | let data = res.data.IDCardInfo | ||
| 179 | this.ruleForm.lzrxm = data.name | ||
| 180 | this.ruleForm.lzrzjlb = '1' | ||
| 181 | this.ruleForm.lzrzjh = data.cardID | ||
| 182 | this.$message({ | ||
| 183 | message: '读取成功！', | ||
| 184 | type: 'success' | ||
| 185 | }) | ||
| 186 | } else { | ||
| 187 | this.$message({ | ||
| 188 | message: res.data.message, | ||
| 189 | type: 'warning' | ||
| 190 | }) | ||
| 191 | } | ||
| 192 | } | ||
| 193 | }) | ||
| 194 | }, | ||
| 195 | /** | ||
| 196 | * @description: 列表初始化 | ||
| 197 | * @author: renchao | ||
| 198 | */ | ||
| 199 | loadGrid () { | ||
| 200 | let that = this | ||
| 201 | getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => { | ||
| 202 | if (res.code === 200) { | ||
| 203 | this.tableData.data = res.result.list; | ||
| 204 | this.$nextTick(() => { | ||
| 205 | this.tableData.data.forEach(item => { | ||
| 206 | that.$refs.table.toggleRowSelection(item) | ||
| 207 | }) | ||
| 208 | }) | ||
| 209 | this.ruleForm.fzrmc = res.result.fzrmc | ||
| 210 | this.ruleForm.fzsj = res.result.fzsj | ||
| 211 | this.ruleForm.fzsl = res.result.fzsl | ||
| 212 | this.ruleForm.bdcqzList = res.result.list; | ||
| 213 | res.result.list.length && this.getQlr(res.result.list[0].bsmBdcqz) | ||
| 214 | } | ||
| 215 | }) | ||
| 216 | }, | ||
| 217 | /** | ||
| 218 | * @description: 获取权利人信息 | ||
| 219 | * @author: renchao | ||
| 220 | */ | ||
| 221 | getQlr (bsmBdcqz) { | ||
| 222 | getBdcqzQlr(bsmBdcqz).then(res => { | ||
| 223 | if (res.code === 200) { | ||
| 224 | this.ruleForm.lzrxm = res.result.qlrmc; | ||
| 225 | this.ruleForm.lzrzjlb = res.result.zjzl; | ||
| 226 | this.ruleForm.lzrzjh = res.result.zjh; | ||
| 227 | this.ruleForm.lzrdh = res.result.dh; | ||
| 228 | } | ||
| 229 | }) | ||
| 230 | }, | ||
| 231 | /** | ||
| 232 | * @description: handleSelectionChange | ||
| 233 | * @param {*} val | ||
| 234 | * @author: renchao | ||
| 235 | */ | ||
| 236 | handleSelectionChange (val) { | ||
| 237 | this.ruleForm.bdcqzList = val | ||
| 238 | }, | ||
| 239 | /** | ||
| 240 | * @description: handleRowClick | ||
| 241 | * @param {*} row | ||
| 242 | * @author: renchao | ||
| 243 | */ | ||
| 244 | handleRowClick (row) { | ||
| 245 | this.$refs.table.toggleRowSelection(row) | ||
| 246 | }, | ||
| 247 | /** | ||
| 248 | * @description: handleSubmit | ||
| 249 | * @author: renchao | ||
| 250 | */ | ||
| 251 | handleSubmit () { | ||
| 252 | this.$refs.ruleForm.validate(valid => { | ||
| 253 | if (valid) { | ||
| 254 | issueCertificate(this.ruleForm).then(res => { | ||
| 255 | if (res.code == 200) { | ||
| 256 | this.$message.success('保存成功'); | ||
| 257 | //刷新列表 | ||
| 258 | store.dispatch('user/reWorkFresh', true) | ||
| 259 | this.$popupCacel() | ||
| 260 | } else { | ||
| 261 | this.$message.error(res.message) | ||
| 262 | } | ||
| 263 | }) | ||
| 264 | } else { | ||
| 265 | return false; | ||
| 266 | } | ||
| 267 | }) | ||
| 268 | } | ||
| 269 | } | ||
| 270 | } | ||
| 271 | </script> | ||
| 272 | <style scoped lang="scss"> | ||
| 273 | @import "~@/styles/mixin.scss"; | ||
| 274 | </style> | ||
| 275 | |||
| 276 |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-11-15 15:41:43 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..."> | ||
| 8 | <!-- 表单部分 --> | ||
| 9 | <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1" style="margin-top:-15px"> | ||
| 10 | <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz" | ||
| 11 | v-for="(item, index) in headTabBdcqz" :key="index"> | ||
| 12 | </el-tab-pane> | ||
| 13 | </el-tabs> | ||
| 14 | <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty> | ||
| 15 | <div v-else> | ||
| 16 | <div style="height:540px"> | ||
| 17 | <el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px"> | ||
| 18 | <el-row> | ||
| 19 | <el-col :span="24"> | ||
| 20 | <el-form-item label="权利人"> | ||
| 21 | <el-input v-model="bdcqz.qlr"></el-input> | ||
| 22 | </el-form-item> | ||
| 23 | </el-col> | ||
| 24 | </el-row> | ||
| 25 | <el-row> | ||
| 26 | <el-col :span="24"> | ||
| 27 | <el-form-item label="共有情况"> | ||
| 28 | <el-select v-model="bdcqz.gyqk" class="width100" placeholder="请选择"> | ||
| 29 | <el-option | ||
| 30 | v-for="item in gyqkList" | ||
| 31 | :key="item.dcode" | ||
| 32 | :label="item.dname" | ||
| 33 | :value="item.dcode"> | ||
| 34 | </el-option> | ||
| 35 | </el-select> | ||
| 36 | </el-form-item> | ||
| 37 | </el-col> | ||
| 38 | </el-row> | ||
| 39 | <el-row> | ||
| 40 | <el-col :span="24"> | ||
| 41 | <el-form-item label="坐落"> | ||
| 42 | <el-input v-model="bdcqz.zl"></el-input> | ||
| 43 | </el-form-item> | ||
| 44 | </el-col> | ||
| 45 | </el-row> | ||
| 46 | <el-row> | ||
| 47 | <el-col :span="24"> | ||
| 48 | <el-form-item label="不动产单元号"> | ||
| 49 | <el-input v-model="bdcqz.bdcdyh"></el-input> | ||
| 50 | </el-form-item> | ||
| 51 | </el-col> | ||
| 52 | </el-row> | ||
| 53 | <el-row> | ||
| 54 | <el-col :span="24"> | ||
| 55 | <el-form-item label="权利类型"> | ||
| 56 | <el-input v-model="bdcqz.qllx"></el-input> | ||
| 57 | </el-form-item> | ||
| 58 | </el-col> | ||
| 59 | </el-row> | ||
| 60 | <el-row> | ||
| 61 | <el-col :span="24"> | ||
| 62 | <el-form-item label="权利性质 "> | ||
| 63 | <el-input v-model="bdcqz.qlxz"></el-input> | ||
| 64 | </el-form-item> | ||
| 65 | </el-col> | ||
| 66 | </el-row> | ||
| 67 | <el-row> | ||
| 68 | <el-col :span="24"> | ||
| 69 | <el-form-item label="用途"> | ||
| 70 | <el-input v-model="bdcqz.yt"></el-input> | ||
| 71 | </el-form-item> | ||
| 72 | </el-col> | ||
| 73 | </el-row> | ||
| 74 | <el-row> | ||
| 75 | <el-col :span="24"> | ||
| 76 | <el-form-item label="面积"> | ||
| 77 | <el-input v-model="bdcqz.mj"></el-input> | ||
| 78 | </el-form-item> | ||
| 79 | </el-col> | ||
| 80 | </el-row> | ||
| 81 | <el-row> | ||
| 82 | <el-col :span="24"> | ||
| 83 | <el-form-item label="使用期限 "> | ||
| 84 | <el-input v-model="bdcqz.syqx"></el-input> | ||
| 85 | </el-form-item> | ||
| 86 | </el-col> | ||
| 87 | </el-row> | ||
| 88 | <el-row> | ||
| 89 | <el-col :span="24"> | ||
| 90 | <el-form-item label="权利其他状况"> | ||
| 91 | <el-input v-model="bdcqz.qlqtzk" :rows="4" type="textarea"></el-input> | ||
| 92 | </el-form-item> | ||
| 93 | </el-col> | ||
| 94 | </el-row> | ||
| 95 | <el-row> | ||
| 96 | <el-col :span="24"> | ||
| 97 | <el-form-item label="附记"> | ||
| 98 | <el-input v-model="bdcqz.fj" :rows="4" type="textarea"></el-input> | ||
| 99 | </el-form-item> | ||
| 100 | </el-col> | ||
| 101 | </el-row> | ||
| 102 | </el-form> | ||
| 103 | <el-form :model="bdcqz" class="zm" v-else ref="ruleForm" label-width="110px"> | ||
| 104 | <el-row> | ||
| 105 | <el-col :span="24"> | ||
| 106 | <el-form-item label="证明权利或事项"> | ||
| 107 | <el-input v-model="bdcqz.zmqlhsx"></el-input> | ||
| 108 | </el-form-item> | ||
| 109 | </el-col> | ||
| 110 | </el-row> | ||
| 111 | <el-row> | ||
| 112 | <el-col :span="24"> | ||
| 113 | <el-form-item label="权利人(申请人)"> | ||
| 114 | <el-input v-model="bdcqz.qlr"></el-input> | ||
| 115 | </el-form-item> | ||
| 116 | </el-col> | ||
| 117 | </el-row> | ||
| 118 | <el-row> | ||
| 119 | <el-col :span="24"> | ||
| 120 | <el-form-item label="义务人"> | ||
| 121 | <el-input v-model="bdcqz.ywr"></el-input> | ||
| 122 | </el-form-item> | ||
| 123 | </el-col> | ||
| 124 | </el-row> | ||
| 125 | <el-row> | ||
| 126 | <el-col :span="24"> | ||
| 127 | <el-form-item label="坐落"> | ||
| 128 | <el-input v-model="bdcqz.zl"></el-input> | ||
| 129 | </el-form-item> | ||
| 130 | </el-col> | ||
| 131 | </el-row> | ||
| 132 | <el-row> | ||
| 133 | <el-col :span="24"> | ||
| 134 | <el-form-item label="不动产单元号"> | ||
| 135 | <el-input v-model="bdcqz.bdcdyh"></el-input> | ||
| 136 | </el-form-item> | ||
| 137 | </el-col> | ||
| 138 | </el-row> | ||
| 139 | <el-row> | ||
| 140 | <el-col :span="24"> | ||
| 141 | <el-form-item label="其他状况"> | ||
| 142 | <el-input v-model="bdcqz.qlqtzk" :rows="6" type="textarea"></el-input> | ||
| 143 | </el-form-item> | ||
| 144 | </el-col> | ||
| 145 | </el-row> | ||
| 146 | <el-row> | ||
| 147 | <el-col :span="24"> | ||
| 148 | <el-form-item label="附记"> | ||
| 149 | <el-input v-model="bdcqz.fj" :rows="6" type="textarea"></el-input> | ||
| 150 | </el-form-item> | ||
| 151 | </el-col> | ||
| 152 | </el-row> | ||
| 153 | </el-form> | ||
| 154 | </div> | ||
| 155 | <div style="text-align:center"> | ||
| 156 | <el-button @click="$popupCacel">取消</el-button> | ||
| 157 | <el-button type="primary" @click="handleSubmit">保存</el-button> | ||
| 158 | </div> | ||
| 159 | </div> | ||
| 160 | </div> | ||
| 161 | </template> | ||
| 162 | |||
| 163 | <script> | ||
| 164 | import store from '@/store/index.js' | ||
| 165 | import { getSlsqBdcqzList, editBdcqz } from "@/api/bdcqz.js" | ||
| 166 | export default { | ||
| 167 | name: "zsxg", | ||
| 168 | props: { | ||
| 169 | formData: { | ||
| 170 | type: Object, | ||
| 171 | default: {} | ||
| 172 | } | ||
| 173 | }, | ||
| 174 | data () { | ||
| 175 | return { | ||
| 176 | gyqkList: store.getters.dictData['A34'], | ||
| 177 | key: 0, | ||
| 178 | noData: false, | ||
| 179 | loading: false, | ||
| 180 | bdcqz: {}, | ||
| 181 | //tab切换栏数组 | ||
| 182 | headTabBdcqz: [], | ||
| 183 | //tab选择绑定值 | ||
| 184 | activeName: '', | ||
| 185 | } | ||
| 186 | }, | ||
| 187 | mounted () { | ||
| 188 | this.getHeadTabBdcqz() | ||
| 189 | }, | ||
| 190 | methods: { | ||
| 191 | /** | ||
| 192 | * @description: 获取受理申请下全部不动产权证 | ||
| 193 | * @author: renchao | ||
| 194 | */ | ||
| 195 | getHeadTabBdcqz () { | ||
| 196 | this.loading = true | ||
| 197 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => { | ||
| 198 | if (res.code == 200) { | ||
| 199 | this.noData = true | ||
| 200 | if (res.result && res.result.length > 0) { | ||
| 201 | this.bdcqz = res.result[0] | ||
| 202 | this.headTabBdcqz = _.cloneDeep(res.result) | ||
| 203 | if (this.formData.bsmBdcqz) { | ||
| 204 | this.activeName = this.formData.bsmBdcqz | ||
| 205 | } else { | ||
| 206 | this.activeName = res.result[0].bsmBdcqz | ||
| 207 | } | ||
| 208 | } | ||
| 209 | } | ||
| 210 | this.loading = false | ||
| 211 | }) | ||
| 212 | }, | ||
| 213 | handleClick (tab) { | ||
| 214 | this.bdcqz = _.cloneDeep(this.headTabBdcqz[tab.index]) | ||
| 215 | }, | ||
| 216 | handleSubmit () { | ||
| 217 | editBdcqz(this.bdcqz).then(res => { | ||
| 218 | if (res.code == 200) { | ||
| 219 | this.$message.success('保存成功'); | ||
| 220 | //刷新列表 | ||
| 221 | this.$popupCacel() | ||
| 222 | } else { | ||
| 223 | this.$message.error(res.message) | ||
| 224 | } | ||
| 225 | }) | ||
| 226 | } | ||
| 227 | } | ||
| 228 | } | ||
| 229 | </script> | ||
| 230 | <style scoped lang="scss"> | ||
| 231 | @import "~@/styles/mixin.scss"; | ||
| 232 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-02-06 13:23:44 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;"> | ||
| 8 | <!-- 表单部分 --> | ||
| 9 | <div style="margin-top:-20px"> | ||
| 10 | <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1"> | ||
| 11 | <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz" | ||
| 12 | v-for="(item, index) in headTabBdcqz" :key="index"> | ||
| 13 | </el-tab-pane> | ||
| 14 | </el-tabs> | ||
| 15 | </div> | ||
| 16 | <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty> | ||
| 17 | <div style="max-height:89vh;overflow-y:auto"> | ||
| 18 | <div v-show="this.bdcqz.bdcqzlx==1"> | ||
| 19 | <el-tabs v-model="activeTitle"> | ||
| 20 | <el-tab-pane label="第一页" name="title1"></el-tab-pane> | ||
| 21 | <el-tab-pane label="第二页" name="title2"></el-tab-pane> | ||
| 22 | </el-tabs> | ||
| 23 | <div style="width:1169px;overflow-x: hidden;"> | ||
| 24 | <canvas ref="zs1" width="1024" v-show="activeTitle=='title1'" height="739"></canvas> | ||
| 25 | <canvas ref="zs" width="1024" v-show="activeTitle=='title2'" height="739"></canvas> | ||
| 26 | </div> | ||
| 27 | </div> | ||
| 28 | <div style="width:1169px;overflow-x: hidden;" v-show="this.bdcqz.bdcqzlx==2"> | ||
| 29 | <canvas ref="zm" width="1169" height="828"></canvas> | ||
| 30 | </div> | ||
| 31 | </div> | ||
| 32 | </div> | ||
| 33 | </template> | ||
| 34 | |||
| 35 | <script> | ||
| 36 | import QRCode from 'qrcode' | ||
| 37 | import { datas } from "../../javascript/zsyl.js"; | ||
| 38 | import { getSlsqBdcqzList } from "@/api/bdcqz.js" | ||
| 39 | export default { | ||
| 40 | name: "zsyl", | ||
| 41 | props: { | ||
| 42 | formData: { | ||
| 43 | type: Object, | ||
| 44 | default: {} | ||
| 45 | } | ||
| 46 | }, | ||
| 47 | data () { | ||
| 48 | return { | ||
| 49 | activeTitle: 'title1', | ||
| 50 | key: 0, | ||
| 51 | noData: false, | ||
| 52 | imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'), | ||
| 53 | imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'), | ||
| 54 | bdczmSrc: require('@/image/bdcqz/bdczm.jpg'), | ||
| 55 | loading: false, | ||
| 56 | //印刷序列号集合 | ||
| 57 | ysxlh: [], | ||
| 58 | //列名称对象 | ||
| 59 | columns: [], | ||
| 60 | //选择的不动产权证文件 | ||
| 61 | bdcqz: '', | ||
| 62 | //证书打开类型 是否需要展示打印按钮 | ||
| 63 | isToPrint: false, | ||
| 64 | //tab切换栏数组 | ||
| 65 | headTabBdcqz: [], | ||
| 66 | //tab选择绑定值 | ||
| 67 | activeName: '', | ||
| 68 | //证书图片预览 | ||
| 69 | previewImage: '', | ||
| 70 | ruleForm: { | ||
| 71 | bsmBdcqz: '', | ||
| 72 | szmc: '不动产权证书', | ||
| 73 | bsmBdcqz: '', | ||
| 74 | szzh: '', | ||
| 75 | ysxlh: '', | ||
| 76 | }, | ||
| 77 | } | ||
| 78 | }, | ||
| 79 | mounted () { | ||
| 80 | this.columns = datas.columns(); | ||
| 81 | if (this.formData.bdcqz) { | ||
| 82 | //从缮证进入 | ||
| 83 | this.bdcqz = this.formData.bdcqz | ||
| 84 | } else { | ||
| 85 | //从按钮进入 | ||
| 86 | this.getHeadTabBdcqz(); | ||
| 87 | } | ||
| 88 | }, | ||
| 89 | methods: { | ||
| 90 | /** | ||
| 91 | * @description: 获取证书内容 | ||
| 92 | * @param {*} code | ||
| 93 | * @author: renchao | ||
| 94 | */ | ||
| 95 | getRowValue (code) { | ||
| 96 | var value = this.bdcqz[code]; | ||
| 97 | return value; | ||
| 98 | }, | ||
| 99 | /** | ||
| 100 | * @description: 获取受理申请下全部不动产权证 | ||
| 101 | * @author: renchao | ||
| 102 | */ | ||
| 103 | getHeadTabBdcqz () { | ||
| 104 | this.loading = true | ||
| 105 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => { | ||
| 106 | if (res.code == 200) { | ||
| 107 | this.noData = true | ||
| 108 | if (res.result && res.result.length > 0) { | ||
| 109 | this.bdcqz = res.result[0] | ||
| 110 | this.headTabBdcqz = res.result | ||
| 111 | if (this.formData.bsmBdcqz) { | ||
| 112 | this.activeName = this.formData.bsmBdcqz | ||
| 113 | } else { | ||
| 114 | this.activeName = res.result[0].bsmBdcqz | ||
| 115 | } | ||
| 116 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 117 | this.drawTextOnImage() | ||
| 118 | } else { | ||
| 119 | this.drawTextzmImage() | ||
| 120 | } | ||
| 121 | } | ||
| 122 | } | ||
| 123 | this.loading = false | ||
| 124 | }) | ||
| 125 | }, | ||
| 126 | /** | ||
| 127 | * @description: tab表头切换方法 | ||
| 128 | * @param {*} e | ||
| 129 | * @author: renchao | ||
| 130 | */ | ||
| 131 | handleClick (tab, event) { | ||
| 132 | this.bdcqz = this.headTabBdcqz[tab.index] | ||
| 133 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 134 | this.drawTextOnImage() | ||
| 135 | } else { | ||
| 136 | this.drawTextzmImage() | ||
| 137 | } | ||
| 138 | }, | ||
| 139 | /** | ||
| 140 | * @description: 不动产证书 | ||
| 141 | * @author: renchao | ||
| 142 | */ | ||
| 143 | drawTextOnImage1 () { | ||
| 144 | const canvas = this.$refs.zs1; | ||
| 145 | const context = canvas.getContext('2d'); | ||
| 146 | const image = new Image(); | ||
| 147 | image.onload = () => { | ||
| 148 | context.drawImage(image, 0, 0); | ||
| 149 | context.font = '18px 楷体'; | ||
| 150 | context.fillStyle = '#000000'; | ||
| 151 | let date = this.bdcqz.djsj.split(' ')[0].split('/'); | ||
| 152 | let nian = date[0] | ||
| 153 | let yue = date[1] | ||
| 154 | let ri = date[2] | ||
| 155 | this.bdcqz.nian = nian | ||
| 156 | this.bdcqz.yue = yue | ||
| 157 | this.bdcqz.ri = ri | ||
| 158 | context.fillText(nian ? nian : '', 780, 499); | ||
| 159 | context.fillText(yue ? yue : '', 840, 499); | ||
| 160 | context.fillText(ri ? ri : '', 885, 499); | ||
| 161 | QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 }) | ||
| 162 | .then(url => { | ||
| 163 | const qrImage = new Image(); | ||
| 164 | this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中 | ||
| 165 | qrImage.onload = () => { | ||
| 166 | context.drawImage(qrImage, 670, 400, 100, 100); | ||
| 167 | }; | ||
| 168 | qrImage.src = url; | ||
| 169 | }) | ||
| 170 | .catch(error => { | ||
| 171 | console.error(error); | ||
| 172 | }); | ||
| 173 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 745, 633); | ||
| 174 | }; | ||
| 175 | image.src = this.imgSrc1; | ||
| 176 | }, | ||
| 177 | drawTextOnImage () { | ||
| 178 | this.drawTextOnImage1() | ||
| 179 | function getByteLen (val) { | ||
| 180 | var len = 0; | ||
| 181 | if (!val) return len; | ||
| 182 | for (var i = 0; i < val.length; i++) { | ||
| 183 | var length = val.charCodeAt(i); | ||
| 184 | if (length >= 0 && length <= 128) { | ||
| 185 | len += 1; | ||
| 186 | } else { | ||
| 187 | len += 2; | ||
| 188 | } | ||
| 189 | } | ||
| 190 | return len; | ||
| 191 | } | ||
| 192 | const canvas = this.$refs.zs; | ||
| 193 | const context = canvas.getContext('2d'); | ||
| 194 | const image = new Image(); | ||
| 195 | image.onload = () => { | ||
| 196 | context.drawImage(image, 0, 0); | ||
| 197 | context.font = '18px 楷体'; | ||
| 198 | context.fillStyle = '#000000'; | ||
| 199 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); | ||
| 200 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); | ||
| 201 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56); | ||
| 202 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56); | ||
| 203 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97); | ||
| 204 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136); | ||
| 205 | |||
| 206 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 207 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | ||
| 208 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223); | ||
| 209 | |||
| 210 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); | ||
| 211 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); | ||
| 212 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); | ||
| 213 | // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); | ||
| 214 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : []; | ||
| 215 | if (getByteLen(this.bdcqz.mj) > 37) { | ||
| 216 | lines6.forEach((line, index) => { | ||
| 217 | const y = 378 + (index * 27); // 每行文本的垂直位置 | ||
| 218 | let currentLine = ''; | ||
| 219 | let arr = []; | ||
| 220 | for (let word of line) { | ||
| 221 | const testLine = currentLine + word; | ||
| 222 | const lineWidth = context.measureText(testLine).width; | ||
| 223 | if (lineWidth <= 330) { | ||
| 224 | currentLine = testLine; | ||
| 225 | } else { | ||
| 226 | arr.push(currentLine); | ||
| 227 | currentLine = word; | ||
| 228 | } | ||
| 229 | } | ||
| 230 | arr.push(currentLine); | ||
| 231 | arr.forEach((line, index) => { | ||
| 232 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 233 | }) | ||
| 234 | }) | ||
| 235 | } else { | ||
| 236 | lines6.forEach((line, index) => { | ||
| 237 | const y = 386 + (index * 27); // 每行文本的垂直位置 | ||
| 238 | let currentLine = ''; | ||
| 239 | let arr = []; | ||
| 240 | for (let word of line) { | ||
| 241 | const testLine = currentLine + word; | ||
| 242 | const lineWidth = context.measureText(testLine).width; | ||
| 243 | if (lineWidth <= 330) { | ||
| 244 | currentLine = testLine; | ||
| 245 | } else { | ||
| 246 | arr.push(currentLine); | ||
| 247 | currentLine = word; | ||
| 248 | } | ||
| 249 | } | ||
| 250 | arr.push(currentLine); | ||
| 251 | arr.forEach((line, index) => { | ||
| 252 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 253 | }) | ||
| 254 | }) | ||
| 255 | } | ||
| 256 | // 权利其他状态 | ||
| 257 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : []; | ||
| 258 | for (let i = 0; i < lines.length; i++) { | ||
| 259 | let num = Math.ceil(getByteLen(lines[i]) / 38) | ||
| 260 | if (getByteLen(lines[i]) > 37) { | ||
| 261 | let currentLine = ''; | ||
| 262 | let arr = []; | ||
| 263 | for (let word of lines[i]) { | ||
| 264 | const testLine = currentLine + word; | ||
| 265 | const lineWidth = context.measureText(testLine).width; | ||
| 266 | if (lineWidth <= 323) { | ||
| 267 | currentLine = testLine; | ||
| 268 | } else { | ||
| 269 | arr.push(currentLine); | ||
| 270 | currentLine = word; | ||
| 271 | } | ||
| 272 | } | ||
| 273 | arr.push(currentLine); | ||
| 274 | if (i > 0) { | ||
| 275 | arr.forEach((line, index) => { | ||
| 276 | context.fillText(line, 129, 495 + (29 * (i - 1)) + 4 * num + (index * 14)); // 调整行高 | ||
| 277 | }) | ||
| 278 | } else { | ||
| 279 | arr.forEach((line, index) => { | ||
| 280 | context.fillText(line, 129, 493 + (26 * (i - 1)) + (index * 14)); // 调整行高 | ||
| 281 | }) | ||
| 282 | } | ||
| 283 | } else { | ||
| 284 | if (i > 0) { | ||
| 285 | context.fillText(lines[i] ? lines[i] : '', 129, 500 + 4 * num + (29 * (i - 1))); | ||
| 286 | } else { | ||
| 287 | context.fillText(lines[i] ? lines[i] : '', 129, 505 + (27 * (i - 1))); | ||
| 288 | } | ||
| 289 | } | ||
| 290 | } | ||
| 291 | |||
| 292 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : []; | ||
| 293 | lines1.forEach((line, index) => { | ||
| 294 | const y = 100 + (index * 30); // 每行文本的垂直位置 | ||
| 295 | let currentLine = ''; | ||
| 296 | let arr = []; | ||
| 297 | for (let word of line) { | ||
| 298 | const testLine = currentLine + word; | ||
| 299 | const lineWidth = context.measureText(testLine).width; | ||
| 300 | if (lineWidth <= 395) { | ||
| 301 | currentLine = testLine; | ||
| 302 | } else { | ||
| 303 | arr.push(currentLine); | ||
| 304 | currentLine = word; | ||
| 305 | } | ||
| 306 | } | ||
| 307 | arr.push(currentLine); | ||
| 308 | arr.forEach((line, index) => { | ||
| 309 | context.fillText(line, 580, y + (index * 30)); // 调整行高 | ||
| 310 | }) | ||
| 311 | }) | ||
| 312 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | ||
| 313 | if (getByteLen(this.bdcqz.syqx) > 37) { | ||
| 314 | lines3.forEach((line, index) => { | ||
| 315 | const y = 423 + (index * 27); // 每行文本的垂直位置 | ||
| 316 | let currentLine = ''; | ||
| 317 | let arr = []; | ||
| 318 | for (let word of line) { | ||
| 319 | const testLine = currentLine + word; | ||
| 320 | const lineWidth = context.measureText(testLine).width; | ||
| 321 | if (lineWidth <= 330) { | ||
| 322 | currentLine = testLine; | ||
| 323 | } else { | ||
| 324 | arr.push(currentLine); | ||
| 325 | currentLine = word; | ||
| 326 | } | ||
| 327 | } | ||
| 328 | arr.push(currentLine); | ||
| 329 | arr.forEach((line, index) => { | ||
| 330 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 331 | }) | ||
| 332 | }) | ||
| 333 | } else { | ||
| 334 | lines3.forEach((line, index) => { | ||
| 335 | const y = 430 + (index * 27); // 每行文本的垂直位置 | ||
| 336 | let currentLine = ''; | ||
| 337 | let arr = []; | ||
| 338 | for (let word of line) { | ||
| 339 | const testLine = currentLine + word; | ||
| 340 | const lineWidth = context.measureText(testLine).width; | ||
| 341 | if (lineWidth <= 315) { | ||
| 342 | currentLine = testLine; | ||
| 343 | } else { | ||
| 344 | arr.push(currentLine); | ||
| 345 | currentLine = word; | ||
| 346 | } | ||
| 347 | } | ||
| 348 | arr.push(currentLine); | ||
| 349 | arr.forEach((line, index) => { | ||
| 350 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 351 | }) | ||
| 352 | }) | ||
| 353 | } | ||
| 354 | |||
| 355 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | ||
| 356 | if (getByteLen(this.bdcqz.zl) > 37) { | ||
| 357 | lines2.forEach((line, index) => { | ||
| 358 | const y = 170 + (index * 20); // 每行文本的垂直位置 | ||
| 359 | let currentLine = ''; | ||
| 360 | let arr = []; | ||
| 361 | for (let word of line) { | ||
| 362 | const testLine = currentLine + word; | ||
| 363 | const lineWidth = context.measureText(testLine).width; | ||
| 364 | if (lineWidth <= 336) { | ||
| 365 | currentLine = testLine; | ||
| 366 | } else { | ||
| 367 | arr.push(currentLine); | ||
| 368 | currentLine = word; | ||
| 369 | } | ||
| 370 | } | ||
| 371 | arr.push(currentLine); | ||
| 372 | arr.forEach((line, index) => { | ||
| 373 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 374 | }) | ||
| 375 | }) | ||
| 376 | } else { | ||
| 377 | lines2.forEach((line, index) => { | ||
| 378 | const y = 180 + (index * 20); // 每行文本的垂直位置 | ||
| 379 | let currentLine = ''; | ||
| 380 | let arr = []; | ||
| 381 | for (let word of line) { | ||
| 382 | const testLine = currentLine + word; | ||
| 383 | const lineWidth = context.measureText(testLine).width; | ||
| 384 | if (lineWidth <= 336) { | ||
| 385 | currentLine = testLine; | ||
| 386 | } else { | ||
| 387 | arr.push(currentLine); | ||
| 388 | currentLine = word; | ||
| 389 | } | ||
| 390 | } | ||
| 391 | arr.push(currentLine); | ||
| 392 | arr.forEach((line, index) => { | ||
| 393 | context.fillText(line, 129, y + (index * 20)); // 调整行高 | ||
| 394 | }) | ||
| 395 | }) | ||
| 396 | } | ||
| 397 | } | ||
| 398 | image.src = this.imgSrc | ||
| 399 | }, | ||
| 400 | /** | ||
| 401 | * @description: 不动产证明 | ||
| 402 | * @author: renchao | ||
| 403 | */ | ||
| 404 | drawTextzmImage () { | ||
| 405 | function getByteLen (val) { | ||
| 406 | var len = 0; | ||
| 407 | if (!val) return len; | ||
| 408 | for (var i = 0; i < val.length; i++) { | ||
| 409 | var length = val.charCodeAt(i); | ||
| 410 | if (length >= 0 && length <= 128) { | ||
| 411 | len += 1; | ||
| 412 | } else { | ||
| 413 | len += 2; | ||
| 414 | } | ||
| 415 | } | ||
| 416 | return len; | ||
| 417 | } | ||
| 418 | const canvas = this.$refs.zm; | ||
| 419 | const context = canvas.getContext('2d'); | ||
| 420 | const image = new Image(); | ||
| 421 | image.onload = () => { | ||
| 422 | context.drawImage(image, 0, 0); | ||
| 423 | context.font = '18px 楷体'; | ||
| 424 | context.fillStyle = '#000000'; | ||
| 425 | // ysxlh | ||
| 426 | context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712); | ||
| 427 | // djsj | ||
| 428 | if (this.bdcqz.djsj) { | ||
| 429 | let djsjList = this.bdcqz.djsj.split(' ')[0].split('/') | ||
| 430 | context.fillText(djsjList[0] ? djsjList[0] : '', 327, 580); | ||
| 431 | context.fillText(djsjList[1] ? djsjList[1] : '', 393, 580); | ||
| 432 | context.fillText(djsjList[2] ? djsjList[2] : '', 443, 580); | ||
| 433 | } | ||
| 434 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125); | ||
| 435 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125); | ||
| 436 | if (getByteLen(this.bdcqz.sxqc) > 14) { | ||
| 437 | const originalFont = context.font; | ||
| 438 | // 设置新的字体大小 | ||
| 439 | context.font = '14px 楷体'; // 替换为你想要的字体和大小 | ||
| 440 | // 绘制 bdcdyh | ||
| 441 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 725, 125); | ||
| 442 | // 恢复原始字体设置 | ||
| 443 | context.font = originalFont; | ||
| 444 | } else { | ||
| 445 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 755, 125); | ||
| 446 | } | ||
| 447 | |||
| 448 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); | ||
| 449 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); | ||
| 450 | // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | ||
| 451 | // 权利人 | ||
| 452 | let qlrlines = this.bdcqz.qlr | ||
| 453 | if (getByteLen(this.bdcqz.qlr) > 32) { | ||
| 454 | let currentLine = ''; | ||
| 455 | let arr = []; | ||
| 456 | for (let word of qlrlines) { | ||
| 457 | const testLine = currentLine + word; | ||
| 458 | const lineWidth = context.measureText(testLine).width; | ||
| 459 | if (lineWidth <= 295) { | ||
| 460 | currentLine = testLine; | ||
| 461 | } else { | ||
| 462 | arr.push(currentLine); | ||
| 463 | currentLine = word; | ||
| 464 | } | ||
| 465 | } | ||
| 466 | arr.push(currentLine); // 将最后一行添加到数组 | ||
| 467 | // 绘制所有行 | ||
| 468 | for (let i = 0; i < arr.length; i++) { | ||
| 469 | context.fillText(arr[i], 775, 218 + i * 20); // lineHeight 为行高 | ||
| 470 | } | ||
| 471 | } else { | ||
| 472 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | ||
| 473 | } | ||
| 474 | |||
| 475 | // 义务人 | ||
| 476 | // context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | ||
| 477 | let ywrlines = this.bdcqz.ywr | ||
| 478 | if (getByteLen(this.bdcqz.ywr) > 32) { | ||
| 479 | let currentLine = ''; | ||
| 480 | let arr = []; | ||
| 481 | for (let word of ywrlines) { | ||
| 482 | const testLine = currentLine + word; | ||
| 483 | const lineWidth = context.measureText(testLine).width; | ||
| 484 | if (lineWidth <= 295) { | ||
| 485 | currentLine = testLine; | ||
| 486 | } else { | ||
| 487 | arr.push(currentLine); | ||
| 488 | currentLine = word; | ||
| 489 | } | ||
| 490 | } | ||
| 491 | arr.push(currentLine); // 将最后一行添加到数组 | ||
| 492 | // 绘制所有行 | ||
| 493 | for (let i = 0; i < arr.length; i++) { | ||
| 494 | context.fillText(arr[i], 775, 268 + i * 20); // lineHeight 为行高 | ||
| 495 | } | ||
| 496 | } else { | ||
| 497 | context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | ||
| 498 | } | ||
| 499 | |||
| 500 | // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325); | ||
| 501 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | ||
| 502 | if (getByteLen(this.bdcqz.zl) > 32) { | ||
| 503 | lines2.forEach((line, index) => { | ||
| 504 | const y = 315 + (index * 20); // 每行文本的垂直位置 | ||
| 505 | let currentLine = ''; | ||
| 506 | let arr = []; | ||
| 507 | for (let word of line) { | ||
| 508 | const testLine = currentLine + word; | ||
| 509 | const lineWidth = context.measureText(testLine).width; | ||
| 510 | if (lineWidth <= 295) { | ||
| 511 | currentLine = testLine; | ||
| 512 | } else { | ||
| 513 | arr.push(currentLine); | ||
| 514 | currentLine = word; | ||
| 515 | } | ||
| 516 | } | ||
| 517 | arr.push(currentLine); | ||
| 518 | arr.forEach((line, index) => { | ||
| 519 | context.fillText(line, 775, y + (index * 20)); // 调整行高 | ||
| 520 | }) | ||
| 521 | }) | ||
| 522 | } else { | ||
| 523 | lines2.forEach((line, index) => { | ||
| 524 | const y = 325 + (index * 20); // 每行文本的垂直位置 | ||
| 525 | let currentLine = ''; | ||
| 526 | let arr = []; | ||
| 527 | for (let word of line) { | ||
| 528 | const testLine = currentLine + word; | ||
| 529 | const lineWidth = context.measureText(testLine).width; | ||
| 530 | if (lineWidth <= 295) { | ||
| 531 | currentLine = testLine; | ||
| 532 | } else { | ||
| 533 | arr.push(currentLine); | ||
| 534 | currentLine = word; | ||
| 535 | } | ||
| 536 | } | ||
| 537 | arr.push(currentLine); | ||
| 538 | arr.forEach((line, index) => { | ||
| 539 | context.fillText(line, 775, y + (index * 20)); // 调整行高 | ||
| 540 | }) | ||
| 541 | }) | ||
| 542 | } | ||
| 543 | |||
| 544 | // bdcdyh | ||
| 545 | this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + | ||
| 546 | this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) | ||
| 547 | // context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373); | ||
| 548 | // 保存当前字体设置 | ||
| 549 | const originalFont = context.font; | ||
| 550 | // 设置新的字体大小 | ||
| 551 | context.font = '16px 楷体'; // 替换为你想要的字体和大小 | ||
| 552 | // 绘制 bdcdyh | ||
| 553 | context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373); | ||
| 554 | // 恢复原始字体设置 | ||
| 555 | context.font = originalFont; | ||
| 556 | // qlqtzk | ||
| 557 | function getByteLenBdcdy (val) { | ||
| 558 | var encoder = new TextEncoder('utf-8'); | ||
| 559 | return encoder.encode(val).length; | ||
| 560 | } | ||
| 561 | const maxWidth = 295; // 最大宽度限制 | ||
| 562 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : []; | ||
| 563 | let bdcdyNum = Math.ceil(getByteLenBdcdy(lines[0]) / 43) | ||
| 564 | // 单独处理不动产单元号 | ||
| 565 | let linesBdcdy = lines[0] ? lines[0].split(' ') : []; | ||
| 566 | if (getByteLenBdcdy(lines[0]) > 43) { | ||
| 567 | linesBdcdy.forEach((line, index) => { | ||
| 568 | const y = 412 + (index * 17); // 每行文本的垂直位置 | ||
| 569 | let currentLine = ''; | ||
| 570 | let arr = []; | ||
| 571 | for (let word of line) { | ||
| 572 | const testLine = currentLine + word; | ||
| 573 | const lineWidth = context.measureText(testLine).width; | ||
| 574 | if (lineWidth <= maxWidth) { | ||
| 575 | currentLine = testLine; | ||
| 576 | } else { | ||
| 577 | arr.push(currentLine); | ||
| 578 | currentLine = word; | ||
| 579 | } | ||
| 580 | } | ||
| 581 | arr.push(currentLine); | ||
| 582 | arr.forEach((line, index) => { | ||
| 583 | context.fillText(line, 770, y + (index * 17)); // 调整行高 | ||
| 584 | }) | ||
| 585 | }) | ||
| 586 | } else { | ||
| 587 | linesBdcdy.forEach((line, index) => { | ||
| 588 | const y = 418 + (index * 17); // 每行文本的垂直位置 | ||
| 589 | let currentLine = ''; | ||
| 590 | let arr = []; | ||
| 591 | for (let word of line) { | ||
| 592 | const testLine = currentLine + word; | ||
| 593 | const lineWidth = context.measureText(testLine).width; | ||
| 594 | if (lineWidth <= maxWidth) { | ||
| 595 | currentLine = testLine; | ||
| 596 | } else { | ||
| 597 | arr.push(currentLine); | ||
| 598 | currentLine = word; | ||
| 599 | } | ||
| 600 | } | ||
| 601 | arr.push(currentLine); | ||
| 602 | arr.forEach((line, index) => { | ||
| 603 | context.fillText(line, 770, y + (index * 17)); // 调整行高 | ||
| 604 | }) | ||
| 605 | }) | ||
| 606 | } | ||
| 607 | |||
| 608 | for (let i = 1; i < lines.length; i++) { | ||
| 609 | let num = Math.ceil(getByteLen(lines[i]) / 32) | ||
| 610 | if (getByteLen(lines[i]) > 32) { | ||
| 611 | let currentLine = ''; | ||
| 612 | let arr = []; | ||
| 613 | for (let word of lines[i]) { | ||
| 614 | const testLine = currentLine + word; | ||
| 615 | const lineWidth = context.measureText(testLine).width; | ||
| 616 | if (lineWidth <= maxWidth) { | ||
| 617 | currentLine = testLine; | ||
| 618 | } else { | ||
| 619 | arr.push(currentLine); | ||
| 620 | currentLine = word; | ||
| 621 | } | ||
| 622 | } | ||
| 623 | arr.push(currentLine); | ||
| 624 | if (i > 0) { | ||
| 625 | arr.forEach((line, index) => { | ||
| 626 | context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 | ||
| 627 | }) | ||
| 628 | } else { | ||
| 629 | arr.forEach((line, index) => { | ||
| 630 | context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + (index * 17)); // 调整行高 | ||
| 631 | }) | ||
| 632 | } | ||
| 633 | } else { | ||
| 634 | if (i > 0) { | ||
| 635 | context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + 6 * num + (25 * (i - 1))); | ||
| 636 | } else { | ||
| 637 | context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + (25 * (i - 1))); | ||
| 638 | } | ||
| 639 | } | ||
| 640 | } | ||
| 641 | // fj | ||
| 642 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : []; | ||
| 643 | for (let i = 0; i < lines1.length; i++) { | ||
| 644 | let num = Math.ceil(getByteLen(lines1[i]) / 37) | ||
| 645 | if (getByteLen(lines1[i]) > 37) { | ||
| 646 | let currentLine = ''; | ||
| 647 | let arr = []; | ||
| 648 | for (let word of lines1[i]) { | ||
| 649 | const testLine = currentLine + word; | ||
| 650 | const lineWidth = context.measureText(testLine).width; | ||
| 651 | if (lineWidth <= maxWidth) { | ||
| 652 | currentLine = testLine; | ||
| 653 | } else { | ||
| 654 | arr.push(currentLine); | ||
| 655 | currentLine = word; | ||
| 656 | } | ||
| 657 | } | ||
| 658 | arr.push(currentLine); | ||
| 659 | if (i > 0) { | ||
| 660 | arr.forEach((line, index) => { | ||
| 661 | context.fillText(line, 770, 605 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 | ||
| 662 | }) | ||
| 663 | } else { | ||
| 664 | arr.forEach((line, index) => { | ||
| 665 | context.fillText(line, 770, 605 + (24 * (i - 1)) + (index * 17)); // 调整行高 | ||
| 666 | }) | ||
| 667 | } | ||
| 668 | } else { | ||
| 669 | if (i > 0) { | ||
| 670 | context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + 6 * num + (25 * (i - 1))); | ||
| 671 | } else { | ||
| 672 | context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + (25 * (i - 1))); | ||
| 673 | } | ||
| 674 | } | ||
| 675 | } | ||
| 676 | } | ||
| 677 | |||
| 678 | image.src = this.bdczmSrc; | ||
| 679 | } | ||
| 680 | } | ||
| 681 | } | ||
| 682 | </script> | ||
| 683 | <style scoped lang="scss"> | ||
| 684 | @import "~@/styles/mixin.scss"; | ||
| 685 | /deep/.el-tabs__nav-wrap::after { | ||
| 686 | display: none; | ||
| 687 | } | ||
| 688 | /deep/.el-tabs__header { | ||
| 689 | margin: 0; | ||
| 690 | } | ||
| 691 | /deep/.el-form-item--small.el-form-item { | ||
| 692 | margin-bottom: 0; | ||
| 693 | } | ||
| 694 | /deep/.mask-content { | ||
| 695 | padding-top: 10px !important; | ||
| 696 | } | ||
| 697 | .imgClass { | ||
| 698 | display: inline-block; | ||
| 699 | height: auto; | ||
| 700 | max-width: 100%; | ||
| 701 | } | ||
| 702 | |||
| 703 | .middle_padding { | ||
| 704 | padding-bottom: 10px; | ||
| 705 | } | ||
| 706 | |||
| 707 | .zsyl-button { | ||
| 708 | text-align: center; | ||
| 709 | margin-top: 20px; | ||
| 710 | |||
| 711 | .operation_button { | ||
| 712 | width: 100px; | ||
| 713 | border: 1px solid rgb(0, 121, 254); | ||
| 714 | } | ||
| 715 | |||
| 716 | .dy-button { | ||
| 717 | color: white; | ||
| 718 | background-color: rgb(0, 121, 254); | ||
| 719 | } | ||
| 720 | } | ||
| 721 | |||
| 722 | .table-column { | ||
| 723 | border-spacing: 1px; | ||
| 724 | width: 100%; | ||
| 725 | |||
| 726 | tr td { | ||
| 727 | border: 1px solid #ccc; | ||
| 728 | text-align: center; | ||
| 729 | height: 40px; | ||
| 730 | padding: 4px; | ||
| 731 | font-size: 13px; | ||
| 732 | background: rgb(251, 249, 229); | ||
| 733 | } | ||
| 734 | } | ||
| 735 | |||
| 736 | .zsyl-title { | ||
| 737 | background: #fafbe5; | ||
| 738 | text-align: center; | ||
| 739 | padding: 5px 0px; | ||
| 740 | font-size: 20px; | ||
| 741 | } | ||
| 742 | |||
| 743 | .no-data { | ||
| 744 | font-size: 18px; | ||
| 745 | display: flex; | ||
| 746 | text-align: center; | ||
| 747 | justify-content: center; | ||
| 748 | } | ||
| 749 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: miaofang | ||
| 4 | * @LastEditTime: 2023-10-23 16:16:24 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div | ||
| 8 | class="from-clues loadingtext" | ||
| 9 | v-Loading="loading" | ||
| 10 | element-loading-text="拼命加载中..." | ||
| 11 | style="height: 720px; text-align: center"> | ||
| 12 | <!-- 表单部分 --> | ||
| 13 | <el-tabs v-model="activeName" @tab-click="handleClick"> | ||
| 14 | <el-tab-pane label="证书预览" name="zsyl"> | ||
| 15 | <el-empty | ||
| 16 | description="暂无数据" | ||
| 17 | v-if="headTabBdcqz.length == 0 && noData"></el-empty> | ||
| 18 | <div class="zsys"> | ||
| 19 | <canvas | ||
| 20 | ref="zs" | ||
| 21 | width="1000" | ||
| 22 | v-show="this.bdcqz.bdcqzlx == 1" | ||
| 23 | height="700"></canvas> | ||
| 24 | <canvas | ||
| 25 | ref="zm" | ||
| 26 | width="1180" | ||
| 27 | v-show="this.bdcqz.bdcqzlx == 2" | ||
| 28 | height="780"></canvas> | ||
| 29 | </div> | ||
| 30 | </el-tab-pane> | ||
| 31 | <el-tab-pane label="证书详情" name="lcjl"> | ||
| 32 | <div class="slxx_title title-block"> | ||
| 33 | 证书详情信息 | ||
| 34 | <div class="triangle"></div> | ||
| 35 | </div> | ||
| 36 | <el-form :rules="rules" ref="ruleForm" label-width="120px"> | ||
| 37 | <el-row> | ||
| 38 | <el-col :span="8"> | ||
| 39 | <el-form-item label="权利人" prop="cyxm"> | ||
| 40 | <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> | ||
| 41 | </el-form-item> | ||
| 42 | </el-col> | ||
| 43 | <el-col :span="8"> | ||
| 44 | <el-form-item label="义务人" prop="jtgxdm"> | ||
| 45 | <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> | ||
| 46 | </el-form-item> | ||
| 47 | </el-col> | ||
| 48 | <el-col :span="8"> | ||
| 49 | <el-form-item label="坐落" prop="cbfdm"> | ||
| 50 | <el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input> | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | |||
| 54 | </el-row> | ||
| 55 | <el-row> | ||
| 56 | <el-col :span="8"> | ||
| 57 | <el-form-item label="不动产单元号" prop="cyxm"> | ||
| 58 | <el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input> | ||
| 59 | </el-form-item> | ||
| 60 | </el-col> | ||
| 61 | <el-col :span="8"> | ||
| 62 | <el-form-item label="印刷序列号" prop="jtgxdm"> | ||
| 63 | <el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input> | ||
| 64 | </el-form-item> | ||
| 65 | </el-col> | ||
| 66 | <el-col :span="8"> | ||
| 67 | <el-form-item label="不动产权证号" prop="cbfdm"> | ||
| 68 | <el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input> | ||
| 69 | </el-form-item> | ||
| 70 | </el-col> | ||
| 71 | |||
| 72 | </el-row> | ||
| 73 | </el-form> | ||
| 74 | <div class="slxx_title title-block"> | ||
| 75 | 缮证记录信息 | ||
| 76 | <div class="triangle"></div> | ||
| 77 | </div> | ||
| 78 | <lb-table | ||
| 79 | class="sz" | ||
| 80 | :column="szxxtableData.columns" | ||
| 81 | heightNumSetting | ||
| 82 | :pagination="false" | ||
| 83 | :key="key" | ||
| 84 | :data="szxxtableData.data"> | ||
| 85 | </lb-table> | ||
| 86 | <div class="slxx_title title-block"> | ||
| 87 | 发证记录信息 | ||
| 88 | <div class="triangle"></div> | ||
| 89 | </div> | ||
| 90 | <lb-table | ||
| 91 | border | ||
| 92 | :column="tableDatas.columns" | ||
| 93 | :heightNum="100" | ||
| 94 | :data="tableDatas.data" | ||
| 95 | :pagination="false"> | ||
| 96 | </lb-table> | ||
| 97 | </el-tab-pane> | ||
| 98 | <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane> | ||
| 99 | </el-tabs> | ||
| 100 | </div> | ||
| 101 | </template> | ||
| 102 | |||
| 103 | <script> | ||
| 104 | // import { zsyldatas } from "../../javascript/zsyl.js"; | ||
| 105 | import { getSlsqBdcqzList } from "@/api/bdcqz.js"; | ||
| 106 | import { getCertificateList } from "@/api/bdcqz.js"; | ||
| 107 | import { getSzRecordList } from "@/api/bdcqz.js"; | ||
| 108 | import { szxxdatas } from "../../javascript/szxxdatapart"; | ||
| 109 | import { datas } from "../../javascript/fzxxdatapart"; | ||
| 110 | export default { | ||
| 111 | name: "zsyl", | ||
| 112 | props: { | ||
| 113 | formData: { | ||
| 114 | type: Object, | ||
| 115 | default: {}, | ||
| 116 | }, | ||
| 117 | }, | ||
| 118 | data () { | ||
| 119 | return { | ||
| 120 | key: 0, | ||
| 121 | noData: false, | ||
| 122 | imgSrc: require("@/image/bdcqz/bdcqzs2.jpg"), | ||
| 123 | bdczmSrc: require("@/image/bdcqz/bdczm.jpg"), | ||
| 124 | loading: false, | ||
| 125 | //印刷序列号集合 | ||
| 126 | ysxlh: [], | ||
| 127 | //列名称对象 | ||
| 128 | columns: [], | ||
| 129 | //选择的不动产权证文件 | ||
| 130 | bdcqz: "", | ||
| 131 | //证书打开类型 是否需要展示打印按钮 | ||
| 132 | isToPrint: false, | ||
| 133 | //tab切换栏数组 | ||
| 134 | tabslist: [], | ||
| 135 | headTabBdcqz: [], | ||
| 136 | //tab选择绑定值 | ||
| 137 | activeName: "zsyl", | ||
| 138 | //证书图片预览 | ||
| 139 | previewImage: "", | ||
| 140 | ruleForm: { | ||
| 141 | bsmBdcqz: "", | ||
| 142 | szmc: "不动产权证书", | ||
| 143 | bsmBdcqz: "", | ||
| 144 | szzh: "", | ||
| 145 | ysxlh: "", | ||
| 146 | }, | ||
| 147 | formdata: {}, | ||
| 148 | szxxtableData: { | ||
| 149 | total: 0, | ||
| 150 | columns: szxxdatas.columns(), | ||
| 151 | data: [], | ||
| 152 | }, | ||
| 153 | tableDatas: { | ||
| 154 | total: 0, | ||
| 155 | columns: datas.columns().fzgrid, | ||
| 156 | data: [], | ||
| 157 | }, | ||
| 158 | }; | ||
| 159 | }, | ||
| 160 | mounted () { | ||
| 161 | this.queryClick(); | ||
| 162 | this.query(); | ||
| 163 | if (this.formData.bdcqz) { | ||
| 164 | //从缮证进入 | ||
| 165 | this.bdcqz = this.formData.bdcqz; | ||
| 166 | } else { | ||
| 167 | //从按钮进入 | ||
| 168 | this.getHeadTabBdcqz(); | ||
| 169 | } | ||
| 170 | }, | ||
| 171 | methods: { | ||
| 172 | /** | ||
| 173 | * @description: queryClick | ||
| 174 | * @author: miaofang | ||
| 175 | */ | ||
| 176 | queryClick () { | ||
| 177 | this.formdata.bsmSlsq = this.formData.bsmSlsq; | ||
| 178 | getCertificateList(this.formdata).then((res) => { | ||
| 179 | if (res.code === 200) { | ||
| 180 | this.tableDatas.data = res.result ? res.result : []; | ||
| 181 | } | ||
| 182 | }) | ||
| 183 | }, | ||
| 184 | /** | ||
| 185 | * @description: query | ||
| 186 | * @author: miaofang | ||
| 187 | */ | ||
| 188 | query () { | ||
| 189 | getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => { | ||
| 190 | if (res.code == 200) { | ||
| 191 | this.szxxtableData.data = res.result; | ||
| 192 | this.key++; | ||
| 193 | } | ||
| 194 | }) | ||
| 195 | }, | ||
| 196 | /** | ||
| 197 | * @description: 获取证书内容 | ||
| 198 | * @param {*} code | ||
| 199 | * @author: miaofang | ||
| 200 | */ | ||
| 201 | getRowValue (code) { | ||
| 202 | var value = this.bdcqz[code]; | ||
| 203 | return value; | ||
| 204 | }, | ||
| 205 | /** | ||
| 206 | * @description: 获取受理申请下全部不动产权证 | ||
| 207 | * @author: miaofang | ||
| 208 | */ | ||
| 209 | getHeadTabBdcqz () { | ||
| 210 | this.loading = true; | ||
| 211 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => { | ||
| 212 | if (res.code == 200) { | ||
| 213 | this.noData = true; | ||
| 214 | if (res.result && res.result.length > 0) { | ||
| 215 | this.bdcqz = res.result[0]; | ||
| 216 | this.headTabBdcqz = res.result; | ||
| 217 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 218 | this.drawTextOnImage(); | ||
| 219 | } else { | ||
| 220 | this.drawTextzmImage(); | ||
| 221 | } | ||
| 222 | } | ||
| 223 | } | ||
| 224 | this.loading = false; | ||
| 225 | }); | ||
| 226 | }, | ||
| 227 | /** | ||
| 228 | * @description: tab表头切换方法 | ||
| 229 | * @param {*} e | ||
| 230 | * @author: miaofang | ||
| 231 | */ | ||
| 232 | handleClick (tab, event) { | ||
| 233 | console.log(tab, event); | ||
| 234 | this.bdcqz = this.headTabBdcqz[0]; | ||
| 235 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 236 | this.drawTextOnImage(); | ||
| 237 | } else { | ||
| 238 | this.drawTextzmImage(); | ||
| 239 | } | ||
| 240 | }, | ||
| 241 | /** | ||
| 242 | * @description: 不动产证书 | ||
| 243 | * @author: miaofang | ||
| 244 | */ | ||
| 245 | drawTextOnImage () { | ||
| 246 | function getByteLen (val) { | ||
| 247 | var len = 0; | ||
| 248 | if (!val) return len; | ||
| 249 | for (var i = 0; i < val.length; i++) { | ||
| 250 | var length = val.charCodeAt(i); | ||
| 251 | if (length >= 0 && length <= 128) { | ||
| 252 | len += 1; | ||
| 253 | } else { | ||
| 254 | len += 2; | ||
| 255 | } | ||
| 256 | } | ||
| 257 | return len; | ||
| 258 | } | ||
| 259 | const canvas = this.$refs.zs; | ||
| 260 | const context = canvas.getContext("2d"); | ||
| 261 | const image = new Image(); | ||
| 262 | image.onload = () => { | ||
| 263 | context.drawImage(image, 0, 0); | ||
| 264 | context.font = "18px 楷体"; | ||
| 265 | context.fillStyle = "#000000"; | ||
| 266 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 60, 56); | ||
| 267 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 113, 56); | ||
| 268 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 180, 56); | ||
| 269 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 370, 56); | ||
| 270 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 129, 97); | ||
| 271 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136); | ||
| 272 | |||
| 273 | this.bdcdyh = | ||
| 274 | this.bdcqz.bdcdyh.slice(0, 6) + | ||
| 275 | " " + | ||
| 276 | this.bdcqz.bdcdyh.slice(6, 12) + | ||
| 277 | " " + | ||
| 278 | this.bdcqz.bdcdyh.slice(12, 19) + | ||
| 279 | " " + | ||
| 280 | this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); | ||
| 281 | context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223); | ||
| 282 | |||
| 283 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263); | ||
| 284 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303); | ||
| 285 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346); | ||
| 286 | // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); | ||
| 287 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : []; | ||
| 288 | if (getByteLen(this.bdcqz.mj) > 41) { | ||
| 289 | lines6.forEach((line, index) => { | ||
| 290 | const y = 378 + index * 27; // 每行文本的垂直位置 | ||
| 291 | let currentLine = ""; | ||
| 292 | let arr = []; | ||
| 293 | for (let word of line) { | ||
| 294 | const testLine = currentLine + word; | ||
| 295 | const lineWidth = context.measureText(testLine).width; | ||
| 296 | if (lineWidth <= 330) { | ||
| 297 | currentLine = testLine; | ||
| 298 | } else { | ||
| 299 | arr.push(currentLine); | ||
| 300 | currentLine = word; | ||
| 301 | } | ||
| 302 | } | ||
| 303 | arr.push(currentLine); | ||
| 304 | arr.forEach((line, index) => { | ||
| 305 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 306 | }); | ||
| 307 | }); | ||
| 308 | } else { | ||
| 309 | lines6.forEach((line, index) => { | ||
| 310 | const y = 386 + index * 27; // 每行文本的垂直位置 | ||
| 311 | let currentLine = ""; | ||
| 312 | let arr = []; | ||
| 313 | for (let word of line) { | ||
| 314 | const testLine = currentLine + word; | ||
| 315 | const lineWidth = context.measureText(testLine).width; | ||
| 316 | if (lineWidth <= 330) { | ||
| 317 | currentLine = testLine; | ||
| 318 | } else { | ||
| 319 | arr.push(currentLine); | ||
| 320 | currentLine = word; | ||
| 321 | } | ||
| 322 | } | ||
| 323 | arr.push(currentLine); | ||
| 324 | arr.forEach((line, index) => { | ||
| 325 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 326 | }); | ||
| 327 | }); | ||
| 328 | } | ||
| 329 | // 权利其他状态 | ||
| 330 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; | ||
| 331 | for (let i = 0; i < lines.length; i++) { | ||
| 332 | let num = Math.ceil(getByteLen(lines[i]) / 38); | ||
| 333 | if (getByteLen(lines[i]) > 38) { | ||
| 334 | let currentLine = ""; | ||
| 335 | let arr = []; | ||
| 336 | for (let word of lines[i]) { | ||
| 337 | const testLine = currentLine + word; | ||
| 338 | const lineWidth = context.measureText(testLine).width; | ||
| 339 | if (lineWidth <= 323) { | ||
| 340 | currentLine = testLine; | ||
| 341 | } else { | ||
| 342 | arr.push(currentLine); | ||
| 343 | currentLine = word; | ||
| 344 | } | ||
| 345 | } | ||
| 346 | arr.push(currentLine); | ||
| 347 | if (i > 0) { | ||
| 348 | arr.forEach((line, index) => { | ||
| 349 | context.fillText( | ||
| 350 | line, | ||
| 351 | 129, | ||
| 352 | 490 + 26 * (i - 1) + 4 * num + index * 14 | ||
| 353 | ); // 调整行高 | ||
| 354 | }); | ||
| 355 | } else { | ||
| 356 | arr.forEach((line, index) => { | ||
| 357 | context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高 | ||
| 358 | }); | ||
| 359 | } | ||
| 360 | } else { | ||
| 361 | if (i > 0) { | ||
| 362 | context.fillText( | ||
| 363 | lines[i] ? lines[i] : "", | ||
| 364 | 129, | ||
| 365 | 500 + 4 * num + 24 * (i - 1) | ||
| 366 | ); | ||
| 367 | } else { | ||
| 368 | context.fillText( | ||
| 369 | lines[i] ? lines[i] : "", | ||
| 370 | 129, | ||
| 371 | 505 + 24 * (i - 1) | ||
| 372 | ); | ||
| 373 | } | ||
| 374 | } | ||
| 375 | } | ||
| 376 | |||
| 377 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; | ||
| 378 | lines1.forEach((line, index) => { | ||
| 379 | const y = 100 + index * 30; // 每行文本的垂直位置 | ||
| 380 | let currentLine = ""; | ||
| 381 | let arr = []; | ||
| 382 | for (let word of line) { | ||
| 383 | const testLine = currentLine + word; | ||
| 384 | const lineWidth = context.measureText(testLine).width; | ||
| 385 | if (lineWidth <= 395) { | ||
| 386 | currentLine = testLine; | ||
| 387 | } else { | ||
| 388 | arr.push(currentLine); | ||
| 389 | currentLine = word; | ||
| 390 | } | ||
| 391 | } | ||
| 392 | arr.push(currentLine); | ||
| 393 | arr.forEach((line, index) => { | ||
| 394 | context.fillText(line, 580, y + index * 30); // 调整行高 | ||
| 395 | }); | ||
| 396 | }); | ||
| 397 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(" ") : []; | ||
| 398 | if (getByteLen(this.bdcqz.syqx) > 41) { | ||
| 399 | lines3.forEach((line, index) => { | ||
| 400 | const y = 423 + index * 27; // 每行文本的垂直位置 | ||
| 401 | let currentLine = ""; | ||
| 402 | let arr = []; | ||
| 403 | for (let word of line) { | ||
| 404 | const testLine = currentLine + word; | ||
| 405 | const lineWidth = context.measureText(testLine).width; | ||
| 406 | if (lineWidth <= 330) { | ||
| 407 | currentLine = testLine; | ||
| 408 | } else { | ||
| 409 | arr.push(currentLine); | ||
| 410 | currentLine = word; | ||
| 411 | } | ||
| 412 | } | ||
| 413 | arr.push(currentLine); | ||
| 414 | arr.forEach((line, index) => { | ||
| 415 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 416 | }); | ||
| 417 | }); | ||
| 418 | } else { | ||
| 419 | lines3.forEach((line, index) => { | ||
| 420 | const y = 430 + index * 27; // 每行文本的垂直位置 | ||
| 421 | let currentLine = ""; | ||
| 422 | let arr = []; | ||
| 423 | for (let word of line) { | ||
| 424 | const testLine = currentLine + word; | ||
| 425 | const lineWidth = context.measureText(testLine).width; | ||
| 426 | if (lineWidth <= 315) { | ||
| 427 | currentLine = testLine; | ||
| 428 | } else { | ||
| 429 | arr.push(currentLine); | ||
| 430 | currentLine = word; | ||
| 431 | } | ||
| 432 | } | ||
| 433 | arr.push(currentLine); | ||
| 434 | arr.forEach((line, index) => { | ||
| 435 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 436 | }); | ||
| 437 | }); | ||
| 438 | } | ||
| 439 | |||
| 440 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : []; | ||
| 441 | if (getByteLen(this.bdcqz.zl) > 41) { | ||
| 442 | lines2.forEach((line, index) => { | ||
| 443 | const y = 170 + index * 20; // 每行文本的垂直位置 | ||
| 444 | let currentLine = ""; | ||
| 445 | let arr = []; | ||
| 446 | for (let word of line) { | ||
| 447 | const testLine = currentLine + word; | ||
| 448 | const lineWidth = context.measureText(testLine).width; | ||
| 449 | if (lineWidth <= 336) { | ||
| 450 | currentLine = testLine; | ||
| 451 | } else { | ||
| 452 | arr.push(currentLine); | ||
| 453 | currentLine = word; | ||
| 454 | } | ||
| 455 | } | ||
| 456 | arr.push(currentLine); | ||
| 457 | arr.forEach((line, index) => { | ||
| 458 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 459 | }); | ||
| 460 | }); | ||
| 461 | } else { | ||
| 462 | lines2.forEach((line, index) => { | ||
| 463 | const y = 180 + index * 20; // 每行文本的垂直位置 | ||
| 464 | let currentLine = ""; | ||
| 465 | let arr = []; | ||
| 466 | for (let word of line) { | ||
| 467 | const testLine = currentLine + word; | ||
| 468 | const lineWidth = context.measureText(testLine).width; | ||
| 469 | if (lineWidth <= 336) { | ||
| 470 | currentLine = testLine; | ||
| 471 | } else { | ||
| 472 | arr.push(currentLine); | ||
| 473 | currentLine = word; | ||
| 474 | } | ||
| 475 | } | ||
| 476 | arr.push(currentLine); | ||
| 477 | arr.forEach((line, index) => { | ||
| 478 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 479 | }); | ||
| 480 | }); | ||
| 481 | } | ||
| 482 | }; | ||
| 483 | image.src = this.imgSrc; | ||
| 484 | }, | ||
| 485 | /** | ||
| 486 | * @description: 不动产证明 | ||
| 487 | * @author: miaofang | ||
| 488 | */ | ||
| 489 | drawTextzmImage () { | ||
| 490 | function getByteLen (val) { | ||
| 491 | var len = 0; | ||
| 492 | if (!val) return len; | ||
| 493 | for (var i = 0; i < val.length; i++) { | ||
| 494 | var length = val.charCodeAt(i); | ||
| 495 | if (length >= 0 && length <= 128) { | ||
| 496 | len += 1; | ||
| 497 | } else { | ||
| 498 | len += 2; | ||
| 499 | } | ||
| 500 | } | ||
| 501 | return len; | ||
| 502 | } | ||
| 503 | |||
| 504 | const canvas = this.$refs.zm; | ||
| 505 | const context = canvas.getContext("2d"); | ||
| 506 | const image = new Image(); | ||
| 507 | image.onload = () => { | ||
| 508 | context.drawImage(image, 0, 0); | ||
| 509 | context.font = "18px 楷体"; | ||
| 510 | context.fillStyle = "#000000"; | ||
| 511 | // ysxlh | ||
| 512 | context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : "", 280, 712); | ||
| 513 | // djsj | ||
| 514 | if (this.bdcqz.djsj) { | ||
| 515 | let djsjList = this.bdcqz.djsj.split(" ")[0].split("/"); | ||
| 516 | context.fillText(djsjList[0] ? djsjList[0] : "", 327, 580); | ||
| 517 | context.fillText(djsjList[1] ? djsjList[1] : "", 393, 580); | ||
| 518 | context.fillText(djsjList[2] ? djsjList[2] : "", 443, 580); | ||
| 519 | } | ||
| 520 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 620, 125); | ||
| 521 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 665, 125); | ||
| 522 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 750, 125); | ||
| 523 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 960, 123); | ||
| 524 | context.fillText( | ||
| 525 | this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : "", | ||
| 526 | 775, | ||
| 527 | 180 | ||
| 528 | ); | ||
| 529 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 775, 228); | ||
| 530 | // 义务人 | ||
| 531 | context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : "", 775, 275); | ||
| 532 | // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325); | ||
| 533 | |||
| 534 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : []; | ||
| 535 | if (getByteLen(this.bdcqz.zl) > 41) { | ||
| 536 | lines2.forEach((line, index) => { | ||
| 537 | const y = 315 + index * 20; // 每行文本的垂直位置 | ||
| 538 | let currentLine = ""; | ||
| 539 | let arr = []; | ||
| 540 | for (let word of line) { | ||
| 541 | const testLine = currentLine + word; | ||
| 542 | const lineWidth = context.measureText(testLine).width; | ||
| 543 | if (lineWidth <= 295) { | ||
| 544 | currentLine = testLine; | ||
| 545 | } else { | ||
| 546 | arr.push(currentLine); | ||
| 547 | currentLine = word; | ||
| 548 | } | ||
| 549 | } | ||
| 550 | arr.push(currentLine); | ||
| 551 | arr.forEach((line, index) => { | ||
| 552 | context.fillText(line, 775, y + index * 20); // 调整行高 | ||
| 553 | }); | ||
| 554 | }); | ||
| 555 | } else { | ||
| 556 | lines2.forEach((line, index) => { | ||
| 557 | const y = 325 + index * 20; // 每行文本的垂直位置 | ||
| 558 | let currentLine = ""; | ||
| 559 | let arr = []; | ||
| 560 | for (let word of line) { | ||
| 561 | const testLine = currentLine + word; | ||
| 562 | const lineWidth = context.measureText(testLine).width; | ||
| 563 | if (lineWidth <= 295) { | ||
| 564 | currentLine = testLine; | ||
| 565 | } else { | ||
| 566 | arr.push(currentLine); | ||
| 567 | currentLine = word; | ||
| 568 | } | ||
| 569 | } | ||
| 570 | arr.push(currentLine); | ||
| 571 | arr.forEach((line, index) => { | ||
| 572 | context.fillText(line, 775, y + index * 20); // 调整行高 | ||
| 573 | }); | ||
| 574 | }); | ||
| 575 | } | ||
| 576 | |||
| 577 | // bdcdyh | ||
| 578 | this.bdcdyh = | ||
| 579 | this.bdcqz.bdcdyh.slice(0, 6) + | ||
| 580 | " " + | ||
| 581 | this.bdcqz.bdcdyh.slice(6, 12) + | ||
| 582 | " " + | ||
| 583 | this.bdcqz.bdcdyh.slice(12, 19) + | ||
| 584 | " " + | ||
| 585 | this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); | ||
| 586 | context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373); | ||
| 587 | // qlqtzk | ||
| 588 | const maxWidth = 295; // 最大宽度限制 | ||
| 589 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; | ||
| 590 | for (let i = 0; i < lines.length; i++) { | ||
| 591 | let num = Math.ceil(getByteLen(lines[i]) / 37); | ||
| 592 | if (getByteLen(lines[i]) > 37) { | ||
| 593 | let currentLine = ""; | ||
| 594 | let arr = []; | ||
| 595 | for (let word of lines[i]) { | ||
| 596 | const testLine = currentLine + word; | ||
| 597 | const lineWidth = context.measureText(testLine).width; | ||
| 598 | if (lineWidth <= maxWidth) { | ||
| 599 | currentLine = testLine; | ||
| 600 | } else { | ||
| 601 | arr.push(currentLine); | ||
| 602 | currentLine = word; | ||
| 603 | } | ||
| 604 | } | ||
| 605 | arr.push(currentLine); | ||
| 606 | if (i > 0) { | ||
| 607 | arr.forEach((line, index) => { | ||
| 608 | context.fillText( | ||
| 609 | line, | ||
| 610 | 770, | ||
| 611 | 428 + 25 * (i - 1) + 5 * num + index * 15 | ||
| 612 | ); // 调整行高 | ||
| 613 | }); | ||
| 614 | } else { | ||
| 615 | arr.forEach((line, index) => { | ||
| 616 | context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高 | ||
| 617 | }); | ||
| 618 | } | ||
| 619 | } else { | ||
| 620 | if (i > 0) { | ||
| 621 | context.fillText( | ||
| 622 | lines[i] ? lines[i] : "", | ||
| 623 | 770, | ||
| 624 | 440 + 5 * num + 24 * (i - 1) | ||
| 625 | ); | ||
| 626 | } else { | ||
| 627 | context.fillText( | ||
| 628 | lines[i] ? lines[i] : "", | ||
| 629 | 770, | ||
| 630 | 440 + 24 * (i - 1) | ||
| 631 | ); | ||
| 632 | } | ||
| 633 | } | ||
| 634 | } | ||
| 635 | // fj | ||
| 636 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; | ||
| 637 | for (let i = 0; i < lines1.length; i++) { | ||
| 638 | let num = Math.ceil(getByteLen(lines1[i]) / 37); | ||
| 639 | if (getByteLen(lines1[i]) > 37) { | ||
| 640 | let currentLine = ""; | ||
| 641 | let arr = []; | ||
| 642 | for (let word of lines1[i]) { | ||
| 643 | const testLine = currentLine + word; | ||
| 644 | const lineWidth = context.measureText(testLine).width; | ||
| 645 | if (lineWidth <= maxWidth) { | ||
| 646 | currentLine = testLine; | ||
| 647 | } else { | ||
| 648 | arr.push(currentLine); | ||
| 649 | currentLine = word; | ||
| 650 | } | ||
| 651 | } | ||
| 652 | arr.push(currentLine); | ||
| 653 | if (i > 0) { | ||
| 654 | arr.forEach((line, index) => { | ||
| 655 | context.fillText( | ||
| 656 | line, | ||
| 657 | 770, | ||
| 658 | 610 + 25 * (i - 1) + 5 * num + index * 15 | ||
| 659 | ); // 调整行高 | ||
| 660 | }); | ||
| 661 | } else { | ||
| 662 | arr.forEach((line, index) => { | ||
| 663 | context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高 | ||
| 664 | }); | ||
| 665 | } | ||
| 666 | } else { | ||
| 667 | if (i > 0) { | ||
| 668 | context.fillText( | ||
| 669 | lines1[i] ? lines1[i] : "", | ||
| 670 | 770, | ||
| 671 | 610 + 5 * num + 23 * (i - 1) | ||
| 672 | ); | ||
| 673 | } else { | ||
| 674 | context.fillText( | ||
| 675 | lines1[i] ? lines1[i] : "", | ||
| 676 | 770, | ||
| 677 | 610 + 23 * (i - 1) | ||
| 678 | ); | ||
| 679 | } | ||
| 680 | } | ||
| 681 | } | ||
| 682 | }; | ||
| 683 | |||
| 684 | image.src = this.bdczmSrc; | ||
| 685 | }, | ||
| 686 | }, | ||
| 687 | computed: { | ||
| 688 | hdiffHeight () { | ||
| 689 | return 0; | ||
| 690 | // return this.headTabBdcqz.length > 1 ? 54 : 0 | ||
| 691 | }, | ||
| 692 | }, | ||
| 693 | }; | ||
| 694 | </script> | ||
| 695 | <style scoped lang="scss"> | ||
| 696 | @import "~@/styles/mixin.scss"; | ||
| 697 | |||
| 698 | .imgClass { | ||
| 699 | display: inline-block; | ||
| 700 | height: auto; | ||
| 701 | max-width: 100%; | ||
| 702 | } | ||
| 703 | |||
| 704 | .middle_padding { | ||
| 705 | padding-bottom: 10px; | ||
| 706 | } | ||
| 707 | |||
| 708 | .zsyl-button { | ||
| 709 | text-align: center; | ||
| 710 | margin-top: 20px; | ||
| 711 | |||
| 712 | .operation_button { | ||
| 713 | width: 100px; | ||
| 714 | border: 1px solid rgb(0, 121, 254); | ||
| 715 | } | ||
| 716 | |||
| 717 | .dy-button { | ||
| 718 | color: white; | ||
| 719 | background-color: rgb(0, 121, 254); | ||
| 720 | } | ||
| 721 | } | ||
| 722 | |||
| 723 | .table-column { | ||
| 724 | border-spacing: 1px; | ||
| 725 | width: 100%; | ||
| 726 | |||
| 727 | tr td { | ||
| 728 | border: 1px solid #ccc; | ||
| 729 | text-align: center; | ||
| 730 | height: 40px; | ||
| 731 | padding: 4px; | ||
| 732 | font-size: 13px; | ||
| 733 | background: rgb(251, 249, 229); | ||
| 734 | } | ||
| 735 | } | ||
| 736 | |||
| 737 | .zsyl-title { | ||
| 738 | background: #fafbe5; | ||
| 739 | text-align: center; | ||
| 740 | padding: 5px 0px; | ||
| 741 | font-size: 20px; | ||
| 742 | } | ||
| 743 | |||
| 744 | .no-data { | ||
| 745 | font-size: 18px; | ||
| 746 | display: flex; | ||
| 747 | text-align: center; | ||
| 748 | justify-content: center; | ||
| 749 | } | ||
| 750 | .el-tab-pane { | ||
| 751 | width: 1190px; | ||
| 752 | height: 670px; | ||
| 753 | overflow-y: auto; | ||
| 754 | } | ||
| 755 | .zsys { | ||
| 756 | width: 1180px; | ||
| 757 | height: 670px; | ||
| 758 | } | ||
| 759 | /deep/.el-table { | ||
| 760 | height: 100px !important; | ||
| 761 | } | ||
| 762 | // /deep/.sz { | ||
| 763 | // height: 340px !important; | ||
| 764 | // } | ||
| 765 | .el-form { | ||
| 766 | margin-top: 20px; | ||
| 767 | } | ||
| 768 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-17 13:51:29 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData"> | ||
| 8 | </lb-table> | ||
| 9 | </template> | ||
| 10 | <script> | ||
| 11 | import addQlr from './dialog/addQlr.vue' | ||
| 12 | import { mapGetters } from 'vuex' | ||
| 13 | export default { | ||
| 14 | components: { | ||
| 15 | addQlr | ||
| 16 | }, | ||
| 17 | computed: { | ||
| 18 | ...mapGetters(["dictData"]), | ||
| 19 | }, | ||
| 20 | props: { | ||
| 21 | tableData: { | ||
| 22 | type: Array, | ||
| 23 | default: function () { | ||
| 24 | return [] | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | gyfs: { | ||
| 28 | type: String, | ||
| 29 | default: '1' | ||
| 30 | } | ||
| 31 | }, | ||
| 32 | data () { | ||
| 33 | return { | ||
| 34 | key: 0, | ||
| 35 | dataIndex: 0, | ||
| 36 | dialog: false, | ||
| 37 | details: {}, | ||
| 38 | tableDataList: [], | ||
| 39 | qlrCommonTable: [ | ||
| 40 | { | ||
| 41 | label: '序号', | ||
| 42 | type: 'index', | ||
| 43 | width: '50', | ||
| 44 | render: (h, scope) => { | ||
| 45 | return ( | ||
| 46 | <div> | ||
| 47 | {scope.$index + 1} | ||
| 48 | </div> | ||
| 49 | ) | ||
| 50 | } | ||
| 51 | }, | ||
| 52 | { | ||
| 53 | prop: "qlrmc", | ||
| 54 | label: "抵押权人" | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "ywrmc", | ||
| 58 | label: "抵押人" | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "bdcqzh", | ||
| 62 | label: "不动产登记证明号" | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "dyjelx", | ||
| 66 | label: "抵押金额类型" | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "dyfsmc", | ||
| 70 | label: "抵押方式" | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "qdjgmc", | ||
| 74 | label: "抵押金额" | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "qlmjmc", | ||
| 78 | label: "抵押面积1" | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "zwlxqssj", | ||
| 82 | label: "债务履行开始时间" | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "zwlxjssj", | ||
| 86 | label: "债务履行结束时间" | ||
| 87 | }, | ||
| 88 | { | ||
| 89 | prop: "bdcdyh", | ||
| 90 | label: "不动产单元号" | ||
| 91 | }, | ||
| 92 | { | ||
| 93 | prop: "zl", | ||
| 94 | label: "坐落" | ||
| 95 | }, | ||
| 96 | |||
| 97 | |||
| 98 | ], | ||
| 99 | column: this.qlrCommonTable | ||
| 100 | } | ||
| 101 | }, | ||
| 102 | watch: { | ||
| 103 | tableData: { | ||
| 104 | handler: function (val, oldVal) { | ||
| 105 | let that = this | ||
| 106 | if (val.length == 0 || !val) { | ||
| 107 | that.tableDataList = _.cloneDeep([{ | ||
| 108 | sqrmc: '', | ||
| 109 | dlrzjlx: '', | ||
| 110 | dlrzjh: '', | ||
| 111 | fr: '' | ||
| 112 | }]) | ||
| 113 | } else { | ||
| 114 | that.tableDataList = _.cloneDeep(val) | ||
| 115 | } | ||
| 116 | }, | ||
| 117 | immediate: true, | ||
| 118 | deep: true | ||
| 119 | }, | ||
| 120 | gyfs: { | ||
| 121 | handler (newVal, oldValue) { | ||
| 122 | let dataList = _.cloneDeep(this.qlrCommonTable) | ||
| 123 | if (newVal == '1') { | ||
| 124 | this.column = _.cloneDeep(dataList).slice(1, dataList.length) | ||
| 125 | } else if ((newVal == '2')) { | ||
| 126 | this.column = dataList | ||
| 127 | } else { | ||
| 128 | this.column = _.cloneDeep(dataList) | ||
| 129 | this.column.splice( | ||
| 130 | 2, 0, { | ||
| 131 | prop: "qlbl", | ||
| 132 | label: "份数" | ||
| 133 | }) | ||
| 134 | } | ||
| 135 | }, | ||
| 136 | immediate: true | ||
| 137 | } | ||
| 138 | }, | ||
| 139 | methods: { | ||
| 140 | } | ||
| 141 | } | ||
| 142 | </script> | ||
| 143 | <style scoped lang='scss'> | ||
| 144 | /deep/.el-table th { | ||
| 145 | height: 30px !important; | ||
| 146 | } | ||
| 147 | /deep/.el-table--small .el-table__cell { | ||
| 148 | padding: 5px; | ||
| 149 | } | ||
| 150 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: 房屋多幢明细 | ||
| 3 | * @Autor: | ||
| 4 | * @LastEditTime: 2023-09-01 13:29:29 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div> | ||
| 8 | <el-table | ||
| 9 | :data="tableDataList" | ||
| 10 | border | ||
| 11 | :pagination="false" | ||
| 12 | :key="key" | ||
| 13 | :header-cell-style="{ 'text-align': 'center' }" | ||
| 14 | :heightNumSetting="true" | ||
| 15 | :minHeight="150" | ||
| 16 | height="150" | ||
| 17 | style="width: 100%"> | ||
| 18 | <el-table-column prop="index" width="50" :render-header="renderHeader"> | ||
| 19 | <template slot-scope="scope"> | ||
| 20 | <div style="text-align: center">{{ scope.$index + 1 }}</div> | ||
| 21 | </template> | ||
| 22 | </el-table-column> | ||
| 23 | <el-table-column prop="bdcdyh" label="不动产单元号" min-width="100"> | ||
| 24 | <template slot-scope="scope"> | ||
| 25 | <div style="text-align: center">{{ scope.row.bdcdyh }}</div> | ||
| 26 | </template> | ||
| 27 | </el-table-column> | ||
| 28 | <el-table-column prop="xmmc" label="项目名称" min-width="100"> | ||
| 29 | <template slot-scope="scope"> | ||
| 30 | <el-input | ||
| 31 | class="item" | ||
| 32 | :disabled="!ableOperation" | ||
| 33 | v-model="scope.row.xmmc" | ||
| 34 | placeholder="请输入内容" | ||
| 35 | @input="updaterow(scope.row)"> | ||
| 36 | </el-input> | ||
| 37 | </template> | ||
| 38 | </el-table-column> | ||
| 39 | <el-table-column prop="fwxz" label="房屋性质" min-width="100"> | ||
| 40 | <template slot-scope="scope"> | ||
| 41 | <treeselect | ||
| 42 | v-model="scope.row.fwxz" | ||
| 43 | :disabled="!ableOperation" | ||
| 44 | noOptionsText="暂无数据" | ||
| 45 | placeholder="" | ||
| 46 | :show-count="true" | ||
| 47 | :options="dictData['A19']" | ||
| 48 | :normalizer="normalizer" | ||
| 49 | :appendToBody="true" | ||
| 50 | z-index="9999" | ||
| 51 | @input="updaterow(scope.row)" /> | ||
| 52 | </template> | ||
| 53 | </el-table-column> | ||
| 54 | <el-table-column prop="ghyt" label="房屋用途" min-width="100"> | ||
| 55 | <template slot-scope="scope"> | ||
| 56 | <treeselect | ||
| 57 | v-model="scope.row.ghyt" | ||
| 58 | :disabled="!ableOperation" | ||
| 59 | noOptionsText="暂无数据" | ||
| 60 | placeholder="" | ||
| 61 | :show-count="true" | ||
| 62 | :options="dictData['A17']" | ||
| 63 | :normalizer="normalizer" | ||
| 64 | :appendToBody="true" | ||
| 65 | z-index="9999" | ||
| 66 | @input="updaterow(scope.row)" /> | ||
| 67 | </template> | ||
| 68 | </el-table-column> | ||
| 69 | <el-table-column prop="fwjg" label="房屋结构" min-width="100"> | ||
| 70 | <template slot-scope="scope"> | ||
| 71 | <treeselect | ||
| 72 | v-model="scope.row.fwjg" | ||
| 73 | :disabled="!ableOperation" | ||
| 74 | noOptionsText="暂无数据" | ||
| 75 | placeholder="" | ||
| 76 | :show-count="true" | ||
| 77 | :options="dictData['A46']" | ||
| 78 | :normalizer="normalizer" | ||
| 79 | :appendToBody="true" | ||
| 80 | z-index="9999" | ||
| 81 | @input="updaterow(scope.row)" /> | ||
| 82 | </template> | ||
| 83 | </el-table-column> | ||
| 84 | <el-table-column prop="jzmj" label="建筑面积" min-width="100"> | ||
| 85 | <template slot-scope="scope"> | ||
| 86 | <el-input | ||
| 87 | maxlength="12" | ||
| 88 | class="item" | ||
| 89 | :disabled="!ableOperation" | ||
| 90 | oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" | ||
| 91 | v-model="scope.row.jzmj" | ||
| 92 | placeholder="请输入内容" | ||
| 93 | @input="updaterow(scope.row)"> | ||
| 94 | </el-input> | ||
| 95 | </template> | ||
| 96 | </el-table-column> | ||
| 97 | <el-table-column prop="jgsj" label="竣工时间" min-width="100"> | ||
| 98 | <template slot-scope="scope"> | ||
| 99 | <el-date-picker | ||
| 100 | v-model="scope.row.jgsj" | ||
| 101 | type="date" | ||
| 102 | :disabled="!ableOperation" | ||
| 103 | placeholder="选择日期" | ||
| 104 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 105 | format="yyyy-MM-dd" | ||
| 106 | @input="updaterow(scope.row)"> | ||
| 107 | </el-date-picker> | ||
| 108 | </template> | ||
| 109 | </el-table-column> | ||
| 110 | <el-table-column prop="zcs" label="总层数" min-width="100"> | ||
| 111 | <template slot-scope="scope"> | ||
| 112 | <el-input | ||
| 113 | class="item" | ||
| 114 | :disabled="!ableOperation" | ||
| 115 | oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" | ||
| 116 | v-model="scope.row.zcs" | ||
| 117 | placeholder="请输入内容" | ||
| 118 | @input="updaterow(scope.row)"> | ||
| 119 | </el-input> | ||
| 120 | </template> | ||
| 121 | </el-table-column> | ||
| 122 | <el-table-column prop="zts" label="总套数" min-width="100"> | ||
| 123 | <template slot-scope="scope"> | ||
| 124 | <el-input | ||
| 125 | class="item" | ||
| 126 | :disabled="!ableOperation" | ||
| 127 | oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" | ||
| 128 | v-model="scope.row.zts" | ||
| 129 | placeholder="请输入内容" | ||
| 130 | @input="updaterow(scope.row)"> | ||
| 131 | </el-input> | ||
| 132 | </template> | ||
| 133 | </el-table-column> | ||
| 134 | </el-table> | ||
| 135 | </div> | ||
| 136 | </template> | ||
| 137 | <script> | ||
| 138 | import { mapGetters } from "vuex"; | ||
| 139 | |||
| 140 | export default { | ||
| 141 | computed: { | ||
| 142 | ...mapGetters(["dictData"]), | ||
| 143 | }, | ||
| 144 | props: { | ||
| 145 | tableData: { | ||
| 146 | type: Array, | ||
| 147 | default: function () { | ||
| 148 | return []; | ||
| 149 | }, | ||
| 150 | }, | ||
| 151 | ableOperation: { | ||
| 152 | type: Boolean, | ||
| 153 | default: false, | ||
| 154 | }, | ||
| 155 | |||
| 156 | }, | ||
| 157 | data () { | ||
| 158 | return { | ||
| 159 | // 键名转换，方法默认是label和children进行树状渲染 | ||
| 160 | key: 0, | ||
| 161 | tableDataList: [], | ||
| 162 | normalizer (node) { | ||
| 163 | if (node.children == null || node.children == "null") { | ||
| 164 | delete node.children; | ||
| 165 | } | ||
| 166 | return { | ||
| 167 | id: node.dcode, | ||
| 168 | label: node.dname, | ||
| 169 | children: node.children, | ||
| 170 | }; | ||
| 171 | }, | ||
| 172 | }; | ||
| 173 | }, | ||
| 174 | mounted () { | ||
| 175 | }, | ||
| 176 | watch: { | ||
| 177 | tableData: { | ||
| 178 | handler: function (val, oldVal) { | ||
| 179 | let that = this; | ||
| 180 | this.$nextTick(() => { | ||
| 181 | if (val.length == 0 || !val) { | ||
| 182 | that.tableDataList = _.cloneDeep([ | ||
| 183 | { | ||
| 184 | yt: null, | ||
| 185 | qssj: "", | ||
| 186 | jssj: "", | ||
| 187 | tdsyqx: "", | ||
| 188 | }, | ||
| 189 | ]); | ||
| 190 | } else { | ||
| 191 | that.tableDataList = _.cloneDeep(val); | ||
| 192 | } | ||
| 193 | }); | ||
| 194 | }, | ||
| 195 | immediate: true, | ||
| 196 | deep: true, | ||
| 197 | }, | ||
| 198 | }, | ||
| 199 | methods: { | ||
| 200 | /** | ||
| 201 | * @description: renderHeader | ||
| 202 | * @author: renchao | ||
| 203 | */ | ||
| 204 | renderHeader () { | ||
| 205 | return ( | ||
| 206 | <div> | ||
| 207 | {"序号"} | ||
| 208 | </div> | ||
| 209 | ); | ||
| 210 | }, | ||
| 211 | updaterow (a) { | ||
| 212 | this.$emit("updateFdcwxmList", this.tableDataList); | ||
| 213 | } | ||
| 214 | } | ||
| 215 | } | ||
| 216 | </script> | ||
| 217 | <style scoped lang="scss"> | ||
| 218 | .el-input { | ||
| 219 | border: none !important; | ||
| 220 | } | ||
| 221 | |||
| 222 | /deep/ .el-table__row { | ||
| 223 | border: none !important; | ||
| 224 | } | ||
| 225 | |||
| 226 | .el-date-editor.el-input { | ||
| 227 | width: 100%; | ||
| 228 | } | ||
| 229 | |||
| 230 | /deep/ .el-table th { | ||
| 231 | height: 30px !important; | ||
| 232 | } | ||
| 233 | </style> | ||
| 234 |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-28 16:28:43 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="from-clues"> | ||
| 8 | <!-- 发证信息 --> | ||
| 9 | <div class="from-clues-header"> | ||
| 10 | <el-form :model="ruleForm"> | ||
| 11 | <el-row :gutter="20"> | ||
| 12 | <el-col :span="6"> | ||
| 13 | <el-form-item label="印刷序列号"> | ||
| 14 | <el-input v-model="ruleForm.ysxlh" clearable placeholder="请输入印刷序列号"></el-input> | ||
| 15 | </el-form-item> | ||
| 16 | </el-col> | ||
| 17 | <el-col :span="6"> | ||
| 18 | <el-form-item label="证书号"> | ||
| 19 | <el-input v-model="ruleForm.zsh" clearable placeholder="请输入证书号"></el-input> | ||
| 20 | </el-form-item> | ||
| 21 | </el-col> | ||
| 22 | <el-col :span="6"> | ||
| 23 | <el-form-item label="权利人"> | ||
| 24 | <el-input v-model="ruleForm.qlr" clearable placeholder="请输入权利人"></el-input> | ||
| 25 | </el-form-item> | ||
| 26 | </el-col> | ||
| 27 | <el-col :span="6" class="btnColRight" v-if="viewEdit"> | ||
| 28 | <el-form-item> | ||
| 29 | <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button> | ||
| 30 | <el-button type="primary" icon="el-icon-search" @click="zslqClick">证书领取</el-button> | ||
| 31 | </el-form-item> | ||
| 32 | </el-col> | ||
| 33 | </el-row> | ||
| 34 | </el-form> | ||
| 35 | </div> | ||
| 36 | <div class="from-clues-content"> | ||
| 37 | <lb-table border :column="tableData.columns" :heightNum="210" :data="tableData.data" :pagination="false"> | ||
| 38 | </lb-table> | ||
| 39 | </div> | ||
| 40 | </div> | ||
| 41 | </template> | ||
| 42 | <script> | ||
| 43 | import { mapGetters } from 'vuex' | ||
| 44 | import store from '@/store/index.js' | ||
| 45 | import table from "@/utils/mixin/table"; | ||
| 46 | import { datas } from "../javascript/fzxxdata"; | ||
| 47 | import { getCertificateList } from "@/api/bdcqz.js"; | ||
| 48 | export default { | ||
| 49 | mixins: [table], | ||
| 50 | data () { | ||
| 51 | return { | ||
| 52 | //表单是否可操作 | ||
| 53 | viewEdit: false, | ||
| 54 | ruleForm: { | ||
| 55 | ysxlh: '', | ||
| 56 | zsh: '', | ||
| 57 | qlr: '', | ||
| 58 | bsmSldy: '' | ||
| 59 | }, | ||
| 60 | tableData: { | ||
| 61 | total: 0, | ||
| 62 | columns: datas.columns().fzgrid, | ||
| 63 | data: [] | ||
| 64 | }, | ||
| 65 | dialogVisible: false | ||
| 66 | } | ||
| 67 | }, | ||
| 68 | created () { | ||
| 69 | this.viewEdit = this.$parent.currentSelectTab.ableOperation | ||
| 70 | }, | ||
| 71 | computed: { | ||
| 72 | ...mapGetters(['workFresh']) | ||
| 73 | }, | ||
| 74 | watch: { | ||
| 75 | workFresh: { | ||
| 76 | handler (newVal, oldVal) { | ||
| 77 | if (newVal) this.queryClick() | ||
| 78 | } | ||
| 79 | } | ||
| 80 | }, | ||
| 81 | methods: { | ||
| 82 | /** | ||
| 83 | * @description: queryClick | ||
| 84 | * @author: renchao | ||
| 85 | */ | ||
| 86 | queryClick () { | ||
| 87 | this.ruleForm.bsmSlsq = this.$route.query.bsmSlsq; | ||
| 88 | getCertificateList(this.ruleForm).then(res => { | ||
| 89 | if (res.code === 200) { | ||
| 90 | this.tableData.data = res.result ? res.result : [] | ||
| 91 | } | ||
| 92 | }) | ||
| 93 | }, | ||
| 94 | /** | ||
| 95 | * @description: | ||
| 96 | * @author: renchao | ||
| 97 | */ | ||
| 98 | zslqClick () { | ||
| 99 | store.dispatch('user/reWorkFresh', false) | ||
| 100 | this.$popupDialog("不动产权证领取", "workflow/components/dialog/zslq", {}, '80%', true) | ||
| 101 | } | ||
| 102 | } | ||
| 103 | } | ||
| 104 | </script> | ||
| 105 | <style scoped lang='scss'> | ||
| 106 | @import "~@/styles/public.scss"; | ||
| 107 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-05-17 10:41:15 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div> | ||
| 8 | <div class="process-viewer"> | ||
| 9 | <div | ||
| 10 | v-show="!isLoading" | ||
| 11 | ref="processCanvas" | ||
| 12 | class="process-canvas" | ||
| 13 | style="height: 280px" | ||
| 14 | /> | ||
| 15 | <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> | ||
| 16 | <defs ref="customSuccessDefs"> | ||
| 17 | <marker | ||
| 18 | id="sequenceflow-end-white-success" | ||
| 19 | view-box="0 0 20 20" | ||
| 20 | ref-x="11" | ||
| 21 | ref-y="10" | ||
| 22 | marker-width="10" | ||
| 23 | marker-height="10" | ||
| 24 | orient="auto" | ||
| 25 | > | ||
| 26 | <path | ||
| 27 | class="success-arrow" | ||
| 28 | d="M 1 5 L 11 10 L 1 15 Z" | ||
| 29 | style=" | ||
| 30 | stroke-width: 1px; | ||
| 31 | stroke-linecap: round; | ||
| 32 | stroke-dasharray: 10000, 1; | ||
| 33 | " | ||
| 34 | /> | ||
| 35 | </marker> | ||
| 36 | <marker | ||
| 37 | id="conditional-flow-marker-white-success" | ||
| 38 | view-box="0 0 20 20" | ||
| 39 | ref-x="-1" | ||
| 40 | ref-y="10" | ||
| 41 | marker-width="10" | ||
| 42 | marker-height="10" | ||
| 43 | orient="auto" | ||
| 44 | > | ||
| 45 | <path | ||
| 46 | class="success-conditional" | ||
| 47 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | ||
| 48 | style=" | ||
| 49 | stroke-width: 1px; | ||
| 50 | stroke-linecap: round; | ||
| 51 | stroke-dasharray: 10000, 1; | ||
| 52 | " | ||
| 53 | /> | ||
| 54 | </marker> | ||
| 55 | </defs> | ||
| 56 | <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> | ||
| 57 | <defs ref="customFailDefs"> | ||
| 58 | <marker | ||
| 59 | id="sequenceflow-end-white-fail" | ||
| 60 | view-box="0 0 20 20" | ||
| 61 | ref-x="11" | ||
| 62 | ref-y="10" | ||
| 63 | marker-width="10" | ||
| 64 | marker-height="10" | ||
| 65 | orient="auto" | ||
| 66 | > | ||
| 67 | <path | ||
| 68 | class="fail-arrow" | ||
| 69 | d="M 1 5 L 11 10 L 1 15 Z" | ||
| 70 | style=" | ||
| 71 | stroke-width: 1px; | ||
| 72 | stroke-linecap: round; | ||
| 73 | stroke-dasharray: 10000, 1; | ||
| 74 | " | ||
| 75 | /> | ||
| 76 | </marker> | ||
| 77 | <marker | ||
| 78 | id="conditional-flow-marker-white-fail" | ||
| 79 | view-box="0 0 20 20" | ||
| 80 | ref-x="-1" | ||
| 81 | ref-y="10" | ||
| 82 | marker-width="10" | ||
| 83 | marker-height="10" | ||
| 84 | orient="auto" | ||
| 85 | > | ||
| 86 | <path | ||
| 87 | class="fail-conditional" | ||
| 88 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | ||
| 89 | style=" | ||
| 90 | stroke-width: 1px; | ||
| 91 | stroke-linecap: round; | ||
| 92 | stroke-dasharray: 10000, 1; | ||
| 93 | " | ||
| 94 | /> | ||
| 95 | </marker> | ||
| 96 | </defs> | ||
| 97 | |||
| 98 | <div style="position: absolute; top: 0px; left: 0px; width: 100%"> | ||
| 99 | <el-row type="flex" justify="end"> | ||
| 100 | <el-button-group key="scale-control" size="medium"> | ||
| 101 | <el-button | ||
| 102 | size="medium" | ||
| 103 | type="default" | ||
| 104 | :plain="true" | ||
| 105 | :disabled="defaultZoom <= 0.3" | ||
| 106 | icon="el-icon-zoom-out" | ||
| 107 | @click="processZoomOut()" | ||
| 108 | /> | ||
| 109 | <el-button size="medium" type="default" style="width: 90px">{{ | ||
| 110 | Math.floor(this.defaultZoom * 10 * 10) + "%" | ||
| 111 | }}</el-button> | ||
| 112 | <el-button | ||
| 113 | size="medium" | ||
| 114 | type="default" | ||
| 115 | :plain="true" | ||
| 116 | :disabled="defaultZoom >= 3.9" | ||
| 117 | icon="el-icon-zoom-in" | ||
| 118 | @click="processZoomIn()" | ||
| 119 | /> | ||
| 120 | <el-button | ||
| 121 | size="medium" | ||
| 122 | type="default" | ||
| 123 | icon="el-icon-c-scale-to-original" | ||
| 124 | @click="processReZoom()" | ||
| 125 | /> | ||
| 126 | <slot /> | ||
| 127 | </el-button-group> | ||
| 128 | </el-row> | ||
| 129 | </div> | ||
| 130 | </div> | ||
| 131 | <!-- 已完成节点悬浮弹窗 --> | ||
| 132 | <div class="information-list"> | ||
| 133 | <el-select v-model="selectValue" @change="handleSelect"> | ||
| 134 | <el-option | ||
| 135 | v-for="item in selectOptions" | ||
| 136 | :key="item.value" | ||
| 137 | :label="item.label" | ||
| 138 | :value="item.value" | ||
| 139 | > | ||
| 140 | </el-option> | ||
| 141 | </el-select> | ||
| 142 | <div class="cutline"> | ||
| 143 | <p class="cutlines">图例</p> | ||
| 144 | <div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }"> | ||
| 145 | {{item.value}} | ||
| 146 | </div> | ||
| 147 | </div> | ||
| 148 | <el-table | ||
| 149 | height="190" | ||
| 150 | :data="taskCommentList" | ||
| 151 | size="mini" | ||
| 152 | border | ||
| 153 | header-cell-class-name="table-header-gray" | ||
| 154 | > | ||
| 155 | <el-table-column | ||
| 156 | label="序号" | ||
| 157 | header-align="center" | ||
| 158 | align="center" | ||
| 159 | type="index" | ||
| 160 | width="55px" | ||
| 161 | /> | ||
| 162 | <el-table-column | ||
| 163 | label="转入时间" | ||
| 164 | prop="createTime" | ||
| 165 | :formatter="formatDate" | ||
| 166 | width="160" | ||
| 167 | align="center" | ||
| 168 | /> | ||
| 169 | <el-table-column | ||
| 170 | label="认领时间" | ||
| 171 | prop="claimTime" | ||
| 172 | :formatter="formatDate" | ||
| 173 | width="160" | ||
| 174 | align="center" | ||
| 175 | /> | ||
| 176 | <el-table-column | ||
| 177 | label="转出时间" | ||
| 178 | prop="endTime" | ||
| 179 | :formatter="formatDate" | ||
| 180 | width="160" | ||
| 181 | align="center" | ||
| 182 | /> | ||
| 183 | <el-table-column label="操作方式" prop="controls" align="center" /> | ||
| 184 | <el-table-column label="意见" prop="idea" align="center" /> | ||
| 185 | </el-table> | ||
| 186 | </div> | ||
| 187 | </div> | ||
| 188 | </template> | ||
| 189 | <script> | ||
| 190 | import "@/styles/package/theme/index.scss"; | ||
| 191 | import BpmnViewer from "bpmn-js/lib/Viewer"; | ||
| 192 | import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; | ||
| 193 | export default { | ||
| 194 | props: { | ||
| 195 | formData: { | ||
| 196 | type: Object, | ||
| 197 | default: {}, | ||
| 198 | }, | ||
| 199 | }, | ||
| 200 | data() { | ||
| 201 | return { | ||
| 202 | dlgTitle: undefined, | ||
| 203 | defaultZoom: 1, | ||
| 204 | // 是否正在加载流程图 | ||
| 205 | isLoading: true, | ||
| 206 | bpmnViewer: undefined, | ||
| 207 | // 已完成流程元素 | ||
| 208 | processNodeInfo: undefined, | ||
| 209 | // 当前任务id | ||
| 210 | selectTaskId: undefined, | ||
| 211 | // 任务节点审批记录 | ||
| 212 | taskList: [], | ||
| 213 | taskCommentList: [], | ||
| 214 | // 已完成任务悬浮延迟Timer | ||
| 215 | hoverTimer: null, | ||
| 216 | // 下拉 | ||
| 217 | selectValue: "", | ||
| 218 | selectOptions: [], | ||
| 219 | cutlinelist:[ | ||
| 220 | { | ||
| 221 | value: "完成节点", | ||
| 222 | color: "#4eb819", | ||
| 223 | backgroundColor :"rgba(78, 184, 25,0.2)" | ||
| 224 | }, | ||
| 225 | { | ||
| 226 | value: "当前节点", | ||
| 227 | color: "#409EFF", | ||
| 228 | backgroundColor :"rgba(64, 158, 255,0.2)" | ||
| 229 | }, | ||
| 230 | { | ||
| 231 | value: "挂起节点", | ||
| 232 | color: "#E6A23C", | ||
| 233 | backgroundColor :"rgba(230, 162, 60,0.2)" | ||
| 234 | }, | ||
| 235 | { | ||
| 236 | value: "阻塞节点", | ||
| 237 | color: "#F56C6C", | ||
| 238 | backgroundColor :"rgb(245, 108, 108,0.2)" | ||
| 239 | }, | ||
| 240 | { | ||
| 241 | value: "未激活节点", | ||
| 242 | color: "#000000", | ||
| 243 | backgroundColor :"none", | ||
| 244 | } | ||
| 245 | ], | ||
| 246 | }; | ||
| 247 | }, | ||
| 248 | created() { | ||
| 249 | this.$nextTick(() => { | ||
| 250 | // 获取流程记录 | ||
| 251 | this.getCommentList(); | ||
| 252 | this.setProcessStatus(this.formData.finishedInfo); | ||
| 253 | this.importXML(this.formData.xml); | ||
| 254 | }); | ||
| 255 | }, | ||
| 256 | destroyed() { | ||
| 257 | this.clearViewer(); | ||
| 258 | }, | ||
| 259 | methods: { | ||
| 260 | /** | ||
| 261 | * @description: formatDate | ||
| 262 | * @param {*} row | ||
| 263 | * @param {*} column | ||
| 264 | * @author: renchao | ||
| 265 | */ | ||
| 266 | formatDate(row, column) { | ||
| 267 | let data = row[column.property]; | ||
| 268 | if (data == null) { | ||
| 269 | return null; | ||
| 270 | } | ||
| 271 | let dt = new Date(data); | ||
| 272 | return ( | ||
| 273 | dt.getFullYear() + | ||
| 274 | "-" + | ||
| 275 | (dt.getMonth() + 1) + | ||
| 276 | "-" + | ||
| 277 | dt.getDate() + | ||
| 278 | " " + | ||
| 279 | dt.getHours() + | ||
| 280 | ":" + | ||
| 281 | dt.getMinutes() + | ||
| 282 | ":" + | ||
| 283 | dt.getSeconds() | ||
| 284 | ); | ||
| 285 | }, | ||
| 286 | /** | ||
| 287 | * @description: processReZoom | ||
| 288 | * @author: renchao | ||
| 289 | */ | ||
| 290 | processReZoom() { | ||
| 291 | this.defaultZoom = 1; | ||
| 292 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); | ||
| 293 | }, | ||
| 294 | /** | ||
| 295 | * @description: processZoomIn | ||
| 296 | * @param {*} zoomStep | ||
| 297 | * @author: renchao | ||
| 298 | */ | ||
| 299 | processZoomIn(zoomStep = 0.1) { | ||
| 300 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; | ||
| 301 | if (newZoom > 4) { | ||
| 302 | throw new Error( | ||
| 303 | "[Process Designer Warn ]: The zoom ratio cannot be greater than 4" | ||
| 304 | ); | ||
| 305 | } | ||
| 306 | this.defaultZoom = newZoom; | ||
| 307 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 308 | }, | ||
| 309 | /** | ||
| 310 | * @description: processZoomOut | ||
| 311 | * @param {*} zoomStep | ||
| 312 | * @author: renchao | ||
| 313 | */ | ||
| 314 | processZoomOut(zoomStep = 0.1) { | ||
| 315 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; | ||
| 316 | if (newZoom < 0.2) { | ||
| 317 | throw new Error( | ||
| 318 | "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2" | ||
| 319 | ); | ||
| 320 | } | ||
| 321 | this.defaultZoom = newZoom; | ||
| 322 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 323 | }, | ||
| 324 | /** | ||
| 325 | * @description: getOperationTagType | ||
| 326 | * @param {*} type | ||
| 327 | * @author: renchao | ||
| 328 | */ | ||
| 329 | getOperationTagType(type) { | ||
| 330 | return "success"; | ||
| 331 | }, | ||
| 332 | // 流程图预览清空 | ||
| 333 | /** | ||
| 334 | * @description: 流程图预览清空 | ||
| 335 | * @param {*} e | ||
| 336 | * @author: renchao | ||
| 337 | */ | ||
| 338 | clearViewer(a) { | ||
| 339 | if (this.$refs.processCanvas) { | ||
| 340 | this.$refs.processCanvas.innerHTML = ""; | ||
| 341 | } | ||
| 342 | if (this.bpmnViewer) { | ||
| 343 | this.bpmnViewer.destroy(); | ||
| 344 | } | ||
| 345 | this.bpmnViewer = null; | ||
| 346 | }, | ||
| 347 | // 添加自定义箭头 | ||
| 348 | /** | ||
| 349 | * @description: 添加自定义箭头 | ||
| 350 | * @author: renchao | ||
| 351 | */ | ||
| 352 | addCustomDefs() { | ||
| 353 | const canvas = this.bpmnViewer.get("canvas"); | ||
| 354 | const svg = canvas._svg; | ||
| 355 | const customSuccessDefs = this.$refs.customSuccessDefs; | ||
| 356 | const customFailDefs = this.$refs.customFailDefs; | ||
| 357 | svg.appendChild(customSuccessDefs); | ||
| 358 | svg.appendChild(customFailDefs); | ||
| 359 | }, | ||
| 360 | // 任务悬浮弹窗 | ||
| 361 | /** | ||
| 362 | * @description: 任务悬浮弹窗 | ||
| 363 | * @param {*} element | ||
| 364 | * @author: renchao | ||
| 365 | */ | ||
| 366 | onSelectElement(element) { | ||
| 367 | this.selectTaskId = undefined; | ||
| 368 | this.dlgTitle = undefined; | ||
| 369 | let allfinishedTaskSet = [ | ||
| 370 | ...this.processNodeInfo.finishedTaskSet, | ||
| 371 | ...this.processNodeInfo.unfinishedTaskSet, | ||
| 372 | ]; | ||
| 373 | if (this.processNodeInfo == null || allfinishedTaskSet == null) return; | ||
| 374 | if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { | ||
| 375 | return; | ||
| 376 | } | ||
| 377 | this.selectTaskId = element.id; | ||
| 378 | this.selectValue = element.id; | ||
| 379 | this.dlgTitle = element.businessObject | ||
| 380 | ? element.businessObject.name | ||
| 381 | : undefined; | ||
| 382 | // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 | ||
| 383 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 384 | return item.taskDefinitionKey === this.selectTaskId; | ||
| 385 | }); | ||
| 386 | if (this.taskCommentList.length == 0) { | ||
| 387 | this.taskCommentList = this.taskList; | ||
| 388 | } | ||
| 389 | }, | ||
| 390 | // 下拉列表切换 | ||
| 391 | /** | ||
| 392 | * @description: 下拉列表切换 | ||
| 393 | * @param {*} val | ||
| 394 | * @author: renchao | ||
| 395 | */ | ||
| 396 | handleSelect(val) { | ||
| 397 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 398 | return item.taskDefinitionKey === val; | ||
| 399 | }); | ||
| 400 | if (this.taskCommentList.length == 0) { | ||
| 401 | this.taskCommentList = this.taskList; | ||
| 402 | } | ||
| 403 | }, | ||
| 404 | // 显示流程图 | ||
| 405 | /** | ||
| 406 | * @description: 显示流程图 | ||
| 407 | * @param {*} xml | ||
| 408 | * @author: renchao | ||
| 409 | */ | ||
| 410 | async importXML(xml) { | ||
| 411 | let xmlData = this.$x2js.xml2js(xml).definitions.process; | ||
| 412 | this.selectOptions = xmlData.userTask.map((item) => { | ||
| 413 | return { value: item._id, label: item._name }; | ||
| 414 | }); | ||
| 415 | this.selectOptions = [ | ||
| 416 | { value: xmlData.startEvent._id, label: "浏览记录" }, | ||
| 417 | ...this.selectOptions, | ||
| 418 | ]; | ||
| 419 | this.selectOptions = this.selectOptions | ||
| 420 | .map((item) => { | ||
| 421 | if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { | ||
| 422 | return item; | ||
| 423 | } | ||
| 424 | if ( | ||
| 425 | this.formData.finishedInfo.unfinishedTaskSet.includes(item.value) | ||
| 426 | ) { | ||
| 427 | return item; | ||
| 428 | } | ||
| 429 | }) | ||
| 430 | .filter(Boolean); | ||
| 431 | this.selectValue = xmlData.startEvent._id; | ||
| 432 | this.clearViewer("a"); | ||
| 433 | if (xml != null && xml !== "") { | ||
| 434 | try { | ||
| 435 | this.bpmnViewer = new BpmnViewer({ | ||
| 436 | additionalModules: [ | ||
| 437 | // 移动整个画布 | ||
| 438 | MoveCanvasModule, | ||
| 439 | ], | ||
| 440 | container: this.$refs.processCanvas, | ||
| 441 | }); | ||
| 442 | // 任务节点悬浮事件 | ||
| 443 | this.bpmnViewer.on("element.click", ({ element }) => { | ||
| 444 | this.onSelectElement(element); | ||
| 445 | }); | ||
| 446 | await this.bpmnViewer.importXML(xml); | ||
| 447 | this.isLoading = true; | ||
| 448 | this.addCustomDefs(); | ||
| 449 | } catch (e) { | ||
| 450 | this.clearViewer("b"); | ||
| 451 | } finally { | ||
| 452 | this.isLoading = false; | ||
| 453 | this.setProcessStatus(this.processNodeInfo); | ||
| 454 | this.$nextTick(() => { | ||
| 455 | this.processReZoom(); | ||
| 456 | }); | ||
| 457 | } | ||
| 458 | } | ||
| 459 | }, | ||
| 460 | // 获取流程记录 | ||
| 461 | /** | ||
| 462 | * @description: 获取流程记录 | ||
| 463 | * @author: renchao | ||
| 464 | */ | ||
| 465 | getCommentList() { | ||
| 466 | this.formData.allCommentList.forEach(async (item, index) => { | ||
| 467 | // item.comments.forEach(element => { | ||
| 468 | // if(element.type=="COMPLETE"){ | ||
| 469 | // this.formData.allCommentList[index].idea=element.message | ||
| 470 | // this.formData.allCommentList[index].controls="完成" | ||
| 471 | // } | ||
| 472 | // }); | ||
| 473 | let type = item.comments[item.comments.length - 1].type; | ||
| 474 | this.formData.allCommentList[index].idea = | ||
| 475 | item.comments[item.comments.length - 1].message; | ||
| 476 | // 操作方式 | ||
| 477 | let controls = ""; | ||
| 478 | // 正在办理 | ||
| 479 | // 已完结 | ||
| 480 | // 已退回 | ||
| 481 | switch (type) { | ||
| 482 | case "COMPLETE": | ||
| 483 | controls = "完成"; | ||
| 484 | break; | ||
| 485 | case "CLAIM": | ||
| 486 | controls = "完成"; | ||
| 487 | break; | ||
| 488 | case "ASSIGN": | ||
| 489 | controls = "转办"; | ||
| 490 | break; | ||
| 491 | case "DELEGATE": | ||
| 492 | controls = "委派"; | ||
| 493 | break; | ||
| 494 | case "UNCLAIM": | ||
| 495 | controls = "取消认领"; | ||
| 496 | break; | ||
| 497 | case "STOP": | ||
| 498 | controls = "终止"; | ||
| 499 | break; | ||
| 500 | case "BACK": | ||
| 501 | controls = "退回"; | ||
| 502 | break; | ||
| 503 | } | ||
| 504 | this.formData.allCommentList[index].controls = controls; | ||
| 505 | this.formData.allCommentList[index].agent = item.assignee.name; | ||
| 506 | }); | ||
| 507 | this.formData.handlinglist.forEach(async (item, index) => { | ||
| 508 | if (item.assignee.name) { | ||
| 509 | this.formData.handlinglist[index].agent = item.assignee.name; | ||
| 510 | } else { | ||
| 511 | let str = ""; | ||
| 512 | item.countersign.forEach((item) => { | ||
| 513 | str += item.name + ","; | ||
| 514 | }); | ||
| 515 | str = str.slice(0, -1); | ||
| 516 | this.formData.allCommentList[index].agent = str; | ||
| 517 | } | ||
| 518 | }); | ||
| 519 | this.taskList = [ | ||
| 520 | ...this.formData.allCommentList, | ||
| 521 | ...this.formData.handlinglist, | ||
| 522 | ]; | ||
| 523 | // this.taskList =this.formData.allCommentList; | ||
| 524 | // 处理数据之后赋值 | ||
| 525 | this.taskCommentList = this.taskList; | ||
| 526 | this.taskCommentList = this.taskCommentList.sort(this.sortDownDate); | ||
| 527 | }, | ||
| 528 | /** | ||
| 529 | * 时间排序函数 | ||
| 530 | * @description: formatDate | ||
| 531 | * @param {*} row | ||
| 532 | * @param {*} column | ||
| 533 | * @author: renchao | ||
| 534 | */ | ||
| 535 | |||
| 536 | sortDownDate(a, b) { | ||
| 537 | return Date.parse(a.createTime) - Date.parse(b.createTime); | ||
| 538 | }, | ||
| 539 | // 设置流程图元素状态 | ||
| 540 | /** | ||
| 541 | * @description: 设置流程图元素状态 | ||
| 542 | * @param {*} processNodeInfo | ||
| 543 | * @author: renchao | ||
| 544 | */ | ||
| 545 | setProcessStatus(processNodeInfo) { | ||
| 546 | this.processNodeInfo = processNodeInfo; | ||
| 547 | if ( | ||
| 548 | this.isLoading || | ||
| 549 | this.processNodeInfo == null || | ||
| 550 | this.bpmnViewer == null | ||
| 551 | ) | ||
| 552 | return; | ||
| 553 | const { | ||
| 554 | finishedTaskSet, | ||
| 555 | rejectedTaskSet, | ||
| 556 | unfinishedTaskSet, | ||
| 557 | finishedSequenceFlowSet, | ||
| 558 | } = this.processNodeInfo; | ||
| 559 | const canvas = this.bpmnViewer.get("canvas"); | ||
| 560 | const elementRegistry = this.bpmnViewer.get("elementRegistry"); | ||
| 561 | if (Array.isArray(finishedSequenceFlowSet)) { | ||
| 562 | finishedSequenceFlowSet.forEach((item) => { | ||
| 563 | if (item != null) { | ||
| 564 | canvas.addMarker(item, "success"); | ||
| 565 | const element = elementRegistry.get(item); | ||
| 566 | const conditionExpression = | ||
| 567 | element.businessObject.conditionExpression; | ||
| 568 | if (conditionExpression) { | ||
| 569 | canvas.addMarker(item, "condition-expression"); | ||
| 570 | } | ||
| 571 | } | ||
| 572 | }); | ||
| 573 | } | ||
| 574 | if (Array.isArray(finishedTaskSet)) { | ||
| 575 | finishedTaskSet.forEach((item) => canvas.addMarker(item, "success")); | ||
| 576 | } | ||
| 577 | if (Array.isArray(unfinishedTaskSet)) { | ||
| 578 | unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary")); | ||
| 579 | } | ||
| 580 | if (Array.isArray(rejectedTaskSet)) { | ||
| 581 | rejectedTaskSet.forEach((item) => { | ||
| 582 | if (item != null) { | ||
| 583 | const element = elementRegistry.get(item); | ||
| 584 | if (element.type.includes("Task")) { | ||
| 585 | canvas.addMarker(item, "danger"); | ||
| 586 | } else { | ||
| 587 | canvas.addMarker(item, "warning"); | ||
| 588 | } | ||
| 589 | } | ||
| 590 | }); | ||
| 591 | } | ||
| 592 | }, | ||
| 593 | }, | ||
| 594 | }; | ||
| 595 | </script> | ||
| 596 | <style scoped lang="scss"> | ||
| 597 | .information-list { | ||
| 598 | height: 220px; | ||
| 599 | margin-top: 10px; | ||
| 600 | |||
| 601 | p { | ||
| 602 | font-size: 16px; | ||
| 603 | line-height: 24px; | ||
| 604 | } | ||
| 605 | } | ||
| 606 | /deep/.bjs-powered-by { | ||
| 607 | display: none; | ||
| 608 | } | ||
| 609 | // /deep/.information-list { | ||
| 610 | // height: 170px; | ||
| 611 | // overflow: visible; | ||
| 612 | // } | ||
| 613 | .cutline { | ||
| 614 | |||
| 615 | float: right; | ||
| 616 | width: 30%; | ||
| 617 | height: 30px; | ||
| 618 | display: flex; | ||
| 619 | margin-right: 30px; | ||
| 620 | justify-content: space-between; | ||
| 621 | .cutlines{ | ||
| 622 | line-height: 30px; | ||
| 623 | font-weight: 600; | ||
| 624 | margin-right: 50px; | ||
| 625 | } | ||
| 626 | .concent{ | ||
| 627 | line-height: 30px; | ||
| 628 | line-height: 14px; | ||
| 629 | text-align: center; | ||
| 630 | align-items: center; | ||
| 631 | margin: auto; | ||
| 632 | padding: 3px; | ||
| 633 | border-radius: 4px; | ||
| 634 | border:1px solid #fff; | ||
| 635 | } | ||
| 636 | |||
| 637 | } | ||
| 638 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-17 13:50:53 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData"> | ||
| 8 | </lb-table> | ||
| 9 | </template> | ||
| 10 | <script> | ||
| 11 | import addQlr from './dialog/addQlr.vue' | ||
| 12 | import { mapGetters } from 'vuex' | ||
| 13 | export default { | ||
| 14 | components: { | ||
| 15 | addQlr | ||
| 16 | }, | ||
| 17 | computed: { | ||
| 18 | ...mapGetters(["dictData"]), | ||
| 19 | }, | ||
| 20 | props: { | ||
| 21 | tableData: { | ||
| 22 | type: Array, | ||
| 23 | default: function () { | ||
| 24 | return [] | ||
| 25 | } | ||
| 26 | }, | ||
| 27 | gyfs: { | ||
| 28 | type: String, | ||
| 29 | default: '1' | ||
| 30 | } | ||
| 31 | }, | ||
| 32 | data () { | ||
| 33 | return { | ||
| 34 | key: 0, | ||
| 35 | dataIndex: 0, | ||
| 36 | dialog: false, | ||
| 37 | details: {}, | ||
| 38 | tableDataList: [], | ||
| 39 | qlrCommonTable: [ | ||
| 40 | { | ||
| 41 | label: '序号', | ||
| 42 | type: 'index', | ||
| 43 | width: '50', | ||
| 44 | render: (h, scope) => { | ||
| 45 | return ( | ||
| 46 | <div> | ||
| 47 | {scope.$index + 1} | ||
| 48 | </div> | ||
| 49 | ) | ||
| 50 | } | ||
| 51 | }, | ||
| 52 | // { | ||
| 53 | // prop: "bdcdyh", | ||
| 54 | // label: "不动产单元号" | ||
| 55 | // }, | ||
| 56 | { | ||
| 57 | prop: "zl", | ||
| 58 | label: "坐落" | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "shbw", | ||
| 62 | label: "室号部位" | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "fwxzmc", | ||
| 66 | label: "房屋性质" | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "sjc", | ||
| 70 | label: "层号" | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "jzmj", | ||
| 74 | label: "建筑面积" | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "fwlxmc", | ||
| 78 | label: "房屋类型" | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "showfwyt", | ||
| 82 | label: "房屋用途" | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "showfwjg", | ||
| 86 | label: "房屋结构" | ||
| 87 | }, | ||
| 88 | ], | ||
| 89 | column: this.qlrCommonTable | ||
| 90 | } | ||
| 91 | }, | ||
| 92 | watch: { | ||
| 93 | tableData: { | ||
| 94 | handler: function (val, oldVal) { | ||
| 95 | let that = this; | ||
| 96 | if (val.length == 0 || !val) { | ||
| 97 | } else { | ||
| 98 | that.tableDataList = _.cloneDeep(val) | ||
| 99 | } | ||
| 100 | }, | ||
| 101 | immediate: true, | ||
| 102 | deep: true | ||
| 103 | }, | ||
| 104 | gyfs: { | ||
| 105 | handler (newVal, oldValue) { | ||
| 106 | let dataList = _.cloneDeep(this.qlrCommonTable) | ||
| 107 | if (newVal == '1') { | ||
| 108 | this.column = _.cloneDeep(dataList).slice(1, dataList.length) | ||
| 109 | } else if ((newVal == '2')) { | ||
| 110 | this.column = dataList | ||
| 111 | } else { | ||
| 112 | this.column = _.cloneDeep(dataList) | ||
| 113 | this.column.splice( | ||
| 114 | 2, 0, { | ||
| 115 | prop: "qlbl", | ||
| 116 | label: "份数" | ||
| 117 | }) | ||
| 118 | } | ||
| 119 | }, | ||
| 120 | immediate: true | ||
| 121 | } | ||
| 122 | }, | ||
| 123 | methods: { | ||
| 124 | } | ||
| 125 | } | ||
| 126 | </script> | ||
| 127 | <style scoped lang="scss"> | ||
| 128 | /deep/.el-table th { | ||
| 129 | height: 30px !important; | ||
| 130 | } | ||
| 131 | /deep/.el-table--small .el-table__cell { | ||
| 132 | padding: 5px; | ||
| 133 | } | ||
| 134 | </style> | ||
| 135 |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-09-14 17:19:26 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="slxx sdqxx"> | ||
| 8 | <el-form | ||
| 9 | :model="ruleForm" | ||
| 10 | ref="ruleForm" | ||
| 11 | v-Loading="loading" | ||
| 12 | :label-position="flag ? 'top' : ''" | ||
| 13 | :inline="flag" | ||
| 14 | label-width="130px"> | ||
| 15 | <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''"> | ||
| 16 | <div class="slxx_title title-block"> | ||
| 17 | 电力信息 | ||
| 18 | <div class="triangle"></div> | ||
| 19 | </div> | ||
| 20 | <el-row :gutter="10"> | ||
| 21 | <el-col :span="8"> | ||
| 22 | <el-form-item label="服务代码："> | ||
| 23 | <el-input v-model="ruleForm.serviceCode"></el-input> | ||
| 24 | </el-form-item> | ||
| 25 | </el-col> | ||
| 26 | <el-col :span="8"> | ||
| 27 | <el-form-item label="行政区划区县代码："> | ||
| 28 | <el-input v-model="ruleForm.areacode"></el-input> | ||
| 29 | </el-form-item> | ||
| 30 | </el-col> | ||
| 31 | <el-col :span="8"> | ||
| 32 | <el-form-item label="登记系统业务号："> | ||
| 33 | <el-input v-model="ruleForm.ywh"></el-input> | ||
| 34 | </el-form-item> | ||
| 35 | </el-col> | ||
| 36 | </el-row> | ||
| 37 | |||
| 38 | <el-row :gutter="10"> | ||
| 39 | <el-col :span="8"> | ||
| 40 | <el-form-item label="推送日期："> | ||
| 41 | <el-input v-model="ruleForm.SENDTIME"></el-input> | ||
| 42 | </el-form-item> | ||
| 43 | </el-col> | ||
| 44 | <el-col :span="8"> | ||
| 45 | <el-form-item label="原户主姓名："> | ||
| 46 | <el-input v-model="ruleForm.mcOld"></el-input> | ||
| 47 | </el-form-item> | ||
| 48 | </el-col> | ||
| 49 | <el-col :span="8"> | ||
| 50 | <el-form-item label="原户主身份证号码："> | ||
| 51 | <el-input v-model="ruleForm.zjhmOld"></el-input> | ||
| 52 | </el-form-item> | ||
| 53 | </el-col> | ||
| 54 | </el-row> | ||
| 55 | <el-row :gutter="10"> | ||
| 56 | <el-col :span="8"> | ||
| 57 | <el-form-item label="原户主联系电话："> | ||
| 58 | <el-input v-model="ruleForm.lxdhOld"></el-input> | ||
| 59 | </el-form-item> | ||
| 60 | </el-col> | ||
| 61 | <el-col :span="8"> | ||
| 62 | <el-form-item label="新户主姓名："> | ||
| 63 | <el-input v-model="ruleForm.mcNew"></el-input> | ||
| 64 | </el-form-item> | ||
| 65 | </el-col> | ||
| 66 | <el-col :span="8"> | ||
| 67 | <el-form-item label="新户主身份证号码："> | ||
| 68 | <el-input v-model="ruleForm.zjhmNew"></el-input> | ||
| 69 | </el-form-item> | ||
| 70 | </el-col> | ||
| 71 | </el-row> | ||
| 72 | <el-row :gutter="10"> | ||
| 73 | <el-col :span="8"> | ||
| 74 | <el-form-item label="新户主联系电话："> | ||
| 75 | <el-input v-model="ruleForm.lxdhNew"></el-input> | ||
| 76 | </el-form-item> | ||
| 77 | </el-col> | ||
| 78 | <el-col :span="8"> | ||
| 79 | <el-form-item label="房产证编号："> | ||
| 80 | <el-input v-model="ruleForm.fczbh"></el-input> | ||
| 81 | </el-form-item> | ||
| 82 | </el-col> | ||
| 83 | <el-col :span="8"> | ||
| 84 | <el-form-item label="是否过户："> | ||
| 85 | <el-switch | ||
| 86 | v-model="ruleForm.sfgh" | ||
| 87 | :active-value='1' | ||
| 88 | active-text="是" | ||
| 89 | :inactive-value="0" | ||
| 90 | inactive-text="否"> | ||
| 91 | </el-switch> | ||
| 92 | </el-form-item> | ||
| 93 | </el-col> | ||
| 94 | |||
| 95 | </el-row> | ||
| 96 | <el-row :gutter="10"> | ||
| 97 | <el-col :span="24"> | ||
| 98 | <el-form-item label="房屋坐落（地址）："> | ||
| 99 | <el-input v-model="ruleForm.fwzl" type="textarea" | ||
| 100 | :rows="2"></el-input> | ||
| 101 | </el-form-item> | ||
| 102 | </el-col> | ||
| 103 | </el-row> | ||
| 104 | <el-row class="btn" v-if="viewEdit"> | ||
| 105 | <el-form-item> | ||
| 106 | <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 107 | </el-form-item> | ||
| 108 | </el-row> | ||
| 109 | </div> | ||
| 110 | </el-form> | ||
| 111 | </div> | ||
| 112 | </template> | ||
| 113 | <script> | ||
| 114 | import { mapGetters } from "vuex"; | ||
| 115 | import { getDlxxByBsmSldy, saveOrUpdateDlxx } from "@/api/sfxx.js"; | ||
| 116 | export default { | ||
| 117 | computed: { | ||
| 118 | ...mapGetters(["dictData", "flag"]), | ||
| 119 | }, | ||
| 120 | mounted () { | ||
| 121 | // this.loading = true | ||
| 122 | this.viewEdit = this.$parent.currentSelectTab.ableOperation; | ||
| 123 | this.propsParam = this.$attrs; | ||
| 124 | var formdata = new FormData(); | ||
| 125 | formdata.append("bsmSldy", this.propsParam.bsmSldy); | ||
| 126 | formdata.append("djlx", this.propsParam.djlx); | ||
| 127 | formdata.append("isEdit", this.viewEdit); | ||
| 128 | console.log(this.propsParam) | ||
| 129 | this.getDlxxByBsmSldy() | ||
| 130 | }, | ||
| 131 | data () { | ||
| 132 | return { | ||
| 133 | loading: false, | ||
| 134 | //表单是否可操作 | ||
| 135 | viewEdit: false, | ||
| 136 | ruleForm: { | ||
| 137 | SFGH: 1 | ||
| 138 | } | ||
| 139 | } | ||
| 140 | }, | ||
| 141 | methods: { | ||
| 142 | getDlxxByBsmSldy() { | ||
| 143 | getDlxxByBsmSldy(this.propsParam.bsmSldy).then((res) => { | ||
| 144 | if (res.code === 200) { | ||
| 145 | if (res.result != null) { | ||
| 146 | this.ruleForm = res.result | ||
| 147 | } | ||
| 148 | } | ||
| 149 | }); | ||
| 150 | }, | ||
| 151 | saveOrUpdateDlxx() { | ||
| 152 | saveOrUpdateDlxx(this.ruleForm).then((res) => { | ||
| 153 | if (res.code === 200) { | ||
| 154 | this.$message.success("成功") | ||
| 155 | } | ||
| 156 | }); | ||
| 157 | }, | ||
| 158 | onSubmit () { | ||
| 159 | this.saveOrUpdateDlxx() | ||
| 160 | } | ||
| 161 | } | ||
| 162 | } | ||
| 163 | </script> | ||
| 164 | <style scoped lang="scss"> | ||
| 165 | @import "~@/styles/public.scss"; | ||
| 166 | @import "~@/styles/slxx/slxx.scss"; | ||
| 167 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-12-29 16:35:50 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class='sfxx'> | ||
| 8 | <div class="sfxx-left"> | ||
| 9 | <div class="slxx_title title-block"> | ||
| 10 | 基本信息 | ||
| 11 | <div class="triangle"></div> | ||
| 12 | </div> | ||
| 13 | <ul> | ||
| 14 | <li> | ||
| 15 | <p>业务号</p> | ||
| 16 | <p>{{detail.ywh}}</p> | ||
| 17 | </li> | ||
| 18 | <li> | ||
| 19 | <p>申请登记类型</p> | ||
| 20 | <p>{{detail.sqdjlx}}</p> | ||
| 21 | </li> | ||
| 22 | <li> | ||
| 23 | <p>联系人</p> | ||
| 24 | <p>{{detail.lxr}}</p> | ||
| 25 | </li> | ||
| 26 | <li> | ||
| 27 | <p>联系人电话</p> | ||
| 28 | <p>{{detail.lxdh}}</p> | ||
| 29 | </li> | ||
| 30 | <li> | ||
| 31 | <p>缴费人</p> | ||
| 32 | <p><el-input v-model="detail.jfr"></el-input></p> | ||
| 33 | </li> | ||
| 34 | <li> | ||
| 35 | <p>缴费单号</p> | ||
| 36 | <p><el-input v-model="detail.jfdh"></el-input></p> | ||
| 37 | </li> | ||
| 38 | <li> | ||
| 39 | <p>应收金额</p> | ||
| 40 | <p style="color:red">{{detail.ysje}}元</p> | ||
| 41 | </li> | ||
| 42 | <li> | ||
| 43 | <p>实收金额</p> | ||
| 44 | <p><el-input v-model="detail.ssje"></el-input></p> | ||
| 45 | </li> | ||
| 46 | <li> | ||
| 47 | <p>备注</p> | ||
| 48 | <p><el-input v-model="detail.bz"></el-input></p> | ||
| 49 | </li> | ||
| 50 | </ul> | ||
| 51 | </div> | ||
| 52 | <div class="sfxx-right"> | ||
| 53 | <div class="slxx_title title-block"> | ||
| 54 | 收费明细 | ||
| 55 | <!-- <div class="triangle"></div> --> | ||
| 56 | <el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button> | ||
| 57 | </div> | ||
| 58 | <el-table :data="tableData.data" border :height="355"> | ||
| 59 | <el-table-column v-for="item in tableData.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center"> | ||
| 60 | </el-table-column> | ||
| 61 | <el-table-column label="操作" width="50"> | ||
| 62 | <template slot-scope="scope"> | ||
| 63 | <el-button type="text" @click="handleDelete(scope.row)">删除</el-button> | ||
| 64 | </template> | ||
| 65 | </el-table-column> | ||
| 66 | </el-table> | ||
| 67 | <div class="slxx_title title-block"> | ||
| 68 | 票据 | ||
| 69 | <div style="height:250px"> | ||
| 70 | <img src="../../../image/pj.jpg" alt="" style="height:100%"> | ||
| 71 | </div> | ||
| 72 | </div> | ||
| 73 | </div> | ||
| 74 | </div> | ||
| 75 | </template> | ||
| 76 | <script> | ||
| 77 | import { mapGetters } from "vuex"; | ||
| 78 | import { getSfmxList, deleteSfmx } from "@/api/sfxx.js"; | ||
| 79 | export default { | ||
| 80 | components: {}, | ||
| 81 | data () { | ||
| 82 | return { | ||
| 83 | detail: { | ||
| 84 | ywh: '', | ||
| 85 | sqdjlx: '', | ||
| 86 | lxr: '', | ||
| 87 | lxdh: '', | ||
| 88 | jfr: '', | ||
| 89 | jfdh: '', | ||
| 90 | ysje: '', | ||
| 91 | ssje: '', | ||
| 92 | bz: '' | ||
| 93 | }, | ||
| 94 | tableData: { | ||
| 95 | columns: [ | ||
| 96 | { | ||
| 97 | prop: "sfdw", | ||
| 98 | label: "收费单位", | ||
| 99 | }, | ||
| 100 | { | ||
| 101 | label: '是否额外收费', | ||
| 102 | align: 'center', | ||
| 103 | render: (h, scope) => { | ||
| 104 | return ( | ||
| 105 | <div> | ||
| 106 | {scope.row.sfewsf == '1' ? <span>是</span> : <span>否</span>} | ||
| 107 | </div> | ||
| 108 | ) | ||
| 109 | } | ||
| 110 | }, | ||
| 111 | { | ||
| 112 | prop: "sfry", | ||
| 113 | label: "收费人员", | ||
| 114 | }, | ||
| 115 | { | ||
| 116 | prop: "sfkmmc", | ||
| 117 | label: "收费科目名称", | ||
| 118 | }, | ||
| 119 | { | ||
| 120 | prop: "sjffr", | ||
| 121 | label: "实际付费人", | ||
| 122 | }, | ||
| 123 | { | ||
| 124 | prop: "ssje", | ||
| 125 | label: "实收金额", | ||
| 126 | }, | ||
| 127 | { | ||
| 128 | prop: "ysje", | ||
| 129 | label: "应收金额", | ||
| 130 | } | ||
| 131 | ], | ||
| 132 | data: [] | ||
| 133 | } | ||
| 134 | } | ||
| 135 | }, | ||
| 136 | computed: { | ||
| 137 | ...mapGetters(["workFresh"]), | ||
| 138 | }, | ||
| 139 | watch: { | ||
| 140 | workFresh: { | ||
| 141 | handler (newVal, oldVal) { | ||
| 142 | if (newVal) this.getList(); | ||
| 143 | }, | ||
| 144 | }, | ||
| 145 | }, | ||
| 146 | mounted () { | ||
| 147 | this.getList() | ||
| 148 | }, | ||
| 149 | methods: { | ||
| 150 | getList () { | ||
| 151 | let bsmBusiness = this.$route.query.bsmBusiness ? this.$route.query.bsmBusiness : window.currentSelect.bsmBusiness | ||
| 152 | getSfmxList(bsmBusiness).then(res => { | ||
| 153 | this.tableData.data = res.result | ||
| 154 | }) | ||
| 155 | }, | ||
| 156 | hanldeAdd () { | ||
| 157 | let bsmBusiness = this.$route.query.bsmBusiness ? this.$route.query.bsmBusiness : window.currentSelect.bsmBusiness | ||
| 158 | this.$popupDialog('新增', 'workflow/components/dialog/xzsf', { bsmBusiness: bsmBusiness }, '50%', true) | ||
| 159 | }, | ||
| 160 | handleDelete (row) { | ||
| 161 | let that = this | ||
| 162 | this.$confirm('此操作将永久删除该 是否继续?', '提示', { | ||
| 163 | confirmButtonText: '确定', | ||
| 164 | cancelButtonText: '取消', | ||
| 165 | type: 'warning' | ||
| 166 | }).then(() => { | ||
| 167 | deleteSfmx(row.bsmSf).then(res => { | ||
| 168 | if (res.code == 200) { | ||
| 169 | that.$message({ | ||
| 170 | message: '删除成功！', | ||
| 171 | type: 'success' | ||
| 172 | }) | ||
| 173 | that.getList() | ||
| 174 | } else { | ||
| 175 | that.$message({ | ||
| 176 | type: 'info', | ||
| 177 | message: res.message | ||
| 178 | }) | ||
| 179 | } | ||
| 180 | }) | ||
| 181 | }).catch(() => { | ||
| 182 | this.$message({ | ||
| 183 | type: 'info', | ||
| 184 | message: '已取消删除' | ||
| 185 | }) | ||
| 186 | }) | ||
| 187 | |||
| 188 | } | ||
| 189 | } | ||
| 190 | } | ||
| 191 | </script> | ||
| 192 | <style scoped lang='scss'> | ||
| 193 | @import "~@/styles/public.scss"; | ||
| 194 | .sfxx { | ||
| 195 | display: flex; | ||
| 196 | padding: 10px; | ||
| 197 | height: 100%; | ||
| 198 | box-sizing: border-box; | ||
| 199 | &-left { | ||
| 200 | width: 50%; | ||
| 201 | margin-right: 10px; | ||
| 202 | ul { | ||
| 203 | border-radius: 3px; | ||
| 204 | } | ||
| 205 | li:last-child { | ||
| 206 | border-bottom: 1px solid #e8e5e5; | ||
| 207 | } | ||
| 208 | li { | ||
| 209 | display: flex; | ||
| 210 | border: 1px solid #e8e5e5; | ||
| 211 | border-bottom: none; | ||
| 212 | |||
| 213 | p:nth-child(1) { | ||
| 214 | width: 35%; | ||
| 215 | text-align: center; | ||
| 216 | background-color: #fafafa; | ||
| 217 | border-right: 1px solid #e8e5e5; | ||
| 218 | padding: 10px 0; | ||
| 219 | } | ||
| 220 | p:nth-child(2) { | ||
| 221 | width: 65%; | ||
| 222 | display: flex; | ||
| 223 | align-items: center; | ||
| 224 | box-sizing: border-box; | ||
| 225 | margin: 0 10px; | ||
| 226 | } | ||
| 227 | } | ||
| 228 | } | ||
| 229 | &-right { | ||
| 230 | width: 50%; | ||
| 231 | margin-left: 10px; | ||
| 232 | } | ||
| 233 | } | ||
| 234 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: 审批意见 | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-01-26 08:45:07 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="spyj" v-Loading="loading"> | ||
| 8 | <div class="box"> | ||
| 9 | <div class="spyj_title"> | ||
| 10 | <div class="righttitle">审批表</div> | ||
| 11 | </div> | ||
| 12 | |||
| 13 | <div v-for="(item, index) in tableData" :key="index"> | ||
| 14 | <el-form | ||
| 15 | :model="tableData[index]" | ||
| 16 | label-width="120px" | ||
| 17 | ref="ruleForm'"> | ||
| 18 | <div class="spyj_form"> | ||
| 19 | <div class="item_left"> | ||
| 20 | <div class="right">{{ item.jdmc }}意见</div> | ||
| 21 | </div> | ||
| 22 | <div class="item_right"> | ||
| 23 | <el-row> | ||
| 24 | <el-col :span="24"> | ||
| 25 | <el-form-item | ||
| 26 | label-width="0" | ||
| 27 | class="opinion_item"> | ||
| 28 | <el-input | ||
| 29 | :disabled="!viewEdit || item.show" | ||
| 30 | type="textarea" | ||
| 31 | :rows="4" | ||
| 32 | class="opinion" | ||
| 33 | placeholder="" | ||
| 34 | v-model="item.shyj"></el-input> | ||
| 35 | <el-button | ||
| 36 | class="opinion_btn" | ||
| 37 | @click="commonOpinion(index)" | ||
| 38 | :disabled="!viewEdit|| item.show">常用意见</el-button> | ||
| 39 | </el-form-item> | ||
| 40 | </el-col> | ||
| 41 | </el-row> | ||
| 42 | <el-row> | ||
| 43 | <el-col :span="16"> | ||
| 44 | <el-form-item label="审查人"> | ||
| 45 | {{ item.shryxm }} | ||
| 46 | </el-form-item> | ||
| 47 | </el-col> | ||
| 48 | <el-col :span="8"> | ||
| 49 | <el-form-item disabled label="审核时间" :key="refresh"> | ||
| 50 | {{ item.shjssj }} | ||
| 51 | </el-form-item> | ||
| 52 | </el-col> | ||
| 53 | </el-row> | ||
| 54 | </div> | ||
| 55 | </div> | ||
| 56 | </el-form> | ||
| 57 | </div> | ||
| 58 | <div class="submit_button" v-if="viewEdit"> | ||
| 59 | <el-button type="primary" :disabled="shows" @click="onSubmit()">保存</el-button> | ||
| 60 | </div> | ||
| 61 | </div> | ||
| 62 | </div> | ||
| 63 | </template> | ||
| 64 | <script> | ||
| 65 | import { saveSpyjBySlsq, getSpyjList } from "@/api/opinion.js"; | ||
| 66 | import { mapGetters } from "vuex"; | ||
| 67 | import { getNewDatesh } from "@/utils/util"; | ||
| 68 | export default { | ||
| 69 | computed: { | ||
| 70 | ...mapGetters(["dqhj", "yjsqOptions", "userInfo"]), | ||
| 71 | }, | ||
| 72 | data () { | ||
| 73 | return { | ||
| 74 | loading: false, | ||
| 75 | currentindex: 0, | ||
| 76 | refresh: 10, | ||
| 77 | viewEdit: false, | ||
| 78 | bsmSlsq: this.$route.query.bsmSlsq, | ||
| 79 | bestepid: this.$route.query.bestepid, | ||
| 80 | propsParam: {}, | ||
| 81 | tableData: [], | ||
| 82 | shows: false, | ||
| 83 | }; | ||
| 84 | }, | ||
| 85 | |||
| 86 | watch: { | ||
| 87 | yjsqOptions: { | ||
| 88 | handler (val) { | ||
| 89 | this.add(val.opinion); | ||
| 90 | }, | ||
| 91 | deep: true, | ||
| 92 | immediate: true, | ||
| 93 | }, | ||
| 94 | dqhj: { | ||
| 95 | handler (val) { | ||
| 96 | this.propsParam = this.$attrs; | ||
| 97 | this.dataset() | ||
| 98 | this.getShList(); | ||
| 99 | |||
| 100 | }, | ||
| 101 | deep: true, | ||
| 102 | immediate: true, | ||
| 103 | }, | ||
| 104 | |||
| 105 | }, | ||
| 106 | methods: { | ||
| 107 | /** | ||
| 108 | * @description: dataset | ||
| 109 | * @param {*} 数据处理 | ||
| 110 | * @author: renchao | ||
| 111 | */ | ||
| 112 | dataset () { | ||
| 113 | this.viewEdit = this.$parent.currentSelectTab.ableOperation; | ||
| 114 | }, | ||
| 115 | /** | ||
| 116 | * @description: getShList | ||
| 117 | * @param {*} obj | ||
| 118 | * @author: renchao | ||
| 119 | */ | ||
| 120 | getShList () { | ||
| 121 | this.loading = true | ||
| 122 | var formdata = new FormData(); | ||
| 123 | formdata.append("bsmBusiness", this.propsParam.bsmBusiness); | ||
| 124 | formdata.append("bestepid", this.$route.query.bestepid); | ||
| 125 | |||
| 126 | getSpyjList(formdata).then((res) => { | ||
| 127 | if (res.code === 200 && res.result) { | ||
| 128 | this.tableData = res.result; | ||
| 129 | if (this.shows) { | ||
| 130 | this.shows = false; | ||
| 131 | } | ||
| 132 | var index = this.tableData.findIndex( | ||
| 133 | (item) => item.jddm === this.$parent.dqhj | ||
| 134 | ); | ||
| 135 | if (index == -1) { | ||
| 136 | switch (this.$parent.dqhj) { | ||
| 137 | case "cs": | ||
| 138 | this.tableData.push({ jdmc: "初审", jddm: "cs", sxh: 1 }); | ||
| 139 | break; | ||
| 140 | case "fs": | ||
| 141 | this.tableData.push({ jdmc: "复审", jddm: "fs", sxh: 2 }); | ||
| 142 | break; | ||
| 143 | case "hd": | ||
| 144 | this.tableData.push({ jdmc: "核定", jddm: "hd", sxh: 3 }); | ||
| 145 | break; | ||
| 146 | } | ||
| 147 | } | ||
| 148 | this.tableData.forEach((item) => { | ||
| 149 | item.show = true; | ||
| 150 | if (this.$parent.dqhj == item.jddm) { | ||
| 151 | item["stepid"] = this.$route.query.bestepid; | ||
| 152 | item.shjssj = getNewDatesh(); | ||
| 153 | item.shkssj = getNewDatesh(); | ||
| 154 | item["shryxm"] = this.userInfo.name; | ||
| 155 | item["userid"] = this.userInfo.id; | ||
| 156 | item.show = false; | ||
| 157 | } | ||
| 158 | }); | ||
| 159 | this.loading = false | ||
| 160 | } | ||
| 161 | }) | ||
| 162 | }, | ||
| 163 | /** | ||
| 164 | * @description: onSubmit | ||
| 165 | * @author: renchao | ||
| 166 | */ | ||
| 167 | onSubmit () { | ||
| 168 | |||
| 169 | this.tableData.forEach((item, index) => { | ||
| 170 | item["bsmBusiness"] = this.propsParam.bsmBusiness; | ||
| 171 | item["czjg"] = "1"; | ||
| 172 | }); | ||
| 173 | var index = this.tableData.findIndex( | ||
| 174 | (item) => item.shyj == null || item.shyj == "" | ||
| 175 | ); | ||
| 176 | if (index == -1) { | ||
| 177 | this.shows = true; | ||
| 178 | saveSpyjBySlsq(this.tableData).then((res) => { | ||
| 179 | if (res.code === 200) { | ||
| 180 | this.$message.success("保存成功"); | ||
| 181 | this.refresh += 1; | ||
| 182 | this.getShList(); | ||
| 183 | } else { | ||
| 184 | this.$message.error(res.message); | ||
| 185 | } | ||
| 186 | }); | ||
| 187 | } else { | ||
| 188 | this.$message.error("意见不能为空"); | ||
| 189 | } | ||
| 190 | |||
| 191 | }, | ||
| 192 | //打开常用意见列表弹窗 | ||
| 193 | /** | ||
| 194 | * @description: 打开常用意见列表弹窗 | ||
| 195 | * @param {*} index | ||
| 196 | * @author: renchao | ||
| 197 | */ | ||
| 198 | commonOpinion (index) { | ||
| 199 | this.currentindex = index; | ||
| 200 | this.$popupDialog( | ||
| 201 | "常用意见", | ||
| 202 | "workflow/components/dialog/commonOpinion", | ||
| 203 | {}, | ||
| 204 | "70%", | ||
| 205 | true | ||
| 206 | ); | ||
| 207 | }, | ||
| 208 | /** | ||
| 209 | * @description: add | ||
| 210 | * @param {*} val | ||
| 211 | * @author: renchao | ||
| 212 | */ | ||
| 213 | add (val) { | ||
| 214 | if (val != "" && this.tableData.length > 0) { | ||
| 215 | this.$set(this.tableData[this.currentindex], "shyj", val); | ||
| 216 | } | ||
| 217 | }, | ||
| 218 | }, | ||
| 219 | }; | ||
| 220 | </script> | ||
| 221 | <style scoped lang="scss"> | ||
| 222 | @import "~@/styles/mixin.scss"; | ||
| 223 | |||
| 224 | .spyj { | ||
| 225 | width: 100%; | ||
| 226 | height: 100%; | ||
| 227 | background-color: #f5f5f5; | ||
| 228 | .box { | ||
| 229 | overflow-x: auto; | ||
| 230 | width: 100%; | ||
| 231 | height: 95%; | ||
| 232 | background: #fff; | ||
| 233 | text-align: center; | ||
| 234 | padding: 4px; | ||
| 235 | overflow-y: scroll; | ||
| 236 | padding-top: 20px; | ||
| 237 | padding: 20px 40px; | ||
| 238 | .spyj_title { | ||
| 239 | width: 100%; | ||
| 240 | height: 80px; | ||
| 241 | border: 1px solid $borderColor; | ||
| 242 | background-color: #eceef2; | ||
| 243 | display: flex; | ||
| 244 | } | ||
| 245 | .leftadd { | ||
| 246 | width: 3%; | ||
| 247 | height: 100%; | ||
| 248 | display: flex; | ||
| 249 | font-size: 14px; | ||
| 250 | text-indent: 20px; | ||
| 251 | align-items: center; | ||
| 252 | border: 1px solid $borderColor; | ||
| 253 | } | ||
| 254 | .righttitle { | ||
| 255 | width: 80%; | ||
| 256 | height: 100%; | ||
| 257 | line-height: 80px; | ||
| 258 | border: 1px solid $borderColor; | ||
| 259 | margin: auto; | ||
| 260 | font-size: 22px; | ||
| 261 | font-weight: 400; | ||
| 262 | } | ||
| 263 | } | ||
| 264 | |||
| 265 | /deep/.el-form-item { | ||
| 266 | margin-bottom: 0; | ||
| 267 | } | ||
| 268 | |||
| 269 | .bottom10 { | ||
| 270 | margin-bottom: 15px; | ||
| 271 | } | ||
| 272 | |||
| 273 | .spyj_form { | ||
| 274 | display: flex; | ||
| 275 | border: 1px solid $borderColor; | ||
| 276 | |||
| 277 | .item_left { | ||
| 278 | width: 150px; | ||
| 279 | background-color: #f8f8fa; | ||
| 280 | color: #606266; | ||
| 281 | display: flex; | ||
| 282 | font-size: 14px; | ||
| 283 | text-indent: 50px; | ||
| 284 | align-items: center; | ||
| 285 | border-right: 1px solid $borderColor; | ||
| 286 | } | ||
| 287 | |||
| 288 | .item_right { | ||
| 289 | flex: 1; | ||
| 290 | width: 100%; | ||
| 291 | |||
| 292 | /deep/.el-form-item__label { | ||
| 293 | background-color: #f8f8fa; | ||
| 294 | } | ||
| 295 | /deep/.el-form-item__content { | ||
| 296 | display: block; | ||
| 297 | text-align: left; | ||
| 298 | } | ||
| 299 | .opinion_item { | ||
| 300 | /deep/.el-form-item__error { | ||
| 301 | margin-top: -16px !important; | ||
| 302 | left: 3px; | ||
| 303 | } | ||
| 304 | border-bottom: 1px solid $borderColor; | ||
| 305 | } | ||
| 306 | |||
| 307 | .opinion { | ||
| 308 | position: relative; | ||
| 309 | font-size: 14px; | ||
| 310 | |||
| 311 | /deep/.el-textarea__inner { | ||
| 312 | border: none; | ||
| 313 | } | ||
| 314 | } | ||
| 315 | |||
| 316 | .opinion_btn { | ||
| 317 | position: absolute; | ||
| 318 | right: 15px; | ||
| 319 | bottom: 10px; | ||
| 320 | } | ||
| 321 | } | ||
| 322 | } | ||
| 323 | |||
| 324 | .submit_button { | ||
| 325 | text-align: center; | ||
| 326 | margin: 15px 0; | ||
| 327 | } | ||
| 328 | |||
| 329 | .el-date-editor.el-input { | ||
| 330 | width: 100%; | ||
| 331 | } | ||
| 332 | } | ||
| 333 | </style> |
| 1 | <template> | ||
| 2 | <div class="slxx swxx"> | ||
| 3 | <el-form | ||
| 4 | :model="ruleForm" | ||
| 5 | ref="ruleForm" | ||
| 6 | v-Loading="loading" | ||
| 7 | :label-position="flag ? 'top' : ''" | ||
| 8 | :inline="flag" | ||
| 9 | label-width="120px"> | ||
| 10 | <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''"> | ||
| 11 | <div class="slxx_title title-block"> | ||
| 12 | 不动产信息 | ||
| 13 | <div class="triangle"></div> | ||
| 14 | </div> | ||
| 15 | <el-row :gutter="10"> | ||
| 16 | <el-col :span="8"> | ||
| 17 | <el-form-item label="不动产单元号："> | ||
| 18 | <el-input disabled v-model="ruleForm.bdcdyh"></el-input> | ||
| 19 | </el-form-item> | ||
| 20 | </el-col> | ||
| 21 | <el-col :span="8"> | ||
| 22 | <el-form-item label="原产证号："> | ||
| 23 | <el-input disabled v-model="ruleForm.yfczh"></el-input> | ||
| 24 | </el-form-item> | ||
| 25 | </el-col> | ||
| 26 | <el-col :span="8"> | ||
| 27 | <el-form-item label="面积(m3)："> | ||
| 28 | <el-input disabled v-model="ruleForm.mj"></el-input> | ||
| 29 | </el-form-item> | ||
| 30 | </el-col> | ||
| 31 | </el-row> | ||
| 32 | <el-row :gutter="10"> | ||
| 33 | <el-col :span="8"> | ||
| 34 | <el-form-item label="权利类型："> | ||
| 35 | <el-input disabled v-model="ruleForm.qllxmc"></el-input> | ||
| 36 | </el-form-item> | ||
| 37 | </el-col> | ||
| 38 | <el-col :span="8"> | ||
| 39 | <el-form-item label="用途："> | ||
| 40 | <el-input disabled v-model="ruleForm.yt"></el-input> | ||
| 41 | </el-form-item> | ||
| 42 | </el-col> | ||
| 43 | <el-col :span="8"> | ||
| 44 | <el-form-item label="坐落："> | ||
| 45 | <el-input disabled v-model="ruleForm.zl"></el-input> | ||
| 46 | </el-form-item> | ||
| 47 | </el-col> | ||
| 48 | </el-row> | ||
| 49 | <div class="slxx_title title-block"> | ||
| 50 | 买方信息 | ||
| 51 | <div class="triangle"></div> | ||
| 52 | </div> | ||
| 53 | <lb-table :column="column" :pagination="false" :heightNumSetting="true" | ||
| 54 | :data="ruleForm.tableDataList"> | ||
| 55 | </lb-table> | ||
| 56 | <div class="slxx_title title-block"> | ||
| 57 | 卖方信息 | ||
| 58 | <div class="triangle"></div> | ||
| 59 | </div> | ||
| 60 | <lb-table :column="column1" :pagination="false" :heightNumSetting="true" | ||
| 61 | :data="ruleForm.tableDataList"> | ||
| 62 | </lb-table> | ||
| 63 | <div class="slxx_title title-block"> | ||
| 64 | 合同信息 | ||
| 65 | <div class="triangle"></div> | ||
| 66 | </div> | ||
| 67 | <el-row :gutter="10"> | ||
| 68 | <el-col :span="8"> | ||
| 69 | <el-form-item label="合同编号："> | ||
| 70 | <el-input v-model="ruleForm.htbh"></el-input> | ||
| 71 | </el-form-item> | ||
| 72 | </el-col> | ||
| 73 | <el-col :span="8"> | ||
| 74 | <el-form-item label="合同金额(万元)："> | ||
| 75 | <el-input v-model="ruleForm.htje"></el-input> | ||
| 76 | </el-form-item> | ||
| 77 | </el-col> | ||
| 78 | <el-col :span="8"> | ||
| 79 | <el-form-item label="签订时间："> | ||
| 80 | <el-date-picker | ||
| 81 | class="width100" | ||
| 82 | v-model="ruleForm.qdsj" | ||
| 83 | type="date" | ||
| 84 | placeholder="选择日期" | ||
| 85 | value-format="yyyy-MM-dd HH:mm:ss" | ||
| 86 | format="yyyy-MM-dd"> | ||
| 87 | </el-date-picker> | ||
| 88 | </el-form-item> | ||
| 89 | </el-col> | ||
| 90 | </el-row> | ||
| 91 | <div class="slxx_title title-block"> | ||
| 92 | 缴税信息 | ||
| 93 | <div class="triangle"></div> | ||
| 94 | </div> | ||
| 95 | <lb-table :column="column2" :pagination="false" :heightNumSetting="true" | ||
| 96 | :data="ruleForm.tableDataList"> | ||
| 97 | </lb-table> | ||
| 98 | </div> | ||
| 99 | <el-row class="btn" v-if="viewEdit"> | ||
| 100 | <el-form-item> | ||
| 101 | <el-button type="primary" @click="onSubmit">保存</el-button> | ||
| 102 | </el-form-item> | ||
| 103 | </el-row> | ||
| 104 | </el-form> | ||
| 105 | </div> | ||
| 106 | </template> | ||
| 107 | <script> | ||
| 108 | import { mapGetters } from "vuex"; | ||
| 109 | export default { | ||
| 110 | computed: { | ||
| 111 | ...mapGetters(["dictData", "flag"]), | ||
| 112 | }, | ||
| 113 | mounted () { | ||
| 114 | // this.loading = true | ||
| 115 | this.viewEdit = this.$parent.currentSelectTab.ableOperation; | ||
| 116 | this.propsParam = this.$attrs; | ||
| 117 | var formdata = new FormData(); | ||
| 118 | formdata.append("bsmSldy", this.propsParam.bsmSldy); | ||
| 119 | formdata.append("djlx", this.propsParam.djlx); | ||
| 120 | formdata.append("isEdit", this.viewEdit); | ||
| 121 | // Init(formdata).then((res) => { | ||
| 122 | // if (res.code === 200 && res.result) { | ||
| 123 | // } | ||
| 124 | // }); | ||
| 125 | }, | ||
| 126 | data () { | ||
| 127 | return { | ||
| 128 | loading: false, | ||
| 129 | //表单是否可操作 | ||
| 130 | viewEdit: false, | ||
| 131 | column: [ | ||
| 132 | { | ||
| 133 | prop: "qlrxm", | ||
| 134 | label: "权利人姓名" | ||
| 135 | }, | ||
| 136 | { | ||
| 137 | prop: "gyqk", | ||
| 138 | label: "共有情况" | ||
| 139 | }, | ||
| 140 | { | ||
| 141 | prop: "zjzl", | ||
| 142 | label: "身份证号种类" | ||
| 143 | }, | ||
| 144 | { | ||
| 145 | prop: "zjhm", | ||
| 146 | label: "证件号码" | ||
| 147 | }, | ||
| 148 | ], | ||
| 149 | column1: [{ | ||
| 150 | prop: "ywrxm", | ||
| 151 | label: "义务人姓名" | ||
| 152 | }, | ||
| 153 | { | ||
| 154 | prop: "zjzl", | ||
| 155 | label: "身份证号种类" | ||
| 156 | }, | ||
| 157 | { | ||
| 158 | prop: "zjhm", | ||
| 159 | label: "证件号码" | ||
| 160 | }], | ||
| 161 | column2: [{ | ||
| 162 | type: 'index', | ||
| 163 | label: "序号", | ||
| 164 | width: '50' | ||
| 165 | }, | ||
| 166 | { | ||
| 167 | prop: "nsr", | ||
| 168 | label: "纳税人" | ||
| 169 | }, | ||
| 170 | { | ||
| 171 | prop: "sz", | ||
| 172 | label: "税种" | ||
| 173 | }, | ||
| 174 | { | ||
| 175 | prop: "jsyj", | ||
| 176 | label: "计税依据" | ||
| 177 | }, | ||
| 178 | { | ||
| 179 | prop: "sl", | ||
| 180 | label: "税率" | ||
| 181 | }, | ||
| 182 | { | ||
| 183 | prop: "jsje", | ||
| 184 | label: "计税金额" | ||
| 185 | }], | ||
| 186 | ruleForm: { | ||
| 187 | tableDataList: [] | ||
| 188 | } | ||
| 189 | } | ||
| 190 | }, | ||
| 191 | methods: { | ||
| 192 | onSubmit () { } | ||
| 193 | } | ||
| 194 | } | ||
| 195 | </script> | ||
| 196 | <style scoped lang="scss"> | ||
| 197 | @import "~@/styles/public.scss"; | ||
| 198 | @import "~@/styles/slxx/slxx.scss"; | ||
| 199 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-01-30 15:46:45 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="szxx"> | ||
| 8 | <el-card | ||
| 9 | :class="classJudge(item)" | ||
| 10 | v-for="(item, index) in tableData" | ||
| 11 | :key="index"> | ||
| 12 | <div slot="header" class="szxx_header"> | ||
| 13 | <span class="header_type">{{ | ||
| 14 | item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明" | ||
| 15 | }}</span> | ||
| 16 | <div class="header_text">{{ item.bdcqzh }}</div> | ||
| 17 | </div> | ||
| 18 | <div class="szxx_body card_padding"> | ||
| 19 | <div class="text color_iray"> | ||
| 20 | <span>{{ item.qllx }}</span> | ||
| 21 | </div> | ||
| 22 | <div class="text color_red"> | ||
| 23 | <span>{{ item.qlr }}</span><span class="color_iray">({{ item.qllx }})</span> | ||
| 24 | </div> | ||
| 25 | <div class="text color_iray"> | ||
| 26 | <span>{{ item.gyqk }}</span> | ||
| 27 | </div> | ||
| 28 | <div class="text color_red"> | ||
| 29 | <span>{{ item.bdcdyh }}</span> | ||
| 30 | </div> | ||
| 31 | <div class="text color_iray"> | ||
| 32 | <span>{{ item.zl }}</span> | ||
| 33 | </div> | ||
| 34 | <div class="text color_red"> | ||
| 35 | <span>{{ item.yt }}</span> | ||
| 36 | </div> | ||
| 37 | <div class="text color_iray"> | ||
| 38 | <span>{{ item.mj }}</span> | ||
| 39 | </div> | ||
| 40 | <div class="text color_red"> | ||
| 41 | <span>{{ item.syqx }}</span> | ||
| 42 | </div> | ||
| 43 | <div class="text color_iray"> | ||
| 44 | <span>印刷序列号：{{ item.ysxlh }}</span> | ||
| 45 | </div> | ||
| 46 | </div> | ||
| 47 | <div class="card_padding" v-if="viewEdit"> | ||
| 48 | <div class="top_line middle_margin"></div> | ||
| 49 | <div class="text tac" v-if="item.ysxlh"> | ||
| 50 | <el-button | ||
| 51 | class="operation_button" | ||
| 52 | type="text" | ||
| 53 | @click="openInvalidDiglog(item)">再次打印（{{ item.szcs }})</el-button> | ||
| 54 | <el-button | ||
| 55 | class="operation_button" | ||
| 56 | type="text" | ||
| 57 | @click="openRecordPop(item)">缮证记录</el-button> | ||
| 58 | </div> | ||
| 59 | <div class="text tac" v-else> | ||
| 60 | <el-button | ||
| 61 | class="operation_button" | ||
| 62 | type="text" | ||
| 63 | @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs }}）</el-button> | ||
| 64 | <el-button | ||
| 65 | class="operation_button" | ||
| 66 | type="text" | ||
| 67 | @click="openRecordPop(item)">缮证记录</el-button> | ||
| 68 | </div> | ||
| 69 | </div> | ||
| 70 | </el-card> | ||
| 71 | |||
| 72 | <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty> | ||
| 73 | </div> | ||
| 74 | </template> | ||
| 75 | <script> | ||
| 76 | import { mapGetters } from "vuex"; | ||
| 77 | import store from "@/store/index.js"; | ||
| 78 | import { getSlsqBdcqzList } from "@/api/bdcqz.js"; | ||
| 79 | export default { | ||
| 80 | props: {}, | ||
| 81 | data () { | ||
| 82 | return { | ||
| 83 | //表单是否可操作 | ||
| 84 | viewEdit: false, | ||
| 85 | dialog: false, | ||
| 86 | tableData: [], | ||
| 87 | bdcqzlx: 1, | ||
| 88 | bdcqz: {}, | ||
| 89 | }; | ||
| 90 | }, | ||
| 91 | computed: { | ||
| 92 | ...mapGetters(["workFresh"]), | ||
| 93 | }, | ||
| 94 | watch: { | ||
| 95 | workFresh: { | ||
| 96 | handler (newVal, oldVal) { | ||
| 97 | if (newVal) this.list(); | ||
| 98 | }, | ||
| 99 | }, | ||
| 100 | }, | ||
| 101 | created () { | ||
| 102 | this.list(); | ||
| 103 | this.viewEdit = this.$parent.currentSelectTab.ableOperation; | ||
| 104 | }, | ||
| 105 | methods: { | ||
| 106 | /** | ||
| 107 | * @description: 初始化列表 | ||
| 108 | * @author: renchao | ||
| 109 | */ | ||
| 110 | list () { | ||
| 111 | return new Promise((resolve, reject) => { | ||
| 112 | var bsmSlsq = this.$route.query.bsmSlsq; | ||
| 113 | getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => { | ||
| 114 | resolve(res.code); | ||
| 115 | if (res.code === 200) { | ||
| 116 | this.tableData = res.result; | ||
| 117 | if (res.result) { | ||
| 118 | this.bdcqz = res.result[0]; | ||
| 119 | } | ||
| 120 | } | ||
| 121 | }); | ||
| 122 | }); | ||
| 123 | }, | ||
| 124 | /** | ||
| 125 | * @description: 打开证书预览弹窗 | ||
| 126 | * @param {*} item | ||
| 127 | * @param {*} type | ||
| 128 | * @author: renchao | ||
| 129 | */ | ||
| 130 | openZsylDialog (item, type) { | ||
| 131 | store.dispatch("user/reWorkFresh", false); | ||
| 132 | if (type == 1) { | ||
| 133 | this.$popupDialog( | ||
| 134 | "证书证明预览", | ||
| 135 | "workflow/components/dialog/zsyl", | ||
| 136 | { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, | ||
| 137 | '1230px', | ||
| 138 | true | ||
| 139 | ); | ||
| 140 | } else { | ||
| 141 | this.$popupDialog( | ||
| 142 | "证书证明打印", | ||
| 143 | "workflow/components/dialog/zsdy", | ||
| 144 | { ...item }, | ||
| 145 | "76%", | ||
| 146 | true | ||
| 147 | ); | ||
| 148 | } | ||
| 149 | }, | ||
| 150 | /** | ||
| 151 | * @description: 再次打印 | ||
| 152 | * @param {*} item | ||
| 153 | * @author: renchao | ||
| 154 | */ | ||
| 155 | openInvalidDiglog (item) { | ||
| 156 | this.$popupDialog( | ||
| 157 | "证书证明打印", | ||
| 158 | "workflow/components/dialog/zsdy", | ||
| 159 | { ...item }, | ||
| 160 | "76%", | ||
| 161 | true | ||
| 162 | ); | ||
| 163 | }, | ||
| 164 | /** | ||
| 165 | * @description: openRecordPop | ||
| 166 | * @param {*} item | ||
| 167 | * @author: renchao | ||
| 168 | */ | ||
| 169 | openRecordPop (item) { | ||
| 170 | this.$popupDialog( | ||
| 171 | "缮证记录", | ||
| 172 | "workflow/components/dialog/szRecord", | ||
| 173 | { bsmBdcqz: item.bsmBdcqz }, | ||
| 174 | "60%", | ||
| 175 | true | ||
| 176 | ); | ||
| 177 | }, | ||
| 178 | /** | ||
| 179 | * @description: classJudge 判断class | ||
| 180 | * @param {*} item | ||
| 181 | * @author: renchao | ||
| 182 | */ | ||
| 183 | classJudge (item) { | ||
| 184 | let className = "box-card"; | ||
| 185 | if (item.bdcqzlx == 1) { | ||
| 186 | className += " zs-card"; | ||
| 187 | } else { | ||
| 188 | className += " zm-card"; | ||
| 189 | } | ||
| 190 | if (item.szcs == 0) { | ||
| 191 | className += " no-print"; | ||
| 192 | } | ||
| 193 | return className; | ||
| 194 | }, | ||
| 195 | }, | ||
| 196 | }; | ||
| 197 | </script> | ||
| 198 | <style scoped lang="scss"> | ||
| 199 | @import "~@/styles/public.scss"; | ||
| 200 | .szxx { | ||
| 201 | box-sizing: border-box; | ||
| 202 | padding-right: 15px; | ||
| 203 | width: 100%; | ||
| 204 | height: 100%; | ||
| 205 | overflow-y: scroll; | ||
| 206 | padding-bottom: 55px; | ||
| 207 | |||
| 208 | .box-card { | ||
| 209 | float: left; | ||
| 210 | width: 350px; | ||
| 211 | margin: 10px; | ||
| 212 | box-shadow: none; | ||
| 213 | background-image: url("~@/image/zm-bg.png"); | ||
| 214 | background-size: 100% 100%; | ||
| 215 | border: 1px solid transparent; | ||
| 216 | /deep/ .el-card__header { | ||
| 217 | padding: 12px 66px; | ||
| 218 | background-size: auto; | ||
| 219 | border-bottom: 0; | ||
| 220 | position: relative; | ||
| 221 | } | ||
| 222 | .szxx_header { | ||
| 223 | color: #8b4534; | ||
| 224 | } | ||
| 225 | .szxx_body { | ||
| 226 | height: 330px; | ||
| 227 | } | ||
| 228 | } | ||
| 229 | .zs-card { | ||
| 230 | border: 1px solid #a6b0be; | ||
| 231 | background-image: none; | ||
| 232 | /deep/ .el-card__header { | ||
| 233 | background-image: url("~@/image/zs-red.png"); | ||
| 234 | .szxx_header { | ||
| 235 | color: #ffe47c; | ||
| 236 | } | ||
| 237 | } | ||
| 238 | .top_line { | ||
| 239 | border-top: 1px solid #d3dbe5; | ||
| 240 | width: 330px; | ||
| 241 | margin: 0 auto 10px; | ||
| 242 | } | ||
| 243 | } | ||
| 244 | .zm-card { | ||
| 245 | /deep/ .el-card__header { | ||
| 246 | &:after { | ||
| 247 | content: ""; | ||
| 248 | display: inline-block; | ||
| 249 | width: 330px; | ||
| 250 | height: 1px; | ||
| 251 | background-color: #b28676; | ||
| 252 | position: absolute; | ||
| 253 | left: 10px; | ||
| 254 | bottom: 0; | ||
| 255 | } | ||
| 256 | } | ||
| 257 | } | ||
| 258 | .zm-card.no-print { | ||
| 259 | background-image: url("~@/image/zm-gray.png"); | ||
| 260 | |||
| 261 | /deep/ .el-card__header { | ||
| 262 | &:after { | ||
| 263 | background-color: #6d7278; | ||
| 264 | } | ||
| 265 | } | ||
| 266 | .szxx_header { | ||
| 267 | color: #6d7278; | ||
| 268 | } | ||
| 269 | } | ||
| 270 | .zs-card.no-print { | ||
| 271 | /deep/ .el-card__header { | ||
| 272 | background-image: url("~@/image/zs-gray.png"); | ||
| 273 | .szxx_header { | ||
| 274 | color: #ffffff; | ||
| 275 | } | ||
| 276 | } | ||
| 277 | } | ||
| 278 | } | ||
| 279 | |||
| 280 | .szxx_header { | ||
| 281 | // color: #ffffff; | ||
| 282 | // font-weight: bolder; | ||
| 283 | font-size: 16px; | ||
| 284 | |||
| 285 | .header_type { | ||
| 286 | display: flex; | ||
| 287 | justify-content: center; | ||
| 288 | align-content: center; | ||
| 289 | } | ||
| 290 | |||
| 291 | .header_text { | ||
| 292 | text-align: center; | ||
| 293 | margin-top: 2px; | ||
| 294 | line-height: 22px; | ||
| 295 | } | ||
| 296 | } | ||
| 297 | |||
| 298 | .text { | ||
| 299 | margin-bottom: 8px; | ||
| 300 | text-align: left; | ||
| 301 | text-indent: 16px; | ||
| 302 | } | ||
| 303 | .text.tac { | ||
| 304 | text-align: center; | ||
| 305 | } | ||
| 306 | |||
| 307 | .color_iray { | ||
| 308 | color: #6d7278; | ||
| 309 | } | ||
| 310 | |||
| 311 | .color_red { | ||
| 312 | color: #ab0c0c; | ||
| 313 | } | ||
| 314 | |||
| 315 | .middle_margin { | ||
| 316 | margin-bottom: 10px; | ||
| 317 | } | ||
| 318 | |||
| 319 | .operation_button { | ||
| 320 | border: 1px solid #5c95e5; | ||
| 321 | padding: 5px; | ||
| 322 | text-align: center; | ||
| 323 | } | ||
| 324 | |||
| 325 | .card_padding { | ||
| 326 | padding-top: 8px; | ||
| 327 | font-size: 14px; | ||
| 328 | line-height: 22px; | ||
| 329 | } | ||
| 330 | /deep/.el-card__body { | ||
| 331 | padding: 0px; | ||
| 332 | } | ||
| 333 | </style> |
src/views/workflow/components/th.vue
deleted
100644 → 0
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-02 14:24:20 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="from-clues"> | ||
| 8 | <!-- 表单部分 --> | ||
| 9 | <div class="from-clues-header"> | ||
| 10 | <div class="title">请选择要退回到的环节：</div> | ||
| 11 | <el-form ref="queryForm" label-width="90px"> | ||
| 12 | <ul style="margin-bottom: 15px"> | ||
| 13 | <li | ||
| 14 | v-for="(item, index) in dataList" | ||
| 15 | class="listDetail" | ||
| 16 | :key="index" | ||
| 17 | @click="changeSelectItem(item)"> | ||
| 18 | <p class="icon"> | ||
| 19 | <el-radio | ||
| 20 | v-model="selectActivity" | ||
| 21 | :label="item.activityId" | ||
| 22 | @change="changeSelectItem(item)"></el-radio> | ||
| 23 | </p> | ||
| 24 | <p>{{ item.activityName }}</p> | ||
| 25 | <p v-for="(child, childIndex) in item.assignee" :key="childIndex"> | ||
| 26 | {{ child.name }} | ||
| 27 | </p> | ||
| 28 | </li> | ||
| 29 | </ul> | ||
| 30 | <div class="title">退回意见：</div> | ||
| 31 | <el-form-item> | ||
| 32 | <el-input | ||
| 33 | class="textArea" | ||
| 34 | type="textarea" | ||
| 35 | v-model="outstepopinion" | ||
| 36 | placeholder="请输入退回意见"></el-input> | ||
| 37 | </el-form-item> | ||
| 38 | <el-form-item> | ||
| 39 | <el-button style="float:right" @click="cancelBack">取消</el-button> | ||
| 40 | <el-button type="primary" @click="onSubmit" style="float:right">退回</el-button> | ||
| 41 | </el-form-item> | ||
| 42 | </el-form> | ||
| 43 | </div> | ||
| 44 | </div> | ||
| 45 | </template> | ||
| 46 | |||
| 47 | <script> | ||
| 48 | |||
| 49 | import { getTaskBackNode, sendBackTask } from "@/api/workFlow.js" | ||
| 50 | import { popupCacel } from "@/utils/popup.js"; | ||
| 51 | |||
| 52 | export default { | ||
| 53 | props: { | ||
| 54 | formData: { | ||
| 55 | type: Object, | ||
| 56 | default: {}, | ||
| 57 | }, | ||
| 58 | }, | ||
| 59 | data () { | ||
| 60 | return { | ||
| 61 | selectActivity: "", | ||
| 62 | dataList: [], | ||
| 63 | outstepopinion: "", | ||
| 64 | selectItem: {}, | ||
| 65 | }; | ||
| 66 | }, | ||
| 67 | created () { | ||
| 68 | this.getBackNode(); | ||
| 69 | }, | ||
| 70 | methods: { | ||
| 71 | /** | ||
| 72 | * @description: onSubmit | ||
| 73 | * @author: renchao | ||
| 74 | */ | ||
| 75 | onSubmit () { | ||
| 76 | if (!this.outstepopinion) { | ||
| 77 | this.$message.error("请填写退回意见"); | ||
| 78 | } else { | ||
| 79 | sendBackTask({ | ||
| 80 | bsmSlsq: this.formData.bsmSlsq, | ||
| 81 | backNodeList: [this.selectItem], | ||
| 82 | message: this.outstepopinion | ||
| 83 | }).then((res) => { | ||
| 84 | if (res.code == 200) { | ||
| 85 | this.$message.success("退回成功"); | ||
| 86 | setTimeout(() => { | ||
| 87 | if (window.opener && window.opener.getBpageList) { | ||
| 88 | window.opener.getBpageList(); | ||
| 89 | } else { | ||
| 90 | window.opener.frames[0].getBpageList(); | ||
| 91 | } | ||
| 92 | window.close(); | ||
| 93 | this.$emit("input", false); | ||
| 94 | }, 1000); | ||
| 95 | } else { | ||
| 96 | this.$message.error(res.message); | ||
| 97 | } | ||
| 98 | }); | ||
| 99 | } | ||
| 100 | }, | ||
| 101 | /** | ||
| 102 | * @description: changeSelectItem | ||
| 103 | * @param {*} item | ||
| 104 | * @author: renchao | ||
| 105 | */ | ||
| 106 | changeSelectItem (item) { | ||
| 107 | this.selectItem = item; | ||
| 108 | this.selectActivity = item.activityId; | ||
| 109 | }, | ||
| 110 | //获取可回退环节信息 | ||
| 111 | /** | ||
| 112 | * @description: 获取可回退环节信息 | ||
| 113 | * @author: renchao | ||
| 114 | */ | ||
| 115 | getBackNode () { | ||
| 116 | getTaskBackNode(this.formData).then((res) => { | ||
| 117 | if (res.code == 200) { | ||
| 118 | this.dataList = res.result; | ||
| 119 | console.log("this.dataList", this.dataList); | ||
| 120 | if (res.result) { | ||
| 121 | this.selectActivity = res.result[0].activityId; | ||
| 122 | this.selectItem = res.result[0]; | ||
| 123 | } | ||
| 124 | } | ||
| 125 | }); | ||
| 126 | }, | ||
| 127 | |||
| 128 | /** | ||
| 129 | * @description: cancelBack | ||
| 130 | * @author: renchao | ||
| 131 | */ | ||
| 132 | cancelBack () { | ||
| 133 | popupCacel(); | ||
| 134 | } | ||
| 135 | } | ||
| 136 | } | ||
| 137 | </script> | ||
| 138 | <style scoped lang="scss"> | ||
| 139 | @import "~@/styles/mixin.scss"; | ||
| 140 | |||
| 141 | .listDetail { | ||
| 142 | display: flex; | ||
| 143 | align-items: center; | ||
| 144 | width: 100%; | ||
| 145 | |||
| 146 | p { | ||
| 147 | line-height: 30px; | ||
| 148 | height: 30px; | ||
| 149 | @include flex-center; | ||
| 150 | flex: 1; | ||
| 151 | width: 100%; | ||
| 152 | border: 1px solid rgb(233, 235, 237); | ||
| 153 | margin-top: -1px; | ||
| 154 | margin-left: -1px; | ||
| 155 | } | ||
| 156 | |||
| 157 | .icon { | ||
| 158 | flex: 0 0 60px; | ||
| 159 | } | ||
| 160 | } | ||
| 161 | |||
| 162 | .title { | ||
| 163 | margin-bottom: 10px; | ||
| 164 | } | ||
| 165 | |||
| 166 | .textArea { | ||
| 167 | /deep/.el-textarea__inner { | ||
| 168 | min-height: 90px !important; | ||
| 169 | } | ||
| 170 | } | ||
| 171 | /deep/.el-radio .el-radio__label { | ||
| 172 | display: none; | ||
| 173 | } | ||
| 174 | </style> |
src/views/workflow/components/zc.vue
deleted
100644 → 0
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2024-01-19 16:43:43 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div class="from-clues"> | ||
| 8 | <!-- 表单部分 --> | ||
| 9 | <div class="from-clues-header"> | ||
| 10 | <el-form ref="queryForm" label-width="180px" v-if="this.formData.obj"> | ||
| 11 | <el-form-item label="下一环节名称:"> | ||
| 12 | {{ this.formData.obj.taskName }} | ||
| 13 | </el-form-item> | ||
| 14 | <el-form-item label="下一环节办理人:"> | ||
| 15 | {{ this.formData.obj.usernames.join("，") }} | ||
| 16 | </el-form-item> | ||
| 17 | </el-form> | ||
| 18 | <el-form ref="queryForm" label-width="180px" v-else> | ||
| 19 | <el-form-item label=""> | ||
| 20 | 此环节为流程最后环节，转出后流程将结束 | ||
| 21 | </el-form-item> | ||
| 22 | </el-form> | ||
| 23 | <div class="invalid-reson">审批意见：</div> | ||
| 24 | <el-input | ||
| 25 | class="opinion" | ||
| 26 | v-model="shyj" | ||
| 27 | placeholder="请输入审批意见" | ||
| 28 | type="textarea" | ||
| 29 | :rows="4"></el-input> | ||
| 30 | <!-- <el-button | ||
| 31 | class="opinion_btn" | ||
| 32 | @click="commonOpinion" | ||
| 33 | >常用意见</el-button | ||
| 34 | > --> | ||
| 35 | <el-button style="float: right" @click="cancelBack">取消转出</el-button> | ||
| 36 | <el-button type="primary" @click="submitForm" :loading="loading" style="float: right">确定转出</el-button> | ||
| 37 | </div> | ||
| 38 | </div> | ||
| 39 | </template> | ||
| 40 | |||
| 41 | <script> | ||
| 42 | import { completeTask, getNextLinkInfo } from "@/api/workFlow.js"; | ||
| 43 | import { popupCacel } from "@/utils/popup.js"; | ||
| 44 | import { mapGetters } from 'vuex' | ||
| 45 | export default { | ||
| 46 | components: {}, | ||
| 47 | |||
| 48 | props: { | ||
| 49 | formData: { | ||
| 50 | type: Object, | ||
| 51 | default: {}, | ||
| 52 | }, | ||
| 53 | }, | ||
| 54 | computed: { | ||
| 55 | ...mapGetters(['yjsqOptions']) | ||
| 56 | }, | ||
| 57 | data () { | ||
| 58 | return { | ||
| 59 | loading: false, | ||
| 60 | queryForm: {}, | ||
| 61 | shyj: "", | ||
| 62 | }; | ||
| 63 | }, | ||
| 64 | |||
| 65 | watch: { | ||
| 66 | // yjsqOptions: { | ||
| 67 | // handler (val) { | ||
| 68 | // if(val){ | ||
| 69 | // this.shyj = val | ||
| 70 | // } | ||
| 71 | |||
| 72 | // }, | ||
| 73 | // }, | ||
| 74 | }, | ||
| 75 | mounted () { | ||
| 76 | // this.queryForm= this.queryForm.obj | ||
| 77 | }, | ||
| 78 | methods: { | ||
| 79 | /** | ||
| 80 | * @description: submitForm | ||
| 81 | * @author: renchao | ||
| 82 | */ | ||
| 83 | commonOpinion () { | ||
| 84 | this.$popupDialog( | ||
| 85 | "常用意见", | ||
| 86 | "workflow/components/dialog/commonOpinion", | ||
| 87 | {}, | ||
| 88 | "70%", | ||
| 89 | true | ||
| 90 | ); | ||
| 91 | }, | ||
| 92 | submitForm () { | ||
| 93 | this.loading = true | ||
| 94 | this.queryForm = { | ||
| 95 | bsmSlsq: this.formData.bsmSlsq, | ||
| 96 | shyj: this.shyj, | ||
| 97 | stepform: JSON.stringify(this.formData.tabList), | ||
| 98 | }; | ||
| 99 | completeTask(this.queryForm).then((res) => { | ||
| 100 | this.loading = false | ||
| 101 | if (res.code === 200) { | ||
| 102 | this.$message.success("转件成功"); | ||
| 103 | popupCacel(); | ||
| 104 | setTimeout(() => { | ||
| 105 | window.close(); | ||
| 106 | this.$emit("input", false); | ||
| 107 | if (window.opener && window.opener.getBpageList) { | ||
| 108 | window.opener.getBpageList(); | ||
| 109 | } else { | ||
| 110 | window.opener.frames[0].getBpageList(); | ||
| 111 | } | ||
| 112 | }, 360); | ||
| 113 | } else { | ||
| 114 | this.$message.error(res.message); | ||
| 115 | } | ||
| 116 | }).catch(() => { | ||
| 117 | this.loading = false | ||
| 118 | }) | ||
| 119 | }, | ||
| 120 | |||
| 121 | /** | ||
| 122 | * @description: closeDialog | ||
| 123 | * @author: renchao | ||
| 124 | */ | ||
| 125 | cancelBack () { | ||
| 126 | popupCacel(); | ||
| 127 | }, | ||
| 128 | }, | ||
| 129 | }; | ||
| 130 | </script> | ||
| 131 | <style scoped lang="scss"> | ||
| 132 | @import "~@/styles/mixin.scss"; | ||
| 133 | .el-button { | ||
| 134 | margin-top: 20px; | ||
| 135 | margin-right: 10px; | ||
| 136 | } | ||
| 137 | |||
| 138 | .opinion { | ||
| 139 | position: relative; | ||
| 140 | font-size: 14px; | ||
| 141 | } | ||
| 142 | |||
| 143 | .opinion_btn { | ||
| 144 | position: absolute; | ||
| 145 | right: 35px; | ||
| 146 | bottom: 80px; | ||
| 147 | } | ||
| 148 | </style> |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-09-18 14:06:16 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div style="width:100%;height:100%;"> | ||
| 8 | <canvas id="mxcad" style="width:100%;height:100%;"> | ||
| 9 | </canvas> | ||
| 10 | </div> | ||
| 11 | </template> | ||
| 12 | <script> | ||
| 13 | import Mx from "mxdraw" | ||
| 14 | export default { | ||
| 15 | mounted () { | ||
| 16 | // 动态加载 js库核心代码 | ||
| 17 | Mx.loadCoreCode().then(() => { | ||
| 18 | // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸 | ||
| 19 | // 创建控件对象 | ||
| 20 | Mx.MxFun.createMxObject({ | ||
| 21 | canvasId: "mxcad", // canvas元素的id | ||
| 22 | cadFile: "buf/hhhh.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸 | ||
| 23 | callback: (mxDraw, { | ||
| 24 | canvas, | ||
| 25 | canvasParent | ||
| 26 | }) => { | ||
| 27 | // 可以拿到canvas元素和它的父级元素 | ||
| 28 | // 拿到图层数据 | ||
| 29 | mxDraw.addEvent('uiSetLayerData', (listLayer) => { | ||
| 30 | console.log(listLayer) | ||
| 31 | }) | ||
| 32 | }, | ||
| 33 | isNewFile: true // 是否新建文件 | ||
| 34 | }) | ||
| 35 | }) | ||
| 36 | }, | ||
| 37 | } | ||
| 38 | </script> | ||
| 39 | <style scoped lang="scss"> | ||
| 40 | #mxcad { | ||
| 41 | pointer-events: none; | ||
| 42 | } | ||
| 43 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | /* | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-29 12:55:07 | ||
| 5 | */ | ||
| 6 | import filter from '@/utils/filter.js' | ||
| 7 | let vm = null | ||
| 8 | |||
| 9 | const sendThis = (_this) => { | ||
| 10 | vm = _this | ||
| 11 | } | ||
| 12 | class data extends filter { | ||
| 13 | constructor() { | ||
| 14 | super() | ||
| 15 | } | ||
| 16 | columns () { | ||
| 17 | return { | ||
| 18 | //发证列表 | ||
| 19 | fzgrid: [ | ||
| 20 | { | ||
| 21 | label: '序号', | ||
| 22 | type: 'index', | ||
| 23 | width: '50' | ||
| 24 | }, | ||
| 25 | { | ||
| 26 | prop: "fzrmc", | ||
| 27 | label: "发证人" | ||
| 28 | }, | ||
| 29 | { | ||
| 30 | prop: "bdcqzlx", | ||
| 31 | label: "不动产权证类型", | ||
| 32 | width: '130', | ||
| 33 | render: (h, scope) => { | ||
| 34 | return ( | ||
| 35 | <div> | ||
| 36 | <span v-show={scope.row.bdcqzlx == '1'}>不动产权证书</span> | ||
| 37 | <span v-show={scope.row.bdcqzlx == '2'}>不动产登记证明</span> | ||
| 38 | </div> | ||
| 39 | ) | ||
| 40 | } | ||
| 41 | }, | ||
| 42 | { | ||
| 43 | label: "权利类型", | ||
| 44 | width: '100', | ||
| 45 | render: (h, scope) => { | ||
| 46 | return ( | ||
| 47 | <el-tooltip effect="dark" content={scope.row.qllx} placement="top" popper-class="tooltip-width "> | ||
| 48 | <span class="ellipsis-table"> {scope.row.qllx}</span> | ||
| 49 | </el-tooltip> | ||
| 50 | ) | ||
| 51 | } | ||
| 52 | }, | ||
| 53 | { | ||
| 54 | label: "面积（㎡）", | ||
| 55 | width: '100', | ||
| 56 | render: (h, scope) => { | ||
| 57 | return ( | ||
| 58 | <el-tooltip effect="dark" content={scope.row.mj} placement="top" popper-class="tooltip-width "> | ||
| 59 | <span class="ellipsis-table"> {scope.row.mj}</span> | ||
| 60 | </el-tooltip> | ||
| 61 | ) | ||
| 62 | } | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "fzsj", | ||
| 66 | label: "发证时间", | ||
| 67 | width: '140', | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "lzrxm", | ||
| 71 | label: "领证人姓名" | ||
| 72 | }, | ||
| 73 | ], | ||
| 74 | } | ||
| 75 | } | ||
| 76 | } | ||
| 77 | let datas = new data() | ||
| 78 | export { | ||
| 79 | datas, | ||
| 80 | sendThis | ||
| 81 | } |
| 1 | /* | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-05-17 10:39:03 | ||
| 5 | */ | ||
| 6 | import filter from '@/utils/filter.js' | ||
| 7 | let vm = null | ||
| 8 | |||
| 9 | const sendThis = (_this) => { | ||
| 10 | vm = _this | ||
| 11 | } | ||
| 12 | class data extends filter { | ||
| 13 | constructor() { | ||
| 14 | super() | ||
| 15 | } | ||
| 16 | columns () { | ||
| 17 | return [ | ||
| 18 | { | ||
| 19 | width:"50px", | ||
| 20 | label: '序号', | ||
| 21 | type: 'index', | ||
| 22 | render: (h, scope) => { | ||
| 23 | return ( | ||
| 24 | <div> | ||
| 25 | {scope.$index + 1} | ||
| 26 | </div> | ||
| 27 | ) | ||
| 28 | } | ||
| 29 | }, | ||
| 30 | { | ||
| 31 | prop: "szry", | ||
| 32 | label: "缮证人员", | ||
| 33 | }, | ||
| 34 | { | ||
| 35 | prop: "szsj", | ||
| 36 | label: "缮证时间", | ||
| 37 | }, | ||
| 38 | { | ||
| 39 | label: "是否作废", | ||
| 40 | render: (h, scope) => { | ||
| 41 | if (scope.row.sfzf == '0') { | ||
| 42 | return <div>否</div> | ||
| 43 | } else { | ||
| 44 | return <div>已作废</div> | ||
| 45 | } | ||
| 46 | } | ||
| 47 | }, | ||
| 48 | { | ||
| 49 | prop: "bz", | ||
| 50 | label: "备注信息", | ||
| 51 | }, | ||
| 52 | ] | ||
| 53 | } | ||
| 54 | } | ||
| 55 | let szxxdatas = new data() | ||
| 56 | export { | ||
| 57 | szxxdatas, | ||
| 58 | sendThis | ||
| 59 | } |
-
Please register or sign in to post a comment