From 5d4d17fade3bdec025281f7bf94f706491b4d339 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期六, 12 十月 2024 10:44:43 +0800
Subject: [PATCH] 列表展示指定列
---
customer_list/common/static/fonts/ywiconfont/iconfont.ttf | 0
customer_list/common/static/fonts/ywiconfont/iconfont.woff | 0
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 165 ++++++++++++++++++---------
src/components/table/colFilter/ColFilter.vue | 114 +++++++++++++++++++
src/components/table/colFilter/types.ts | 19 +++
src/utils/setIconfont.ts | 2
customer_list/common/static/fonts/ywiconfont/iconfont.css | 26 +++
customer_list/common/static/fonts/ywiconfont/iconfont.woff2 | 0
8 files changed, 265 insertions(+), 61 deletions(-)
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.css b/customer_list/common/static/fonts/ywiconfont/iconfont.css
index 5b653c4..3aad7fd 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.css
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "ywifont"; /* Project id 4655417 */
- src: url('iconfont.woff2?t=1725955398853') format('woff2'),
- url('iconfont.woff?t=1725955398853') format('woff'),
- url('iconfont.ttf?t=1725955398853') format('truetype');
+ src: url('iconfont.woff2?t=1728635307432') format('woff2'),
+ url('iconfont.woff?t=1728635307432') format('woff'),
+ url('iconfont.ttf?t=1728635307432') format('truetype');
}
.ywifont {
@@ -13,6 +13,26 @@
-moz-osx-font-smoothing: grayscale;
}
+.ywicon-grid:before {
+ content: "\eaa2";
+}
+
+.ywicon-tag22:before {
+ content: "\e66b";
+}
+
+.ywicon-duoweidu:before {
+ content: "\e669";
+}
+
+.ywicon-zhibiao:before {
+ content: "\e66a";
+}
+
+.ywicon-tishici:before {
+ content: "\e74f";
+}
+
.ywicon-shujuzhongxin:before {
content: "\e631";
}
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
index e0493bb..e9f1d18 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
index 7ffd187..08eecc8 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2 b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
index 973af1a..093e311 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
Binary files differ
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 015c6ae..3f16597 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -2,48 +2,58 @@
<template>
<div>
<!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
- <div class="w-full flex-column" ref="containerRef" v-resize="resizeHandler">
- <el-table
- ref="tableRef"
- :maxHeight="tableHeight"
- :cell-style="tableCellStyle"
- :header-cell-style="tableHeaderCellStyle"
- :data="chunkTableData[pager.index - 1]"
- :spanMethod="objectSpanMethod"
- class="w-full h-full"
- cellClassName="text-sm"
- headerCellClassName="text-sm"
- >
- <DefineColumns v-slot="{ cols }">
- <el-table-column
- v-for="(item, index) in cols"
- :label="item.title"
- :width="item.width"
- :sortable="item.type === 'time'"
- :key="index"
- :prop="index + ''"
- show-overflow-tooltip
- />
- </DefineColumns>
- <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
- <template v-if="data?.cols?.length > 0">
- <el-table-column
- v-for="(item, index) in colList"
- :label="item.title"
- :width="item.width"
- :sortable="item.type === 'time'"
- :key="index"
- :prop="index + ''"
- show-overflow-tooltip
- />
+ <div class="w-full flex-column">
+ <div class="flex-0 flex">
+ <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
+ </div>
+ <div class="flex-auto" ref="containerRef" v-resize="resizeHandler">
+ <el-table
+ ref="tableRef"
+ :maxHeight="tableHeight"
+ :cell-style="tableCellStyle"
+ :header-cell-style="tableHeaderCellStyle"
+ :data="chunkTableData[pager.index - 1]"
+ :spanMethod="objectSpanMethod"
+ class="w-full h-full"
+ cellClassName="text-sm"
+ headerCellClassName="text-sm"
+ >
+ <DefineColumns v-slot="{ cols }">
+ <template v-for="item in colList" :key="item.prop">
+ <el-table-column
+ v-if="item.isShow ?? true"
+ :label="item.label"
+ :width="item.width"
+ :sortable="item.sortable"
+ :key="item.prop"
+ :prop="item.prop"
+ show-overflow-tooltip
+ />
+ </template>
+ </DefineColumns>
+ <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
+ <template v-if="data?.cols?.length > 0">
+ <template v-for="item in colList" :key="item.prop">
+ <el-table-column
+ v-if="item.isShow ?? true"
+ :label="item.label"
+ :width="item.width"
+ :sortable="item.sortable"
+ :key="item.prop"
+ :prop="item.prop"
+ show-overflow-tooltip
+ />
+ </template>
+ </template>
+ </el-table-column>
+ <template v-else>
+ <template v-if="data?.cols?.length > 0">
+ <ReuseColumns :cols="colList" />
+ </template>
</template>
- </el-table-column>
- <template v-else>
- <template v-if="data?.cols?.length > 0">
- <ReuseColumns :cols="colList" />
- </template>
- </template>
- </el-table>
+ </el-table>
+ </div>
+
<el-pagination
style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important"
small
@@ -62,8 +72,10 @@
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import type { CSSProperties } from 'vue';
-import { nextTick, onMounted, reactive, ref, type PropType } from 'vue';
+import { computed, nextTick, onMounted, reactive, ref, type PropType } from 'vue';
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
+import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
+import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
const props = defineProps({
data: {
@@ -74,7 +86,26 @@
const [DefineColumns, ReuseColumns] = createReusableTemplate<{
cols: any[];
}>();
-const colList = ref([]);
+const colList = ref<TableCol[]>(
+ props.data.cols.map((item, index) => {
+ let isShow = true;
+ 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;
+ })
+);
+// 鎵�鏈夋樉绀虹殑 prop
+const visibleColProp = computed(() => colList.value.filter((item) => item.isShow == null || item.isShow).map((item) => item.prop));
+
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
@@ -145,8 +176,23 @@
* @param width
*/
const calcColWidth = (width) => {
- const maxStrList = props.data.cols.map((item) => item.title);
- const maxLenList = props.data.cols.map((item) => item.title.gblen());
+ // 杩斿洖鎵�鏈夋爣棰樺瓧绗︿覆
+ const maxStrList = props.data.cols.map((item, index) => {
+ if (visibleColProp.value.includes(index + '')) {
+ return item.title;
+ } else {
+ return '';
+ }
+ });
+ // 杩斿洖鎵�鏈夋爣棰樺瓧绗︿覆闀垮害
+ const maxLenList = props.data.cols.map((item, index) => {
+ if (visibleColProp.value.includes(index + '')) {
+ return item.title.gblen();
+ } else {
+ return 0;
+ }
+ });
+ // 璁＄畻姣忎竴鍒楁渶闀跨殑鏍囬瀛楃涓插拰鏍囬瀛楃涓查暱搴�
for (const item of props.data.values) {
item.map((subItem, index) => {
const subItemLen = subItem?.gblen();
@@ -158,12 +204,14 @@
}
// 鎬诲
let sumWidth = 0;
- // 璁＄畻瀹為檯鍒楀
+ // 璁＄畻鎵�鏈夊垪瀹為檯鍒楀
let maxWidthList = maxStrList.map((item, index) => {
- const width =
- getTextWidth(item, {
- size: '0.875rem',
- }) + measureWidthOffset;
+ // 涓嶅彲瑙佸垪瀹藉害涓� 0
+ const width = !visibleColProp.value.includes(index + '')
+ ? 0
+ : getTextWidth(item, {
+ size: '0.875rem',
+ }) + measureWidthOffset;
sumWidth += width;
return {
index,
@@ -191,7 +239,7 @@
// 鍔犱笂褰撳墠瀹藉害
curWidth += item.maxWidth;
// 娌″崰婊″鍣紝鎴栨槸鏈�灏忕殑閭ｄ釜锛岀洿鎺ュ彇瀹冪殑鏈�澶у搴�
- if (curWidth < width || index === 0) {
+ if (curWidth <= width || index === 0) {
maxWidthList[item.index].width = item.maxWidth;
continue;
}
@@ -217,10 +265,9 @@
// }
}
}
- colList.value = props.data.cols.map((item, index) => ({
- ...item,
- width: maxWidthList[index].width,
- }));
+ colList.value.map((item, index) => {
+ item.width = maxWidthList[index].width;
+ });
};
const resizeEvent = ({ width, height }) => {
if (width === 0 || height === 0) {
@@ -233,8 +280,6 @@
nextTick(() => {
calcPagerHeight();
});
- } else {
- colList.value = [];
}
setTimeout(() => {
@@ -320,6 +365,12 @@
//#endregion
+const colFilterChange = () => {
+ // 閲嶆柊璁＄畻瀹藉害
+ resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });
+
+};
+
const tableHeight = ref(0.7 * document.body.clientHeight);
onMounted(() => {
resizeEvent({
diff --git a/src/components/table/colFilter/ColFilter.vue b/src/components/table/colFilter/ColFilter.vue
new file mode 100644
index 0000000..5e48872
--- /dev/null
+++ b/src/components/table/colFilter/ColFilter.vue
@@ -0,0 +1,114 @@
+<template>
+ <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"
+ ></span>
+
+ <template #dropdown>
+ <div class="flex-column px-2 py-2">
+ <el-checkbox
+ class="hover:bg-[#edf3f8] w-full"
+ v-for="item in visibleOptionList"
+ :key="item.key"
+ v-model="item.value"
+ :label="item.label"
+ size="small"
+ @change="colCheckChange(item)"
+ :indeterminate="item.indeterminate"
+ />
+ </div>
+ </template>
+ </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed, ref } from 'vue';
+import { CheckOption, TableCol, allCheckKey } from './types';
+
+const props = defineProps({
+ columnList: {
+ type: Array as PropType<TableCol[]>,
+ default: () => [],
+ },
+ checkAllIsShow: {
+ type: Boolean,
+ default: true,
+ },
+});
+
+const emit = defineEmits<{
+ (event: 'change', option: CheckOption): void;
+}>();
+
+const colCheckChange = (option: CheckOption) => {
+ const { key } = option;
+ if (key === allCheckKey) {
+ if (option.indeterminate) {
+ option.indeterminate = false;
+ option.value = true;
+ }
+ checkOptionList.value.map((item) => {
+ item.value = option.value;
+ });
+ } else {
+ const options = checkOptionList.value.filter((item) => item.key !== allCheckKey);
+ const len = options.length;
+ const checkedLen = options.filter((item) => item.value).length;
+
+ const checkAllOption = checkOptionList.value.find((item) => item.key === allCheckKey);
+ if (!checkAllOption) return;
+ if (checkedLen === 0 || len === checkedLen) {
+ checkAllOption.indeterminate = false;
+ if (checkedLen === 0) {
+ checkAllOption.value = false;
+ } else {
+ checkAllOption.value = true;
+ }
+ } else {
+ checkAllOption.indeterminate = true;
+ }
+ }
+ emit('change', option);
+};
+const checkOptionList = computed<CheckOption[]>(() => {
+ let checkedCount = 0;
+ const options = props.columnList.map((item) => {
+ const result = {
+ key: item.prop,
+ label: item.label,
+ get value() {
+ return item.isShow == undefined ? true : !!item.isShow;
+ },
+ set value(val) {
+ item.isShow = val;
+ },
+ };
+
+ result.value && checkedCount++;
+ return result;
+ });
+ const total = options.length;
+ const firstOption: CheckOption = {
+ key: allCheckKey,
+ label: '鍏ㄩ��/涓嶉��',
+ value: false,
+ };
+ if (checkedCount === 0 || total === checkedCount) {
+ firstOption.indeterminate = false;
+ if (checkedCount === 0) {
+ firstOption.value = false;
+ } else {
+ firstOption.value = true;
+ }
+ } else {
+ firstOption.indeterminate = true;
+ }
+ options.unshift(firstOption);
+ return options;
+});
+
+const visibleOptionList = computed(() =>
+ props.checkAllIsShow ? checkOptionList.value : checkOptionList.value.filter((item) => item.key !== allCheckKey)
+);
+</script>
diff --git a/src/components/table/colFilter/types.ts b/src/components/table/colFilter/types.ts
new file mode 100644
index 0000000..d96e126
--- /dev/null
+++ b/src/components/table/colFilter/types.ts
@@ -0,0 +1,19 @@
+export type CheckOption = {
+ key: string;
+ label: string;
+ value: boolean;
+ indeterminate?: boolean;
+};
+
+
+export type TableCol = {
+ prop: string;
+ label: string;
+ width?: number;
+ isShow?:boolean
+ fixed?:'left' | 'right' | boolean,
+ showOverflowTooltip?:boolean,
+ sortable?:boolean
+};
+
+export const allCheckKey = '-999';
\ No newline at end of file
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 2374479..434eec1 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -1,7 +1,7 @@
// 瀛椾綋鍥炬爣 url
const cssCdnUrlList: Array<string> = [
'./static/fonts/iconfont/iconfont.css',
- './static/fonts/ywiconfont/iconfont.css',
+ './static/fonts/ywiconfont/iconfont.css?v=23',
'./static/fonts/fontawesome/fontawesome.min.css',
];
--
Gitblit v1.9.3