磁贴编辑、磁贴审核、待办表格
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:
parent
4f2a4abc85
commit
201cfd7322
|
@ -113,7 +113,6 @@ watch(builtinValue, (n, o) => {
|
|||
builtinType: n
|
||||
}
|
||||
})
|
||||
console.log('zzzz',preferences.theme.builtinType);
|
||||
})
|
||||
let menuOpen = ref(preferences.sidebar.enable)
|
||||
watch(menuOpen, (n, o) => {
|
||||
|
@ -122,7 +121,6 @@ watch(menuOpen, (n, o) => {
|
|||
enable: n
|
||||
}
|
||||
})
|
||||
console.log('zz111zz',n);
|
||||
})
|
||||
let menuTheme = ref(preferences.theme.semiDarkSidebar)
|
||||
watch(menuTheme, (n, o) => {
|
||||
|
@ -131,7 +129,6 @@ watch(menuTheme, (n, o) => {
|
|||
semiDarkSidebar: n
|
||||
}
|
||||
})
|
||||
console.log('zz222zz',n);
|
||||
})
|
||||
let value1 = ref('')
|
||||
let activeKey = ref('1');
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import type { App } from 'vue';
|
||||
|
||||
import FastCrud from '@fast-crud/fast-crud';
|
||||
import ui from '@fast-crud/ui-antdv4';
|
||||
import Antdv from 'ant-design-vue';
|
||||
import '@fast-crud/fast-crud/dist/style.css';
|
||||
import '@fast-crud/ui-antdv4/dist/style.css';
|
||||
|
||||
export function registerFastCrud(app: App) {
|
||||
app.use(Antdv);
|
||||
app.use(ui);
|
||||
app.use(FastCrud, {
|
||||
});
|
||||
}
|
|
@ -0,0 +1,202 @@
|
|||
import type { App } from 'vue';
|
||||
|
||||
import VXETable from 'vxe-table'
|
||||
|
||||
import {
|
||||
VxeTable,
|
||||
VxeColumn,
|
||||
VxeColgroup,
|
||||
VxeGrid,
|
||||
VxeToolbar
|
||||
} from 'vxe-table'
|
||||
|
||||
import VxeUI from 'vxe-pc-ui'
|
||||
|
||||
import {
|
||||
|
||||
VxeAlert,
|
||||
VxeAnchor,
|
||||
VxeAnchorLink,
|
||||
VxeBreadcrumb,
|
||||
VxeBreadcrumbItem,
|
||||
VxeButton,
|
||||
VxeButtonGroup,
|
||||
VxeCalendar,
|
||||
VxeCard,
|
||||
VxeCarousel,
|
||||
VxeCheckbox,
|
||||
VxeCheckboxGroup,
|
||||
VxeCol,
|
||||
VxeCollapse,
|
||||
VxeCollapsePane,
|
||||
VxeDatePicker,
|
||||
VxeDrawer,
|
||||
VxeForm,
|
||||
VxeFormDesign,
|
||||
VxeFormGather,
|
||||
VxeFormItem,
|
||||
VxeFormView,
|
||||
VxeIcon,
|
||||
VxeIconPicker,
|
||||
VxeImage,
|
||||
VxeImageGroup,
|
||||
VxeImagePreview,
|
||||
VxeInput,
|
||||
VxeLayoutAside,
|
||||
VxeLayoutBody,
|
||||
VxeLayoutContainer,
|
||||
VxeLayoutFooter,
|
||||
VxeLayoutHeader,
|
||||
VxeLink,
|
||||
VxeListDesign,
|
||||
VxeListView,
|
||||
VxeList,
|
||||
VxeLoading,
|
||||
VxeMenu,
|
||||
VxeModal,
|
||||
VxeNumberInput,
|
||||
VxeOptgroup,
|
||||
VxeOption,
|
||||
VxePager,
|
||||
VxePasswordInput,
|
||||
VxePrintPageBreak,
|
||||
VxePrint,
|
||||
VxePulldown,
|
||||
VxeRadio,
|
||||
VxeRadioButton,
|
||||
VxeRadioGroup,
|
||||
VxeRow,
|
||||
VxeSelect,
|
||||
VxeSwitch,
|
||||
VxeTabPane,
|
||||
VxeTabs,
|
||||
VxeTag,
|
||||
VxeText,
|
||||
VxeTextarea,
|
||||
VxeTip,
|
||||
VxeTooltip,
|
||||
VxeTree,
|
||||
VxeTreeSelect,
|
||||
VxeUpload
|
||||
} from 'vxe-pc-ui'
|
||||
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
import ExcelJS from 'exceljs'
|
||||
|
||||
import VXETablePluginAntd from 'vxe-table-plugin-antd'
|
||||
|
||||
// 导入主题变量,也可以重写主题变量
|
||||
import 'vxe-pc-ui/lib/style.css'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import 'vxe-table/styles/cssvar.scss'
|
||||
import 'vxe-pc-ui/styles/cssvar.scss'
|
||||
|
||||
// VxeUI.setTheme('dark')
|
||||
|
||||
VxeUI.component(VxeAlert)
|
||||
VxeUI.component(VxeAnchor)
|
||||
VxeUI.component(VxeAnchorLink)
|
||||
VxeUI.component(VxeBreadcrumb)
|
||||
VxeUI.component(VxeBreadcrumbItem)
|
||||
VxeUI.component(VxeButton)
|
||||
VxeUI.component(VxeButtonGroup)
|
||||
VxeUI.component(VxeCalendar)
|
||||
VxeUI.component(VxeCard)
|
||||
VxeUI.component(VxeCarousel)
|
||||
VxeUI.component(VxeCheckbox)
|
||||
VxeUI.component(VxeCheckboxGroup)
|
||||
VxeUI.component(VxeCol)
|
||||
VxeUI.component(VxeCollapse)
|
||||
VxeUI.component(VxeCollapsePane)
|
||||
VxeUI.component(VxeDatePicker)
|
||||
VxeUI.component(VxeDrawer)
|
||||
VxeUI.component(VxeForm)
|
||||
VxeUI.component(VxeFormDesign)
|
||||
VxeUI.component(VxeFormGather)
|
||||
VxeUI.component(VxeFormItem)
|
||||
VxeUI.component(VxeFormView)
|
||||
VxeUI.component(VxeIcon)
|
||||
VxeUI.component(VxeIconPicker)
|
||||
VxeUI.component(VxeImage)
|
||||
VxeUI.component(VxeImageGroup)
|
||||
VxeUI.component(VxeImagePreview)
|
||||
VxeUI.component(VxeInput)
|
||||
VxeUI.component(VxeLayoutAside)
|
||||
VxeUI.component(VxeLayoutBody)
|
||||
VxeUI.component(VxeLayoutContainer)
|
||||
VxeUI.component(VxeLayoutFooter)
|
||||
VxeUI.component(VxeLayoutHeader)
|
||||
VxeUI.component(VxeLink)
|
||||
VxeUI.component(VxeListDesign)
|
||||
VxeUI.component(VxeListView)
|
||||
VxeUI.component(VxeList)
|
||||
VxeUI.component(VxeLoading)
|
||||
VxeUI.component(VxeMenu)
|
||||
VxeUI.component(VxeModal)
|
||||
VxeUI.component(VxeNumberInput)
|
||||
VxeUI.component(VxeOptgroup)
|
||||
VxeUI.component(VxeOption)
|
||||
VxeUI.component(VxePager)
|
||||
VxeUI.component(VxePasswordInput)
|
||||
VxeUI.component(VxePrintPageBreak)
|
||||
VxeUI.component(VxePrint)
|
||||
VxeUI.component(VxePulldown)
|
||||
VxeUI.component(VxeRadio)
|
||||
VxeUI.component(VxeRadioButton)
|
||||
VxeUI.component(VxeRadioGroup)
|
||||
VxeUI.component(VxeRow)
|
||||
VxeUI.component(VxeSelect)
|
||||
VxeUI.component(VxeSwitch)
|
||||
VxeUI.component(VxeTabPane)
|
||||
VxeUI.component(VxeTabs)
|
||||
VxeUI.component(VxeTag)
|
||||
VxeUI.component(VxeText)
|
||||
VxeUI.component(VxeTextarea)
|
||||
VxeUI.component(VxeTip)
|
||||
VxeUI.component(VxeTooltip)
|
||||
VxeUI.component(VxeTree)
|
||||
VxeUI.component(VxeTreeSelect)
|
||||
VxeUI.component(VxeUpload)
|
||||
|
||||
VxeUI.component(VxeTable)
|
||||
VxeUI.component(VxeColumn)
|
||||
VxeUI.component(VxeColgroup)
|
||||
VxeUI.component(VxeGrid)
|
||||
VxeUI.component(VxeToolbar)
|
||||
|
||||
VXETable.use(VXETablePluginAntd)
|
||||
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
})
|
||||
|
||||
VXETable.setConfig({
|
||||
// zIndex: 9999,
|
||||
grid: {
|
||||
size: 'mini',
|
||||
proxyConfig: {
|
||||
props: {
|
||||
result: 'data.rows',
|
||||
total: 'data.total',
|
||||
},
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
|
||||
pager: {
|
||||
background: true,
|
||||
pageSize: 50,
|
||||
pageSizes: [50, 100, 300, 500, 1000],
|
||||
layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
|
||||
},
|
||||
})
|
||||
export function registerVxeTable(app: App) {
|
||||
app.use(VxeUI)
|
||||
app.use(VxeTable)
|
||||
app.use(VxeColumn)
|
||||
app.use(VxeColgroup)
|
||||
app.use(VxeGrid)
|
||||
app.use(VxeToolbar)
|
||||
}
|
|
@ -70,10 +70,43 @@ const routes: RouteRecordRaw[] = [
|
|||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '总部系统',
|
||||
affixTab: true
|
||||
},
|
||||
},
|
||||
|
||||
...getRouter(firstRouter, 'first')
|
||||
...getRouter(firstRouter, 'first'),
|
||||
{
|
||||
name: 'portal',
|
||||
path: '/portal',
|
||||
component: () => import('#/views/dashboard/home/portal.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '磁贴管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'audit',
|
||||
path: '/audit',
|
||||
component: () => import('#/views/dashboard/home/audit.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '磁贴审核',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'test',
|
||||
// path: '/test',
|
||||
// component: () => import('#/views/dashboard/home/test.vue'),
|
||||
// // component: () => import('#/views/dashboard/home/main.vue'),
|
||||
// meta: {
|
||||
// icon: 'lucide:area-chart',
|
||||
// title: '测试',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'zshxgw',
|
||||
// path: '',
|
||||
|
@ -105,6 +138,4 @@ const routes: RouteRecordRaw[] = [
|
|||
...getRouter(otherRouter,'other')
|
||||
];
|
||||
|
||||
console.log('999999',...getRouter(otherRouter,'other'));
|
||||
|
||||
export default routes;
|
||||
|
|
|
@ -28,3 +28,4 @@
|
|||
// ];
|
||||
|
||||
// export default routes;
|
||||
export default [];
|
||||
|
|
|
@ -79,3 +79,4 @@
|
|||
// ];
|
||||
|
||||
// export default routes;
|
||||
export default [];
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<VueDraggable class="drag-area" tag="ul" v-model="list" group="g1">
|
||||
<li v-for="el in modelValue" :key="el.name" class="grup-box">
|
||||
<p>{{ el.name }}</p>
|
||||
<nested-component v-model="el.children" />
|
||||
</li>
|
||||
</VueDraggable>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface IList {
|
||||
name: string
|
||||
children: IList[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: IList[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: IList[]): void
|
||||
}
|
||||
|
||||
const emits = defineEmits<Emits>()
|
||||
const list = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => emits('update:modelValue', value)
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag-area {
|
||||
min-height: 50px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
|
||||
<div class="top-box flex justify-between items-center">
|
||||
<Button type="primary">批量审批</Button>
|
||||
<div class="flex items-center gap-2">
|
||||
<VbenIconButton
|
||||
class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
|
||||
<UnorderedListOutlined />
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle :type="'audit'" :list="list" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
VbenIconButton,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
import CardTitle from './components/CardTiles/index.vue';
|
||||
import { UnorderedListOutlined } from '@ant-design/icons-vue';
|
||||
import { Button} from 'ant-design-vue';
|
||||
import { tilesList } from './tiles'
|
||||
|
||||
let list: any[] = []
|
||||
for (let i = tilesList.length; i > 0; i--) {
|
||||
if(!tilesList[i]?.name) continue;
|
||||
let obj: any = {}
|
||||
obj.name = tilesList[i]?.name;
|
||||
obj.url = tilesList[i]?.name2;
|
||||
obj.work = '经营管理';
|
||||
obj.code = tilesList[i]?.name1.split('.')[0];
|
||||
list.push(obj);
|
||||
obj = null
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tiles-list {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-bt-box {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-box:hover {
|
||||
.mask-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div class="content-box bg-[#fff] px-3 mt-2 h-[100%]">
|
||||
<div class="filter-box py-3">
|
||||
<Form layout="inline">
|
||||
<FormItem label="标题">
|
||||
<Input class="!w-[150px]"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="业务域">
|
||||
<Select placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="适用范围">
|
||||
<Select v-model:value="scope" :options="options2" placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="状态" v-if="type == 'portal'">
|
||||
<Select placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3 ">
|
||||
<Card class="w-[18%] relative card-box" :bodyStyle="{ padding: 0 }"
|
||||
v-for="(item, index) in list.slice(0, 10)" :key="index">
|
||||
<div class="card-tp-b flex flex-col items-center">
|
||||
<img :src="'/xbyt/' + item.url" alt="" class="mt-3 w-[100px] h-[100px]">
|
||||
<div class="text-sm pb-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="card-bt-box pt-2 pl-6 text-xs flex flex-col gap-1 pb-3">
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">编码:</div>{{ item.code }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">标题:</div>{{ item.name }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">业务域:</div>{{ item.work }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask-box hidden">
|
||||
<div v-if="type == 'portal'"
|
||||
class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
|
||||
<Button type="primary">修改</Button>
|
||||
<Button type="primary" danger>删除</Button>
|
||||
</div>
|
||||
<div v-else-if="type == 'audit'"
|
||||
class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
|
||||
<Button type="primary">通过</Button>
|
||||
<Button type="primary" danger>驳回</Button>
|
||||
</div>
|
||||
<ExpandOutlined class="absolute top-2 right-2 text-[#fff]" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Pagination v-model:current="current" :total="500" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref,toRefs } from 'vue';
|
||||
|
||||
import { ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination } from 'ant-design-vue';
|
||||
import { tilesList } from '../../tiles'
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Object,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
let { list,type } = toRefs(props);
|
||||
for (let i = 0; i < tilesList.length; i++) {
|
||||
let obj: any = {}
|
||||
obj.name = tilesList[i]?.name;
|
||||
obj.url = tilesList[i]?.name2;
|
||||
obj.work = '经营管理';
|
||||
obj.code = tilesList[i]?.name1.split('.')[0];
|
||||
list.value.push(obj);
|
||||
obj = null
|
||||
}
|
||||
let scope = 'all'
|
||||
|
||||
const options2 = [
|
||||
{
|
||||
value: 'all',
|
||||
label: '全部',
|
||||
},
|
||||
]
|
||||
let current = ref(1)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tiles-list {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-bt-box {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-box:hover {
|
||||
.mask-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,12 +1,10 @@
|
|||
<script setup>
|
||||
import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref } from 'vue';
|
||||
import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref,nextTick } from 'vue';
|
||||
|
||||
import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
|
||||
import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
|
||||
|
||||
|
||||
// import GridGroup from './components/GridGroup/index.vue'
|
||||
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -19,6 +17,44 @@ let { list } = toRefs(props);
|
|||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const layout = ref(JSON.parse(JSON.stringify(list.value)));
|
||||
onMounted(() => {
|
||||
layout.value = [
|
||||
{
|
||||
"x": 1,
|
||||
"y": 0,
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"i": "1728964990256",
|
||||
"component": {
|
||||
"name1": "AUTO_1612155980933.png",
|
||||
"name2": "AUTO_1612155980933_C会议管理.png",
|
||||
"size": "2x2",
|
||||
"name": "会议管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "../Output1/index.vue",
|
||||
"i": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"x": 4,
|
||||
"y": 0,
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"i": "1728965029729",
|
||||
"component": {
|
||||
"name1": "AUTO_1612155980933.png",
|
||||
"name2": "AUTO_1612155980933_C会议管理.png",
|
||||
"size": "2x2",
|
||||
"name": "会议管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "../Output1/index.vue",
|
||||
"i": 0
|
||||
},
|
||||
},
|
||||
]
|
||||
})
|
||||
const colNum = 12;
|
||||
let defaultH = 2;
|
||||
let defaultW = 2;
|
||||
|
@ -33,7 +69,6 @@ const DragPos = {
|
|||
h: null,
|
||||
i: null,
|
||||
};
|
||||
const componentsInfo = list
|
||||
// [
|
||||
// {
|
||||
// id: '1-1',
|
||||
|
@ -182,6 +217,8 @@ const drag = (e, item) => {
|
|||
}
|
||||
};
|
||||
const dragend = (e) => {
|
||||
console.log('eeeee',e);
|
||||
tilesIsMove.value = false;
|
||||
const parentRect = document
|
||||
.querySelector('.grid-box')
|
||||
.getBoundingClientRect();
|
||||
|
@ -212,6 +249,8 @@ const dragend = (e) => {
|
|||
w: currentDragCom.w,
|
||||
h: currentDragCom.h,
|
||||
i: DragPos.i,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
component: currentDragCom,
|
||||
loadComp,
|
||||
});
|
||||
|
@ -226,8 +265,12 @@ const dragend = (e) => {
|
|||
try {
|
||||
proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
|
||||
'block';
|
||||
} catch { }
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
nextTick(()=>{
|
||||
tilesIsMove.value = true;
|
||||
})
|
||||
};
|
||||
// 尺寸变更后,触发resize事件,使图表resize
|
||||
const resizedEvent = (e) => {
|
||||
|
@ -249,7 +292,7 @@ let shop = ref(false)
|
|||
// 编辑磁贴
|
||||
let editTiles = ref(false)
|
||||
// 商店分组展开
|
||||
let activeKeyArr = ref(['1','2','3'])
|
||||
let activeKeyArr = ref(['1', '2', '3'])
|
||||
// 选中的磁贴
|
||||
let selectTilseArr = ref([])
|
||||
// 新增磁贴
|
||||
|
@ -265,49 +308,54 @@ let addTiles = (val) => {
|
|||
|
||||
selectTilseArr.value = arr
|
||||
}
|
||||
// 磁贴是否可拖拽
|
||||
let tilesIsMove = ref(true)
|
||||
// 取消和确定编辑磁贴
|
||||
let cancelOrSure = (type) => {
|
||||
if (type == 'cance') {
|
||||
editTiles.value = false;
|
||||
tilesIsMove.value = false;
|
||||
} else if (type == 'sure') {
|
||||
editTiles.value = true;
|
||||
tilesIsMove.value = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container h-[calc(100%-10px)]">
|
||||
|
||||
<div class="container-group">
|
||||
<!-- 自定义布局的部分 -->
|
||||
<div class="grid-box ">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="true" :is-mirrored="false" :auto-size="false" :responsive="false"
|
||||
:is-resizable="false" :margin="[10, 10]" :row-height="45" :vertical-compact="true">
|
||||
<div class="grid-box select-none">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="3" :is-draggable="tilesIsMove" :is-mirrored="false"
|
||||
:auto-size="false" :is-resizable="tilesIsMove" :margin="[10, 10]" :row-height="55"
|
||||
:vertical-compact="true">
|
||||
|
||||
<grid-item v-for="item in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w" :x="item.x"
|
||||
:y="item.y" :dragAllowFrom="null" @resized="resizedEvent">
|
||||
<span class="close" @click="delItem(item)">
|
||||
<grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
|
||||
:x="item.x" :y="item.y" :dragAllowFrom="item.component&&item.component.dom?item.component.dom:null" @resized="resizedEvent">
|
||||
<span class="close" @click="delItem(item)" v-if="tilesIsMove">
|
||||
<CloseCircleFilled style="color: #f10215;" />
|
||||
</span>
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] bg-[#fff] us-card-box">
|
||||
<component :is="item.loadComp" :data="item" :key="item.i"/>
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background">
|
||||
<component :is="item.loadComp" :data="item" :key="item.i" />
|
||||
</div>
|
||||
</grid-item>
|
||||
|
||||
<!-- <grid-item>
|
||||
<div style="width: 200px;height: 200px;border: 1px solid #f00;">
|
||||
|
||||
</div>
|
||||
</grid-item> -->
|
||||
</grid-layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
min-width: 1000px;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.grid-box {
|
||||
min-width: 1000px;
|
||||
.container-group {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.components-box {
|
||||
padding: 12px 20px;
|
||||
// border: 1px solid rgb(66 66 66 / 100%);
|
||||
|
@ -359,6 +407,7 @@ let addTiles = (val) => {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shop-box {
|
||||
width: 550px;
|
||||
height: 75vh;
|
||||
|
@ -371,7 +420,7 @@ let addTiles = (val) => {
|
|||
height: 100% !important;
|
||||
overflow: auto;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(66 66 66 / 100%);
|
||||
border: 0px solid rgb(66 66 66 / 100%);
|
||||
|
||||
.vue-grid-item {
|
||||
// padding: 12px 20px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a href="#" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
|
||||
<a href="/portal" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
|
||||
<img :src="'/xbyt/'+data.component.name2" alt="" class="w-full object-content">
|
||||
<div class="text-sm">{{ data.component.name }}</div>
|
||||
</a>
|
||||
|
|
|
@ -1,31 +1,41 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100%;" class="flex flex-col">
|
||||
<div class="head-top-box flex justify-between mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1">
|
||||
<CalendarOutlined />待办
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="head-top-box flex justify-between mb-3 titlt-top">
|
||||
<div class="flex items-center gap-10">
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div class="flex items-center gap-1 cursor-pointer">
|
||||
<CalendarOutlined />待办
|
||||
</div>
|
||||
</Badge>
|
||||
|
||||
<div class="flex items-center gap-1 cursor-pointer">
|
||||
<CarryOutOutlined />已办
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<ExceptionOutlined />待阅
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div class="flex items-center gap-1 cursor-pointer">
|
||||
<ExceptionOutlined />待阅
|
||||
</div>
|
||||
</Badge>
|
||||
<div class="flex items-center gap-1 cursor-pointer">
|
||||
<FileDoneOutlined />已阅
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex items-center gap-1 cursor-pointer">
|
||||
<StarOutlined />关注
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<InputSearch placeholder="任务查询" style="width: 200px" />
|
||||
<SettingOutlined />
|
||||
<ReloadOutlined />
|
||||
<SettingOutlined class="cursor-pointer" @click="userSet = true" />
|
||||
<ReloadOutlined class="cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="f-btn-box">
|
||||
<li v-for="(item) in plainOptions" :key="item">
|
||||
<Button >{{ item }}</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<vxe-grid v-bind="gridOptions" v-on="gridEvents">
|
||||
<vxe-grid v-bind="gridOptions">
|
||||
<template #attention_default="{ row }">
|
||||
<StarOutlined class="text-lg"></StarOutlined>
|
||||
</template>
|
||||
|
@ -36,16 +46,37 @@
|
|||
</template>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
<Modal v-model:open="userSet" title="个人设置" :okText="'提交'" :width="800">
|
||||
<div class="flex gap-2">
|
||||
<div class="shrink-0">接收消息系统:</div>
|
||||
<div>
|
||||
<Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
|
||||
全选
|
||||
</Checkbox>
|
||||
<CheckboxGroup v-model:value="state.checkedList">
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<Checkbox :value="item" v-for="(item) in plainOptions" :key="item">
|
||||
<div class="w-[85px] truncate">{{ item }}</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import type { VxeGridProps, VxeGridListeners } from 'vxe-table'
|
||||
import { reactive, watch, ref } from 'vue'
|
||||
import { type VxeGridProps, VxeUI } from 'vxe-table'
|
||||
import { CalendarOutlined, CarryOutOutlined, StarOutlined, ExceptionOutlined, FileDoneOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
|
||||
import { InputSearch,Pagination } from 'ant-design-vue';
|
||||
|
||||
import { InputSearch, Pagination, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
})
|
||||
|
||||
interface RowVO {
|
||||
id: number
|
||||
|
@ -102,19 +133,44 @@ const findList = () => {
|
|||
}, 300)
|
||||
}
|
||||
|
||||
const searchEvent = () => {
|
||||
tablePage.currentPage = 1
|
||||
findList()
|
||||
}
|
||||
|
||||
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
|
||||
tablePage.currentPage = currentPage
|
||||
tablePage.pageSize = pageSize
|
||||
findList()
|
||||
}
|
||||
|
||||
findList()
|
||||
|
||||
|
||||
// 个人设置弹层
|
||||
let userSet = ref(false);
|
||||
|
||||
const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
|
||||
const state = reactive({
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
checkedList: ['公文系统', '合同管理'],
|
||||
});
|
||||
|
||||
const onCheckAllChange = (e: any) => {
|
||||
Object.assign(state, {
|
||||
checkedList: e.target.checked ? plainOptions : [],
|
||||
indeterminate: false,
|
||||
});
|
||||
};
|
||||
watch(
|
||||
() => state.checkedList,
|
||||
val => {
|
||||
state.indeterminate = !!val.length && val.length < plainOptions.length;
|
||||
state.checkAll = val.length === plainOptions.length;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style>
|
||||
@import 'vxe-table/lib/style.css'
|
||||
<style lang="scss">
|
||||
@import 'vxe-table/lib/style.css';
|
||||
|
||||
.f-btn-box {
|
||||
width: 100%; //指定可滑动区域宽度
|
||||
overflow: hidden; //超出隐藏
|
||||
white-space: nowrap; //超出不换行
|
||||
overflow-x: auto; //出现水平滚动条
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="custom-card w-[100%] h-[100%]">
|
||||
<div class="card-name">我的应用</div>
|
||||
<GridGroup :list="data.component.childer"></GridGroup>
|
||||
<div class="custom-card w-[100%] h-[100%] flex flex-col">
|
||||
<div class="card-name titlt-top">我的应用</div>
|
||||
<GridGroup :list="data.component.childer" class="flex-1"></GridGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
@ -19,5 +19,9 @@ let { data } = toRefs(props);
|
|||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.card-name {
|
||||
font-weight: 500;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
</style>
|
|
@ -1,17 +1,75 @@
|
|||
<script setup>
|
||||
import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref } from 'vue';
|
||||
import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref, nextTick } from 'vue';
|
||||
|
||||
import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
|
||||
import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
|
||||
|
||||
import { tilesList } from './tiles'
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
// import GridGroup from './components/GridGroup/index.vue'
|
||||
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { proxy, ctx: that } = getCurrentInstance();
|
||||
const layout = ref([]);
|
||||
onMounted(() => {
|
||||
layout.value = [
|
||||
{
|
||||
"x": 1,
|
||||
"y": 0,
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"i": "1728964990256",
|
||||
"component": {
|
||||
"name1": "AUTO_1612155980933.png",
|
||||
"name2": "AUTO_1612155980933_C会议管理.png",
|
||||
"size": "2x2",
|
||||
"name": "会议管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 0,
|
||||
"path": "/portal"
|
||||
},
|
||||
},
|
||||
{
|
||||
"x": 0,
|
||||
"y": 2,
|
||||
"w": 8,
|
||||
"h": 5,
|
||||
"i": "1728964991972",
|
||||
"component": {
|
||||
"name1": "AUTO_1612159241967.png",
|
||||
"name2": "AUTO_1612159241967_C车辆调度.png",
|
||||
"size": "2x2",
|
||||
"name": "车辆调度",
|
||||
"w": 8,
|
||||
"h": 5,
|
||||
"component": "./components/Output2/index.vue",
|
||||
"i": 2,
|
||||
"dom": '.titlt-top'
|
||||
},
|
||||
},
|
||||
{
|
||||
"x": 4,
|
||||
"y": 0,
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"i": "1728965029729",
|
||||
"component": {
|
||||
"name1": "AUTO_1612155980933.png",
|
||||
"name2": "AUTO_1612155980933_C会议管理.png",
|
||||
"size": "2x2",
|
||||
"name": "会议管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 0,
|
||||
"path": "/audit"
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
const colNum = 12;
|
||||
let defaultH = 2;
|
||||
let defaultW = 2;
|
||||
|
@ -26,7 +84,7 @@ const DragPos = {
|
|||
h: null,
|
||||
i: null,
|
||||
};
|
||||
const componentsInfo = tilesList
|
||||
const componentsInfo = tilesList
|
||||
// [
|
||||
// {
|
||||
// id: '1-1',
|
||||
|
@ -175,6 +233,8 @@ const drag = (e, item) => {
|
|||
}
|
||||
};
|
||||
const dragend = (e) => {
|
||||
console.log('eeeee', e);
|
||||
tilesIsMove.value = false;
|
||||
const parentRect = document
|
||||
.querySelector('.grid-box')
|
||||
.getBoundingClientRect();
|
||||
|
@ -219,8 +279,12 @@ const dragend = (e) => {
|
|||
try {
|
||||
proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
|
||||
'block';
|
||||
} catch { }
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
tilesIsMove.value = true;
|
||||
})
|
||||
};
|
||||
// 尺寸变更后,触发resize事件,使图表resize
|
||||
const resizedEvent = (e) => {
|
||||
|
@ -242,7 +306,7 @@ let shop = ref(false)
|
|||
// 编辑磁贴
|
||||
let editTiles = ref(false)
|
||||
// 商店分组展开
|
||||
let activeKeyArr = ref(['1','2','3'])
|
||||
let activeKeyArr = ref(['1', '2', '3'])
|
||||
// 选中的磁贴
|
||||
let selectTilseArr = ref([])
|
||||
// 新增磁贴
|
||||
|
@ -258,22 +322,41 @@ let addTiles = (val) => {
|
|||
|
||||
selectTilseArr.value = arr
|
||||
}
|
||||
// 磁贴是否可拖拽
|
||||
let tilesIsMove = ref(false)
|
||||
// 取消和确定编辑磁贴
|
||||
let cancelOrSure = (type) => {
|
||||
if (type == 'cance') {
|
||||
editTiles.value = false;
|
||||
tilesIsMove.value = false;
|
||||
} else if (type == 'sure') {
|
||||
editTiles.value = true;
|
||||
tilesIsMove.value = true;
|
||||
}
|
||||
}
|
||||
// 页面跳转
|
||||
let goPage = (item) => {
|
||||
if (tilesIsMove.value) return;
|
||||
router.push(item.component?.path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container h-[calc(100%-10px)]">
|
||||
<div class="container h-[calc(100%-10px)] px-[20px]">
|
||||
<!-- 自定义布局的部分 -->
|
||||
<div class="grid-box ">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="true" :is-mirrored="false" :auto-size="false" :responsive="false"
|
||||
:is-resizable="true" :margin="[10, 10]" :row-height="45" :vertical-compact="true">
|
||||
<div class="grid-box select-none">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="tilesIsMove"
|
||||
:is-mirrored="false" :auto-size="false" :responsive="false" :is-resizable="tilesIsMove" :margin="[10, 10]"
|
||||
:row-height="45" :vertical-compact="true">
|
||||
|
||||
<grid-item v-for="item in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w" :x="item.x"
|
||||
:y="item.y" :dragAllowFrom="'.head-top-box'" @resized="resizedEvent">
|
||||
<span class="close" @click="delItem(item)">
|
||||
<grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
|
||||
:x="item.x" :y="item.y" :dragAllowFrom="item.component && item.component.dom ? item.component.dom : null"
|
||||
@resized="resizedEvent">
|
||||
<span class="close" @click="delItem(item)" v-if="tilesIsMove">
|
||||
<CloseCircleFilled style="color: #f10215;" />
|
||||
</span>
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] bg-[#fff] us-card-box">
|
||||
<component :is="item.loadComp" :data="item" :key="item.i"/>
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background" @click="goPage(item)">
|
||||
<component :is="item.loadComp" :data="item" :key="item.i" />
|
||||
</div>
|
||||
</grid-item>
|
||||
|
||||
|
@ -284,79 +367,129 @@ let addTiles = (val) => {
|
|||
</grid-item> -->
|
||||
</grid-layout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧悬浮部分 -->
|
||||
<FloatButtonGroup shape="circle" :style="{ right: '40px' }">
|
||||
<template v-if="!editTiles">
|
||||
<FloatButton tooltip="编辑磁贴" @click="editTiles = true">
|
||||
<template #icon>
|
||||
<EditOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FloatButton tooltip="保存修改">
|
||||
<template #icon>
|
||||
<CheckOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<FloatButton tooltip="取消修改" @click="editTiles = false">
|
||||
<template #icon>
|
||||
<UndoOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<Popover v-model:open="shop" title="磁贴商店(133)" trigger="click" placement="topRight">
|
||||
<template #content>
|
||||
<div class="shop-box">
|
||||
<CheckboxGroup style="width: 100%" v-model:value="selectTilseArr">
|
||||
<Collapse v-model:activeKey="activeKeyArr" style="width: 100%">
|
||||
<CollapsePanel key="1" header="个人工作台(44)">
|
||||
<!-- 可拖入的组件部分 -->
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(0, 44)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
|
||||
@dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
|
||||
:class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '('+item.size+')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="2" header="个人工作台(44)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(44, 87)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
|
||||
@dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
|
||||
:class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '('+item.size+')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)" class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="3" header="个人工作台(45)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(-45)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
|
||||
@dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
|
||||
:class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '('+item.size+')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)" class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
</Collapse>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</template>
|
||||
<FloatButton tooltip="磁贴商店">
|
||||
<!-- 右侧悬浮部分 -->
|
||||
<FloatButtonGroup shape="circle" :style="{ right: '40px' }">
|
||||
<template v-if="!editTiles">
|
||||
<FloatButton tooltip="编辑磁贴" @click="cancelOrSure('sure')">
|
||||
<template #icon>
|
||||
<ShoppingCartOutlined style="font-size: 20px;" :visibility-height="0" />
|
||||
<EditOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
</Popover>
|
||||
</template>
|
||||
</FloatButtonGroup>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
|
||||
<template #icon>
|
||||
<CheckOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<FloatButton tooltip="取消修改" @click="cancelOrSure('cance')">
|
||||
<template #icon>
|
||||
<UndoOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
<Popover v-model:open="shop" title="磁贴商店(127)" trigger="click" placement="topRight">
|
||||
<template #content>
|
||||
<div class="shop-box">
|
||||
<CheckboxGroup style="width: 100%" v-model:value="selectTilseArr">
|
||||
<Collapse v-model:activeKey="activeKeyArr" style="width: 100%">
|
||||
<CollapsePanel key="1" header="个人工作台(22)">
|
||||
<!-- 可拖入的组件部分 -->
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend($event)" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="2" header="综合行政(12)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="3" header="经营管理(22)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="4" header="安全生产(19)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="5" header="勘探开发(26)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="6" header="数据管理(1)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(101, 102)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
<CollapsePanel key="7" header="总部系统(25)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(102, 127)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
class="absolute bottom-0 right-1" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
</Collapse>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</template>
|
||||
<FloatButton tooltip="磁贴商店">
|
||||
<template #icon>
|
||||
<ShoppingCartOutlined style="font-size: 20px;" :visibility-height="0" />
|
||||
</template>
|
||||
</FloatButton>
|
||||
</Popover>
|
||||
</template>
|
||||
</FloatButtonGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
@ -423,6 +556,7 @@ let addTiles = (val) => {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shop-box {
|
||||
width: 550px;
|
||||
height: 75vh;
|
||||
|
@ -435,7 +569,7 @@ let addTiles = (val) => {
|
|||
height: 100% !important;
|
||||
overflow: auto;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(66 66 66 / 100%);
|
||||
// border: 1px solid rgb(66 66 66 / 100%);
|
||||
|
||||
.vue-grid-item {
|
||||
// padding: 12px 20px;
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div class="flex justify-between">
|
||||
<nested-draggable v-model="list" class="w-full"></nested-draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import NestedDraggable from './NestedComponent.vue'
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: 'item 1',
|
||||
type: 'father',
|
||||
children: [
|
||||
{
|
||||
name: 'item 2',
|
||||
type: 'son',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'item 3',
|
||||
type: 'father',
|
||||
children: [
|
||||
{
|
||||
name: 'item 4',
|
||||
type: 'son',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'item 5',
|
||||
type: 'father',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
|
||||
<div class="top-box flex justify-between items-center">
|
||||
<div class="t-b-name text-base">磁贴管理</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button type="primary">注册磁贴</Button>
|
||||
<VbenIconButton
|
||||
class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
|
||||
<UnorderedListOutlined />
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle :type="'portal'" :list="list" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
VbenIconButton,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
import CardTitle from './components/CardTiles/index.vue';
|
||||
import { UnorderedListOutlined, ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination} from 'ant-design-vue';
|
||||
import { tilesList } from './tiles'
|
||||
|
||||
let list: any[] = []
|
||||
for (let i = 0; i < tilesList.length; i++) {
|
||||
let obj: any = {}
|
||||
obj.name = tilesList[i]?.name;
|
||||
obj.url = tilesList[i]?.name2;
|
||||
obj.work = '经营管理';
|
||||
obj.code = tilesList[i]?.name1.split('.')[0];
|
||||
list.push(obj);
|
||||
obj = null
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
Displayed as <code>[x, y, w, h]</code>:
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="item in layout">
|
||||
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ xxx }}
|
||||
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="draggable"
|
||||
:is-resizable="resizable" :responsive="false" :vertical-compact="false" :prevent-collision="true"
|
||||
:use-css-transforms="true">
|
||||
<grid-item v-for="item in layout" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
|
||||
:i="item.i" @dragging="moveEvent" @resizeEvent="resizeEvent">
|
||||
<span class="text">{{ item.i }}</span>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { GridLayout, GridItem } from "vue-grid-layout"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GridLayout,
|
||||
GridItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
xxx:{},
|
||||
layout: [
|
||||
{ "x": 0, "y": 0, "w": 2, "h": 2, "i": "0", static: false },
|
||||
{ "x": 2, "y": 0, "w": 2, "h": 4, "i": "1", static: true },
|
||||
{ "x": 4, "y": 0, "w": 2, "h": 5, "i": "2", static: false },
|
||||
{ "x": 6, "y": 0, "w": 2, "h": 3, "i": "3", static: false },
|
||||
{ "x": 8, "y": 0, "w": 2, "h": 3, "i": "4", static: false },
|
||||
{ "x": 10, "y": 0, "w": 2, "h": 3, "i": "5", static: false },
|
||||
{ "x": 0, "y": 5, "w": 2, "h": 5, "i": "6", static: false },
|
||||
{ "x": 2, "y": 5, "w": 2, "h": 5, "i": "7", static: false },
|
||||
{ "x": 4, "y": 5, "w": 2, "h": 5, "i": "8", static: false },
|
||||
{ "x": 6, "y": 3, "w": 2, "h": 4, "i": "9", static: true },
|
||||
{ "x": 8, "y": 4, "w": 2, "h": 4, "i": "10", static: false },
|
||||
{ "x": 10, "y": 4, "w": 2, "h": 4, "i": "11", static: false },
|
||||
{ "x": 0, "y": 10, "w": 2, "h": 5, "i": "12", static: false },
|
||||
{ "x": 2, "y": 10, "w": 2, "h": 5, "i": "13", static: false },
|
||||
{ "x": 4, "y": 8, "w": 2, "h": 4, "i": "14", static: false },
|
||||
{ "x": 6, "y": 8, "w": 2, "h": 4, "i": "15", static: false },
|
||||
{ "x": 8, "y": 10, "w": 2, "h": 5, "i": "16", static: false },
|
||||
{ "x": 10, "y": 4, "w": 2, "h": 2, "i": "17", static: false },
|
||||
{ "x": 0, "y": 9, "w": 2, "h": 3, "i": "18", static: false },
|
||||
{ "x": 2, "y": 6, "w": 2, "h": 2, "i": "19", static: false }
|
||||
],
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moveEvent(e) {
|
||||
console.log(e)
|
||||
this.xxx = {delta:e.delta,velocity:e.velocity}
|
||||
|
||||
},
|
||||
|
||||
resizeEvent(e) {
|
||||
console.log(e)
|
||||
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vue-grid-layout {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
background: #ccc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.vue-grid-item .resizing {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vue-grid-item .static {
|
||||
background: #cce;
|
||||
}
|
||||
|
||||
.vue-grid-item .text {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .no-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .minMax {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vue-grid-item .add {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vue-draggable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
|
||||
background-position: bottom right;
|
||||
padding: 0 8px 8px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
|
@ -7,7 +7,8 @@ let tilesList = [
|
|||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 0
|
||||
"i": 0,
|
||||
"path": "/portal"
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612158921536.png",
|
||||
|
@ -17,6 +18,7 @@ let tilesList = [
|
|||
"w": 4,
|
||||
"h": 6,
|
||||
"component": "./components/Output5/index.vue",
|
||||
"dom": '.titlt-top',
|
||||
"childer": [
|
||||
{
|
||||
"name1": "AUTO_1612159241967.png",
|
||||
|
@ -41,7 +43,8 @@ let tilesList = [
|
|||
"w": 8,
|
||||
"h": 5,
|
||||
"component": "./components/Output2/index.vue",
|
||||
"i": 2
|
||||
"i": 2,
|
||||
"dom": '.titlt-top'
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612159773503.png",
|
||||
|
@ -51,7 +54,8 @@ let tilesList = [
|
|||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 3
|
||||
"i": 3,
|
||||
"path": '/audit'
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612160044533.png",
|
||||
|
|
|
@ -180,7 +180,7 @@ if (enableShortcutKey.value) {
|
|||
<div
|
||||
class="text-foreground mb-1 flex items-center text-sm font-medium"
|
||||
>
|
||||
{{ text }}
|
||||
李华
|
||||
<Badge class="ml-2 text-green-400">
|
||||
{{ tagText }}
|
||||
</Badge>
|
||||
|
|
Loading…
Reference in New Issue