ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目微调

Browse Source
This commit is contained in:
hongawen
2024-10-11 14:46:17 +08:00
parent 1008946049
commit 9957857be0
10 changed files with 68 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/components/ProTable/index.vue
View File

@@ -14,27 +14,12 @@
<!-- 表格头部 操作按钮 -->
<div class="table-header">
<div class="header-button-lf">
<slot
name="tableHeader"
:selected-list="selectedList"
:selected-list-ids="selectedListIds"
:is-selected="isSelected"
/>
<slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
</div>
<div v-if="toolButton" class="header-button-ri">
<slot name="toolButton">
<el-button
v-if="showToolButton('refresh')"
:icon="Refresh"
circle
@click="getTableList"
/>
<el-button
v-if="showToolButton('setting') && columns.length"
:icon="Operation"
circle
@click="openColSetting"
/>
<el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
<el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
<el-button
v-if="showToolButton('search') && searchColumns?.length"
:icon="Search"
@@ -53,7 +38,6 @@
:border="border"
:row-key="rowKey"
@selection-change="selectionChange"
class="custom-table-header"
>
<!-- 默认插槽 -->
<slot />
@@ -72,11 +56,7 @@
<slot v-else :name="item.type" v-bind="scope" />
</template>
<!-- radio -->
<el-radio
v-if="item.type == 'radio'"
v-model="radio"
:label="scope.row[rowKey]"
>
<el-radio v-if="item.type == 'radio'" v-model="radio" :label="scope.row[rowKey]">
<i></i>
</el-radio>
<!-- sort -->
@@ -160,7 +140,7 @@ const props = withDefaults(defineProps<ProTableProps>(), {
border: true,
toolButton: true,
rowKey: "id",
searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
});
// table 实例
@@ -170,50 +150,25 @@ const tableRef = ref<InstanceType<typeof ElTable>>();
const uuid = ref("id-" + generateUUID());
// column 列类型
const columnTypes: TypeProps[] = [
"selection",
"radio",
"index",
"expand",
"sort",
];
const columnTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
// 是否显示搜索模块
const isShowSearch = ref(true);
// 控制 ToolButton 显示
const showToolButton = (key: "refresh" | "setting" | "search") => {
return Array.isArray(props.toolButton)
? props.toolButton.includes(key)
: props.toolButton;
return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
};
// 单选值
const radio = ref("");
// 表格多选 Hooks
const { selectionChange, selectedList, selectedListIds, isSelected } =
useSelection(props.rowKey);
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
// 表格操作 Hooks
const {
tableData,
pageable,
searchParam,
searchInitParam,
getTableList,
search,
reset,
handleSizeChange,
handleCurrentChange,
} = useTable(
props.requestApi,
props.initParam,
props.pagination,
props.dataCallback,
props.requestError
);
console.log(props, "175175175175175175");
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
// 清空选中数据列表
const clearSelection = () => tableRef.value!.clearSelection();
@@ -227,12 +182,6 @@ onMounted(() => {
// 处理表格数据
const processTableData = computed(() => {
console.log(
props.data,
tableData.value,
props.pagination,
"8888777777766666666188"
);
if (!props.data) return tableData.value;
if (!props.pagination) return props.data;
return props.data.slice(
@@ -256,15 +205,10 @@ const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
if (!enumValue) return;
// 如果当前 enumMap 存在相同的值 return
if (
enumMap.value.has(prop!) &&
(typeof enumValue === "function" || enumMap.value.get(prop!) === enumValue)
)
return;
if (enumMap.value.has(prop!) && (typeof enumValue === "function" || enumMap.value.get(prop!) === enumValue)) return;
// 当前 enum 为静态数据，则直接存储到 enumMap
if (typeof enumValue !== "function")
return enumMap.value.set(prop!, unref(enumValue!));
if (typeof enumValue !== "function") return enumMap.value.set(prop!, unref(enumValue!));
// 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
enumMap.value.set(prop!, []);
@@ -278,11 +222,8 @@ const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
provide("enumMap", enumMap);
// 扁平化 columns 的方法
const flatColumnsFunc = (
columns: ColumnProps[],
flatArr: ColumnProps[] = []
) => {
columns.forEach(async (col) => {
const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
columns.forEach(async col => {
if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
flatArr.push(col);
@@ -294,13 +235,13 @@ const flatColumnsFunc = (
// 设置 enumMap
await setEnumMap(col);
});
return flatArr.filter((item) => !item._children?.length);
return flatArr.filter(item => !item._children?.length);
};
// 过滤需要搜索的配置项 && 排序
const searchColumns = computed(() => {
return flatColumns.value
?.filter((item) => item.search?.el || item.search?.render)
?.filter(item => item.search?.el || item.search?.render)
.sort((a, b) => a.search!.order! - b.search!.order!);
});
@@ -317,7 +258,7 @@ searchColumns.value?.forEach((column, index) => {
// 列设置 ==> 需要过滤掉不需要设置的列
const colRef = ref();
const colSetting = tableColumns!.filter((item) => {
const colSetting = tableColumns!.filter(item => {
const { type, prop, isSetting } = item;
return !columnTypes.includes(type!) && prop !== "operation" && isSetting;
});
@@ -350,7 +291,7 @@ const dragSort = () => {
const [removedItem] = processTableData.value.splice(oldIndex!, 1);
processTableData.value.splice(newIndex!, 0, removedItem);
emit("dragSort", { newIndex, oldIndex });
},
}
});
};
@@ -373,11 +314,6 @@ defineExpose({
handleSizeChange,
handleCurrentChange,
clearSelection,
enumMap,
enumMap
});
</script>
<style lang="scss" scoped>
:deep(.custom-table-header .el-table__header-wrapper .el-table__header){
background-color: red !important; /* 修改为你想要的颜色 */
}
</style>