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

管理端细节修改

Browse Source
This commit is contained in:
YeMingfei666
2026-05-07 15:34:38 +08:00
parent ffad9432c5
commit 13bd39fbed
36 changed files with 2915 additions and 1482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,43 +3,64 @@
<!-- 表格工具栏 -->
<div class="flex-x-between mb-[10px]">
<!-- 左侧工具栏 -->
<div style="display: flex;">
<div style="display: flex">
<template v-for="item in toolbar" :key="item">
<template v-if="typeof item === 'string'">
<!-- 新增 -->
<template v-if="item === 'add'">
<el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="primary" icon="plus"
@click="handleToolbar(item)">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="primary"
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-if="item.hidden === undefined || item.hidden === false"
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" :type="item.type ?? 'default'"
@click="handleToolbar(item.name)">
<el-button
v-if="item.hidden === undefined || item.hidden === false"
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
:type="item.type ?? 'default'"
@click="handleToolbar(item.name)"
>
{{ item.text }}
</el-button>
</template>
@@ -70,36 +91,68 @@
</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">
@@ -108,15 +161,24 @@
<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`" />
<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]]"
<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>
@@ -138,20 +200,30 @@
<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>
<!-- 格式化为价格 -->
@@ -183,7 +255,7 @@
{{
scope.row[col.prop]
? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
.value
.value
: ""
}}
</template>
@@ -194,15 +266,21 @@
<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>
@@ -210,43 +288,63 @@
<!-- 其他 -->
<template v-else-if="typeof item === 'object'">
<template v-if="item.hidden === undefined || item.hidden === false">
<el-button v-if="item.isBtn" v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
:icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
<el-button
v-if="item.isBtn"
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>
<el-dropdown style="margin-top: 4px" v-else>
<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 #dropdown v-if="item.options && item.options.length > 0">
<el-dropdown-menu>
<el-dropdown-item @click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
command: opt.command ? opt.command : '',
})
" v-for="opt in item.options" :key="opt.value">
<el-dropdown-item
@click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
command: opt.command ? opt.command : '',
})
"
v-for="opt in item.options"
:key="opt.value"
>
{{ opt.label }}
</el-dropdown-item>
</el-dropdown-menu>
@@ -268,18 +366,33 @@
<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>
@@ -289,10 +402,16 @@
<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">
@@ -313,17 +432,35 @@
</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>
@@ -332,8 +469,13 @@
<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>
@@ -345,7 +487,11 @@
<!-- 弹窗底部操作按钮 -->
<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>
@@ -861,10 +1007,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) => {
@@ -929,7 +1075,7 @@ function saveXlsx(fileData: BlobPart, fileName: string) {
document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl);
}
function test(rows: any[]) { }
function test(rows: any[]) {}
const defaultSelData = ref<IObject[]>([]);
// 设置默认选择
@@ -964,6 +1110,7 @@ defineExpose({
pagination,
test,
setSelectTable,
pageData,
});
</script>

2
src/components/CURD/PageSearch.vue
View File

@@ -177,7 +177,7 @@ const formItems = reactive(props.searchConfig.formItems);
// 是否可展开/收缩
const isExpandable = ref(props.searchConfig.isExpandable ?? true);
// 是否已展开
const isExpand = ref(false);
const isExpand = ref(props.searchConfig.isExpand ?? false);
// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
const showNumber = computed(() => {
if (isExpandable.value === true) {

3
src/components/CURD/types.ts
View File

@@ -31,6 +31,7 @@ export interface ISearchConfig {
// 页面名称(参与组成权限标识,如sys:user:xxx)
pageName: string;
inline?: Boolean;
isExpand?: boolean;
// 表单项
formItems: Array<{
// 组件类型(如input,select等)
@@ -58,6 +59,7 @@ export interface ISearchConfig {
}
export interface IContentConfig<T = any> {
rowDraggable?: boolean;
resultListKey?: string;
// 页面名称(参与组成权限标识,如sys:user:xxx)
pageName: string;
@@ -189,6 +191,7 @@ export interface IContentConfig<T = any> {
| "icon"
| "date"
| "tool"
| "drag-handle"
| "custom";
// image模板相关参数
imageWidth?: number;

305
src/components/importData/index copy.vue Normal file
View File

@@ -0,0 +1,305 @@
<!-- 批量导入数据dialog -->
<template>
<div>
<div class="btn_row">
<el-button type="success" icon="RefreshRight" @click="updateData">数据更新</el-button>
<el-button type="primary" icon="Upload" @click="show">批量导入</el-button>
<el-button icon="Download" @click="downloadTemplateAjax">下载银收客模板</el-button>
</div>
<el-dialog
title="批量导入"
width="800px"
v-model="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
@close="dialogClose"
>
<div class="row">
<tabHeader v-model="tabActive" :list="tabs" />
</div>
<div class="row mt14">
<div class="import_container" v-if="tabActive == 0">
<div class="header_title">第一步：选择模板</div>
<div class="row mt14 pb50">
<div class="list">
<div
class="item"
:class="{ active: platformActive == index }"
v-for="(item, index) in platformList"
:key="item.id"
@click="selectPlatform(item)"
>
<img class="img" :src="item.img" alt="" />
</div>
</div>
</div>
<div class="header_title">
第二步：上传文件
<span>单次仅可上传一个文件</span>
</div>
<div class="row mt14">
<GfileUpload
v-model="form.files"
:accept="platformList[platformActive]?.file_type || ''"
:limit="1"
@file-selected="fileSelected"
/>
</div>
<div class="row mt14">
<div class="footer_wrap">
<el-button @click="visible = false">取 消</el-button>
<el-button
type="primary"
:disabled="!form.files.length"
:loading="loading"
@click="startImportHandle"
>
<template v-if="!form.files.length">请选择文件</template>
<template v-else>开始导入</template>
</el-button>
</div>
</div>
</div>
<el-table :data="tableData" border stripe v-if="tabActive == 1" height="419px">
<el-table-column prop="file_name" label="文件名称" width="300" />
<el-table-column prop="created_time" label="导入时间" width="200" />
<el-table-column prop="status_text" label="导入状态" width="150">
<template #default="scope">
<el-tag v-if="scope.row.status == 0" type="info" disable-transitions>
待处理...
</el-tag>
<el-tag v-else-if="scope.row.status == 1" type="warning" disable-transitions>
处理中...
</el-tag>
<el-tag v-else-if="scope.row.status == 2" type="success" disable-transitions>
处理完成
</el-tag>
<el-tag v-else-if="scope.row.status == -1" type="danger" disable-transitions>
导入失败
</el-tag>
</template>
</el-table-column>
<el-table-column prop="importResult" label="导入结果">
<template #default="scope">
<template v-if="scope.row.status == 2">
<div class="column">
<div>
<el-text type="success">成功：{{ scope.row.success_num }} 条</el-text>
</div>
<div>
<el-text type="danger">失败：{{ scope.row.fail_num }} 条</el-text>
</div>
</div>
</template>
</template>
</el-table-column>
</el-table>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { getplatlist, uploadFile, importlist, downloadTemp } from "@/importDataApi/index.js";
import GfileUpload from "../Upload/GfileUpload.vue";
import tabHeader from "@/views/marketing_center/components/tabHeader.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
type: {
type: [String, Number],
default: 3, // 3商品 4台桌区域 5台桌 6会员 7菜品销售统计 8台桌销售统计 9订单销售统计
},
});
const platformList = ref([]);
const platformActive = ref(0);
function selectPlatform(item) {
form.value.files = [];
platformActive.value = platformList.value.findIndex((i) => i.id === item.id);
}
const tabs = ref([
{ label: "导入数据", name: "importData" },
{ label: "导入记录", name: "importRecord" },
]);
const tabActive = ref(0);
watch(tabActive, (newVal) => {
if (newVal === 1) {
getImportRecord();
}
});
const visible = ref(false);
const loading = ref(false);
const form = ref({
files: [],
platform: "",
});
function fileSelected(file) {
console.log("fileSelected", file);
}
// 开始导入
async function startImportHandle() {
try {
form.value.platform = platformList.value[platformActive.value]?.id;
const formData = new FormData();
formData.append("file", form.value.files[0].raw);
formData.append("shop_id", localStorage.getItem("shopId"));
formData.append("type", props.type);
formData.append("platform", form.value.platform);
loading.value = true;
await uploadFile(formData);
ElMessage.success("文件上传成功，正在导入数据，请在导入记录中查看导入结果");
form.value.files = [];
tabActive.value = 1;
} catch (error) {
console.log(error);
}
setTimeout(() => {
loading.value = false;
}, 500);
}
// 获取平台列表
async function getPlatformList() {
try {
const res = await getplatlist({ plat_type: props.type });
platformList.value = res;
} catch (error) {
console.log(error);
}
}
// 导入记录
const tableData = ref([]);
async function getImportRecord() {
try {
const res = await importlist({ shop_id: localStorage.getItem("shopId") });
tableData.value = res;
} catch (error) {
console.log(error);
}
}
// 下载模板
async function downloadTemplateAjax() {
try {
const res = await downloadTemp({ plat_type: props.type });
window.open(res, "_blank");
} catch (error) {
console.log(error);
}
}
const emits = defineEmits(["close", "update"]);
function updateData() {
// 把 ElMessage 改成 ElMessageBox 就好了
ElMessageBox.confirm("确认需要更新经营数据吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
emits("update");
})
.catch(() => {
// 取消操作，空着就行
});
}
function dialogClose() {
emits("close");
}
onMounted(() => {
getPlatformList();
});
function show() {
visible.value = true;
}
defineExpose({
show,
});
</script>
<style scoped lang="scss">
.btn_row {
display: flex;
gap: 4px;
margin-left: 14px;
}
.header_title {
font-size: 16px;
font-weight: bold;
color: #333333;
display: flex;
align-items: center;
span {
font-size: 12px;
color: #999999;
margin-left: 10px;
}
}
.row {
&.mt14 {
margin-top: 14px;
}
&.pb50 {
padding-bottom: 50px;
}
}
.import_container {
.list {
display: flex;
gap: 24px;
.item {
width: 122px;
height: 42px;
border: 1px solid #fff;
border-radius: 4px;
overflow: hidden;
&:hover {
cursor: pointer;
border-color: var(--el-color-primary);
}
&.active {
border-color: var(--el-color-primary);
}
.img {
width: 100%;
height: 100%;
}
}
}
.footer_wrap {
display: flex;
gap: 14px;
justify-content: flex-end;
}
}
.column {
display: flex;
flex-direction: column;
}
</style>

156
src/components/importData/index.vue
View File

@@ -2,11 +2,19 @@
<template>
<div>
<div class="btn_row">
<el-button type="success" icon="RefreshRight" @click="updateData">数据更新</el-button>
<el-button type="primary" icon="Upload" @click="show">批量导入</el-button>
<el-button icon="Download" @click="downloadTemplateAjax">下载银收客模板</el-button>
</div>
<el-dialog title="批量导入" width="800px" v-model="visible" :close-on-click-modal="false" :close-on-press-escape="false"
@close="dialogClose">
<el-dialog
title="批量导入"
width="800px"
v-model="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
@close="dialogClose"
>
<div class="row">
<tabHeader v-model="tabActive" :list="tabs" />
</div>
@@ -15,23 +23,38 @@
<div class="header_title">第一步：选择模板</div>
<div class="row mt14 pb50">
<div class="list">
<div class="item" :class="{ active: platformActive == index }" v-for="(item, index) in platformList"
:key="item.id" @click="selectPlatform(item)">
<img class="img" :src="item.img" alt="">
<div
class="item"
:class="{ active: platformActive == index }"
v-for="(item, index) in platformList"
:key="item.id"
@click="selectPlatform(item)"
>
<img class="img" :src="item.img" alt="" />
</div>
</div>
</div>
<div class="header_title">第二步：上传文件
<div class="header_title">
第二步：上传文件
<span>单次仅可上传一个文件</span>
</div>
<div class="row mt14">
<GfileUpload v-model="form.files" :accept="platformList[platformActive]?.file_type || ''" :limit="1"
@file-selected="fileSelected" />
<GfileUpload
v-model="form.files"
:accept="platformList[platformActive]?.file_type || ''"
:limit="1"
@file-selected="fileSelected"
/>
</div>
<div class="row mt14">
<div class="footer_wrap">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" :disabled="!form.files.length" :loading="loading" @click="startImportHandle">
<el-button
type="primary"
:disabled="!form.files.length"
:loading="loading"
@click="startImportHandle"
>
<template v-if="!form.files.length">请选择文件</template>
<template v-else>开始导入</template>
</el-button>
@@ -43,10 +66,18 @@
<el-table-column prop="created_time" label="导入时间" width="200" />
<el-table-column prop="status_text" label="导入状态" width="150">
<template #default="scope">
<el-tag v-if="scope.row.status == 0" type="info" disable-transitions>待处理...</el-tag>
<el-tag v-else-if="scope.row.status == 1" type="warning" disable-transitions>处理中...</el-tag>
<el-tag v-else-if="scope.row.status == 2" type="success" disable-transitions>处理完成</el-tag>
<el-tag v-else-if="scope.row.status == -1" type="danger" disable-transitions>导入失败</el-tag>
<el-tag v-if="scope.row.status == 0" type="info" disable-transitions>
待处理...
</el-tag>
<el-tag v-else-if="scope.row.status == 1" type="warning" disable-transitions>
处理中...
</el-tag>
<el-tag v-else-if="scope.row.status == 2" type="success" disable-transitions>
处理完成
</el-tag>
<el-tag v-else-if="scope.row.status == -1" type="danger" disable-transitions>
导入失败
</el-tag>
</template>
</el-table-column>
<el-table-column prop="importResult" label="导入结果">
@@ -66,19 +97,45 @@
</el-table>
</div>
</el-dialog>
<!-- 日期选择弹窗 -->
<el-dialog
v-model="dateDialogVisible"
title="选择更新日期"
width="500px"
@close="dateDialogVisible = false"
>
<div style="padding: 20px 0">
<el-date-picker
v-model="selectDate"
type="date"
label="选择日期"
value-format="YYYY-MM-DD"
placeholder="请选择日期"
style="width: 100%"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dateDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmUpdateDate">确认更新</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { getplatlist, uploadFile, importlist, downloadTemp } from '@/importDataApi/index.js';
import GfileUpload from '../Upload/GfileUpload.vue';
import tabHeader from '@/views/marketing_center/components/tabHeader.vue';
import { ref, onMounted, watch } from "vue";
import { getplatlist, uploadFile, importlist, downloadTemp } from "@/importDataApi/index.js";
import GfileUpload from "../Upload/GfileUpload.vue";
import tabHeader from "@/views/marketing_center/components/tabHeader.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
type: {
type: [String, Number],
default: 3, // 3商品 4台桌区域 5台桌 6会员 7菜品销售统计 8台桌销售统计 9订单销售统计
default: 3,
},
});
@@ -86,15 +143,15 @@ const platformList = ref([]);
const platformActive = ref(0);
function selectPlatform(item) {
form.value.files = [];
platformActive.value = platformList.value.findIndex(i => i.id === item.id);
platformActive.value = platformList.value.findIndex((i) => i.id === item.id);
}
const tabs = ref([
{ label: '导入数据', name: 'importData' },
{ label: '导入记录', name: 'importRecord' },
{ label: "导入数据", name: "importData" },
{ label: "导入记录", name: "importRecord" },
]);
const tabActive = ref(0)
const tabActive = ref(0);
watch(tabActive, (newVal) => {
if (newVal === 1) {
@@ -106,11 +163,16 @@ const visible = ref(false);
const loading = ref(false);
const form = ref({
files: [],
platform: ''
})
platform: "",
});
// 日期选择弹窗
const dateDialogVisible = ref(false);
const today = new Date().toISOString().split("T")[0];
const selectDate = ref(today); // 默认当天
function fileSelected(file) {
console.log('fileSelected', file);
console.log("fileSelected", file);
}
// 开始导入
@@ -118,15 +180,15 @@ async function startImportHandle() {
try {
form.value.platform = platformList.value[platformActive.value]?.id;
const formData = new FormData();
formData.append('file', form.value.files[0].raw);
formData.append('shop_id', localStorage.getItem('shopId'));
formData.append('type', props.type);
formData.append('platform', form.value.platform);
formData.append("file", form.value.files[0].raw);
formData.append("shop_id", localStorage.getItem("shopId"));
formData.append("type", props.type);
formData.append("platform", form.value.platform);
loading.value = true;
await uploadFile(formData);
ElMessage.success('文件上传成功，正在导入数据，请在导入记录中查看导入结果');
form.value.files = []
tabActive.value = 1
ElMessage.success("文件上传成功，正在导入数据，请在导入记录中查看导入结果");
form.value.files = [];
tabActive.value = 1;
} catch (error) {
console.log(error);
}
@@ -149,7 +211,7 @@ async function getPlatformList() {
const tableData = ref([]);
async function getImportRecord() {
try {
const res = await importlist({ shop_id: localStorage.getItem('shopId') });
const res = await importlist({ shop_id: localStorage.getItem("shopId") });
tableData.value = res;
} catch (error) {
console.log(error);
@@ -160,20 +222,38 @@ async function getImportRecord() {
async function downloadTemplateAjax() {
try {
const res = await downloadTemp({ plat_type: props.type });
window.open(res, '_blank');
window.open(res, "_blank");
} catch (error) {
console.log(error);
}
}
const emits = defineEmits(['close'])
const emits = defineEmits(["close", "update"]);
// ==================================
// 数据更新（打开日期选择框）
// ==================================
function updateData() {
dateDialogVisible.value = true;
}
// 确认选择日期并更新
function confirmUpdateDate() {
if (!selectDate.value) {
ElMessage.warning("请选择日期");
return;
}
dateDialogVisible.value = false;
emits("update", selectDate.value); // 把选中的日期传给父组件
// ElMessage.success("已选择日期：" + selectDate.value);
}
function dialogClose() {
emits('close')
emits("close");
}
onMounted(() => {
getPlatformList()
getPlatformList();
});
function show() {
@@ -255,4 +335,4 @@ defineExpose({
display: flex;
flex-direction: column;
}
</style>
</style>