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

增加版本管理页面，修改店铺添加地图组件使用

This commit is contained in:
YeMingfei666 2025-02-14 09:17:34 +08:00
parent 0e3759b34d
commit dda2f32ccc
36 changed files with 2486 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -5,6 +5,10 @@
## API文档 ## API文档
[超掌柜收银机](https://app.apifox.com/project/5827475) [超掌柜收银机](https://app.apifox.com/project/5827475)
账号，商户相关：<https://tapi.cashier.sxczgkj.cn/account/>
订单，支付相关：<https://tapi.cashier.sxczgkj.cn/order/>
商品，耗材相关：<https://tapi.cashier.sxczgkj.cn/product/>
系统相关：<https://tapi.cashier.sxczgkj.cn/system/>
## 项目特色 ## 项目特色

1
package.json
View File

@ -70,6 +70,7 @@
"qs": "^6.14.0", "qs": "^6.14.0",
"sortablejs": "^1.15.6", "sortablejs": "^1.15.6",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-clipboard3": "^2.0.0",
"vue-i18n": "^11.1.0", "vue-i18n": "^11.1.0",
"vue-router": "^4.5.0" "vue-router": "^4.5.0"
}, },

108
src/api/account/common.ts Normal file
View File

@ -0,0 +1,108 @@
import request from "@/utils/request";
const baseURL = "/account/admin/common";
const CommonApi = {
/**
* 上传文件
*
* @param formData
*/
upload(formData: FormData) {
return request<any, uploadResponse>({
url: `${baseURL}/upload`,
method: "post",
data: formData,
headers: {
"Content-Type": "multipart/form-data",
},
});
},
/**
* 上传文件
*/
uploadFile(file: File) {
const formData = new FormData();
formData.append("file", file);
return request<any, FileInfo>({
url: `${baseURL}/upload`,
method: "post",
data: formData,
headers: {
"Content-Type": "multipart/form-data",
},
});
},
/**
* 下载文件
* @param url
* @param fileName
*/
download(url: string, fileName?: string) {
return request({
url: url,
method: "get",
responseType: "blob",
}).then((res) => {
const blob = new Blob([res.data]);
const a = document.createElement("a");
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName || "下载文件";
a.click();
window.URL.revokeObjectURL(url);
});
},
/**
* 发送验证码
*/
sms(data: smsRequest) {
return request<any, smsResponse>({
url: `${baseURL}/sms`,
method: "post",
data: data,
});
},
};
export default CommonApi;
export interface smsRequest {
/**
* 验证码类型
*/
type: string;
[property: string]: any;
}
/**
* 是否成功
*
* CzgResult«Boolean»
*/
export interface smsResponse {
code?: number | null;
data?: boolean | null;
msg?: null | string;
[property: string]: any;
}
/**
* 文件API类型声明
*/
export interface FileInfo {
/** 文件名 */
name: string;
/** 文件路径 */
url: string;
}
/**
* 文件地址
*
* CzgResult«String»
*/
export interface uploadResponse {
code?: number | null;
data?: null | string;
msg?: null | string;
[property: string]: any;
}

141
src/api/account/register.ts Normal file
View File

@ -0,0 +1,141 @@
import request from "@/utils/request";
const baseURL = "account/admin/";
const RegisterApi = {
/** 获取当前用户菜单列表*/
getList(params: getListRequest) {
return request<any, getListResponse>({
url: `${baseURL}merchantRegister`,
method: "get",
params: params,
});
},
/**生成激活码 */
add(data: addRequest) {
return request<any, getListResponse>({
url: `${baseURL}merchantRegister`,
method: "post",
data: data,
});
},
};
export default RegisterApi;
/** 请求激活码列表参数 */
export interface getListRequest {
/**
* 结束时间
*/
endTime?: string;
page: number;
size: number;
/**
* 开始时间
*/
startTime?: string;
/**
* 状态 0未激活 1已激活
*/
state?: number;
[property: string]: any;
}
/**
* 激活码列表
*
* CzgResult«Page«MerchantRegister»»
*/
export interface getListResponse {
code?: number | null;
data?: PageMerchantRegister;
msg?: null | string;
[property: string]: any;
}
/**
* Page«MerchantRegister»
*/
export interface PageMerchantRegister {
/**
* 每页数据数量最大限制。
*/
maxPageSize?: number | null;
/**
* 是否优化分页查询 COUNT 语句。
*/
optimizeCountQuery?: boolean | null;
/**
* 当前页码。
*/
pageNumber?: number | null;
/**
* 每页数据数量。
*/
pageSize?: number | null;
/**
* 当前页数据。
*/
records?: MerchantRegister[] | null;
/**
* 总页数。
*/
totalPage?: number | null;
/**
* 总数据数量。
*/
totalRow?: number | null;
[property: string]: any;
}
/**
* 激活码 实体类。
*
* MerchantRegister
*/
export interface MerchantRegister {
/**
* 激活码金额
*/
amount?: number | null;
/**
* 创建时间
*/
createTime?: null | string;
id?: number | null;
/**
* 激活时长（月）
*/
periodMonth?: number | null;
/**
* 激活码
*/
registerCode?: null | string;
/**
* 店铺id
*/
shopId?: null | string;
/**
* 状态0未使用1已使用
*/
status?: number | null;
updateTime?: null | string;
[property: string]: any;
}
/**
* 激活码信息
*
* MerchantRegisterDTO
*/
export interface addRequest {
/**
* 生成数量
*/
num: number | null;
/**
* 激活时长
*/
periodMonth: number | null;
[property: string]: any;
}

228
src/api/account/role.ts Normal file
View File

@ -0,0 +1,228 @@
import request from "@/utils/request";
const baseURL = "account/admin/role";
const RoleApi = {
/** 获取当前用户菜单列表*/
getList(params: getListRequest) {
return request<any, getListResponse>({
url: `${baseURL}/list`,
method: "get",
params,
});
},
add(data: addRequest) {
return request<any, addResponse>({
url: `${baseURL}`,
method: "post",
data,
});
},
update(data: editRequest) {
return request<any, editResponse>({
url: `${baseURL}`,
method: "put",
data,
});
},
delete(data: delRequest) {
return request<any, delResponse>({
url: `${baseURL}`,
method: "put",
data,
});
},
};
export default RoleApi;
/** getList start*/
export interface getListRequest {
/**
* 结束时间
*/
endTime?: string;
/**
* 角色名称或描述
*/
key?: string;
page: number;
size: number;
/**
* 开始时间
*/
startTime?: string;
[property: string]: any;
}
/**
* 分页参数
*
* CzgResult«Page«SysRole»»
*/
export interface getListResponse {
code?: number | null;
data?: PageSysRole;
msg?: null | string;
[property: string]: any;
}
/**
* Page«SysRole»
*/
export interface PageSysRole {
maxPageSize?: number | null;
optimizeCountQuery?: boolean | null;
pageNumber?: number | null;
pageSize?: number | null;
records?: SysRole[] | null;
totalPage?: number | null;
totalRow?: number | null;
[property: string]: any;
}
/**
* 角色表 实体类。
*
* SysRole
*/
export interface SysRole {
/**
* 创建日期
*/
createTime?: null | string;
/**
* 创建者
*/
createUserId?: number | null;
/**
* 描述
*/
description?: null | string;
/**
* ID
*/
id?: number | null;
/**
* 角色级别
*/
level?: number | null;
/**
* 名称
*/
name?: null | string;
/**
* 商户id
*/
shopId?: number | null;
/**
* 更新时间
*/
updateTime?: null | string;
/**
* 更新者
*/
updateUserId?: number | null;
[property: string]: any;
}
/** getList end*/
/** add start*/
/**
* 角色信息
*
* RoleAddDTO
*/
export interface addRequest {
/**
* 描述
*/
description?: null | string;
/**
* 角色等级
*/
level?: number | null;
/**
* 菜单id集合
*/
menuIdList: number[] | null;
/**
* 角色名称
*/
name: null | string;
[property: string]: any;
id?: number | null;
}
/**
* 是否成功
*
* CzgResult«Boolean»
*/
export interface addResponse {
code?: number | null;
data?: boolean | null;
msg?: null | string;
[property: string]: any;
}
/**add end */
/** edit start*/
/**
* 角色信息
*
* RoleEditDTO
*/
export interface editRequest {
description?: null | string;
/**
* 角色id
*/
id: number | null;
/**
* 角色等级
*/
level?: number | null;
menuIdList: number[] | null;
/**
* 角色名称
*/
name: null | string;
[property: string]: any;
}
/**
* 是否成功
*
* CzgResult«Boolean»
*/
export interface editResponse {
code?: number | null;
data?: boolean | null;
msg?: null | string;
[property: string]: any;
}
/** edit end */
/** delete start*/
/**
* 角色信息
*
* RoleRemoveDTO
*/
export interface delRequest {
/**
* 角色id
*/
id: number | null;
[property: string]: any;
}
/**
* 是否成功
*
* CzgResult«Boolean»
*/
export interface delResponse {
code?: number | null;
data?: boolean | null;
msg?: null | string;
[property: string]: any;
}
/** delete end */

