|
@@ -1,411 +1,413 @@
|
|
|
-<template>
|
|
|
- <div class="flow-document hui-flex">
|
|
|
- <div class="hui-flex-box">
|
|
|
- <div id="html" class="html" ref="html" v-html="html" @click="selectClick"></div>
|
|
|
- </div>
|
|
|
- <div class="hui-dialog-submit">
|
|
|
- <el-button size="medium" @click="$emit('close')">取 消</el-button>
|
|
|
- <el-button size="medium" type="primary" @click="submit">保 存</el-button>
|
|
|
- </div>
|
|
|
- <el-dialog :close-on-click-modal="false" title="选择日期" :visible.sync="timeDialog" :append-to-body="true" width="500px">
|
|
|
- <div class="hui-flex">
|
|
|
- <div class="hui-flex-box">
|
|
|
- <date ref="dateTime"></date>
|
|
|
- </div>
|
|
|
- <div class="hui-dialog-submit">
|
|
|
- <el-button size="medium" type="primary" @click="selectSuccess('time')">确 定</el-button>
|
|
|
- <el-button size="medium" @click="timeDialog = false">取 消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog :close-on-click-modal="false" title="选择内容" :visible.sync="selectVisible" width="30%" :append-to-body="true">
|
|
|
- <div class="hui-flex">
|
|
|
- <div class="hui-flex-box">
|
|
|
- <el-radio-group v-model="selectVal">
|
|
|
- <div class="select-item" v-for="(value, name, index) in selectItem" :key="index">
|
|
|
- <el-radio :label="value">{{ value }}</el-radio>
|
|
|
- </div>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <div class="hui-dialog-submit">
|
|
|
- <el-button size="medium" @click="selectVisible = false">取 消</el-button>
|
|
|
- <el-button size="medium" type="primary" @click="selectSuccess('select')">确 定</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog :close-on-click-modal="false" title="选择公章" :visible.sync="dialogVisibles" width="600px" :append-to-body="true">
|
|
|
- <div class="hui-flex hui-dialog">
|
|
|
- <div class="hui-flex-box hui-dialog-content">
|
|
|
- <div class="no-tips" v-if="sealData.length == 0">暂未添加公章</div>
|
|
|
- <el-radio v-else v-model="sealVal" v-for="item in sealData" :key="item.id" :label="item.id" border
|
|
|
- style="margin: 10px;">
|
|
|
- {{ item.name }}
|
|
|
- </el-radio>
|
|
|
- </div>
|
|
|
- <div class="hui-dialog-submit">
|
|
|
- <el-button size="medium" @click="dialogVisibles = false">取 消</el-button>
|
|
|
- <el-button size="medium" type="primary" @click="selectSeal">确 定</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <el-upload ref="upload" :action="action" name="uploadFile" style="position: absolute;z-index: -1;opacity: 0;"
|
|
|
- :headers="headers" :on-success="successFile" :show-file-list="false">
|
|
|
- <el-button slot="trigger" size="small" type="primary" ref="imgUpload">上传文件</el-button>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- getDocumentById,
|
|
|
- getDocumentTemplateById,
|
|
|
- createDocument,
|
|
|
- insertDocumentData,
|
|
|
- getSealRegisterKey,
|
|
|
- getRetrievers,
|
|
|
- } from '@/httpApi/contract';
|
|
|
- import {
|
|
|
- getSealList,
|
|
|
- requestSeal,
|
|
|
- getSealDetailById,
|
|
|
- getRequestSealDetail
|
|
|
- } from '@/httpApi/organization';
|
|
|
- import $ from 'jquery';
|
|
|
- import {
|
|
|
- constData
|
|
|
- } from '@/uitls/index.js';
|
|
|
- import {
|
|
|
- createLogger
|
|
|
- } from 'vuex';
|
|
|
- // import verifyQr from '@/components/verifyQr';
|
|
|
- export default {
|
|
|
- props: ['documentId', 'templateId'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- html: '', //html
|
|
|
- changeSelect: [], //选择项
|
|
|
- timeDialog: false, //选择日期是否显示
|
|
|
- nowElem: '', //选择时点击的节点
|
|
|
- selectVisible: false, //选择内容是否显示
|
|
|
- selectVal: '', //选中的内容
|
|
|
- selectItem: {}, //选择的数据
|
|
|
- selectData: {}, //有极选项总数据
|
|
|
- contextData: {}, //有极拉取数据
|
|
|
- userInfo: {}, //登录人信息
|
|
|
- submitShow: false, //是否显示保存按钮
|
|
|
- hasData: false, //是否为编辑文档
|
|
|
- sealData: [], //印章数据
|
|
|
- sealDomId: '', //印章存放节点的id
|
|
|
- dialogVisibles: false, //是否选择印章
|
|
|
- sealVal: 1, //当前选择的印章
|
|
|
- initIndex: 1, //初始化文档
|
|
|
- organized: {
|
|
|
- executionRecordList: 10, //施工方意见
|
|
|
- supervisionRecordList: 4, //监理单位意见
|
|
|
- constructionRecordList: 3, //建设单位意见
|
|
|
- designRecordList: 2, //设计单位意见
|
|
|
- prospectedRecordList: 5, //勘察单位意见
|
|
|
- governmentRecordList: 6, //政府单位
|
|
|
- supervisorRecordList: 4 //监理(建设)单位验收记录(监理单位验收记录,表中)
|
|
|
- },
|
|
|
- platformType: '1',
|
|
|
- action: '',
|
|
|
- headers: {
|
|
|
- token: ''
|
|
|
- },
|
|
|
- copyImage: {}
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.userInfo = this.$store.getters.user;
|
|
|
- this.contextData = this.$store.getters.document;
|
|
|
- if (this.templateId) return this.initTemplate(this.templateId, [], []);
|
|
|
- if (this.documentId) this.initDocument();
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initTemplate(templateId, elementData, sealData) {
|
|
|
- getDocumentTemplateById(templateId).then(res => {
|
|
|
- if (res.state) {
|
|
|
- this.html = res.data.html;
|
|
|
- this.templateName = res.data.name;
|
|
|
- this.renderTamplate(elementData, sealData);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- initDocument() {
|
|
|
- getDocumentById(this.documentId).then(res => {
|
|
|
- if (res.state) {
|
|
|
- this.initTemplate(res.data.documentTemplateId, res.data.elementDataList, res.data
|
|
|
- .sealUsageList);
|
|
|
- this.documentSealRegister(res.data.id);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- successFile(data, file, type) {
|
|
|
- //上传头像成功
|
|
|
- let _self = this;
|
|
|
- if (data.state) {
|
|
|
- _self.copyImage.dom.innerHTML = '<img id="' + _self.copyImage.domId +
|
|
|
- '" class="copy-img copyImage" src="' + data
|
|
|
- .data.node.url + '"/>'
|
|
|
- }
|
|
|
- },
|
|
|
- documentSealRegister(documentId) {
|
|
|
- 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'
|
|
|
- ) +
|
|
|
- '"/>'
|
|
|
- );
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- renderTamplate(elementDataList, sealUsageList) {
|
|
|
- //整合模板
|
|
|
- this.$nextTick(() => {
|
|
|
- let documentElement = $('.documentElement');
|
|
|
- if (elementDataList.length > 0) this.renderDocument(elementDataList);
|
|
|
- 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 (sealUsageList) this.filterSeal(sealUsageList);
|
|
|
- //申请印章
|
|
|
- let _self = this;
|
|
|
- $('.sureSeal').click(function() {
|
|
|
- let _this = this;
|
|
|
- _self.sealDomId = $(_this).parent()[0].id;
|
|
|
- getSealList(_self.$store.getters.organization.id).then(res => {
|
|
|
- if (res.state) {
|
|
|
- _self.sealData = res.data;
|
|
|
- }
|
|
|
- })
|
|
|
- _self.dialogVisibles = true;
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- 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) => {
|
|
|
- getRequestSealDetail(item.requestId).then(node => {
|
|
|
- if (node.state) {
|
|
|
- let data = node.data;
|
|
|
- if (data.status == 1) {
|
|
|
- $('#' + data.keyWord).css('position',
|
|
|
- 'relative');
|
|
|
- getSealDetailById(data.sealId).then(item => {
|
|
|
- if (item.state) {
|
|
|
- $('#' + data.keyWord).html('<img id="' + data.keyWord +
|
|
|
- '" class="seal-img" src="' + item.data.fileNode
|
|
|
- .node.url + '"/>');
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- selectClick(event) {
|
|
|
- let _self = this;
|
|
|
- _self.nowElem = event.target; //当前点击的i标签
|
|
|
- switch (event.target.className) {
|
|
|
- case 'el-icon-arrow-down':
|
|
|
- _self.selectItem = _self.selectData[_self.nowElem.id];
|
|
|
- _self.selectVal = '';
|
|
|
- _self.selectVisible = true;
|
|
|
- break;
|
|
|
- case 'el-icon-date':
|
|
|
- _self.timeDialog = true;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- selectSuccess(type) {
|
|
|
- let _self = this;
|
|
|
- switch (type) {
|
|
|
- case 'time':
|
|
|
- _self.nowElem.parentNode.getElementsByClassName('documentElement')[0].innerHTML = _self.$refs
|
|
|
- .dateTime.getDate();
|
|
|
- _self.timeDialog = false;
|
|
|
- break;
|
|
|
- case 'select':
|
|
|
- _self.nowElem.parentNode.getElementsByClassName('documentElement')[0].innerHTML = _self.selectVal;
|
|
|
- _self.selectVisible = false;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- selectSeal() {
|
|
|
- //选择印章
|
|
|
- let _self = this;
|
|
|
- if (_self.sealDomId == '') return;
|
|
|
- let item = _self.sealData.filter(item => {
|
|
|
- return item.id == _self.sealVal;
|
|
|
- })[0];
|
|
|
- requestSeal({
|
|
|
- sealId: item.id,
|
|
|
- requestUserName: _self.userInfo.name,
|
|
|
- requestUserId: _self.userInfo.userId,
|
|
|
- documentId: _self.documentId,
|
|
|
- keyWord: _self.sealDomId,
|
|
|
- projectId: _self.$store.getters.project.id
|
|
|
- }).then(data => {
|
|
|
- if (data.state) {
|
|
|
- $('#' + _self.sealDomId).css('position', 'relative');
|
|
|
- $('#' + _self.sealDomId).html('<img id="' + _self.sealDomId +
|
|
|
- '" class="seal-img" src="' + item.fileNode.node.url + '"/>');
|
|
|
- let documentElement = $('.documentElement');
|
|
|
- let obj = constData(documentElement);
|
|
|
- insertDocumentData({
|
|
|
- data: JSON.stringify(obj),
|
|
|
- documentId: _self.documentId,
|
|
|
- userId: _self.$store.getters.user.userId
|
|
|
- }).then(res => {
|
|
|
- if (res.state) {
|
|
|
- _self.$message.success('申请成功');
|
|
|
- _self.dialogVisibles = false;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- submit() {
|
|
|
- let documentElement = $('.documentElement');
|
|
|
- let obj = constData(documentElement);
|
|
|
- if (this.documentId) this.updateDocument(obj);
|
|
|
- },
|
|
|
- updateDocument(obj) {
|
|
|
- insertDocumentData({
|
|
|
- data: JSON.stringify(obj),
|
|
|
- documentId: this.documentId,
|
|
|
- userId: this.$store.getters.user.userId
|
|
|
- }).then(res => {
|
|
|
- if (res.state) {
|
|
|
- this.$message.success('保存成功');
|
|
|
- this.$emit('close');
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- components: {}
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .flow-document {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background: #D9DEE6;
|
|
|
- }
|
|
|
-
|
|
|
- .html {
|
|
|
- margin: 0 auto;
|
|
|
- width: 900px;
|
|
|
- }
|
|
|
-
|
|
|
- .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: $--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;
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div class="flow-document hui-flex">
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div id="html" class="html" ref="html" v-html="html" @click="selectClick"></div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-dialog-submit">
|
|
|
+ <el-button size="medium" @click="$emit('close')">取 消</el-button>
|
|
|
+ <el-button size="medium" type="primary" @click="submit">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" title="选择日期" :visible.sync="timeDialog" :append-to-body="true"
|
|
|
+ width="500px">
|
|
|
+ <div class="hui-flex">
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <date ref="dateTime"></date>
|
|
|
+ </div>
|
|
|
+ <div class="hui-dialog-submit">
|
|
|
+ <el-button size="medium" type="primary" @click="selectSuccess('time')">确 定</el-button>
|
|
|
+ <el-button size="medium" @click="timeDialog = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :close-on-click-modal="false" title="选择内容" :visible.sync="selectVisible" width="30%"
|
|
|
+ :append-to-body="true">
|
|
|
+ <div class="hui-flex">
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <el-radio-group v-model="selectVal">
|
|
|
+ <div class="select-item" v-for="(value, name, index) in selectItem" :key="index">
|
|
|
+ <el-radio :label="value">{{ value }}</el-radio>
|
|
|
+ </div>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="hui-dialog-submit">
|
|
|
+ <el-button size="medium" @click="selectVisible = false">取 消</el-button>
|
|
|
+ <el-button size="medium" type="primary" @click="selectSuccess('select')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :close-on-click-modal="false" title="选择公章" :visible.sync="dialogVisibles" width="600px"
|
|
|
+ :append-to-body="true">
|
|
|
+ <div class="hui-flex hui-dialog">
|
|
|
+ <div class="hui-flex-box hui-dialog-content">
|
|
|
+ <div class="no-tips" v-if="sealData.length == 0">暂未添加公章</div>
|
|
|
+ <el-radio v-else v-model="sealVal" v-for="item in sealData" :key="item.id" :label="item.id" border
|
|
|
+ style="margin: 10px;">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-radio>
|
|
|
+ </div>
|
|
|
+ <div class="hui-dialog-submit">
|
|
|
+ <el-button size="medium" @click="dialogVisibles = false">取 消</el-button>
|
|
|
+ <el-button size="medium" type="primary" @click="selectSeal">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-upload ref="upload" :action="action" name="uploadFile" style="position: absolute;z-index: -1;opacity: 0;"
|
|
|
+ :headers="headers" :on-success="successFile" :show-file-list="false">
|
|
|
+ <el-button slot="trigger" size="small" type="primary" ref="imgUpload">上传文件</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getDocumentById,
|
|
|
+ getDocumentTemplateById,
|
|
|
+ createDocument,
|
|
|
+ insertDocumentData,
|
|
|
+ getSealRegisterKey,
|
|
|
+ getRetrievers,
|
|
|
+ } from '@/httpApi/contract';
|
|
|
+ import {
|
|
|
+ getSealList,
|
|
|
+ requestSeal,
|
|
|
+ getSealDetailById,
|
|
|
+ getRequestSealDetail
|
|
|
+ } from '@/httpApi/organization';
|
|
|
+ import $ from 'jquery';
|
|
|
+ import {
|
|
|
+ constData
|
|
|
+ } from '@/uitls/index.js';
|
|
|
+ import {
|
|
|
+ createLogger
|
|
|
+ } from 'vuex';
|
|
|
+ // import verifyQr from '@/components/verifyQr';
|
|
|
+ export default {
|
|
|
+ props: ['documentId', 'templateId'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ html: '', //html
|
|
|
+ changeSelect: [], //选择项
|
|
|
+ timeDialog: false, //选择日期是否显示
|
|
|
+ nowElem: '', //选择时点击的节点
|
|
|
+ selectVisible: false, //选择内容是否显示
|
|
|
+ selectVal: '', //选中的内容
|
|
|
+ selectItem: {}, //选择的数据
|
|
|
+ selectData: {}, //有极选项总数据
|
|
|
+ contextData: {}, //有极拉取数据
|
|
|
+ userInfo: {}, //登录人信息
|
|
|
+ submitShow: false, //是否显示保存按钮
|
|
|
+ hasData: false, //是否为编辑文档
|
|
|
+ sealData: [], //印章数据
|
|
|
+ sealDomId: '', //印章存放节点的id
|
|
|
+ dialogVisibles: false, //是否选择印章
|
|
|
+ sealVal: 1, //当前选择的印章
|
|
|
+ initIndex: 1, //初始化文档
|
|
|
+ organized: {
|
|
|
+ executionRecordList: 10, //施工方意见
|
|
|
+ supervisionRecordList: 4, //监理单位意见
|
|
|
+ constructionRecordList: 3, //建设单位意见
|
|
|
+ designRecordList: 2, //设计单位意见
|
|
|
+ prospectedRecordList: 5, //勘察单位意见
|
|
|
+ governmentRecordList: 6, //政府单位
|
|
|
+ supervisorRecordList: 4 //监理(建设)单位验收记录(监理单位验收记录,表中)
|
|
|
+ },
|
|
|
+ platformType: '1',
|
|
|
+ action: '',
|
|
|
+ headers: {
|
|
|
+ token: ''
|
|
|
+ },
|
|
|
+ copyImage: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.userInfo = this.$store.getters.user;
|
|
|
+ this.contextData = this.$store.getters.document;
|
|
|
+ if (this.templateId) return this.initTemplate(this.templateId, [], []);
|
|
|
+ if (this.documentId) this.initDocument();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initTemplate(templateId, elementData, sealData) {
|
|
|
+ getDocumentTemplateById(templateId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.html = res.data.html;
|
|
|
+ this.templateName = res.data.name;
|
|
|
+ this.renderTamplate(elementData, sealData);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initDocument() {
|
|
|
+ getDocumentById(this.documentId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.initTemplate(res.data.documentTemplateId, res.data.elementDataList, res.data
|
|
|
+ .sealUsageList);
|
|
|
+ this.documentSealRegister(res.data.id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ successFile(data, file, type) {
|
|
|
+ //上传头像成功
|
|
|
+ let _self = this;
|
|
|
+ if (data.state) {
|
|
|
+ _self.copyImage.dom.innerHTML = '<img id="' + _self.copyImage.domId +
|
|
|
+ '" class="copy-img copyImage" src="' + data
|
|
|
+ .data.node.url + '"/>'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ documentSealRegister(documentId) {
|
|
|
+ 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'
|
|
|
+ ) +
|
|
|
+ '"/>'
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ renderTamplate(elementDataList, sealUsageList) {
|
|
|
+ //整合模板
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let documentElement = $('.documentElement');
|
|
|
+ if (elementDataList.length > 0) this.renderDocument(elementDataList);
|
|
|
+ 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 (sealUsageList) this.filterSeal(sealUsageList);
|
|
|
+ //申请印章
|
|
|
+ let _self = this;
|
|
|
+ $('.sureSeal').click(function() {
|
|
|
+ let _this = this;
|
|
|
+ _self.sealDomId = $(_this).parent()[0].id;
|
|
|
+ getSealList(_self.$store.getters.organization.id).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ _self.sealData = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _self.dialogVisibles = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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) => {
|
|
|
+ getRequestSealDetail(item.requestId).then(node => {
|
|
|
+ if (node.state) {
|
|
|
+ let data = node.data;
|
|
|
+ if (data.status == 1) {
|
|
|
+ $('#' + data.keyWord).css('position',
|
|
|
+ 'relative');
|
|
|
+ getSealDetailById(data.sealId).then(item => {
|
|
|
+ if (item.state) {
|
|
|
+ $('#' + data.keyWord).html('<img id="' + data.keyWord +
|
|
|
+ '" class="seal-img" src="' + item.data.fileNode
|
|
|
+ .node.url + '"/>');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectClick(event) {
|
|
|
+ let _self = this;
|
|
|
+ _self.nowElem = event.target; //当前点击的i标签
|
|
|
+ switch (event.target.className) {
|
|
|
+ case 'el-icon-arrow-down':
|
|
|
+ _self.selectItem = _self.selectData[_self.nowElem.id];
|
|
|
+ _self.selectVal = '';
|
|
|
+ _self.selectVisible = true;
|
|
|
+ break;
|
|
|
+ case 'el-icon-date':
|
|
|
+ _self.timeDialog = true;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectSuccess(type) {
|
|
|
+ let _self = this;
|
|
|
+ switch (type) {
|
|
|
+ case 'time':
|
|
|
+ _self.nowElem.parentNode.getElementsByClassName('documentElement')[0].innerHTML = _self.$refs
|
|
|
+ .dateTime.getDate();
|
|
|
+ _self.timeDialog = false;
|
|
|
+ break;
|
|
|
+ case 'select':
|
|
|
+ _self.nowElem.parentNode.getElementsByClassName('documentElement')[0].innerHTML = _self.selectVal;
|
|
|
+ _self.selectVisible = false;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectSeal() {
|
|
|
+ //选择印章
|
|
|
+ let _self = this;
|
|
|
+ if (_self.sealDomId == '') return;
|
|
|
+ let item = _self.sealData.filter(item => {
|
|
|
+ return item.id == _self.sealVal;
|
|
|
+ })[0];
|
|
|
+ requestSeal({
|
|
|
+ sealId: item.id,
|
|
|
+ requestUserName: _self.userInfo.name,
|
|
|
+ requestUserId: _self.userInfo.userId,
|
|
|
+ documentId: _self.documentId,
|
|
|
+ keyWord: _self.sealDomId,
|
|
|
+ projectId: _self.$store.getters.project.id
|
|
|
+ }).then(data => {
|
|
|
+ if (data.state) {
|
|
|
+ $('#' + _self.sealDomId).css('position', 'relative');
|
|
|
+ $('#' + _self.sealDomId).html('<img id="' + _self.sealDomId +
|
|
|
+ '" class="seal-img" src="' + item.fileNode.node.url + '"/>');
|
|
|
+ let documentElement = $('.documentElement');
|
|
|
+ let obj = constData(documentElement);
|
|
|
+ insertDocumentData({
|
|
|
+ data: JSON.stringify(obj),
|
|
|
+ documentId: _self.documentId,
|
|
|
+ userId: _self.$store.getters.user.userId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ _self.$message.success('申请成功');
|
|
|
+ _self.dialogVisibles = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let documentElement = $('.documentElement');
|
|
|
+ let obj = constData(documentElement);
|
|
|
+ if (this.documentId) this.updateDocument(obj);
|
|
|
+ },
|
|
|
+ updateDocument(obj) {
|
|
|
+ insertDocumentData({
|
|
|
+ data: JSON.stringify(obj),
|
|
|
+ documentId: this.documentId,
|
|
|
+ userId: this.$store.getters.user.userId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ this.$emit('close');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {}
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .flow-document {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: #D9DEE6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .html {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 900px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: $--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;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|