```html
<div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <span><vc:i18n name="合同信息" namespace="contractApplyDetail"></vc:i18n></span>
                    </h5>
                    <div class="ibox-tools" style="top:10px;">
                        <button type="button" class="btn btn-primary btn-sm" v-on:click="_printContract()">
                            <i class="fa fa-print"></i>
                            <vc:i18n name="打印"></vc:i18n>
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" v-on:click="_goback()">
                            <i class="fa fa-close"></i>
                            <vc:i18n name="返回"></vc:i18n>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="合同名称" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.contractName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="合同编号" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.contractCode}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="合同类型" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.contractTypeName}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="甲方" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.partyA}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="甲方联系人" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.aContacts}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="甲方联系电话" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.aLink}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="乙方" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.partyB}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="乙方联系人" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.bContacts}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="乙方联系电话" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.bLink}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="经办人" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.operator}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="联系电话" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.operatorLink}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="合同金额" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.amount}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="开始时间" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.startTime}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="结束时间" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.endTime}}</label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="签订时间" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label class="">{{contractDetailInfo.signingTime}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-10">
                            <div class="form-group">
                                <label class="col-form-label">
                                    <span><vc:i18n name="相关附件" namespace="contractApplyDetail"></vc:i18n></span>：
                                </label>
                                <label v-for="(file,index) in contractDetailInfo.files" style="margin-left: 50px;">
                                    <a href="javascript:void(0)" @click="_viewFile(file)">{{file.fileRealName}}</a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <span><vc:i18n name="关联房屋" namespace="contractApplyDetail"></vc:i18n></span>
                    </h5>
                    <div class="ibox-tools" style="top:10px;"></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-stripped">
                        <thead>
                        <tr>
                            <th data-hide="phone" class="text-center">
                                <span><vc:i18n name="房屋" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th data-hide="phone" class="text-center">
                                <span><vc:i18n name="房屋编号" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th data-hide="phone" class="text-center">
                                <span><vc:i18n name="建筑面积" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <!--<th data-hide="phone" class="text-center">
                                <span><vc:i18n name="房屋状态" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="room in contractDetailInfo.rooms">
                            <td class="text-center">
                                {{room.roomName}}
                            </td>
                            <td class="text-center">
                                {{room.roomId}}
                            </td>
                            <td class="text-center">
                                {{room.builtUpArea}}<span><vc:i18n name="平方米" namespace="contractApplyDetail"></vc:i18n></span>
                            </td>
                            <!--<td class="text-center">
                                {{room.link}}
                            </td>
                            <td class="text-center">
                                {{room.stateName}}
                            </td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <span><vc:i18n name="工单流转" namespace="contractApplyDetail"></vc:i18n></span>
                    </h5>
                    <div class="ibox-tools" style="top:10px;"></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-stripped">
                        <thead>
                        <tr>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="序号" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="处理人" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="状态" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="处理时间" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="耗时" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                            <th scope="col" class="text-center">
                                <span><vc:i18n name="意见" namespace="contractApplyDetail"></vc:i18n></span>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(tItem,index) in auditUsers">
                            <td class="text-center">{{index+1}}</td>
                            <td class="text-center">{{tItem.userName?tItem.userName:tItem.auditName}}</td>
                            <td class="text-center">{{tItem.stateName}}</td>
                            <td class="text-center">{{tItem.auditTime}}</td>
                            <td class="text-center">{{tItem.duration}}</td>
                            <td class="text-center">{{tItem.message}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
```
```js
/**
 入驻小区
 **/
(function (vc) {
    var DEFAULT_PAGE = 1;
    var DEFAULT_ROWS = 1;
    vc.extends({
        data: {
            contractDetailInfo: {
                contractId: '',
                contractName: '',
                contractCode: '',
                contractType: '',
                contractTypeName: '',
                partyA: '',
                partyB: '',
                aContacts: '',
                bContacts: '',
                aLink: '',
                bLink: '',
                operator: '',
                operatorLink: '',
                amount: '',
                startTime: '',
                endTime: '',
                signingTime: '',
                param: '',
                planType: '',
                files: [],
                rooms: []
            },
            auditUsers: []
        },
        _initMethod: function () {
            vc.component.contractDetailInfo.contractId = vc.getParam('contractId');
            vc.component._listContractApply(DEFAULT_PAGE, DEFAULT_ROWS);
            $that._loadAuditUser();
            $that._loadContractFiles();
            $that._loadContractRooms();
        },
        _initEvent: function () {
        },
        methods: {
            _listContractApply: function (_page, _rows) {
                var param = {
                    params: {
                        page: _page,
                        row: _rows,
                        contractId: vc.component.contractDetailInfo.contractId
                    }
                };
                //发送get请求
                vc.http.apiGet('/contract/queryContract',
                    param,
                    function (json) {
                        var _contractApplyDetailInfo = JSON.parse(json);
                        var _contractApply = _contractApplyDetailInfo.data[0];
                        vc.copyObject(_contractApply, vc.component.contractDetailInfo);
                    },
                    function () {
                        console.log('请求失败处理');
                    }
                );
            },
            _loadAuditUser: function () {
                var param = {
                    params: {
                        businessKey: vc.component.contractDetailInfo.contractId,
                        communityId: vc.getCurrentCommunity().communityId,
                    }
                };
                //发送get请求
                vc.http.apiGet('workflow.listWorkflowAuditInfo',
                    param,
                    function (json, res) {
                        var _json = JSON.parse(json);
                        $that.auditUsers = _json.data;
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },
            _loadContractFiles: function () {
                let param = {
                    params: {
                        contractId: vc.component.contractDetailInfo.contractId,
                        page: 1,
                        row: 100
                    }
                }
                //发送get请求
                vc.http.apiGet('/contractFile/queryContractFile',
                    param,
                    function (json, res) {
                        var _contractTFile = JSON.parse(json);
                        vc.component.contractDetailInfo.files = _contractTFile.data;
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },
            _loadContractRooms: function () {
                let param = {
                    params: {
                        contractId: vc.component.contractDetailInfo.contractId,
                        page: 1,
                        row: 100
                    }
                }
                //发送get请求
                vc.http.apiGet('/contract/queryContractRoom',
                    param,
                    function (json, res) {
                        var _contractTFile = JSON.parse(json);
                        vc.component.contractDetailInfo.rooms = _contractTFile.data;
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                    }
                );
            },
            _viewFile: function (_file) {
                window.open(_file.fileSaveName);
            },
            _goback: function () {
                vc.getBack();
            },
            _printContract: function () {
                let _contract = $that.contractDetailInfo;
                window.open("/print.html#/pages/admin/printContract?contractTypeId=" + _contract.contractType + "&contractId=" + _contract.contractId);
            }
        }
    });
})(window.vc);
```