10
src/api/config.ts Normal file
View File

@ -0,0 +1,10 @@
// [超掌柜收银机](https://app.apifox.com/project/5827475)
// 账号，商户相关：<https://tapi.cashier.sxczgkj.cn/account/>
// 订单，支付相关：<https://tapi.cashier.sxczgkj.cn/order/>
// 商品，耗材相关：<https://tapi.cashier.sxczgkj.cn/product/>
// 系统相关：<https://tapi.cashier.sxczgkj.cn/system/>
export const Account_BaseUrl = "account";
export const Order_BaseUrl = "order";
export const Product_BaseUrl = "product";
export const System_BaseUrl = "system";

58
src/api/login.js
View File

@ -1,58 +0,0 @@
import request from "@/utils/request";
export function login(data) {
return request({
url: "auth/login",
method: "post",
data,
});
}
export function getInfo() {
return request({
url: "auth/info",
method: "get",
});
}
export function changChildShop(data) {
return request({
url: "/api/tbShopInfo/changChildShop",
method: "post",
data,
});
}
export function getCodeImg(header) {
return request({
url: "auth/code",
method: "get",
});
}
export function getqueryChildShop(params) {
return request({
url: "api/tbShopInfo/queryChildShop",
method: "get",
params,
});
}
export function logout() {
return request({
url: "auth/logout",
method: "delete",
});
}
/**
* 个人中心 修改密码
* @param {*} data
* @returns
*/
export function updatePass(data) {
return request({
url: "/api/users/updatePass",
method: "post",
data,
});
}

2
src/api/system/user.ts
View File

@ -230,7 +230,7 @@ export interface UserInfo {
roles: string[]; roles: string[];
/** 权限 */ /** 权限 */
perms: string[]; promissionList: string[];
/** 店铺id */ /** 店铺id */
shopId: number; shopId: number;

52
src/api/system/version.ts Normal file
View File

@ -0,0 +1,52 @@
import request from "@/utils/request";
import { System_BaseUrl } from "@/api/config";
const baseURL = System_BaseUrl + "/admin/version";
const VersionApi = {
getList() {
return request<any, getListResponse>({
url: `${baseURL}/list`,
method: "get",
});
},
delete(id: string) {
return request<any>({
url: `${baseURL}/id`,
method: "delete",
});
},
};
export default VersionApi;
export interface getListResponse {
/**
* 版本 id
*/
id?: string;
/**
* 是否强制升级，0：不强制更新；1：强制更新
*/
isForce?: number;
/**
* 更新内容
*/
message?: string;
/**
* 渠道 ，pc 桌面端， manager_app 管理端， phone_book 电话机点餐
*/
source?: string;
/**
* 类型，0 windows，1 安卓，2 iOS
*/
type?: string;
/**
* 下载地址
*/
url?: string;
/**
* 版本号
*/
version?: string;
[property: string]: any;
}

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

@ -163,7 +163,9 @@
:preview-src-list="scope.row[col.prop]" :preview-src-list="scope.row[col.prop]"
:initial-index="index" :initial-index="index"
:preview-teleported="true" :preview-teleported="true"
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" :style="`width: ${col.imageWidth ?? 40}px; height: ${
col.imageHeight ?? 40
}px`"
/> />
</template> </template>
</template> </template>
@ -923,8 +925,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
if (props.contentConfig.parseData) { if (props.contentConfig.parseData) {
data = props.contentConfig.parseData(data); data = props.contentConfig.parseData(data);
} }
pagination.total = data.total; pagination.total = !props.contentConfig.resultListKey ? data.length : data.totalRow * 1;
pageData.value = data.list; pageData.value = props.contentConfig.resultListKey
? data[props.contentConfig.resultListKey]
: data;
} else { } else {
pageData.value = data; pageData.value = data;
} }

9
src/components/CURD/PageForm.vue
View File

@ -21,9 +21,16 @@
</span> </span>
</template> </template>
<!-- Input 输入框 --> <!-- Input 输入框 -->
{{ item.type }}
<template v-if="item.type === 'input' || item.type === undefined"> <template v-if="item.type === 'input' || item.type === undefined">
<el-input v-model="formData[item.prop]" v-bind="item.attrs" /> <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
</template> </template>
<!-- textarea 输入框 -->
<template v-else-if="item.type === 'textarea' || item.type === undefined">
<el-input v-model="formData[item.prop]" type="textarea" v-bind="item.attrs" />
</template>
<!-- Select 选择器 --> <!-- Select 选择器 -->
<template v-else-if="item.type === 'select'"> <template v-else-if="item.type === 'select'">
<el-select v-model="formData[item.prop]" v-bind="item.attrs"> <el-select v-model="formData[item.prop]" v-bind="item.attrs">
@ -131,7 +138,7 @@ prepareFuncs.forEach((func) => func());
// 获取表单数据 // 获取表单数据
function getFormData(key?: string) { function getFormData(key?: string) {
return key === undefined ? formData : (formData[key] ?? undefined); return key === undefined ? formData : formData[key] ?? undefined;
} }
// 设置表单值 // 设置表单值

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

@ -39,6 +39,10 @@
<template v-if="item.type === 'input' || item.type === undefined"> <template v-if="item.type === 'input' || item.type === undefined">
<el-input v-model="formData[item.prop]" v-bind="item.attrs" /> <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
</template> </template>
<!-- textarea 输入框 -->
<template v-if="item.type === 'textarea' || item.type === undefined">
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
</template>
<!-- Select 选择器 --> <!-- Select 选择器 -->
<template v-else-if="item.type === 'select'"> <template v-else-if="item.type === 'select'">
<el-select v-model="formData[item.prop]" v-bind="item.attrs"> <el-select v-model="formData[item.prop]" v-bind="item.attrs">
@ -288,7 +292,7 @@ prepareFuncs.forEach((func) => func());
// 获取表单数据 // 获取表单数据
function getFormData(key?: string) { function getFormData(key?: string) {
return key === undefined ? formData : (formData[key] ?? undefined); return key === undefined ? formData : formData[key] ?? undefined;
} }
// 设置表单值 // 设置表单值

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

