优化网站导航模块
This commit is contained in:
@@ -1,293 +0,0 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
: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="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入登录账号"
|
||||
:disabled="isUpdate"
|
||||
v-model:value="form.username"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入手机号码"
|
||||
maxlength="11"
|
||||
:disabled="isUpdate && !isSuperAdmin"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="密码" name="password" v-if="!isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入登录密码"
|
||||
:disabled="isUpdate"
|
||||
v-model:value="form.password"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="真实姓名" name="realName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入真实姓名"
|
||||
v-model:value="form.realName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择角色" name="roles">
|
||||
<role-select v-model:value="form.roles" />
|
||||
</a-form-item>
|
||||
<a-form-item label="可管理场馆" name="merchantId">
|
||||
<MerchantSelect v-model:value="merchants" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, computed } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { addUser, updateUser } from '@/api/system/user';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
|
||||
import RoleSelect from './role-select.vue';
|
||||
import MerchantSelect from './merchant-select.vue';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
import { getMerchantName } from '@/utils/merchant';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Merchant } from '@/api/shop/merchant/model';
|
||||
import { listMerchant } from '@/api/shop/merchant';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | 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 isSuperAdmin = ref<boolean>(false);
|
||||
const merchants = ref<Merchant[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<User>({
|
||||
type: undefined,
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
realName: '',
|
||||
companyName: '',
|
||||
merchants: '',
|
||||
merchantId: getMerchantId(),
|
||||
merchantName: getMerchantName(),
|
||||
sex: undefined,
|
||||
roles: [],
|
||||
roleId: undefined,
|
||||
roleName: undefined,
|
||||
email: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
introduction: '',
|
||||
organizationId: undefined,
|
||||
birthday: '',
|
||||
idCard: '',
|
||||
comments: '',
|
||||
gradeName: '',
|
||||
isAdmin: true,
|
||||
gradeId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
merchantAccountName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写场馆账号名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// merchantId: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请选择场馆',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
roles: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择角色',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject) => {
|
||||
if (form.roles?.length == 0) {
|
||||
return Promise.reject('请选择角色');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写登录账号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入登录密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
realName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写真实姓名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const chooseMerchantId = (item) => {
|
||||
form.merchantId = item.merchantId;
|
||||
form.merchantName = item.merchantName;
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
merchants: merchants.value?.map((d) => d.merchantId).join(',')
|
||||
};
|
||||
if (getMerchantId()) {
|
||||
form.merchantId = getMerchantId();
|
||||
form.merchantName = getMerchantName();
|
||||
}
|
||||
const saveOrUpdate = isUpdate.value ? updateUser : addUser;
|
||||
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 = [];
|
||||
merchants.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.merchants) {
|
||||
listMerchant({ merchantIds: props.data.merchants }).then((list) => {
|
||||
merchants.value = list;
|
||||
});
|
||||
}
|
||||
// if (props.data.comments) {
|
||||
// listMerchant({ merchantCodes: props.data.comments }).then(
|
||||
// (list) => {
|
||||
// merchants.value = list;
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
resetFields();
|
||||
isUpdate.value = false;
|
||||
}
|
||||
const superAdmin = loginUser.value.roles?.filter(
|
||||
(d) => d.roleCode == 'superAdmin'
|
||||
);
|
||||
// 是否超级管理员
|
||||
if (superAdmin && superAdmin.length > 0) {
|
||||
isSuperAdmin.value = true;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
:value="merchantIds"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in data"
|
||||
:key="item.merchantId"
|
||||
:value="item.merchantId"
|
||||
>
|
||||
{{ item.merchantName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { Merchant } from '@/api/shop/merchant/model';
|
||||
import { listMerchant } from '@/api/shop/merchant';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: Merchant[]): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的商户
|
||||
value?: Merchant[];
|
||||
//
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择场馆'
|
||||
}
|
||||
);
|
||||
|
||||
// 选中的角色id
|
||||
const merchantIds = computed(() =>
|
||||
props.value?.map((d) => d.merchantId as number)
|
||||
);
|
||||
|
||||
// 角色数据
|
||||
const data = ref<Merchant[]>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: number[]) => {
|
||||
emit(
|
||||
'update:value',
|
||||
value.map((v) => ({ merchantId: v }))
|
||||
);
|
||||
};
|
||||
|
||||
/* 获取角色数据 */
|
||||
listMerchant({})
|
||||
.then((list) => {
|
||||
data.value = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -1,73 +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.filter(
|
||||
(d) => d.roleCode == 'merchant' || d.roleCode == 'merchantClerk'
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { UserParam } from '@/api/system/user/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: UserParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<UserParam>({
|
||||
userId: undefined,
|
||||
username: undefined,
|
||||
phone: undefined,
|
||||
realName: undefined,
|
||||
keywords: undefined
|
||||
});
|
||||
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -28,7 +28,7 @@
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="适用场馆" name="merchants">
|
||||
<MerchantSelect v-model:value="merchants" />
|
||||
<!-- <MerchantSelect v-model:value="merchants" />-->
|
||||
</a-form-item>
|
||||
<a-form-item label="会员卡名称" name="cardName">
|
||||
<a-input
|
||||
@@ -146,8 +146,8 @@
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import { addCard, updateCard } from '@/api/booking/card';
|
||||
import { Card } from '@/api/booking/card/model';
|
||||
import { addBookingCard, updateBookingCard } from '@/api/booking/bookingCard';
|
||||
import { BookingCard } from '@/api/booking/bookingCard/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
@@ -158,7 +158,7 @@
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import MerchantSelect from '@/views/booking/account/components/merchant-select.vue';
|
||||
// import MerchantSelect from '@/views/booking/account/components/merchant-select.vue';
|
||||
import { listMerchant } from '@/api/shop/merchant';
|
||||
|
||||
// 是否是修改
|
||||
@@ -172,7 +172,7 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Card | null;
|
||||
data?: BookingCard | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -191,7 +191,7 @@
|
||||
const merchants = ref<Merchant[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Card>({
|
||||
const form = reactive<BookingCard>({
|
||||
cardId: undefined,
|
||||
cardName: '',
|
||||
cardCode: undefined,
|
||||
@@ -205,7 +205,6 @@
|
||||
content: '',
|
||||
userId: 0,
|
||||
merchantId: 0,
|
||||
merchantName: '',
|
||||
comments: '',
|
||||
status: 0,
|
||||
sortNumber: 100
|
||||
@@ -324,7 +323,9 @@
|
||||
comments: content.value,
|
||||
merchantIds: merchants.value?.map((d) => d.merchantId).join(',')
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCard : addCard;
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateBookingCard
|
||||
: addBookingCard;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
@@ -67,17 +67,24 @@
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CardEdit from './components/cardEdit.vue';
|
||||
import { pageCard, removeCard, removeBatchCard } from '@/api/booking/card';
|
||||
import type { Card, CardParam } from '@/api/booking/card/model';
|
||||
import {
|
||||
pageBookingCard,
|
||||
removeBookingCard,
|
||||
removeBatchBookingCard
|
||||
} from '@/api/booking/bookingCard';
|
||||
import type {
|
||||
BookingCard,
|
||||
BookingCardParam
|
||||
} from '@/api/booking/bookingCard/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Card[]>([]);
|
||||
const selection = ref<BookingCard[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Card | null>(null);
|
||||
const current = ref<BookingCard | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -96,7 +103,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageCard({
|
||||
return pageBookingCard({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -195,13 +202,13 @@
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CardParam) => {
|
||||
const reload = (where?: BookingCardParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Card) => {
|
||||
const openEdit = (row?: BookingCard) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -212,9 +219,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Card) => {
|
||||
const remove = (row: BookingCard) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCard(row.cardId)
|
||||
removeBookingCard(row.cardId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -239,7 +246,7 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCard(selection.value.map((d) => d.cardId))
|
||||
removeBatchBookingCard(selection.value.map((d) => d.cardId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -259,7 +266,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Card) => {
|
||||
const customRow = (record: BookingCard) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -276,7 +283,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Card'
|
||||
name: 'BookingCard'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入会员卡名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="标识" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入标识"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</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="排序号" 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="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 {
|
||||
addBookingCardPlan,
|
||||
updateBookingCardPlan
|
||||
} from '@/api/booking/bookingCardPlan';
|
||||
import { BookingCardPlan } from '@/api/booking/bookingCardPlan/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?: BookingCardPlan | 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<BookingCardPlan>({
|
||||
cardPlanId: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingCardPlanName: [
|
||||
{
|
||||
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
|
||||
? updateBookingCardPlan
|
||||
: addBookingCardPlan;
|
||||
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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="courseCategoryId"
|
||||
row-key="bookingCardPlanId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
@@ -45,7 +45,7 @@
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CourseCategoryEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<BookingCardPlanEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -61,17 +61,17 @@
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CourseCategoryEdit from './components/courseCategoryEdit.vue';
|
||||
import { pageCourseCategory, removeCourseCategory, removeBatchCourseCategory } from '@/api/booking/courseCategory';
|
||||
import type { CourseCategory, CourseCategoryParam } from '@/api/booking/courseCategory/model';
|
||||
import BookingCardPlanEdit from './components/bookingCardPlanEdit.vue';
|
||||
import { pageBookingCardPlan, removeBookingCardPlan, removeBatchBookingCardPlan } from '@/api/booking/bookingCardPlan';
|
||||
import type { BookingCardPlan, BookingCardPlanParam } from '@/api/booking/bookingCardPlan/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CourseCategory[]>([]);
|
||||
const selection = ref<BookingCardPlan[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CourseCategory | null>(null);
|
||||
const current = ref<BookingCardPlan | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -90,7 +90,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageCourseCategory({
|
||||
return pageBookingCardPlan({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -101,42 +101,24 @@
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '商品分类ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
title: 'ID',
|
||||
dataIndex: 'cardPlanId',
|
||||
key: 'cardPlanId',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
title: '会员卡名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '分类标识',
|
||||
title: '标识',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '分类图片',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '上级分类ID',
|
||||
dataIndex: 'parentId',
|
||||
key: 'parentId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
@@ -144,21 +126,15 @@
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否推荐',
|
||||
dataIndex: 'recommend',
|
||||
key: 'recommend',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态, 0正常, 1禁用',
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
@@ -187,13 +163,13 @@
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CourseCategoryParam) => {
|
||||
const reload = (where?: BookingCardPlanParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CourseCategory) => {
|
||||
const openEdit = (row?: BookingCardPlan) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -204,9 +180,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CourseCategory) => {
|
||||
const remove = (row: BookingCardPlan) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCourseCategory(row.courseCategoryId)
|
||||
removeBookingCardPlan(row.bookingCardPlanId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -231,7 +207,7 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCourseCategory(selection.value.map((d) => d.courseCategoryId))
|
||||
removeBatchBookingCardPlan(selection.value.map((d) => d.bookingCardPlanId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -251,7 +227,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CourseCategory) => {
|
||||
const customRow = (record: BookingCardPlan) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -268,7 +244,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CourseCategory'
|
||||
name: 'BookingCardPlan'
|
||||
};
|
||||
</script>
|
||||
|
||||
190
src/views/booking/bookingCashier/components/cashier.vue
Normal file
190
src/views/booking/bookingCashier/components/cashier.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<a-card
|
||||
:title="`收银员：${loginUser?.realName}`"
|
||||
:bordered="false"
|
||||
:body-style="{ minHeight: '60vh', width: '380px', padding: '0' }"
|
||||
:head-style="{ className: 'bg-gray-500' }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button danger @click="removeAll" size="small">整单取消</a-button>
|
||||
</template>
|
||||
<div class="goods-list overflow-x-hidden px-3 h-[600px]">
|
||||
<a-empty v-if="cashier?.totalNums === 0" :image="simpleImage" />
|
||||
<a-spin :spinning="spinning">
|
||||
<template v-for="(item, index) in cashier?.cashiers" :key="index">
|
||||
<div class="goods-item py-4 flex">
|
||||
<div class="goods-image" v-if="item.image">
|
||||
<a-avatar :src="item.image" shape="square" :size="42" />
|
||||
</div>
|
||||
<div class="goods-info w-full ml-2">
|
||||
<div class="goods-bar flex justify-between">
|
||||
<div class="goods-name flex-1">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="spec text-gray-400">{{ item.spec }}</div>
|
||||
<div class="goods-price flex justify-between items-center">
|
||||
<div class="flex">
|
||||
<div class="price text-red-500">￥{{ item.price }}</div>
|
||||
<div class="total-num ml-5 text-gray-400"
|
||||
>x {{ item.cartNum }}</div
|
||||
>
|
||||
</div>
|
||||
<div class="add flex items-center text-gray-500">
|
||||
<MinusCircleOutlined class="text-xl" @click="subNum(item)" />
|
||||
<div class="block text-center px-3">{{ item.cartNum }}</div>
|
||||
<PlusCircleOutlined class="text-xl" @click="addNum(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-nums"> </div>
|
||||
</div>
|
||||
<a-divider dashed />
|
||||
</template>
|
||||
</a-spin>
|
||||
</div>
|
||||
<template #actions>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-left pb-4 pl-4 text-gray-500"
|
||||
>共计 {{ cashier.totalNums }} 件，已优惠：￥0.00
|
||||
</div>
|
||||
<div class="flex justify-between px-2">
|
||||
<a-button size="large" class="w-full mx-1" @click="getListByGroup"
|
||||
>取单</a-button
|
||||
>
|
||||
<a-button size="large" class="w-full mx-1" @click="onPack"
|
||||
>挂单</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="w-full mx-1"
|
||||
size="large"
|
||||
@click="onPay"
|
||||
>收款￥{{ formatNumber(cashier.totalPrice) }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PlusCircleOutlined,
|
||||
MinusCircleOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref, watch, createVNode } from 'vue';
|
||||
import { Cashier, CashierVo } from '@/api/shop/cashier/model';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import {
|
||||
subCartNum,
|
||||
addCartNum,
|
||||
removeBatchCashier,
|
||||
removeCashier,
|
||||
packCashier
|
||||
} from '@/api/shop/cashier';
|
||||
import { Empty, Modal, message } from 'ant-design-vue';
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
loginUser?: User;
|
||||
cashier?: CashierVo;
|
||||
count?: number;
|
||||
spinning?: boolean;
|
||||
}>(),
|
||||
{
|
||||
placeholder: undefined
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'reload'): void;
|
||||
(e: 'group'): void;
|
||||
(e: 'pay'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const cashiers = ref<Cashier[]>([]);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const onPay = () => {
|
||||
emit('pay');
|
||||
};
|
||||
|
||||
const subNum = (row: Cashier) => {
|
||||
if (row.cartNum === 1) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除该商品吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCashier(row?.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
emit('reload');
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
subCartNum(row).then(() => {
|
||||
emit('reload');
|
||||
});
|
||||
};
|
||||
|
||||
const addNum = (row: Cashier) => {
|
||||
addCartNum(row).then(() => {
|
||||
emit('reload');
|
||||
});
|
||||
};
|
||||
|
||||
const removeAll = () => {
|
||||
const ids = props.cashier?.cashiers?.map((d) => d.id);
|
||||
if (ids) {
|
||||
removeBatchCashier(ids)
|
||||
.then(() => {})
|
||||
.finally(() => {
|
||||
emit('reload');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 取单
|
||||
const getListByGroup = () => {
|
||||
emit('group');
|
||||
};
|
||||
|
||||
// 挂单
|
||||
const onPack = () => {
|
||||
cashiers.value =
|
||||
props.cashier?.cashiers?.map((d) => {
|
||||
return {
|
||||
id: d.id,
|
||||
groupId: Number(d.groupId) + 1
|
||||
};
|
||||
}) || [];
|
||||
if (cashiers.value.length === 0) {
|
||||
return false;
|
||||
}
|
||||
packCashier(cashiers.value).then((res) => {
|
||||
emit('reload');
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.count,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
256
src/views/booking/bookingCashier/components/goods.vue
Normal file
256
src/views/booking/bookingCashier/components/goods.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<a-card
|
||||
class="w-full relative"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="flex leading-7 mb-6">
|
||||
<div class="w-[202px] text-gray-500">选择场馆：</div>
|
||||
<div class="list">
|
||||
<a-radio-group v-model:value="where.merchantId" button-style="solid">
|
||||
<a-radio-button
|
||||
v-for="(item, index) in category"
|
||||
:key="index"
|
||||
:value="item.merchantId"
|
||||
@click="onMerchant(item)"
|
||||
>{{ item.merchantName }}</a-radio-button
|
||||
>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex leading-7 mb-6">
|
||||
<div class="w-[138px] text-gray-500">预定日期：</div>
|
||||
<div class="list">
|
||||
<a-radio-group v-model:value="where.dateTime" button-style="solid">
|
||||
<a-radio-button
|
||||
v-for="(item, index) in next7day"
|
||||
:key="index"
|
||||
:value="item.dateTime"
|
||||
>{{ item.label }}</a-radio-button
|
||||
>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex leading-7 mb-6">-->
|
||||
<!-- <div class="w-[138px] text-gray-500">选择时段：</div>-->
|
||||
<!-- <div class="list">-->
|
||||
<!-- <a-radio-group v-model:value="where.timePeriod">-->
|
||||
<!-- <a-radio-button-->
|
||||
<!-- v-for="(item, index) in periods"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :value="item.merchantId"-->
|
||||
<!-- @click="onMerchant(item)"-->
|
||||
<!-- >{{ item.timePeriod }}</a-radio-button-->
|
||||
<!-- >-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="flex leading-7 mb-6">
|
||||
<div class="w-[138px] text-gray-500">选择场地：</div>
|
||||
<div class="list flex-1">
|
||||
<template v-for="(item, index) in periodList" :key="index">
|
||||
<div class="time-period leading-7 text-gray-500 mb-2">
|
||||
<a-tag color="blue">
|
||||
<template #icon>
|
||||
<ClockCircleOutlined />
|
||||
</template>
|
||||
{{ item.timePeriod }}</a-tag
|
||||
>
|
||||
</div>
|
||||
<div class="field-list flex flex-wrap mb-2">
|
||||
<a-button
|
||||
class="w-[140px]"
|
||||
v-for="(field, fieldIndex) in item.fieldList"
|
||||
:key="fieldIndex"
|
||||
:disabled="field.sold"
|
||||
@click="add(field, item.timePeriod)"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<text>{{ field.fieldName }}</text>
|
||||
<text>￥{{ item.price }}</text>
|
||||
</div>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <div class="h-20 flex items-center m-auto w-full justify-center">-->
|
||||
<!-- <a-pagination-->
|
||||
<!-- v-model:current="page"-->
|
||||
<!-- :total="count"-->
|
||||
<!-- show-less-items-->
|
||||
<!-- @change="reload"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 编辑弹窗 -->
|
||||
<SpecForm
|
||||
v-model:visible="showSpecForm"
|
||||
:data="current"
|
||||
@done="addSpecField"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import {
|
||||
ShoppingCartOutlined,
|
||||
ClockCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import SpecForm from './specForm.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { listMerchant } from '@/api/shop/merchant';
|
||||
import { getNext7day, getServerTime } from '@/api/layout';
|
||||
import { getWeek } from '@/utils/common';
|
||||
import {
|
||||
listBookingPeriod
|
||||
} from '@/api/booking/bookingPeriod';
|
||||
import {
|
||||
BookingPeriod,
|
||||
BookingPeriodParam
|
||||
} from '@/api/booking/bookingPeriod/model';
|
||||
import { Merchant } from '@/api/shop/merchant/model';
|
||||
import { BookingField } from '@/api/booking/bookingField/model';
|
||||
import { addBookingCashier } from '@/api/booking/bookingCashier';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
loginUser?: User;
|
||||
}>(),
|
||||
{
|
||||
placeholder: undefined
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'reload'): void;
|
||||
}>();
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<BookingPeriodParam>({
|
||||
merchantId: undefined,
|
||||
merchantName: undefined,
|
||||
dateTime: undefined,
|
||||
week: undefined,
|
||||
half: 0,
|
||||
isStatus: 0,
|
||||
startTime: undefined,
|
||||
timePeriod: undefined
|
||||
});
|
||||
|
||||
// 加载中状态
|
||||
const spinning = ref<boolean>(true);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingField | null>(null);
|
||||
const form = ref<BookingField>({});
|
||||
const category = ref<Merchant[]>([]);
|
||||
const periods = ref<BookingPeriod[]>([]);
|
||||
const periodList = ref<BookingPeriod[] | null>();
|
||||
const specs = ref<string>();
|
||||
const showSpecForm = ref<boolean>(false);
|
||||
const next7day = ref<any[]>();
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openSpecForm = (row?: BookingField) => {
|
||||
current.value = row ?? null;
|
||||
showSpecForm.value = true;
|
||||
};
|
||||
|
||||
const add = (row?: BookingField, timePeriod?: string) => {
|
||||
if (row?.merchantId == 3028) {
|
||||
form.value = row;
|
||||
form.value.cartNum = 1;
|
||||
openSpecForm(row);
|
||||
return false;
|
||||
}
|
||||
addBookingCashier({
|
||||
goodsId: row?.fieldId,
|
||||
name: `${where.merchantName} ${row?.fieldName}`,
|
||||
price: row?.price,
|
||||
spec: `${where.dateTime} ${getWeek(where.week)} ${timePeriod}`,
|
||||
cartNum: 1,
|
||||
isNew: true,
|
||||
selected: true,
|
||||
merchantId: row?.merchantId
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
emit('reload');
|
||||
})
|
||||
.catch(() => {
|
||||
message.error('该场地已有人预定');
|
||||
});
|
||||
};
|
||||
|
||||
const addSpecField = () => {
|
||||
emit('reload');
|
||||
};
|
||||
|
||||
const onMerchant = (e) => {
|
||||
where.merchantId = e.merchantId;
|
||||
reload();
|
||||
};
|
||||
|
||||
const reload = async () => {
|
||||
spinning.value = true;
|
||||
await getNext7day().then((list) => {
|
||||
next7day.value = list.map((d: any, i) => {
|
||||
if (where.dateTime == undefined) {
|
||||
where.dateTime = d.dateTime;
|
||||
}
|
||||
if (where.week == undefined) {
|
||||
where.week = d.week;
|
||||
}
|
||||
d.label = `${getWeek(d.week)}(${d.date})`;
|
||||
return d;
|
||||
});
|
||||
});
|
||||
await listMerchant({}).then((list) => {
|
||||
category.value = list;
|
||||
if (where.merchantId == undefined) {
|
||||
where.merchantId = list[0].merchantId;
|
||||
where.merchantName = list[0].merchantName;
|
||||
}
|
||||
});
|
||||
await getServerTime().then((res) => {
|
||||
if (where.merchantId != 3028) {
|
||||
where.startTime = res.hourMinute;
|
||||
}
|
||||
});
|
||||
// await pagePeriod({ merchantId: where.merchantId }).then((res) => {
|
||||
// if (res?.list) {
|
||||
// periods.value = res.list;
|
||||
// }
|
||||
// });
|
||||
await listBookingPeriod(where)
|
||||
.then((list) => {
|
||||
periodList.value = list;
|
||||
})
|
||||
.catch(() => {
|
||||
periodList.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
spinning.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
|
||||
watch(currentRoute, () => {}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'PeriodField'
|
||||
};
|
||||
</script>
|
||||
155
src/views/booking/bookingCashier/components/group.vue
Normal file
155
src/views/booking/bookingCashier/components/group.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:footer="null"
|
||||
:title="isUpdate ? '取单' : '取单'"
|
||||
:body-style="{
|
||||
paddingTop: '10px',
|
||||
paddingBottom: '38px',
|
||||
backgroundColor: '#f3f3f3'
|
||||
}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<div v-for="(item, index) in groups" :key="index">
|
||||
<a-card
|
||||
:title="`订单总价: ￥${formatNumber(item.totalPrice)}`"
|
||||
:body-style="{ padding: '10px' }"
|
||||
>
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="(v, i) in item.cashiers" :key="i" class="flex m-2">
|
||||
<div class="item flex flex-col bg-gray-50 p-3 w-[215px]">
|
||||
<text>{{ v.goodsName }}</text>
|
||||
<text class="text-gray-400">规格：{{ v.spec }}</text>
|
||||
<text class="text-gray-400">数量：{{ v.cartNum }}</text>
|
||||
<text>小计：{{ v.totalPrice }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="comments p-2 text-gray-400">-->
|
||||
<!-- {{ item.comments }}-->
|
||||
<!-- </div>-->
|
||||
<template #actions>
|
||||
<div class="text-left px-3">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="getCashier(item.groupId)"
|
||||
>取单</a-button
|
||||
>
|
||||
<a-button danger type="primary" @click="remove(item.groupId)"
|
||||
>删除</a-button
|
||||
>
|
||||
<!-- <a-button>备注</a-button>-->
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-space>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
|
||||
import { MpMenu } from '@/api/cms/mp-menu/model';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { getByGroup, listByGroupId, removeByGroup } from '@/api/shop/cashier';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { CashierVo } from '@/api/shop/cashier/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 类型 0服务 1订单
|
||||
type?: number;
|
||||
// 页面ID
|
||||
pageId?: number;
|
||||
// 修改回显的数据
|
||||
data?: MpMenu | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const pageId = ref(0);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
//
|
||||
const groups = ref<CashierVo[]>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const getCashier = (groupId: number) => {
|
||||
getByGroup(groupId).then(() => {
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
});
|
||||
};
|
||||
|
||||
const remove = (groupId: number) => {
|
||||
removeByGroup(groupId).then(() => {
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
pageId: pageId.value
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
listByGroupId({}).then((data) => {
|
||||
groups.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
262
src/views/booking/bookingCashier/components/pay.vue
Normal file
262
src/views/booking/bookingCashier/components/pay.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '支付结算' : '支付结算'"
|
||||
okText="确定收款"
|
||||
:ok-button-props="{ disabled: !user }"
|
||||
:body-style="{
|
||||
padding: '0',
|
||||
paddingBottom: '0',
|
||||
backgroundColor: '#f3f3f3'
|
||||
}"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<!-- {{ form }}-->
|
||||
<div class="flex justify-between py-3 px-4 columns-3 gap-3">
|
||||
<div class="payment flex flex-col bg-white px-4 py-2">
|
||||
<div class="title text-gray-500 leading-10">请选择支付方式</div>
|
||||
<template v-for="(item, index) in payments" :key="index">
|
||||
<div
|
||||
class="item border-2 border-solid px-3 py-1 flex items-center mb-2 cursor-pointer"
|
||||
:class="
|
||||
form.type === item.type
|
||||
? 'active border-red-300'
|
||||
: 'border-gray-200'
|
||||
"
|
||||
@click="onType(item)"
|
||||
>
|
||||
<a-avatar :src="item.image" />
|
||||
<text class="pl-1">{{ item.name }}</text>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="settlement flex flex-col bg-white px-4 py-2 flex-1">
|
||||
<div class="title text-gray-500 leading-10">结算信息</div>
|
||||
<div class="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="备注信息"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</div>
|
||||
<div class="discount flex mt-3">
|
||||
<div class="item w-1/2">
|
||||
折扣(折)
|
||||
<div class="input">
|
||||
<a-input-number
|
||||
allow-clear
|
||||
min="0"
|
||||
max="10"
|
||||
placeholder="请输入折扣"
|
||||
style="width: 200px"
|
||||
v-model:value="form.discount"
|
||||
@input="onDiscount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item w-1/2">
|
||||
立减
|
||||
<div class="input">
|
||||
<a-input-number
|
||||
allow-clear
|
||||
placeholder="请输入立减金额"
|
||||
style="width: 200px"
|
||||
v-model:value="form.reducePrice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount flex mt-8 items-center h-20 leading-10">
|
||||
<div class="item w-1/2"> 优惠金额：￥0.00</div>
|
||||
<div class="item w-1/2 text-xl">
|
||||
实付金额：￥<span class="text-red-500 text-2xl">{{
|
||||
formatNumber(data.totalPrice)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-bar flex flex-col bg-white px-4 py-2">
|
||||
<div class="title text-gray-500 leading-10">会员信息</div>
|
||||
<div class="user-info text-center" v-if="!user">
|
||||
<a-empty :description="`当前为游客`" class="text-gray-300" />
|
||||
<SelectUserByButton @done="selectUser" />
|
||||
</div>
|
||||
<view class="tox-user" v-if="user">
|
||||
<div class="mb-2 flex justify-between items-center">
|
||||
<div class="avatar">
|
||||
<a-avatar :src="user.avatar" :size="40" />
|
||||
<text class="ml-1 text-gray-500">{{ user.nickname }}</text>
|
||||
</div>
|
||||
<CloseOutlined @click="removeUser" />
|
||||
</div>
|
||||
<div
|
||||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||||
>名称：{{ user.realName }}
|
||||
</div>
|
||||
<div
|
||||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||||
>手机号：{{ user.mobile || '未绑定' }}
|
||||
</div>
|
||||
<div
|
||||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||||
>可用余额：{{ user.balance }}
|
||||
</div>
|
||||
<div
|
||||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||||
>可用积分：{{ user.points }}
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<UserForm v-model:visible="showUserForm" :type="type" @done="reload" />
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch, reactive } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { listPayment } from '@/api/system/payment';
|
||||
import { Payment } from '@/api/system/payment/model';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { Cashier } from '@/api/shop/cashier/model';
|
||||
import { addOrder, updateOrder } from '@/api/shop/order';
|
||||
import { Order } from '@/api/shop/order/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 类型 0服务 1订单
|
||||
type?: number;
|
||||
// 修改回显的数据
|
||||
data?: Cashier | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Order>({
|
||||
// ID
|
||||
// 类型 0商城 1外卖
|
||||
type: 4,
|
||||
// 唯一标识
|
||||
// 商品价格
|
||||
price: undefined,
|
||||
// 单商品合计
|
||||
totalPrice: undefined,
|
||||
// 商户ID
|
||||
merchantId: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined
|
||||
});
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const disabled = ref<boolean>(true);
|
||||
const payments = ref<Payment[]>();
|
||||
const showUserForm = ref<boolean>(false);
|
||||
const user = ref<User | null>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const selectUser = (item: User) => {
|
||||
user.value = item;
|
||||
};
|
||||
|
||||
const onType = (item: Payment) => {
|
||||
form.type = item.type;
|
||||
};
|
||||
|
||||
const removeUser = () => {
|
||||
user.value = null;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
listPayment({}).then((data) => {
|
||||
payments.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.active {
|
||||
position: relative;
|
||||
border: 2px solid #007cec;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 11px solid #007cec;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 4px;
|
||||
border: 1px solid #fff;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,16 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-space :size="10" class="flex-wrap mb-5">
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
size="large"
|
||||
style="width: 400px"
|
||||
placeholder="商品名称"
|
||||
v-model:value="where.goodsName"
|
||||
@pressEnter="handleSearch"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-button @click="handleSearch">搜索</a-button>
|
||||
<a-button @click="handleSearch" size="large">搜索</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
235
src/views/booking/bookingCashier/components/specForm.vue
Normal file
235
src/views/booking/bookingCashier/components/specForm.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '选择场地' : '选择场地'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
{{ form }}
|
||||
<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="goodsName">
|
||||
{{ form.name }}
|
||||
</a-form-item>
|
||||
<a-form-item label="价格" name="price">
|
||||
<div class="text-red-500">￥{{ formatNumber(form.price) }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="购买数量"
|
||||
name="cartNum"
|
||||
v-if="data.merchantId == 3028"
|
||||
>
|
||||
<a-input-number
|
||||
:min="1"
|
||||
:max="9999"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.cartNum"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="form.specs === 1" label="规格" name="spec">
|
||||
<template v-for="(item, index) in form?.goodsSpecValue" :key="index">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold leading-8 text-gray-400">{{
|
||||
item.value
|
||||
}}</span>
|
||||
<a-radio-group v-model:value="form.goodsSpecValue[index].spec">
|
||||
<template v-for="(v, i) in item.detail" :key="i">
|
||||
<a-radio-button :value="v">{{ v }}</a-radio-button>
|
||||
</template>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="data.merchantId == 3028" label="规格" name="spec">
|
||||
<template v-for="(item, index) in form?.goodsSpecValue" :key="index">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold leading-8 text-gray-400">{{
|
||||
item.value
|
||||
}}</span>
|
||||
<a-radio-group v-model:value="form.goodsSpecValue[index].spec">
|
||||
<template v-for="(v, i) in item.detail" :key="i">
|
||||
<a-radio-button :value="v">{{ v }}</a-radio-button>
|
||||
</template>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
</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 { 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 { Cashier } from '@/api/shop/cashier/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { addCashier, updateCashier } from '@/api/shop/cashier';
|
||||
import { Field } from '@/api/booking/field/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 类型 0服务 1订单
|
||||
type?: 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 spec = ref<string>();
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Cashier>({
|
||||
// ID
|
||||
id: undefined,
|
||||
// 类型 0商城 1外卖
|
||||
type: undefined,
|
||||
// 唯一标识
|
||||
code: undefined,
|
||||
// 商品ID
|
||||
goodsId: undefined,
|
||||
// 商品名称
|
||||
goodsName: undefined,
|
||||
// 商品封面图
|
||||
image: undefined,
|
||||
// 商品规格
|
||||
spec: undefined,
|
||||
// 商品价格
|
||||
price: undefined,
|
||||
// 商品数量
|
||||
cartNum: undefined,
|
||||
// 单商品合计
|
||||
totalPrice: undefined,
|
||||
// 0 = 未购买 1 = 已购买
|
||||
isPay: undefined,
|
||||
// 是否为立即购买
|
||||
isNew: undefined,
|
||||
// 是否选中
|
||||
selected: undefined,
|
||||
// 商户ID
|
||||
merchantId: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 收银员ID
|
||||
cashierId: undefined,
|
||||
// 收银单分组ID
|
||||
groupId: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
// 是否多规格
|
||||
specs: undefined,
|
||||
// 商品规格数据
|
||||
goodsSpecValue: []
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
if (form.specs === 1) {
|
||||
const text = form.goodsSpecValue.map((d) => d.spec).join(',');
|
||||
if (text === ',') {
|
||||
message.error('请选择规格');
|
||||
return false;
|
||||
}
|
||||
spec.value = text;
|
||||
}
|
||||
console.log('>>>>>3');
|
||||
const formData = {
|
||||
...form,
|
||||
goodsId: props.data?.fieldId,
|
||||
name: props.data?.fieldName,
|
||||
spec: spec.value
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCashier : addCashier;
|
||||
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 = [];
|
||||
spec.value = '';
|
||||
isUpdate.value = !!props.data?.fieldId;
|
||||
if (props.type) {
|
||||
form.type = props.type;
|
||||
}
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
form.name = props.data.fieldName;
|
||||
form.cartNum = 1;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-page-header :title="`收银台`" @back="() => $router.go(-1)">
|
||||
<div class="flex">
|
||||
<div class="flex gap-5">
|
||||
<!-- 载入购物车 -->
|
||||
<Cart
|
||||
:spinning="spinning"
|
||||
@@ -13,63 +13,34 @@
|
||||
/>
|
||||
<!-- 商品搜索 -->
|
||||
<Goods :loginUser="loginUser" @reload="reload" />
|
||||
<!-- 取单 -->
|
||||
<GroupForm v-model:visible="showCashierForm" @done="reload" />
|
||||
<!-- 支付结算 -->
|
||||
<Pay v-model:visible="showPayForm" :data="cashier" @done="reload" />
|
||||
</div>
|
||||
</a-page-header>
|
||||
<!-- 取单 -->
|
||||
<GroupForm v-model:visible="showCashierForm" @done="reload" />
|
||||
<!-- 支付结算 -->
|
||||
<Pay v-model:visible="showPayForm" :data="cashier" @done="reload" />
|
||||
<!-- 编辑弹窗 -->
|
||||
<Edit
|
||||
v-model:visible="showEdit"
|
||||
:type="type"
|
||||
:page-id="mpPage?.id"
|
||||
@done="reload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Edit from './components/edit.vue';
|
||||
import GroupForm from './components/group.vue';
|
||||
import Cart from './components/cashier.vue';
|
||||
import Goods from './components/goods.vue';
|
||||
import Pay from './components/pay.vue';
|
||||
import * as CashierApi from '@/api/shop/cashier';
|
||||
import { MpPages } from '@/api/cms/mpPages/model';
|
||||
import * as CashierApi from '@/api/booking/bookingCashier';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Cashier, CashierVo } from '@/api/shop/cashier/model';
|
||||
import { removeCashier } from '@/api/shop/cashier';
|
||||
import { CashierVo } from '@/api/booking/bookingCashier/model';
|
||||
|
||||
// 当前用户信息
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const cashier = ref<CashierVo>({});
|
||||
const cashier = ref<CashierVo>();
|
||||
|
||||
// 加载中状态
|
||||
const spinning = ref<boolean>(true);
|
||||
// 当前页面
|
||||
const mpPage = ref<MpPages>();
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 加载状态
|
||||
const type = ref<number>(2);
|
||||
const showCashierForm = ref<boolean>(false);
|
||||
const showPayForm = ref<boolean>(false);
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Cashier) => {
|
||||
removeCashier(row.id)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const openGroupForm = () => {
|
||||
showCashierForm.value = true;
|
||||
};
|
||||
@@ -81,34 +52,22 @@
|
||||
/* 加载数据 */
|
||||
const reload = () => {
|
||||
spinning.value = true;
|
||||
CashierApi.listCashier({ groupId: 0 })
|
||||
CashierApi.listByGroupId({ groupId: 0 })
|
||||
.then((data) => {
|
||||
if (data) {
|
||||
cashier.value = data;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
console.log('.......');
|
||||
spinning.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
loginUser,
|
||||
({ userId }) => {
|
||||
() => {},
|
||||
() => {
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as MenuIcons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
name: 'MpMenuHome',
|
||||
components: MenuIcons
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="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="image">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</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="排序号" 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 { addBookingCooperate, updateBookingCooperate } from '@/api/booking/bookingCooperate';
|
||||
import { BookingCooperate } from '@/api/booking/bookingCooperate/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?: BookingCooperate | 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<BookingCooperate>({
|
||||
cooperateId: undefined,
|
||||
name: undefined,
|
||||
phone: undefined,
|
||||
image: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingCooperateName: [
|
||||
{
|
||||
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 ? updateBookingCooperate : addBookingCooperate;
|
||||
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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="wechatDepositId"
|
||||
row-key="bookingCooperateId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
@@ -25,9 +25,8 @@
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</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>
|
||||
<a-tag v-if="record.status === 3" color="cyan">已退押金</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>
|
||||
@@ -46,11 +45,7 @@
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<WechatDepositEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
<BookingCooperateEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -66,25 +61,17 @@
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import WechatDepositEdit from './components/wechatDepositEdit.vue';
|
||||
import {
|
||||
pageWechatDeposit,
|
||||
removeWechatDeposit,
|
||||
removeBatchWechatDeposit
|
||||
} from '@/api/shop/wechatDeposit';
|
||||
import type {
|
||||
WechatDeposit,
|
||||
WechatDepositParam
|
||||
} from '@/api/shop/wechatDeposit/model';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
import BookingCooperateEdit from './components/bookingCooperateEdit.vue';
|
||||
import { pageBookingCooperate, removeBookingCooperate, removeBatchBookingCooperate } from '@/api/booking/bookingCooperate';
|
||||
import type { BookingCooperate, BookingCooperateParam } from '@/api/booking/bookingCooperate/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<WechatDeposit[]>([]);
|
||||
const selection = ref<BookingCooperate[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<WechatDeposit | null>(null);
|
||||
const current = ref<BookingCooperate | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -103,8 +90,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
where.merchantId = getMerchantId();
|
||||
return pageWechatDeposit({
|
||||
return pageBookingCooperate({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -115,46 +101,47 @@
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'orderNum',
|
||||
key: 'orderNum',
|
||||
align: 'center'
|
||||
title: 'ID',
|
||||
dataIndex: 'cooperateId',
|
||||
key: 'cooperateId',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '场馆名称',
|
||||
dataIndex: 'siteName',
|
||||
key: 'siteName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '微信昵称',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '物品名称',
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '押金金额',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center'
|
||||
title: '咨询电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '押金状态',
|
||||
title: '图片',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
@@ -176,13 +163,13 @@
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: WechatDepositParam) => {
|
||||
const reload = (where?: BookingCooperateParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: WechatDeposit) => {
|
||||
const openEdit = (row?: BookingCooperate) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -193,9 +180,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: WechatDeposit) => {
|
||||
const remove = (row: BookingCooperate) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeWechatDeposit(row.wechatDepositId)
|
||||
removeBookingCooperate(row.bookingCooperateId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -220,7 +207,7 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchWechatDeposit(selection.value.map((d) => d.wechatDepositId))
|
||||
removeBatchBookingCooperate(selection.value.map((d) => d.bookingCooperateId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -240,7 +227,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: WechatDeposit) => {
|
||||
const customRow = (record: BookingCooperate) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -257,7 +244,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'WechatDeposit'
|
||||
name: 'BookingCooperate'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑课程分类' : '添加课程分类'"
|
||||
:title="isUpdate ? '编辑商务合作留言记录' : '添加商务合作留言记录'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -19,22 +19,29 @@
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类名称" name="name">
|
||||
<a-form-item label="关联ID" name="cooperateId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入分类名称"
|
||||
placeholder="请输入关联ID"
|
||||
v-model:value="form.cooperateId"
|
||||
/>
|
||||
</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="code">
|
||||
<a-form-item label="咨询电话" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.code"
|
||||
placeholder="请输入咨询电话"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="分类图片"
|
||||
label="图片"
|
||||
name="image">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
@@ -44,22 +51,6 @@
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级分类ID" name="parentId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入上级分类ID"
|
||||
v-model:value="form.parentId"
|
||||
/>
|
||||
</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"
|
||||
@@ -68,31 +59,19 @@
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否推荐" name="recommend">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否推荐"
|
||||
v-model:value="form.recommend"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态, 0正常, 1禁用" name="status">
|
||||
<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-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
<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>
|
||||
@@ -103,8 +82,8 @@
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import { addCourseCategory, updateCourseCategory } from '@/api/booking/courseCategory';
|
||||
import { CourseCategory } from '@/api/booking/courseCategory/model';
|
||||
import { addBookingCooperateLog, updateBookingCooperateLog } from '@/api/booking/bookingCooperateLog';
|
||||
import { BookingCooperateLog } from '@/api/booking/bookingCooperateLog/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
@@ -122,7 +101,7 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CourseCategory | null;
|
||||
data?: BookingCooperateLog | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -139,22 +118,19 @@
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CourseCategory>({
|
||||
id: undefined,
|
||||
const form = reactive<BookingCooperateLog>({
|
||||
logId: undefined,
|
||||
cooperateId: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
phone: undefined,
|
||||
image: undefined,
|
||||
parentId: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: undefined,
|
||||
recommend: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
courseCategoryId: undefined,
|
||||
courseCategoryName: '',
|
||||
bookingCooperateLogId: undefined,
|
||||
bookingCooperateLogName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
@@ -167,11 +143,11 @@
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
courseCategoryName: [
|
||||
bookingCooperateLogName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写课程分类名称',
|
||||
message: '请填写商务合作留言记录名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
@@ -205,7 +181,7 @@
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCourseCategory : addCourseCategory;
|
||||
const saveOrUpdate = isUpdate.value ? updateBookingCooperateLog : addBookingCooperateLog;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
257
src/views/booking/bookingCooperateLog/index.vue
Normal file
257
src/views/booking/bookingCooperateLog/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingCooperateLogId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingCooperateLogEdit 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 BookingCooperateLogEdit from './components/bookingCooperateLogEdit.vue';
|
||||
import { pageBookingCooperateLog, removeBookingCooperateLog, removeBatchBookingCooperateLog } from '@/api/booking/bookingCooperateLog';
|
||||
import type { BookingCooperateLog, BookingCooperateLogParam } from '@/api/booking/bookingCooperateLog/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingCooperateLog[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingCooperateLog | 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 pageBookingCooperateLog({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'logId',
|
||||
key: 'logId',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '关联ID',
|
||||
dataIndex: 'cooperateId',
|
||||
key: 'cooperateId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '咨询电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
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?: BookingCooperateLogParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingCooperateLog) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingCooperateLog) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingCooperateLog(row.bookingCooperateLogId)
|
||||
.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);
|
||||
removeBatchBookingCooperateLog(selection.value.map((d) => d.bookingCooperateLogId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingCooperateLog) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingCooperateLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -5,7 +5,7 @@
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑明细表' : '添加明细表'"
|
||||
:title="isUpdate ? '编辑我的优惠券' : '添加我的优惠券'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -19,53 +19,88 @@
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="用户ID" name="userId">
|
||||
<a-form-item label="优惠券名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户ID"
|
||||
v-model:value="form.userId"
|
||||
placeholder="请输入优惠券名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="IC卡类型：1年卡，2次卡，3月卡，4会员IC卡，5充值卡 " name="type">
|
||||
<a-form-item label="优惠券类型(10满减券 20折扣券)" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入IC卡类型：1年卡，2次卡，3月卡，4会员IC卡，5充值卡 "
|
||||
placeholder="请输入优惠券类型(10满减券 20折扣券)"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="变动金额" name="money">
|
||||
<a-form-item label="满减券-减免金额" name="reducePrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入变动金额"
|
||||
v-model:value="form.money"
|
||||
placeholder="请输入满减券-减免金额"
|
||||
v-model:value="form.reducePrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="变动后余额" name="balance">
|
||||
<a-form-item label="折扣券-折扣率(0-100)" name="discount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入变动后余额"
|
||||
v-model:value="form.balance"
|
||||
placeholder="请输入折扣券-折扣率(0-100)"
|
||||
v-model:value="form.discount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="管理员备注" name="remark">
|
||||
<a-form-item label="最低消费金额" name="minPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入管理员备注"
|
||||
v-model:value="form.remark"
|
||||
placeholder="请输入最低消费金额"
|
||||
v-model:value="form.minPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单编号" name="orderNo">
|
||||
<a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单编号"
|
||||
v-model:value="form.orderNo"
|
||||
placeholder="请输入到期类型(10领取后生效 20固定时间)"
|
||||
v-model:value="form.expireType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="操作人ID" name="adminId">
|
||||
<a-form-item label="领取后生效-有效天数" name="expireDay">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入操作人ID"
|
||||
v-model:value="form.adminId"
|
||||
placeholder="请输入领取后生效-有效天数"
|
||||
v-model:value="form.expireDay"
|
||||
/>
|
||||
</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="有效期结束时间" name="endTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入有效期结束时间"
|
||||
v-model:value="form.endTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="适用范围(10全部商品 20指定商品)" name="applyRange">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入适用范围(10全部商品 20指定商品)"
|
||||
v-model:value="form.applyRange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入适用范围配置(json格式)"
|
||||
v-model:value="form.applyRangeConfig"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否过期(0未过期 1已过期)"
|
||||
v-model:value="form.isExpire"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序(数字越小越靠前)" name="sortNumber">
|
||||
@@ -77,15 +112,7 @@
|
||||
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="状态, 0正常, 1冻结" name="status">
|
||||
<a-form-item label="状态, 0待使用, 1已使用, 2已失效" name="status">
|
||||
<a-radio-group v-model:value="form.status">
|
||||
<a-radio :value="0">显示</a-radio>
|
||||
<a-radio :value="1">隐藏</a-radio>
|
||||
@@ -98,18 +125,11 @@
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户ID" name="merchantId">
|
||||
<a-form-item label="用户ID" name="userId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户ID"
|
||||
v-model:value="form.merchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户编码" name="merchantCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户编码"
|
||||
v-model:value="form.merchantCode"
|
||||
placeholder="请输入用户ID"
|
||||
v-model:value="form.userId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
@@ -127,8 +147,8 @@
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import { addUserCardLog, updateUserCardLog } from '@/api/booking/userCardLog';
|
||||
import { UserCardLog } from '@/api/booking/userCardLog/model';
|
||||
import { addBookingCoupon, updateBookingCoupon } from '@/api/booking/bookingCoupon';
|
||||
import { BookingCoupon } from '@/api/booking/bookingCoupon/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
@@ -146,7 +166,7 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: UserCardLog | null;
|
||||
data?: BookingCoupon | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -163,26 +183,29 @@
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<UserCardLog>({
|
||||
logId: undefined,
|
||||
userId: undefined,
|
||||
const form = reactive<BookingCoupon>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
money: undefined,
|
||||
balance: undefined,
|
||||
remark: undefined,
|
||||
orderNo: undefined,
|
||||
adminId: undefined,
|
||||
reducePrice: undefined,
|
||||
discount: undefined,
|
||||
minPrice: undefined,
|
||||
expireType: undefined,
|
||||
expireDay: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
applyRange: undefined,
|
||||
applyRangeConfig: undefined,
|
||||
isExpire: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
merchantId: undefined,
|
||||
merchantCode: undefined,
|
||||
userId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
userCardLogId: undefined,
|
||||
userCardLogName: '',
|
||||
bookingCouponId: undefined,
|
||||
bookingCouponName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
@@ -195,11 +218,11 @@
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
userCardLogName: [
|
||||
bookingCouponName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写明细表名称',
|
||||
message: '请填写我的优惠券名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
@@ -233,7 +256,7 @@
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateUserCardLog : addUserCardLog;
|
||||
const saveOrUpdate = isUpdate.value ? updateBookingCoupon : addBookingCoupon;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
317
src/views/booking/bookingCoupon/index.vue
Normal file
317
src/views/booking/bookingCoupon/index.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingCouponId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingCouponEdit 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 BookingCouponEdit from './components/bookingCouponEdit.vue';
|
||||
import { pageBookingCoupon, removeBookingCoupon, removeBatchBookingCoupon } from '@/api/booking/bookingCoupon';
|
||||
import type { BookingCoupon, BookingCouponParam } from '@/api/booking/bookingCoupon/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingCoupon[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingCoupon | 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 pageBookingCoupon({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '优惠券名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '优惠券类型(10满减券 20折扣券)',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '满减券-减免金额',
|
||||
dataIndex: 'reducePrice',
|
||||
key: 'reducePrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '折扣券-折扣率(0-100)',
|
||||
dataIndex: 'discount',
|
||||
key: 'discount',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '最低消费金额',
|
||||
dataIndex: 'minPrice',
|
||||
key: 'minPrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '到期类型(10领取后生效 20固定时间)',
|
||||
dataIndex: 'expireType',
|
||||
key: 'expireType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '领取后生效-有效天数',
|
||||
dataIndex: 'expireDay',
|
||||
key: 'expireDay',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '有效期开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '有效期结束时间',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '适用范围(10全部商品 20指定商品)',
|
||||
dataIndex: 'applyRange',
|
||||
key: 'applyRange',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '适用范围配置(json格式)',
|
||||
dataIndex: 'applyRangeConfig',
|
||||
key: 'applyRangeConfig',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否过期(0未过期 1已过期)',
|
||||
dataIndex: 'isExpire',
|
||||
key: 'isExpire',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态, 0待使用, 1已使用, 2已失效',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingCouponParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingCoupon) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingCoupon) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingCoupon(row.bookingCouponId)
|
||||
.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);
|
||||
removeBatchBookingCoupon(selection.value.map((d) => d.bookingCouponId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingCoupon) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingCoupon'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="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="userId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联用户"
|
||||
v-model:value="form.userId"
|
||||
/>
|
||||
</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="备注" 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="排序号" 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 { addBookingEmergency, updateBookingEmergency } from '@/api/booking/bookingEmergency';
|
||||
import { BookingEmergency } from '@/api/booking/bookingEmergency/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?: BookingEmergency | 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<BookingEmergency>({
|
||||
emergencyId: undefined,
|
||||
name: undefined,
|
||||
phone: undefined,
|
||||
userId: undefined,
|
||||
merchantId: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
bookingEmergencyId: undefined,
|
||||
bookingEmergencyName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingEmergencyName: [
|
||||
{
|
||||
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 ? updateBookingEmergency : addBookingEmergency;
|
||||
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>
|
||||
257
src/views/booking/bookingEmergency/index.vue
Normal file
257
src/views/booking/bookingEmergency/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingEmergencyId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingEmergencyEdit 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 BookingEmergencyEdit from './components/bookingEmergencyEdit.vue';
|
||||
import { pageBookingEmergency, removeBookingEmergency, removeBatchBookingEmergency } from '@/api/booking/bookingEmergency';
|
||||
import type { BookingEmergency, BookingEmergencyParam } from '@/api/booking/bookingEmergency/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingEmergency[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingEmergency | 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 pageBookingEmergency({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'emergencyId',
|
||||
key: 'emergencyId',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '关联用户',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '商户ID',
|
||||
dataIndex: 'merchantId',
|
||||
key: 'merchantId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
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?: BookingEmergencyParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingEmergency) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingEmergency) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingEmergency(row.bookingEmergencyId)
|
||||
.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);
|
||||
removeBatchBookingEmergency(selection.value.map((d) => d.bookingEmergencyId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingEmergency) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingEmergency'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
252
src/views/booking/bookingField/components/bookingFieldEdit.vue
Normal file
252
src/views/booking/bookingField/components/bookingFieldEdit.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入场地名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否有卫生间，1有，2没有" name="isToilet">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否有卫生间，1有，2没有"
|
||||
v-model:value="form.isToilet"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否关闭，1开启，2关闭" name="isStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否关闭，1开启，2关闭"
|
||||
v-model:value="form.isStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否重复预订，1可以，2不可以" name="isRepeat">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否重复预订，1可以，2不可以"
|
||||
v-model:value="form.isRepeat"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否可预定半场，1可以，2不可以" name="isHalf">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否可预定半场，1可以，2不可以"
|
||||
v-model:value="form.isHalf"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否支持儿童价：1支持，2不支持" name="isChildren">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否支持儿童价：1支持，2不支持"
|
||||
v-model:value="form.isChildren"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="可重复预订次数" name="num">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入可重复预订次数"
|
||||
v-model:value="form.num"
|
||||
/>
|
||||
</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="关联id" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联id"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</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="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入更新时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 { addBookingField, updateBookingField } from '@/api/booking/bookingField';
|
||||
import { BookingField } from '@/api/booking/bookingField/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?: BookingField | 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<BookingField>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
isToilet: undefined,
|
||||
isStatus: undefined,
|
||||
isRepeat: undefined,
|
||||
isHalf: undefined,
|
||||
isChildren: undefined,
|
||||
num: undefined,
|
||||
sortNumber: undefined,
|
||||
sid: undefined,
|
||||
row: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
tenantId: undefined,
|
||||
bookingFieldId: undefined,
|
||||
bookingFieldName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingFieldName: [
|
||||
{
|
||||
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 ? updateBookingField : addBookingField;
|
||||
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>
|
||||
@@ -1,10 +1,10 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="620"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '新建分类'"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -13,14 +13,14 @@
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 4, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
: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: 24, sm: 24, xs: 24 } : { span: 12 }"
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="上级分类" name="parentId">
|
||||
<a-tree-select
|
||||
@@ -43,7 +43,7 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="排序号" name="sortNumber">
|
||||
<a-input-number
|
||||
@@ -54,7 +54,7 @@
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否展示">
|
||||
<a-form-item label="是否展示" name="status">
|
||||
<a-switch
|
||||
checked-children="是"
|
||||
un-checked-children="否"
|
||||
@@ -62,15 +62,6 @@
|
||||
@update:checked="updateHideValue"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类图标" name="image" extra="尺寸180*180">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="margin-bottom: 22px">
|
||||
@@ -99,24 +90,19 @@
|
||||
|
||||
<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 { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { GoodsCategory } from '@/api/shop/goodsCategory/model';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import {
|
||||
addGoodsCategory,
|
||||
updateGoodsCategory
|
||||
} from '@/api/shop/goodsCategory';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
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 themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
@@ -127,15 +113,16 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: GoodsCategory | null;
|
||||
// 上级分类id
|
||||
parentId?: number;
|
||||
// 全部分类数据
|
||||
categoryList: GoodsCategory[];
|
||||
data?: ArticleCategory | null;
|
||||
// 分类id
|
||||
categoryId?: number;
|
||||
// 全部分类
|
||||
categoryList: ArticleCategory[];
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
@@ -144,17 +131,32 @@
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<GoodsCategory>({
|
||||
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<Record<string, Rule[]>>({
|
||||
const rules = reactive({
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择分类类型',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
@@ -171,6 +173,14 @@
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: '请设置是否展示',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
meta: [
|
||||
{
|
||||
type: 'string',
|
||||
@@ -193,39 +203,54 @@
|
||||
]
|
||||
});
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.image = data.path;
|
||||
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 onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.image = '';
|
||||
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 = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const categoryForm = {
|
||||
const categoryData = {
|
||||
...form,
|
||||
// menuType 对应的值与后端不一致在前端处理
|
||||
// menuType: form.menuType === 2 ? 1 : 0,
|
||||
parentId: form.parentId || 0
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateGoodsCategory
|
||||
: addGoodsCategory;
|
||||
saveOrUpdate(categoryForm)
|
||||
? updateArticleCategory
|
||||
: addArticleCategory;
|
||||
saveOrUpdate(categoryData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
@@ -245,56 +270,20 @@
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const updateHideValue = (value: boolean) => {
|
||||
form.status = value ? 0 : 1;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
parentId:
|
||||
props.data.parentId === 0 ? undefined : props.data.parentId
|
||||
});
|
||||
images.value = [];
|
||||
if (props.data.image) {
|
||||
images.value.push({
|
||||
uid: `${props.data.categoryId}`,
|
||||
url: props.data.image,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
images.value = [];
|
||||
form.parentId = props.parentId;
|
||||
form.parentId = props.categoryId;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as icons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
components: icons,
|
||||
data() {
|
||||
return {
|
||||
iconData: [
|
||||
{
|
||||
title: '已引入的图标',
|
||||
icons: Object.keys(icons)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -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: '请选择上级分类'
|
||||
}
|
||||
);
|
||||
|
||||
85
src/views/booking/bookingField/components/field-search.vue
Normal file
85
src/views/booking/bookingField/components/field-search.vue
Normal 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 { BookingFieldParam } from '@/api/booking/bookingField/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: BookingFieldParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'period'): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 勾选的项目
|
||||
selection?: [];
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<BookingFieldParam>({
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 添加 */
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
const openPeriod = () => {
|
||||
emit('period');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
// 监听变化
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -5,7 +5,7 @@
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑菜单' : '添加菜单'"
|
||||
:title="isUpdate ? '编辑场馆场地' : '添加场馆场地'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -19,50 +19,68 @@
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="页面" name="type">
|
||||
<a-select
|
||||
v-model:value="form.type"
|
||||
placeholder="页面"
|
||||
:style="`width: 200px`"
|
||||
>
|
||||
<a-select-option :value="2">首页</a-select-option>
|
||||
<a-select-option :value="3">商城</a-select-option>
|
||||
<a-select-option :value="1">订单</a-select-option>
|
||||
<a-select-option :value="0">我的</a-select-option>
|
||||
<a-select-option :value="4">管理</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="菜单名称" name="title">
|
||||
<a-form-item label="场地名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入菜单名称"
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入场地名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="路由地址" name="path">
|
||||
<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.path"
|
||||
placeholder="请输入显示在第几行"
|
||||
v-model:value="form.row"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="菜单图标" name="icon">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
<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="color">
|
||||
<ele-color-picker
|
||||
:show-alpha="true"
|
||||
v-model:value="form.color"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
<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-form-item label="排序号" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
@@ -78,14 +96,16 @@
|
||||
<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 { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
|
||||
import { MpMenu } from '@/api/cms/mp-menu/model';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import {
|
||||
addBookingField,
|
||||
updateBookingField
|
||||
} from '@/api/booking/bookingField';
|
||||
import { BookingField } from '@/api/booking/bookingField/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);
|
||||
@@ -97,10 +117,10 @@
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 类型 0服务 1订单
|
||||
type?: number;
|
||||
// 商户ID
|
||||
categoryId?: number;
|
||||
// 修改回显的数据
|
||||
data?: MpMenu | null;
|
||||
data?: BookingField | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -117,25 +137,20 @@
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<MpMenu>({
|
||||
menuId: undefined,
|
||||
parentId: 0,
|
||||
title: '',
|
||||
type: 0,
|
||||
isMpWeixin: true,
|
||||
path: undefined,
|
||||
component: undefined,
|
||||
target: undefined,
|
||||
icon: '',
|
||||
color: undefined,
|
||||
hide: undefined,
|
||||
position: undefined,
|
||||
active: undefined,
|
||||
userId: 0,
|
||||
home: undefined,
|
||||
sortNumber: 100,
|
||||
comments: '',
|
||||
status: 0
|
||||
const form = reactive<BookingField>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
isToilet: undefined,
|
||||
isStatus: undefined,
|
||||
isRepeat: undefined,
|
||||
isHalf: undefined,
|
||||
isChildren: undefined,
|
||||
num: undefined,
|
||||
sortNumber: undefined,
|
||||
sid: undefined,
|
||||
row: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
@@ -145,62 +160,16 @@
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
title: [
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写菜单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写路由地址',
|
||||
message: '请填写场馆场地名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.thumbnail,
|
||||
status: 'done'
|
||||
});
|
||||
form.icon = data.thumbnail;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.icon = '';
|
||||
};
|
||||
|
||||
// 预设颜色
|
||||
const predefineColors = ref([
|
||||
'#40a9ff',
|
||||
'#9254de',
|
||||
'#36cfc9',
|
||||
'#73d13d',
|
||||
'#f759ab',
|
||||
'#cf1313',
|
||||
'#ff4d4f',
|
||||
'#ffa940',
|
||||
'#ffc53d',
|
||||
'#f3d3d3',
|
||||
'#1b1b1b',
|
||||
'#363636',
|
||||
'#4d4d4d',
|
||||
'#737373',
|
||||
'#a6a6a6',
|
||||
'#d9d9d9',
|
||||
'#e6e6e6',
|
||||
'#f2f2f2',
|
||||
'#f7f7f7',
|
||||
'#fafafa'
|
||||
]);
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
@@ -212,10 +181,13 @@
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
form.merchantId = props.categoryId;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateBookingField
|
||||
: addBookingField;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
@@ -236,18 +208,8 @@
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
if (props.type) {
|
||||
form.type = props.type;
|
||||
}
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.icon) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.icon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
@@ -1,12 +1,12 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
208
src/views/booking/bookingField/index.vue
Normal file
208
src/views/booking/bookingField/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-split-layout
|
||||
:width="!getMerchantName() ? '266px' : ''"
|
||||
:allow-collapse="!getMerchantName()"
|
||||
:right-style="{ overflow: 'hidden' }"
|
||||
:style="{ minHeight: 'calc(100vh - 252px)' }"
|
||||
>
|
||||
<div v-if="!getMerchantName()">
|
||||
<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.id"
|
||||
/>
|
||||
</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 { getMerchantName } from '@/utils/merchant';
|
||||
import {
|
||||
listBookingSite,
|
||||
removeBookingSite
|
||||
} from '@/api/booking/bookingSite';
|
||||
import { BookingSite } from '@/api/booking/bookingSite/model';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 树形数据
|
||||
const data = ref<BookingSite[]>([]);
|
||||
|
||||
// 树展开的key
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 树选中的key
|
||||
const selectedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 选中数据
|
||||
const current = ref<BookingSite | any>(null);
|
||||
|
||||
// 是否显示表单弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 编辑回显数据
|
||||
const editData = ref<BookingSite | null>(null);
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
listBookingSite()
|
||||
.then((list) => {
|
||||
loading.value = false;
|
||||
const eks: number[] = [];
|
||||
list.forEach((d) => {
|
||||
d.key = d.id;
|
||||
d.value = d.id;
|
||||
if (typeof d.id === 'number') {
|
||||
eks.push(d.id);
|
||||
}
|
||||
});
|
||||
expandedRowKeys.value = eks;
|
||||
data.value = list.map((d) => {
|
||||
d.key = d.id;
|
||||
d.value = d.id;
|
||||
d.title = d.name;
|
||||
return d;
|
||||
});
|
||||
// data.value = toTreeData({
|
||||
// data: list,
|
||||
// idField: 'categoryId',
|
||||
// parentIdField: 'parentId'
|
||||
// });
|
||||
if (list.length) {
|
||||
if (typeof list[0].id === 'number') {
|
||||
selectedRowKeys.value = [list[0].id];
|
||||
}
|
||||
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.id === 'number' && selectedRowKeys.value.includes(d.id)) {
|
||||
current.value = d;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onContextMenuClick = (treeKey: number, menuKey: number) => {
|
||||
// 修改
|
||||
if (menuKey == 1) {
|
||||
openEdit(current.value);
|
||||
}
|
||||
// 删除
|
||||
if (menuKey == 2) {
|
||||
remove();
|
||||
}
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (item?: BookingSite | 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);
|
||||
removeBookingSite(current.value?.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
query();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingSite'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-category-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
319
src/views/booking/bookingField/list.vue
Normal file
319
src/views/booking/bookingField/list.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
height="calc(100vh - 390px)"
|
||||
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.name }}
|
||||
</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 {
|
||||
pageBookingField,
|
||||
removeBookingField,
|
||||
removeBatchBookingField
|
||||
} from '@/api/booking/bookingField';
|
||||
import type {
|
||||
BookingField,
|
||||
BookingFieldParam
|
||||
} from '@/api/booking/bookingField/model';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import PeriodEdit from './period/index.vue';
|
||||
import { BookingSite } from '@/api/booking/bookingSite/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 场馆场地 id
|
||||
categoryId?: number;
|
||||
// 全部分类
|
||||
categoryList: BookingSite[];
|
||||
// 当期选中
|
||||
data: BookingSite;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
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: 'id'
|
||||
},
|
||||
{
|
||||
title: '场地名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
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 == 0 ? '开启' : '关闭')
|
||||
},
|
||||
{
|
||||
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<BookingField | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示时段弹窗
|
||||
const showPeriodEidt = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
console.log(props);
|
||||
console.log(props.categoryId);
|
||||
if (props.categoryId) {
|
||||
where.sid = props.categoryId;
|
||||
}
|
||||
// 按条件排序
|
||||
if (filters) {
|
||||
where.virtualViews = filters.virtualViews;
|
||||
where.actualViews = filters.actualViews;
|
||||
where.sortNumber = filters.sortNumber;
|
||||
where.status = filters.status;
|
||||
}
|
||||
// where.merchantId = getMerchantId();
|
||||
return pageBookingField({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingFieldParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingField) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const openPeriod = () => {
|
||||
showPeriodEidt.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingField(row.id)
|
||||
.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);
|
||||
removeBatchBookingField(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingField) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 监听场馆场地 id 变化
|
||||
watch(
|
||||
() => props.categoryId,
|
||||
() => {
|
||||
reload();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
288
src/views/booking/bookingField/period/components/periodEdit.vue
Normal file
288
src/views/booking/bookingField/period/components/periodEdit.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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 {
|
||||
addBookingPeriod,
|
||||
updateBookingPeriod
|
||||
} from '@/api/booking/bookingPeriod';
|
||||
import { BookingPeriod } from '@/api/booking/bookingPeriod/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?: BookingPeriod | 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<BookingPeriod>({
|
||||
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
|
||||
? updateBookingPeriod
|
||||
: addBookingPeriod;
|
||||
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>
|
||||
@@ -12,9 +12,8 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -25,21 +24,12 @@
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: MpMenuParam): void;
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<MpMenu>({
|
||||
type: 0
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
300
src/views/booking/bookingField/period/index.vue
Normal file
300
src/views/booking/bookingField/period/index.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
width="70%"
|
||||
:visible="visible"
|
||||
:title="`${data?.name}时段列表`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:confirm-loading="loading"
|
||||
:footer="null"
|
||||
>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
: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 {
|
||||
pageBookingPeriod,
|
||||
removeBookingPeriod,
|
||||
removeBatchBookingPeriod,
|
||||
updateBookingPeriod
|
||||
} from '@/api/booking/bookingPeriod';
|
||||
import type {
|
||||
BookingPeriod,
|
||||
BookingPeriodParam
|
||||
} from '@/api/booking/bookingPeriod/model';
|
||||
import { BookingSite } from '@/api/booking/bookingSite/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
categoryId?: number | null;
|
||||
// 商户信息
|
||||
data?: BookingSite;
|
||||
}>();
|
||||
|
||||
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<BookingPeriod[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingPeriod | 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.sid = props.categoryId;
|
||||
return pageBookingPeriod({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
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?: BookingPeriodParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingPeriod) => {
|
||||
current.value = row ?? null;
|
||||
// if (props.data?.specId) {
|
||||
// specId.value = props.data?.specId;
|
||||
// }
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingPeriod) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingPeriod(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);
|
||||
removeBatchBookingPeriod(selection.value.map((d) => d.periodId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 上移
|
||||
const moveUp = (row?: BookingPeriod) => {
|
||||
updateBookingPeriod({
|
||||
periodId: row?.periodId,
|
||||
sortNumber: Number(row?.sortNumber) - 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingPeriod) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.categoryId,
|
||||
(categoryId) => {
|
||||
if (categoryId) {
|
||||
reload();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingPeriod'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -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="uid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户id"
|
||||
v-model:value="form.uid"
|
||||
/>
|
||||
</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 { addBookingIntegral, updateBookingIntegral } from '@/api/booking/bookingIntegral';
|
||||
import { BookingIntegral } from '@/api/booking/bookingIntegral/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?: BookingIntegral | 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<BookingIntegral>({
|
||||
id: undefined,
|
||||
uid: undefined,
|
||||
username: undefined,
|
||||
phone: undefined,
|
||||
integral: undefined,
|
||||
dateTime: undefined,
|
||||
day: undefined,
|
||||
createTime: undefined,
|
||||
tenantId: undefined,
|
||||
bookingIntegralId: undefined,
|
||||
bookingIntegralName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingIntegralName: [
|
||||
{
|
||||
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 ? updateBookingIntegral : addBookingIntegral;
|
||||
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>
|
||||
@@ -3,18 +3,19 @@
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="姓名|手机号|用户ID"
|
||||
v-model:value="where.keywords"
|
||||
placeholder="请输入关键词"
|
||||
@search="search"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 360px"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import { BookingIntegralParam } from '@/api/booking/bookingIntegral/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { UsersParam } from '@/api/booking/users/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -25,25 +26,23 @@
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: UsersParam): void;
|
||||
(e: 'search', where?: BookingIntegralParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<UsersParam>({
|
||||
keywords: ''
|
||||
const { where } = useSearch<BookingIntegralParam>({
|
||||
id: undefined,
|
||||
timeStart: undefined,
|
||||
timeEnd: undefined,
|
||||
keywords: undefined
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
const search = () => {
|
||||
emit('search');
|
||||
};
|
||||
|
||||
watch(
|
||||
@@ -4,9 +4,10 @@
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="integralId"
|
||||
row-key="bookingIntegralId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
@@ -20,9 +21,6 @@
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'id'">
|
||||
{{ record.id }}
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
@@ -47,7 +45,11 @@
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<IntegralEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<BookingIntegralEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -63,21 +65,24 @@
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import IntegralEdit from './components/integralEdit.vue';
|
||||
import BookingIntegralEdit from './components/bookingIntegralEdit.vue';
|
||||
import {
|
||||
pageIntegral,
|
||||
removeIntegral,
|
||||
removeBatchIntegral
|
||||
} from '@/api/booking/integral';
|
||||
import type { Integral, IntegralParam } from '@/api/booking/integral/model';
|
||||
pageBookingIntegral,
|
||||
removeBookingIntegral,
|
||||
removeBatchBookingIntegral
|
||||
} from '@/api/booking/bookingIntegral';
|
||||
import type {
|
||||
BookingIntegral,
|
||||
BookingIntegralParam
|
||||
} from '@/api/booking/bookingIntegral/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Integral[]>([]);
|
||||
const selection = ref<BookingIntegral[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Integral | null>(null);
|
||||
const current = ref<BookingIntegral | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -96,7 +101,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageIntegral({
|
||||
return pageBookingIntegral({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -107,9 +112,10 @@
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
title: '用户ID',
|
||||
dataIndex: 'uid',
|
||||
key: 'uid',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
@@ -120,8 +126,8 @@
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'mobile',
|
||||
key: 'mobile',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
@@ -149,26 +155,26 @@
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
// {
|
||||
// title: '操作',
|
||||
// key: 'action',
|
||||
// width: 180,
|
||||
// fixed: 'right',
|
||||
// align: 'center',
|
||||
// hideInSetting: true
|
||||
// }
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: IntegralParam) => {
|
||||
const reload = (where?: BookingIntegralParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Integral) => {
|
||||
const openEdit = (row?: BookingIntegral) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -179,9 +185,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Integral) => {
|
||||
const remove = (row: BookingIntegral) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeIntegral(row.integralId)
|
||||
removeBookingIntegral(row.bookingIntegralId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -206,7 +212,9 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchIntegral(selection.value.map((d) => d.integralId))
|
||||
removeBatchBookingIntegral(
|
||||
selection.value.map((d) => d.bookingIntegralId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -226,7 +234,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Integral) => {
|
||||
const customRow = (record: BookingIntegral) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -243,7 +251,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Integral'
|
||||
name: 'BookingIntegral'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -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 { addBookingIntegralLog, updateBookingIntegralLog } from '@/api/booking/bookingIntegralLog';
|
||||
import { BookingIntegralLog } from '@/api/booking/bookingIntegralLog/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?: BookingIntegralLog | 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<BookingIntegralLog>({
|
||||
id: undefined,
|
||||
orderNum: undefined,
|
||||
oid: undefined,
|
||||
siteName: undefined,
|
||||
username: undefined,
|
||||
phone: undefined,
|
||||
integral: undefined,
|
||||
oldMoney: undefined,
|
||||
newMoney: undefined,
|
||||
info: undefined,
|
||||
createTime: undefined,
|
||||
tenantId: undefined,
|
||||
bookingIntegralLogId: undefined,
|
||||
bookingIntegralLogName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingIntegralLogName: [
|
||||
{
|
||||
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 ? updateBookingIntegralLog : addBookingIntegralLog;
|
||||
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>
|
||||
@@ -12,9 +12,8 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -25,21 +24,12 @@
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: MpMenuParam): void;
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<MpMenu>({
|
||||
type: 2
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
269
src/views/booking/bookingIntegralLog/index.vue
Normal file
269
src/views/booking/bookingIntegralLog/index.vue
Normal 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="bookingIntegralLogId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingIntegralLogEdit 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 BookingIntegralLogEdit from './components/bookingIntegralLogEdit.vue';
|
||||
import { pageBookingIntegralLog, removeBookingIntegralLog, removeBatchBookingIntegralLog } from '@/api/booking/bookingIntegralLog';
|
||||
import type { BookingIntegralLog, BookingIntegralLogParam } from '@/api/booking/bookingIntegralLog/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingIntegralLog[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingIntegralLog | 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 pageBookingIntegralLog({
|
||||
...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?: BookingIntegralLogParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingIntegralLog) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingIntegralLog) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingIntegralLog(row.bookingIntegralLogId)
|
||||
.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);
|
||||
removeBatchBookingIntegralLog(selection.value.map((d) => d.bookingIntegralLogId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingIntegralLog) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingIntegralLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
208
src/views/booking/bookingItem/components/bookingItemEdit.vue
Normal file
208
src/views/booking/bookingItem/components/bookingItemEdit.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入项目类型"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="项目图标"
|
||||
name="image">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</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="排序号" 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 { addBookingItem, updateBookingItem } from '@/api/booking/bookingItem';
|
||||
import { BookingItem } from '@/api/booking/bookingItem/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?: BookingItem | 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<BookingItem>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
image: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
bookingItemId: undefined,
|
||||
bookingItemName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingItemName: [
|
||||
{
|
||||
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 ? updateBookingItem : addBookingItem;
|
||||
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>
|
||||
@@ -12,9 +12,8 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { MpMenu, MpMenuParam } from '@/api/cms/mp-menu/model';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -25,32 +24,17 @@
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: MpMenuParam): void;
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<MpMenu>({
|
||||
type: 2
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
const menuType = ref(0);
|
||||
|
||||
const onChange = () => {
|
||||
console.log(menuType.value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
@@ -4,7 +4,7 @@
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="teacherId"
|
||||
row-key="bookingItemId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
@@ -45,7 +45,11 @@
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<TeacherEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<BookingItemEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -61,17 +65,24 @@
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import TeacherEdit from './components/teacherEdit.vue';
|
||||
import { pageTeacher, removeTeacher, removeBatchTeacher } from '@/api/booking/teacher';
|
||||
import type { Teacher, TeacherParam } from '@/api/booking/teacher/model';
|
||||
import BookingItemEdit from './components/bookingItemEdit.vue';
|
||||
import {
|
||||
pageBookingItem,
|
||||
removeBookingItem,
|
||||
removeBatchBookingItem
|
||||
} from '@/api/booking/bookingItem';
|
||||
import type {
|
||||
BookingItem,
|
||||
BookingItemParam
|
||||
} from '@/api/booking/bookingItem/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Teacher[]>([]);
|
||||
const selection = ref<BookingItem[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Teacher | null>(null);
|
||||
const current = ref<BookingItem | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -90,7 +101,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageTeacher({
|
||||
return pageBookingItem({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -101,48 +112,39 @@
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'teacherId',
|
||||
key: 'teacherId',
|
||||
width: 90,
|
||||
title: '项目类型',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '老师照片',
|
||||
title: '项目图标',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
align: 'center',
|
||||
width: 120
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '老师姓名',
|
||||
dataIndex: 'teacherName',
|
||||
key: 'teacherName'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
title: '项目备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
@@ -159,13 +161,13 @@
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TeacherParam) => {
|
||||
const reload = (where?: BookingItemParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Teacher) => {
|
||||
const openEdit = (row?: BookingItem) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -176,9 +178,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Teacher) => {
|
||||
const remove = (row: BookingItem) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTeacher(row.teacherId)
|
||||
removeBookingItem(row.bookingItemId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -203,7 +205,7 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTeacher(selection.value.map((d) => d.teacherId))
|
||||
removeBatchBookingItem(selection.value.map((d) => d.bookingItemId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -223,7 +225,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Teacher) => {
|
||||
const customRow = (record: BookingItem) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -240,7 +242,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Teacher'
|
||||
name: 'BookingItem'
|
||||
};
|
||||
</script>
|
||||
|
||||
446
src/views/booking/bookingOrder/components/bookingOrderEdit.vue
Normal file
446
src/views/booking/bookingOrder/components/bookingOrderEdit.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="微信支付订单号" 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="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入场馆id用于权限判断"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户id" name="uid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户id"
|
||||
v-model:value="form.uid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="使用的优惠券id" name="cid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入使用的优惠券id"
|
||||
v-model:value="form.cid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="使用的会员卡id" name="vid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入使用的会员卡id"
|
||||
v-model:value="form.vid"
|
||||
/>
|
||||
</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="desc2">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入优惠说明"
|
||||
v-model:value="form.desc2"
|
||||
/>
|
||||
</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>
|
||||
</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 { addBookingOrder, updateBookingOrder } from '@/api/booking/bookingOrder';
|
||||
import { BookingOrder } from '@/api/booking/bookingOrder/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?: BookingOrder | 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<BookingOrder>({
|
||||
id: undefined,
|
||||
orderNum: undefined,
|
||||
wechatOrder: undefined,
|
||||
refundOrder: undefined,
|
||||
sid: undefined,
|
||||
uid: undefined,
|
||||
cid: undefined,
|
||||
vid: 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,
|
||||
desc2: undefined,
|
||||
returnNum: undefined,
|
||||
returnMoney: undefined,
|
||||
startTime: undefined,
|
||||
isInvoice: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
payTime: undefined,
|
||||
refundTime: undefined,
|
||||
refundApplyTime: undefined,
|
||||
checkBill: undefined,
|
||||
comments: undefined,
|
||||
tenantId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingOrderName: [
|
||||
{
|
||||
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 ? updateBookingOrder : addBookingOrder;
|
||||
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>
|
||||
@@ -18,21 +18,20 @@
|
||||
label="订单号"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.orderId }}
|
||||
{{ form.id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="订单编号"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.orderNo }}
|
||||
{{ form.orderNum }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="订单状态"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
<a-tag v-if="form.orderStatus == 0">未使用</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 1">已付款</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 2">已取消</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 1">已完成</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 2">未使用</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 3">已取消</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
|
||||
<a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
|
||||
@@ -43,7 +42,7 @@
|
||||
label="买家信息"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.realName }}
|
||||
{{ form.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="手机号码"
|
||||
@@ -55,7 +54,7 @@
|
||||
label="交易流水号"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.transactionId }}
|
||||
{{ form.wechatOrder }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="订单总金额"
|
||||
@@ -70,7 +69,7 @@
|
||||
￥{{ form.payPrice }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="减少金额"
|
||||
label="减少的金额"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
￥{{ form.reducePrice }}
|
||||
@@ -80,6 +79,7 @@
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
<template v-if="form.payStatus == 1">
|
||||
<a-tag v-if="form.payType == 0">余额支付</a-tag>
|
||||
<a-tag v-if="form.payType == 1">微信支付</a-tag>
|
||||
<a-tag v-if="form.payType == 2">积分</a-tag>
|
||||
<a-tag v-if="form.payType == 3">支付宝</a-tag>
|
||||
@@ -120,69 +120,52 @@
|
||||
label="付款时间"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.payTime }}
|
||||
{{ toDateString(form.payTime, 'yyyy-MM-dd HH:mm') }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="下单时间"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.createTime }}
|
||||
{{ toDateString(form.createTime, 'yyyy-MM-dd HH:mm') }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="信息备注"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.comments }}
|
||||
<div
|
||||
>{{ form.siteName }} {{ form.dateTime }} ￥{{
|
||||
form.totalPrice
|
||||
}}元</div
|
||||
>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
<a-card class="order-card" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:data-source="form.orderInfoList"
|
||||
:data-source="orderInfo"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<SelectBookingField
|
||||
:merchantId="record.merchantId"
|
||||
:timePeriod="record.timePeriod"
|
||||
:week="week"
|
||||
:id="record.id"
|
||||
v-if="form.payStatus == 1 && form.orderStatus == 0"
|
||||
@done="reload"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
/>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</ele-modal>
|
||||
<!-- 换场地 -->
|
||||
<!-- <SelectField-->
|
||||
<!-- v-model:visible="showField"-->
|
||||
<!-- :orderId="form.orderId"-->
|
||||
<!-- :data="current"-->
|
||||
<!-- :week="week"-->
|
||||
<!-- @done="reload"-->
|
||||
<!-- />-->
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { Order, OrderParam } from '@/api/shop/order/model';
|
||||
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CoffeeOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import SelectField from './SelectField.vue';
|
||||
import { Field } from '@/api/booking/field/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { BookingOrder } from '@/api/booking/bookingOrder/model';
|
||||
import { BookingOrderInfo } from '@/api/booking/bookingOrderInfo/model';
|
||||
import { pageBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
@@ -190,8 +173,7 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Order | null;
|
||||
week?: string;
|
||||
data?: BookingOrder | null;
|
||||
}>();
|
||||
|
||||
export interface step {
|
||||
@@ -204,9 +186,8 @@
|
||||
const isUpdate = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
const showField = ref(false);
|
||||
// 当前编辑数据
|
||||
const current = ref<Field | null>(null);
|
||||
// 订单信息
|
||||
const orderInfo = ref<BookingOrderInfo[]>([]);
|
||||
|
||||
// 步骤条
|
||||
const steps = ref<step[]>([
|
||||
@@ -234,57 +215,53 @@
|
||||
const active = ref(2);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', where?: OrderParam): void;
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 订单信息
|
||||
const form = reactive<Order>({
|
||||
orderId: undefined,
|
||||
orderNo: undefined,
|
||||
transactionId: undefined,
|
||||
const form = reactive<BookingOrder>({
|
||||
id: undefined,
|
||||
orderNum: undefined,
|
||||
wechatOrder: undefined,
|
||||
refundOrder: undefined,
|
||||
merchantId: undefined,
|
||||
couponId: undefined,
|
||||
cardId: undefined,
|
||||
sid: undefined,
|
||||
uid: undefined,
|
||||
cid: undefined,
|
||||
vid: undefined,
|
||||
aid: undefined,
|
||||
adminId: undefined,
|
||||
confirmId: undefined,
|
||||
icCard: undefined,
|
||||
realName: undefined,
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
phone: undefined,
|
||||
totalPrice: undefined,
|
||||
reducePrice: undefined,
|
||||
payPrice: undefined,
|
||||
price: undefined,
|
||||
money: undefined,
|
||||
dateTime: undefined,
|
||||
refundMoney: undefined,
|
||||
coachPrice: undefined,
|
||||
coachId: undefined,
|
||||
payType: undefined,
|
||||
payStatus: undefined,
|
||||
orderStatus: undefined,
|
||||
couponType: undefined,
|
||||
couponDesc: undefined,
|
||||
type: undefined,
|
||||
qrcode: undefined,
|
||||
desc2: undefined,
|
||||
returnNum: undefined,
|
||||
returnMoney: undefined,
|
||||
startTime: undefined,
|
||||
isInvoice: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
payTime: undefined,
|
||||
refundTime: undefined,
|
||||
refundApplyTime: undefined,
|
||||
checkBill: undefined,
|
||||
isSettled: undefined,
|
||||
version: undefined,
|
||||
userId: undefined,
|
||||
deleted: undefined,
|
||||
comments: undefined,
|
||||
tenantId: undefined,
|
||||
updateTime: undefined,
|
||||
createTime: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100,
|
||||
orderInfoList: []
|
||||
siteName: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
@@ -300,28 +277,46 @@
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '场馆名称',
|
||||
dataIndex: 'merchantName',
|
||||
key: 'merchantName'
|
||||
dataIndex: 'siteName',
|
||||
key: 'siteName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '场地',
|
||||
dataIndex: 'fieldName'
|
||||
dataIndex: 'fieldName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '儿童价',
|
||||
dataIndex: 'childrenPrice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '成人数',
|
||||
dataIndex: 'adultNum',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '儿童数',
|
||||
dataIndex: 'childrenNum',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '预定信息',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
dataIndex: 'dateTime',
|
||||
key: 'dateTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'price',
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
title: '是否免费',
|
||||
dataIndex: 'isFree',
|
||||
align: 'center',
|
||||
dataIndex: 'action',
|
||||
key: 'action'
|
||||
customRender: ({ text }) => ['', '免费', '付费'][text]
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -384,10 +379,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
const openEdit = (row?: Field) => {
|
||||
current.value = row ?? null;
|
||||
showField.value = true;
|
||||
};
|
||||
// const getOrderInfo = () => {
|
||||
// const orderId = props.data?.orderId;
|
||||
// listOrderInfo({ orderId }).then((data) => {
|
||||
@@ -395,11 +386,6 @@
|
||||
// });
|
||||
// };
|
||||
|
||||
const reload = (where) => {
|
||||
updateVisible(false);
|
||||
emit('done', where);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {};
|
||||
|
||||
@@ -408,8 +394,14 @@
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
loading.value = true;
|
||||
assignObject(form, props.data);
|
||||
pageBookingOrderInfo({ oid: form.id }).then((res) => {
|
||||
if (res?.list) {
|
||||
orderInfo.value = res?.list;
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
loadSteps(props.data);
|
||||
}
|
||||
} else {
|
||||
221
src/views/booking/bookingOrder/components/search.vue
Normal file
221
src/views/booking/bookingOrder/components/search.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<div class="search">
|
||||
<a-space class="flex items-center" :size="10" style="flex-wrap: wrap">
|
||||
<span class="text-gray-400">付款状态</span>
|
||||
<a-radio-group v-model:value="where.payStatus" @change="search">
|
||||
<a-radio-button :value="2">未付款</a-radio-button>
|
||||
<a-radio-button :value="1">已付款</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">订单状态</span>
|
||||
<a-radio-group v-model:value="where.orderStatus" @change="search">
|
||||
<a-radio-button :value="0">未使用</a-radio-button>
|
||||
<a-radio-button :value="1">已完成</a-radio-button>
|
||||
<a-radio-button :value="2">未使用</a-radio-button>
|
||||
<a-radio-button :value="3">已取消</a-radio-button>
|
||||
<a-radio-button :value="4">退款中</a-radio-button>
|
||||
<a-radio-button :value="5">退款被拒</a-radio-button>
|
||||
<a-radio-button :value="6">退款成功</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">开票状态</span>
|
||||
<a-radio-group v-model:value="where.isInvoice" @change="search">
|
||||
<a-radio-button :value="0">未开票</a-radio-button>
|
||||
<a-radio-button :value="1">已开票</a-radio-button>
|
||||
<a-radio-button :value="2">不能开票</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">付款方式</span>
|
||||
<a-radio-group v-model:value="where.payType" @change="search">
|
||||
<a-radio-button :value="1">微信支付</a-radio-button>
|
||||
<a-radio-button :value="2">余额支付</a-radio-button>
|
||||
<a-radio-button :value="3">支付宝</a-radio-button>
|
||||
<a-radio-button :value="4">现金</a-radio-button>
|
||||
<a-radio-button :value="5">POS机</a-radio-button>
|
||||
<a-radio-button :value="6">VIP月卡</a-radio-button>
|
||||
<a-radio-button :value="7">VIP年卡</a-radio-button>
|
||||
<a-radio-button :value="8">VIP次卡</a-radio-button>
|
||||
<a-radio-button :value="9">IC月卡</a-radio-button>
|
||||
<a-radio-button :value="10">IC年卡</a-radio-button>
|
||||
<a-radio-button :value="11">IC次卡</a-radio-button>
|
||||
<a-radio-button :value="12">免费</a-radio-button>
|
||||
<a-radio-button :value="13">VIP充值卡</a-radio-button>
|
||||
<a-radio-button :value="14">IC充值卡</a-radio-button>
|
||||
<a-radio-button :value="15">积分支付</a-radio-button>
|
||||
<a-radio-button :value="16">VIP季卡</a-radio-button>
|
||||
<a-radio-button :value="17">IC季卡</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-space>
|
||||
<a-space :size="10" class="mt-5" style="flex-wrap: wrap">
|
||||
<SelectBookingSite
|
||||
:placeholder="`选择场馆`"
|
||||
class="input-item"
|
||||
v-model:value="where.siteName"
|
||||
@done="chooseSiteId"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入订单号|编号|手机号"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 380px"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button class="ele-btn-icon" :disabled="loading" @click="handleExport">
|
||||
<template #icon>
|
||||
<download-outlined />
|
||||
</template>
|
||||
<span>导出订单</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { BookingOrderInfoParam } from '@/api/booking/bookingOrderInfo/model';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import dayjs from 'dayjs';
|
||||
import { listBookingOrder } from '@/api/booking/bookingOrder';
|
||||
import {
|
||||
BookingOrder,
|
||||
BookingOrderParam
|
||||
} from '@/api/booking/bookingOrder/model';
|
||||
import { BookingSite } from '@/api/booking/bookingSite/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: BookingOrderInfoParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<BookingOrderParam>({
|
||||
sid: undefined,
|
||||
siteName: undefined,
|
||||
createTimeStart: undefined,
|
||||
createTimeEnd: undefined,
|
||||
timeStart: undefined,
|
||||
timeEnd: undefined,
|
||||
categoryId: undefined,
|
||||
keywords: undefined
|
||||
});
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const orders = ref<BookingOrder[] | any[]>();
|
||||
const xlsFileName = ref<string>();
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
xlsFileName.value = `${d1}至${d2}`;
|
||||
where.timeStart = dayjs(d1).valueOf() / 1000;
|
||||
where.timeEnd = dayjs(d2).valueOf() / 1000;
|
||||
// where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
|
||||
// where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
const chooseSiteId = (data: BookingSite) => {
|
||||
where.sid = data.id;
|
||||
where.siteName = data.name;
|
||||
search();
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'订单号',
|
||||
'订单编号',
|
||||
'姓名',
|
||||
'电话号码',
|
||||
'预定信息',
|
||||
'消费金额',
|
||||
'实付金额',
|
||||
'下单日期'
|
||||
]
|
||||
];
|
||||
await listBookingOrder(where)
|
||||
.then((list) => {
|
||||
orders.value = list;
|
||||
orders.value?.forEach((d: BookingOrder) => {
|
||||
array.push([
|
||||
`${d.id}`,
|
||||
`${d.orderNum}`,
|
||||
`${d.name}`,
|
||||
`${d.phone}`,
|
||||
`${d.siteName} ${d.dateTime} ${d.totalPrice}`,
|
||||
`${d.totalPrice}`,
|
||||
`${d.payPrice}`,
|
||||
`${toDateString(d.payTime)}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `订单数据导出`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
475
src/views/booking/bookingOrder/index.vue
Normal file
475
src/views/booking/bookingOrder/index.vue
Normal file
@@ -0,0 +1,475 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
: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 === 'dateTime'">
|
||||
<div>{{ record.siteName }}</div>
|
||||
<div>{{ record.dateTime }} ￥{{ record.totalPrice }}元</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'payType'">
|
||||
<template v-if="record.payStatus == 1">
|
||||
<a-tag v-if="record.payType == 0">余额支付</a-tag>
|
||||
<a-tag v-if="record.payType == 1"
|
||||
><WechatOutlined class="tag-icon" />微信支付</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 2">积分</a-tag>
|
||||
<a-tag v-if="record.payType == 3"
|
||||
><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 4"
|
||||
><IdcardOutlined class="tag-icon" />现金</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 5"
|
||||
><IdcardOutlined class="tag-icon" />POS机</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 6"
|
||||
><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 7"
|
||||
><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 8"
|
||||
><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 9"
|
||||
><IdcardOutlined class="tag-icon" />IC月卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 10"
|
||||
><IdcardOutlined class="tag-icon" />IC年卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 11"
|
||||
><IdcardOutlined class="tag-icon" />IC次卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 12"
|
||||
><IdcardOutlined class="tag-icon" />免费</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 13"
|
||||
><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 14"
|
||||
><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 15"
|
||||
><IdcardOutlined class="tag-icon" />积分支付</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 16"
|
||||
><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payType == 17"
|
||||
><IdcardOutlined class="tag-icon" />IC季卡</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span></span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'couponType'">
|
||||
<a-tag v-if="record.couponType == 0">无</a-tag>
|
||||
<a-tag v-if="record.couponType == 1" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 2" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 3" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 4" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 5" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 6" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 7" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC月卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 8" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC年卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 9" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC次卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 10" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 11" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />免费订单</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 12" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 13" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 14" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
|
||||
>
|
||||
<a-tag v-if="record.couponType == 15" color="blue"
|
||||
><IdcardOutlined class="tag-icon" />IC季卡</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'payStatus'">
|
||||
<a-tag v-if="record.payStatus == 2" color="error"
|
||||
><CloseOutlined class="tag-icon" />未付款</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payStatus == 1" color="green"
|
||||
><CheckOutlined 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 === 'orderInfo'">
|
||||
{{ record.orderInfoList }}
|
||||
</template>
|
||||
<template v-if="column.key === 'orderStatus'">
|
||||
<span v-if="record.orderStatus == 1" class="ele-text-success"
|
||||
>已完成</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 2" class="ele-text-placeholder"
|
||||
>未使用</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 3" class="ele-text-placeholder"
|
||||
>已取消</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 4" class="ele-text-warning"
|
||||
>退款申请中</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 5" class="ele-text-danger"
|
||||
>退款被拒绝</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 6" class="ele-text-heading"
|
||||
>退款成功</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 7" class="ele-text-warning"
|
||||
>客户端申请退款</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 9" class="ele-text-warning"
|
||||
>未完成</span
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'isInvoice'">
|
||||
<a-tag v-if="record.isInvoice == 1">未开</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 2" color="green">已开</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 3">不能开</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-divider type="vertical" />-->
|
||||
<!-- <a @click="openEdit(record)">编辑</a>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<OrderInfo 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,
|
||||
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 OrderInfo from './components/orderInfo.vue';
|
||||
import {
|
||||
pageBookingOrder,
|
||||
removeBookingOrder,
|
||||
removeBatchBookingOrder
|
||||
} from '@/api/booking/bookingOrder';
|
||||
import type {
|
||||
BookingOrder,
|
||||
BookingOrderParam
|
||||
} from '@/api/booking/bookingOrder/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingOrder[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingOrder | 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 pageBookingOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'id',
|
||||
key: 'iod',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '预约信息',
|
||||
dataIndex: 'dateTime',
|
||||
key: 'dateTime',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '总额',
|
||||
dataIndex: 'totalPrice',
|
||||
key: 'totalPrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '减少金额',
|
||||
dataIndex: 'reducePrice',
|
||||
key: 'reducePrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
dataIndex: 'payPrice',
|
||||
key: 'payPrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
dataIndex: 'payType',
|
||||
key: 'payType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '付款状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '付款时间',
|
||||
dataIndex: 'payTime',
|
||||
key: 'payTime',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '优惠类型',
|
||||
dataIndex: 'couponType',
|
||||
key: 'couponType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否已开票',
|
||||
dataIndex: 'isInvoice',
|
||||
key: 'isInvoice',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '类型',
|
||||
// dataIndex: 'type',
|
||||
// key: 'type',
|
||||
// align: 'center',
|
||||
// customRender: ({ text }) =>
|
||||
// ['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
|
||||
// },
|
||||
// {
|
||||
// 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?: BookingOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingOrder) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingOrder) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingOrder(row.id)
|
||||
.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);
|
||||
removeBatchBookingOrder(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingOrder) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as MenuIcons from '@/layout/menu-icons';
|
||||
export default {
|
||||
name: 'BookingOrder',
|
||||
components: MenuIcons
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tag-icon {
|
||||
padding-right: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,300 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="oid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联订单表id"
|
||||
v-model:value="form.oid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联场馆id" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联场馆id"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联场地id" name="fid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联场地id"
|
||||
v-model:value="form.fid"
|
||||
/>
|
||||
</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="fieldName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入场地"
|
||||
v-model:value="form.fieldName"
|
||||
/>
|
||||
</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="price">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入单价"
|
||||
v-model:value="form.price"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="儿童价" name="childrenPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入儿童价"
|
||||
v-model:value="form.childrenPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="成人人数" name="adultNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入成人人数"
|
||||
v-model:value="form.adultNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="儿童人数" name="childrenNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入儿童人数"
|
||||
v-model:value="form.childrenNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="1已付款，2未付款，3无需付款或占用状态" name="payStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入1已付款，2未付款，3无需付款或占用状态"
|
||||
v-model:value="form.payStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否免费：1免费、2收费" name="isFree">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否免费：1免费、2收费"
|
||||
v-model:value="form.isFree"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否支持儿童票：1支持，2不支持" name="isChildren">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否支持儿童票：1支持，2不支持"
|
||||
v-model:value="form.isChildren"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="预订类型：1全场，2半场" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入预订类型：1全场，2半场"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="组合数据:日期+时间段+场馆id+场地id" name="mergeData">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入组合数据:日期+时间段+场馆id+场地id"
|
||||
v-model:value="form.mergeData"
|
||||
/>
|
||||
</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="下单时间" name="orderTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入下单时间"
|
||||
v-model:value="form.orderTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="毫秒时间戳" name="timeFlag">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入毫秒时间戳"
|
||||
v-model:value="form.timeFlag"
|
||||
/>
|
||||
</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 { addBookingOrderInfo, updateBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
|
||||
import { BookingOrderInfo } from '@/api/booking/bookingOrderInfo/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?: BookingOrderInfo | 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<BookingOrderInfo>({
|
||||
id: undefined,
|
||||
oid: undefined,
|
||||
sid: undefined,
|
||||
fid: undefined,
|
||||
siteName: undefined,
|
||||
fieldName: undefined,
|
||||
dateTime: undefined,
|
||||
price: undefined,
|
||||
childrenPrice: undefined,
|
||||
adultNum: undefined,
|
||||
childrenNum: undefined,
|
||||
payStatus: undefined,
|
||||
isFree: undefined,
|
||||
isChildren: undefined,
|
||||
type: undefined,
|
||||
mergeData: undefined,
|
||||
startTime: undefined,
|
||||
orderTime: undefined,
|
||||
timeFlag: undefined,
|
||||
tenantId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingOrderInfoName: [
|
||||
{
|
||||
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 ? updateBookingOrderInfo : addBookingOrderInfo;
|
||||
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>
|
||||
42
src/views/booking/bookingOrderInfo/components/search.vue
Normal file
42
src/views/booking/bookingOrderInfo/components/search.vue
Normal 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>
|
||||
314
src/views/booking/bookingOrderInfo/index.vue
Normal file
314
src/views/booking/bookingOrderInfo/index.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingOrderInfoId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingOrderInfoEdit 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 BookingOrderInfoEdit from './components/bookingOrderInfoEdit.vue';
|
||||
import { pageBookingOrderInfo, removeBookingOrderInfo, removeBatchBookingOrderInfo } from '@/api/booking/bookingOrderInfo';
|
||||
import type { BookingOrderInfo, BookingOrderInfoParam } from '@/api/booking/bookingOrderInfo/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingOrderInfo[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingOrderInfo | 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 pageBookingOrderInfo({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '关联订单表id',
|
||||
dataIndex: 'oid',
|
||||
key: 'oid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '关联场馆id',
|
||||
dataIndex: 'sid',
|
||||
key: 'sid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '关联场地id',
|
||||
dataIndex: 'fid',
|
||||
key: 'fid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '场馆',
|
||||
dataIndex: 'siteName',
|
||||
key: 'siteName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '场地',
|
||||
dataIndex: 'fieldName',
|
||||
key: 'fieldName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '预约时间段',
|
||||
dataIndex: 'dateTime',
|
||||
key: 'dateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '儿童价',
|
||||
dataIndex: 'childrenPrice',
|
||||
key: 'childrenPrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '成人人数',
|
||||
dataIndex: 'adultNum',
|
||||
key: 'adultNum',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '儿童人数',
|
||||
dataIndex: 'childrenNum',
|
||||
key: 'childrenNum',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '1已付款，2未付款，3无需付款或占用状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否免费：1免费、2收费',
|
||||
dataIndex: 'isFree',
|
||||
key: 'isFree',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否支持儿童票：1支持，2不支持',
|
||||
dataIndex: 'isChildren',
|
||||
key: 'isChildren',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '预订类型：1全场，2半场',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '组合数据:日期+时间段+场馆id+场地id',
|
||||
dataIndex: 'mergeData',
|
||||
key: 'mergeData',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '开场时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '下单时间',
|
||||
dataIndex: 'orderTime',
|
||||
key: 'orderTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '毫秒时间戳',
|
||||
dataIndex: 'timeFlag',
|
||||
key: 'timeFlag',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingOrderInfoParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingOrderInfo) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingOrderInfo) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingOrderInfo(row.bookingOrderInfoId)
|
||||
.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);
|
||||
removeBatchBookingOrderInfo(selection.value.map((d) => d.bookingOrderInfoId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingOrderInfo) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingOrderInfo'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
268
src/views/booking/bookingPeriod/components/bookingPeriodEdit.vue
Normal file
268
src/views/booking/bookingPeriod/components/bookingPeriodEdit.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="timePeriod">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入时段"
|
||||
v-model:value="form.timePeriod"
|
||||
/>
|
||||
</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="prices">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入每日不同价格"
|
||||
v-model:value="form.prices"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="半场价格" name="halfPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入半场价格"
|
||||
v-model:value="form.halfPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="每日不同半场价格" name="halfPrices">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入每日不同半场价格"
|
||||
v-model:value="form.halfPrices"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="儿童价" name="childrenPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入儿童价"
|
||||
v-model:value="form.childrenPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="星期选择" name="week">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入星期选择"
|
||||
v-model:value="form.week"
|
||||
/>
|
||||
</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="关联id" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联id"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否关闭，1开启，2关闭" name="isStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否关闭，1开启，2关闭"
|
||||
v-model:value="form.isStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否免费：1免费，2收费" name="isFree">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否免费：1免费，2收费"
|
||||
v-model:value="form.isFree"
|
||||
/>
|
||||
</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="" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 { addBookingPeriod, updateBookingPeriod } from '@/api/booking/bookingPeriod';
|
||||
import { BookingPeriod } from '@/api/booking/bookingPeriod/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?: BookingPeriod | 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<BookingPeriod>({
|
||||
id: undefined,
|
||||
timePeriod: undefined,
|
||||
price: undefined,
|
||||
prices: undefined,
|
||||
halfPrice: undefined,
|
||||
halfPrices: undefined,
|
||||
childrenPrice: undefined,
|
||||
week: undefined,
|
||||
sortNumber: undefined,
|
||||
sid: undefined,
|
||||
isStatus: undefined,
|
||||
isFree: undefined,
|
||||
startTime: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
tenantId: undefined,
|
||||
bookingPeriodId: undefined,
|
||||
bookingPeriodName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingPeriodName: [
|
||||
{
|
||||
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 ? updateBookingPeriod : addBookingPeriod;
|
||||
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>
|
||||
42
src/views/booking/bookingPeriod/components/search.vue
Normal file
42
src/views/booking/bookingPeriod/components/search.vue
Normal 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>
|
||||
297
src/views/booking/bookingPeriod/index.vue
Normal file
297
src/views/booking/bookingPeriod/index.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingPeriodEdit
|
||||
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 BookingPeriodEdit from './components/bookingPeriodEdit.vue';
|
||||
import {
|
||||
pageBookingPeriod,
|
||||
removeBookingPeriod,
|
||||
removeBatchBookingPeriod
|
||||
} from '@/api/booking/bookingPeriod';
|
||||
import type {
|
||||
BookingPeriod,
|
||||
BookingPeriodParam
|
||||
} from '@/api/booking/bookingPeriod/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingPeriod[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingPeriod | 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 pageBookingPeriod({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timePeriod',
|
||||
key: 'timePeriod',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '每日不同价格',
|
||||
dataIndex: 'prices',
|
||||
key: 'prices',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '半场价格',
|
||||
dataIndex: 'halfPrice',
|
||||
key: 'halfPrice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '每日不同半场价格',
|
||||
dataIndex: 'halfPrices',
|
||||
key: 'halfPrices',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '儿童价',
|
||||
dataIndex: 'childrenPrice',
|
||||
key: 'childrenPrice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '星期选择',
|
||||
dataIndex: 'week',
|
||||
key: 'week',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '关联id',
|
||||
dataIndex: 'sid',
|
||||
key: 'sid',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否关闭，1开启，2关闭',
|
||||
dataIndex: 'isStatus',
|
||||
key: 'isStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否免费：1免费，2收费',
|
||||
dataIndex: 'isFree',
|
||||
key: 'isFree',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '儿童价',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingPeriodParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingPeriod) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingPeriod) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingPeriod(row.bookingPeriodId)
|
||||
.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);
|
||||
removeBatchBookingPeriod(selection.value.map((d) => d.bookingPeriodId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingPeriod) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingPeriod'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -5,7 +5,7 @@
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑老师管理' : '添加老师管理'"
|
||||
:title="isUpdate ? '编辑' : '添加'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -19,14 +19,14 @@
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="老师姓名" name="teacherName">
|
||||
<a-form-item label="场地名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入老师姓名"
|
||||
v-model:value="form.teacherName"
|
||||
placeholder="请输入场地名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="老师照片" name="image">
|
||||
<a-form-item label="封面图" name="thumb">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
@@ -35,7 +35,37 @@
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="老师介绍" name="content">
|
||||
<a-form-item label="场馆图片" name="files">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="9"
|
||||
:data="files"
|
||||
@done="chooseFiles"
|
||||
@del="onDeleteFiles"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="每小时价格" name="price">
|
||||
<a-input-number
|
||||
allow-clear
|
||||
placeholder="请输入每小时价格"
|
||||
v-model:value="form.price"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="营业时间" name="businessTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入营业时间"
|
||||
v-model:value="form.businessTime"
|
||||
/>
|
||||
</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="info">
|
||||
<!-- 编辑器 -->
|
||||
<tinymce-editor
|
||||
ref="editorRef"
|
||||
@@ -43,29 +73,51 @@
|
||||
v-model:value="content"
|
||||
:disabled="disabled"
|
||||
:init="config"
|
||||
placeholder="请填写内容"
|
||||
placeholder="请输入场馆介绍内容"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入描述"
|
||||
v-model:value="form.comments"
|
||||
<a-form-item label="场馆电话" name="tel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入场馆电话"
|
||||
v-model:value="form.tel"
|
||||
/>
|
||||
</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 label="类型" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入类型：1天，2小时"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序号" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
<a-form-item label="天数或小时" name="num">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入天数或小时"
|
||||
v-model:value="form.num"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="退款比率" name="proportion">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入退款比率"
|
||||
v-model:value="form.proportion"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="退款规则组" name="moneyJson">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入退款规则组"-->
|
||||
<!-- v-model:value="form.moneyJson"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="周末活动订场开关" name="weekendOpen">
|
||||
<a-switch :checked="form.weekendOpen == 1" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入排序"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
@@ -77,15 +129,15 @@
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import { addTeacher, updateTeacher } from '@/api/booking/teacher';
|
||||
import { Teacher } from '@/api/booking/teacher/model';
|
||||
import { addBookingSite, updateBookingSite } from '@/api/booking/bookingSite';
|
||||
import { BookingSite } from '@/api/booking/bookingSite/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 { uploadOss } from '@/api/system/file';
|
||||
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import { uploadOss } from '@/api/system/file';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
@@ -93,12 +145,13 @@
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const disabled = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Teacher | null;
|
||||
data?: BookingSite | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -113,21 +166,29 @@
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const disabled = ref(false);
|
||||
const files = ref<ItemType[]>([]);
|
||||
// 编辑器内容，双向绑定
|
||||
const content = ref<any>('');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Teacher>({
|
||||
teacherId: undefined,
|
||||
teacherName: undefined,
|
||||
image: undefined,
|
||||
content: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
const form = reactive<BookingSite>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
thumb: undefined,
|
||||
price: undefined,
|
||||
businessTime: undefined,
|
||||
address: undefined,
|
||||
info: undefined,
|
||||
tel: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined
|
||||
type: undefined,
|
||||
num: undefined,
|
||||
proportion: undefined,
|
||||
moneyJson: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
weekendOpen: undefined,
|
||||
tenantId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
@@ -137,16 +198,42 @@
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
teacherName: [
|
||||
bookingSiteName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写老师管理名称',
|
||||
message: '请填写名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseImage = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.thumb = data.path;
|
||||
};
|
||||
|
||||
const chooseFiles = (data: FileRecord) => {
|
||||
files.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteFiles = (index: number) => {
|
||||
files.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.thumb = '';
|
||||
};
|
||||
|
||||
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
|
||||
const config = ref({
|
||||
height: 450,
|
||||
@@ -197,25 +284,19 @@
|
||||
callback(res.path);
|
||||
});
|
||||
}
|
||||
// const reader = new FileReader();
|
||||
// reader.onload = (e) => {
|
||||
// if (e.target?.result != null) {
|
||||
// const blob = new Blob([e.target.result], { type: file.type });
|
||||
// callback(URL.createObjectURL(blob));
|
||||
// }
|
||||
// };
|
||||
// reader.readAsArrayBuffer(file);
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
/* 保存编辑 */
|
||||
@@ -229,9 +310,12 @@
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value
|
||||
info: content.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateTeacher : addTeacher;
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateBookingSite
|
||||
: addBookingSite;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
@@ -252,18 +336,29 @@
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
files.value = [];
|
||||
content.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.image) {
|
||||
if (form.info) {
|
||||
content.value = form.info;
|
||||
}
|
||||
if (props.data.thumb) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.image,
|
||||
url: props.data.thumb,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
if (props.data.files) {
|
||||
const arr = JSON.parse(props.data.files);
|
||||
arr.map((item) => {
|
||||
files.value.push({
|
||||
uid: uuid(),
|
||||
url: item.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
42
src/views/booking/bookingSite/components/search.vue
Normal file
42
src/views/booking/bookingSite/components/search.vue
Normal 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>
|
||||
253
src/views/booking/bookingSite/index.vue
Normal file
253
src/views/booking/bookingSite/index.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:need-page="false"
|
||||
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 === 'thumb'">
|
||||
<a-avatar :src="record.thumb" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'price'">
|
||||
<span>￥{{ formatNumber(record.price) }}</span>
|
||||
</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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingSiteEdit
|
||||
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 { formatNumber } from 'ele-admin-pro/es';
|
||||
import Search from './components/search.vue';
|
||||
import BookingSiteEdit from './components/bookingSiteEdit.vue';
|
||||
import {
|
||||
pageBookingSite,
|
||||
removeBookingSite,
|
||||
removeBatchBookingSite,
|
||||
listBookingSite
|
||||
} from '@/api/booking/bookingSite';
|
||||
import type {
|
||||
BookingSite,
|
||||
BookingSiteParam
|
||||
} from '@/api/booking/bookingSite/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingSite[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingSite | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = () => {
|
||||
return listBookingSite();
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '场馆名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '场馆图片',
|
||||
dataIndex: 'thumb',
|
||||
key: 'thumb',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '每小时价格',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '场馆位置',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '场馆电话',
|
||||
dataIndex: 'tel',
|
||||
key: 'tel',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingSiteParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingSite) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingSite) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingSite(row.id)
|
||||
.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);
|
||||
removeBatchBookingSite(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingSite) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingSite'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
274
src/views/booking/bookingUser/components/bookingUserEdit.vue
Normal file
274
src/views/booking/bookingUser/components/bookingUserEdit.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="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="money">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入余额"
|
||||
v-model:value="form.money"
|
||||
/>
|
||||
</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>
|
||||
</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 { addBookingUser, updateBookingUser } from '@/api/booking/bookingUser';
|
||||
import { BookingUser } from '@/api/booking/bookingUser/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?: BookingUser | 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<BookingUser>({
|
||||
id: undefined,
|
||||
openId: undefined,
|
||||
sessionKey: undefined,
|
||||
username: undefined,
|
||||
avatarUrl: undefined,
|
||||
gender: undefined,
|
||||
country: undefined,
|
||||
province: undefined,
|
||||
city: undefined,
|
||||
phone: undefined,
|
||||
integral: undefined,
|
||||
money: undefined,
|
||||
createTime: undefined,
|
||||
idcard: undefined,
|
||||
truename: undefined,
|
||||
isAdmin: undefined,
|
||||
tenantId: undefined,
|
||||
bookingUserId: undefined,
|
||||
bookingUserName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingUserName: [
|
||||
{
|
||||
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 ? updateBookingUser : addBookingUser;
|
||||
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>
|
||||
183
src/views/booking/bookingUser/components/search.vue
Normal file
183
src/views/booking/bookingUser/components/search.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<div class="search">
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<!-- <SelectOrganization-->
|
||||
<!-- :placeholder="`按部门筛选`"-->
|
||||
<!-- v-model:value="where.organizationName"-->
|
||||
<!-- @done="chooseOrganization"-->
|
||||
<!-- />-->
|
||||
<SelectGrade
|
||||
:placeholder="`按等级筛选`"
|
||||
v-model:value="where.gradeName"
|
||||
@done="chooseGradeId"
|
||||
/>
|
||||
<a-radio-group v-model:value="where.isAdmin" @change="search">
|
||||
<a-radio-button :value="1">管理员</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<!-- <a-radio-group v-model:value="where.categoryId" @change="search">-->
|
||||
<!-- <a-radio-button :value="25">早餐</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="26">午餐</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="27">晚餐</a-radio-button>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- <a-button class="ele-btn-icon" @click="handleExport">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <download-outlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>导出</span>-->
|
||||
<!-- </a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="姓名|手机号|用户ID"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 360px"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<!-- <span style="margin-left: 20px"-->
|
||||
<!-- >已签到 {{ signUsers }} / 已报餐 {{ postUsers }}</span-->
|
||||
<!-- >-->
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { OrderGoods, OrderGoodsParam } from '@/api/order/goods/model';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Organization } from '@/api/system/organization/model';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import dayjs from 'dayjs';
|
||||
import { Grade } from '@/api/user/grade/model';
|
||||
import { BookingUserParam } from '@/api/booking/bookingUser/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: OrderGoodsParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<BookingUserParam>({
|
||||
id: undefined,
|
||||
keywords: undefined,
|
||||
timeStart: undefined,
|
||||
timeEnd: undefined
|
||||
});
|
||||
// 下来选项
|
||||
// const categoryId = ref<number>(0);
|
||||
const post = ref<number>(0);
|
||||
const sign = ref<number>(0);
|
||||
const noSign = ref<number>(0);
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
where.timeStart = d1 ? dayjs(d1).valueOf() / 1000 : undefined;
|
||||
where.timeEnd = d2 ? dayjs(d2).valueOf() / 1000 : undefined;
|
||||
// where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
|
||||
// where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
const chooseOrganization = (e: Organization) => {
|
||||
// where.organizationId = e.organizationId;
|
||||
// where.organizationName = e.organizationName;
|
||||
search();
|
||||
};
|
||||
|
||||
const chooseGradeId = (e: Grade) => {
|
||||
where.gradeId = e.gradeId;
|
||||
where.gradeName = e.name;
|
||||
search();
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
dateRange.value = ['', ''];
|
||||
resetFields();
|
||||
post.value = 0;
|
||||
sign.value = 0;
|
||||
noSign.value = 0;
|
||||
search();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
if (!props.selection?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'部门',
|
||||
'编号',
|
||||
'姓名',
|
||||
'早餐报餐次数',
|
||||
'早餐签到次数',
|
||||
'午餐报餐次数',
|
||||
'午餐签到次数',
|
||||
'晚餐报餐次数',
|
||||
'晚餐签到次数',
|
||||
'消费金额'
|
||||
]
|
||||
];
|
||||
props.selection?.forEach((d: OrderGoods) => {
|
||||
array.push([
|
||||
`${d.organizationName}`,
|
||||
`${d.userId}`,
|
||||
`${d.nickname}`,
|
||||
`${d.breakfastPostUsers}`,
|
||||
`${d.breakfastSignUsers}`,
|
||||
`${d.lunchPostUsers}`,
|
||||
`${d.lunchSignUsers}`,
|
||||
`${d.dinnerPostUsers}`,
|
||||
`${d.dinnerSignUsers}`
|
||||
]);
|
||||
});
|
||||
const sheetName = '报餐统计导出';
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
writeFile(workbook, '报餐统计导出.xlsx');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
343
src/views/booking/bookingUser/index.vue
Normal file
343
src/views/booking/bookingUser/index.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="usersId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 2200 }"
|
||||
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="30"
|
||||
:src="`${record.avatarUrl}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template v-if="column.key === 'gender'">
|
||||
<a-tag v-if="record.gender == 1">男</a-tag>
|
||||
<a-tag v-if="record.gender == 2">女</a-tag>
|
||||
<span v-if="record.gender == 0"></span>
|
||||
</template>
|
||||
<template v-if="column.key === 'isAdmin'">
|
||||
<a-switch
|
||||
:checked="record.isAdmin == 1"
|
||||
@change="updateIsAdmin(record)"
|
||||
/>
|
||||
</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>积分充值</a>
|
||||
<!-- <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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
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 Edit from './components/bookingUserEdit.vue';
|
||||
import {
|
||||
pageBookingUser,
|
||||
removeBookingUser,
|
||||
removeBatchBookingUser,
|
||||
updateBookingUser
|
||||
} from '@/api/booking/bookingUser';
|
||||
import type {
|
||||
BookingUser,
|
||||
BookingUserParam
|
||||
} from '@/api/booking/bookingUser/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingUser[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingUser | 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 pageBookingUser({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '用户唯一小程序id',
|
||||
dataIndex: 'openId',
|
||||
key: 'openId',
|
||||
align: 'center',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '小程序用户秘钥',
|
||||
dataIndex: 'sessionKey',
|
||||
key: 'sessionKey',
|
||||
align: 'center',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'avatarUrl',
|
||||
key: 'avatarUrl',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
key: 'gender',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '积分',
|
||||
dataIndex: 'integral',
|
||||
key: 'integral',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
dataIndex: 'money',
|
||||
key: 'money',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
dataIndex: 'idcard',
|
||||
key: 'idcard',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '真实姓名',
|
||||
dataIndex: 'truename',
|
||||
key: 'truename',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '国家',
|
||||
dataIndex: 'country',
|
||||
key: 'country',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '省份',
|
||||
dataIndex: 'province',
|
||||
key: 'province',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '城市',
|
||||
dataIndex: 'city',
|
||||
key: 'city',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否管理员',
|
||||
dataIndex: 'isAdmin',
|
||||
key: 'isAdmin',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingUserParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingUser) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingUser) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingUser(row.id)
|
||||
.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);
|
||||
removeBatchBookingUser(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 修改用户状态 */
|
||||
const updateIsAdmin = (row: BookingUser) => {
|
||||
row.isAdmin = row.isAdmin == 1 ? 2 : 1;
|
||||
updateBookingUser(row)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingUser) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingUser'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -5,7 +5,7 @@
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑会员卡' : '添加会员卡'"
|
||||
:title="isUpdate ? '编辑' : '添加'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
@@ -19,13 +19,6 @@
|
||||
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="sid场馆id集合，适用的场馆" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
@@ -33,10 +26,10 @@
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户id（旧）" name="uid">
|
||||
<a-form-item label="用户id" name="uid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户id（旧）"
|
||||
placeholder="请输入用户id"
|
||||
v-model:value="form.uid"
|
||||
/>
|
||||
</a-form-item>
|
||||
@@ -277,11 +270,11 @@
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="身份证号码" name="idCard">
|
||||
<a-form-item label="身份证号码" name="idcard">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入身份证号码"
|
||||
v-model:value="form.idCard"
|
||||
v-model:value="form.idcard"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="remark">
|
||||
@@ -291,23 +284,6 @@
|
||||
v-model:value="form.remark"
|
||||
/>
|
||||
</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="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>
|
||||
@@ -316,8 +292,8 @@
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import { addUserCard, updateUserCard } from '@/api/booking/userCard';
|
||||
import { UserCard } from '@/api/booking/userCard/model';
|
||||
import { addBookingUserCard, updateBookingUserCard } from '@/api/booking/bookingUserCard';
|
||||
import { BookingUserCard } from '@/api/booking/bookingUserCard/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
@@ -335,7 +311,7 @@
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: UserCard | null;
|
||||
data?: BookingUserCard | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -352,9 +328,8 @@
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<UserCard>({
|
||||
const form = reactive<BookingUserCard>({
|
||||
id: undefined,
|
||||
userId: undefined,
|
||||
sid: undefined,
|
||||
uid: undefined,
|
||||
vid: undefined,
|
||||
@@ -392,13 +367,11 @@
|
||||
useTime: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
idCard: undefined,
|
||||
idcard: undefined,
|
||||
remark: undefined,
|
||||
comments: undefined,
|
||||
sortNumber: undefined,
|
||||
tenantId: undefined,
|
||||
userCardId: undefined,
|
||||
userCardName: '',
|
||||
bookingUserCardId: undefined,
|
||||
bookingUserCardName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
@@ -411,11 +384,11 @@
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
userCardName: [
|
||||
bookingUserCardName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写会员卡名称',
|
||||
message: '请填写名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
@@ -449,7 +422,7 @@
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateUserCard : addUserCard;
|
||||
const saveOrUpdate = isUpdate.value ? updateBookingUserCard : addBookingUserCard;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
42
src/views/booking/bookingUserCard/components/search.vue
Normal file
42
src/views/booking/bookingUserCard/components/search.vue
Normal 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>
|
||||
@@ -4,12 +4,11 @@
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userCardId"
|
||||
row-key="bookingUserCardId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 800 }"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
@@ -25,21 +24,20 @@
|
||||
<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 class="ele-text-success">解除绑定</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="ele-text-warning">变更绑定</a>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">注销</a>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a @click="openEdit(record)">修改</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
@@ -47,7 +45,11 @@
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<UserCardEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<BookingUserCardEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -56,28 +58,32 @@
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { EleProTable, formatNumber } from 'ele-admin-pro';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import UserCardEdit from './components/userCardEdit.vue';
|
||||
import BookingUserCardEdit from './components/bookingUserCardEdit.vue';
|
||||
import {
|
||||
pageUserCard,
|
||||
removeUserCard,
|
||||
removeBatchUserCard
|
||||
} from '@/api/booking/userCard';
|
||||
import type { UserCard, UserCardParam } from '@/api/booking/userCard/model';
|
||||
pageBookingUserCard,
|
||||
removeBookingUserCard,
|
||||
removeBatchBookingUserCard
|
||||
} from '@/api/booking/bookingUserCard';
|
||||
import type {
|
||||
BookingUserCard,
|
||||
BookingUserCardParam
|
||||
} from '@/api/booking/bookingUserCard/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<UserCard[]>([]);
|
||||
const selection = ref<BookingUserCard[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<UserCard | null>(null);
|
||||
const current = ref<BookingUserCard | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
@@ -96,7 +102,7 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageUserCard({
|
||||
return pageBookingUserCard({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
@@ -416,14 +422,13 @@
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserCardParam) => {
|
||||
console.log(where);
|
||||
const reload = (where?: BookingUserCardParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: UserCard) => {
|
||||
const openEdit = (row?: BookingUserCard) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
@@ -434,9 +439,9 @@
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: UserCard) => {
|
||||
const remove = (row: BookingUserCard) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeUserCard(row.userCardId)
|
||||
removeBookingUserCard(row.bookingUserCardId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -461,7 +466,9 @@
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchUserCard(selection.value.map((d) => d.userCardId))
|
||||
removeBatchBookingUserCard(
|
||||
selection.value.map((d) => d.bookingUserCardId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
@@ -481,7 +488,7 @@
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: UserCard) => {
|
||||
const customRow = (record: BookingUserCard) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
@@ -498,7 +505,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'UserCard'
|
||||
name: 'BookingUserCard'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,315 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="couponId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入优惠劵id"
|
||||
v-model:value="form.couponId"
|
||||
/>
|
||||
</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="优惠券类型(10满减券 20折扣券)" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入优惠券类型(10满减券 20折扣券)"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="满减券-减免金额" name="reducePrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入满减券-减免金额"
|
||||
v-model:value="form.reducePrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="折扣券-折扣率(0-100)" name="discount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入折扣券-折扣率(0-100)"
|
||||
v-model:value="form.discount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="最低消费金额" name="minPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入最低消费金额"
|
||||
v-model:value="form.minPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入到期类型(10领取后生效 20固定时间)"
|
||||
v-model:value="form.expireType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="领取后生效-有效天数" name="expireDay">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入领取后生效-有效天数"
|
||||
v-model:value="form.expireDay"
|
||||
/>
|
||||
</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="有效期结束时间" name="endTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入有效期结束时间"
|
||||
v-model:value="form.endTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="适用范围(10全部商品 20指定商品)" name="applyRange">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入适用范围(10全部商品 20指定商品)"
|
||||
v-model:value="form.applyRange"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入适用范围配置(json格式)"
|
||||
v-model:value="form.applyRangeConfig"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否过期(0未过期 1已过期)"
|
||||
v-model:value="form.isExpire"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否已使用(0未使用 1已使用)" name="isUse">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否已使用(0未使用 1已使用)"
|
||||
v-model:value="form.isUse"
|
||||
/>
|
||||
</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="状态, 0待使用, 1已使用, 2已失效" 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-item label="用户ID" name="userId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户ID"
|
||||
v-model:value="form.userId"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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 { addBookingUserCoupon, updateBookingUserCoupon } from '@/api/booking/bookingUserCoupon';
|
||||
import { BookingUserCoupon } from '@/api/booking/bookingUserCoupon/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?: BookingUserCoupon | 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<BookingUserCoupon>({
|
||||
id: undefined,
|
||||
couponId: undefined,
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
reducePrice: undefined,
|
||||
discount: undefined,
|
||||
minPrice: undefined,
|
||||
expireType: undefined,
|
||||
expireDay: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
applyRange: undefined,
|
||||
applyRangeConfig: undefined,
|
||||
isExpire: undefined,
|
||||
isUse: undefined,
|
||||
sortNumber: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
userId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
bookingUserCouponId: undefined,
|
||||
bookingUserCouponName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingUserCouponName: [
|
||||
{
|
||||
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 ? updateBookingUserCoupon : addBookingUserCoupon;
|
||||
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>
|
||||
42
src/views/booking/bookingUserCoupon/components/search.vue
Normal file
42
src/views/booking/bookingUserCoupon/components/search.vue
Normal 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>
|
||||
329
src/views/booking/bookingUserCoupon/index.vue
Normal file
329
src/views/booking/bookingUserCoupon/index.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingUserCouponId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingUserCouponEdit 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 BookingUserCouponEdit from './components/bookingUserCouponEdit.vue';
|
||||
import { pageBookingUserCoupon, removeBookingUserCoupon, removeBatchBookingUserCoupon } from '@/api/booking/bookingUserCoupon';
|
||||
import type { BookingUserCoupon, BookingUserCouponParam } from '@/api/booking/bookingUserCoupon/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingUserCoupon[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingUserCoupon | 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 pageBookingUserCoupon({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '优惠劵id',
|
||||
dataIndex: 'couponId',
|
||||
key: 'couponId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '优惠券名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '优惠券类型(10满减券 20折扣券)',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '满减券-减免金额',
|
||||
dataIndex: 'reducePrice',
|
||||
key: 'reducePrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '折扣券-折扣率(0-100)',
|
||||
dataIndex: 'discount',
|
||||
key: 'discount',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '最低消费金额',
|
||||
dataIndex: 'minPrice',
|
||||
key: 'minPrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '到期类型(10领取后生效 20固定时间)',
|
||||
dataIndex: 'expireType',
|
||||
key: 'expireType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '领取后生效-有效天数',
|
||||
dataIndex: 'expireDay',
|
||||
key: 'expireDay',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '有效期开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '有效期结束时间',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '适用范围(10全部商品 20指定商品)',
|
||||
dataIndex: 'applyRange',
|
||||
key: 'applyRange',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '适用范围配置(json格式)',
|
||||
dataIndex: 'applyRangeConfig',
|
||||
key: 'applyRangeConfig',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否过期(0未过期 1已过期)',
|
||||
dataIndex: 'isExpire',
|
||||
key: 'isExpire',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否已使用(0未使用 1已使用)',
|
||||
dataIndex: 'isUse',
|
||||
key: 'isUse',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态, 0待使用, 1已使用, 2已失效',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingUserCouponParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingUserCoupon) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingUserCoupon) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingUserCoupon(row.bookingUserCouponId)
|
||||
.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);
|
||||
removeBatchBookingUserCoupon(selection.value.map((d) => d.bookingUserCouponId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingUserCoupon) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingUserCoupon'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="uid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户id"
|
||||
v-model:value="form.uid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系人姓名" name="contractName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入联系人姓名"
|
||||
v-model:value="form.contractName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系人电话" name="contractPhone">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入联系人电话"
|
||||
v-model:value="form.contractPhone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系人地址" name="contractAddress">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入联系人地址"
|
||||
v-model:value="form.contractAddress"
|
||||
/>
|
||||
</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="isDefault">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否默认"
|
||||
v-model:value="form.isDefault"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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 { addBookingUserEmergency, updateBookingUserEmergency } from '@/api/booking/bookingUserEmergency';
|
||||
import { BookingUserEmergency } from '@/api/booking/bookingUserEmergency/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?: BookingUserEmergency | 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<BookingUserEmergency>({
|
||||
id: undefined,
|
||||
uid: undefined,
|
||||
contractName: undefined,
|
||||
contractPhone: undefined,
|
||||
contractAddress: undefined,
|
||||
sortNumber: undefined,
|
||||
isDefault: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
bookingUserEmergencyId: undefined,
|
||||
bookingUserEmergencyName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingUserEmergencyName: [
|
||||
{
|
||||
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 ? updateBookingUserEmergency : addBookingUserEmergency;
|
||||
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>
|
||||
42
src/views/booking/bookingUserEmergency/components/search.vue
Normal file
42
src/views/booking/bookingUserEmergency/components/search.vue
Normal 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>
|
||||
257
src/views/booking/bookingUserEmergency/index.vue
Normal file
257
src/views/booking/bookingUserEmergency/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingUserEmergencyId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingUserEmergencyEdit 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 BookingUserEmergencyEdit from './components/bookingUserEmergencyEdit.vue';
|
||||
import { pageBookingUserEmergency, removeBookingUserEmergency, removeBatchBookingUserEmergency } from '@/api/booking/bookingUserEmergency';
|
||||
import type { BookingUserEmergency, BookingUserEmergencyParam } from '@/api/booking/bookingUserEmergency/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingUserEmergency[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingUserEmergency | 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 pageBookingUserEmergency({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '用户id',
|
||||
dataIndex: 'uid',
|
||||
key: 'uid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '联系人姓名',
|
||||
dataIndex: 'contractName',
|
||||
key: 'contractName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '联系人电话',
|
||||
dataIndex: 'contractPhone',
|
||||
key: 'contractPhone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '联系人地址',
|
||||
dataIndex: 'contractAddress',
|
||||
key: 'contractAddress',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否默认',
|
||||
dataIndex: 'isDefault',
|
||||
key: 'isDefault',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingUserEmergencyParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingUserEmergency) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingUserEmergency) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingUserEmergency(row.bookingUserEmergencyId)
|
||||
.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);
|
||||
removeBatchBookingUserEmergency(selection.value.map((d) => d.bookingUserEmergencyId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingUserEmergency) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingUserEmergency'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,324 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="发票类型(0纸质 1电子)" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发票类型(0纸质 1电子)"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</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="开票类型(0普票 1专票)" name="invoiceType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入开票类型(0普票 1专票)"
|
||||
v-model:value="form.invoiceType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="税号" name="invoiceCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入税号"
|
||||
v-model:value="form.invoiceCode"
|
||||
/>
|
||||
</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="tel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入公司电话"
|
||||
v-model:value="form.tel"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开户行" name="bankName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入开户行"
|
||||
v-model:value="form.bankName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开户账号" name="bankAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入开户账号"
|
||||
v-model:value="form.bankAccount"
|
||||
/>
|
||||
</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="发票流水号" name="invoiceNo">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发票流水号"
|
||||
v-model:value="form.invoiceNo"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发票图片预览" name="invoiceImg">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发票图片预览"
|
||||
v-model:value="form.invoiceImg"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发票pdf地址" name="invoicePdf">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发票pdf地址"
|
||||
v-model:value="form.invoicePdf"
|
||||
/>
|
||||
</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="isCompany">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否启用"
|
||||
v-model:value="form.isCompany"
|
||||
/>
|
||||
</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="状态, 0待使用, 1已使用, 2已失效" 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-item label="用户ID" name="userId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户ID"
|
||||
v-model:value="form.userId"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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 { addBookingUserInvoice, updateBookingUserInvoice } from '@/api/booking/bookingUserInvoice';
|
||||
import { BookingUserInvoice } from '@/api/booking/bookingUserInvoice/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?: BookingUserInvoice | 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<BookingUserInvoice>({
|
||||
id: undefined,
|
||||
type: undefined,
|
||||
name: undefined,
|
||||
invoiceType: undefined,
|
||||
invoiceCode: undefined,
|
||||
address: undefined,
|
||||
tel: undefined,
|
||||
bankName: undefined,
|
||||
bankAccount: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
invoiceNo: undefined,
|
||||
invoiceImg: undefined,
|
||||
invoicePdf: undefined,
|
||||
comments: undefined,
|
||||
isCompany: undefined,
|
||||
sortNumber: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
userId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
bookingUserInvoiceId: undefined,
|
||||
bookingUserInvoiceName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingUserInvoiceName: [
|
||||
{
|
||||
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 ? updateBookingUserInvoice : addBookingUserInvoice;
|
||||
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>
|
||||
42
src/views/booking/bookingUserInvoice/components/search.vue
Normal file
42
src/views/booking/bookingUserInvoice/components/search.vue
Normal 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>
|
||||
335
src/views/booking/bookingUserInvoice/index.vue
Normal file
335
src/views/booking/bookingUserInvoice/index.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingUserInvoiceId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingUserInvoiceEdit 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 BookingUserInvoiceEdit from './components/bookingUserInvoiceEdit.vue';
|
||||
import { pageBookingUserInvoice, removeBookingUserInvoice, removeBatchBookingUserInvoice } from '@/api/booking/bookingUserInvoice';
|
||||
import type { BookingUserInvoice, BookingUserInvoiceParam } from '@/api/booking/bookingUserInvoice/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingUserInvoice[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingUserInvoice | 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 pageBookingUserInvoice({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '发票类型(0纸质 1电子)',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '发票名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '开票类型(0普票 1专票)',
|
||||
dataIndex: 'invoiceType',
|
||||
key: 'invoiceType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '税号',
|
||||
dataIndex: 'invoiceCode',
|
||||
key: 'invoiceCode',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '公司地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '公司电话',
|
||||
dataIndex: 'tel',
|
||||
key: 'tel',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '开户行',
|
||||
dataIndex: 'bankName',
|
||||
key: 'bankName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '开户账号',
|
||||
dataIndex: 'bankAccount',
|
||||
key: 'bankAccount',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '电子邮箱',
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '发票流水号',
|
||||
dataIndex: 'invoiceNo',
|
||||
key: 'invoiceNo',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '发票图片预览',
|
||||
dataIndex: 'invoiceImg',
|
||||
key: 'invoiceImg',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '发票pdf地址',
|
||||
dataIndex: 'invoicePdf',
|
||||
key: 'invoicePdf',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'isCompany',
|
||||
key: 'isCompany',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '状态, 0待使用, 1已使用, 2已失效',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingUserInvoiceParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingUserInvoice) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingUserInvoice) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingUserInvoice(row.bookingUserInvoiceId)
|
||||
.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);
|
||||
removeBatchBookingUserInvoice(selection.value.map((d) => d.bookingUserInvoiceId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingUserInvoice) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingUserInvoice'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
324
src/views/booking/bookingVip/components/bookingVipEdit.vue
Normal file
324
src/views/booking/bookingVip/components/bookingVipEdit.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="sid场馆id集合，适用的场馆" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入sid场馆id集合，适用的场馆"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</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="price">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入会员卡价格"
|
||||
v-model:value="form.price"
|
||||
/>
|
||||
</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="会员卡说明" name="info">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入会员卡说明"
|
||||
v-model:value="form.info"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="折扣率" name="discount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入折扣率"
|
||||
v-model:value="form.discount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="使用次数" name="count">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入使用次数"
|
||||
v-model:value="form.count"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="每使用一次减少的金额" name="eachMoney">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入每使用一次减少的金额"
|
||||
v-model:value="form.eachMoney"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="年限" name="term">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入年限"
|
||||
v-model:value="form.term"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="月限" name="month">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入月限"
|
||||
v-model:value="form.month"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="日限" name="day">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入日限"
|
||||
v-model:value="form.day"
|
||||
/>
|
||||
</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="会员卡类型：1年卡，2次卡，3月卡，4会员VIP，VIP充值卡" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入会员卡类型：1年卡，2次卡，3月卡，4会员VIP，VIP充值卡"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="卡类型：1成人卡，2儿童卡" name="cardType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入卡类型：1成人卡，2儿童卡"
|
||||
v-model:value="form.cardType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="vip卡等级类型：1特殊vip卡，2普通vip卡" name="vipType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入vip卡等级类型：1特殊vip卡，2普通vip卡"
|
||||
v-model:value="form.vipType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="特殊卡开发凭证图" name="pic">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入特殊卡开发凭证图"
|
||||
v-model:value="form.pic"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="VIP充值卡价格组" name="prices">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入VIP充值卡价格组"
|
||||
v-model:value="form.prices"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否赠送积分：1赠送，2不赠送" name="isIntegral">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否赠送积分：1赠送，2不赠送"
|
||||
v-model:value="form.isIntegral"
|
||||
/>
|
||||
</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="是否有效：1是，0否" name="isUse">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否有效：1是，0否"
|
||||
v-model:value="form.isUse"
|
||||
/>
|
||||
</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 { addBookingVip, updateBookingVip } from '@/api/booking/bookingVip';
|
||||
import { BookingVip } from '@/api/booking/bookingVip/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?: BookingVip | 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<BookingVip>({
|
||||
id: undefined,
|
||||
sid: undefined,
|
||||
name: undefined,
|
||||
price: undefined,
|
||||
desc: undefined,
|
||||
info: undefined,
|
||||
discount: undefined,
|
||||
count: undefined,
|
||||
eachMoney: undefined,
|
||||
term: undefined,
|
||||
month: undefined,
|
||||
day: undefined,
|
||||
sortNumber: undefined,
|
||||
type: undefined,
|
||||
cardType: undefined,
|
||||
vipType: undefined,
|
||||
pic: undefined,
|
||||
prices: undefined,
|
||||
isIntegral: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
isUse: undefined,
|
||||
tenantId: undefined,
|
||||
bookingVipId: undefined,
|
||||
bookingVipName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
bookingVipName: [
|
||||
{
|
||||
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 ? updateBookingVip : addBookingVip;
|
||||
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>
|
||||
77
src/views/booking/bookingVip/components/search.vue
Normal file
77
src/views/booking/bookingVip/components/search.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<a-button class="ele-btn-icon" @click="add">
|
||||
<span>同步会员卡权限</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="会员卡名称"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 360px"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { ref, watch } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { BookingVipParam } from '@/api/booking/bookingVip/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<BookingVipParam>({
|
||||
id: undefined,
|
||||
keywords: undefined,
|
||||
timeStart: undefined,
|
||||
timeEnd: undefined
|
||||
});
|
||||
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
where.timeStart = d1 ? dayjs(d1).valueOf() / 1000 : undefined;
|
||||
where.timeEnd = d2 ? dayjs(d2).valueOf() / 1000 : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
327
src/views/booking/bookingVip/index.vue
Normal file
327
src/views/booking/bookingVip/index.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="bookingVipId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 2800 }"
|
||||
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-button type="primary" @click="openEdit(record)"
|
||||
>修改</a-button
|
||||
>
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a-button class="ele-text-danger">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<BookingVipEdit
|
||||
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 BookingVipEdit from './components/bookingVipEdit.vue';
|
||||
import {
|
||||
pageBookingVip,
|
||||
removeBookingVip,
|
||||
removeBatchBookingVip
|
||||
} from '@/api/booking/bookingVip';
|
||||
import type {
|
||||
BookingVip,
|
||||
BookingVipParam
|
||||
} from '@/api/booking/bookingVip/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<BookingVip[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<BookingVip | 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 pageBookingVip({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '会员卡名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '可用场地',
|
||||
dataIndex: 'sid',
|
||||
key: 'sid',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '购买价格',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '会员卡说明',
|
||||
// dataIndex: 'info',
|
||||
// key: 'info',
|
||||
// align: 'center',
|
||||
// },
|
||||
{
|
||||
title: '折扣率',
|
||||
dataIndex: 'discount',
|
||||
key: 'discount',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '可使用次数',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '每使用一次减少的金额',
|
||||
dataIndex: 'eachMoney',
|
||||
key: 'eachMoney',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '年限',
|
||||
dataIndex: 'term',
|
||||
key: 'term',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '月限',
|
||||
dataIndex: 'month',
|
||||
key: 'month',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '日限',
|
||||
dataIndex: 'day',
|
||||
key: 'day',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否有效',
|
||||
dataIndex: 'isUse',
|
||||
key: 'isUse',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '会员卡类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '卡类型',
|
||||
dataIndex: 'cardType',
|
||||
key: 'cardType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'vip卡类型',
|
||||
dataIndex: 'vipType',
|
||||
key: 'vipType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '特殊卡开发凭证图',
|
||||
// dataIndex: 'pic',
|
||||
// key: 'pic',
|
||||
// align: 'center',
|
||||
// },
|
||||
// {
|
||||
// title: 'VIP充值卡价格组',
|
||||
// dataIndex: 'prices',
|
||||
// key: 'prices',
|
||||
// align: 'center',
|
||||
// },
|
||||
{
|
||||
title: '是否赠送积分',
|
||||
dataIndex: 'isIntegral',
|
||||
key: 'isIntegral',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: BookingVipParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: BookingVip) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: BookingVip) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBookingVip(row.bookingVipId)
|
||||
.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);
|
||||
removeBatchBookingVip(selection.value.map((d) => d.bookingVipId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: BookingVip) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BookingVip'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -1,178 +0,0 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
: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: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="类型名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入类型名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<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="备注">
|
||||
<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 { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { removeSiteInfoCache } from '@/api/cms/website';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'cardPlanId',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
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);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proSystemRoleTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { PlusOutlined } 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 } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import { pageDictData, removeDictData } from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '类型名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'cardPlanId';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'cardPlanId' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'cardPlanId', dictName: '会员卡类型' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'cardPlanId' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CardPlanDict'
|
||||
};
|
||||
</script>
|
||||
@@ -1,325 +0,0 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="title">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入菜单名称"
|
||||
v-model:value="form.title"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="路由地址" name="path">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入路由地址"
|
||||
v-model:value="form.path"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="选择图标" name="icon">-->
|
||||
<!-- <ele-icon-picker-->
|
||||
<!-- :data="iconData"-->
|
||||
<!-- :allow-search="false"-->
|
||||
<!-- v-model:value="form.icon"-->
|
||||
<!-- placeholder="请选择菜单图标"-->
|
||||
<!-- >-->
|
||||
<!-- <template #icon="{ icon }">-->
|
||||
<!-- <component :is="icon" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </ele-icon-picker>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="文字颜色" name="color">
|
||||
<ele-color-picker
|
||||
:show-alpha="true"
|
||||
v-model:value="form.color"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上传图标" name="avatar" extra="优先级高于图标">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分组" name="parentId">
|
||||
<SelectDict
|
||||
dict-code="mpGroup"
|
||||
:placeholder="`选择分组`"
|
||||
v-model:value="form.groupName"
|
||||
@done="chooseGroupId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所在行" name="rows">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="3"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入所在行"
|
||||
v-model:value="form.rows"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="打开方式" name="target">
|
||||
<DictSelect
|
||||
dict-code="navType"
|
||||
class="form-item"
|
||||
placeholder="请选择链接方式"
|
||||
v-model:value="form.target"
|
||||
/>
|
||||
</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 { addMpMenu, updateMpMenu } from '@/api/cms/mp-menu';
|
||||
import { MpMenu } from '@/api/cms/mp-menu/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 类型 0服务 1订单
|
||||
type?: number;
|
||||
// 页面ID
|
||||
pageId?: number;
|
||||
// 修改回显的数据
|
||||
data?: MpMenu | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const pageId = ref(0);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<MpMenu>({
|
||||
menuId: undefined,
|
||||
parentId: 0,
|
||||
title: '',
|
||||
type: 2,
|
||||
rows: 0,
|
||||
isMpWeixin: true,
|
||||
path: undefined,
|
||||
component: undefined,
|
||||
target: 'uni.navigateTo',
|
||||
icon: '',
|
||||
color: undefined,
|
||||
avatar: undefined,
|
||||
hide: undefined,
|
||||
position: undefined,
|
||||
active: undefined,
|
||||
userId: 0,
|
||||
groupName: undefined,
|
||||
home: undefined,
|
||||
sortNumber: 100,
|
||||
comments: '',
|
||||
status: 0
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
parentId: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择分组',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写菜单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写路由地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.thumbnail,
|
||||
status: 'done'
|
||||
});
|
||||
form.avatar = data.thumbnail;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.avatar = '';
|
||||
};
|
||||
|
||||
const chooseGroupId = (item: DictData) => {
|
||||
form.parentId = item.dictDataId;
|
||||
form.groupName = item.dictDataName;
|
||||
};
|
||||
|
||||
// 预设颜色
|
||||
const predefineColors = ref([
|
||||
'#40a9ff',
|
||||
'#9254de',
|
||||
'#36cfc9',
|
||||
'#73d13d',
|
||||
'#f759ab',
|
||||
'#cf1313',
|
||||
'#ff4d4f',
|
||||
'#ffa940',
|
||||
'#ffc53d',
|
||||
'#f3d3d3',
|
||||
'#1b1b1b',
|
||||
'#363636',
|
||||
'#4d4d4d',
|
||||
'#737373',
|
||||
'#a6a6a6',
|
||||
'#d9d9d9',
|
||||
'#e6e6e6',
|
||||
'#f2f2f2',
|
||||
'#f7f7f7',
|
||||
'#fafafa'
|
||||
]);
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
pageId: pageId.value
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateMpMenu : addMpMenu;
|
||||
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 = [];
|
||||
pageId.value = props.pageId;
|
||||
if (props.type) {
|
||||
form.type = props.type;
|
||||
}
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.avatar) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.avatar,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as icons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
components: icons,
|
||||
data() {
|
||||
return {
|
||||
iconData: [
|
||||
{
|
||||
title: '已引入的图标',
|
||||
icons: Object.keys(icons)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,285 +0,0 @@
|
||||
<template>
|
||||
<div class="goods-list ml-10 w-full">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="goodsId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
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 === 'goodsName'">
|
||||
{{ record.goodsName }}
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :preview="false" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'price'">
|
||||
<span class="text-gray-800">
|
||||
￥{{ formatNumber(record.price) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'specs'">
|
||||
<a-tag v-if="record.specs === 0">单规格</a-tag>
|
||||
<a-tag v-if="record.specs === 1">多规格</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">已下架</a-tag>
|
||||
<a-tag v-if="record.status === 2" color="red">待审核</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="add(record)">加入结算</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<SpecForm
|
||||
v-model:visible="showSpecForm"
|
||||
:data="current"
|
||||
@done="addSpecCashier"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { 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 './search.vue';
|
||||
import SpecForm from './specForm.vue';
|
||||
import { pageGoods, removeGoods, removeBatchGoods } from '@/api/shop/goods';
|
||||
import type { Goods, GoodsParam } from '@/api/shop/goods/model';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { Cashier } from '@/api/shop/cashier/model';
|
||||
import { User } from '@/api/system/user/model';
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
loginUser?: User;
|
||||
}>(),
|
||||
{
|
||||
placeholder: undefined
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'reload'): void;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Goods[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Cashier | null>(null);
|
||||
const form = ref<Cashier>({});
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
const specs = ref<string>();
|
||||
const showSpecForm = ref<boolean>(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
where.merchantId = getMerchantId();
|
||||
return pageGoods({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
width: 90,
|
||||
dataIndex: 'goodsId'
|
||||
},
|
||||
{
|
||||
title: '商品图片',
|
||||
dataIndex: 'image',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'image'
|
||||
},
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'goodsName',
|
||||
align: 'center',
|
||||
key: 'goodsName'
|
||||
},
|
||||
{
|
||||
title: '商品价格',
|
||||
dataIndex: 'price',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
key: 'price'
|
||||
},
|
||||
{
|
||||
title: '商品库存',
|
||||
dataIndex: 'stock',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
key: 'stock'
|
||||
},
|
||||
{
|
||||
title: '商品规格',
|
||||
dataIndex: 'specs',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'specs'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: GoodsParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
emit('reload');
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Cashier) => {
|
||||
current.value = row ?? null;
|
||||
showSpecForm.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openSpecForm = (row?: Cashier) => {
|
||||
current.value = row ?? null;
|
||||
if (current.value) {
|
||||
current.value.cartNum = 1;
|
||||
}
|
||||
showSpecForm.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
const add = (row?: Cashier) => {
|
||||
if (row) {
|
||||
form.value = row;
|
||||
form.value.spec = specs.value;
|
||||
openSpecForm(row);
|
||||
// if (row.specs === 0) {
|
||||
// form.value.spec = '';
|
||||
// addCashier(form.value)
|
||||
// .then(() => {
|
||||
// emit('reload');
|
||||
// })
|
||||
// .catch((msg) => {
|
||||
// message.error(msg.message);
|
||||
// });
|
||||
// }
|
||||
// if (row.specs === 1) {
|
||||
// form.value.spec = specs.value;
|
||||
// openSpecForm(row);
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
const addSpecCashier = () => {
|
||||
emit('reload');
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Goods) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeGoods(row.goodsId)
|
||||
.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);
|
||||
removeBatchGoods(selection.value.map((d) => d.goodsId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(currentRoute, () => {}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Goods'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -1,406 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="categoryId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:parse-data="parseData"
|
||||
:need-page="false"
|
||||
:customRow="customRow"
|
||||
:expand-icon-column-index="1"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:scroll="{ x: 1200 }"
|
||||
cache-key="proGoodsCategoryTable"
|
||||
@done="onDone"
|
||||
@expand="onExpand"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="expandAll">
|
||||
展开全部
|
||||
</a-button>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="foldAll">
|
||||
折叠全部
|
||||
</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 === 'path'">
|
||||
<span class="ele-text-placeholder">{{ record.path }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'component'">
|
||||
<span class="ele-text-placeholder">{{ record.component }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="isExternalLink(record.path)" color="red">外链</a-tag>
|
||||
<a-tag v-else-if="isExternalLink(record.component)" color="orange">
|
||||
内链
|
||||
</a-tag>
|
||||
<a-tag v-else-if="isDirectory(record)" color="blue">目录</a-tag>
|
||||
<a-tag v-else-if="record.type === 0">列表</a-tag>
|
||||
<a-tag v-else-if="record.type === 1" color="purple">页面</a-tag>
|
||||
<a-tag v-else-if="record.type === 2" color="orange">链接</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'title'">
|
||||
<a-avatar
|
||||
:size="26"
|
||||
shape="square"
|
||||
:src="`${record.image}`"
|
||||
style="margin-right: 10px"
|
||||
v-if="record.image"
|
||||
/>
|
||||
<a @click="openPreview(`/goods/search?categoryId=${record.categoryId}`)">{{
|
||||
record.title
|
||||
}}</a>
|
||||
</template>
|
||||
<template v-if="column.key === 'showIndex'">
|
||||
<a-space @click="onShowIndex(record)">
|
||||
<span v-if="record.showIndex === 1" class="ele-text-success"
|
||||
><CheckOutlined
|
||||
/></span>
|
||||
<span v-else class="ele-text-placeholder"><CloseOutlined /></span>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'recommend'">
|
||||
<a-space @click="onRecommend(record)">
|
||||
<span v-if="record.recommend === 1" class="ele-text-success"
|
||||
><CheckOutlined
|
||||
/></span>
|
||||
<span v-else class="ele-text-placeholder"><CloseOutlined /></span>
|
||||
</a-space>
|
||||
</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="orange">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(null, record.categoryId)">添加</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<category-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:parent-id="parentId"
|
||||
:category-list="categoryData"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import {
|
||||
ArrowUpOutlined,
|
||||
PlusOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem,
|
||||
EleProTableDone
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
messageLoading,
|
||||
toDateString,
|
||||
isExternalLink,
|
||||
toTreeData,
|
||||
eachTreeData
|
||||
} from 'ele-admin-pro/es';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import CategoryEdit from './components/category-edit.vue';
|
||||
import {
|
||||
listGoodsCategory,
|
||||
removeGoodsCategory,
|
||||
updateGoodsCategory
|
||||
} from '@/api/shop/goodsCategory';
|
||||
import type {
|
||||
GoodsCategory,
|
||||
GoodsCategoryParam
|
||||
} from '@/api/shop/goodsCategory/model';
|
||||
import { openNew, openPreview } from '@/utils/common';
|
||||
import { getSiteInfo } from '@/api/layout';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'categoryId',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true
|
||||
},
|
||||
// {
|
||||
// title: '路由地址',
|
||||
// dataIndex: 'path',
|
||||
// key: 'path'
|
||||
// },
|
||||
// {
|
||||
// title: '组件路径',
|
||||
// dataIndex: 'component',
|
||||
// key: 'component'
|
||||
// },
|
||||
// {
|
||||
// title: '类型',
|
||||
// dataIndex: 'type',
|
||||
// key: 'type',
|
||||
// align: 'center',
|
||||
// width: 120
|
||||
// },
|
||||
{
|
||||
title: '首页显示',
|
||||
dataIndex: 'showIndex',
|
||||
key: 'showIndex',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
hideInTable: false
|
||||
},
|
||||
{
|
||||
title: '推荐',
|
||||
dataIndex: 'recommend',
|
||||
key: 'recommend',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
hideInTable: false
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
showSorterTooltip: false,
|
||||
customRender: ({ text }) => ['显示', '隐藏'][text]
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
width: 180,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<GoodsCategory | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 上级分类id
|
||||
const parentId = ref<number>();
|
||||
// 分类数据
|
||||
const categoryData = ref<GoodsCategory[]>([]);
|
||||
// 表格展开的行
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
const searchText = ref('');
|
||||
const tenantId = ref<number>();
|
||||
const domain = ref<string>();
|
||||
|
||||
getSiteInfo().then((data) => {
|
||||
tenantId.value = data.tenantId;
|
||||
domain.value = data.domain;
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ where }) => {
|
||||
where.title = searchText.value;
|
||||
return listGoodsCategory({ ...where });
|
||||
};
|
||||
|
||||
const linkTo = (item: GoodsCategory) => {
|
||||
if (item.children) {
|
||||
return false;
|
||||
}
|
||||
const url = `http://${tenantId.value}.${domain.value}${item.path}`;
|
||||
return openNew(url.replace(':id', String(item.categoryId)));
|
||||
};
|
||||
|
||||
// 上移
|
||||
const moveUp = (row?: GoodsCategory) => {
|
||||
updateGoodsCategory({
|
||||
categoryId: row?.categoryId,
|
||||
sortNumber: Number(row?.sortNumber) - 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 数据转为树形结构 */
|
||||
const parseData = (data: GoodsCategory[]) => {
|
||||
return toTreeData({
|
||||
data: data.map((d) => {
|
||||
return { ...d, key: d.categoryId, value: d.categoryId };
|
||||
}),
|
||||
idField: 'categoryId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
};
|
||||
|
||||
/* 表格渲染完成回调 */
|
||||
const onDone: EleProTableDone<GoodsCategory> = ({ data }) => {
|
||||
categoryData.value = data;
|
||||
};
|
||||
|
||||
/* 刷新表格 */
|
||||
const reload = (where?: GoodsCategoryParam) => {
|
||||
tableRef?.value?.reload({ where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: GoodsCategory | null, id?: number) => {
|
||||
current.value = row ?? null;
|
||||
parentId.value = id;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: GoodsCategory) => {
|
||||
if (row.children?.length) {
|
||||
message.error('请先删除子节点');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeGoodsCategory(row.categoryId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 展开全部 */
|
||||
const expandAll = () => {
|
||||
let keys: number[] = [];
|
||||
eachTreeData(categoryData.value, (d) => {
|
||||
if (d.children && d.children.length && d.categoryId) {
|
||||
keys.push(d.categoryId);
|
||||
}
|
||||
});
|
||||
expandedRowKeys.value = keys;
|
||||
};
|
||||
|
||||
/* 折叠全部 */
|
||||
const foldAll = () => {
|
||||
expandedRowKeys.value = [];
|
||||
};
|
||||
|
||||
/* 点击展开图标时触发 */
|
||||
const onExpand = (expanded: boolean, record: GoodsCategory) => {
|
||||
if (expanded) {
|
||||
expandedRowKeys.value = [
|
||||
...expandedRowKeys.value,
|
||||
record.categoryId as number
|
||||
];
|
||||
} else {
|
||||
expandedRowKeys.value = expandedRowKeys.value.filter(
|
||||
(d) => d !== record.categoryId
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/* 判断是否是目录 */
|
||||
const isDirectory = (d: GoodsCategory) => {
|
||||
return !!d.children?.length;
|
||||
};
|
||||
|
||||
const onShowIndex = (row: GoodsCategory) => {
|
||||
updateGoodsCategory({
|
||||
...row,
|
||||
showIndex: row.showIndex == 1 ? 0 : 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
const onRecommend = (row: GoodsCategory) => {
|
||||
updateGoodsCategory({
|
||||
...row,
|
||||
recommend: row.recommend == 1 ? 0 : 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: GoodsCategory) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'GoodsCategory'
|
||||
};
|
||||
</script>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<a-card :title="title" class="ele-body">
|
||||
<a-list item-layout="vertical" :pagination="pagination" :data-source="list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item key="item.title">
|
||||
<template #actions>
|
||||
<span v-for="{ icon, text } in actions" :key="icon">
|
||||
<component :is="icon" style="margin-right: 8px" />
|
||||
{{ text }}
|
||||
</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<img
|
||||
width="100"
|
||||
height="100"
|
||||
alt="logo"
|
||||
v-if="item.image"
|
||||
:src="item.image"
|
||||
/>
|
||||
</template>
|
||||
<a-list-item-meta :description="item.title">
|
||||
<template #title>
|
||||
<a @click="openNew('/cms/article/' + item.articleId)">{{
|
||||
item.title
|
||||
}}</a>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</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 { pageArticle } from '@/api/cms/article';
|
||||
import { Article } from '@/api/cms/article/model';
|
||||
import { getArticleCategory } from '@/api/cms/category';
|
||||
import { ArticleCategory } from '@/api/cms/category/model';
|
||||
|
||||
import {
|
||||
StarOutlined,
|
||||
LikeOutlined,
|
||||
MessageOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { openNew } from '@/utils/common';
|
||||
const { currentRoute } = useRouter();
|
||||
const title = ref<string>('');
|
||||
const categoryId = ref(0);
|
||||
const category = ref<ArticleCategory | any>();
|
||||
const list = ref<Article[]>([]);
|
||||
const spinning = ref(true);
|
||||
const page = ref(1);
|
||||
|
||||
const pagination = {
|
||||
onChange: (index: number) => {
|
||||
page.value = index;
|
||||
reload();
|
||||
},
|
||||
total: 10,
|
||||
pageSize: 10
|
||||
};
|
||||
|
||||
const actions: Record<string, any>[] = [
|
||||
{ icon: StarOutlined, text: '156' },
|
||||
{ icon: LikeOutlined, text: '156' },
|
||||
{ icon: MessageOutlined, text: '2' }
|
||||
];
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
// 加载文章分类
|
||||
getArticleCategory(categoryId.value).then((data) => {
|
||||
category.value = data;
|
||||
// 修改页签标题
|
||||
if (data.title) {
|
||||
title.value = data.title;
|
||||
setPageTabTitle(data.title);
|
||||
}
|
||||
});
|
||||
// 加载文章列表
|
||||
pageArticle({ categoryId: categoryId.value, page: page.value }).then(
|
||||
(data) => {
|
||||
if (data?.list) {
|
||||
pagination.total = data.count;
|
||||
list.value = data.list;
|
||||
}
|
||||
spinning.value = false;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
categoryId.value = Number(id);
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ArticleCategoryPreview'
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.ele-body {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!-- 选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
:allow-clear="true"
|
||||
:show-search="true"
|
||||
optionFilterProp="label"
|
||||
:options="options"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
:style="`width: 200px`"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Merchant } from '@/api/shop/merchant/model';
|
||||
import { listMerchant } from '@/api/shop/merchant';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string, item: any): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: any;
|
||||
type?: any;
|
||||
placeholder?: string;
|
||||
dictCode?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择场馆'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const options = ref<Merchant[]>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
const item = options.value?.find((d) => d.merchantName == value);
|
||||
emit('update:value', value, item);
|
||||
};
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
listMerchant({}).then((list) => {
|
||||
options.value = list.map((d) => {
|
||||
d.label = d.merchantName;
|
||||
d.value = d.merchantCode;
|
||||
return d;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
</script>
|
||||
@@ -1,141 +0,0 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<SelectMerchantDown
|
||||
v-if="!getMerchantId()"
|
||||
:placeholder="`选择场馆`"
|
||||
class="input-item"
|
||||
v-model:value="where.merchantId"
|
||||
@change="search"
|
||||
/>
|
||||
<a-date-picker
|
||||
placeholder="按天筛选"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="where.dateTime"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">刷新</a-button>
|
||||
<!-- <a-radio-group v-model:value="where.keywords" @change="search">-->
|
||||
<!-- <template v-for="(item, index) in next7day" :key="index">-->
|
||||
<!-- <a-radio-button value="0"-->
|
||||
<!-- >{{ item.date }} {{ getWeek(item.week) }}</a-radio-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-radio-group>-->
|
||||
</a-space>
|
||||
<ele-modal
|
||||
:width="500"
|
||||
:visible="showQrcode"
|
||||
:maskClosable="false"
|
||||
title="使用微信扫一扫完成支付"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@cancel="closeQrcode"
|
||||
@ok="closeQrcode"
|
||||
>
|
||||
<div class="qrcode">
|
||||
<ele-qr-code-svg v-if="text" :value="text" :size="200" />
|
||||
<div class="ele-text-secondary">使用微信扫一扫完成支付</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { OrderParam } from '@/api/shop/order/model';
|
||||
import { getNativeCode } from '@/api/system/payment';
|
||||
import { getNext7day, getServerTime } from '@/api/layout';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
interface serverTime {
|
||||
today?: string;
|
||||
}
|
||||
|
||||
interface dateItem {
|
||||
date?: string;
|
||||
week?: string;
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: OrderParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<OrderParam>({
|
||||
dateTime: '',
|
||||
isStatus: 0,
|
||||
merchantCode: undefined,
|
||||
week: 0,
|
||||
merchantId: getMerchantId()
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 二维码内容
|
||||
const text = ref('');
|
||||
const showQrcode = ref(false);
|
||||
const next7day = ref<dateItem[]>([]);
|
||||
const serverTime = ref<serverTime>({});
|
||||
|
||||
const closeQrcode = () => {
|
||||
showQrcode.value = !showQrcode.value;
|
||||
};
|
||||
|
||||
const getCode = () => {
|
||||
getNativeCode({}).then((data) => {
|
||||
text.value = String(data);
|
||||
showQrcode.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
getNext7day().then((res) => {
|
||||
next7day.value = res;
|
||||
where.week = res[0].week;
|
||||
});
|
||||
getServerTime().then((res) => {
|
||||
serverTime.value = res;
|
||||
where.dateTime = res.today;
|
||||
where.merchantId = getMerchantId();
|
||||
// where.merchantCode = '37';
|
||||
where.isStatus = 0;
|
||||
emit('search', where);
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qrcode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,440 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</a-card>
|
||||
<template v-for="(item, index) in periodList" :key="index">
|
||||
<div class="checkout-body">
|
||||
<view class="period-item">
|
||||
<view class="period ele-text-primary">{{ item.timePeriod }}</view>
|
||||
<view class="field-list">
|
||||
<template v-for="(field, index2) in item.fieldList" :key="index2">
|
||||
<view
|
||||
class="field"
|
||||
:class="isActive(field)"
|
||||
style="cursor: pointer"
|
||||
@click="openEdit(field)"
|
||||
>
|
||||
<text class="field-name">{{ field.fieldName }}</text>
|
||||
<text class="price">{{ item.price }}元</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 编辑弹窗 -->
|
||||
<OrderInfo
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:week="week"
|
||||
@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,
|
||||
ClockCircleOutlined,
|
||||
IdcardOutlined,
|
||||
WechatOutlined,
|
||||
CoffeeOutlined,
|
||||
AlipayCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { EleProTable, messageLoading, 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 OrderInfo from './components/orderInfo.vue';
|
||||
import {
|
||||
pageOrder,
|
||||
removeOrder,
|
||||
removeBatchOrder
|
||||
} from '@/api/booking/order';
|
||||
import type { Order } from '@/api/booking/order/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { Period, PeriodParam } from '@/api/booking/period/model';
|
||||
import { listPeriod } from '@/api/booking/period';
|
||||
import { Field } from '@/api/booking/field/model';
|
||||
import { getOrder } from '@/api/booking/order';
|
||||
import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
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 week = ref<any>(0);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
const periodList = ref<Period[]>([]);
|
||||
const merchantId = ref(0);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
where.type = 1;
|
||||
where.merchantId = getMerchantId();
|
||||
return pageOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'orderId',
|
||||
key: 'orderId',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '总额',
|
||||
dataIndex: 'totalPrice',
|
||||
key: 'totalPrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '减少金额',
|
||||
dataIndex: 'reducePrice',
|
||||
key: 'reducePrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
dataIndex: 'payPrice',
|
||||
key: 'payPrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => `￥${formatNumber(text)}`
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
dataIndex: 'payType',
|
||||
key: 'payType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '付款状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '付款时间',
|
||||
dataIndex: 'payTime',
|
||||
key: 'payTime',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '优惠类型',
|
||||
dataIndex: 'couponType',
|
||||
key: 'couponType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否已开票',
|
||||
dataIndex: 'isInvoice',
|
||||
key: 'isInvoice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
customRender: ({ text }) =>
|
||||
['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
|
||||
},
|
||||
// {
|
||||
// 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?: PeriodParam) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
week.value = where?.week;
|
||||
listPeriod(where)
|
||||
.then((list) => {
|
||||
if (list) {
|
||||
hide();
|
||||
periodList.value = list;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error('该场馆没有添加时间段，或预约时间已过');
|
||||
hide();
|
||||
});
|
||||
// selection.value = [];
|
||||
// tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Field) => {
|
||||
const orderId = Number(row?.orderId);
|
||||
if (periodList.value.length == 0) {
|
||||
console.log('sssssss');
|
||||
return message.error('该场馆没有添加时间段，或预约时间已过');
|
||||
}
|
||||
if (orderId > 0) {
|
||||
getOrder(orderId)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
current.value = res ?? null;
|
||||
showEdit.value = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err.message);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
const isActive = (item) => {
|
||||
if (item.sold) {
|
||||
if (item.isHalf == 1) {
|
||||
return 'web-bg-warning';
|
||||
}
|
||||
return 'web-bg-info';
|
||||
}
|
||||
// if (index) {
|
||||
//
|
||||
// }
|
||||
};
|
||||
const onField = (item) => {};
|
||||
|
||||
/* 删除单个 */
|
||||
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 = (where: PeriodParam) => {
|
||||
// loading.value = true;
|
||||
// };
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Order) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as MenuIcons from '@/layout/menu-icons';
|
||||
export default {
|
||||
name: 'Order',
|
||||
components: MenuIcons
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tag-icon {
|
||||
padding-right: 6px;
|
||||
}
|
||||
.checkout-body {
|
||||
padding: 10px 0;
|
||||
|
||||
.period-item {
|
||||
margin: 16px 0;
|
||||
|
||||
.period {
|
||||
line-height: 2em;
|
||||
padding-left: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.web-bg-info {
|
||||
background-color: #909399 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.web-bg-success {
|
||||
color: #2ba91c !important;
|
||||
border: 1px solid #2ba91c !important;
|
||||
}
|
||||
|
||||
.web-bg-warning {
|
||||
// background-color: #c9e294 !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
&:before {
|
||||
border-radius: 0 0 6px 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 12px solid #2ba91c;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 4px;
|
||||
border: 1px solid #fff;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 59px;
|
||||
height: 59px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
line-height: 1.3em;
|
||||
position: relative;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #808080;
|
||||
|
||||
.field-name {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,361 +0,0 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="adType">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="form.adType"
|
||||
style="width: 120px"
|
||||
>
|
||||
<a-select-option value="图片广告">图片广告</a-select-option>
|
||||
<a-select-option value="幻灯片">幻灯片</a-select-option>
|
||||
<a-select-option value="视频广告">视频广告</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<template v-if="form.adType == '幻灯片'">
|
||||
<a-form-item label="广告图片" name="images" extra="请上传广告图片,最多可上传9张图">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="9"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :accept="'image/png,image/jpeg'"-->
|
||||
<!-- :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="form.adType == '图片广告'">
|
||||
<a-form-item label="广告图片" name="images" extra="请上传广告图片">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- :accept="'image/png,image/jpeg'"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="form.adType == '视频广告'">
|
||||
<a-form-item label="上传视频" name="images" extra="请上传视频文件，仅支持mp4格式，大小200M以内">
|
||||
<SelectFile
|
||||
:placeholder="`请选择视频文件`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- :accept="'video/mp4'"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="广告位名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入广告位名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</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="path">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入路由/链接地址"
|
||||
v-model:value="form.path"
|
||||
/>
|
||||
</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="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>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import {assignObject, isChinese} from 'ele-admin-pro';
|
||||
import { addAd, updateAd } from '@/api/cms/ad';
|
||||
import { Ad } from '@/api/cms/ad/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import {FormInstance, RuleObject} from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from '@/api/system/file';
|
||||
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?: Ad | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Ad>({
|
||||
adId: undefined,
|
||||
name: '',
|
||||
adType: '图片广告',
|
||||
images: '',
|
||||
width: '',
|
||||
height: '',
|
||||
path: '',
|
||||
type: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写广告位名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
adType: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择广告类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
images: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请上传图片或视频',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (images.value.length == 0) {
|
||||
return Promise.reject('请上传图片或视频');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (file.type.startsWith('video')) {
|
||||
if (file.size / 1024 / 1024 > 200) {
|
||||
message.error('大小不能超过 200MB');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (file.type.startsWith('image')) {
|
||||
if (file.size / 1024 / 1024 > 5) {
|
||||
message.error('大小不能超过 5MB');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item: any) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: file.type == 'video/mp4' ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png' : data.path,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.images = data.path;
|
||||
}
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index,1)
|
||||
form.images = '';
|
||||
}
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
images: JSON.stringify(images.value)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateAd : addAd;
|
||||
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);
|
||||
images.value = [];
|
||||
if (props.data.images) {
|
||||
const arr = JSON.parse(props.data.images);
|
||||
arr.map((d) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
images.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.upload-text {
|
||||
margin-right: 70px;
|
||||
}
|
||||
.icon-bg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
</style>
|
||||
@@ -1,268 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="goodsId"
|
||||
: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 === 'goodsName'">
|
||||
<a @click="openPreview(`/goods/detail/${record.goodsId}`)">{{
|
||||
record.goodsName
|
||||
}}</a>
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="80" />
|
||||
</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">已下架</a-tag>
|
||||
<a-tag v-if="record.status === 2" 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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<GoodsEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } 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 GoodsEdit from './components/goodsEdit.vue';
|
||||
import { pageGoods, removeGoods, removeBatchGoods } from '@/api/shop/goods';
|
||||
import type { Goods, GoodsParam } from '@/api/shop/goods/model';
|
||||
import { getMerchantId, openPreview, openUrl } from "@/utils/common";
|
||||
import { useRouter } from 'vue-router';
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Goods[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Goods | 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 = getMerchantId();
|
||||
return pageGoods({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
width: 90,
|
||||
dataIndex: 'goodsId'
|
||||
},
|
||||
{
|
||||
title: '封面图',
|
||||
dataIndex: 'image',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'image'
|
||||
},
|
||||
{
|
||||
title: '课程名称',
|
||||
dataIndex: 'goodsName',
|
||||
key: 'goodsName'
|
||||
},
|
||||
{
|
||||
title: '课程售价',
|
||||
dataIndex: 'price',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
key: 'price'
|
||||
},
|
||||
{
|
||||
title: '销量',
|
||||
dataIndex: 'sales',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
key: 'sales'
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
dataIndex: 'stock',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
key: 'stock'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: GoodsParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Goods) => {
|
||||
current.value = row ?? null;
|
||||
openUrl(`/goods/add`);
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Goods) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeGoods(row.goodsId)
|
||||
.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);
|
||||
removeBatchGoods(selection.value.map((d) => d.goodsId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Goods) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openUrl(`/booking/goods/add?goodsId=${record.goodsId}`);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
() => {
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Goods'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -106,12 +106,12 @@
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '项目类型',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
@@ -130,7 +130,7 @@
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
width: 180
|
||||
},
|
||||
// {
|
||||
// title: '创建时间',
|
||||
|
||||
@@ -368,7 +368,7 @@
|
||||
if (props.data) {
|
||||
loading.value = true;
|
||||
assignObject(form, props.data);
|
||||
pageOrderInfo({ orderId: form.orderId }).then((res) => {
|
||||
pageOrderInfo({ oid: form.orderId }).then((res) => {
|
||||
form.orderInfoList = res?.list;
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
@@ -1,43 +1,75 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<!-- <SelectMerchantDown-->
|
||||
<!-- :placeholder="`选择场馆`"-->
|
||||
<!-- class="input-item"-->
|
||||
<!-- v-model:value="where.merchantCode"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- />-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="where.keywords"
|
||||
placeholder="请输入关键词"
|
||||
@search="search"
|
||||
@pressEnter="search"
|
||||
/>
|
||||
<!-- <a-button @click="getCode">生成支付二维码</a-button>-->
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
<ele-modal
|
||||
:width="500"
|
||||
:visible="showQrcode"
|
||||
:maskClosable="false"
|
||||
title="使用微信扫一扫完成支付"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@cancel="closeQrcode"
|
||||
@ok="closeQrcode"
|
||||
>
|
||||
<div class="qrcode">
|
||||
<ele-qr-code-svg v-if="text" :value="text" :size="200" />
|
||||
<div class="ele-text-secondary">使用微信扫一扫完成支付</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
<div class="search">
|
||||
<a-space class="flex items-center" :size="10" style="flex-wrap: wrap">
|
||||
<span class="text-gray-400">付款状态</span>
|
||||
<a-radio-group v-model:value="where.payStatus" @change="search">
|
||||
<a-radio-button :value="0">未付款</a-radio-button>
|
||||
<a-radio-button :value="1">已付款</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">付款方式</span>
|
||||
<a-radio-group v-model:value="where.payType" @change="search">
|
||||
<a-radio-button :value="4">现金</a-radio-button>
|
||||
<a-radio-button :value="0">余额支付</a-radio-button>
|
||||
<a-radio-button :value="1">微信支付</a-radio-button>
|
||||
<a-radio-button :value="2">会员卡</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">订单状态</span>
|
||||
<a-radio-group v-model:value="where.orderStatus" @change="search">
|
||||
<a-radio-button :value="0">未使用</a-radio-button>
|
||||
<a-radio-button :value="1">已完成</a-radio-button>
|
||||
<a-radio-button :value="2">已取消</a-radio-button>
|
||||
<a-radio-button :value="4">退款中</a-radio-button>
|
||||
<a-radio-button :value="5">退款被拒</a-radio-button>
|
||||
<a-radio-button :value="6">退款成功</a-radio-button>
|
||||
</a-radio-group>
|
||||
<span class="text-gray-400">开票状态</span>
|
||||
<a-radio-group v-model:value="where.isInvoice" @change="search">
|
||||
<a-radio-button :value="0">未开票</a-radio-button>
|
||||
<a-radio-button :value="1">已开票</a-radio-button>
|
||||
<a-radio-button :value="2">不能开票</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-space>
|
||||
<a-space :size="10" class="mt-5" style="flex-wrap: wrap">
|
||||
<SelectMerchant
|
||||
:placeholder="`选择场馆`"
|
||||
class="input-item"
|
||||
v-model:value="where.merchantName"
|
||||
@done="chooseMerchantId"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入订单号|编号|手机号"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 380px"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button class="ele-btn-icon" :disabled="loading" @click="handleExport">
|
||||
<template #icon>
|
||||
<download-outlined />
|
||||
</template>
|
||||
<span>导出订单</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { OrderParam } from '@/api/shop/order/model';
|
||||
import { getNativeCode } from '@/api/system/payment';
|
||||
import { ref, watch } from 'vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Merchant } from '@/api/shop/merchant/model';
|
||||
import { listOrder } from '@/api/shop/order';
|
||||
import { Order, OrderParam } from '@/api/shop/order/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -51,17 +83,40 @@
|
||||
(e: 'search', where?: OrderParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<OrderParam>({
|
||||
keywords: ''
|
||||
type: 1,
|
||||
createTimeStart: undefined,
|
||||
createTimeEnd: undefined,
|
||||
categoryId: undefined,
|
||||
week: undefined,
|
||||
keywords: undefined
|
||||
});
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const orders = ref<Order[] | any[]>();
|
||||
const xlsFileName = ref<string>();
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
xlsFileName.value = `${d1}至${d2}`;
|
||||
// where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
|
||||
// where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
const chooseMerchantId = (data: Merchant) => {
|
||||
where.merchantId = data.merchantId;
|
||||
where.merchantName = data.merchantName;
|
||||
search();
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
@@ -70,19 +125,69 @@
|
||||
search();
|
||||
};
|
||||
|
||||
// 二维码内容
|
||||
const text = ref('');
|
||||
const showQrcode = ref(false);
|
||||
|
||||
const closeQrcode = () => {
|
||||
showQrcode.value = !showQrcode.value;
|
||||
};
|
||||
|
||||
const getCode = () => {
|
||||
getNativeCode({}).then((data) => {
|
||||
text.value = String(data);
|
||||
showQrcode.value = true;
|
||||
});
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'订单号',
|
||||
'订单编号',
|
||||
'姓名',
|
||||
'电话号码',
|
||||
'订单信息',
|
||||
'消费金额',
|
||||
'实付金额',
|
||||
'下单日期'
|
||||
]
|
||||
];
|
||||
await listOrder(where)
|
||||
.then((list) => {
|
||||
orders.value = list;
|
||||
orders.value?.forEach((d: Order) => {
|
||||
array.push([
|
||||
`${d.orderId}`,
|
||||
`${d.orderNo}`,
|
||||
`${d.realName}`,
|
||||
`${d.phone}`,
|
||||
`${d.comments}`,
|
||||
`${d.totalPrice}`,
|
||||
`${d.payPrice}`,
|
||||
`${d.createTime}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `订单数据导出`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
@@ -90,13 +195,3 @@
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qrcode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
>已取消</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 1" class="ele-text-success"
|
||||
>已付款</span
|
||||
>已完成</span
|
||||
>
|
||||
<span v-if="record.orderStatus == 3" class="ele-text-placeholder"
|
||||
>已取消</span
|
||||
@@ -182,8 +182,6 @@
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">详情</a>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a @click="openEdit(record)">编辑</a>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
@@ -202,10 +200,6 @@
|
||||
ExclamationCircleOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ClockCircleOutlined,
|
||||
IdcardOutlined,
|
||||
WechatOutlined,
|
||||
CoffeeOutlined,
|
||||
AlipayCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { EleProTable, toDateString } from 'ele-admin-pro';
|
||||
@@ -215,14 +209,9 @@
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import OrderInfo from './components/orderInfo.vue';
|
||||
import {
|
||||
pageOrder,
|
||||
removeOrder,
|
||||
removeBatchOrder
|
||||
} from '@/api/booking/order';
|
||||
import type { Order, OrderParam } from '@/api/booking/order/model';
|
||||
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/shop/order';
|
||||
import type { Order, OrderParam } from '@/api/shop/order/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { getMerchantId } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
@@ -249,9 +238,10 @@
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
// 商城订单
|
||||
where.type = 1;
|
||||
// where.sceneType = 'showOrderInfo';
|
||||
where.merchantId = getMerchantId();
|
||||
// where.merchantId = getMerchantId();
|
||||
return pageOrder({
|
||||
...where,
|
||||
...orders,
|
||||
|
||||
306
src/views/booking/orderInfo/components/orderInfoEdit.vue
Normal file
306
src/views/booking/orderInfo/components/orderInfoEdit.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="oid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联订单表id"
|
||||
v-model:value="form.oid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联场馆id" name="sid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联场馆id"
|
||||
v-model:value="form.sid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联场地id" name="fid">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联场地id"
|
||||
v-model:value="form.fid"
|
||||
/>
|
||||
</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="fieldName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入场地"
|
||||
v-model:value="form.fieldName"
|
||||
/>
|
||||
</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="price">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入单价"
|
||||
v-model:value="form.price"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="儿童价" name="childrenPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入儿童价"
|
||||
v-model:value="form.childrenPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="成人人数" name="adultNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入成人人数"
|
||||
v-model:value="form.adultNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="儿童人数" name="childrenNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入儿童人数"
|
||||
v-model:value="form.childrenNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="1已付款，2未付款，3无需付款或占用状态" name="payStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入1已付款，2未付款，3无需付款或占用状态"
|
||||
v-model:value="form.payStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否免费：1免费、2收费" name="isFree">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否免费：1免费、2收费"
|
||||
v-model:value="form.isFree"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否支持儿童票：1支持，2不支持" name="isChildren">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否支持儿童票：1支持，2不支持"
|
||||
v-model:value="form.isChildren"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="预订类型：1全场，2半场" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入预订类型：1全场，2半场"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="组合数据:日期+时间段+场馆id+场地id" name="mergeData">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入组合数据:日期+时间段+场馆id+场地id"
|
||||
v-model:value="form.mergeData"
|
||||
/>
|
||||
</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="下单时间" name="orderTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入下单时间"
|
||||
v-model:value="form.orderTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="毫秒时间戳" name="timeFlag">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入毫秒时间戳"
|
||||
v-model:value="form.timeFlag"
|
||||
/>
|
||||
</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 { addOrderInfo, updateOrderInfo } from '@/api/booking/orderInfo';
|
||||
import { OrderInfo } from '@/api/booking/orderInfo/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?: OrderInfo | 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<OrderInfo>({
|
||||
id: undefined,
|
||||
oid: undefined,
|
||||
sid: undefined,
|
||||
fid: undefined,
|
||||
siteName: undefined,
|
||||
fieldName: undefined,
|
||||
dateTime: undefined,
|
||||
price: undefined,
|
||||
childrenPrice: undefined,
|
||||
adultNum: undefined,
|
||||
childrenNum: undefined,
|
||||
payStatus: undefined,
|
||||
isFree: undefined,
|
||||
isChildren: undefined,
|
||||
type: undefined,
|
||||
mergeData: undefined,
|
||||
startTime: undefined,
|
||||
orderTime: undefined,
|
||||
timeFlag: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
orderInfoId: undefined,
|
||||
orderInfoName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
orderInfoName: [
|
||||
{
|
||||
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 ? updateOrderInfo : addOrderInfo;
|
||||
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>
|
||||
42
src/views/booking/orderInfo/components/search.vue
Normal file
42
src/views/booking/orderInfo/components/search.vue
Normal 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>
|
||||
323
src/views/booking/orderInfo/index.vue
Normal file
323
src/views/booking/orderInfo/index.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="orderInfoId"
|
||||
: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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<OrderInfoEdit 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 OrderInfoEdit from './components/orderInfoEdit.vue';
|
||||
import { pageOrderInfo, removeOrderInfo, removeBatchOrderInfo } from '@/api/booking/orderInfo';
|
||||
import type { OrderInfo, OrderInfoParam } from '@/api/booking/orderInfo/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<OrderInfo[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<OrderInfo | 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 pageOrderInfo({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '关联订单表id',
|
||||
dataIndex: 'oid',
|
||||
key: 'oid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '关联场馆id',
|
||||
dataIndex: 'sid',
|
||||
key: 'sid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '关联场地id',
|
||||
dataIndex: 'fid',
|
||||
key: 'fid',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '场馆',
|
||||
dataIndex: 'siteName',
|
||||
key: 'siteName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '场地',
|
||||
dataIndex: 'fieldName',
|
||||
key: 'fieldName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '预约时间段',
|
||||
dataIndex: 'dateTime',
|
||||
key: 'dateTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '儿童价',
|
||||
dataIndex: 'childrenPrice',
|
||||
key: 'childrenPrice',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '成人人数',
|
||||
dataIndex: 'adultNum',
|
||||
key: 'adultNum',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '儿童人数',
|
||||
dataIndex: 'childrenNum',
|
||||
key: 'childrenNum',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '1已付款，2未付款，3无需付款或占用状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否免费：1免费、2收费',
|
||||
dataIndex: 'isFree',
|
||||
key: 'isFree',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '是否支持儿童票：1支持，2不支持',
|
||||
dataIndex: 'isChildren',
|
||||
key: 'isChildren',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '预订类型：1全场，2半场',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '组合数据:日期+时间段+场馆id+场地id',
|
||||
dataIndex: 'mergeData',
|
||||
key: 'mergeData',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '开场时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '下单时间',
|
||||
dataIndex: 'orderTime',
|
||||
key: 'orderTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '毫秒时间戳',
|
||||
dataIndex: 'timeFlag',
|
||||
key: 'timeFlag',
|
||||
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?: OrderInfoParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: OrderInfo) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: OrderInfo) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeOrderInfo(row.orderInfoId)
|
||||
.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);
|
||||
removeBatchOrderInfo(selection.value.map((d) => d.orderInfoId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: OrderInfo) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'OrderInfo'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -141,13 +141,7 @@
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目类型',
|
||||
dataIndex: 'itemType',
|
||||
key: 'itemType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
title: '地点',
|
||||
dataIndex: 'shopType',
|
||||
key: 'shopType',
|
||||
align: 'center'
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user