smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

Browse Source
This commit is contained in:
dylanmay
2025-11-04 14:38:50 +08:00
parent c2b0a91ffc f32bce424b
commit 2153b1325c
354 changed files with 10376 additions and 6447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/package.json
View File

@@ -44,6 +44,7 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@videojs-player/vue": "^1.0.0",
"@vueuse/components": "catalog:",
"@vueuse/core": "catalog:",
"@vueuse/integrations": "catalog:",
"ant-design-vue": "catalog:",

1
apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts
View File

@@ -18,6 +18,7 @@ export namespace MallRewardActivityApi {
export interface RewardActivity {
id?: number; // 活动编号
name?: string; // 活动名称
status?: number; // 活动状态
startTime?: Date; // 开始时间
endTime?: Date; // 结束时间
startAndEndTime?: Date[]; // 开始和结束时间（仅前端使用）

36
apps/web-antd/src/components/card-title/CardTitle.vue Normal file
View File

@@ -0,0 +1,36 @@
<script lang="ts" setup>
defineOptions({ name: 'CardTitle' });
// TODO @jawe from xingyu：https://gitee.com/yudaocode/yudao-ui-admin-vben/pulls/243/files#diff_note_47350213；这个组件没有必要，直接用antdv card 的slot去做就行了，只有这一个地方用，没有必要单独写一个组件
defineProps({
title: {
type: String,
required: true,
},
});
</script>
<template>
<span class="card-title">{{ title }}</span>
</template>
<style scoped lang="scss">
.card-title {
font-size: 14px;
font-weight: 600;
&::before {
position: relative;
top: 8px;
left: -5px;
display: inline-block;
width: 3px;
height: 14px;
content: '';
//background-color: #105cfb;
background: var(--el-color-primary);
border-radius: 5px;
transform: translateY(-50%);
}
}
</style>

1
apps/web-antd/src/components/card-title/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as CardTitle } from './CardTitle.vue';

4
apps/web-antd/src/components/description/description.vue
View File

@@ -133,9 +133,7 @@ export default defineComponent({
>
{() => {
if (item.slot) {
// TODO @xingyu：这里要 inline 掉么？
const slotContent = getSlot(slots, item.slot, data);
return slotContent;
return getSlot(slots, item.slot, data);
}
if (!contentMinWidth) {
return getContent();

2
apps/web-antd/src/plugins/form-create/index.ts
View File

@@ -96,7 +96,7 @@ export function setupFormCreate(app: App) {
components.forEach((component) => {
app.component(component.name as string, component);
});
// TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
// TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
app.component('AMessage', message);
formCreate.use(install);
app.use(formCreate);

102
apps/web-antd/src/store/mall/kefu.ts Normal file
View File

@@ -0,0 +1,102 @@
import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
import { isEmpty } from '@vben/utils';
import { acceptHMRUpdate, defineStore } from 'pinia';
import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
interface MallKefuInfoVO {
conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
conversationMessageList: Map<number, MallKefuMessageApi.Message[]>; // 会话消息
}
export const useMallKefuStore = defineStore('mall-kefu', {
state: (): MallKefuInfoVO => ({
conversationList: [],
conversationMessageList: new Map<number, MallKefuMessageApi.Message[]>(), // key 会话，value 会话消息列表
}),
getters: {
getConversationList(): MallKefuConversationApi.Conversation[] {
return this.conversationList;
},
getConversationMessageList(): (
conversationId: number,
) => MallKefuMessageApi.Message[] | undefined {
return (conversationId: number) =>
this.conversationMessageList.get(conversationId);
},
},
actions: {
// ======================= 会话消息相关 =======================
/** 缓存历史消息 */
saveMessageList(
conversationId: number,
messageList: MallKefuMessageApi.Message[],
) {
this.conversationMessageList.set(conversationId, messageList);
},
// ======================= 会话相关 =======================
/** 加载会话缓存列表 */
async setConversationList() {
// TODO @jave：idea linter 告警，修复下；
// TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
this.conversationList = await KeFuConversationApi.getConversationList();
this.conversationSort();
},
/** 更新会话缓存已读 */
async updateConversationStatus(conversationId: number) {
if (isEmpty(this.conversationList)) {
return;
}
const conversation = this.conversationList.find(
(item) => item.id === conversationId,
);
conversation && (conversation.adminUnreadMessageCount = 0);
},
/** 更新会话缓存 */
async updateConversation(conversationId: number) {
if (isEmpty(this.conversationList)) {
return;
}
const conversation =
await KeFuConversationApi.getConversation(conversationId);
this.deleteConversation(conversationId);
conversation && this.conversationList.push(conversation);
this.conversationSort();
},
/** 删除会话缓存 */
deleteConversation(conversationId: number) {
const index = this.conversationList.findIndex(
(item) => item.id === conversationId,
);
// 存在则删除
if (index !== -1) {
this.conversationList.splice(index, 1);
}
},
conversationSort() {
// 按置顶属性和最后消息时间排序
this.conversationList.sort((a, b) => {
// 按照置顶排序，置顶的会在前面
if (a.adminPinned !== b.adminPinned) {
return a.adminPinned ? -1 : 1;
}
// 按照最后消息时间排序，最近的会在前面
return (
(b.lastMessageTime as unknown as number) -
(a.lastMessageTime as unknown as number)
);
});
},
},
});
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useMallKefuStore, hot));
}

9
apps/web-antd/src/views/bpm/model/definition/index.vue
View File

@@ -32,15 +32,18 @@ function handleRefresh() {
}
/** 查看表单详情 */
function handleFormDetail(row: BpmProcessDefinitionApi.ProcessDefinition) {
async function handleFormDetail(
row: BpmProcessDefinitionApi.ProcessDefinition,
) {
if (row.formType === BpmModelFormType.NORMAL) {
const data = {
id: row.formId,
};
formCreateDetailModalApi.setData(data).open();
} else {
// TODO 待实现 jason 这里要改么？
console.warn('业务表单待实现', row);
await router.push({
path: row.formCustomCreatePath,
});
}
}

2
apps/web-antd/src/views/bpm/model/form/index.vue
View File

@@ -309,8 +309,6 @@ async function handleSave() {
}
} catch (error: any) {
console.error('保存失败:', error);
// TODO @jason：这个提示，还要么？？？
// message.warning(error.msg || '请完善所有步骤的必填信息');
}
}

10
apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
View File

@@ -121,11 +121,9 @@ onBeforeUnmount(() => {
/>
</ContentWrap>
</template>
<style lang="scss">
// TODO @jason：tailwind？
.process-panel__container {
position: absolute;
top: 110px;
right: 70px;
<style scoped>
:deep(.process-panel__container) {
@apply absolute right-[20px] top-[70px];
}
</style>

26
apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
View File

@@ -238,15 +238,16 @@ async function handleDeleteCategory() {
}
/** 处理表单详情点击 */
function handleFormDetail(row: any) {
async function handleFormDetail(row: any) {
if (row.formType === BpmModelFormType.NORMAL) {
const data = {
id: row.formId,
};
formCreateDetailModalApi.setData(data).open();
} else {
// TODO 待实现 jason：是不是已经 ok 啦？
console.warn('业务表单待实现', row);
await router.push({
path: row.formCustomCreatePath,
});
}
}
@@ -547,7 +548,7 @@ function handleRenameSuccess() {
<Collapse
:active-key="expandKeys"
:bordered="false"
class="bg-transparent"
class="collapse-no-padding bg-transparent"
>
<Collapse.Panel
key="1"
@@ -738,17 +739,10 @@ function handleRenameSuccess() {
</div>
</template>
<style lang="scss" scoped>
// @jason：看看能不能通过 tailwindcss 简化下
.category-draggable-model {
// ant-collapse-header 自定义样式
:deep(.ant-collapse-header) {
padding: 0;
}
// 折叠面板样式
:deep(.ant-collapse-content-box) {
padding: 0;
}
<style scoped>
/* :deep() 实现样式穿透 */
.collapse-no-padding :deep(.ant-collapse-header),
.collapse-no-padding :deep(.ant-collapse-content-box) {
padding: 0;
}
</style>

53
apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
View File

@@ -24,6 +24,7 @@ import {
} from '#/api/bpm/processInstance';
import { decodeFields, setConfAndFields2 } from '#/components/form-create';
import { router } from '#/router';
import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
@@ -51,7 +52,6 @@ const props = defineProps({
const emit = defineEmits(['cancel']);
const { closeCurrentTab } = useTabs();
const isFormReady = ref(false); // 表单就绪状态变量：表单就绪后再渲染 form-create
const getTitle = computed(() => {
return `流程表单 - ${props.selectProcessDefinition.name}`;
});
@@ -122,21 +122,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
// 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
// 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
// 这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
const formApi = formCreate.create(decodeFields(row.formFields));
const allowedFields = formApi.fields();
for (const key in formVariables) {
if (!allowedFields.includes(key)) {
delete formVariables[key];
// 解析表单字段列表（不创建实例，避免重复渲染）
const decodedFields = decodeFields(row.formFields);
const allowedFields = new Set(
decodedFields.map((field: any) => field.field).filter(Boolean),
);
// 过滤掉不允许的字段
if (formVariables) {
for (const key in formVariables) {
if (!allowedFields.has(key)) {
delete formVariables[key];
}
}
}
setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
// 设置表单就绪状态
// TODO @jason：这个变量是必须的，有没可能简化掉？
isFormReady.value = true;
// 在配置中禁用 form-create 自带的提交和重置按钮
detailForm.value.option = {
...detailForm.value.option,
submitBtn: false,
resetBtn: false,
};
await nextTick();
fApi.value?.btn.show(false); // 隐藏提交按钮
// 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
await getApprovalDetail({
@@ -153,30 +164,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
}
// 情况二：业务表单
} else if (row.formCustomCreatePath) {
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
await router.push({
path: row.formCustomCreatePath,
});
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
// 返回选择流程
emit('cancel');
}
}
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
watch(
detailForm.value,
() => detailForm.value.value,
(newValue) => {
if (newValue && Object.keys(newValue.value).length > 0) {
if (newValue && Object.keys(newValue).length > 0) {
// 记录之前的节点审批人
tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
startUserSelectAssignees.value = {};
// 加载最新的审批详情
getApprovalDetail({
id: props.selectProcessDefinition.id,
processVariablesStr: JSON.stringify(newValue.value), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
});
}
},
{
immediate: true,
deep: true,
},
);
@@ -283,7 +296,6 @@ defineExpose({ initProcessInfo });
class="flex-1 overflow-auto"
>
<form-create
v-if="isFormReady"
:rule="detailForm.rule"
v-model:api="fApi"
v-model="detailForm.value"
@@ -307,10 +319,15 @@ defineExpose({ initProcessInfo });
class="flex flex-1 overflow-hidden"
:force-render="true"
>
<div class="w-full">
<div class="h-full w-full">
<!-- BPMN 流程图预览 -->
<ProcessInstanceBpmnViewer
:bpmn-xml="bpmnXML"
v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
/>
<ProcessInstanceSimpleViewer
:simple-json="simpleJson"
v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
/>
</div>
</Tabs.TabPane>

15
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -183,14 +183,11 @@ function setFieldPermission(field: string, permission: string) {
}
}
// TODO @jason：这个还要么？
/**
* 操作成功后刷新
*/
// const refresh = () => {
// // 重新获取详情
// getDetail();
// };
/** 操作成功后刷新 */
const refresh = () => {
// 重新获取详情
getDetail();
};
/** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
watch(
@@ -369,7 +366,7 @@ onMounted(async () => {
:normal-form="detailForm"
:normal-form-api="fApi"
:writable-fields="writableFields"
@success="getDetail"
@success="refresh"
/>
</div>
</template>

55
apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
View File

@@ -1,10 +1,59 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
defineOptions({ name: 'ProcessInstanceBpmnViewer' });
const props = withDefaults(
defineProps<{
bpmnXml?: string;
loading?: boolean; // 是否加载中
modelView?: Object;
}>(),
{
loading: false,
modelView: () => ({}),
bpmnXml: '',
},
);
// BPMN 流程图数据
const view = ref({
bpmnXml: '',
});
/** 监控 modelView 更新 */
watch(
() => props.modelView,
async (newModelView) => {
// 加载最新
if (newModelView) {
// @ts-ignore
view.value = newModelView;
}
},
);
/** 监听 bpmnXml */
watch(
() => props.bpmnXml,
(value) => {
view.value.bpmnXml = value;
},
);
</script>
<template>
<!-- TODO @jason：这里 BPMN 图的接入 -->
<div>
<h1>BPMN Viewer</h1>
<div
v-loading="loading"
class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
>
<MyProcessViewer
key="processViewer"
:xml="view.bpmnXml"
:view="view"
class="h-full min-h-[500px] w-full"
/>
</div>
</template>

9
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
View File

@@ -268,9 +268,6 @@ async function openPopover(type: string) {
Object.keys(popOverVisible.value).forEach((item) => {
if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
});
// TODO @jason：下面这 2 行，要删除么？
// await nextTick()
// formRef.value.resetFields()
}
/** 关闭气泡卡 */
@@ -710,9 +707,6 @@ defineExpose({ loadTodoTask });
</script>
<template>
<div class="flex items-center">
<!-- TODO @jason：这里要删除么？ -->
<!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
<!-- 【通过】按钮 -->
<!-- z-index 设置为300 避免覆盖签名弹窗 -->
<Space size="middle">
@@ -903,13 +897,12 @@ defineExpose({ loadTodoTask });
label-width="100px"
>
<FormItem label="抄送人" name="copyUserIds">
<!-- TODO @jason：看看是不是用 看看能不能通过 tailwindcss 简化下 style -->
<Select
v-model:value="copyForm.copyUserIds"
:allow-clear="true"
style="width: 100%"
mode="multiple"
placeholder="请选择抄送人"
class="w-full"
>
<SelectOption
v-for="item in userOptions"

1
apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
View File

@@ -14,7 +14,6 @@ const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
const [Descriptions] = useDescription({
bordered: true,
column: 1,
class: 'mx-4',
schema: useDetailSchema(),
});

1
apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
View File

@@ -14,7 +14,6 @@ const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
const [Descriptions] = useDescription({
bordered: true,
column: 1,
class: 'mx-4',
schema: useDetailSchema(),
});

1
apps/web-antd/src/views/infra/job/logger/modules/detail.vue
View File

@@ -15,7 +15,6 @@ const formData = ref<InfraJobLogApi.JobLog>();
const [Descriptions] = useDescription({
bordered: true,
column: 1,
class: 'mx-4',
schema: useDetailSchema(),
});

1
apps/web-antd/src/views/infra/job/modules/detail.vue
View File

@@ -16,7 +16,6 @@ const nextTimes = ref<Date[]>([]); // 下一次执行时间
const [Descriptions] = useDescription({
bordered: true,
column: 1,
class: 'mx-4',
schema: useDetailSchema(),
});

6
apps/web-antd/src/views/iot/device/device/data.ts
View File

@@ -239,7 +239,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '设备状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATUS, 'number'),
options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number'),
placeholder: '请选择设备状态',
allowClear: true,
},
@@ -295,12 +295,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
slots: { default: 'groups' },
},
{
field: 'status',
field: 'state',
title: '设备状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.IOT_DEVICE_STATUS },
props: { type: DICT_TYPE.IOT_DEVICE_STATE },
},
},
{

2
apps/web-antd/src/views/iot/device/device/index.vue
View File

@@ -307,7 +307,7 @@ onMounted(async () => {
style="width: 200px"
>
<Select.Option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
:key="dict.value"
:value="dict.value"
>

4
apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue
View File

@@ -294,7 +294,7 @@ onMounted(async () => {
style="width: 240px"
>
<Select.Option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
:key="dict.value"
:value="dict.value"
>
@@ -373,7 +373,7 @@ onMounted(async () => {
</template>
<template v-else-if="column.key === 'status'">
<DictTag
:type="DICT_TYPE.IOT_DEVICE_STATUS"
:type="DICT_TYPE.IOT_DEVICE_STATE"
:value="record.status"
/>
</template>

2
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
View File

@@ -106,7 +106,7 @@ function handleAuthInfoDialogClose() {
</Descriptions.Item>
<Descriptions.Item label="当前状态">
<DictTag
:type="DICT_TYPE.IOT_DEVICE_STATUS"
:type="DICT_TYPE.IOT_DEVICE_STATE"
:value="device.state"
/>
</Descriptions.Item>

53
apps/web-antd/src/views/iot/device/group/data.ts
View File

@@ -1,12 +1,13 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改设备分组的表单 */
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
@@ -30,16 +31,15 @@ export function useFormSchema(): VbenFormSchema[] {
.max(64, '分组名称长度不能超过 64 个字符'),
},
{
fieldName: 'parentId',
label: '父级分组',
component: 'ApiTreeSelect',
fieldName: 'status',
label: '分组状态',
component: 'RadioGroup',
componentProps: {
api: getSimpleDeviceGroupList,
labelField: 'name',
valueField: 'id',
placeholder: '请选择父级分组',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'description',
@@ -65,6 +65,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
@@ -72,14 +81,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '分组名称',
minWidth: 200,
treeNode: true,
field: 'id',
title: 'ID',
minWidth: 100,
},
{
field: 'description',
title: '分组描述',
field: 'name',
title: '分组名称',
minWidth: 200,
},
{
@@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
},
{
field: 'deviceCount',
title: '设备数量',
minWidth: 100,
field: 'description',
title: '分组描述',
minWidth: 200,
},
{
field: 'createTime',
@@ -102,6 +110,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'deviceCount',
title: '设备数量',
minWidth: 100,
},
{
title: '操作',
width: 200,

13
apps/web-antd/src/views/iot/device/group/index.vue
View File

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotDeviceGroupApi } from '#/api/iot/device/group';
import { Page, useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { message } from 'ant-design-vue';
@@ -62,24 +61,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
columns: useGridColumns(),
height: 'auto',
keepSource: true,
treeConfig: {
transform: true,
rowField: 'id',
parentField: 'parentId',
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const data = await getDeviceGroupPage({
return await getDeviceGroupPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 转换为树形结构
return {
...data,
list: handleTree(data.list, 'id', 'parentId'),
};
},
},
},

6
apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
View File

@@ -39,8 +39,10 @@ const [Form, formApi] = useVbenForm({
},
schema: useFormSchema(),
showCollapseButton: false,
showDefaultActions: false,
});
// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@@ -70,9 +72,13 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
await formApi.resetForm();
return;
}
// 重置表单
await formApi.resetForm();
const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
// 如果没有数据或没有 id，表示是新增
if (!data || !data.id) {

53
apps/web-antd/src/views/iot/product/category/data.ts
View File

@@ -1,12 +1,13 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleProductCategoryList } from '#/api/iot/product/category';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改产品分类的表单 */
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
@@ -19,51 +20,37 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
fieldName: 'name',
label: '分类名称',
label: '分类名字',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
placeholder: '请输入分类名字',
},
rules: z
.string()
.min(1, '分类名称不能为空')
.max(64, '分类名称长度不能超过 64 个字符'),
},
{
fieldName: 'parentId',
label: '父级分类',
component: 'ApiTreeSelect',
componentProps: {
api: getSimpleProductCategoryList,
labelField: 'name',
valueField: 'id',
placeholder: '请选择父级分类',
allowClear: true,
},
.min(1, '分类名字不能为空')
.max(64, '分类名字长度不能超过 64 个字符'),
},
{
fieldName: 'sort',
label: '排序',
label: '分类排序',
component: 'InputNumber',
componentProps: {
placeholder: '请输入排序',
placeholder: '请输入分类排序',
class: 'w-full',
min: 0,
},
rules: 'required',
rules: z.number().min(0, '分类排序不能为空'),
},
{
fieldName: 'status',
label: '状态',
label: '分类状态',
component: 'RadioGroup',
defaultValue: 1,
componentProps: {
options: [
{ label: '开启', value: 1 },
{ label: '关闭', value: 0 },
],
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: 'required',
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'description',
@@ -82,10 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '分类名称',
label: '分类名字',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
placeholder: '请输入分类名字',
allowClear: true,
},
},
@@ -94,9 +81,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '创建时间',
component: 'RangePicker',
componentProps: {
placeholder: ['开始日期', '结束日期'],
...getRangePickerDefaultProps(),
allowClear: true,
class: 'w-full',
},
},
];
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'name',
title: '名字',
minWidth: 200,
treeNode: true,
},
{
field: 'sort',

20
apps/web-antd/src/views/iot/product/category/index.vue
View File

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotProductCategoryApi } from '#/api/iot/product/category';
import { Page, useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { message } from 'ant-design-vue';
@@ -70,16 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const data = await getProductCategoryPage({
return await getProductCategoryPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 转换为树形结构
return {
...data,
list: handleTree(data.list, 'id', 'parentId'),
};
},
},
},
@@ -91,16 +85,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: true,
search: true,
},
treeConfig: {
parentField: 'parentId',
rowField: 'id',
transform: true,
expandAll: true,
reserve: true,
trigger: 'default',
iconOpen: '',
iconClose: '',
},
} as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
});
</script>
@@ -121,8 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- 操作列 -->
<template #actions="{ row }">
<TableAction
:actions="[

34
apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue
View File

@@ -38,6 +38,7 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@@ -63,13 +64,17 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
formApi.resetForm();
return;
}
// 加载数据
let data = modalApi.getData<
IotProductCategoryApi.ProductCategory & { parentId?: number }
>();
if (!data) {
// 重置表单
await formApi.resetForm();
const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
// 如果没有数据或没有 id，表示是新增
if (!data || !data.id) {
formData.value = undefined;
// 新增模式：设置默认值
await formApi.setValues({
sort: 0,
@@ -77,23 +82,12 @@ const [Modal, modalApi] = useVbenModal({
});
return;
}
// 编辑模式：加载数据
modalApi.lock();
try {
if (data.id) {
// 编辑模式：加载完整数据
data = await getProductCategory(data.id);
} else if (data.parentId) {
// 新增下级分类：设置父级ID
await formApi.setValues({
parentId: data.parentId,
sort: 0,
status: 1,
});
return;
}
// 设置到 values
formData.value = data;
await formApi.setValues(data);
formData.value = await getProductCategory(data.id);
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}

22
apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
View File

@@ -19,6 +19,7 @@ import {
import { getProductPage } from '#/api/iot/product/product';
// TODO @haohao：命名不太对；可以简化下；
defineOptions({ name: 'ProductCardView' });
const props = defineProps<Props>();
@@ -195,16 +196,33 @@ defineExpose({
/>
物模型
</Button>
<Tooltip v-if="item.status === 1" title="启用状态的产品不能删除">
<Button
size="small"
danger
disabled
class="action-btn action-btn-delete !w-[32px]"
>
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-[14px]"
/>
</Button>
</Tooltip>
<Popconfirm
v-else
:title="`确认删除产品 ${item.name} 吗?`"
@confirm="emit('delete', item)"
>
<Button
size="small"
danger
class="action-btn action-btn-delete"
class="action-btn action-btn-delete !w-[32px]"
>
<IconifyIcon icon="ant-design:delete-outlined" />
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-[14px]"
/>
</Button>
</Popconfirm>
</div>

3
apps/web-antd/src/views/mall/product/spu/components/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as SkuTableSelect } from './sku-table-select.vue';
export { default as SpuShowcase } from './spu-showcase.vue';
export { default as SpuTableSelect } from './spu-table-select.vue';

69
apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue → apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
View File

@@ -8,8 +8,6 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { fenToYuan } from '@vben/utils';
import { Input, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
@@ -21,18 +19,13 @@ const emit = defineEmits<{
change: [sku: MallSpuApi.Sku];
}>();
const selectedSkuId = ref<number>();
const spuId = ref<number>();
/** 配置列 */
// TODO @puhui999：貌似列太宽了？
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => [
{
field: 'id',
title: '#',
width: 60,
align: 'center',
slots: { default: 'radio-column' },
type: 'radio',
width: 55,
},
{
field: 'picUrl',
@@ -66,73 +59,65 @@ const gridColumns = computed<VxeGridProps['columns']>(() => [
},
]);
// TODO @芋艿：要不要直接非 pager？
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: gridColumns.value,
height: 400,
border: true,
showOverflow: true,
radioConfig: {
reserve: true,
},
proxyConfig: {
ajax: {
query: async () => {
if (!spuId.value) {
return { items: [], total: 0 };
}
try {
const spu = await getSpu(spuId.value);
return {
items: spu.skus || [],
total: spu.skus?.length || 0,
};
} catch (error) {
message.error('加载 SKU 数据失败');
console.error(error);
return { items: [], total: 0 };
}
const spu = await getSpu(spuId.value);
return {
items: spu.skus || [],
total: spu.skus?.length || 0,
};
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
/** 处理选中 */
function handleSelected(row: MallSpuApi.Sku) {
emit('change', row);
modalApi.close();
selectedSkuId.value = undefined;
function handleRadioChange() {
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
onOpenChange: async (isOpen: boolean) => {
if (!isOpen) {
selectedSkuId.value = undefined;
gridApi.grid.clearRadioRow();
spuId.value = undefined;
return;
}
const data = modalApi.getData<SpuData>();
// TODO @puhui999：这里要不 if return，让括号的层级简单点。
if (data?.spuId) {
spuId.value = data.spuId;
// 触发数据查询
await gridApi.query();
if (!data?.spuId) {
return;
}
spuId.value = data.spuId;
await gridApi.query();
},
});
</script>
<template>
<Modal class="w-[700px]" title="选择规格">
<Grid>
<template #radio-column="{ row }">
<Input
v-model="selectedSkuId"
:value="row.id"
class="cursor-pointer"
type="radio"
@change="handleSelected(row)"
/>
</template>
</Grid>
<Grid />
</Modal>
</template>

141
apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue Normal file
View File

@@ -0,0 +1,141 @@
<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import { computed, ref, watch } from 'vue';
import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
import { Image, Tooltip } from 'ant-design-vue';
import { getSpuDetailList } from '#/api/mall/product/spu';
import SpuTableSelect from './spu-table-select.vue';
interface SpuShowcaseProps {
modelValue?: number | number[];
limit?: number;
disabled?: boolean;
}
const props = withDefaults(defineProps<SpuShowcaseProps>(), {
modelValue: undefined,
limit: Number.MAX_VALUE,
disabled: false,
});
const emit = defineEmits(['update:modelValue', 'change']);
const productSpus = ref<MallSpuApi.Spu[]>([]); // 已选择的商品列表
const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>(); // 商品选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
const canAdd = computed(() => {
if (props.disabled) {
return false;
}
if (!props.limit) {
return true;
}
return productSpus.value.length < props.limit;
});
/** 监听 modelValue 变化，加载商品详情 */
watch(
() => props.modelValue,
async (newValue) => {
// eslint-disable-next-line unicorn/no-nested-ternary
const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
if (ids.length === 0) {
productSpus.value = [];
return;
}
// 只有商品发生变化时才重新查询
if (
productSpus.value.length === 0 ||
productSpus.value.some((spu) => !ids.includes(spu.id!))
) {
productSpus.value = await getSpuDetailList(ids);
}
},
{ immediate: true },
);
/** 打开商品选择对话框 */
function handleOpenSpuSelect() {
spuTableSelectRef.value?.open(productSpus.value);
}
/** 选择商品后触发 */
function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
productSpus.value = Array.isArray(spus) ? spus : [spus];
emitSpuChange();
}
/** 删除商品 */
function handleRemoveSpu(index: number) {
productSpus.value.splice(index, 1);
emitSpuChange();
}
/** 触发变更事件 */
function emitSpuChange() {
if (props.limit === 1) {
const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
emit('update:modelValue', spu?.id || 0);
emit('change', spu);
} else {
emit(
'update:modelValue',
productSpus.value.map((spu) => spu.id!),
);
emit('change', productSpus.value);
}
}
</script>
<template>
<div class="flex flex-wrap items-center gap-2">
<!-- 已选商品列表 -->
<div
v-for="(spu, index) in productSpus"
:key="spu.id"
class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
>
<Tooltip :title="spu.name">
<div class="relative h-full w-full">
<Image
:src="spu.picUrl"
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
<CloseCircleFilled
v-if="!disabled"
class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
@click="handleRemoveSpu(index)"
/>
</div>
</Tooltip>
</div>
<!-- 添加商品按钮 -->
<Tooltip v-if="canAdd" title="选择商品">
<div
class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
@click="handleOpenSpuSelect"
>
<!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
<PlusOutlined class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>
<!-- 商品选择对话框 -->
<SpuTableSelect
ref="spuTableSelectRef"
:multiple="isMultiple"
@change="handleSpuSelected"
/>
</template>

225
apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue Normal file
View File

@@ -0,0 +1,225 @@
<!-- SPU 商品选择弹窗组件 -->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallCategoryApi } from '#/api/mall/product/category';
import type { MallSpuApi } from '#/api/mall/product/spu';
import { computed, onMounted, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCategoryList } from '#/api/mall/product/category';
import { getSpuPage } from '#/api/mall/product/spu';
import { getRangePickerDefaultProps } from '#/utils';
interface SpuTableSelectProps {
multiple?: boolean; // 是否单选：true - checkbox；false - radio
}
const props = withDefaults(defineProps<SpuTableSelectProps>(), {
multiple: false,
});
const emit = defineEmits<{
change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
}>();
const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
const categoryTreeList = ref<any[]>([]); // 分类树
/** 单选：处理选中变化 */
function handleRadioChange() {
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
/** 搜索表单 Schema */
const formSchema = computed<VbenFormSchema[]>(() => [
{
fieldName: 'name',
label: '商品名称',
component: 'Input',
componentProps: {
placeholder: '请输入商品名称',
allowClear: true,
},
},
{
fieldName: 'categoryId',
label: '商品分类',
component: 'TreeSelect',
// TODO @芋艿：可能要测试下；
componentProps: {
treeData: categoryTreeList,
fieldNames: {
label: 'name',
value: 'id',
},
treeCheckStrictly: true,
placeholder: '请选择商品分类',
allowClear: true,
showSearch: true,
treeNodeFilterProp: 'name',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
]);
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
if (props.multiple) {
columns.push({ type: 'checkbox', width: 55 });
} else {
columns.push({ type: 'radio', width: 55 });
}
columns.push(
{
field: 'id',
title: '商品编号',
minWidth: 100,
align: 'center',
},
{
field: 'picUrl',
title: '商品图',
width: 100,
align: 'center',
cellRender: {
name: 'CellImage',
},
},
{
field: 'name',
title: '商品名称',
minWidth: 200,
},
{
field: 'categoryId',
title: '商品分类',
minWidth: 120,
formatter: ({ cellValue }) => {
const category = categoryList.value?.find((c) => c.id === cellValue);
return category?.name || '-';
},
},
);
return columns;
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
checkboxConfig: {
reserve: true,
},
radioConfig: {
reserve: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
return await getSpuPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
tabType: 0,
...formValues,
});
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
onConfirm: () => {
const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
emit('change', selectedRows);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
await gridApi.grid.clearCheckboxRow();
await gridApi.grid.clearRadioRow();
return;
}
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((spu) => {
const row = tableData.find(
(item: MallSpuApi.Spu) => item.id === spu.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallSpuApi.Spu) => item.id === data.id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}
},
});
/** 对外暴露的方法 */
defineExpose({
open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
modalApi.setData(data).open();
},
});
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script>
<template>
<Modal title="选择商品" class="w-[950px]">
<Grid />
</Modal>
</template>

5
apps/web-antd/src/views/mall/product/spu/form/index.vue
View File

@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
const [SkuForm, skuFormApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
<template #singleSkuList>
<SkuList
ref="skuListRef"
class="w-full"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"

218
apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
View File

@@ -7,7 +7,12 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
import { ref, watch } from 'vue';
import { copyValueToTarget, formatToFraction, isEmpty } from '@vben/utils';
import {
copyValueToTarget,
formatToFraction,
getNestedValue,
isEmpty,
} from '@vben/utils';
import { Button, Image, Input, InputNumber, message } from 'ant-design-vue';
@@ -43,9 +48,12 @@ const emit = defineEmits<{
const { isBatch, isDetail, isComponent, isActivityComponent } = props;
const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
const skuList = ref<MallSpuApi.Sku[]>([
{
const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>();
const tableHeaders = ref<{ label: string; prop: string }[]>([]);
/** 创建空 SKU 数据 */
function createEmptySku(): MallSpuApi.Sku {
return {
price: 0,
marketPrice: 0,
costPrice: 0,
@@ -56,8 +64,10 @@ const skuList = ref<MallSpuApi.Sku[]>([
volume: 0,
firstBrokeragePrice: 0,
secondBrokeragePrice: 0,
},
]); // 批量添加时的临时数据
};
}
const skuList = ref<MallSpuApi.Sku[]>([createEmptySku()]);
/** 批量添加 */
function batchAdd() {
@@ -79,34 +89,33 @@ function validateProperty() {
}
}
/** 删除 sku */
/** 删除 SKU */
function deleteSku(row: MallSpuApi.Sku) {
const index = formData.value!.skus!.findIndex(
// 直接把列表转成字符串比较
(sku: MallSpuApi.Sku) =>
JSON.stringify(sku.properties) === JSON.stringify(row.properties),
);
formData.value!.skus!.splice(index, 1);
if (index !== -1) {
formData.value!.skus!.splice(index, 1);
}
}
const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
/** 校验 SKU 数据：保存时，每个商品规格的表单要校验。例如：销售金额最低是 0.01 */
function validateSku() {
validateProperty();
let warningInfo = '请检查商品各行相关属性配置，';
let validate = true; // 默认通过
let validate = true;
for (const sku of formData.value!.skus!) {
// 作为活动组件的校验
for (const rule of props?.ruleConfig as RuleConfig[]) {
const arg = getValue(sku, rule.name);
if (!rule.rule(arg)) {
validate = false; // 只要有一个不通过则直接不通过
const value = getNestedValue(sku, rule.name);
if (!rule.rule(value)) {
validate = false;
warningInfo += rule.message;
break;
}
}
// 只要有一个不通过则结束后续的校验
if (!validate) {
message.warning(warningInfo);
throw new Error(warningInfo);
@@ -114,21 +123,6 @@ function validateSku() {
}
}
// TODO @puhui999：是不是可以通过 getNestedValue 简化？
function getValue(obj: any, arg: string): unknown {
const keys = arg.split('.');
let value: any = obj;
for (const key of keys) {
if (value && typeof value === 'object' && key in value) {
value = value[key];
} else {
value = undefined;
break;
}
}
return value;
}
/**
* 选择时触发
*
@@ -155,7 +149,6 @@ watch(
/** 生成表数据 */
function generateTableData(propertyList: PropertyAndValues[]) {
// 构建数据结构
const propertyValues = propertyList.map((item: PropertyAndValues) =>
(item.values || []).map((v: { id: number; name: string }) => ({
propertyId: item.id,
@@ -164,35 +157,30 @@ function generateTableData(propertyList: PropertyAndValues[]) {
valueName: v.name,
})),
);
const buildSkuList = build(propertyValues);
// 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
if (!validateData(propertyList)) {
// 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
formData.value!.skus = [];
}
for (const item of buildSkuList) {
const properties = Array.isArray(item) ? item : [item];
const row = {
properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
price: 0,
marketPrice: 0,
costPrice: 0,
barCode: '',
picUrl: '',
stock: 0,
weight: 0,
volume: 0,
firstBrokeragePrice: 0,
secondBrokeragePrice: 0,
...createEmptySku(),
properties,
};
// 如果存在属性相同的 sku 则不做处理
const index = formData.value!.skus!.findIndex(
const exists = formData.value!.skus!.some(
(sku: MallSpuApi.Sku) =>
JSON.stringify(sku.properties) === JSON.stringify(row.properties),
);
if (index !== -1) {
continue;
if (!exists) {
formData.value!.skus!.push(row);
}
formData.value!.skus!.push(row);
}
}
@@ -224,7 +212,9 @@ function build(
const result: MallSpuApi.Property[][] = [];
const rest = build(propertyValuesList.slice(1));
const firstList = propertyValuesList[0];
if (!firstList) return [];
if (!firstList) {
return [];
}
for (const element of firstList) {
for (const element_ of rest) {
@@ -248,43 +238,33 @@ watch(
if (!formData.value!.specType) {
return;
}
// 如果当前组件作为批量添加数据使用，则重置表数据
if (props.isBatch) {
skuList.value = [
{
price: 0,
marketPrice: 0,
costPrice: 0,
barCode: '',
picUrl: '',
stock: 0,
weight: 0,
volume: 0,
firstBrokeragePrice: 0,
secondBrokeragePrice: 0,
},
];
skuList.value = [createEmptySku()];
}
// 判断代理对象是否为空
if (JSON.stringify(propertyList) === '[]') {
return;
}
// 重置表头
tableHeaders.value = [];
// 生成表头
propertyList.forEach((item, index) => {
// name加属性项index区分属性值
tableHeaders.value.push({ prop: `name${index}`, label: item.name });
});
// 重置并生成表头
tableHeaders.value = propertyList.map((item, index) => ({
prop: `name${index}`,
label: item.name,
}));
// 如果回显的 sku 属性和添加的属性一致则不处理
if (validateData(propertyList)) {
return;
}
// 添加新属性没有属性值也不做处理
if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
return;
}
// 生成 table 数据，即 sku 列表
generateTableData(propertyList);
},
@@ -296,26 +276,35 @@ watch(
const activitySkuListRef = ref();
/** 获取 SKU 表格引用 */
function getSkuTableRef() {
return activitySkuListRef.value;
}
defineExpose({ generateTableData, validateSku, getSkuTableRef });
defineExpose({
generateTableData,
validateSku,
getSkuTableRef,
});
</script>
<template>
<div>
<div class="w-full">
<!-- 情况一：添加/修改 -->
<!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
<VxeTable
v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData?.skus || []"
border
max-height="500"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
size="small"
class="w-full"
>
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn align="center" title="图片" width="120" fixed="left">
<template #default="{ row }">
<ImageUpload
v-model:value="row.picUrl"
@@ -332,7 +321,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
:key="index"
:title="item.label"
align="center"
min-width="120"
fixed="left"
min-width="80"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -341,12 +331,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="168">
<VxeColumn align="center" title="商品条码" width="168">
<template #default="{ row }">
<Input v-model:value="row.barCode" class="w-full" />
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价" min-width="168">
<VxeColumn align="center" title="销售价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.price"
@@ -357,7 +347,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价" min-width="168">
<VxeColumn align="center" title="市场价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.marketPrice"
@@ -368,7 +358,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价" min-width="168">
<VxeColumn align="center" title="成本价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.costPrice"
@@ -379,12 +369,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="168">
<VxeColumn align="center" title="库存" width="168">
<template #default="{ row }">
<InputNumber v-model:value="row.stock" :min="0" class="w-full" />
</template>
</VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="168">
<VxeColumn align="center" title="重量(kg)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.weight"
@@ -395,7 +385,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="168">
<VxeColumn align="center" title="体积(m^3)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.volume"
@@ -407,7 +397,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
<template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="168">
<VxeColumn align="center" title="一级返佣(元)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.firstBrokeragePrice"
@@ -418,7 +408,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="168">
<VxeColumn align="center" title="二级返佣(元)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.secondBrokeragePrice"
@@ -462,13 +452,18 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
border
max-height="500"
size="small"
class="w-full"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
:checkbox-config="isComponent ? { reserve: true } : undefined"
@checkbox-change="handleSelectionChange"
@checkbox-all="handleSelectionChange"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" />
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }">
<Image
v-if="row.picUrl"
@@ -485,7 +480,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
:key="index"
:title="item.label"
align="center"
min-width="80"
max-width="80"
fixed="left"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -494,48 +490,48 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="100">
<VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }">
{{ row.barCode }}
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80">
<VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }">
{{ row.price }}
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80">
<VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }">
{{ row.marketPrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80">
<VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }">
{{ row.costPrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="80">
<VxeColumn align="center" title="库存" width="80">
<template #default="{ row }">
{{ row.stock }}
</template>
</VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="80">
<VxeColumn align="center" title="重量(kg)" width="80">
<template #default="{ row }">
{{ row.weight }}
</template>
</VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="80">
<VxeColumn align="center" title="体积(m^3)" width="80">
<template #default="{ row }">
{{ row.volume }}
</template>
</VxeColumn>
<template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="80">
<VxeColumn align="center" title="一级返佣(元)" width="80">
<template #default="{ row }">
{{ row.firstBrokeragePrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="80">
<VxeColumn align="center" title="二级返佣(元)" width="80">
<template #default="{ row }">
{{ row.secondBrokeragePrice }}
</template>
@@ -550,10 +546,15 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
border
max-height="500"
size="small"
class="w-full"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" />
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }">
<Image
:src="row.picUrl"
@@ -569,7 +570,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
:key="index"
:title="item.label"
align="center"
min-width="80"
width="80"
fixed="left"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -578,27 +580,27 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="100">
<VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }">
{{ row.barCode }}
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80">
<VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.price) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80">
<VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.marketPrice) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80">
<VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.costPrice) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="80">
<VxeColumn align="center" title="库存" width="80">
<template #default="{ row }">
{{ row.stock }}
</template>

346
apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
View File

@@ -1,346 +0,0 @@
<!-- SPU 商品选择弹窗组件 -->
<script lang="ts" setup>
// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallSpuApi } from '#/api/mall/product/spu';
import { computed, onMounted, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { Checkbox, Radio } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCategoryList } from '#/api/mall/product/category';
import { getSpuPage } from '#/api/mall/product/spu';
import { getRangePickerDefaultProps } from '#/utils';
interface SpuTableSelectProps {
multiple?: boolean; // 是否多选模式
}
const props = withDefaults(defineProps<SpuTableSelectProps>(), {
multiple: false,
});
const emit = defineEmits<{
change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
}>();
const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
const isCheckAll = ref(false); // 多选：全选状态
const isIndeterminate = ref(false); // 多选：半选状态
const categoryList = ref<any[]>([]); // 分类列表（扁平）
const categoryTreeList = ref<any[]>([]); // 分类树
const formSchema = computed<VbenFormSchema[]>(() => {
return [
{
fieldName: 'name',
label: '商品名称',
component: 'Input',
componentProps: {
placeholder: '请输入商品名称',
allowClear: true,
},
},
{
fieldName: 'categoryId',
label: '商品分类',
component: 'TreeSelect',
componentProps: {
treeData: categoryTreeList.value,
fieldNames: {
label: 'name',
value: 'id',
},
treeCheckStrictly: true,
placeholder: '请选择商品分类',
allowClear: true,
showSearch: true,
treeNodeFilterProp: 'name',
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
});
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
// 多选模式：添加多选列
if (props.multiple) {
columns.push({
field: 'checkbox',
title: '',
width: 55,
align: 'center',
slots: { default: 'checkbox-column', header: 'checkbox-header' },
});
} else {
// 单选模式：添加单选列
columns.push({
field: 'radio',
title: '#',
width: 55,
align: 'center',
slots: { default: 'radio-column' },
});
}
// 其它列
columns.push(
{
field: 'id',
title: '商品编号',
minWidth: 100,
align: 'center',
},
{
field: 'picUrl',
title: '商品图',
width: 100,
align: 'center',
cellRender: {
name: 'CellImage',
},
},
{
field: 'name',
title: '商品名称',
minWidth: 200,
},
{
field: 'categoryId',
title: '商品分类',
minWidth: 120,
formatter: ({ cellValue }) => {
const category = categoryList.value?.find((c) => c.id === cellValue);
return category?.name || '-';
},
},
);
return columns;
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
showOverflow: true,
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
// TODO @puhui999：这里是不是不 try catch？
try {
const params = {
pageNo: page.currentPage,
pageSize: page.pageSize,
tabType: 0, // 默认获取上架的商品
name: formValues.name || undefined,
categoryId: formValues.categoryId || undefined,
createTime: formValues.createTime || undefined,
};
// TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
const data = await getSpuPage(params);
// 初始化多选状态
if (props.multiple && data.list) {
data.list.forEach((spu) => {
if (checkedStatus.value[spu.id!] === undefined) {
checkedStatus.value[spu.id!] = false;
}
});
calculateIsCheckAll();
}
return {
items: data.list || [],
total: data.total || 0,
};
} catch (error) {
console.error('加载商品数据失败:', error);
return { items: [], total: 0 };
}
},
},
},
},
});
// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
/** 单选：处理选中 */
function handleSingleSelected(row: MallSpuApi.Spu) {
selectedSpuId.value = row.id;
emit('change', row);
modalApi.close();
}
/** 多选：全选/全不选 */
function handleCheckAll(e: CheckboxChangeEvent) {
const checked = e.target.checked;
isCheckAll.value = checked;
isIndeterminate.value = false;
const currentList = gridApi.grid.getData();
currentList.forEach((spu: MallSpuApi.Spu) => {
handleCheckOne(checked, spu, false);
});
calculateIsCheckAll();
}
/** 多选：选中单个 */
function handleCheckOne(
checked: boolean,
spu: MallSpuApi.Spu,
needCalc = true,
) {
if (checked) {
// 避免重复添加
const exists = checkedSpus.value.some((item) => item.id === spu.id);
if (!exists) {
checkedSpus.value.push(spu);
}
checkedStatus.value[spu.id!] = true;
} else {
const index = checkedSpus.value.findIndex((item) => item.id === spu.id);
if (index !== -1) {
checkedSpus.value.splice(index, 1);
}
checkedStatus.value[spu.id!] = false;
isCheckAll.value = false;
}
if (needCalc) {
calculateIsCheckAll();
}
}
/** 多选：计算全选状态 */
function calculateIsCheckAll() {
const currentList = gridApi.grid.getData();
if (currentList.length === 0) {
isCheckAll.value = false;
isIndeterminate.value = false;
return;
}
const checkedCount = currentList.filter(
(spu: MallSpuApi.Spu) => checkedStatus.value[spu.id!],
).length;
isCheckAll.value = checkedCount === currentList.length;
isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
}
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
// 多选模式时显示确认按钮
onConfirm: props.multiple
? () => {
emit('change', [...checkedSpus.value]);
modalApi.close();
}
: undefined,
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
if (!props.multiple) {
selectedSpuId.value = undefined;
}
return;
}
// 打开时处理初始数据
const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
// 重置多选状态
if (props.multiple) {
checkedSpus.value = [];
checkedStatus.value = {};
isCheckAll.value = false;
isIndeterminate.value = false;
// 恢复已选中的数据
if (Array.isArray(data) && data.length > 0) {
checkedSpus.value = [...data];
checkedStatus.value = Object.fromEntries(
data.map((spu) => [spu.id!, true]),
);
}
} else {
// 单选模式：恢复已选中的 ID
if (data && !Array.isArray(data)) {
selectedSpuId.value = data.id;
}
}
// 触发查询
// TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
await gridApi.query();
},
});
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script>
<template>
<Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
<Grid>
<!-- 单选列 -->
<template v-if="!props.multiple" #radio-column="{ row }">
<Radio
:checked="selectedSpuId === row.id"
:value="row.id"
class="cursor-pointer"
@click="handleSingleSelected(row)"
/>
</template>
<!-- 多选表头 -->
<template v-if="props.multiple" #checkbox-header>
<Checkbox
v-model:checked="isCheckAll"
:indeterminate="isIndeterminate"
class="cursor-pointer"
@change="handleCheckAll"
/>
</template>
<!-- 多选列 -->
<template v-if="props.multiple" #checkbox-column="{ row }">
<Checkbox
v-model:checked="checkedStatus[row.id]"
class="cursor-pointer"
@change="(e) => handleCheckOne(e.target.checked, row)"
/>
</template>
</Grid>
</Modal>
</template>

87
apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
View File

@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
type: undefined,
}); // 详情选择对话框
/** 打开弹窗 */
const dialogVisible = ref(false);
const open = (link: string) => {
defineExpose({ open });
/** 打开弹窗 */
async function open(link: string) {
activeAppLink.value.path = link;
dialogVisible.value = true;
// 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
);
if (group) {
// 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
nextTick(() => handleGroupSelected(group.name));
await nextTick();
handleGroupSelected(group.name);
}
};
defineExpose({ open });
}
/** 处理 APP 链接选中 */
const handleAppLinkSelected = (appLink: AppLink) => {
function handleAppLinkSelected(appLink: AppLink) {
if (!isSameLink(appLink.path, activeAppLink.value.path)) {
activeAppLink.value = appLink;
}
switch (appLink.type) {
case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
detailSelectDialog.value.visible = true;
detailSelectDialog.value.type = appLink.type;
// 返显
detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
'id',
`http://127.0.0.1${activeAppLink.value.path}`,
) || undefined;
detailSelectDialog.value.visible = true;
break;
}
default: {
break;
}
}
};
}
/** 处理确认提交 */
function handleSubmit() {
dialogVisible.value = false;
emit('change', activeAppLink.value.path);
emit('appLinkChange', activeAppLink.value);
dialogVisible.value = false;
}
/**
* 处理右侧链接列表滚动
*
* @param {object} param0 滚动事件参数
* @param {number} param0.scrollTop 滚动条的位置
*/
function handleScroll({ scrollTop }: { scrollTop: number }) {
function handleScroll(event: Event) {
const scrollTop = (event.target as HTMLDivElement).scrollTop;
const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
// 获取标题的位置信息
const { offsetHeight, offsetTop } = titleEl;
@@ -137,47 +143,59 @@ function isSameLink(link1: string, link2: string) {
/** 处理详情选择 */
function handleProductCategorySelected(id: number) {
// TODO @AI：这里有点问题；activeAppLink 地址；
// 生成 activeAppLink
const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
// 修改 id 参数
url.searchParams.set('id', `${id}`);
// 排除域名
activeAppLink.value.path = `${url.pathname}${url.search}`;
// 关闭对话框
// 关闭对话框，并重置 id
detailSelectDialog.value.visible = false;
// 重置 id
detailSelectDialog.value.id = undefined;
}
</script>
<template>
<Modal v-model:open="dialogVisible" title="选择链接" width="65%">
<Modal
v-model:open="dialogVisible"
title="选择链接"
width="65%"
@ok="handleSubmit"
>
<div class="flex h-[500px] gap-2">
<!-- 左侧分组列表 -->
<div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
<Button
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="mb-1 ml-0 mr-4 w-[90px] justify-start"
:class="[{ active: activeGroup === group.name }]"
ref="groupBtnRefs"
:type="activeGroup === group.name ? 'primary' : 'default'"
@click="handleGroupSelected(group.name)"
<div class="flex flex-col">
<!-- 左侧分组列表 -->
<div
class="h-full overflow-y-auto border-r border-gray-200 pr-2"
ref="groupScrollbar"
>
{{ group.name }}
</Button>
<Button
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="!ml-0 mb-1 mr-4 !justify-start"
:class="[{ active: activeGroup === group.name }]"
ref="groupBtnRefs"
:type="activeGroup === group.name ? 'primary' : 'default'"
:ghost="activeGroup !== group.name"
@click="handleGroupSelected(group.name)"
>
{{ group.name }}
</Button>
</div>
</div>
<!-- 右侧链接列表 -->
<div
class="h-full flex-1 overflow-y-auto"
class="h-full flex-1 overflow-y-auto pl-2"
@scroll="handleScroll"
ref="linkScrollbar"
>
<div
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
>
<!-- 分组标题 -->
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
<div class="mb-2 font-bold" ref="groupTitleRefs">
{{ group.name }}
</div>
<!-- 链接列表 -->
<Tooltip
v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +219,9 @@ function handleProductCategorySelected(id: number) {
</div>
</div>
</div>
<!-- 底部对话框操作按钮 -->
<template #footer>
<Button type="primary" @click="handleSubmit">确 定</Button>
<Button @click="dialogVisible = false">取 消</Button>
</template>
</Modal>
<Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
<Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
<Form class="min-h-[200px]">
<FormItem
label="选择分类"
@@ -224,6 +238,7 @@ function handleProductCategorySelected(id: number) {
</Form>
</Modal>
</template>
<style lang="scss" scoped>
:deep(.ant-btn + .ant-btn) {
margin-left: 0 !important;

37
apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
View File

@@ -1,14 +1,14 @@
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Button, Input, InputGroup } from 'ant-design-vue';
import { Button, Input } from 'ant-design-vue';
import AppLinkSelectDialog from './app-link-select-dialog.vue';
/** APP 链接输入框 */
defineOptions({ name: 'AppLinkInput' });
// 定义属性
/** 定义属性 */
const props = defineProps({
modelValue: {
type: String,
@@ -23,8 +23,16 @@ const emit = defineEmits<{
const dialogRef = ref(); // 选择对话框
const appLink = ref(''); // 当前的链接
const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
/** 处理打开对话框 */
function handleOpenDialog() {
return dialogRef.value?.open(appLink.value);
}
/** 处理 APP 链接选中 */
function handleLinkSelected(link: string) {
appLink.value = link;
}
watch(
() => props.modelValue,
@@ -38,14 +46,19 @@ watch(
);
</script>
<template>
<InputGroup compact>
<Input
v-model:value="appLink"
placeholder="输入或选择链接"
class="flex-1"
/>
<Button @click="handleOpenDialog">选择</Button>
</InputGroup>
<Input v-model:value="appLink" placeholder="输入或选择链接">
<template #addonAfter>
<Button @click="handleOpenDialog" class="!border-none">选择</Button>
</template>
</Input>
<AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
</template>
<style scoped lang="scss">
:deep(.ant-input-group-addon) {
padding: 0;
background: transparent;
border: 0;
}
</style>

31
apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
View File

@@ -1,9 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
// import { PREDEFINE_COLORS } from '@vben/constants';
import { Input, InputGroup } from 'ant-design-vue';
import { Input } from 'ant-design-vue';
/** 颜色输入框 */
defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
</script>
<template>
<InputGroup compact>
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
<Input v-model:value="color" class="flex-1" />
</InputGroup>
<div class="flex gap-2">
<input
v-model="color"
type="color"
class="h-8 w-12 cursor-pointer rounded border border-gray-300"
/>
<Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
input[type='color'] {
&::-webkit-color-swatch-wrapper {
padding: 2px;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
}
</style>

36
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
View File

@@ -131,13 +131,9 @@ const handleSliderChange = (prop: string) => {
</TabPane>
<!-- 每个组件的通用内容 -->
<TabPane tab="样式" key="style">
<TabPane tab="样式" key="style" force-render>
<Card title="组件样式" class="property-group">
<Form
:model="formData"
label-col="{ span: 6 }"
wrapper-col="{ span: 18 }"
>
<Form :model="formData">
<FormItem label="组件背景" name="bgType">
<RadioGroup v-model:value="formData.bgType">
<Radio value="color">纯色</Radio>
@@ -160,24 +156,22 @@ const handleSliderChange = (prop: string) => {
<template #tip>建议宽度 750px</template>
</UploadImg>
</FormItem>
<Tree
:tree-data="treeData"
:expand-on-click-node="false"
default-expand-all
>
<template #title="{ data, node }">
<Tree :tree-data="treeData" default-expand-all>
<template #title="{ dataRef }">
<FormItem
:label="data.label"
:name="data.prop"
:label="dataRef.label"
:name="dataRef.prop"
:label-col="dataRef.children ? { span: 6 } : { span: 5, offset: 1 }"
:wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
class="mb-0 w-full"
>
<Slider
v-model:value="
formData[data.prop as keyof ComponentStyle] as number
formData[dataRef.prop as keyof ComponentStyle] as number
"
:max="100"
:min="0"
@change="handleSliderChange(data.prop)"
@change="handleSliderChange(dataRef.prop)"
/>
</FormItem>
</template>
@@ -197,4 +191,14 @@ const handleSliderChange = (prop: string) => {
:deep(.ant-input-number) {
width: 50px;
}
:deep(.ant-tree) {
.ant-tree-node-content-wrapper {
flex: 1;
}
.ant-form-item {
margin-bottom: 0;
}
}
</style>

40
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -49,9 +49,7 @@ const emits = defineEmits<{
type DiyComponentWithStyle = DiyComponent<any> & {
property: { style?: ComponentStyle };
};
/**
* 组件样式
*/
/** 组件样式 */
const style = computed(() => {
const componentStyle = props.component.property.style;
if (!componentStyle) {
@@ -78,38 +76,27 @@ const style = computed(() => {
};
});
/**
* 移动组件
* @param direction 移动方向
*/
/** 移动组件 */
const handleMoveComponent = (direction: number) => {
emits('move', direction);
};
/**
* 复制组件
*/
/** 复制组件 */
const handleCopyComponent = () => {
emits('copy');
};
/**
* 删除组件
*/
/** 删除组件 */
const handleDeleteComponent = () => {
emits('delete');
};
</script>
<template>
<div class="component" :class="[{ active }]">
<div
:style="{
...style,
}"
>
<div class="component relative cursor-move" :class="[{ active }]">
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap">
<div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -158,19 +145,8 @@ $hover-border-width: 1px;
$name-position: -85px;
$toolbar-position: -55px;
/* 组件 */
.component {
position: relative;
cursor: move;
.component-wrap {
position: absolute;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--ant-color-primary);
@@ -236,7 +212,7 @@ $toolbar-position: -55px;
}
}
/* 组件选中时 */
/* 选中状态 */
&.active {
margin-bottom: 4px;

92
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
View File

@@ -14,16 +14,15 @@ import { componentConfigs } from './mobile/index';
/** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
defineOptions({ name: 'ComponentLibrary' });
// 组件列表
/** 组件列表 */
const props = defineProps<{
list: DiyComponentLibrary[];
}>();
// 组件分组
const groups = reactive<any[]>([]);
// 展开的折叠面板
const extendGroups = reactive<string[]>([]);
// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
const groups = reactive<any[]>([]); // 组件分组
const extendGroups = reactive<string[]>([]); // 展开的折叠面板
/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
watch(
() => props.list,
() => {
@@ -53,7 +52,7 @@ watch(
},
);
// 克隆组件
/** 克隆组件 */
const handleCloneComponent = (component: DiyComponent<any>) => {
const instance = cloneDeep(component);
instance.uid = Date.now();
@@ -62,7 +61,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</script>
<template>
<div class="editor-left w-[261px]">
<aside
class="editor-left z-[1] w-[261px] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
>
<div class="h-full overflow-y-auto">
<Collapse v-model:active-key="extendGroups">
<CollapsePanel
@@ -71,7 +72,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:header="group.name"
>
<draggable
class="component-container"
class="flex flex-wrap items-center"
ghost-class="draggable-ghost"
item-key="index"
:list="group.components"
@@ -79,13 +80,22 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:group="{ name: 'component', pull: 'clone', put: false }"
:clone="handleCloneComponent"
:animation="200"
:force-fallback="true"
:force-fallback="false"
>
<template #item="{ element }">
<div>
<div class="drag-placement">组件放置区域</div>
<div class="component">
<IconifyIcon :icon="element.icon" :size="32" />
<div class="hidden text-white">组件放置区域</div>
<div
class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
:style="{
borderColor: 'var(--ant-color-split)',
}"
>
<IconifyIcon
:icon="element.icon"
:size="32"
class="mb-1 text-gray-500"
/>
<span class="mt-1 text-xs">{{ element.name }}</span>
</div>
</div>
@@ -94,16 +104,11 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</CollapsePanel>
</Collapse>
</div>
</div>
</aside>
</template>
<style scoped lang="scss">
.editor-left {
z-index: 1;
flex-shrink: 0;
user-select: none;
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
:deep(.ant-collapse) {
border-top: none;
}
@@ -112,8 +117,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
:deep(.ant-collapse-content) {
padding-bottom: 0;
:deep(.ant-collapse-content-box) {
padding: 0;
}
:deep(.ant-collapse-header) {
@@ -124,50 +129,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
.component-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.component {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
cursor: move;
border-right: 1px solid var(--ant-color-border-secondary);
border-bottom: 1px solid var(--ant-color-border-secondary);
.anticon {
margin-bottom: 4px;
color: gray;
}
}
/* 组件 hover 和 active 状态（需要 CSS 变量）*/
.component.active,
.component:hover {
color: var(--ant-color-white);
background: var(--ant-color-primary);
.anticon {
:deep(.iconify) {
color: var(--ant-color-white);
}
}
.component:nth-of-type(3n) {
border-right: none;
}
}
/* 拖拽占位提示，默认不显示 */
.drag-placement {
display: none;
color: #fff;
}
/* 拖拽区域全局样式 */
.drag-area {
/* 拖拽到手机区域时的样式 */
.draggable-ghost {
@@ -203,14 +177,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
background: #5487df;
}
/* 拖拽时隐藏组件 */
.component {
display: none;
display: none; /* 拖拽时隐藏组件 */
}
/* 拖拽时显示占位提示 */
.drag-placement {
display: block;
.hidden {
display: block !important; /* 拖拽时显示占位提示 */
}
}
}

41
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
View File

@@ -2,32 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 轮播图属性 */
export interface CarouselProperty {
// 类型：默认 | 卡片
type: 'card' | 'default';
// 指示器样式：点 | 数字
indicator: 'dot' | 'number';
// 是否自动播放
autoplay: boolean;
// 播放间隔
interval: number;
// 轮播内容
items: CarouselItemProperty[];
// 组件样式
style: ComponentStyle;
}
// 轮播内容属性
export interface CarouselItemProperty {
// 类型：图片 | 视频
type: 'img' | 'video';
// 图片链接
imgUrl: string;
// 视频链接
videoUrl: string;
// 跳转链接
url: string;
type: 'card' | 'default'; // 类型：默认 | 卡片
indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
autoplay: boolean; // 是否自动播放
interval: number; // 播放间隔
height: number; // 轮播高度
items: CarouselItemProperty[]; // 轮播内容
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 轮播内容属性 */
export interface CarouselItemProperty {
type: 'img' | 'video'; // 类型：图片 | 视频
imgUrl: string; // 图片链接
videoUrl: string; // 视频链接
url: string; // 跳转链接
}
/** 定义组件 */
export const component = {
id: 'Carousel',
name: '轮播图',
@@ -37,6 +29,7 @@ export const component = {
indicator: 'dot',
autoplay: false,
interval: 3,
height: 174,
items: [
{
type: 'img',

17
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
View File

@@ -2,19 +2,14 @@ import type { DiyComponent } from '../../../util';
/** 分割线属性 */
export interface DividerProperty {
// 高度
height: number;
// 线宽
lineWidth: number;
// 边距类型
paddingType: 'horizontal' | 'none';
// 颜色
lineColor: string;
// 类型
borderType: 'dashed' | 'dotted' | 'none' | 'solid';
height: number; // 高度
lineWidth: number; // 线宽
paddingType: 'horizontal' | 'none'; // 边距类型
lineColor: string; // 颜色
borderType: 'dashed' | 'dotted' | 'none' | 'solid'; // 类型
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'Divider',
name: '分割线',

100
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
View File

@@ -1,4 +1,100 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { DividerProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Form,
FormItem,
RadioButton,
RadioGroup,
Slider,
Tooltip,
} from 'ant-design-vue';
import { ColorInput } from '#/views/mall/promotion/components';
/** 导航栏属性面板 */
defineOptions({ name: 'DividerProperty' });
const props = defineProps<{ modelValue: DividerProperty }>();
const emit = defineEmits(['update:modelValue']);
const BORDER_TYPES = [
{
icon: 'vaadin:line-h',
text: '实线',
type: 'solid',
},
{
icon: 'tabler:line-dashed',
text: '虚线',
type: 'dashed',
},
{
icon: 'tabler:line-dotted',
text: '点线',
type: 'dotted',
},
{
icon: 'entypo:progress-empty',
text: '无',
type: 'none',
},
]; // 线类型
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<FormItem label="高度" name="height">
<Slider
v-model:value="formData.height"
:min="1"
:max="100"
/>
</FormItem>
<FormItem label="选择样式" name="borderType">
<RadioGroup v-model:value="formData!.borderType">
<Tooltip
placement="top"
v-for="(item, index) in BORDER_TYPES"
:key="index"
:title="item.text"
>
<RadioButton :value="item.type">
<IconifyIcon :icon="item.icon" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<template v-if="formData.borderType !== 'none'">
<FormItem label="线宽" name="lineWidth">
<Slider
v-model:value="formData.lineWidth"
:min="1"
:max="30"
/>
</FormItem>
<FormItem label="左右边距" name="paddingType">
<RadioGroup v-model:value="formData!.paddingType">
<Tooltip title="无边距" placement="top">
<RadioButton value="none">
<IconifyIcon icon="tabler:box-padding" />
</RadioButton>
</Tooltip>
<Tooltip title="左右留边" placement="top">
<RadioButton value="horizontal">
<IconifyIcon icon="vaadin:padding" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="颜色">
<ColorInput v-model="formData.lineColor" />
</FormItem>
</template>
</Form>
</template>

14
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
View File

@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
/** 弹窗广告属性 */
export interface PopoverProperty {
list: PopoverItemProperty[];
list: PopoverItemProperty[]; // 弹窗列表
}
/** 弹窗广告项目属性 */
export interface PopoverItemProperty {
// 图片地址
imgUrl: string;
// 跳转连接
url: string;
// 显示类型：仅显示一次、每次启动都会显示
showType: 'always' | 'once';
imgUrl: string; // 图片地址
url: string; // 跳转连接
showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'Popover',
name: '弹窗广告',

57
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
View File

@@ -1,4 +1,57 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { PopoverProperty } from './config';
import { useVModel } from '@vueuse/core';
import {
Form,
FormItem,
Radio,
RadioGroup,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
/** 弹窗广告属性面板 */
defineOptions({ name: 'PopoverProperty' });
const props = defineProps<{ modelValue: PopoverProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
<template #default="{ element, index }">
<FormItem label="图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="element.imgUrl"
height="56px"
width="56px"
:show-description="false"
/>
</FormItem>
<FormItem label="跳转链接" :name="`list[${index}].url`">
<AppLinkInput v-model="element.url" />
</FormItem>
<FormItem label="显示次数" :name="`list[${index}].showType`">
<RadioGroup v-model:value="element.showType">
<Tooltip
title="只显示一次，下次打开时不显示"
placement="bottom"
>
<Radio value="once">一次</Radio>
</Tooltip>
<Tooltip title="每次打开时都会显示" placement="bottom">
<Radio value="always">不限</Radio>
</Tooltip>
</RadioGroup>
</FormItem>
</template>
</Draggable>
</Form>
</template>

31
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
View File

@@ -1,29 +1,20 @@
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
/** 优惠劵卡片属性 */
export interface CouponCardProperty {
// 列数
columns: number;
// 背景图
bgImg: string;
// 文字颜色
textColor: string;
// 按钮样式
columns: number; // 列数
bgImg: string; // 背景图
textColor: string; // 文字颜色
button: {
// 背景颜色
bgColor: string;
// 颜色
color: string;
};
// 间距
space: number;
// 优惠券编号列表
couponIds: number[];
// 组件样式
style: ComponentStyle;
bgColor: string; // 背景颜色
color: string; // 文字颜色
}; // 按钮样式
space: number; // 间距
couponIds: number[]; // 优惠券编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'CouponCard',
name: '优惠券',

176
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
View File

@@ -1,4 +1,176 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { CouponCardProperty } from './config';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
CouponTemplateTakeTypeEnum,
PromotionDiscountTypeEnum,
} from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { floatToFixed2 } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Button,
Card,
Form,
FormItem,
RadioButton,
RadioGroup,
Slider,
Tooltip,
Typography,
} from 'ant-design-vue';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
const { Text: ATypographyText } = Typography;
/** 优惠券卡片属性面板 */
defineOptions({ name: 'CouponCardProperty' });
const props = defineProps<{ modelValue: CouponCardProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
connectedComponent: CouponSelect,
destroyOnClose: true,
});
/** 添加优惠劵 */
const handleAddCoupon = () => {
couponSelectModalApi.open();
};
/** 处理优惠劵选择 */
const handleCouponSelect = (
selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
) => {
couponList.value = selectedCoupons;
formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
};
/** 监听优惠券 ID 变化，加载优惠券列表 */
watch(
() => formData.value.couponIds,
async () => {
if (formData.value.couponIds?.length > 0) {
couponList.value = await CouponTemplateApi.getCouponTemplateList(
formData.value.couponIds,
);
}
},
{
immediate: true,
deep: true,
},
);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="优惠券列表" class="property-group">
<div
v-for="(coupon, index) in couponList"
:key="index"
class="flex items-center justify-between"
>
<ATypographyText ellipsis class="text-base">{{ coupon.name }}</ATypographyText>
<ATypographyText type="secondary" ellipsis>
<span v-if="coupon.usePrice > 0">
满{{ floatToFixed2(coupon.usePrice) }}元，
</span>
<span
v-if="
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
"
>
减{{ floatToFixed2(coupon.discountPrice) }}元
</span>
<span v-else> 打{{ coupon.discountPercent }}折 </span>
</ATypographyText>
</div>
<FormItem>
<Button
@click="handleAddCoupon"
type="primary"
ghost
class="mt-2 w-full"
>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加
</Button>
</FormItem>
</Card>
<Card title="优惠券样式" class="property-group">
<FormItem label="列数" name="type">
<RadioGroup v-model:value="formData.columns">
<Tooltip title="一列" placement="bottom">
<RadioButton :value="1">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="二列" placement="bottom">
<RadioButton :value="2">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="三列" placement="bottom">
<RadioButton :value="3">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="背景图片" name="bgImg">
<UploadImg
v-model="formData.bgImg"
height="80px"
width="100%"
class="min-w-[160px]"
:show-description="false"
/>
</FormItem>
<FormItem label="文字颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
<FormItem label="按钮背景" name="button.bgColor">
<ColorInput v-model="formData.button.bgColor" />
</FormItem>
<FormItem label="按钮文字" name="button.color">
<ColorInput v-model="formData.button.color" />
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
<!-- 优惠券选择 -->
<CouponSelectModal
:take-type="CouponTemplateTakeTypeEnum.USER.type"
@success="handleCouponSelect"
/>
</template>

27
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
View File

@@ -1,28 +1,21 @@
import type { DiyComponent } from '../../../util';
// 悬浮按钮属性
/** 悬浮按钮属性 */
export interface FloatingActionButtonProperty {
// 展开方向
direction: 'horizontal' | 'vertical';
// 是否显示文字
showText: boolean;
// 按钮列表
list: FloatingActionButtonItemProperty[];
direction: 'horizontal' | 'vertical'; // 展开方向
showText: boolean; // 是否显示文字
list: FloatingActionButtonItemProperty[]; // 按钮列表
}
// 悬浮按钮项属性
/** 悬浮按钮项属性 */
export interface FloatingActionButtonItemProperty {
// 图片地址
imgUrl: string;
// 跳转连接
url: string;
// 文字
text: string;
// 文字颜色
textColor: string;
imgUrl: string; // 图片地址
url: string; // 跳转连接
text: string; // 文字
textColor: string; // 文字颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'FloatingActionButton',
name: '悬浮按钮',

68
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
View File

@@ -1,4 +1,68 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { FloatingActionButtonProperty } from './config';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioGroup,
Switch,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
/** 悬浮按钮属性面板 */
defineOptions({ name: 'FloatingActionButtonProperty' });
const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<Card title="按钮配置" class="property-group">
<FormItem label="展开方向" name="direction">
<RadioGroup v-model:value="formData.direction">
<Radio value="vertical">垂直</Radio>
<Radio value="horizontal">水平</Radio>
</RadioGroup>
</FormItem>
<FormItem label="显示文字" name="showText">
<Switch v-model:checked="formData.showText" />
</FormItem>
</Card>
<Card title="按钮列表" class="property-group">
<Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
<template #default="{ element, index }">
<FormItem label="图标" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="element.imgUrl"
height="56px"
width="56px"
:show-description="false"
/>
</FormItem>
<FormItem label="文字" :name="`list[${index}].text`">
<InputWithColor
v-model="element.text"
v-model:color="element.textColor"
/>
</FormItem>
<FormItem label="跳转链接" :name="`list[${index}].url`">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Card>
</Form>
</template>

245
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

@@ -1,4 +1,245 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { HotZoneItemProperty } from '../../config';
import type { ControlDot } from './controller';
import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button, Image } from 'ant-design-vue';
import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
import {
CONTROL_DOT_LIST,
CONTROL_TYPE_ENUM,
HOT_ZONE_MIN_SIZE,
useDraggable,
zoomIn,
zoomOut,
} from './controller';
/** 热区编辑对话框 */
defineOptions({ name: 'HotZoneEditDialog' });
/** 定义属性 */
const props = defineProps({
modelValue: {
type: Array<HotZoneItemProperty>,
default: () => [],
},
imgUrl: {
type: String,
default: '',
},
});
const emit = defineEmits(['update:modelValue']);
const formData = ref<HotZoneItemProperty[]>([]);
const [Modal, modalApi] = useVbenModal({
showCancelButton: false,
onConfirm() {
const list = zoomOut(formData.value);
emit('update:modelValue', list);
modalApi.close();
},
});
/** 打开弹窗 */
function open() {
// 放大
formData.value = zoomIn(props.modelValue);
modalApi.open();
}
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
const container = ref<HTMLDivElement>(); // 热区容器
/** 增加热区 */
function handleAdd() {
formData.value.push({
width: HOT_ZONE_MIN_SIZE,
height: HOT_ZONE_MIN_SIZE,
top: 0,
left: 0,
} as HotZoneItemProperty);
}
/** 删除热区 */
function handleRemove(hotZone: HotZoneItemProperty) {
formData.value = formData.value.filter((item) => item !== hotZone);
}
/** 移动热区 */
function handleMove(item: HotZoneItemProperty, e: MouseEvent) {
useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
setLeft(item, left + moveWidth);
setTop(item, top + moveHeight);
});
}
/** 调整热区大小、位置 */
function handleResize(
item: HotZoneItemProperty,
ctrlDot: ControlDot,
e: MouseEvent,
) {
useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
ctrlDot.types.forEach((type) => {
switch (type) {
case CONTROL_TYPE_ENUM.HEIGHT: {
{
// 左移时，宽度为减少
const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
? -1
: 1;
setHeight(item, height + moveHeight * direction);
}
break;
}
case CONTROL_TYPE_ENUM.LEFT: {
setLeft(item, left + moveWidth);
break;
}
case CONTROL_TYPE_ENUM.TOP: {
setTop(item, top + moveHeight);
break;
}
case CONTROL_TYPE_ENUM.WIDTH: {
{
// 上移时，高度为减少
const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
? -1
: 1;
setWidth(item, width + moveWidth * direction);
}
break;
}
}
});
});
}
/** 设置 X 轴坐标 */
function setLeft(item: HotZoneItemProperty, left: number) {
// 不能超出容器
if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
item.left = left;
}
}
/** 设置Y轴坐标 */
function setTop(item: HotZoneItemProperty, top: number) {
// 不能超出容器
if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
item.top = top;
}
}
/** 设置宽度 */
const setWidth = (item: HotZoneItemProperty, width: number) => {
// 不能小于最小宽度 && 不能超出容器右边
if (
width >= HOT_ZONE_MIN_SIZE &&
item.left + width <= container.value!.offsetWidth
) {
item.width = width;
}
};
/** 设置高度 */
const setHeight = (item: HotZoneItemProperty, height: number) => {
// 不能小于最小高度 && 不能超出容器底部
if (
height >= HOT_ZONE_MIN_SIZE &&
item.top + height <= container.value!.offsetHeight
) {
item.height = height;
}
};
const activeHotZone = ref<HotZoneItemProperty>();
const appLinkDialogRef = ref();
/** 显示 App 链接选择对话框 */
const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
activeHotZone.value = hotZone;
appLinkDialogRef.value.open(hotZone.url);
};
/** 处理 App 链接选择变更 */
const handleAppLinkChange = (appLink: AppLink) => {
if (!appLink || !activeHotZone.value) {
return;
}
activeHotZone.value.name = appLink.name;
activeHotZone.value.url = appLink.path;
};
</script>
<template><Page>待完成</Page></template>
<template>
<Modal title="设置热区" class="w-[780px]">
<div ref="container" class="w-750px relative h-full">
<Image
:src="imgUrl"
:preview="false"
class="w-750px pointer-events-none h-full select-none"
/>
<div
v-for="(item, hotZoneIndex) in formData"
:key="hotZoneIndex"
class="group absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
:style="{
width: `${item.width}px`,
height: `${item.height}px`,
top: `${item.top}px`,
left: `${item.left}px`,
color: 'var(--ant-color-primary)',
background: 'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
borderColor: 'var(--ant-color-primary)',
}"
@mousedown="handleMove(item, $event)"
@dblclick="handleShowAppLinkDialog(item)"
>
<span class="pointer-events-none select-none">
{{ item.name || '双击选择链接' }}
</span>
<IconifyIcon
icon="ep:close"
class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
:style="{ backgroundColor: 'var(--ant-color-primary)' }"
:size="14"
@click="handleRemove(item)"
/>
<!-- 8 个控制点 -->
<span
class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
:key="dotIndex"
:style="{ ...dot.style, border: 'inherit' }"
@mousedown="handleResize(item, dot, $event)"
></span>
</div>
</div>
<template #prepend-footer>
<Button @click="handleAdd" type="primary" ghost>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加热区
</Button>
</template>
</Modal>
<AppLinkSelectDialog
ref="appLinkDialogRef"
@app-link-change="handleAppLinkChange"
/>
</template>

29
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
View File

@@ -2,31 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 热区属性 */
export interface HotZoneProperty {
// 图片地址
imgUrl: string;
// 导航菜单列表
list: HotZoneItemProperty[];
// 组件样式
style: ComponentStyle;
imgUrl: string; // 图片地址
list: HotZoneItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 热区项目属性 */
export interface HotZoneItemProperty {
// 链接的名称
name: string;
// 链接
url: string;
// 宽
width: number;
// 高
height: number;
// 上
top: number;
// 左
left: number;
name: string; // 链接的名称
url: string; // 链接
width: number; // 宽
height: number; // 高
top: number; // 上
left: number; // 左
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'HotZone',
name: '热区',

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
View File

@@ -2,15 +2,12 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 图片展示属性 */
export interface ImageBarProperty {
// 图片链接
imgUrl: string;
// 跳转链接
url: string;
// 组件样式
style: ComponentStyle;
imgUrl: string; // 图片链接
url: string; // 跳转链接
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'ImageBar',
name: '图片展示',

39
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
View File

@@ -2,39 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 广告魔方属性 */
export interface MagicCubeProperty {
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间隔
space: number;
// 导航菜单列表
list: MagicCubeItemProperty[];
// 组件样式
style: ComponentStyle;
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间隔
list: MagicCubeItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 广告魔方项目属性 */
export interface MagicCubeItemProperty {
// 图标链接
imgUrl: string;
// 链接
url: string;
// 宽
width: number;
// 高
height: number;
// 上
top: number;
// 左
left: number;
// 右
right: number;
// 下
bottom: number;
imgUrl: string; // 图标链接
url: string; // 链接
width: number; // 宽
height: number; // 高
top: number; // 上
left: number; // 左
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'MagicCube',
name: '广告魔方',

86
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
View File

@@ -1,4 +1,86 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MagicCubeProperty } from './config';
import { ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Slider, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
MagicCubeEditor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
const { Text: ATypographyText } = Typography;
/** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' });
const props = defineProps<{ modelValue: MagicCubeProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const selectedHotAreaIndex = ref(-1); // 选中的热区
/** 处理热区被选中事件 */
const handleHotAreaSelected = (_: any, index: number) => {
selectedHotAreaIndex.value = index;
};
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2">
<ATypographyText tag="p"> 魔方设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm"> 每格尺寸187 * 187 </ATypographyText>
<MagicCubeEditor
class="my-4"
v-model="formData.list"
:rows="4"
:cols="4"
@hot-area-selected="handleHotAreaSelected"
/>
<template v-for="(hotArea, index) in formData.list" :key="index">
<template v-if="selectedHotAreaIndex === index">
<FormItem label="上传图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="hotArea.imgUrl"
height="80px"
width="80px"
:show-description="false"
/>
</FormItem>
<FormItem label="链接" :name="`list[${index}].url`">
<AppLinkInput v-model="hotArea.url" />
</FormItem>
</template>
</template>
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem>
</Form>
</ComponentContainerProperty>
</template>

43
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
View File

@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
/** 宫格导航属性 */
export interface MenuGridProperty {
// 列数
column: number;
// 导航菜单列表
list: MenuGridItemProperty[];
// 组件样式
style: ComponentStyle;
column: number; // 列数
list: MenuGridItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 宫格导航项目属性 */
export interface MenuGridItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 副标题
subtitle: string;
// 副标题颜色
subtitleColor: string;
// 链接
url: string;
// 角标
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
subtitle: string; // 副标题
subtitleColor: string; // 副标题颜色
url: string; // 链接
badge: {
// 角标背景颜色
bgColor: string;
// 是否显示
show: boolean;
// 角标文字
text: string;
// 角标文字颜色
textColor: string;
bgColor: string; // 角标背景颜色
show: boolean; // 是否显示
text: string; // 角标文字
textColor: string; // 角标文字颜色
};
}
/** 宫格导航项目默认属性 */
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
},
} as MenuGridItemProperty;
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuGrid',
name: '宫格导航',

27
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
View File

@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
/** 列表导航属性 */
export interface MenuListProperty {
// 导航菜单列表
list: MenuListItemProperty[];
// 组件样式
style: ComponentStyle;
list: MenuListItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 列表导航项目属性 */
export interface MenuListItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 副标题
subtitle: string;
// 副标题颜色
subtitleColor: string;
// 链接
url: string;
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
subtitle: string; // 副标题
subtitleColor: string; // 副标题颜色
url: string; // 链接
}
/** 空的列表导航项目属性 */
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
subtitleColor: '#bbb',
};
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuList',
name: '列表导航',

68
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
View File

@@ -1,4 +1,68 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MenuListProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
const { Text: ATypographyText } = Typography;
/** 列表导航属性面板 */
defineOptions({ name: 'MenuListProperty' });
const props = defineProps<{ modelValue: MenuListProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<ATypographyText tag="p"> 菜单设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm"> 拖动左侧的小圆点可以调整顺序 </ATypographyText>
<Form :model="formData" class="mt-2">
<Draggable
v-model="formData.list"
:empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
>
<template #default="{ element }">
<FormItem label="图标" name="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
width="80px"
:show-description="false"
>
<template #tip> 建议尺寸：44 * 44 </template>
</UploadImg>
</FormItem>
<FormItem label="标题" name="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="副标题" name="subtitle">
<InputWithColor
v-model="element.subtitle"
v-model:color="element.subtitleColor"
/>
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Form>
</ComponentContainerProperty>
</template>

54
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
View File

@@ -4,40 +4,28 @@ import { cloneDeep } from '@vben/utils';
/** 菜单导航属性 */
export interface MenuSwiperProperty {
// 布局： 图标+文字 | 图标
layout: 'icon' | 'iconText';
// 行数
row: number;
// 列数
column: number;
// 导航菜单列表
list: MenuSwiperItemProperty[];
// 组件样式
style: ComponentStyle;
}
/** 菜单导航项目属性 */
export interface MenuSwiperItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 链接
url: string;
// 角标
badge: {
// 角标背景颜色
bgColor: string;
// 是否显示
show: boolean;
// 角标文字
text: string;
// 角标文字颜色
textColor: string;
};
layout: 'icon' | 'iconText'; // 布局：图标+文字 | 图标
row: number; // 行数
column: number; // 列数
list: MenuSwiperItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 菜单导航项目属性 */
export interface MenuSwiperItemProperty {
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
url: string; // 链接
badge: {
bgColor: string; // 角标背景颜色
show: boolean; // 是否显示
text: string; // 角标文字
textColor: string; // 角标文字颜色
}; // 角标
}
/** 空菜单导航项目属性 */
export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -48,7 +36,7 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
},
} as MenuSwiperItemProperty;
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuSwiper',
name: '菜单导航',

103
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

@@ -1,4 +1,103 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MenuSwiperProperty } from './config';
import { cloneDeep } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioGroup,
Switch,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
ColorInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
/** 菜单导航属性面板 */
defineOptions({ name: 'MenuSwiperProperty' });
const props = defineProps<{ modelValue: MenuSwiperProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2">
<FormItem label="布局" name="layout">
<RadioGroup v-model:value="formData.layout">
<Radio value="iconText">图标+文字</Radio>
<Radio value="icon">仅图标</Radio>
</RadioGroup>
</FormItem>
<FormItem label="行数" name="row">
<RadioGroup v-model:value="formData.row">
<Radio :value="1">1行</Radio>
<Radio :value="2">2行</Radio>
</RadioGroup>
</FormItem>
<FormItem label="列数" name="column">
<RadioGroup v-model:value="formData.column">
<Radio :value="3">3列</Radio>
<Radio :value="4">4列</Radio>
<Radio :value="5">5列</Radio>
</RadioGroup>
</FormItem>
<Card title="菜单设置" class="property-group">
<Draggable
v-model="formData.list"
:empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
>
<template #default="{ element }">
<FormItem label="图标" name="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
width="80px"
:show-description="false"
>
<template #tip> 建议尺寸：98 * 98 </template>
</UploadImg>
</FormItem>
<FormItem label="标题" name="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
<FormItem label="显示角标" name="badge.show">
<Switch v-model:checked="element.badge.show" />
</FormItem>
<template v-if="element.badge.show">
<FormItem label="角标内容" name="badge.text">
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>
</FormItem>
<FormItem label="背景颜色" name="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" />
</FormItem>
</template>
</template>
</Draggable>
</Card>
</Form>
</ComponentContainerProperty>
</template>

68
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
View File

@@ -2,56 +2,38 @@ import type { DiyComponent } from '../../../util';
/** 顶部导航栏属性 */
export interface NavigationBarProperty {
// 背景类型
bgType: 'color' | 'img';
// 背景颜色
bgColor: string;
// 图片链接
bgImg: string;
// 样式类型：默认 | 沉浸式
styleType: 'inner' | 'normal';
// 常驻显示
alwaysShow: boolean;
// 小程序单元格列表
mpCells: NavigationBarCellProperty[];
// 其它平台单元格列表
otherCells: NavigationBarCellProperty[];
// 本地变量
bgType: 'color' | 'img'; // 背景类型
bgColor: string; // 背景颜色
bgImg: string; // 图片链接
styleType: 'inner' | 'normal'; // 样式类型：默认 | 沉浸式
alwaysShow: boolean; // 常驻显示
mpCells: NavigationBarCellProperty[]; // 小程序单元格列表
otherCells: NavigationBarCellProperty[]; // 其它平台单元格列表
_local: {
// 预览顶部导航（小程序）
previewMp: boolean;
// 预览顶部导航（非小程序）
previewOther: boolean;
};
previewMp: boolean; // 预览顶部导航（小程序）
previewOther: boolean; // 预览顶部导航（非小程序）
}; // 本地变量
}
/** 顶部导航栏 - 单元格 属性 */
export interface NavigationBarCellProperty {
// 类型：文字 | 图片 | 搜索框
type: 'image' | 'search' | 'text';
// 宽度
width: number;
// 高度
height: number;
// 顶部位置
top: number;
// 左侧位置
left: number;
// 文字内容
text: string;
// 文字颜色
textColor: string;
// 图片地址
imgUrl: string;
// 图片链接
url: string;
// 搜索框：提示文字
placeholder: string;
// 搜索框：边框圆角半径
borderRadius: number;
type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
width: number; // 宽度
height: number; // 高度
top: number; // 顶部位置
left: number; // 左侧位置
text: string; // 文字内容
textColor: string; // 文字颜色
imgUrl: string; // 图片地址
url: string; // 图片链接
backgroundColor: string; // 搜索框：框体颜色
placeholder: string; // 搜索框：提示文字
placeholderPosition: string; // 搜索框：提示文字位置
showScan: boolean; // 搜索框：是否显示扫一扫
borderRadius: number; // 搜索框：边框圆角半径
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'NavigationBar',
name: '顶部导航栏',

23
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
View File

@@ -2,27 +2,20 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 公告栏属性 */
export interface NoticeBarProperty {
// 图标地址
iconUrl: string;
// 公告内容列表
contents: NoticeContentProperty[];
// 背景颜色
backgroundColor: string;
// 文字颜色
textColor: string;
// 组件样式
style: ComponentStyle;
iconUrl: string; // 图标地址
contents: NoticeContentProperty[]; // 公告内容列表
backgroundColor: string; // 背景颜色
textColor: string; // 文字颜色
style: ComponentStyle; // 组件样式
}
/** 内容属性 */
export interface NoticeContentProperty {
// 内容文字
text: string;
// 链接地址
url: string;
text: string; // 内容文字
url: string; // 链接地址
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'NoticeBar',
name: '公告栏',

61
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
View File

@@ -1,4 +1,61 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { NoticeBarProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Card, Form, FormItem, Input } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
ColorInput,
Draggable,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 公告栏属性面板 */
defineOptions({ name: 'NoticeBarProperty' });
const props = defineProps<{ modelValue: NoticeBarProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const rules = {
content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
}; // 表单校验
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" :rules="rules">
<FormItem label="公告图标" name="iconUrl">
<UploadImg
v-model="formData.iconUrl"
height="48px"
:show-description="false"
>
<template #tip>建议尺寸：24 * 24</template>
</UploadImg>
</FormItem>
<FormItem label="背景颜色" name="backgroundColor">
<ColorInput v-model="formData.backgroundColor" />
</FormItem>
<FormItem label="文字颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
<Card title="公告内容" class="property-group">
<Draggable v-model="formData.contents">
<template #default="{ element }">
<FormItem label="公告" name="text">
<Input v-model:value="element.text" placeholder="请输入公告" />
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Card>
</Form>
</ComponentContainerProperty>
</template>

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
View File

@@ -2,15 +2,12 @@ import type { DiyComponent } from '../../../util';
/** 页面设置属性 */
export interface PageConfigProperty {
// 页面描述
description: string;
// 页面背景颜色
backgroundColor: string;
// 页面背景图片
backgroundImage: string;
description: string; // 页面描述
backgroundColor: string; // 页面背景颜色
backgroundImage: string; // 页面背景图片
}
// 定义页面组件
/** 定义页面组件 */
export const component = {
id: 'PageConfig',
name: '页面设置',

81
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
View File

@@ -2,63 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
export interface ProductCardProperty {
// 布局类型：单列大图 | 单列小图 | 双列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列大图 | 单列小图 | 双列
fields: {
// 商品简介
introduction: ProductCardFieldProperty;
// 商品市场价
marketPrice: ProductCardFieldProperty;
// 商品名称
name: ProductCardFieldProperty;
// 商品价格
price: ProductCardFieldProperty;
// 商品销量
salesCount: ProductCardFieldProperty;
// 商品库存
stock: ProductCardFieldProperty;
};
// 角标
introduction: ProductCardFieldProperty; // 商品简介
marketPrice: ProductCardFieldProperty; // 商品市场价
name: ProductCardFieldProperty; // 商品名称
price: ProductCardFieldProperty; // 商品价格
salesCount: ProductCardFieldProperty; // 商品销量
stock: ProductCardFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 商品编号列表
spuIds: number[];
// 组件样式
style: ComponentStyle;
}
// 商品字段
export interface ProductCardFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
spuIds: number[]; // 商品编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 商品字段属性 */
export interface ProductCardFieldProperty {
show: boolean; // 是否显示
color: string; // 颜色
}
/** 定义组件 */
export const component = {
id: 'ProductCard',
name: '商品卡片',

170
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
View File

@@ -1,4 +1,170 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { ProductCardProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import { ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 商品卡片属性面板 */
defineOptions({ name: 'ProductCardProperty' });
const props = defineProps<{ modelValue: ProductCardProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="商品列表" class="property-group">
<SpuShowcase v-model="formData.spuIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

51
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
View File

@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品栏属性 */
export interface ProductListProperty {
// 布局类型：双列 | 三列 | 水平滑动
layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
// 商品字段
layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
fields: {
// 商品名称
name: ProductListFieldProperty;
// 商品价格
price: ProductListFieldProperty;
};
// 角标
name: ProductListFieldProperty; // 商品名称
price: ProductListFieldProperty; // 商品价格
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 商品编号列表
spuIds: number[];
// 组件样式
style: ComponentStyle;
}
// 商品字段
export interface ProductListFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
spuIds: number[]; // 商品编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 商品字段属性 */
export interface ProductListFieldProperty {
show: boolean; // 是否显示
color: string; // 颜色
}
/** 定义组件 */
export const component = {
id: 'ProductList',
name: '商品栏',

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
View File

@@ -2,13 +2,11 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 营销文章属性 */
export interface PromotionArticleProperty {
// 文章编号
id: number;
// 组件样式
style: ComponentStyle;
id: number; // 文章编号
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionArticle',
name: '营销文章',

76
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
View File

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 拼团属性 */
export interface PromotionCombinationProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionCombinationFieldProperty;
// 市场价
marketPrice: PromotionCombinationFieldProperty;
// 商品名称
name: PromotionCombinationFieldProperty;
// 商品价格
price: PromotionCombinationFieldProperty;
// 商品销量
salesCount: PromotionCombinationFieldProperty;
// 商品库存
stock: PromotionCombinationFieldProperty;
};
// 角标
introduction: PromotionCombinationFieldProperty; // 商品简介
marketPrice: PromotionCombinationFieldProperty; // 市场价
name: PromotionCombinationFieldProperty; // 商品名称
price: PromotionCombinationFieldProperty; // 商品价格
salesCount: PromotionCombinationFieldProperty; // 商品销量
stock: PromotionCombinationFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 拼团活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 拼团活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionCombinationFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionCombination',
name: '拼团',

75
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
View File

@@ -2,64 +2,41 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 积分商城属性 */
export interface PromotionPointProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionPointFieldProperty;
// 市场价
marketPrice: PromotionPointFieldProperty;
// 商品名称
name: PromotionPointFieldProperty;
// 商品价格
price: PromotionPointFieldProperty;
// 商品销量
salesCount: PromotionPointFieldProperty;
// 商品库存
stock: PromotionPointFieldProperty;
};
// 角标
introduction: PromotionPointFieldProperty; // 商品简介
marketPrice: PromotionPointFieldProperty; // 市场价
name: PromotionPointFieldProperty; // 商品名称
price: PromotionPointFieldProperty; // 商品价格
salesCount: PromotionPointFieldProperty; // 商品销量
stock: PromotionPointFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
// 按钮
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 秒杀活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 积分活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionPointFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionPoint',
name: '积分商城',

170
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -1,4 +1,168 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
<script lang="ts" setup>
import type { PromotionPointProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import { PointShowcase } from '#/views/mall/promotion/point/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 积分属性面板 */
defineOptions({ name: 'PromotionPointProperty' });
const props = defineProps<{ modelValue: PromotionPointProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="积分商城活动" class="property-group">
<PointShowcase v-model="formData.activityIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

76
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
View File

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 秒杀属性 */
export interface PromotionSeckillProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionSeckillFieldProperty;
// 市场价
marketPrice: PromotionSeckillFieldProperty;
// 商品名称
name: PromotionSeckillFieldProperty;
// 商品价格
price: PromotionSeckillFieldProperty;
// 商品销量
salesCount: PromotionSeckillFieldProperty;
// 商品库存
stock: PromotionSeckillFieldProperty;
};
// 角标
introduction: PromotionSeckillFieldProperty; // 商品简介
marketPrice: PromotionSeckillFieldProperty; // 市场价
name: PromotionSeckillFieldProperty; // 商品名称
price: PromotionSeckillFieldProperty; // 商品价格
salesCount: PromotionSeckillFieldProperty; // 商品销量
stock: PromotionSeckillFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 秒杀活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 秒杀活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionSeckillFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionSeckill',
name: '秒杀',

170
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

@@ -1,4 +1,170 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { PromotionSeckillProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 秒杀属性面板 */
defineOptions({ name: 'PromotionSeckillProperty' });
const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="秒杀活动" class="property-group">
<SeckillShowcase v-model="formData.activityIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56</template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider
v-model:value="formData.space"
:max="100"
:min="0"
/>
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
View File

@@ -13,10 +13,10 @@ export interface SearchProperty {
style: ComponentStyle;
}
// 文字位置
/** 文字位置 */
export type PlaceholderPosition = 'center' | 'left';
// 定义组件
/** 定义组件 */
export const component = {
id: 'SearchBar',
name: '搜索框',

119
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
View File

@@ -1,4 +1,119 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { SearchProperty } from './config';
import { watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { isString } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import { ColorInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' });
const props = defineProps<{ modelValue: SearchProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
/** 监听热词数组变化 */
watch(
() => formData.value.hotKeywords,
(newVal) => {
// 找到非字符串项的索引
const nonStringIndex = newVal.findIndex((item) => !isString(item));
if (nonStringIndex !== -1) {
formData.value.hotKeywords[nonStringIndex] = '';
}
},
{ deep: true, flush: 'post' },
);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="搜索热词" class="property-group">
<Draggable
v-model="formData.hotKeywords"
:empty-item="{
type: 'input',
placeholder: '请输入热词',
}"
>
<template #default="{ index }">
<Input
v-model:value="formData.hotKeywords[index]"
placeholder="请输入热词"
/>
</template>
</Draggable>
</Card>
<Card title="搜索样式" class="property-group">
<FormItem label="框体样式">
<RadioGroup v-model:value="formData!.borderRadius">
<Tooltip title="方形" placement="top">
<RadioButton :value="0">
<IconifyIcon icon="tabler:input-search" />
</RadioButton>
</Tooltip>
<Tooltip title="圆形" placement="top">
<RadioButton :value="10">
<IconifyIcon icon="iconoir:input-search" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="提示文字" name="placeholder">
<Input v-model:value="formData.placeholder" />
</FormItem>
<FormItem label="文本位置" name="placeholderPosition">
<RadioGroup v-model:value="formData!.placeholderPosition">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="扫一扫" name="showScan">
<Switch v-model:checked="formData!.showScan" />
</FormItem>
<FormItem label="框体高度" name="height">
<Slider
v-model:value="formData!.height"
:max="50"
:min="28"
/>
</FormItem>
<FormItem label="框体颜色" name="backgroundColor">
<ColorInput v-model="formData.backgroundColor" />
</FormItem>
<FormItem label="文本颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

42
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
View File

@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
/** 底部导航菜单属性 */
export interface TabBarProperty {
// 选项列表
items: TabBarItemProperty[];
// 主题
theme: string;
// 样式
style: TabBarStyle;
items: TabBarItemProperty[]; // 选项列表
theme: string; // 主题
style: TabBarStyle; // 样式
}
// 选项属性
/** 选项属性 */
export interface TabBarItemProperty {
// 标签文字
text: string;
// 链接
url: string;
// 默认图标链接
iconUrl: string;
// 选中的图标链接
activeIconUrl: string;
text: string; // 标签文字
url: string; // 链接
iconUrl: string; // 默认图标链接
activeIconUrl: string; // 选中的图标链接
}
// 样式
/** 样式 */
export interface TabBarStyle {
// 背景类型
bgType: 'color' | 'img';
// 背景颜色
bgColor: string;
// 图片链接
bgImg: string;
// 默认颜色
color: string;
// 选中的颜色
activeColor: string;
bgType: 'color' | 'img'; // 背景类型
bgColor: string; // 背景颜色
bgImg: string; // 图片链接
color: string; // 默认颜色
activeColor: string; // 选中的颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'TabBar',
name: '底部导航',

56
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
View File

@@ -2,46 +2,28 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 标题栏属性 */
export interface TitleBarProperty {
// 背景图
bgImgUrl: string;
// 偏移
marginLeft: number;
// 显示位置
textAlign: 'center' | 'left';
// 主标题
title: string;
// 副标题
description: string;
// 标题大小
titleSize: number;
// 描述大小
descriptionSize: number;
// 标题粗细
titleWeight: number;
// 描述粗细
descriptionWeight: number;
// 标题颜色
titleColor: string;
// 描述颜色
descriptionColor: string;
// 高度
height: number;
// 查看更多
bgImgUrl: string; // 背景图
marginLeft: number; // 偏移
textAlign: 'center' | 'left'; // 显示位置
title: string; // 主标题
description: string; // 副标题
titleSize: number; // 标题大小
descriptionSize: number; // 描述大小
titleWeight: number; // 标题粗细
descriptionWeight: number; // 描述粗细
titleColor: string; // 标题颜色
descriptionColor: string; // 描述颜色
height: number; // 高度
more: {
// 是否显示查看更多
show: false;
// 自定义文字
text: string;
// 样式选择
type: 'all' | 'icon' | 'text';
// 链接
url: string;
};
// 组件样式
style: ComponentStyle;
show: false; // 是否显示查看更多
text: string; // 自定义文字
type: 'all' | 'icon' | 'text'; // 样式选择
url: string; // 链接
}; // 查看更多
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'TitleBar',
name: '标题栏',

159
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -1,4 +1,159 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { TitleBarProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
Radio,
RadioButton,
RadioGroup,
Slider,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 导航栏属性面板 */
defineOptions({ name: 'TitleBarProperty' });
const props = defineProps<{ modelValue: TitleBarProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const rules = {}; // 表单校验
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" :rules="rules">
<Card title="风格" class="property-group">
<FormItem label="背景图片" name="bgImgUrl">
<UploadImg
v-model="formData.bgImgUrl"
width="100%"
height="40px"
:show-description="false"
>
<template #tip>建议尺寸 750*80</template>
</UploadImg>
</FormItem>
<FormItem label="标题位置" name="textAlign">
<RadioGroup v-model:value="formData!.textAlign">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="偏移量" name="marginLeft">
<Slider
v-model:value="formData.marginLeft"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="高度" name="height">
<Slider
v-model:value="formData.height"
:max="200"
:min="20"
/>
</FormItem>
</Card>
<Card title="主标题" class="property-group">
<FormItem label="文字" name="title">
<InputWithColor
v-model="formData.title"
v-model:color="formData.titleColor"
show-count
:maxlength="20"
/>
</FormItem>
<FormItem label="大小" name="titleSize">
<Slider
v-model:value="formData.titleSize"
:max="60"
:min="10"
/>
</FormItem>
<FormItem label="粗细" name="titleWeight">
<Slider
v-model:value="formData.titleWeight"
:min="100"
:max="900"
:step="100"
/>
</FormItem>
</Card>
<Card title="副标题" class="property-group">
<FormItem label="文字" name="description">
<InputWithColor
v-model="formData.description"
v-model:color="formData.descriptionColor"
show-count
:maxlength="50"
/>
</FormItem>
<FormItem label="大小" name="descriptionSize">
<Slider
v-model:value="formData.descriptionSize"
:max="60"
:min="10"
/>
</FormItem>
<FormItem label="粗细" name="descriptionWeight">
<Slider
v-model:value="formData.descriptionWeight"
:min="100"
:max="900"
:step="100"
/>
</FormItem>
</Card>
<Card title="查看更多" class="property-group">
<FormItem label="是否显示" name="more.show">
<Checkbox v-model:checked="formData.more.show" />
</FormItem>
<!-- 更多按钮的 样式选择 -->
<template v-if="formData.more.show">
<FormItem label="样式" name="more.type">
<RadioGroup v-model:value="formData.more.type">
<Radio value="text">文字</Radio>
<Radio value="icon">图标</Radio>
<Radio value="all">文字+图标</Radio>
</RadioGroup>
</FormItem>
<FormItem
label="更多文字"
name="more.text"
v-show="formData.more.type !== 'icon'"
>
<Input v-model:value="formData.more.text" />
</FormItem>
<FormItem label="跳转链接" name="more.url">
<AppLinkInput v-model="formData.more.url" />
</FormItem>
</template>
</Card>
</Form>
</ComponentContainerProperty>
</template>

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户卡片属性 */
export interface UserCardProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserCard',
name: '用户卡片',

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户订单属性 */
export interface UserOrderProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserOrder',
name: '用户订单',

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户资产属性 */
export interface UserWalletProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserWallet',
name: '用户资产',

19
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
View File

@@ -2,23 +2,18 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 视频播放属性 */
export interface VideoPlayerProperty {
// 视频链接
videoUrl: string;
// 封面链接
posterUrl: string;
// 是否自动播放
autoplay: boolean;
// 组件样式
style: VideoPlayerStyle;
videoUrl: string; // 视频链接
posterUrl: string; // 封面链接
autoplay: boolean; // 是否自动播放
style: VideoPlayerStyle; // 组件样式
}
// 视频播放样式
/** 视频播放样式 */
export interface VideoPlayerStyle extends ComponentStyle {
// 视频高度
height: number;
height: number; // 视频高度
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'VideoPlayer',
name: '视频播放',

181
apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
View File

@@ -3,12 +3,12 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
import { onMounted, ref, unref, watch } from 'vue';
import { IFrame } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { cloneDeep, isEmpty, isString } from '@vben/utils';
import { useQRCode } from '@vueuse/integrations/useQRCode';
import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
import { Button, Card, Image, Tag, Tooltip } from 'ant-design-vue';
import draggable from 'vuedraggable';
import statusBarImg from '#/assets/imgs/diy/statusBar.png';
@@ -37,7 +37,7 @@ const props = defineProps({
previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
});
const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
const qrcode = useQRCode(props.previewUrl, {
errorCorrectionLevel: 'H',
@@ -68,17 +68,20 @@ watch(
isString(props.modelValue) && !isEmpty(props.modelValue)
? (JSON.parse(props.modelValue) as PageConfig)
: props.modelValue;
// TODO @AI：这里可以简化么？idea 提示 Invalid 'typeof' check: 'modelValue' cannot have type 'string'
// noinspection SuspiciousTypeOfGuard
pageConfigComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.page) ||
PAGE_CONFIG_COMPONENT.property;
// noinspection SuspiciousTypeOfGuard
navigationBarComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.navigationBar) ||
NAVIGATION_BAR_COMPONENT.property;
// noinspection SuspiciousTypeOfGuard
tabBarComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.tabBar) ||
TAB_BAR_COMPONENT.property;
// 查找对应的页面组件
// noinspection SuspiciousTypeOfGuard
pageComponents.value = (
(typeof modelValue !== 'string' && modelValue?.components) ||
[]
@@ -99,6 +102,11 @@ watch(
if (!val || selectedComponentIndex.value === -1) {
return;
}
// 如果是基础设置页，默认选中的索引改成 -1，为了防止删除组件后切换到此页导致报错
// https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/792
if (props.showTabBar) {
selectedComponentIndex.value = -1;
}
pageComponents.value[selectedComponentIndex.value] =
selectedComponent.value!;
},
@@ -224,7 +232,6 @@ function handleCopyComponent(index: number) {
/** 删除组件 */
function handleDeleteComponent(index: number) {
// 删除组件
pageComponents.value.splice(index, 1);
if (index < pageComponents.value.length) {
// 1. 不是最后一个组件时，删除后选中下面的组件
@@ -251,12 +258,17 @@ function handleReset() {
emits('reset');
}
// TODO @AI：搞成 modal 来？
const [PreviewModal, previewModalApi] = useVbenModal({
showConfirmButton: false,
showCancelButton: false,
onCancel() {
previewModalApi.close();
},
});
/** 预览 */
const previewDialogVisible = ref(false);
function handlePreview() {
previewDialogVisible.value = true;
emits('preview');
previewModalApi.open();
}
/** 设置默认选中的组件 */
@@ -312,7 +324,7 @@ onMounted(() => {
</div>
<!-- 中心区域 -->
<div class="editor-container flex flex-1">
<div class="editor-container h-[calc(100vh-135px)]">
<!-- 左侧：组件库（ComponentLibrary） -->
<ComponentLibrary
v-if="libs && libs.length > 0"
@@ -320,11 +332,15 @@ onMounted(() => {
:list="libs"
/>
<!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected">
<div
class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
:style="{ backgroundColor: 'var(--app-content-bg-color)' }"
@click="handlePageSelected"
>
<!-- 手机顶部 -->
<div class="editor-design-top">
<div class="editor-design-top mx-auto flex w-[375px] flex-col">
<!-- 手机顶部状态栏 -->
<img alt="" class="status-bar" :src="statusBarImg" />
<img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
<!-- 手机顶部导航栏 -->
<ComponentContainer
v-if="showNavigationBar"
@@ -352,45 +368,46 @@ onMounted(() => {
</div>
<!-- 手机页面编辑区域 -->
<div
class="editor-design-center page-prop-area phone-container overflow-y-auto"
class="editor-design-center page-prop-area h-full w-full overflow-y-auto"
:style="{
backgroundColor: pageConfigComponent.property.backgroundColor,
backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
height: 'calc(100vh - 135px - 120px)',
}"
>
<draggable
v-model="pageComponents"
:animation="200"
:force-fallback="true"
class="page-prop-area drag-area"
filter=".component-toolbar"
ghost-class="draggable-ghost"
group="component"
item-key="index"
@change="handleComponentChange"
>
<template #item="{ element, index }">
<ComponentContainer
v-if="!element.position || element.position === 'center'"
:active="selectedComponentIndex === index"
:can-move-down="index < pageComponents.length - 1"
:can-move-up="index > 0"
:component="element"
@click="handleComponentSelected(element, index)"
@copy="handleCopyComponent(index)"
@delete="handleDeleteComponent(index)"
@move="
(direction: number) => handleMoveComponent(index, direction)
"
/>
</template>
</draggable>
<div class="phone-container">
<draggable
v-model="pageComponents"
:animation="200"
:force-fallback="false"
class="page-prop-area drag-area"
filter=".component-toolbar"
ghost-class="draggable-ghost"
group="component"
item-key="index"
@change="handleComponentChange"
>
<template #item="{ element, index }">
<ComponentContainer
v-if="!element.position || element.position === 'center'"
:active="selectedComponentIndex === index"
:can-move-down="index < pageComponents.length - 1"
:can-move-up="index > 0"
:component="element"
@click="handleComponentSelected(element, index)"
@copy="handleCopyComponent(index)"
@delete="handleDeleteComponent(index)"
@move="
(direction: number) => handleMoveComponent(index, direction)
"
/>
</template>
</draggable>
</div>
</div>
<!-- 手机底部导航 -->
<div
v-if="showTabBar"
class="editor-design-bottom component cursor-pointer"
class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
>
<ComponentContainer
:active="selectedComponent?.id === tabBarComponent.id"
@@ -400,7 +417,9 @@ onMounted(() => {
/>
</div>
<!-- 固定布局的组件 操作按钮区 -->
<div class="fixed-component-action-group gap-2">
<div
class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
>
<Tag
v-if="showPageConfig"
:color="
@@ -409,6 +428,7 @@ onMounted(() => {
: 'default'
"
class="cursor-pointer"
size="large"
@click="handleComponentSelected(pageConfigComponent)"
>
<IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
@@ -422,6 +442,7 @@ onMounted(() => {
"
closable
class="cursor-pointer"
size="large"
@click="handleComponentSelected(component)"
@close="handleDeleteComponent(index)"
>
@@ -432,11 +453,11 @@ onMounted(() => {
</div>
</div>
<!-- 右侧：属性面板（ComponentContainerProperty） -->
<div v-if="selectedComponent?.property" class="editor-right w-[350px]">
<Card
class="h-full"
:body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
>
<aside
v-if="selectedComponent?.property"
class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
>
<Card class="h-full" :body-style="{ padding: 0, height: 'calc(100% - 57px)' }">
<!-- 组件名称 -->
<template #title>
<div class="flex items-center gap-2">
@@ -452,24 +473,23 @@ onMounted(() => {
/>
</div>
</Card>
</div>
</aside>
</div>
</div>
<!-- 预览弹框 -->
<Modal v-model:open="previewDialogVisible" title="预览" width="700">
<PreviewModal title="预览" class="w-700px">
<div class="flex justify-around">
<IFrame
<iframe
:src="previewUrl"
class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
/>
></iframe>
<div class="flex flex-col">
<div class="text-base">手机扫码预览</div>
<img :src="qrcode" alt="qrcode" class="w-1/2" />
<!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
<Image :src="qrcode" alt="qrcode" />
</div>
</div>
</Modal>
</PreviewModal>
</div>
</template>
<style lang="scss" scoped>
@@ -512,14 +532,10 @@ $phone-width: 375px;
/* 中心操作区 */
.editor-container {
height: calc(100vh - 135px);
display: flex;
/* 右侧属性面板 */
:deep(.editor-right) {
flex-shrink: 0;
overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
/* 属性面板顶部：减少内边距 */
:deep(.ant-card-head) {
padding: 8px 16px;
@@ -548,37 +564,6 @@ $phone-width: 375px;
/* 中心区域 */
.editor-center {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
/* 手机顶部 */
.editor-design-top {
display: flex;
flex-direction: column;
width: $phone-width;
margin: 0 auto;
/* 手机顶部状态栏 */
.status-bar {
width: $phone-width;
height: 20px;
background-color: #fff;
}
}
/* 手机底部导航 */
.editor-design-bottom {
width: $phone-width;
margin: 0 auto;
}
/* 手机页面编辑区域 */
:deep(.editor-design-center) {
width: 100%;
@@ -601,21 +586,11 @@ $phone-width: 375px;
/* 固定布局的组件 操作按钮区 */
.fixed-component-action-group {
position: absolute;
top: 0;
right: 16px;
display: flex;
flex-direction: column;
:deep(.ant-tag) {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border: none;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
.anticon {
.ant-tag-icon {
margin-right: 4px;
}
}

21
apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
View File

@@ -45,7 +45,7 @@ const handleDelete = function (index: number) {
</script>
<template>
<div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
<div class="text-sm text-gray-500">拖动左上角的小圆点可对其排序</div>
<VueDraggable
:list="formData"
:force-fallback="true"
@@ -58,21 +58,19 @@ const handleDelete = function (index: number) {
<div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
<!-- 操作按钮区 -->
<div
class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
style="background-color: var(--app-content-bg-color)"
class="-m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
style="background-color: var(--ant-color-bg-container-secondary)"
>
<Tooltip title="拖动排序">
<IconifyIcon
icon="ic:round-drag-indicator"
class="drag-icon cursor-move"
style="color: #8a909c"
class="drag-icon cursor-move text-gray-500"
/>
</Tooltip>
<Tooltip title="删除">
<Tooltip v-if="formData.length > min" title="删除">
<IconifyIcon
icon="ep:delete"
class="cursor-pointer text-red-500"
v-if="formData.length > min"
class="cursor-pointer text-red-500 hover:text-red-600"
@click="handleDelete(index)"
/>
</Tooltip>
@@ -82,7 +80,7 @@ const handleDelete = function (index: number) {
</div>
</template>
</VueDraggable>
<Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
<Tooltip :title="limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
<Button
type="primary"
ghost
@@ -90,7 +88,10 @@ const handleDelete = function (index: number) {
:disabled="limit > 0 && formData.length >= limit"
@click="handleAdd"
>
<IconifyIcon icon="ep:plus" /><span>添加</span>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加
</Button>
</Tooltip>
</template>

30
apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
View File

@@ -1,8 +1,6 @@
<script lang="ts" setup>
// import { PREDEFINE_COLORS } from '@vben/constants';
import { useVModels } from '@vueuse/core';
import { Input, InputGroup } from 'ant-design-vue';
import { Input } from 'ant-design-vue';
/** 带颜色选择器输入框 */
defineOptions({ name: 'InputWithColor' });
@@ -24,11 +22,25 @@ const { modelValue, color } = useVModels(props, emit);
</script>
<template>
<InputGroup compact>
<div class="flex gap-2">
<Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
</InputGroup>
<input
v-model="color"
type="color"
class="h-8 w-10 cursor-pointer rounded border border-gray-300"
/>
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
input[type='color'] {
&::-webkit-color-swatch-wrapper {
padding: 2px;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
}
</style>

66
apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
View File

@@ -7,16 +7,16 @@ import { IconifyIcon } from '@vben/icons';
import { createRect, isContains, isOverlap } from './util';
// TODO @AI: 改成标准注释
// 魔方编辑器
// 有两部分组成：
// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
// 操作方法：
// 1.1 点击其中一个方块就会进入热区选择模式
// 1.2 再次点击另外一个方块时，结束热区选择模式
// 1.3 在两个方块中间的区域创建热区
// 如果两次点击的都是同一方块，就只创建一个格子的热区
// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
/**
* 魔方编辑器，有两部分组成：
* 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
* 操作方法：
* 1.1 点击其中一个方块就会进入热区选择模式
* 1.2 再次点击另外一个方块时，结束热区选择模式
* 1.3 在两个方块中间的区域创建热区
* 如果两次点击的都是同一方块，就只创建一个格子的热区
* 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
*/
defineOptions({ name: 'MagicCubeEditor' });
/** 定义属性 */
@@ -34,7 +34,6 @@ const props = defineProps({
type: Number,
default: 4,
}, // 列数，默认 4 列
cubeSize: {
type: Number,
default: 75,
@@ -70,6 +69,7 @@ watch(
);
const hotAreas = ref<Rect[]>([]); // 热区列表
/** 初始化热区 */
watch(
() => props.modelValue,
@@ -86,20 +86,20 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCubeClick = (currentRow: number, currentCol: number) => {
function handleCubeClick(currentRow: number, currentCol: number) {
const currentCube = cubes.value[currentRow]?.[currentCol];
if (!currentCube) {
return;
}
// 情况1：进入热区选择模式
// 情况 1：进入热区选择模式
if (!isHotAreaSelectMode()) {
hotAreaBeginCube.value = currentCube;
hotAreaBeginCube.value!.active = true;
return;
}
// 情况2：结束热区选择模式
// 情况 2：结束热区选择模式
hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
// 结束热区选择模式
exitHotAreaSelectMode();
@@ -111,7 +111,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
}
// 发送热区变动通知
emitUpdateModelValue();
};
}
/**
* 处理鼠标经过方块
@@ -119,7 +119,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCellHover = (currentRow: number, currentCol: number) => {
function handleCellHover(currentRow: number, currentCol: number) {
// 当前没有进入热区选择模式
if (!isHotAreaSelectMode()) {
return;
@@ -138,7 +138,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
if (isOverlap(hotArea, currentSelectedArea)) {
// 结束热区选择模式
exitHotAreaSelectMode();
return;
}
}
@@ -147,13 +146,9 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
eachCube((_, __, cube) => {
cube.active = isContains(currentSelectedArea, cube);
});
};
}
/**
* 处理热区删除
*
* @param index 热区索引
*/
/** 处理热区删除 */
function handleDeleteHotArea(index: number) {
hotAreas.value.splice(index, 1);
// 结束热区选择模式
@@ -165,10 +160,12 @@ function handleDeleteHotArea(index: number) {
const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
const selectedHotAreaIndex = ref(0); // 热区选中
const handleHotAreaSelected = (hotArea: Rect, index: number) => {
/** 处理热区选中 */
function handleHotAreaSelected(hotArea: Rect, index: number) {
selectedHotAreaIndex.value = index;
emit('hotAreaSelected', hotArea, index);
};
}
/**
* 结束热区选择模式
@@ -189,7 +186,7 @@ function exitHotAreaSelectMode() {
* 迭代魔方矩阵
* @param callback 回调
*/
const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
for (const [x, row] of cubes.value.entries()) {
if (!row) continue;
for (const [y, cube] of row.entries()) {
@@ -198,7 +195,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
}
}
}
};
}
</script>
<template>
<div class="relative">
@@ -261,13 +258,14 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
.cube {
box-sizing: border-box;
color: var(--el-text-color-secondary);
color: var(--ant-color-text-secondary);
text-align: center;
line-height: 1;
cursor: pointer;
border: 1px solid var(--el-border-color);
border: 1px solid var(--ant-color-border);
&.active {
background: var(--el-color-primary-light-9);
background: color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
}
}
@@ -277,12 +275,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-color-primary);
color: var(--ant-color-primary);
cursor: pointer;
border-spacing: 0;
border-collapse: collapse;
background: var(--el-color-primary-light-8);
border: 1px solid var(--el-color-primary);
background: color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
border: 1px solid var(--ant-color-primary);
.btn-delete {
position: absolute;
@@ -294,7 +292,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
justify-content: center;
width: 16px;
height: 16px;
background-color: #fff;
background-color: var(--ant-color-bg-container);
border-radius: 50%;
}
}

45
apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
View File

@@ -1,51 +1,47 @@
// 坐标点
/** 坐标点 */
export interface Point {
x: number;
y: number;
}
// 矩形
/** 矩形 */
export interface Rect {
// 左上角 X 轴坐标
left: number;
// 左上角 Y 轴坐标
top: number;
// 右下角 X 轴坐标
right: number;
// 右下角 Y 轴坐标
bottom: number;
// 矩形宽度
width: number;
// 矩形高度
height: number;
left: number; // 左上角 X 轴坐标
top: number; // 左上角 Y 轴坐标
right: number; // 右下角 X 轴坐标
bottom: number; // 右下角 Y 轴坐标
width: number; // 矩形宽度
height: number; // 矩形高度
}
/**
* 判断两个矩形是否重叠
*
* @param a 矩形 A
* @param b 矩形 B
*/
export const isOverlap = (a: Rect, b: Rect): boolean => {
export function isOverlap(a: Rect, b: Rect): boolean {
return (
a.left < b.left + b.width &&
a.left + a.width > b.left &&
a.top < b.top + b.height &&
a.height + a.top > b.top
);
};
}
/**
* 检查坐标点是否在矩形内
* @param hotArea 矩形
* @param point 坐标
*/
export const isContains = (hotArea: Rect, point: Point): boolean => {
export function isContains(hotArea: Rect, point: Point): boolean {
return (
point.x >= hotArea.left &&
point.x < hotArea.right &&
point.y >= hotArea.top &&
point.y < hotArea.bottom
);
};
}
/**
* 在两个坐标点中间，创建一个矩形
@@ -59,14 +55,17 @@ export const isContains = (hotArea: Rect, point: Point): boolean => {
* @param a 坐标点一
* @param b 坐标点二
*/
export const createRect = (a: Point, b: Point): Rect => {
export function createRect(a: Point, b: Point): Rect {
// 计算矩形的范围
const [left, left2] = [a.x, b.x].sort();
const [top, top2] = [a.y, b.y].sort();
let [left, left2] = [a.x, b.x].sort();
left = left ?? 0;
left2 = left2 ?? 0;
let [top, top2] = [a.y, b.y].sort();
top = top ?? 0;
top2 = top2 ?? 0;
const right = left2 + 1;
const bottom = top2 + 1;
const height = bottom - top;
const width = right - left;
return { left, right, top, bottom, height, width };
};
}

2
apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
View File

@@ -1,2 +1,2 @@
export * from './data';
export { default as CouponSelect } from './select.vue';
export { default as CouponSendForm } from './send-form.vue';

119
apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts Normal file
View File

@@ -0,0 +1,119 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
discountFormat,
remainedCountFormat,
takeLimitCountFormat,
validityTypeFormat,
} from '../formatter';
/** 优惠券选择的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '优惠券名称',
component: 'Input',
componentProps: {
placeholder: '请输入优惠券名称',
allowClear: true,
},
},
{
fieldName: 'discountType',
label: '优惠类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
placeholder: '请选择优惠类型',
allowClear: true,
},
},
];
}
/** 优惠券选择的表格列 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 55 },
{
field: 'name',
title: '优惠券名称',
minWidth: 140,
},
{
field: 'productScope',
title: '类型',
minWidth: 80,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
},
},
{
field: 'discountType',
title: '优惠类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
},
},
{
field: 'discountPrice',
title: '优惠力度',
minWidth: 100,
formatter: ({ row }) => discountFormat(row),
},
{
field: 'takeType',
title: '领取方式',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
},
},
{
field: 'validityType',
title: '使用时间',
minWidth: 185,
align: 'center',
formatter: ({ row }) => validityTypeFormat(row),
},
{
field: 'totalCount',
title: '发放数量',
minWidth: 100,
align: 'center',
},
{
field: 'remainedCount',
title: '剩余数量',
minWidth: 100,
align: 'center',
formatter: ({ row }) => remainedCountFormat(row),
},
{
field: 'takeLimitCount',
title: '领取上限',
minWidth: 100,
align: 'center',
formatter: ({ row }) => takeLimitCountFormat(row),
},
{
field: 'status',
title: '状态',
minWidth: 80,
align: 'center',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
];
}

66
apps/web-antd/src/views/mall/promotion/coupon/components/select.vue Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
import { useGridColumns, useGridFormSchema } from './select-data';
defineOptions({ name: 'CouponSelect' });
const props = defineProps<{
takeType?: number; // 领取方式
}>();
const emit = defineEmits(['success']);
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 500,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getCouponTemplatePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
canTakeTypes: props.takeType ? [props.takeType] : [],
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// 从 gridApi 获取选中的记录
const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
[]) as MallCouponTemplateApi.CouponTemplate[];
await modalApi.close();
emit('success', selectedRecords);
},
});
</script>
<template>
<Modal title="选择优惠券" class="w-2/3">
<Grid />
</Modal>
</template>

0
apps/web-antd/src/views/mall/promotion/coupon/components/data.ts → apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts
View File

2
apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
View File

@@ -11,7 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { sendCoupon } from '#/api/mall/promotion/coupon/coupon';
import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
import { useFormSchema, useGridColumns } from './data';
import { useFormSchema, useGridColumns } from './send-form-data';
/** 发送优惠券 */
async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {

1
apps/web-antd/src/views/mall/promotion/coupon/data.ts
View File

@@ -101,6 +101,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
formatter: 'formatDateTime',
},
{
field: 'actions',
title: '操作',
width: 100,
fixed: 'right',

3
apps/web-antd/src/views/mall/promotion/coupon/index.vue
View File

@@ -7,7 +7,6 @@ import { ref } from 'vue';
import { DocAlert, Page } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { $t } from '@vben/locales';
import { message, TabPane, Tabs } from 'ant-design-vue';
@@ -32,7 +31,7 @@ function handleRefresh() {
/** 删除优惠券 */
async function handleDelete(row: MallCouponApi.Coupon) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
content: '回收中...',
duration: 0,
});
try {

BIN
apps/web-antd/src/views/mall/promotion/kefu/asserts/a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
apps/web-antd/src/views/mall/promotion/kefu/asserts/aini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
apps/web-antd/src/views/mall/promotion/kefu/asserts/aixin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
apps/web-antd/src/views/mall/promotion/kefu/asserts/baiyan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

Some files were not shown because too many files have changed in this diff Show More