|
@@ -0,0 +1,416 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=0.4,minimum-scale=0.1,maximum-scale=1,user-scalable=yes">
|
|
|
+ <meta name="mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="mobile-web-app-status-bar-style" content="black">
|
|
|
+ <script type="text/javascript" src="./wx.js"></script>
|
|
|
+ <script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="./axios.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <script src="./axiosRequest.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <link rel="stylesheet" href="./reset.css" />
|
|
|
+ <title id="title"></title>
|
|
|
+ <style>
|
|
|
+ .flow-document {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .html {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sureSeal {
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(97, 133, 214, 0);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #ACADB3;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seal-box {
|
|
|
+ color: red;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seal-img {
|
|
|
+ position: absolute;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ z-index: 998;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -60px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DocDefaults {
|
|
|
+ line-height: 1.5 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .html-button {
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .html-btn-cancel,
|
|
|
+ .html-btn {
|
|
|
+ padding: 5px 20px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(97, 133, 214, 0);
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #ACADB3;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .html-btn {
|
|
|
+ background: #08979c;
|
|
|
+ border-color: #08979c;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <div id="html" class="html" ref="html" v-html="html"></div>
|
|
|
+ <!-- <div class="html-button">
|
|
|
+ <div class="html-btn-cancel" @click="cancel">取消</div>
|
|
|
+ <div class="html-btn" @click="submit">保存</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <script src="./jquery.js"></script>
|
|
|
+ <script type="text/javascript" src="./uni.webview.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ function getQueryObject(url) {
|
|
|
+ url = url == null ? window.location.href : url
|
|
|
+ const search = url.substring(url.lastIndexOf('?') + 1)
|
|
|
+ const obj = {}
|
|
|
+ const reg = /([^?&=]+)=([^?&=]*)/g
|
|
|
+ search.replace(reg, (rs, $1, $2) => {
|
|
|
+ const name = decodeURIComponent($1)
|
|
|
+ let val = decodeURIComponent($2)
|
|
|
+ val = String(val)
|
|
|
+ obj[name] = val
|
|
|
+ return rs
|
|
|
+ })
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener('UniAppJSBridgeReady', function() {
|
|
|
+ let app = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ html: '',
|
|
|
+ documentId: '',
|
|
|
+ contextData: {},
|
|
|
+ checkKeys: [],
|
|
|
+ options: [],
|
|
|
+ idsBox: [],
|
|
|
+ sealDomId: '',
|
|
|
+ userId: ''
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let query = getQueryObject(location.href);
|
|
|
+ localStorage.setItem('token', query.token);
|
|
|
+ this.documentId = query.id;
|
|
|
+ this.contractId = query.contractId;
|
|
|
+ this.userId = query.userId
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initDocument();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initDocument() {
|
|
|
+ $http.getDocumentById(this.documentId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let data = res.data,
|
|
|
+ hasContext = false;
|
|
|
+ for (var i = 0; i < data.elementDataList.length; i++) {
|
|
|
+ let item = JSON.parse(data.elementDataList[i].data);
|
|
|
+ if (item['context'] && item['context']['contractId'])
|
|
|
+ hasContext = true;
|
|
|
+ }
|
|
|
+ if (!hasContext) {
|
|
|
+ this.initContext(data.documentTemplateId, data.elementDataList,
|
|
|
+ data.sealUsageList);
|
|
|
+ } else {
|
|
|
+ this.initTemplate(data.documentTemplateId, data.elementDataList,
|
|
|
+ data.sealUsageList);
|
|
|
+ }
|
|
|
+ this.documentSealRegister(data.id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initContext(templateId, elementData, sealData) {
|
|
|
+ $http.getContractDetailById(this.contractId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let contractData = res.data;
|
|
|
+ $http.getHouseTree(contractData.projectId).then(node => {
|
|
|
+ if (node.state) {
|
|
|
+ this.options = this.roomList(node.data
|
|
|
+ .projectItemList || []);
|
|
|
+ if (contractData.projectItemTargetRoomIds) {
|
|
|
+ this.idsBox = contractData
|
|
|
+ .projectItemTargetRoomIds
|
|
|
+ .split(',');
|
|
|
+ this.returnChecked(this.options);
|
|
|
+ }
|
|
|
+ this.setDocumentData(contractData);
|
|
|
+ this.initTemplate(templateId, elementData, sealData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initTemplate(templateId, elementData, sealData) {
|
|
|
+ $http.getDocumentTemplateById(templateId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.html = res.data.html;
|
|
|
+ $('#title').text(res.data.name);
|
|
|
+ this.renderTamplate(elementData, sealData);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ renderTamplate(elementDataList, sealUsageList) {
|
|
|
+ //整合模板
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let documentElement = $('.documentElement');
|
|
|
+ for (let i = 0; i < documentElement.length; i++) {
|
|
|
+ let elem = documentElement[i];
|
|
|
+ let inputtype = $(elem).attr('inputtype') == undefined ? '' : $(elem)
|
|
|
+ .attr(
|
|
|
+ 'inputtype');
|
|
|
+ let updatetype = inputtype.replace('@', '');
|
|
|
+ $(elem).attr('updatetype', updatetype);
|
|
|
+ this.domRender(updatetype, elem, elem.id);
|
|
|
+ }
|
|
|
+ if (elementDataList.length > 0) this.renderDocument(elementDataList);
|
|
|
+ if (sealUsageList) this.filterSeal(sealUsageList);
|
|
|
+ //申请印章
|
|
|
+ let _self = this;
|
|
|
+ $('.sureSeal').click(function() {
|
|
|
+ let _this = this;
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: '/pages/requestSeal/requestSeal?documentId=' +
|
|
|
+ _self.documentId + '&sealDomId=' + $(_this)
|
|
|
+ .parent()[0].id
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ domRender(type, elem, id) {
|
|
|
+ switch (type) {
|
|
|
+ case 'context':
|
|
|
+ if (elem.innerHTML) return;
|
|
|
+ $(elem).text(this.contextData[id] || '')
|
|
|
+ break;
|
|
|
+ case 'sign':
|
|
|
+ elem.innerHTML =
|
|
|
+ '<button class="sureAutograph el-button el-button--default el-button--medium">确认签名</button>';
|
|
|
+ break;
|
|
|
+ case 'seal':
|
|
|
+ if (elem.innerHTML) return;
|
|
|
+ elem.innerHTML = '<span class="sureSeal"">申请盖章</span>';
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ renderDocument(data) {
|
|
|
+ data.forEach(item => {
|
|
|
+ let dataItem = JSON.parse(item.data);
|
|
|
+ for (let i in dataItem) {
|
|
|
+ for (let j in dataItem[i]) {
|
|
|
+ this.renderDom(i, j, dataItem[i][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ renderDom(i, j, text) {
|
|
|
+ switch (i) {
|
|
|
+ case 'seal':
|
|
|
+ if (text == '') return;
|
|
|
+ $('#' + j).addClass('seal-box');
|
|
|
+ $('#' + j).html('已申请印章,请等待审核');
|
|
|
+ break;
|
|
|
+ case 'sealperson':
|
|
|
+ break;
|
|
|
+ case 'sign':
|
|
|
+ $('#' + j + '[inputtype=' + i + ']').html('<img class="autograph" src="' +
|
|
|
+ text + '">');
|
|
|
+ break;
|
|
|
+ case 'signQR':
|
|
|
+ $('#' + j + '[inputtype=' + i + ']').html('<img class="autograph" src="' +
|
|
|
+ text + '">');
|
|
|
+ break;
|
|
|
+ case 'copyImage':
|
|
|
+ $('#' + j + '[inputtype=' + i + ']').html('<img class="copy-img" src="' +
|
|
|
+ text + '"/>');
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ if (i.indexOf('.') == -1) {
|
|
|
+ $('#' + j + '[inputtype=' + i + ']').text(text);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterSeal(data) {
|
|
|
+ //渲染印章
|
|
|
+ let _self = this;
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ $http.getRequestSealDetail(item.requestId).then(node => {
|
|
|
+ if (node.state) {
|
|
|
+ let data = node.data;
|
|
|
+ if (data.status == 1) {
|
|
|
+ $('#' + data.keyWord).css('position',
|
|
|
+ 'relative');
|
|
|
+ $http.getSealDetailById(data.sealId).then(item => {
|
|
|
+ if (item.state) {
|
|
|
+ $('#' + data.keyWord).html(
|
|
|
+ '<img id="' + data.keyWord +
|
|
|
+ '" class="seal-img" src="' +
|
|
|
+ item.data.fileNode
|
|
|
+ .node.url + '"/>');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ documentSealRegister(documentId) {
|
|
|
+ $http.getSealRegisterKey(documentId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ $('#' + item.keyWord).css('position', 'relative');
|
|
|
+ $('#' + item.keyWord).html(
|
|
|
+ '<img id="' +
|
|
|
+ item.keyWord +
|
|
|
+ '" class="seal-img" src="' +
|
|
|
+ (item.fileNode.node.url ||
|
|
|
+ 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/8b726641d0cc45fe91b5e59e4ea450c6'
|
|
|
+ ) +
|
|
|
+ '"/>'
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ roomList(data) {
|
|
|
+ let newArr = JSON.parse(JSON.stringify(data));
|
|
|
+ let index = 1;
|
|
|
+ newArr = newArr.map(item => {
|
|
|
+ item['projectItemId'] = item['id'];
|
|
|
+ item['id'] = index;
|
|
|
+ item['projectItem'] = item;
|
|
|
+ item['optionName'] = item['name'];
|
|
|
+ index++;
|
|
|
+ item['children'] = item.projectItemTargetList.map(target => {
|
|
|
+ target['projectItemTargetId'] = target['id'];
|
|
|
+ target['id'] = index;
|
|
|
+ target['projectItem'] = item;
|
|
|
+ target['optionName'] = target['name'];
|
|
|
+ index++;
|
|
|
+ target['children'] = target.projectItemTargetRoomList.map(
|
|
|
+ room => {
|
|
|
+ room['roomId'] = room['id'];
|
|
|
+ room['id'] = index;
|
|
|
+ room['projectItem'] = item;
|
|
|
+ room['projectItemTarget'] = target;
|
|
|
+ room['optionName'] = room['roomNumber'];
|
|
|
+ index++;
|
|
|
+ return room;
|
|
|
+ })
|
|
|
+ return target
|
|
|
+ })
|
|
|
+ return item;
|
|
|
+ })
|
|
|
+ return newArr;
|
|
|
+ },
|
|
|
+ returnChecked(data) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i]['roomId']) {
|
|
|
+ if (this.idsBox.filter(node => node == data[i]['roomId']).length > 0) {
|
|
|
+ this.checkKeys.push(data[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data[i].children) this.returnChecked(data[i].children);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setDocumentData(data) {
|
|
|
+ let signingDate = this.returnDate(data.signingDate),
|
|
|
+ houseItems = this.returnAddress(this.checkKeys),
|
|
|
+ startDate = this.returnDate(data.startDate),
|
|
|
+ endDate = this.returnDate(data.endDate);
|
|
|
+ this.contextData = {
|
|
|
+ contractId: data.id,
|
|
|
+ partya: data.organizationName,
|
|
|
+ partyb: data.merchantName || data.clientName,
|
|
|
+ signyear: signingDate.year,
|
|
|
+ signmonth: signingDate.month,
|
|
|
+ signday: signingDate.day,
|
|
|
+ address: houseItems.address,
|
|
|
+ area: houseItems.area,
|
|
|
+ startyear: startDate.year,
|
|
|
+ startmonth: startDate.month,
|
|
|
+ startday: startDate.day,
|
|
|
+ endyear: endDate.year,
|
|
|
+ endmonth: endDate.month,
|
|
|
+ endday: endDate.day,
|
|
|
+ price: data.clauseList[0].unitPrice,
|
|
|
+ deposit: data.clauseList[1].earnestMoney,
|
|
|
+ }
|
|
|
+ this.submit();
|
|
|
+ },
|
|
|
+ returnDate(date) {
|
|
|
+ let dateStr = date.split('-');
|
|
|
+ return {
|
|
|
+ year: dateStr[0],
|
|
|
+ month: dateStr[1],
|
|
|
+ day: dateStr[2]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ returnAddress(data) {
|
|
|
+ let address = [],
|
|
|
+ area = [];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ address.push(data[i].projectItemName + '-' + data[i].projectItemTargetName +
|
|
|
+ '-' + data[i].roomNumber);
|
|
|
+ area.push(data[i].area);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ address: address.join('、'),
|
|
|
+ area: area.join('、'),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ $http.insertDocumentData({
|
|
|
+ data: JSON.stringify({
|
|
|
+ context: this.contextData
|
|
|
+ }),
|
|
|
+ documentId: this.documentId,
|
|
|
+ userId: this.userId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|