资料填报-勾选框右键弹窗、日期范围框点击第二个输入框没有取消公式问题

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20251202180827"
+  "value": "20251203114425"
 }

src/components/plugins/table-form/hc-date-picker-1.vue

@@ -1,25 +1,19 @@
 <template>
-    <ElDatePicker
-        :id="keyname"
-        v-model="modelValues"
-        :clearable="clearable"
-        :disabled="disabled"
-        :end-placeholder="endPlaceholder"
-        :format="format"
-        :keyname="keyname"
-        :placeholder="placeholder"
-        :range-separator="rangeSeparator"
-        :readonly="readonly"
-        :start-placeholder="startPlaceholder"
-        :type="type"
-        :value-format="valueFormat"
-        style="width: 100%;height: 100%;"
-        @change="timePickerChange"
+    <div
         @keydown.shift.up="keyupShiftUp"
         @keydown.shift.down="keyupShiftDown"
         @keydown.shift.left="keyupShiftLeft"
         @keydown.shift.right="keyupShiftRight"
-    />
+        @contextmenu.prevent.native="handleContextMenu"
+        @mouseup.right="$emit('mouseupRight1', { e: $event, keyname: props.keyname })"
+    >
+        <ElDatePicker
+            :id="keyname" v-model="modelValues" :clearable="clearable" :disabled="disabled"
+            :end-placeholder="endPlaceholder" :format="format" :keyname="keyname" :placeholder="placeholder"
+            :range-separator="rangeSeparator" :readonly="readonly" :start-placeholder="startPlaceholder" :type="type"
+            :value-format="valueFormat" style="width: 100%;height: 100%;" @change="timePickerChange"
+        />
+    </div>
 </template>
 
 <script>
@@ -84,7 +78,7 @@ const props = defineProps({
 })
 
 //事件
-const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])
+const emit = defineEmits(['update:modelValue', 'change', 'keydowns', 'mouseupRight1'])
 
 //变量
 const modelValues = ref(props.modelValue)

src/components/plugins/table-form/hc-form-checkbox-group.vue

@@ -1,18 +1,23 @@
 <template>
     <div
-        :class="isFocus ? 'is-focus' : ''" class="hc-form-checkbox-group-box"
-        @keydown.shift.up="keyupShiftUp"
-        @keydown.shift.down="keyupShiftDown"
-        @keydown.shift.left="keyupShiftLeft"
-        @keydown.shift.right="keyupShiftRight"
+        :class="[
+            isFocus ? 'is-focus' : '',
+            clearformula === '0' ? 'clearformula' : '',
+        ]" class="hc-form-checkbox-group-box" @keydown.shift.up="keyupShiftUp" @keydown.shift.down="keyupShiftDown"
+        @keydown.shift.left="keyupShiftLeft" @keydown.shift.right="keyupShiftRight"
+        @contextmenu.prevent.native="handleContextMenu"
+        @mouseup.right="$emit('mouseupRight1', { e: $event, keyname: props.keyname })"
     >
         <ElCheckbox
-            v-for="item in checkboxDatas" :key="item.key" :checked="item.checked"
+            v-for="item in checkboxDatas" :key="item.key" :checked="item?.checked"
             @change="onCheckboxChange($event, item)"
         >
             {{ item.name }}
         </ElCheckbox>
-        <input :id="keyname" class="hc-checkbox-group-input" @blur="handleBlur" @focus="handleFocus">
+        <input
+            :id="keyname" class="hc-checkbox-group-input" :keyname="keyname" :clearformula="clearformula"
+            @blur="handleBlur" @focus="handleFocus"
+        >
     </div>
 </template>
 
@@ -48,10 +53,14 @@ const props = defineProps({
         type: [String, Number],
         default: '',
     },
+    clearformula: {
+        type: String,
+        default: null,
+    },
 })
 
 //事件
-const emit = defineEmits(['change', 'keydowns'])
+const emit = defineEmits(['change', 'keydowns', 'mouseupRight1'])
 
 //变量
 const checkboxDatas = ref([])
@@ -85,7 +94,7 @@ const setModelVal = (val) => {
         for (let i = 0; i < arr.length; i++) {
             const item = String(arr[i])
             const index = arrIndex(datas, 'key', item)
-            datas[index].checked = true
+            datas[index] = { ...datas[index], checked: true }
         }
     }
     checkboxDatas.value = datas
