表格查询

wujingjing

2024-10-17 9a05763e64ebded4e10e26b821ca5c431e890137

表格查询

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -3,10 +3,25 @@
    <div>
        <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
        <div class="w-full flex-column">
            <div class="flex-0 flex">
            <div class="flex-0 flex-items-center mb-1 h-[38px] ">
                <template v-if="visibleParams && visibleParams.length > 0">
                    <component
                        class="flex-0 m-2"
                        v-model="visibleParams[index].value"
                        v-for="(item, index) in visibleParams as any"
                        :key="item.id"
                        :id="item.id"
                        :is="recordSetTableMap[item.type]"
                        :data="item"
                        @change="(val) => handleQueryChange(val, item)"
                        :originData="originData"
                    ></component>
					
                </template>

                <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
            </div>
            <div class="flex-auto" ref="containerRef" v-resize="resizeHandler">
            <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
                <el-table
                    ref="tableRef"
                    :maxHeight="tableHeight"
@@ -85,14 +100,27 @@
import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
import InfoDetail from './infoDetail/InfoDetail.vue';
import { RecordSetTableType, recordSetTableMap } from './types';
import StringInput from './components/StringInput.vue';
import { curveQuery } from '/@/api/ai/chat';

const props = defineProps({
    data: {
        type: Object as PropType<any>,
    },
    originData: {
        type: Object as PropType<any>,
    },
    summaryIndex: {
        type: Number,
    },
});

const [DefineColumns, ReuseColumns] = createReusableTemplate<{
    cols: any[];
}>();
const emits = defineEmits<{
    (event: 'updateQuery', res: any): void;
}>();

const colList = ref([]);
@@ -161,6 +189,7 @@
 * @param j å½“前记录所在行位置
 */
const buildGroupData = (values, i = 0, j = 0) => {
    if(!values || values.length===0) return [];
    const curGroupIndex = filterGroupIndexList.value[i];
    // ä¸å¯ä»¥åˆ†ç»„，直接 return;
    if (curGroupIndex == undefined || values.length === 1) {
@@ -294,7 +323,7 @@
        return;
    }

    if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
    if (props.data?.cols?.length > 0 ) {
        cellRowSpanMap.clear();
        props.data.values = buildGroupData(props.data.values);
        calcColWidth(width);
@@ -373,7 +402,6 @@

    // ä¸€é¡µæœ‰  pager.size，条记录
    pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH));

    const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight;

    tableHeight.value = currentHeight;
@@ -386,9 +414,14 @@

//#endregion

const reloadTable = () => {
    // é‡æ–°è®¡ç®—宽度

    resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });
};
const colFilterChange = () => {
    // é‡æ–°è®¡ç®—宽度
    resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });
    reloadTable();
};

const tableHeight = ref(0.7 * document.body.clientHeight);
@@ -411,6 +444,166 @@
        height: 0.7 * document.body.clientHeight,
    });
});

//#region ====================== è¡¨æ ¼è¿‡æ»¤å‚æ•° ======================

const queryLoading = ref(false);
const queryUpdate = async (val: any, item: any) => {
    const historyId = (props as any).originData.historyId;
    const curAgentKey = props.data.agent_key;
    let res = null;

    // æ”¹å˜åŽŸå§‹å€¼
    if (item.type === RecordSetTableType.StringInput) {
        item.origin.value = val;
    }
    try {
        // ç›¸åŒ agent_key ä¸‹æ‰€æœ‰ filter è¯·æ±‚参数
        const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => {
            if (curVal.agent_key !== curAgentKey) return preVal;

            const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => {
                if (subCurVal.type === RecordSetTableType.StringInput) {
                    subPreVal.push({
                        update: subCurVal.update,
                        value: subCurVal.value,
                        path: subCurVal.path,
                    });
                }

                return subPreVal;
            }, []);

            preVal = preVal.concat(filter);

            return preVal;
        }, []);
        const params = {
            history_id: historyId,
            // æŸ¥è¯¢å‰åŽ agent_key ä¸ä¼šå˜
            agent_key: props.data.agent_key,
            filter_json: JSON.stringify(filterList),
        };
        res = await curveQuery(params);
        queryLoading.value = true;
    } finally {
        queryLoading.value = false;
    }

    emits('updateQuery', res);
};

const debounceQueryUpdate = debounce(queryUpdate, 600);

const handleQueryChange = async (val: any, item: any) => {
    if (item.type === RecordSetTableType.StringInput) {
        debounceQueryUpdate(val, item);
    }

    // queryUpdate(val,item)

    return;
};

//#endregion

