进行元素拖拽：同类章替换、删除已盖章
1.复制对应元素，在onmousemove中left和top一直在变化
2.onmouseup时，计算出在pdf显示区域内的left，top，removeChild删除原先复制的元素，再appendChild到pdf显示区域的父元素中。再次移动onmousedown绑定对应事件
效果图
主要代码文件如下，重点在于_signPic内的坐标获取处理
<template><divclass="app-container"v-loading.fullscreen="listLoading"element-loading-text="加载中"><el-header class="headerBox flex"><div class="doc-title-list"><div class="active-doc">{{ activeDoc.signDocumentTitle }}</div></div><!-- 发起签署 --><div class="sign-btn"><el-button size="small" type="primary" @click="submitSign">确认签署</el-button></div></el-header><!-- 主题内容 --><div class="cont"><!-- 中间区域 --><div id="pageContent" class="viewerContainer"><!-- 左边区域 --><div class="left-area-container"><!-- 坐标签未预设位置，需要拖拽盖章 --><DragSealv-if="signType == 1":sealList="sealList"@drag="_signPic"/><!-- 关键字签0&&坐标签已预设位置2，无需拖拽盖章，只需选择印章 --><KeySeal v-else :sealList="sealList" @select="_select" /></div><div class="pdfContent_1PW2f"><div class="pdf-header"><div class="block"><span class="demonstration">{{ scale * 100 }}%</span><div class="slider"><!-- @change="handleChange" --><el-sliderv-model="scale":min="0.5":max="2":step="0.25"disabled></el-slider></div></div><div class="input"><span>Page:<inputtype="text"class="input-text"v-model="page_num"placeholder="1"/>/ {{ page_count }}</span><el-button @click="jump" type="text">跳转</el-button></div></div><divclass="pdf-container"ref="pdfBox"v-loading="!isShow"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.1)"><divclass="pdf-box":style="{width: maxPdfWidth + 'px',left: '',}"><divv-for="page in page_count":key="page"class="pdfPage_1yRne":style="{width: pdfInfo[page].pdfWidth + 'px',height: pdfInfo[page].pdfHeight + 'px',}"><canvas class="pdf-item" :id="'the-canvas' + page"></canvas><div class="dragLayer_3ccsq" :id="'can' + page"></div></div></div></div></div></div><!-- 右边区域 --><div class="right-area-container"><ShowSeal:sealList="sealList"@delete="deleteSign":selPosList="currentDocPosList":signType="signType"/></div></div><!-- 替换印章 --><ReplaceSealv-if="replaceVisible":dialogVisible="replaceVisible":sealList="sealList":sealId="selectSeal.sealId"@confirm="_confirmReplace"/></div>
</template><script>
import { selectSignInfoH5Sign, sign } from "@/api/sign";
const ReplaceSeal = () => import("./components/ReplaceSeal.vue");
import common from "./model/common";
import DragSeal from "./components/DragSeal.vue";
import KeySeal from "./components/KeySeal.vue";
import ShowSeal from "./components/ShowSeal.vue";
export default {name: "companySign",components: { DragSeal, KeySeal, ShowSeal, ReplaceSeal },data() {return {isShow: false,listLoading: false,currentDocPosList: [],docPosList: {}, //每个文档的印章坐标userData: {},activeDoc: {},AuthDialogVisible: false, // 认证弹窗控制器certInfo: {},verifyInfoList: [], //认证列表signType: 0, //1坐标签未预设位置，0关键字签，2坐标签已预设位置signPosJson: [], //印章回显坐标信息replaceVisible: false,selectSeal: {sealType: "",domId: "",sealId: "",},signerInfo: {}, //签署人信息pdfInfo: {0: {pdfHeight: 0,pdfWidth: 0,},},};},mixins: [common],methods: {// 计算已添加印章项handlePos() {this.sealList = this.sealList.map((item) => {return { ...item, num: 0 };});this.currentDocPosList.map((item) => {for (let i = 0; i < this.sealList.length; i++) {const element = this.sealList[i];if (element.code == item.code) {this.sealList[i].num += 1;}}});},// 检查是否加盖可用印章（除时间章）checkSealDate() {let checkRes = true;// 查找是否有加盖印章（只存在时间章的不可以）const hasSeal = this.currentDocPosList.find((item) => {return item.isSealDate == 0;});checkRes = hasSeal ? true : false;if (!checkRes) {this.$message.error("未加盖印章，请先拖拽盖章！");}return checkRes;},// 删除全部印章delAllSeal() {const sealPosList = [...this.currentDocPosList];for (let i = 0; i < sealPosList.length; i++) {const element = sealPosList[i];this.deleteSign(element);}},// 认证成功并提交async _submitSign() {this._cancelAuth();this.listLoading = true;let sealPosList = [];if (this.signType == 0) {// 关键字签无需传坐标sealPosList = this.currentDocPosList.map((item) => {return {sealId: item.code,};});} else {//坐标签需传坐标const docSeal = this.currentDocPosList.find((item) => {return item.isSealDate == 0;});sealPosList = this.currentDocPosList.map((item) => {const sealId = item.isSealDate == 1 ? docSeal.sealId : item.sealId;return {sealId,x: item.posX,y: item.posY,pageNo: item.posPage,isSealDate: item.isSealDate,};});}const formData = {signBatchId: this.userData.signBatchId,userType: 1,userId: this.userData.userId,companyId: this.userData.companyId,signDocumentId: this.userData.signDocumentId,sealPosList,verifyType: "",signPdfUrl: this.activeDoc.signCurrentUrl,};console.log(formData, 789789);if (this.handleCurrentSigner()) {const { data: res } = await sign(formData);console.log(res, 2525);if (res.code == 0) {this.listLoading = false;this.$message.success(res.msg);this.$router.push({path: "/Previewpdf",query: {signBatchId: this.userData.signBatchId,signDocumentId: this.userData.signDocumentId,},});} else {this.listLoading = false;this.$message.warning(res.msg);if (res.msg == "该文档已被另一方签署，请刷新页面后重试") {// 重新获取文档信息this.selectSignInfo("reload");}}} else {this.listLoading = false;}},// 删除印章deleteSign(seal) {let pic = document.querySelector("#" + seal.domId);pic.parentNode.removeChild(pic);let index = this.currentDocPosList.findIndex((i) => {return i.domId == seal.domId;});if (index > -1) {//大于0 代表存在，this.currentDocPosList.splice(index, 1); //存在就删除this.handlePos();}},// 印象回显处理_select(value) {console.log(value, 3636);if (this.currentDocPosList.length > 0) {this.delAllSeal();}this.handlePos();const sealList = this.signPosJson.map((item, index) => {return {...value[0],domId: "dom-" + value[0].code + index,posPage: item.pageNo || item.posPage,posX: item.centerX || item.posX,posY: item.centerY || item.posY,};});let _sealList = [];if (this.signType == 0) {// 关键字签署类型switch (this.signerInfo.keywordSignType) {case 0: //首个_sealList = [sealList[0]];break;case 1: //倒数第一个_sealList = [sealList[sealList.length - 1]];break;case 2: //全部_sealList = sealList;break;}} else {_sealList = sealList;}this.currentDocPosList = [..._sealList];this.showBackSeal();this.handlePos();},//印章回显showBackSeal() {for (let i = 0; i < this.currentDocPosList.length; i++) {const element = this.currentDocPosList[i];console.log(element, 45454);const _box = document.getElementById(element.domId);// 如果已存在就不用添加了if (_box) break;const dom = document.createElement("div");dom.className = `sign-img back-seal drag-img`;dom.id = element.domId;dom.style.width = this.scale * element.seal_W + "px";dom.style.height = this.scale * element.seal_H + "px";dom.style["line-height"] = this.scale * 50 + "px";const wh = (this.scale * element.seal_W) / 2;dom.style.left = Number(element.posX) * this.scale - wh + "px";dom.style.bottom = Number(element.posY) * this.scale - wh + "px";dom.style["background-image"] = `url(${element.sealImg})`;dom.title = element.sealTypeName;dom.style["background-repeat"] = `no-repeat`;dom.style["background-size"] = `contain`;// 坐标签已预设位置的，印章回显后可进行印章替换操作if (this.signType == 2) {dom.onclick = this.changeBg;}dom.style.cursor = "pointer";document.querySelector("#can" + element.posPage).appendChild(dom);}},// 打开替换弹窗changeBg(e) {const _id = e.currentTarget.id;const isDom = this.currentDocPosList.find((item) => {return item.domId == _id;});this.selectSeal = {sealType: isDom.sealType,domId: isDom.domId,sealId: isDom.sealId,};this.replaceVisible = true;},// 印章替换处理_confirmReplace(visible, value) {this.replaceVisible = false;// 替换印章if (visible) {const dom = document.getElementById(this.selectSeal.domId);dom.style.backgroundImage = "url(" + value.sealImg + ")";const signedPicList = this.currentDocPosList.map((item) => {const isDom = item.domId == this.selectSeal.domId;let query = {...item,};if (isDom) {query = { ...item, ...value, domId: this.selectSeal.domId };}return query;});this.currentDocPosList = [...signedPicList];}},_getPageIndex(y, dom) {let maxH = 0;let index = 1;let pdfHeight = 0;let _y = y || 0;let pdfWidth = 0;let margin = 0;let _space = 0;let pdfH = [];for (const key in this.pdfInfo) {if (_y < 0) {break;}const element = this.pdfInfo[key];pdfH.push(element.pdfHeight);if (element.index > 1) {// 外边距为10margin = (element.index - 1) * 10;}// 高度累计const _maxH = pdfH.reduce((last, i) => {return last + i;}, 0);maxH = _maxH + margin;// 当前页pdfWidth = element.pdfWidth;index = element.index;// 判断是处于空白区域（外边距）top为负数if (y > maxH && y < _space && element.index > 1) {_y = maxH - y + margin;break;}if (y < maxH) {if (element.index > 1) {_y = maxH - y - element.pdfHeight;}pdfHeight = element.pdfHeight - Math.abs(_y);break;}_space = maxH + margin;}return {index,top: Math.abs(_y),bottom: pdfHeight - dom.clientHeight,pdfWidth,};},// ed.clientX：鼠标焦点距离浏览器右侧的距离// dom.clientWidth / 2：印章图片宽度的一半// isMove：是否是再次移动的_getPageNum(ed, dom, isMove) {let isOver = true;const _clientWidth = parseInt(dom.clientWidth / 2);const _clientHeight = parseInt(dom.clientHeight / 2);const _left = ed.clientX - _clientWidth;const _top = ed.clientY - _clientHeight;// pdf展示区域距离左侧的距离+横向滚动条const _pdfBox = document.querySelector(".pdf-box");// 拿到左边坐标const _xLeft = _left + this.$refs.pdfBox.scrollLeft - _pdfBox.offsetLeft;const _yTop = _top + this.$refs.pdfBox.scrollTop - _pdfBox.offsetTop;const _index = this._getPageIndex(_yTop, dom);const _xRight = _index.pdfWidth - _xLeft - parseInt(dom.clientWidth);if (_xLeft >= 0 &&_index.bottom >= 0 &&_index.top >= 0 &&_xRight >= 0) {isOver = true;} else {isOver = false;}// 判断再次移动的时候是否出界if (isMove) {const _clientHeight = document.querySelector("#can" + _index.index).clientHeight;const _distance = _clientHeight - dom.clientHeight - _index.bottom;isOver = _distance > 0 ? isOver && true : false;}return {isOver,top: _index.top,left: _xLeft,index: _index.index,bottom: _index.bottom,posX: (_xLeft + _clientWidth) / this.scale,posY: (_index.bottom + _clientHeight) / this.scale,};},// 坐标签拖拽处理_signPic(e, seal) {let checkRes = true;// 判断是否已加盖印章if (seal.sealType == "DATE_SEAL") {checkRes = this.checkSealDate();}if (!checkRes) return;// 印章的唯一标识const timerCount = new Date().getTime() + "";this.count++;let dom = document.createElement("div");dom.style.left = 0 + "px";dom.style.top = e.clientY + 1.5 * dom.clientHeight + "px";if (seal.sealType == "DATE_SEAL") {dom.style.height = this.scale * 16 + "px";dom.style.width = this.scale * 105 + "px";const getNowFormatDate = this.getNowFormatDate();dom.innerHTML = `<div class="delete" @click.stop="deleteIt">删除</div><span style="font-weight:bolder">${getNowFormatDate}</span>`;} else {dom.style.width = this.scale * seal.seal_W + "px";dom.style.height = this.scale * seal.seal_H + "px";dom.style["background-image"] = `url(${seal.sealImg})`;dom.innerHTML = `<div class="delete" @click.stop="deleteIt">删除</div>`;}dom.className = `sign-img drag-img`;const signDocumentId = this.activeDoc.signDocumentId.slice(this.activeDoc.signDocumentId.length - 6,this.activeDoc.signDocumentId.length);const domId = seal.sealType + signDocumentId + timerCount;dom.id = domId;document.querySelector("#pageContent").appendChild(dom);document.onmousemove = (e) => {dom.style.left = e.clientX - parseInt(dom.clientWidth / 2) + "px";dom.style.top = e.clientY - parseInt(dom.clientHeight / 2) + "px";};// 鼠标抬开document.onmouseup = (e) => {// 判断是否越界，未越界测返回坐标const _dom = this._getPageNum(e, dom);document.querySelector("#pageContent").removeChild(dom);if (!_dom.isOver) {document.onmousemove = null;document.onmouseup = null;this.$message.error("请将印章拖拽到合同区域");return;} else {dom.style.left = _dom.left + "px";dom.style.top = _dom.top + "px";document.querySelector("#can" + _dom.index).appendChild(dom);let docId = this.activeDoc.signDocumentId;// 若为加盖时间印章，则该时间印章的sealId、sealType拿可用印章第一个印章let selectSeal = this.sealList[0];let sealId =seal.sealType == "DATE_SEAL" ? selectSeal.sealId : seal.sealId;let sealType =seal.sealType == "DATE_SEAL" ? selectSeal.sealType : seal.sealType;let pos = {domId: domId,left: _dom.left * this.scale,top: _dom.top * this.scale,posX: _dom.posX,posY: _dom.posY,posPage: _dom.index,signDocumentId: docId,...seal,sealId,sealType,};this.currentDocPosList.push(pos);this.handlePos();}document.onmousemove = null;document.onmouseup = null;dom.onmouseenter = this.mouseenter;dom.onmouseleave = this.mouseleave;dom.onmousedown = this.moveTo;dom.childNodes[0].onclick = this.deleteIt;};},moveTo(e) {let odiv = e.currentTarget; //获取目标元素const _domId = this.currentDocPosList.find((item) => {return item.domId == odiv.id;});let dragDom = "";document.onmousemove = (e) => {dragDom = this._getPageNum(e, odiv, true);odiv.style.left = dragDom.left + "px";odiv.style.top = dragDom.top + "px";};document.onmouseup = (e) => {document.onmousemove = null;document.onmouseup = null;if (dragDom && !dragDom.isOver) {odiv.style.left = _domId.left / this.scale + "px";odiv.style.top = _domId.top / this.scale + "px";this.$message.error("请将印章拖拽到合同区域");return;} else {const _index = this.currentDocPosList.findIndex((item) => {return item.domId == odiv.id;});this.currentDocPosList[_index].left = dragDom.left * this.scale;this.currentDocPosList[_index].top = dragDom.top * this.scale;this.currentDocPosList[_index].posX = dragDom.posX;this.currentDocPosList[_index].posY = dragDom.posY;}};},// 查询详情async selectSignInfo(code) {this.listLoading = true;const query = {signBatchId: this.userData.signBatchId,};const { data: res } = await selectSignInfoH5Sign(query);if (res.code == 0) {const document = res.data.documentList.filter((item) => {return item.signDocumentId == this.userData.signDocumentId;})[0];this._getFileSteam(document.signCurrentUrl);}this.listLoading = false;},},computed: {currentCompanyId() {return this.$store.state.currentCompanyId;},},created() {const query = this.$route.query;this._getAnalysisCode(query.code);},mounted() {this.$nextTick(function () {this.$refs.pdfBox.addEventListener("scroll", this.handleScroll, false);});},
};
</script>
<style lang="scss">
.back-seal {position: absolute;cursor: move;z-index: 7;// overflow: hidden;
}
.delete {width: 100%;position: absolute;bottom: -20px;text-align: center;color: #fff;font-size: 16px;background-color: rgba(236, 49, 49, 0.7);cursor: pointer;display: none;
}
.nameBox {margin-top: 10px;width: 100%;font-size: 14px;text-align: center;color: #333;
}
.sign-img {position: absolute;cursor: move;z-index: 7;// overflow: hidden;background-repeat: no-repeat;background-size: contain;background-position: 100%;
}
</style><style lang="scss">
.headerBox {// position: fixed;// top: 0;width: 100%;background: #fff;z-index: 999;.doc-title-list {display: flex;justify-content: center;align-items: center;width: 100%;height: 60px;.active-doc {border: none;color: #444;font-size: 22px;}}.page-title {margin-left: 15px;}.sign-btn {position: absolute;top: 12px;right: 20px;}
}
.cont {margin-top: 20px;display: flex;.item {margin: 0 0 25px 0;}
}
.left-area-container,
.right-area-container {// width: 340px;width: 20%;overflow: auto;font-size: 14px;background: #fff;
}
.sign-title {height: 55px;line-height: 55px;background: #0091ff;border-radius: 5px;color: #fff;margin-bottom: 5px;font-size: 16px;
}
.sign-parties {padding: 0 5px;
}.instructBox {text-align: left;color: #999;line-height: 22px;p {margin-top: 5px;}
}
.signed-sum li {text-align: left;cursor: auto;
}
.signed-sum-number {font-size: 16px;color: #0096ff;
}
.right-area-container .sign-title {li {width: 33.33%;}
}
.right-area-container .pages {ul {background: #fff;border-radius: 5px;margin-bottom: 5px;li {width: 33.33%;margin: 0;}}
}.delete {width: 100%;position: absolute;bottom: -20px;text-align: center;color: #fff;font-size: 16px;background-color: rgba(236, 49, 49, 0.7);cursor: pointer;display: none;
}
.nameBox {margin-top: 10px;width: 100%;font-size: 14px;text-align: center;color: #333;
}.viewerContainer {display: flex;height: 91vh;width: 80%;overflow: auto;user-select: none;/*firefox浏览器*/-moz-user-select: none;/*safari、chrome浏览器*/-webkit-user-select: none; /*Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用*/.input {border: none;outline: none;width: 100%;}
}.pdfContent_1PW2f {width: 700px;flex: 1;display: flex;flex-direction: column;height: 100%;overflow: auto;// background: #f5f5f5;.pdf-header {/*position: fixed;*/top: 55px;left: 240px;right: 240px;height: 40px;border-bottom: 1px solid #eee;background-color: #fff;z-index: 100;text-align: center;display: flex;.block {flex: 1;display: flex;.demonstration,.slider {flex: 0 0 150px;line-height: 40px;width: 150px;text-align: right;}.demonstration {flex: 1;margin-right: 20px;}}.input {flex: 1;text-align: left;line-height: 40px;margin-left: 20px;.input-text {border: none;outline: none;border-bottom: 1px solid #e4e7ed;margin-left: 10px;width: 25px;text-align: center;}}}.pdf-container {display: inline-block;overflow: auto;height: 100%;width: 100%;.pdf-box {position: relative;margin: 0 auto;.sign-img {z-index: 4;}}}.pdfPage_1yRne {/*transition: left .3s;*/position: relative;margin: 10px 0;}.dragLayer_3ccsq {position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
}
.signed-list {padding: 0 15px;display: flex;justify-content: space-between;align-items: center;span {flex: 1;}
}
.signed-item {margin: 10px 0;border: 1px dashed rgba(0, 0, 0, 0.3);
}
</style>组件代码DragSeal：
<template><div><div class="sign-fields item"><div class="sign-title">请选择印章类型</div><div class="sign-list"><div class="seal-box-wrap"><divv-for="seal in sealList":key="seal.code"v-bind:id="seal.code"@mousedown="_dragSeal($event, seal)"><template v-if="seal.isSealDate == 0"><divclass="seal-img":style="{height: 130 + 'px',width: 130 + 'px',backgroundImage: 'url(' + seal.sealImg + ')',}"></div></template><divv-elseclass="seal-date":style="{height: 130 + 'px',width: 130 + 'px',lineHeight: 130 + 'px',}">{{ getNowFormatDate() }}</div></div></div></div></div><div class="sign-fields item instructBox"><div><div>设置签章位置说明</div><p>1、告知签署方需要在文件具体哪一处进行加盖电子印章</p></div><div>操作指示：鼠标选中上方签约方信息，鼠标左键单击选择印章/时间戳，查找正文内容盖章位置单击左键</div></div></div>
</template>
<script>
export default {props: {sealList: {type: Array,default: () => {return [];},},},components: {},data() {return {};},methods: {_dragSeal(e, seal) {this.$emit("drag", e, seal);},getNowFormatDate() {let date = new Date(),year = date.getFullYear(), //获取完整的年份(4位)month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)strDate = date.getDate(); // 获取当前日(1-31)if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0return `${year} 年 ${month} 月 ${strDate} 日`;},},mounted() {},
};
</script>
<style lang='scss'>
.sign-fields .sign-list {padding: 0 20px;
}
.seal-box-wrap {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;.seal-box {width: 100%;border-radius: 5px;padding: 10px;margin-top: 15px;background-color: #fff;}.seal-img {background-size: contain;background-repeat: no-repeat;background-position: 100%;border: 1px solid rgb(225, 225, 226);margin: 8px 0;}.seal-date {text-align: center;font-weight: bolder;border: 1px solid rgb(225, 225, 226);}
}
</style>
组件代码KeySeal：
<template><div class="sign-fields item"><div class="sign-title">请选择印章类型</div><div class="sign-list-vertical"><el-radio-group v-model="selectSeal" @input="_selectSeal"><el-radiov-for="seal in showList":key="seal.code"v-bind:id="seal.code"v-model="seal.code":label="seal.code"border><template v-if="seal.sealType != 'DATE_SEAL'"><span class="seal-name">{{ seal.sealTypeName }}</span><divclass="seal-img":style="{height: 100 + 'px',width: 100 + 'px',backgroundImage: 'url(' + seal.sealImg + ')',}"></div></template></el-radio></el-radio-group></div></div>
</template>
<script>
export default {props: {sealList: {type: Array,default: () => {return [];},},},components: {},data() {return {selectSeal: "",showList: [],};},watch: {sealList: {handler(newVal, oldVal) {this.showList = newVal.filter((item) => {return item.isSealDate == 0;});},immediate: true,deep: true,},},methods: {_selectSeal(value) {const _seal = this.sealList.filter((item) => {return item.code == value;}).map((item) => {return {...item,posX: 0,posY: 0,posPage: 0,};});this.$emit("select", _seal);},getNowFormatDate() {let date = new Date(),year = date.getFullYear(), //获取完整的年份(4位)month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)strDate = date.getDate(); // 获取当前日(1-31)if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0return `${year} 年 ${month} 月 ${strDate} 日`;},},mounted() {},
};
</script>
<style lang='scss'>
.sign-list-vertical {display: flex;flex-direction: column;justify-content: flex-start;margin-top: 10px;.seal-item {margin-bottom: 15px;}.el-radio.is-bordered {width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;padding: 10px;}.el-radio__label {display: flex;justify-content: space-around;align-items: center;}
}
.seal-name {margin-right: 15px;
}
.seal-img {background-size: contain;background-repeat: no-repeat;background-position: 100%;
}
.el-radio.is-bordered + .el-radio.is-bordered {margin-left: 0;
}
</style>
组件代码ReplaceSeal：
<template><BaseDialogv-if="dialogVisible":dialogVisible="dialogVisible"title="替换印章"@closeDialog="_closeDialog"@confirmDialog="_confirmSeal"><span>选择印章：</span><el-selectv-model="changeSeal"placeholder="请选择"style="width: 80%"value-key="sealId"><el-optionv-for="item in showList":key="item.sealId":label="item.sealTypeName":value="item":disabled="item.sealId == sealId"><span style="float: left">{{ item.sealTypeName }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{item.sealId == sealId ? "当前印章" : ""}}</span></el-option></el-select></BaseDialog>
</template>
<script>
const BaseDialog = () => import("@/components/BaseDialog.vue");
export default {props: {dialogVisible: {type: Boolean,default: false,},sealList: {type: Array,default: () => {return [];},},sealId: {type: String,default: "",},},components: { BaseDialog },data() {return {changeSeal: "",showList: [],};},watch: {sealList: {handler(newVal, oldVal) {this.showList = newVal.filter((item) => {return item.isSealDate == 0;});},immediate: true,deep: true,},},methods: {_closeDialog() {this.$emit("confirm", false);},_confirmSeal() {if (!this.changeSeal) {this.$message.warning("请先选择印章！");return;}this.$emit("confirm", true, this.changeSeal);},},mounted() {},
};
</script>
<style lang='scss' scoped></style>
组件代码ShowSeal：
<template><div><div class="sign-parties item"><div class="sign-title">已{{ signType == 1 ? "添加" : "选" }}印章项</div><div class="sign-list"><div v-for="seal in sealList" :key="seal.code" class="show-seal"><template v-if="seal.num > 0"><span> {{ seal.sealTypeName }} </span><span class="primaryText"> {{ seal.num }} </span>项</template></div></div></div><div class="sign-fields item"><div class="sign-title signed-list"><span>签章类型</span><span>页码</span><span>操作</span></div><div class="sign-list pages"><divclass="signed-list signed-item"v-for="a in selPosList":key="a.domId":title="a.sealTypeName"><span><span> {{ a.sealTypeName }}</span><span v-if="a.code == 'date'">-盖章时间</span></span><span> 第{{ a.posPage }}页 </span><spanv-if="signType == 1"class="el-icon-delete"@click="deleteSign(a)"></span><span v-else></span></div></div></div></div>
</template>
<script>
export default {props: {sealList: {type: Array,default: () => {return [];},},selPosList: {type: Array,default: () => {return [];},},signType: {type: Number,default: 1,},},components: {},data() {return {};},methods: {deleteSign(a) {this.$emit("delete", a);},},mounted() {},
};
</script>
<style lang='scss' scoped>
.sign-list {max-height: 580px;overflow-y: auto;.show-seal {padding-left: 10px;text-align: left;margin-bottom: 5px;font-size: 16px;}
}
</style>
