查看记录详情

wujingjing

2024-10-12 a6864a0774fe00fbacbde6d9c936268d1317c54f

查看记录详情

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

@@ -4,7 +4,7 @@
        <!-- <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">
                <ColFilter class="ml-auto" :columnList="colList"  @change="colFilterChange" />
                <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
            </div>
            <div class="flex-auto" ref="containerRef" v-resize="resizeHandler">
                <el-table
@@ -13,8 +13,11 @@
                    :cell-style="tableCellStyle"
                    :header-cell-style="tableHeaderCellStyle"
                    :data="chunkTableData[pager.index - 1]"
                    @current-change="recordSelectChange"
                    rowClassName="cursor-pointer"
                    :spanMethod="objectSpanMethod"
                    class="w-full h-full"
                    highlightCurrentRow
                    cellClassName="text-sm"
                    headerCellClassName="text-sm"
                >
@@ -22,6 +25,7 @@
                        <template v-for="item in colList" :key="item.prop">
                            <el-table-column
                                v-if="item.isShow ?? true"
                                :type="item.type"
                                :label="item.label"
                                :width="item.width"
                                :sortable="item.sortable"
@@ -36,6 +40,7 @@
                            <template v-for="item in colList" :key="item.prop">
                                <el-table-column
                                    v-if="item.isShow ?? true"
                                    :type="item.type"
                                    :label="item.label"
                                    :width="item.width"
                                    :sortable="item.sortable"
@@ -63,6 +68,8 @@
                layout="total,prev,pager,next,jumper"
                :total="pager.total"
            />

            <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
        </div>
    </div>
</template>
@@ -77,6 +84,7 @@
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
import InfoDetail from './infoDetail/InfoDetail.vue';
const props = defineProps({
    data: {
        type: Object as PropType<any>,
@@ -86,21 +94,21 @@
const [DefineColumns, ReuseColumns] = createReusableTemplate<{
    cols: any[];
}>();

const colList = ref<TableCol[]>(
    props.data.cols.map((item, index) => {
        let isShow = true;
        if(props.data.max_cols !=null){
        if (props.data.max_cols != null) {
            isShow = index < props.data.max_cols;
        }
        return {
        ...item,
        width: 0,
        label: item.title,
        sortable: item.type === 'time',
        prop: index + '',
        isShow:isShow
		
    } as TableCol;
            ...item,
            width: 0,
            label: item.title,
            sortable: item.type === 'time',
            prop: index + '',
            isShow: isShow,
        } as TableCol;
    })
);
// æ‰€æœ‰æ˜¾ç¤ºçš„ prop
@@ -109,11 +117,18 @@
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
const groupIndexList = [];
(props.data?.cols ?? []).map((item, index) => {
    if (item.group) {
        groupIndexList.push(index);
    }

const filterGroupIndexList = computed(() => {
    const groupIndexList = [];

    (props.data?.cols ?? []).map((item, index) => {
        // æ˜¯åˆ†ç»„，且当前可见
        if (item.group && visibleColProp.value.includes(index + '')) {
            groupIndexList.push(index);
        }
    });

    return groupIndexList;
});

const chunkTableData = ref([props.data?.values]);
@@ -143,9 +158,11 @@
 * @param j å½“前记录所在行位置
 */
const buildGroupData = (values, i = 0, j = 0) => {
    const curGroupIndex = groupIndexList[i];
    const curGroupIndex = filterGroupIndexList.value[i];
    // ä¸å¯ä»¥åˆ†ç»„，直接 return;
    if (curGroupIndex == undefined || values.length === 1) return values;
    if (curGroupIndex == undefined || values.length === 1) {
        return values;
    }

    const groupData = _.groupBy(values, (item, index) => {
        const groupValue = item[curGroupIndex];
@@ -275,6 +292,7 @@
    }

    if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
        cellRowSpanMap.clear();
        props.data.values = buildGroupData(props.data.values);
        calcColWidth(width);
        nextTick(() => {
@@ -368,10 +386,18 @@
const colFilterChange = () => {
    // é‡æ–°è®¡ç®—宽度
    resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });

};

const tableHeight = ref(0.7 * document.body.clientHeight);

//#region ======================  ======================
const infoDetailIsShow = ref(false);
const detailMapRow = ref(null);
const recordSelectChange = (row) => {
    detailMapRow.value = row;
    infoDetailIsShow.value = true;
};
//#endregion
onMounted(() => {
    resizeEvent({
        width: containerRef.value.clientWidth,

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/infoDetail/InfoDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
<template>
    <ywDialog
        v-model="dialogIsShow"
        :showHeaderIcon="false"
        :title="dialogTitle"
        width="470"
        :showFooter="false"
        @dlgClosed="closeDialog"
        :closeOnClickModal="true"
		
    >
        <el-form :model="item" ref="dialogFormRef" :rules="dialogFormRules" label-width="76">
            <el-form-item :label="colList[key]?.label" prop="key"  v-for="key in Object.keys(item)">
                <el-input readonly :modelValue="item[key]"></el-input>
            </el-form-item>
        </el-form>
    </ywDialog>
</template>

<script setup lang="ts">
import ywDialog from '/@/components/dialog/yw-dialog.vue';

import type { FormInstance, FormRules } from 'element-plus';

import { computed, ref, watch } from 'vue';


const props = defineProps(['item','colList']);
//#region ====================== å¢žåŠ ã€ä¿®æ”¹è®°å½•æ“ä½œ, dialog init======================
const dialogTitle = computed(() => {
    return `记录详情`;
});

const dialogIsShow = defineModel({
    type: Boolean,
});
const dialogFormRef = ref<FormInstance>(null);

const dialogFormRules = ref<FormRules>({
    // title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    // prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }],
});


//#endregion

const closeDialog = () => {
    dialogIsShow.value = false;
};


</script>
<style scoped lang="scss"></style>

 src/components/dialog/yw-dialog.ts

@@ -61,6 +61,12 @@
        type: Boolean,
        default: true,
    },

    /** @description ç‚¹å‡»è’™å±‚是否关闭对话框 */
    closeOnClickModal:{
        type:Boolean,
        default:false
    }
} as const);
export type YWDialogPropsType = ExtractPropTypes<typeof YWDialogProps>;


 src/components/dialog/yw-dialog.vue

@@ -4,7 +4,7 @@
        v-model="isShow"
        draggable
        :width="width"
        :close-on-click-modal="false"
        :close-on-click-modal="closeOnClickModal"
        @closed="handleClosedClick"
    >
        <template #header>

 src/components/table/colFilter/types.ts

@@ -7,6 +7,7 @@


export type TableCol = {
    type?:'expand',
    prop: string;
    label: string;
    width?: number;