fix:解决条件查询组件使用TSelectTable(下拉选择表格组件)重置无法清空问题

sscfaith · Jan 2, 2024 · 807db38 · 807db38
1 parent 5e4624d
commit 807db38
Show file tree

Hide file tree

Showing 3 changed files with 418 additions and 28 deletions.
diff --git a/docs/examples/TQueryCondition/TSelectUse.vue b/docs/examples/TQueryCondition/TSelectUse.vue
@@ -13,11 +13,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref, toRefs } from 'vue'
 import cascaderData from './cascaderData.json'
 let state = reactive({
   queryData: {
     userName: null, // 登录名
+    userName2: null, // 登录名
     workshopNum: null,
     workshopNum2: null,
     date: null,
@@ -71,12 +72,15 @@ let state = reactive({
     },
   ],
 })
+const userName = ref()
+const userName2 = ref()
 const opts = computed(() => {
   return {
     userName: {
       label: '下拉选择表格组件',
       comp: 't-select-table',
       span: 2,
+      isSelfCom: true,
       bind: {
         maxHeight: 400,
         isKeyup: true,
@@ -88,6 +92,22 @@ const opts = computed(() => {
         radioChange: (val) => radioChange(val),
       },
     },
+    userName2: {
+      label: '下拉表格组件2',
+      comp: 't-select-table',
+      span: 2,
+      isSelfCom: true,
+      bind: {
+        maxHeight: 400,
+        isKeyup: true,
+        keywords: { label: 'name', value: 'id' },
+        table: state.table,
+        columns: state.table.columns,
+      },
+      eventHandle: {
+        radioChange: (val) => radioChange2(val),
+      },
+    },
     workshopNum: {
       label: 't-select单选使用',
       comp: 't-select',
@@ -144,14 +164,19 @@ const opts = computed(() => {
 })
 const radioChange = (val) => {
   console.log('下拉选择表格组件--单选', val)
-  state.queryData.userName = val.id
+  userName.value = val.name
+}
+const radioChange2 = (val) => {
+  console.log('下拉选择表格组件--单选222', val)
+  userName2.value = val.name
 }
 // 最终参数获取
 const getQueryData = computed(() => {
-  const { userName, workshopNum, date, workshopNum2, deptCode } =
-    state.queryData
+  const { userName, userName2, workshopNum, date, workshopNum2, deptCode } =
+    toRefs(state.queryData)
   return {
     userName,
+    userName2,
     workshopNum,
     workshopNum2,
     deptCode,
@@ -172,6 +197,8 @@ const handleEvent = (type, val) => {
 const conditionEnter = (data: any) => {
   console.log(1122, data)
   state.queryData = data
+  state.queryData.userName = userName.value
+  state.queryData.userName2 = userName2.value
   console.log('最终参数', getQueryData.value)
 }
 </script>
diff --git a/packages/query-condition/src/index.vue b/packages/query-condition/src/index.vue
@@ -34,6 +34,7 @@
       <template v-if="opt.isSelfCom">
         <component
           :is="opt.comp"
+          :ref="opt.comp === 't-select-table' ? (el:any) => handleRef(el, i) : ''"
           v-model="queryState.form[opt.dataIndex]"
           :placeholder="opt.placeholder || getPlaceholder(opt)"
           v-bind="
@@ -156,11 +157,13 @@ const props = defineProps({
   },
   // 查询按钮配置
   btnCheckBind: {
-    type: [Object],
+    type: Object,
+    default: () => ({}),
   },
   // 重置按钮配置
   btnResetBind: {
-    type: [Object],
+    type: Object,
+    default: () => ({}),
   },
   loading: {
     type: Boolean,
@@ -329,9 +332,27 @@ const getColLength = () => {
   return colLength
 }
 const emits = defineEmits(['handleEvent', 'submit', 'reset'])
+// 下拉选择表格组件 ref
+const tselecttableref: any = ref({})
+// 下拉选择表格组件 动态ref
+const handleRef = (el, key) => {
+  if (el) {
+    tselecttableref.value[`tselecttableref-${key}`] = el
+  }
+}
 // 重置
 const resetHandle = () => {
   queryState.form = initForm(props.opts)
+  // 获取所有下拉选择表格组件
+  const refList = Object.keys(tselecttableref.value).filter((item) =>
+    item.includes('tselecttableref')
+  )
+  if (refList.length > 0 && tselecttableref.value) {
+    refList.map((val) => {
+      // console.log('9999', val)
+      tselecttableref.value[val].clear()
+    })
+  }
   emits('reset', queryState.form)
   checkHandle('reset')
 }