up

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

@@ -1,7 +1,7 @@
 <template>
-    <el-checkbox-group v-model="isVal" size="large" @change="checkboxGroupChange">
+    <el-checkbox-group :model-value="isModelVal" size="large" @change="checkboxChange">
         <template v-for="item in datas">
-            <el-checkbox :label="item" />
+            <el-checkbox :label="item"/>
         </template>
         <template v-for="item in objs">
             <el-checkbox :label="item.key">{{item.name}}</el-checkbox>
@@ -10,8 +10,9 @@
 </template>
 
 <script setup>
-import { ref, nextTick } from 'vue'
-import { toJoin, toSplit } from "vue-utils-plus"
+import {ref, nextTick, watch} from 'vue'
+import { ElCheckboxGroup, ElCheckbox } from 'element-plus'
+import { isValueNull } from "vue-utils-plus"
 const props = defineProps({
     datas: {
         type: Array,
@@ -22,31 +23,56 @@ const props = defineProps({
         default: () => ([])
     },
     val: {
-        type: [Number,String],
+        type: [String,Number],
+        default: ''
+    },
+    value: {
+        type: [String,Number],
         default: ''
     },
     keyname: {
-        type: [Number,String],
+        type: [String,Number],
         default: ''
     },
 })
 
 //变量
-const isVal = ref([])
+const isModelVal = ref([])
+
+//监听表头
+watch(() => [
+    props.val
+], ([val]) => {
+    setModelVal(val)
+})
 
+//渲染完成
 nextTick(() => {
-    if (props.val) {
-        isVal.value = toSplit(props.val)
+    setModelVal(props.val)
+})
+
+//处理数据
+const setModelVal = (val) => {
+    if (!isValueNull(val)) {
+        let newArr = [], arr = String(val).split(',')
+        for (let i = 0; i < arr.length; i++) {
+            newArr.push(Number(arr[i]))
+        }
+        isModelVal.value = newArr
     } else {
-        isVal.value = []
+        isModelVal.value = []
     }
-})
+}
 
 //事件
 const emit = defineEmits(['change'])
 
 //当绑定值变化时触发的事件
-const checkboxGroupChange = (val) => {
-    emit('change', toJoin(val), props.keyname)
+const checkboxChange = (arr) => {
+    isModelVal.value = arr
+    emit('change', {
+        key: props.keyname,
+        val: arr.join()
+    })
 }
 </script>

src/global/components/hc-context-menu/index.vue

@@ -96,7 +96,6 @@ const hideContextMenu = () => {
 }
 
 const onClickOutside = () => {
-    console.log(111)
     hideContextMenu()
 }
 

src/plugins/HTableForm.js

@@ -79,8 +79,7 @@ export default class HTableForm {
                     })
                 },
                 //多选框处理
-                checkboxGroupChange(val, key) {
-                    console.log(val, key)
+                checkboxGroupChange({val, key}) {
                     this.formData[key] = val
                 }
             }

src/test/index.vue

@@ -2,9 +2,8 @@
     <div class="hc-page-box">
         <HcCard title="表单组件测试">
 
-            <hc-form-checkbox-group :datas="['1','2']" :objs="[{key: '3',name: '复选框3'}, {key: '4',name: '复选框4'}]"
-                                    :val="formData.key_1__9_1" keyname="key_1__9_1" @change="checkboxGroupChange">
-            </hc-form-checkbox-group>
+            <hc-form-checkbox-group :objs="[{key: 1,name: '复选框1'}, {key: 2,name: '复选框2'}]" :val="formData.key_1__9_1"
+                                    keyname="key_1__9_1" @change="checkboxGroupChange"></hc-form-checkbox-group>
 
         </HcCard>
     </div>
@@ -15,12 +14,11 @@ import { ref } from "vue";
 import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
 
 const formData = ref({
-    key_1__9_1: '1,2'
+    key_1__9_1: ''
 })
 
-const checkboxGroupChange = (val, key) => {
-    console.log(val)
-    console.log(key)
+const checkboxGroupChange = ({val, key}) => {
+    formData.value[key] = val
 }
 </script>
 

src/views/data-fill/components/ListItem.vue

@@ -129,7 +129,7 @@ import notableform from '~src/assets/view/notableform.svg';
 import HTableForm from "~src/plugins/HTableForm"
 import wbsApi from "~api/data-fill/wbs"
 import HcUpload from "./HcUpload.vue"
-import {utilsText, isType, formValidate,deepClone} from "vue-utils-plus"
+import {utilsText, isType, formValidate, deepClone} from "vue-utils-plus"
 
 //初始
 const props = defineProps({
@@ -296,10 +296,12 @@ const setTableFormBlurReg = (pkeyId, event, key, reg, val, msg, item, index) =>
 }
 
 //获取已填写的数据
-const getBussDataInfo = async (item,pkeyId, index) => {
+const getBussDataInfo = async (item, pkeyId, index) => {
     const pkeyIds = pkeyId ? pkeyId + '' : ''
     if (pkeyIds) {
-        const {error, code, data} = await wbsApi.getBussDataInfo({pkeyId: pkeyIds}, false)
+        const {error, code, data} = await wbsApi.getBussDataInfo({
+            pkeyId: pkeyIds
+        }, false)
         const resData = getObjNullValue(data)
         if (!error && code === 200 && resData) {
             HTableForm.setPickerKey(resData)