@ -55,6 +55,7 @@ export interface ISearchConfig {
} }
export interface IContentConfig<T = any> { export interface IContentConfig<T = any> {
resultListKey?: string;
// 页面名称(参与组成权限标识,如sys:user:xxx) // 页面名称(参与组成权限标识,如sys:user:xxx)
pageName: string; pageName: string;
// table组件属性 // table组件属性
@ -218,6 +219,7 @@ export type IFormItems<T = any> = Array<{
// 组件类型(如input,select,radio,custom等，默认input) // 组件类型(如input,select,radio,custom等，默认input)
type?: type?:
| "input" | "input"
| "textarea"
| "select" | "select"
| "radio" | "radio"
| "switch" | "switch"

8
src/components/Upload/SingleImageUpload.vue
View File

@ -26,7 +26,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { UploadRawFile, UploadRequestOptions } from "element-plus"; import { UploadRawFile, UploadRequestOptions } from "element-plus";
import FileAPI, { FileInfo } from "@/api/file"; import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
const props = defineProps({ const props = defineProps({
/** /**
@ -130,7 +130,7 @@ function handleUpload(options: UploadRequestOptions) {
formData.append(key, props.data[key]); formData.append(key, props.data[key]);
}); });
FileAPI.upload(formData) CommonApi.upload(formData)
.then((data) => { .then((data) => {
resolve(data); resolve(data);
}) })
@ -152,9 +152,9 @@ function handleDelete() {
* *
* @param fileInfo 上传成功后的文件信息 * @param fileInfo 上传成功后的文件信息
*/ */
const onSuccess = (fileInfo: FileInfo) => { const onSuccess = (fileInfo: string) => {
ElMessage.success("上传成功"); ElMessage.success("上传成功");
modelValue.value = fileInfo.url; modelValue.value = fileInfo;
}; };
/** /**

17
src/directive/permission/index.ts
View File

@ -16,17 +16,18 @@ export const hasPerm: Directive = {
); );
} }
const { roles, perms } = useUserStore().userInfo; const { roles } = useUserStore().userInfo;
const perms = useUserStore().promissionList;
// 超级管理员拥有所有权限 // 超级管理员拥有所有权限
if (roles.includes("ROOT")) { // if (roles.includes("ROOT")) {
return; // return;
} // }
// 检查权限 // 检查权限
const hasAuth = Array.isArray(requiredPerms) // const hasAuth = Array.isArray(requiredPerms)
? requiredPerms.some((perm) => perms.includes(perm)) // ? requiredPerms.some((perm) => perms.includes(perm))
: perms.includes(requiredPerms); // : perms.includes(requiredPerms);
const hasAuth = true;
// 如果没有权限，移除该元素 // 如果没有权限，移除该元素
if (!hasAuth && el.parentNode) { if (!hasAuth && el.parentNode) {

4
src/enums/ResultEnum.ts
View File

@ -14,10 +14,10 @@ export const enum ResultEnum {
/** /**
* 访问令牌无效或过期 * 访问令牌无效或过期
*/ */
ACCESS_TOKEN_INVALID = "A0230", ACCESS_TOKEN_INVALID = 501,
/** /**
* 刷新令牌无效或过期 * 刷新令牌无效或过期
*/ */
REFRESH_TOKEN_INVALID = "A0231", REFRESH_TOKEN_INVALID = 501,
} }

10
src/main.ts
View File

@ -13,12 +13,12 @@ import "uno.css";
import "default-passive-events"; import "default-passive-events";
// vue-amp初始化 // vue-amp初始化
import { initAMapApiLoader } from "@vuemap/vue-amap"; // import { initAMapApiLoader } from "@vuemap/vue-amap";
import "@vuemap/vue-amap/dist/style.css"; import "@vuemap/vue-amap/dist/style.css";
initAMapApiLoader({ // initAMapApiLoader({
key: "6033c97e67bf2e9ceac306e1a3fa35f8", // key: "6033c97e67bf2e9ceac306e1a3fa35f8",
securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07", // securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07",
}); // });
const app = createApp(App); const app = createApp(App);
// 注册插件 // 注册插件

19
src/plugins/permission.ts
View File

@ -74,15 +74,16 @@ function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext)
/** 判断是否有权限 */ /** 判断是否有权限 */
export function hasAuth(value: string | string[], type: "button" | "role" = "button") { export function hasAuth(value: string | string[], type: "button" | "role" = "button") {
const { roles, perms } = useUserStore().userInfo; const { roles } = useUserStore().userInfo;
const perms = useUserStore().promissionList;
// 超级管理员 拥有所有权限 // 超级管理员 拥有所有权限
if (type === "button" && roles.includes("ROOT")) { // if (type === "button" && roles.includes("ROOT")) {
return true; // return true;
} // }
return true;
const auths = type === "button" ? perms : roles; // const auths = type === "button" ? perms : roles;
return typeof value === "string" // return typeof value === "string"
? auths.includes(value) // ? auths.includes(value)
: value.some((perm) => auths.includes(perm)); // : value.some((perm) => auths.includes(perm));
} }

62
src/router/index.ts
View File

@ -150,6 +150,68 @@ export const constantRoutes: RouteRecordRaw[] = [
}, },
], ],
}, },
{
path: "/system",
component: Layout,
meta: {
title: "系统管理",
icon: "system",
alwaysShow: true,
},
children: [
{
path: "user",
component: () => import("@/views/admim/system/user/index.vue"),
name: "adminSysUser",
meta: {
title: "系统用户",
affix: false,
keepAlive: true,
},
},
{
path: "role",
component: () => import("@/views/admim/system/role/index.vue"),
name: "adminSysRole",
meta: {
title: "角色管理",
affix: false,
keepAlive: true,
},
},
{
path: "version",
component: () => import("@/views/admim/system/version/index.vue"),
name: "adminSysVersion",
meta: {
title: "版本管理",
affix: false,
keepAlive: true,
},
},
],
},
{
path: "/register",
component: Layout,
meta: {
title: "激活码",
icon: "chain",
alwaysShow: true,
},
children: [
{
path: "index",
component: () => import("@/views/register/index.vue"),
name: "registerIndex",
meta: {
title: "激活码列表",
affix: false,
keepAlive: true,
},
},
],
},
{ {
path: "/online-shop", path: "/online-shop",
component: Layout, component: Layout,

12
src/store/modules/user.ts
View File

@ -2,26 +2,29 @@ import { store } from "@/store";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import { useDictStoreHook } from "@/store/modules/dict"; import { useDictStoreHook } from "@/store/modules/dict";
import AuthAPI, { type LoginFormData } from "@/api/account/login"; import AuthAPI, { type loginRequest } from "@/api/account/login";
import UserAPI, { type UserInfo } from "@/api/system/user"; import UserAPI, { type UserInfo } from "@/api/system/user";
import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth"; import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";
export const useUserStore = defineStore("user", () => { export const useUserStore = defineStore("user", () => {
const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo); const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
const promissionList = useStorage<string[]>("promissionList", [] as string[]);
localStorage.setItem("shopId", "" + userInfo.value.shopId); localStorage.setItem("shopId", "" + userInfo.value.shopId);
/** /**
* 登录 * 登录
* *
* @param {LoginFormData} * @param {loginRequest}
* @returns * @returns
*/ */
function login(LoginFormData: LoginFormData) { function login(loginRequest: loginRequest) {
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
AuthAPI.login(LoginFormData) AuthAPI.login(loginRequest)
.then((data) => { .then((data) => {
Object.assign(userInfo.value, { ...data.shopInfo }); Object.assign(userInfo.value, { ...data.shopInfo });
promissionList.value = data.promissionList;
const token = data.tokenInfo.tokenValue; const token = data.tokenInfo.tokenValue;
setToken(token); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx setToken(token); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
setRefreshToken(token); setRefreshToken(token);
@ -110,6 +113,7 @@ export const useUserStore = defineStore("user", () => {
return { return {
userInfo, userInfo,
promissionList,
getUserInfo, getUserInfo,
login, login,
logout, logout,

3
src/styles/index.scss
View File

@ -29,3 +29,6 @@
.amap-sug-result { .amap-sug-result {
z-index: 3000; z-index: 3000;
} }
.head-container {
margin-bottom: 20px;
}

10
src/utils/mapLoadUtil.ts Normal file
View File

@ -0,0 +1,10 @@
import { initAMapApiLoader } from "@vuemap/vue-amap";
export function initMapLoad() {
initAMapApiLoader({
key: "6033c97e67bf2e9ceac306e1a3fa35f8",
securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07",
//Loca:{
// version: '2.0.0'
//} // 如果需要使用loca组件库，需要加载Loca
});
}

17
src/utils/request.ts
View File

@ -19,9 +19,9 @@ service.interceptors.request.use(
const accessToken = getToken(); const accessToken = getToken();
// 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口 // 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
if (config.headers.Authorization !== "no-auth" && accessToken) { if (config.headers.Authorization !== "no-auth" && accessToken) {
config.headers.Authorization = accessToken; config.headers.token = accessToken;
} else { } else {
delete config.headers.Authorization; delete config.headers.token;
} }
return config; return config;
}, },
@ -41,6 +41,19 @@ service.interceptors.response.use(
return data ? data : response.data; return data ? data : response.data;
} }
if (code === ResultEnum.ACCESS_TOKEN_INVALID) {
ElNotification({
title: "提示",
message: "您的会话已过期，请重新登录",
type: "info",
});
useUserStoreHook()
.clearUserData()
.then(() => {
router.push("/login");
});
return;
}
ElMessage.error(msg || "系统出错"); ElMessage.error(msg || "系统出错");
return Promise.reject(new Error(msg || "Error")); return Promise.reject(new Error(msg || "Error"));
}, },

167
src/utils/validate.js Normal file
View File

@ -0,0 +1,167 @@
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
}
export function isvalidPhone(phone) {
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
return reg.test(phone)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
/**
* 是否合法IP地址
* @param rule
* @param value
* @param callback
*/
export function validateIP(rule, value, callback) {
if (value === '' || value === undefined || value == null) {
callback()
} else {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
if ((!reg.test(value)) && value !== '') {
callback(new Error('请输入正确的IP地址'))
} else {
callback()
}
}
}
/* 是否手机号码或者固话*/
export function validatePhoneTwo(rule, value, callback) {
const reg = /^((0\d{2,3}-\d{7,8})|(1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}))$/
if (value === '' || value === undefined || value == null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('请输入正确的电话号码或者固话号码'))
} else {
callback()
}
}
}
/* 是否固话*/
export function validateTelephone(rule, value, callback) {
const reg = /0\d{2}-\d{7,8}/
if (value === '' || value === undefined || value == null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'))
} else {
callback()
}
}
}
/* 是否手机号码*/
export function validatePhone(rule, value, callback) {
const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
if (value === '' || value === undefined || value == null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('请输入正确的电话号码'))
} else {
callback()
}
}
}
/* 是否身份证号码*/
export function validateIdNo(rule, value, callback) {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (value === '' || value === undefined || value == null) {
callback()
} else {
if ((!reg.test(value)) && value !== '') {
callback(new Error('请输入正确的身份证号码'))
} else {
callback()
}
}
}

458
src/views/admim/system/role/index.vue Normal file
View File

@ -0,0 +1,458 @@
<template>
<div class="app-container">
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.key"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<div class="mb-10px">
<el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
<el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
删除
</el-button>
</div>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" min-width="100" />
<el-table-column label="角色编码" prop="code" width="150" />
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="80" prop="sort" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
type="primary"
size="small"
link
icon="position"
@click="handleOpenAssignPermDialog(scope.row)"
>
分配权限
</el-button>
<el-button
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.size"
@pagination="handleQuery"
/>
</el-card>
<!-- 角色表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="500px"
@close="handleCloseDialog"
>
<el-form ref="addRequestRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="数据权限" prop="dataScope">
<el-select v-model="formData.dataScope">
<el-option :key="0" label="全部数据" :value="0" />
<el-option :key="1" label="部门及子部门数据" :value="1" />
<el-option :key="2" label="本部门数据" :value="2" />
<el-option :key="3" label="本人数据" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 分配权限弹窗 -->
<el-drawer
v-model="assignPermDialogVisible"
:title="'【' + checkedRole.name + '】权限分配'"
size="500"
>
<div class="flex-x-between">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
<template #prefix>
<Search />
</template>
</el-input>
<div class="flex-center ml-5">
<el-button type="primary" size="small" plain @click="togglePermTree">
<template #icon>
<Switch />
</template>
{{ isExpanded ? "收缩" : "展开" }}
</el-button>
<el-checkbox
v-model="parentChildLinked"
class="ml-5"
@change="handleparentChildLinkedChange"
>
父子联动
</el-checkbox>
<el-tooltip placement="bottom">
<template #content>
如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
</template>
<el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
</div>
<el-tree
ref="permTreeRef"
node-key="value"
show-checkbox
:data="menuPermOptions"
:filter-node-method="handlePermFilter"
:default-expand-all="true"
:check-strictly="!parentChildLinked"
class="mt-5"
>
<template #default="{ data }">
{{ data.label }}
</template>
</el-tree>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleAssignPermSubmit">确 定</el-button>
<el-button @click="assignPermDialogVisible = false">取 消</el-button>
</div>
</template>
</el-drawer>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "Role",
inheritAttrs: false,
});
import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
import MenuAPI from "@/api/system/menu";
const queryFormRef = ref();
const addRequestRef = ref();
const permTreeRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<getListRequest>({
page: 1,
size: 10,
key: "",
});
// 角色表格数据
const roleList = ref<SysRole[]>();
// 菜单权限下拉
const menuPermOptions = ref<OptionType[]>([]);
// 弹窗
const dialog = reactive({
title: "",
visible: false,
});
// 角色表单
const formData = reactive<addRequest>({
// sort: 1,
// status: 1,
id: null,
name: "",
level: 0,
menuIdList: [],
description: "",
});
const rules = reactive({
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});
// 选中的角色
interface CheckedRole {
id?: number;
name?: string;
}
const checkedRole = ref<CheckedRole>({});
const assignPermDialogVisible = ref(false);
const permKeywords = ref("");
const isExpanded = ref(true);
const parentChildLinked = ref(true);
// 查询
function handleQuery() {
loading.value = true;
RoleApi.getList(queryParams)
.then((data) => {
roleList.value = data.records;
total.value = data.totalRow;
})
.finally(() => {
loading.value = false;
});
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.page = 1;
queryParams.size = 10;
queryParams.key = "";
handleQuery();
}
// 行复选框选中
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
// 打开角色弹窗
function handleOpenDialog(row: SysRole) {
dialog.visible = true;
if (row.id) {
dialog.title = "修改角色";
Object.assign(formData, row);
} else {
dialog.title = "新增角色";
}
}
// 提交角色表单
function handleSubmit() {
addRequestRef.value.validate((valid: any) => {
if (valid) {
loading.value = true;
const roleId = formData.id;
if (roleId) {
RoleApi.update({ ...formData, id: formData.id ?? null })
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
} else {
delete formData.id;
RoleApi.add(formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleResetQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
addRequestRef.value.resetFields();
addRequestRef.value.clearValidate();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
}
// 删除角色
function handleDelete(roleId?: number) {
const roleIds = [roleId || ids.value].join(",");
if (!roleIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
loading.value = true;
RoleApi.delete({ id: roleId ?? null })
.then(() => {
ElMessage.success("删除成功");
handleResetQuery();
})
.finally(() => (loading.value = false));
},
() => {
ElMessage.info("已取消删除");
}
);
}
// 打开分配菜单权限弹窗
async function handleOpenAssignPermDialog(row: SysRole) {
const roleId = row.id;
if (roleId) {
assignPermDialogVisible.value = true;
loading.value = true;
checkedRole.value.id = roleId;
checkedRole.value.name = row.name as string;
// 获取所有的菜单
menuPermOptions.value = await MenuAPI.getOptions();
// 回显角色已拥有的菜单
// RoleApi.getRoleMenuIds(roleId)
// .then((data) => {
// const checkedMenuIds = data;
// checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
// })
// .finally(() => {
// loading.value = false;
// });
}
}
// 分配菜单权限提交
function handleAssignPermSubmit() {
const roleId = checkedRole.value.id;
if (roleId) {
const checkedMenuIds: number[] = permTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
loading.value = true;
RoleApi.updateRoleMenus(roleId, checkedMenuIds)
.then(() => {
ElMessage.success("分配权限成功");
assignPermDialogVisible.value = false;
handleResetQuery();
})
.finally(() => {
loading.value = false;
});
}
}
// 展开/收缩 菜单权限树
function togglePermTree() {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
if (isExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
// 权限筛选
watch(permKeywords, (val) => {
permTreeRef.value!.filter(val);
});
function handlePermFilter(
value: string,
data: {
[key: string]: any;
}
) {
if (!value) return true;
return data.label.includes(value);
}
// 父子菜单节点是否联动
function handleparentChildLinkedChange(val: any) {
parentChildLinked.value = val;
}
onMounted(() => {
handleQuery();
});
</script>

1
src/views/admim/system/user/index.vue Normal file
View File

@ -0,0 +1 @@
<template></template>

87
src/views/admim/system/version/config/add.ts Normal file
View File

@ -0,0 +1,87 @@
import UserAPI, { type UserForm } from "@/api/system/user";
import type { IModalConfig } from "@/components/CURD/types";
const modalConfig: IModalConfig<UserForm> = {
pageName: "sys:user",
dialog: {
title: "新增版本",
width: 800,
draggable: true,
},
form: {
labelWidth: 140,
},
formAction: UserAPI.add,
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "渠道",
prop: "source",
rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
type: "select",
attrs: {
placeholder: "请选择渠道",
},
options: [
{ label: "桌面端", value: "pc" },
{ label: "管理端", value: "manager_app" },
{ label: "电话机点餐", value: "phone_book " },
],
},
{
label: "类型",
prop: "type",
rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
type: "select",
attrs: {
placeholder: "请选择类型",
},
col: {
xs: 24,
sm: 12,
},
options: [
{ label: "windows", value: 0 },
{ label: "安卓", value: 1 },
{ label: "iOS", value: 2 },
],
},
{
type: "input",
label: "版本号",
prop: "version",
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
attrs: {
placeholder: "请输入版本号",
},
},
{
type: "radio",
label: "是否强制更新",
prop: "isForce",
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
attrs: {
placeholder: "请输入版本号",
},
initialValue: 0,
options: [
{ label: "是", value: 1 },
{ label: "否", value: 0 },
],
},
{
type: "textarea",
label: "更新提示内容",
prop: "version",
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
attrs: {
placeholder: "请输入版本号",
},
},
],
};
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
export default reactive(modalConfig);

86
src/views/admim/system/version/config/content.ts Normal file
View File

@ -0,0 +1,86 @@
import VersionApi from "@/api/system/version";
import RoleAPI from "@/api/system/role";
import type { UserPageQuery } from "@/api/system/user";
import type { IContentConfig } from "@/components/CURD/types";
const contentConfig: IContentConfig<UserPageQuery> = {
pageName: "sys:user",
table: {
border: true,
highlightCurrentRow: true,
},
pagination: {
background: true,
layout: "prev,pager,next,jumper,total,sizes",
pageSize: 20,
pageSizes: [10, 20, 30, 50],
},
indexAction: function (params) {
return VersionApi.getList();
},
deleteAction: VersionApi.delete,
importsAction(data) {
// 模拟导入数据
console.log("importsAction", data);
return Promise.resolve();
},
exportsAction: async function (params) {
// 模拟获取到的是全量数据
const res = await VersionApi.getList(params);
console.log("exportsAction", res.list);
return res.list;
},
pk: "id",
toolbar: ["add"],
defaultToolbar: ["refresh", "filter", "search"],
cols: [
{ type: "selection", width: 50, align: "center" },
{ label: "id", align: "center", prop: "id", width: 100, show: true },
{ label: "渠道", align: "center", prop: "source" },
{
label: "类型",
align: "center",
prop: "type",
},
{ label: "版本号", align: "center", prop: "version" },
{
label: "是否强制升级",
align: "center",
prop: "isForce",
width: 120,
templet: "switch",
slotName: "isForce",
},
{
label: "下载地址",
align: "center",
prop: "url",
templet: "url",
slotName: "url",
},
{
label: "操作",
align: "center",
fixed: "right",
width: 280,
templet: "tool",
operat: [
{
icon: "Document",
name: "edit",
text: "编辑",
},
{
name: "delete",
icon: "delete",
text: "删除",
},
"edit",
"delete",
],
},
],
};
export default contentConfig;

133
src/views/admim/system/version/config/content2.ts Normal file
View File

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

117
src/views/admim/system/version/config/edit.ts Normal file
View File

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

21
src/views/admim/system/version/config/search.ts Normal file
View File

@ -0,0 +1,21 @@
import type { ISearchConfig } from "@/components/CURD/types";
const searchConfig: ISearchConfig = {
pageName: "sys:user",
formItems: [
{
type: "input",
label: "版本号",
prop: "keywords",
attrs: {
placeholder: "请输入版本号",
clearable: true,
style: {
width: "200px",
},
},
},
],
};
export default searchConfig;

167
src/views/admim/system/version/index.vue Normal file
View File

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

99
src/views/register/components/addActivationCode.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<el-dialog title="生产激活码" v-model="dialogVisible" width="500px" @close="reset">
<el-form :model="form" :rules="rules" label-width="100px" label-position="left">
<el-form-item label="激活时长" prop="periodMonth">
<el-input-number
v-model="form.periodMonth"
controls-position="right"
:min="1"
:step="1"
step-strictly
></el-input-number>
</el-form-item>
<el-form-item label="生产数量" prop="num">
<el-input-number
v-model="form.num"
controls-position="right"
:min="1"
:step="1"
step-strictly
></el-input-number>
</el-form-item>
<!-- <el-form-item label="所属代理" prop="agent">
<el-input v-model="form.agent" placeholder="请输入完整的代理账号查找"></el-input>
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" v-loading="loading" @click="tbMerchantRegisterPost">
生产激活码
</el-button>
</div>
</template>
</el-dialog>
</template>
<script>
import RegisterApi from "@/api/account/register";
export default {
data() {
return {
dialogVisible: false,
loading: false,
form: {
periodMonth: 1,
num: 1,
agent: "",
},
rules: {
periodMonth: [
{
required: true,
message: " ",
trigger: "blur",
},
],
num: [
{
required: true,
message: " ",
trigger: "blur",
},
],
},
};
},
methods: {
async tbMerchantRegisterPost() {
try {
this.loading = true;
const res = await RegisterApi.add(this.form);
this.$emit("success", res);
this.close();
this.$notify({
title: "成功",
message: `添加成功`,
type: "success",
});
this.loading = false;
} catch (error) {
this.loading = false;
console.log(error);
}
},
show() {
this.dialogVisible = true;
},
close() {
this.dialogVisible = false;
},
reset() {
this.form.periodMonth = 1;
this.form.num = 1;
this.form.agent = "";
},
},
};
</script>

183
src/views/register/index.vue
View File

@ -0,0 +1,183 @@
<template>
<div class="app-container">
<div class="head-container">
<div class="filter_wrap">
<!-- <el-input v-model="query.name" size="small" clearable placeholder="请输入完整的代理商账号查找" style="width: 250px"
@keyup.enter.native="getTableData" /> -->
<el-select v-model="query.type" placeholder="请选择类型" style="width: 200px">
<el-option label="快餐版" value="munchies" />
<el-option label="餐饮版" value="restaurant" />
</el-select>
<el-select v-model="query.state" placeholder="请选择状态" style="width: 200px">
<el-option label="待激活" :value="0" />
<el-option label="已使用" :value="1" />
</el-select>
<el-date-picker
v-model="query.createdAt"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 400px"
@change="getTableData"
></el-date-picker>
<el-button type="primary" @click="getTableData">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
</div>
</div>
<div class="head-container">
<div class="filter_wrap">
<el-button type="primary" icon="plus" @click="$refs.addActivationCode.show()">
添加激活码
</el-button>
<el-button icon="download">导出Excel</el-button>
</div>
</div>
<div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading">
<el-table-column label="激活码" prop="registerCode" width="500px">
<template v-slot="scope">
<el-tooltip content="点击复制">
<el-tag type="success" @click="copyHandle(scope.row.registerCode)">
<i class="el-icon-paperclip"></i>
{{ scope.row.registerCode }}
</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="商户名称" prop="name"></el-table-column>
<el-table-column label="联系电话" prop="telephone"></el-table-column>
<el-table-column label="版本类型" prop="type">
<template v-slot="scope">
<span v-if="scope.row.type == 'munchies'">快餐版</span>
<span v-if="scope.row.type == 'restaurant'">餐饮版</span>
</template>
</el-table-column>
<el-table-column label="激活时长" prop="periodYear"></el-table-column>
<el-table-column label="状态" prop="status">
<template v-slot="scope">
<el-tag type="info" v-if="scope.row.status == 0">待激活</el-tag>
<el-tag type="success" v-if="scope.row.status == 1">已使用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createdAt">
<template v-slot="scope">
{{ scope.row.createdAt && dayjs(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<!-- 分页 -->
<el-pagination
background
:total="tableData.total"
v-model:current-page="tableData.page"
v-model:page-size="tableData.size"
@current-change="paginationChange"
layout="total, sizes , prev, pager ,next, jumper"
></el-pagination>
</div>
<addActivationCode ref="addActivationCode" @success="getTableData" />
</div>
</template>
<script>
import dayjs from "dayjs";
import RegisterApi from "@/api/account/register";
import addActivationCode from "./components/addActivationCode.vue";
import useClipboard from "vue-clipboard3";
import { ElNotification } from "element-plus";
const { toClipboard } = useClipboard();
export default {
components: { addActivationCode },
data() {
return {
background: true,
dayjs,
query: {
name: "",
type: "",
state: "",
createdAt: [],
},
status: [
{
type: 1,
label: "开启",
},
{
type: 0,
label: "关闭",
},
],
tableData: {
list: [],
page: 1,
size: 10,
loading: false,
total: 0,
},
};
},
mounted() {
this.getTableData();
},
methods: {
async copyHandle(text) {
try {
await toClipboard(text);
ElNotification({
title: "成功",
message: `复制成功`,
type: "success",
});
console.log("Copied to clipboard");
} catch (e) {
console.error(e);
}
},
// 重置查询
resetHandle() {
this.query.name = "";
this.query.account = "";
this.query.state = "";
this.getTableData();
},
// 分页回调
paginationChange(e) {
this.tableData.page = e;
this.getTableData();
},
async getTableData() {
this.tableData.loading = true;
try {
const res = await RegisterApi.getList({
page: this.tableData.page,
size: this.tableData.size,
type: this.query.type,
status: this.query.state,
createdAt: this.query.createdAt,
});
this.tableData.loading = false;
this.tableData.list = res.records;
this.tableData.total = res.totalRow * 1;
} catch (error) {
console.log(error);
}
},
},
};
</script>
<style scoped lang="scss">
.shop_info {
display: flex;
.info {
flex: 1;
padding-left: 4px;
}
}
</style>

287
src/views/shop/list/components/addShop.vue
View File

@ -6,7 +6,7 @@
> >
<div style="height: 50vh; overflow-y: auto"> <div style="height: 50vh; overflow-y: auto">
<el-form <el-form
ref="form" ref="refForm"
:model="state.form" :model="state.form"
:rules="state.rules" :rules="state.rules"
label-width="120px" label-width="120px"
@ -16,14 +16,14 @@
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input> <el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="店铺类型"> <el-form-item label="店铺类型">
<el-radio-group v-model="state.form.type"> <el-radio-group v-model="state.form.shopType">
<el-radio-button value="only">单店</el-radio-button> <el-radio-button value="only">单店</el-radio-button>
<el-radio-button value="chain">连锁店</el-radio-button> <el-radio-button value="chain">连锁店</el-radio-button>
<el-radio-button value="join">加盟店</el-radio-button> <el-radio-button value="join">加盟店</el-radio-button>
</el-radio-group> </el-radio-group>
<div class="tips">请谨慎修改！！！</div> <div class="tips">请谨慎修改！！！</div>
</el-form-item> </el-form-item>
<el-form-item label="主店账号" prop="mainId" v-if="state.form.type != 'only'"> <el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'">
<el-select <el-select
v-model="state.form.mainId" v-model="state.form.mainId"
placeholder="请选择主店铺" placeholder="请选择主店铺"
@ -45,26 +45,10 @@
<el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input> <el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="门店logo" prop="logo"> <el-form-item label="门店logo" prop="logo">
<el-image <SingleImageUpload v-model="state.form.logo" />
:src="state.form.logo || uploadImg"
fit="contain"
style="width: 80px; height: 80px"
@click="
state.showUpload = true;
state.uploadIndex = 1;
"
></el-image>
</el-form-item> </el-form-item>
<el-form-item label="门店照片"> <el-form-item label="门店照片">
<el-image <SingleImageUpload v-model="state.form.frontImg" />
:src="state.form.coverImg || uploadImg"
fit="contain"
style="width: 80px; height: 80px"
@click="
state.showUpload = true;
state.uploadIndex = 2;
"
></el-image>
</el-form-item> </el-form-item>
<el-form-item label="经营模式"> <el-form-item label="经营模式">
<el-radio-group v-model="state.form.registerType"> <el-radio-group v-model="state.form.registerType">
@ -73,7 +57,7 @@
</el-radio-group> </el-radio-group>
<div class="tips">请谨慎修改！！！</div> <div class="tips">请谨慎修改！！！</div>
</el-form-item> </el-form-item>
<el-form-item label="管理方式" v-if="state.form.type != 'only'"> <el-form-item label="管理方式" v-if="state.form.shopType != 'only'">
<el-radio-group v-model="state.form.tube_type"> <el-radio-group v-model="state.form.tube_type">
<el-radio-button value="0">不可直接管理</el-radio-button> <el-radio-button value="0">不可直接管理</el-radio-button>
<el-radio-button value="1">直接管理</el-radio-button> <el-radio-button value="1">直接管理</el-radio-button>
@ -87,17 +71,17 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="激活码"> <el-form-item label="激活码">
<el-input v-model="state.form.registerCode" placeholder="请输入激活码"></el-input> <el-input v-model="state.form.activateCode" placeholder="请输入激活码"></el-input>
<div class="tips">注：输入有效激活码表示添加的同时直接激活该店铺。</div> <div class="tips">注：输入有效激活码表示添加的同时直接激活该店铺。</div>
</el-form-item> </el-form-item>
<el-form-item label="登录账号" prop="account"> <el-form-item label="登录账号" prop="accountName">
<el-input v-model="state.form.account" placeholder="请输入登录账号"></el-input> <el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="登录密码" prop="password" v-if="!state.form.id"> <el-form-item label="登录密码" prop="password" v-if="!state.form.id">
<el-input <el-input
type="password" type="password"
show-password show-password
v-model="state.form.password" v-model="state.form.accountPwd"
placeholder="请输入登录密码" placeholder="请输入登录密码"
></el-input> ></el-input>
</el-form-item> </el-form-item>
@ -117,7 +101,7 @@
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right" <el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
:min="0"></el-input-number> :min="0"></el-input-number>
</el-form-item> --> </el-form-item> -->
<el-form-item label="店铺经度" prop="provinces"> <el-form-item label="店铺经度" prop="lat">
<el-row> <el-row>
<el-col :span="9" v-if="state.form.provinces"> <el-col :span="9" v-if="state.form.provinces">
<el-input <el-input
@ -168,46 +152,48 @@
> >
<div class="map_box"> <div class="map_box">
<div class="map"> <div class="map">
<el-amap ref="map" :center="state.amapOptions.center"> <el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
<el-amap-marker :position="state.amapOptions.center"></el-amap-marker> <el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
<el-amap-search-box
:visible="true"
@select="onSearchResult"
@choose="onSearchResult"
city="西安"
></el-amap-search-box>
</el-amap> </el-amap>
</div> </div>
</div> <div class="search_box">
</el-dialog> <el-input
<el-dialog v-model="state.searchOption.keyword"
v-model="state.showUpload" placeholder="请输入关键字"
:close-on-click-modal="false" @focus="state.searchOption.focus = true"
append-to-body @blur="autoCompleteSearchBlur"
width="500px" @input="autoCompleteSearch(state.searchOption.keyword)"
@close="state.showUpload = false" >
> <template #append>
<el-upload <el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
:before-remove="handleBeforeRemove" 搜索
:on-success="handleSuccess" </el-button>
:on-error="handleError" </template>
:file-list="state.fileList" </el-input>
:headers="headers" <div class="list" v-if="state.searchOption.focus && state.searchOption.show">
:action="qiNiuUploadApi" <div
class="upload-demo" class="item"
multiple @click="autoCompleteListClick(item)"
> v-for="item in state.autoCompleteList"
<el-button size="small" type="primary">点击上传</el-button> :key="item.id"
<template #tip> >
<div style="display: block" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div> {{ item.name }}
</template> </div>
</el-upload> </div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
<el-button @click="uploadClose">取消</el-button>
</div> </div>
</template>
<div class="search_wrap">
<div class="item" v-for="item in state.locationSearchList" :key="item.id">
<div class="left">
<div class="name">{{ item.name }}-{{ item.address }}</div>
<div class="location">经纬度：{{ item.location.lng }},{{ item.location.lat }}</div>
</div>
<div class="btn">
<el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
</div>
</div>
</div>
</div>
</el-dialog> </el-dialog>
<template #footer> <template #footer>
@ -225,6 +211,9 @@
<script setup> <script setup>
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import uploadImg from "@/assets/images/upload.png"; import uploadImg from "@/assets/images/upload.png";
import { ElAmap } from "@vuemap/vue-amap";
import { initMapLoad } from "@/utils/mapLoadUtil";
import { ElNotification } from "element-plus";
// { geocode, ShopApi.getList } // { geocode, ShopApi.getList }
import ShopApi from "@/api/account/shop"; import ShopApi from "@/api/account/shop";
const validateLogo = (rule, value, callback) => { const validateLogo = (rule, value, callback) => {
@ -248,13 +237,13 @@ const state = reactive({
id: "", id: "",
shopName: "", shopName: "",
mainId: "", mainId: "",
type: "only", shopType: "only",
tube_type: "0", tube_type: "0",
registerType: "restaurant", registerType: "restaurant",
profiles: "release", profiles: "release",
registerCode: "", activateCode: "",
account: "", accountName: "",
password: "", accountPwd: "",
phone: "", phone: "",
supportDeviceNumber: 1, supportDeviceNumber: 1,
lat: "", lat: "",
@ -263,7 +252,7 @@ const state = reactive({
detail: "", detail: "",
status: 1, status: 1,
logo: "", logo: "",
coverImg: "", frontImg: "",
provinces: "", provinces: "",
cities: "", cities: "",
districts: "", districts: "",
@ -285,7 +274,7 @@ const state = reactive({
trigger: "blur", trigger: "blur",
}, },
], ],
provinces: [ lat: [
{ {
required: true, required: true,
message: "请选择坐标", message: "请选择坐标",
@ -299,14 +288,14 @@ const state = reactive({
trigger: "change", trigger: "change",
}, },
], ],
account: [ accountName: [
{ {
required: true, required: true,
message: " ", message: " ",
trigger: "change", trigger: "change",
}, },
], ],
password: [ accountPwd: [
{ {
required: true, required: true,
message: " ", message: " ",
@ -322,7 +311,11 @@ const state = reactive({
searchOption: { searchOption: {
city: "西安", city: "西安",
citylimit: false, citylimit: false,
keyword: "",
show: false,
focus: false,
}, },
autoCompleteList: [],
locationSearchList: [], locationSearchList: [],
amapOptions: { amapOptions: {
center: [108.946465, 34.347984], center: [108.946465, 34.347984],
@ -331,6 +324,9 @@ const state = reactive({
shopListLoading: false, shopListLoading: false,
shopList: [], shopList: [],
}); });
onBeforeMount(async () => {
const res = await initMapLoad();
});
onMounted(() => { onMounted(() => {
state.resetForm = { ...state.form }; state.resetForm = { ...state.form };
}); });
@ -352,39 +348,33 @@ async function getTableData(query = "") {
console.log(error); console.log(error);
} }
} }
function onSearchResult(res) {
console.log("res");
console.log(res);
state.locationSearchList = res;
state.amapOptions.center = [res[0].lng, res[0].lat];
}
// 确认地址选择 // 确认地址选择
async function selectLocationHandle(item) { async function selectLocationHandle(item) {
console.log(item); console.log(item);
state.form.lng = item.lng; state.form.lng = item.location.lng;
state.form.lat = item.lat; state.form.lat = item.location.lat;
state.form.address = item.address; state.form.address = item.address;
state.showLocation = false; state.showLocation = false;
const position = `${item.lng},${item.lat}`; const position = `${item.location.lng},${item.location.lat}`;
const res = JSON.parse(await geocode({ location: position }));
console.log(res);
state.form.provinces = res.addressComponent.province; state.form.provinces = item.pname;
state.form.cities = res.addressComponent.city; state.form.cities = item.cityname;
state.form.districts = res.addressComponent.district; state.form.districts = item.adname;
} }
const emits = defineEmits(["close", "success"]); const emits = defineEmits(["close", "success"]);
const refForm = ref(null);
// 保存 // 保存
function submitHandle() { function submitHandle() {
state.$refs.form.validate(async (valid) => { refForm.value.validate(async (valid) => {
if (valid) { if (valid) {
state.formLoading = true; state.formLoading = true;
try { try {
await ShopApi.getListPost(state.form, state.form.id ? "put" : "post"); state.form.id ? await ShopApi.edit(state.form) : await ShopApi.add(state.form);
emits("success"); emits("success");
state.formLoading = false; state.formLoading = false;
$notify({ ElNotification({
title: "成功", title: "成功",
message: `${state.form.id ? "编辑" : "添加"}成功`, message: `${state.form.id ? "编辑" : "添加"}成功`,
type: "success", type: "success",
@ -404,38 +394,7 @@ function handleSuccess(response, file, fileList) {
console.log("上传成功", response); console.log("上传成功", response);
state.files = response.data; state.files = response.data;
} }
function handleBeforeRemove(file, fileList) {
for (let i = 0; i < state.files.length; i++) {
if (state.files[i].uid === file.uid) {
crudQiNiu.del([state.files[i].id]).then((res) => {});
return true;
}
}
}
function handlePictureCardPreview(file) {
state.dialogImageUrl = file.url;
state.dialogVisible = true;
}
// 监听上传失败
function handleError(e, file, fileList) {
const msg = JSON.parse(e.message);
state.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR);
}
// 刷新列表数据
function doSubmit() {
state.fileList = [];
state.showUpload = false;
switch (state.uploadIndex) {
case 1:
state.form.logo = state.files[0];
break;
case 2:
state.form.coverImg = state.files[0];
break;
default:
break;
}
}
function show(obj) { function show(obj) {
getTableData(); getTableData();
state.dialogVisible = true; state.dialogVisible = true;
@ -447,12 +406,80 @@ function show(obj) {
function close() { function close() {
state.dialogVisible = false; state.dialogVisible = false;
} }
function uploadClose() {
state.showUpload = false;
}
function reset() { function reset() {
state.form = { ...state.resetForm }; state.form = { ...state.resetForm };
} }
let ElMap = undefined;
let placeSearch = undefined;
let autoComplete = undefined;
let PlaceSearchIndex = 1;
function autoCompleteSearchBlur() {
setTimeout(() => {
state.searchOption.show = false;
}, 200);
}
function autoCompleteSearch(keyword) {
if (keyword === "") {
state.autoCompleteList = [];
return;
}
autoComplete.search(keyword, function (status, result) {
if (status === "complete" && result.info === "OK") {
// 搜索成功时，result即是对应的匹配数据
console.log(result);
state.searchOption.show = true;
state.autoCompleteList = result.tips;
}
});
}
function autoCompleteListClick(item) {
console.log(item);
state.searchOption.keyword = item.name;
state.autoCompleteList = [];
placeSearchSearch(item.name);
}
function placeSearchSearch(keyword) {
PlaceSearchIndex = 1;
if (keyword === "") {
state.locationSearchList = [];
return;
}
// 关键字查询
placeSearch.search(keyword, (status, result) => {
console.log(status);
console.log(result);
state.locationSearchList = result.poiList.pois;
});
}
function mapInit(map) {
map.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.ToolBar"], () => {
const toolBar = new AMap.ToolBar();
map.addControl(toolBar);
// 注意：输入提示插件2.0版本需引入AMap.AutoComplete，而1.4版本应使用AMap.Autocomplete
// 实例化AutoComplete
var autoOptions = {
city: "西安",
};
autoComplete = new AMap.AutoComplete(autoOptions);
//构造地点查询类
placeSearch = new AMap.PlaceSearch({
pageSize: 10, // 单页显示结果条数
pageIndex: PlaceSearchIndex, // 页码
city: "西安", // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
// panel: "search_wrap", // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
});
ElMap = map;
}
defineExpose({ defineExpose({
show, show,
close, close,
@ -473,6 +500,20 @@ defineExpose({
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
z-index: 3000;
.list {
background-color: #fff;
.item {
height: 40px;
line-height: 40px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
padding: 0 10px;
cursor: pointer;
&:hover {
background-color: #eee;
}
}
}
} }
.search_wrap { .search_wrap {

205
src/views/shop/list/index.vue
View File

@ -4,7 +4,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="3"> <el-col :span="3">
<el-input <el-input
v-model="query.name" v-model="state.query.name"
clearable clearable
placeholder="请输入店铺名称" placeholder="请输入店铺名称"
style="width: 100%" style="width: 100%"
@ -14,7 +14,7 @@
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-input <el-input
v-model="query.account" v-model="state.query.account"
clearable clearable
placeholder="请输入商户号" placeholder="请输入商户号"
style="width: 100%" style="width: 100%"
@ -23,11 +23,11 @@
/> />
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-select v-model="query.status" placeholder="请选择店铺状态" style="width: 100%"> <el-select v-model="state.query.status" placeholder="请选择店铺状态" style="width: 100%">
<el-option <el-option
:label="item.label" :label="item.label"
:value="item.type" :value="item.type"
v-for="item in status" v-for="item in state.status"
:key="item.type" :key="item.type"
/> />
</el-select> </el-select>
@ -39,12 +39,10 @@
</el-row> </el-row>
</div> </div>
<div class="head-container"> <div class="head-container">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addShop.show()"> <el-button type="primary" icon="plus" @click="addShopShow">添加店铺</el-button>
添加店铺
</el-button>
</div> </div>
<div class="head-container"> <div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading"> <el-table :data="state.tableData.list" v-loading="state.tableData.loading">
<el-table-column label="店铺信息" width="200"> <el-table-column label="店铺信息" width="200">
<template v-slot="scope"> <template v-slot="scope">
<div class="shop_info"> <div class="shop_info">
@ -52,9 +50,11 @@
:src="scope.row.logo" :src="scope.row.logo"
style="width: 50px; height: 50px; border-radius: 4px; background-color: #efefef" style="width: 50px; height: 50px; border-radius: 4px; background-color: #efefef"
> >
<div class="img_error" slot="error"> <template #error>
<i class="icon el-icon-document-delete"></i> <div class="img_error">
</div> <i class="icon el-icon-document-delete"></i>
</div>
</template>
</el-image> </el-image>
<div class="info"> <div class="info">
<span>{{ scope.row.shopName }}</span> <span>{{ scope.row.shopName }}</span>
@ -102,11 +102,18 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" width="150"> <el-table-column label="操作" width="150">
<template v-slot="scope"> <template v-slot="scope">
<el-link icon="edit" @click="$refs.addShop.show(scope.row)">编辑</el-link> <el-link @click="addShopShow(scope.row)">
<el-icon><Edit /></el-icon>
编辑
</el-link>
<el-dropdown @command="dropdownClick"> <el-dropdown @command="dropdownClick">
<el-link icon="arrow-down">更多</el-link> <el-link>
<el-dropdown-menu> 更多
<template #dropdown> <el-icon><ArrowDown /></el-icon>
</el-link>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{ row: scope.row, command: 1 }"> <el-dropdown-item :command="{ row: scope.row, command: 1 }">
三方配置 三方配置
</el-dropdown-item> </el-dropdown-item>
@ -114,8 +121,8 @@
<el-dropdown-item :command="3">前往店铺</el-dropdown-item> <el-dropdown-item :command="3">前往店铺</el-dropdown-item>
<el-dropdown-item :command="4">重置密码</el-dropdown-item> <el-dropdown-item :command="4">重置密码</el-dropdown-item>
<el-dropdown-item divided :command="5">删除</el-dropdown-item> <el-dropdown-item divided :command="5">删除</el-dropdown-item>
</template> </el-dropdown-menu>
</el-dropdown-menu> </template>
</el-dropdown> </el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
@ -123,98 +130,98 @@
</div> </div>
<div class="head-container"> <div class="head-container">
<el-pagination <el-pagination
:total="tableData.total" :total="state.tableData.total"
v-model:current-page="tableData.page" v-model:current-page="state.tableData.page"
:page-size="tableData.size" v-model:page-size="state.tableData.size"
:page-sizes="[10, 20, 30, 50, 100]"
@current-change="paginationChange" @current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes , prev, pager ,next, jumper "
></el-pagination> ></el-pagination>
</div> </div>
<addShop ref="addShop" @success="getTableData" /> <addShop ref="refAddShop" @success="getTableData" />
<detailModal ref="detailModal" /> <detailModal ref="refDetailModal" />
</div> </div>
</template> </template>
<script> <script setup>
import dayjs from "dayjs"; import dayjs from "dayjs";
import ShopApi from "@/api/account/shop"; import ShopApi from "@/api/account/shop";
import { ElNotification } from "element-plus";
import addShop from "./components/addShop.vue"; import addShop from "./components/addShop.vue";
import detailModal from "./components/detailModal.vue"; import detailModal from "./components/detailModal.vue";
export default {
components: { addShop, detailModal }, const refAddShop = ref(null);
data() { function addShopShow(row) {
return { refAddShop.value.show(row);
dayjs, }
query: { const state = reactive({
name: "", query: {
account: "", name: "",
status: "", account: "",
}, status: "",
status: [
{
type: 1,
label: "开启",
},
{
type: 0,
label: "关闭",
},
],
tableData: {
list: [],
page: 1,
size: 10,
loading: false,
total: 0,
},
};
}, },
mounted() { status: [
this.getTableData(); {
type: 1,
label: "开启",
},
{
type: 0,
label: "关闭",
},
],
tableData: {
list: [],
page: 1,
size: 10,
loading: false,
total: 0,
}, },
methods: { });
dropdownClick(e) { onMounted(() => {
switch (e.command) { getTableData();
case 1: });
this.$refs.detailModal.show(e.row);
break; const refDetailModal = ref(null);
default: function dropdownClick(e) {
break; switch (e.command) {
} case 1:
}, refDetailModal.value.show(e.row);
// 重置查询 break;
resetHandle() { default:
this.query.name = ""; break;
this.query.account = ""; }
this.query.status = ""; }
this.getTableData(); // 重置查询
}, function resetHandle() {
// 分页回调 state.query.name = "";
paginationChange(e) { state.query.account = "";
this.tableData.page = e; state.query.status = "";
this.getTableData(); getTableData();
}, }
// 获取商家列表 // 分页回调
async getTableData() { function paginationChange(e) {
this.tableData.loading = true; state.tableData.page = e;
try { getTableData();
const res = await ShopApi.getList({ }
page: this.tableData.page, // 获取商家列表
size: this.tableData.size, async function getTableData() {
shopName: this.query.name, state.tableData.loading = true;
account: this.query.account, try {
status: this.query.status, const res = await ShopApi.getList({
}); page: state.tableData.page,
this.tableData.loading = false; size: state.tableData.size,
this.tableData.list = res.records; shopName: state.query.name,
this.tableData.total = res.totalRow; account: state.query.account,
} catch (error) { status: state.query.status,
console.log(error); });
} state.tableData.loading = false;
}, state.tableData.list = res.records;
}, state.tableData.total = res.totalRow * 1;
}; } catch (error) {
console.log(error);
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -229,4 +236,8 @@ export default {
padding-left: 4px; padding-left: 4px;
} }
} }
.el-link {
min-height: 23px;
margin: 0 5px;
}
</style> </style>