添加我的组件搜索、表格、分页二开
This commit is contained in:
duan
parent
0e3759b34d
commit
30adf7b9a0
|
|
@ -0,0 +1 @@
|
|||
src/
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<myContent :list="list" />
|
||||
</template>
|
||||
<script setup>
|
||||
import myContent from "@/components/mycomponents/myContent.vue";
|
||||
import { reactive } from "vue";
|
||||
|
||||
let list = reactive({
|
||||
// 分页
|
||||
pagination: {
|
||||
background: false,
|
||||
layout: "prev,pager,next,jumper,total,sizes",
|
||||
pageSize: 20,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
// 表格上工具栏按钮
|
||||
toolbar: ["add"],
|
||||
// 表格字段
|
||||
cols: [
|
||||
// { type: "selection", width: 50, align: "center" },
|
||||
{ label: "设备名称", align: "center", prop: "id", show: false },
|
||||
{ label: "设备号", align: "center", prop: "username" },
|
||||
{ label: "品牌", align: "center", prop: "avatar", templet: "image" },
|
||||
{ label: "打印类型", align: "center", prop: "deptName" },
|
||||
{
|
||||
label: "状态",
|
||||
align: "center",
|
||||
prop: "status",
|
||||
templet: "switch",
|
||||
slotName: "status",
|
||||
},
|
||||
{ label: "创建时间", align: "center", prop: "createTime" },
|
||||
{
|
||||
label: "操作",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 280,
|
||||
templet: "tool",
|
||||
operat: ["edit", "delete"],
|
||||
},
|
||||
],
|
||||
// 表格数据
|
||||
pageData: [],
|
||||
});
|
||||
function getList() {
|
||||
// list.pageData=res
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<mySearch :list="list" @queryClick="handleQuery" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import mySearch from "@/components/mycomponents/mySearch.vue";
|
||||
let list = ref([
|
||||
{
|
||||
label: "设备名称",
|
||||
type: "input",
|
||||
prop: "keywords",
|
||||
attrs: {
|
||||
placeholder: "请输入设备名称",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "设备类型",
|
||||
prop: "keywords2",
|
||||
options: [
|
||||
{ label: "全部", value: 0 },
|
||||
{ label: "全部2", value: 1 },
|
||||
],
|
||||
attrs: {
|
||||
placeholder: "请选择设备类型",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
const emit = defineEmits(["queryClick"]);
|
||||
// 搜索-重置
|
||||
function handleQuery(d) {
|
||||
emit("queryClick", d);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1 +1,139 @@
|
|||
<template></template>
|
||||
<template>
|
||||
<div class="printerStyle">
|
||||
<search @queryClick="handleQuery" />
|
||||
<content :tableData="datas.tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import search from "./config/search.vue";
|
||||
import content from "./config/content.vue";
|
||||
let datas = reactive({
|
||||
query: {
|
||||
name: "",
|
||||
type: "",
|
||||
},
|
||||
tableData: [],
|
||||
});
|
||||
// 搜索-重置
|
||||
function handleQuery(d) {
|
||||
datas.query = d;
|
||||
getlist();
|
||||
}
|
||||
onMounted(() => {
|
||||
getlist();
|
||||
});
|
||||
function getlist() {
|
||||
console.log(datas.query, "获取列表");
|
||||
}
|
||||
// import { devices, models, subTypes } from './devices'
|
||||
// import addDevice from './components/addDevice'
|
||||
// import { tbPrintMachineGet, switchtbPrintMachine, delTableHandle } from '@/api/devices'
|
||||
// import dayjs from 'dayjs'
|
||||
// export default {
|
||||
// components: {
|
||||
// addDevice
|
||||
// },
|
||||
// data() {
|
||||
// return {
|
||||
// query: {
|
||||
// name: '',
|
||||
// type: ''
|
||||
// },
|
||||
// devices,
|
||||
// tableData: {
|
||||
// data: [],
|
||||
// page: 0,
|
||||
// size: 10,
|
||||
// loading: false,
|
||||
// total: 0
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// filters: {
|
||||
// devicesName(value) {
|
||||
// if (value == 'yxyPrinter') {
|
||||
// return '云想印'
|
||||
// } else if (value == 'fePrinter') '飞鹅'
|
||||
// // const item=devices.find(item => item.value == value)
|
||||
// // return item?item.name:''
|
||||
// },
|
||||
// modelsName(value) {
|
||||
// const item = models.find(item => item.value == value)
|
||||
// return item ? item.name : ''
|
||||
// },
|
||||
// subTypesName(value) {
|
||||
// if (value == "label") return '标签'
|
||||
// else if (value == 'kitchen') return '出品'
|
||||
// else if (value == 'cash') return '小票'
|
||||
// },
|
||||
// timeFilter(s) {
|
||||
// return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
|
||||
// }
|
||||
// },
|
||||
// mounted() {
|
||||
// this.getTableData()
|
||||
// },
|
||||
// methods: {
|
||||
// toUrl(item) {
|
||||
// this.$router.push({ path: '/devices/details', query: { id: item.id } })
|
||||
// },
|
||||
// // 切换状态
|
||||
// async statusChange(e, row) {
|
||||
// try {
|
||||
// this.tableData.loading = true
|
||||
// const data = { ...row }
|
||||
// data.status = e
|
||||
// if (data.id) {
|
||||
// delete data.createdAt
|
||||
// delete data.updatedAt
|
||||
// }
|
||||
// await switchtbPrintMachine(data)
|
||||
// this.getTableData()
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// this.tableData.loading = false
|
||||
// }
|
||||
// },
|
||||
// // 重置查询
|
||||
// resetHandle() {
|
||||
// this.query.name = ''
|
||||
// this.query.type = ''
|
||||
// this.getTableData()
|
||||
// },
|
||||
// // 分页回调
|
||||
// paginationChange(e) {
|
||||
// this.tableData.page = e - 1
|
||||
// this.getTableData()
|
||||
// },
|
||||
// // 删除
|
||||
// async delTableHandle(item) {
|
||||
// const res = await delTableHandle(item)
|
||||
// this.getTableData()
|
||||
// },
|
||||
// // 获取商品列表
|
||||
// async getTableData() {
|
||||
// this.tableData.loading = true
|
||||
// try {
|
||||
// const res = await tbPrintMachineGet({
|
||||
// name: this.query.name,
|
||||
// shopId: localStorage.getItem('shopId'),
|
||||
// contentType: this.query.type,
|
||||
// sort: '',
|
||||
// })
|
||||
// this.tableData.loading = false
|
||||
// this.tableData.data = res
|
||||
// this.tableData.total = res.length
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.printerStyle {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue