完成订单模块

This commit is contained in:
gxwebsoft
2024-04-25 23:38:42 +08:00
parent a6cb9f7f78
commit 16e38b6f31
58 changed files with 6130 additions and 1753 deletions

View File

@@ -75,16 +75,19 @@
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addMerchantAccount, updateMerchantAccount } from '@/api/shop/merchantAccount';
import {
addMerchantAccount,
updateMerchantAccount
} from '@/api/shop/merchantAccount';
import { MerchantAccount } from '@/api/shop/merchantAccount/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import {DictData} from "@/api/system/dict-data/model";
import {Merchant} from "@/api/shop/merchant/model";
import {Role} from "@/api/system/role/model";
import { DictData } from '@/api/system/dict-data/model';
import { Merchant } from '@/api/shop/merchant/model';
import { Role } from '@/api/system/role/model';
// 是否是修改
const isUpdate = ref(false);
@@ -196,7 +199,7 @@
const chooseRoleId = (item: Role) => {
form.roleId = item.roleId;
form.roleName = item.roleName;
}
};
const { resetFields } = useForm(form, rules);
@@ -212,7 +215,9 @@
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateMerchantAccount : addMerchantAccount;
const saveOrUpdate = isUpdate.value
? updateMerchantAccount
: addMerchantAccount;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;

View File

@@ -8,7 +8,6 @@
<span>添加</span>
</a-button>
<a-radio-group v-model:value="where.cardCode" @change="handleSearch">
<a-radio-button :value="undefined">全部</a-radio-button>
<a-radio-button :value="`月/年卡`">/年卡</a-radio-button>
<a-radio-button :value="`次卡`">次卡</a-radio-button>
<a-radio-button :value="`充值卡`">充值卡</a-radio-button>
@@ -44,7 +43,7 @@
// 表单数据
const { where } = useSearch<any>({
cardCode: ''
cardCode: '月/年卡'
});
const handleSearch = () => {

View File

@@ -0,0 +1,289 @@
<!-- 分类编辑弹窗 -->
<template>
<ele-modal
:width="620"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '修改分类' : '添加分类'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="上级分类" name="parentId">
<a-tree-select
allow-clear
:tree-data="categoryList"
tree-default-expand-all
placeholder="请选择上级分类"
:value="form.parentId || undefined"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="(value?: number) => (form.parentId = value)"
/>
</a-form-item>
<a-form-item label="分类名称" name="title">
<a-input
allow-clear
placeholder="请输入分类名称"
v-model:value="form.title"
@pressEnter="save"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="99999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="是否展示" name="status">
<a-switch
checked-children=""
un-checked-children=""
:checked="form.status === 0"
@update:checked="updateHideValue"
/>
</a-form-item>
</a-col>
</a-row>
<div style="margin-bottom: 22px">
<a-divider />
</div>
<a-form-item
label="备注"
name="comments"
:label-col="
styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
"
:wrapper-col="
styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
"
>
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注信息"
v-model:value="form.comments"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import {
addArticleCategory,
updateArticleCategory
} from '@/api/cms/category';
import type { ArticleCategory } from '@/api/cms/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { Design } from '@/api/cms/design/model';
import type { Rule } from 'ant-design-vue/es/form';
const useForm = Form.useForm;
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: ArticleCategory | null;
// 分类id
categoryId?: number;
// 全部分类
categoryList: ArticleCategory[];
}>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const form = reactive<ArticleCategory>({
categoryId: undefined,
type: 0,
title: '',
parentId: undefined,
image: '',
path: '/article/:id',
component: '/article/index',
pageId: undefined,
pageName: '',
status: 0,
showIndex: 0,
recommend: 0,
sortNumber: 100
});
// 表单验证规则
const rules = reactive({
type: [
{
required: true,
message: '请选择分类类型',
type: 'number',
trigger: 'blur'
}
],
title: [
{
required: true,
message: '请输入分类名称',
type: 'string',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
type: 'number',
trigger: 'blur'
}
],
status: [
{
required: true,
message: '请设置是否展示',
type: 'number',
trigger: 'blur'
}
],
meta: [
{
type: 'string',
validator: async (_rule: Rule, value: string) => {
if (value) {
const msg = '请输入正确的JSON格式';
try {
const obj = JSON.parse(value);
if (typeof obj !== 'object' || obj === null) {
return Promise.reject(msg);
}
} catch (_e) {
return Promise.reject(msg);
}
}
return Promise.resolve();
},
trigger: 'blur'
}
]
});
const { resetFields, validate } = useForm(form, rules);
const onType = (index: number) => {
if (index == 0) {
form.path = '/article/:id';
form.component = '/article/index';
}
if (index == 1) {
form.path = '/page/:id';
form.component = '/about/index';
}
if (index == 2) {
form.path = undefined;
form.component = '';
}
};
const choosePageId = (data: Design) => {
form.pageName = data.name;
form.pageId = data.pageId;
form.title = data.name;
};
const updateHideValue = (value: boolean) => {
form.status = value ? 0 : 1;
};
const updateIndexValue = (value: boolean) => {
form.showIndex = value ? 1 : 0;
};
const updateRecommendValue = (value: boolean) => {
form.recommend = value ? 1 : 0;
};
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
const categoryData = {
...form,
parentId: form.parentId || 0
};
const saveOrUpdate = isUpdate.value
? updateArticleCategory
: addArticleCategory;
saveOrUpdate(categoryData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.parentId = props.categoryId;
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>

View File

@@ -1,4 +1,4 @@
<!-- 机构选择下拉框 -->
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
@@ -12,7 +12,7 @@
</template>
<script lang="ts" setup>
import type { Organization } from '@/api/system/organization/model';
import type { Article } from '@/api/cms/article/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
@@ -23,12 +23,12 @@
// (v-modal)
value?: number;
//
placeholder?: string;
//
data: Organization[];
placeholder?: any;
//
data: Article[];
}>(),
{
placeholder: '请选择角色'
placeholder: '请选择上级分类'
}
);

View File

