z9130
/
pansoft-plrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'test' of http://172.19.183.27:3000/z9130/pansoft-plrl into test
Frontend CI/CD / build (web-office) (push) Has been cancelled Details

This commit is contained in:
z9130 2024-10-24 18:57:09 +08:00
parent 221dde6793 9e07cf0214
commit 2e06e013b1
3 changed files with 339 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-test/src/router/routes/modules/dashboard.ts
View File

@ -148,7 +148,7 @@ const routes: RouteRecordRaw[] = [
meta: { meta: {
hideInMenu: true, hideInMenu: true,
icon: 'lucide:area-chart', icon: 'lucide:area-chart',
title: '代办管理', title: '待办管理',
}, },
}, },
{ {

18
apps/web-test/src/views/dashboard/home/components/Output5/index.vue
View File

@ -16,12 +16,15 @@ const props = defineProps({
default: {}, default: {},
}, },
}); });
const emits = defineEmits(['editGroupName']);
const cardName = ref(props.data.name); const cardName = ref(props.data.name);
const newCardName = ref(cardName.value); const newCardName = ref(cardName.value);
const isEdit = ref(true); const isEdit = ref(true);
const setNewName = () => { const setNewName = () => {
isEdit.value = !isEdit.value; isEdit.value = !isEdit.value;
cardName.value = newCardName.value; cardName.value = newCardName.value;
emits('editGroupName', props.data.i, cardName.value);
}; };
const { data } = toRefs(props); const { data } = toRefs(props);
@ -53,20 +56,17 @@ defineExpose({
@click="isEdit = !isEdit" @click="isEdit = !isEdit"
/> />
</div> </div>
<div v-else class="card-name titlt-top"> <div v-else class="card-name titlt-top flex items-center justify-between">
<Input <Input
v-model:value="newCardName" v-model:value="newCardName"
:autofocus="true" :autofocus="true"
:bordered="false" :bordered="false"
size="small" size="small"
> />
<template #addonAfter> <Space warp>
<Space warp> <CheckOutlined @click="setNewName" />
<CheckOutlined @click="setNewName" /> <CloseOutlined @click="isEdit = !isEdit" />
<CloseOutlined @click="isEdit = !isEdit" /> </Space>
</Space>
</template>
</Input>
</div> </div>
<GridGroup <GridGroup
ref="gridLayoutRef" ref="gridLayoutRef"

538
apps/web-test/src/views/dashboard/home/index.vue
View File

@ -7,6 +7,7 @@ import {
nextTick, nextTick,
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
reactive,
ref, ref,
} from 'vue'; } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -14,19 +15,27 @@ import { useRouter } from 'vue-router';
import { import {
CheckOutlined, CheckOutlined,
CloseCircleFilled, CloseCircleFilled,
CloseOutlined,
EditOutlined, EditOutlined,
PlusOutlined,
ShoppingCartOutlined, ShoppingCartOutlined,
UndoOutlined, UndoOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { import {
Button,
Checkbox, Checkbox,
CheckboxGroup,
Collapse, Collapse,
CollapsePanel, CollapsePanel,
FloatButton, FloatButton,
FloatButtonGroup, FloatButtonGroup,
Form,
FormItem,
Input,
InputGroup,
InputSearch,
Modal,
Popover, Popover,
Select,
SelectOption,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@ -144,6 +153,7 @@ const dragstart = (e, item) => {
defaultW = item.w; defaultW = item.w;
}; };
const drag = (e, item) => { const drag = (e, item) => {
shop.value = false;
e.preventDefault && e.preventDefault(); e.preventDefault && e.preventDefault();
const parentRect = document const parentRect = document
.querySelector('.grid-box') .querySelector('.grid-box')
@ -211,7 +221,6 @@ const drag = (e, item) => {
} }
}; };
const dragend = (e) => { const dragend = (e) => {
console.log('eeeee', e);
tilesIsMove.value = false; tilesIsMove.value = false;
const parentRect = document const parentRect = document
.querySelector('.grid-box') .querySelector('.grid-box')
@ -260,6 +269,7 @@ const dragend = (e) => {
'block'; 'block';
} catch {} } catch {}
} }
shop.value = true;
nextTick(() => { nextTick(() => {
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
tilesIsMove.value = true; tilesIsMove.value = true;
@ -345,7 +355,7 @@ const shop = ref(false);
// 编辑磁贴 // 编辑磁贴
const editTiles = ref(false); const editTiles = ref(false);
// 商店分组展开 // 商店分组展开
const activeKeyArr = ref(['1', '2', '3']); const activeKeyArr = ref([]);
// 选中的磁贴 // 选中的磁贴
const selectTilseArr = ref([]); const selectTilseArr = ref([]);
// 新增磁贴 // 新增磁贴
@ -396,44 +406,84 @@ const goPage = (item) => {
if (tilesIsMove.value) return; if (tilesIsMove.value) return;
router.push(item?.path); router.push(item?.path);
}; };
const addTilesForm = ref(null);
// 新增分组 // 新增分组
const addGroup = () => { const addGroup = () => {
const arr = JSON.parse(JSON.stringify(layout.value)); tilesIsMove.value = false;
const maxY = arr.reduce((max, item) => { addTilesForm.value.validateFields().then((res) => {
return Math.max(max, item.y); const arr = JSON.parse(JSON.stringify(layout.value));
}, -Infinity); const maxY = arr.reduce((max, item) => {
const obj = { return Math.max(max, item.y);
name: '新建分组', }, 0);
w: 4, const obj = {
h: 6, name: formState.name,
component: './components/Output5/index.vue', w: formState.w,
dom: '.titlt-top', h: formState.h,
isResize: true, component: './components/Output5/index.vue',
X: 0, isResize: true,
y: 0, x: 0,
i: Math.random() * 100, dom: '.titlt-top',
loadComp: loadComponent('./components/Output5/index.vue'), y: maxY + 1,
childer: [ i: Number.parseInt(Math.random() * 10_000),
{ loadComp: loadComponent('./components/Output5/index.vue'),
name1: 'AUTO_1612159241967.png', childer: [
name2: 'AUTO_1612159241967_C车辆调度.png', {
size: '2x2', name1: 'AUTO_1612159241967.png',
name: '车辆调度', name2: 'AUTO_1612159241967_C车辆调度.png',
w: 1, size: '2x2',
h: 2, name: '车辆调度',
i: 0, w: 1,
x: 1, h: 2,
y: 1, minW: 1,
component: '../../components/Output1/index.vue', 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,
});
</script> </script>
<template> <template>
@ -452,7 +502,6 @@ const addGroup = () => {
</div> --> </div> -->
<div class="grid-box index-grid select-none"> <div class="grid-box index-grid select-none">
<Button type="primary" @click="addGroup">新增分组</Button>
<grid-layout <grid-layout
v-if="rowHeight != 0" v-if="rowHeight != 0"
ref="gridLayout" ref="gridLayout"
@ -496,6 +545,7 @@ const addGroup = () => {
:key="item.i" :key="item.i"
:ref="(el) => setComponentRef(el, item.i)" :ref="(el) => setComponentRef(el, item.i)"
:data="item" :data="item"
@edit-group-name="editGroupName"
/> />
</div> </div>
</grid-item> </grid-item>
@ -518,6 +568,11 @@ const addGroup = () => {
</FloatButton> </FloatButton>
</template> </template>
<template v-else> <template v-else>
<FloatButton tooltip="新建分组" @click="addTilesModal = true">
<template #icon>
<PlusOutlined style="font-size: 20px" />
</template>
</FloatButton>
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')"> <FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
<template #icon> <template #icon>
<CheckOutlined style="font-size: 20px" /> <CheckOutlined style="font-size: 20px" />
@ -528,193 +583,206 @@ const addGroup = () => {
<UndoOutlined style="font-size: 20px" /> <UndoOutlined style="font-size: 20px" />
</template> </template>
</FloatButton> </FloatButton>
<Popover <Popover v-model:open="shop" placement="topRight" trigger="click">
v-model:open="shop" <template #title>
placement="topRight" <div class="flex items-center justify-between">
title="磁贴商店（127）" <div class="text-lg">磁贴商店（127）</div>
trigger="click" <CloseOutlined class="cursor-pointer" @click="shop = false" />
> </div>
</template>
<template #content> <template #content>
<InputGroup compact>
<Select v-model:value="shopFlotter">
<SelectOption value="1">全部应用磁贴</SelectOption>
<SelectOption value="2">Option2</SelectOption>
</Select>
<InputSearch placeholder="" style="width: 200px" />
</InputGroup>
<div class="shop-box"> <div class="shop-box">
<CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> <!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
<Collapse v-model:active-key="activeKeyArr" style="width: 100%"> <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
<CollapsePanel key="1" header="个人工作台（22）"> <CollapsePanel key="1" header="个人工作台（22）">
<!-- 可拖入的组件部分 --> <!-- 可拖入的组件部分 -->
<div class="components-box"> <div class="components-box">
<div <div
v-for="item in componentsInfo.slice(0, 22)" v-for="item in componentsInfo.slice(0, 22)"
:key="item.name" :key="item.name"
:class="{ active: selectTilseArr.includes(item.name) }" :class="{
class="ctrl-box bg-background" 'active pointer-events-none !cursor-no-drop': haveItem(
draggable="true" item.name,
@click="addTiles(item.name)" ),
@drag="drag" }"
@dragend="dragend($event)" :draggable="haveItem(item.name)"
@dragstart="dragstart($event, item)" class="ctrl-box bg-background relative"
> @click="addTiles(item.name)"
<div class="ctrl-name"> @drag="drag"
{{ `${item.name}(${item.size})` }} @dragend="dragend($event)"
</div> @dragstart="dragstart($event, item)"
<img :src="`/xbyt/${item.name2}`" alt="" /> >
<Checkbox <div class="ctrl-name">
:value="item.name" {{ `${item.name}(${item.size})` }}
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="haveItem(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="2" header="综合行政（12）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="2" header="综合行政（12）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(22, 34)" <div
:key="item.name" v-for="item in componentsInfo.slice(22, 34)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="3" header="经营管理（22）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="3" header="经营管理（22）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(34, 56)" <div
:key="item.name" v-for="item in componentsInfo.slice(34, 56)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="4" header="安全生产（19）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="4" header="安全生产（19）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(56, 75)" <div
:key="item.name" v-for="item in componentsInfo.slice(56, 75)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="5" header="勘探开发（26）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="5" header="勘探开发（26）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(75, 101)" <div
:key="item.name" v-for="item in componentsInfo.slice(75, 101)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="6" header="数据管理（1）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="6" header="数据管理（1）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(101, 102)" <div
:key="item.name" v-for="item in componentsInfo.slice(101, 102)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
<CollapsePanel key="7" header="总部系统（25）"> </CollapsePanel>
<div class="components-box"> <CollapsePanel key="7" header="总部系统（25）">
<div <div class="components-box">
v-for="item in componentsInfo.slice(102, 127)" <div
:key="item.name" v-for="item in componentsInfo.slice(102, 127)"
:class="{ active: selectTilseArr.includes(item.name) }" :key="item.name"
class="ctrl-box bg-background" :class="{ active: selectTilseArr.includes(item.name) }"
draggable="true" class="ctrl-box bg-background"
@click="addTiles(item.name)" draggable="true"
@drag="drag" @click="addTiles(item.name)"
@dragend="dragend" @drag="drag"
@dragstart="dragstart($event, item)" @dragend="dragend"
> @dragstart="dragstart($event, item)"
<div class="ctrl-name"> >
{{ `${item.name}(${item.size})` }} <div class="ctrl-name">
</div> {{ `${item.name}(${item.size})` }}
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox
:checked="selectTilseArr.includes(item.name)"
:value="item.name"
class="absolute bottom-0 right-1"
/>
</div> </div>
</CollapsePanel> </div>
</Collapse> </CollapsePanel>
</CheckboxGroup> </Collapse>
<!-- </CheckboxGroup> -->
</div> </div>
</template> </template>
<FloatButton tooltip="磁贴商店"> <FloatButton tooltip="磁贴商店">
@ -728,6 +796,49 @@ const addGroup = () => {
</Popover> </Popover>
</template> </template>
</FloatButtonGroup> </FloatButtonGroup>
<Modal
v-model:open="addTilesModal"
centered
title="新建分组"
@ok="addGroup"
>
<Form ref="addTilesForm" :model="formState">
<FormItem
:rules="[
{ required: true, message: '标题不能为空且长度不能超过50字节' },
]"
label="标题"
name="name"
>
<Input v-model:value="formState.name" placeholder="请输入" />
</FormItem>
<FormItem label="尺寸" name="w" required>
<div class="flex items-center gap-2">
<div class="flex items-center">
宽：
<Select v-model:value="formState.w">
<template v-for="item in 16" :key="item">
<SelectOption v-if="item >= 4" :value="item">
{{ item }}
</SelectOption>
</template>
</Select>
</div>
×
<div class="flex items-center">
高：
<Select v-model:value="formState.h">
<template v-for="item in 10" :key="item">
<SelectOption v-if="item >= 4" :value="item">
{{ item }}
</SelectOption>
</template>
</Select>
</div>
</div>
</FormItem>
</Form>
</Modal>
</div> </div>
</template> </template>
@ -788,6 +899,15 @@ const addGroup = () => {
object-fit: contain; 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 { .us-card-box {