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
Frontend CI/CD / build (web-office) (push) Has been cancelled
Details
This commit is contained in:
commit
2e06e013b1
|
|
@ -148,7 +148,7 @@ const routes: RouteRecordRaw[] = [
|
|||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '代办管理',
|
||||
title: '待办管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="card-name titlt-top">
|
||||
<div v-else class="card-name titlt-top flex items-center justify-between">
|
||||
<Input
|
||||
v-model:value="newCardName"
|
||||
:autofocus="true"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
>
|
||||
<template #addonAfter>
|
||||
/>
|
||||
<Space warp>
|
||||
<CheckOutlined @click="setNewName" />
|
||||
<CloseOutlined @click="isEdit = !isEdit" />
|
||||
</Space>
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<GridGroup
|
||||
ref="gridLayoutRef"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
} from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
|
@ -14,19 +15,27 @@ import { useRouter } from 'vue-router';
|
|||
import {
|
||||
CheckOutlined,
|
||||
CloseCircleFilled,
|
||||
CloseOutlined,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
ShoppingCartOutlined,
|
||||
UndoOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Collapse,
|
||||
CollapsePanel,
|
||||
FloatButton,
|
||||
FloatButtonGroup,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputSearch,
|
||||
Modal,
|
||||
Popover,
|
||||
Select,
|
||||
SelectOption,
|
||||
} from 'ant-design-vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
|
|
@ -144,6 +153,7 @@ const dragstart = (e, item) => {
|
|||
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,23 +406,25 @@ const goPage = (item) => {
|
|||
if (tilesIsMove.value) return;
|
||||
router.push(item?.path);
|
||||
};
|
||||
|
||||
const addTilesForm = ref(null);
|
||||
// 新增分组
|
||||
const addGroup = () => {
|
||||
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);
|
||||
}, -Infinity);
|
||||
}, 0);
|
||||
const obj = {
|
||||
name: '新建分组',
|
||||
w: 4,
|
||||
h: 6,
|
||||
name: formState.name,
|
||||
w: formState.w,
|
||||
h: formState.h,
|
||||
component: './components/Output5/index.vue',
|
||||
dom: '.titlt-top',
|
||||
isResize: true,
|
||||
X: 0,
|
||||
y: 0,
|
||||
i: Math.random() * 100,
|
||||
x: 0,
|
||||
dom: '.titlt-top',
|
||||
y: maxY + 1,
|
||||
i: Number.parseInt(Math.random() * 10_000),
|
||||
loadComp: loadComponent('./components/Output5/index.vue'),
|
||||
childer: [
|
||||
{
|
||||
|
|
@ -422,18 +434,56 @@ const addGroup = () => {
|
|||
name: '车辆调度',
|
||||
w: 1,
|
||||
h: 2,
|
||||
minW: 1,
|
||||
minH: 2,
|
||||
i: 0,
|
||||
x: 1,
|
||||
y: 1,
|
||||
component: '../../components/Output1/index.vue',
|
||||
component: '../Output1/index.vue',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -452,7 +502,6 @@ const addGroup = () => {
|
|||
</div> -->
|
||||
|
||||
<div class="grid-box index-grid select-none">
|
||||
<Button type="primary" @click="addGroup">新增分组</Button>
|
||||
<grid-layout
|
||||
v-if="rowHeight != 0"
|
||||
ref="gridLayout"
|
||||
|
|
@ -496,6 +545,7 @@ const addGroup = () => {
|
|||
:key="item.i"
|
||||
:ref="(el) => setComponentRef(el, item.i)"
|
||||
:data="item"
|
||||
@edit-group-name="editGroupName"
|
||||
/>
|
||||
</div>
|
||||
</grid-item>
|
||||
|
|
@ -518,6 +568,11 @@ const addGroup = () => {
|
|||
</FloatButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FloatButton tooltip="新建分组" @click="addTilesModal = true">
|
||||
<template #icon>
|
||||
<PlusOutlined style="font-size: 20px" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
|
||||
<template #icon>
|
||||
<CheckOutlined style="font-size: 20px" />
|
||||
|
|
@ -528,15 +583,23 @@ const addGroup = () => {
|
|||
<UndoOutlined style="font-size: 20px" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<Popover
|
||||
v-model:open="shop"
|
||||
placement="topRight"
|
||||
title="磁贴商店（127）"
|
||||
trigger="click"
|
||||
>
|
||||
<Popover v-model:open="shop" placement="topRight" trigger="click">
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-lg">磁贴商店（127）</div>
|
||||
<CloseOutlined class="cursor-pointer" @click="shop = false" />
|
||||
</div>
|
||||
</template>
|
||||
<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">
|
||||
<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%">
|
||||
<CollapsePanel key="1" header="个人工作台（22）">
|
||||
<!-- 可拖入的组件部分 -->
|
||||
|
|
@ -544,9 +607,13 @@ const addGroup = () => {
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(0, 22)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
:draggable="haveItem(item.name)"
|
||||
class="ctrl-box bg-background relative"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend($event)"
|
||||
|
|
@ -557,6 +624,7 @@ const addGroup = () => {
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -714,7 +782,7 @@ const addGroup = () => {
|
|||
</div>
|
||||
</CollapsePanel>
|
||||
</Collapse>
|
||||
</CheckboxGroup>
|
||||
<!-- </CheckboxGroup> -->
|
||||
</div>
|
||||
</template>
|
||||
<FloatButton tooltip="磁贴商店">
|
||||
|
|
@ -728,6 +796,49 @@ const addGroup = () => {
|
|||
</Popover>
|
||||
</template>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue