czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加我的组件搜索、表格、分页二开

Browse Source
This commit is contained in:
duan
2025-02-12 18:10:40 +08:00
parent 0e3759b34d
commit 30adf7b9a0
6 changed files with 577 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/components/mycomponents/myContent.vue Normal file
View File

@@ -0,0 +1,281 @@
<template>
<div>
<!-- 工具栏 -->
<template v-for="item in toolbar" :key="item">
<template v-if="typeof item === 'string'">
<!-- 新增 -->
<template v-if="item === 'add'">
<el-button type="success" icon="plus" @click="handleToolbar(item)">新增</el-button>
</template>
<!-- 删除 -->
<template v-else-if="item === 'delete'">
<el-button
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
删除
</el-button>
</template>
<!-- 导入 -->
<template v-else-if="item === 'import'">
<el-button type="default" icon="upload" @click="handleToolbar(item)">导入</el-button>
</template>
<!-- 导出 -->
<template v-else-if="item === 'export'">
<el-button type="default" icon="download" @click="handleToolbar(item)">导出</el-button>
</template>
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<el-button
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
{{ item.text }}
</el-button>
</template>
</template>
<!-- 表格 -->
<el-table ref="tableRef" border :data="pageData" style="margin-top: 20px">
<template v-for="col in cols" :key="col">
<el-table-column v-bind="col">
<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 === 'switch'">
<template v-if="col.prop">
<!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
<el-switch
v-model="scope.row[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.inactiveValue ?? 0"
:inline-prompt="true"
:active-text="col.activeText ?? ''"
:inactive-text="col.inactiveText ?? ''"
:validate-event="false"
@change="
pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
"
/>
</template>
</template>
<!-- 生成输入框组件 -->
<!-- <template v-else-if="col.templet === 'input'">
<template v-if="col.prop">
<el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
</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 === 'tool'">
<template v-for="item in col.operat ?? ['edit', 'delete']" :key="item">
<template v-if="typeof item === 'string'">
<!-- 编辑/删除 -->
<template v-if="item === 'edit' || item === 'delete'">
<el-button
:type="item === 'edit' ? 'primary' : 'danger'"
:icon="item"
size="small"
link
@click="
handleOperat({
name: item,
row: scope.row,
column: scope.column,
$index: scope.$index,
})
"
>
{{ item === "edit" ? "编辑" : "删除" }}
</el-button>
</template>
</template>
<!-- 其他 -->
<!-- <template v-else-if="typeof item === 'object'">
<el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
" :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
})
">
{{ item.text }}
</el-button>
</template> -->
</template>
</template>
<!-- 自定义 -->
<!-- <template v-else-if="col.templet === 'custom'">
<slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
</template> -->
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<div>
<el-pagination v-bind="pagination" @size-change="handleSizeChange" />
</div>
</div>
</template>
<script setup lang="ts">
// 定义接收的属性
const props = defineProps<{
list: any;
}>();
// 表格左侧工具栏
const toolbar = props.list.toolbar || ["add"];
// 删除ID集合 用于批量删除
const removeIds = ref<(number | string)[]>([]);
// 表格的数据
const pageData = props.list.pageData || [];
// 表格的列
const cols = props.list.cols;
// 开关属性修改
function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
// if (props.contentConfig.modifyAction) {
// props.contentConfig.modifyAction({
// [pk]: row[pk],
// field: field,
// value: value,
// });
// } else {
// ElMessage.error("未配置modifyAction");
// }
}
// 工具操作栏
function handleToolbar(name: string) {
switch (name) {
// case "refresh":
// handleRefresh();
// break;
// case "exports":
// handleOpenExportsModal();
// break;
// case "imports":
// handleOpenImportModal();
// break;
// case "search":
// emit("searchClick");
// break;
case "add":
// emit("addClick");
console.log("add", "挑时间");
break;
// case "delete":
// handleDelete();
// break;
// case "import":
// handleOpenImportModal(true);
// break;
// case "export":
// emit("exportClick");
// break;
default:
// emit("toolbarClick", name);
break;
}
}
// 操作列
function handleOperat(data: any) {
switch (data.name) {
case "edit":
// emit("editClick", data.row);
break;
case "delete":
// handleDelete(data.row[pk]);
break;
default:
// emit("operatClick", data);
break;
}
}
// 分页
const pagination = props.list.pagination;
// 分页切换
function handleSizeChange(value: number) {
pagination.pageSize = value;
// handleRefresh();
}
// function handleCurrentChange(value: number) {
// pagination.currentPage = value;
// handleRefresh();
// }
</script>

66
src/components/mycomponents/mySearch.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<template v-for="(item, index) in props.list" :key="item.prop">
<el-form-item :label="item.label" :prop="item.prop">
<!-- Label -->
<template #label>
{{ item.label }}
</template>
<!-- Input 输入框 -->
<template v-if="item.type === 'input' || item.type === undefined">
<el-input
v-model="queryParams[item.prop]"
v-bind="item.attrs"
@keyup.enter="handleQuery"
/>
</template>
<!-- Select 选择器 -->
<template v-else-if="item.type === 'select'">
<el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
<template v-for="option in item.options" :key="option.value">
<el-option :label="option.label" :value="option.value" />
</template>
</el-select>
</template>
<!-- TreeSelect 树形选择 -->
<!-- <template v-else-if="item.type === 'tree-select'">
<el-tree-select v-model="queryParams[item.prop]" v-bind="item.attrs" />
</template> -->
<!-- DatePicker 日期选择器 -->
<!-- <template v-else-if="item.type === 'date-picker'">
<el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
</template> -->
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery(1)">搜索</el-button>
<el-button icon="refresh" @click="handleQuery(2)">重置</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import type { FormInstance } from "element-plus";
// 定义接收的属性
const props = defineProps<{
list: any;
}>();
// 搜索表单数据
const queryParams = reactive<any>({});
// 重置操作
const queryFormRef = ref<FormInstance>();
// 自定义事件
const emit = defineEmits<{
queryClick: [queryParams: any];
}>();
// 查询/重置 操作
function handleQuery(index: number) {
if (index == 2) {
queryFormRef.value?.resetFields();
}
emit("queryClick", queryParams);
}
</script>
<style lang="scss" scoped></style>