|
@@ -1,65 +1,71 @@
|
|
|
<template>
|
|
|
- <div :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm? 'no-scroll-bar' : ''"
|
|
|
- :style="tableFormStyle" class="hc-table-form-data-item">
|
|
|
+ <div
|
|
|
+ :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm ? 'no-scroll-bar' : ''"
|
|
|
+ :style="tableFormStyle" class="hc-table-form-data-item"
|
|
|
+ >
|
|
|
<el-scrollbar v-if="isScroll" class="table-form-item-scrollbar">
|
|
|
- <div :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick"/>
|
|
|
+ <div :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
|
|
|
</el-scrollbar>
|
|
|
- <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick"/>
|
|
|
+ <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
|
|
|
<div v-if="!isTableForm" class="hc-no-table-form">
|
|
|
<div class="table-form-no">
|
|
|
- <img :src="notableform" alt=""/>
|
|
|
- <div class="desc">{{ noTips }}</div>
|
|
|
+ <img :src="notableform" alt="">
|
|
|
+ <div class="desc">
|
|
|
+ {{ noTips }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref, watch, onMounted, nextTick} from "vue"
|
|
|
-import HTableForm from "~src/plugins/HTableForm"
|
|
|
+import { nextTick, onMounted, ref, watch } from 'vue'
|
|
|
+import HTableForm from '~src/plugins/HTableForm'
|
|
|
import notableform from '~src/assets/view/notableform.svg'
|
|
|
-import {getStoreValue, setStoreValue, delStoreValue} from "~uti/storage";
|
|
|
-import {getArrValue, getObjVal, isString, deepClone, arrIndex} from "js-fast-way"
|
|
|
+import { delStoreValue, getStoreValue, setStoreValue } from '~uti/storage'
|
|
|
+import { arrIndex, deepClone, getArrValue, getObjVal, isString } from 'js-fast-way'
|
|
|
|
|
|
//初始
|
|
|
const props = defineProps({
|
|
|
pkey: [String, Number],
|
|
|
noTip: {
|
|
|
type: [String, Number],
|
|
|
- default: '暂无表单数据'
|
|
|
+ default: '暂无表单数据',
|
|
|
},
|
|
|
html: String,
|
|
|
form: {
|
|
|
type: Object,
|
|
|
- default: () => ({})
|
|
|
+ default: () => ({}),
|
|
|
},
|
|
|
cols: {
|
|
|
type: Array,
|
|
|
- default: () => ([])
|
|
|
+ default: () => ([]),
|
|
|
},
|
|
|
loading: Boolean,
|
|
|
scroll: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
- default: '100%'
|
|
|
+ default: '100%',
|
|
|
},
|
|
|
width: {
|
|
|
type: String,
|
|
|
- default: 'auto'
|
|
|
+ default: 'auto',
|
|
|
},
|
|
|
isMessage: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
pid: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
+ default: '',
|
|
|
},
|
|
|
})
|
|
|
|
|
|
+//事件
|
|
|
+const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
|
|
|
//初始变量
|
|
|
const keyId = ref(props.pkey)
|
|
|
const noTips = ref(props.noTip)
|
|
@@ -80,7 +86,7 @@ const isTableForm = ref(false)
|
|
|
|
|
|
//监听
|
|
|
watch(() => [
|
|
|
- props.pkey, props.noTip, props.scroll, props.loading, props.width, props.height, props.pid
|
|
|
+ props.pkey, props.noTip, props.scroll, props.loading, props.width, props.height, props.pid,
|
|
|
], ([pkey, tip, scroll, loading, width, height, pid]) => {
|
|
|
keyId.value = pkey
|
|
|
noTips.value = tip
|
|
@@ -92,7 +98,7 @@ watch(() => [
|
|
|
|
|
|
//html变动
|
|
|
watch(() => [
|
|
|
- props.html
|
|
|
+ props.html,
|
|
|
], ([html]) => {
|
|
|
excelHtml.value = html
|
|
|
setExcelHtml()
|
|
@@ -100,23 +106,23 @@ watch(() => [
|
|
|
|
|
|
//深度监听变动的对象数据
|
|
|
watch(() => [
|
|
|
- props.form
|
|
|
+ props.form,
|
|
|
], ([val]) => {
|
|
|
excelForm.value = val
|
|
|
//console.log('表单数据变动', val)
|
|
|
setPickerKey()
|
|
|
setFormData(val)
|
|
|
}, {
|
|
|
- deep: true
|
|
|
+ deep: true,
|
|
|
})
|
|
|
|
|
|
//深度监听按键切换的key列表
|
|
|
watch(() => [
|
|
|
- props.cols
|
|
|
+ props.cols,
|
|
|
], ([cols]) => {
|
|
|
colsKeys.value = cols
|
|
|
}, {
|
|
|
- deep: true
|
|
|
+ deep: true,
|
|
|
})
|
|
|
|
|
|
|
|
@@ -133,9 +139,6 @@ const setItemStyle = (width, height) => {
|
|
|
tableFormStyle.value = `width: ${width}; height: ${height};`
|
|
|
}
|
|
|
|
|
|
-//事件
|
|
|
-const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
|
|
|
-
|
|
|
//表单被点击
|
|
|
const excelTableFormClick = () => {
|
|
|
emit('excelBodyTap', keyId.value)
|
|
@@ -162,12 +165,12 @@ const setExcelHtml = () => {
|
|
|
|
|
|
//获取模板标签数据
|
|
|
const getExcelHtml = () => {
|
|
|
- const pkeyId = keyId.value, pid = activeKey.value;
|
|
|
+ const pkeyId = keyId.value, pid = activeKey.value
|
|
|
const temp = isString(excelHtml.value) ? excelHtml.value : ''
|
|
|
if (temp && pkeyId) {
|
|
|
//渲染表单
|
|
|
isTableForm.value = true
|
|
|
- const {app, vm} = HTableForm.createForm({
|
|
|
+ const { app, vm } = HTableForm.createForm({
|
|
|
pid: pid,
|
|
|
template: temp,
|
|
|
keys: colsKeys.value,
|
|
@@ -208,13 +211,13 @@ const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg, pid) => {
|
|
|
const dom = document.getElementById(key)?.parentElement ?? ''
|
|
|
if (dom) {
|
|
|
if (val && reg) {
|
|
|
- let regx = new RegExp(reg);
|
|
|
- let state = regx.test(val);
|
|
|
+ let regx = new RegExp(reg)
|
|
|
+ let state = regx.test(val)
|
|
|
if (state) {
|
|
|
delete formRegExpJson.value[key]
|
|
|
HTableForm.setFormStyle(key, 'hc-red-border', pid)
|
|
|
} else {
|
|
|
- formRegExpJson.value[key] = {key, reg, val, msg, state}
|
|
|
+ formRegExpJson.value[key] = { key, reg, val, msg, state }
|
|
|
HTableForm.setFormStyle(key, 'hc-red-border', pid, true)
|
|
|
window?.$message?.warning(msg)
|
|
|
}
|
|
@@ -234,7 +237,7 @@ const onRightClick = (pkeyId, event, KeyName, pid) => {
|
|
|
//const specialDom = document.getElementById(KeyName + "")
|
|
|
const startPos = specialDom?.selectionStart || 0
|
|
|
const endPos = specialDom?.selectionEnd || 0
|
|
|
- emit('rightTap', {event, KeyName, startPos, endPos, pkeyId, pid})
|
|
|
+ emit('rightTap', { event, KeyName, startPos, endPos, pkeyId, pid })
|
|
|
}
|
|
|
|
|
|
const isCtrlKey = ref(false)
|
|
@@ -247,7 +250,7 @@ const setShiftTableForm = (key, pid) => {
|
|
|
const keys = checkKeyList.value
|
|
|
const index = arrIndex(keys, 'key', key)
|
|
|
if (index === -1) {
|
|
|
- keys.push({key: key, val: form[key]})
|
|
|
+ keys.push({ key: key, val: form[key] })
|
|
|
} else {
|
|
|
keys.splice(index, 1)
|
|
|
}
|
|
@@ -317,7 +320,7 @@ const setSingleCopyValue = async (checkList, keysList) => {
|
|
|
const keys = deepClone(keysList)
|
|
|
const form_val = keys[0]['val']
|
|
|
for (let i = 0; i < checkList.length; i++) {
|
|
|
- const {key} = checkList[i]
|
|
|
+ const { key } = checkList[i]
|
|
|
await setTableFormInfoValue(key, form_val)
|
|
|
HTableForm.setCheckKeyStyle(key, activeKey.value, true)
|
|
|
}
|
|
@@ -328,7 +331,7 @@ const setSingleCopyValue = async (checkList, keysList) => {
|
|
|
const setMultipleCheckValue = async (checkList, keysList) => {
|
|
|
const keys = deepClone(keysList)
|
|
|
for (let i = 0; i < checkList.length; i++) {
|
|
|
- const {key, val} = checkList[i]
|
|
|
+ const { key, val } = checkList[i]
|
|
|
if (keys.length > 0) {
|
|
|
const form_val = keys[0]['val']
|
|
|
await setTableFormInfoValue(key, form_val ? form_val : val)
|
|
@@ -363,7 +366,7 @@ const setFormData = (data) => {
|
|
|
|
|
|
//获取表单效验数据
|
|
|
const getRegExpJson = () => {
|
|
|
- return deepClone(formRegExpJson.value);
|
|
|
+ return deepClone(formRegExpJson.value)
|
|
|
}
|
|
|
|
|
|
//正则效验
|
|
@@ -394,7 +397,7 @@ defineExpose({
|
|
|
unmountHtml,
|
|
|
setIsCtrlKey,
|
|
|
setCopyKeyList,
|
|
|
- setPasteKeyList
|
|
|
+ setPasteKeyList,
|
|
|
})
|
|
|
</script>
|
|
|
|
|
@@ -509,6 +512,10 @@ defineExpose({
|
|
|
background-color: white !important;
|
|
|
user-select: none;
|
|
|
}
|
|
|
+ table{
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
.hc-no-table-form {
|
|
|
position: relative;
|