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

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

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

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">
<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"
>
<el-upload
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="state.fileList"
:headers="headers"
:action="qiNiuUploadApi"
class="upload-demo"
multiple
>
<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>
<div class="search_box">
<el-input
v-model="state.searchOption.keyword"
placeholder="请输入关键字"
@focus="state.searchOption.focus = true"
@blur="autoCompleteSearchBlur"
@input="autoCompleteSearch(state.searchOption.keyword)"
>
<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"
>
{{ item.name }}
</div>
</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>
<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 {

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

@@ -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">
<i class="icon el-icon-document-delete"></i>
</div>
<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>
<template #dropdown>
<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>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
@@ -123,98 +130,98 @@
</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"
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,
query: {
name: "",
account: "",
status: "",
},
status: [
{
type: 1,
label: "开启",
},
{
type: 0,
label: "关闭",
},
],
tableData: {
list: [],
page: 1,
size: 10,
loading: false,
total: 0,
},
};
const refAddShop = ref(null);
function addShopShow(row) {
refAddShop.value.show(row);
}
const state = reactive({
query: {
name: "",
account: "",
status: "",
},
mounted() {
this.getTableData();
status: [
{
type: 1,
label: "开启",
},
{
type: 0,
label: "关闭",
},
],
tableData: {
list: [],
page: 1,
size: 10,
loading: false,
total: 0,
},
methods: {
dropdownClick(e) {
switch (e.command) {
case 1:
this.$refs.detailModal.show(e.row);
break;
default:
break;
}
},
// 重置查询
resetHandle() {
this.query.name = "";
this.query.account = "";
this.query.status = "";
this.getTableData();
},
// 分页回调
paginationChange(e) {
this.tableData.page = e;
this.getTableData();
},
// 获取商家列表
async getTableData() {
this.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,
});
this.tableData.loading = false;
this.tableData.list = res.records;
this.tableData.total = res.totalRow;
} catch (error) {
console.log(error);
}
},
},
};
});
onMounted(() => {
getTableData();
});
const refDetailModal = ref(null);
function dropdownClick(e) {
switch (e.command) {
case 1:
refDetailModal.value.show(e.row);
break;
default:
break;
}
}
// 重置查询
function resetHandle() {
state.query.name = "";
state.query.account = "";
state.query.status = "";
getTableData();
}
// 分页回调
function paginationChange(e) {
state.tableData.page = e;
getTableData();
}
// 获取商家列表
async function getTableData() {
state.tableData.loading = true;
try {
const res = await ShopApi.getList({
page: state.tableData.page,
size: state.tableData.size,
shopName: state.query.name,
account: state.query.account,
status: state.query.status,
});
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>