@@ -145,6 +154,9 @@ const handleFocus = () => {
 const handleBlur = () => {
     isFocus.value = false
 }
+const handleContextMenu = (e) => {
+    e.preventDefault()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -154,15 +166,22 @@ const handleBlur = () => {
     height: initial;
     border-radius: 4px;
     transition: box-shadow 0.3s, background-color 0.3s;
-    &.is-focus, &:hover {
+
+    &.is-focus,
+    &:hover {
         background-color: #eddac4;
         box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
     }
+
     .hc-checkbox-group-input {
         position: absolute;
         z-index: -1;
         right: 10px;
         width: 10px;
     }
+
+    &.clearformula {
+        background-color: #DCDCDC;
+    }
 }
 </style>

src/plugins/HTableForm.js

@@ -19,8 +19,14 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 // 定义组件对象
 const components = {
-    ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
-    HcFormSelectSearch, HcFormSelectSearch2, HcFormCheckboxGroup, HcEchart,
+    ElDatePicker,
+    ElTimePicker,
+    HcTableFormUpload,
+    ElRadioGroup,
+    HcFormSelectSearch,
+    HcFormSelectSearch2,
+    HcFormCheckboxGroup,
+    HcEchart,
 }
 
 // 定义键盘事件常量
@@ -52,11 +58,47 @@ export default class HTableForm {
      * @param {Function} options.onChartRefs - 图表引用回调
      * @returns {Object} 返回创建的Vue应用和VM实例
      */
-    static createForm({ template, tableForm, keys, appId, pid, onRight, onBlur, onLeftClick, onFormDataChange, onChartRefs }) {
+    static createForm({
+        template,
+        tableForm,
+        keys,
+        appId,
+        pid,
+        onRight,
+        onBlur,
+        onLeftClick,
+        onFormDataChange,
+        onChartRefs,
+    }) {
         if (!template || !tableForm || !appId) {
             throw new Error('渲染失败')
         }
 
+        // 1. 先统一转义引号，防止模板里混有 \"
+        template = template.replace(/\\"/g, '"')
+
+        // 2. 替换 @mouseup.right → @mouseup-right1，并把最后一个参数 $event 改成 value
+        template = template
+            // 情况 A：双引号
+            .replace(
+                /<hc-form-checkbox-group([^>]*)@mouseup\.right="RightClick\(([^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,)\$event\)"([^>]*)>/gi,
+                '<hc-form-checkbox-group$1@mouseup-right1="(value)=>RightClick1($2value)"$3>',
+            )
+            // 情况 B：单引号
+            .replace(
+                /<hc-form-checkbox-group([^>]*)@mouseup\.right='RightClick\(([^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,)\$event\)'([^>]*)>/gi,
+                '<hc-form-checkbox-group$1@mouseup-right1="(value)=>RightClick1($2value)"$3>',
+            )
+            // 情况 A：双引号
+            .replace(
+                /<el-date-picker([^>]*)@mouseup\.right="RightClick\(([^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,)\$event\)"([^>]*)>/gi,
+                '<el-date-picker$1@mouseup-right1="(value)=>RightClick1($2value)"$3>',
+            )
+            // 情况 B：单引号
+            .replace(
+                /<el-date-picker([^>]*)@mouseup\.right='RightClick\(([^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,)\$event\)'([^>]*)>/gi,
+                '<el-date-picker$1@mouseup-right1="(value)=>RightClick1($2value)"$3>',
+            )
         const app = createApp({
             components,
             data() {
@@ -94,13 +136,25 @@ export default class HTableForm {
                     setTimeout(() => {
                         console.log('11111右键菜单：', event.target)
 
-                        const KeyName = event?.target?.getAttribute('keyname') || event?.target?.getAttribute('id') || ''
-                        if (onRight) {
+                        const KeyName
+                            = event?.target?.getAttribute('keyname')
+                            || event?.target?.getAttribute('id')
+                            || ''
+                        if (onRight && KeyName.includes('key')) {
                             event.preventDefault()
                             onRight(event, KeyName)
                         }
                     }, 100)
                 },
+                RightClick1(a, b, c, d, e, f, val) {
+                    setTimeout(() => {
+                        console.log('22222右键菜单：', val)
+                        if (onRight) {
+                            val.e.preventDefault()
+                            onRight(val.e, val.keyname)
+                        }
+                    }, 100)
+                },
                 // 获取信息（待实现）
                 getInformation() {
                     // 实现获取信息的逻辑
@@ -119,14 +173,23 @@ export default class HTableForm {
                 },
                 // 正则表达式验证
                 getRegularExpression(event, reg, msg, a, b, leng, type, c, d) {
-                    const KeyName = event?.target?.getAttribute('keyname') || ''
+                    const KeyName
+                        = event?.target?.getAttribute('keyname') || ''
                     if (onBlur) {
-                        onBlur(event, KeyName, reg, this.formData[KeyName], msg, leng, type)
+                        onBlur(
+                            event,
+                            KeyName,
+                            reg,
+                            this.formData[KeyName],
+                            msg,
+                            leng,
+                            type,
+                        )
                     }
                 },
                 // 远程表单变化处理
                 formRemoteChange(data) {
-                    Object.keys(data).forEach(key => {
+                    Object.keys(data).forEach((key) => {
                         this.formData[key] = data[key]
                     })
                 },
@@ -152,7 +215,12 @@ export default class HTableForm {
                 },
                 // 日期键盘事件处理
                 dateKeydown({ type, name }) {
-                    HTableForm.setKeyupData({ target: { id: name } }, type, keys, pid)
+                    HTableForm.setKeyupData(
+                        { target: { id: name } },
+                        type,
+                        keys,
+                        pid,
+                    )
                 },
                 // 输入框左键点击处理
                 inputLeftClick(event, key) {
@@ -209,15 +277,19 @@ export default class HTableForm {
      */
     static setByClassKeyup(keys, pid = '') {
         try {
-            const poppers = document.querySelectorAll('.hc-table-form-date-picker')
-            poppers.forEach(item => {
+            const poppers = document.querySelectorAll(
+                '.hc-table-form-date-picker',
+            )
+            poppers.forEach((item) => {
                 let key = ''
                 const ids = item.getAttribute('class').split('-form-id-')
                 if (ids.length >= 1) {
                     key = ids[1]
                 }
                 if (ids) {
-                    const panels = item.querySelectorAll('.el-picker-panel__content')
+                    const panels = item.querySelectorAll(
+                        '.el-picker-panel__content',
+                    )
                     this.setElementsEvent(panels, key, keys, pid)
                 }
             })
@@ -236,25 +308,49 @@ export default class HTableForm {
     static setElementsEvent(elements, key, keys, pid = '') {
         if (elements.length > 0) {
             const _this = this
-            elements[0].addEventListener('keydown', e => {
-                e.stopPropagation()
-                switch (e.key) {
-                    case ARROW_UP:
-                        _this.setKeyupData({ target: { id: key } }, 'up', keys, pid)
-                        break
-                    case ARROW_DOWN:
-                        _this.setKeyupData({ target: { id: key } }, 'down', keys, pid)
-                        break
-                    case ARROW_LEFT:
-                        _this.setKeyupData({ target: { id: key } }, 'left', keys, pid)
-                        break
-                    case ARROW_RIGHT:
-                        _this.setKeyupData({ target: { id: key } }, 'right', keys, pid)
-                        break
-                }
-            }, {
-                capture: true,
-            })
+            elements[0].addEventListener(
+                'keydown',
+                (e) => {
+                    e.stopPropagation()
+                    switch (e.key) {
+                        case ARROW_UP:
+                            _this.setKeyupData(
+                                { target: { id: key } },
+                                'up',
+                                keys,
+                                pid,
+                            )
+                            break
+                        case ARROW_DOWN:
+                            _this.setKeyupData(
+                                { target: { id: key } },
+                                'down',
+                                keys,
+                                pid,
+                            )
+                            break
+                        case ARROW_LEFT:
+                            _this.setKeyupData(
+                                { target: { id: key } },
+                                'left',
+                                keys,
+                                pid,
+                            )
+                            break
+                        case ARROW_RIGHT:
+                            _this.setKeyupData(
+                                { target: { id: key } },
+                                'right',
+                                keys,
+                                pid,
+                            )
+                            break
+                    }
+                },
+                {
+                    capture: true,
+                },
+            )
         }
     }
 
@@ -268,10 +364,11 @@ export default class HTableForm {
     static setKeyupData({ target }, type, keys, pid = '') {
         const key = target.id
         if (key && type && isArray(keys)) {
-            let left = -1, top = -1
+            let left = -1,
+                top = -1
             for (let i = 0; i < keys.length; i++) {
                 if (isArray(keys[i])) {
-                    const index = keys[i].findIndex(id => id === key)
+                    const index = keys[i].findIndex((id) => id === key)
                     if (index !== -1) {
                         left = index
                         top = i
@@ -350,7 +447,12 @@ export default class HTableForm {
      * @param {string} pid - 父级ID
      * @param {boolean} add - 是否添加样式
      */
-    static async setFormStyle(key, name = 'hc-red-border', pid = '', add = false) {
+    static async setFormStyle(
+        key,
+        name = 'hc-red-border',
+        pid = '',
+        add = false,
+    ) {
         const dom = await this.getQuerySelector(key, pid)
         if (!dom) return
 
@@ -411,7 +513,11 @@ export default class HTableForm {
         const handleKeyDown = (event) => {
             if (!this.vEnableBulk) return
             const { key, ctrlKey, metaKey } = event
-            const isCtrl = window.isMac ? metaKey : window.isWin ? ctrlKey : false
+            const isCtrl = window.isMac
+                ? metaKey
+                : window.isWin
+                ? ctrlKey
+                : false
             if (isCtrl) {
                 if (onCtrlDown && key === window?.isCtrl) {
                     onCtrlDown(event)
@@ -426,7 +532,11 @@ export default class HTableForm {
         const handleKeyUp = (event) => {
             if (!this.vEnableBulk) return
             const { key, ctrlKey, metaKey } = event
-            const isCtrl = window.isMac ? metaKey : window.isWin ? ctrlKey : false
+            const isCtrl = window.isMac
+                ? metaKey
+                : window.isWin
+                ? ctrlKey
+                : false
             if (!isCtrl && key === window?.isCtrl && onCtrlUp) {
                 onCtrlUp(event)
             }