const getVisibleParams = (data) => {
    // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];
    // index ä½œä¸º id
    const visibleList = (data?.filter ?? []).map((item, index) => {
        // ä¸ä¿®æ”¹åŽŸå§‹åœ°å€
        item.id = index + '';

        return item;
    });
    const newList: any[] = [];
    for (let index = 0; index < visibleList.length; index++) {
        const current = visibleList[index];
        switch (current.type) {
            case RecordSetTableType.StringInput:
                newList.push({
                    id: current.id,
                    type: RecordSetTableType.StringInput,
                    origin: current,
                    value: current?.value ?? '',
                    title: current.title,
                });
                break;

            default:
                break;
        }
        Reflect.deleteProperty(current, 'id');
    }

    return newList;
};
const visibleParams = ref(getVisibleParams(props.data));

const updateFilterValue = (data) => {
    const filter = data?.filter ?? [];

    filter.map((newItem, index) => {
        const currentItem = visibleParams.value.find((item) => item.id === index + '');

        if (currentItem) {
            if (newItem.type === RecordSetTableType.StringInput) {
                currentItem.value = newItem.value;
            }
        }
    });
};

const resetPager = (data) => {
    pager.index = 1;
    pager.total = data?.values?.length ?? 0;
};
const updateCurrent = (res) => {
    const title = res?.title;
    const values = res?.values ?? [];
    props.data.title = title;
    props.data.values = values;
    // ä¸æ›´æ–°ï¼ŒåŽç«¯åŽ‹æ ¹æ²¡è¿”回
    // updateFilterValue(res);
    resetPager(res);

    reloadTable();
};
// æŸ¥è¯¢
const updateAll = (triggerIndex, res) => {
    // å½“前 agent_key
    const curAgentKey = props.data.agent_key;
    const triggerAgentKey = (props as any).originData?.content?.origin?.summary?.[triggerIndex]?.agent_key;
    if (curAgentKey !== triggerAgentKey) {
        return;
    }
    if (!curAgentKey) {
        return;
    }

    // å½“前项所在索引
    let currentIndex = -1;
    for (let index = 0; index < (props as any).originData.content.origin.summary.length; index++) {
        const item = (props as any).originData.content.origin.summary[index];
        if (item.agent_key === curAgentKey) {
            currentIndex++;
            if (index === props.summaryIndex) {
                break;
            }
        }
    }
    // è¡¨æ ¼ summary å¯èƒ½æ•´ä¸ªè¿”回为空，为空时，values è®¾ç½®ä¸ºç©º
    const newSummary = res?.summary?.[currentIndex] ?? {
        title: props.data.title,
        values: [],
    };

    updateCurrent(newSummary);
};

defineExpose({
    updateAll,
});
</script>
<style scoped lang="scss">
// :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/components/StringInput.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,24 @@
<template>
    <div class="flex-items-center">
        <span class="flex-0 mr-2" v-if="data?.title">{{ data?.title }}</span>
        <el-input v-model="modelValue" @input="stringInputInput"></el-input>
    </div>
</template>

<script setup lang="ts">

defineOptions({
    inheritAttrs:true
})

const emit = defineEmits(['change'])
const props = defineProps(['data'])
const modelValue = defineModel({
    type:String,
    default:''
})
const stringInputInput = (val) => {
    emit('change',val)
};
</script>
<style scoped lang="scss"></style>

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/types.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
import StringInput from './components/StringInput.vue'

export const enum RecordSetTableType {
    StringInput = 'string',
}
export const recordSetTableMap = {
    [RecordSetTableType.StringInput]: StringInput,
};

 src/components/table/colFilter/ColFilter.vue

@@ -2,7 +2,7 @@
    <el-dropdown trigger="click" placement="bottom-end" :hideOnClick="false">
        <span
            title="点击选择显示列"
            class="rounded-full p-1.5 border-[1.5px] hover:text-blue-400 border-gray-200 border-solid cursor-pointer ywifont ywicon-grid !text-[13px] mb-3"
            class="rounded-full p-1.5 border-[1.5px] hover:text-blue-400 border-gray-200 border-solid cursor-pointer ywifont ywicon-grid !text-[13px] h-fit"
        ></span>

        <template #dropdown>

 src/theme/app.scss

@@ -253,6 +253,16 @@
    justify-content: space-around;
}


.flex-items-center {
    display: flex;
    align-items: center;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
}
.flex-start {
    @extend .flex;
    justify-content: start;

 vite.config.ts

@@ -35,7 +35,7 @@
            host: '0.0.0.0',
            port: env.VITE_PORT as unknown as number,
            open: JSON.parse(env.VITE_OPEN),
            hmr: false,
            hmr: true,
        },
        build: {
            // outDir: 'dist/' + mode.mode,