diff --git a/apps/web-test/src/router/routes/modules/dashboard.ts b/apps/web-test/src/router/routes/modules/dashboard.ts index b4a9eb25..104a811b 100644 --- a/apps/web-test/src/router/routes/modules/dashboard.ts +++ b/apps/web-test/src/router/routes/modules/dashboard.ts @@ -148,7 +148,7 @@ const routes: RouteRecordRaw[] = [ meta: { hideInMenu: true, icon: 'lucide:area-chart', - title: '代办管理', + title: '待办管理', }, }, { diff --git a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue index 61fec643..eab10fd9 100644 --- a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue +++ b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue @@ -16,12 +16,15 @@ const props = defineProps({ default: {}, }, }); +const emits = defineEmits(['editGroupName']); const cardName = ref(props.data.name); const newCardName = ref(cardName.value); const isEdit = ref(true); const setNewName = () => { isEdit.value = !isEdit.value; cardName.value = newCardName.value; + + emits('editGroupName', props.data.i, cardName.value); }; const { data } = toRefs(props); @@ -53,20 +56,17 @@ defineExpose({ @click="isEdit = !isEdit" /> -
+
- - + /> + + + +
{ defaultW = item.w; }; const drag = (e, item) => { + shop.value = false; e.preventDefault && e.preventDefault(); const parentRect = document .querySelector('.grid-box') @@ -211,7 +221,6 @@ const drag = (e, item) => { } }; const dragend = (e) => { - console.log('eeeee', e); tilesIsMove.value = false; const parentRect = document .querySelector('.grid-box') @@ -260,6 +269,7 @@ const dragend = (e) => { 'block'; } catch {} } + shop.value = true; nextTick(() => { // eslint-disable-next-line no-use-before-define tilesIsMove.value = true; @@ -345,7 +355,7 @@ const shop = ref(false); // 编辑磁贴 const editTiles = ref(false); // 商店分组展开 -const activeKeyArr = ref(['1', '2', '3']); +const activeKeyArr = ref([]); // 选中的磁贴 const selectTilseArr = ref([]); // 新增磁贴 @@ -396,44 +406,84 @@ const goPage = (item) => { if (tilesIsMove.value) return; router.push(item?.path); }; - +const addTilesForm = ref(null); // 新增分组 const addGroup = () => { - const arr = JSON.parse(JSON.stringify(layout.value)); - const maxY = arr.reduce((max, item) => { - return Math.max(max, item.y); - }, -Infinity); - const obj = { - name: '新建分组', - w: 4, - h: 6, - component: './components/Output5/index.vue', - dom: '.titlt-top', - isResize: true, - X: 0, - y: 0, - i: Math.random() * 100, - loadComp: loadComponent('./components/Output5/index.vue'), - childer: [ - { - name1: 'AUTO_1612159241967.png', - name2: 'AUTO_1612159241967_C车辆调度.png', - size: '2x2', - name: '车辆调度', - w: 1, - h: 2, - i: 0, - x: 1, - y: 1, - component: '../../components/Output1/index.vue', - }, - ], - }; + tilesIsMove.value = false; + addTilesForm.value.validateFields().then((res) => { + const arr = JSON.parse(JSON.stringify(layout.value)); + const maxY = arr.reduce((max, item) => { + return Math.max(max, item.y); + }, 0); + const obj = { + name: formState.name, + w: formState.w, + h: formState.h, + component: './components/Output5/index.vue', + isResize: true, + x: 0, + dom: '.titlt-top', + y: maxY + 1, + i: Number.parseInt(Math.random() * 10_000), + loadComp: loadComponent('./components/Output5/index.vue'), + childer: [ + { + name1: 'AUTO_1612159241967.png', + name2: 'AUTO_1612159241967_C车辆调度.png', + size: '2x2', + name: '车辆调度', + w: 1, + h: 2, + minW: 1, + minH: 2, + i: 0, + x: 1, + y: 1, + component: '../Output1/index.vue', + }, + ], + }; - layout.value.push(obj); + layout.value.push(obj); + formState.name = ''; + formState.w = 4; + formState.h = 4; - console.log(layout.value, '00000'); + addTilesModal.value = false; + nextTick(() => { + tilesIsMove.value = true; + }); + }); }; + +// 编辑分组名称 +const editGroupName = (i, name) => { + layout.value.forEach((element) => { + if (element.i == i) { + element.name = name; + } + }); + + const newLayout = JSON.parse(JSON.stringify(layout.value)); + window.localStorage.setItem('layout', JSON.stringify(newLayout)); +}; + +// 查找画布中有没有当前元素 +const haveItem = (name) => { + return layout.value.some((item) => item.name == name); +}; + +// 磁贴商店筛选 +const shopFlotter = ref('1'); + +// 新建磁贴弹层 +const addTilesModal = ref(false); + +const formState = reactive({ + name: '', + w: 4, + h: 4, +}); + +
+ + + + +
+
+ 宽： + +
+ × +
+ 高： + +
+
+ +
+
@@ -788,6 +899,15 @@ const addGroup = () => { object-fit: contain; } } + + .mask { + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + background: rgba($color: #000000, $alpha: 0.4); + } } .us-card-box {