增加版本管理页面，修改店铺添加地图组件使用
This commit is contained in:
parent
0e3759b34d
commit
dda2f32ccc
|
|
@ -5,6 +5,10 @@
|
|||
## API文档
|
||||
|
||||
[超掌柜收银机](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/>
|
||||
|
||||
## 项目特色
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
"qs": "^6.14.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-i18n": "^11.1.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
@ -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";
|
||||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
|
@ -230,7 +230,7 @@ export interface UserInfo {
|
|||
roles: string[];
|
||||
|
||||
/** 权限 */
|
||||
perms: string[];
|
||||
promissionList: string[];
|
||||
|
||||
/** 店铺id */
|
||||
shopId: number;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -163,7 +163,9 @@
|
|||
:preview-src-list="scope.row[col.prop]"
|
||||
:initial-index="index"
|
||||
:preview-teleported="true"
|
||||
:style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
|
||||
:style="`width: ${col.imageWidth ?? 40}px; height: ${
|
||||
col.imageHeight ?? 40
|
||||
}px`"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -923,8 +925,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
|
|||
if (props.contentConfig.parseData) {
|
||||
data = props.contentConfig.parseData(data);
|
||||
}
|
||||
pagination.total = data.total;
|
||||
pageData.value = data.list;
|
||||
pagination.total = !props.contentConfig.resultListKey ? data.length : data.totalRow * 1;
|
||||
pageData.value = props.contentConfig.resultListKey
|
||||
? data[props.contentConfig.resultListKey]
|
||||
: data;
|
||||
} else {
|
||||
pageData.value = data;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,16 @@
|
|||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
{{ item.type }}
|
||||
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</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 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
|
|
@ -131,7 +138,7 @@ prepareFuncs.forEach((func) => func());
|
|||
|
||||
// 获取表单数据
|
||||
function getFormData(key?: string) {
|
||||
return key === undefined ? formData : (formData[key] ?? undefined);
|
||||
return key === undefined ? formData : formData[key] ?? undefined;
|
||||
}
|
||||
|
||||
// 设置表单值
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@
|
|||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- textarea 输入框 -->
|
||||
<template v-if="item.type === 'textarea' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
|
|
@ -288,7 +292,7 @@ prepareFuncs.forEach((func) => func());
|
|||
|
||||
// 获取表单数据
|
||||
function getFormData(key?: string) {
|
||||
return key === undefined ? formData : (formData[key] ?? undefined);
|
||||
return key === undefined ? formData : formData[key] ?? undefined;
|
||||
}
|
||||
|
||||
// 设置表单值
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export interface ISearchConfig {
|
|||
}
|
||||
|
||||
export interface IContentConfig<T = any> {
|
||||
resultListKey?: string;
|
||||
// 页面名称(参与组成权限标识,如sys:user:xxx)
|
||||
pageName: string;
|
||||
// table组件属性
|
||||
|
|
@ -218,6 +219,7 @@ export type IFormItems<T = any> = Array<{
|
|||
// 组件类型(如input,select,radio,custom等，默认input)
|
||||
type?:
|
||||
| "input"
|
||||
| "textarea"
|
||||
| "select"
|
||||
| "radio"
|
||||
| "switch"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { UploadRawFile, UploadRequestOptions } from "element-plus";
|
||||
import FileAPI, { FileInfo } from "@/api/file";
|
||||
import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
|
|
@ -130,7 +130,7 @@ function handleUpload(options: UploadRequestOptions) {
|
|||
formData.append(key, props.data[key]);
|
||||
});
|
||||
|
||||
FileAPI.upload(formData)
|
||||
CommonApi.upload(formData)
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
|
|
@ -152,9 +152,9 @@ function handleDelete() {
|
|||
*
|
||||
* @param fileInfo 上传成功后的文件信息
|
||||
*/
|
||||
const onSuccess = (fileInfo: FileInfo) => {
|
||||
const onSuccess = (fileInfo: string) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = fileInfo.url;
|
||||
modelValue.value = fileInfo;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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")) {
|
||||
return;
|
||||
}
|
||||
// if (roles.includes("ROOT")) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 检查权限
|
||||
const hasAuth = Array.isArray(requiredPerms)
|
||||
? requiredPerms.some((perm) => perms.includes(perm))
|
||||
: perms.includes(requiredPerms);
|
||||
// const hasAuth = Array.isArray(requiredPerms)
|
||||
// ? requiredPerms.some((perm) => perms.includes(perm))
|
||||
// : perms.includes(requiredPerms);
|
||||
const hasAuth = true;
|
||||
|
||||
// 如果没有权限，移除该元素
|
||||
if (!hasAuth && el.parentNode) {
|
||||
|
|
|
|||
|
|
@ -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
10
src/main.ts
|
|
@ -13,12 +13,12 @@ import "uno.css";
|
|||
import "default-passive-events";
|
||||
|
||||
// vue-amp初始化
|
||||
import { initAMapApiLoader } from "@vuemap/vue-amap";
|
||||
// import { initAMapApiLoader } from "@vuemap/vue-amap";
|
||||
import "@vuemap/vue-amap/dist/style.css";
|
||||
initAMapApiLoader({
|
||||
key: "6033c97e67bf2e9ceac306e1a3fa35f8",
|
||||
securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07",
|
||||
});
|
||||
// initAMapApiLoader({
|
||||
// key: "6033c97e67bf2e9ceac306e1a3fa35f8",
|
||||
// securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07",
|
||||
// });
|
||||
|
||||
const app = createApp(App);
|
||||
// 注册插件
|
||||
|
|
|
|||
|
|
@ -74,15 +74,16 @@ function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext)
|
|||
|
||||
/** 判断是否有权限 */
|
||||
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;
|
||||
}
|
||||
|
||||
const auths = type === "button" ? perms : roles;
|
||||
return typeof value === "string"
|
||||
? auths.includes(value)
|
||||
: value.some((perm) => auths.includes(perm));
|
||||
// const auths = type === "button" ? perms : roles;
|
||||
// return typeof value === "string"
|
||||
// ? auths.includes(value)
|
||||
// : value.some((perm) => auths.includes(perm));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -2,26 +2,29 @@ import { store } from "@/store";
|
|||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
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 { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";
|
||||
|
||||
export const useUserStore = defineStore("user", () => {
|
||||
const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
|
||||
const promissionList = useStorage<string[]>("promissionList", [] as string[]);
|
||||
|
||||
localStorage.setItem("shopId", "" + userInfo.value.shopId);
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*
|
||||
* @param {LoginFormData}
|
||||
* @param {loginRequest}
|
||||
* @returns
|
||||
*/
|
||||
function login(LoginFormData: LoginFormData) {
|
||||
function login(loginRequest: loginRequest) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
AuthAPI.login(LoginFormData)
|
||||
AuthAPI.login(loginRequest)
|
||||
.then((data) => {
|
||||
Object.assign(userInfo.value, { ...data.shopInfo });
|
||||
promissionList.value = data.promissionList;
|
||||
const token = data.tokenInfo.tokenValue;
|
||||
setToken(token); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
|
||||
setRefreshToken(token);
|
||||
|
|
@ -110,6 +113,7 @@ export const useUserStore = defineStore("user", () => {
|
|||
|
||||
return {
|
||||
userInfo,
|
||||
promissionList,
|
||||
getUserInfo,
|
||||
login,
|
||||
logout,
|
||||
|
|
|
|||
|
|
@ -29,3 +29,6 @@
|
|||
.amap-sug-result {
|
||||
z-index: 3000;
|
||||
}
|
||||
.head-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
|
@ -19,9 +19,9 @@ service.interceptors.request.use(
|
|||
const accessToken = getToken();
|
||||
// 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
|
||||
if (config.headers.Authorization !== "no-auth" && accessToken) {
|
||||
config.headers.Authorization = accessToken;
|
||||
config.headers.token = accessToken;
|
||||
} else {
|
||||
delete config.headers.Authorization;
|
||||
delete config.headers.token;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
|
|
@ -41,6 +41,19 @@ service.interceptors.response.use(
|
|||
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 || "系统出错");
|
||||
return Promise.reject(new Error(msg || "Error"));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<template></template>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
>
|
||||
<div style="height: 50vh; overflow-y: auto">
|
||||
<el-form
|
||||
ref="form"
|
||||
ref="refForm"
|
||||
:model="state.form"
|
||||
:rules="state.rules"
|
||||
label-width="120px"
|
||||
|
|
@ -16,14 +16,14 @@
|
|||
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
||||
</el-form-item>
|
||||
<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="chain">连锁店</el-radio-button>
|
||||
<el-radio-button value="join">加盟店</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips">请谨慎修改！！！</div>
|
||||
</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
|
||||
v-model="state.form.mainId"
|
||||
placeholder="请选择主店铺"
|
||||
|
|
@ -45,26 +45,10 @@
|
|||
<el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="门店logo" prop="logo">
|
||||
<el-image
|
||||
:src="state.form.logo || uploadImg"
|
||||
fit="contain"
|
||||
style="width: 80px; height: 80px"
|
||||
@click="
|
||||
state.showUpload = true;
|
||||
state.uploadIndex = 1;
|
||||
"
|
||||
></el-image>
|
||||
<SingleImageUpload v-model="state.form.logo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店照片">
|
||||
<el-image
|
||||
:src="state.form.coverImg || uploadImg"
|
||||
fit="contain"
|
||||
style="width: 80px; height: 80px"
|
||||
@click="
|
||||
state.showUpload = true;
|
||||
state.uploadIndex = 2;
|
||||
"
|
||||
></el-image>
|
||||
<SingleImageUpload v-model="state.form.frontImg" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营模式">
|
||||
<el-radio-group v-model="state.form.registerType">
|
||||
|
|
@ -73,7 +57,7 @@
|
|||
</el-radio-group>
|
||||
<div class="tips">请谨慎修改！！！</div>
|
||||
</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-button value="0">不可直接管理</el-radio-button>
|
||||
<el-radio-button value="1">直接管理</el-radio-button>
|
||||
|
|
@ -87,17 +71,17 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号" prop="account">
|
||||
<el-input v-model="state.form.account" placeholder="请输入登录账号"></el-input>
|
||||
<el-form-item label="登录账号" prop="accountName">
|
||||
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
||||
<el-input
|
||||
type="password"
|
||||
show-password
|
||||
v-model="state.form.password"
|
||||
v-model="state.form.accountPwd"
|
||||
placeholder="请输入登录密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -117,7 +101,7 @@
|
|||
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="店铺经度" prop="provinces">
|
||||
<el-form-item label="店铺经度" prop="lat">
|
||||
<el-row>
|
||||
<el-col :span="9" v-if="state.form.provinces">
|
||||
<el-input
|
||||
|
|
@ -168,46 +152,48 @@
|
|||
>
|
||||
<div class="map_box">
|
||||
<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-search-box
|
||||
:visible="true"
|
||||
@select="onSearchResult"
|
||||
@choose="onSearchResult"
|
||||
city="西安"
|
||||
></el-amap-search-box>
|
||||
</el-amap>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="state.showUpload"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
width="500px"
|
||||
@close="state.showUpload = false"
|
||||
<div class="search_box">
|
||||
<el-input
|
||||
v-model="state.searchOption.keyword"
|
||||
placeholder="请输入关键字"
|
||||
@focus="state.searchOption.focus = true"
|
||||
@blur="autoCompleteSearchBlur"
|
||||
@input="autoCompleteSearch(state.searchOption.keyword)"
|
||||
>
|
||||
<el-upload
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:file-list="state.fileList"
|
||||
:headers="headers"
|
||||
:action="qiNiuUploadApi"
|
||||
class="upload-demo"
|
||||
multiple
|
||||
<template #append>
|
||||
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||
搜索
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||
<div
|
||||
class="item"
|
||||
@click="autoCompleteListClick(item)"
|
||||
v-for="item in state.autoCompleteList"
|
||||
:key="item.id"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<template #tip>
|
||||
<div style="display: block" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
<el-button @click="uploadClose">取消</el-button>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<template #footer>
|
||||
|
|
@ -225,6 +211,9 @@
|
|||
<script setup>
|
||||
import { getToken } from "@/utils/auth";
|
||||
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 }
|
||||
import ShopApi from "@/api/account/shop";
|
||||
const validateLogo = (rule, value, callback) => {
|
||||
|
|
@ -248,13 +237,13 @@ const state = reactive({
|
|||
id: "",
|
||||
shopName: "",
|
||||
mainId: "",
|
||||
type: "only",
|
||||
shopType: "only",
|
||||
tube_type: "0",
|
||||
registerType: "restaurant",
|
||||
profiles: "release",
|
||||
registerCode: "",
|
||||
account: "",
|
||||
password: "",
|
||||
activateCode: "",
|
||||
accountName: "",
|
||||
accountPwd: "",
|
||||
phone: "",
|
||||
supportDeviceNumber: 1,
|
||||
lat: "",
|
||||
|
|
@ -263,7 +252,7 @@ const state = reactive({
|
|||
detail: "",
|
||||
status: 1,
|
||||
logo: "",
|
||||
coverImg: "",
|
||||
frontImg: "",
|
||||
provinces: "",
|
||||
cities: "",
|
||||
districts: "",
|
||||
|
|
@ -285,7 +274,7 @@ const state = reactive({
|
|||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
provinces: [
|
||||
lat: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择坐标",
|
||||
|
|
@ -299,14 +288,14 @@ const state = reactive({
|
|||
trigger: "change",
|
||||
},
|
||||
],
|
||||
account: [
|
||||
accountName: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
accountPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
|
|
@ -322,7 +311,11 @@ const state = reactive({
|
|||
searchOption: {
|
||||
city: "西安",
|
||||
citylimit: false,
|
||||
keyword: "",
|
||||
show: false,
|
||||
focus: false,
|
||||
},
|
||||
autoCompleteList: [],
|
||||
locationSearchList: [],
|
||||
amapOptions: {
|
||||
center: [108.946465, 34.347984],
|
||||
|
|
@ -331,6 +324,9 @@ const state = reactive({
|
|||
shopListLoading: false,
|
||||
shopList: [],
|
||||
});
|
||||
onBeforeMount(async () => {
|
||||
const res = await initMapLoad();
|
||||
});
|
||||
onMounted(() => {
|
||||
state.resetForm = { ...state.form };
|
||||
});
|
||||
|
|
@ -352,39 +348,33 @@ async function getTableData(query = "") {
|
|||
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) {
|
||||
console.log(item);
|
||||
state.form.lng = item.lng;
|
||||
state.form.lat = item.lat;
|
||||
state.form.lng = item.location.lng;
|
||||
state.form.lat = item.location.lat;
|
||||
state.form.address = item.address;
|
||||
state.showLocation = false;
|
||||
|
||||
const position = `${item.lng},${item.lat}`;
|
||||
const res = JSON.parse(await geocode({ location: position }));
|
||||
console.log(res);
|
||||
const position = `${item.location.lng},${item.location.lat}`;
|
||||
|
||||
state.form.provinces = res.addressComponent.province;
|
||||
state.form.cities = res.addressComponent.city;
|
||||
state.form.districts = res.addressComponent.district;
|
||||
state.form.provinces = item.pname;
|
||||
state.form.cities = item.cityname;
|
||||
state.form.districts = item.adname;
|
||||
}
|
||||
const emits = defineEmits(["close", "success"]);
|
||||
const refForm = ref(null);
|
||||
// 保存
|
||||
function submitHandle() {
|
||||
state.$refs.form.validate(async (valid) => {
|
||||
refForm.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
state.formLoading = true;
|
||||
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");
|
||||
state.formLoading = false;
|
||||
$notify({
|
||||
ElNotification({
|
||||
title: "成功",
|
||||
message: `${state.form.id ? "编辑" : "添加"}成功`,
|
||||
type: "success",
|
||||
|
|
@ -404,38 +394,7 @@ function handleSuccess(response, file, fileList) {
|
|||
console.log("上传成功", response);
|
||||
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) {
|
||||
getTableData();
|
||||
state.dialogVisible = true;
|
||||
|
|
@ -447,12 +406,80 @@ function show(obj) {
|
|||
function close() {
|
||||
state.dialogVisible = false;
|
||||
}
|
||||
function uploadClose() {
|
||||
state.showUpload = false;
|
||||
}
|
||||
function reset() {
|
||||
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({
|
||||
show,
|
||||
close,
|
||||
|
|
@ -473,6 +500,20 @@ defineExpose({
|
|||
position: absolute;
|
||||
top: 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 {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
v-model="state.query.name"
|
||||
clearable
|
||||
placeholder="请输入店铺名称"
|
||||
style="width: 100%"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-input
|
||||
v-model="query.account"
|
||||
v-model="state.query.account"
|
||||
clearable
|
||||
placeholder="请输入商户号"
|
||||
style="width: 100%"
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
/>
|
||||
</el-col>
|
||||
<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
|
||||
:label="item.label"
|
||||
:value="item.type"
|
||||
v-for="item in status"
|
||||
v-for="item in state.status"
|
||||
:key="item.type"
|
||||
/>
|
||||
</el-select>
|
||||
|
|
@ -39,12 +39,10 @@
|
|||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addShop.show()">
|
||||
添加店铺
|
||||
</el-button>
|
||||
<el-button type="primary" icon="plus" @click="addShopShow">添加店铺</el-button>
|
||||
</div>
|
||||
<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">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
|
|
@ -52,9 +50,11 @@
|
|||
:src="scope.row.logo"
|
||||
style="width: 50px; height: 50px; border-radius: 4px; background-color: #efefef"
|
||||
>
|
||||
<div class="img_error" slot="error">
|
||||
<template #error>
|
||||
<div class="img_error">
|
||||
<i class="icon el-icon-document-delete"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="info">
|
||||
<span>{{ scope.row.shopName }}</span>
|
||||
|
|
@ -102,11 +102,18 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<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-link icon="arrow-down">更多</el-link>
|
||||
<el-dropdown-menu>
|
||||
<el-link>
|
||||
更多
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</el-link>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="{ row: scope.row, command: 1 }">
|
||||
三方配置
|
||||
</el-dropdown-item>
|
||||
|
|
@ -114,8 +121,8 @@
|
|||
<el-dropdown-item :command="3">前往店铺</el-dropdown-item>
|
||||
<el-dropdown-item :command="4">重置密码</el-dropdown-item>
|
||||
<el-dropdown-item divided :command="5">删除</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -123,29 +130,31 @@
|
|||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
v-model:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
:total="state.tableData.total"
|
||||
v-model:current-page="state.tableData.page"
|
||||
v-model:page-size="state.tableData.size"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
@current-change="paginationChange"
|
||||
layout="total, sizes , prev, pager ,next, jumper "
|
||||
></el-pagination>
|
||||
</div>
|
||||
<addShop ref="addShop" @success="getTableData" />
|
||||
<detailModal ref="detailModal" />
|
||||
<addShop ref="refAddShop" @success="getTableData" />
|
||||
<detailModal ref="refDetailModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import ShopApi from "@/api/account/shop";
|
||||
|
||||
import { ElNotification } from "element-plus";
|
||||
import addShop from "./components/addShop.vue";
|
||||
import detailModal from "./components/detailModal.vue";
|
||||
export default {
|
||||
components: { addShop, detailModal },
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
|
||||
const refAddShop = ref(null);
|
||||
function addShopShow(row) {
|
||||
refAddShop.value.show(row);
|
||||
}
|
||||
const state = reactive({
|
||||
query: {
|
||||
name: "",
|
||||
account: "",
|
||||
|
|
@ -168,53 +177,51 @@ export default {
|
|||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
dropdownClick(e) {
|
||||
});
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
|
||||
const refDetailModal = ref(null);
|
||||
function dropdownClick(e) {
|
||||
switch (e.command) {
|
||||
case 1:
|
||||
this.$refs.detailModal.show(e.row);
|
||||
refDetailModal.value.show(e.row);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = "";
|
||||
this.query.account = "";
|
||||
this.query.status = "";
|
||||
this.getTableData();
|
||||
},
|
||||
function resetHandle() {
|
||||
state.query.name = "";
|
||||
state.query.account = "";
|
||||
state.query.status = "";
|
||||
getTableData();
|
||||
}
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
function paginationChange(e) {
|
||||
state.tableData.page = e;
|
||||
getTableData();
|
||||
}
|
||||
// 获取商家列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
async function getTableData() {
|
||||
state.tableData.loading = true;
|
||||
try {
|
||||
const res = await ShopApi.getList({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
shopName: this.query.name,
|
||||
account: this.query.account,
|
||||
status: this.query.status,
|
||||
page: state.tableData.page,
|
||||
size: state.tableData.size,
|
||||
shopName: state.query.name,
|
||||
account: state.query.account,
|
||||
status: state.query.status,
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.list = res.records;
|
||||
this.tableData.total = res.totalRow;
|
||||
state.tableData.loading = false;
|
||||
state.tableData.list = res.records;
|
||||
state.tableData.total = res.totalRow * 1;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -229,4 +236,8 @@ export default {
|
|||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
.el-link {
|
||||
min-height: 23px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue