|
|
@@ -3,7 +3,6 @@
|
|
|
<basic-container class="editElement">
|
|
|
<div class="flex" style="position:fixed;left:30px;top:0;">
|
|
|
<h2 class="mg-r-10">编辑元素</h2>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="header" style="padding-bottom:20px;">
|
|
|
提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置 红色：代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
|
|
|
@@ -19,44 +18,39 @@
|
|
|
<div style="text-align: right;">
|
|
|
<el-button @click="toBack">返回上一级</el-button>
|
|
|
<el-button type="warning" @click="adjustExcel">进入表单调整</el-button>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
<div>
|
|
|
- <div class="martop20" style="font-weight: bold;font-size: 18px;">
|
|
|
- <i class="el-icon-edit" style="color: #52B200;"></i>
|
|
|
- 替换操作栏
|
|
|
+ <div class="martop20" style="font-weight: bold;font-size: 18px;">
|
|
|
+ <i class="el-icon-edit" style="color: #52B200;"></i>
|
|
|
+ 替换操作栏
|
|
|
</div>
|
|
|
<div class="martop20">
|
|
|
<div style="font-weight: bold;">选中的元素</div>
|
|
|
<div class="check_box">
|
|
|
- <span v-for="(item,index) in checkList" :key="index" style="margin-right: 4px;">{{ item.name }}</span>
|
|
|
+ <span v-for="(item, index) in checkList" :key="index" style="margin-right: 4px;">{{ item.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="tihuan" style="font-weight: bold;">替换为：
|
|
|
+ <div class="tihuan" style="font-weight: bold;">替换为：
|
|
|
<span style="color: orange;">选择下方“未进行匹配的元素字段”可快速选择元素</span>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
- <el-select style="width:100%;" v-model="value" filterable placeholder="输入元素名称搜索">
|
|
|
+ <el-select style="width:100%;" v-model="value" filterable placeholder="输入元素名称搜索">
|
|
|
<el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
- <div class="martop20 save-btn">
|
|
|
- <el-button type="primary" :disabled="tag"
|
|
|
- @click="saveReplace()">保存</el-button>
|
|
|
- </div>
|
|
|
- <div class="martop20" style="font-weight: bold;font-size: 18px;">
|
|
|
- <i class="el-icon-s-order" style="color: #E3B8E1;"></i>
|
|
|
- 未匹配元素快速选择栏
|
|
|
+ <div class="martop20 save-btn">
|
|
|
+ <el-button type="primary" :disabled="tag" @click="saveReplace()">保存</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="martop20" style="font-weight: bold;font-size: 18px;">
|
|
|
+ <i class="el-icon-s-order" style="color: #E3B8E1;"></i>
|
|
|
+ 未匹配元素快速选择栏
|
|
|
</div>
|
|
|
<div class=" replace_box" v-if="true">
|
|
|
<div style="width: 100%;height: 100%;overflow-y: auto;">
|
|
|
<el-row class="mb-4 ">
|
|
|
<div style="width: 100%;">
|
|
|
- <el-button type="warning" plain v-for="(item,index) in unMatchItems" @click="unMatchClick(item)" :key="index"
|
|
|
- style="margin-bottom: 10px ;" size="small">{{ item.eName }}</el-button>
|
|
|
+ <el-button type="warning" plain v-for="(item, index) in unMatchItems" @click="unMatchClick(item)"
|
|
|
+ :key="index" style="margin-bottom: 10px ;" size="small">{{ item.eName }}</el-button>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -65,19 +59,15 @@
|
|
|
<div>
|
|
|
<i class="el-icon-warning"></i>操作提示
|
|
|
<ul>
|
|
|
- <li style="margin-bottom: 8px;">选中表单上的元素，选择替换的元素后，点击【保存】即可完成元素替换。</li>
|
|
|
- <li style="margin-bottom: 8px;">点击“未匹配元素”可快速选择目标元素。</li>
|
|
|
+ <li style="margin-bottom: 8px;">选中表单上的元素，选择替换的元素后，点击【保存】即可完成元素替换。</li>
|
|
|
+ <li style="margin-bottom: 8px;">点击“未匹配元素”可快速选择目标元素。</li>
|
|
|
<li>元素、电签、默认值配置完成后，请保存表单配置方案用于快速替换。</li>
|
|
|
-
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
|
|
|
<el-dialog append-to-body :show-close="false" width="360px" :modal='false' class="cascader-dialog" top="0"
|
|
|
:visible.sync="cascaderPanel" :style="{ position: 'absolute', top: top + 'px', left: left + 'px' }">
|
|
|
@@ -85,8 +75,8 @@
|
|
|
ref="cascader"></el-cascader-panel>
|
|
|
</el-dialog>
|
|
|
|
|
|
- <el-dialog title="添加新元素字段" :visible="AddNewElementField == '新增元素'" width="60%" :before-close="handleClose" :close-on-click-modal="false"
|
|
|
- :modal-append-to-body="false" style="z-index: 999999;">
|
|
|
+ <el-dialog title="添加新元素字段" :visible="AddNewElementField == '新增元素'" width="60%" :before-close="handleClose"
|
|
|
+ :close-on-click-modal="false" :modal-append-to-body="false" style="z-index: 999999;">
|
|
|
<div>
|
|
|
<i @click="addyuansu" class="el-icon-circle-plus marbottom10"
|
|
|
style="color:red; font-size:24px; float: right;cursor: pointer;"></i>
|
|
|
@@ -104,6 +94,11 @@
|
|
|
</el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column align="center" prop="assist" label="是否公式辅助元素" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.assist"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
<el-table-column prop="date" align="center" width="120" label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
@@ -115,8 +110,8 @@
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="handleClose()">取 消</el-button>
|
|
|
<el-button type="primary" v-throttle='2000' :disabled="tableData.length === 0"
|
|
|
- @click="pushNewElementField()">确
|
|
|
- 定</el-button>
|
|
|
+ @click="pushNewElementField()">确定
|
|
|
+ </el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -347,8 +342,7 @@ export default {
|
|
|
}, 3000)
|
|
|
|
|
|
let curTdEle = this.getTd(event.target);
|
|
|
- console.log(curTdEle,'curTdEle');
|
|
|
-
|
|
|
+ // console.log(curTdEle, 'curTdEle');
|
|
|
if (this.isMultiple) {
|
|
|
//是否已经存在了
|
|
|
for (let i = 0; i < this.eleData.length; i++) {
|
|
|
@@ -386,8 +380,6 @@ export default {
|
|
|
pickers[i].parentNode.parentNode.parentNode.style.display = 'none'
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
LeftClick(tr, td, x1, x2, y1, y2) {
|
|
|
console.log('点击左');
|
|
|
@@ -654,7 +646,6 @@ export default {
|
|
|
this.checkList = []
|
|
|
this.options = []
|
|
|
localStorage.setItem('editElement', res.data)
|
|
|
-
|
|
|
this.getElementInfoByTabId()
|
|
|
this.copss()
|
|
|
this.getUnMatchFieldData()
|
|
|
@@ -671,7 +662,7 @@ export default {
|
|
|
this.AddNewElementField = ''
|
|
|
},
|
|
|
addyuansu() {//新增元素
|
|
|
- this.tableData.unshift({ eName: '', eType: '' })
|
|
|
+ this.tableData.unshift({ eName: '', eType: '', assist: 0 })
|
|
|
},
|
|
|
deleteziduan(key) {//删除新增元素弹框字段
|
|
|
this.tableData.splice(key, 1)
|
|
|
@@ -711,7 +702,7 @@ export default {
|
|
|
|
|
|
//更新下拉列表s
|
|
|
this.getElementInfoByTabId()
|
|
|
- this.getUnMatchFieldData()
|
|
|
+ this.getUnMatchFieldData()
|
|
|
}
|
|
|
},
|
|
|
//#endregion
|
|
|
@@ -809,9 +800,9 @@ export default {
|
|
|
let isNameEmpty = false;
|
|
|
const { metaKey, ctrlKey } = e
|
|
|
let target = e.target;
|
|
|
-
|
|
|
+
|
|
|
let bgs = document.querySelectorAll("#parent .oldlace-bg")
|
|
|
-
|
|
|
+
|
|
|
for (let i = 0; i < bgs.length; i++) {
|
|
|
bgs[i].classList.remove("oldlace-bg");
|
|
|
}
|
|
|
@@ -821,49 +812,45 @@ export default {
|
|
|
if (tdEle) {
|
|
|
let mydiv = tdEle.getElementsByTagName('div')
|
|
|
target1 = mydiv[0]
|
|
|
- if(target1.classList.contains('warnstyle')){
|
|
|
-
|
|
|
+ if (target1.classList.contains('warnstyle')) {
|
|
|
+
|
|
|
isNameEmpty = true
|
|
|
|
|
|
-
|
|
|
- }else{
|
|
|
+
|
|
|
+ } else {
|
|
|
isNameEmpty = false
|
|
|
}
|
|
|
} else {
|
|
|
tdEle = target
|
|
|
let mydiv = tdEle.getElementsByTagName('div')
|
|
|
target = mydiv[0]
|
|
|
- isNameEmpty = false
|
|
|
+ isNameEmpty = false
|
|
|
}
|
|
|
|
|
|
let curTdEle = this.getTd(target);
|
|
|
-
|
|
|
-
|
|
|
|
|
|
if (target.getAttribute('trindex') !== null && target.getAttribute('tdindex') || target1.getAttribute('trindex') !== null && target1.getAttribute('tdindex')) {
|
|
|
let tdEle = this.getParentTD(target);
|
|
|
-
|
|
|
+
|
|
|
if (tdEle) {
|
|
|
target.classList.add("oldlace-bg");
|
|
|
// if (metaKey || ctrlKey) {
|
|
|
if (!target.classList.contains('select-td')) {
|
|
|
-
|
|
|
|
|
|
- if(ctrlKey||metaKey){
|
|
|
- target.classList.add("select-td");
|
|
|
+ if (ctrlKey || metaKey) {
|
|
|
+ target.classList.add("select-td");
|
|
|
this.checkList.push({
|
|
|
tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
|
|
|
td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
|
|
|
- name: !isNameEmpty?curTdEle.getAttribute("title")||'暂未匹配元素':'暂未匹配元素'
|
|
|
+ name: !isNameEmpty ? curTdEle.getAttribute("title") || '暂未匹配元素' : '暂未匹配元素'
|
|
|
|
|
|
})
|
|
|
- }else{
|
|
|
- this.checkList=[{
|
|
|
+ } else {
|
|
|
+ this.checkList = [{
|
|
|
tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
|
|
|
td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
|
|
|
- name: !isNameEmpty?curTdEle.getAttribute("title")||'暂未匹配元素':'暂未匹配元素'
|
|
|
-
|
|
|
- }]
|
|
|
+ name: !isNameEmpty ? curTdEle.getAttribute("title") || '暂未匹配元素' : '暂未匹配元素'
|
|
|
+ }]
|
|
|
}
|
|
|
} else {
|
|
|
target.classList.remove("select-td");
|
|
|
@@ -873,16 +860,10 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
|
|
|
this.noRepeat(this.checkList)
|
|
|
-
|
|
|
- console.log(this.checkList,'this.checkList');
|
|
|
-
|
|
|
-
|
|
|
+ console.log(this.checkList, 'this.checkList');
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -905,7 +886,7 @@ export default {
|
|
|
if (inputElement) {
|
|
|
const placeholderValue = inputElement.getAttribute('placeholder');
|
|
|
if (placeholderValue) {
|
|
|
- const title = this.getAttribute('title')
|
|
|
+ const title = this.getAttribute('title')
|
|
|
this.setAttribute('title', placeholderValue);
|
|
|
this.setAttribute('title_original', title)
|
|
|
}
|
|
|
@@ -913,7 +894,7 @@ export default {
|
|
|
});
|
|
|
// 鼠标离开时恢复 title 并移除自定义提示
|
|
|
td.addEventListener('mouseleave', function () {
|
|
|
- const title = this.getAttribute('title_original')
|
|
|
+ const title = this.getAttribute('title_original')
|
|
|
if (title) {
|
|
|
// 恢复原始 title 属性
|
|
|
this.setAttribute('title', title);
|
|
|
@@ -1009,9 +990,8 @@ export default {
|
|
|
|
|
|
.parent {
|
|
|
::v-deep .select-td {
|
|
|
-
|
|
|
- background-color: #DDEAFE;
|
|
|
- border-color: #2550A2 1px solid;
|
|
|
+ background-color: #DDEAFE;
|
|
|
+ border-color: #2550A2 1px solid;
|
|
|
}
|
|
|
|
|
|
::v-deep .oldlace-bg {
|
|
|
@@ -1051,7 +1031,7 @@ export default {
|
|
|
.replace_box {
|
|
|
margin-top: 20px;
|
|
|
border: 1px gray dashed;
|
|
|
- width:95%;
|
|
|
+ width: 95%;
|
|
|
height: calc(100vh - 780px);
|
|
|
position: relative;
|
|
|
padding-top: 20px;
|
|
|
@@ -1062,24 +1042,25 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-.check_box{
|
|
|
+.check_box {
|
|
|
margin-top: 10px;
|
|
|
//line-height: 50px;
|
|
|
-
|
|
|
height: 50px;
|
|
|
padding: 10px;
|
|
|
background-color: #E8E8E8;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
-.save-btn{
|
|
|
+
|
|
|
+.save-btn {
|
|
|
width: 100%;
|
|
|
- .el-button--primary{
|
|
|
+ .el-button--primary {
|
|
|
width: 100%;
|
|
|
background: #2550A2;
|
|
|
border-color: #2550A2;
|
|
|
}
|
|
|
}
|
|
|
-.message-box{
|
|
|
+
|
|
|
+.message-box {
|
|
|
margin-top: 20px;
|
|
|
width: 95%;
|
|
|
border: 1px rgb(254, 240, 13) solid;
|
