Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into reform-mp
This commit is contained in:
@@ -16,6 +16,7 @@ import {
|
||||
erpCountInputFormatter,
|
||||
erpNumberFormatter,
|
||||
fenToYuan,
|
||||
formatFileSize,
|
||||
formatPast2,
|
||||
isFunction,
|
||||
isString,
|
||||
@@ -354,12 +355,7 @@ setupVbenVxeTable({
|
||||
// add by 星语:文件大小格式化
|
||||
vxeUI.formats.add('formatFileSize', {
|
||||
tableCellFormatMethod({ cellValue }, digits = 2) {
|
||||
if (!cellValue) return '0 B';
|
||||
const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const index = Math.floor(Math.log(cellValue) / Math.log(1024));
|
||||
const size = cellValue / 1024 ** index;
|
||||
const formattedSize = size.toFixed(digits);
|
||||
return `${formattedSize} ${unitArr[index]}`;
|
||||
return formatFileSize(cellValue, digits);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
@@ -10,11 +10,10 @@ import { computed, ref, toRefs, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { isFunction, isObject, isString } from '@vben/utils';
|
||||
import { checkFileType, isFunction, isObject, isString } from '@vben/utils';
|
||||
|
||||
import { Button, message, Upload } from 'ant-design-vue';
|
||||
|
||||
import { checkFileType } from './helper';
|
||||
import { UploadResultStatus } from './typing';
|
||||
import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* 默认图片类型
|
||||
*/
|
||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
||||
|
||||
export function checkFileType(file: File, accepts: string[]) {
|
||||
if (!accepts || accepts.length === 0) {
|
||||
return true;
|
||||
}
|
||||
const newTypes = accepts.join('|');
|
||||
const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
|
||||
return reg.test(file.name);
|
||||
}
|
||||
|
||||
export function checkImgType(
|
||||
file: File,
|
||||
accepts: string[] = defaultImageAccepts,
|
||||
) {
|
||||
return checkFileType(file, accepts);
|
||||
}
|
||||
@@ -10,11 +10,16 @@ import { computed, ref, toRefs, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { isFunction, isObject, isString } from '@vben/utils';
|
||||
import {
|
||||
defaultImageAccepts,
|
||||
isFunction,
|
||||
isImage,
|
||||
isObject,
|
||||
isString,
|
||||
} from '@vben/utils';
|
||||
|
||||
import { message, Modal, Upload } from 'ant-design-vue';
|
||||
|
||||
import { checkImgType, defaultImageAccepts } from './helper';
|
||||
import { UploadResultStatus } from './typing';
|
||||
import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
@@ -159,7 +164,7 @@ async function beforeUpload(file: File) {
|
||||
}
|
||||
|
||||
const { maxSize, accept } = props;
|
||||
const isAct = checkImgType(file, accept);
|
||||
const isAct = isImage(file.name, accept);
|
||||
if (!isAct) {
|
||||
message.error($t('ui.upload.acceptUpload', [accept]));
|
||||
isActMsg.value = false;
|
||||
|
||||
@@ -71,12 +71,15 @@ function toggleExpanded() {
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
@apply rounded-sm bg-gray-400/40;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400/60;
|
||||
}
|
||||
|
||||
@@ -191,11 +191,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '角色名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'category',
|
||||
label: '角色类别',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色类别',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'publicStatus',
|
||||
|
||||
@@ -40,7 +40,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
||||
const [Descriptions] = useDescription({
|
||||
bordered: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ const [SystemDescription] = useDescription({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<BaseDescription :data="business" />
|
||||
<Divider />
|
||||
<SystemDescription :data="business" />
|
||||
|
||||
@@ -46,7 +46,7 @@ async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
|
||||
await deleteBusinessStatus(row.id!);
|
||||
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
|
||||
handleRefresh();
|
||||
} catch {
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
|
||||
/** 添加状态 */
|
||||
async function handleAddStatus() {
|
||||
formData.value!.statuses!.unshift({
|
||||
formData.value!.statuses!.splice(-3, 0, {
|
||||
name: '',
|
||||
percent: undefined,
|
||||
} as any);
|
||||
|
||||
@@ -38,7 +38,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
||||
const [Descriptions] = useDescription({
|
||||
bordered: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ const [SystemDescriptions] = useDescription({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<BaseDescriptions :data="contact" />
|
||||
<Divider />
|
||||
<SystemDescriptions :data="contact" />
|
||||
|
||||
@@ -110,6 +110,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: false,
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择下单日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -120,6 +121,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: false,
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择合同开始时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -130,6 +132,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: false,
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择合同结束时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -197,6 +200,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
placeholder: '请输入产品总金额',
|
||||
},
|
||||
rules: z.number().min(0).optional().default(0),
|
||||
},
|
||||
@@ -207,6 +211,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
placeholder: '请输入整单折扣',
|
||||
},
|
||||
rules: z.number().min(0).max(100).optional().default(0),
|
||||
},
|
||||
|
||||
@@ -42,7 +42,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
||||
const [Descriptions] = useDescription({
|
||||
bordered: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ const [SystemDescriptions] = useDescription({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<BaseDescriptions :data="contract" />
|
||||
<Divider />
|
||||
<SystemDescriptions :data="contract" />
|
||||
|
||||
@@ -49,7 +49,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
|
||||
const [Descriptions] = useDescription({
|
||||
bordered: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ const [SystemDescriptions] = useDescription({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<BaseDescriptions :data="customer" />
|
||||
<Divider />
|
||||
<SystemDescriptions :data="customer" />
|
||||
|
||||
@@ -50,6 +50,7 @@ export function useFormSchema(
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择下次联系时间',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
|
||||
@@ -66,7 +66,8 @@ const [Modal, modalApi] = useVbenModal({
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as CrmPermissionApi.BusinessTransferReqVO;
|
||||
const data =
|
||||
(await formApi.getValues()) as CrmPermissionApi.BusinessTransferReqVO;
|
||||
try {
|
||||
switch (bizType.value) {
|
||||
case BizTypeEnum.CRM_BUSINESS: {
|
||||
|
||||
@@ -126,10 +126,8 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
/** 产品下拉选项 */
|
||||
const productOptions = ref<CrmProductApi.Product[]>([]);
|
||||
|
||||
/** 初始化 */
|
||||
const productOptions = ref<CrmProductApi.Product[]>([]); // 产品下拉选项
|
||||
onMounted(async () => {
|
||||
productOptions.value = await getProductSimpleList();
|
||||
});
|
||||
|
||||
@@ -66,7 +66,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
|
||||
formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
|
||||
] as [Date, Date],
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'interval',
|
||||
@@ -74,6 +74,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择时间间隔',
|
||||
options: getDictOptions(DICT_TYPE.DATE_INTERVAL, 'number'),
|
||||
},
|
||||
defaultValue: 2,
|
||||
@@ -91,6 +92,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
placeholder: '请选择归属部门',
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
|
||||
@@ -25,13 +25,11 @@ const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const [QueryForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: useGridFormSchema(),
|
||||
// 是否可展开
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: $t('common.query'),
|
||||
|
||||
@@ -40,7 +40,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
|
||||
formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
|
||||
] as [Date, Date],
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'interval',
|
||||
@@ -48,6 +48,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择时间间隔',
|
||||
options: getDictOptions(DICT_TYPE.DATE_INTERVAL, 'number'),
|
||||
},
|
||||
defaultValue: 2,
|
||||
@@ -65,6 +66,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
placeholder: '请选择归属部门',
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
@@ -77,6 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
allowClear: true,
|
||||
labelField: 'nickname',
|
||||
valueField: 'id',
|
||||
placeholder: '请选择员工',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -42,13 +42,11 @@ const gridEvents: VxeGridListeners = {
|
||||
};
|
||||
const [QueryForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: useGridFormSchema(),
|
||||
// 是否可展开
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: $t('common.query'),
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { useUserStore } from '@vben/stores';
|
||||
import { beginOfDay, endOfDay, formatDateTime, handleTree } from '@vben/utils';
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -28,20 +27,16 @@ export const customerSummaryTabs = [
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'times',
|
||||
label: '时间范围',
|
||||
component: 'RangePicker',
|
||||
fieldName: 'time',
|
||||
label: '选择年份',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
picker: 'year',
|
||||
showTime: false,
|
||||
format: 'YYYY',
|
||||
ranges: {},
|
||||
valueFormat: 'YYYY',
|
||||
placeholder: '请选择年份',
|
||||
},
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(new Date().getFullYear(), 0, 1))),
|
||||
formatDateTime(endOfDay(new Date(new Date().getFullYear(), 11, 31))),
|
||||
] as [Date, Date],
|
||||
defaultValue: new Date().getFullYear().toString(),
|
||||
},
|
||||
{
|
||||
fieldName: 'deptId',
|
||||
@@ -56,6 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
placeholder: '请选择归属部门',
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
|
||||
@@ -8,6 +8,7 @@ import { onMounted, ref } from 'vue';
|
||||
|
||||
import { ContentWrap, Page } from '@vben/common-ui';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { beginOfDay, endOfDay, formatDateTime } from '@vben/utils';
|
||||
|
||||
import { Tabs } from 'ant-design-vue';
|
||||
|
||||
@@ -29,13 +30,11 @@ const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const [QueryForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: useGridFormSchema(),
|
||||
// 是否可展开
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: $t('common.query'),
|
||||
@@ -70,6 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
async function handleTabChange(key: any) {
|
||||
activeTabName.value = key;
|
||||
const queryParams = (await formApi.getValues()) as any;
|
||||
// 将年份转换为年初和年末的日期时间
|
||||
const selectYear = Number.parseInt(queryParams.time);
|
||||
queryParams.times = [];
|
||||
queryParams.times[0] = formatDateTime(beginOfDay(new Date(selectYear, 0, 1)));
|
||||
queryParams.times[1] = formatDateTime(endOfDay(new Date(selectYear, 11, 31)));
|
||||
let data: any[] = [];
|
||||
const columnsData: any[] = [];
|
||||
let tableData: any[] = [];
|
||||
|
||||
@@ -39,13 +39,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
format: 'YYYY-MM-DD',
|
||||
picker: 'year',
|
||||
},
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
|
||||
formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
|
||||
] as [Date, Date],
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'deptId',
|
||||
@@ -60,6 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
placeholder: '请选择归属部门',
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
|
||||
@@ -27,13 +27,11 @@ const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef);
|
||||
|
||||
const [QueryForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: useGridFormSchema(),
|
||||
// 是否可展开
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: $t('common.query'),
|
||||
|
||||
@@ -57,7 +57,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
defaultValue: [
|
||||
formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
|
||||
formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
|
||||
] as [Date, Date],
|
||||
],
|
||||
},
|
||||
{
|
||||
fieldName: 'deptId',
|
||||
@@ -72,6 +72,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
treeDefaultExpandAll: true,
|
||||
placeholder: '请选择归属部门',
|
||||
},
|
||||
defaultValue: userStore.userInfo?.deptId,
|
||||
},
|
||||
|
||||
@@ -25,13 +25,11 @@ const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const [QueryForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: useGridFormSchema(),
|
||||
// 是否可展开
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: $t('common.query'),
|
||||
|
||||
@@ -47,6 +47,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择出生年',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -47,6 +47,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择出生日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -47,6 +47,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'x',
|
||||
placeholder: '请选择出生日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -189,7 +189,7 @@ function handleSliderChange(prop: string) {
|
||||
:max="100"
|
||||
:min="0"
|
||||
@change="handleSliderChange(dataRef.prop)"
|
||||
class="mr-[16px]"
|
||||
class="mr-4"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="2">
|
||||
|
||||
@@ -385,7 +385,7 @@ onMounted(() => {
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="bg-size-[auto_auto] relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-no-repeat"
|
||||
class="relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-auto bg-no-repeat"
|
||||
>
|
||||
<draggable
|
||||
v-model="pageComponents"
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useRoute } from 'vue-router';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
import { isEmpty, isNumber } from '@vben/utils';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { message, Radio, RadioGroup } from 'ant-design-vue';
|
||||
|
||||
@@ -26,29 +26,35 @@ defineOptions({ name: 'DiyTemplateDecorate' });
|
||||
const route = useRoute();
|
||||
const { refreshTab } = useTabs();
|
||||
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊:存储 reset 重置时,当前 selectedTemplateItem 值,从而进行恢复
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
|
||||
// 特殊:存储 reset 重置时,当前 selectedTemplateItem 值,从而进行恢复
|
||||
const DIY_PAGE_INDEX_KEY = 'diy_page_index';
|
||||
|
||||
const selectedTemplateItem = ref(0);
|
||||
// 左上角工具栏操作按钮
|
||||
const templateItems = ref([
|
||||
{ name: '基础设置', icon: 'lucide:settings' },
|
||||
{ name: '首页', icon: 'lucide:home' },
|
||||
{ name: '我的', icon: 'lucide:user' },
|
||||
]); // 左上角工具栏操作按钮
|
||||
{ key: 0, name: '基础设置', icon: 'lucide:settings' },
|
||||
{ key: 1, name: '首页', icon: 'lucide:home' },
|
||||
{ key: 2, name: '我的', icon: 'lucide:user' },
|
||||
]);
|
||||
|
||||
const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
|
||||
// 当前编辑的属性
|
||||
const currentFormData = ref<
|
||||
MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
|
||||
>({
|
||||
property: '',
|
||||
} as MallDiyPageApi.DiyPage); // 当前编辑的属性
|
||||
} as MallDiyPageApi.DiyPage);
|
||||
// templateItem 对应的缓存
|
||||
const currentFormDataMap = ref<
|
||||
Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
|
||||
>(new Map()); // templateItem 对应的缓存
|
||||
|
||||
const previewUrl = ref(''); // 商城 H5 预览地址
|
||||
|
||||
const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
|
||||
>(new Map());
|
||||
// 商城 H5 预览地址
|
||||
const previewUrl = ref('');
|
||||
// 模板组件库
|
||||
const templateLibs = [] as DiyComponentLibrary[];
|
||||
// 当前组件库
|
||||
const libs = ref<DiyComponentLibrary[]>(templateLibs);
|
||||
|
||||
/** 获取详情 */
|
||||
async function getPageDetail(id: any) {
|
||||
@@ -58,38 +64,32 @@ async function getPageDetail(id: any) {
|
||||
});
|
||||
try {
|
||||
formData.value = await getDiyTemplateProperty(id);
|
||||
|
||||
// 拼接手机预览链接
|
||||
const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
|
||||
const accessStore = useAccessStore();
|
||||
previewUrl.value = `${domain}?templateId=${formData.value.id}&${accessStore.tenantId}`;
|
||||
previewUrl.value = `${domain}?templateId=${formData.value.id}&tenantId=${accessStore.tenantId}`;
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/** 模板选项切换 */
|
||||
// TODO @xingyu:貌似切换不对;“个人中心”切换不过去;
|
||||
function handleTemplateItemChange(event: any) {
|
||||
// 从事件对象中获取值
|
||||
const val = event.target?.value ?? event;
|
||||
// 切换模版
|
||||
selectedTemplateItem.value = isNumber(val)
|
||||
? val
|
||||
: templateItems.value.findIndex((item) => item.name === val.name);
|
||||
|
||||
function handleTemplateItemChange(val: any) {
|
||||
const changeValue = val.target.value;
|
||||
// 缓存模版编辑数据
|
||||
currentFormDataMap.value.set(
|
||||
templateItems.value[selectedTemplateItem.value]?.name || '',
|
||||
templateItems.value[changeValue]!.name,
|
||||
currentFormData.value!,
|
||||
);
|
||||
// 切换模版
|
||||
selectedTemplateItem.value = changeValue;
|
||||
|
||||
// 读取模版缓存
|
||||
const data = currentFormDataMap.value.get(
|
||||
templateItems.value[selectedTemplateItem.value]?.name || '',
|
||||
templateItems.value[changeValue]!.name,
|
||||
);
|
||||
|
||||
// 情况一:编辑模板
|
||||
if (val === 0) {
|
||||
if (changeValue === 0) {
|
||||
libs.value = templateLibs;
|
||||
currentFormData.value = (isEmpty(data) ? formData.value : data) as
|
||||
| MallDiyPageApi.DiyPage
|
||||
@@ -99,22 +99,14 @@ function handleTemplateItemChange(event: any) {
|
||||
|
||||
// 情况二:编辑页面
|
||||
libs.value = PAGE_LIBS;
|
||||
const pageData = isEmpty(data)
|
||||
? formData.value!.pages.find(
|
||||
(page: MallDiyPageApi.DiyPage) =>
|
||||
page.name === templateItems.value[val]?.name,
|
||||
)
|
||||
: data;
|
||||
|
||||
// 如果找不到页面数据,使用默认值
|
||||
currentFormData.value = pageData
|
||||
? (pageData as
|
||||
| MallDiyPageApi.DiyPage
|
||||
| MallDiyTemplateApi.DiyTemplateProperty)
|
||||
: ({
|
||||
property: '',
|
||||
name: templateItems.value[val]?.name || '',
|
||||
} as MallDiyPageApi.DiyPage);
|
||||
currentFormData.value = (
|
||||
isEmpty(data)
|
||||
? formData.value!.pages.find(
|
||||
(page: MallDiyPageApi.DiyPage) =>
|
||||
page.name === templateItems.value[changeValue]!.name,
|
||||
)
|
||||
: data
|
||||
) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
@@ -210,15 +202,8 @@ onMounted(async () => {
|
||||
size="large"
|
||||
@change="handleTemplateItemChange"
|
||||
>
|
||||
<template v-for="(item, index) in templateItems" :key="index">
|
||||
<Radio.Button
|
||||
:value="item"
|
||||
:class="
|
||||
index === selectedTemplateItem
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<template v-for="item in templateItems" :key="item.key">
|
||||
<Radio.Button :value="item.key">
|
||||
<IconifyIcon
|
||||
:icon="item.icon"
|
||||
class="mt-2 flex size-5 items-center"
|
||||
|
||||
@@ -20,6 +20,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '秒杀时段名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入秒杀时段名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -160,12 +160,18 @@ export function useCreateFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'userId',
|
||||
label: '分销员编号',
|
||||
component: 'InputSearch',
|
||||
componentProps: {
|
||||
placeholder: '请输入分销员编号',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bindUserId',
|
||||
label: '上级推广员编号',
|
||||
component: 'InputSearch',
|
||||
componentProps: {
|
||||
placeholder: '请输入上级推广员编号',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
||||
@@ -178,6 +184,9 @@ export function useUpdateFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'bindUserId',
|
||||
label: '上级推广员编号',
|
||||
component: 'InputSearch',
|
||||
componentProps: {
|
||||
placeholder: '请输入上级推广员编号',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -21,6 +21,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '分组名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入分组名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -31,6 +31,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'mobile',
|
||||
label: '手机号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入手机号',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -21,6 +21,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'title',
|
||||
label: '公告标题',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入公告标题',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -21,12 +21,18 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '岗位名称',
|
||||
componentProps: {
|
||||
placeholder: '请输入岗位名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'code',
|
||||
label: '岗位编码',
|
||||
componentProps: {
|
||||
placeholder: '请输入岗位编码',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -35,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
placeholder: '请输入显示顺序',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
@@ -53,6 +60,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'remark',
|
||||
label: '岗位备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入岗位备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -26,12 +26,18 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '角色名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'code',
|
||||
label: '角色标识',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色标识',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -59,6 +65,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'remark',
|
||||
label: '角色备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
|
||||
placeholder: '请选择社交平台',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
|
||||
@@ -28,6 +28,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '租户名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入租户名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -46,18 +49,27 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'contactName',
|
||||
label: '联系人',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入联系人',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'contactMobile',
|
||||
label: '联系手机',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入联系手机',
|
||||
},
|
||||
rules: 'mobile',
|
||||
},
|
||||
{
|
||||
label: '用户名称',
|
||||
fieldName: 'username',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入用户名称',
|
||||
},
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
triggerFields: ['id'],
|
||||
@@ -78,6 +90,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
label: '账号额度',
|
||||
fieldName: 'accountCount',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
placeholder: '请输入账号额度',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'name',
|
||||
label: '套餐名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入套餐名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -45,6 +48,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -28,6 +28,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'username',
|
||||
label: '用户名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入用户名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -44,6 +47,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'nickname',
|
||||
label: '用户昵称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入用户昵称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -117,6 +123,9 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user