@@ -0,0 +1,85 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<plus-outlined />
</template>
<span>添加</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
@click="removeBatch"
:disabled="props.selection?.length === 0"
>
<template #icon>
<delete-outlined />
</template>
<span>批量删除</span>
</a-button>
<a-input-search
allow-clear
v-model:value="where.keywords"
placeholder="请输入关键词"
@search="search"
@pressEnter="search"
/>
<a-button
type="primary"
style="background-color: var(--orange-6); border-color: var(--orange-5)"
@click="openPeriod"
>查看场馆时段</a-button
>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { FieldParam } from '@/api/booking/field/model';
import { watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: FieldParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'period'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where } = useSearch<FieldParam>({
keywords: ''
});
/* 搜索 */
const search = () => {
emit('search', where);
};
/* 添加 */
const add = () => {
emit('add');
};
const openPeriod = () => {
emit('period');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
// 监听变化
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,232 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑场馆场地' : '添加场馆场地'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="场地名称" name="fieldName">
<a-input
allow-clear
placeholder="请输入场地名称"
v-model:value="form.fieldName"
/>
</a-form-item>
<a-form-item label="是否可预订半场" name="isHalf">
<a-radio-group v-model:value="form.isHalf">
<a-radio :value="1">可以</a-radio>
<a-radio :value="2">不可以</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否可重复预定" name="isRepeat">
<a-radio-group v-model:value="form.isRepeat">
<a-radio :value="1">可以</a-radio>
<a-radio :value="2">不可以</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="可重复预订数" name="num" v-if="form.isRepeat == 1">
<a-input-number
allow-clear
style="width: 120px"
placeholder="可重复预订数"
v-model:value="form.num"
/>
</a-form-item>
<a-form-item label="是否是卫生间" name="isToilet">
<a-radio-group v-model:value="form.isToilet">
<a-radio :value="1"></a-radio>
<a-radio :value="2"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否支持儿童价" name="isChildren">
<a-radio-group v-model:value="form.isChildren">
<a-radio :value="1">支持</a-radio>
<a-radio :value="2">不支持</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="显示在第几行" name="row">
<a-input
allow-clear
placeholder="请输入显示在第几行"
v-model:value="form.row"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="场地状态" name="isStatus">
<a-radio-group v-model:value="form.isStatus">
<a-radio :value="1">开启</a-radio>
<a-radio :value="2">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addField, updateField } from '@/api/booking/field';
import { Field } from '@/api/booking/field/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 商户ID
categoryId?: number;
// 修改回显的数据
data?: Field | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<Field>({
fieldId: undefined,
fieldName: undefined,
image: undefined,
categoryId: 0,
userId: 0,
teacherId: 0,
merchantId: 0,
isHalf: 2,
isRepeat: 2,
isToilet: 2,
isChildren: 2,
row: undefined,
num: 0,
startTime: undefined,
maxNumber: undefined,
address: '',
comments: '',
isStatus: 1,
status: 0,
sortNumber: 0
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
fieldName: [
{
required: true,
type: 'string',
message: '请填写场馆场地名称',
trigger: 'blur'
}
]
});
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
form.merchantId = props.categoryId;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateField : addField;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if (props.data.image) {
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
});
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -1,7 +1,6 @@
<!-- 角色选择下拉框 -->
<!-- 文章来源选择下拉框 -->
<template>
<a-select
show-search
optionFilterProp="label"
:options="data"
allow-clear
@@ -9,6 +8,7 @@
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
@change="onChange"
/>
</template>
@@ -18,6 +18,7 @@
const emit = defineEmits<{
(e: 'update:value', value: string): void;
(e: 'blur'): void;
(e: 'change'): void;
}>();
withDefaults(
@@ -26,12 +27,12 @@
placeholder?: string;
}>(),
{
placeholder: '请选择性别'
placeholder: '请选择文章来源'
}
);
//
const data = getDictionaryOptions('sex');
const data = getDictionaryOptions('articleSource');
/* 更新选中数据 */
const updateValue = (value: string) => {
@@ -42,4 +43,9 @@
const onBlur = () => {
emit('blur');
};
/* 选择事件 */
const onChange = (e) => {
emit('change', e);
};
</script>

View File

@@ -0,0 +1,208 @@
<template>
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-split-layout
width="266px"
allow-collapse
:right-style="{ overflow: 'hidden' }"
:style="{ minHeight: 'calc(100vh - 152px)' }"
>
<div>
<ele-toolbar theme="default">
<span class="ele-text-heading">场馆列表</span>
</ele-toolbar>
<div class="ele-border-split sys-category-list">
<a-tree
:tree-data="data"
v-model:expanded-keys="expandedRowKeys"
v-model:selected-keys="selectedRowKeys"
:show-line="true"
:show-icon="false"
@select="onTreeSelect"
>
<template #title="{ type, key: treeKey, title }">
<a-dropdown :trigger="['contextmenu']">
<span>{{ title }}</span>
<template #overlay v-if="type == 0">
<a-menu
@click="
({ key: menuKey }) =>
onContextMenuClick(treeKey, menuKey)
"
>
<a-menu-item key="1">修改</a-menu-item>
<a-menu-item key="2">删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</a-tree>
</div>
</div>
<template #content>
<list
v-if="current"
:category-list="data"
:data="current"
:category-id="current.merchantId"
/>
</template>
</ele-split-layout>
</a-card>
<!-- 编辑弹窗 -->
<category-edit
v-model:visible="showEdit"
:data="editData"
:category-list="data"
:category-id="current?.categoryId"
@done="query"
/>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { eachTreeData } from 'ele-admin-pro';
import List from './list.vue';
import CategoryEdit from './components/category-edit.vue';
import { removeMerchant } from '@/api/shop/merchant';
import { Merchant } from '@/api/shop/merchant/model';
import { listMerchant } from '@/api/shop/merchant';
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Merchant[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 选中数据
const current = ref<Merchant | any>(null);
// 是否显示表单弹窗
const showEdit = ref(false);
// 编辑回显数据
const editData = ref<Merchant | null>(null);
/* 查询 */
const query = () => {
loading.value = true;
listMerchant()
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.merchantId;
d.value = d.merchantId;
if (typeof d.merchantId === 'number') {
eks.push(d.merchantId);
}
});
expandedRowKeys.value = eks;
data.value = list.map((d) => {
d.key = d.merchantId;
d.value = d.merchantId;
d.title = d.merchantName;
return d;
});
// data.value = toTreeData({
// data: list,
// idField: 'categoryId',
// parentIdField: 'parentId'
// });
if (list.length) {
if (typeof list[0].merchantId === 'number') {
selectedRowKeys.value = [list[0].merchantId];
}
current.value = list[0];
} else {
selectedRowKeys.value = [];
current.value = null;
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
/* 选择数据 */
const onTreeSelect = () => {
current.value = {};
eachTreeData(data.value, (d) => {
if (
typeof d.merchantId === 'number' &&
selectedRowKeys.value.includes(d.merchantId)
) {
current.value = d;
return false;
}
});
};
const onContextMenuClick = (treeKey: number, menuKey: number) => {
// 修改
if (menuKey == 1) {
openEdit(current.value);
}
// 删除
if (menuKey == 2) {
remove();
}
};
/* 打开编辑弹窗 */
const openEdit = (item?: Merchant | null) => {
editData.value = item ?? null;
showEdit.value = true;
};
/* 删除 */
const remove = () => {
Modal.confirm({
title: '提示',
content: '确定要删除选中的分类吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeMerchant(current.value?.categoryId)
.then((msg) => {
hide();
message.success(msg);
query();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
query();
</script>
<script lang="ts">
export default {
name: 'ArticleIndex'
};
</script>
<style lang="less" scoped>
.sys-category-list {
padding: 12px 6px;
height: calc(100vh - 242px);
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>

View File

@@ -0,0 +1,313 @@
<template>
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="fieldId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
:customRow="customRow"
height="calc(100vh - 290px)"
tool-class="ele-toolbar-form"
:scroll="{ x: 800 }"
>
<template #toolbar>
<field-search
:selection="selection"
@search="reload"
@add="openEdit()"
@period="openPeriod()"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fieldName'">
{{ record.fieldName }}
</template>
<template v-if="column.key === 'isToilet'">
<a-tag v-if="record.isToilet == 1" color="green"></a-tag>
<a-tag v-else></a-tag>
</template>
<template v-if="column.key === 'isHalf'">
<a-tag v-if="record.isHalf == 2">不可以</a-tag>
<a-tag v-if="record.isHalf == 1" color="green">可以</a-tag>
</template>
<template v-if="column.key === 'isChildren'">
<a-tag v-if="record.isChildren == 2">不支持</a-tag>
<a-tag v-if="record.isChildren == 1" color="green">支持</a-tag>
</template>
<template v-if="column.key === 'isRepeat'">
<a-tag v-if="record.isRepeat == 2">不可以</a-tag>
<a-tag v-if="record.isRepeat == 1" color="green">可以</a-tag>
</template>
<template v-if="column.key === 'isStatus'">
<a-tag v-if="record.isStatus == 2">关闭</a-tag>
<a-tag v-if="record.isStatus == 1" color="green">开启</a-tag>
</template>
<template v-else-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此场馆场地吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<field-edit
:data="current"
v-model:visible="showEdit"
:category-list="categoryList"
:category-id="categoryId"
@done="reload"
/>
<!-- 时段弹窗 -->
<PeriodEdit
v-model:visible="showPeriodEidt"
:category-id="categoryId"
:data="data"
@done="reload"
/>
</template>
<script lang="ts" setup>
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import FieldSearch from './components/field-search.vue';
import FieldEdit from './components/fieldEdit.vue';
import {
pageField,
removeField,
removeBatchField
} from '@/api/booking/field';
import type { Field, FieldParam } from '@/api/booking/field/model';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Merchant } from '@/api/shop/merchant/model';
import PeriodEdit from './period/index.vue';
const props = defineProps<{
// 场馆场地 id
categoryId?: number;
// 全部分类
categoryList: Merchant[];
// 当期选中
data: Merchant;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<any[]>([]);
// 表格列配置
const columns = ref<ColumnItem[]>([
// {
// key: 'index',
// width: 48,
// align: 'center',
// fixed: 'left',
// hideInSetting: true,
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
// },
{
title: 'ID',
width: 80,
dataIndex: 'fieldId'
},
{
title: '场地名称',
dataIndex: 'fieldName',
key: 'fieldName'
},
{
title: '显示在第几行',
dataIndex: 'row',
key: 'row'
},
{
title: '可重复预订次数',
dataIndex: 'num',
key: 'num'
},
{
title: '是否是卫生间',
dataIndex: 'isToilet',
key: 'isToilet',
align: 'center',
customRender: ({ text }) => (text == true ? '否' : '是')
},
{
title: '是否可预订半场',
dataIndex: 'isHalf',
key: 'isHalf',
align: 'center'
},
{
title: '是否支持儿童价',
dataIndex: 'isChildren',
key: 'isChildren',
align: 'center',
customRender: ({ text }) => (text == true ? '不支持' : '支持')
},
{
title: '是否可重复预订',
dataIndex: 'isRepeat',
key: 'isRepeat',
align: 'center',
customRender: ({ text }) => (text == true ? '不可以' : '可以')
},
{
title: '场地状态',
dataIndex: 'isStatus',
key: 'isStatus',
align: 'center',
customRender: ({ text }) => (text == 1 ? '开启' : '关闭')
},
{
title: '排序',
dataIndex: 'sortNumber',
width: 100,
align: 'center'
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 120,
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center'
}
]);
// 当前编辑数据
const current = ref<Field | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示时段弹窗
const showPeriodEidt = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (props.categoryId) {
where.merchantId = props.categoryId;
}
// 按条件排序
if (filters) {
where.virtualViews = filters.virtualViews;
where.actualViews = filters.actualViews;
where.sortNumber = filters.sortNumber;
where.status = filters.status;
}
return pageField({
...where,
...orders,
page,
limit
});
};
/* 搜索 */
const reload = (where?: FieldParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Field) => {
current.value = row ?? null;
showEdit.value = true;
};
const openPeriod = () => {
showPeriodEidt.value = true;
};
/* 删除单个 */
const remove = (row: Field) => {
const hide = message.loading('请求中..', 0);
removeField(row.fieldId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchField(selection.value.map((d) => d.fieldId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: Field) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
// 监听场馆场地 id 变化
watch(
() => props.categoryId,
() => {
reload();
}
);
</script>

View File

@@ -0,0 +1,283 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:title="isUpdate ? '编辑时段' : '添加时段'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-spin :spinning="loading">
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="
styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }
"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="时段" name="timePeriod">
<a-time-picker
v-model:value="form.timePeriod1"
format="HH:mm"
valueFormat="HH:mm"
/>
-
<a-time-picker
v-model:value="form.timePeriod2"
format="HH:mm"
valueFormat="HH:mm"
/>
</a-form-item>
<a-form-item label="价格" name="price">
<a-input-number
allow-clear
placeholder="请输入价格"
style="width: 200px"
v-model:value="form.price"
/>
</a-form-item>
<!-- <a-form-item label="每日不同价格" name="prices">-->
<!-- <a-input-number-->
<!-- allow-clear-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入每日不同价格"-->
<!-- v-model:value="form.prices"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="半场价格" name="halfPrice">
<a-input-number
allow-clear
style="width: 200px"
placeholder="请输入半场价格"
v-model:value="form.halfPrice"
/>
</a-form-item>
<!-- <a-form-item label="每日不同半场价格" name="halfPrices">-->
<!-- <a-input-number-->
<!-- allow-clear-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入每日不同半场价格"-->
<!-- v-model:value="form.halfPrices"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="儿童价" name="childrenPrice">
<a-input-number
allow-clear
style="width: 200px"
placeholder="请输入儿童价"
v-model:value="form.childrenPrice"
/>
</a-form-item>
<a-form-item label="星期选择" name="week">
<a-select
v-model:value="form.week"
:options="weekOptions"
mode="tags"
placeholder="星期选择"
style="width: 200px"
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="是否关闭" name="isStatus">
<a-radio-group v-model:value="form.isStatus">
<a-radio :value="1">开启</a-radio>
<a-radio :value="2">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否免费" name="isFree">
<a-radio-group v-model:value="form.isFree">
<a-radio :value="1">免费</a-radio>
<a-radio :value="2">收费</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
</a-form>
</a-spin>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { addPeriod, updatePeriod } from '@/api/booking/period';
import { Period } from '@/api/booking/period/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
import { Merchant } from '@/api/shop/merchant/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 商户ID
merchantId?: number;
// 商户信息
merchant?: Merchant | null;
// 修改回显的数据
data?: Period | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const weekOptions = ref([
{ label: '星期一', value: '1' },
{ label: '星期二', value: '2' },
{ label: '星期三', value: '3' },
{ label: '星期四', value: '4' },
{ label: '星期五', value: '5' },
{ label: '星期六', value: '6' },
{ label: '星期日', value: '7' }
]);
// 用户信息
const form = reactive<Period>({
periodId: undefined,
timePeriod: '',
timePeriod1: undefined,
timePeriod2: undefined,
price: 0,
prices: '',
halfPrice: 0,
halfPrices: '',
childrenPrice: 0,
week: undefined,
sortNumber: 0,
merchantId: 0,
isStatus: 1,
isFree: 2,
startTime: '',
comments: '',
status: 0
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
period: [
{
required: true,
type: 'string',
message: '请填写时段,如红色、L码、远峰蓝、原色钛金属等',
trigger: 'blur'
}
],
timePeriod: [
{
required: true,
type: 'string',
message: '请选择时段',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (form.timePeriod1 == undefined || form.timePeriod2 == undefined) {
return Promise.reject('请选择时段' + value);
}
return Promise.resolve();
}
}
]
});
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
form.merchantId = props.merchantId;
if (!form.merchantId || form.merchantId == 0) {
return;
}
form.week = JSON.stringify(form.week);
form.prices = JSON.stringify(form.prices);
form.halfPrices = JSON.stringify(form.halfPrices);
form.timePeriod = `${form.timePeriod1} - ${form.timePeriod2}`;
form.startTime = `${form.timePeriod1?.replace(':', '')}`;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updatePeriod : addPeriod;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignObject(form, props.data);
if (props.data.timePeriod) {
const strings = props.data.timePeriod.split('-');
form.timePeriod1 = strings[0].replace(' ', '');
form.timePeriod2 = strings[1].replace(' ', '');
}
if (props.data.week) {
form.week = JSON.parse(props.data.week);
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -0,0 +1,42 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,303 @@
<template>
<a-drawer
width="70%"
:visible="visible"
:title="`${data?.merchantName}时段列表`"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
:confirm-loading="loading"
:footer="null"
>
<ele-pro-table
ref="tableRef"
row-key="specValueId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'isStatus'">
<a-tag v-if="record.isStatus === 1" color="green">开启</a-tag>
<a-tag v-if="record.isStatus === 2" color="red">关闭</a-tag>
</template>
<template v-if="column.key === 'isFree'">
<a-tag v-if="record.isFree === 1" color="green">免费</a-tag>
<a-tag v-if="record.isFree === 2" color="orange">收费</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
<a-divider type="vertical" />
<a @click="openEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<PeriodEdit
v-model:visible="showEdit"
:merchant="data"
:merchantId="categoryId"
:data="current"
@done="reload"
/>
</a-drawer>
</template>
<script lang="ts" setup>
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
ArrowUpOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import PeriodEdit from './components/periodEdit.vue';
import {
pagePeriod,
removePeriod,
removeBatchPeriod,
updatePeriod
} from '@/api/booking/period';
import type { Period, PeriodParam } from '@/api/booking/period/model';
import { Merchant } from '@/api/shop/merchant/model';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
categoryId?: number | null;
// 商户信息
data?: Merchant;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<Period[]>([]);
// 当前编辑数据
const current = ref<Period | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
where.merchantId = props.categoryId;
return pagePeriod({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
dataIndex: 'periodId',
key: 'periodId',
width: 90
},
{
title: '时段',
dataIndex: 'timePeriod',
key: 'timePeriod',
align: 'center'
},
{
title: '价格',
dataIndex: 'price',
key: 'price',
align: 'center'
},
{
title: '半场价格',
dataIndex: 'halfPrice',
key: 'halfPrice',
align: 'center'
},
{
title: '儿童价',
dataIndex: 'childrenPrice',
key: 'childrenPrice',
align: 'center'
},
{
title: '时间段状态',
dataIndex: 'isStatus',
key: 'isStatus',
align: 'center'
},
{
title: '是否免费',
dataIndex: 'isFree',
key: 'isFree',
align: 'center'
},
{
title: '排序',
dataIndex: 'sortNumber',
key: 'sortNumber',
align: 'center'
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: PeriodParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Period) => {
current.value = row ?? null;
// if (props.data?.specId) {
// specId.value = props.data?.specId;
// }
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: Period) => {
const hide = message.loading('请求中..', 0);
removePeriod(row.periodId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchPeriod(selection.value.map((d) => d.periodId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
// 上移
const moveUp = (row?: Period) => {
updatePeriod({
periodId: row?.periodId,
sortNumber: Number(row?.sortNumber) - 1
}).then((msg) => {
message.success(msg);
reload();
});
};
/* 自定义行属性 */
const customRow = (record: Period) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
watch(
() => props.categoryId,
(categoryId) => {
if (categoryId) {
reload();
}
}
);
</script>
<script lang="ts">
export default {
name: 'Period'
};
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,82 @@
<template>
<a-card class="ele-body">
<a-spin :spinning="spinning">
<a-typography-title :level="3" class="ele-text-center">{{
form.title
}}</a-typography-title>
<a-divider dashed />
<div class="content" v-html="form.content"></div>
</a-spin>
</a-card>
</template>
<script lang="ts" setup>
import { ref, unref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { setPageTabTitle } from '@/utils/page-tab-util';
import { getArticle } from '@/api/cms/article';
import { Article } from '@/api/cms/article/model';
import useFormData from '@/utils/use-form-data';
const { currentRoute } = useRouter();
// 是否开启响应式布局
const title = ref('');
const spinning = ref(true);
// 应用信息
const { form, assignFields } = useFormData<Article>({
articleId: undefined,
title: '',
content: '',
createTime: ''
});
/**
* 加载数据
*/
const reload = (id: number) => {
console.log(id);
// 加载项目详情
getArticle(id).then((data) => {
assignFields(data);
if (data.title) {
title.value = data.title;
// 修改页签标题
setPageTabTitle(data.title);
}
spinning.value = false;
});
};
watch(
currentRoute,
(route) => {
const { params } = unref(route);
const { id } = params;
if (id) {
reload(Number(id));
}
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'ArticlePreview'
};
</script>
<style>
body {
background: #f0f2f5;
}
.ele-body {
margin: 0 auto;
max-width: 1000px;
}
.content {
padding: 10px;
}
* {
max-width: 100%;
}
</style>

View File

@@ -0,0 +1,210 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑签到积分' : '添加签到积分'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="用户id" name="userId">
<a-input
allow-clear
placeholder="请输入用户id"
v-model:value="form.userId"
/>
</a-form-item>
<a-form-item label="微信昵称" name="username">
<a-input
allow-clear
placeholder="请输入微信昵称"
v-model:value="form.username"
/>
</a-form-item>
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
placeholder="请输入手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="获得积分" name="integral">
<a-input
allow-clear
placeholder="请输入获得积分"
v-model:value="form.integral"
/>
</a-form-item>
<a-form-item label="日期" name="dateTime">
<a-input
allow-clear
placeholder="请输入日期"
v-model:value="form.dateTime"
/>
</a-form-item>
<a-form-item label="天" name="day">
<a-input
allow-clear
placeholder="请输入天"
v-model:value="form.day"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addIntegral, updateIntegral } from '@/api/booking/integral';
import { Integral } from '@/api/booking/integral/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Integral | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<Integral>({
id: undefined,
userId: undefined,
username: undefined,
phone: undefined,
integral: undefined,
dateTime: undefined,
day: undefined,
tenantId: undefined,
createTime: undefined,
integralId: undefined,
integralName: '',
status: 0,
comments: '',
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
integralName: [
{
required: true,
type: 'string',
message: '请填写签到积分名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateIntegral : addIntegral;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if(props.data.image){
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
})
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -0,0 +1,42 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,251 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="integralId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<IntegralEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import IntegralEdit from './components/integralEdit.vue';
import { pageIntegral, removeIntegral, removeBatchIntegral } from '@/api/booking/integral';
import type { Integral, IntegralParam } from '@/api/booking/integral/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<Integral[]>([]);
// 当前编辑数据
const current = ref<Integral | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
return pageIntegral({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '',
dataIndex: 'id',
key: 'id',
align: 'center',
width: 90,
},
{
title: '用户id',
dataIndex: 'userId',
key: 'userId',
align: 'center',
},
{
title: '微信昵称',
dataIndex: 'username',
key: 'username',
align: 'center',
},
{
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
align: 'center',
},
{
title: '获得积分',
dataIndex: 'integral',
key: 'integral',
align: 'center',
},
{
title: '日期',
dataIndex: 'dateTime',
key: 'dateTime',
align: 'center',
},
{
title: '天',
dataIndex: 'day',
key: 'day',
align: 'center',
},
{
title: '签到时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: IntegralParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Integral) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: Integral) => {
const hide = message.loading('请求中..', 0);
removeIntegral(row.integralId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchIntegral(selection.value.map((d) => d.integralId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: Integral) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'Integral'
};
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,234 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑积分明细' : '添加积分明细'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="场馆订单号" name="orderNum">
<a-input
allow-clear
placeholder="请输入场馆订单号"
v-model:value="form.orderNum"
/>
</a-form-item>
<a-form-item label="订单id" name="oid">
<a-input
allow-clear
placeholder="请输入订单id"
v-model:value="form.oid"
/>
</a-form-item>
<a-form-item label="场馆名称" name="siteName">
<a-input
allow-clear
placeholder="请输入场馆名称"
v-model:value="form.siteName"
/>
</a-form-item>
<a-form-item label="微信昵称" name="username">
<a-input
allow-clear
placeholder="请输入微信昵称"
v-model:value="form.username"
/>
</a-form-item>
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
placeholder="请输入手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="获得积分" name="integral">
<a-input
allow-clear
placeholder="请输入获得积分"
v-model:value="form.integral"
/>
</a-form-item>
<a-form-item label="变化前积分" name="oldMoney">
<a-input
allow-clear
placeholder="请输入变化前积分"
v-model:value="form.oldMoney"
/>
</a-form-item>
<a-form-item label="变化后积分" name="newMoney">
<a-input
allow-clear
placeholder="请输入变化后积分"
v-model:value="form.newMoney"
/>
</a-form-item>
<a-form-item label="描述" name="info">
<a-input
allow-clear
placeholder="请输入描述"
v-model:value="form.info"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addIntegralLog, updateIntegralLog } from '@/api/booking/integralLog';
import { IntegralLog } from '@/api/booking/integralLog/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: IntegralLog | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<IntegralLog>({
id: undefined,
orderNum: undefined,
oid: undefined,
siteName: undefined,
username: undefined,
phone: undefined,
integral: undefined,
oldMoney: undefined,
newMoney: undefined,
info: undefined,
tenantId: undefined,
createTime: undefined,
integralLogId: undefined,
integralLogName: '',
status: 0,
comments: '',
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
integralLogName: [
{
required: true,
type: 'string',
message: '请填写积分明细名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateIntegralLog : addIntegralLog;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if(props.data.image){
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
})
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -0,0 +1,42 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,269 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="integralLogId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<IntegralLogEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import IntegralLogEdit from './components/integralLogEdit.vue';
import { pageIntegralLog, removeIntegralLog, removeBatchIntegralLog } from '@/api/booking/integralLog';
import type { IntegralLog, IntegralLogParam } from '@/api/booking/integralLog/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<IntegralLog[]>([]);
// 当前编辑数据
const current = ref<IntegralLog | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
return pageIntegralLog({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '',
dataIndex: 'id',
key: 'id',
align: 'center',
width: 90,
},
{
title: '场馆订单号',
dataIndex: 'orderNum',
key: 'orderNum',
align: 'center',
},
{
title: '订单id',
dataIndex: 'oid',
key: 'oid',
align: 'center',
},
{
title: '场馆名称',
dataIndex: 'siteName',
key: 'siteName',
align: 'center',
},
{
title: '微信昵称',
dataIndex: 'username',
key: 'username',
align: 'center',
},
{
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
align: 'center',
},
{
title: '获得积分',
dataIndex: 'integral',
key: 'integral',
align: 'center',
},
{
title: '变化前积分',
dataIndex: 'oldMoney',
key: 'oldMoney',
align: 'center',
},
{
title: '变化后积分',
dataIndex: 'newMoney',
key: 'newMoney',
align: 'center',
},
{
title: '描述',
dataIndex: 'info',
key: 'info',
align: 'center',
},
{
title: '记录时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: IntegralLogParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: IntegralLog) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: IntegralLog) => {
const hide = message.loading('请求中..', 0);
removeIntegralLog(row.integralLogId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchIntegralLog(selection.value.map((d) => d.integralLogId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: IntegralLog) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'IntegralLog'
};
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,459 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑预约订单' : '添加预约订单'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="订单编号" name="orderNo">
<a-input
allow-clear
placeholder="请输入订单编号"
v-model:value="form.orderNo"
/>
</a-form-item>
<a-form-item label="微信支付订单号" name="wechatOrder">
<a-input
allow-clear
placeholder="请输入微信支付订单号"
v-model:value="form.wechatOrder"
/>
</a-form-item>
<a-form-item label="微信退款订单号" name="refundOrder">
<a-input
allow-clear
placeholder="请输入微信退款订单号"
v-model:value="form.refundOrder"
/>
</a-form-item>
<a-form-item label="场馆id用于权限判断" name="merchantId">
<a-input
allow-clear
placeholder="请输入场馆id用于权限判断"
v-model:value="form.merchantId"
/>
</a-form-item>
<a-form-item label="用户id" name="userId">
<a-input
allow-clear
placeholder="请输入用户id"
v-model:value="form.userId"
/>
</a-form-item>
<a-form-item label="使用的优惠券id" name="couponId">
<a-input
allow-clear
placeholder="请输入使用的优惠券id"
v-model:value="form.couponId"
/>
</a-form-item>
<a-form-item label="使用的会员卡id" name="cardId">
<a-input
allow-clear
placeholder="请输入使用的会员卡id"
v-model:value="form.cardId"
/>
</a-form-item>
<a-form-item label="关联管理员id" name="aid">
<a-input
allow-clear
placeholder="请输入关联管理员id"
v-model:value="form.aid"
/>
</a-form-item>
<a-form-item label="核销管理员id" name="adminId">
<a-input
allow-clear
placeholder="请输入核销管理员id"
v-model:value="form.adminId"
/>
</a-form-item>
<a-form-item label="IC卡号" name="code">
<a-input
allow-clear
placeholder="请输入IC卡号"
v-model:value="form.code"
/>
</a-form-item>
<a-form-item label="真实姓名" name="name">
<a-input
allow-clear
placeholder="请输入真实姓名"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
placeholder="请输入手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="订单总额" name="totalPrice">
<a-input
allow-clear
placeholder="请输入订单总额"
v-model:value="form.totalPrice"
/>
</a-form-item>
<a-form-item label="减少的金额使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格" name="reducePrice">
<a-input
allow-clear
placeholder="请输入减少的金额使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
v-model:value="form.reducePrice"
/>
</a-form-item>
<a-form-item label="实际付款" name="payPrice">
<a-input
allow-clear
placeholder="请输入实际付款"
v-model:value="form.payPrice"
/>
</a-form-item>
<a-form-item label="用于统计" name="price">
<a-input
allow-clear
placeholder="请输入用于统计"
v-model:value="form.price"
/>
</a-form-item>
<a-form-item label="价钱,用于积分赠送" name="money">
<a-input
allow-clear
placeholder="请输入价钱,用于积分赠送"
v-model:value="form.money"
/>
</a-form-item>
<a-form-item label="退款金额" name="refundMoney">
<a-input
allow-clear
placeholder="请输入退款金额"
v-model:value="form.refundMoney"
/>
</a-form-item>
<a-form-item label="教练价格" name="coachPrice">
<a-input
allow-clear
placeholder="请输入教练价格"
v-model:value="form.coachPrice"
/>
</a-form-item>
<a-form-item label="教练id" name="coachId">
<a-input
allow-clear
placeholder="请输入教练id"
v-model:value="form.coachId"
/>
</a-form-item>
<a-form-item label="1微信支付2积分3支付宝4现金5POS机6VIP月卡7VIP年卡8VIP次卡9IC月卡10IC年卡11IC次卡12免费13VIP充值卡14IC充值卡15积分支付16VIP季卡17IC季卡" name="payType">
<a-input
allow-clear
placeholder="请输入1微信支付2积分3支付宝4现金5POS机6VIP月卡7VIP年卡8VIP次卡9IC月卡10IC年卡11IC次卡12免费13VIP充值卡14IC充值卡15积分支付16VIP季卡17IC季卡"
v-model:value="form.payType"
/>
</a-form-item>
<a-form-item label="1已付款2未付款" name="payStatus">
<a-input
allow-clear
placeholder="请输入1已付款2未付款"
v-model:value="form.payStatus"
/>
</a-form-item>
<a-form-item label="1已完成2未使用3已取消4退款申请中5退款被拒绝6退款成功7客户端申请退款" name="orderStatus">
<a-input
allow-clear
placeholder="请输入1已完成2未使用3已取消4退款申请中5退款被拒绝6退款成功7客户端申请退款"
v-model:value="form.orderStatus"
/>
</a-form-item>
<a-form-item label="优惠类型0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡" name="type">
<a-input
allow-clear
placeholder="请输入优惠类型0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
v-model:value="form.type"
/>
</a-form-item>
<a-form-item label="二维码地址,保存订单号,支付成功后才生成" name="qrcode">
<a-input
allow-clear
placeholder="请输入二维码地址,保存订单号,支付成功后才生成"
v-model:value="form.qrcode"
/>
</a-form-item>
<a-form-item label="优惠说明" name="desc">
<a-input
allow-clear
placeholder="请输入优惠说明"
v-model:value="form.desc"
/>
</a-form-item>
<a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">
<a-input
allow-clear
placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"
v-model:value="form.returnNum"
/>
</a-form-item>
<a-form-item label="vip充值回退金额" name="returnMoney">
<a-input
allow-clear
placeholder="请输入vip充值回退金额"
v-model:value="form.returnMoney"
/>
</a-form-item>
<a-form-item label="预约详情开始时间数组" name="startTime">
<a-input
allow-clear
placeholder="请输入预约详情开始时间数组"
v-model:value="form.startTime"
/>
</a-form-item>
<a-form-item label="是否已开具发票1已开发票2未开发票3不能开具发票" name="isInvoice">
<a-input
allow-clear
placeholder="请输入是否已开具发票1已开发票2未开发票3不能开具发票"
v-model:value="form.isInvoice"
/>
</a-form-item>
<a-form-item label="" name="updateTime">
<a-input
allow-clear
placeholder="请输入"
v-model:value="form.updateTime"
/>
</a-form-item>
<a-form-item label="付款时间" name="payTime">
<a-input
allow-clear
placeholder="请输入付款时间"
v-model:value="form.payTime"
/>
</a-form-item>
<a-form-item label="退款时间" name="refundTime">
<a-input
allow-clear
placeholder="请输入退款时间"
v-model:value="form.refundTime"
/>
</a-form-item>
<a-form-item label="申请退款时间" name="refundApplyTime">
<a-input
allow-clear
placeholder="请输入申请退款时间"
v-model:value="form.refundApplyTime"
/>
</a-form-item>
<a-form-item label="对账情况1=已对账2=未对账3=已对账金额对不上4=未查询到该订单" name="checkBill">
<a-input
allow-clear
placeholder="请输入对账情况1=已对账2=未对账3=已对账金额对不上4=未查询到该订单"
v-model:value="form.checkBill"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="是否删除, 0否, 1是" name="deleted">
<a-input
allow-clear
placeholder="请输入是否删除, 0否, 1是"
v-model:value="form.deleted"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addOrder, updateOrder } from '@/api/shop/order';
import { Order } from '@/api/shop/order/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<Order>({
orderId: undefined,
orderNo: undefined,
wechatOrder: undefined,
refundOrder: undefined,
merchantId: undefined,
userId: undefined,
couponId: undefined,
cardId: undefined,
aid: undefined,
adminId: undefined,
code: undefined,
name: undefined,
phone: undefined,
totalPrice: undefined,
reducePrice: undefined,
payPrice: undefined,
price: undefined,
money: undefined,
refundMoney: undefined,
coachPrice: undefined,
coachId: undefined,
payType: undefined,
payStatus: undefined,
orderStatus: undefined,
type: undefined,
qrcode: undefined,
desc: undefined,
returnNum: undefined,
returnMoney: undefined,
startTime: undefined,
isInvoice: undefined,
createTime: undefined,
updateTime: undefined,
payTime: undefined,
refundTime: undefined,
refundApplyTime: undefined,
checkBill: undefined,
comments: undefined,
deleted: undefined,
tenantId: undefined,
orderId: undefined,
orderName: '',
status: 0,
comments: '',
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
orderName: [
{
required: true,
type: 'string',
message: '请填写预约订单名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateOrder : addOrder;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if(props.data.image){
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
})
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -0,0 +1,48 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-input-search
allow-clear
v-model:value="where.keywords"
placeholder="请输入关键词"
@search="search"
@pressEnter="search"
/>
</a-space>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import useSearch from '@/utils/use-search';
import { OrderParam } from '@/api/shop/order/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: OrderParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 表单数据
const { where } = useSearch<OrderParam>({
keywords: ''
});
/* 搜索 */
const search = () => {
emit('search', where);
};
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,431 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="orderId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
:scroll="{ x: 800 }"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'payType'">
<a-tag v-if="record.payType == 1" color="green"
><WechatOutlined class="tag-icon" />微信支付</a-tag
>
<a-tag v-if="record.payType == 2" color="green">积分</a-tag>
<a-tag v-if="record.payType == 3" color="green"
><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
>
<a-tag v-if="record.payType == 4" color="green"
><IdcardOutlined class="tag-icon" />现金</a-tag
>
<a-tag v-if="record.payType == 5" color="green"
><IdcardOutlined class="tag-icon" />POS机</a-tag
>
<a-tag v-if="record.payType == 6" color="green"
><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
>
<a-tag v-if="record.payType == 7" color="green"
><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
>
<a-tag v-if="record.payType == 8" color="green"
><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
>
<a-tag v-if="record.payType == 9" color="green"
><IdcardOutlined class="tag-icon" />IC月卡</a-tag
>
<a-tag v-if="record.payType == 10" color="green"
><IdcardOutlined class="tag-icon" />IC年卡</a-tag
>
<a-tag v-if="record.payType == 11" color="green"
><IdcardOutlined class="tag-icon" />IC次卡</a-tag
>
<a-tag v-if="record.payType == 12" color="green"
><IdcardOutlined class="tag-icon" />免费</a-tag
>
<a-tag v-if="record.payType == 13" color="green"
><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
>
<a-tag v-if="record.payType == 14" color="green"
><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
>
<a-tag v-if="record.payType == 15" color="green"
><IdcardOutlined class="tag-icon" />积分支付</a-tag
>
<a-tag v-if="record.payType == 16" color="green"
><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
>
<a-tag v-if="record.payType == 17" color="green"
><IdcardOutlined class="tag-icon" />IC季卡</a-tag
>
</template>
<template v-if="column.key === 'type'">
<a-tag v-if="record.type == 0"></a-tag>
<a-tag v-if="record.type == 1" color="blue"
><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
>
<a-tag v-if="record.type == 2" color="blue"
><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
>
<a-tag v-if="record.type == 3" color="blue"
><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
>
<a-tag v-if="record.type == 4" color="blue"
><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
>
<a-tag v-if="record.type == 5" color="blue"
><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
>
<a-tag v-if="record.type == 6" color="blue"
><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
>
<a-tag v-if="record.type == 7" color="blue"
><IdcardOutlined class="tag-icon" />IC月卡</a-tag
>
<a-tag v-if="record.type == 8" color="blue"
><IdcardOutlined class="tag-icon" />IC年卡</a-tag
>
<a-tag v-if="record.type == 9" color="blue"
><IdcardOutlined class="tag-icon" />IC次卡</a-tag
>
<a-tag v-if="record.type == 10" color="blue"
><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
>
<a-tag v-if="record.type == 11" color="blue"
><IdcardOutlined class="tag-icon" />免费订单</a-tag
>
<a-tag v-if="record.type == 12" color="blue"
><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
>
<a-tag v-if="record.type == 13" color="blue"
><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
>
<a-tag v-if="record.type == 14" color="blue"
><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
>
<a-tag v-if="record.type == 15" color="blue"
><IdcardOutlined class="tag-icon" />IC季卡</a-tag
>
</template>
<template v-if="column.key === 'payStatus'">
<a-tag v-if="record.payStatus == 1" color="green"
><CheckOutlined class="tag-icon" />已付款</a-tag
>
<a-tag v-if="record.payStatus == 2" color="error"
><CloseOutlined class="tag-icon" />未付款</a-tag
>
<a-tag v-if="record.payStatus == 3" color="cyan"
><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
>
</template>
<template v-if="column.key === 'orderStatus'">
<a-tag v-if="record.orderStatus == 1" color="green"
><CheckOutlined class="tag-icon" />已付款</a-tag
>
<a-tag v-if="record.orderStatus == 2" color="blue"
><ClockCircleOutlined class="tag-icon" />未使用</a-tag
>
<a-tag v-if="record.orderStatus == 3" color="error"
><CloseOutlined class="tag-icon" />已取消</a-tag
>
<a-tag v-if="record.orderStatus == 4" color="error"
>退款申请中</a-tag
>
<a-tag v-if="record.orderStatus == 5" color="error"
>退款被拒绝</a-tag
>
<a-tag v-if="record.orderStatus == 6" color="green"
>退款成功</a-tag
>
<a-tag v-if="record.orderStatus == 7" color="green"
>客户端申请退款</a-tag
>
</template>
<template v-if="column.key === 'isInvoice'">
<a-tag v-if="record.isInvoice == 1" color="green">已开</a-tag>
<a-tag v-if="record.isInvoice == 2" color="green">未开</a-tag>
<a-tag v-if="record.isInvoice == 1" color="green">不能开</a-tag>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">详情</a>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<OrderEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
ExclamationCircleOutlined,
CheckOutlined,
CloseOutlined,
RestOutlined,
ClockCircleOutlined,
IdcardOutlined,
WechatOutlined,
CoffeeOutlined,
AlipayCircleOutlined
} from '@ant-design/icons-vue';
import { EleProTable, toDateString } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import OrderEdit from './components/orderEdit.vue';
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/shop/order';
import type { Order, OrderParam } from '@/api/shop/order/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<Order[]>([]);
// 当前编辑数据
const current = ref<Order | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
return pageOrder({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '订单号',
dataIndex: 'orderId',
key: 'orderId',
width: 90
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center'
},
{
title: '手机号',
dataIndex: 'phone',
key: 'phone',
width: 120,
align: 'center'
},
{
title: '总额',
dataIndex: 'totalPrice',
key: 'totalPrice',
align: 'center'
},
{
title: '减少金额',
dataIndex: 'reducePrice',
key: 'reducePrice',
align: 'center'
},
{
title: '实付金额',
dataIndex: 'payPrice',
key: 'payPrice',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'payType',
key: 'payType',
align: 'center'
},
{
title: '付款状态',
dataIndex: 'payStatus',
key: 'payStatus',
align: 'center'
},
{
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus',
align: 'center'
},
{
title: '优惠类型',
dataIndex: 'type',
key: 'type',
align: 'center'
},
{
title: '是否已开票',
dataIndex: 'isInvoice',
key: 'isInvoice',
align: 'center'
},
{
title: '付款时间',
dataIndex: 'payTime',
key: 'payTime',
align: 'center',
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
},
// {
// title: '申请退款时间',
// dataIndex: 'refundApplyTime',
// key: 'refundApplyTime',
// align: 'center',
// customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
// },
// {
// title: '备注',
// dataIndex: 'comments',
// key: 'comments',
// align: 'center'
// },
{
title: '操作',
key: 'action',
width: 120,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: OrderParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Order) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: Order) => {
const hide = message.loading('请求中..', 0);
removeOrder(row.orderId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchOrder(selection.value.map((d) => d.orderId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: Order) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'Order'
};
</script>
<style lang="less" scoped>
.tag-icon {
padding-right: 6px;
}
</style>

View File

@@ -36,15 +36,11 @@
v-model:value="form.merchantName"
/>
</a-form-item>
<a-form-item
label="手机号码"
name="phone"
extra="手机号码将用做于场馆端的登录账号请填写真实手机号码"
>
<a-form-item label="场馆电话" name="phone">
<a-input
allow-clear
:maxlength="11"
placeholder="请输入场馆手机号"
placeholder="请输入场馆电话"
v-model:value="form.phone"
/>
</a-form-item>
@@ -188,7 +184,7 @@
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid, phoneReg } from 'ele-admin-pro';
import { assignObject, uuid } from 'ele-admin-pro';
import { addMerchant, updateMerchant } from '@/api/shop/merchant';
import { Merchant } from '@/api/shop/merchant/model';
import { useThemeStore } from '@/store/modules/theme';
@@ -199,7 +195,6 @@
import { MerchantType } from '@/api/shop/merchantType/model';
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
import { listRoles } from '@/api/system/role';
import { getTenantId } from '@/utils/domain';
// 是否是修改
const isUpdate = ref(false);
@@ -310,13 +305,8 @@
phone: [
{
required: true,
message: '请输入手机号',
message: '请输入场馆电话',
trigger: 'blur'
},
{
pattern: phoneReg,
message: '手机号格式不正确',
type: 'string'
}
]
});

View File

@@ -30,7 +30,7 @@
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openNew(record.adminUrl)">管理后台</a>
<a @click="openNew(record.adminUrl)">场馆管理端</a>
<a-divider type="vertical" />
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
@@ -121,12 +121,6 @@
key: 'merchantName',
align: 'center'
},
{
title: '场馆图标',
dataIndex: 'image',
key: 'image',
align: 'center'
},
{
title: '负责人',
dataIndex: 'realName',
@@ -134,7 +128,7 @@
align: 'center'
},
{
title: '手机号',
title: '场馆电话',
dataIndex: 'phone',
key: 'phone',
align: 'center'

View File

@@ -1,71 +0,0 @@
<!-- 角色选择下拉框 -->
<template>
<a-select
allow-clear
mode="multiple"
:value="roleIds"
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
>
<a-select-option
v-for="item in data"
:key="item.roleId"
:value="item.roleId"
>
{{ item.roleName }}
</a-select-option>
</a-select>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue/es';
import { listRoles } from '@/api/system/role';
import type { Role } from '@/api/system/role/model';
const emit = defineEmits<{
(e: 'update:value', value: Role[]): void;
(e: 'blur'): void;
}>();
const props = withDefaults(
defineProps<{
// 选中的角色
value?: Role[];
//
placeholder?: string;
}>(),
{
placeholder: '请选择角色'
}
);
// 选中的角色id
const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
// 角色数据
const data = ref<Role[]>([]);
/* 更新选中数据 */
const updateValue = (value: number[]) => {
emit(
'update:value',
value.map((v) => ({ roleId: v }))
);
};
/* 获取角色数据 */
listRoles()
.then((list) => {
data.value = list;
})
.catch((e) => {
message.error(e.message);
});
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

View File

@@ -1,312 +0,0 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '用户详情' : '新建用户'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="手机号" v-if="isUpdate" name="mobile">
<a-input
allow-clear
:maxlength="11"
placeholder="请输入手机号"
v-model:value="form.mobile"
/>
</a-form-item>
<a-form-item label="昵称" name="nickname">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入昵称"
v-model:value="form.nickname"
/>
</a-form-item>
<a-form-item label="真实姓名" name="realName">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入真实姓名"
v-model:value="form.realName"
/>
</a-form-item>
<a-form-item label="性别" name="sex">
<span v-if="form.sex == 1"></span>
<span v-else-if="form.sex == 2"></span>
<span v-else>未知</span>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<!-- <a-form-item label="会员等级">-->
<!-- <SelectGrade-->
<!-- :placeholder="`请选择会员等级`"-->
<!-- v-model:value="form.gradeName"-->
<!-- :disabled="isUpdate"-->
<!-- @done="chooseGradeId"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="邮箱" name="email">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入邮箱"
v-model:value="form.email"
/>
</a-form-item>
<a-form-item label="出生日期">
<a-date-picker
class="ele-fluid"
value-format="YYYY-MM-DD"
placeholder="请选择出生日期"
v-model:value="form.birthday"
/>
</a-form-item>
<a-form-item v-if="!isUpdate" label="登录密码" name="password">
<a-input-password
:maxlength="20"
v-model:value="form.password"
placeholder="请输入登录密码"
/>
</a-form-item>
<a-form-item label="个人简介">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入个人简介"
v-model:value="form.introduction"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { emailReg, phoneReg } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import RoleSelect from './role-select.vue';
import SexSelect from './sex-select.vue';
import { addUser, updateUser, checkExistence } from '@/api/system/user';
import type { User } from '@/api/system/user/model';
import OrgSelect from './org-select.vue';
// import { getDictionaryOptions } from '@/utils/common';
import { Organization } from '@/api/system/organization/model';
import { Grade } from '@/api/user/grade/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 获取字典数据
// const userTypeData = getDictionaryOptions('userType');
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: User | null;
// 全部机构
organizationList: Organization[];
}>();
//
const formRef = ref<FormInstance | null>(null);
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const { form, resetFields, assignFields } = useFormData<User>({
type: undefined,
userId: undefined,
username: '',
nickname: '',
realName: '',
companyName: '',
sex: undefined,
roles: [],
email: '',
phone: '',
mobile: '',
password: '',
introduction: '',
organizationId: undefined,
birthday: '',
idCard: '',
comments: '',
gradeName: '',
gradeId: undefined
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
username: [
{
required: true,
type: 'string',
validator: (_rule: Rule, value: string) => {
return new Promise<void>((resolve, reject) => {
if (!value) {
return reject('请输入用户账号');
}
checkExistence('username', value, props.data?.userId)
.then(() => {
reject('账号已经存在');
})
.catch(() => {
resolve();
});
});
},
trigger: 'blur'
}
],
nickname: [
{
required: true,
message: '请输入昵称',
type: 'string',
trigger: 'blur'
}
],
// realName: [
// {
// required: true,
// message: '请输入真实姓名',
// type: 'string',
// trigger: 'blur'
// }
// ],
// sex: [
// {
// required: true,
// message: '请选择性别',
// type: 'string',
// trigger: 'blur'
// }
// ],
roles: [
{
required: true,
message: '请选择角色',
type: 'array',
trigger: 'blur'
}
],
email: [
{
pattern: emailReg,
message: '邮箱格式不正确',
type: 'string',
trigger: 'blur'
}
],
password: [
{
required: true,
type: 'string',
validator: async (_rule: Rule, value: string) => {
if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
return Promise.resolve();
}
return Promise.reject('密码必须为5-18位非空白字符');
},
trigger: 'blur'
}
],
phone: [
{
required: true,
pattern: phoneReg,
message: '手机号格式不正确',
type: 'string',
trigger: 'blur'
}
]
});
const chooseGradeId = (data: Grade) => {
form.gradeName = data.name;
form.gradeId = data.gradeId;
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const saveOrUpdate = isUpdate.value ? updateUser : addUser;
saveOrUpdate(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields({
...props.data,
password: ''
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>

View File

@@ -1,88 +0,0 @@
<!-- 用户导入弹窗 -->
<template>
<ele-modal
:width="520"
:footer="null"
title="导入用户"
:visible="visible"
@update:visible="updateVisible"
>
<a-spin :spinning="loading">
<a-upload-dragger
accept=".xls,.xlsx"
:show-upload-list="false"
:customRequest="doUpload"
style="padding: 24px 0; margin-bottom: 16px"
>
<p class="ant-upload-drag-icon">
<cloud-upload-outlined />
</p>
<p class="ant-upload-hint">将文件拖到此处或点击上传</p>
</a-upload-dragger>
</a-spin>
<div class="ele-text-center">
<span>只能上传xlsxlsx文件</span>
<a
href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
download="用户导入模板.xlsx"
>
下载模板
</a>
</div>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue/es';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { importUsers } from '@/api/system/user';
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
defineProps<{
// 是否打开弹窗
visible: boolean;
}>();
// 导入请求状态
const loading = ref(false);
/* 上传 */
const doUpload = ({ file }) => {
if (
![
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type)
) {
message.error('只能选择 excel 文件');
return false;
}
if (file.size / 1024 / 1024 > 10) {
message.error('大小不能超过 10MB');
return false;
}
loading.value = true;
importUsers(file)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
return false;
};
/* 更新 visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
</script>

View File

@@ -1,143 +0,0 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="680"
:visible="visible"
:confirm-loading="loading"
:title="'基本信息'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:footer="null"
>
<a-form
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="账号">
<span class="ele-text">{{ user.username }}</span>
</a-form-item>
<a-form-item label="昵称">
<span class="ele-text">{{ user.nickname }}</span>
</a-form-item>
<a-form-item label="性别">
<span class="ele-text">{{ user.sexName }}</span>
</a-form-item>
<a-form-item label="手机号">
<span class="ele-text">{{ user.phone }}</span>
</a-form-item>
<a-form-item label="角色">
<a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</a-form-item>
<a-form-item label="状态">
<a-badge
v-if="typeof user.status === 'number'"
:status="(['processing', 'error'][user.status] as any)"
:text="['正常', '冻结'][user.status]"
/>
</a-form-item>
<a-form-item label="地址">
<span class="ele-text">{{ user.address }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="可用余额">
<span class="ele-text-success">{{ formatNumber(user.balance) }}</span>
</a-form-item>
<a-form-item label="可用积分">
<span class="ele-text">{{ user.points }}</span>
</a-form-item>
<a-form-item label="实际消费">
<span class="ele-text">{{ user.payMoney }}</span>
</a-form-item>
<a-form-item label="机构/部门">
<span class="ele-text">{{ user.organizationName }}</span>
</a-form-item>
<a-form-item label="头像">
<a-image :src="user.avatar" :width="36" />
</a-form-item>
<a-form-item label="生日">
<span class="ele-text">{{ user.birthday }}</span>
</a-form-item>
<a-form-item label="创建时间">
<span class="ele-text">{{ user.createTime }}</span>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import type { User } from '@/api/system/user/model';
import { useThemeStore } from '@/store/modules/theme';
import { formatNumber } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: User | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 用户信息
const user = reactive<User>({
username: '',
nickname: '',
sexName: '',
phone: '',
avatar: '',
balance: undefined,
points: 0,
payMoney: 0,
birthday: '',
address: '',
roles: [],
createTime: undefined,
status: undefined
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(user);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(user, props.data);
}
} else {
resetFields();
}
}
);
</script>

View File

@@ -1,111 +0,0 @@
<!-- 搜索表单 -->
<template>
<a-form
:label-col="
styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
"
:wrapper-col="
styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
"
>
<a-row :gutter="8">
<a-col
v-bind="
styleResponsive
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 6 }
"
>
<a-form-item label="用户账号">
<a-input
v-model:value.trim="form.username"
placeholder="请输入"
allow-clear
/>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 6 }
"
>
<a-form-item label="昵称">
<a-input
v-model:value.trim="form.nickname"
placeholder="请输入"
allow-clear
/>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 6 }
"
>
<a-form-item label="性别">
<a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
<a-select-option value="1">男</a-select-option>
<a-select-option value="2">女</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 6 }
"
>
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="search">查询</a-button>
<a-button @click="reset">重置</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import type { UserParam } from '@/api/system/user/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 默认搜索条件
where?: UserParam;
}>();
const emit = defineEmits<{
(e: 'search', where?: UserParam): void;
}>();
// 表单数据
const { form, resetFields } = useFormData<UserParam>({
username: '',
nickname: '',
sex: undefined,
...props.where
});
/* 搜索 */
const search = () => {
emit('search', form);
};
/* 重置 */
const reset = () => {
resetFields();
search();
};
</script>

View File

@@ -1,130 +0,0 @@
<template>
<div class="ele-body">
<a-card title="基本信息" :bordered="false">
<a-form
class="ele-form-detail"
:label-col="
styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
"
:wrapper-col="
styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
"
>
<a-form-item label="账号">
<div class="ele-text-secondary">{{ form.username }}</div>
</a-form-item>
<a-form-item label="昵称">
<div class="ele-text-secondary">{{ form.nickname }}</div>
</a-form-item>
<a-form-item label="性别">
<div class="ele-text-secondary">{{ form.sexName }}</div>
</a-form-item>
<a-form-item label="手机号">
<div class="ele-text-secondary">{{ form.phone }}</div>
</a-form-item>
<a-form-item label="真实姓名">
<div class="ele-text-secondary">{{ form.realName }}</div>
</a-form-item>
<a-form-item label="别名">
<div class="ele-text-secondary">{{ form.alias }}</div>
</a-form-item>
<a-form-item label="角色">
<a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</a-form-item>
<a-form-item label="创建时间">
<div class="ele-text-secondary">{{ form.createTime }}</div>
</a-form-item>
<a-form-item label="状态">
<a-badge
v-if="typeof form.status === 'number'"
:status="(['processing', 'error'][form.status] as any)"
:text="['正常', '冻结'][form.status]"
/>
</a-form-item>
</a-form>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, unref } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
import { toDateString } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import { setPageTabTitle } from '@/utils/page-tab-util';
import { getUser } from '@/api/system/user';
import type { User } from '@/api/system/user/model';
const ROUTE_PATH = '/system/user/details';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const { currentRoute } = useRouter();
// 用户信息
const { form, assignFields } = useFormData<User>({
userId: undefined,
alias: '',
realName: '',
username: '',
nickname: '',
sexName: '',
phone: '',
roles: [],
createTime: undefined,
status: undefined
});
// 请求状态
const loading = ref(true);
/* */
const query = () => {
const { query } = unref(currentRoute);
const id = query.id;
if (!id || form.userId === Number(id)) {
return;
}
loading.value = true;
getUser(Number(id))
.then((data) => {
loading.value = false;
assignFields({
...data,
createTime: toDateString(data.createTime)
});
// 修改页签标题
if (unref(currentRoute).path === ROUTE_PATH) {
setPageTabTitle(data.nickname + '的信息');
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
watch(
currentRoute,
(route) => {
const { path } = unref(route);
if (path !== ROUTE_PATH) {
return;
}
query();
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'SystemUserDetails'
};
</script>

View File

@@ -1,511 +0,0 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:datasource="datasource"
:scroll="{ x: 1300 }"
:where="defaultWhere"
:customRow="customRow"
cache-key="proSystemUserTable"
>
<template #toolbar>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="openEdit">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入关键词"
@search="reload"
@pressEnter="reload"
/>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'nickname'">
<div class="user-box">
<a-avatar
:size="30"
:src="`${record.avatar}`"
style="margin-right: 4px"
>
<template #icon>
<UserOutlined />
</template>
</a-avatar>
<div class="user-info" @click="openEdit(record)">
<span>{{ record.nickname }}</span>
<!-- <span class="ele-text-placeholder">{{ record.nickname }}</span>-->
</div>
</div>
</template>
<template v-if="column.key === 'mobile'">
<span>{{ record.mobile }}</span>
</template>
<template v-else-if="column.key === 'roles'">
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</template>
<template v-if="column.key === 'balance'">
<span class="ele-text-success">
{{ formatNumber(record.balance) }}
</span>
</template>
<template v-if="column.key === 'expendMoney'">
<span class="ele-text-warning">
{{ formatNumber(record.expendMoney) }}
</span>
</template>
<template v-else-if="column.key === 'status'">
<a-switch
:checked="record.status === 0"
@change="(checked: boolean) => editStatus(checked, record)"
/>
</template>
<template v-else-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<!-- <a @click="resetPsw(record)">重置</a>-->
<!-- <a-divider type="vertical" />-->
<a-popconfirm
placement="topRight"
title="确定要删除此用户吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<user-edit
v-model:visible="showEdit"
:data="current"
:organization-list="data"
@done="reload"
/>
<!-- 用户详情 -->
<user-info v-model:visible="showInfo" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref, reactive } from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import {
PlusOutlined,
DeleteOutlined,
UploadOutlined,
EditOutlined,
UserOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { messageLoading, formatNumber } from 'ele-admin-pro/es';
import { timeAgo } from 'ele-admin-pro';
import UserEdit from './components/user-edit.vue';
import UserImport from './components/user-import.vue';
import UserInfo from './components/user-info.vue';
import {
pageUsers,
removeUser,
removeUsers,
updateUserStatus,
updateUserPassword
} from '@/api/system/user';
import type { User, UserParam } from '@/api/system/user/model';
import { toTreeData, uuid } from 'ele-admin-pro';
import { listRoles } from '@/api/system/role';
import { listOrganizations } from '@/api/system/organization';
import { Organization } from '@/api/system/organization/model';
import { hasRole } from '@/utils/permission';
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Organization[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 表格选中数据
const selection = ref<User[]>([]);
// 当前编辑数据
const current = ref<User | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示用户详情
const showInfo = ref(false);
// 是否显示用户导入弹窗
const showImport = ref(false);
const userType = ref<number>();
const searchText = ref('');
// 加载角色
const roles = ref<any[]>([]);
const filters = () => {
listRoles().then((result) => {
result.map((d) => {
roles.value.push({
text: d.roleName,
value: d.roleId
});
});
});
};
filters();
// 加载机构
listOrganizations()
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.organizationId;
d.value = d.organizationId;
d.title = d.organizationName;
if (typeof d.key === 'number') {
eks.push(d.key);
}
});
expandedRowKeys.value = eks;
data.value = toTreeData({
data: list,
idField: 'organizationId',
parentIdField: 'parentId'
});
if (list.length) {
if (typeof list[0].key === 'number') {
selectedRowKeys.value = [list[0].key];
}
// current.value = list[0];
} else {
selectedRowKeys.value = [];
// current.value = null;
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
dataIndex: 'userId',
width: 80,
showSorterTooltip: false
},
{
title: '老师',
key: 'nickname',
dataIndex: 'nickname',
width: 240,
showSorterTooltip: false
},
{
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
showSorterTooltip: false
},
// {
// title: '客户分组',
// dataIndex: 'type',
// key: 'type',
// align: 'center',
// width: 120
// },
{
title: '性别',
dataIndex: 'sexName',
align: 'center',
width: 180,
showSorterTooltip: false
},
{
title: '邮箱',
dataIndex: 'email',
hideInTable: true,
width: 180,
showSorterTooltip: false
},
{
title: '可用余额',
dataIndex: 'balance',
key: 'balance',
align: 'center',
width: 180,
sorter: true,
showSorterTooltip: false
},
{
title: '实际消费金额',
dataIndex: 'expendMoney',
key: 'expendMoney',
sorter: true,
hideInTable: true,
showSorterTooltip: false
},
{
title: '可用积分',
dataIndex: 'points',
hideInTable: true,
sorter: true
},
{
title: '注册来源',
key: 'platform',
align: 'center',
dataIndex: 'platform',
hideInTable: true,
customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
},
{
title: '证件号码',
dataIndex: 'idCard',
hideInTable: true
},
{
title: '出生日期',
dataIndex: 'birthday',
key: 'birthday',
hideInTable: true
},
{
title: '省份',
dataIndex: 'province',
key: 'province',
hideInTable: true
},
{
title: '城市',
dataIndex: 'city',
key: 'city',
hideInTable: true,
showSorterTooltip: false
},
{
title: '地区',
dataIndex: 'region',
key: 'region',
hideInTable: true,
showSorterTooltip: false
},
{
title: '个人简介',
dataIndex: 'introduction',
key: 'introduction',
hideInTable: true,
showSorterTooltip: false
},
{
title: '邮箱认证',
dataIndex: 'emailVerified',
hideInTable: true,
showSorterTooltip: false,
customRender: ({ text }) => ['未认证', '已认证'][text]
},
{
title: '实名认证',
dataIndex: 'certification',
sorter: true,
hideInTable: true,
customRender: ({ text }) => ['未认证', '已认证'][text]
},
{
title: '注册时间',
dataIndex: 'createTime',
sorter: true,
align: 'center',
width: 200,
showSorterTooltip: false,
ellipsis: true,
customRender: ({ text }) => timeAgo(text)
},
{
title: '操作',
key: 'action',
width: 120,
fixed: 'right',
align: 'center'
}
]);
// 默认搜索条件
const defaultWhere = reactive({
username: '',
nickname: ''
});
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
where = {};
where.roleId = filters.roles;
where.keywords = searchText.value;
where.groupId = 22;
return pageUsers({ page, limit, ...where, ...orders });
};
/* 搜索 */
const reload = (where?: UserParam) => {
selection.value = [];
tableRef?.value?.reload({ where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: User) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: User) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开编辑弹窗 */
const openImport = () => {
showImport.value = true;
};
const handleTabs = (e) => {
userType.value = Number(e.target.value);
reload();
};
/* 删除单个 */
const remove = (row: User) => {
const hide = messageLoading('请求中..', 0);
removeUser(row.userId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的用户吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = messageLoading('请求中..', 0);
removeUsers(selection.value.map((d) => d.userId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 重置用户密码 */
const resetPsw = (row: User) => {
Modal.confirm({
title: '提示',
content: '确定要重置此用户的密码吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
const password = uuid(8);
updateUserPassword(row.userId, password)
.then((msg) => {
hide();
message.success(msg + ',新密码:' + password);
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 修改用户状态 */
const editStatus = (checked: boolean, row: User) => {
const status = checked ? 0 : 1;
updateUserStatus(row.userId, status)
.then((msg) => {
row.status = status;
message.success(msg);
})
.catch((e) => {
message.error(e.message);
});
};
/* 自定义行属性 */
const customRow = (record: User) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
</script>
<script lang="ts">
export default {
name: 'SystemUser'
};
</script>
<style lang="less" scoped>
.user-box {
display: flex;
align-items: center;
.user-info {
display: flex;
flex-direction: column;
align-items: start;
}
}
</style>

View File

@@ -0,0 +1,53 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-input-search
allow-clear
v-model:value="where.keywords"
placeholder="请输入关键词"
@search="search"
@pressEnter="search"
/>
</a-space>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import useSearch from '@/utils/use-search';
import { UsersParam } from '@/api/booking/users/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: UsersParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 表单数据
const { where } = useSearch<UsersParam>({
keywords: ''
});
/* 搜索 */
const search = () => {
emit('search', where);
};
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

View File

@@ -0,0 +1,347 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑用户' : '添加用户'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="用户唯一小程序id" name="openId">
<a-input
allow-clear
placeholder="请输入用户唯一小程序id"
v-model:value="form.openId"
/>
</a-form-item>
<a-form-item label="小程序用户秘钥" name="sessionKey">
<a-input
allow-clear
placeholder="请输入小程序用户秘钥"
v-model:value="form.sessionKey"
/>
</a-form-item>
<a-form-item label="用户名" name="username">
<a-input
allow-clear
placeholder="请输入用户名"
v-model:value="form.username"
/>
</a-form-item>
<a-form-item label="头像地址" name="avatarUrl">
<a-input
allow-clear
placeholder="请输入头像地址"
v-model:value="form.avatarUrl"
/>
</a-form-item>
<a-form-item label="1男2女" name="gender">
<a-input
allow-clear
placeholder="请输入1男2女"
v-model:value="form.gender"
/>
</a-form-item>
<a-form-item label="国家" name="country">
<a-input
allow-clear
placeholder="请输入国家"
v-model:value="form.country"
/>
</a-form-item>
<a-form-item label="省份" name="province">
<a-input
allow-clear
placeholder="请输入省份"
v-model:value="form.province"
/>
</a-form-item>
<a-form-item label="城市" name="city">
<a-input
allow-clear
placeholder="请输入城市"
v-model:value="form.city"
/>
</a-form-item>
<a-form-item label="所在辖区" name="region">
<a-input
allow-clear
placeholder="请输入所在辖区"
v-model:value="form.region"
/>
</a-form-item>
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
placeholder="请输入手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="邮箱" name="email">
<a-input
allow-clear
placeholder="请输入邮箱"
v-model:value="form.email"
/>
</a-form-item>
<a-form-item label="邮箱是否验证, 0否, 1是" name="emailVerified">
<a-input
allow-clear
placeholder="请输入邮箱是否验证, 0否, 1是"
v-model:value="form.emailVerified"
/>
</a-form-item>
<a-form-item label="积分" name="points">
<a-input
allow-clear
placeholder="请输入积分"
v-model:value="form.points"
/>
</a-form-item>
<a-form-item label="余额" name="balance">
<a-input
allow-clear
placeholder="请输入余额"
v-model:value="form.balance"
/>
</a-form-item>
<a-form-item label="注册时间" name="addTime">
<a-input
allow-clear
placeholder="请输入注册时间"
v-model:value="form.addTime"
/>
</a-form-item>
<a-form-item label="" name="idcard">
<a-input allow-clear placeholder="请输入" v-model:value="form.idcard" />
</a-form-item>
<a-form-item label="" name="truename">
<a-input
allow-clear
placeholder="请输入"
v-model:value="form.truename"
/>
</a-form-item>
<a-form-item label="是否管理员1是2否" name="isAdmin">
<a-input
allow-clear
placeholder="请输入是否管理员1是2否"
v-model:value="form.isAdmin"
/>
</a-form-item>
<a-form-item label="客户端ID" name="clientId">
<a-input
allow-clear
placeholder="请输入客户端ID"
v-model:value="form.clientId"
/>
</a-form-item>
<a-form-item label="注册来源客户端 (APP、H5、小程序等)" name="platform">
<a-input
allow-clear
placeholder="请输入注册来源客户端 (APP、H5、小程序等)"
v-model:value="form.platform"
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否删除, 0否, 1是" name="deleted">
<a-input
allow-clear
placeholder="请输入是否删除, 0否, 1是"
v-model:value="form.deleted"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addUsers, updateUsers } from '@/api/booking/users';
import { Users } from '@/api/booking/users/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Users | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<Users>({
userId: undefined,
openid: undefined,
sessionKey: undefined,
username: undefined,
avatarUrl: undefined,
sex: undefined,
country: undefined,
province: undefined,
city: undefined,
region: undefined,
phone: undefined,
email: undefined,
emailVerified: undefined,
points: undefined,
balance: undefined,
addTime: undefined,
idCard: undefined,
realName: undefined,
isAdmin: undefined,
clientId: undefined,
platform: undefined,
sortNumber: undefined,
comments: undefined,
status: undefined,
deleted: undefined,
tenantId: undefined,
createTime: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
userName: [
{
required: true,
type: 'string',
message: '请填写用户名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.avatarUrl = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.avatarUrl = '';
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateUsers : addUsers;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if (props.data.avatarUrl) {
images.value.push({
uid: uuid(),
url: props.data.avatarUrl,
status: 'done'
});
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

View File

@@ -0,0 +1,305 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'avatarUrl'">
<a-avatar
:size="36"
:src="`${record.avatarUrl}`"
style="margin-right: 4px"
>
<template #icon>
<UserOutlined />
</template>
</a-avatar>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 1" color="green">启用</a-tag>
<a-tag v-if="record.status === 2" color="red">禁用</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a>积分充值</a>
<a-divider type="vertical" />
<a>分配特殊卡</a>
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗?"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<UserEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
ExclamationCircleOutlined,
UserOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import UserEdit from './components/userEdit.vue';
import {
pageUsers,
removeBatchUsers,
removeUsers
} from '@/api/booking/users';
import type { Users, UsersParam } from '@/api/booking/users/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<Users[]>([]);
// 当前编辑数据
const current = ref<Users | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
return pageUsers({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
dataIndex: 'userId',
key: 'userId',
width: 90
},
{
title: '头像',
dataIndex: 'avatarUrl',
key: 'avatarUrl',
align: 'center'
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
align: 'center'
},
{
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
align: 'center'
},
{
title: '性别',
dataIndex: 'sexName',
key: 'sexName',
align: 'center'
},
{
title: '国家',
dataIndex: 'country',
key: 'country',
align: 'center',
hideInTable: true
},
{
title: '省份',
dataIndex: 'province',
key: 'province',
align: 'center'
},
{
title: '城市',
dataIndex: 'city',
key: 'city',
align: 'center'
},
{
title: '所在辖区',
dataIndex: 'region',
key: 'region',
align: 'center',
hideInTable: true
},
{
title: '邮箱是否验证, 0否, 1是',
dataIndex: 'emailVerified',
key: 'emailVerified',
align: 'center',
hideInTable: true
},
{
title: '积分',
dataIndex: 'points',
key: 'points',
align: 'center'
},
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
align: 'center'
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
align: 'center'
},
{
title: '注册时间',
dataIndex: 'addTime',
key: 'addTime',
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: UsersParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Users) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: Users) => {
const hide = message.loading('请求中..', 0);
removeUsers(row.userId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchUsers(selection.value.map((d) => d.userId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: Users) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'Users'
};
</script>
<style lang="less" scoped></style>

View File

@@ -22,6 +22,15 @@
<a-form-item label="参数值" name="value">
<a-input allow-clear placeholder="VALUE" v-model:value="form.value" />
</a-form-item>
<a-form-item label="(选填)">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
@done="chooseImage"
@del="onDeleteItem"
/>
</a-form-item>
<a-form-item label="描述" name="comments">
<a-textarea
:rows="4"
@@ -36,13 +45,15 @@
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
import { FormInstance } from 'ant-design-vue/es/form';
import { WebsiteField } from '@/api/cms/website/field/model';
import useFormData from '@/utils/use-form-data';
import { addWebsiteField, updateWebsiteField } from '@/api/cms/website/field';
import { message } from 'ant-design-vue/es';
import { isChinese } from 'ele-admin-pro';
import { removeSiteInfoCache } from '@/api/cms/website';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FileRecord } from '@/api/system/file/model';
import { uuid } from 'ele-admin-pro';
// 是否是修改
const isUpdate = ref(false);
@@ -62,7 +73,7 @@
// 提交状态
const loading = ref(false);
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
const { form, resetFields, assignFields } = useFormData<WebsiteField>({
@@ -98,6 +109,20 @@
emit('update:visible', value);
};
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.value = data.downloadUrl;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.value = '';
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
@@ -109,6 +134,7 @@
loading.value = true;
const data = {
...form,
name: form.name?.toUpperCase(),
websiteId: props.websiteId
};
const saveOrUpdate = isUpdate.value
@@ -136,9 +162,15 @@
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignFields(props.data);
form.comments = props.data.comments;
images.value.push({
uid: uuid(),
url: props.data.value,
status: 'done'
});
isUpdate.value = true;
} else {
isUpdate.value = false;

View File

@@ -4,6 +4,9 @@
'login-wrapper',
['', 'login-form-right', 'login-form-left'][direction]
]"
:style="{
backgroundImage: 'url(' + loginImg + ')'
}"
>
<div class="logo-login" v-if="config.shortName">
<img :src="config.companyLogo" class="logo" />
@@ -22,7 +25,7 @@
class="title-btn"
:class="loginType === 'scan' ? 'active' : ''"
@click="onLoginType('scan')"
>扫码登录</h4
>短信登录</h4
>
</a-space>
<template v-if="loginType === 'account'">
@@ -86,13 +89,6 @@
<a-checkbox v-model:checked="form.remember">
{{ t('login.remember') }}
</a-checkbox>
<!-- <router-link-->
<!-- to="/register"-->
<!-- class="ele-pull-right"-->
<!-- style="line-height: 22px"-->
<!-- >-->
<!-- 免费注册-->
<!-- </router-link>-->
</a-form-item>
<a-form-item>
<a-button
@@ -107,7 +103,58 @@
</a-form-item>
</template>
<template v-if="loginType === 'scan'">
<Register />
<a-form-item v-bind="validateInfos.phone">
<a-input
allow-clear
size="large"
maxlength="11"
v-model:value="form.phone"
:placeholder="`手机号码`"
>
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item v-bind="validateInfos.code">
<div class="login-input-group">
<a-input
placeholder="请输入验证码"
v-model:value="form.code"
:maxlength="6"
allow-clear
size="large"
>
<template #prefix>
<safety-certificate-outlined />
</template>
</a-input>
<a-button
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
>
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
</a-button>
</div>
</a-form-item>
<a-form-item>
<a-checkbox v-model:checked="form.remember">
{{ t('login.remember') }}
</a-checkbox>
</a-form-item>
<a-form-item>
<a-button
block
size="large"
type="primary"
:loading="loading"
@click="submit"
>
{{ loading ? t('login.loading') : t('login.login') }}
</a-button>
</a-form-item>
</template>
</a-form>
<div class="login-copyright">
@@ -118,6 +165,34 @@
</p>
</div>
</div>
<!-- 编辑弹窗 -->
<a-modal
:width="340"
:footer="null"
title="发送验证码"
v-model:visible="visible"
>
<div class="login-input-group" style="margin-bottom: 16px">
<a-input
v-model:value="imgCode"
placeholder="请输入图形验证码"
allow-clear
size="large"
/>
<a-button class="login-captcha">
<img alt="" :src="captcha" @click="changeCaptcha" />
</a-button>
</div>
<a-button
block
size="large"
type="primary"
:loading="codeLoading"
@click="sendCode"
>
立即发送
</a-button>
</a-modal>
</template>
<script lang="ts" setup>
@@ -126,23 +201,14 @@
import { useRouter } from 'vue-router';
import { getTenantId } from '@/utils/domain';
import { Form, message } from 'ant-design-vue';
// import WxWork from './components/wx-work.vue';
import Register from './components/register/step/index.vue';
import {
UserOutlined,
LockOutlined,
SafetyCertificateOutlined,
BankOutlined,
QqOutlined,
WechatOutlined,
WeiboOutlined
BankOutlined
} from '@ant-design/icons-vue';
// import I18nIcon from '@/layout/components/i18n-icon.vue';
// import { getToken } from '@/utils/token-util';
// import { TENANT_ID } from '@/config/setting';
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
import { login, getCaptcha, registerUser } from '@/api/passport/login';
// import { navTo } from '@/utils/common';
import { User } from '@/api/system/user/model';
import { THEME_STORE_NAME } from '@/config/setting';
@@ -150,8 +216,8 @@
import { useTenantStore } from '@/store/modules/tenant';
import { Company } from '@/api/system/company/model';
import useFormData from '@/utils/use-form-data';
import { openUrl } from '@/utils/common';
import { getDomain } from '@/utils/domain';
import { listWebsiteField } from '@/api/cms/website/field';
import { checkExistence } from '@/api/system/user';
const useForm = Form.useForm;
const { currentRoute } = useRouter();
@@ -180,6 +246,7 @@
companyLogo: '',
tenantId: undefined
});
const loginImg = ref('');
// 验证码 base64 数据
const captcha = ref('');
// 验证码内容, 实际项目去掉
@@ -205,6 +272,13 @@
type: 'string'
}
],
phone: [
{
required: true,
message: '请输入手机号码',
type: 'string'
}
],
password: [
{
required: true,
@@ -222,15 +296,33 @@
};
});
listWebsiteField({ name: 'LOGIN_IMG' }).then((list) => {
// if (list.length == 0) {
// loginImg.value = String('@/assets/bg-2.jpeg');
// return;
// }
list.map((d) => {
loginImg.value = String(d.value);
});
});
/* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => {
if (!form.phone) {
message.error('请输入手机号码');
return;
}
imgCode.value = '';
changeCaptcha();
visible.value = true;
checkExistence('phone', form.phone)
.then(() => {
imgCode.value = '';
changeCaptcha();
visible.value = true;
return;
})
.catch(() => {
message.error('该手机号码不存在');
return;
});
};
/* 发送短信验证码 */
@@ -239,22 +331,30 @@
message.error('请输入图形验证码');
return;
}
if (text.value !== imgCode.value) {
message.error('图形验证码不正确');
return;
}
codeLoading.value = true;
sendSmsCaptcha({ phone: form.phone }).then((res) => {
console.log(res);
message.success('短信验证码发送成功, 请注意查收!');
visible.value = false;
codeLoading.value = false;
countdownTime.value = 30;
// 开始对按钮进行倒计时
countdownTimer = window.setInterval(() => {
if (countdownTime.value <= 1) {
countdownTimer && clearInterval(countdownTimer);
countdownTimer = null;
}
countdownTime.value--;
}, 1000);
});
sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
.then(() => {
message.success('短信验证码发送成功, 请注意查收!');
visible.value = false;
codeLoading.value = false;
countdownTime.value = 60;
// 开始对按钮进行倒计时
countdownTimer = window.setInterval(() => {
if (countdownTime.value <= 1) {
countdownTimer && clearInterval(countdownTimer);
countdownTimer = null;
}
countdownTime.value--;
}, 1000);
})
.catch((e) => {
codeLoading.value = false;
message.error(e.message);
});
};
const { clearValidate, validate, validateInfos } = useForm(form, rules);
@@ -304,11 +404,6 @@
loginType.value = text;
};
const goBack = () => {
openUrl(getDomain());
return;
};
const loginConnect = () => {
// getWxWorkQrConnect().then((result) => {
// console.log(result);
@@ -366,9 +461,10 @@
padding: 48px 16px 0 16px;
position: relative;
box-sizing: border-box;
background-color: var(--grey-5);
background-image: url('@/assets/bg-2.jpeg');
background-color: #333333;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 100vh;
@@ -379,7 +475,7 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0);
}
}
/* 卡片 */

View File

@@ -5,7 +5,7 @@
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑订单' : '添加订单'"
:title="isUpdate ? '编辑预约订单' : '添加预约订单'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
@@ -19,90 +19,223 @@
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="订单号" name="orderNo">
<a-form-item label="订单号" name="orderNo">
<a-input
allow-clear
placeholder="请输入订单号"
placeholder="请输入订单号"
v-model:value="form.orderNo"
/>
</a-form-item>
<a-form-item label="类型" name="type">
<a-form-item label="微信支付订单号" name="wechatOrder">
<a-input
allow-clear
placeholder="请输入类型"
v-model:value="form.type"
placeholder="请输入微信支付订单号"
v-model:value="form.wechatOrder"
/>
</a-form-item>
<a-form-item label="订单金额" name="money">
<a-form-item label="微信退款订单号" name="refundOrder">
<a-input
allow-clear
placeholder="请输入订单金额"
v-model:value="form.money"
placeholder="请输入微信退款订单号"
v-model:value="form.refundOrder"
/>
</a-form-item>
<a-form-item label="实际付款金额(包含运费)" name="payPrice">
<a-form-item label="场馆id用于权限判断" name="merchantId">
<a-input
allow-clear
placeholder="请输入实际付款金额(包含运费)"
v-model:value="form.payPrice"
placeholder="请输入场馆id用于权限判断"
v-model:value="form.merchantId"
/>
</a-form-item>
<a-form-item label="套餐ID" name="planId">
<a-form-item label="用户id" name="userId">
<a-input
allow-clear
placeholder="请输入套餐ID"
v-model:value="form.planId"
/>
</a-form-item>
<a-form-item label="卡ID" name="priceId">
<a-input
allow-clear
placeholder="请输入卡ID"
v-model:value="form.priceId"
/>
</a-form-item>
<a-form-item label="获得的会员等级" name="gradeId">
<a-input
allow-clear
placeholder="请输入获得的会员等级"
v-model:value="form.gradeId"
/>
</a-form-item>
<a-form-item label="卡名称" name="priceName">
<a-input
allow-clear
placeholder="请输入卡名称"
v-model:value="form.priceName"
/>
</a-form-item>
<a-form-item label="用户ID" name="userId">
<a-input
allow-clear
placeholder="请输入用户ID"
placeholder="请输入用户id"
v-model:value="form.userId"
/>
</a-form-item>
<a-form-item label="持有者ID" name="memberId">
<a-form-item label="使用的优惠券id" name="couponId">
<a-input
allow-clear
placeholder="请输入持有者ID"
v-model:value="form.memberId"
placeholder="请输入使用的优惠券id"
v-model:value="form.couponId"
/>
</a-form-item>
<a-form-item label="真实姓名" name="realName">
<a-form-item label="使用的会员卡id" name="cardId">
<a-input
allow-clear
placeholder="请输入使用的会员卡id"
v-model:value="form.cardId"
/>
</a-form-item>
<a-form-item label="关联管理员id" name="aid">
<a-input
allow-clear
placeholder="请输入关联管理员id"
v-model:value="form.aid"
/>
</a-form-item>
<a-form-item label="核销管理员id" name="adminId">
<a-input
allow-clear
placeholder="请输入核销管理员id"
v-model:value="form.adminId"
/>
</a-form-item>
<a-form-item label="IC卡号" name="code">
<a-input
allow-clear
placeholder="请输入IC卡号"
v-model:value="form.code"
/>
</a-form-item>
<a-form-item label="真实姓名" name="name">
<a-input
allow-clear
placeholder="请输入真实姓名"
v-model:value="form.realName"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="联系电话" name="phone">
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
placeholder="请输入联系电话"
placeholder="请输入手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="订单总额" name="totalPrice">
<a-input
allow-clear
placeholder="请输入订单总额"
v-model:value="form.totalPrice"
/>
</a-form-item>
<a-form-item label="减少的金额使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格" name="reducePrice">
<a-input
allow-clear
placeholder="请输入减少的金额使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
v-model:value="form.reducePrice"
/>
</a-form-item>
<a-form-item label="实际付款" name="payPrice">
<a-input
allow-clear
placeholder="请输入实际付款"
v-model:value="form.payPrice"
/>
</a-form-item>
<a-form-item label="用于统计" name="price">
<a-input
allow-clear
placeholder="请输入用于统计"
v-model:value="form.price"
/>
</a-form-item>
<a-form-item label="价钱,用于积分赠送" name="money">
<a-input
allow-clear
placeholder="请输入价钱,用于积分赠送"
v-model:value="form.money"
/>
</a-form-item>
<a-form-item label="退款金额" name="refundMoney">
<a-input
allow-clear
placeholder="请输入退款金额"
v-model:value="form.refundMoney"
/>
</a-form-item>
<a-form-item label="教练价格" name="coachPrice">
<a-input
allow-clear
placeholder="请输入教练价格"
v-model:value="form.coachPrice"
/>
</a-form-item>
<a-form-item label="教练id" name="coachId">
<a-input
allow-clear
placeholder="请输入教练id"
v-model:value="form.coachId"
/>
</a-form-item>
<a-form-item label="1微信支付2积分3支付宝4现金5POS机6VIP月卡7VIP年卡8VIP次卡9IC月卡10IC年卡11IC次卡12免费13VIP充值卡14IC充值卡15积分支付16VIP季卡17IC季卡" name="payType">
<a-input
allow-clear
placeholder="请输入1微信支付2积分3支付宝4现金5POS机6VIP月卡7VIP年卡8VIP次卡9IC月卡10IC年卡11IC次卡12免费13VIP充值卡14IC充值卡15积分支付16VIP季卡17IC季卡"
v-model:value="form.payType"
/>
</a-form-item>
<a-form-item label="1已付款2未付款" name="payStatus">
<a-input
allow-clear
placeholder="请输入1已付款2未付款"
v-model:value="form.payStatus"
/>
</a-form-item>
<a-form-item label="1已完成2未使用3已取消4退款申请中5退款被拒绝6退款成功7客户端申请退款" name="orderStatus">
<a-input
allow-clear
placeholder="请输入1已完成2未使用3已取消4退款申请中5退款被拒绝6退款成功7客户端申请退款"
v-model:value="form.orderStatus"
/>
</a-form-item>
<a-form-item label="优惠类型0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡" name="type">
<a-input
allow-clear
placeholder="请输入优惠类型0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
v-model:value="form.type"
/>
</a-form-item>
<a-form-item label="二维码地址,保存订单号,支付成功后才生成" name="qrcode">
<a-input
allow-clear
placeholder="请输入二维码地址,保存订单号,支付成功后才生成"
v-model:value="form.qrcode"
/>
</a-form-item>
<a-form-item label="优惠说明" name="desc">
<a-input
allow-clear
placeholder="请输入优惠说明"
v-model:value="form.desc"
/>
</a-form-item>
<a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">
<a-input
allow-clear
placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"
v-model:value="form.returnNum"
/>
</a-form-item>
<a-form-item label="vip充值回退金额" name="returnMoney">
<a-input
allow-clear
placeholder="请输入vip充值回退金额"
v-model:value="form.returnMoney"
/>
</a-form-item>
<a-form-item label="预约详情开始时间数组" name="startTime">
<a-input
allow-clear
placeholder="请输入预约详情开始时间数组"
v-model:value="form.startTime"
/>
</a-form-item>
<a-form-item label="是否已开具发票1已开发票2未开发票3不能开具发票" name="isInvoice">
<a-input
allow-clear
placeholder="请输入是否已开具发票1已开发票2未开发票3不能开具发票"
v-model:value="form.isInvoice"
/>
</a-form-item>
<a-form-item label="" name="updateTime">
<a-input
allow-clear
placeholder="请输入"
v-model:value="form.updateTime"
/>
</a-form-item>
<a-form-item label="付款时间" name="payTime">
<a-input
allow-clear
@@ -110,90 +243,25 @@
v-model:value="form.payTime"
/>
</a-form-item>
<a-form-item label="支付流水号" name="transactionId">
<a-form-item label="退款时间" name="refundTime">
<a-input
allow-clear
placeholder="请输入支付流水号"
v-model:value="form.transactionId"
placeholder="请输入退款时间"
v-model:value="form.refundTime"
/>
</a-form-item>
<a-form-item label="付款状态(10未付款 20已付款)" name="payStatus">
<a-form-item label="申请退款时间" name="refundApplyTime">
<a-input
allow-clear
placeholder="请输入付款状态(10未付款 20已付款)"
v-model:value="form.payStatus"
placeholder="请输入申请退款时间"
v-model:value="form.refundApplyTime"
/>
</a-form-item>
<a-form-item label="到期时间" name="expirationTime">
<a-form-item label="对账情况1=已对账2=未对账3=已对账金额对不上4=未查询到该订单" name="checkBill">
<a-input
allow-clear
placeholder="请输入到期时间"
v-model:value="form.expirationTime"
/>
</a-form-item>
<a-form-item label="所在省份" name="province">
<a-input
allow-clear
placeholder="请输入所在省份"
v-model:value="form.province"
/>
</a-form-item>
<a-form-item label="所在城市" name="city">
<a-input
allow-clear
placeholder="请输入所在城市"
v-model:value="form.city"
/>
</a-form-item>
<a-form-item label="所在辖区" name="region">
<a-input
allow-clear
placeholder="请输入所在辖区"
v-model:value="form.region"
/>
</a-form-item>
<a-form-item label="所在地区" name="area">
<a-input
allow-clear
placeholder="请输入所在地区"
v-model:value="form.area"
/>
</a-form-item>
<a-form-item label="街道地址" name="address">
<a-input
allow-clear
placeholder="请输入街道地址"
v-model:value="form.address"
/>
</a-form-item>
<a-form-item label="退款凭证" name="refundImage">
<a-input
allow-clear
placeholder="请输入退款凭证"
v-model:value="form.refundImage"
/>
</a-form-item>
<a-form-item label="退款理由" name="refundContent">
<a-input
allow-clear
placeholder="请输入退款理由"
v-model:value="form.refundContent"
/>
</a-form-item>
<a-form-item label="订单是否已结算(0未结算 1已结算)" name="isSettled">
<a-input
allow-clear
placeholder="请输入订单是否已结算(0未结算 1已结算)"
v-model:value="form.isSettled"
/>
</a-form-item>
<a-form-item label="排序(数字越小越靠前)" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
placeholder="请输入对账情况1=已对账2=未对账3=已对账金额对不上4=未查询到该订单"
v-model:value="form.checkBill"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
@@ -204,12 +272,6 @@
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="状态, 0正常, 1冻结" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否删除, 0否, 1是" name="deleted">
<a-input
allow-clear
@@ -217,13 +279,6 @@
v-model:value="form.deleted"
/>
</a-form-item>
<a-form-item label="修改时间" name="updateTime">
<a-input
allow-clear
placeholder="请输入修改时间"
v-model:value="form.updateTime"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
@@ -271,36 +326,44 @@
const form = reactive<Order>({
orderId: undefined,
orderNo: undefined,
type: undefined,
money: undefined,
payPrice: undefined,
planId: undefined,
priceId: undefined,
gradeId: undefined,
priceName: undefined,
wechatOrder: undefined,
refundOrder: undefined,
merchantId: undefined,
userId: undefined,
memberId: undefined,
realName: undefined,
couponId: undefined,
cardId: undefined,
aid: undefined,
adminId: undefined,
code: undefined,
name: undefined,
phone: undefined,
payTime: undefined,
transactionId: undefined,
totalPrice: undefined,
reducePrice: undefined,
payPrice: undefined,
price: undefined,
money: undefined,
refundMoney: undefined,
coachPrice: undefined,
coachId: undefined,
payType: undefined,
payStatus: undefined,
expirationTime: undefined,
province: undefined,
city: undefined,
region: undefined,
area: undefined,
address: undefined,
refundImage: undefined,
refundContent: undefined,
isSettled: undefined,
sortNumber: undefined,
comments: undefined,
status: undefined,
deleted: undefined,
tenantId: undefined,
orderStatus: undefined,
type: undefined,
qrcode: undefined,
desc: undefined,
returnNum: undefined,
returnMoney: undefined,
startTime: undefined,
isInvoice: undefined,
createTime: undefined,
updateTime: undefined,
payTime: undefined,
refundTime: undefined,
refundApplyTime: undefined,
checkBill: undefined,
comments: undefined,
deleted: undefined,
tenantId: undefined,
orderId: undefined,
orderName: '',
status: 0,
@@ -319,7 +382,7 @@
{
required: true,
type: 'string',
message: '请填写订单名称',
message: '请填写预约订单名称',
trigger: 'blur'
}
]

View File

@@ -8,6 +8,7 @@
:columns="columns"
:datasource="datasource"
:customRow="customRow"
:scroll="{ x: 800 }"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
@@ -21,28 +22,16 @@
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'userId'">
{{ record.nickname }}
</template>
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">已完成</a-tag>
<a-tag v-if="record.status === 1" color="red">待付款</a-tag>
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">订单详情</a>
<template v-if="hasRole('superAdmin') || hasRole('admin')">
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</template>
<a @click="openEdit(record)">详情</a>
</a-space>
</template>
</template>
@@ -59,8 +48,7 @@
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import { EleProTable, toDateString } from "ele-admin-pro";
import type {
DatasourceFunction,
ColumnItem
@@ -69,7 +57,6 @@
import OrderEdit from './components/orderEdit.vue';
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/shop/order';
import type { Order, OrderParam } from '@/api/shop/order/model';
import {hasRole} from "@/utils/permission";
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -107,49 +94,47 @@
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
title: '订单号',
dataIndex: 'orderId',
key: 'orderId',
align: 'center',
width: 90,
width: 90
},
{
title: '订单号',
dataIndex: 'orderNo',
key: 'orderNo',
align: 'center',
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center'
},
// {
// title: '类型',
// dataIndex: 'type',
// key: 'type',
// align: 'center',
// customRender: ({ text }) => ['实物商品', '虚拟商品'][text]
// },
{
title: '用户昵称',
dataIndex: 'userId',
key: 'userId',
align: 'center',
title: '手机号',
dataIndex: 'phone',
key: 'phone',
width: 120,
align: 'center'
},
{
title: '总额',
dataIndex: 'totalPrice',
key: 'totalPrice',
align: 'center'
},
{
title: '减少金额',
dataIndex: 'reducePrice',
key: 'reducePrice',
align: 'center'
},
{
title: '实付金额',
dataIndex: 'payPrice',
key: 'payPrice',
align: 'center',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'payMethod',
key: 'payMethod',
align: 'center',
},
{
title: '付款时间',
dataIndex: 'payTime',
key: 'payTime',
align: 'center',
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
dataIndex: 'payType',
key: 'payType',
align: 'center'
},
{
title: '付款状态',
@@ -158,36 +143,47 @@
align: 'center'
},
{
title: '排序',
dataIndex: 'sortNumber',
key: 'sortNumber',
align: 'center',
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus',
align: 'center'
},
{
title: '优惠类型',
dataIndex: 'type',
key: 'type',
align: 'center'
},
{
title: '是否已开票',
dataIndex: 'isInvoice',
key: 'isInvoice',
align: 'center'
},
{
title: '付款时间',
dataIndex: 'payTime',
key: 'payTime',
align: 'center',
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
},
// {
// title: '申请退款时间',
// dataIndex: 'refundApplyTime',
// key: 'refundApplyTime',
// align: 'center',
// customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
// },
{
title: '备注',
dataIndex: 'comments',
key: 'comments',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
align: 'center',
},
{
title: '下单时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
width: 180,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:MM:ss')
align: 'center'
},
{
title: '操作',
key: 'action',
width: 120,
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true