<template>
<el
-table
-column
v
-if="col.show && col.type != 'selection' && col.type != 'radio'"
v
-bind="col"
:align="'center'"
showOverflowTooltip
>
<template #header>
<div class="table
-header
-div">
<span class="title
-span">{{ col.label }}</span>
<!
-- 控制筛选按钮
显隐 -->
<template v
-if="col.templet !== 'tool' && col.filter && col.prop">
<el
-popover
:
visible="
visible && col.prop === showKey"
placement="bottom"
:width="'fit
-content'"
>
<template #reference>
<!
-- 筛选icon
-->
<div class="filter
-container">
<el
-icon
@click.stop="toggleNameFilter(col.prop, col)"
size="17.4"
:class="{ 'filter
-active': searchData[col.prop] }"
>
<Filter />
</el
-icon>
</div>
</template>
<div v
-click
-outside="handleClickOutside">
<!
-- 输入
-->
<el
-input
v
-if="col.filter.filterFormType === 'input'"
v
-model="searchData[col.prop]"
:autofocus="true"
placeholder="请输入"
v
-bind="col.attrs"
@input="applyNameFilter"
clearable
style="margin
-top: 10px; width: 1
50px"
/>
<!
--下拉 不需要获取数据
-->
<template v
-if="!col.filter.needGetList">
<el
-select
v
-if="col.filter.filterFormType === 'select'"
filterable
:reserve
-keyword="false"
v
-model="searchData[col.prop]"
v
-bind="col.attrs"
@change="applyTagFilter"
clearable
style="margin
-top: 10px; width: 1
50px"
>
<el
-option
v
-for="item in col.filter.selectList"
:key="item"
:value="item.value"
:label="item.name"
/>
</el
-select>
<FkSelectTree
v
-if="col.filter.filterFormType === 'select
-tree'"
v
-model="searchData[col.prop]"
v
-bind="col.attrs"
/>
</template>
<!
--下拉 需要搜索获取后端接口数据
-->
<template v
-if="col.filter.needGetList">
<FkSelect
v
-if="col.filter.filterFormType === 'select'"
v
-bind="col.attrs"
v
-model="searchData[col.prop]"
:sourceData="javaList"
></FkSelect>
<!
-- 多选树下拉 需要搜索获取后端接口数据
-->
<FkSelectTree
v
-if="col.filter.filterFormType === 'select
-tree'"
v
-model="searchData[col.prop]"
v
-bind="col.attrs"
:data="javaList"
:sourceData="javaList"
></FkSelectTree>
</template>
<!
-- 日期 && 日期时间
-->
<el
-date
-picker
v
-if="
col.filter.filterFormType === 'daterange' ||
col.filter.filterFormType === 'datetimerange'
"
style="width: 360px"
v
-model="searchData[col.prop]"
:type="col.filter.filterFormType"
range
-separator="～"
start
-placeholder="开始时间"
end
-placeholder="结束时间"
:format="col.dateType"
@change="changeData($event, col.field, col.dateType)"
/>
<div class="mt" style="text
-align: right">
<el
-button type="info" link @click="cancelFilter(col.prop)">重置</el
-button>
<el
-button type="primary" link @click="searchFilter">筛选</el
-button>
</div>
</div>
</el
-popover>
</template>
</div>
</template>
<template #default="scope">
<!
-- 显示图片
-->
<template v
-if="col.templet === 'image'">
<template v
-if="col.prop">
<template v
-if="Array.isArray(scope.row[col.prop])">
<template v
-for="(item, index) in scope.row[col.prop]" :key="item">
<el
-image
:src="item"
:preview
-src
-list="scope.row[col.prop]"
:initial
-index="index"
:preview
-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
/>
</template>
</template>
<template v
-else>
<el
-image
:src="scope.row[col.prop]"
:preview
-src
-list="[scope.row[col.prop]]"
:preview
-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
/>
</template>
</template>
</template>
<!
-- 根据行的selectList
属性返回对应列表值
-->
<template v
-else
-if="col.templet === 'list'">
<template v
-if="col.prop">
{{ (col.selectList ?? {})[scope.row[col.prop]] }}
</template>
</template>
<!
-- 格式化
显示链接
-->
<template v
-else
-if="col.templet === 'url'">
<template v
-if="col.prop">
<el
-link type="primary" :href="scope.row[col.prop]" target="_blank">
{{ scope.row[col.prop] }}
</el
-link>
</template>
</template>
<!
-- 格式化为价格
-->
<template v
-else
-if="col.templet === 'price'">
<template v
-if="col.prop">
{{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
</template>
</template>
<!
-- 格式化为百分比
-->
<template v
-else
-if="col.templet === 'percent'">
<template v
-if="col.prop">{{ scope.row[col.prop] }}%</template>
</template>
<!
-- 显示图标
-->
<template v
-else
-if="col.templet === 'icon'">
<template v
-if="col.prop">
<template v
-if="scope.row[col.prop].startsWith('el
-icon
-')">
<el
-icon>
<component :is="scope.row[col.prop].replace('el
-icon
-', '')" />
</el
-icon>
</template>
<template v
-else>
<div class="i
-svg:{{ scope.row[col.prop] }}" />
</template>
</template>
</template>
<!
-- 格式化时间
-->
<template v
-else
-if="col.templet === 'date'">
<template v
-if="col.prop">
{{
scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY
-MM
-DD HH:mm:ss").value
: ""
}}
</template>
</template>
<!
-- 格式代码集
-->
<template v
-else
-if="col.templet === 'sys
-code'">
<FkSysCodeLable v
-if="col.prop" v
-model="scope.row[col.prop]" :code="col.sysCodeSetCode" />
</template>
<!
-- 可复制
-->
<template v
-else
-if="col.templet === 'copy'">
<el
-text>{{ scope.row[col.prop] }}</el
-text>
<copy
-button
v
-if="scope.row[col.prop]"
:text="scope.row[col.prop]"
style="margin
-left: 2px"
/>
</template>
<!
-- yes
-no
-->
<template v
-else
-if="col.templet === 'yes
-no'">
<el
-tag :type="scope.row[col.prop] == '1' ? 'success' : 'info'">
{{ scope.row[col.prop] == "1" ? "启用" : "禁用" }}
</el
-tag>
</template>
<!
-- translate
-->
<template v
-else
-if="col.templet === 'translate'">
{{ scope.row[col.prop + "Name"] }}
</template>
</template>
</el
-table
-column>
</template>
<script setup lang="ts">
import _ from "lodash";
import SysOrgAPI from "@/api/zxyy
-org
-service/sysOrg/sysOrg.api";
import { useSysCodeStore } from "@/store";
const sysCodeStore = useSysCodeStore();
import moment, { MomentInput } from "moment";
// 定义接收的
属性
const props = defineProps<{ col: any; permPrefix?: any; lastSelectFormData?: any }>();
// 重写方法
const emit = defineEmits(["filter", "cancelFilter"]);
// 解决办法：声明一下键值对的类型
type objType = {
[key: string]: any;
};
// 表头筛选处理
const showKey = ref(); // 当前展示哪个筛选窗
const
visible = ref(false); // 手动
控制筛选窗
显隐
const searchData = ref<objType>({}); // 搜索参数 每个表头字段
// 触发筛选
async function toggleNameFilter(key?: string, col?: any) {
if (!key) {
return;
}
// console.log(key, item);
if (col.filter.needGetList) {
await getJavaList(col); // 调用后端接口 获取下拉数据
}
if (
visible.value && showKey.value && showKey.value !== key) {
visible.value = false;
// fetchPageData(lastFormData, true);
}
showKey.value = key;
visible.value = true;
}
// 某些下拉数据 例如下拉大数据有
500条 直接赋值会导致表格卡顿 通过点击表头再去接口获取数据赋值就不会影响表格的渲染
// （列里面数据回
显使用后端给的中文，或者将javaList赋值给item的selectList）
let javaList = ref();
let javaListObj = ref<objType>({});
const getJavaList = async (col: any) => {
console.log("getJavaList");
if (javaListObj.value[col.filter.filterCodeSetId]) {
javaList.value = javaListObj.value[col.filter.filterCodeSetId];
console.log("getJavaList
-javaListObj", javaList.value);
return;
}
if (col.filter.filterCodeSetId == "org") {
console.log("filterCodeSetId", col.filter.filterCodeSetId);
javaList.value = await SysOrgAPI.getSysOrgOptions();
}
if (col.filter.filterCodeSetId == "person") {
// javaList.value = await SysOrgAPI.getSysOrgOptions();
}
if (col.filter.filterCodeSetId == "sys
-code") {
javaList.value = sysCodeStore.getSysCodeSetItems(col.sysCodeSetCode);
}
console.log("javaList", javaList.value);
javaListObj.value[col.filter.filterCodeSetId] = javaList.value;
console.log("javaListObj", javaListObj.value);
};
// 单独过滤
const applyNameFilter = () => {
// Filtering logic can be customized if needed
};
const applyTagFilter = () => {
// Filtering logic can be customized if needed
};
// 时间格式化
const changeData = (value: MomentInput[], key: string | number, dateType: string | undefined) => {
// console.log(value, key, dateType);
if (!_.isEmpty(value)) {
searchData.value[key][0] = value[0] ? moment(value[0]).format(dateType) : "";
searchData.value[key][1] = value[1] ? moment(value[1]).format(dateType) : "";
} else {
searchData.value[key] = [];
}
};
// 单个重置
function cancelFilter(key: string) {
searchData.value[key] = undefined;
emit("cancelFilter", key);
// let filters = props.lastSelectFormData.filters.filter((o: any) => {
// return o.column != showKey.value;
// });
// props.lastSelectFormData.filters = filters;
// let headers = props.lastSelectFormData.headers.filter((o: any) => {
// return o.field != showKey.value;
// });
// props.lastSelectFormData.headers = headers;
visible.value = false;
// console.log("cancelFilter", searchData.value);
// fetchPageData(lastFormData, true);
//emit("cancelFilter", key);
//emit("filter", props.lastSelectFormData);
}
// 筛选
const searchFilter = () => {
console.log("searchFilter");
visible.value = false;
let filters = [];
let headers = [];
for (const key in searchData.value) {
const col = props.col;
if (col && Object.hasOwnProperty.call(searchData.value, key) && searchData.value[key]) {
filters.push({
column: key,
value:
props.col.filter.filterValueType === "string"
? searchData.value[key].join(",")
: searchData.value[key],
type: col.filter.filterType,
operator: col.filter.filterOperator,
});
headers.push({
field: key,
name: col.label,
dataType: col.filter.filterDataType,
codeSetId: col.filter.filterCodeSetId,
});
}
}
props.lastSelectFormData.filters = filters;
props.lastSelectFormData.headers = headers;
emit("filter", props.lastSelectFormData);
console.log("searchFilter1");
console.log("searchFilter2", props.lastSelectFormData);
};
// 监听外部传入的 modelValue 变化
watch(
() => props.lastSelectFormData.filters,
(newValue) => {
if (!newValue || newValue.length == 0) {
searchData.value = {};
visible.value = false;
}
},
{ immediate: true }
);
// 点击外部区域关闭弹窗
import { ClickOutside as vClickOutside } from "element
-plus";
defineComponent({
directives: { "click
-outside": vClickOutside }, // 局部注册
});
const handleClickOutside = () => {
visible.value = false;
};
</script>
<style lang="scss" scoped>
:deep(.el
-table) {
// height: 700px; /* 设置表格整体固定高度 */
thead {
.cell {
display: flex;
min
-width: 100px;
position: relative;
.table
-header
-div {
// flex: 1;
display: flex;
.title
-span {
flex
-grow: 1;
word
-break: break
-word;
/* 允许单词在任何地方断行 */
}
.el
-only
-child__content {
height: 23px;
}
.icon
-span {
flex
-shrink: 0;
margin
-top: 1px;
margin
-left:
5px;
cursor: pointer;
/* 防止缩小 */
/* 给图标和标题之间添加一些间距 */
}
}
.caret
-wrapper {
margin
-top:
5px;
}
}
}
}
.filter
-container {
display: flex;
justify
-content: center;
align
-items: center;
}
/* 筛选图标激活状态样式 */
.el
-icon.filter
-active {
color: #409eff !important; /* Element UI的主题蓝色 */
}
</style>
优化，点击弹窗外部，自动关闭弹窗，点击嵌套弹窗，不关闭主弹窗
本文介绍了一种在页面上控制组件显示与隐藏的方法，通过在需要控制的组件上使用bind-visible属性绑定值，并利用js代码在按钮点击事件中实现切换。文章还提供了一种更灵活的写法，同时解决了组件初次加载时短暂显示的问题，提升用户体验。
扫一扫
3680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
