增减用户列表页面,修改crud部分代码,修改店铺列表页面增加三方配置弹窗

This commit is contained in:
2025-02-18 15:27:07 +08:00
parent 964aab217d
commit ef45206230
18 changed files with 1271 additions and 105 deletions

View File

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

View File

@@ -0,0 +1,135 @@
import shopUserApi, { type addRequest } from "@/api/account/shopUser";
import type { IModalConfig } from "@/components/CURD/types";
const modalConfig: IModalConfig<addRequest> = {
pageName: "sys:user",
dialog: {
title: "添加用户",
width: 800,
draggable: true,
},
form: {
labelWidth: 140,
},
formAction: function (data: addRequest) {
return shopUserApi.add(data.shopid, data);
},
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "用户头像",
prop: "headImg",
rules: [{ required: false, message: "请选择用户头像", trigger: "blur" }],
type: "UpImage",
attrs: {
placeholder: "请选择用户头像",
},
},
{
label: "用户昵称",
prop: "nickName",
rules: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户昵称",
},
col: {
xs: 24,
sm: 12,
},
},
{
type: "input",
label: "手机号码",
prop: "phone",
rules: [
{
required: true,
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
attrs: {
placeholder: "请输入手机号码",
maxlength: 11,
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "会员生日",
prop: "birthDay",
rules: [{ required: false, message: "请选择会员生日", trigger: "blur" }],
type: "date-picker",
attrs: {
placeholder: "请选择会员生日",
},
col: {
xs: 24,
sm: 12,
},
},
{
type: "radio",
label: "性别",
prop: "sex",
rules: [{ required: false, message: "请选择性别", trigger: "blur" }],
attrs: {
placeholder: "请选择性别",
},
initialValue: '',
options: [
{ label: '男', value: 1 },
{ label: '女', value: 0 },
],
col: {
xs: 24,
sm: 12,
},
},
{
label: "账户积分",
prop: "accountPoints",
rules: [{ required: false, message: "请输入账户积分", trigger: "blur" }],
type: "input-number",
attrs: {
placeholder: "请输入账户积分",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "钱包余额",
prop: "amount",
rules: [{ required: false, message: "请输入钱包余额", trigger: "blur" }],
type: "input-number",
attrs: {
placeholder: "请输入钱包余额",
},
col: {
xs: 24,
sm: 12,
},
},
{
type: "radio",
label: "是否会员",
prop: "isVip",
options: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
},
],
};
// 如果有异步数据会修改配置的推荐用reactive包裹而纯静态配置的可以直接导出
export default reactive(modalConfig);

View File

@@ -0,0 +1,46 @@
export const isVipOptions: statusOptions[] = [
{ label: "全部", value: "" },
{ label: "非会员", value: "0" },
{ label: "会员", value: "1" },
];
export type optionsType = "isVip";
export function returnOptions(type: optionsType) {
if (type === "isVip") {
return isVipOptions;
}
}
export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
const options = returnOptions(optionsType);
if (!options) {
return "";
}
const option = options.find((item) => item.value === value);
return option ? option.label : "";
}
export interface options {
label: string;
value: string | number;
[property: string]: any;
}
export interface statusOptions extends options {
}
export type payTypeValue =
| ""
| "cash"
| "bank"
| "scanCode"
| "deposit"
| "vipPay"
| "arrears"
| "virtual"
| "arrears";
export interface payTypeOptions extends options {
value: payTypeValue;
}

View File

@@ -0,0 +1,106 @@
import shopUserApi, { type getListRequest } from "@/api/account/shopUser";
import type { IContentConfig } from "@/components/CURD/types";
const contentConfig: IContentConfig<any> = {
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: getListRequest) {
return shopUserApi.getList(params);
},
// deleteAction: shopUserApi.delete,
// modifyAction: function (data) {
// // return shopUserApi.edit(data);
// },
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: "user",
templet: "custom",
slotName: "user",
},
{
label: "性别",
align: "center",
prop: "sex",
templet: "custom",
slotName: "gender",
},
{
label: "会员",
align: "center",
prop: "isVip",
templet: "custom",
slotName: "bol",
},
{
label: "手机号",
align: "center",
prop: "phone",
width: 140,
templet: "custom",
slotName: "mobile",
},
{
label: "余额",
align: "center",
prop: "amount",
},
{
label: "积分",
align: "center",
prop: "accountPoints",
},
{
label: "消费累计",
align: "center",
prop: "consumeAmount",
},
{
label: "消费次数累计",
align: "center",
prop: "consumeAmount",
},
{
label: "注册时间",
align: "center",
prop: "createTime",
},
{
label: "操作",
align: "center",
fixed: "right",
width: 180,
templet: "tool",
operat: [
{
name: "edit",
text: "编辑",
},
{
name: "more",
text: "更多",
options: [
{ label: '增减余额', command: 'change-money' }
]
},
],
},
],
};
export default contentConfig;

