<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: 150px"
/>
<!--下拉 不需要获取数据 -->
<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: 150px"
>
<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>
优化，点击
弹窗外部，自动关闭
弹窗，点击嵌套
弹窗，不关闭主
弹窗
本文介绍了在系统中进行全局设置的方法，包括如何通过左侧菜单栏的sys_properties.LIST访问属性，以及如何设置glide.ui.reference.readonly.clickthrough来控制只读图标的行为。此外，还提到了如何为特定字段覆盖这些设置。
扫一扫
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
