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,
+});
@@ -452,7 +502,6 @@ const addGroup = () => {
-->
-
{
:key="item.i"
:ref="(el) => setComponentRef(el, item.i)"
:data="item"
+ @edit-group-name="editGroupName"
/>
@@ -518,6 +568,11 @@ const addGroup = () => {
+
+
+
+
+
@@ -528,193 +583,206 @@ const addGroup = () => {
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
-
-
- {{ `${item.name}(${item.size})` }}
-
-
-
+
+
+
+
+
+
+ {{ `${item.name}(${item.size})` }}
+
+
-
-
-
+
+
+
+
@@ -728,6 +796,49 @@ const addGroup = () => {
+
+
+
@@ -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 {