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

打印机页面添加。使用自带框架

This commit is contained in:
duan 2025-02-14 09:18:38 +08:00
parent 30adf7b9a0
commit c918b00887
11 changed files with 1007 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
src/components/CURD/PageContent.vue
View File

@ -8,58 +8,37 @@
<template v-if="typeof item === 'string'">
<!-- 新增 -->
<template v-if="item === 'add'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="success"
icon="plus"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="success" icon="plus"
@click="handleToolbar(item)">
新增
</el-button>
</template>
<!-- 删除 -->
<template v-else-if="item === 'delete'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
:disabled="removeIds.length === 0" @click="handleToolbar(item)">
删除
</el-button>
</template>
<!-- 导入 -->
<template v-else-if="item === 'import'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="default"
icon="upload"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
@click="handleToolbar(item)">
导入
</el-button>
</template>
<!-- 导出 -->
<template v-else-if="item === 'export'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="default"
icon="download"
@click="handleToolbar(item)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
@click="handleToolbar(item)">
导出
</el-button>
</template>
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
:type="item.type ?? 'default'" @click="handleToolbar(item.name)">
{{ item.text }}
</el-button>
</template>
@ -88,68 +67,36 @@
</template>
<!-- 导出 -->
<template v-else-if="item === 'exports'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:export`]"
icon="download"
circle
title="导出"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
@click="handleToolbar(item)" />
</template>
<!-- 导入 -->
<template v-else-if="item === 'imports'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:import`]"
icon="upload"
circle
title="导入"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
@click="handleToolbar(item)" />
</template>
<!-- 搜索 -->
<template v-else-if="item === 'search'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:query`]"
icon="search"
circle
title="搜索"
@click="handleToolbar(item)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
@click="handleToolbar(item)" />
</template>
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<template v-if="item.auth">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
:title="item.title" @click="handleToolbar(item.name)" />
</template>
<template v-else>
<el-button
:icon="item.icon"
circle
:title="item.title"
@click="handleToolbar(item.name)"
/>
<el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
</template>
</template>
</template>
</div>
</div>
<!-- 列表 -->
<el-table
ref="tableRef"
v-loading="loading"
v-bind="contentConfig.table"
:data="pageData"
:row-key="pk"
@selection-change="handleSelectionChange"
@filter-change="handleFilterChange"
>
<el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
@selection-change="handleSelectionChange" @filter-change="handleFilterChange">
<template v-for="col in cols" :key="col">
<el-table-column v-if="col.show" v-bind="col">
<template #default="scope">
@ -158,22 +105,15 @@
<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"
<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`"
/>
: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]]"
<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`"
/>
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
</template>
</template>
</template>
@ -195,30 +135,20 @@
<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"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
@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"
:disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @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'"
<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)"
/>
@blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
</template>
</template>
<!-- 格式化为价格 -->
@ -250,7 +180,7 @@
{{
scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
.value
.value
: ""
}}
</template>
@ -261,45 +191,30 @@
<template v-if="typeof item === 'string'">
<!-- 编辑/删除 -->
<template v-if="item === 'edit' || item === 'delete'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
:type="item === 'edit' ? 'primary' : 'danger'"
:icon="item"
size="small"
link
@click="
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
: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="
<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>
@ -317,33 +232,18 @@
<template v-if="showPagination">
<el-scrollbar>
<div class="mt-[12px]">
<el-pagination
v-bind="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-scrollbar>
</template>
<!-- 导出弹窗 -->
<el-dialog
v-model="exportsModalVisible"
:align-center="true"
title="导出数据"
width="600px"
style="padding-right: 0"
@close="handleCloseExportsModal"
>
<el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
@close="handleCloseExportsModal">
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="exportsFormRef"
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="exportsFormData"
:rules="exportsFormRules"
>
<el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
:model="exportsFormData" :rules="exportsFormRules">
<el-form-item label="文件名" prop="filename">
<el-input v-model="exportsFormData.filename" clearable />
</el-form-item>
@ -353,16 +253,10 @@
<el-form-item label="数据源" prop="origin">
<el-select v-model="exportsFormData.origin">
<el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
<el-option
label="选中数据 (所有选中的数据)"
:value="ExportsOriginEnum.SELECTED"
:disabled="selectionData.length <= 0"
/>
<el-option
label="全量数据 (所有分页的数据)"
:value="ExportsOriginEnum.REMOTE"
:disabled="contentConfig.exportsAction === undefined"
/>
<el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
:disabled="selectionData.length <= 0" />
<el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
:disabled="contentConfig.exportsAction === undefined" />
</el-select>
</el-form-item>
<el-form-item label="字段" prop="fields">
@ -383,35 +277,17 @@
</template>
</el-dialog>
<!-- 导入弹窗 -->
<el-dialog
v-model="importModalVisible"
:align-center="true"
title="导入数据"
width="600px"
style="padding-right: 0"
@close="handleCloseImportModal"
>
<el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
@close="handleCloseImportModal">
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="importFormRef"
label-width="auto"
style="padding-right: var(--el-dialog-padding-primary)"
:model="importFormData"
:rules="importFormRules"
>
<el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
:model="importFormData" :rules="importFormRules">
<el-form-item label="文件名" prop="files">
<el-upload
ref="uploadRef"
v-model:file-list="importFormData.files"
class="w-full"
<el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:drag="true"
:limit="1"
:auto-upload="false"
:on-exceed="handleFileExceed"
>
:drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
<span>将文件拖到此处，或</span>
@ -420,13 +296,8 @@
<template #tip>
<div class="el-upload__tip">
*.xlsx / *.xls
<el-link
v-if="contentConfig.importTemplate"
type="primary"
icon="download"
:underline="false"
@click="handleDownloadTemplate"
>
<el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
@click="handleDownloadTemplate">
下载模板
</el-link>
</div>
@ -438,11 +309,7 @@
<!-- 弹窗底部操作按钮 -->
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button
type="primary"
:disabled="importFormData.files.length === 0"
@click="handleImportSubmit"
>
<el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
确 定
</el-button>
<el-button @click="handleCloseImportModal">取 消</el-button>
@ -489,7 +356,8 @@ const pk = props.contentConfig.pk ?? "id";
// 表格左侧工具栏
const toolbar = props.contentConfig.toolbar ?? ["add", "delete"];
// 表格右侧工具栏
const defaultToolbar = props.contentConfig.defaultToolbar ?? ["refresh", "filter"];
const defaultToolbar = props.contentConfig.defaultToolbar ?? [];
// const defaultToolbar = props.contentConfig.defaultToolbar ?? ["refresh", "filter"];
// 表格列
const cols = ref(
props.contentConfig.cols.map((col) => {
@ -912,10 +780,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
.indexAction(
showPagination
? {
[request.pageName]: pagination.currentPage,
[request.limitName]: pagination.pageSize,
...formData,
}
[request.pageName]: pagination.currentPage,
[request.limitName]: pagination.pageSize,
...formData,
}
: formData
)
.then((data) => {

65
src/components/CURD/PageModal.vue
View File

@ -1,20 +1,9 @@
<template>
<!-- drawer -->
<template v-if="modalConfig.component === 'drawer'">
<el-drawer
v-model="modalVisible"
:append-to-body="true"
v-bind="modalConfig.drawer"
@close="handleCloseModal"
>
<el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
<!-- 表单 -->
<el-form
ref="formRef"
label-width="auto"
v-bind="modalConfig.form"
:model="formData"
:rules="formRules"
>
<el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop">
<el-col v-show="!item.hidden" v-bind="item.col">
@ -23,12 +12,7 @@
<template v-if="item.tips" #label>
<span>
{{ item.label }}
<el-tooltip
placement="bottom"
effect="light"
:content="item.tips"
:raw-content="true"
>
<el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
<el-icon style="vertical-align: -0.15em" size="16">
<QuestionFilled />
</el-icon>
@ -87,12 +71,7 @@
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
/>
<slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
</template>
</el-form-item>
</el-col>
@ -113,26 +92,13 @@
</template>
<!-- dialog -->
<template v-else>
<el-dialog
v-model="modalVisible"
:align-center="true"
:append-to-body="true"
width="70vw"
v-bind="modalConfig.dialog"
style="padding-right: 0"
@close="handleCloseModal"
>
<el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
<!-- 滚动 -->
<el-scrollbar max-height="60vh">
<!-- 表单 -->
<el-form
ref="formRef"
label-width="auto"
v-bind="modalConfig.form"
style="padding-right: var(--el-dialog-padding-primary)"
:model="formData"
:rules="formRules"
>
<el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop">
<el-col v-show="!item.hidden" v-bind="item.col">
@ -141,12 +107,7 @@
<template v-if="item.tips" #label>
<span>
{{ item.label }}
<el-tooltip
placement="bottom"
effect="light"
:content="item.tips"
:raw-content="true"
>
<el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
<el-icon style="vertical-align: -0.15em" size="16">
<QuestionFilled />
</el-icon>
@ -205,12 +166,8 @@
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
/>
<slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
:attrs="item.attrs" />
</template>
</el-form-item>
</el-col>

75
src/components/mycomponents/myContent.vue
View File

@ -9,12 +9,7 @@
</template>
<!-- 删除 -->
<template v-else-if="item === 'delete'">
<el-button
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
<el-button type="danger" icon="delete" :disabled="removeIds.length === 0" @click="handleToolbar(item)">
删除
</el-button>
</template>
@ -29,11 +24,7 @@
</template>
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<el-button
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
<el-button :icon="item.icon" :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
{{ item.text }}
</el-button>
</template>
@ -48,22 +39,15 @@
<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"
<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`"
/>
: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]]"
<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`"
/>
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
</template>
</template>
</template>
@ -85,18 +69,11 @@
<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="
<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>
<!-- 生成输入框组件 -->
@ -136,7 +113,7 @@
{{
scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
.value
.value
: ""
}}
</template>
@ -147,20 +124,14 @@
<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,
})
"
>
<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>
@ -220,6 +191,11 @@ function handleModify(field: string, value: boolean | string | number, row: Reco
// ElMessage.error("未配置modifyAction");
// }
}
// 定义自定义事件
const emit = defineEmits(['addClick'])
// 工具操作栏
function handleToolbar(name: string) {
switch (name) {
@ -236,8 +212,7 @@ function handleToolbar(name: string) {
// emit("searchClick");
// break;
case "add":
// emit("addClick");
console.log("add", "挑时间");
emit("addClick");
break;
// case "delete":
// handleDelete();

122
src/views/devices/config/add.ts Normal file
View File

@ -0,0 +1,122 @@
import UserAPI, { type UserForm } from "@/api/system/user";
import type { IModalConfig } from "@/components/CURD/types";
const modalConfig: IModalConfig<UserForm> = {
pageName: "sys:user",
dialog: {
title: "新增用户",
width: 800,
draggable: true,
},
form: {
labelWidth: 100,
},
formAction: UserAPI.add,
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "用户名",
prop: "username",
rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户名",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "用户昵称",
prop: "nickname",
rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户昵称",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "所属部门",
prop: "deptId",
rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
type: "tree-select",
attrs: {
placeholder: "请选择所属部门",
data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
},
{
label: "角色",
prop: "roleIds",
rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
type: "select",
attrs: {
placeholder: "请选择",
multiple: true,
},
options: [],
initialValue: [],
},
{
type: "input",
label: "手机号码",
prop: "mobile",
rules: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
attrs: {
placeholder: "请输入手机号码",
maxlength: 11,
},
},
{
label: "邮箱",
prop: "email",
rules: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
type: "input",
attrs: {
placeholder: "请输入邮箱",
maxlength: 50,
},
},
{
label: "状态",
prop: "status",
type: "radio",
options: [
{ label: "正常", value: 1 },
{ label: "禁用", value: 0 },
],
initialValue: 1,
},
],
};
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
export default reactive(modalConfig);

67
src/views/devices/config/content.ts Normal file
View File

@ -0,0 +1,67 @@
import UserAPI from "@/api/system/user";
import RoleAPI from "@/api/system/role";
import type { UserPageQuery } from "@/api/system/user";
import type { IContentConfig } from "@/components/CURD/types";
const contentConfig: IContentConfig<UserPageQuery> = {
pageName: "sys:user",
table: {
border: true,
highlightCurrentRow: true,
},
pagination: {
background: true,
layout: "prev,pager,next,jumper,total,sizes",
pageSize: 20,
pageSizes: [10, 20, 30, 50],
},
indexAction: function (params) {
return UserAPI.getPage(params);
},
deleteAction: UserAPI.deleteByIds,
importAction(file) {
return UserAPI.import(1, file);
},
exportAction: UserAPI.export,
importTemplate: UserAPI.downloadTemplate,
importsAction(data) {
// 模拟导入数据
console.log("importsAction", data);
return Promise.resolve();
},
exportsAction: async function (params) {
// 模拟获取到的是全量数据
const res = await UserAPI.getPage(params);
console.log("exportsAction", res.list);
return res.list;
},
pk: "id",
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"],
},
],
};
export default contentConfig;

5
src/views/devices/config/content.vue
View File

@ -1,5 +1,5 @@
<template>
<myContent :list="list" />
<myContent :list="list" @addClick="addClick" />
</template>
<script setup>
import myContent from "@/components/mycomponents/myContent.vue";
@ -42,7 +42,8 @@ let list = reactive({
// 表格数据
pageData: [],
});
function getList() {
function addClick() {
console.log(1)
// list.pageData=res
}
</script>

133
src/views/devices/config/content2.ts Normal file
View File

@ -0,0 +1,133 @@
import type { IContentConfig } from "@/components/CURD/types";
const contentConfig: IContentConfig = {
pageName: "sys:user",
table: {
showOverflowTooltip: true,
},
toolbar: [],
indexAction: function (params) {
// 模拟发起网络请求获取列表数据
console.log("indexAction:", params);
return Promise.resolve({
total: 2,
list: [
{
id: 1,
username: "tom",
avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
percent: 99,
price: 10,
url: "https://www.baidu.com",
icon: "el-icon-setting",
gender: 1,
status: 1,
status2: 1,
sort: 99,
createTime: 1715647982437,
},
{
id: 2,
username: "jerry",
avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
percent: 88,
price: 999,
url: "https://www.google.com",
icon: "el-icon-user",
gender: 0,
status: 0,
status2: 0,
sort: 0,
createTime: 1715648977426,
},
],
});
},
modifyAction(data) {
// 模拟发起网络请求修改字段
// console.log("modifyAction:", data);
ElMessage.success(JSON.stringify(data));
return Promise.resolve(null);
},
cols: [
{ type: "index", width: 50, align: "center" },
{ label: "ID", align: "center", prop: "id", show: false },
{ label: "文本", align: "center", prop: "username" },
{ label: "图片", align: "center", prop: "avatar", templet: "image" },
{
label: "百分比",
align: "center",
prop: "percent",
templet: "percent",
},
{
label: "货币符",
align: "center",
prop: "price",
templet: "price",
priceFormat: "$",
},
{ label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
{ label: "图标", align: "center", prop: "icon", templet: "icon" },
{
label: "列表值",
align: "center",
prop: "gender",
templet: "list",
selectList: { "0": "女", "1": "男" },
},
{
label: "自定义",
align: "center",
prop: "status",
templet: "custom",
slotName: "status",
},
{
label: "Switch",
align: "center",
prop: "status2",
templet: "switch",
activeValue: 1,
inactiveValue: 0,
activeText: "启用",
inactiveText: "禁用",
},
{
label: "输入框",
align: "center",
prop: "sort",
templet: "input",
inputType: "number",
},
{
label: "日期格式化",
align: "center",
prop: "createTime",
minWidth: 120,
templet: "date",
dateFormat: "YYYY/MM/DD HH:mm:ss",
},
{
label: "操作栏",
align: "center",
fixed: "right",
width: 220,
templet: "tool",
operat: [
{
name: "reset_pwd",
auth: "password:reset",
icon: "refresh-left",
text: "重置密码",
type: "primary",
render(row) {
return row.id === 1;
},
},
],
},
],
};
export default contentConfig;

117
src/views/devices/config/edit.ts Normal file
View File

@ -0,0 +1,117 @@
import UserAPI, { type UserForm } from "@/api/system/user";
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { useAppStore } from "@/store";
const modalConfig: IModalConfig<UserForm> = {
pageName: "sys:user",
component: "drawer",
drawer: {
title: "修改用户",
size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
},
pk: "id",
formAction: function (data) {
return UserAPI.update(data.id as number, data);
},
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "用户名",
prop: "username",
rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户名",
readonly: true,
},
},
{
label: "用户昵称",
prop: "nickname",
rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户昵称",
},
},
{
label: "所属部门",
prop: "deptId",
rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
type: "tree-select",
attrs: {
placeholder: "请选择所属部门",
data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
},
{
label: "角色",
prop: "roleIds",
rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
type: "select",
attrs: {
placeholder: "请选择",
multiple: true,
},
options: [],
initialValue: [],
},
{
type: "input",
label: "手机号码",
prop: "mobile",
rules: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
attrs: {
placeholder: "请输入手机号码",
maxlength: 11,
},
},
{
label: "邮箱",
prop: "email",
rules: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
type: "input",
attrs: {
placeholder: "请输入邮箱",
maxlength: 50,
},
},
{
label: "状态",
prop: "status",
type: "switch",
attrs: {
activeText: "正常",
inactiveText: "禁用",
activeValue: 1,
inactiveValue: 0,
},
},
],
};
export default reactive(modalConfig);

44
src/views/devices/config/search.ts Normal file
View File

@ -0,0 +1,44 @@
import DeptAPI from "@/api/system/dept";
import type { ISearchConfig } from "@/components/CURD/types";
const searchConfig: ISearchConfig = {
pageName: "sys:user",
formItems: [
{
type: "input",
label: "设备名称",
prop: "keywords",
attrs: {
placeholder: "请输入设备名称",
clearable: true,
style: {
width: "200px",
},
},
},
{
type: "tree-select",
label: "设备类型",
prop: "deptId",
attrs: {
placeholder: "请选择设备类型",
data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
clearable: true,
style: {
width: "150px",
},
},
async initFn(formItem) {
formItem.attrs.data = await DeptAPI.getOptions();
// 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
// this.attrs!.data = await DeptAPI.getOptions();
},
},
],
};
export default searchConfig;

285
src/views/devices/printer copy.vue Normal file
View File

@ -0,0 +1,285 @@
<template>
<div class="printerStyle">
<search @queryClick="handleQuery" />
<content :tableData="datas.tableData" @addClick="handleAdd" />
<!-- 新增 -->
<page-modal ref="addModalRef" :modal-config="addmodalConfig" @submit-click="handleSubmitClick">
<template #gender="scope">
<Dict v-model="scope.formData[scope.prop]" code="gender" />
</template>
</page-modal>
</div>
</template>
<script setup>
import search from "./config/search.vue";
import content from "./config/content.vue";
import UserAPI from "@/api/system/user";
let datas = reactive({
query: {
name: "",
type: "",
},
tableData: [],
});
// 搜索-重置
function handleQuery(d) {
datas.query = d;
getlist();
}
onMounted(() => {
getlist();
});
function getlist() {
console.log(datas.query, "获取列表");
}
let addModalRef = ref(null)
// 新增
const addmodalConfig = {
pageName: "sys:user",
dialog: {
title: "新增打印机",
width: 800,
draggable: true,
},
form: {
labelWidth: 100,
},
formAction: UserAPI.add,
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
// {
// label: "用户名",
// prop: "username",
// rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
// type: "input",
// attrs: {
// placeholder: "请输入用户名",
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
// {
// label: "用户昵称",
// prop: "nickname",
// rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
// type: "input",
// attrs: {
// placeholder: "请输入用户昵称",
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
{
label: "打印机品牌",
prop: "deptId",
// rules: [{ required: true, message: "打印机品牌不能为空", trigger: "blur" }],
type: "tree-select",
attrs: {
placeholder: "请选择打印机品牌",
data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
},
{
label: "角色",
prop: "roleIds",
rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
type: "select",
attrs: {
placeholder: "请选择",
multiple: true,
},
options: [],
initialValue: [],
},
{
type: "input",
label: "手机号码",
prop: "mobile",
rules: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
attrs: {
placeholder: "请输入手机号码",
maxlength: 11,
},
},
{
label: "邮箱",
prop: "email",
rules: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
type: "input",
attrs: {
placeholder: "请输入邮箱",
maxlength: 50,
},
},
{
label: "状态",
prop: "status",
type: "radio",
options: [
{ label: "正常", value: 1 },
{ label: "禁用", value: 0 },
{ label: "禁用2", value: 3 },
],
initialValue: 1,
}, {
label: "状态",
prop: "status2",
type: "checkbox",
options: [
{ label: "正常", value: 1 },
{ label: "禁用", value: 0 },
{ label: "禁用2", value: 3 },
],
initialValue: 1,
},
],
};
function handleAdd() {
addModalRef.value?.setModalVisible();
}
// 新增的回调
function handleSubmitClick(data) {
console.log(data)
}
// 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>

269
src/views/devices/printer.vue
View File

@ -1,139 +1,144 @@
<template>
<div class="printerStyle">
<search @queryClick="handleQuery" />
<content :tableData="datas.tableData" />
<div class="app-container">
<!-- 列表 -->
<template v-if="isA">
<!-- 搜索 -->
<page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
@reset-click="handleResetClick" />
<!-- 列表 -->
<page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
<template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
</el-tag>
</template>
<template #gender="scope">
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
</template>
<template #mobile="scope">
<el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
</template>
</page-content>
<!-- 新增 -->
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
<template #gender="scope">
<Dict v-model="scope.formData[scope.prop]" code="gender" />
</template>
</page-modal>
<!-- 编辑 -->
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
<template #gender="scope">
<Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
</template>
</page-modal>
</template>
<template v-else>
<page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
<template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
</el-tag>
</template>
</page-content>
</template>
</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();
<script setup lang="ts">
import UserAPI from "@/api/system/user";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import contentConfig2 from "./config/content2";
import editModalConfig from "./config/edit";
import searchConfig from "./config/search";
const {
searchRef,
contentRef,
addModalRef,
editModalRef,
handleQueryClick,
handleResetClick,
// handleAddClick,
// handleEditClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
handleFilterChange,
} = usePage();
// 新增
async function handleAddClick() {
addModalRef.value?.setModalVisible();
// 加载部门下拉数据源
addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
onMounted(() => {
getlist();
});
function getlist() {
console.log(datas.query, "获取列表");
// 编辑
async function handleEditClick(row: IObject) {
editModalRef.value?.handleDisabled(false);
editModalRef.value?.setModalVisible();
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const data = await UserAPI.getFormData(row.id);
editModalRef.value?.setFormData(data);
}
// 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)
// }
// }
// }
// }
// 其他工具栏
function handleToolbarClick(name: string) {
console.log(name);
if (name === "custom1") {
ElMessage.success("点击了自定义1按钮");
}
}
// 其他操作列
async function handleOperatClick(data: IOperatData) {
console.log(data);
// 重置密码
if (data.name === "reset_pwd") {
ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(({ value }) => {
if (!value || value.length < 6) {
ElMessage.warning("密码至少需要6位字符，请重新输入");
return false;
}
UserAPI.resetPassword(data.row.id, value).then(() => {
ElMessage.success("密码重置成功，新密码是：" + value);
});
});
} else if (data.name === "detail") {
// 禁用表单编辑
editModalRef.value?.handleDisabled(true);
// 打开抽屉
editModalRef.value?.setModalVisible();
// 修改抽屉标题
editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const formData = await UserAPI.getFormData(data.row.id);
// 设置表单数据
editModalRef.value?.setFormData(formData);
}
}
// 切换示例
const isA = ref(true);
</script>
<style scoped lang="scss">
.printerStyle {
padding: 20px;
background-color: #fff;
}
</style>