表单的单选框、复选框、远程搜索框优化

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

@@ -1,12 +1,22 @@
 <template>
-    <div :class="ui" class="ui-checkbox-group">
-        <template v-for="item in checkboxDatas" :key="item.key">
-            <el-checkbox :checked="item.checked" size="large" @change="onCheckboxChange($event, item)">{{ item.name }}
-            </el-checkbox>
-        </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">
+        <el-checkbox v-for="item in checkboxDatas" :key="item.key" :checked="item.checked"
+                     @change="onCheckboxChange($event, item)">{{ item.name }}
+        </el-checkbox>
+        <input :id="keyname" class="hc-checkbox-group-input" @blur="handleBlur" @focus="handleFocus"/>
     </div>
 </template>
 
+<script>
+export default {
+    inheritAttrs: false,
+}
+</script>
+
 <script setup>
 import {ref, nextTick, watch} from 'vue'
 import {ElCheckbox} from 'element-plus'
@@ -74,7 +84,7 @@ const setModelVal = (val) => {
 }
 
 //事件
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change', 'keydowns'])
 
 //当绑定值变化时触发的事件
 const onCheckboxChange = (val, item) => {
@@ -98,4 +108,54 @@ const getCheckedValue = () => {
         val: valString
     })
 }
+
+//向上
+const keyupShiftUp = (e) => {
+    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向下
+const keyupShiftDown = (e) => {
+    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向左
+const keyupShiftLeft = (e) => {
+    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向右
+const keyupShiftRight = (e) => {
+    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+
+//获得焦点
+const isFocus = ref(false)
+const handleFocus = () => {
+    isFocus.value = true
+}
+
+//失去焦点
+const handleBlur = () => {
+    isFocus.value = false
+}
 </script>
+
+<style lang="scss" scoped>
+.hc-form-checkbox-group-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    transition: box-shadow 0.3s, background-color 0.3s;
+    &.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;
+    }
+}
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+    <div :class="isFocus?'is-focus':''" class="hc-form-radio-group-box"
+         @keydown.shift.up="keyupShiftUp"
+         @keydown.shift.down="keyupShiftDown"
+         @keydown.shift.left="keyupShiftLeft"
+         @keydown.shift.right="keyupShiftRight">
+        <el-radio-group v-model="modelValues"
+                        :disabled="disabled"
+                        :keyname="keyname"
+                        :placeholder="placeholder"
+                        @change="radioGroupChange"
+        >
+            <slot></slot>
+        </el-radio-group>
+        <input :id="keyname" class="hc-radio-group-input" @blur="handleBlur" @focus="handleFocus"/>
+    </div>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+}
+</script>
+
+<script setup>
+import {ref, watch} from 'vue'
+import {ElRadioGroup, ElRadio} from 'element-plus'
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean]
+    },
+    keyname: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+})
+
+//变量
+const modelValues = ref(props.modelValue)
+
+//监听
+watch(() => [
+    props.modelValue,
+], ([val]) => {
+    modelValues.value = val
+})
+
+//事件
+const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])
+
+const radioGroupChange = (val) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+}
+
+//向上
+const keyupShiftUp = (e) => {
+    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向下
+const keyupShiftDown = (e) => {
+    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向左
+const keyupShiftLeft = (e) => {
+    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向右
+const keyupShiftRight = (e) => {
+    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+
+//获得焦点
+const isFocus = ref(false)
+const handleFocus = () => {
+    isFocus.value = true
+}
+
+//失去焦点
+const handleBlur = () => {
+    isFocus.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-form-radio-group-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    transition: box-shadow 0.3s, background-color 0.3s;
+    &.is-focus, &:hover {
+        background-color: #eddac4;
+        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
+    }
+    .hc-radio-group-input {
+        position: absolute;
+        z-index: -1;
+    }
+}
+</style>

src/components/plugins/table-form/hc-form-select-search.vue

@@ -1,5 +1,6 @@
 <template>
-    <el-select v-model="selectVal" filterable :placeholder="placeholder" :keyname="keyname" @change="formRemoteChange" clearable>
+    <el-select :id="keyname" v-model="selectVal" :keyname="keyname" :placeholder="placeholder" clearable filterable
+               @change="formRemoteChange">
         <el-option v-for="item in selectDatas" :label="item.label" :value="item.value"/>
     </el-select>
 </template>
@@ -7,31 +8,32 @@
 <script setup>
 import {nextTick, ref} from 'vue'
 import {getDapSiteData} from "~api/other"
+import {ElSelect, ElOption} from 'z-element-plus'
 import {getObjNullValue, getIndex, getObjValue} from "vue-utils-plus"
 
 const props = defineProps({
     val: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     type: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     keyname: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     placeholder: {
-        type: [Number,String],
+        type: [Number, String],
         default: '搜索'
     },
     contractId: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     pkeyId: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
 })

src/plugins/HTableForm.js

@@ -1,23 +1,27 @@
 import {createApp} 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"
 import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vue"
 import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
 import ElTimePicker from "~com/plugins/table-form/hc-time-picker.vue"
 import ElDatePicker from "~com/plugins/table-form/hc-date-picker-1.vue"
+import ElRadioGroup from "~com/plugins/table-form/hc-form-radio-group.vue"
 
-import {
-    ElSelect, ElOption,
-} from 'z-element-plus'
+//修改过的组件
+import {ElSelect, ElOption} from 'z-element-plus'
 
 import {
-    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup
+    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElRadio, ElCheckbox, ElCheckboxGroup
 } from 'element-plus'
 
 const components = {
-    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElSelect, ElOption, ElRadioGroup,
-    ElRadio, ElCheckbox, ElCheckboxGroup, ElDatePicker, ElTimePicker, HcTableFormUpload, HcFormSelectSearch,
+    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElSelect, ElOption,
+    ElRadio, ElCheckbox, ElCheckboxGroup,
+    ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
+    HcFormSelectSearch,
     HcFormCheckboxGroup
 }