冲突
This commit is contained in:
sjl
@@ -107,11 +107,10 @@ const editd = (e: any) => {
|
||||
}
|
||||
// 设计
|
||||
const Aclick = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
// window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false`)
|
||||
|
||||
}
|
||||
const shejid = (e: any) => { }
|
||||
// 删除
|
||||
const deleted = (e: any) => {
|
||||
ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", {
|
||||
@@ -144,8 +143,8 @@ const deleted = (e: any) => {
|
||||
}
|
||||
|
||||
const imgData = (e: any) => {
|
||||
window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
// window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true#/preview`)
|
||||
|
||||
}
|
||||
|
||||
|
||||
245
src/views/pqs/cockpit/homePage/index.vue
Normal file
245
src/views/pqs/cockpit/homePage/index.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<GridLayout
|
||||
class="default-main"
|
||||
v-model:layout="layout"
|
||||
:row-height="rowHeight"
|
||||
:is-resizable="false"
|
||||
:is-draggable="false"
|
||||
:responsive="false"
|
||||
:vertical-compact="false"
|
||||
prevent-collision
|
||||
:col-num="12"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="box">
|
||||
<div class="title">
|
||||
<div style="display: flex; align-items: center">
|
||||
<Icon class="HelpFilled" :name="item.icon" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
|
||||
<img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-if="item.component"
|
||||
class="pd10"
|
||||
:key="key"
|
||||
:height="rowHeight * item.h - (item.h == 6 ? -20 : item.h == 2 ? 20 : 5) + 'px'"
|
||||
:width="rowWidth * item.w - 5 + 'px'"
|
||||
:timeKey="item.timeKey"
|
||||
/>
|
||||
<div v-else class="pd10">组件加载失败...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</GridLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, type Component } from 'vue'
|
||||
import { GridLayout } from 'grid-layout-plus'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { queryActivatePage } from '@/api/system-boot/csstatisticalset'
|
||||
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
|
||||
// defineOptions({
|
||||
// name: 'cockpit/homePage'
|
||||
// })
|
||||
// 定义类型
|
||||
interface LayoutItem {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
i: string | number
|
||||
name: string
|
||||
path: string
|
||||
component?: Component | string
|
||||
loading?: boolean
|
||||
error?: any
|
||||
}
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/imgs/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/imgs/reduce.png`, import.meta.url)
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
const layout = ref<LayoutItem[]>([
|
||||
// {
|
||||
// x: 4,
|
||||
// y: 0,
|
||||
// w: 4,
|
||||
// h: 2,
|
||||
// i: '1',
|
||||
// name: '',
|
||||
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
|
||||
// },
|
||||
])
|
||||
const layoutCopy = ref<LayoutItem[]>([])
|
||||
const flag = ref(true)
|
||||
// 组件映射
|
||||
const componentMap = reactive(new Map<string, Component | string>())
|
||||
|
||||
// 获取主内容区域高度
|
||||
const getMainHeight = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetHeight || 0) - 70
|
||||
}
|
||||
// 获取主内容区域高度
|
||||
const getMainWidth = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetWidth || 0) - 20
|
||||
}
|
||||
|
||||
// 初始化行高
|
||||
const initRowHeight = () => {
|
||||
rowHeight.value = Math.max(0, (getMainHeight() - 20) / 6)
|
||||
rowWidth.value = Math.max(0, getMainWidth() / 12)
|
||||
}
|
||||
|
||||
// 动态注册组件
|
||||
const registerComponent = (path: string): Component | string | null => {
|
||||
if (!path) return null
|
||||
|
||||
const cacheKey = path
|
||||
|
||||
// 使用缓存的组件
|
||||
if (componentMap.has(cacheKey)) {
|
||||
return componentMap.get(cacheKey)!
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
}
|
||||
|
||||
const AsyncComponent = defineAsyncComponent({
|
||||
loader: modules[path],
|
||||
loadingComponent: () => h('div', '加载中...'),
|
||||
errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
|
||||
delay: 200,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 保存到映射中
|
||||
componentMap.set(cacheKey, markRaw(AsyncComponent))
|
||||
return AsyncComponent
|
||||
} catch (error) {
|
||||
console.error('注册组件失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
// 缩放
|
||||
const zoom = (value: any) => {
|
||||
if (flag.value) {
|
||||
layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
|
||||
} else {
|
||||
layout.value = layoutCopy.value.map((item, index) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
}
|
||||
flag.value = !flag.value
|
||||
key.value += 1
|
||||
}
|
||||
// 获取布局数据
|
||||
const fetchLayoutData = async () => {
|
||||
try {
|
||||
const { data } = await queryActivatePage()
|
||||
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
|
||||
// 处理布局数据
|
||||
layout.value = parsedLayout.map((item, index) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
|
||||
} catch (error) {
|
||||
console.error('获取布局数据失败:', error)
|
||||
// 可以添加错误提示逻辑
|
||||
}
|
||||
}
|
||||
|
||||
// 窗口大小变化处理 - 使用防抖
|
||||
const handleResize = useDebounceFn(() => {
|
||||
initRowHeight()
|
||||
key.value += 1
|
||||
}, 200)
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initRowHeight()
|
||||
fetchLayoutData()
|
||||
|
||||
// 添加窗口大小变化监听器
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除监听器防止内存泄漏
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vgl-layout {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:hover:not(.vgl-item--placeholder)) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.vgl-item--static) {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.vgl-item) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
overflow: hidden;
|
||||
.title {
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
padding: 0px 10px;
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.HelpFilled {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #fff !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
466
src/views/pqs/cockpit/setUp/components/popup.vue
Normal file
466
src/views/pqs/cockpit/setUp/components/popup.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-card>
|
||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
|
||||
<el-form-item label="页面名称:" prop="pageName">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="form.pageName"
|
||||
placeholder="请输入页面名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="页面排序:" prop="sort">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit-number
|
||||
v-model.trim.number="form.sort"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注:" class="top">
|
||||
<el-input
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
:rows="1"
|
||||
placeholder="请输入内容"
|
||||
v-model.trim="form.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="width: 100%; display: flex; justify-content: end">
|
||||
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
||||
<back-component />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt10" :style="height">
|
||||
<div style="display: flex">
|
||||
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
||||
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
||||
<el-collapse-item
|
||||
v-for="item in treeComponents"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:name="item.id"
|
||||
>
|
||||
<el-collapse v-model="activeNames1" class="ml20">
|
||||
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
|
||||
<div class="Box">
|
||||
<div
|
||||
v-for="(s, index) in k.children"
|
||||
:key="index"
|
||||
class="mr10 mb10 imgBox"
|
||||
draggable="true"
|
||||
unselectable="on"
|
||||
@drag="drag(s)"
|
||||
@dragend="dragEnd(s)"
|
||||
>
|
||||
<div class="textName">{{ s.name }}</div>
|
||||
<img :src="s.image" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div style="flex: 1" ref="wrapper">
|
||||
<GridLayout
|
||||
class="GridLayout"
|
||||
ref="gridLayout"
|
||||
v-model:layout="layout"
|
||||
style="width: 100%"
|
||||
:style="{ height: GridHeight + 'px' }"
|
||||
:row-height="rowHeight"
|
||||
:col-num="12"
|
||||
prevent-collision
|
||||
:vertical-compact="false"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="imgBox">
|
||||
<div class="textName">{{ item.name }}</div>
|
||||
<img
|
||||
:src="getImg(item.path)"
|
||||
:style="{
|
||||
height:
|
||||
item.h * rowHeight -
|
||||
(item.h == 1
|
||||
? 30
|
||||
: item.h == 2
|
||||
? 20
|
||||
: item.h == 3
|
||||
? 10
|
||||
: item.h == 4
|
||||
? -0
|
||||
: item.h == 5
|
||||
? -10
|
||||
: -20) +
|
||||
'px'
|
||||
}"
|
||||
/>
|
||||
<CloseBold class="remove" @click="removeItem(item.i)" />
|
||||
</div>
|
||||
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
||||
-->
|
||||
</template>
|
||||
</GridLayout>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted,onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import type { CollapseIconPositionType } from 'element-plus'
|
||||
import { componentTree } from '@/api/user-boot/user'
|
||||
import { GridLayout, GridItem } from 'grid-layout-plus'
|
||||
import { throttle } from 'lodash-es'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
||||
import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { useRoute } from 'vue-router'
|
||||
const { go } = useRouter()
|
||||
const { query } = useRoute()
|
||||
const height = mainHeight(108)
|
||||
const indicatorHeight = mainHeight(128)
|
||||
const rowHeight = ref(0)
|
||||
const GridHeight = ref(0)
|
||||
const position = ref<CollapseIconPositionType>('left')
|
||||
const form: any = reactive({
|
||||
pageName: '',
|
||||
thumbnail: '',
|
||||
containerConfig: [],
|
||||
sort: '100',
|
||||
id: '',
|
||||
remark: ''
|
||||
})
|
||||
const activeNames = ref([])
|
||||
const activeNames1 = ref([])
|
||||
const rules = {
|
||||
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
||||
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
}
|
||||
const formRef = ref()
|
||||
const layout: any = ref([
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
|
||||
// { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
|
||||
// { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
|
||||
// { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
|
||||
])
|
||||
const treeComponents: any = ref([]) //组件树
|
||||
const treeComponentsCopy: any = ref([]) //组件树
|
||||
const info = () => {
|
||||
activeNames.value = []
|
||||
activeNames1.value = []
|
||||
componentTree().then(res => {
|
||||
treeComponents.value = res.data
|
||||
activeNames.value = treeComponents.value.map(item => item.id)
|
||||
res.data.forEach(item => {
|
||||
item.children.forEach(k => {
|
||||
activeNames1.value.push(k.id)
|
||||
})
|
||||
})
|
||||
treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
|
||||
})
|
||||
|
||||
if (query.id) {
|
||||
queryById({ id: query.id }).then(res => {
|
||||
layout.value = JSON.parse(res.data.containerConfig)
|
||||
form.pageName = res.data.pageName
|
||||
form.sort = res.data.sort
|
||||
form.remark = res.data.remark
|
||||
form.id = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 扁平化树
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 删除拖拽
|
||||
const removeItem = (id: string) => {
|
||||
const index = layout.value.findIndex(item => item.i === id)
|
||||
|
||||
if (index > -1) {
|
||||
layout.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
const wrapper = ref<HTMLElement>()
|
||||
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
||||
|
||||
const mouseAt = { x: -1, y: -1 }
|
||||
|
||||
function syncMousePosition(event: MouseEvent) {
|
||||
mouseAt.x = event.clientX
|
||||
mouseAt.y = event.clientY
|
||||
}
|
||||
|
||||
const dropId = 'drop'
|
||||
const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
|
||||
|
||||
const drag = throttle(row => {
|
||||
// console.log("🚀 ~ drag ~ row:", row)
|
||||
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
|
||||
layout.value.push({
|
||||
x: (layout.value.length * 2) % 6,
|
||||
y: layout.value.length + 6, // puts it at the bottom
|
||||
w: 4,
|
||||
h: 2,
|
||||
i: dropId
|
||||
})
|
||||
}
|
||||
|
||||
const index = layout.value.findIndex(item => item.i === dropId)
|
||||
|
||||
if (index !== -1) {
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
|
||||
if (!item) return
|
||||
|
||||
try {
|
||||
item.wrapper.style.display = 'none'
|
||||
} catch (e) {}
|
||||
|
||||
Object.assign(item.state, {
|
||||
top: mouseAt.y - parentRect.top,
|
||||
left: mouseAt.x - parentRect.left
|
||||
})
|
||||
const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
dragItem.i = String(index)
|
||||
dragItem.x = layout.value[index].x
|
||||
dragItem.y = layout.value[index].y
|
||||
} else {
|
||||
gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function dragEnd(row: any) {
|
||||
console.log('🚀 ~ drag ~ row:', row)
|
||||
const parentRect = wrapper.value?.getBoundingClientRect()
|
||||
|
||||
if (!parentRect || !gridLayout.value) return
|
||||
|
||||
const mouseInGrid =
|
||||
mouseAt.x > parentRect.left &&
|
||||
mouseAt.x < parentRect.right &&
|
||||
mouseAt.y > parentRect.top &&
|
||||
mouseAt.y < parentRect.bottom
|
||||
|
||||
if (mouseInGrid) {
|
||||
gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
layout.value = layout.value.filter(item => item.i !== dropId)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
layout.value.push({
|
||||
x: dragItem.x,
|
||||
y: dragItem.y,
|
||||
w: dragItem.w,
|
||||
h: dragItem.h,
|
||||
i: dragItem.i,
|
||||
name: row.name,
|
||||
path: row.path,
|
||||
icon: row.icon,
|
||||
timeKey: row.timeKey
|
||||
})
|
||||
gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
|
||||
const item = gridLayout.value.getItem(dropId)
|
||||
if (!item) return
|
||||
try {
|
||||
item.wrapper.style.display = ''
|
||||
} catch (e) {}
|
||||
}
|
||||
// 保存
|
||||
const onSubmit = () => {
|
||||
if (layout.value.length == 0) {
|
||||
return ElMessage.warning('页面设计不能为空!')
|
||||
}
|
||||
const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
||||
if (maxValue > 6) {
|
||||
return ElMessage.warning('组件不能超出当前容器!')
|
||||
}
|
||||
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
let url = ''
|
||||
await html2canvas(document.querySelector('.GridLayout'), {
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
url = canvas.toDataURL('image/png')
|
||||
})
|
||||
|
||||
if (valid) {
|
||||
if (form.id == '') {
|
||||
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('新增页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
||||
(res: any) => {
|
||||
ElMessage.success('修改页面成功!')
|
||||
go(-1)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const getImg = throttle((path: string) => {
|
||||
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
||||
})
|
||||
onMounted(() => {
|
||||
info()
|
||||
|
||||
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
||||
rowHeight.value = GridHeight.value / 6 - 11.5
|
||||
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
||||
document.addEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('dragover', syncMousePosition)
|
||||
})
|
||||
// onMounted(() => {
|
||||
|
||||
// // document.addEventListener('dragover', syncMousePosition)
|
||||
// })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form-four {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.el-form-item__content {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.el-select,
|
||||
.el-cascader,
|
||||
.el-input__inner,
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px 20px 12px;
|
||||
}
|
||||
.Box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.imgBox {
|
||||
// padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
background-color: var(--el-card-bg-color);
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
border-radius: var(--el-card-border-radius);
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration) 0.3s;
|
||||
.textName {
|
||||
padding: 2px 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
user-select: none; /* 标准属性 */
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
}
|
||||
.vgl-layout {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 2px;
|
||||
width: 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vgl-layout::before {
|
||||
position: absolute;
|
||||
width: calc(100% - 5px);
|
||||
height: calc(100% - 5px);
|
||||
margin: 5px;
|
||||
content: '';
|
||||
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
|
||||
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
|
||||
background-repeat: repeat;
|
||||
background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #fff;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
266
src/views/pqs/cockpit/setUp/components/view.vue
Normal file
266
src/views/pqs/cockpit/setUp/components/view.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class=" layoutHeader">
|
||||
<div class="title">{{title}}</div>
|
||||
<back-component />
|
||||
</div>
|
||||
<GridLayout
|
||||
v-model:layout="layout"
|
||||
:row-height="rowHeight"
|
||||
:is-resizable="false"
|
||||
:is-draggable="false"
|
||||
:responsive="false"
|
||||
:vertical-compact="false"
|
||||
prevent-collision
|
||||
:col-num="12"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="box">
|
||||
<div class="title">
|
||||
<div style="display: flex; align-items: center">
|
||||
<Icon class="HelpFilled" :name="item.icon" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
|
||||
<img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-if="item.component"
|
||||
class="pd10"
|
||||
:key="key"
|
||||
:height="rowHeight * item.h - (item.h == 6 ? -20 : item.h == 2 ? 20 : 5) + 'px'"
|
||||
:width="rowWidth * item.w - 5 + 'px'"
|
||||
:timeKey="item.timeKey"
|
||||
/>
|
||||
<div v-else class="pd10">组件加载失败...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</GridLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, markRaw, onUnmounted, defineAsyncComponent, type Component } from 'vue'
|
||||
import { GridLayout } from 'grid-layout-plus'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { queryById } from '@/api/system-boot/csstatisticalset'
|
||||
import { HelpFilled, FullScreen } from '@element-plus/icons-vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
// defineOptions({
|
||||
// name: 'cockpit/homePage'
|
||||
// })
|
||||
const { query } = useRoute()
|
||||
// 定义类型
|
||||
interface LayoutItem {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
i: string | number
|
||||
name: string
|
||||
path: string
|
||||
component?: Component | string
|
||||
loading?: boolean
|
||||
error?: any
|
||||
}
|
||||
const title = ref('')
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/imgs/amplify.png`, import.meta.url)
|
||||
const img1 = new URL(`@/assets/imgs/reduce.png`, import.meta.url)
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
const layout = ref<LayoutItem[]>([
|
||||
// {
|
||||
// x: 4,
|
||||
// y: 0,
|
||||
// w: 4,
|
||||
// h: 2,
|
||||
// i: '1',
|
||||
// name: '',
|
||||
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
|
||||
// },
|
||||
])
|
||||
const layoutCopy = ref<LayoutItem[]>([])
|
||||
const flag = ref(true)
|
||||
// 组件映射
|
||||
const componentMap = reactive(new Map<string, Component | string>())
|
||||
|
||||
// 获取主内容区域高度
|
||||
const getMainHeight = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetHeight || 0) - 70
|
||||
}
|
||||
// 获取主内容区域高度
|
||||
const getMainWidth = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetWidth || 0) - 20
|
||||
}
|
||||
|
||||
// 初始化行高
|
||||
const initRowHeight = () => {
|
||||
rowHeight.value = Math.max(0, (getMainHeight() - 72) / 6)
|
||||
rowWidth.value = Math.max(0, getMainWidth() / 12)
|
||||
}
|
||||
|
||||
// 动态注册组件
|
||||
const registerComponent = (path: string): Component | string | null => {
|
||||
if (!path) return null
|
||||
|
||||
const cacheKey = path
|
||||
|
||||
// 使用缓存的组件
|
||||
if (componentMap.has(cacheKey)) {
|
||||
return componentMap.get(cacheKey)!
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
}
|
||||
|
||||
const AsyncComponent = defineAsyncComponent({
|
||||
loader: modules[path],
|
||||
loadingComponent: () => h('div', '加载中...'),
|
||||
errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
|
||||
delay: 200,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 保存到映射中
|
||||
componentMap.set(cacheKey, markRaw(AsyncComponent))
|
||||
return AsyncComponent
|
||||
} catch (error) {
|
||||
console.error('注册组件失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
// 缩放
|
||||
const zoom = (value: any) => {
|
||||
if (flag.value) {
|
||||
layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
|
||||
} else {
|
||||
layout.value = layoutCopy.value.map((item, index) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
}
|
||||
flag.value = !flag.value
|
||||
key.value += 1
|
||||
}
|
||||
// 获取布局数据
|
||||
const fetchLayoutData = async () => {
|
||||
try {
|
||||
const { data } = await queryById({ id: query.id })
|
||||
title.value = data.pageName+'_预览'
|
||||
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
|
||||
// 处理布局数据
|
||||
layout.value = parsedLayout.map((item, index) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
|
||||
} catch (error) {
|
||||
console.error('获取布局数据失败:', error)
|
||||
// 可以添加错误提示逻辑
|
||||
}
|
||||
}
|
||||
|
||||
// 窗口大小变化处理 - 使用防抖
|
||||
const handleResize = useDebounceFn(() => {
|
||||
initRowHeight()
|
||||
key.value += 1
|
||||
}, 200)
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initRowHeight()
|
||||
fetchLayoutData()
|
||||
|
||||
// 添加窗口大小变化监听器
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除监听器防止内存泄漏
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vgl-layout {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:hover:not(.vgl-item--placeholder)) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.vgl-item--static) {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.vgl-item) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
overflow: hidden;
|
||||
.title {
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
padding: 0px 10px;
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.HelpFilled {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #fff !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.layoutHeader{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
.title{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
284
src/views/pqs/cockpit/setUp/index.vue
Normal file
284
src/views/pqs/cockpit/setUp/index.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="页面名称">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="tableStore.table.params.searchValue"
|
||||
placeholder="请输入页面名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <Table ref="tableRef" /> -->
|
||||
<div
|
||||
style="overflow-x: hidden; overflow-y: scroll; padding: 0 10px"
|
||||
v-loading="tableStore.table.loading"
|
||||
:style="{ height: tableStore.table.height }"
|
||||
>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span
|
||||
style="display: flex; align-items: center; font-weight: 550"
|
||||
:style="{ color: item.state == 1 ? `var(--el-color-primary)` : '' }"
|
||||
>
|
||||
{{ item.pageName }}
|
||||
</span>
|
||||
<div style="display: flex; justify-content: end">
|
||||
<el-button
|
||||
class="color"
|
||||
icon="el-icon-Position"
|
||||
style="padding: 3px 0"
|
||||
type="text"
|
||||
v-if="item.state == 0"
|
||||
@click="activation(item)"
|
||||
>
|
||||
激活
|
||||
</el-button>
|
||||
<el-button
|
||||
class="color"
|
||||
icon="el-icon-View"
|
||||
style="padding: 3px 0"
|
||||
type="text"
|
||||
@click="preview(item)"
|
||||
>
|
||||
预览
|
||||
</el-button>
|
||||
<el-button
|
||||
class="color"
|
||||
icon="el-icon-Edit"
|
||||
style="padding: 3px 0"
|
||||
type="text"
|
||||
@click="editd(item)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-Delete"
|
||||
style="padding: 3px 0; color: red"
|
||||
type="text"
|
||||
@click="deleted(item)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="item.thumbnail" :src="item.thumbnail" class="image" />
|
||||
<el-empty style="height: 220px" v-else description="暂无设计" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
background
|
||||
:layout="'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const { push } = useRouter()
|
||||
import { deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
|
||||
defineOptions({
|
||||
// name: 'cockpit/setUp'
|
||||
})
|
||||
const tableRef = ref()
|
||||
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/system-boot/dashboard/queryPage',
|
||||
method: 'POST',
|
||||
publicHeight: 60,
|
||||
column: [],
|
||||
loadCallback: () => {}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value
|
||||
tableStore.index()
|
||||
tableStore.table.loading = false
|
||||
})
|
||||
// 查询
|
||||
const onSubmitadd = () => {
|
||||
push(`/admin/cockpit/popup`)
|
||||
}
|
||||
// 预览
|
||||
const preview = (e: any) => {
|
||||
push(`/admin/cockpit/view?id=${e.id}`)
|
||||
}
|
||||
// 修改
|
||||
const editd = (e: any) => {
|
||||
push(`/admin/cockpit/popup?id=${e.id}`)
|
||||
}
|
||||
// 删除
|
||||
const deleted = (e: any) => {
|
||||
ElMessageBox.confirm('此操作将永久删除该页面, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteDashboard({ id: e.id }).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除页面成功!'
|
||||
})
|
||||
}
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 激活
|
||||
const activation = (e: any) => {
|
||||
ElMessageBox.confirm('此操作将激活该页面, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
activatePage({ id: e.id }).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '激活成功!'
|
||||
})
|
||||
}
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const onTableSizeChange = (val: number) => {
|
||||
tableStore.onTableAction('page-size-change', { size: val })
|
||||
}
|
||||
|
||||
const onTableCurrentChange = (val: number) => {
|
||||
tableStore.onTableAction('current-page-change', { page: val })
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
// border: 1px solid #000;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
}
|
||||
|
||||
.setstyle {
|
||||
min-height: 200px;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
padding-top: 15px;
|
||||
padding-left: 10px;
|
||||
|
||||
// 不可全选样式
|
||||
.el-tree-node {
|
||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 13px 20px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
|
||||
:deep(.el-pagination__sizes) {
|
||||
.el-select {
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/views/setting/dictionary/component/add.vue
Normal file
180
src/views/setting/dictionary/component/add.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="930px" :title="title" @close="cancel">
|
||||
<div style="display: flex">
|
||||
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
|
||||
<el-form-item class="top" label="组件名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="父组件节点" prop="system">
|
||||
<el-cascader v-model="form.system" :options="customDeptOption" :props="props" placeholder="请选择父组件节点"
|
||||
style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组件图标" prop="icon">
|
||||
<IconSelector v-model="form.icon" placeholder="请选择图标" />
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="组件标识" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入组件菜单选取"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="组件路径" prop="path">
|
||||
<el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="组件查询时间">
|
||||
<el-radio-group v-model="form.timeKey" style="width: 100%">
|
||||
<el-radio-button label="年" value="1" />
|
||||
<el-radio-button label="季" value="2" />
|
||||
<el-radio-button label="月" value="3" />
|
||||
<el-radio-button label="周" value="4" />
|
||||
<el-radio-button label="日" value="5" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="组件排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="width: 550px; height: 370px; overflow: hidden">
|
||||
<div class="ml10" style="font-weight: 600">组件展示</div>
|
||||
<component :is="registerComponent(form.path)" v-if="registerComponent(form.path)"
|
||||
class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'533px'"
|
||||
:timeKey="form.timeKey" />
|
||||
<!-- <div class="pd10">组件加载失败...</div> -->
|
||||
<el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, onMounted, type Component, defineAsyncComponent, h, markRaw } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import html2canvas from 'html2canvas'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = ref<anyObj>({
|
||||
name: '',
|
||||
sort: 100,
|
||||
system: [],
|
||||
timeKey: '3',
|
||||
code: '',
|
||||
path: ''
|
||||
})
|
||||
const props = { label: 'name', value: 'id' }
|
||||
const rules = {
|
||||
code: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输输入组件名称', trigger: 'blur' }],
|
||||
system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
|
||||
icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
|
||||
path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
}
|
||||
const customDeptOption: any = ref([])
|
||||
onMounted(() => {
|
||||
customDeptOption.value = dictData.getBasicData('System_Type')
|
||||
customDeptOption.value.forEach((item: any) => {
|
||||
getFatherComponent({ systemType: item.id }).then(res => {
|
||||
item.children = res.data
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
let Data = JSON.parse(JSON.stringify(data))
|
||||
form.value = Data
|
||||
form.value.system = [Data.systemType, Data.pid]
|
||||
}
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
let url = ''
|
||||
await html2canvas(document.querySelector('.GridLayout'), {
|
||||
scale: 2
|
||||
}).then(canvas => {
|
||||
url = canvas.toDataURL('image/png')
|
||||
console.log('🚀 ~ html2canvas ~ url:', url)
|
||||
})
|
||||
if (title.value == '新增组件') {
|
||||
await componentAdd({
|
||||
...form.value,
|
||||
systemType: form.value.system[0],
|
||||
pid: form.value.system[1],
|
||||
image: url
|
||||
}).then(res => {
|
||||
ElMessage.success('新增成功!')
|
||||
cancel()
|
||||
})
|
||||
} else {
|
||||
await componentEdit({
|
||||
...form.value,
|
||||
systemType: form.value.system[0],
|
||||
pid: form.value.system[1],
|
||||
image: url
|
||||
}).then(res => {
|
||||
ElMessage.success('修改成功!')
|
||||
cancel()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 组件映射
|
||||
const componentMap = reactive(new Map<string, Component | string>())
|
||||
// 动态注册组件
|
||||
const registerComponent = (path: string): Component | string | null => {
|
||||
if (!path) return null
|
||||
if (path.slice(-4) != '.vue') return null
|
||||
|
||||
const cacheKey = path
|
||||
|
||||
// 使用缓存的组件
|
||||
if (componentMap.has(cacheKey)) {
|
||||
return componentMap.get(cacheKey)!
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
}
|
||||
|
||||
const AsyncComponent = defineAsyncComponent({
|
||||
loader: modules[path],
|
||||
loadingComponent: () => h('div', '加载中...'),
|
||||
errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
|
||||
delay: 200,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 保存到映射中
|
||||
componentMap.set(cacheKey, markRaw(AsyncComponent))
|
||||
return AsyncComponent
|
||||
} catch (error) {
|
||||
console.error('注册组件失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
const cancel = () => {
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
136
src/views/setting/dictionary/component/index.vue
Normal file
136
src/views/setting/dictionary/component/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader :showSearch="false">
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
/>
|
||||
<Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import Add from './add.vue'
|
||||
import { deleteSubassembly } from '@/api/user-boot/dept'
|
||||
defineOptions({
|
||||
name: 'component'
|
||||
})
|
||||
const addRef = ref()
|
||||
const addFlag = ref(false)
|
||||
const tableRef = ref()
|
||||
const treeData: any = ref([])
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/component/componentTree',
|
||||
method: 'GET',
|
||||
showPage: false,
|
||||
column: [
|
||||
{ field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
|
||||
{
|
||||
title: '组件图标',
|
||||
field: 'icon',
|
||||
align: 'center',
|
||||
width: '80',
|
||||
render: 'icon'
|
||||
},
|
||||
{ field: 'code', title: '组件标识' },
|
||||
{ field: 'path', title: '组件路径' },
|
||||
{ field: 'image', title: '组件展示', render: 'image' },
|
||||
{
|
||||
title: '操作',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.path == '' || row.path == null
|
||||
},
|
||||
click: row => {
|
||||
addFlag.value = true
|
||||
setTimeout(() => {
|
||||
addRef.value.open('修改组件', row)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
text: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
disabled: row => {
|
||||
return row.path == '' || row.path == null
|
||||
},
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除？'
|
||||
},
|
||||
click: row => {
|
||||
deleteSubassembly({ id: row.id }).then(() => {
|
||||
ElMessage.success('删除成功!')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
addFlag.value = false
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
tableStore.table.data.forEach((item:any) => {
|
||||
item.state = 0
|
||||
})
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
tableStore.table.data = treeData.value
|
||||
}
|
||||
})
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 新增
|
||||
const add = () => {
|
||||
addFlag.value = true
|
||||
setTimeout(() => {
|
||||
addRef.value.open('新增组件')
|
||||
}, 100)
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user