Compare commits
46 Commits
c734bbe353
...
test
| Author | SHA1 | Date | |
|---|---|---|---|
| 9b1e9cc8a9 | |||
| 598609e050 | |||
| 13bd39fbed | |||
| ea5a4c14e9 | |||
| ffad9432c5 | |||
| 6d09813aa4 | |||
| e2338b3888 | |||
| c7f22e193a | |||
| 50139a5e57 | |||
| 209be704e1 | |||
| 6a20930a7d | |||
| 506dcbb804 | |||
| 75e46ec6dd | |||
| c87c999d42 | |||
| f648a7ea5e | |||
| 0ab8852656 | |||
| 03883e1b26 | |||
| b9308c1f21 | |||
| be12089ffe | |||
| e5cdf0a3dc | |||
| 51812fb0cc | |||
| 6e39a94f01 | |||
| d6a33aea3b | |||
| 397f4b2bcf | |||
| 2f2a152b46 | |||
| e3ddd70ce6 | |||
| 3c68d25286 | |||
| f5105cad87 | |||
| 372a1b35ec | |||
| e058aaacf7 | |||
| 2a47effa45 | |||
| b3d153ab86 | |||
| 392d4aa676 | |||
| 40b9d09671 | |||
| 4fcd2cc2cf | |||
| 13890e3f8d | |||
| d30407b26f | |||
| 647e32567b | |||
| ead5aaf458 | |||
| e2fa92d33d | |||
| f01cbf0f5b | |||
| ea2b9fcf9e | |||
| b87b4c000e | |||
| ddd39ec031 | |||
| 76af0f5a83 | |||
| a5b11cf4f4 |
@@ -10,6 +10,8 @@ VITE_APP_BASE_API=/dev-api
|
||||
# VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式
|
||||
VITE_APP_API_URL=http://192.168.1.42/ # 本地
|
||||
VITE_APP_API_PHP_URL=http://192.168.1.42:8000 #php抖音美团测试环境
|
||||
VITE_APP_API_PHP_IMPORT_URL=http://192.168.1.42:8789 #本地php批量导入
|
||||
# VITE_APP_API_PHP_IMPORT_URL=https://diftcs.sxczgkj.com #本地线上php批量导入
|
||||
|
||||
|
||||
# WebSocket 端点(不配置则关闭),线上 ws://api.youlai.tech/ws ,本地 ws://localhost:8989/ws
|
||||
|
||||
@@ -12,6 +12,9 @@ VITE_APP_BASE_API = https://cashier.sxczgkj.com/
|
||||
VITE_APP_API_PHP_URL=https://newblockwlx.sxczgkj.cn #php抖音美团正式环境
|
||||
|
||||
|
||||
VITE_APP_API_PHP_IMPORT_URL=https://diftcs.sxczgkj.com #线上php批量导入
|
||||
|
||||
|
||||
|
||||
|
||||
# WebSocket 端点(不配置则关闭),线上 ws://api.youlai.tech/ws ,本地 ws://localhost:8989/ws
|
||||
|
||||
@@ -65,9 +65,10 @@
|
||||
"sortablejs": "^1.15.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-draggable-plus": "^0.6.1",
|
||||
"vue-i18n": "^11.1.0",
|
||||
"vue-router": "^4.5.0",
|
||||
"ysk-utils": "^1.0.85"
|
||||
"ysk-utils": "^1.0.91"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.7.1",
|
||||
@@ -115,6 +116,7 @@
|
||||
"vite-plugin-mock-dev-server": "^1.8.3",
|
||||
"vite-plugin-strip-code": "^1.1.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-vue-devtools": "^8.1.0",
|
||||
"vue-eslint-parser": "^9.4.3",
|
||||
"vue-tsc": "^2.2.0"
|
||||
},
|
||||
|
||||
12
src/App.vue
@@ -3,7 +3,17 @@
|
||||
<!-- 开启水印 -->
|
||||
<el-watermark :font="{ color: fontColor }" :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
|
||||
:z-index="9999" class="wh-full">
|
||||
<router-view />
|
||||
<!-- 🔴 修改开始:使用 v-slot 处理路由组件 -->
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<!--
|
||||
1. 使用 <transition> 包裹,防止渲染冲突
|
||||
2. 加上 :key="route.path" 强制 Vue 在路由变化时重新渲染,避免复用导致的空白
|
||||
-->
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</transition>
|
||||
</router-view>
|
||||
<!-- 🟢 修改结束 -->
|
||||
</el-watermark>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
@@ -27,11 +27,34 @@ const Api = {
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
},
|
||||
// 排序
|
||||
sort(params: sortRequest) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/sort`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export default Api;
|
||||
export interface sortRequest {
|
||||
/**
|
||||
* 拖动的支付类型ID
|
||||
*/
|
||||
id: number;
|
||||
/**
|
||||
* 店铺ID
|
||||
*/
|
||||
shopId: number;
|
||||
/**
|
||||
* 目标位置排序号
|
||||
*/
|
||||
targetSort: number;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
interface getRequset {
|
||||
id?: string
|
||||
|
||||
@@ -59,6 +59,22 @@ const ShopApi = {
|
||||
params,
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
putPassword(data: any) {
|
||||
return request({
|
||||
url: `/account/admin/sysUser/pwd`,
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 续期记录
|
||||
registerRecord(params: any) {
|
||||
return request({
|
||||
url: `${baseURL}/registerRecord`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default ShopApi;
|
||||
|
||||
@@ -45,14 +45,13 @@ const API = {
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
pwd(data: any) {
|
||||
return request({
|
||||
url: `${baseURL}/pwd`,
|
||||
method: "put",
|
||||
data
|
||||
});
|
||||
}
|
||||
,
|
||||
|
||||
},
|
||||
}
|
||||
export default API;
|
||||
|
||||
@@ -12,6 +12,19 @@ export const getRegion = () => {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有短信签名
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export const getSms = ({ type }: { type: string }) => {
|
||||
return request<any, any[]>({
|
||||
url: `/account/admin/common/sms`,
|
||||
method: "get",
|
||||
params: { type }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有银行
|
||||
* @param params
|
||||
|
||||
26
src/api/order/fince.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import request from "@/utils/request";
|
||||
import { Order_BaseUrl } from "@/api/config";
|
||||
const baseURL = Order_BaseUrl + "/admin";
|
||||
const FinanceApi = {
|
||||
financeBase(params: Request) {
|
||||
return request<any, any>({
|
||||
url: `${baseURL}/finance/base`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export interface Request {
|
||||
/**
|
||||
* 日期yyyy-MM-dd
|
||||
*/
|
||||
date: string;
|
||||
shopId: number;
|
||||
type: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
|
||||
export default FinanceApi;
|
||||
@@ -72,6 +72,39 @@ const OrderApi = {
|
||||
data
|
||||
});
|
||||
},
|
||||
// 查询财务报表
|
||||
financeSts(params: any) {
|
||||
return request<any>({
|
||||
url: `${Order_BaseUrl}/admin/finance/sts`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
// 导出财务报表
|
||||
financeExport(params: any) {
|
||||
return request<any>({
|
||||
url: `${Order_BaseUrl}/admin/finance/export`,
|
||||
method: "get",
|
||||
params,
|
||||
responseType: 'blob'
|
||||
});
|
||||
},
|
||||
// 打印经营日报
|
||||
printDayReport(params: any) {
|
||||
return request<any>({
|
||||
url: `${Order_BaseUrl}/admin/finance/printDayReport`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
// 打印日结单
|
||||
printDaySettle(params: any) {
|
||||
return request<any>({
|
||||
url: `${Order_BaseUrl}/admin/finance/printDaySettle`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default OrderApi;
|
||||
|
||||
@@ -28,6 +28,14 @@ const Api = {
|
||||
responseType: 'blob'
|
||||
});
|
||||
},
|
||||
// 商品报表打印
|
||||
print(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/print`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default Api;
|
||||
|
||||
@@ -48,6 +48,14 @@ const AuthAPI = {
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 商品-标记自动售罄
|
||||
markIsAutoSoldOut(data: Object) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/markIsAutoSoldOut`,
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteByIds(id: number | String) {
|
||||
return request<any, Responseres>({
|
||||
@@ -72,7 +80,7 @@ const AuthAPI = {
|
||||
});
|
||||
},
|
||||
|
||||
// 耗材列表
|
||||
// 耗材列表分页
|
||||
productcons(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `/product/admin/product/cons/page`,
|
||||
@@ -80,7 +88,22 @@ const AuthAPI = {
|
||||
params
|
||||
});
|
||||
},
|
||||
|
||||
// 耗材列表
|
||||
productconsList(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `/product/admin/product/cons/list`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
// 耗材列表
|
||||
consStock(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `/product/admin/product/cons/consStock`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
// 上下架
|
||||
onOff(data: any) {
|
||||
return request<any, Responseres>({
|
||||
@@ -190,6 +213,14 @@ const AuthAPI = {
|
||||
params,
|
||||
responseType: 'blob'
|
||||
});
|
||||
},
|
||||
// 商品-批量操作
|
||||
batchOperate(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/batchOperate`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
15
src/api/system/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import request from "@/utils/request";
|
||||
import {
|
||||
Account_BaseUrl,
|
||||
Product_BaseUrl,
|
||||
Market_BaseUrl,
|
||||
System_BaseUrl
|
||||
} from "@/api/config";
|
||||
|
||||
// 帮助中心
|
||||
export function getHelp() {
|
||||
return request({
|
||||
url: `${System_BaseUrl + "/user/getHelp"}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
BIN
src/assets/index_bg.png
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/index_quick1.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/assets/index_quick2.png
Normal file
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/index_quick3.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/index_quick4.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
src/assets/index_quick5.png
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/assets/index_quick6.png
Normal file
|
After Width: | Height: | Size: 6.4 KiB |
@@ -3,7 +3,7 @@
|
||||
<!-- 表格工具栏 -->
|
||||
<div class="flex-x-between mb-[10px]">
|
||||
<!-- 左侧工具栏 -->
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
<template v-for="item in toolbar" :key="item">
|
||||
<template v-if="typeof item === 'string'">
|
||||
<!-- 新增 -->
|
||||
@@ -65,6 +65,8 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 插槽 -->
|
||||
<slot name="custom" />
|
||||
</div>
|
||||
<!-- 右侧工具栏 -->
|
||||
<div>
|
||||
@@ -530,6 +532,7 @@ const emit = defineEmits<{
|
||||
editClick: [row: IObject];
|
||||
operatClick: [data: IOperatData];
|
||||
filterChange: [data: IObject];
|
||||
selectChange: []
|
||||
}>();
|
||||
|
||||
// 主键
|
||||
@@ -634,6 +637,7 @@ function handleSelectionChange(selection: any[]) {
|
||||
console.log("defaultSelData.value", defaultSelData.value);
|
||||
selectionData.value = selection;
|
||||
removeIds.value = selection.map((item) => item[pk]);
|
||||
emit('selectChange', getselectTable())
|
||||
}
|
||||
// 获取选中的表格数据
|
||||
function getselectTable() {
|
||||
@@ -1108,6 +1112,7 @@ defineExpose({
|
||||
pagination,
|
||||
test,
|
||||
setSelectTable,
|
||||
pageData,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1115,17 +1120,21 @@ defineExpose({
|
||||
:deep(.el-table .el-table__cell) {
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
overflow: visible;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
position: sticky;
|
||||
z-index: calc(var(--el-table-index) + 2);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell div) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -5,18 +5,8 @@
|
||||
<el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
style="width: 200px"
|
||||
v-model="searhForm.category"
|
||||
placeholder="商品分类"
|
||||
:disabled="disableCategory"
|
||||
>
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
<el-select style="width: 200px" v-model="searhForm.category" placeholder="商品分类" :disabled="disableCategory">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in categoryList" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@@ -25,7 +15,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="head-container">
|
||||
<el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
|
||||
<el-table ref="table" :data="tableData.list" height="500" border stripe v-loading="tableData.loading">
|
||||
<el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column>
|
||||
<el-table-column label="商品信息">
|
||||
<template v-slot="scope">
|
||||
@@ -72,14 +62,9 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page" :page-size="tableData.size"
|
||||
@current-change="paginationChange" @size-change="sizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
<template #footer>
|
||||
<span class="dialog-footer" v-if="!radio">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
@@ -132,7 +117,7 @@ export default {
|
||||
},
|
||||
// 确定选商品
|
||||
confirmHandle() {
|
||||
let res = this.$refs.table.selection;
|
||||
let res = this.$refs.table.getSelectionRows();
|
||||
console.log(res);
|
||||
if (!res) {
|
||||
return ElMessage.error("请选择商品");
|
||||
@@ -148,6 +133,7 @@ export default {
|
||||
this.tableData.page = 1;
|
||||
this.tableData.size = 10;
|
||||
this.tableData.list = [];
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小改变
|
||||
sizeChange(e) {
|
||||
|
||||
@@ -1,44 +1,42 @@
|
||||
<!-- 文件上传组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
:style="props.style"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:on-progress="handleProgress"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
multiple
|
||||
>
|
||||
<!-- 上传文件按钮 -->
|
||||
<el-button type="primary" :disabled="fileList.length >= props.limit">
|
||||
{{ props.uploadBtnText }}
|
||||
</el-button>
|
||||
|
||||
<el-upload v-model:file-list="fileList" :style="props.style" :before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError"
|
||||
:accept="props.accept" :limit="props.limit" multiple drag :tip="'支持多个文件上传,单个文件不超过 ' + props.maxFileSize + 'MB'">
|
||||
<!-- 拖拽上传区域 -->
|
||||
<div>
|
||||
<el-icon class="el-icon--upload">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处,或 <em>点击上传</em>
|
||||
<br />
|
||||
<small>支持格式:{{ props.accept }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件列表 -->
|
||||
<template #file="{ file }">
|
||||
<div class="el-upload-list__item-info">
|
||||
<a class="el-upload-list__item-name" @click="handleDownload(file)">
|
||||
<el-icon><Document /></el-icon>
|
||||
<el-icon>
|
||||
<Document />
|
||||
</el-icon>
|
||||
<span class="el-upload-list__item-file-name">{{ file.name }}</span>
|
||||
<span class="el-icon--close" @click="handleRemove(file.url!)">
|
||||
<el-icon><Close /></el-icon>
|
||||
<span class="el-icon--close" @click="handleRemove(file.url)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-progress
|
||||
:style="{
|
||||
display: showProgress ? 'inline-flex' : 'none',
|
||||
width: '100%',
|
||||
}"
|
||||
:percentage="progressPercent"
|
||||
/>
|
||||
<el-progress :style="{
|
||||
display: showProgress ? 'inline-flex' : 'none',
|
||||
width: '100%',
|
||||
marginTop: '10px',
|
||||
}" :percentage="progressPercent" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -48,9 +46,14 @@ import {
|
||||
UploadProgressEvent,
|
||||
UploadRequestOptions,
|
||||
} from "element-plus";
|
||||
import { Upload, Document, Close } from "@element-plus/icons-vue";
|
||||
|
||||
import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
|
||||
|
||||
const emit = defineEmits<{
|
||||
"upload-success": [fileInfo: string];
|
||||
}>();
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
@@ -96,7 +99,6 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "上传文件",
|
||||
},
|
||||
|
||||
/**
|
||||
* 样式
|
||||
*/
|
||||
@@ -104,7 +106,7 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "300px",
|
||||
width: "100%",
|
||||
};
|
||||
},
|
||||
},
|
||||
@@ -147,6 +149,7 @@ function handleBeforeUpload(file: UploadRawFile) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
showProgress.value = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -190,10 +193,13 @@ const handleProgress = (event: UploadProgressEvent) => {
|
||||
const handleSuccess = (fileInfo: string) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = [...modelValue.value, fileInfo];
|
||||
emit("upload-success", fileInfo);
|
||||
showProgress.value = false;
|
||||
};
|
||||
|
||||
const handleError = (error: any) => {
|
||||
ElMessage.error("上传失败");
|
||||
showProgress.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
242
src/components/Upload/GfileUpload.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<!-- 文件上传组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-upload v-model:file-list="fileList" :style="props.style" :before-upload="handleBeforeUpload"
|
||||
:on-change="handleChange" :accept="accept" multiple drag :tip="'支持多个文件上传,单个文件不超过 ' + props.maxFileSize + 'MB'"
|
||||
:auto-upload="false">
|
||||
<!-- 拖拽上传区域 -->
|
||||
<div>
|
||||
<el-icon class="el-icon--upload">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处,或 <em>点击上传</em>
|
||||
<br />
|
||||
<small>支持格式:{{ accept }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件列表 -->
|
||||
<template #file="{ file }">
|
||||
<div class="el-upload-list__item-info">
|
||||
<a class="el-upload-list__item-name" @click="handleDownload(file)">
|
||||
<el-icon>
|
||||
<Document />
|
||||
</el-icon>
|
||||
<span class="el-upload-list__item-file-name">{{ file.name }}</span>
|
||||
<span class="el-icon--close" @click="handleRemove(file.url)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { UploadFilled, Document, Close } from "@element-plus/icons-vue";
|
||||
|
||||
const emit = defineEmits({
|
||||
"file-selected": null,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 文件上传数量限制
|
||||
*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 单个文件上传大小限制(单位MB)
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
/**
|
||||
* 上传文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "*",
|
||||
},
|
||||
/**
|
||||
* 选择文件成功的回调函数
|
||||
*/
|
||||
successCallback: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
/**
|
||||
* 样式
|
||||
*/
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "100%",
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const fileList = defineModel({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
/**
|
||||
* 文件选择变化
|
||||
*/
|
||||
function handleChange(file, fileList) {
|
||||
if (file.status === 'ready') {
|
||||
// 如果限制为1个文件,移除之前的文件,只保留当前新文件
|
||||
if (props.limit === 1 && fileList.length > 1) {
|
||||
fileList.splice(0, fileList.length - 1);
|
||||
}
|
||||
const rawFile = file.raw;
|
||||
// 限制文件类型
|
||||
if (props.accept !== "*") {
|
||||
const acceptedTypes = props.accept.split(',').map(type => type.trim());
|
||||
const isAccepted = acceptedTypes.some(type => {
|
||||
let checkType = type;
|
||||
if (!type.startsWith('.') && !type.includes('/')) {
|
||||
checkType = '.' + type;
|
||||
}
|
||||
if (checkType.startsWith('.')) {
|
||||
return rawFile.name.toLowerCase().endsWith(checkType.toLowerCase());
|
||||
} else if (checkType.includes('*')) {
|
||||
const [main] = checkType.split('/');
|
||||
return rawFile.type.startsWith(main + '/');
|
||||
} else {
|
||||
return rawFile.type === checkType;
|
||||
}
|
||||
});
|
||||
if (!isAccepted) {
|
||||
ElMessage.warning("文件类型不符合要求");
|
||||
// 从 fileList 中移除不符合的文件
|
||||
fileList.splice(fileList.indexOf(file), 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (props.successCallback) {
|
||||
props.successCallback(rawFile);
|
||||
} else {
|
||||
emit("file-selected", rawFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传前校验
|
||||
*/
|
||||
function handleBeforeUpload(file) {
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传文件不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
// 限制文件类型
|
||||
if (props.accept !== "*") {
|
||||
const acceptedTypes = props.accept.split(',').map(type => type.trim());
|
||||
const isAccepted = acceptedTypes.some(type => {
|
||||
if (type.startsWith('.')) {
|
||||
return file.name.toLowerCase().endsWith(type.toLowerCase());
|
||||
} else {
|
||||
return file.type === type;
|
||||
}
|
||||
});
|
||||
if (!isAccepted) {
|
||||
ElMessage.warning("文件类型不符合要求");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
function handleRemove(fileUrl) {
|
||||
// 从 fileList 中移除
|
||||
fileList.value = fileList.value.filter(f => f.url !== fileUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
function handleDownload(file) {
|
||||
// 本地文件,不支持下载
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-upload-list__item .el-icon--close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: opacity var(--el-transition-duration);
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-upload-list) {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
margin: 5px 0;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.el-upload-list__item-info {
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-upload-list__item-file-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-icon--close {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/components/importData/index copy.vue
Normal 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>
|
||||
338
src/components/importData/index.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<!-- 批量导入数据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>
|
||||
|
||||
<!-- 日期选择弹窗 -->
|
||||
<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 { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: [String, Number],
|
||||
default: 3,
|
||||
},
|
||||
});
|
||||
|
||||
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: "",
|
||||
});
|
||||
|
||||
// 日期选择弹窗
|
||||
const dateDialogVisible = ref(false);
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
const selectDate = ref(today); // 默认当天
|
||||
|
||||
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() {
|
||||
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");
|
||||
}
|
||||
|
||||
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>
|
||||
120
src/components/printBusinessDialog.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<el-dialog title="打印确认" width="400px" v-model="showDayBusiness">
|
||||
<div class="business_wrap">
|
||||
<div class="title">
|
||||
<el-text>请选择要打印的日期:</el-text> <el-text type="danger">周期最长为7天</el-text>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-date-picker v-model="printDayBusinessParams.date" type="daterange" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate"
|
||||
@change="handleDateChange" clearable />
|
||||
</div>
|
||||
<div class="business_tips">
|
||||
<el-text type="info">若数据过多,打印时间会比较长,请耐心等待</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showDayBusiness = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmHandle" :loading="printDayBusinessLoading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '经营日报'
|
||||
}
|
||||
})
|
||||
|
||||
const showDayBusiness = ref(false)
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
// 打印参数
|
||||
const printDayBusinessParams = ref({
|
||||
date: [],
|
||||
})
|
||||
const printDayBusinessLoading = ref(false)
|
||||
|
||||
// 取消
|
||||
const confirmHandle = () => {
|
||||
// 校验日期
|
||||
if (!printDayBusinessParams.value.date || printDayBusinessParams.value.date.length !== 2) {
|
||||
ElMessage.warning('请选择日期范围')
|
||||
return
|
||||
}
|
||||
showDayBusiness.value = false
|
||||
emits('success', { date: printDayBusinessParams.value.date })
|
||||
}
|
||||
|
||||
// 日期禁用规则:只能选昨天及更早,不能选未来
|
||||
const disabledDate = (time) => {
|
||||
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||||
return dayjs(time).isAfter(yesterday)
|
||||
}
|
||||
|
||||
// 日期选择后校验:区间长度不能超过7天
|
||||
const handleDateChange = (val) => {
|
||||
if (!val || val.length !== 2) return
|
||||
const [start, end] = val
|
||||
const days = dayjs(end).diff(start, 'day') + 1 // 包含起止日
|
||||
if (days > 7) {
|
||||
ElMessage.warning('日期范围最多只能选择7天')
|
||||
printDayBusinessParams.value.date = [] // 清空选择
|
||||
}
|
||||
}
|
||||
|
||||
// 判断当前时间 是否在 00:00 ~ 05:20 之间
|
||||
const time = ref(['00:00', '05:20'])
|
||||
const isInTimeRange = () => {
|
||||
const now = dayjs()
|
||||
const startTime = dayjs(time.value[0], 'HH:mm')
|
||||
const endTime = dayjs(time.value[1], 'HH:mm')
|
||||
return now.isAfter(startTime) && now.isBefore(endTime)
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const show = () => {
|
||||
if (isInTimeRange()) {
|
||||
ElMessage.warning(`当前时间不能打印${props.title},打印时间:${time.value[0]}点至${time.value[1]}点`)
|
||||
return
|
||||
}
|
||||
showDayBusiness.value = true
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({ show })
|
||||
|
||||
// 初始化默认选中昨天
|
||||
onMounted(() => {
|
||||
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||||
printDayBusinessParams.value.date = [yesterday, yesterday]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.business_wrap {
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.business_tips {
|
||||
padding-top: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/components/refundConsModal.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<el-dialog title="提示" width="450px" v-model="visible">
|
||||
<div class="refund_content">
|
||||
<div class="title_wrap">请确认当前菜品是否已上菜</div>
|
||||
<div class="list_wrap">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>x{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog_footer">
|
||||
<div class="btn">
|
||||
<el-button @click="handleCancel" style="width: 100%;">未上菜(退还库存)</el-button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button type="primary" @click="handleOk" style="width: 100%;">已上菜(不退库存)</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
// 未上菜 1退菜图库存
|
||||
function handleCancel() {
|
||||
visible.value = false
|
||||
emits('success', 1)
|
||||
}
|
||||
|
||||
// 已上菜 2仅退菜不退库存
|
||||
function handleOk() {
|
||||
visible.value = false
|
||||
emits('success', 2)
|
||||
}
|
||||
|
||||
function show() {
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.refund_content {
|
||||
.title_wrap {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list_wrap {
|
||||
padding-top: 14px;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog_footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding-top: 20px;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/components/resetPassword/CaptchaBtn.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<!-- 验证码按钮 - 纯功能高度定制版 -->
|
||||
<el-button :type="buttonType" :size="buttonSize" :disabled="disabled || isCountingDown" :loading="isLoading"
|
||||
class="captcha-btn" @click="handleGetCaptcha">
|
||||
<!-- 倒计时状态展示 -->
|
||||
<span v-if="isCountingDown">{{ countDown }} 秒后重新获取</span>
|
||||
<!-- 正常状态展示 -->
|
||||
<span v-else>{{ buttonText }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getSms } from "@/api/common";
|
||||
|
||||
// 接收父组件传递的自定义参数
|
||||
const props = defineProps({
|
||||
// 验证码类型
|
||||
// editShopInfoOpePwd 店铺操作密码
|
||||
// wxMiniPwd 微信小程序用户登录密码
|
||||
// shopPwd 店铺登录密码
|
||||
type: {
|
||||
type: String,
|
||||
default: 'editShopInfoOpePwd'
|
||||
},
|
||||
// 按钮类型(primary/success/warning/danger/info/default)
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 按钮尺寸(large/default/small)
|
||||
buttonSize: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 正常状态按钮文字
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '获取验证码'
|
||||
},
|
||||
// 倒计时总秒数
|
||||
countDownNum: {
|
||||
type: Number,
|
||||
default: 60
|
||||
},
|
||||
// 手动控制按钮禁用状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 发射事件给父组件
|
||||
const emit = defineEmits(['get-captcha'])
|
||||
|
||||
// 加载状态(请求验证码时)
|
||||
const isLoading = ref(false)
|
||||
// 是否正在倒计时
|
||||
const isCountingDown = ref(false)
|
||||
// 倒计时秒数
|
||||
const countDown = ref(0)
|
||||
// 倒计时定时器
|
||||
let timer = null
|
||||
|
||||
// 获取验证码点击事件
|
||||
const handleGetCaptcha = async () => {
|
||||
// 倒计时中 / 加载中 / 禁用状态 禁止点击
|
||||
if (isCountingDown.value || isLoading.value || props.disabled) return
|
||||
|
||||
try {
|
||||
// 开启加载状态
|
||||
isLoading.value = true
|
||||
// 触发父组件的请求方法(真正的接口请求写在父组件)
|
||||
await getSms({ type: props.type });
|
||||
ElNotification.success({
|
||||
title: '成功',
|
||||
message: '验证码已发送,请注意查收',
|
||||
});
|
||||
// ======================
|
||||
// 请求成功 → 开始倒计时
|
||||
// ======================
|
||||
startCountDown()
|
||||
} catch (error) {
|
||||
// 请求失败 → 不触发倒计时,控制台提示
|
||||
console.error('', error)
|
||||
} finally {
|
||||
// 关闭加载状态
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 500) // 适当延迟,避免闪烁
|
||||
}
|
||||
}
|
||||
|
||||
// 倒计时核心逻辑
|
||||
const startCountDown = () => {
|
||||
// 初始化倒计时时间
|
||||
countDown.value = props.countDownNum
|
||||
isCountingDown.value = true
|
||||
|
||||
// 开启定时器
|
||||
timer = setInterval(() => {
|
||||
countDown.value--
|
||||
// 倒计时结束
|
||||
if (countDown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
isCountingDown.value = false
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 页面销毁时清除定时器(防止内存泄漏)
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 你可以在这里自定义按钮默认样式,也可以在父组件覆盖 */
|
||||
.captcha-btn {
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
180
src/components/resetPassword/index.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<el-dialog title="修改密码" modal-append-to-body append-to-body v-model="dialogVisible" @close="reset" width="400px">
|
||||
<el-form ref="refForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="手机号">
|
||||
<el-input :value="maskPhone(shopInfo.phone)" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="旧密码" prop="originalPassword">
|
||||
<el-input type="password" show-password v-model="form.originalPassword" placeholder="请输入旧密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input type="password" show-password v-model="form.password" placeholder="请输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: -10px;"><el-text :type="isPws ? 'danger' : 'info'" size="small"
|
||||
style="line-height: 16px;">注意:新密码必须至少包含字母、数字、特殊符号中的两种,且长度6-18位</el-text></el-form-item>
|
||||
<el-form-item label="确认新密码" prop="checkPassword">
|
||||
<el-input type="password" show-password v-model="form.checkPassword" placeholder="请再次输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<div class="center">
|
||||
<el-input v-model="form.code" placeholder="请输入验证码"></el-input>
|
||||
<captcha-btn type="shopPwd" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="formLoading" @click="submitHandle">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import sysUser from "@/api/account/sysUser";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { maskPhone } from "@/utils";
|
||||
import CaptchaBtn from "./CaptchaBtn.vue";
|
||||
|
||||
const props = defineProps({
|
||||
// 修改成功后的跳转类型 1- 跳转到登录页 2- 留在当前页
|
||||
type: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const shopInfo = ref({
|
||||
phone: ''
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const formLoading = ref(false);
|
||||
|
||||
const isPws = ref(false);
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
originalPassword: "", // 原密码
|
||||
code: '', // 验证码
|
||||
checkPassword: "", // 确认新密码
|
||||
password: "", // 新密码
|
||||
});
|
||||
|
||||
function reset() {
|
||||
form.originalPassword = "";
|
||||
form.checkPassword = "";
|
||||
form.password = "";
|
||||
form.code = "";
|
||||
refForm.value.resetFields();
|
||||
}
|
||||
|
||||
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,}$/;
|
||||
const validateNewPass = (rule: any, value: string, callback: (error?: Error) => void) => {
|
||||
if (!form.password) {
|
||||
callback(new Error(" "));
|
||||
} else if (form.password === form.originalPassword) {
|
||||
callback(new Error("请输入与旧密码不同的新密码"));
|
||||
} else if (form.password.length < 6 || form.password.length > 18) {
|
||||
// 密码长度6 - 18位
|
||||
callback(new Error("密码长度应为6-18位"));
|
||||
} else if (!reg.test(form.password)) {
|
||||
// 新密码长度不能小于6 需包含字母、数字、特殊符号中至少两种
|
||||
isPws.value = true;
|
||||
callback(new Error(""));
|
||||
} else {
|
||||
isPws.value = false;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateRnewPass = (rule: any, value: string, callback: (error?: Error) => void) => {
|
||||
if (!form.checkPassword) {
|
||||
callback(new Error(" "));
|
||||
} else if (form.checkPassword !== form.password) {
|
||||
callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const rules = {
|
||||
originalPassword: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateNewPass,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
checkPassword: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateRnewPass,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const refForm = ref();
|
||||
// 提交修改密码
|
||||
function submitHandle() {
|
||||
refForm.value.validate(async (vaild: boolean) => {
|
||||
if (vaild) {
|
||||
try {
|
||||
formLoading.value = true;
|
||||
await sysUser.pwd(form);
|
||||
if (props.type == 1) {
|
||||
ElNotification.success("密码修改成功,请重新登录");
|
||||
setTimeout(() => {
|
||||
router.push("/login");
|
||||
}, 1000);
|
||||
} else {
|
||||
ElNotification.success("密码修改成功");
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
emit('success')
|
||||
} catch (error) {
|
||||
formLoading.value = false;
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function show(e: object) {
|
||||
console.log(e);
|
||||
shopInfo.value = e
|
||||
form.id = e.id
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
57
src/importDataApi/index.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import request from "@/utils/request-import-php";
|
||||
|
||||
/**
|
||||
* 平台列表
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
export function getplatlist(data) {
|
||||
return request({
|
||||
url: "plat/getplatlist",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
export function uploadFile(data) {
|
||||
return request({
|
||||
url: "upload",
|
||||
method: "post",
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入记录
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
export function importlist(data) {
|
||||
return request({
|
||||
url: "plat/importlist",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载模板
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
export function downloadTemp(data) {
|
||||
return request({
|
||||
url: "plat/downloadTemp",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
212
src/layout/components/NavBar/components/HellpCenter.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-text size="large" style="margin: 0 14px;" @click="visible = true">帮助中心</el-text>
|
||||
<el-dialog title="帮助中心" width="1000px" v-model="visible" append-to-body>
|
||||
<div class="help_container">
|
||||
<div class="header">关注官方公众号,查看详细教程视频,快速掌握使用方法</div>
|
||||
<div class="wrap">
|
||||
<div class="item">
|
||||
<div class="title">联系方式</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<el-icon color="#fff">
|
||||
<PhoneFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-text>客服电话</el-text>
|
||||
</div>
|
||||
<div class="right hover" @click="copyHandle(helpInfo.service_phone)">
|
||||
<el-text type="primary">{{ helpInfo.service_phone }}</el-text>
|
||||
<el-icon color="#666">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<el-icon color="#fff">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-text>QQ告前咨询</el-text>
|
||||
</div>
|
||||
<div class="right hover" @click="copyHandle(helpInfo.qq_consult)">
|
||||
<el-text type="primary">{{ helpInfo.qq_consult }}</el-text>
|
||||
<el-icon color="#666">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 4px;">
|
||||
<div class="left">
|
||||
<div class="icon" style="background-color: #fff;">
|
||||
</div>
|
||||
<el-text>QQ投诉通道</el-text>
|
||||
</div>
|
||||
<div class="right hover" @click="copyHandle(helpInfo.qq_complaint)">
|
||||
<el-text type="primary">{{ helpInfo.qq_complaint }}</el-text>
|
||||
<el-icon color="#666">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<el-icon color="#fff">
|
||||
<Check />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-text>上班时间</el-text>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-text type="primary">{{ helpInfo.work_time }}</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">官方公众号</div>
|
||||
<div class="intro">
|
||||
<el-text type="info">关注后即可查看所有操作教程视频</el-text>
|
||||
</div>
|
||||
<div class="ewm_wrap">
|
||||
<el-image :src="helpInfo.help_ac_qrcode" style="width: 145px;height:145px;"></el-image>
|
||||
<el-text type="danger">关注后即可查看所有操作教程视频</el-text>
|
||||
<el-text type="info">微信扫描识别二维码关注,获取更多服务</el-text>
|
||||
</div>
|
||||
<div class="step_wrap" v-if="helpInfo.official_account">
|
||||
<div class="row" v-for="(item, index) in helpInfo.official_account.split(';')" :key="index">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<span class="t">{{ index + 1 }}</span>
|
||||
</div>
|
||||
<el-text>{{ item }}</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import useClipboard from "vue-clipboard3";
|
||||
import { getHelp } from '@/api/system'
|
||||
const { toClipboard } = useClipboard();
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
// 复制
|
||||
async function copyHandle(text) {
|
||||
try {
|
||||
await toClipboard(text);
|
||||
ElNotification({
|
||||
title: "成功",
|
||||
message: `复制成功`,
|
||||
type: "success",
|
||||
});
|
||||
console.log("Copied to clipboard");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取帮助中心信息
|
||||
const helpInfo = ref({});
|
||||
async function getHelpAjax() {
|
||||
try {
|
||||
const res = await getHelp();
|
||||
helpInfo.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getHelpAjax()
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
margin-top: 37px;
|
||||
padding: 0 28px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
border-right: 2px solid #EDEDED;
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ewm_wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,8 @@
|
||||
<div class="navbar__right">
|
||||
<!-- 非手机设备(窄屏)才显示 -->
|
||||
<template v-if="!isMobile">
|
||||
<!-- 帮助中心 -->
|
||||
<HellpCenter />
|
||||
<!-- 搜索 -->
|
||||
<MenuSearch />
|
||||
|
||||
@@ -35,6 +37,7 @@ import { useAppStore, useSettingsStore } from "@/store";
|
||||
|
||||
import UserProfile from "./UserProfile.vue";
|
||||
import Notification from "./Notification.vue";
|
||||
import HellpCenter from "./HellpCenter.vue";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const settingStore = useSettingsStore();
|
||||
@@ -48,7 +51,7 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > * {
|
||||
&>* {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
height: $navbar-height;
|
||||
@@ -67,12 +70,12 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.dark .navbar__right > *:hover {
|
||||
.dark .navbar__right>*:hover {
|
||||
background: rgb(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
.layout-top .navbar__right > *,
|
||||
.layout-mix .navbar__right > * {
|
||||
.layout-top .navbar__right>*,
|
||||
.layout-mix .navbar__right>* {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,41 +10,25 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleOpenUserProfile">店铺配置</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="dialogVisible = true">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="refResetPasswordRef.show(shopInfo)">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-dialog title="修改密码" modal-append-to-body append-to-body v-model="dialogVisible" @close="reset" width="400px">
|
||||
<el-form ref="refForm" :model="form" :rules="rules">
|
||||
<el-form-item label="旧密码" prop="oldPass">
|
||||
<el-input type="password" show-password v-model="form.oldPass" placeholder="请输入旧密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPass">
|
||||
<el-input type="password" show-password v-model="form.newPass" placeholder="请输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="rnewPass">
|
||||
<el-input type="password" show-password v-model="form.rnewPass" placeholder="请再次输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="formLoading" @click="submitHandle">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<resetPassword ref="refResetPasswordRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import sysUser from "@/api/account/sysUser";
|
||||
defineOptions({
|
||||
name: "UserProfile",
|
||||
});
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useTagsViewStore, useUserStore } from "@/store";
|
||||
import { useCartsStore } from '@/store/modules/carts'
|
||||
import resetPassword from "@/components/resetPassword/index.vue";
|
||||
|
||||
const shopInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
|
||||
|
||||
const refResetPasswordRef = ref(null);
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -53,91 +37,6 @@ const cartStore = useCartsStore()
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const formLoading = ref(false);
|
||||
|
||||
const form = reactive({
|
||||
oldPass: "",
|
||||
newPass: "",
|
||||
rnewPass: "",
|
||||
});
|
||||
|
||||
function reset() {
|
||||
form.oldPass = "";
|
||||
form.newPass = "";
|
||||
form.rnewPass = "";
|
||||
refForm.value.resetFields();
|
||||
}
|
||||
|
||||
const validateNewPass = (rule: any, value: string, callback: (error?: Error) => void) => {
|
||||
if (!form.newPass) {
|
||||
callback(new Error(" "));
|
||||
} else if (form.newPass === form.oldPass) {
|
||||
callback(new Error("请输入与旧密码不同的新密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateRnewPass = (rule: any, value: string, callback: (error?: Error) => void) => {
|
||||
if (!form.rnewPass) {
|
||||
callback(new Error(" "));
|
||||
} else if (form.rnewPass !== form.newPass) {
|
||||
callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rules = {
|
||||
oldPass: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
newPass: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateNewPass,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
rnewPass: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateRnewPass,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
const refForm = ref();
|
||||
// 提交修改密码
|
||||
function submitHandle() {
|
||||
refForm.value.validate(async (vaild: boolean) => {
|
||||
if (vaild) {
|
||||
try {
|
||||
formLoading.value = true;
|
||||
const res = await sysUser.pwd({
|
||||
originalPassword: form.oldPass,
|
||||
checkPassword: form.newPass,
|
||||
password: form.newPass,
|
||||
});
|
||||
ElNotification.success("修改成功,请重新登陆");
|
||||
userStore
|
||||
.logout()
|
||||
.then(() => {
|
||||
tagsViewStore.delAllViews();
|
||||
})
|
||||
.then(() => {
|
||||
router.push(`/login?redirect=${route.fullPath}`);
|
||||
});
|
||||
} catch (error) {
|
||||
formLoading.value = false;
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 打开个人中心页面
|
||||
*/
|
||||
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
OrderCostSummary,
|
||||
} from "./types";
|
||||
|
||||
import { getCompatibleFieldValue } from "./utils";
|
||||
|
||||
/**
|
||||
* 返回商品单价
|
||||
* @param goods 商品
|
||||
@@ -46,7 +48,13 @@ export function returnGoodsPrice(
|
||||
// 限时折扣
|
||||
if (limitTimeDiscount && limitTimeDiscount.id) {
|
||||
//优先使用
|
||||
if (goods.isTimeDiscount || goods.is_time_discount) {
|
||||
// 兼容 isTimeDiscount/is_time_discount(这里顺便处理该字段的命名兼容)
|
||||
const isTimeDiscount = getCompatibleFieldValue(
|
||||
goods,
|
||||
"isTimeDiscount",
|
||||
"is_time_discount"
|
||||
);
|
||||
if (isTimeDiscount) {
|
||||
return new BigNumber(goods.salePrice)
|
||||
.times(limitTimeDiscount.discountRate / 100)
|
||||
.decimalPlaces(2, BigNumber.ROUND_UP)
|
||||
@@ -169,7 +177,15 @@ export function returnCanDikouGoodsArr(args: CanDikouGoodsArrArgs) {
|
||||
})
|
||||
.filter((v) => {
|
||||
const canUseNum = (v.num ?? 0) - (v.returnNum || 0);
|
||||
if (canUseNum <= 0 || v.is_temporary || v.is_gift) {
|
||||
// 兼容 is_temporary/isTemporary 和 is_gift/isGift
|
||||
const isTemporary = getCompatibleFieldValue(
|
||||
v,
|
||||
"isTemporary",
|
||||
"is_temporary"
|
||||
);
|
||||
const isGift = getCompatibleFieldValue(v, "isGift", "is_gift");
|
||||
|
||||
if (canUseNum <= 0 || isTemporary || isGift) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -188,7 +204,13 @@ function returnGoodsIsUseVipPrice(
|
||||
user: ShopUserInfo,
|
||||
goods: BaseCartItem
|
||||
) {
|
||||
if (goods.is_time_discount) {
|
||||
// 兼容 isTimeDiscount/is_time_discount
|
||||
const isTimeDiscount = getCompatibleFieldValue(
|
||||
goods,
|
||||
"isTimeDiscount",
|
||||
"is_time_discount"
|
||||
);
|
||||
if (isTimeDiscount) {
|
||||
return false;
|
||||
}
|
||||
if (shopInfo.isMemberPrice != 1 || user.isVip != 1) {
|
||||
@@ -214,12 +236,16 @@ function returnCanCalcGoodsList(
|
||||
user: ShopUserInfo
|
||||
) {
|
||||
return canCalcGoodsArr.filter((goods) => {
|
||||
if (
|
||||
!coupon.discountShare &&
|
||||
(goods.is_time_discount || goods.isTimeDiscount)
|
||||
) {
|
||||
// 兼容 isTimeDiscount/is_time_discount
|
||||
const isTimeDiscount = getCompatibleFieldValue(
|
||||
goods,
|
||||
"isTimeDiscount",
|
||||
"is_time_discount"
|
||||
);
|
||||
if (!coupon.discountShare && isTimeDiscount) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!coupon.vipPriceShare &&
|
||||
returnGoodsIsUseVipPrice(shopInfo, user, goods)
|
||||
@@ -288,12 +314,14 @@ export function returnCouponCanUse(args: couponCalcParams) {
|
||||
return coupon.thresholdFoods.find((food) => food.id == v.productId);
|
||||
});
|
||||
}
|
||||
|
||||
canCalcGoodsArr = returnCanCalcGoodsList(
|
||||
canCalcGoodsArr,
|
||||
coupon,
|
||||
shopInfo,
|
||||
user
|
||||
);
|
||||
|
||||
fullAmount = canCalcGoodsArr.reduce((pre, cur) => {
|
||||
return (
|
||||
pre +
|
||||
@@ -328,6 +356,7 @@ export function returnCouponCanUse(args: couponCalcParams) {
|
||||
reason: "当前选中的券不可与其他券同享",
|
||||
};
|
||||
}
|
||||
|
||||
// 满减券和折扣券计算门槛金额是否满足
|
||||
if ([1, 3].includes(coupon.type)) {
|
||||
if (canCalcGoodsArr.length <= 0) {
|
||||
@@ -438,7 +467,7 @@ export function calcDiscountGoodsArrPrice(
|
||||
) {
|
||||
let hasCountNum = 0;
|
||||
let discountPrice = 0;
|
||||
let hasDiscountGoodsArr = [];
|
||||
let hasDiscountGoodsArr:BaseCartItem[] = [];
|
||||
|
||||
for (let i = 0; i < discountGoodsArr.length; i++) {
|
||||
if (hasCountNum >= discountNum) {
|
||||
@@ -457,10 +486,13 @@ export function calcDiscountGoodsArrPrice(
|
||||
discountPrice += realPrice * num;
|
||||
|
||||
hasCountNum += num;
|
||||
hasDiscountGoodsArr.push({
|
||||
...goods,
|
||||
num,
|
||||
});
|
||||
if(goods){
|
||||
hasDiscountGoodsArr.push({
|
||||
...goods,
|
||||
num,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -609,7 +641,7 @@ export function returnCouponProductDiscount(
|
||||
let { useFoods, discountNum, useRule } = coupon;
|
||||
discountNum = discountNum || 0;
|
||||
//抵扣商品数组
|
||||
let discountGoodsArr = [];
|
||||
let discountGoodsArr:BaseCartItem[] = [];
|
||||
|
||||
//抵扣全部商品
|
||||
if (useFoods.length === 0) {
|
||||
@@ -656,9 +688,17 @@ function returnCouponBuyOneGiveOneDiscount(
|
||||
) {
|
||||
const { useFoods, useRule } = coupon;
|
||||
//抵扣商品
|
||||
let discountGoods = undefined;
|
||||
//符合买一送一条件的商品
|
||||
const canUseGoods = canDikouGoodsArr.filter((v) => (v.num || 0) >= 2);
|
||||
let discountGoods:BaseCartItem | undefined = undefined;
|
||||
//符合买一送一条件的商品(数量>=2 + 非临时/非赠品)
|
||||
const canUseGoods = canDikouGoodsArr.filter((v) => {
|
||||
const isTemporary = getCompatibleFieldValue(
|
||||
v,
|
||||
"isTemporary",
|
||||
"is_temporary"
|
||||
);
|
||||
const isGift = getCompatibleFieldValue(v, "isGift", "is_gift");
|
||||
return (v.num || 0) >= 2 && !isTemporary && !isGift;
|
||||
});
|
||||
//抵扣全部商品
|
||||
if (useFoods.length === 0) {
|
||||
if (useRule == "price_asc") {
|
||||
@@ -710,9 +750,17 @@ function returnSecoendDiscount(
|
||||
) {
|
||||
const { useFoods, useRule } = coupon;
|
||||
//抵扣商品
|
||||
let discountGoods = undefined;
|
||||
//符合条件的商品
|
||||
const canUseGoods = canDikouGoodsArr.filter((v) => (v.num || 0) >= 2);
|
||||
let discountGoods:BaseCartItem | undefined = undefined;
|
||||
//符合条件的商品(数量>=2 + 非临时/非赠品)
|
||||
const canUseGoods = canDikouGoodsArr.filter((v) => {
|
||||
const isTemporary = getCompatibleFieldValue(
|
||||
v,
|
||||
"isTemporary",
|
||||
"is_temporary"
|
||||
);
|
||||
const isGift = getCompatibleFieldValue(v, "isGift", "is_gift");
|
||||
return (v.num || 0) >= 2 && !isTemporary && !isGift;
|
||||
});
|
||||
//抵扣全部商品
|
||||
if (useFoods.length === 0) {
|
||||
if (useRule == "price_asc") {
|
||||
@@ -767,7 +815,14 @@ export function returnCanDikouGoods(
|
||||
) {
|
||||
const result = arr
|
||||
.filter((v) => {
|
||||
return !v.is_temporary && !v.is_gift;
|
||||
// 兼容 is_temporary/isTemporary 和 is_gift/isGift
|
||||
const isTemporary = getCompatibleFieldValue(
|
||||
v,
|
||||
"isTemporary",
|
||||
"is_temporary"
|
||||
);
|
||||
const isGift = getCompatibleFieldValue(v, "isGift", "is_gift");
|
||||
return !isTemporary && !isGift;
|
||||
})
|
||||
.filter((v) => {
|
||||
return (v.num || 0) > 0;
|
||||
@@ -781,9 +836,6 @@ export function returnCanDikouGoods(
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export const utils = {
|
||||
returnGoodsPrice,
|
||||
returnGoodsGroupMap,
|
||||
|
||||
1946
src/lib/goods.ts
@@ -29,9 +29,7 @@ export function canUseLimitTimeDiscount(
|
||||
) {
|
||||
shopInfo = shopInfo || {};
|
||||
shopUserInfo = shopUserInfo || {};
|
||||
if(shopInfo.isMemberPrice){
|
||||
shopUserInfo.isMemberPrice=1
|
||||
}
|
||||
|
||||
if (!limitTimeDiscountRes || !limitTimeDiscountRes.id) {
|
||||
return false;
|
||||
}
|
||||
@@ -88,6 +86,9 @@ export function returnPrice(args: returnPriceArgs) {
|
||||
shopId: 0,
|
||||
useType: "",
|
||||
};
|
||||
if(!goods){
|
||||
return 0;
|
||||
}
|
||||
const canUseFoods = (limitTimeDiscountRes.foods || "").split(",");
|
||||
const includesGoods =
|
||||
limitTimeDiscountRes.foodType == 1 ||
|
||||
@@ -96,8 +97,7 @@ export function returnPrice(args: returnPriceArgs) {
|
||||
shopUserInfo = shopUserInfo || {};
|
||||
if (
|
||||
shopUserInfo.isMemberPrice == 1 &&
|
||||
shopUserInfo.isVip == 1 &&
|
||||
shopInfo.isMemberPrice == 1
|
||||
shopUserInfo.isVip == 1
|
||||
) {
|
||||
const memberPrice = goods.memberPrice || goods.salePrice;
|
||||
|
||||
|
||||
33
src/lib/utils.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 通用字段兼容工具函数:处理驼峰/下划线命名的字段取值
|
||||
* @param obj 目标对象(如商品信息 BaseCartItem)
|
||||
* @param camelCaseKey 驼峰命名字段(如 'isTemporary')
|
||||
* @param snakeCaseKey 下划线命名字段(如 'is_temporary')
|
||||
* @param defaultValue 默认值(默认 false,适配布尔类型字段)
|
||||
* @returns 字段值(优先取存在的字段,无则返回默认值)
|
||||
*/
|
||||
export function getCompatibleFieldValue(
|
||||
obj: Record<string, any>,
|
||||
camelCaseKey: string,
|
||||
snakeCaseKey: string,
|
||||
defaultValue: boolean = false
|
||||
): boolean {
|
||||
// 优先判断驼峰字段(如果存在且不是 undefined/null)
|
||||
if (
|
||||
obj.hasOwnProperty(camelCaseKey) &&
|
||||
obj[camelCaseKey] !== undefined &&
|
||||
obj[camelCaseKey] !== null
|
||||
) {
|
||||
return Boolean(obj[camelCaseKey]);
|
||||
}
|
||||
// 再判断下划线字段
|
||||
if (
|
||||
obj.hasOwnProperty(snakeCaseKey) &&
|
||||
obj[snakeCaseKey] !== undefined &&
|
||||
obj[snakeCaseKey] !== null
|
||||
) {
|
||||
return Boolean(obj[snakeCaseKey]);
|
||||
}
|
||||
// 都不存在时返回默认值(布尔类型字段默认 false)
|
||||
return defaultValue;
|
||||
}
|
||||
@@ -24,53 +24,17 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
},
|
||||
|
||||
{
|
||||
path: "/",
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: "/index",
|
||||
meta: {
|
||||
title: "数据中心",
|
||||
icon: "数据统计",
|
||||
alwaysShow: true,
|
||||
},
|
||||
redirect: '/index',
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: () => import("@/views/data/index.vue"),
|
||||
name: "",
|
||||
path: 'index',
|
||||
component: () => import('@/views/index/index.vue'),
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: "经营数据",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "sales",
|
||||
name: "",
|
||||
component: () => import("@/views/data/sales.vue"),
|
||||
meta: {
|
||||
title: "销售统计",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "table",
|
||||
name: "",
|
||||
component: () => import("@/views/data/table.vue"),
|
||||
meta: {
|
||||
title: "台桌统计",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "work",
|
||||
name: "workStatistics",
|
||||
component: () => import("@/views/data/work.vue"),
|
||||
meta: {
|
||||
title: "收银交班记录",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
title: '首页',
|
||||
icon: 'homepage',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -83,9 +47,79 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
component: () => import("@/views/error/404.vue"),
|
||||
meta: { hidden: true },
|
||||
},
|
||||
],
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: "/",
|
||||
// component: Layout,
|
||||
// redirect: "/index",
|
||||
// meta: {
|
||||
// title: "数据中心",
|
||||
// icon: "数据统计",
|
||||
// alwaysShow: true,
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: "index",
|
||||
// component: () => import("@/views/data/index.vue"),
|
||||
// name: "",
|
||||
// meta: {
|
||||
// title: "经营数据",
|
||||
// affix: false,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "sales",
|
||||
// name: "",
|
||||
// component: () => import("@/views/data/sales.vue"),
|
||||
// meta: {
|
||||
// title: "销售统计",
|
||||
// affix: false,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "table",
|
||||
// name: "",
|
||||
// component: () => import("@/views/data/table.vue"),
|
||||
// meta: {
|
||||
// title: "台桌统计",
|
||||
// affix: false,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "finance",
|
||||
// name: "",
|
||||
// component: () => import("@/views/data/finance.vue"),
|
||||
// meta: {
|
||||
// title: "财务报表"
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "work",
|
||||
// name: "workStatistics",
|
||||
// component: () => import("@/views/data/work.vue"),
|
||||
// meta: {
|
||||
// title: "收银交班记录",
|
||||
// affix: false,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "401",
|
||||
// component: () => import("@/views/error/401.vue"),
|
||||
// meta: { hidden: true },
|
||||
// },
|
||||
// {
|
||||
// path: "404",
|
||||
// component: () => import("@/views/error/404.vue"),
|
||||
// meta: { hidden: true },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// path: "/shop",
|
||||
// component: Layout,
|
||||
// meta: {
|
||||
|
||||
@@ -2,10 +2,11 @@ import { store } from "@/store";
|
||||
import WebSocketManager, { type ApifoxModel, msgType } from "@/utils/websocket";
|
||||
import orderApi from "@/api/order/order";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
const shopUser = useUserStoreHook();
|
||||
|
||||
import { customTruncateToTwoDecimals } from '@/utils/tools'
|
||||
import productApi from "@/api/product/index";
|
||||
|
||||
const shopUser = useUserStoreHook();
|
||||
export interface CartsState {
|
||||
id: string | number;
|
||||
[property: string]: any;
|
||||
|
||||
@@ -3,6 +3,7 @@ import WebSocketManager, { type ApifoxModel, msgType } from "@/utils/websocket";
|
||||
import orderApi from "@/api/order/order";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import productApi from "@/api/product/index";
|
||||
import categoryApi from "@/api/product/productclassification";
|
||||
import shopUserApi from '@/api/account/shopUser'
|
||||
import limitTimeDiscountApi from '@/api/market/limitTimeDiscount.js'
|
||||
import { BigNumber } from "bignumber.js";
|
||||
@@ -82,8 +83,6 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
default: productType = GoodsType.NORMAL;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return {
|
||||
...item,
|
||||
id: item.id,
|
||||
@@ -226,7 +225,25 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
const isLinkFinshed = ref(false);
|
||||
|
||||
// 当前购物车数据(现在 getAllGoodsList 能直接访问)
|
||||
const list = useStorage<any[]>("carts", []);
|
||||
const list = useStorage<any[]>(
|
||||
"carts",
|
||||
[],
|
||||
localStorage,
|
||||
{
|
||||
serializer: {
|
||||
read: (rawValue) => {
|
||||
// 没有值时直接返回默认空数组
|
||||
if (!rawValue) return []
|
||||
try {
|
||||
return JSON.parse(rawValue)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
},
|
||||
write: (value) => JSON.stringify(value),
|
||||
},
|
||||
}
|
||||
)
|
||||
// 历史订单数据(现在 getAllGoodsList 能直接访问)
|
||||
const oldOrder = useStorage<any>("Instead_olold_order", {
|
||||
detailMap: [],
|
||||
@@ -332,11 +349,61 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
}
|
||||
});
|
||||
|
||||
const consList = await productApi.consStock({ shopId: localStorage.getItem("shopId") })
|
||||
|
||||
goods.value = addGoodsSoldOutStatus(goods.value, consList)
|
||||
|
||||
console.log('代客下单页面商品缓存.goods.value', goods.value);
|
||||
|
||||
setGoodsMap(goods.value);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 给商品列表批量添加 isSoldOut 售罄状态字段
|
||||
* @param {Array} goodsList - 商品列表 [ { consList, isAutoSoldStock } ]
|
||||
* @param {Array} consStockList - 真实耗材库存列表 [ { consId, stockNumber } ]
|
||||
* @returns 带 isSoldOut 字段的新商品列表
|
||||
*/
|
||||
function addGoodsSoldOutStatus(goodsList, consStockList) {
|
||||
// console.log('addGoodsSoldOutStatus.goodsList', goodsList);
|
||||
// console.log('addGoodsSoldOutStatus.consStockList', consStockList);
|
||||
|
||||
// 耗材ID映射真实库存(保留)
|
||||
const consMap = _.keyBy(consStockList, item => String(item.consId));
|
||||
|
||||
return _.map(goodsList, goods => {
|
||||
let isSoldOut = false;
|
||||
|
||||
// 开启自动售罄才判断
|
||||
if (goods.isAutoSoldStock === 1 || goods.isAutoSoldStock === true) {
|
||||
const goodsConsList = goods.consList || [];
|
||||
|
||||
// 无耗材 → 不售罄
|
||||
if (goodsConsList.length === 0) {
|
||||
isSoldOut = false;
|
||||
} else {
|
||||
// 核心:只要有一个耗材 真实库存 < 商品需要量 → 售罄
|
||||
isSoldOut = _.some(goodsConsList, consItem => {
|
||||
// 商品绑定的耗材ID(对应真实库存ID)
|
||||
const consId = String(consItem.consInfoId);
|
||||
// 商品需要消耗的数量(你的需求量)
|
||||
const needStock = consItem.surplusStock || 0;
|
||||
// 起售数量
|
||||
const suitNum = goods.type == 'single' ? goods.skuList[0].suitNum : 1;
|
||||
// 真实库存
|
||||
const realStock = _.get(consMap, [consId, 'stockNumber'], 0);
|
||||
|
||||
// 真实库存 < 需要量 * 起售数量 → 不足 → 售罄
|
||||
return realStock < needStock * suitNum;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { ...goods, isSoldOut };
|
||||
});
|
||||
}
|
||||
|
||||
function setGoodsMap(goods: any[]) {
|
||||
for (let item of goods) {
|
||||
goodsMap[item.id] = item;
|
||||
@@ -642,7 +709,9 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
sendMessage('add', { ...basic_msg, ...data });
|
||||
}
|
||||
|
||||
// 添加购物车/编辑购物车
|
||||
function add(data: any) {
|
||||
// console.log('添加购物车/编辑购物车===', data);
|
||||
goods.value.map(item => {
|
||||
if (item.id == data.product_id) {
|
||||
data.is_time_discount = item.is_time_discount ? 1 : 0
|
||||
@@ -657,8 +726,29 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
console.log('carts.add===', data);
|
||||
|
||||
if (hasCart) {
|
||||
// console.log('编辑', msg);
|
||||
if (hasCart.number * 1 + msg.number * 1 == 2) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '购物车已有该商品,请确认是否重复',
|
||||
duration: 4000
|
||||
})
|
||||
}
|
||||
update({ ...hasCart, ...msg, number: hasCart.number * 1 + msg.number * 1 });
|
||||
} else {
|
||||
// console.log('添加', msg);
|
||||
let arr = _.flatten(_.values(oldOrder.value.detailMap))
|
||||
// console.log('添加.arr===', arr);
|
||||
const isExist = _.some(arr, item => Number(item.productId) === msg.product_id)
|
||||
|
||||
// console.log('添加.isExist===', isExist);
|
||||
if (msg.number == 1 && isExist) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '该商品已下单过,请确认是否重复',
|
||||
duration: 4000
|
||||
})
|
||||
}
|
||||
sendMessage('add', msg);
|
||||
}
|
||||
}
|
||||
@@ -670,11 +760,13 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
}
|
||||
|
||||
function rotTable(newVal: string | number, cart_id = []) {
|
||||
sendMessage('rottable', {
|
||||
new_table_code: newVal,
|
||||
table_code: table_code.value,
|
||||
cart_id
|
||||
});
|
||||
if (cart_id.length) {
|
||||
sendMessage('rottable', {
|
||||
new_table_code: newVal,
|
||||
table_code: table_code.value,
|
||||
cart_id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function del(data: any) {
|
||||
@@ -833,8 +925,9 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
}
|
||||
|
||||
// 初始话订单信息/补全历史订单信息
|
||||
async function setOldOrder(data: any) {
|
||||
console.log('补全订单信息', data);
|
||||
async function setOldOrder(data: any, t: number) {
|
||||
console.log('补全历史订单信息来源', t);
|
||||
// console.log('补全订单信息', data);
|
||||
oldOrder.value = {
|
||||
...data,
|
||||
detailMap: returnDetailMap(data.detailMap)
|
||||
@@ -849,10 +942,17 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
|
||||
let $initParams = {} as ApifoxModel;
|
||||
|
||||
async function init(initParams: ApifoxModel, $oldOrder: any | undefined) {
|
||||
await getGoods({});
|
||||
if ($oldOrder) setOldOrder($oldOrder);
|
||||
else oldOrder.value = { detailMap: [] };
|
||||
|
||||
// 标志位,表示是否正在清空历史订单
|
||||
const isClearingOldOrder = ref(false);
|
||||
|
||||
|
||||
async function init(initParams: ApifoxModel | undefined, $oldOrder: any | undefined) {
|
||||
console.log('cart.init.initParams', initParams);
|
||||
console.log('cart.init.$oldOrder', $oldOrder);
|
||||
|
||||
|
||||
|
||||
|
||||
if (initParams) {
|
||||
initParams.table_code = initParams.table_code || '';
|
||||
@@ -860,6 +960,16 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
$initParams = initParams;
|
||||
}
|
||||
|
||||
await getGoods({});
|
||||
|
||||
if ($oldOrder) {
|
||||
await setOldOrder($oldOrder);
|
||||
} else if (table_code.value) {
|
||||
await getOldOrder(table_code.value);
|
||||
} else {
|
||||
oldOrder.value = { detailMap: [] };
|
||||
}
|
||||
|
||||
concocatSocket($initParams);
|
||||
}
|
||||
|
||||
@@ -868,7 +978,7 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
console.log("收到消息:", msg);
|
||||
if (!msg.status) {
|
||||
if (msg.hasOwnProperty('status') && msg.status !== 1 && msg.operate_type !== 'bulk_edit') {
|
||||
return ElMessage.error(msg.message || '操作失败');
|
||||
return ElMessage.error(msg.msg || '操作失败');
|
||||
}
|
||||
}
|
||||
if (msg?.data) {
|
||||
@@ -977,8 +1087,15 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
concocatSocket({ ...$initParams, table_code: table_code.value });
|
||||
}
|
||||
|
||||
// WebSocket 监听 product_update 消息
|
||||
if (msg.operate_type === "product_update") {
|
||||
init($initParams, oldOrder.value);
|
||||
if (isClearingOldOrder.value) {
|
||||
console.log("忽略 product_update 消息,因为正在清空历史订单");
|
||||
isClearingOldOrder.value = false; // 重置标志位
|
||||
return;
|
||||
}
|
||||
console.log("处理 product_update 消息");
|
||||
init($initParams, oldOrder.value); // 重新初始化
|
||||
}
|
||||
|
||||
if (msg.type === "bc") {
|
||||
@@ -1084,7 +1201,7 @@ export const useCartsStore = defineStore("carts", () => {
|
||||
getAllGoodsList,
|
||||
vipUser,
|
||||
changeTableInfo,
|
||||
tableInfo,
|
||||
tableInfo, isClearingOldOrder,
|
||||
clearHistory
|
||||
};
|
||||
});
|
||||
|
||||
@@ -11,6 +11,7 @@ import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/
|
||||
export const useUserStore = defineStore("user", () => {
|
||||
// const isShopAdmin = ref(false) // 0商户 1员工
|
||||
const isShopAdmin = useStorage("isShopAdmin", false) // 0商户 1员工
|
||||
const isAdmin = useStorage("isAdmin", false) // 是否是管理员
|
||||
const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
|
||||
const promissionList = useStorage<string[]>("promissionList", [] as string[]);
|
||||
//美团抖音核销店铺信息
|
||||
@@ -32,6 +33,7 @@ export const useUserStore = defineStore("user", () => {
|
||||
AuthAPI.login(loginRequest)
|
||||
.then((data) => {
|
||||
isShopAdmin.value = data.loginType == 0 ? true : false;
|
||||
isAdmin.value = data.shopInfo.id == 1 ? true : false
|
||||
Object.assign(userInfo.value, { ...data.shopInfo, shopId: data.shopInfo.id });
|
||||
promissionList.value = data.promissionList;
|
||||
const token = data.tokenInfo.tokenValue;
|
||||
@@ -39,7 +41,7 @@ export const useUserStore = defineStore("user", () => {
|
||||
setRefreshToken(token);
|
||||
localStorage.setItem("shopId", "" + data.shopInfo.id);
|
||||
localStorage.setItem("branch_shopId", data.shopInfo.id)
|
||||
resolve();
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
@@ -120,6 +122,7 @@ export const useUserStore = defineStore("user", () => {
|
||||
userInfo.value = {} as UserInfo
|
||||
meituan_douyin_info.value = {}
|
||||
isShopAdmin.value = false
|
||||
isAdmin.value = false
|
||||
clearToken();
|
||||
usePermissionStoreHook().resetRouter();
|
||||
useDictStoreHook().clearDictionaryCache();
|
||||
@@ -137,7 +140,7 @@ export const useUserStore = defineStore("user", () => {
|
||||
}
|
||||
|
||||
return {
|
||||
isShopAdmin,
|
||||
isShopAdmin, isAdmin,
|
||||
meituan_douyin_info,
|
||||
userInfo,
|
||||
promissionList,
|
||||
|
||||
@@ -322,3 +322,41 @@ export function isValidMobile(phone: string): boolean {
|
||||
const mobileRegex = /^1[3-9]\d{9}$/;
|
||||
return mobileRegex.test(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号脱敏:隐藏中间四位数字
|
||||
* @param {string | number} phone - 原始手机号(支持数字/字符串)
|
||||
* @returns {string} 脱敏后的手机号,如 138****1234
|
||||
*/
|
||||
export function maskPhone(phone) {
|
||||
// 先转成字符串,避免传入数字类型报错
|
||||
const phoneStr = String(phone).trim();
|
||||
|
||||
// 简单校验:必须是11位数字
|
||||
if (!/^1\d{10}$/.test(phoneStr)) {
|
||||
console.warn('手机号格式不正确');
|
||||
return phoneStr; // 格式错误直接返回原值
|
||||
}
|
||||
|
||||
// 核心:前3位 + **** + 后4位
|
||||
return phoneStr.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||||
}
|
||||
|
||||
/**
|
||||
* 金额保留两位小数 不四舍五入
|
||||
* @param {number} num 金额数字
|
||||
* @param {boolean} hasSymbol 是否带¥符号,默认true
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatMoney(num, hasSymbol = true) {
|
||||
// 防止非数字、空值报错
|
||||
if (isNaN(Number(num))) num = 0;
|
||||
// 不四舍五入截断两位小数
|
||||
const value = Math.floor(Math.abs(num) * 100) / 100;
|
||||
// 拼接两位小数
|
||||
const fixedNum = value.toFixed(2);
|
||||
// 负数处理
|
||||
const result = num < 0 ? `-${fixedNum}` : fixedNum;
|
||||
// 默认返回带¥
|
||||
return hasSymbol ? `¥${result}` : result;
|
||||
}
|
||||
|
||||
131
src/utils/request-import-php.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import axios from "axios";
|
||||
import router from "@/router";
|
||||
import { getDouyinToken, getToken } from "@/utils/auth";
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
baseURL: import.meta.env.VITE_APP_API_PHP_IMPORT_URL, // api 的 base_url
|
||||
// baseURL: "/import_api", // api 的 base_url
|
||||
timeout: 1000 * 20, // 请求超时时间
|
||||
});
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
if (getToken()) {
|
||||
config.headers["token"] = getToken();
|
||||
}
|
||||
if (!config.headers["Content-Type"]) {
|
||||
config.headers["Content-Type"] = "application/json";
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
// 确保错误回调返回Promise,避免状态异常
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// response 拦截器
|
||||
service.interceptors.response.use(
|
||||
(response) => {
|
||||
const data = response.data;
|
||||
console.log(data);
|
||||
if (data.code == 0) {
|
||||
ElNotification.error({
|
||||
title: data.msg,
|
||||
duration: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (data.code == 439 || data.code == 303) {
|
||||
ElNotification.error({
|
||||
title: "请登录",
|
||||
duration: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (data.code == 4399) {
|
||||
ElNotification.error({
|
||||
title: data.msg,
|
||||
duration: 5000,
|
||||
});
|
||||
return data;
|
||||
}
|
||||
// if (data.code == 1 && !data.data) {
|
||||
// ElNotification.success({
|
||||
// title: data.msg,
|
||||
// duration: 5000
|
||||
// })
|
||||
// return true;
|
||||
// }
|
||||
return data.data;
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
if (axios.isCancel(error)) {
|
||||
console.log("请求已取消");
|
||||
ElNotification.error({
|
||||
title: "请求已取消",
|
||||
duration: 5000,
|
||||
});
|
||||
return Promise.reject("请求已取消");
|
||||
}
|
||||
|
||||
// 兼容blob下载出错json提示
|
||||
if (
|
||||
error.response.data instanceof Blob &&
|
||||
error.response.data.type.toLowerCase().indexOf("json") !== -1
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(error.response.data, "utf-8");
|
||||
reader.onload = function (e) {
|
||||
const errorMsg = JSON.parse(reader.result).message;
|
||||
ElNotification.error({
|
||||
title: errorMsg,
|
||||
duration: 5000,
|
||||
});
|
||||
};
|
||||
} else {
|
||||
let code = 0;
|
||||
try {
|
||||
code = error.response.data.status;
|
||||
} catch (e) {
|
||||
if (error.toString().indexOf("Error: timeout") !== -1) {
|
||||
ElNotification.error({
|
||||
title: "网络请求超时",
|
||||
duration: 5000,
|
||||
});
|
||||
return Promise.reject(error);
|
||||
}
|
||||
}
|
||||
console.log(code);
|
||||
if (code) {
|
||||
if (code === 401) {
|
||||
// store.dispatch("LogOut").then(() => {
|
||||
// // 用户登录界面提示
|
||||
// Cookies.set("point", 401);
|
||||
// location.reload();
|
||||
// });
|
||||
} else if (code === 403) {
|
||||
router.push({ path: "/401" });
|
||||
} else {
|
||||
const errorMsg = error.response.data.message;
|
||||
if (errorMsg !== undefined) {
|
||||
ElNotification.error({
|
||||
title: errorMsg,
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ElNotification.error({
|
||||
title: "接口请求失败",
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
export default service;
|
||||
@@ -3,6 +3,7 @@ import { useUserStoreHook } from "@/store";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
const user = useUserStoreHook();
|
||||
let isTips = false
|
||||
|
||||
export interface ApifoxModel {
|
||||
account: string;
|
||||
@@ -143,6 +144,7 @@ class WebSocketManager {
|
||||
this.autoConnect = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 自动重连机制
|
||||
private reconnect() {
|
||||
if (!this.autoConnect) {
|
||||
@@ -156,19 +158,24 @@ class WebSocketManager {
|
||||
}, this.reconnectDelay);
|
||||
} else {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
console.error("达到最大重连次数,停止重连");
|
||||
ElMessageBox.confirm('达到最大重连次数' + this.maxReconnectAttempts + '次,已停止重连,是否立即重连?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
// window.location.reload();
|
||||
// console.error("达到最大重连次数,停止重连");
|
||||
if (!isTips) {
|
||||
ElMessageBox.confirm('达到最大重连次数' + this.maxReconnectAttempts + '次,已停止重连,是否立即重连?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
||||
callback: (action: string) => {
|
||||
console.log(action);
|
||||
if (action == 'confirm') {
|
||||
this.setupWebSocket();
|
||||
this.reconnectAttempts = 0;
|
||||
callback: (action: string) => {
|
||||
console.log(action);
|
||||
if (action == 'confirm') {
|
||||
isTips = false
|
||||
this.setupWebSocket();
|
||||
this.reconnectAttempts = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
isTips = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,8 +23,8 @@ import call from "@/assets/images/application/call.png";
|
||||
|
||||
const list = ref([
|
||||
{ name: "存酒", icon: bear, path: "storingWine", desc: "用户未喝完的酒可暂存在店里" },
|
||||
{ name: "点歌", icon: song, path: "song", desc: "用户可以付费点歌" },
|
||||
{ name: "广告", icon: ad, path: "advertisement", desc: "添加弹窗广告" },
|
||||
// { name: "点歌", icon: song, path: "song", desc: "用户可以付费点歌" },
|
||||
// { name: "广告", icon: ad, path: "advertisement", desc: "添加弹窗广告" },
|
||||
{ name: "叫号", icon: call, path: "lineUplist", desc: "" },
|
||||
]);
|
||||
|
||||
|
||||
@@ -60,7 +60,8 @@
|
||||
<myDialog ref="myDialogRefqs" title="记录" @confirm="confirmqs" width="30%">
|
||||
<el-form-item label="选择用户">
|
||||
<el-select v-model="datas.DialogForm.userId" filterable placeholder="请选择选择用户" style="width: 240px">
|
||||
<el-option v-for="item in datas.options" :key="item.userId" :label="item.nickName" :value="item.userId" />
|
||||
<el-option v-for="item in datas.options" :key="item.userId" :label="`${item.nickName}/${item.phone}`"
|
||||
:value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
@@ -128,7 +129,7 @@ function myDialogRefqsevent(item) {
|
||||
myDialogRefqs.value.open()
|
||||
}
|
||||
async function getshopUser(params) {
|
||||
const res = await API.getshopUser({})
|
||||
const res = await API.getshopUser({ page: 1, size: 999, ...params })
|
||||
datas.options = res.records
|
||||
}
|
||||
async function getList(data = {}) {
|
||||
|
||||
@@ -19,10 +19,11 @@ const AuthAPI = {
|
||||
});
|
||||
},
|
||||
// 获取用户店铺列表
|
||||
getshopUser() {
|
||||
getshopUser(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `/account/admin/shopUser`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
// 新增
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
<el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
|
||||
<el-form-item label="选择用户">
|
||||
<el-select v-model="datas.DialogForm.userId" filterable placeholder="请选择选择用户" style="width: 240px">
|
||||
<el-option v-for="item in datas.options" :key="item.userId" :label="item.nickName" :value="item.userId" />
|
||||
<el-option v-for="item in datas.options" :key="item.userId" :label="`${item.nickName}/${item.phone}`"
|
||||
:value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择酒品">
|
||||
@@ -107,7 +108,7 @@ async function getList(data = {}) {
|
||||
datas.pagingConfig.pageNumber = res.pageNumber
|
||||
}
|
||||
async function getshopUser(params) {
|
||||
const res = await API.getshopUser({})
|
||||
const res = await API.getshopUser({ page: 1, size: 999, ...params })
|
||||
datas.options = res.records
|
||||
}
|
||||
async function getstorageGood() {
|
||||
|
||||
@@ -18,10 +18,11 @@ const AuthAPI = {
|
||||
});
|
||||
},
|
||||
// 获取用户店铺列表
|
||||
getshopUser() {
|
||||
getshopUser(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `/account/admin/shopUser`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
// 获取酒品列表
|
||||
|
||||
@@ -19,18 +19,7 @@ const modalConfig: IModalConfig = {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'switch',
|
||||
attrs: {
|
||||
activeText: '开启',
|
||||
inactiveText: '关闭',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
initialValue: 1
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "挂账人",
|
||||
@@ -66,6 +55,56 @@ const modalConfig: IModalConfig = {
|
||||
},
|
||||
initialValue: 0
|
||||
},
|
||||
// ===================== 新增 =====================
|
||||
{
|
||||
label: "还款提醒日",
|
||||
prop: "expireRemindDay",
|
||||
type: "input",
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value) return callback();
|
||||
const num = Number(value);
|
||||
if (!Number.isInteger(num) || num < 1 || num > 28) {
|
||||
callback(new Error("请输入 1~28 之间的整数"));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
type: "number",
|
||||
placeholder: "每月几号提醒(1-28)",
|
||||
style: { width: "200px" },
|
||||
oninput: "value=value.replace(/\\D|\\./g,'')" // 禁止输入小数点
|
||||
},
|
||||
initialValue: "",
|
||||
},
|
||||
{
|
||||
label: "还款提醒",
|
||||
prop: "expireRemind",
|
||||
type: "input",
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value) return callback();
|
||||
const num = Number(value);
|
||||
if (!Number.isInteger(num) || num < 0) {
|
||||
callback(new Error("请输入大于等于 0 的整数"));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
type: "number",
|
||||
placeholder: "提醒多久以前的数据单位(月)",
|
||||
style: { width: "240px" },
|
||||
oninput: "value=value.replace(/\\D|\\./g,'')" // 禁止输入小数点
|
||||
},
|
||||
initialValue: "",
|
||||
},
|
||||
// ================================================
|
||||
{
|
||||
label: "还款方式",
|
||||
prop: "repaymentMethod",
|
||||
@@ -73,6 +112,18 @@ const modalConfig: IModalConfig = {
|
||||
options: returnOptions('repaymentMethod'),
|
||||
initialValue: returnOptions('repaymentMethod')[0].value
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'switch',
|
||||
attrs: {
|
||||
activeText: '开启',
|
||||
inactiveText: '关闭',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
initialValue: 1
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -58,16 +58,36 @@ const contentConfig: IContentConfig = {
|
||||
label: "已挂账金额(元)",
|
||||
align: "center",
|
||||
prop: "owedAmount",
|
||||
templet: "custom",
|
||||
slotName: 'owedAmount',
|
||||
},
|
||||
// {
|
||||
// label: "剩余挂账额度(元)",
|
||||
// align: "center",
|
||||
// prop: "remainingAmount",
|
||||
// templet: "custom",
|
||||
// slotName: 'remainingAmount',
|
||||
// },
|
||||
{
|
||||
label: "剩余挂账额度(元)",
|
||||
align: "center",
|
||||
prop: "remainingAmount",
|
||||
},
|
||||
{
|
||||
label: "账户余额",
|
||||
label: "账户余额(挂账额度+用户余额)",
|
||||
align: "center",
|
||||
prop: "accountBalance",
|
||||
templet: "custom",
|
||||
slotName: 'accountBalance',
|
||||
},
|
||||
{
|
||||
label: "还款提醒日",
|
||||
align: "center",
|
||||
prop: "expireRemindDay",
|
||||
templet: "custom",
|
||||
slotName: 'expireRemindDay',
|
||||
},
|
||||
{
|
||||
label: "还款提醒",
|
||||
align: "center",
|
||||
prop: "expireRemind",
|
||||
templet: "custom",
|
||||
slotName: 'expireRemind',
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
|
||||
@@ -19,18 +19,7 @@ const modalConfig: IModalConfig = {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'switch',
|
||||
attrs: {
|
||||
activeText: '开启',
|
||||
inactiveText: '关闭',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
initialValue: 1
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "挂账人",
|
||||
@@ -66,6 +55,56 @@ const modalConfig: IModalConfig = {
|
||||
},
|
||||
initialValue: 0
|
||||
},
|
||||
// ===================== 新增 =====================
|
||||
{
|
||||
label: "还款提醒日",
|
||||
prop: "expireRemindDay",
|
||||
type: "input",
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value) return callback();
|
||||
const num = Number(value);
|
||||
if (!Number.isInteger(num) || num < 1 || num > 28) {
|
||||
callback(new Error("请输入 1~28 之间的整数"));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
type: "number",
|
||||
placeholder: "每月几号提醒(1-28)",
|
||||
style: { width: "200px" },
|
||||
oninput: "value=value.replace(/\\D|\\./g,'')" // 禁止输入小数点
|
||||
},
|
||||
initialValue: "",
|
||||
},
|
||||
{
|
||||
label: "还款提醒",
|
||||
prop: "expireRemind",
|
||||
type: "input",
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value) return callback();
|
||||
const num = Number(value);
|
||||
if (!Number.isInteger(num) || num < 0) {
|
||||
callback(new Error("请输入大于等于 0 的整数"));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
type: "number",
|
||||
placeholder: "提醒多久以前的数据单位(月)",
|
||||
style: { width: "240px" },
|
||||
oninput: "value=value.replace(/\\D|\\./g,'')" // 禁止输入小数点
|
||||
},
|
||||
initialValue: "",
|
||||
},
|
||||
// ================================================
|
||||
{
|
||||
label: "还款方式",
|
||||
prop: "repaymentMethod",
|
||||
@@ -73,6 +112,18 @@ const modalConfig: IModalConfig = {
|
||||
options: returnOptions('repaymentMethod'),
|
||||
initialValue: returnOptions('repaymentMethod')[0].value
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'switch',
|
||||
attrs: {
|
||||
activeText: '开启',
|
||||
inactiveText: '关闭',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
initialValue: 1
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -2,19 +2,49 @@ import type { ISearchConfig } from "@/components/CURD/types";
|
||||
|
||||
const searchConfig: ISearchConfig = {
|
||||
pageName: "sys:user",
|
||||
isExpand: true,
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "挂账人",
|
||||
prop: "keywords",
|
||||
prop: "debtor",
|
||||
attrs: {
|
||||
placeholder: "请输入挂账人或手机号",
|
||||
placeholder: "请输入挂账人名称",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "手机号",
|
||||
prop: "mobile",
|
||||
attrs: {
|
||||
placeholder: "请输入手机号",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
placeholder: "请选择状态",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
initialValue: '',
|
||||
options: [
|
||||
{ label: "停用", value: '0' },
|
||||
{ label: "启用", value: '1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "还款状态",
|
||||
@@ -28,9 +58,8 @@ const searchConfig: ISearchConfig = {
|
||||
},
|
||||
initialValue: '',
|
||||
options: [
|
||||
{ label: "未还款", value: 'unpaid' },
|
||||
{ label: "部分还款", value: 'partial' },
|
||||
{ label: "已还清", value: 'paid' },
|
||||
{ label: "有欠款", value: '0' },
|
||||
{ label: "无欠款", value: '1' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -28,6 +28,27 @@
|
||||
<template #options="scope">
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #accountBalance="scope">
|
||||
{{ scope.row.accountBalance }}
|
||||
</template>
|
||||
|
||||
<template #owedAmount="scope">
|
||||
{{
|
||||
scope.row.creditAmount - scope.row.accountBalance > 0
|
||||
? scope.row.creditAmount - scope.row.accountBalance
|
||||
: 0
|
||||
}}
|
||||
</template>
|
||||
|
||||
<template #expireRemindDay="scope">
|
||||
<el-text>{{ scope.row.expireRemindDay }}号</el-text>
|
||||
</template>
|
||||
<template #expireRemind="scope">
|
||||
<el-text>{{ scope.row.expireRemind }}月前</el-text>
|
||||
</template>
|
||||
<template #remainingAmount="scope">
|
||||
{{ scope.row.creditAmount - scope.row.accountBalance }}
|
||||
</template>
|
||||
<template #gender="scope">
|
||||
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
|
||||
</template>
|
||||
|
||||
743
src/views/data/finance.vue
Normal file
@@ -0,0 +1,743 @@
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="row">
|
||||
<div class="between">
|
||||
<el-form :model="queryForm" inline>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="queryForm.queryDate" type="date" placeholder="选择日期" format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD" :disabled-date="disabledFutureDate" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" :loading="loading" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="handleReset" icon="Refresh" :loading="loading">重置</el-button>
|
||||
<el-button icon="Printer" @click="printBusinessDialogRef.show()">经营日报</el-button>
|
||||
<el-button icon="Printer" @click="printBusinessDialogRef2.show()">日结单</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form inline>
|
||||
<el-form-item>
|
||||
<el-select v-model="queryForm.platform" placeholder="选择平台" clearable style="width: 150px;">
|
||||
<el-option v-for="item in platformList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleExport" icon="Download">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-loading="loading">
|
||||
<div class="warp" style="width: 400px;">
|
||||
<div class="card">
|
||||
<div class="header_title">营业额</div>
|
||||
<div class="num" style="color: var(--el-color-primary);">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.turnover || 0) }}
|
||||
</div>
|
||||
<div class="intro">营业额</div>
|
||||
<div class="pay_wrap">
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.wechat || 0) }}
|
||||
</div>
|
||||
<span class="t">微信支付金额</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.alipay || 0) }}
|
||||
</div>
|
||||
<span class="t">支付宝支付金额</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.selfScan || 0) }}
|
||||
</div>
|
||||
<span class="t">二维码收款</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.barScan || 0) }}
|
||||
</div>
|
||||
<span class="t">扫码收款</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.cash || 0) }}
|
||||
</div>
|
||||
<span class="t">现金收款</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.recharge || 0) }}
|
||||
</div>
|
||||
<span class="t">充值</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.owed || 0) }}
|
||||
</div>
|
||||
<span class="t">挂账</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.turnover.balance || 0) }}
|
||||
</div>
|
||||
<span class="t">余额支付</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="order_info">
|
||||
<div class="order_title">
|
||||
<span class="dot"></span>
|
||||
<span class="t">订单</span>
|
||||
</div>
|
||||
<div class="order_lits">
|
||||
<div class="item">
|
||||
<span class="t">订单金额</span>
|
||||
<span class="n">{{ tableData.order.orderAmount || 0 }}</span>
|
||||
</div>
|
||||
<span class="line">|</span>
|
||||
<div class="item">
|
||||
<span class="t">订单总数</span>
|
||||
<span class="n">{{ tableData.order.orderCount || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header_title">数据统计</div>
|
||||
<div class="pay_wrap">
|
||||
<div class="item">
|
||||
<span class="n">{{ tableData.sts.customerCount || 0 }}</span>
|
||||
<span class="t">就餐人数</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="n">{{ tableData.sts.orderCount || 0 }}</span>
|
||||
<span class="t">订单数</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="n">{{ tableData.sts.tableCount || 0 }}</span>
|
||||
<span class="t">桌台数</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.sts.avgPayAmount || 0) }}
|
||||
</div>
|
||||
<div class="t">客单价
|
||||
<el-tooltip class="box-item" effect="dark" content="实付金额(包含现金支付 包含会员支付 包含挂账)/就餐人数没有具体人数时,默认一桌按照1人计算"
|
||||
placement="top">
|
||||
<el-icon color="#666">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="n">{{ tableData.sts.turnoverRate || 0 }}%</span>
|
||||
<div class="t">翻台率
|
||||
<el-tooltip class="box-item" effect="dark" content="(订单数-桌台数)/桌台数*100%" placement="top">
|
||||
<el-icon color="#666">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.sts.profitAmount || 0) }}
|
||||
</div>
|
||||
<div class="t">毛利润
|
||||
<el-tooltip class="box-item" effect="dark" content="(订单实付金额-商品成本)" placement="top">
|
||||
<el-icon color="#666">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.sts.productCostAmount || 0) }}
|
||||
</div>
|
||||
<span class="t">商品成本</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="n">{{ tableData.sts.profitRate || 0 }}%</span>
|
||||
<div class="t">毛利率
|
||||
<el-tooltip class="box-item" effect="dark" content="(订单实付金额-商品成本)/订单实付金额*100%" placement="top">
|
||||
<el-icon color="#666">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item">
|
||||
<span class="n">{{ tableData.sts.netProfitAmount || 0 }}%</span>
|
||||
<span class="t">净利率</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.sts.netProfitRate || 0) }}
|
||||
</div>
|
||||
<span class="t">净利润</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="flex: 1;">
|
||||
<div class="header_title">商家经营数据</div>
|
||||
<div class="content">
|
||||
<div class="card" style="flex: 1;">
|
||||
<div class="num" style="color: var(--el-color-success);">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.discountAmount || 0) }}
|
||||
</div>
|
||||
<div class="intro">优惠金额</div>
|
||||
<div class="item_list">
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
{{ tableData.discount.discountCount || 0 }}
|
||||
</div>
|
||||
<div class="label">
|
||||
优惠笔数
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.newConsumerDiscount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
新客立减
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.freeCashAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
霸王餐
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.fullMinusAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
满减活动
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.couponAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
优惠券
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.memberDiscount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
会员折扣
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.pointsDiscountAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
积分抵扣金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.discount.orderDiscount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
订单改价
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="flex: 1;">
|
||||
<div class="num" style="color: var(--el-color-danger);">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.refundAmount || 0) }}
|
||||
</div>
|
||||
<div class="intro">退款金额</div>
|
||||
<div class="item_list">
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.onlineRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
线上退款金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.cashRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
现金退款金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.memberRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
余额退款金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.onlineRechargeRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
线上充值退款金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.cashRechargeRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
现金充值退款金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.refund.creditRefundAmount || 0) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
挂账退款金额
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="flex: 1;">
|
||||
<div class="num" style="color: var(--el-color-warning);">
|
||||
<span class="i">¥</span>
|
||||
{{ multiplyAndFormat(tableData.order.orderAmount || 0) }}
|
||||
</div>
|
||||
<div class="intro">订单金额</div>
|
||||
<div class="item_list">
|
||||
<div class="item">
|
||||
<div class="n">
|
||||
{{ tableData.order.orderCount || 0 }}
|
||||
</div>
|
||||
<div class="label">
|
||||
订单总数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<printBusinessDialog ref="printBusinessDialogRef" @success="printHandle" />
|
||||
<printBusinessDialog ref="printBusinessDialogRef2" @success="printHandle2" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import { ref, onMounted } from "vue";
|
||||
import OrderApi from "@/api/order/order";
|
||||
import { downloadFile, multiplyAndFormat } from '@/utils'
|
||||
import printBusinessDialog from "@/components/printBusinessDialog.vue";
|
||||
|
||||
const printBusinessDialogRef = ref(null)
|
||||
|
||||
// 打印经营日报回调
|
||||
async function printHandle(res) {
|
||||
try {
|
||||
const shopStaff = JSON.parse(localStorage.getItem('shopStaff')) || { name: '' }
|
||||
const shopName = localStorage.getItem('shopName')
|
||||
await OrderApi.printDayReport({
|
||||
beginDate: res.date[0],
|
||||
endDate: res.date[1],
|
||||
rangeType: 'CUSTOM',
|
||||
shopId: localStorage.getItem('shopId') || '',
|
||||
operator: shopStaff.name || shopName
|
||||
})
|
||||
ElMessage.success('打印成功')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const printBusinessDialogRef2 = ref(null)
|
||||
// 打印日结单回调
|
||||
async function printHandle2(res) {
|
||||
try {
|
||||
const shopStaff = JSON.parse(localStorage.getItem('shopStaff')) || { name: '' }
|
||||
const shopName = localStorage.getItem('shopName')
|
||||
await OrderApi.printDaySettle({
|
||||
beginDate: res.date[0],
|
||||
endDate: res.date[1],
|
||||
rangeType: 'CUSTOM',
|
||||
shopId: localStorage.getItem('shopId') || '',
|
||||
operator: shopStaff.name || shopName
|
||||
})
|
||||
ElMessage.success('打印成功')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const queryForm = ref({
|
||||
queryDate: dayjs().format('YYYY-MM-DD'), // 查询日期 yyyy-MM-dd
|
||||
platform: 'czg',
|
||||
shopId: localStorage.getItem('shopId') || '',
|
||||
mainShopId: ''
|
||||
});
|
||||
|
||||
const platformList = ref([
|
||||
{ value: 'czg', label: '银收客' },
|
||||
{ value: 'MTuan', label: '美团' },
|
||||
{ value: 'CMeMe', label: '菜么么' },
|
||||
{ value: 'KRuYun', label: '客如云' },
|
||||
])
|
||||
|
||||
// 禁用今天以后的日期
|
||||
const disabledFutureDate = (time) => {
|
||||
return dayjs(time).isAfter(dayjs().startOf('day'))
|
||||
}
|
||||
|
||||
// 查询
|
||||
function handleQuery() {
|
||||
getData()
|
||||
}
|
||||
|
||||
// 重置
|
||||
function handleReset() {
|
||||
queryForm.value.queryDate = dayjs().format('YYYY-MM-DD')
|
||||
queryForm.value.platform = 'czg'
|
||||
getData()
|
||||
}
|
||||
|
||||
// 导出
|
||||
async function handleExport() {
|
||||
try {
|
||||
if (!queryForm.value.platform) {
|
||||
ElMessage.error('请选择导出平台')
|
||||
return
|
||||
}
|
||||
const res = await OrderApi.financeExport(queryForm.value)
|
||||
downloadFile(res, '财务报表', 'xlsx')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
const tableData = ref({
|
||||
turnover: {},
|
||||
order: {},
|
||||
discount: {},
|
||||
refund: {},
|
||||
sts: {}
|
||||
});
|
||||
|
||||
// 查询财务报表
|
||||
async function getData() {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await OrderApi.financeSts(queryForm.value)
|
||||
tableData.value = res
|
||||
console.log('tableData.value', tableData.value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.between {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
|
||||
.header_title {
|
||||
font-size: 16px;
|
||||
color: 333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.item_list {
|
||||
margin-top: 14px;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #F3F7FA;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.i {
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.i {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pay_wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 14px;
|
||||
background-color: #F8F8F8;
|
||||
padding: 14px;
|
||||
margin-top: 14px;
|
||||
border-radius: 8px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.n {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.i {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_info {
|
||||
border-top: 1px solid #ececec;
|
||||
padding-top: 14px;
|
||||
|
||||
.order_title {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
.dot {
|
||||
--size: 12px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
background-color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.order_lits {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 4px;
|
||||
|
||||
.line {
|
||||
color: #ececec;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
|
||||
.t {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall {
|
||||
/* 核心属性1:定义瀑布流列数(关键) */
|
||||
column-count: 3;
|
||||
/* 核心属性2:列之间的间距(替代margin,避免卡片间距错乱) */
|
||||
column-gap: 14px;
|
||||
/* 可选:防止卡片内容被列分割(关键!避免卡片跨列断裂) */
|
||||
break-inside: avoid;
|
||||
|
||||
.waterfall-card {
|
||||
/* 必须:适配多列布局,避免卡片宽度溢出 */
|
||||
width: 100%;
|
||||
/* 卡片间距:仅需设置底部外边距(上下间距),左右间距由column-gap控制 */
|
||||
margin-bottom: 14px;
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
/* 配合break-inside: avoid,强化卡片不可分割 */
|
||||
page-break-inside: avoid;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.dot {
|
||||
--size: 10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 6px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding-left: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -52,14 +52,35 @@
|
||||
<span>营业</span>
|
||||
</div>
|
||||
<div class="u-flex" style="flex-wrap: wrap">
|
||||
<el-select v-if="isHeadShop == 1 && loginType == 0" v-model="shopId" placeholder="选择分店"
|
||||
style="width: 200px; margin-right: 10px;" @change="shopChange">
|
||||
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
|
||||
<importData
|
||||
:type="9"
|
||||
style="margin-right: 14px"
|
||||
@close="importDataClose"
|
||||
@update="updateData"
|
||||
/>
|
||||
<el-select
|
||||
v-if="isHeadShop == 1 && loginType == 0"
|
||||
v-model="shopId"
|
||||
placeholder="选择分店"
|
||||
style="width: 200px; margin-right: 10px"
|
||||
@change="shopChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in branchList"
|
||||
:key="item.shopId"
|
||||
:label="item.shopName"
|
||||
:value="item.shopId"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="time_wrap u-flex" style="flex-shrink: 0">
|
||||
<div class="date_list">
|
||||
<div class="item" :class="{ active: dataListActive == index }" v-for="(item, index) in dateList"
|
||||
:key="item.value" @click="timeChange(item.value, index)">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: dataListActive == index }"
|
||||
v-for="(item, index) in dateList"
|
||||
:key="item.value"
|
||||
@click="timeChange(item.value, index)"
|
||||
>
|
||||
<!-- 标签文本 -->
|
||||
<span class="date-tab-item">{{ item.label }}</span>
|
||||
<!-- 分隔符:非最后一项才显示 -->
|
||||
@@ -67,9 +88,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex">
|
||||
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
|
||||
@change="summarytrade" />
|
||||
<el-date-picker
|
||||
v-if="timeValue == 'custom'"
|
||||
v-model="query.createdAt"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="summarytrade"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,7 +106,9 @@
|
||||
<div class="top">
|
||||
<div class="item earnings">
|
||||
<div class="num_wrap">
|
||||
<div class="num">{{ formatDecimal(trade.payAmount + trade.rechargeAmount || 0) }}</div>
|
||||
<div class="num">
|
||||
{{ formatDecimal(trade.payAmount + trade.rechargeAmount || 0) }}
|
||||
</div>
|
||||
<div class="tips">
|
||||
营业额(元)
|
||||
<el-tooltip popper-class="popper" effect="light" placement="bottom">
|
||||
@@ -101,7 +131,14 @@
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img class="icon" src="@/assets/images/data/scan.png" />
|
||||
<span>主扫收款</span>
|
||||
<span>二维码收款</span>
|
||||
</div>
|
||||
<span class="num">{{ trade.mainScanPayAmount || 0 }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img class="icon" src="@/assets/images/data/scan.png" />
|
||||
<span>扫码收款</span>
|
||||
</div>
|
||||
<span class="num">{{ trade.backScanPayAmount || 0 }}</span>
|
||||
</div>
|
||||
@@ -148,20 +185,27 @@
|
||||
<!-- <div class="t">{{ formatDecimal(tradeSale.totalpayAmount || 0) }}</div> -->
|
||||
</div>
|
||||
<div class="line_gropress">
|
||||
<div class="gropress l" :style="{
|
||||
width: `${trade.payAmount
|
||||
? (trade.payAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
<div
|
||||
class="gropress l"
|
||||
:style="{
|
||||
width: `${
|
||||
trade.payAmount
|
||||
? (trade.payAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) * 100
|
||||
: 0
|
||||
}%`,
|
||||
}" />
|
||||
<div class="gropress r" :style="{
|
||||
width: `${trade.refundAmount
|
||||
? (trade.refundAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="gropress r"
|
||||
:style="{
|
||||
width: `${
|
||||
trade.refundAmount
|
||||
? (trade.refundAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
}%`,
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="line_btm">
|
||||
<el-icon class="icon el-icon-caret-right" />
|
||||
@@ -177,22 +221,30 @@
|
||||
<!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
|
||||
</div>
|
||||
<div class="line_gropress">
|
||||
<div class="gropress l" :style="{
|
||||
width: `${trade.rechargeAmount
|
||||
? (trade.rechargeAmount /
|
||||
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
<div
|
||||
class="gropress l"
|
||||
:style="{
|
||||
width: `${
|
||||
trade.rechargeAmount
|
||||
? (trade.rechargeAmount /
|
||||
(trade.rechargeAmount * 1 + trade.rechargeRefundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
}%`,
|
||||
}" />
|
||||
<div class="gropress r" :style="{
|
||||
width: `${trade.rechargeRefundAmount
|
||||
? (trade.rechargeRefundAmount /
|
||||
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="gropress r"
|
||||
:style="{
|
||||
width: `${
|
||||
trade.rechargeRefundAmount
|
||||
? (trade.rechargeRefundAmount /
|
||||
(trade.rechargeAmount * 1 + trade.rechargeRefundAmount * 1)) *
|
||||
100
|
||||
: 0
|
||||
}%`,
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="line_btm">
|
||||
<el-icon class="icon el-icon-caret-right" />
|
||||
@@ -243,8 +295,11 @@
|
||||
<div class="item item1">
|
||||
<div class="title">
|
||||
客单价
|
||||
<el-tooltip effect="dark" :content="`订单实付金额(${trade.payAmount})/就餐人数(${trade.customerCount || 0})`"
|
||||
placement="top">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="`订单实付金额(${trade.payAmount})/就餐人数(${trade.customerCount || 0})`"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
@@ -252,15 +307,19 @@
|
||||
</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item1_icon.png" />
|
||||
<div class="t" style="color: #0080FF;">{{ formatDecimal(trade.avgPayAmount || 0) }}</div>
|
||||
<div class="t" style="color: #0080ff">
|
||||
{{ formatDecimal(trade.avgPayAmount || 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item2">
|
||||
<div class="title">
|
||||
翻台率
|
||||
<el-tooltip effect="dark"
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="`翻台率=(客单数(${trade.customerCount || 0})-桌台数(${trade.tableCount || 0}))/桌台数*100%`"
|
||||
placement="top">
|
||||
placement="top"
|
||||
>
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
@@ -268,7 +327,7 @@
|
||||
</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item2_icon.png" />
|
||||
<div class="t" style="color: #FFB200;">{{ trade.turnoverRate || 0 }}%</div>
|
||||
<div class="t" style="color: #ffb200">{{ trade.turnoverRate || 0 }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item3">
|
||||
@@ -287,43 +346,57 @@
|
||||
<div class="left">
|
||||
<span>新客立减</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.newCustomerDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.newCustomerDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>满减活动</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.fullDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.fullDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>优惠券抵扣</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.couponDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.couponDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>积分抵扣</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.pointDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.pointDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>霸王餐</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.backDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.backDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>会员折扣</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.memberDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.memberDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<span>订单改价</span>
|
||||
</div>
|
||||
<span class="num">{{ multiplyAndFormat(trade.orderPriceDiscountAmount || 0) }}</span>
|
||||
<span class="num">
|
||||
{{ multiplyAndFormat(trade.orderPriceDiscountAmount || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -334,14 +407,16 @@
|
||||
</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item3_icon.png" />
|
||||
<div class="t" style="color: #FF8000;">{{ formatDecimal(trade.discountAmount || 0) }}</div>
|
||||
<div class="t" style="color: #ff8000">
|
||||
{{ formatDecimal(trade.discountAmount || 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item4">
|
||||
<div class="title">优惠笔数</div>
|
||||
<div class="icon_wrap">
|
||||
<img class="img" src="@/assets/images/data_home_item4_icon.png" />
|
||||
<div class="t" style="color: #00CB71;">{{ trade.discountCount || 0 }}</div>
|
||||
<div class="t" style="color: #00cb71">{{ trade.discountCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item5">
|
||||
@@ -349,13 +424,13 @@
|
||||
<div class="row">
|
||||
<div class="title">毛利润</div>
|
||||
<div class="icon_wrap">
|
||||
<div class="t" style="color: #0000C2;">{{ trade.profitAmount || 0 }}</div>
|
||||
<div class="t" style="color: #0000c2">{{ trade.profitAmount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="title">毛利率</div>
|
||||
<div class="icon_wrap">
|
||||
<div class="t" style="color: #0000C2;">{{ trade.profitRate || 0 }}%</div>
|
||||
<div class="t" style="color: #0000c2">{{ trade.profitRate || 0 }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -384,10 +459,18 @@
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: lineChartType == 0 }"
|
||||
@click="lineChartTypeChange(0)"
|
||||
>
|
||||
销售趋势
|
||||
</div>
|
||||
<div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: lineChartType == 1 }"
|
||||
@click="lineChartTypeChange(1)"
|
||||
>
|
||||
支付占比
|
||||
</div>
|
||||
</div>
|
||||
@@ -396,9 +479,20 @@
|
||||
<el-radio-button value="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-show="lineChartType == 0" ref="saleChart" v-loading="saleLoading" class="chart" style="height: 350px" />
|
||||
<div v-show="lineChartType == 1" ref="payChart" v-loading="payChartLoading" class="chart"
|
||||
style="height: 350px" />
|
||||
<div
|
||||
v-show="lineChartType == 0"
|
||||
ref="saleChart"
|
||||
v-loading="saleLoading"
|
||||
class="chart"
|
||||
style="height: 350px"
|
||||
/>
|
||||
<div
|
||||
v-show="lineChartType == 1"
|
||||
ref="payChart"
|
||||
v-loading="payChartLoading"
|
||||
class="chart"
|
||||
style="height: 350px"
|
||||
/>
|
||||
</div>
|
||||
<!-- 商品销售排行 -->
|
||||
<div class="item">
|
||||
@@ -458,7 +552,12 @@
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="initInterestRate" v-loading="initInterestRateLoading" class="chart" style="height: 350px" />
|
||||
<div
|
||||
ref="initInterestRate"
|
||||
v-loading="initInterestRateLoading"
|
||||
class="chart"
|
||||
style="height: 350px"
|
||||
/>
|
||||
</div>
|
||||
<!-- 成本(元) -->
|
||||
<div class="item">
|
||||
@@ -495,15 +594,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import importData from "@/components/importData/index.vue";
|
||||
import dataSummaryApi from "@/api/order/data-summary";
|
||||
import finceApi from "@/api/order/fince";
|
||||
|
||||
import ShopApi from "@/api/account/shop";
|
||||
import dayjs from "dayjs";
|
||||
import * as echarts from "echarts";
|
||||
import { debounce, formatDecimal } from "@/utils/tools";
|
||||
import { formatDateRange } from './utils/index.js'
|
||||
import { multiplyAndFormat } from '@/utils/index.js'
|
||||
import { formatDateRange } from "./utils/index.js";
|
||||
import { multiplyAndFormat } from "@/utils/index.js";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
export default {
|
||||
name: "home",
|
||||
components: { importData },
|
||||
data() {
|
||||
return {
|
||||
multiplyAndFormat,
|
||||
@@ -625,12 +730,12 @@ export default {
|
||||
shopInfo: JSON.parse(localStorage.getItem("userInfo")),
|
||||
initInterestRateLoading: true,
|
||||
initInterestRate: null,
|
||||
initInterestRateTime: '',
|
||||
initInterestRateTime: "",
|
||||
costLoading: true,
|
||||
costRef: null,
|
||||
costUpdateTime: '',
|
||||
interestRateDay: '7',
|
||||
costDay: '7'
|
||||
costUpdateTime: "",
|
||||
interestRateDay: "7",
|
||||
costDay: "7",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -650,11 +755,11 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let shopInfo = JSON.parse(localStorage.getItem('userInfo'))
|
||||
let shopInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
if (shopInfo.isHeadShop) {
|
||||
this.shopId = shopInfo.id
|
||||
this.shopId = shopInfo.id;
|
||||
} else {
|
||||
this.shopId = localStorage.getItem('shopId')
|
||||
this.shopId = localStorage.getItem("shopId");
|
||||
}
|
||||
|
||||
// 增加首页提示是否账号30天过期
|
||||
@@ -670,8 +775,8 @@ export default {
|
||||
this.dateProduct();
|
||||
// this.summaryDateGet();
|
||||
this.timeChange(this.timeValue);
|
||||
this.profitRateBarChart()
|
||||
this.costLineChart()
|
||||
this.profitRateBarChart();
|
||||
this.costLineChart();
|
||||
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.saleChart) {
|
||||
@@ -700,39 +805,63 @@ export default {
|
||||
// }
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
this.geiShopList()
|
||||
this.geiShopList();
|
||||
// this.initCardUserChart();
|
||||
},
|
||||
methods: {
|
||||
updateData(e) {
|
||||
finceApi
|
||||
.financeBase({
|
||||
shopId: this.shopId,
|
||||
type: "all",
|
||||
date: e,
|
||||
})
|
||||
.then((res) => {
|
||||
ElMessageBox.confirm("经营数据重新计算中,请稍后刷新页面查看", "提示", {
|
||||
confirmButtonText: "知道了",
|
||||
showCancelButton: false,
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
},
|
||||
importDataClose() {
|
||||
// this.summaryGet();
|
||||
this.dateAmount();
|
||||
this.dateProduct();
|
||||
// this.summaryDateGet();
|
||||
this.timeChange(this.timeValue);
|
||||
this.profitRateBarChart();
|
||||
this.costLineChart();
|
||||
},
|
||||
/**
|
||||
* 获取分店列表
|
||||
*/
|
||||
async geiShopList() {
|
||||
try {
|
||||
if (this.shopInfo.isHeadShop) {
|
||||
let res = await ShopApi.getBranchList()
|
||||
let res = await ShopApi.getBranchList();
|
||||
this.branchList = res;
|
||||
this.shopId = res[0].shopId
|
||||
this.shopId = res[0].shopId;
|
||||
} else {
|
||||
this.shopId = this.shopInfo.id
|
||||
this.shopId = this.shopInfo.id;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取分店列表===', error);
|
||||
console.log("获取分店列表===", error);
|
||||
}
|
||||
},
|
||||
shopChange() {
|
||||
this.summarytrade();
|
||||
this.lineChartTypeChange(this.lineChartType)
|
||||
this.dateProduct()
|
||||
this.lineChartTypeChange(this.lineChartType);
|
||||
this.dateProduct();
|
||||
|
||||
this.profitRateBarChart()
|
||||
this.costLineChart()
|
||||
this.profitRateBarChart();
|
||||
this.costLineChart();
|
||||
},
|
||||
// 切换时间
|
||||
timeChange(e, index = 0) {
|
||||
this.dataListActive = index;
|
||||
this.timeValue = e;
|
||||
this.query.createdAt = formatDateRange(e)
|
||||
this.query.createdAt = formatDateRange(e);
|
||||
if (e != "custom") {
|
||||
this.summarytrade();
|
||||
}
|
||||
@@ -748,7 +877,7 @@ export default {
|
||||
beginDate: this.query.createdAt[0],
|
||||
endDate: this.query.createdAt[1],
|
||||
rangeType: this.timeValue,
|
||||
shopId: this.shopId
|
||||
shopId: this.shopId,
|
||||
});
|
||||
this.trade = res;
|
||||
this.tradeSale = res.sale;
|
||||
@@ -971,7 +1100,7 @@ export default {
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@@ -987,11 +1116,11 @@ export default {
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
left: '8%',
|
||||
containLabel: true // 确保标签不溢出,不影响点的显示
|
||||
top: "5%",
|
||||
right: "5%",
|
||||
bottom: "8%",
|
||||
left: "8%",
|
||||
containLabel: true, // 确保标签不溢出,不影响点的显示
|
||||
},
|
||||
color: "#165DFF", // 折线和默认点的颜色
|
||||
yAxis: [
|
||||
@@ -1016,8 +1145,8 @@ export default {
|
||||
borderColor: "#000", // 黑色边框
|
||||
borderWidth: 2, // 边框宽度
|
||||
// 悬浮时填充色不变(仍为 #165DFF)
|
||||
color: "#165DFF"
|
||||
}
|
||||
color: "#165DFF",
|
||||
},
|
||||
},
|
||||
// 确保所有数据点都显示(避免自动隐藏)
|
||||
showAllSymbol: true,
|
||||
@@ -1025,8 +1154,8 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#165DFF", // 点的填充色(与折线一致)
|
||||
borderWidth: 1, // 基础状态可加细边框(可选,不加则无)
|
||||
borderColor: "#fff" // 基础状态边框颜色(与背景区分,可选)
|
||||
}
|
||||
borderColor: "#fff", // 基础状态边框颜色(与背景区分,可选)
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -1112,8 +1241,8 @@ export default {
|
||||
this.initInterestRate = echarts.init(this.$refs.initInterestRate);
|
||||
|
||||
// 预处理数据:将毛利率和净利率按索引对应(关键,用于手动匹配)
|
||||
const profitRateData = data.map(item => item.profitRate || 0);
|
||||
const netProfitRateData = data.map(item => item.netProfitRate || 0);
|
||||
const profitRateData = data.map((item) => item.profitRate || 0);
|
||||
const netProfitRateData = data.map((item) => item.netProfitRate || 0);
|
||||
|
||||
this.initInterestRate.setOption({
|
||||
tooltip: {
|
||||
@@ -1140,7 +1269,7 @@ export default {
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@@ -1165,10 +1294,10 @@ export default {
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
left: '8%',
|
||||
top: "5%",
|
||||
right: "5%",
|
||||
bottom: "8%",
|
||||
left: "8%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -1177,7 +1306,7 @@ export default {
|
||||
barGap: "0%", // 保持柱子紧贴
|
||||
barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
data: profitRateData, // 预处理后的毛利率数据
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
@@ -1340,9 +1469,12 @@ export default {
|
||||
async profitRateBarChart() {
|
||||
try {
|
||||
this.initInterestRateLoading = true;
|
||||
const res = await dataSummaryApi.profitRateBarChart({ day: this.interestRateDay, shopId: this.shopId });
|
||||
const res = await dataSummaryApi.profitRateBarChart({
|
||||
day: this.interestRateDay,
|
||||
shopId: this.shopId,
|
||||
});
|
||||
|
||||
this.initInterestRateTime = dayjs().format('HH:mm')
|
||||
this.initInterestRateTime = dayjs().format("HH:mm");
|
||||
|
||||
const data = res.map((item) => {
|
||||
return {
|
||||
@@ -1366,7 +1498,7 @@ export default {
|
||||
this.costLoading = true;
|
||||
const res = await dataSummaryApi.costLineChart({ day: this.costDay, shopId: this.shopId });
|
||||
|
||||
this.costUpdateTime = dayjs().format('HH:mm')
|
||||
this.costUpdateTime = dayjs().format("HH:mm");
|
||||
|
||||
const data = res.map((item) => item.productCostAmount || 0);
|
||||
const time = res.map((item) => item.tradeDay);
|
||||
|
||||
@@ -44,6 +44,8 @@
|
||||
<span v-if="!downloadLoading">导出Excel</span>
|
||||
<span v-else>下载中...</span>
|
||||
</el-button>
|
||||
<el-button icon="Printer" :loading="printLoading" @click="$refs.printBusinessDialogRef.show()">打印</el-button>
|
||||
<importData :type="7" @close="getTableData" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -184,19 +186,23 @@
|
||||
@current-change="paginationChange" @size-change="sizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
<printBusinessDialog ref="printBusinessDialogRef" title="商品报表" @success="printBusinessConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import importData from "@/components/importData/index.vue";
|
||||
import saleSummaryApi from "@/api/order/sale-summary";
|
||||
import categoryApi from "@/api/product/productclassification";
|
||||
import ShopApi from "@/api/account/shop";
|
||||
import dayjs from "dayjs";
|
||||
import { downloadFile, multiplyAndFormat } from "@/utils/index";
|
||||
import { formatDateRange } from './utils/index.js'
|
||||
import printBusinessDialog from '@/components/printBusinessDialog.vue';
|
||||
|
||||
export default {
|
||||
components: { importData, printBusinessDialog },
|
||||
data() {
|
||||
return {
|
||||
multiplyAndFormat,
|
||||
@@ -230,7 +236,8 @@ export default {
|
||||
// dayjs(time):将原生 Date 转为 dayjs 对象
|
||||
// isAfter:判断目标日期是否在今天之后
|
||||
return dayjs(time).isAfter(dayjs().startOf('day'));
|
||||
}
|
||||
},
|
||||
printLoading: false
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
@@ -252,6 +259,34 @@ export default {
|
||||
this.geiShopList();
|
||||
},
|
||||
methods: {
|
||||
// 确认打印
|
||||
printBusinessConfirm(res) {
|
||||
this.printHandle(res.date)
|
||||
},
|
||||
// 打印
|
||||
async printHandle(date) {
|
||||
try {
|
||||
const shopStaff = JSON.parse(localStorage.getItem('shopStaff')) || { name: '' }
|
||||
const shopName = localStorage.getItem('shopName')
|
||||
|
||||
this.printLoading = true
|
||||
|
||||
await saleSummaryApi.print({
|
||||
beginDate: date[0],
|
||||
endDate: date[1],
|
||||
categoryId: this.query.prodCategoryId,
|
||||
productName: this.query.productName,
|
||||
shopId: this.shopId,
|
||||
rangeType: this.timeValue,
|
||||
operator: shopStaff.name || shopName
|
||||
})
|
||||
ElMessage.success('操作成功')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
this.printLoading = false
|
||||
},
|
||||
/**
|
||||
* 获取分店列表
|
||||
*/
|
||||
|
||||
@@ -27,13 +27,14 @@
|
||||
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
<el-button icon="download" v-loading="downloadLoading" @click="downloadHandle">
|
||||
<span v-if="!downloadLoading">导出Excel</span>
|
||||
<span v-else>下载中...</span>
|
||||
</el-button>
|
||||
<importData :type="8" @close="getTableData" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -90,16 +91,17 @@
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
</div>
|
||||
<!-- <div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page" :page-size="tableData.size"
|
||||
@current-change="paginationChange" @size-change="sizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash";
|
||||
import importData from "@/components/importData/index.vue";
|
||||
import tableSummaryApi from "@/api/order/table-summary";
|
||||
import ShopApi from "@/api/account/shop";
|
||||
import dayjs from "dayjs";
|
||||
@@ -107,6 +109,7 @@ import { downloadFile } from "@/utils/index";
|
||||
import { formatDateRange } from './utils/index.js'
|
||||
|
||||
export default {
|
||||
components: { importData },
|
||||
data() {
|
||||
return {
|
||||
timeValue: "today",
|
||||
@@ -199,13 +202,14 @@ export default {
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.timeValue = "";
|
||||
this.timeValue = "today";
|
||||
this.query = { ...this.resetQuery };
|
||||
this.page = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小改变
|
||||
sizeChange(e) {
|
||||
this.tableData.page = 1
|
||||
this.tableData.size = e;
|
||||
this.getTableData();
|
||||
},
|
||||
@@ -225,8 +229,11 @@ export default {
|
||||
// page: this.tableData.page,
|
||||
// size: this.tableData.size,
|
||||
rangeType: this.timeValue,
|
||||
// rangeType: 'custom',
|
||||
beginDate: this.query.createdAt[0],
|
||||
endDate: this.query.createdAt[1],
|
||||
// beginDate: '2026-01-26',
|
||||
// endDate: '2026-01-26',
|
||||
shopId: this.shopId
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<el-table-column prop="shopName" align="center" label="商户名称" />
|
||||
<el-table-column prop="staffName" align="center" label="职员名称" />
|
||||
<el-table-column prop="orderCount" align="center" label="订单数量" />
|
||||
<el-table-column prop="handAmount" align="center" label="应交金额" />
|
||||
<el-table-column prop="quickInAmount" align="center" label="快捷收款金额" />
|
||||
<el-table-column prop="orderTurnover" align="center" label="应交金额" />
|
||||
<el-table-column prop="balance" align="center" label="余额支付" />
|
||||
<el-table-column prop="refundAmount" align="center" label="退款金额" />
|
||||
<el-table-column prop="handAmount" align="center" label="总收入" />
|
||||
<el-table-column prop="turnover" align="center" label="总收入" />
|
||||
<el-table-column prop="loginTime" align="center" label="开始时间" />
|
||||
<el-table-column prop="handoverTime" align="center" label="交班时间" />
|
||||
<el-table-column label="操作" align="center">
|
||||
|
||||
@@ -15,9 +15,13 @@ const modalConfig: IModalConfig<addRequest> = {
|
||||
},
|
||||
formAction: function (data) {
|
||||
let obj = { ...data }
|
||||
obj.printType = data.printType.join(',')
|
||||
console.log("打印类型", data);
|
||||
// obj.printType = data.printType.join(',')
|
||||
obj.categoryIds = JSON.stringify(data.categoryIdsArr)
|
||||
obj.categoryList = JSON.stringify(data.categoryIdsArr)
|
||||
if (data.classifyPrint == 0) {
|
||||
obj.categoryIds = ''
|
||||
}
|
||||
// obj.categoryIds = '[' + data.categoryIdsArr.join(',') + ']'
|
||||
return printerApi.add(obj);
|
||||
},
|
||||
@@ -85,7 +89,7 @@ const modalConfig: IModalConfig<addRequest> = {
|
||||
{
|
||||
type: "select",
|
||||
label: "打印类型",
|
||||
prop: "subType",
|
||||
prop: "printType",
|
||||
rules: [{ required: false, message: "请选择打印类型", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请选择打印类型",
|
||||
@@ -103,7 +107,7 @@ const modalConfig: IModalConfig<addRequest> = {
|
||||
{
|
||||
type: "select",
|
||||
label: "打印机品牌",
|
||||
prop: "contentType",
|
||||
prop: "brand",
|
||||
rules: [{ required: true, message: "请选择打印机品牌", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请选择打印机品牌",
|
||||
@@ -139,27 +143,27 @@ const modalConfig: IModalConfig<addRequest> = {
|
||||
label: "",
|
||||
initialValue: []
|
||||
},
|
||||
|
||||
{
|
||||
type: "radio",
|
||||
label: "打印数量",
|
||||
prop: "printQty",
|
||||
prop: "printNum",
|
||||
options: options.printQty,
|
||||
initialValue: options.printQty[0].value
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
label: "打印方式",
|
||||
prop: "printMethod",
|
||||
prop: "kitchenPrintMode",
|
||||
options: options.printMethod,
|
||||
initialValue: options.printMethod[0].value
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
type: "custom",
|
||||
label: "打印类型",
|
||||
prop: "printType",
|
||||
prop: "printContentType",
|
||||
options: options.printType,
|
||||
initialValue: options.printType.map(v => v.value)
|
||||
initialValue: options.printType.map(v => v.value),
|
||||
slotName: 'printTypeSlot'
|
||||
},
|
||||
{
|
||||
label: "打印机状态",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export const options: optionObject = {
|
||||
connectionType: [
|
||||
{ label: "USB", value: 'USB' },
|
||||
{ label: "网络", value: '网络' },
|
||||
{ label: "蓝牙", value: '蓝牙' },
|
||||
{ label: "云打印", value: '云打印' },
|
||||
{ label: "局域网", value: '局域网' },
|
||||
],
|
||||
subType: [
|
||||
{ label: "标签", value: 'label' },
|
||||
|
||||
@@ -59,8 +59,8 @@ const contentConfig: IContentConfig<getListRequest> = {
|
||||
label: "状态",
|
||||
align: "center",
|
||||
prop: "status",
|
||||
templet: "switch",
|
||||
slotName: "status",
|
||||
templet: "custom",
|
||||
slotName: "status"
|
||||
},
|
||||
{ label: "创建时间", align: "center", prop: "createTime" },
|
||||
// {
|
||||
|
||||
@@ -20,6 +20,9 @@ const modalConfig: IModalConfig<editRequest> = {
|
||||
obj.categoryIds = JSON.stringify(data.categoryIdsArr)
|
||||
obj.categoryList = JSON.stringify(data.categoryIdsArr)
|
||||
}
|
||||
if (data.classifyPrint == 0) {
|
||||
obj.categoryIds = ''
|
||||
}
|
||||
return printerApi.edit(obj);
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
@@ -157,13 +160,12 @@ const modalConfig: IModalConfig<editRequest> = {
|
||||
initialValue: options.printMethod[0].value
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
type: "custom",
|
||||
label: "打印类型",
|
||||
prop: "printType",
|
||||
options: options.printType,
|
||||
initialValue: options.printType.map(v => v.value)
|
||||
prop: "printContentType",
|
||||
options: '',
|
||||
initialValue: ''
|
||||
},
|
||||
|
||||
{
|
||||
label: "打印机状态",
|
||||
prop: "status",
|
||||
@@ -174,6 +176,16 @@ const modalConfig: IModalConfig<editRequest> = {
|
||||
inactiveValue: 0,
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "媒体音开关",
|
||||
prop: "volumeSwitch",
|
||||
type: "switch",
|
||||
initialValue: 1,
|
||||
attrs: {
|
||||
activeValue: 1,
|
||||
inactiveValue: 0,
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
<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">
|
||||
<!-- <template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</template> -->
|
||||
<template #contentType="scope">
|
||||
{{ scope.row.contentType == 'yxyPrinter' ? "云想印" : "飞鹅" }}
|
||||
{{ scope.row.contentType == "yxyPrinter" ? "云想印" : "飞鹅" }}
|
||||
</template>
|
||||
<template #subType="scope">
|
||||
{{ scope.row.subType == 'label' ? "标签" : "小票" }}
|
||||
{{ scope.row.subType == "label" ? "标签" : "小票" }}
|
||||
</template>
|
||||
<template #caozuo="scope">
|
||||
{{ scope }}
|
||||
@@ -26,10 +26,18 @@
|
||||
<template #gender="scope">
|
||||
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
|
||||
@click="statusChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
<template #operate="scope">
|
||||
<div v-if="scope.row.connectionType != 'USB'">
|
||||
<el-button @click="handleEditClick(scope.row)" icon="Edit" type="primary" link>编辑</el-button>
|
||||
<el-button @click="handdeleteevent(scope.row)" icon="Delete" type="danger" link>删除</el-button>
|
||||
<el-button @click="handleEditClick(scope.row)" icon="Edit" type="primary" link>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="handdeleteevent(scope.row)" icon="Delete" type="danger" link>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template #mobile="scope">
|
||||
@@ -39,10 +47,21 @@
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
<!-- <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
<template #gender="scope">
|
||||
<Dict v-model="scope.formData[scope.prop]" code="gender" />
|
||||
</template>
|
||||
<template #printTypeSlot="scope">
|
||||
<div class="row" v-for="(item, index) in printTypeList" :key="index">
|
||||
<div class="title">{{ item.label }}</div>
|
||||
<div class="cont">
|
||||
<el-checkbox-group v-model="item.values" @change="printTypeChange($event, index, scope)">
|
||||
<el-checkbox :label="item.label" :value="item.value" v-for="item in item.list"
|
||||
:key="item.value"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #classifyPrintData="scope">
|
||||
<template v-if="scope.formData.classifyPrint == 1">
|
||||
<el-checkbox-group v-model="scope.formData.categoryIdsArr">
|
||||
@@ -52,13 +71,24 @@
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</template>
|
||||
</page-modal>
|
||||
</page-modal> -->
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||||
<!-- <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>
|
||||
<template #printTypeSlot="scope">
|
||||
<div class="row" v-for="(item, index) in printTypeList" :key="index">
|
||||
<div class="title">{{ item.label }}</div>
|
||||
<div class="cont">
|
||||
<el-checkbox-group v-model="item.values" @change="printTypeChange($event, index, scope)">
|
||||
<el-checkbox :label="item.label" :value="item.value" v-for="item in item.list"
|
||||
:key="item.value"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #classifyPrintData="scope">
|
||||
<template v-if="scope.formData.classifyPrint == 1">
|
||||
<el-checkbox-group v-model="scope.formData.categoryIdsArr">
|
||||
@@ -68,11 +98,103 @@
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</template>
|
||||
</page-modal>
|
||||
</page-modal> -->
|
||||
|
||||
<el-dialog :title="form.id ? '编辑打印机' : '添加打印机'" width="800px" v-model="visible" @closed="dialogClosed"
|
||||
@open="dialogOpen">
|
||||
<div style="height: 60vh;overflow-y: auto;" ref="formDivRef">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型">
|
||||
<el-radio-group v-model="form.connectionType">
|
||||
<el-radio-button label="USB" value="USB"></el-radio-button>
|
||||
<el-radio-button label="云打印" value="云打印"></el-radio-button>
|
||||
<el-radio-button label="局域网" value="局域网"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="小票类型">
|
||||
<el-radio-group v-model="form.printType">
|
||||
<el-radio-button label="标签" value="label"></el-radio-button>
|
||||
<el-radio-button label="小票" value="cash"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印机品牌" prop="brand">
|
||||
<el-radio-group v-model="form.brand">
|
||||
<el-radio-button label="飞鹅"></el-radio-button>
|
||||
<el-radio-button label="云想印"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="ip地址/MAC地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入ip地址/MAC地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="port">
|
||||
<el-input v-model="form.port" placeholder="请输入端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小票尺寸" prop="receiptSize">
|
||||
<el-radio-group v-model="form.receiptSize">
|
||||
<el-radio-button label="58mm"></el-radio-button>
|
||||
<el-radio-button label="80mm"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印数量" prop="printNum">
|
||||
<el-input-number v-model="form.printNum" :step="1" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="打印内容" prop="printContentType">
|
||||
<div class="row" v-for="(item, index) in printTypeList" :key="index">
|
||||
<div class="title">{{ item.label }}</div>
|
||||
<div class="cont">
|
||||
<el-checkbox-group v-model="item.values" @change="printTypeChange($event, index)">
|
||||
<el-checkbox :label="item.label" :value="item.value" v-for="item in item.list"
|
||||
:key="item.value"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="打印模式" prop="kitchenPrintMode">
|
||||
<el-radio-group v-model="form.kitchenPrintMode">
|
||||
<el-radio-button label="整单" value="all"></el-radio-button>
|
||||
<el-radio-button label="单个" value="only"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-text type="info" style="margin-left: 14px;">仅针对厨房制作单的打印</el-text>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="分类打印">
|
||||
<div class="column">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<el-radio-group v-model="form.classifyPrint">
|
||||
<el-radio-button label="所有" value="0"></el-radio-button>
|
||||
<el-radio-button label="部分分类" value="1" v-if="printTypeList[1].values.length > 0"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-text type="info" style="margin-left: 14px;">仅针对厨房制作单的打印</el-text>
|
||||
</div>
|
||||
<template v-if="form.classifyPrint == 1">
|
||||
<el-checkbox-group v-model="form.categoryIds">
|
||||
<el-checkbox v-for="item in PrinterTypeList" :value="item.id" :label="item.name"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体音量">
|
||||
<el-switch v-model="form.volumeSwitch" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submitHandle">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from 'lodash'
|
||||
import UserAPI from "@/api/account/printer";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
@@ -80,6 +202,166 @@ import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { options } from './config/config'
|
||||
import printerApi, { type addRequest } from "@/api/account/printer";
|
||||
|
||||
const printTypeList = ref([
|
||||
{
|
||||
label: '前台',
|
||||
values: [],
|
||||
list: [
|
||||
{ label: '客看单', value: 'GUEST_ORDER' },
|
||||
{ label: '预结算单', value: 'PRE_ORDER' },
|
||||
{ label: '结算单', value: 'ORDER' },
|
||||
{ label: '退菜单', value: 'RETURN_ORDER' },
|
||||
{ label: '退款单', value: 'REFUND_ORDER' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '后厨',
|
||||
values: [],
|
||||
list: [
|
||||
{ label: '后厨-整单', value: 'ALL_KITCHEN' },
|
||||
{ label: '后厨-分单', value: 'ONLY_KITCHEN' },
|
||||
{ label: '后厨-退菜单', value: 'REFUND_KITCHEN' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '其它',
|
||||
values: [],
|
||||
list: [
|
||||
{ label: '交班单', value: 'HANDOVER' },
|
||||
{ label: '排队取号', value: 'CALL' },
|
||||
{ label: '储值单', value: 'RECHARGE' },
|
||||
{ label: '入库单', value: 'STOCK' },
|
||||
{ label: '盘点单', value: 'STOCK_CHECK' },
|
||||
{ label: '商品报表', value: 'PRODUCT_REPORT' },
|
||||
{ label: '经营日报', value: 'DAY_REPORT' },
|
||||
{ label: '日结单', value: 'DAY_ORDER' },
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const loading = ref(false)
|
||||
const visible = ref(false)
|
||||
const formRef = ref(null)
|
||||
const obj = {
|
||||
id: '',
|
||||
name: '', // 设备名称
|
||||
connectionType: '云打印', // 连接方式 USB、云打印、局域网
|
||||
printType: 'cash', // 打印类型 label标签 cash小票
|
||||
brand: '', // 打印机品牌 飞鹅/云想印
|
||||
address: '', // ip地址/MAC地址
|
||||
port: '', // 端口
|
||||
receiptSize: '58mm', // 小票尺寸 58mm 80mm
|
||||
printNum: 1, // 打印数量
|
||||
printContentType: '', // 打印内容
|
||||
kitchenPrintMode: 'all', // 打印模式(厨房打印菜品) all整单 /only单个
|
||||
classifyPrint: '0', // 分类打印 0-所有 1-部分分类
|
||||
categoryIds: [], // 分类Id
|
||||
status: 1, // 0 禁用 1启用
|
||||
volumeSwitch: 1, // 媒体声音开关 0关1开
|
||||
}
|
||||
const form = ref({ ...obj })
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
brand: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择打印机品牌',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
printNum: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择打印数量',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
// kitchenPrintMode: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请选择打印模式',
|
||||
// trigger: 'change'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
|
||||
function dialogClosed() {
|
||||
formRef.value.resetFields()
|
||||
form.value = { ...obj }
|
||||
}
|
||||
|
||||
const formDivRef = ref(null)
|
||||
async function dialogOpen() {
|
||||
await nextTick()
|
||||
if (formDivRef.value) {
|
||||
// console.log('开始滚动到顶部')
|
||||
formDivRef.value.scrollTop = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 打印类型切换
|
||||
function printTypeChange(e, index, scope) {
|
||||
if (index == 1 && printTypeList.value[index].values.length == 0) {
|
||||
form.value.categoryList = []
|
||||
}
|
||||
|
||||
let arr = []
|
||||
printTypeList.value.forEach(item => {
|
||||
arr.push(...item.values)
|
||||
})
|
||||
|
||||
form.value.printContentType = arr.join(',')
|
||||
}
|
||||
|
||||
function submitHandle() {
|
||||
console.log('submitHandle===', form.value);
|
||||
formRef.value.validate(async valid => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
const data = { ...form.value }
|
||||
data.categoryIds = form.value.categoryIds.join(',')
|
||||
if (form.value.id) {
|
||||
await printerApi.edit(data)
|
||||
} else {
|
||||
await printerApi.add(data)
|
||||
}
|
||||
ElMessage.success(form.value.id ? '编辑成功' : '添加成功')
|
||||
visible.value = false
|
||||
|
||||
handleQueryClick();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300);
|
||||
})
|
||||
}
|
||||
|
||||
// 更改状态
|
||||
async function statusChange(e, data) {
|
||||
try {
|
||||
await printerApi.edit({
|
||||
id: data.id,
|
||||
status: data.status
|
||||
});
|
||||
handleQueryClick();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -98,11 +380,11 @@ const {
|
||||
onMounted(() => {
|
||||
getPrinterType();
|
||||
});
|
||||
let PrinterTypeList = ref([])
|
||||
let PrinterTypeList = ref([]);
|
||||
// 获取商品分类
|
||||
async function getPrinterType() {
|
||||
let res = await UserAPI.getPrinterType();
|
||||
PrinterTypeList.value = res.records
|
||||
PrinterTypeList.value = res.records;
|
||||
}
|
||||
function handdeleteevent(item) {
|
||||
ElMessageBox.confirm("确认删除?", "警告", {
|
||||
@@ -114,28 +396,45 @@ function handdeleteevent(item) {
|
||||
ElMessage.success("删除成功");
|
||||
handleQueryClick();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
// addModalRef.value?.setModalVisible();
|
||||
visible.value = true
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
let data = await UserAPI.get(row.id);
|
||||
data.printType = data.printType.split(',');
|
||||
form.value = { ...row }
|
||||
visible.value = true
|
||||
|
||||
if (data.categoryIds) {
|
||||
data.categoryIdsArr = JSON.parse(data.categoryIds)
|
||||
}
|
||||
form.value.categoryIds = form.value.categoryIds.split(',')
|
||||
|
||||
data.classifyPrint = data.classifyPrint * 1;
|
||||
const printContentTypes = row.printContentType.split(',')
|
||||
printTypeList.value.forEach(val => {
|
||||
val.values = _.map(
|
||||
_.filter(val.list, item => printContentTypes.includes(item.value)),
|
||||
'value'
|
||||
);
|
||||
})
|
||||
|
||||
editModalRef.value?.setFormData(data);
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
// // 根据id获取数据进行填充
|
||||
// let data = await UserAPI.get(row.id);
|
||||
// data.printType = data.printType.split(",");
|
||||
|
||||
// if (data.categoryIds) {
|
||||
// data.categoryIdsArr = JSON.parse(data.categoryIds);
|
||||
// } else {
|
||||
// data.categoryIdsArr = [];
|
||||
// }
|
||||
// console.log(data.categoryIdsArr);
|
||||
// console.log(data);
|
||||
|
||||
// data.classifyPrint = data.classifyPrint * 1;
|
||||
|
||||
// editModalRef.value?.setFormData(data);
|
||||
}
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
|
||||
@@ -1,5 +1,112 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Index</h1>
|
||||
<div class="gyq_container">
|
||||
<div class="item_wrap">
|
||||
<div class="title">您好,欢迎登录</div>
|
||||
<div class="item_list">
|
||||
<div class="item" v-for="(item, index) in quickStore.quickMenus.splice(0, 6)" :key="item.id"
|
||||
@click="menuClick(item.menuId)">
|
||||
<img class="icon" :src="icons[index + 1]" alt="">
|
||||
{{ returnMenuName(item.menuId) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { useQuickStore, usePermissionStore, useUserStore } from "@/store";
|
||||
|
||||
import icon1 from "@/assets/index_quick1.png";
|
||||
import icon2 from "@/assets/index_quick2.png";
|
||||
import icon3 from "@/assets/index_quick3.png";
|
||||
import icon4 from "@/assets/index_quick4.png";
|
||||
import icon5 from "@/assets/index_quick5.png";
|
||||
import icon6 from "@/assets/index_quick6.png";
|
||||
|
||||
const icons = {
|
||||
1: icon1,
|
||||
2: icon2,
|
||||
3: icon3,
|
||||
4: icon4,
|
||||
5: icon5,
|
||||
6: icon6,
|
||||
};
|
||||
|
||||
const userStore = useUserStore();
|
||||
const quickStore = useQuickStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
function returnMenuName(menuId) {
|
||||
return permissionStore.returnMenuName(menuId);
|
||||
}
|
||||
|
||||
function menuClick(menuId) {
|
||||
permissionStore.menuJump(menuId);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
console.log('quickStore.quickMenus', quickStore.quickMenus);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('@/assets/index_bg.png') no-repeat center center / cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.item_wrap {
|
||||
padding-left: 300px;
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 90px;
|
||||
grid-row-gap: 90px;
|
||||
|
||||
.item {
|
||||
width: 152px;
|
||||
height: 83px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(115deg, #9EC4FF 5.9%, #6668E8 111.62%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
padding-left: 30px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: -20px;
|
||||
width: 83px;
|
||||
height: 78px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑耗材类型' : '添加耗材类型'" width="600px" v-model="visible" @close="onClose">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120" label-position="right">
|
||||
<el-form-item label="耗材类型名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入耗材类型名称" :maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleOk" :loading="confirmLoading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import Api from "@/api/product/cons-group";
|
||||
|
||||
const visible = ref(false)
|
||||
const formRef = ref(null)
|
||||
const form = ref({
|
||||
name: '',
|
||||
status: 1
|
||||
})
|
||||
|
||||
const rules = ref({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入耗材类型名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const confirmLoading = ref(false)
|
||||
function handleOk() {
|
||||
formRef.value.validate(async vaild => {
|
||||
try {
|
||||
if (vaild) {
|
||||
confirmLoading.value = true
|
||||
if (form.value.id) {
|
||||
await Api.edit(form.value)
|
||||
ElMessage.success('编辑成功')
|
||||
} else {
|
||||
await Api.add(form.value)
|
||||
ElMessage.success('添加成功')
|
||||
}
|
||||
emit('success')
|
||||
visible.value = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
confirmLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
formRef.value.resetFields()
|
||||
form.value.name = ''
|
||||
form.value.status = 1
|
||||
}
|
||||
|
||||
function open(obj) {
|
||||
visible.value = true
|
||||
if (obj && obj.id) {
|
||||
form.value = _.cloneDeep(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
@@ -9,17 +9,9 @@
|
||||
@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"
|
||||
>
|
||||
<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 ? "启用" : "禁用" }}
|
||||
@@ -29,36 +21,22 @@
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #switch="scope">
|
||||
<el-switch
|
||||
v-model="scope.row[scope.prop]"
|
||||
disabled
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
<el-switch v-model="scope.row[scope.prop]" disabled :active-value="1" :inactive-value="0"></el-switch>
|
||||
</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"
|
||||
/>
|
||||
<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"
|
||||
></page-modal>
|
||||
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick"></page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
></page-modal>
|
||||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick"></page-modal>
|
||||
|
||||
<!-- 添加分类 -->
|
||||
<addClassificationModal ref="addClassificationModalRef" @success="handleResetClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -72,6 +50,9 @@ import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
import { isSyncStatus } from "@/utils/index";
|
||||
import addClassificationModal from "./components/addClassificationModal.vue";
|
||||
|
||||
const addClassificationModalRef = ref(null)
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -98,16 +79,18 @@ if (isSyncStatus()) {
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
addClassificationModalRef.value.open()
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// addModalConfig.formItems[2]!.attrs!.data =
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
console.log(row);
|
||||
editModalRef.value?.setFormData({ ...row });
|
||||
addClassificationModalRef.value.open(row)
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
// // 根据id获取数据进行填充
|
||||
// console.log(row);
|
||||
// editModalRef.value?.setFormData({ ...row });
|
||||
}
|
||||
1;
|
||||
// 其他工具栏
|
||||
|
||||
@@ -6,10 +6,13 @@
|
||||
<el-input v-model="form.conName" placeholder="请输入耗材名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗材分类" prop="consGroupId">
|
||||
<el-select v-model="form.consGroupId" placeholder="请选择耗材分类" style="width: 200px">
|
||||
<el-option v-for="option in consGroups" :key="option.conTypeId" :label="option.label"
|
||||
:value="option.id"></el-option>
|
||||
</el-select>
|
||||
<div class="center" style="gap: 14px;">
|
||||
<el-select v-model="form.consGroupId" placeholder="请选择耗材分类" style="width: 200px">
|
||||
<el-option v-for="option in consGroups" :key="option.conTypeId" :label="option.label"
|
||||
:value="option.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="Plus" @click="addClassificationModalRef.open()">添加耗材类型</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗材价格" prop="price">
|
||||
<div class="center">
|
||||
@@ -54,6 +57,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<addClassificationModal ref="addClassificationModalRef" @success="getConsGroups" />
|
||||
</template>
|
||||
|
||||
|
||||
@@ -62,6 +66,9 @@ import { ref, reactive, computed } from "vue";
|
||||
import consApi from "@/api/product/cons";
|
||||
import consGroupApi from "@/api/product/cons-group";
|
||||
import { ElMessage } from "element-plus";
|
||||
import addClassificationModal from "../../classification/components/addClassificationModal.vue";
|
||||
|
||||
const addClassificationModalRef = ref(null)
|
||||
|
||||
const consGroups = ref([]);
|
||||
const rules = {
|
||||
|
||||
@@ -97,13 +97,13 @@ const contentConfig: IContentConfig = {
|
||||
align: "center",
|
||||
prop: "conName",
|
||||
},
|
||||
{
|
||||
label: "单位",
|
||||
align: "center",
|
||||
prop: "conUnit",
|
||||
templet: "custom",
|
||||
slotName: "conUnit",
|
||||
},
|
||||
// {
|
||||
// label: "单位",
|
||||
// align: "center",
|
||||
// prop: "conUnit",
|
||||
// templet: "custom",
|
||||
// slotName: "conUnit",
|
||||
// },
|
||||
{
|
||||
label: "所属商品",
|
||||
align: "center",
|
||||
@@ -112,14 +112,24 @@ const contentConfig: IContentConfig = {
|
||||
},
|
||||
{
|
||||
label: "库存数量",
|
||||
align: "center",
|
||||
align: "left",
|
||||
prop: "stockNumber",
|
||||
templet: "custom",
|
||||
slotName: "stockNumber",
|
||||
},
|
||||
{
|
||||
label: "预警值",
|
||||
align: "center",
|
||||
prop: "conWarning",
|
||||
},
|
||||
{
|
||||
width: '120',
|
||||
label: "是否检测耗材",
|
||||
align: "center",
|
||||
prop: "isStock",
|
||||
templet: "custom",
|
||||
slotName: "isStock",
|
||||
},
|
||||
{
|
||||
label: "是否启用",
|
||||
align: "center",
|
||||
|
||||
@@ -10,6 +10,25 @@
|
||||
<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 #stockNumber="scope">
|
||||
<div class="columne">
|
||||
<div class="center">
|
||||
<el-text>第一单位</el-text>
|
||||
<el-text>{{ scope.row.stockNumber }}/{{ scope.row.conUnit }}</el-text>
|
||||
</div>
|
||||
<div class="center" v-if="scope.row.conUnitTwo">
|
||||
<el-text>第二单位</el-text>
|
||||
<el-text>{{ scope.row.stockNumber / scope.row.conUnitTwoConvert }}/{{ scope.row.conUnitTwo }}</el-text>
|
||||
</div>
|
||||
<div class="center" v-else>
|
||||
<el-text type="info">未设置第二单位</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #isStock="scope">
|
||||
<el-switch v-model="scope.row.isStock" :active-value="1" :inactive-value="0"
|
||||
@click="isStockChange($event, scope.row)"></el-switch>
|
||||
</template>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
@@ -124,6 +143,12 @@ const {
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
async function isStockChange(e, row) {
|
||||
// console.log('isStockChange.e', e);
|
||||
// console.log('isStockChange.row', row);
|
||||
await consApi.edit(row)
|
||||
}
|
||||
|
||||
function toGoods(id: number | string) {
|
||||
router.push({ path: "/product/index", query: { id: id } });
|
||||
}
|
||||
@@ -280,6 +305,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.goodslang {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -74,12 +74,19 @@ const accountList = reactive([
|
||||
{ username: "19107220837", type: 'danger', label: '快乐时光店铺' },
|
||||
// { username: "18199991111", type: 'success', label: '草莓加盟主店可直接管理' },
|
||||
{ username: "18821670757", type: 'success', label: '高歌的小店' },
|
||||
{ username: "18821670757", staffUserName: '18821670758', type: 'primary', label: '高歌的小店的员工-张三' },
|
||||
{ username: "191123456", type: 'primary', label: '酸橘子' },
|
||||
]);
|
||||
|
||||
// 快捷模拟登录
|
||||
function accountHandle(item) {
|
||||
state.loginForm.username = item.username;
|
||||
if (item.staffUserName) {
|
||||
state.loginForm.loginType = 1
|
||||
state.loginForm.staffUserName = item.staffUserName
|
||||
} else {
|
||||
state.loginForm.loginType = 0
|
||||
}
|
||||
state.loginForm.code = 666666
|
||||
const d = new Date();
|
||||
state.loginForm.password = `czg${d.getHours().toString().padStart(2, '0')}${d.getMinutes().toString().padStart(2, '0')}`;
|
||||
@@ -191,6 +198,12 @@ function handleLogin() {
|
||||
userStore
|
||||
.login(user)
|
||||
.then(async (res) => {
|
||||
|
||||
console.log('login===', res);
|
||||
|
||||
localStorage.setItem('shopStaff', JSON.stringify(res.shopStaff))
|
||||
|
||||
|
||||
const token = getToken();
|
||||
console.log("token", token);
|
||||
$douyin_checkIn({
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { ref, onMounted, nextTick, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
// {label: '设置',value: 1}
|
||||
@@ -29,10 +29,8 @@ const modelValue = defineModel('modelValue', {
|
||||
required: true
|
||||
})
|
||||
|
||||
// 改变索引
|
||||
function changeHandle(index) {
|
||||
modelValue.value = index
|
||||
|
||||
// 更新active_wrap位置
|
||||
function updateActivePosition(index) {
|
||||
let left = 0
|
||||
itemsWidth.value.forEach((val, i) => {
|
||||
if (i < index) {
|
||||
@@ -40,7 +38,12 @@ function changeHandle(index) {
|
||||
}
|
||||
})
|
||||
leftValue.value = left + gap.value * index
|
||||
}
|
||||
|
||||
// 改变索引
|
||||
function changeHandle(index) {
|
||||
modelValue.value = index
|
||||
updateActivePosition(index)
|
||||
emits('change', index)
|
||||
}
|
||||
|
||||
@@ -57,10 +60,14 @@ onMounted(() => {
|
||||
console.log('itemRefs===', itemRefs.value);
|
||||
console.log('itemsWidth===', itemsWidth.value);
|
||||
|
||||
|
||||
changeHandle(modelValue.value)
|
||||
updateActivePosition(modelValue.value)
|
||||
})
|
||||
})
|
||||
|
||||
// 监听modelValue变化,更新位置
|
||||
watch(modelValue, (newVal) => {
|
||||
updateActivePosition(newVal)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<el-form-item label="获得佣金条件" prop="inviteCount">
|
||||
<div class="column">
|
||||
<el-input v-model="form.inviteCount" placeholder="请输入" :maxlength="8" style="width: 300px;"
|
||||
@input="e => form.inviteCount = filterNumberInput(e, 1)">
|
||||
@input="e => form.inviteCount = filterNumberInput(e, 0)">
|
||||
<template #append>人</template>
|
||||
</el-input>
|
||||
<div class="tips">邀请达到指定人数才可赚取佣金</div>
|
||||
@@ -202,7 +202,7 @@ const formRef = ref(null)
|
||||
const formLoading = ref(false)
|
||||
const levelConfigListObj = ref({
|
||||
name: '', // 名称
|
||||
inviteCount: '', // 有效人数
|
||||
inviteCount: 0, // 有效人数
|
||||
costAmount: '', // 消费金额
|
||||
commission: '', // 一级分销比例
|
||||
levelTwoCommission: '', // 二级分销比例
|
||||
@@ -210,7 +210,7 @@ const levelConfigListObj = ref({
|
||||
const form = ref({
|
||||
id: '',
|
||||
openType: 'pay', // pay购买开通 auto自动开通 manual手动开通
|
||||
inviteCount: '', // 邀请条件人数
|
||||
inviteCount: 0, // 邀请条件人数
|
||||
inviteConsume: 0, // 被邀请人消费有效 0 1
|
||||
payAmount: '', // 购买开通金额
|
||||
rewardCount: '', // 每人奖励次数
|
||||
|
||||
163
src/views/online-shop/components/addGoodsGroup.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<el-dialog :title="forms.id ? '编辑分组' : '添加分组'" width="600px" v-model="visible" @close="onClose">
|
||||
<el-form :model="forms" label-width="120px" ref="elFormref" :rules="rules">
|
||||
<el-form-item label="分组名称" prop="name">
|
||||
<el-input v-model="forms.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择商品">
|
||||
<el-button type="primary" icon="Plus" @click="addgoods">添加商品</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-if="selectData.length">
|
||||
<!-- 选责商品列表 -->
|
||||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组状态">
|
||||
<el-radio-group v-model="forms.status">
|
||||
<el-radio :value="1" label="启用" />
|
||||
<el-radio :value="0" label="禁用" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="售卖时间管控">
|
||||
<el-radio-group v-model="forms.useTime">
|
||||
<el-radio :value="1" label="启用" />
|
||||
<el-radio :value="0" label="禁用" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择" v-if="forms.useTime == 1">
|
||||
<el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排列方式">
|
||||
<el-radio-group v-model="forms.sortMode">
|
||||
<el-radio value="0" label="默认" />
|
||||
<el-radio value="1" label="价格由高到低" />
|
||||
<el-radio value="2" label="价格由低到高" />
|
||||
<el-radio value="3" label="销量由高到低" />
|
||||
<el-radio value="4" label="销量由低到高" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组排序">
|
||||
<el-input-number v-model="forms.sort" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addConfirm" :loading="confirmLoading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 新增添加商品 -->
|
||||
<GoodsSelect ref="GoodsSelectRef" @success="e => selectData = e" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import selectGoodslist from '../goodsGroupconfig/selectGoodslist.vue';
|
||||
import UserAPI from "@/api/onlineShop/goodsGroupconfig";
|
||||
import GoodsSelect from '@/components/GoodsSelect/index.vue'
|
||||
|
||||
const visible = ref(false)
|
||||
const GoodsSelectRef = ref(null)
|
||||
const elFormref = ref(null);
|
||||
|
||||
let selectData = ref([]);
|
||||
const formsObj = {
|
||||
name: "",
|
||||
status: 1,
|
||||
useTime: 0,
|
||||
sortMode: "0",
|
||||
sort: 1,
|
||||
time: "",
|
||||
saleEndTime: '',
|
||||
saleStartTime: '',
|
||||
productIds: '',
|
||||
productList: ''
|
||||
}
|
||||
let forms = ref(_.cloneDeep(formsObj));
|
||||
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
function onClose() {
|
||||
forms.value = _.cloneDeep(formsObj)
|
||||
elFormref.value.resetFields()
|
||||
selectData.value = []
|
||||
}
|
||||
|
||||
// 添加商品
|
||||
async function addgoods() {
|
||||
GoodsSelectRef.value.show(selectData.value);
|
||||
}
|
||||
|
||||
// 删除商品
|
||||
function deleteItem(data) {
|
||||
selectData.value = data;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const confirmLoading = ref(false)
|
||||
// 添加编辑商品分组
|
||||
function addConfirm() {
|
||||
elFormref.value.validate(async (valid, fields) => {
|
||||
try {
|
||||
if (valid) {
|
||||
let obj = {
|
||||
...forms.value,
|
||||
productList: selectData.value,
|
||||
};
|
||||
// 商品选择的合集
|
||||
if (selectData.value.length) {
|
||||
let arr = [];
|
||||
selectData.value.forEach((item, index) => {
|
||||
arr.push(item.id);
|
||||
});
|
||||
obj.productIds = arr;
|
||||
}
|
||||
console.log(obj, "商品分组的参数");
|
||||
if (obj.time && obj.time.length) {
|
||||
obj.saleStartTime = obj.time[0];
|
||||
obj.saleEndTime = obj.time[1];
|
||||
}
|
||||
if (forms.value.id) {
|
||||
if (obj.useTime == 0) {
|
||||
obj.saleStartTime = null;
|
||||
obj.saleEndTime = null;
|
||||
}
|
||||
let res = await UserAPI.update(obj);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("编辑成功");
|
||||
}
|
||||
} else {
|
||||
let res = await UserAPI.addunit(obj);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("添加成功");
|
||||
}
|
||||
}
|
||||
visible.value = false
|
||||
emit('success')
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function open(obj) {
|
||||
visible.value = true
|
||||
if (obj && obj.id) {
|
||||
forms.value = _.cloneDeep(obj)
|
||||
selectData.value = obj.productList || []
|
||||
forms.value.time = [obj.saleStartTime, obj.saleEndTime]
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
@@ -5,17 +5,9 @@
|
||||
<!-- 搜索 -->
|
||||
|
||||
<!-- 列表 -->
|
||||
<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"
|
||||
>
|
||||
<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 ? "启用" : "禁用" }}
|
||||
@@ -29,11 +21,7 @@
|
||||
</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"
|
||||
/>
|
||||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
@@ -62,11 +50,7 @@
|
||||
</page-modal> -->
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<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>
|
||||
@@ -79,33 +63,20 @@
|
||||
添加商品
|
||||
</el-button>
|
||||
<!-- 选责商品列表 -->
|
||||
<selectGoodslist
|
||||
@deleteItememit="deleteItem($event)"
|
||||
:list="selectData"
|
||||
></selectGoodslist>
|
||||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||||
</div>
|
||||
</template>
|
||||
<template #addmanagementtime="scope">
|
||||
<template v-if="scope.formData.useTime == 1">
|
||||
{{ scope.formData }}
|
||||
<el-time-picker
|
||||
value-format="HH:mm:ss"
|
||||
v-model="scope.formData.saleTime"
|
||||
is-range
|
||||
range-separator="到"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||||
</template>
|
||||
</template>
|
||||
</page-modal>
|
||||
</template>
|
||||
<template v-else>
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig2"
|
||||
@operat-click="handleOperatClick"
|
||||
>
|
||||
<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 ? "启用" : "禁用" }}
|
||||
@@ -113,32 +84,17 @@
|
||||
</template>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<!-- 添加/编辑分组 -->
|
||||
<addGoodsGroup ref="addGoodsGroupRef" @success="handleQueryClick" />
|
||||
|
||||
<!-- 新增添加商品 -->
|
||||
<myDialog
|
||||
title="选择商品"
|
||||
width="50%"
|
||||
ref="myDialogRef"
|
||||
@Confirm="subitgood"
|
||||
@close="resetSelectData"
|
||||
>
|
||||
<page-search
|
||||
ref="searchRefs"
|
||||
:search-config="searchConfig2"
|
||||
@query-click="searchs"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
<page-content
|
||||
ref="contentRefs"
|
||||
v-if="switchref"
|
||||
:content-config="contentConfig2"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood" @close="resetSelectData">
|
||||
<page-search ref="searchRefs" :search-config="searchConfig2" @query-click="searchs"
|
||||
@reset-click="handleResetClick" />
|
||||
<page-content ref="contentRefs" v-if="switchref" :content-config="contentConfig2" @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 ? "启用" : "禁用" }}
|
||||
@@ -152,21 +108,17 @@
|
||||
</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"
|
||||
/>
|
||||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- <el-table :data="selectData" border style="width: 100%">
|
||||
<el-table :data="selectData" border style="width: 100%">
|
||||
<el-table-column prop="date" align="center" label="Date" />
|
||||
<el-table-column prop="address" align="center" label="Address" />
|
||||
</el-table> -->
|
||||
</el-table>
|
||||
</myDialog>
|
||||
<!-- 新增 -->
|
||||
<myDialog :title="title" width="30%" ref="myDialogRefAdd" @Confirm="addConfirm()">
|
||||
<!-- <myDialog :title="title" width="50%" ref="myDialogRefAdd" @Confirm="addConfirm()">
|
||||
<el-form :model="forms" label-width="120px" ref="elFormref" :rules="rules">
|
||||
<el-form-item label="分组名称" prop="name">
|
||||
<el-input v-model="forms.name" />
|
||||
@@ -175,11 +127,7 @@
|
||||
<el-button type="primary" icon="Plus" @click="addgoods">添加商品</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-if="selectData.length">
|
||||
<!-- 选责商品列表 -->
|
||||
<selectGoodslist
|
||||
@deleteItememit="deleteItem($event)"
|
||||
:list="selectData"
|
||||
></selectGoodslist>
|
||||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组状态">
|
||||
<el-radio-group v-model="forms.status">
|
||||
@@ -194,14 +142,8 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择" v-if="forms.useTime == 1">
|
||||
<el-time-picker
|
||||
value-format="HH:mm:ss"
|
||||
v-model="forms.time"
|
||||
is-range
|
||||
range-separator="到"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排列方式">
|
||||
<el-radio-group v-model="forms.sortMode">
|
||||
@@ -216,7 +158,7 @@
|
||||
<el-input-number v-model="forms.sort" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</myDialog>
|
||||
</myDialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -235,6 +177,7 @@ import searchConfig2 from "./goodsGroupconfig/search2";
|
||||
import myDialog from "@/components/mycomponents/myDialog.vue";
|
||||
import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue";
|
||||
import { isSyncStatus } from "@/utils/index";
|
||||
import addGoodsGroup from "./components/addGoodsGroup.vue";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -268,10 +211,13 @@ if (isSyncStatus()) {
|
||||
|
||||
let switchref = ref(false);
|
||||
|
||||
const addGoodsGroupRef = ref(null)
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
selectData.value = [];
|
||||
addGoodsGroupRef.value.open()
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// selectData.value = [];
|
||||
// 加载上级规格下拉数据源
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// 加载角色下拉数据源
|
||||
@@ -377,22 +323,22 @@ function deleteItem(data: any) {
|
||||
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
title.value = "编辑分组";
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// title.value = "编辑分组";
|
||||
// 加载部门下拉数据源
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// 根据id获取数据进行填充
|
||||
const data = await UserAPI.getunitinfo(row.id);
|
||||
let obj = { ...data };
|
||||
selectData.value = data.productList;
|
||||
obj.time = [obj.saleStartTime, obj.saleEndTime];
|
||||
for (let key in obj) {
|
||||
forms[key] = obj[key];
|
||||
}
|
||||
myDialogRefAdd.value.open();
|
||||
// const data = await UserAPI.getunitinfo(row.id);
|
||||
// let obj = { ...data };
|
||||
// selectData.value = data.productList;
|
||||
// obj.time = [obj.saleStartTime, obj.saleEndTime];
|
||||
// for (let key in obj) {
|
||||
// forms[key] = obj[key];
|
||||
// }
|
||||
addGoodsGroupRef.value.open(row)
|
||||
// editModalRef.value?.setFormData(obj);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
}
|
||||
@@ -400,19 +346,20 @@ async function handleEditClick(row: IObject) {
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
if (name === "custom1") {
|
||||
forms = reactive({
|
||||
name: "",
|
||||
status: 1,
|
||||
useTime: 0,
|
||||
sortMode: "0",
|
||||
sort: 1,
|
||||
time: "",
|
||||
});
|
||||
selectData.value = [];
|
||||
title.value = "新增分组";
|
||||
// forms = reactive({
|
||||
// name: "",
|
||||
// status: 1,
|
||||
// useTime: 0,
|
||||
// sortMode: "0",
|
||||
// sort: 1,
|
||||
// time: "",
|
||||
// });
|
||||
// selectData.value = [];
|
||||
// title.value = "新增分组";
|
||||
|
||||
// 新增
|
||||
myDialogRefAdd.value.open();
|
||||
// // 新增
|
||||
// myDialogRefAdd.value.open();
|
||||
addGoodsGroupRef.value.open()
|
||||
}
|
||||
}
|
||||
// 其他操作列
|
||||
|
||||
@@ -9,13 +9,20 @@
|
||||
<div class="form">
|
||||
<div class="preview_wrap">
|
||||
<div class="phone_wrap">
|
||||
<!-- 首页背景 -->
|
||||
<div class="index_bg" v-if="tableActive == 'index_bg'">
|
||||
<img class="bg" v-if="!isJsonArrayString(selectItem.value)" :src="selectItem.value" alt="">
|
||||
<el-carousel height="500px" v-else>
|
||||
<el-carousel-item v-for="item in JSON.parse(selectItem.value)">
|
||||
<!-- 多图轮播 -->
|
||||
<el-carousel height="500px"
|
||||
v-if="isJsonArrayString(selectItem.value) && JSON.parse(selectItem.value).length > 0">
|
||||
<el-carousel-item v-for="(item, idx) in JSON.parse(selectItem.value)" :key="idx">
|
||||
<img class="bg" :src="item" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 单图渲染 -->
|
||||
<img class="bg" v-else-if="selectItem.value" :src="selectItem.value" alt="" />
|
||||
<!-- 空状态提示 -->
|
||||
<div class="empty-tip" v-else>暂无图片,请上传</div>
|
||||
|
||||
<div class="menu_wrap">
|
||||
<div class="menu_wrap_div">
|
||||
<div class="left">
|
||||
@@ -46,8 +53,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人中心背景 -->
|
||||
<div class="my_bg" v-if="tableActive == 'my_bg'">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<img class="bg" :src="selectItem.value" v-if="selectItem.value" />
|
||||
<div class="empty-tip my-empty-tip" v-else>暂无图片,请上传</div>
|
||||
<div class="content">
|
||||
<div class="item" style="display: flex">
|
||||
<div class="left">
|
||||
@@ -108,10 +118,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 会员背景 -->
|
||||
<div class="member_bg" v-if="tableActive == 'member_bg'">
|
||||
<div class="card_wrap">
|
||||
<div class="card">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<img class="bg" :src="selectItem.value" v-if="selectItem.value" />
|
||||
<div class="empty-tip member-empty-tip" v-else>暂无图片,请上传</div>
|
||||
<div class="content">
|
||||
<div class="ewm">
|
||||
<i class="icon el-icon-menu"></i>
|
||||
@@ -155,18 +168,29 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表背景 -->
|
||||
<div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
|
||||
<img class="bg" :src="selectItem.value" v-if="!isJsonArrayString(selectItem.value)" />
|
||||
<el-carousel height="120px" v-else>
|
||||
<el-carousel-item v-for="item in JSON.parse(selectItem.value)">
|
||||
<!-- 多图轮播 -->
|
||||
<el-carousel height="120px"
|
||||
v-if="isJsonArrayString(selectItem.value) && JSON.parse(selectItem.value).length > 0">
|
||||
<el-carousel-item v-for="(item, idx) in JSON.parse(selectItem.value)" :key="idx">
|
||||
<img class="bg" :src="item" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 单图渲染 -->
|
||||
<img class="bg" v-else-if="selectItem.value" :src="selectItem.value" alt="" />
|
||||
<!-- 空状态提示 -->
|
||||
<div class="empty-tip shopinfo-empty-tip" v-else>暂无图片,请上传</div>
|
||||
|
||||
<div class="shop_name">{{ shopName }}</div>
|
||||
<img class="content" src="@/assets/images/shop_editor_bg.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- 小票logo -->
|
||||
<div class="ticket_wrap" v-if="tableActive == 'ticket_logo'">
|
||||
<img class="logo" :src="selectItem.value" />
|
||||
<img class="logo" :src="selectItem.value" v-if="selectItem.value" />
|
||||
<div class="empty-tip ticket-empty-tip" v-else>暂无图片,请上传</div>
|
||||
<img class="ewm" src="@/assets/images/1024.png" />
|
||||
<div class="row">
|
||||
<span class="num">123</span>
|
||||
@@ -185,42 +209,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor_wrap">
|
||||
<div class="header" style="padding-bottom: 20px">
|
||||
<div class="t1">
|
||||
{{ selectItem.name }}
|
||||
</div>
|
||||
<div class="t1">{{ selectItem.name }}</div>
|
||||
<div class="t2">注:点击图片更换</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="upload_wrap" style="display: flex;flex-direction: column;gap: 28px;"
|
||||
<!-- 多图上传 -->
|
||||
<div class="upload_wrap" style="display: flex; flex-direction: column; gap: 28px"
|
||||
v-if="selectItem.autoKey == 'index_bg' || selectItem.autoKey == 'shopinfo_bg'">
|
||||
<MultiImageUpload v-model="imgList" @uploadStart="uploading = true" @uploadAllSuccess="MultiOnSuccess" />
|
||||
<div>
|
||||
<el-button type="primary" size="large" @click="doSubmit" :loading="uploading"
|
||||
loading-text="图片上传中...">确认修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!-- 单图上传 -->
|
||||
<div v-else style="display: flex;">
|
||||
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
|
||||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</SingleImageUpload>
|
||||
</div>
|
||||
<!-- <el-upload
|
||||
:headers="headers"
|
||||
class="avatar-uploader"
|
||||
:action="qiNiuUploadApi"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccess"
|
||||
style="width: 200px; height: 200px"
|
||||
>
|
||||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload> -->
|
||||
<!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
|
||||
<el-input style="width: 300px;margin-left: 20px;" />
|
||||
<el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
|
||||
<div class="model_wapra">
|
||||
<!-- 个人中心模板图 -->
|
||||
<template v-if="selectItem.autoKey == 'my_bg'">
|
||||
<div class="title">个人中心模板图</div>
|
||||
<div class="user-bg-list" v-if="userBgList.length > 0">
|
||||
<img v-for="(url, index) in userBgList" :key="index" :src="url" @click="selectUserBg(url)"
|
||||
class="user-bg-item" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- VIP背景模板图 -->
|
||||
<template v-else-if="selectItem.autoKey == 'member_bg'">
|
||||
<div class="title">会员卡背景模板图</div>
|
||||
<div class="user-bg-list" v-if="vipBgList.length > 0">
|
||||
<img v-for="(url, index) in vipBgList" :key="index" :src="url" @click="selectVipBg(url)"
|
||||
class="user-bg-item" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" size="large" @click="doSubmit" :loading="uploading" loading-text="图片上传中...">
|
||||
确认修改
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -230,7 +260,13 @@
|
||||
<script>
|
||||
import { ElMessage } from "element-plus";
|
||||
import shopExtendApi from "@/api/account/shopExtend";
|
||||
// 确保SvgIcon组件已正确引入
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableActive: "index_bg",
|
||||
@@ -238,91 +274,151 @@ export default {
|
||||
selectItem: {},
|
||||
imageUrl: "",
|
||||
imgList: [],
|
||||
shopName: '',
|
||||
uploading: false
|
||||
shopName: "",
|
||||
uploading: false,
|
||||
userBgList: [
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/5c8673150d8e449ba035e3f65866b4ed.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/c442af63d29443c687b24d2a3abbf02b.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/1da89980fa0f4c7abffbcdacc2c3a059.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/16296e40f2634d0da0cf1ff377b2b848.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/f442c0d005b94664ac4b37f7fa19731b.png',
|
||||
],
|
||||
vipBgList: [
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/c2add99b9b21464889bc14823b97c40e.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/c0e65f576a1a485da7fac34658b87c24.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/629b8c12b8904140bf84df3a57b3c021.png',
|
||||
'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/cd06e01ad7e848359cdca718f5a06231.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 刷新列表数据
|
||||
// 选择会员背景模板图
|
||||
selectVipBg(url) {
|
||||
this.selectItem.value = url;
|
||||
// this.doSubmit();
|
||||
},
|
||||
// 选择个人中心背景模板图
|
||||
selectUserBg(url) {
|
||||
this.selectItem.value = url;
|
||||
// this.doSubmit();
|
||||
},
|
||||
// 提交修改
|
||||
async doSubmit() {
|
||||
// console.log('this.selectItem.value', this.selectItem.value);
|
||||
// return
|
||||
// 多图类型强制同步imgList到selectItem.value
|
||||
if (["index_bg", "shopinfo_bg"].includes(this.selectItem.autoKey)) {
|
||||
this.selectItem.value =
|
||||
this.imgList.length > 0 ? JSON.stringify(this.imgList) : "";
|
||||
}
|
||||
|
||||
// this.selectItem.value = JSON.stringify(this.imgList)
|
||||
await shopExtendApi.edit({
|
||||
let data = {
|
||||
...this.selectItem,
|
||||
autokey: this.selectItem.autoKey,
|
||||
});
|
||||
ElMessage({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getList();
|
||||
};
|
||||
|
||||
if (data.value === "") {
|
||||
ElMessage({
|
||||
message: "请上传图片",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await shopExtendApi.edit(data);
|
||||
ElMessage({
|
||||
message: "编辑成功",
|
||||
type: "success", // 修复提示类型错误
|
||||
});
|
||||
this.getList();
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: "编辑失败:" + (error.message || "未知错误"),
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 单图上传成功
|
||||
onSuccess(response) {
|
||||
this.doSubmit();
|
||||
},
|
||||
|
||||
// 多图上传成功
|
||||
async MultiOnSuccess(response) {
|
||||
console.log(response);
|
||||
// console.log(this.imgList);
|
||||
// console.log(this.imgList);
|
||||
// await nextTick()
|
||||
this.uploading = false
|
||||
this.selectItem.value = JSON.stringify(this.imgList)
|
||||
console.log('onSuccess.selectItem.value', this.selectItem.value);
|
||||
this.uploading = false;
|
||||
// 确保imgList有值再序列化
|
||||
this.selectItem.value =
|
||||
this.imgList.length > 0 ? JSON.stringify(this.imgList) : "";
|
||||
// 强制触发视图更新
|
||||
this.$forceUpdate();
|
||||
ElMessage({
|
||||
message: "图片上传成功",
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断字符串是否为合法的 JSON 数组
|
||||
* @param {string} str - 待判断的字符串
|
||||
* @returns {boolean} true=是JSON数组字符串 / false=普通字符串/其他
|
||||
*/
|
||||
isJsonArrayString(str) {
|
||||
// 1. 非字符串直接返回 false
|
||||
if (typeof str !== 'string') {
|
||||
if (typeof str !== "string" || str.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 2. 空字符串返回 false(根据业务可调整)
|
||||
if (str.trim() === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// 3. 尝试解析 JSON
|
||||
const parsed = JSON.parse(str);
|
||||
// 4. 校验解析结果是否为数组
|
||||
return Array.isArray(parsed);
|
||||
} catch (e) {
|
||||
// 解析失败(普通字符串/非法 JSON)→ 返回 false
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// 切换类型
|
||||
selectItemChange(key) {
|
||||
this.tableActive = key;
|
||||
const { autoKey, id, name, value } = this.tableData.find((item) => item.autoKey == key);
|
||||
this.selectItem = { autoKey, id, name, value };
|
||||
if (this.isJsonArrayString(value)) {
|
||||
this.imgList = JSON.parse(value)
|
||||
const targetItem = this.tableData.find((item) => item.autoKey === key) || {};
|
||||
// 深拷贝避免引用问题
|
||||
this.selectItem = { ...targetItem };
|
||||
|
||||
// 多图类型特殊处理
|
||||
if (["index_bg", "shopinfo_bg"].includes(key)) {
|
||||
if (this.isJsonArrayString(targetItem.value)) {
|
||||
this.imgList = JSON.parse(targetItem.value);
|
||||
} else {
|
||||
// 非JSON数组时,若有单图值则转为数组,否则置空
|
||||
this.imgList = targetItem.value ? [targetItem.value] : [];
|
||||
}
|
||||
// 同步更新selectItem.value为JSON数组
|
||||
this.selectItem.value = JSON.stringify(this.imgList);
|
||||
} else {
|
||||
this.imgList = []
|
||||
this.imgList = [];
|
||||
// 单图类型保留原有值
|
||||
this.selectItem.value = targetItem.value || "";
|
||||
}
|
||||
console.log(this.selectItem);
|
||||
},
|
||||
|
||||
// 获取装修数据
|
||||
async getList() {
|
||||
try {
|
||||
let res = await shopExtendApi.get({});
|
||||
this.tableData = res;
|
||||
this.tableActive = !this.tableActive ? res[0].autoKey : this.tableActive;
|
||||
this.selectItemChange(this.tableActive);
|
||||
const res = await shopExtendApi.get({});
|
||||
this.tableData = res || [];
|
||||
// 确保有数据时再切换
|
||||
if (this.tableData.length > 0) {
|
||||
this.tableActive = this.tableActive || this.tableData[0].autoKey;
|
||||
this.selectItemChange(this.tableActive);
|
||||
}
|
||||
// 补充店铺名称(根据实际接口返回调整)
|
||||
this.shopName = "我的店铺";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error("获取装修数据失败:", error);
|
||||
ElMessage({
|
||||
message: "获取数据失败,请刷新重试",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -336,7 +432,7 @@ export default {
|
||||
gap: 30px;
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
border: 1px solid $color;
|
||||
border-radius: 4px;
|
||||
@@ -366,6 +462,64 @@ export default {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 空状态通用样式
|
||||
.empty-tip {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 首页空状态
|
||||
.index_bg .empty-tip {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
// 商品列表空状态
|
||||
.shopinfo_bg .empty-tip {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
// 个人中心空状态
|
||||
.my-empty-tip {
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 会员背景空状态
|
||||
.member-empty-tip {
|
||||
height: 144px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
// 小票logo空状态
|
||||
.ticket-empty-tip {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.index_bg {
|
||||
padding-bottom: 50px;
|
||||
|
||||
@@ -653,35 +807,36 @@ export default {
|
||||
}
|
||||
|
||||
.info_wrap {
|
||||
padding: 20px 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #efefef;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
color: #555;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
.t1 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -696,52 +851,55 @@ export default {
|
||||
}
|
||||
|
||||
.shop_name {
|
||||
padding: 10px 10px 0 10px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket_wrap {
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ewm {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.num {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.sku {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -749,28 +907,63 @@ export default {
|
||||
}
|
||||
|
||||
.editor_wrap {
|
||||
padding-left: 20px;
|
||||
|
||||
.header {
|
||||
.t2 {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
padding-left: 40px;
|
||||
|
||||
.form_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
.model_wapra {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
.user-bg-list {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.user-bg-item {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c8c8c;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
98
src/views/order/index/components/GoodsListCollapse.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="goods_info">
|
||||
<div v-for="(item, index) in showList" :key="item.id || index" class="row">
|
||||
<el-image :src="item.productImg" class="cover" lazy />
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<span :class="[item.isVip == 1 ? 'colorStyle' : '']">
|
||||
{{ item.productName }}
|
||||
</span>
|
||||
<span v-if="item.refundNum" class="refund">(退 - {{ item.refundNum }})</span>
|
||||
</div>
|
||||
<div class="sku">{{ item.skuName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="needShowMore" class="show-more" @click="showAll = !showAll">
|
||||
{{ showAll ? "收起" : "查看全部" }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
// 接收商品列表
|
||||
const props = defineProps<{
|
||||
goods: any[];
|
||||
}>();
|
||||
|
||||
// 组件内部独立状态,自己控制,不影响外部
|
||||
const showAll = ref(false);
|
||||
|
||||
// 计算需要展示的列表
|
||||
const showList = computed(() => {
|
||||
const list = props.goods || [];
|
||||
return showAll.value ? list : list.slice(0, 2);
|
||||
});
|
||||
|
||||
// 是否需要显示查看更多
|
||||
const needShowMore = computed(() => {
|
||||
return (props.goods || []).length > 2;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods_info {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 2px;
|
||||
text-align: center;
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sku {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-more {
|
||||
color: #1989fa;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorStyle {
|
||||
color: #ffc315;
|
||||
}
|
||||
|
||||
.refund {
|
||||
color: #ff9731;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -93,13 +93,8 @@
|
||||
<div>
|
||||
实收金额:
|
||||
<span style="color: red">¥{{ detail.payAmount }}</span>
|
||||
<el-button
|
||||
v-if="detail.status != 'unpaid' && detail.refundAmount < detail.payAmount"
|
||||
size="small"
|
||||
type="danger"
|
||||
class="u-m-l-10"
|
||||
@click="tuikuan()"
|
||||
>
|
||||
<el-button v-if="detail.status != 'unpaid' && detail.refundAmount < detail.payAmount" size="small"
|
||||
type="danger" class="u-m-l-10" @click="tuikuan()">
|
||||
<span>退款</span>
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -116,7 +111,11 @@
|
||||
退款详情>
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="color-red">退款方式:{{ detail.refundType }}</div>
|
||||
<div class="color-red">
|
||||
<span v-if="detail.refundType">
|
||||
退款方式:{{ detail.refundType === "cash" ? "现金退款" : "原路退回" }}
|
||||
</span>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
@@ -126,35 +125,22 @@
|
||||
<div style="margin-bottom: 16px; font-size: 16px">商品信息</div>
|
||||
<template v-for="(item, index) in detail.detailMap" :key="index">
|
||||
<h4>第{{ index }}次下单</h4>
|
||||
<el-table
|
||||
:data="item"
|
||||
:ref="'refTable' + index"
|
||||
@select-all="tableSelectAll($event, index)"
|
||||
>
|
||||
<el-table :data="item" :ref="'refTable' + index" @select-all="tableSelectAll($event, index)">
|
||||
<!-- <el-table-column type="selection" width="55" /> -->
|
||||
<el-table-column label="数量" type="selection">
|
||||
<template v-slot="scope">
|
||||
<div v-if="detail.status == 'unpaid'">
|
||||
<el-checkbox
|
||||
v-if="scope.row.num - scope.row.returnNum > 0"
|
||||
v-model="scope.row.checked"
|
||||
/>
|
||||
<el-checkbox v-if="scope.row.num - scope.row.returnNum > 0" v-model="scope.row.checked" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-checkbox
|
||||
v-if="scope.row.num - scope.row.refundNum > 0"
|
||||
v-model="scope.row.checked"
|
||||
/>
|
||||
<el-checkbox v-if="scope.row.num - scope.row.refundNum > 0" v-model="scope.row.checked" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品" width="150">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
<el-image
|
||||
:src="scope.row.productImg"
|
||||
style="width: 40px; height: 40px"
|
||||
></el-image>
|
||||
<el-image :src="scope.row.productImg" style="width: 40px; height: 40px"></el-image>
|
||||
<div class="info">
|
||||
<span :class="[scope.row.isVip == 1 ? 'colorStyle' : '']">
|
||||
{{ scope.row.productName }}
|
||||
@@ -187,32 +173,17 @@
|
||||
<el-table-column label="实付">
|
||||
<template v-slot="scope">¥{{ scope.row.payAmount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="detail.status == 'unpaid'"
|
||||
label="可退菜数量"
|
||||
align="center"
|
||||
width="130px"
|
||||
>
|
||||
<el-table-column v-if="detail.status == 'unpaid'" label="可退菜数量" align="center" width="130px">
|
||||
<template v-slot="scope">
|
||||
<el-input-number
|
||||
v-if="scope.row.checked"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
v-model="scope.row.selNumber"
|
||||
:max="scope.row.num - scope.row.returnNum"
|
||||
></el-input-number>
|
||||
<el-input-number v-if="scope.row.checked" :min="0" style="width: 100px" v-model="scope.row.selNumber"
|
||||
:max="scope.row.num - scope.row.returnNum"></el-input-number>
|
||||
<span class="" v-else>{{ scope.row.num - scope.row.returnNum }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-else label="可退款数量" align="center" width="130px">
|
||||
<template v-slot="scope">
|
||||
<el-input-number
|
||||
v-if="scope.row.checked"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
v-model="scope.row.selNumber"
|
||||
:max="scope.row.num - scope.row.refundNum - scope.row.returnNum"
|
||||
></el-input-number>
|
||||
<el-input-number v-if="scope.row.checked" :min="0" style="width: 100px" v-model="scope.row.selNumber"
|
||||
:max="scope.row.num - scope.row.refundNum - scope.row.returnNum"></el-input-number>
|
||||
<span class="" v-else>
|
||||
{{ scope.row.num - scope.row.refundNum - scope.row.returnNum }}
|
||||
</span>
|
||||
@@ -227,23 +198,13 @@
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<template v-if="detail.status != 'unpaid'">
|
||||
<el-button
|
||||
v-if="canTuikuan(scope.row)"
|
||||
link
|
||||
size="small"
|
||||
@click="tuikuan(scope.row)"
|
||||
>
|
||||
<el-button v-if="canTuikuan(scope.row)" link size="small" @click="tuikuan(scope.row)">
|
||||
<span>退款</span>
|
||||
</el-button>
|
||||
<span class="color-999" v-if="scope.row.status == 'refund'">已退款</span>
|
||||
</template>
|
||||
<template v-if="detail.status == 'unpaid'">
|
||||
<el-button
|
||||
v-if="canTuicai(scope.row)"
|
||||
link
|
||||
size="small"
|
||||
@click="tuicai(scope.row)"
|
||||
>
|
||||
<el-button v-if="canTuicai(scope.row)" link size="small" @click="tuicai(scope.row)">
|
||||
<span>退菜</span>
|
||||
</el-button>
|
||||
<span class="color-999" v-else>已退菜</span>
|
||||
@@ -253,41 +214,25 @@
|
||||
</el-table>
|
||||
</template>
|
||||
<!-- 退款 -->
|
||||
<div
|
||||
class="u-p-20 u-flex u-row-right"
|
||||
v-if="
|
||||
detail.status !== 'refund' &&
|
||||
detail.status !== 'unpaid' &&
|
||||
detail.status !== 'cancelled'
|
||||
"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="allSelected"
|
||||
@change="allSelectedChange"
|
||||
label="全选"
|
||||
></el-checkbox>
|
||||
<div class="u-p-20 u-flex u-row-right" v-if="
|
||||
detail.status !== 'refund' &&
|
||||
detail.status !== 'unpaid' &&
|
||||
detail.status !== 'cancelled'
|
||||
">
|
||||
<el-checkbox v-model="allSelected" @change="allSelectedChange" label="全选"></el-checkbox>
|
||||
<el-button type="danger" class="u-m-l-20" @click.stop="tuikuan('all')">退款</el-button>
|
||||
</div>
|
||||
<!-- 退菜 -->
|
||||
<div class="u-p-20 u-flex u-row-right" v-if="detail.status == 'unpaid'">
|
||||
<el-checkbox
|
||||
v-model="allSelected"
|
||||
@change="allSelectedChange"
|
||||
label="全选"
|
||||
></el-checkbox>
|
||||
<el-checkbox v-model="allSelected" @change="allSelectedChange" label="全选"></el-checkbox>
|
||||
<el-button type="danger" class="u-m-l-20" @click.stop="tuicai('all')">退菜</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- 退款 -->
|
||||
<return-money
|
||||
:modal="false"
|
||||
ref="refReturnMoney"
|
||||
:max="selGoods.num"
|
||||
:goods="selGoods"
|
||||
@confirm="refReturnMoneyConfirm"
|
||||
></return-money>
|
||||
<return-money :modal="false" ref="refReturnMoney" :max="selGoods.num" :goods="selGoods"
|
||||
@confirm="refReturnMoneyConfirm"></return-money>
|
||||
<!-- 退菜 -->
|
||||
<order-return-cart ref="refReturnCart" @confirm="refReturnCartConfirm"></order-return-cart>
|
||||
</div>
|
||||
@@ -462,6 +407,12 @@ export default {
|
||||
},
|
||||
tuikuan(item) {
|
||||
if (!item) {
|
||||
let arrs = []
|
||||
for (let i in this.detail.detailMap) {
|
||||
this.detail.detailMap[i].map((v) => {
|
||||
arrs.push(v);
|
||||
});
|
||||
}
|
||||
this.$refs.refReturnMoney.open([], this.detail);
|
||||
return;
|
||||
}
|
||||
@@ -480,6 +431,9 @@ export default {
|
||||
if (arr.length == 0) {
|
||||
return ElMessage.error("请选择要退款的商品和数量");
|
||||
}
|
||||
|
||||
console.log('tuikuan===', arr);
|
||||
|
||||
this.$refs.refReturnMoney.open(arr, this.detail);
|
||||
},
|
||||
tuicai(item) {
|
||||
@@ -498,7 +452,7 @@ export default {
|
||||
if (arr.length == 0) {
|
||||
return ElMessage.error("请选择要退菜的商品和数量");
|
||||
}
|
||||
console.log(arr);
|
||||
console.log('tuicai===', arr);
|
||||
this.$refs.refReturnCart.open(arr, this.detail);
|
||||
},
|
||||
|
||||
|
||||
@@ -4,11 +4,7 @@
|
||||
<div class="u-flex u-col-top" v-if="goodsList && goodsList.length">
|
||||
<span class="u-m-0">退款商品</span>
|
||||
<div class="u-p-l-20 goods-list">
|
||||
<div
|
||||
class="u-flex u-font-12 goods-list-item"
|
||||
v-for="(goods, index) in goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="u-flex u-font-12 goods-list-item" v-for="(goods, index) in goodsList" :key="index">
|
||||
<span class="">
|
||||
{{ goods.productName }}
|
||||
</span>
|
||||
@@ -35,12 +31,7 @@
|
||||
<div class="flex u-row-between">
|
||||
<span class="color-red">退款金额</span>
|
||||
<div class="u-flex u-flex-1 u-p-l-20">
|
||||
<el-input-number
|
||||
type="number"
|
||||
v-model="number"
|
||||
:min="min"
|
||||
:max="canReturnMoney"
|
||||
></el-input-number>
|
||||
<el-input-number type="number" v-model="number" :min="min" :max="canReturnMoney"></el-input-number>
|
||||
<span class="u-m-l-10">可退{{ canReturnMoney }}元</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,13 +64,8 @@
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-flex-wrap tags">
|
||||
<div
|
||||
class="tag"
|
||||
v-for="(tag, index) in tags"
|
||||
@click="changeSel(tag)"
|
||||
:key="index"
|
||||
:class="{ active: tag.checked }"
|
||||
>
|
||||
<div class="tag" v-for="(tag, index) in tags" @click="changeSel(tag)" :key="index"
|
||||
:class="{ active: tag.checked }">
|
||||
{{ tag.label }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,16 +80,22 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
<safe-password ref="refPassword" @confirm="pwdConfirm"></safe-password>
|
||||
<!-- 退款退菜推库存的操作弹窗 -->
|
||||
<refundConsModal ref="refundConsModalRef" :list="refundList" @success="refundConsModalSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script>
|
||||
import { ElMessage } from "element-plus";
|
||||
import safePassword from "./password.vue";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useCartsStore } from "@/store/modules/carts";
|
||||
import categoryApi from "@/api/product/productclassification";
|
||||
import refundConsModal from "@/components/refundConsModal.vue";
|
||||
const shopUser = useUserStore();
|
||||
export default {
|
||||
components: {
|
||||
safePassword,
|
||||
refundConsModal
|
||||
},
|
||||
props: {
|
||||
modal: {
|
||||
@@ -135,6 +127,8 @@ export default {
|
||||
goods: {
|
||||
productId: -999,
|
||||
},
|
||||
refundList: [],
|
||||
refundStock: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -196,18 +190,26 @@ export default {
|
||||
.join(",");
|
||||
const note = selTag + (this.note.length > 0 ? "," + this.note : "");
|
||||
console.log(note);
|
||||
this.$emit("confirm", {
|
||||
|
||||
const data = {
|
||||
refundAmount: this.number,
|
||||
cash: this.cash,
|
||||
refundReason: note,
|
||||
refundDetails: this.goodsList.map((v) => {
|
||||
return { id: v.id, num: v.num };
|
||||
return { id: v.id, num: v.selNumber };
|
||||
}),
|
||||
...e,
|
||||
});
|
||||
refundStock: this.refundStock
|
||||
}
|
||||
this.$emit("confirm", data);
|
||||
this.close();
|
||||
},
|
||||
confirm() {
|
||||
// 退款推库存的操作
|
||||
refundConsModalSuccess(e) {
|
||||
this.refundStock = e
|
||||
this.emitTuikuan()
|
||||
},
|
||||
async confirm() {
|
||||
const selTag = this.tags
|
||||
.filter((item) => item.checked)
|
||||
.map((item) => item.label)
|
||||
@@ -220,14 +222,58 @@ export default {
|
||||
this.$refs.refPassword.open();
|
||||
return;
|
||||
}
|
||||
|
||||
// 在这里给订单的商品补全库存信息 start
|
||||
const carts = useCartsStore();
|
||||
let categorys = JSON.parse(localStorage.getItem('categorys'))
|
||||
let shopInfo = JSON.parse(localStorage.getItem('userInfo'))
|
||||
|
||||
if (!categorys) {
|
||||
categorys = await categoryApi.getList({})
|
||||
}
|
||||
|
||||
this.goodsList.forEach(item => {
|
||||
carts.goods.forEach(val => {
|
||||
if (item.productId == val.id) {
|
||||
if (shopInfo.refundMode == 1) {
|
||||
// 跟随分类退款模式
|
||||
categorys.forEach(v => {
|
||||
if (val.categoryId == v.id) {
|
||||
item.refundMode = v.refundMode
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 跟随商品退款模式及
|
||||
item.refundMode = val.refundMode
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log('this.goodsList===', this.goodsList);
|
||||
// 在这里给订单的商品补全库存信息 end
|
||||
|
||||
this.goodsList.forEach(item => {
|
||||
if (item.refundMode == 3) {
|
||||
this.refundList.push({
|
||||
name: item.productName,
|
||||
num: item.selNumber
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (this.refundList.length > 0) {
|
||||
this.$refs.refundConsModalRef.show()
|
||||
return
|
||||
}
|
||||
|
||||
this.emitTuikuan();
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tag) {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
@@ -237,6 +283,7 @@ export default {
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
.tag {
|
||||
margin: 10px 10px 0 0;
|
||||
@@ -246,6 +293,7 @@ export default {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
@@ -253,14 +301,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.number-box .el-input__inner::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.number-box .el-input__inner::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.goods-list-item {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
@@ -268,6 +319,7 @@ export default {
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.goods-list-item:not(:first-child) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@ import type { statusType } from "@/api/order/order";
|
||||
export const statusOptions: statusOptions[] = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "待支付", value: "unpaid" },
|
||||
{ label: "制作中", value: "in-production" },
|
||||
{ label: "待取餐", value: "wait-out" },
|
||||
// { label: "制作中", value: "in-production" },
|
||||
// { label: "待取餐", value: "wait-out" },
|
||||
{ label: "订单完成", value: "done" },
|
||||
{ label: "申请退单", value: "refunding" },
|
||||
// { label: "申请退单", value: "refunding" },
|
||||
{ label: "退单", value: "refund" },
|
||||
{ label: "部分退单", value: "part_refund" },
|
||||
{ label: "取消订单", value: "cancelled" },
|
||||
@@ -107,6 +107,14 @@ export function returnOptionsLabel(optionsType: optionsType, value: string | num
|
||||
const option = options.find((item) => item.value === value);
|
||||
return option ? option.label : "";
|
||||
}
|
||||
export function returnPayTypeOptionsLabel(optionsType: optionsType, value: string | number) {
|
||||
const options = returnOptions(optionsType).filter(v => v.value);
|
||||
if (!options) {
|
||||
return "";
|
||||
}
|
||||
const option = options.find((item) => item.value === value);
|
||||
return option ? option.label : "";
|
||||
}
|
||||
|
||||
|
||||
export interface options {
|
||||
|
||||
@@ -86,6 +86,14 @@ const contentConfig: IContentConfig = {
|
||||
prop: "payAmount",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
label: "支付方式",
|
||||
align: "center",
|
||||
prop: "payType",
|
||||
width: 120,
|
||||
templet: "custom",
|
||||
slotName: "payType",
|
||||
},
|
||||
{
|
||||
label: "订单金额 (扣除各类折扣)",
|
||||
align: "center",
|
||||
|
||||
@@ -2,19 +2,37 @@
|
||||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<!-- 搜索 -->
|
||||
<page-search ref="searchRef" :search-config="searchConfig" :isOpenAutoSearch="true" @query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick" />
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
:isOpenAutoSearch="true"
|
||||
@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">
|
||||
<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 #originAmount="scope">
|
||||
{{ returnOriginAmount(scope.row) }}
|
||||
</template>
|
||||
|
||||
<template #orderNo="scope">
|
||||
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
<el-tooltip class="box-item" effect="dark" :content="scope.row.orderNo" placement="top-start">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="scope.row.orderNo"
|
||||
placement="top-start"
|
||||
>
|
||||
{{ scope.row.orderNo }}
|
||||
</el-tooltip>
|
||||
</div>
|
||||
@@ -26,7 +44,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #goods="scope">
|
||||
<div class="goods_info">
|
||||
<!-- <div class="goods_info">
|
||||
<div v-for="item in scope.row.goods" :key="item.id" class="row">
|
||||
<el-image :src="item.productImg" class="cover" lazy />
|
||||
<div class="info">
|
||||
@@ -39,7 +57,8 @@
|
||||
<div class="sku">{{ item.skuName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<GoodsListCollapse :goods="scope.row.goods" />
|
||||
</template>
|
||||
<template #table="scope">
|
||||
<div>
|
||||
@@ -47,14 +66,14 @@
|
||||
名称:
|
||||
<el-tag type="primary">{{ scope.row.tableName || "无" }}</el-tag>
|
||||
</p>
|
||||
<p v-if="scope.row.tableCode">编号:{{ scope.row.tableCode }}</p>
|
||||
<!-- <p v-if="scope.row.tableCode">编号:{{ scope.row.tableCode }}</p> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 打印状态 -->
|
||||
<template #printStatus="scope">
|
||||
<span v-if="scope.row.printStatus.length > 0" style="color: var(--el-color-danger)">
|
||||
打印失败({{scope.row.printStatus.map(item => item.name).join('、')}})
|
||||
打印失败({{ scope.row.printStatus.map((item) => item.name).join("、") }})
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -68,14 +87,25 @@
|
||||
</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" />
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
<template #payType="scope">
|
||||
{{ returnPayTypeOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #operate="scope">
|
||||
<div>
|
||||
<el-button link @click="printOrderHandle(scope.row)">打印</el-button>
|
||||
<el-button link @click="showdetail(scope.row)">详情</el-button>
|
||||
<el-button v-if="scope.row.status == 'done'" link>开票</el-button>
|
||||
<el-button v-if="scope.row.status == 'unpaid'" type="primary" @click="toPayOrder(scope.row)">
|
||||
<!-- <el-button v-if="scope.row.status == 'done'" link>开票</el-button> -->
|
||||
<el-button
|
||||
v-if="scope.row.status == 'unpaid'"
|
||||
type="primary"
|
||||
@click="toPayOrder(scope.row)"
|
||||
>
|
||||
结账
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -91,7 +121,11 @@
|
||||
</page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
@@ -111,8 +145,8 @@ import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
|
||||
import { returnOptionsLabel, returnPayTypeOptionsLabel } from "./config/config";
|
||||
import GoodsListCollapse from "./components/GoodsListCollapse.vue";
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
@@ -161,7 +195,7 @@ async function printOrderHandle(order: getListResponse) {
|
||||
try {
|
||||
await orderApi.printOrder({
|
||||
id: order.id,
|
||||
type: 0
|
||||
type: 0,
|
||||
});
|
||||
ElMessage.success("打印成功");
|
||||
} catch (error) {
|
||||
@@ -370,7 +404,7 @@ function showdetail(row: OrderInfoVo) {
|
||||
left: 36%;
|
||||
padding: 18px;
|
||||
|
||||
>div:first-child {
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -381,7 +415,7 @@ function showdetail(row: OrderInfoVo) {
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
|
||||
>div:last-child {
|
||||
> div:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,11 @@
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #refundMode="scope">
|
||||
<!-- <el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="isRefundStockChange($event, scope)" /> -->
|
||||
<el-text>{{ returnLabel(scope.row[scope.prop]) }}</el-text>
|
||||
</template>
|
||||
<template #slotNameimage="scope">
|
||||
<el-image v-if="scope.row.pic" :src="scope.row.pic" lazy style="width: 40px; height: 40px" />
|
||||
<div v-else>无</div>
|
||||
@@ -28,20 +32,20 @@
|
||||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<addCategory ref="addCategoryRef" @success="handleQueryClick" />
|
||||
<!-- 新增 -->
|
||||
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
<!-- <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> -->
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||||
<!-- <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>
|
||||
</page-modal> -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
|
||||
@@ -67,6 +71,20 @@ import contentConfig2 from "./categoryconfig/content2";
|
||||
import editModalConfig from "./categoryconfig/edit";
|
||||
import searchConfig from "./categoryconfig/search";
|
||||
import { isSyncStatus, downloadFile } from "@/utils/index";
|
||||
import addCategory from "./components/addCategory.vue";
|
||||
|
||||
const addCategoryRef = ref(null)
|
||||
|
||||
const options = ref([
|
||||
{ label: "退菜退库存", value: 1 },
|
||||
{ label: "仅退菜不退库存", value: 2 },
|
||||
{ label: "每次询问-退菜后弹窗提示,可手动选择", value: 3 },
|
||||
])
|
||||
|
||||
function returnLabel(value: number) {
|
||||
const option = options.value.find((option) => option.value === value);
|
||||
return option ? option.label : "未知";
|
||||
}
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -106,9 +124,20 @@ async function handleExportClick() {
|
||||
}
|
||||
}
|
||||
|
||||
// 退菜是否退库存开关切换
|
||||
async function isRefundStockChange(e: any, scope: any) {
|
||||
try {
|
||||
await UserAPI.update(scope.row);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
ElMessage.error("操作失败");
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
addCategoryRef.value.open()
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// 加载部门下拉数据源
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
@@ -116,15 +145,16 @@ async function handleAddClick() {
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
// 加载部门下拉数据源
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// 根据id获取数据进行填充
|
||||
const data = await UserAPI.getunitinfo(row.id);
|
||||
editModalRef.value?.setFormData(data);
|
||||
editModalRef.value?.setModalVisible();
|
||||
addCategoryRef.value.open(row)
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// // 加载部门下拉数据源
|
||||
// // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// // 加载角色下拉数据源
|
||||
// // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// // 根据id获取数据进行填充
|
||||
// const data = await UserAPI.getunitinfo(row.id);
|
||||
// editModalRef.value?.setFormData(data);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
}
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
|
||||
@@ -10,7 +10,7 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 100,
|
||||
labelWidth: 120,
|
||||
},
|
||||
formAction: UserAPI.addunit,
|
||||
beforeSubmit(data) {
|
||||
@@ -31,6 +31,26 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
prop: "pic",
|
||||
type: "UpImage",
|
||||
},
|
||||
{
|
||||
label: '退菜是否退库存',
|
||||
prop: 'refundMode',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{ label: "退菜退库存", value: 1 },
|
||||
{ label: "仅退菜不退库存", value: 2 },
|
||||
{ label: "每次询问-退菜后弹窗提示,可手动选择", value: 3 },
|
||||
],
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "开关",
|
||||
prop: "status",
|
||||
@@ -44,15 +64,6 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
inactiveValue: 0,
|
||||
},
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
initialValue: 1,
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
@@ -77,6 +77,13 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
templet: "switch",
|
||||
slotName: "status",
|
||||
},
|
||||
{
|
||||
label: "退菜是否退库存",
|
||||
align: "center",
|
||||
prop: "refundMode",
|
||||
templet: "custom",
|
||||
slotName: "refundMode",
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
align: "center",
|
||||
|
||||
@@ -35,6 +35,26 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
prop: "pic",
|
||||
type: "UpImage",
|
||||
},
|
||||
{
|
||||
label: '退菜是否退库存',
|
||||
prop: 'refundMode',
|
||||
type: 'radio',
|
||||
options: [
|
||||
{ label: "退菜退库存", value: 1 },
|
||||
{ label: "仅退菜不退库存", value: 2 },
|
||||
{ label: "每次询问-退菜后弹窗提示,可手动选择", value: 3 },
|
||||
],
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "开关",
|
||||
prop: "status",
|
||||
@@ -48,15 +68,6 @@ const modalConfig: IModalConfig<UserForm> = {
|
||||
inactiveValue: 0,
|
||||
},
|
||||
initialValue: 1,
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
initialValue: 1,
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
100
src/views/product/components/addCategory.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '添加分类' : '编辑分类'" width="650px" v-model="visible" @close="closeHandle">
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-position="right" label-width="120px">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input placeholder="请输入分类名称" v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图片">
|
||||
<SingleImageUpload v-model="form.pic" />
|
||||
</el-form-item>
|
||||
<el-form-item label="退菜是否退库存">
|
||||
<el-radio-group v-model="form.refundMode">
|
||||
<el-radio label="退菜退库存" :value="1"></el-radio>
|
||||
<el-radio label="仅退菜不退库存" :value="2"></el-radio>
|
||||
<el-radio label="每次询问-退菜后弹窗提示" :value="3"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" :min="1" :step="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import UserAPI from "@/api/product/productclassification";
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const formRef = ref(null)
|
||||
const form = ref({
|
||||
id: '',
|
||||
name: '',
|
||||
pic: '',
|
||||
refundMode: 1, // 退菜是否退库存 1退菜退库存 2仅退菜不退库存 3每次询问-退菜后弹窗提示
|
||||
sort: 1,
|
||||
status: 1
|
||||
})
|
||||
const rules = ref({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入单位名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
function handleOk() {
|
||||
formRef.value.validate(async (valid) => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
if (form.value.id == '') {
|
||||
await UserAPI.addunit(form.value)
|
||||
} else {
|
||||
await UserAPI.update(form.value)
|
||||
}
|
||||
setTimeout(() => {
|
||||
visible.value = false
|
||||
ElMessage.success(form.value.id ? '添加成功' : '编辑成功')
|
||||
emit('success')
|
||||
}, 500);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeHandle() {
|
||||
form.value.name = ''
|
||||
}
|
||||
|
||||
function open(obj) {
|
||||
visible.value = true
|
||||
if (obj && obj.id) {
|
||||
form.value = _.cloneDeep(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
417
src/views/product/components/addSkuModal.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑模板' : '新增模板'" width="900px" v-model="visible" @close="onClose">
|
||||
<div class="form_wrap">
|
||||
<div class="form_left">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100" label-position="right">
|
||||
<el-form-item label="模板名称" prop="name">
|
||||
<el-input v-model="form.name" :maxlength="20" placeholder="如:主食、酒水、辣度、大小等"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<transition-group name="slide">
|
||||
<div class="sortable-parent" v-for="(item, index) in form.children" :key="item._id"
|
||||
:data-parent-index="index"> <!-- 修复Vue3绑定语法 -->
|
||||
<el-form-item label="规格名称">
|
||||
<div class="center">
|
||||
<el-input v-model="item.name" placeholder="如:口味、忌口、温度、分量等"></el-input>
|
||||
<el-icon v-if="index > 0" size="20" @click="form.children.splice(index, 1)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<transition-group name="fade" tag="div">
|
||||
<el-form-item label="规格值" v-for="(val, i) in item.children" :key="val._id" :data-child-index="i">
|
||||
<!-- 修复Vue3绑定语法 -->
|
||||
<div class="center">
|
||||
<div style="flex:1;">
|
||||
<el-input v-model="val.name" placeholder="如:五香、微辣、大份、小份等"></el-input>
|
||||
</div>
|
||||
<el-icon v-if="i > 0" size="20" @click="form.children[index].children.splice(i, 1)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</transition-group>
|
||||
|
||||
<el-form-item style="margin-top:-10px;">
|
||||
<el-button size="small" @click="addSpecValue(index)">添加规格值</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<el-form-item label-width="0">
|
||||
<div class="flex_end">
|
||||
<el-button type="primary" @click="addSpec">添加规格</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="form_right">
|
||||
<div class="preview_wrap">
|
||||
<div class="title_wrap">
|
||||
<el-text size="large">效果预览</el-text>
|
||||
<el-text size="small">可拖动排序</el-text>
|
||||
</div>
|
||||
|
||||
<div class="row_wrap" id="parent-sort">
|
||||
<!-- 修复index未定义 + 绑定语法错误 -->
|
||||
<div class="row" v-for="(item, index) in form.children" :key="item._id" :data-index="index">
|
||||
<div class="row_top">
|
||||
<el-text size="large">{{ item.name || '请输入规格名称' }}</el-text>
|
||||
<el-icon size="20" class="drag-handle">
|
||||
<Rank />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="row_content" v-if="item.children.length" :id="`child-sort-${item._id}`">
|
||||
<div class="tag" v-for="val in item.children" :key="val._id">
|
||||
<el-text>{{ val.name || '请输入规格值' }}</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag empty-tag" v-else>
|
||||
<el-text>请添加规格值</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Delete, Rank } from '@element-plus/icons-vue'
|
||||
import Sortable from 'sortablejs'
|
||||
import UserAPI from "@/api/product/specificationsconfig";
|
||||
|
||||
const generateId = () => {
|
||||
return Date.now() + '_' + Math.floor(Math.random() * 10000)
|
||||
}
|
||||
|
||||
const childrenObj = ref({
|
||||
_id: generateId(),
|
||||
name: '',
|
||||
children: [{ _id: generateId(), name: '' }]
|
||||
})
|
||||
|
||||
const formObj = {
|
||||
_id: '',
|
||||
name: '',
|
||||
children: [_.cloneDeep(childrenObj.value)]
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const formRef = ref(null)
|
||||
const form = ref(formObj)
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
function onClose() {
|
||||
form.value = _.cloneDeep(formObj)
|
||||
// if (parentSortable) parentSortable.destroy()
|
||||
// childSortableMap.forEach(s => s.destroy())
|
||||
// childSortableMap.clear()
|
||||
|
||||
// setTimeout(() => {
|
||||
// }, 50);
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
function addSpec() {
|
||||
form.value.children.push({
|
||||
_id: generateId(),
|
||||
name: '',
|
||||
children: [{ _id: generateId(), name: '' }]
|
||||
})
|
||||
}
|
||||
|
||||
function addSpecValue(parentIndex) {
|
||||
form.value.children[parentIndex].children.push({
|
||||
_id: generateId(),
|
||||
name: ''
|
||||
})
|
||||
}
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
function handleOk() {
|
||||
formRef.value.validate(async (valid) => {
|
||||
try {
|
||||
if (valid) {
|
||||
let flag = true
|
||||
let pIndex = 0
|
||||
let index = 0
|
||||
form.value.children.forEach((item, index) => {
|
||||
if (item.name == '') {
|
||||
flag = false
|
||||
pIndex = index
|
||||
return
|
||||
}
|
||||
item.children.forEach((val, i) => {
|
||||
if (val.name == '') {
|
||||
flag = false
|
||||
pIndex = index
|
||||
index = i
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (!flag) {
|
||||
ElMessage.error('请补全规格信息')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
console.log('最终提交数据:', form.value)
|
||||
|
||||
await UserAPI.quickAdd(form.value)
|
||||
ElMessage.success(form.value.id ? '编辑成功' : '添加成功')
|
||||
visible.value = false
|
||||
loading.value = false
|
||||
|
||||
emit('success')
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function open(obj) {
|
||||
visible.value = true
|
||||
if (obj && obj.id) {
|
||||
obj.children.forEach(item => {
|
||||
item._id = generateId()
|
||||
item.children.forEach(val => {
|
||||
val._id = generateId()
|
||||
})
|
||||
})
|
||||
form.value = _.cloneDeep(obj)
|
||||
console.log(form.value);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
let parentSortable = null
|
||||
const childSortableMap = new Map()
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initParentSort()
|
||||
initAllChildSort()
|
||||
})
|
||||
})
|
||||
|
||||
watch(() => form.value.children, () => {
|
||||
nextTick(() => {
|
||||
initParentSort()
|
||||
initAllChildSort()
|
||||
})
|
||||
}, { deep: true })
|
||||
|
||||
function initParentSort() {
|
||||
const el = document.getElementById('parent-sort')
|
||||
if (!el) return
|
||||
if (parentSortable) parentSortable.destroy()
|
||||
|
||||
parentSortable = Sortable.create(el, {
|
||||
handle: '.drag-handle', // 仅拖拽手柄生效
|
||||
animation: 200,
|
||||
ghostClass: 'sort-ghost', // 仅保留占位提示
|
||||
forceFallback: true,
|
||||
fallbackOnBody: false, // 禁用body上的克隆预览
|
||||
fallbackClone: false, // 禁用拖拽克隆元素(核心:移除跟随预览)
|
||||
// 移除dragClass,禁用拖拽预览样式
|
||||
onEnd(evt) {
|
||||
const { oldIndex, newIndex } = evt
|
||||
if (oldIndex === newIndex) return
|
||||
const moved = form.value.children.splice(oldIndex, 1)[0]
|
||||
form.value.children.splice(newIndex, 0, moved)
|
||||
nextTick(initAllChildSort)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initAllChildSort() {
|
||||
childSortableMap.forEach(s => s.destroy())
|
||||
childSortableMap.clear()
|
||||
|
||||
form.value.children.forEach(item => {
|
||||
const id = `child-sort-${item._id}`
|
||||
const el = document.getElementById(id)
|
||||
if (!el) return
|
||||
|
||||
const s = Sortable.create(el, {
|
||||
animation: 200,
|
||||
ghostClass: 'sort-ghost', // 仅保留占位提示
|
||||
direction: 'horizontal',
|
||||
forceFallback: true,
|
||||
fallbackOnBody: false, // 禁用body上的克隆预览
|
||||
fallbackClone: false, // 禁用拖拽克隆元素(核心)
|
||||
draggable: '.tag', // 仅tag可拖拽
|
||||
// 移除dragClass,禁用拖拽预览样式
|
||||
onEnd(evt) {
|
||||
const { oldIndex, newIndex } = evt
|
||||
if (oldIndex === newIndex) return
|
||||
const list = item.children
|
||||
const moved = list.splice(oldIndex, 1)[0]
|
||||
list.splice(newIndex, 0, moved)
|
||||
}
|
||||
})
|
||||
childSortableMap.set(id, s)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex_end {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sortable-parent {
|
||||
border: 1px solid #ececec;
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.form_wrap {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
.form_left {
|
||||
flex: 1;
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.preview_wrap {
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 4px;
|
||||
padding: 14px;
|
||||
|
||||
.title_wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.row_wrap {
|
||||
padding-top: 14px;
|
||||
|
||||
.row {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
|
||||
.row_top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: default;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row_content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 20px;
|
||||
border-radius: 4px;
|
||||
background: #e6e6e6;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tag {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// 仅保留占位提示样式(无跟随预览)
|
||||
:deep(.sort-ghost) {
|
||||
opacity: 0.4;
|
||||
background: #f5f5f5 !important;
|
||||
border: 1px dashed #409eff !important;
|
||||
}
|
||||
|
||||
// 移除所有拖拽预览相关样式
|
||||
:deep(.parent-dragging),
|
||||
:deep(.child-dragging) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.slide-move-active,
|
||||
.fade-move-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
80
src/views/product/components/addUnit.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '添加单位' : '编辑单位'" width="500px" v-model="visible" @close="closeHandle">
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-position="right" label-width="80px">
|
||||
<el-form-item label="单位名称" prop="name">
|
||||
<el-input placeholder="请输入单位名称" v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import UserAPI from "@/api/product/commonUnits";
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const formRef = ref(null)
|
||||
const form = ref({
|
||||
id: '',
|
||||
name: ''
|
||||
})
|
||||
const rules = ref({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入单位名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
function handleOk() {
|
||||
formRef.value.validate(async (valid) => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
if (form.value.id == '') {
|
||||
await UserAPI.addunit(form.value)
|
||||
} else {
|
||||
await UserAPI.update(form.value)
|
||||
}
|
||||
setTimeout(() => {
|
||||
visible.value = false
|
||||
ElMessage.success(form.value.id ? '添加成功' : '编辑成功')
|
||||
emit('success')
|
||||
}, 500);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeHandle() {
|
||||
form.value.name = ''
|
||||
}
|
||||
|
||||
function open(obj) {
|
||||
visible.value = true
|
||||
if (obj && obj.id) {
|
||||
form.value = _.cloneDeep(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
@@ -5,16 +5,26 @@
|
||||
<page-search ref="searchRef" :search-config="searchConfig" @query-click="newHandleQueryClick"
|
||||
@reset-click="handleResetClick2" />
|
||||
<!-- 顶部数据 -->
|
||||
<Statistics :data="gongjiData"></Statistics>
|
||||
<!-- <Statistics :data="gongjiData"></Statistics> -->
|
||||
<!-- 列表 -->
|
||||
<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">
|
||||
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange"
|
||||
@selectChange="handleSelectionChange">
|
||||
<!-- <template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template> -->
|
||||
<template #custom>
|
||||
<importData :type="3" @close="newHandleQueryClick" />
|
||||
<el-select :disabled="batchOperationSelectRows.length == 0"
|
||||
:placeholder="`批量操作${batchOperationSelectRows.length == 0 ? '(请选择商品后操作)' : ''}`" v-model="batchOperationValue"
|
||||
style="width: 240px;margin-left: 16px;">
|
||||
<el-option v-for="item in batchOperationList" :key="item.id" :value="item.id" :label="item.lable"
|
||||
@click="batchOperationChange(item.id)"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #type="scope">
|
||||
{{ typeFilter(scope.row[scope.prop]) }}
|
||||
</template>
|
||||
@@ -26,7 +36,8 @@
|
||||
@click="handleSwitchChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
<template #isStock="scope">
|
||||
<el-switch disabled v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<el-switch v-if="!scope.row.productId" v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
:disabled="!scope.row.type" @click="isStockChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
|
||||
<template #kucunedit="scope">
|
||||
@@ -41,11 +52,16 @@
|
||||
<template #tuikuantuihui="scope">
|
||||
<el-switch v-if="!scope.row.productId" v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchhaocai(scope.row)"></el-switch>
|
||||
<!-- <el-text>{{ returnLabel(scope.row[scope.prop]) }}</el-text> -->
|
||||
</template>
|
||||
<template #sellOut="scope">
|
||||
<el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchChangeTwo(scope.row)"></el-switch>
|
||||
</template>
|
||||
<template #autoSellOut="scope">
|
||||
<el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchChangeTwo2($event, scope.row)"></el-switch>
|
||||
</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" />
|
||||
@@ -92,7 +108,7 @@
|
||||
<el-input-number v-model="datas.number" :min="1" label="描述文字"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="报损照片" label-width="">
|
||||
<MultiImageUpload v-model="datas.images" />
|
||||
<MultiImageUpload v-model="datas.imgUrls" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" label-width="">
|
||||
<el-input v-model="datas.remark" type="textarea" />
|
||||
@@ -100,7 +116,7 @@
|
||||
</el-form>
|
||||
</MyDialog>
|
||||
<!-- 耗材绑定 -->
|
||||
<MyDialog ref="myDialogRefhaocai" @confirm="confirmhaocai" width="50%" title="耗材绑定">
|
||||
<MyDialog ref="myDialogRefhaocai" @confirm="confirmhaocai" width="60%" title="耗材绑定">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品名">
|
||||
@@ -118,9 +134,10 @@
|
||||
<el-table-column label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column label="耗材名称" prop="consInfoId">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
|
||||
<el-select filterable v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
|
||||
@change="selectionChange($event, scope.row)">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.conName" :value="item.id"></el-option>
|
||||
<el-option v-for="item in options" :key="item.id * 1" :label="item.conName"
|
||||
:value="item.id * 1"></el-option>
|
||||
</el-select>
|
||||
<!-- <div class="tips" v-if="scope.row.stockNumber">库存:{{ scope.row.stockNumber }}</div> -->
|
||||
</template>
|
||||
@@ -166,11 +183,45 @@
|
||||
<MyDialog ref="myDialogRefkucun" @confirm="confirmkucun" width="30%" title="库存修改">
|
||||
<el-input-number v-model="kucundata.stockNumbers" :min="0" />
|
||||
</MyDialog>
|
||||
<!-- 报损记录 -->
|
||||
<MyDialog ref="myDialogRefRecord" :title="dataAll.dataTitle" width="70%" @confirm="myDialogRefRecord.close()">
|
||||
<!-- 表格 -->
|
||||
<Table :list="dataAll.tableData"
|
||||
v-if="dataAll.dataType == 'inSumTotal' || dataAll.dataType == 'winInNum' || dataAll.dataType == 'outSumTotal' || dataAll.dataType == 'lossOutNum'">
|
||||
</Table>
|
||||
<TableTwo :list="dataAll.tableData" v-else-if="dataAll.dataType == 'refundInNum'"></TableTwo>
|
||||
<TableThree :list="dataAll.tableData" v-else-if="dataAll.dataType == 'salesNum'"></TableThree>
|
||||
|
||||
<TableFour :list="dataAll.tableData" v-else-if="dataAll.dataType == 'damageNum'"></TableFour>
|
||||
<!-- 分页 -->
|
||||
<Paging :pagingConfig="dataAll.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
|
||||
</MyDialog>
|
||||
<!-- 批量操作更改分类弹窗 -->
|
||||
<el-dialog title="更改分类" width="400px" v-model="visibleBatchOperation" @close="bateOperationForm.categoryId = ''">
|
||||
<el-form ref="bateOperationFormRef" :model="bateOperationForm" :rules="bateOperationFormRules"
|
||||
label-position="right" label-width="120">
|
||||
<el-form-item label="请选择分类" prop="categoryId">
|
||||
<el-select v-model="bateOperationForm.categoryId" placeholder="请选择">
|
||||
<el-option v-for="item in batchOperationCategorys" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleBatchOperation = false">取 消</el-button>
|
||||
<el-button type="primary" @click="batchOperationCategoryConfirm" :loading="batchOperationLoading">确
|
||||
定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import importData from "@/components/importData/index.vue";
|
||||
import UserAPI from "@/api/product/index";
|
||||
import CategoryAPI from '@/api/product/productclassification'
|
||||
import { useRouter } from "vue-router";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
@@ -183,6 +234,91 @@ import editModalConfig from "./indexconfig/edit";
|
||||
import searchConfig from "./indexconfig/search";
|
||||
import MyDialog from "@/components/mycomponents/myDialog.vue";
|
||||
import Statistics from "./indexconfig/statistics.vue";
|
||||
import TableFour from './indexconfig/TableFour.vue'
|
||||
|
||||
const myDialogRefRecord = ref(null)
|
||||
|
||||
const refoundModeOptions = ref([
|
||||
{ label: "退菜退库存", value: 1 },
|
||||
{ label: "仅退菜不退库存", value: 2 },
|
||||
{ label: "每次询问-退菜后弹窗提示,可手动选择", value: 3 },
|
||||
])
|
||||
|
||||
function returnLabel(value: number) {
|
||||
const option = refoundModeOptions.value.find((option) => option.value == value);
|
||||
return option ? option.label : "未知";
|
||||
}
|
||||
|
||||
let dataAll = reactive({
|
||||
dataList: [],
|
||||
tableData: [],
|
||||
pagingConfig: {
|
||||
total: 0, // 总数
|
||||
pageSize: 10, // 每页数据数量
|
||||
pageNumber: 1, // 当前页码
|
||||
},
|
||||
dataType: "",
|
||||
dataTitle: ""
|
||||
});
|
||||
|
||||
function sizeChange(val) {
|
||||
dataAll.pagingConfig.pageSize = val
|
||||
clickEvent(dataAll.dataType)
|
||||
}
|
||||
function currentChange(val) {
|
||||
dataAll.pagingConfig.pageNumber = val
|
||||
clickEvent(dataAll.dataType)
|
||||
}
|
||||
|
||||
async function clickEvent(key) {
|
||||
dataAll.dataType = key
|
||||
let obj = {}
|
||||
switch (key) {
|
||||
case 'inSumTotal':
|
||||
dataAll.dataTitle = '增加数据统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "" }
|
||||
break;
|
||||
case 'winInNum':
|
||||
dataAll.dataTitle = '手动增加统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "win-in" }
|
||||
break;
|
||||
case 'refundInNum':
|
||||
dataAll.dataTitle = '退货统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "in", inOutItem: "order-in" }
|
||||
break;
|
||||
case 'outSumTotal':
|
||||
dataAll.dataTitle = '减少数量统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "" }
|
||||
break;
|
||||
case 'lossOutNum':
|
||||
dataAll.dataTitle = '手动减少统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "loss-out" }
|
||||
break;
|
||||
case 'salesNum':
|
||||
dataAll.dataTitle = '销量统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: "", inOutType: "out", inOutItem: "order-out" }
|
||||
break;
|
||||
case 'damageNum':
|
||||
dataAll.dataTitle = '报损统计'
|
||||
obj = { page: dataAll.pagingConfig.pageNumber, size: dataAll.pagingConfig.pageSize, productId: datas.productId, inOutType: "out", inOutItem: "damage-out" }
|
||||
break;
|
||||
}
|
||||
dataAll.tableData = []
|
||||
|
||||
let res = await UserAPI.stockFlow(obj);
|
||||
dataAll.tableData = res.records
|
||||
dataAll.tableData.forEach((item, index) => {
|
||||
if (item.imgUrls.length > 7) {
|
||||
item.imagesone = JSON.parse(item.imgUrls)[0]
|
||||
}
|
||||
})
|
||||
dataAll.pagingConfig.total = res.totalRow
|
||||
dataAll.pagingConfig.pageSize = res.pageSize
|
||||
dataAll.pagingConfig.pageNumber = res.pageNumber
|
||||
myDialogRefRecord.value.open()
|
||||
}
|
||||
|
||||
const importDataRef = ref(null);
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -227,7 +363,7 @@ const form = reactive({
|
||||
let datas = reactive({
|
||||
number: 0,
|
||||
remark: "",
|
||||
images: [],
|
||||
imgUrls: [],
|
||||
productId: null, // Added productId property
|
||||
});
|
||||
|
||||
@@ -249,8 +385,8 @@ onMounted(async () => {
|
||||
// 获取耗材列表
|
||||
gethaocaiList();
|
||||
|
||||
const res = await UserAPI.getPage()
|
||||
form.warnLine = res.warnLine || ''
|
||||
const res = await UserAPI.getPage();
|
||||
form.warnLine = res.warnLine || "";
|
||||
// console.log('contentRef.value===', res);
|
||||
});
|
||||
|
||||
@@ -302,6 +438,11 @@ function getTongji(params: IObject | undefined) {
|
||||
});
|
||||
}
|
||||
|
||||
// 显示批量导入
|
||||
function handleUploadClick() {
|
||||
importDataRef.value.show();
|
||||
}
|
||||
|
||||
// 导出商品
|
||||
async function handleExportClick() {
|
||||
try {
|
||||
@@ -331,13 +472,25 @@ function createItem(val: IObject) {
|
||||
haocaiData.value.consList.push(item);
|
||||
}
|
||||
// 上架
|
||||
function handleSwitchChange(data: any) {
|
||||
async function handleSwitchChange(data: any) {
|
||||
console.log(data);
|
||||
let obj = {
|
||||
type: data.productId ? "sku" : "product",
|
||||
id: data.id,
|
||||
isSale: data.isSale,
|
||||
};
|
||||
UserAPI.onOff(obj);
|
||||
await UserAPI.onOff(obj);
|
||||
ElMessage.success("修改成功!");
|
||||
|
||||
if (data.productId) {
|
||||
//sku
|
||||
contentRef.value?.fetchPageData();
|
||||
} else {
|
||||
//product
|
||||
data.skuList.map((v) => {
|
||||
v.isSale = data.isSale;
|
||||
});
|
||||
}
|
||||
}
|
||||
// 售罄
|
||||
function handleSwitchChangeTwo(data: any) {
|
||||
@@ -347,7 +500,18 @@ function handleSwitchChangeTwo(data: any) {
|
||||
isSoldOut: data.isSoldStock,
|
||||
};
|
||||
UserAPI.markIsSoldOut(obj);
|
||||
ElMessage.success("修改成功!");
|
||||
}
|
||||
|
||||
// 自动售罄
|
||||
function handleSwitchChangeTwo2(e: any, data: any) {
|
||||
UserAPI.markIsAutoSoldOut({
|
||||
id: data.id,
|
||||
isAutoSoldStock: data.isAutoSoldStock
|
||||
});
|
||||
ElMessage.success("修改成功!");
|
||||
}
|
||||
|
||||
function handleSwitchChangethree(data: any) {
|
||||
let obj = {
|
||||
type: data.type == "sku" ? "sku" : "product",
|
||||
@@ -357,6 +521,18 @@ function handleSwitchChangethree(data: any) {
|
||||
UserAPI.markIsSoldOut(obj);
|
||||
}
|
||||
|
||||
async function isStockChange(data: any) {
|
||||
console.log(data);
|
||||
let obj = {
|
||||
type: "product",
|
||||
id: data.id,
|
||||
isSale: data.isStock,
|
||||
optType: "stock",
|
||||
};
|
||||
await UserAPI.onOff(obj);
|
||||
ElMessage.success("修改成功!");
|
||||
return;
|
||||
}
|
||||
// 退款退回
|
||||
async function handleSwitchhaocai(row: IObject) {
|
||||
let res = await UserAPI.refundToStock({ isReturn: row.isRefundStock, id: row.id });
|
||||
@@ -386,6 +562,9 @@ async function handleToolbarClick(name: string) {
|
||||
let res = await UserAPI.sync();
|
||||
ElMessage.success("操作成功,数据正在后台同步中...");
|
||||
}
|
||||
if (name === "upload") {
|
||||
importDataRef.value.show();
|
||||
}
|
||||
}
|
||||
async function confirm() {
|
||||
let res = await UserAPI.stockWarning(form.warnLine);
|
||||
@@ -409,10 +588,22 @@ async function confirmhaocai() {
|
||||
consList: haocaiData.value.consList,
|
||||
id: haocaiData.value.id,
|
||||
};
|
||||
let res = await UserAPI.bind(obj);
|
||||
ElMessage.success("成功");
|
||||
handleResetClick();
|
||||
myDialogRefhaocai.value.close();
|
||||
|
||||
let flag = true
|
||||
obj.consList.forEach((el: any) => {
|
||||
if (el.consInfoId == '') {
|
||||
flag = false
|
||||
}
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
let res = await UserAPI.bind(obj);
|
||||
ElMessage.success("成功");
|
||||
handleResetClick();
|
||||
myDialogRefhaocai.value.close();
|
||||
} else {
|
||||
ElMessage.error("请选择耗材");
|
||||
}
|
||||
}
|
||||
// 商品规格
|
||||
function typeFilter(item: any) {
|
||||
@@ -430,17 +621,166 @@ function typeFilter(item: any) {
|
||||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
console.log(data);
|
||||
datas.productId = data.row.id;
|
||||
myDialogRefbaosun.value.open();
|
||||
datas.number = 1;
|
||||
datas.remark = "";
|
||||
switch (data.name) {
|
||||
case 'cons':
|
||||
myDialogRefbaosun.value.open();
|
||||
datas.number = 1;
|
||||
datas.remark = "";
|
||||
break;
|
||||
case 'consRecord':
|
||||
clickEvent('damageNum')
|
||||
// myDialogRefRecord.value.open()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function gethaocaiList() {
|
||||
let res = await UserAPI.productcons({ id: route.query.id });
|
||||
options.value = res.records;
|
||||
let res = await UserAPI.productconsList({ id: route.query.id });
|
||||
options.value = res || [];
|
||||
}
|
||||
|
||||
const batchOperationList = ref([
|
||||
{
|
||||
id: 1,
|
||||
value: '1',
|
||||
type: 'isSale',
|
||||
lable: '批量上架'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: '0',
|
||||
type: 'isSale',
|
||||
lable: '批量下架'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'category',
|
||||
lable: '批量更改商品分类'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: '1',
|
||||
type: 'is_sold_stock',
|
||||
lable: '批量售罄'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: '0',
|
||||
type: 'is_sold_stock',
|
||||
lable: '批量取消售罄'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: '1',
|
||||
type: 'isAutoSoldStock',
|
||||
lable: '批量自动售罄'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: '0',
|
||||
type: 'isAutoSoldStock',
|
||||
lable: '批量取消自动售罄'
|
||||
},
|
||||
])
|
||||
|
||||
function handleSelectionChange(rows) {
|
||||
// console.log('handleSelectionChange', rows);
|
||||
batchOperationSelectRows.value = rows
|
||||
}
|
||||
|
||||
// 选择批量操作项目
|
||||
const batchOperationValue = ref('')
|
||||
const batchOperationSelectItem = ref('')
|
||||
const batchOperationSelectRows = ref([])
|
||||
function batchOperationChange(e: any) {
|
||||
if (batchOperationSelectRows.value.length == 0) {
|
||||
ElMessage.error('请选择商品')
|
||||
return
|
||||
}
|
||||
batchOperationSelectItem.value = batchOperationList.value.find(item => item.id == e)
|
||||
if (batchOperationSelectItem.value.type == 'category') {
|
||||
visibleBatchOperation.value = true
|
||||
} else {
|
||||
ElMessageBox.confirm(`是否确认对勾选商品执行「${batchOperationSelectItem.value.lable}」操作,操作不可撤销`, '提示').then(() => {
|
||||
batchOperationConfirm()
|
||||
}).catch(() => { })
|
||||
}
|
||||
}
|
||||
|
||||
// 确认最后的操作
|
||||
async function batchOperationConfirm() {
|
||||
try {
|
||||
const ids = batchOperationSelectRows.value.map(item => item.id)
|
||||
let value = ''
|
||||
if (batchOperationSelectItem.value.type == 'category') {
|
||||
value = bateOperationForm.value.categoryId
|
||||
} else {
|
||||
value = batchOperationSelectItem.value.value
|
||||
}
|
||||
await UserAPI.batchOperate({
|
||||
ids: ids.join(','), // 商品id集合
|
||||
type: batchOperationSelectItem.value.type, // 操作类型
|
||||
value: value, // 操作之,除分类外取value
|
||||
})
|
||||
newHandleQueryClick()
|
||||
ElMessage.success('操作成功')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const batchOperationCategorys = ref([])
|
||||
const visibleBatchOperation = ref(false)
|
||||
const batchOperationLoading = ref(false)
|
||||
const bateOperationFormRef = ref(null)
|
||||
const bateOperationForm = ref({
|
||||
categoryId: ''
|
||||
})
|
||||
const bateOperationFormRules = ref({
|
||||
categoryId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择分类',
|
||||
blur: 'trigger'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 批量操作更改分类
|
||||
function batchOperationCategoryConfirm() {
|
||||
bateOperationFormRef.value.validate(async vaild => {
|
||||
if (vaild) {
|
||||
batchOperationLoading.value = true
|
||||
await batchOperationConfirm()
|
||||
batchOperationLoading.value = false
|
||||
visibleBatchOperation.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取商品分类
|
||||
async function getCategorys() {
|
||||
try {
|
||||
batchOperationCategorys.value = await CategoryAPI.getList()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCategorys()
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
/* 关键:隐藏子行的选择框 */
|
||||
.el-table__row--level-1 .el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.table_btn_wrap {
|
||||
display: flex;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div style="margin-top: 10px;">
|
||||
<el-table :data="props.list" border style="">
|
||||
<el-table-column prop="productName" align="center" label="商品名称/规格名称" />
|
||||
<el-table-column prop="beforeNumber" align="center" label="原库存" />
|
||||
<el-table-column prop="afterNumber" align="center" label="变动后库存" />
|
||||
<!-- <el-table-column prop="beforeNumber" align="center" label="原库存" />
|
||||
<el-table-column prop="afterNumber" align="center" label="变动后库存" /> -->
|
||||
<el-table-column prop="inOutNumber" align="center" label="报损数量" />
|
||||
<el-table-column prop="createUserName" align="center" label="报损人" />
|
||||
<el-table-column prop="remark" align="center" label="备注" />
|
||||
|
||||
@@ -1,185 +1,201 @@
|
||||
<template>
|
||||
<div class="addgoods">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
|
||||
<el-form-item label="商品名称" required>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品介绍">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" required>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="unitId">
|
||||
<el-select v-model="ruleForm.unitId" placeholder="请选择单位" :disabled="isSyncStatus()">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" required>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="region">
|
||||
<el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类" :disabled="isSyncStatus()">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="商品图片" required prop="images">
|
||||
<MultiImageUpload v-model="ruleForm.images" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="商品图片" required prop="images">
|
||||
<div style="display: flex; flex-wrap: wrap">
|
||||
<div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
|
||||
<el-icon class="buttonstyle" @click="deleteEvent(item)">
|
||||
<DeleteFilled />
|
||||
</el-icon>
|
||||
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
|
||||
</div>
|
||||
<div class="upImgStyle" @click="addimgEvent">+</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="tips">注:第一张图为商品封面图,图片尺寸为750×750</div>
|
||||
</el-form-item>
|
||||
<!-- 选择图片 -->
|
||||
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
|
||||
|
||||
<el-form-item label="商品类型">
|
||||
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)" :disabled="isSyncStatus()">
|
||||
<el-radio value="single">单规格商品</el-radio>
|
||||
<el-radio value="sku">多规格商品</el-radio>
|
||||
<el-radio value="package">套餐商品</el-radio>
|
||||
<el-radio value="weight">称重商品</el-radio>
|
||||
<!-- <el-radio label="coupon">团购券</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
|
||||
<div style="display: block; width: 100%">
|
||||
<div class="head-container">
|
||||
<el-radio-group v-model="ruleForm.groupType" @change="typeChange">
|
||||
<el-radio-button :label="0">固定套餐</el-radio-button>
|
||||
<el-radio-button :label="1">可选套餐</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="ruleForm.groupType == 0">
|
||||
<el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
|
||||
<el-table-column label="名称" prop="proName"></el-table-column>
|
||||
<el-table-column label="规格" prop="skuName"></el-table-column>
|
||||
<el-table-column label="价格" prop="price"></el-table-column>
|
||||
<el-table-column label="数量" prop="number">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.number" :min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150">
|
||||
<template #header>
|
||||
<el-button type="primary" @click="addgoods(-1)" :disabled="isSyncStatus()">
|
||||
添加商品
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
|
||||
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
|
||||
<el-button type="text"
|
||||
@click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="ruleForm.groupType == 1">
|
||||
<div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
|
||||
<el-form inline :model="item">
|
||||
<el-form-item label="规格组名">
|
||||
<el-input v-model="item.title" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`本组菜品${item.goods.length}选`">
|
||||
<el-input v-model="item.number" :disabled="isSyncStatus()" />
|
||||
<div class="form_wrap">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
|
||||
<el-steps :active="stepsActiveName" finish-status="success" simple>
|
||||
<el-step title="基础信息" />
|
||||
<el-step title="耗材设置/关联推荐商品" />
|
||||
</el-steps>
|
||||
<div style="padding-top: 20px;">
|
||||
<!-- 基础信息 -->
|
||||
<div v-show="stepsActiveName == 0">
|
||||
<el-form-item label="商品名称" required>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="请输入商品名称" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品介绍">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button @click="ruleForm.proGroupVo.splice(index, 1)" :disabled="isSyncStatus()">
|
||||
删除
|
||||
</el-button>
|
||||
<el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍"
|
||||
:disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-top: 20px">
|
||||
<el-table border :data="item.goods">
|
||||
<el-table-column label="名称" prop="proName"></el-table-column>
|
||||
<el-table-column label="规格" prop="skuName"></el-table-column>
|
||||
<el-table-column label="价格" prop="price"></el-table-column>
|
||||
<el-table-column label="数量" prop="number">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.number" :min="0" :disabled="isSyncStatus()" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150">
|
||||
<template #header>
|
||||
<el-button type="primary" @click="addgoods(index)" :disabled="isSyncStatus()">
|
||||
添加商品
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
|
||||
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
|
||||
<el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)"
|
||||
:disabled="isSyncStatus()">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" required prop="unitId">
|
||||
<el-select v-model="ruleForm.unitId" placeholder="请选择单位" :disabled="isSyncStatus()" style="width: 330px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
|
||||
</el-select>
|
||||
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
|
||||
@click="addUnitRef.open()">添加单位</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" required prop="categoryId">
|
||||
<el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类" :disabled="isSyncStatus()"
|
||||
style="width: 330px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
|
||||
</el-select>
|
||||
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
|
||||
@click="addCategoryRef.open()">添加分类</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分组">
|
||||
<el-select v-model="ruleForm.proGroupIds" multiple placeholder="请选择商品分组" style="width: 330px;">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in goodsGroupList" :key="item.id" />
|
||||
</el-select>
|
||||
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
|
||||
@click="addGoodsGroupRef.open()">添加分组</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="商品图片" required prop="images">
|
||||
<MultiImageUpload v-model="ruleForm.images" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="商品图片" required prop="images">
|
||||
<div style="display: flex; flex-wrap: wrap">
|
||||
<div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
|
||||
<el-icon class="buttonstyle" @click="deleteEvent(item)">
|
||||
<DeleteFilled />
|
||||
</el-icon>
|
||||
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
|
||||
</div>
|
||||
<div class="upImgStyle" @click="addimgEvent">+</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="addtaocan" :disabled="isSyncStatus()">
|
||||
添加套餐组
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
|
||||
<el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle"
|
||||
:disabled="isSyncStatus()">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
|
||||
:key="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
|
||||
:key="ele.name">
|
||||
<el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
|
||||
<el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
|
||||
:key="index"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<!-- 规格属性 -->
|
||||
<!-- 单规格、称重 -->
|
||||
<SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
|
||||
ref="specificationAttributeRef">
|
||||
</SpecificationAttribute>
|
||||
<SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length" :specTableHeaders="datas.specTableHeaders"
|
||||
:info="ruleForm" :list="list" ref="specificationAttributeRef"></SpecificationAttribute>
|
||||
<el-form-item label="重量">
|
||||
<el-col :span="12">
|
||||
<div style="display: block">
|
||||
<el-input v-model="ruleForm.weight" placeholder="" :disabled="isSyncStatus()">
|
||||
<template #append>千克</template>
|
||||
</el-input>
|
||||
<!-- <div style="color: #999;">用于快递或配送运费计重</div> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否允许临时改价">
|
||||
<el-radio-group v-model="ruleForm.isAllowTempModifyPrice" :disabled="isSyncStatus()">
|
||||
<el-radio :value="1">允许</el-radio>
|
||||
<el-radio :value="0">不允许</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="每日销量上限">
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="tips">注:第一张图为商品封面图,图片尺寸为750×750</div>
|
||||
</el-form-item>
|
||||
<!-- 选择图片 -->
|
||||
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
|
||||
<el-form-item label="商品类型">
|
||||
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)"
|
||||
:disabled="isSyncStatus()">
|
||||
<el-radio value="single">单规格商品</el-radio>
|
||||
<el-radio value="sku">多规格商品</el-radio>
|
||||
<el-radio value="package">套餐商品</el-radio>
|
||||
<el-radio value="weight">称重商品</el-radio>
|
||||
<!-- <el-radio label="coupon">团购券</el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
|
||||
<div style="display: block; width: 100%">
|
||||
<div class="head-container">
|
||||
<el-radio-group v-model="ruleForm.groupType" @change="typeChange">
|
||||
<el-radio-button :label="0">固定套餐</el-radio-button>
|
||||
<el-radio-button :label="1">可选套餐</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="ruleForm.groupType == 0">
|
||||
<el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
|
||||
<el-table-column label="名称" prop="proName"></el-table-column>
|
||||
<el-table-column label="规格" prop="skuName"></el-table-column>
|
||||
<el-table-column label="价格" prop="price"></el-table-column>
|
||||
<el-table-column label="数量" prop="number">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.number" :min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150">
|
||||
<template #header>
|
||||
<el-button type="primary" @click="addgoods(-1)" :disabled="isSyncStatus()">
|
||||
添加商品
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
|
||||
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
|
||||
<el-button type="text"
|
||||
@click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="ruleForm.groupType == 1">
|
||||
<div class="group_wrap" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
|
||||
<el-form inline :model="item">
|
||||
<el-form-item label="规格组名">
|
||||
<el-input v-model="item.title" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="`本组菜品${item.goods.length}选`">
|
||||
<el-input v-model="item.number" :disabled="isSyncStatus()" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="ruleForm.proGroupVo.splice(index, 1)" :disabled="isSyncStatus()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-top: 20px">
|
||||
<el-table border :data="item.goods">
|
||||
<el-table-column label="名称" prop="proName"></el-table-column>
|
||||
<el-table-column label="规格" prop="skuName"></el-table-column>
|
||||
<el-table-column label="价格" prop="price"></el-table-column>
|
||||
<el-table-column label="数量" prop="number">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.number" :min="0" :disabled="isSyncStatus()" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="150">
|
||||
<template #header>
|
||||
<el-button type="primary" @click="addgoods(index)" :disabled="isSyncStatus()">
|
||||
添加商品
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" :disabled="scope.row.type != 'sku' && isSyncStatus()"
|
||||
@click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
|
||||
<el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)"
|
||||
:disabled="isSyncStatus()">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="addtaocan" :disabled="isSyncStatus()">
|
||||
添加套餐组
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
|
||||
<div class="center">
|
||||
<el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle"
|
||||
:disabled="isSyncStatus()">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
|
||||
:key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="Plus" style="margin-left: 14px;"
|
||||
@click="addSkuModalRef?.open()">添加规格</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
|
||||
:key="ele.name">
|
||||
<el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
|
||||
<el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
|
||||
:key="index"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<!-- 规格属性 -->
|
||||
<!-- 单规格、称重 -->
|
||||
<SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
|
||||
ref="specificationAttributeRef">
|
||||
</SpecificationAttribute>
|
||||
<SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length"
|
||||
:specTableHeaders="datas.specTableHeaders" :info="ruleForm" :list="list" ref="specificationAttributeRef">
|
||||
</SpecificationAttribute>
|
||||
<el-form-item label="重量" v-if="ruleForm.type == 'weight'">
|
||||
<el-col :span="12">
|
||||
<div style="display: block">
|
||||
<el-input v-model="ruleForm.weight" placeholder="纯文本描述"></el-input>
|
||||
<!-- <div style="color: #999;">用于快递或配送运费计重</div> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否允许临时改价">
|
||||
<el-radio-group v-model="ruleForm.isAllowTempModifyPrice" :disabled="isSyncStatus()">
|
||||
<el-radio :value="1">允许</el-radio>
|
||||
<el-radio :value="0">不允许</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="每日销量上限">
|
||||
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="每单限购">
|
||||
@@ -188,90 +204,182 @@
|
||||
<el-form-item label="每人限购">
|
||||
<el-input-number v-model="ruleForm.dayLimit" :min="0" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="定时上下架">
|
||||
<el-checkbox-group v-model="ruleForm.days">
|
||||
<el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-col :span="20">
|
||||
<!-- <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
|
||||
<el-form-item label="售卖时间">
|
||||
<el-checkbox-group v-model="ruleForm.days">
|
||||
<el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-col :span="20">
|
||||
<!-- <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="HH:mm:ss" format="HH:mm:ss" />
|
||||
-->
|
||||
|
||||
<el-time-picker v-model="ruleForm.startTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择开始时间">
|
||||
</el-time-picker>-
|
||||
<el-time-picker v-model="ruleForm.endTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择结束时间">
|
||||
</el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架">
|
||||
<el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存开关">
|
||||
<div style="display: block;">
|
||||
<el-switch v-model="ruleForm.isStock" :active-value="1" :inactive-value="0" :disabled="isSyncStatus()" />
|
||||
<div style="color: #999;">注:关闭则不计算出库数据</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="设为推荐" prop="delivery">
|
||||
<el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量">
|
||||
<el-input-number v-model="ruleForm.stockNumber" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="打包费" prop="delivery">
|
||||
<div style="display: block;">
|
||||
<el-input-number v-model="ruleForm.packFee" controls-position="right"
|
||||
:disabled="isSyncStatus()"></el-input-number>
|
||||
<div style="color: #999;">单份商品打包费。注:店铺开启外卖模式下该数据才生效</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联推荐商品">
|
||||
<div class="column">
|
||||
<div class="row">
|
||||
<div class="center">
|
||||
<el-button type="primary" @click="selecProductDialogRef?.show()"
|
||||
:disabled="ruleForm.relatedRecommendJson.length >= goodsListMax">添加商品</el-button>
|
||||
<div class="tips">设置商品后,用户可以在商品详情页中看到推荐商品可拖动调整顺序,最多设置{{ goodsListMax }}个商品</div>
|
||||
</div>
|
||||
<el-time-picker v-model="ruleForm.startTime" value-format="HH:mm:ss" format="HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-time-picker> <el-text type="info">-</el-text> <el-time-picker v-model="ruleForm.endTime"
|
||||
value-format="HH:mm:ss" format="HH:mm:ss" placeholder="选择结束时间">
|
||||
</el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架">
|
||||
<el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="库存开关">
|
||||
<div style="display: block;">
|
||||
<el-switch v-model="ruleForm.isStock" :active-value="1" :inactive-value="0" :disabled="isSyncStatus()" />
|
||||
<div style="color: #999;">注:关闭则不计算出库数据</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="goods_table_drag">
|
||||
<el-table :data="ruleForm.relatedRecommendJson" border stripe style="width: 500px;" row-key="id">
|
||||
<!-- 拖拽列 -->
|
||||
<el-table-column label="排序" width="60">
|
||||
<template v-slot="scope">
|
||||
<div class="drag-handle">☰</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片" prop="coverImg" width="90">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.coverImg" style="width: 50px;height: 50px;border-radius: 4px;"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" prop="name"></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button link type="danger"
|
||||
@click="ruleForm.relatedRecommendJson.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="设为推荐" prop="delivery">
|
||||
<div class="center">
|
||||
<el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
|
||||
<el-text>推荐后,商品会展示在用户小程序端热销模块内</el-text>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="库存数量">
|
||||
<el-input-number v-model="ruleForm.stockNumber" :min="0" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="打包费" prop="delivery">
|
||||
<div style="display: block;">
|
||||
<el-input-number v-model="ruleForm.packFee" controls-position="right"
|
||||
:disabled="isSyncStatus()"></el-input-number>
|
||||
<div style="color: #999;">单份商品打包费。注:店铺开启外卖模式下该数据才生效</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 耗材设置 -->
|
||||
<div v-show="stepsActiveName == 1">
|
||||
<el-tabs v-model="tabsActiveName">
|
||||
<el-tab-pane label="耗材设置" :name="1">
|
||||
<el-form-item label="耗材列表">
|
||||
<el-table :data="ruleForm.consList" border>
|
||||
<el-table-column label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column label="耗材名称" prop="consInfoId">
|
||||
<template v-slot="scope">
|
||||
<el-select filterable v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
|
||||
@change="selectionChange($event, scope.row)">
|
||||
<el-option v-for="item in consOptions" :key="item.id" :label="item.conName"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
<!-- <div class="tips" v-if="scope.row.stockNumber">库存:{{ scope.row.stockNumber }}</div> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="conUnit">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.conUnit" readonly disabled placeholder="请选择耗材"></el-input>
|
||||
<!-- <el-select v-model="scope.row.conUnit" reserve-keyword placeholder="请输入关键词">
|
||||
<el-option
|
||||
v-for="item in returnConUnits(scope.row.consInfoId)"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="使用数量" prop="surplusStock" min-width="150px">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.surplusStock" :min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #header>
|
||||
<el-button type="primary" size="small" @click="createItem">添加</el-button>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<div class="table_btn_wrap">
|
||||
<div class="btn sub" @click="ruleForm.consList.splice(scope.$index, 1)">
|
||||
<el-icon>
|
||||
<RemoveFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- <div class="btn add" v-if="scope.$index == ruleForm.consList.length - 1"
|
||||
@click="createItem(scope.row)">
|
||||
<el-icon>
|
||||
<CirclePlusFilled />
|
||||
</el-icon>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动售罄">
|
||||
<div class="center">
|
||||
<el-switch v-model="ruleForm.isAutoSoldStock" :active-value="1" :inactive-value="0"></el-switch>
|
||||
<el-text type="info">当绑定的任何一种耗材库存不足时,商品自动售罄</el-text>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="退菜是否退库存">
|
||||
<div class="column">
|
||||
<div>
|
||||
<el-radio-group v-model="ruleForm.refundMode">
|
||||
<el-radio label="退菜退库存" :value="1"></el-radio>
|
||||
<el-radio label="仅退菜不退库存" :value="2"></el-radio>
|
||||
<el-radio label="每次询问-退菜后弹窗提示,可手动选择" :value="3"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div>
|
||||
<el-text type="danger">当前店铺退菜退库存规则:{{ shopInfoTypeFilter(shopInfo.refundMode) }}</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关联商品设置" :name="2">
|
||||
<el-form-item label="关联商品设置">
|
||||
<div class="column">
|
||||
<div class="row">
|
||||
<div class="center">
|
||||
<el-button type="primary" @click="selecProductDialogRef?.show()"
|
||||
:disabled="ruleForm.relatedRecommendJson.length >= goodsListMax">添加商品</el-button>
|
||||
<div class="tips">设置商品后,用户可以在商品详情页中看到推荐商品可拖动调整顺序,最多设置{{ goodsListMax }}个商品</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="goods_table_drag">
|
||||
<el-table :data="ruleForm.relatedRecommendJson" border stripe row-key="id">
|
||||
<!-- 拖拽列 -->
|
||||
<el-table-column label="排序" width="60">
|
||||
<template v-slot="scope">
|
||||
<div class="drag-handle">☰</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片" prop="coverImg" width="90">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.coverImg" style="width: 50px;height: 50px;border-radius: 4px;"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" prop="name"></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button link type="danger"
|
||||
@click="ruleForm.relatedRecommendJson.splice(scope.$index, 1)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="nextStep" v-if="stepsActiveName == 0">下一步</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)" v-if="stepsActiveName == 1">保存</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)" v-if="stepsActiveName == 0">取消</el-button>
|
||||
<el-button @click="stepsActiveName = 0" v-if="stepsActiveName != 0">上一步</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 选择商品 -->
|
||||
<shopList ref="shopListRef" @success="selectShopRes" />
|
||||
<!-- <shopList ref="shopListRef" @success="selectShopRes" /> -->
|
||||
<GoodsSelect ref="shopListRef" @success="selectShopRes" />
|
||||
|
||||
<el-dialog :title="datas.selectSkuItem.proName" v-model="datas.showSelectSku">
|
||||
<div class="pro_sku">
|
||||
<div class="item">
|
||||
@@ -293,6 +401,14 @@
|
||||
</el-dialog>
|
||||
<!-- 选择商品弹窗 -->
|
||||
<selecProductDialog ref="selecProductDialogRef" @success="selecProductSuccess" />
|
||||
<!-- 添加单位 -->
|
||||
<addUnit ref="addUnitRef" @success="getList" />
|
||||
<!-- 添加商品分类 -->
|
||||
<addCategory ref="addCategoryRef" @success="getList" />
|
||||
<!-- 添加商品分组 -->
|
||||
<addGoodsGroup ref="addGoodsGroupRef" @success="getGoodsGroupList" />
|
||||
<!-- 添加规格 -->
|
||||
<addSkuModal ref="addSkuModalRef" @success="tbProductSpecGet" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -306,17 +422,108 @@ import UserAPI from "@/api/product/productclassification";
|
||||
import UserAPI2 from "@/api/product/commonUnits";
|
||||
import UserAPI3 from "@/api/product/index";
|
||||
import UserAPI4 from "@/api/product/specificationsconfig";
|
||||
import GoodsGroupAPI from "@/api/onlineShop/goodsGroupconfig";
|
||||
import shopList from "@/components/mycomponents/shopList.vue";
|
||||
import AddImg from "@/components/mycomponents/addImg.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import Sortable from "sortablejs";
|
||||
import { useTagsViewStore } from "@/store";
|
||||
import selecProductDialog from "@/views/marketing_center/group_booking/components/selecProductDialog.vue";
|
||||
import addUnit from "../components/addUnit.vue";
|
||||
import addCategory from "../components/addCategory.vue";
|
||||
import addGoodsGroup from "@/views/online-shop/components/addGoodsGroup.vue";
|
||||
import GoodsSelect from '@/components/GoodsSelect/index.vue'
|
||||
import addSkuModal from "../components/addSkuModal.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const selecProductDialogRef = ref(null)
|
||||
const goodsListMax = ref(9)
|
||||
const addUnitRef = ref(null)
|
||||
const consOptions = ref([])
|
||||
const addCategoryRef = ref(null)
|
||||
const addGoodsGroupRef = ref(null)
|
||||
const addSkuModalRef = ref(null)
|
||||
|
||||
// let haocaiData = ref({
|
||||
// consList: [
|
||||
// {
|
||||
// productId: '',
|
||||
// consInfoId: "",
|
||||
// surplusStock: "0",
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
|
||||
const stepsActiveName = ref(0);
|
||||
const tabsActiveName = ref(1);
|
||||
const stepRules = [
|
||||
'name',
|
||||
'unitId',
|
||||
'categoryId',
|
||||
'images',
|
||||
]
|
||||
|
||||
const goodsGroupList = ref([])
|
||||
async function getGoodsGroupList() {
|
||||
try {
|
||||
goodsGroupList.value = await GoodsGroupAPI.getList()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getGoodsGroupList()
|
||||
})
|
||||
|
||||
// 校验基础信息的表单是否通过
|
||||
async function nextStep() {
|
||||
try {
|
||||
await ruleFormRef.value.validateField(stepRules)
|
||||
stepsActiveName.value++
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成新商品绑定耗材关系项
|
||||
function createItem(val) {
|
||||
let item = {
|
||||
productId: '',
|
||||
consInfoId: "",
|
||||
surplusStock: "",
|
||||
};
|
||||
ruleForm.consList.push(item);
|
||||
}
|
||||
|
||||
// 商品选择耗材
|
||||
function selectionChange(e, row) {
|
||||
let item = consOptions.value.find((item) => item.id == e);
|
||||
row.name = item.conName;
|
||||
row.conUnit = item.conUnit;
|
||||
}
|
||||
|
||||
// 获取耗材列表
|
||||
async function gethaocaiList() {
|
||||
try {
|
||||
let res = await UserAPI3.productconsList({ id: route.query.id });
|
||||
console.log('获取耗材列表', res);
|
||||
consOptions.value = res || [];
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const shopInfo = ref('')
|
||||
|
||||
function shopInfoTypeFilter(t) {
|
||||
if (t == 1) return '跟随商品分类'
|
||||
if (t == 2) return '跟随单商品'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
shopInfo.value = JSON.parse(localStorage.getItem('userInfo'))
|
||||
gethaocaiList()
|
||||
// Sortable 需要在 el-table 渲染 tbody 后初始化,尝试多次以确保 DOM 可用
|
||||
const initSortable = async () => {
|
||||
await nextTick();
|
||||
@@ -475,6 +682,7 @@ const ruleForm = reactive<RuleForm>({
|
||||
unitId: "",
|
||||
// 分类id
|
||||
categoryId: "",
|
||||
proGroupIds: [], // 商品分组集合
|
||||
// 封面图url
|
||||
coverImg: "",
|
||||
// 详情图urls
|
||||
@@ -497,16 +705,16 @@ const ruleForm = reactive<RuleForm>({
|
||||
// sku集合
|
||||
skuList: [],
|
||||
// 重量
|
||||
weight: 0,
|
||||
weight: '',
|
||||
// 是否允许改价
|
||||
isAllowTempModifyPrice: 1,
|
||||
// 定时上下架周期
|
||||
days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
|
||||
useTime: ["00:00:00", "23:59:59"],
|
||||
// 开始时间
|
||||
startTime: "",
|
||||
startTime: "00:00:00",
|
||||
// 结束时间
|
||||
endTime: "",
|
||||
endTime: "23:59:59",
|
||||
// 是否上架
|
||||
isSale: "1",
|
||||
// 是否开启库存
|
||||
@@ -520,7 +728,10 @@ const ruleForm = reactive<RuleForm>({
|
||||
// 排序值
|
||||
sort: 1,
|
||||
selectSpecInfo: {},
|
||||
relatedRecommendJson: [] // 关联推荐商品
|
||||
relatedRecommendJson: [], // 关联推荐商品
|
||||
consList: [], // 耗材列表
|
||||
refundMode: 1, // 退菜是否退库存 1退菜退库存 2仅退菜不退库存 3每次询问-退菜后弹窗提示
|
||||
isAutoSoldStock: 0, // 是否自动售罄
|
||||
});
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
|
||||
@@ -584,6 +795,14 @@ async function tbProductGetDetail(id: any) {
|
||||
} else {
|
||||
list.value = ruleForm.skuList;
|
||||
}
|
||||
|
||||
// if (res.consList.length == 0) {
|
||||
// ruleForm.consList.push({
|
||||
// productId: '',
|
||||
// consInfoId: "",
|
||||
// surplusStock: "0",
|
||||
// })
|
||||
// }
|
||||
}
|
||||
// 选择套餐商品sku
|
||||
function selectSkuHandle(item: any, index: number) {
|
||||
@@ -643,11 +862,17 @@ function showSelectSkuHandle(row: any, index: any, tabIndex: any) {
|
||||
|
||||
datas.selectSkuItem = obj;
|
||||
}
|
||||
// 添加商品
|
||||
|
||||
// 显示添加套餐商品弹窗
|
||||
function addgoods(index: number = -1) {
|
||||
datas.addGroupIndex = index;
|
||||
(shopListRef.value as any)?.opens();
|
||||
if (ruleForm.groupType == 0) {
|
||||
(shopListRef.value as any)?.show(ruleForm.proGroupVo[0].goods || []);
|
||||
} else {
|
||||
(shopListRef.value as any)?.show(ruleForm.proGroupVo[index].goods || []);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteEvent(d: any) {
|
||||
if (isSyncStatus()) {
|
||||
ElMessage.error('当前同步启用状态下不可修改')
|
||||
@@ -723,7 +948,7 @@ function createSkuHeader() {
|
||||
// 可选套餐弹窗
|
||||
function addtaocan() {
|
||||
datas.addGroupIndex = -1;
|
||||
(shopListRef.value as any)?.opens();
|
||||
(shopListRef.value as any)?.show();
|
||||
}
|
||||
// 生成多规格表体
|
||||
function createSkuBody() {
|
||||
@@ -811,6 +1036,7 @@ function changeTypeEnum(item: string) {
|
||||
list.value = [datas.defaultSku];
|
||||
}
|
||||
}
|
||||
|
||||
// 笛卡尔积算法
|
||||
function cartesian(arr) {
|
||||
if (arr.length < 2) return arr[0] || [];
|
||||
@@ -826,6 +1052,7 @@ function cartesian(arr) {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
|
||||
// 套餐类型切换
|
||||
function typeChange() {
|
||||
// ruleForm.typeEnum = 'normal'
|
||||
@@ -974,8 +1201,13 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.addgoods {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
padding: 14px;
|
||||
|
||||
.form_wrap {
|
||||
background-color: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.pro_sku {
|
||||
@@ -1088,4 +1320,8 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -9,10 +9,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
expandRowKeys: [],
|
||||
rowKey: 'id',
|
||||
treeProps: {
|
||||
children: 'skuList' // 指定子节点存储的字段为 customChildren
|
||||
}
|
||||
},
|
||||
selectOnIndeterminate: false,
|
||||
},
|
||||
pagination: {
|
||||
background: true,
|
||||
@@ -72,40 +74,43 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
name: "sync",
|
||||
auth: "import",
|
||||
},
|
||||
{
|
||||
icon: "edit",
|
||||
text: "库存预警",
|
||||
type: "danger",
|
||||
name: "custom1",
|
||||
auth: "import",
|
||||
},
|
||||
// {
|
||||
// icon: "edit",
|
||||
// text: "库存预警",
|
||||
// type: "danger",
|
||||
// name: "custom1",
|
||||
// auth: "import",
|
||||
// },
|
||||
{
|
||||
icon: "Download",
|
||||
text: "导出",
|
||||
type: "",
|
||||
name: "export",
|
||||
auth: "import",
|
||||
},
|
||||
}
|
||||
],
|
||||
cols: [
|
||||
// { type: "selection", width: 50, align: "center" },
|
||||
{
|
||||
type: "selection", width: 50, align: "center", selectable: (row) => !row.barCode,
|
||||
},
|
||||
{ label: "封面图", align: "center", prop: "coverImg", templet: "image" },
|
||||
{ label: "商品名称", align: "center", prop: "name", },
|
||||
{ label: "分类", align: "center", prop: "categoryName", },
|
||||
{ label: "售价", align: "center", prop: "lowPrice" },
|
||||
{
|
||||
label: "商品规格", align: "center", prop: "type", templet: "custom",
|
||||
slotName: "type",
|
||||
},
|
||||
// { label: "库存", align: "center", prop: "stockNumber" },
|
||||
{ label: "库存", align: "center", slotName: "kucunedit", templet: "custom", prop: "stockNumber" },
|
||||
// { label: "库存", align: "center", slotName: "kucunedit", templet: "custom", prop: "stockNumber" },
|
||||
{ label: "耗材信息", align: "center", prop: "consName", slotName: "consumables", templet: "custom", },
|
||||
{
|
||||
label: "库存开关",
|
||||
align: "center",
|
||||
prop: "isStock",
|
||||
templet: "custom",
|
||||
slotName: "isStock",
|
||||
},
|
||||
// {
|
||||
// label: "库存开关",
|
||||
// align: "center",
|
||||
// prop: "isStock",
|
||||
// templet: "custom",
|
||||
// slotName: "isStock",
|
||||
// },
|
||||
{
|
||||
label: "上架",
|
||||
align: "center",
|
||||
@@ -121,9 +126,16 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
slotName: "sellOut",
|
||||
},
|
||||
{
|
||||
label: "退款退回库存",
|
||||
label: "自动售罄",
|
||||
align: "center",
|
||||
prop: "isRefundStock",
|
||||
prop: "isAutoSoldStock",
|
||||
templet: "custom",
|
||||
slotName: "autoSellOut",
|
||||
},
|
||||
{
|
||||
label: "退菜退库存",
|
||||
align: "center",
|
||||
prop: "refundMode",
|
||||
templet: "custom",
|
||||
slotName: "tuikuantuihui",
|
||||
},
|
||||
@@ -133,7 +145,11 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
fixed: "right",
|
||||
width: 280,
|
||||
templet: "tool",
|
||||
operat: [{ text: "报损", name: '' }, { text: "编辑", icon: 'edit', name: "edit" }, { text: "删除", icon: 'delete', type: 'danger', name: "delete" }],
|
||||
operat: [
|
||||
{ text: "报损", icon: '', name: 'cons' },
|
||||
{ text: "报损记录", name: 'consRecord' },
|
||||
{ text: "编辑", icon: 'edit', name: "edit" },
|
||||
{ text: "删除", icon: 'delete', type: 'danger', name: "delete" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -86,7 +86,7 @@ const searchConfig: ISearchConfig = {
|
||||
label: "排序",
|
||||
prop: "orderBy",
|
||||
attrs: {
|
||||
placeholder: "请选择商品分类",
|
||||
placeholder: "请选择排序方式",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
|
||||
@@ -29,10 +29,12 @@
|
||||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||||
</template>
|
||||
<template #operates="scope">
|
||||
<el-button type="text" size="small" v-if="scope.row.level < 3 && !isSyncStatus()"
|
||||
@click="addlowerLevel(scope.row)">添加下一级</el-button>
|
||||
<el-button type="text" size="small" v-if="!isSyncStatus()" @click="handleEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" v-if="!isSyncStatus()" @click="deleteClick(scope.row)">删除</el-button>
|
||||
<!-- <el-button type="text" size="small" v-if="scope.row.level < 3 && !isSyncStatus()"
|
||||
@click="addlowerLevel(scope.row)">添加下一级</el-button> -->
|
||||
<el-button type="primary" link size="small" v-if="!isSyncStatus() && scope.row.pid == 0"
|
||||
@click="handleEditClick(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link size="small" v-if="!isSyncStatus()"
|
||||
@click="deleteClick(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</page-content>
|
||||
<!-- 添加下一级-编辑 -->
|
||||
@@ -110,6 +112,7 @@
|
||||
</page-content>
|
||||
</template>
|
||||
</div>
|
||||
<addSkuModal ref="addSkuModalRef" @success="handleResetClick" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -124,6 +127,9 @@ import editModalConfig from "./specificationsconfig/edit";
|
||||
import searchConfig from "./specificationsconfig/search";
|
||||
import { pid } from "process";
|
||||
import { isSyncStatus } from "@/utils/index";
|
||||
import addSkuModal from "./components/addSkuModal.vue";
|
||||
|
||||
const addSkuModalRef = ref(null)
|
||||
|
||||
const validateSku1 = (rule, value, callback) => {
|
||||
if (!datas.skuForm.label) {
|
||||
@@ -300,36 +306,38 @@ function deleteClick(item: any) {
|
||||
}
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
myDialogRef.value?.open();
|
||||
addModalRef.value?.setModalVisible();
|
||||
addSkuModalRef.value?.open()
|
||||
// myDialogRef.value?.open();
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// 加载上级规格下拉数据源
|
||||
addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||||
// 加载角色下拉数据源
|
||||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
// 加载部门下拉数据源
|
||||
editModalConfig.formItems[2]!.attrs!.data = [{
|
||||
createTime: "",
|
||||
fullName: "顶级",
|
||||
id: "0", level: 1,
|
||||
name: "顶级",
|
||||
pid: "0",
|
||||
pids: "0,",
|
||||
shopId: "1",
|
||||
sort: 1,
|
||||
status: 1,
|
||||
updateTime: "",
|
||||
children: await UserAPI.getPage({ name: "" })
|
||||
}]
|
||||
addSkuModalRef.value?.open(row)
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// // 加载部门下拉数据源
|
||||
// editModalConfig.formItems[2]!.attrs!.data = [{
|
||||
// createTime: "",
|
||||
// fullName: "顶级",
|
||||
// id: "0", level: 1,
|
||||
// name: "顶级",
|
||||
// pid: "0",
|
||||
// pids: "0,",
|
||||
// shopId: "1",
|
||||
// sort: 1,
|
||||
// status: 1,
|
||||
// updateTime: "",
|
||||
// children: await UserAPI.getPage({ name: "" })
|
||||
// }]
|
||||
// 加载角色下拉数据源
|
||||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// 根据id获取数据进行填充
|
||||
const data = await UserAPI.getunitinfo(row.id);
|
||||
editModalRef.value?.setFormData(data);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// const data = await UserAPI.getunitinfo(row.id);
|
||||
// editModalRef.value?.setFormData(data);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
|
||||
}
|
||||
// 其他工具栏
|
||||
|
||||
@@ -62,9 +62,10 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
// },
|
||||
{
|
||||
label: "操作",
|
||||
width: '150',
|
||||
slotName: "operates",
|
||||
templet: "custom",
|
||||
align: "center",
|
||||
align: "left",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -23,20 +23,8 @@
|
||||
<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>
|
||||
<!-- 添加/编辑单位 -->
|
||||
<addUnit ref="addUnitRef" @success="handleQueryClick" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
|
||||
@@ -62,6 +50,9 @@ import contentConfig2 from "./unitconfig/content2";
|
||||
import editModalConfig from "./unitconfig/edit";
|
||||
import searchConfig from "./unitconfig/search";
|
||||
import { isSyncStatus, downloadFile } from "@/utils/index";
|
||||
import addUnit from "./components/addUnit.vue";
|
||||
|
||||
const addUnitRef = ref(null)
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -101,23 +92,25 @@ async function handleExportClick() {
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
// 加载部门下拉数据源
|
||||
addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
addUnitRef.value.open()
|
||||
// addModalRef.value?.setModalVisible();
|
||||
// // 加载部门下拉数据源
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// // 加载角色下拉数据源
|
||||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
// 加载部门下拉数据源
|
||||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// 根据id获取数据进行填充
|
||||
const data = await UserAPI.getunitinfo(row.id);
|
||||
editModalRef.value?.setFormData(data);
|
||||
editModalRef.value?.setModalVisible();
|
||||
addUnitRef.value.open(row)
|
||||
// editModalRef.value?.handleDisabled(false);
|
||||
// // 加载部门下拉数据源
|
||||
// // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// // 加载角色下拉数据源
|
||||
// // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
// // 根据id获取数据进行填充
|
||||
// const data = await UserAPI.getunitinfo(row.id);
|
||||
// editModalRef.value?.setFormData(data);
|
||||
// editModalRef.value?.setModalVisible();
|
||||
|
||||
}
|
||||
// 其他工具栏
|
||||
|
||||