|
|
@@ -22,25 +22,29 @@ export default {
|
|
|
props: ['pkeyId'],
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
- htmlData: {
|
|
|
- name: '',
|
|
|
- tr: '',
|
|
|
- td: ''
|
|
|
- },
|
|
|
- type: {},
|
|
|
-
|
|
|
- checkList: [],
|
|
|
- checkNameList: [],
|
|
|
- isSignatureEdit: false,
|
|
|
- isTimeElement: false,
|
|
|
- timesTimeElement: {}
|
|
|
+ selectedElements: [] ,// 存储已选中的元素
|
|
|
+ exHtml:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pkeyId: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(newVal) {
|
|
|
+ if(newVal) {
|
|
|
+ this.exHtml = ''
|
|
|
+ this.getExcelHtml(newVal)// 重新初始化数据
|
|
|
+
|
|
|
+ }else {
|
|
|
+ this.exHtml = ''
|
|
|
+ this.clearForm()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.cop()
|
|
|
- this.type = this.option.column[0];
|
|
|
- console.log(111);
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
|
|
|
|
|
|
@@ -48,16 +52,27 @@ export default {
|
|
|
|
|
|
async getExcelHtml(pkeyId) {
|
|
|
const {data: res} = await getExcelHtml({pkeyId})
|
|
|
- console.log(res);
|
|
|
if (res.code === 200) {
|
|
|
- localStorage.setItem('excelHtml', res.data)
|
|
|
- this.copss();
|
|
|
+ this.exHtml = res.data
|
|
|
+ this.cop();
|
|
|
}
|
|
|
},
|
|
|
+ // 新增清空表单方法
|
|
|
+ clearForm() {
|
|
|
+ const parentElement = document.getElementById('parent')
|
|
|
+ console.log(parentElement, 'parentElement');
|
|
|
+
|
|
|
+ if(parentElement) {
|
|
|
+ // 清空父元素内容
|
|
|
+ parentElement.innerHTML = ''
|
|
|
+ }
|
|
|
+ // 清空已选中元素
|
|
|
+ this.clearAllSelected()
|
|
|
+ },
|
|
|
async cop() {
|
|
|
let _that = this
|
|
|
var MyComponent = await Vue.extend({
|
|
|
- template: localStorage.getItem('excelHtml'),
|
|
|
+ template: this.exHtml ,
|
|
|
data() {
|
|
|
return {
|
|
|
formData: {},
|
|
|
@@ -69,7 +84,7 @@ export default {
|
|
|
contextmenuClick(tr, td, x1, x2, y1, y2, event) {
|
|
|
},
|
|
|
getInformation(name, tr, td) {//鼠标右键事件
|
|
|
- _that.getInformation(name, tr, td)
|
|
|
+
|
|
|
},
|
|
|
formUploadSuccess() {
|
|
|
},
|
|
|
@@ -108,174 +123,43 @@ export default {
|
|
|
var component = new MyComponent().$mount()
|
|
|
document.getElementById('parent').appendChild(component.$el);
|
|
|
},
|
|
|
- async copss() {
|
|
|
- let _that = this
|
|
|
- var MyComponent = await Vue.extend({
|
|
|
- template: localStorage.getItem('excelHtml'),
|
|
|
- data() {
|
|
|
- return {
|
|
|
- formData: {},
|
|
|
- getTokenHeader: {},
|
|
|
- dap_site_data: {}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- contextmenuClick(tr, td, x1, x2, y1, y2, event) {
|
|
|
- },
|
|
|
- getInformation(name, tr, td) {//鼠标右键事件
|
|
|
- _that.getInformation(name, tr, td)
|
|
|
- },
|
|
|
- formUploadSuccess() {
|
|
|
- },
|
|
|
- formUploadExceed() {
|
|
|
- },
|
|
|
- formUploadLoading() {
|
|
|
- },
|
|
|
- delTableFormFile() {
|
|
|
- },
|
|
|
- formUploadError() {
|
|
|
- },
|
|
|
- uploadprogress() {
|
|
|
- },
|
|
|
- getRegularExpression() {
|
|
|
- },
|
|
|
- formRemoteMethod() {
|
|
|
- },
|
|
|
- checkboxGroupChange() {
|
|
|
- },
|
|
|
- formRemoteChange() {
|
|
|
- },
|
|
|
- dateKeydown() {
|
|
|
- },
|
|
|
- keyupShiftUp() {
|
|
|
- },
|
|
|
- keyupShiftDown() {
|
|
|
- },
|
|
|
- keyupShiftLeft() {
|
|
|
- },
|
|
|
- keyupShiftRight() {
|
|
|
- },
|
|
|
- inputLeftClick() {
|
|
|
- },
|
|
|
- }
|
|
|
- })
|
|
|
- var component = new MyComponent().$mount()
|
|
|
- let na = document.getElementById('parent')
|
|
|
- na.innerHTML = `<div
|
|
|
- class='parent'
|
|
|
- id='parent'
|
|
|
- ></div>`
|
|
|
- document.getElementById('parent').appendChild(component.$el);
|
|
|
- },
|
|
|
- domss() {
|
|
|
- this.copss()
|
|
|
|
|
|
- },
|
|
|
|
|
|
- getInformation(name, tr, td) {//鼠标点击事件
|
|
|
- if (!this.isTimeElement) {
|
|
|
- let tdEle = null;
|
|
|
- //获取TD元素
|
|
|
- if (event.target.nodeName === "TD") {
|
|
|
- tdEle = event.target
|
|
|
- } else {
|
|
|
- tdEle = this.getParentTD(event.target);
|
|
|
- }
|
|
|
- let moreObj = {};
|
|
|
- if (tdEle) {
|
|
|
- moreObj = this.getWidget(tdEle);
|
|
|
- }
|
|
|
- this.htmlData = Object.assign({
|
|
|
- name,
|
|
|
- tr,
|
|
|
- td
|
|
|
- }, moreObj)
|
|
|
- } else {
|
|
|
- this.$set(this.timesTimeElement, 'colName', name)
|
|
|
- }
|
|
|
- },
|
|
|
- signatureEdit(data) {
|
|
|
- this.isSignatureEdit = data
|
|
|
- },
|
|
|
+
|
|
|
+
|
|
|
//excel父节点点击检测
|
|
|
- async parentClick(e) {
|
|
|
- if (!this.isTimeElement) {
|
|
|
- let target = e.target;
|
|
|
- const {metaKey, ctrlKey} = e
|
|
|
- let bgs = document.querySelectorAll("#parent .oldlace-bg")
|
|
|
- //console.log(bgs)
|
|
|
- for (let i = 0; i < bgs.length; i++) {
|
|
|
- bgs[i].classList.remove("oldlace-bg");
|
|
|
- }
|
|
|
- //console.log(target.getAttribute('trindex'))
|
|
|
- let tdEle = this.getParentTD(target);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- let target1
|
|
|
- if (tdEle) {
|
|
|
- let mydiv = tdEle.getElementsByTagName('div')
|
|
|
- target1 = mydiv[0]
|
|
|
- } else {
|
|
|
- tdEle = target
|
|
|
- let mydiv = tdEle.getElementsByTagName('div')
|
|
|
- target = mydiv[0]
|
|
|
- }
|
|
|
- let keyname = ''
|
|
|
- try {
|
|
|
- keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
|
|
|
- // eslint-disable-next-line no-empty
|
|
|
- } catch {
|
|
|
- }
|
|
|
+ async parentClick(e) {
|
|
|
+ let target = e.target;
|
|
|
+ const elementId = target.id;
|
|
|
+ const keyName = target.placeholder;
|
|
|
+ // 判断元素是否已选中
|
|
|
+ const index = this.selectedElements.findIndex(item => item.elementId === elementId);
|
|
|
+ if (index === -1) {
|
|
|
+ // 添加选中效果
|
|
|
+ target.style.backgroundColor = '#ffa500'; // 橙色背景
|
|
|
+ this.selectedElements.push({elementId, keyName}); // 存储选中元素的id和keyName
|
|
|
+ } else {
|
|
|
+ // 取消选中效果
|
|
|
+ target.style.backgroundColor = ''; // 恢复默认背景
|
|
|
+ this.selectedElements.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触发选中元素变化事件
|
|
|
+ this.$emit('element-selected', this.selectedElements);
|
|
|
+
|
|
|
|
|
|
- this.htmlData.keyname = keyname
|
|
|
- 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) {
|
|
|
- target.classList.add("select-td");
|
|
|
- this.checkNameList.push(this.htmlData)
|
|
|
- this.checkList.push({
|
|
|
- tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
|
|
|
- td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
|
|
|
- })
|
|
|
- } else {
|
|
|
- target.classList.remove("select-td");
|
|
|
- this.checkList.forEach((ele, index) => {
|
|
|
- if (ele.tr === target.getAttribute('trindex') || ele.tr === target1.getAttribute('trindex')) {
|
|
|
- this.checkList.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- this.checkNameList.forEach((ele, index) => {
|
|
|
- if (this.htmlData.tr === ele.tr) {
|
|
|
- this.checkNameList.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- let target = e.target;
|
|
|
- let tdEle = this.getParentTD(target);
|
|
|
- let target1
|
|
|
- if (tdEle) {
|
|
|
- let mydiv = tdEle.getElementsByTagName('div')
|
|
|
- target1 = mydiv[0]
|
|
|
- } else {
|
|
|
- tdEle = target
|
|
|
- let mydiv = tdEle.getElementsByTagName('div')
|
|
|
- target = mydiv[0]
|
|
|
- }
|
|
|
- let keyname = ''
|
|
|
- try {
|
|
|
- keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
|
|
|
- } catch {}
|
|
|
- this.$set(this.timesTimeElement, 'keyname', keyname)
|
|
|
- console.log(this.timesTimeElement)
|
|
|
- }
|
|
|
},
|
|
|
+ // 清除所有选中状态的方法
|
|
|
+ clearAllSelected() {
|
|
|
+ this.selectedElements.forEach(item => {
|
|
|
+ const element = document.getElementById(item.elementId);
|
|
|
+ if (element) {
|
|
|
+ element.style.backgroundColor = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.selectedElements = [];
|
|
|
+ },
|
|
|
+
|
|
|
getParentTD(ele) {
|
|
|
let targetParent = ele.parentNode;
|
|
|
while (targetParent.nodeName !== "TD") {
|
|
|
@@ -288,92 +172,10 @@ export default {
|
|
|
},
|
|
|
|
|
|
|
|
|
- //获取控件信息
|
|
|
- getWidget(tdEle) {
|
|
|
- let selectElement = tdEle.querySelectorAll('.el-select');
|
|
|
- let isMultiple = false
|
|
|
- if (selectElement.length) {
|
|
|
-
|
|
|
- // 遍历每个元素，检查是否包含 is-multiple 类名
|
|
|
- selectElement.forEach(element => {
|
|
|
- if (element.classList.contains('is-multiple')) {
|
|
|
- isMultiple = true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (isMultiple) {
|
|
|
- let options = selectElement[0].__vue__.options;
|
|
|
- let selectDatas = [];
|
|
|
- for (let i = 0; i < options.length; i++) {
|
|
|
- selectDatas.push({
|
|
|
- dictValue: options[i].label
|
|
|
- });
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'selectBox',
|
|
|
- selectDatas
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let checkLabels = tdEle.querySelectorAll('.el-checkbox-group span.el-checkbox__label');
|
|
|
- //console.log(checkLabels)
|
|
|
- if (checkLabels.length > 0) {
|
|
|
- let checkLabelDatas = [];
|
|
|
- for (let i = 0; i < checkLabels.length; i++) {
|
|
|
- //console.dir(checkLabels[i])
|
|
|
- checkLabelDatas.push({
|
|
|
- dictValue: checkLabels[i].innerText
|
|
|
- });
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'checkbox',
|
|
|
- checkLabelDatas
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let radioLabels = tdEle.querySelectorAll('.el-radio .el-radio__label');
|
|
|
- if (radioLabels.length > 0) {
|
|
|
- let radioDatas = [];
|
|
|
- for (let i = 0; i < radioLabels.length; i++) {
|
|
|
- radioDatas.push({
|
|
|
- dictValue: radioLabels[i].innerText
|
|
|
- });
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'radio',
|
|
|
- radioDatas
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let elSelect = tdEle.querySelectorAll('.el-select');
|
|
|
- //console.dir(elSelect[0])
|
|
|
- if (elSelect.length) {
|
|
|
- let options = elSelect[0].__vue__.options;
|
|
|
- let selectDatas = [];
|
|
|
- for (let i = 0; i < options.length; i++) {
|
|
|
- selectDatas.push({
|
|
|
- dictValue: options[i].label
|
|
|
- });
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'select',
|
|
|
- selectDatas
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
|
|
|
|
|
|
- return {};
|
|
|
- },
|
|
|
- //是否为时间元素选择模式
|
|
|
-
|
|
|
},
|
|
|
- components: {
|
|
|
-
|
|
|
-
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
