-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhoumengxiang
committed
Nov 10, 2023
1 parent
5cb0d34
commit a4c4d2f
Showing
47 changed files
with
4,269 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <template> | ||
| <component | ||
| :is="column.search?.render ?? `el-${column.search?.el}`" | ||
| v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }" | ||
| v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]" | ||
| :data="column.search?.el === 'tree-select' ? columnEnum : []" | ||
| :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []" | ||
| > | ||
| <template v-if="column.search?.el === 'cascader'" #default="{ data }"> | ||
| <span>{{ data[fieldNames.label] }}</span> | ||
| </template> | ||
| <template v-if="column.search?.el === 'select'"> | ||
| <component | ||
| :is="`el-option`" | ||
| v-for="(col, index) in columnEnum" | ||
| :key="index" | ||
| :label="col[fieldNames.label]" | ||
| :value="col[fieldNames.value]" | ||
| ></component> | ||
| </template> | ||
| <slot v-else></slot> | ||
| </component> | ||
| </template> | ||
|
|
||
| <script setup lang="ts" name="SearchFormItem"> | ||
| import { computed, inject, ref } from "vue"; | ||
| import { handleProp } from "@/assets/js"; | ||
| import { ColumnProps } from "@/proTable/interface"; | ||
| interface SearchFormItem { | ||
| column: ColumnProps; | ||
| searchParam: { [key: string]: any }; | ||
| } | ||
| const props = defineProps<SearchFormItem>(); | ||
| // Re receive SearchParam | ||
| const _searchParam = computed(() => props.searchParam); | ||
| // 判断 fieldNames 设置 label && value && children 的 key 值 | ||
| const fieldNames = computed(() => { | ||
| return { | ||
| label: props.column.fieldNames?.label ?? "label", | ||
| value: props.column.fieldNames?.value ?? "value", | ||
| children: props.column.fieldNames?.children ?? "children" | ||
| }; | ||
| }); | ||
| // 接收 enumMap (el 为 select-v2 需单独处理 enumData) | ||
| const enumMap = inject("enumMap", ref(new Map())); | ||
| const columnEnum = computed(() => { | ||
| let enumData = enumMap.value.get(props.column.prop); | ||
| if (!enumData) return []; | ||
| if (props.column.search?.el === "select-v2" && props.column.fieldNames) { | ||
| enumData = enumData.map((item: { [key: string]: any }) => { | ||
| return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] }; | ||
| }); | ||
| } | ||
| return enumData; | ||
| }); | ||
| // 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children) | ||
| const handleSearchProps = computed(() => { | ||
| const label = fieldNames.value.label; | ||
| const value = fieldNames.value.value; | ||
| const children = fieldNames.value.children; | ||
| const searchEl = props.column.search?.el; | ||
| let searchProps = props.column.search?.props ?? {}; | ||
| if (searchEl === "tree-select") { | ||
| searchProps = { ...searchProps, props: { ...searchProps.props, label, children }, nodeKey: value }; | ||
| } | ||
| if (searchEl === "cascader") { | ||
| searchProps = { ...searchProps, props: { ...searchProps.props, label, value, children } }; | ||
| } | ||
| return searchProps; | ||
| }); | ||
| // 处理默认 placeholder | ||
| const placeholder = computed(() => { | ||
| const search = props.column.search; | ||
| if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) { | ||
| return { rangeSeparator: "至", startPlaceholder: "开始时间", endPlaceholder: "结束时间" }; | ||
| } | ||
| const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择"); | ||
| return { placeholder }; | ||
| }); | ||
| // 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示) | ||
| const clearable = computed(() => { | ||
| const search = props.column.search; | ||
| return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <template> | ||
| <div v-if="columns.length" class="card table-search"> | ||
| <el-form ref="formRef" :model="searchParam"> | ||
| <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol"> | ||
| <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index"> | ||
| <el-form-item> | ||
| <template #label> | ||
| <el-space :size="4"> | ||
| <span>{{ `${item.search?.label ?? item.label}` }}</span> | ||
| <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top"> | ||
| <i :class="'iconfont icon-yiwen'"></i> | ||
| </el-tooltip> | ||
| </el-space> | ||
| <span>:</span> | ||
| </template> | ||
| <SearchFormItem :column="item" :search-param="searchParam" /> | ||
| </el-form-item> | ||
| </GridItem> | ||
| <GridItem suffix> | ||
| <div class="operation"> | ||
| <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button> | ||
| <el-button :icon="Delete" @click="reset"> 重置 </el-button> | ||
| <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed"> | ||
| {{ collapsed ? "展开" : "合并" }} | ||
| <el-icon class="el-icon--right"> | ||
| <component :is="collapsed ? ArrowDown : ArrowUp"></component> | ||
| </el-icon> | ||
| </el-button> | ||
| </div> | ||
| </GridItem> | ||
| </Grid> | ||
| </el-form> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts" name="SearchForm"> | ||
| import { computed, ref } from "vue"; | ||
| import { ColumnProps } from "@/proTable/interface"; | ||
| import { BreakPoint } from "@/grid/interface"; | ||
| import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; | ||
| import SearchFormItem from "./components/SearchFormItem.vue"; | ||
| import Grid from "@/grid/index.vue"; | ||
| import GridItem from "@/grid/components/GridItem.vue"; | ||
| interface ProTableProps { | ||
| columns?: ColumnProps[]; // 搜索配置列 | ||
| searchParam?: { [key: string]: any }; // 搜索参数 | ||
| searchCol: number | Record<BreakPoint, number>; | ||
| search: (params: any) => void; // 搜索方法 | ||
| reset: (params: any) => void; // 重置方法 | ||
| } | ||
| // 默认值 | ||
| const props = withDefaults(defineProps<ProTableProps>(), { | ||
| columns: () => [], | ||
| searchParam: () => ({}) | ||
| }); | ||
| // 获取响应式设置 | ||
| const getResponsive = (item: ColumnProps) => { | ||
| return { | ||
| span: item.search?.span, | ||
| offset: item.search?.offset ?? 0, | ||
| xs: item.search?.xs, | ||
| sm: item.search?.sm, | ||
| md: item.search?.md, | ||
| lg: item.search?.lg, | ||
| xl: item.search?.xl | ||
| }; | ||
| }; | ||
| // 是否默认折叠搜索项 | ||
| const collapsed = ref(true); | ||
| // 获取响应式断点 | ||
| const gridRef = ref(); | ||
| const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint); | ||
| // 判断是否显示 展开/合并 按钮 | ||
| const showCollapse = computed(() => { | ||
| let show = false; | ||
| props.columns.reduce((prev, current) => { | ||
| prev += | ||
| (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) + | ||
| (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0); | ||
| if (typeof props.searchCol !== "number") { | ||
| if (prev >= props.searchCol[breakPoint.value]) show = true; | ||
| } else { | ||
| if (prev >= props.searchCol) show = true; | ||
| } | ||
| return prev; | ||
| }, 0); | ||
| return show; | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| @font-face { | ||
| font-family: "hdzkIcon"; /* Project id 4053247 */ | ||
| src: url('iconfont.ttf?t=1683597555982') format('truetype'); | ||
| } | ||
|
|
||
| .hdzkIcon { | ||
| font-family: "hdzkIcon" !important; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| .icon-arrow_down:before { | ||
| content: "\e634"; | ||
| } | ||
|
|
||
| .icon-user:before { | ||
| content: "\e633"; | ||
| } | ||
|
|
||
| .icon-org_tree:before { | ||
| content: "\e632"; | ||
| } | ||
|
|
||
| .icon-org_extend:before { | ||
| content: "\e631"; | ||
| } | ||
|
|
||
| .icon-anquan:before { | ||
| content: "\e630"; | ||
| } | ||
|
|
||
| .icon-fenzu:before { | ||
| content: "\e68f"; | ||
| } | ||
|
|
||
| .icon-daochu:before { | ||
| content: "\e690"; | ||
| } | ||
|
|
||
| .icon-dongzuo:before { | ||
| content: "\e691"; | ||
| } | ||
|
|
||
| .icon-kapianshitu:before { | ||
| content: "\e692"; | ||
| } | ||
|
|
||
| .icon-riqi:before { | ||
| content: "\e693"; | ||
| } | ||
|
|
||
| .icon-search:before { | ||
| content: "\e694"; | ||
| } | ||
|
|
||
| .icon-shaixuan:before { | ||
| content: "\e695"; | ||
| } | ||
|
|
||
| .icon-dayinji:before { | ||
| content: "\e696"; | ||
| } | ||
|
|
||
| .icon-chongzhi:before { | ||
| content: "\e697"; | ||
| } | ||
|
|
||
| .icon-shoucang:before { | ||
| content: "\e698"; | ||
| } | ||
|
|
||
| .icon-liebiaoshitu:before { | ||
| content: "\e699"; | ||
| } | ||
|
|
||
| .icon-weishoucang:before { | ||
| content: "\e69a"; | ||
| } | ||
|
|
||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.