View File

@@ -0,0 +1,145 @@
import shopUserApi, { type editMoneyRequest } from "@/api/account/shopUser";
import type { IModalConfig } from "@/components/CURD/types";
import { min } from "lodash";
// 增减或者减少余额的类型
export interface optuions {
label: string;
value: string | number;
}
export const addOptions: optuions[] = [
{ label: '增加充值', value: 'adminIn' },
{ label: '增加消费退款', value: 'adminRefund' },
]
export const reduceOptions: optuions[] = [
{ label: '扣除消费', value: 'adminOut' },
{ label: '扣除充值退款', value: 'adminInOut' },
]
const modalConfig: IModalConfig<editMoneyRequest> = {
pageName: "sys:user",
dialog: {
title: "增减余额",
width: 800,
draggable: true,
},
pk: "id",
form: {
labelWidth: 140,
},
formAction: function (data) {
return shopUserApi.editMoney(data.shopid, data);
},
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
{
label: "用户昵称",
prop: "nickName",
rules: [{ required: false, message: "请输入用户昵称", trigger: "blur" }],
type: "input",
disabled: true,
attrs: {
placeholder: "请输入用户昵称",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "钱包余额",
prop: "amount",
disabled: true,
rules: [{ required: false, message: "", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "",
},
col: {
xs: 24,
sm: 12,
},
},
{
type: "radio",
label: "增减余额",
prop: "type",
rules: [{ required: true, message: "增减余额", trigger: "blur" }],
initialValue: 1,
options: [
{ label: '增加', value: 1 },
{ label: '减少', value: 0 },
],
col: {
xs: 24,
sm: 12,
},
watch() {
}
},
{
label: "金额",
prop: "money",
rules: [{ required: false, message: "请输入要增加或者减少的金额", trigger: "blur" }],
type: "input-number",
attrs: {
placeholder: "请输入要增加或者减少的金额",
min: 0,
},
col: {
xs: 24,
sm: 12,
},
initialValue: 0
},
{
label: "类型",
prop: "bizEnum",
rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
type: "radio-button",
attrs: {
placeholder: "请选择类型",
},
options: addOptions,
},
{
label: "备注",
prop: "remark",
rules: [{ required: false, message: "请输入备注", trigger: "blur" }],
type: "textarea",
attrs: {
placeholder: "请输入备注",
},
},
// {
// label: "钱包余额",
// prop: "amount",
// rules: [{ required: false, message: "请输入钱包余额", trigger: "blur" }],
// type: "input-number",
// attrs: {
// placeholder: "请输入钱包余额",
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
// {
// type: "radio",
// label: "是否会员",
// prop: "isVip",
// options: [
// { label: '是', value: 1 },
// { label: '否', value: 0 },
// ],
// },
],
};
// 如果有异步数据会修改配置的推荐用reactive包裹而纯静态配置的可以直接导出
export default reactive(modalConfig);

View File

@@ -0,0 +1,136 @@
import shopUserApi, { type editRequest } from "@/api/account/shopUser";
import type { IModalConfig } from "@/components/CURD/types";
const modalConfig: IModalConfig<editRequest> = {
pageName: "sys:user",
dialog: {
title: "修改用户",
width: 800,
draggable: true,
},
pk: "id",
form: {
labelWidth: 140,
},
formAction: function (data: editRequest) {
return shopUserApi.edit(data.shopid, data);
},
beforeSubmit(data) {
console.log("提交之前处理", data);
},
formItems: [
// {
// label: "用户头像",
// prop: "headImg",
// rules: [{ required: false, message: "请选择用户头像", trigger: "blur" }],
// type: "UpImage",
// attrs: {
// placeholder: "请选择用户头像",
// },
// },
{
label: "用户昵称",
prop: "nickName",
rules: [{ required: false, message: "请输入用户昵称", trigger: "blur" }],
type: "input",
attrs: {
placeholder: "请输入用户昵称",
},
col: {
xs: 24,
sm: 12,
},
},
// {
// type: "input",
// label: "手机号码",
// prop: "phone",
// rules: [
// {
// required: true,
// pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
// message: "请输入正确的手机号码",
// trigger: "blur",
// },
// ],
// attrs: {
// placeholder: "请输入手机号码",
// maxlength: 11,
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
{
label: "会员生日",
prop: "birthDay",
rules: [{ required: false, message: "请选择会员生日", trigger: "blur" }],
type: "date-picker",
attrs: {
placeholder: "请选择会员生日",
},
col: {
xs: 24,
sm: 12,
},
},
{
type: "radio",
label: "性别",
prop: "sex",
rules: [{ required: false, message: "请选择性别", trigger: "blur" }],
attrs: {
placeholder: "请选择性别",
},
initialValue: '',
options: [
{ label: '男', value: 1 },
{ label: '女', value: 0 },
],
col: {
xs: 24,
sm: 12,
},
},
// {
// label: "账户积分",
// prop: "accountPoints",
// rules: [{ required: false, message: "请输入账户积分", trigger: "blur" }],
// type: "input-number",
// attrs: {
// placeholder: "请输入账户积分",
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
// {
// label: "钱包余额",
// prop: "amount",
// rules: [{ required: false, message: "请输入钱包余额", trigger: "blur" }],
// type: "input-number",
// attrs: {
// placeholder: "请输入钱包余额",
// },
// col: {
// xs: 24,
// sm: 12,
// },
// },
// {
// type: "radio",
// label: "是否会员",
// prop: "isVip",
// options: [
// { label: '是', value: 1 },
// { label: '否', value: 0 },
// ],
// },
],
};
// 如果有异步数据会修改配置的推荐用reactive包裹而纯静态配置的可以直接导出
export default reactive(modalConfig);

View File

@@ -0,0 +1,35 @@
import type { ISearchConfig } from "@/components/CURD/types";
import { isVipOptions } from "./config";
const searchConfig: ISearchConfig = {
pageName: "sys:user",
inline: true,
isExpandable: false,
formItems: [
{
type: "radio-button",
label: "是否会员",
prop: "isVip",
attrs: {
placeholder: "请选择",
clearable: true,
},
options: isVipOptions,
},
{
type: "input",
label: "昵称或手机号",
prop: "key",
attrs: {
placeholder: "请输入昵称或手机号",
clearable: true,
style: {
width: "200px",
},
},
},
],
};
export default searchConfig;

View File

@@ -0,0 +1,169 @@
<template>
<div class="app-container">
<!-- 列表 -->
<!-- 搜索 -->
<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 #options="scope">
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
</template>
<template #bol="scope">
{{ scope.row[scope.prop] ? "是" : "否" }}
</template>
<template #gender="scope">
<el-tag
:type="
scope.row[scope.prop] == null
? 'info'
: scope.row[scope.prop] == 1
? 'success'
: 'warning'
"
>
{{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
</el-tag>
</template>
<template #user="scope">
<div class="flex align-center">
<el-avatar :src="scope.row.headImg" />
<el-tag>{{ scope.row.nickName }}</el-tag>
</div>
</template>
<template #link="scope">
<el-link>{{ scope.row[scope.prop] }}</el-link>
</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"
></page-modal>
<!-- 编辑 -->
<page-modal
ref="editModalRef"
:modal-config="editModalConfig"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 用户余额修改 -->
<page-modal
ref="editMoneyModalRef"
:modal-config="editMoneyModalConfig"
@formDataChange="formDataChange"
@submit-click="handleSubmitClick"
></page-modal>
</div>
</template>
<script setup >
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import editModalConfig from "./config/edit";
import editMoneyModalConfig, { addOptions, reduceOptions } from "./config/edit-money";
import searchConfig from "./config/search";
import { returnOptionsLabel } from "./config/config";
const editMoneyModalRef = ref(null);
const {
searchRef,
contentRef,
addModalRef,
editModalRef,
handleQueryClick,
handleResetClick,
// handleAddClick,
// handleEditClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
handleFilterChange,
} = usePage();
// 修改金额表单类型
function formDataChange(type, val) {
if (type == "type") {
if (val == 1) {
editMoneyModalConfig.formItems[4].options = addOptions;
} else {
editMoneyModalConfig.formItems[4].options = reduceOptions;
}
}
}
// 新增
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) {
editModalRef.value?.handleDisabled(false);
editModalRef.value?.setModalVisible();
// 根据id获取数据进行填充
// const data = await VersionApi.getFormData(row.id);
editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
}
// 其他工具栏
function handleToolbarClick(name) {
console.log(name);
if (name === "custom1") {
ElMessage.success("点击了自定义1按钮");
}
}
// 其他操作列
async function handleOperatClick(data) {
const row = data.row;
if (data.name == "more") {
if (data.command === "change-money") {
editMoneyModalRef.value.setModalVisible();
editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
return;
}
return;
}
}
// 切换示例
const isA = ref(true);
</script>
<style scoped>
.align-center {
align-items: center;
}
</style>