|
|
@@ -1,4 +1,4 @@
|
|
|
-import {createApp} from "vue/dist/vue.esm-bundler.js";
|
|
|
+import {createApp, nextTick} from "vue/dist/vue.esm-bundler.js";
|
|
|
import {getTokenHeader} from '~src/api/request/header';
|
|
|
import {toParse, isArray} from "vue-utils-plus";
|
|
|
import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
|
|
|
@@ -6,11 +6,12 @@ import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vu
|
|
|
import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
|
|
|
|
|
|
import {
|
|
|
- ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
|
|
|
- ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
|
|
|
- ElRadio,ElCheckbox,ElCheckboxGroup
|
|
|
+ ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
|
|
|
+ ElInputNumber, ElSelect, ElOption, ElRadioGroup,
|
|
|
+ ElRadio, ElCheckbox, ElCheckboxGroup, ElTimePicker
|
|
|
} from 'element-plus'
|
|
|
|
|
|
+
|
|
|
const components = {
|
|
|
ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
|
|
|
ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
|
|
|
@@ -50,7 +51,7 @@ export default class HTableForm {
|
|
|
},
|
|
|
methods: {
|
|
|
//鼠标右键事件
|
|
|
- RightClick(a,b,c,d,e,f,event) {
|
|
|
+ RightClick(a, b, c, d, e, f, event) {
|
|
|
event.preventDefault();
|
|
|
const KeyName = event?.target?.getAttribute('keyname') || ''
|
|
|
if (onRight) {
|
|
|
@@ -58,13 +59,14 @@ export default class HTableForm {
|
|
|
}
|
|
|
},
|
|
|
//焦点事件
|
|
|
- getInformation() {},
|
|
|
+ getInformation() {
|
|
|
+ },
|
|
|
//日期选择事件
|
|
|
- datePickerChange(val,key) {
|
|
|
+ datePickerChange(val, key) {
|
|
|
this.formData[key] = val
|
|
|
},
|
|
|
//上传完成
|
|
|
- formUploadSuccess({src,key}) {
|
|
|
+ formUploadSuccess({src, key}) {
|
|
|
this.formData[key] = src
|
|
|
},
|
|
|
//删除上传的文件
|
|
|
@@ -109,6 +111,7 @@ export default class HTableForm {
|
|
|
app.mount(appId)
|
|
|
return app
|
|
|
}
|
|
|
+
|
|
|
//处理日期范围数据
|
|
|
static setPickerKey(data) {
|
|
|
const pickerKey = data['pickerKey'] || ''
|
|
|
@@ -117,7 +120,7 @@ export default class HTableForm {
|
|
|
for (let i = 0; i < pickerKeys.length; i++) {
|
|
|
const val = data[pickerKeys[i]] || ''
|
|
|
if (val) {
|
|
|
- const dataVal = val.replace(/'/g,'"');
|
|
|
+ const dataVal = val.replace(/'/g, '"');
|
|
|
data[pickerKeys[i]] = toParse(dataVal) || []
|
|
|
} else {
|
|
|
data[pickerKeys[i]] = []
|
|
|
@@ -129,34 +132,42 @@ export default class HTableForm {
|
|
|
|
|
|
//处理日期时间框的切换事件
|
|
|
static setByClassKeyup(keys) {
|
|
|
- const _this = this;
|
|
|
- let poppers = document.getElementsByClassName('hc-table-form-date-picker')
|
|
|
- for (let i = 0; i < poppers.length; i++) {
|
|
|
- let key = '';
|
|
|
- const classList = poppers[i].getAttribute('class')
|
|
|
- const ids = classList.split('-form-id-')
|
|
|
- if (ids.length >= 1) {
|
|
|
- key = ids[1]
|
|
|
- }
|
|
|
- if (ids) {
|
|
|
- let panels = poppers[i].getElementsByClassName('el-picker-panel__content')
|
|
|
- for (let x = 0; x < panels.length; x++) {
|
|
|
- panels[x].addEventListener("keydown", e => {
|
|
|
- e.stopPropagation()
|
|
|
- if (e.key === 'ArrowUp') {
|
|
|
- _this.setKeyupData({target: {id: key}}, 'up', keys)
|
|
|
- } else if (e.key === 'ArrowDown') {
|
|
|
- _this.setKeyupData({target: {id: key}}, 'down', keys)
|
|
|
- } else if (e.key === 'ArrowLeft') {
|
|
|
- _this.setKeyupData({target: {id: key}}, 'left', keys)
|
|
|
- } else if (e.key === 'ArrowRight') {
|
|
|
- _this.setKeyupData({target: {id: key}}, 'right', keys)
|
|
|
- }
|
|
|
- }, {
|
|
|
- capture: true
|
|
|
- });
|
|
|
+ try {
|
|
|
+ let poppers = document.getElementsByClassName('hc-table-form-date-picker')
|
|
|
+ for (let i = 0; i < poppers.length; i++) {
|
|
|
+ let item = poppers[i], key = '';
|
|
|
+ const ids = item.getAttribute('class').split('-form-id-')
|
|
|
+ if (ids.length >= 1) {
|
|
|
+ key = ids[1]
|
|
|
+ }
|
|
|
+ if (ids) {
|
|
|
+ let panels = item.getElementsByClassName('el-picker-panel__content')
|
|
|
+ this.setElementsEvent(panels, key, keys)
|
|
|
}
|
|
|
}
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //设置事件
|
|
|
+ static setElementsEvent(elements, key, keys) {
|
|
|
+ if (elements.length > 0) {
|
|
|
+ const _this = this;
|
|
|
+ elements[0].addEventListener("keydown", e => {
|
|
|
+ e.stopPropagation()
|
|
|
+ if (e.key === 'ArrowUp') {
|
|
|
+ _this.setKeyupData({target: {id: key}}, 'up', keys)
|
|
|
+ } else if (e.key === 'ArrowDown') {
|
|
|
+ _this.setKeyupData({target: {id: key}}, 'down', keys)
|
|
|
+ } else if (e.key === 'ArrowLeft') {
|
|
|
+ _this.setKeyupData({target: {id: key}}, 'left', keys)
|
|
|
+ } else if (e.key === 'ArrowRight') {
|
|
|
+ _this.setKeyupData({target: {id: key}}, 'right', keys)
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ capture: true
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -182,15 +193,13 @@ export default class HTableForm {
|
|
|
if (top > 0) {
|
|
|
let keyId = '';
|
|
|
const tops = keys[top - 1]
|
|
|
- const keyLength = tops.length -1;
|
|
|
+ const keyLength = tops.length - 1;
|
|
|
if (keyLength < left) {
|
|
|
keyId = tops[keyLength]
|
|
|
} else {
|
|
|
keyId = tops[left]
|
|
|
}
|
|
|
- if (keyId) {
|
|
|
- document.getElementById(keyId).focus();
|
|
|
- }
|
|
|
+ this.setElementFocus(keyId)
|
|
|
}
|
|
|
} else if (type === 'down') {
|
|
|
//向下移动
|
|
|
@@ -198,23 +207,19 @@ export default class HTableForm {
|
|
|
if (tops > top) {
|
|
|
let keyId = '';
|
|
|
const tops = keys[top + 1]
|
|
|
- const keyLength = tops.length -1;
|
|
|
+ const keyLength = tops.length - 1;
|
|
|
if (keyLength < left) {
|
|
|
keyId = tops[keyLength]
|
|
|
} else {
|
|
|
keyId = tops[left]
|
|
|
}
|
|
|
- if (keyId) {
|
|
|
- document.getElementById(keyId).focus();
|
|
|
- }
|
|
|
+ this.setElementFocus(keyId)
|
|
|
}
|
|
|
} else if (type === 'left') {
|
|
|
//向左移动
|
|
|
if (left > 0) {
|
|
|
- const keyId = keys[top][left-1]
|
|
|
- if (keyId) {
|
|
|
- document.getElementById(keyId).focus();
|
|
|
- }
|
|
|
+ const keyId = keys[top][left - 1]
|
|
|
+ this.setElementFocus(keyId)
|
|
|
}
|
|
|
} else if (type === 'right') {
|
|
|
//向右移动
|
|
|
@@ -222,11 +227,21 @@ export default class HTableForm {
|
|
|
const leftLength = lefts.length - 1;
|
|
|
if (leftLength > left) {
|
|
|
const keyId = lefts[left + 1]
|
|
|
- if (keyId) {
|
|
|
- document.getElementById(keyId).focus();
|
|
|
- }
|
|
|
+ this.setElementFocus(keyId)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ //设置元素焦点
|
|
|
+ static setElementFocus(keyId) {
|
|
|
+ if (keyId) {
|
|
|
+ try {
|
|
|
+ console.log('focus', keyId)
|
|
|
+ document.getElementById(keyId).focus();
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
