Commit 1a2232b932677e0c8f316b6df15d1d518320dd20
1 parent
d68ff4b5
v1.9 优化缺少合同申请详情页面
Showing
5 changed files
with
845 additions
and
1 deletions
src/i18n/contractI18n.js
| ... | ... | @@ -15,6 +15,7 @@ import { messages as contractChangeAuditOrdersMessages } from '../views/contract |
| 15 | 15 | import { messages as contractApplyAuditHistoryOrdersMessages } from '../views/contract/contractApplyAuditHistoryOrdersLang' |
| 16 | 16 | import { messages as contractChangeAuditHistoryOrdersMessages } from '../views/contract/contractChangeAuditHistoryOrdersLang' |
| 17 | 17 | import { messages as contractDetailChangeMessages } from '../views/contract/contractDetailChangeLang' |
| 18 | +import { messages as contractApplyDetailMessages } from '../views/contract/contractApplyDetailLang' | |
| 18 | 19 | |
| 19 | 20 | export const messages ={ |
| 20 | 21 | en:{ |
| ... | ... | @@ -35,6 +36,7 @@ export const messages ={ |
| 35 | 36 | ...contractApplyAuditHistoryOrdersMessages.en, |
| 36 | 37 | ...contractChangeAuditHistoryOrdersMessages.en, |
| 37 | 38 | ...contractDetailChangeMessages.en, |
| 39 | + ...contractApplyDetailMessages.en, | |
| 38 | 40 | }, |
| 39 | 41 | zh:{ |
| 40 | 42 | ...contractTypeManageMessages.zh, |
| ... | ... | @@ -54,5 +56,6 @@ export const messages ={ |
| 54 | 56 | ...contractApplyAuditHistoryOrdersMessages.zh, |
| 55 | 57 | ...contractChangeAuditHistoryOrdersMessages.zh, |
| 56 | 58 | ...contractDetailChangeMessages.zh, |
| 59 | + ...contractApplyDetailMessages.zh, | |
| 57 | 60 | } |
| 58 | 61 | } |
| 59 | 62 | \ No newline at end of file | ... | ... |
src/router/contractRouter.js
| ... | ... | @@ -73,5 +73,10 @@ export default [ |
| 73 | 73 | path:'/pages/admin/contractChangeAuditHistoryOrders', |
| 74 | 74 | name:'/pages/admin/contractChangeAuditHistoryOrders', |
| 75 | 75 | component: () => import('@/views/contract/contractChangeAuditHistoryOrdersList.vue') |
| 76 | - }, | |
| 76 | + }, | |
| 77 | + { | |
| 78 | + path: '/views/contract/contractApplyDetail', | |
| 79 | + name: '/views/contract/contractApplyDetail', | |
| 80 | + component: () => import('@/views/contract/contractApplyDetail.vue') | |
| 81 | + }, | |
| 77 | 82 | ] |
| 78 | 83 | \ No newline at end of file | ... | ... |
src/views/contract/contractApplyDetail.md
0 → 100644
| 1 | +```html | |
| 2 | +<div> | |
| 3 | + <div class="row"> | |
| 4 | + <div class="col-lg-12"> | |
| 5 | + <div class="ibox "> | |
| 6 | + <div class="ibox-title"> | |
| 7 | + <h5> | |
| 8 | + <span><vc:i18n name="合同信息" namespace="contractApplyDetail"></vc:i18n></span> | |
| 9 | + </h5> | |
| 10 | + <div class="ibox-tools" style="top:10px;"> | |
| 11 | + <button type="button" class="btn btn-primary btn-sm" v-on:click="_printContract()"> | |
| 12 | + <i class="fa fa-print"></i> | |
| 13 | + <vc:i18n name="打印"></vc:i18n> | |
| 14 | + </button> | |
| 15 | + <button type="button" class="btn btn-primary btn-sm" v-on:click="_goback()"> | |
| 16 | + <i class="fa fa-close"></i> | |
| 17 | + <vc:i18n name="返回"></vc:i18n> | |
| 18 | + </button> | |
| 19 | + </div> | |
| 20 | + </div> | |
| 21 | + <div class="ibox-content"> | |
| 22 | + <div class="row"> | |
| 23 | + <div class="col-sm-4"> | |
| 24 | + <div class="form-group"> | |
| 25 | + <label class="col-form-label"> | |
| 26 | + <span><vc:i18n name="合同名称" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 27 | + </label> | |
| 28 | + <label class="">{{contractDetailInfo.contractName}}</label> | |
| 29 | + </div> | |
| 30 | + </div> | |
| 31 | + <div class="col-sm-4"> | |
| 32 | + <div class="form-group"> | |
| 33 | + <label class="col-form-label"> | |
| 34 | + <span><vc:i18n name="合同编号" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 35 | + </label> | |
| 36 | + <label class="">{{contractDetailInfo.contractCode}}</label> | |
| 37 | + </div> | |
| 38 | + </div> | |
| 39 | + <div class="col-sm-4"> | |
| 40 | + <div class="form-group"> | |
| 41 | + <label class="col-form-label"> | |
| 42 | + <span><vc:i18n name="合同类型" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 43 | + </label> | |
| 44 | + <label class="">{{contractDetailInfo.contractTypeName}}</label> | |
| 45 | + </div> | |
| 46 | + </div> | |
| 47 | + </div> | |
| 48 | + <div class="row"> | |
| 49 | + <div class="col-sm-4"> | |
| 50 | + <div class="form-group"> | |
| 51 | + <label class="col-form-label"> | |
| 52 | + <span><vc:i18n name="甲方" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 53 | + </label> | |
| 54 | + <label class="">{{contractDetailInfo.partyA}}</label> | |
| 55 | + </div> | |
| 56 | + </div> | |
| 57 | + <div class="col-sm-4"> | |
| 58 | + <div class="form-group"> | |
| 59 | + <label class="col-form-label"> | |
| 60 | + <span><vc:i18n name="甲方联系人" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 61 | + </label> | |
| 62 | + <label class="">{{contractDetailInfo.aContacts}}</label> | |
| 63 | + </div> | |
| 64 | + </div> | |
| 65 | + <div class="col-sm-4"> | |
| 66 | + <div class="form-group"> | |
| 67 | + <label class="col-form-label"> | |
| 68 | + <span><vc:i18n name="甲方联系电话" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 69 | + </label> | |
| 70 | + <label class="">{{contractDetailInfo.aLink}}</label> | |
| 71 | + </div> | |
| 72 | + </div> | |
| 73 | + </div> | |
| 74 | + <div class="row"> | |
| 75 | + <div class="col-sm-4"> | |
| 76 | + <div class="form-group"> | |
| 77 | + <label class="col-form-label"> | |
| 78 | + <span><vc:i18n name="乙方" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 79 | + </label> | |
| 80 | + <label class="">{{contractDetailInfo.partyB}}</label> | |
| 81 | + </div> | |
| 82 | + </div> | |
| 83 | + <div class="col-sm-4"> | |
| 84 | + <div class="form-group"> | |
| 85 | + <label class="col-form-label"> | |
| 86 | + <span><vc:i18n name="乙方联系人" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 87 | + </label> | |
| 88 | + <label class="">{{contractDetailInfo.bContacts}}</label> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + <div class="col-sm-4"> | |
| 92 | + <div class="form-group"> | |
| 93 | + <label class="col-form-label"> | |
| 94 | + <span><vc:i18n name="乙方联系电话" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 95 | + </label> | |
| 96 | + <label class="">{{contractDetailInfo.bLink}}</label> | |
| 97 | + </div> | |
| 98 | + </div> | |
| 99 | + </div> | |
| 100 | + <div class="row"> | |
| 101 | + <div class="col-sm-4"> | |
| 102 | + <div class="form-group"> | |
| 103 | + <label class="col-form-label"> | |
| 104 | + <span><vc:i18n name="经办人" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 105 | + </label> | |
| 106 | + <label class="">{{contractDetailInfo.operator}}</label> | |
| 107 | + </div> | |
| 108 | + </div> | |
| 109 | + <div class="col-sm-4"> | |
| 110 | + <div class="form-group"> | |
| 111 | + <label class="col-form-label"> | |
| 112 | + <span><vc:i18n name="联系电话" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 113 | + </label> | |
| 114 | + <label class="">{{contractDetailInfo.operatorLink}}</label> | |
| 115 | + </div> | |
| 116 | + </div> | |
| 117 | + <div class="col-sm-4"> | |
| 118 | + <div class="form-group"> | |
| 119 | + <label class="col-form-label"> | |
| 120 | + <span><vc:i18n name="合同金额" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 121 | + </label> | |
| 122 | + <label class="">{{contractDetailInfo.amount}}</label> | |
| 123 | + </div> | |
| 124 | + </div> | |
| 125 | + </div> | |
| 126 | + <div class="row"> | |
| 127 | + <div class="col-sm-4"> | |
| 128 | + <div class="form-group"> | |
| 129 | + <label class="col-form-label"> | |
| 130 | + <span><vc:i18n name="开始时间" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 131 | + </label> | |
| 132 | + <label class="">{{contractDetailInfo.startTime}}</label> | |
| 133 | + </div> | |
| 134 | + </div> | |
| 135 | + <div class="col-sm-4"> | |
| 136 | + <div class="form-group"> | |
| 137 | + <label class="col-form-label"> | |
| 138 | + <span><vc:i18n name="结束时间" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 139 | + </label> | |
| 140 | + <label class="">{{contractDetailInfo.endTime}}</label> | |
| 141 | + </div> | |
| 142 | + </div> | |
| 143 | + <div class="col-sm-4"> | |
| 144 | + <div class="form-group"> | |
| 145 | + <label class="col-form-label"> | |
| 146 | + <span><vc:i18n name="签订时间" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 147 | + </label> | |
| 148 | + <label class="">{{contractDetailInfo.signingTime}}</label> | |
| 149 | + </div> | |
| 150 | + </div> | |
| 151 | + </div> | |
| 152 | + <div class="row"> | |
| 153 | + <div class="col-sm-10"> | |
| 154 | + <div class="form-group"> | |
| 155 | + <label class="col-form-label"> | |
| 156 | + <span><vc:i18n name="相关附件" namespace="contractApplyDetail"></vc:i18n></span>: | |
| 157 | + </label> | |
| 158 | + <label v-for="(file,index) in contractDetailInfo.files" style="margin-left: 50px;"> | |
| 159 | + <a href="javascript:void(0)" @click="_viewFile(file)">{{file.fileRealName}}</a> | |
| 160 | + </label> | |
| 161 | + </div> | |
| 162 | + </div> | |
| 163 | + </div> | |
| 164 | + </div> | |
| 165 | + </div> | |
| 166 | + </div> | |
| 167 | + </div> | |
| 168 | + <div class="row"> | |
| 169 | + <div class="col-lg-12"> | |
| 170 | + <div class="ibox"> | |
| 171 | + <div class="ibox-title"> | |
| 172 | + <h5> | |
| 173 | + <span><vc:i18n name="关联房屋" namespace="contractApplyDetail"></vc:i18n></span> | |
| 174 | + </h5> | |
| 175 | + <div class="ibox-tools" style="top:10px;"></div> | |
| 176 | + </div> | |
| 177 | + <div class="ibox-content"> | |
| 178 | + <table class="table table-stripped"> | |
| 179 | + <thead> | |
| 180 | + <tr> | |
| 181 | + <th data-hide="phone" class="text-center"> | |
| 182 | + <span><vc:i18n name="房屋" namespace="contractApplyDetail"></vc:i18n></span> | |
| 183 | + </th> | |
| 184 | + <th data-hide="phone" class="text-center"> | |
| 185 | + <span><vc:i18n name="房屋编号" namespace="contractApplyDetail"></vc:i18n></span> | |
| 186 | + </th> | |
| 187 | + <th data-hide="phone" class="text-center"> | |
| 188 | + <span><vc:i18n name="建筑面积" namespace="contractApplyDetail"></vc:i18n></span> | |
| 189 | + </th> | |
| 190 | + <!--<th data-hide="phone" class="text-center"> | |
| 191 | + <span><vc:i18n name="房屋状态" namespace="contractApplyDetail"></vc:i18n></span> | |
| 192 | + </th>--> | |
| 193 | + </tr> | |
| 194 | + </thead> | |
| 195 | + <tbody> | |
| 196 | + <tr v-for="room in contractDetailInfo.rooms"> | |
| 197 | + <td class="text-center"> | |
| 198 | + {{room.roomName}} | |
| 199 | + </td> | |
| 200 | + <td class="text-center"> | |
| 201 | + {{room.roomId}} | |
| 202 | + </td> | |
| 203 | + <td class="text-center"> | |
| 204 | + {{room.builtUpArea}}<span><vc:i18n name="平方米" namespace="contractApplyDetail"></vc:i18n></span> | |
| 205 | + </td> | |
| 206 | + <!--<td class="text-center"> | |
| 207 | + {{room.link}} | |
| 208 | + </td> | |
| 209 | + <td class="text-center"> | |
| 210 | + {{room.stateName}} | |
| 211 | + </td>--> | |
| 212 | + </tr> | |
| 213 | + </tbody> | |
| 214 | + </table> | |
| 215 | + </div> | |
| 216 | + </div> | |
| 217 | + </div> | |
| 218 | + </div> | |
| 219 | + <div class="row"> | |
| 220 | + <div class="col-lg-12"> | |
| 221 | + <div class="ibox"> | |
| 222 | + <div class="ibox-title"> | |
| 223 | + <h5> | |
| 224 | + <span><vc:i18n name="工单流转" namespace="contractApplyDetail"></vc:i18n></span> | |
| 225 | + </h5> | |
| 226 | + <div class="ibox-tools" style="top:10px;"></div> | |
| 227 | + </div> | |
| 228 | + <div class="ibox-content"> | |
| 229 | + <table class="table table-stripped"> | |
| 230 | + <thead> | |
| 231 | + <tr> | |
| 232 | + <th scope="col" class="text-center"> | |
| 233 | + <span><vc:i18n name="序号" namespace="contractApplyDetail"></vc:i18n></span> | |
| 234 | + </th> | |
| 235 | + <th scope="col" class="text-center"> | |
| 236 | + <span><vc:i18n name="处理人" namespace="contractApplyDetail"></vc:i18n></span> | |
| 237 | + </th> | |
| 238 | + <th scope="col" class="text-center"> | |
| 239 | + <span><vc:i18n name="状态" namespace="contractApplyDetail"></vc:i18n></span> | |
| 240 | + </th> | |
| 241 | + <th scope="col" class="text-center"> | |
| 242 | + <span><vc:i18n name="处理时间" namespace="contractApplyDetail"></vc:i18n></span> | |
| 243 | + </th> | |
| 244 | + <th scope="col" class="text-center"> | |
| 245 | + <span><vc:i18n name="耗时" namespace="contractApplyDetail"></vc:i18n></span> | |
| 246 | + </th> | |
| 247 | + <th scope="col" class="text-center"> | |
| 248 | + <span><vc:i18n name="意见" namespace="contractApplyDetail"></vc:i18n></span> | |
| 249 | + </th> | |
| 250 | + </tr> | |
| 251 | + </thead> | |
| 252 | + <tbody> | |
| 253 | + <tr v-for="(tItem,index) in auditUsers"> | |
| 254 | + <td class="text-center">{{index+1}}</td> | |
| 255 | + <td class="text-center">{{tItem.userName?tItem.userName:tItem.auditName}}</td> | |
| 256 | + <td class="text-center">{{tItem.stateName}}</td> | |
| 257 | + <td class="text-center">{{tItem.auditTime}}</td> | |
| 258 | + <td class="text-center">{{tItem.duration}}</td> | |
| 259 | + <td class="text-center">{{tItem.message}}</td> | |
| 260 | + </tr> | |
| 261 | + </tbody> | |
| 262 | + </table> | |
| 263 | + </div> | |
| 264 | + </div> | |
| 265 | + </div> | |
| 266 | + </div> | |
| 267 | +</div> | |
| 268 | +``` | |
| 269 | +```js | |
| 270 | +/** | |
| 271 | + 入驻小区 | |
| 272 | + **/ | |
| 273 | +(function (vc) { | |
| 274 | + var DEFAULT_PAGE = 1; | |
| 275 | + var DEFAULT_ROWS = 1; | |
| 276 | + vc.extends({ | |
| 277 | + data: { | |
| 278 | + contractDetailInfo: { | |
| 279 | + contractId: '', | |
| 280 | + contractName: '', | |
| 281 | + contractCode: '', | |
| 282 | + contractType: '', | |
| 283 | + contractTypeName: '', | |
| 284 | + partyA: '', | |
| 285 | + partyB: '', | |
| 286 | + aContacts: '', | |
| 287 | + bContacts: '', | |
| 288 | + aLink: '', | |
| 289 | + bLink: '', | |
| 290 | + operator: '', | |
| 291 | + operatorLink: '', | |
| 292 | + amount: '', | |
| 293 | + startTime: '', | |
| 294 | + endTime: '', | |
| 295 | + signingTime: '', | |
| 296 | + param: '', | |
| 297 | + planType: '', | |
| 298 | + files: [], | |
| 299 | + rooms: [] | |
| 300 | + }, | |
| 301 | + auditUsers: [] | |
| 302 | + }, | |
| 303 | + _initMethod: function () { | |
| 304 | + vc.component.contractDetailInfo.contractId = vc.getParam('contractId'); | |
| 305 | + vc.component._listContractApply(DEFAULT_PAGE, DEFAULT_ROWS); | |
| 306 | + $that._loadAuditUser(); | |
| 307 | + $that._loadContractFiles(); | |
| 308 | + $that._loadContractRooms(); | |
| 309 | + }, | |
| 310 | + _initEvent: function () { | |
| 311 | + }, | |
| 312 | + methods: { | |
| 313 | + _listContractApply: function (_page, _rows) { | |
| 314 | + var param = { | |
| 315 | + params: { | |
| 316 | + page: _page, | |
| 317 | + row: _rows, | |
| 318 | + contractId: vc.component.contractDetailInfo.contractId | |
| 319 | + } | |
| 320 | + }; | |
| 321 | + //发送get请求 | |
| 322 | + vc.http.apiGet('/contract/queryContract', | |
| 323 | + param, | |
| 324 | + function (json) { | |
| 325 | + var _contractApplyDetailInfo = JSON.parse(json); | |
| 326 | + var _contractApply = _contractApplyDetailInfo.data[0]; | |
| 327 | + vc.copyObject(_contractApply, vc.component.contractDetailInfo); | |
| 328 | + }, | |
| 329 | + function () { | |
| 330 | + console.log('请求失败处理'); | |
| 331 | + } | |
| 332 | + ); | |
| 333 | + }, | |
| 334 | + _loadAuditUser: function () { | |
| 335 | + var param = { | |
| 336 | + params: { | |
| 337 | + businessKey: vc.component.contractDetailInfo.contractId, | |
| 338 | + communityId: vc.getCurrentCommunity().communityId, | |
| 339 | + } | |
| 340 | + }; | |
| 341 | + //发送get请求 | |
| 342 | + vc.http.apiGet('workflow.listWorkflowAuditInfo', | |
| 343 | + param, | |
| 344 | + function (json, res) { | |
| 345 | + var _json = JSON.parse(json); | |
| 346 | + $that.auditUsers = _json.data; | |
| 347 | + }, | |
| 348 | + function (errInfo, error) { | |
| 349 | + console.log('请求失败处理'); | |
| 350 | + } | |
| 351 | + ); | |
| 352 | + }, | |
| 353 | + _loadContractFiles: function () { | |
| 354 | + let param = { | |
| 355 | + params: { | |
| 356 | + contractId: vc.component.contractDetailInfo.contractId, | |
| 357 | + page: 1, | |
| 358 | + row: 100 | |
| 359 | + } | |
| 360 | + } | |
| 361 | + //发送get请求 | |
| 362 | + vc.http.apiGet('/contractFile/queryContractFile', | |
| 363 | + param, | |
| 364 | + function (json, res) { | |
| 365 | + var _contractTFile = JSON.parse(json); | |
| 366 | + vc.component.contractDetailInfo.files = _contractTFile.data; | |
| 367 | + }, | |
| 368 | + function (errInfo, error) { | |
| 369 | + console.log('请求失败处理'); | |
| 370 | + } | |
| 371 | + ); | |
| 372 | + }, | |
| 373 | + _loadContractRooms: function () { | |
| 374 | + let param = { | |
| 375 | + params: { | |
| 376 | + contractId: vc.component.contractDetailInfo.contractId, | |
| 377 | + page: 1, | |
| 378 | + row: 100 | |
| 379 | + } | |
| 380 | + } | |
| 381 | + //发送get请求 | |
| 382 | + vc.http.apiGet('/contract/queryContractRoom', | |
| 383 | + param, | |
| 384 | + function (json, res) { | |
| 385 | + var _contractTFile = JSON.parse(json); | |
| 386 | + vc.component.contractDetailInfo.rooms = _contractTFile.data; | |
| 387 | + }, | |
| 388 | + function (errInfo, error) { | |
| 389 | + console.log('请求失败处理'); | |
| 390 | + } | |
| 391 | + ); | |
| 392 | + }, | |
| 393 | + _viewFile: function (_file) { | |
| 394 | + window.open(_file.fileSaveName); | |
| 395 | + }, | |
| 396 | + _goback: function () { | |
| 397 | + vc.getBack(); | |
| 398 | + }, | |
| 399 | + _printContract: function () { | |
| 400 | + let _contract = $that.contractDetailInfo; | |
| 401 | + window.open("/print.html#/pages/admin/printContract?contractTypeId=" + _contract.contractType + "&contractId=" + _contract.contractId); | |
| 402 | + } | |
| 403 | + } | |
| 404 | + }); | |
| 405 | +})(window.vc); | |
| 406 | +``` | |
| 0 | 407 | \ No newline at end of file | ... | ... |
src/views/contract/contractApplyDetail.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="contract-apply-detail-container"> | |
| 3 | + <el-row :gutter="20"> | |
| 4 | + <el-col :span="24"> | |
| 5 | + <el-card> | |
| 6 | + <div slot="header" class="flex justify-between"> | |
| 7 | + <span>{{ $t('contractApplyDetail.title') }}</span> | |
| 8 | + <div> | |
| 9 | + <el-button type="primary" size="small" @click="_printContract"> | |
| 10 | + <i class="el-icon-printer"></i> | |
| 11 | + {{ $t('contractApplyDetail.print') }} | |
| 12 | + </el-button> | |
| 13 | + <el-button type="primary" size="small" style="margin-left: 10px;" @click="_goBack"> | |
| 14 | + <i class="el-icon-close"></i> | |
| 15 | + {{ $t('contractApplyDetail.back') }} | |
| 16 | + </el-button> | |
| 17 | + </div> | |
| 18 | + </div> | |
| 19 | + | |
| 20 | + <el-form label-width="120px" class="text-left"> | |
| 21 | + <el-row :gutter="20"> | |
| 22 | + <el-col :span="8"> | |
| 23 | + <el-form-item :label="$t('contractApplyDetail.contractName') + ':'"> | |
| 24 | + <span>{{ contractDetailInfo.contractName }}</span> | |
| 25 | + </el-form-item> | |
| 26 | + </el-col> | |
| 27 | + <el-col :span="8"> | |
| 28 | + <el-form-item :label="$t('contractApplyDetail.contractCode') + ':'"> | |
| 29 | + <span>{{ contractDetailInfo.contractCode }}</span> | |
| 30 | + </el-form-item> | |
| 31 | + </el-col> | |
| 32 | + <el-col :span="8"> | |
| 33 | + <el-form-item :label="$t('contractApplyDetail.contractType') + ':'"> | |
| 34 | + <span>{{ contractDetailInfo.contractTypeName }}</span> | |
| 35 | + </el-form-item> | |
| 36 | + </el-col> | |
| 37 | + </el-row> | |
| 38 | + | |
| 39 | + <el-row :gutter="20"> | |
| 40 | + <el-col :span="8"> | |
| 41 | + <el-form-item :label="$t('contractApplyDetail.partyA') + ':'"> | |
| 42 | + <span>{{ contractDetailInfo.partyA }}</span> | |
| 43 | + </el-form-item> | |
| 44 | + </el-col> | |
| 45 | + <el-col :span="8"> | |
| 46 | + <el-form-item :label="$t('contractApplyDetail.partyAContact') + ':'"> | |
| 47 | + <span>{{ contractDetailInfo.aContacts }}</span> | |
| 48 | + </el-form-item> | |
| 49 | + </el-col> | |
| 50 | + <el-col :span="8"> | |
| 51 | + <el-form-item :label="$t('contractApplyDetail.partyAPhone') + ':'"> | |
| 52 | + <span>{{ contractDetailInfo.aLink }}</span> | |
| 53 | + </el-form-item> | |
| 54 | + </el-col> | |
| 55 | + </el-row> | |
| 56 | + | |
| 57 | + <el-row :gutter="20"> | |
| 58 | + <el-col :span="8"> | |
| 59 | + <el-form-item :label="$t('contractApplyDetail.partyB') + ':'"> | |
| 60 | + <span>{{ contractDetailInfo.partyB }}</span> | |
| 61 | + </el-form-item> | |
| 62 | + </el-col> | |
| 63 | + <el-col :span="8"> | |
| 64 | + <el-form-item :label="$t('contractApplyDetail.partyBContact') + ':'"> | |
| 65 | + <span>{{ contractDetailInfo.bContacts }}</span> | |
| 66 | + </el-form-item> | |
| 67 | + </el-col> | |
| 68 | + <el-col :span="8"> | |
| 69 | + <el-form-item :label="$t('contractApplyDetail.partyBPhone') + ':'"> | |
| 70 | + <span>{{ contractDetailInfo.bLink }}</span> | |
| 71 | + </el-form-item> | |
| 72 | + </el-col> | |
| 73 | + </el-row> | |
| 74 | + | |
| 75 | + <el-row :gutter="20"> | |
| 76 | + <el-col :span="8"> | |
| 77 | + <el-form-item :label="$t('contractApplyDetail.operator') + ':'"> | |
| 78 | + <span>{{ contractDetailInfo.operator }}</span> | |
| 79 | + </el-form-item> | |
| 80 | + </el-col> | |
| 81 | + <el-col :span="8"> | |
| 82 | + <el-form-item :label="$t('contractApplyDetail.phone') + ':'"> | |
| 83 | + <span>{{ contractDetailInfo.operatorLink }}</span> | |
| 84 | + </el-form-item> | |
| 85 | + </el-col> | |
| 86 | + <el-col :span="8"> | |
| 87 | + <el-form-item :label="$t('contractApplyDetail.contractAmount') + ':'"> | |
| 88 | + <span>{{ contractDetailInfo.amount }}</span> | |
| 89 | + </el-form-item> | |
| 90 | + </el-col> | |
| 91 | + </el-row> | |
| 92 | + | |
| 93 | + <el-row :gutter="20"> | |
| 94 | + <el-col :span="8"> | |
| 95 | + <el-form-item :label="$t('contractApplyDetail.startTime') + ':'"> | |
| 96 | + <span>{{ contractDetailInfo.startTime }}</span> | |
| 97 | + </el-form-item> | |
| 98 | + </el-col> | |
| 99 | + <el-col :span="8"> | |
| 100 | + <el-form-item :label="$t('contractApplyDetail.endTime') + ':'"> | |
| 101 | + <span>{{ contractDetailInfo.endTime }}</span> | |
| 102 | + </el-form-item> | |
| 103 | + </el-col> | |
| 104 | + <el-col :span="8"> | |
| 105 | + <el-form-item :label="$t('contractApplyDetail.signingTime') + ':'"> | |
| 106 | + <span>{{ contractDetailInfo.signingTime }}</span> | |
| 107 | + </el-form-item> | |
| 108 | + </el-col> | |
| 109 | + </el-row> | |
| 110 | + | |
| 111 | + <el-row :gutter="20"> | |
| 112 | + <el-col :span="24"> | |
| 113 | + <el-form-item :label="$t('contractApplyDetail.relatedFiles') + ':'"> | |
| 114 | + <span v-for="(file, index) in contractDetailInfo.files" :key="index" style="margin-left: 20px;"> | |
| 115 | + <a href="javascript:void(0)" @click="_viewFile(file)">{{ file.fileRealName }}</a> | |
| 116 | + </span> | |
| 117 | + </el-form-item> | |
| 118 | + </el-col> | |
| 119 | + </el-row> | |
| 120 | + </el-form> | |
| 121 | + </el-card> | |
| 122 | + </el-col> | |
| 123 | + </el-row> | |
| 124 | + | |
| 125 | + <el-row :gutter="20" class="margin-top"> | |
| 126 | + <el-col :span="24"> | |
| 127 | + <el-card> | |
| 128 | + <div slot="header" class="flex justify-between"> | |
| 129 | + <span>{{ $t('contractApplyDetail.relatedRooms') }}</span> | |
| 130 | + </div> | |
| 131 | + <table class="table table-stripped" style="width: 100%;"> | |
| 132 | + <thead> | |
| 133 | + <tr> | |
| 134 | + <th class="text-center">{{ $t('contractApplyDetail.room') }}</th> | |
| 135 | + <th class="text-center">{{ $t('contractApplyDetail.roomCode') }}</th> | |
| 136 | + <th class="text-center">{{ $t('contractApplyDetail.builtUpArea') }}</th> | |
| 137 | + </tr> | |
| 138 | + </thead> | |
| 139 | + <tbody> | |
| 140 | + <tr v-for="(room, index) in contractDetailInfo.rooms" :key="index"> | |
| 141 | + <td class="text-center">{{ room.roomName }}</td> | |
| 142 | + <td class="text-center">{{ room.roomId }}</td> | |
| 143 | + <td class="text-center">{{ room.builtUpArea }}{{ $t('contractApplyDetail.squareMeter') }}</td> | |
| 144 | + </tr> | |
| 145 | + </tbody> | |
| 146 | + </table> | |
| 147 | + </el-card> | |
| 148 | + </el-col> | |
| 149 | + </el-row> | |
| 150 | + | |
| 151 | + <el-row :gutter="20" class="margin-top"> | |
| 152 | + <el-col :span="24"> | |
| 153 | + <el-card> | |
| 154 | + <div slot="header"> | |
| 155 | + <span>{{ $t('contractApplyDetail.workflowFlow') }}</span> | |
| 156 | + </div> | |
| 157 | + <table class="table table-stripped" style="width: 100%;"> | |
| 158 | + <thead> | |
| 159 | + <tr> | |
| 160 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.serialNumber') }}</th> | |
| 161 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.processor') }}</th> | |
| 162 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.status') }}</th> | |
| 163 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.processTime') }}</th> | |
| 164 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.timeConsuming') }}</th> | |
| 165 | + <th scope="col" class="text-center">{{ $t('contractApplyDetail.opinion') }}</th> | |
| 166 | + </tr> | |
| 167 | + </thead> | |
| 168 | + <tbody> | |
| 169 | + <tr v-for="(item, index) in auditUsers" :key="index"> | |
| 170 | + <td class="text-center">{{ index + 1 }}</td> | |
| 171 | + <td class="text-center">{{ item.userName || item.auditName }}</td> | |
| 172 | + <td class="text-center">{{ item.stateName }}</td> | |
| 173 | + <td class="text-center">{{ item.auditTime }}</td> | |
| 174 | + <td class="text-center">{{ item.duration }}</td> | |
| 175 | + <td class="text-center">{{ item.message }}</td> | |
| 176 | + </tr> | |
| 177 | + </tbody> | |
| 178 | + </table> | |
| 179 | + </el-card> | |
| 180 | + </el-col> | |
| 181 | + </el-row> | |
| 182 | + </div> | |
| 183 | +</template> | |
| 184 | + | |
| 185 | +<script> | |
| 186 | +import { queryContract, getContractFiles, getContractRooms } from '@/api/contract/contractDetailApi' | |
| 187 | +import { listWorkflowAuditInfo } from '@/api/contract/contractDetailFlowApi' | |
| 188 | +import { getCommunityId } from '@/api/community/communityApi' | |
| 189 | + | |
| 190 | +export default { | |
| 191 | + name: 'ContractApplyDetail', | |
| 192 | + data() { | |
| 193 | + return { | |
| 194 | + contractDetailInfo: { | |
| 195 | + contractId: '', | |
| 196 | + contractName: '', | |
| 197 | + contractCode: '', | |
| 198 | + contractType: '', | |
| 199 | + contractTypeName: '', | |
| 200 | + partyA: '', | |
| 201 | + partyB: '', | |
| 202 | + aContacts: '', | |
| 203 | + bContacts: '', | |
| 204 | + aLink: '', | |
| 205 | + bLink: '', | |
| 206 | + operator: '', | |
| 207 | + operatorLink: '', | |
| 208 | + amount: '', | |
| 209 | + startTime: '', | |
| 210 | + endTime: '', | |
| 211 | + signingTime: '', | |
| 212 | + param: '', | |
| 213 | + planType: '', | |
| 214 | + files: [], | |
| 215 | + rooms: [] | |
| 216 | + }, | |
| 217 | + auditUsers: [], | |
| 218 | + communityId: '' | |
| 219 | + } | |
| 220 | + }, | |
| 221 | + created() { | |
| 222 | + this.communityId = getCommunityId() | |
| 223 | + this.contractDetailInfo.contractId = this.$route.query.contractId | |
| 224 | + if (!this.contractDetailInfo.contractId) { | |
| 225 | + this.$message.error('缺少合同ID参数') | |
| 226 | + this.$router.go(-1) | |
| 227 | + return | |
| 228 | + } | |
| 229 | + this._initMethod() | |
| 230 | + }, | |
| 231 | + methods: { | |
| 232 | + async _initMethod() { | |
| 233 | + await Promise.all([ | |
| 234 | + this._listContractApply(), | |
| 235 | + this._loadAuditUser(), | |
| 236 | + this._loadContractFiles(), | |
| 237 | + this._loadContractRooms() | |
| 238 | + ]) | |
| 239 | + }, | |
| 240 | + async _listContractApply() { | |
| 241 | + try { | |
| 242 | + const params = { | |
| 243 | + page: 1, | |
| 244 | + row: 1, | |
| 245 | + contractId: this.contractDetailInfo.contractId | |
| 246 | + } | |
| 247 | + const res = await queryContract(params) | |
| 248 | + if (res.data && res.data.length > 0) { | |
| 249 | + Object.assign(this.contractDetailInfo, res.data[0]) | |
| 250 | + } | |
| 251 | + } catch (error) { | |
| 252 | + console.error('请求失败:', error) | |
| 253 | + this.$message.error('获取合同信息失败') | |
| 254 | + } | |
| 255 | + }, | |
| 256 | + async _loadAuditUser() { | |
| 257 | + try { | |
| 258 | + const params = { | |
| 259 | + businessKey: this.contractDetailInfo.contractId, | |
| 260 | + communityId: this.communityId | |
| 261 | + } | |
| 262 | + const res = await listWorkflowAuditInfo(params) | |
| 263 | + if (res.data) { | |
| 264 | + this.auditUsers = res.data | |
| 265 | + } | |
| 266 | + } catch (error) { | |
| 267 | + console.error('请求失败:', error) | |
| 268 | + } | |
| 269 | + }, | |
| 270 | + async _loadContractFiles() { | |
| 271 | + try { | |
| 272 | + const params = { | |
| 273 | + contractId: this.contractDetailInfo.contractId, | |
| 274 | + page: 1, | |
| 275 | + row: 100 | |
| 276 | + } | |
| 277 | + const res = await getContractFiles(params) | |
| 278 | + if (res.data) { | |
| 279 | + this.contractDetailInfo.files = res.data | |
| 280 | + } | |
| 281 | + } catch (error) { | |
| 282 | + console.error('请求失败:', error) | |
| 283 | + } | |
| 284 | + }, | |
| 285 | + async _loadContractRooms() { | |
| 286 | + try { | |
| 287 | + const params = { | |
| 288 | + contractId: this.contractDetailInfo.contractId, | |
| 289 | + page: 1, | |
| 290 | + row: 100 | |
| 291 | + } | |
| 292 | + const res = await getContractRooms(params) | |
| 293 | + if (res.data) { | |
| 294 | + this.contractDetailInfo.rooms = res.data | |
| 295 | + } | |
| 296 | + } catch (error) { | |
| 297 | + console.error('请求失败:', error) | |
| 298 | + } | |
| 299 | + }, | |
| 300 | + _viewFile(file) { | |
| 301 | + if (file.fileSaveName) { | |
| 302 | + window.open(file.fileSaveName) | |
| 303 | + } | |
| 304 | + }, | |
| 305 | + _goBack() { | |
| 306 | + this.$router.go(-1) | |
| 307 | + }, | |
| 308 | + _printContract() { | |
| 309 | + const contract = this.contractDetailInfo | |
| 310 | + window.open(`/#/views/contract/printContract?contractTypeId=${contract.contractType}&contractId=${contract.contractId}`) | |
| 311 | + } | |
| 312 | + } | |
| 313 | +} | |
| 314 | +</script> | |
| 315 | + | |
| 316 | +<style lang="scss" scoped> | |
| 317 | +.contract-apply-detail-container { | |
| 318 | + padding: 20px; | |
| 319 | + | |
| 320 | + .margin-top { | |
| 321 | + margin-top: 20px; | |
| 322 | + } | |
| 323 | + | |
| 324 | + .text-left { | |
| 325 | + text-align: left; | |
| 326 | + } | |
| 327 | + | |
| 328 | + .text-center { | |
| 329 | + text-align: center; | |
| 330 | + } | |
| 331 | + | |
| 332 | + .table { | |
| 333 | + width: 100%; | |
| 334 | + border-collapse: collapse; | |
| 335 | + | |
| 336 | + th, | |
| 337 | + td { | |
| 338 | + border: 1px solid #ebeef5; | |
| 339 | + padding: 12px; | |
| 340 | + } | |
| 341 | + | |
| 342 | + thead th { | |
| 343 | + background-color: #f5f7fa; | |
| 344 | + font-weight: bold; | |
| 345 | + } | |
| 346 | + | |
| 347 | + tbody tr:hover { | |
| 348 | + background-color: #f5f7fa; | |
| 349 | + } | |
| 350 | + } | |
| 351 | + | |
| 352 | + .table-stripped tbody tr:nth-child(even) { | |
| 353 | + background-color: #fafafa; | |
| 354 | + } | |
| 355 | +} | |
| 356 | +</style> | |
| 357 | + | ... | ... |
src/views/contract/contractApplyDetailLang.js
0 → 100644
| 1 | +export const messages = { | |
| 2 | + en: { | |
| 3 | + contractApplyDetail: { | |
| 4 | + title: 'Contract Information', | |
| 5 | + contractName: 'Contract Name', | |
| 6 | + contractCode: 'Contract Code', | |
| 7 | + contractType: 'Contract Type', | |
| 8 | + partyA: 'Party A', | |
| 9 | + partyAContact: 'Party A Contact', | |
| 10 | + partyAPhone: 'Party A Phone', | |
| 11 | + partyB: 'Party B', | |
| 12 | + partyBContact: 'Party B Contact', | |
| 13 | + partyBPhone: 'Party B Phone', | |
| 14 | + operator: 'Operator', | |
| 15 | + phone: 'Phone', | |
| 16 | + contractAmount: 'Contract Amount', | |
| 17 | + startTime: 'Start Time', | |
| 18 | + endTime: 'End Time', | |
| 19 | + signingTime: 'Signing Time', | |
| 20 | + relatedFiles: 'Related Files', | |
| 21 | + relatedRooms: 'Related Rooms', | |
| 22 | + room: 'Room', | |
| 23 | + roomCode: 'Room Code', | |
| 24 | + builtUpArea: 'Built-up Area', | |
| 25 | + squareMeter: 'm²', | |
| 26 | + workflowFlow: 'Work Order Flow', | |
| 27 | + serialNumber: 'Serial Number', | |
| 28 | + processor: 'Processor', | |
| 29 | + status: 'Status', | |
| 30 | + processTime: 'Process Time', | |
| 31 | + timeConsuming: 'Time Consuming', | |
| 32 | + opinion: 'Opinion', | |
| 33 | + print: 'Print', | |
| 34 | + back: 'Back' | |
| 35 | + } | |
| 36 | + }, | |
| 37 | + zh: { | |
| 38 | + contractApplyDetail: { | |
| 39 | + title: '合同信息', | |
| 40 | + contractName: '合同名称', | |
| 41 | + contractCode: '合同编号', | |
| 42 | + contractType: '合同类型', | |
| 43 | + partyA: '甲方', | |
| 44 | + partyAContact: '甲方联系人', | |
| 45 | + partyAPhone: '甲方联系电话', | |
| 46 | + partyB: '乙方', | |
| 47 | + partyBContact: '乙方联系人', | |
| 48 | + partyBPhone: '乙方联系电话', | |
| 49 | + operator: '经办人', | |
| 50 | + phone: '联系电话', | |
| 51 | + contractAmount: '合同金额', | |
| 52 | + startTime: '开始时间', | |
| 53 | + endTime: '结束时间', | |
| 54 | + signingTime: '签订时间', | |
| 55 | + relatedFiles: '相关附件', | |
| 56 | + relatedRooms: '关联房屋', | |
| 57 | + room: '房屋', | |
| 58 | + roomCode: '房屋编号', | |
| 59 | + builtUpArea: '建筑面积', | |
| 60 | + squareMeter: '平方米', | |
| 61 | + workflowFlow: '工单流转', | |
| 62 | + serialNumber: '序号', | |
| 63 | + processor: '处理人', | |
| 64 | + status: '状态', | |
| 65 | + processTime: '处理时间', | |
| 66 | + timeConsuming: '耗时', | |
| 67 | + opinion: '意见', | |
| 68 | + print: '打印', | |
| 69 | + back: '返回' | |
| 70 | + } | |
| 71 | + } | |
| 72 | +} | |
| 73 | + | ... | ... |