375 lines
12 KiB
Vue
375 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
draggable
|
|||
|
|
:title="title"
|
|||
|
|
v-model.trim="dialogVisible"
|
|||
|
|
width="900px"
|
|||
|
|
:before-close="handleClose"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<div style="display: flex">
|
|||
|
|
<el-form ref="formRef" style="flex: 1" :rules="rules" :model="form" label-width="auto" class="form mr10">
|
|||
|
|
<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="2"
|
|||
|
|
placeholder="请输入内容"
|
|||
|
|
v-model.trim="form.remark"
|
|||
|
|
></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<!-- 拖拽组件 -->
|
|||
|
|
<div>
|
|||
|
|
<div class="image">
|
|||
|
|
<img
|
|||
|
|
v-for="(item, index) in imgList"
|
|||
|
|
:key="index"
|
|||
|
|
:src="item"
|
|||
|
|
class="mr10"
|
|||
|
|
@click="imgData(index)"
|
|||
|
|
/>
|
|||
|
|
<el-button type="primary" icon="el-icon-Plus" size="small" @click="addItem">添加容器</el-button>
|
|||
|
|
</div>
|
|||
|
|
<GridLayout
|
|||
|
|
class="GridLayout"
|
|||
|
|
v-model:layout="layout"
|
|||
|
|
style="width: 511px; height: 310px"
|
|||
|
|
:row-height="40"
|
|||
|
|
:col-num="12"
|
|||
|
|
>
|
|||
|
|
<template #item="{ item }">
|
|||
|
|
<span class="text">{{ `${item.name}` }}</span>
|
|||
|
|
<!-- <span class="remove" @click="removeItem(item.i)">x</span> -->
|
|||
|
|
<CloseBold class="remove" @click="removeItem(item.i)" />
|
|||
|
|
|
|||
|
|
<el-popover placement="top" :width="230" trigger="click">
|
|||
|
|
<template #reference>
|
|||
|
|
<!-- <span class="bind">绑定页面</span> -->
|
|||
|
|
<Tools class="bind" />
|
|||
|
|
</template>
|
|||
|
|
<el-select
|
|||
|
|
v-model="item.path"
|
|||
|
|
filterable
|
|||
|
|
placeholder="选择绑定页面"
|
|||
|
|
class="mb10"
|
|||
|
|
@change="change($event, item)"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in treeList"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.name"
|
|||
|
|
:value="item.path"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
</GridLayout>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="handleClose">取 消</el-button>
|
|||
|
|
<el-button type="primary" @click="addFn">确定</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { componentTree } from '@/api/user-boot/user'
|
|||
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import { GridLayout, GridItem } from 'grid-layout-plus'
|
|||
|
|
import { Tools, CloseBold } from '@element-plus/icons-vue'
|
|||
|
|
import { addDashboard, updateDashboard } from '@/api/system-boot/csstatisticalset'
|
|||
|
|
import html2canvas from 'html2canvas'
|
|||
|
|
const title = ref('')
|
|||
|
|
const formRef = ref()
|
|||
|
|
const treeList: any = ref([])
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
let index = 9
|
|||
|
|
const emit = defineEmits(['submit'])
|
|||
|
|
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 imgList = [
|
|||
|
|
new URL(`@/assets/imgs/1x1.png`, import.meta.url),
|
|||
|
|
new URL(`@/assets/imgs/2x2.png`, import.meta.url),
|
|||
|
|
new URL(`@/assets/imgs/2x3.png`, import.meta.url),
|
|||
|
|
new URL(`@/assets/imgs/3x3.png`, import.meta.url)
|
|||
|
|
]
|
|||
|
|
const form: any = reactive({
|
|||
|
|
pageName: '',
|
|||
|
|
thumbnail: '',
|
|||
|
|
containerConfig: [],
|
|||
|
|
sort: '100',
|
|||
|
|
id: '',
|
|||
|
|
remark: ''
|
|||
|
|
})
|
|||
|
|
const rules = {
|
|||
|
|
pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
|
|||
|
|
projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
|
|||
|
|
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
|||
|
|
}
|
|||
|
|
// 删除拖拽
|
|||
|
|
const removeItem = (id: string) => {
|
|||
|
|
const index = layout.value.findIndex(item => item.i === id)
|
|||
|
|
|
|||
|
|
if (index > -1) {
|
|||
|
|
layout.value.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加拖拽容器
|
|||
|
|
function addItem() {
|
|||
|
|
layout.value.push({
|
|||
|
|
x: (layout.value.length * 2) % 6,
|
|||
|
|
y: layout.value.length + 6, // puts it at the bottom
|
|||
|
|
w: 4,
|
|||
|
|
h: 2,
|
|||
|
|
i: `${index++}`,
|
|||
|
|
name: '',
|
|||
|
|
path: ''
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const addFn = () => {
|
|||
|
|
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 (title.value == '新增页面') {
|
|||
|
|
addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
|||
|
|
(res: any) => {
|
|||
|
|
ElMessage.success('新增页面成功!')
|
|||
|
|
handleClose()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
} else {
|
|||
|
|
updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
|||
|
|
(res: any) => {
|
|||
|
|
ElMessage.success('修改页面成功!')
|
|||
|
|
handleClose()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const change = (e: any, item: any) => {
|
|||
|
|
item.name = treeList.value.filter((item: any) => item.path == e)[0].name
|
|||
|
|
}
|
|||
|
|
// 设置布局
|
|||
|
|
const imgData = i => {
|
|||
|
|
switch (i) {
|
|||
|
|
case 0:
|
|||
|
|
// 1x1
|
|||
|
|
layout.value = [{ x: 0, y: 0, w: 12, h: 6, i: '0', name: '', path: '' }]
|
|||
|
|
return
|
|||
|
|
case 1:
|
|||
|
|
// 2x2
|
|||
|
|
layout.value = [
|
|||
|
|
{ x: 0, y: 0, w: 6, h: 3, i: '0', name: '', path: '' },
|
|||
|
|
{ x: 6, y: 0, w: 6, h: 3, i: '1', name: '', path: '' },
|
|||
|
|
{ x: 0, y: 3, w: 6, h: 3, i: '3', name: '', path: '' },
|
|||
|
|
{ x: 6, y: 3, w: 6, h: 3, i: '4', name: '', path: '' }
|
|||
|
|
]
|
|||
|
|
return
|
|||
|
|
case 2:
|
|||
|
|
// 2x3
|
|||
|
|
layout.value = [
|
|||
|
|
{ x: 0, y: 0, w: 8, h: 4, i: '0', name: '', path: '' },
|
|||
|
|
{ x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
|
|||
|
|
{ x: 8, y: 2, w: 4, h: 2, i: '5', name: '', path: '' },
|
|||
|
|
{ x: 0, y: 4, w: 4, h: 2, i: '6', name: '', path: '' },
|
|||
|
|
{ x: 4, y: 4, w: 4, h: 2, i: '7', name: '', path: '' },
|
|||
|
|
{ x: 8, y: 4, w: 4, h: 2, i: '8', name: '', path: '' }
|
|||
|
|
]
|
|||
|
|
return
|
|||
|
|
case 3:
|
|||
|
|
// 3x3
|
|||
|
|
layout.value = [
|
|||
|
|
{ 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: '' }
|
|||
|
|
]
|
|||
|
|
return
|
|||
|
|
default:
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const open = ref((row: any) => {
|
|||
|
|
if (row.data) {
|
|||
|
|
layout.value = JSON.parse(row.data.containerConfig)
|
|||
|
|
form.pageName = row.data.pageName
|
|||
|
|
form.sort = row.data.sort
|
|||
|
|
form.remark = row.data.remark
|
|||
|
|
form.id = row.data.id
|
|||
|
|
}
|
|||
|
|
title.value = row.title
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
// if (row.title == '新增页面') {
|
|||
|
|
// form.name = ''
|
|||
|
|
// form.projectIds = []
|
|||
|
|
// form.sort = '100'
|
|||
|
|
// form.remark = ''
|
|||
|
|
// } else {
|
|||
|
|
// for (let key in form) {
|
|||
|
|
// form[key] = row.row[key] || ''
|
|||
|
|
// }
|
|||
|
|
// form.id = row.row.id
|
|||
|
|
// }
|
|||
|
|
})
|
|||
|
|
onMounted(() => {
|
|||
|
|
componentTree().then((res: any) => {
|
|||
|
|
const uniqueArray = tree2List(res.data, Math.random() * 1000).filter(
|
|||
|
|
(item: any) => item.path != '' && item.path != null
|
|||
|
|
)
|
|||
|
|
treeList.value = Array.from(new Map(uniqueArray.map(item => [item.path, item])).values())
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
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 handleClose = () => {
|
|||
|
|
dialogVisible.value = false
|
|||
|
|
emit('submit')
|
|||
|
|
}
|
|||
|
|
defineExpose({ open })
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.vgl-layout {
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
|||
|
|
background-color: #ccc;
|
|||
|
|
border: 1px solid black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.vgl-item--resizing) {
|
|||
|
|
opacity: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.vgl-item--static) {
|
|||
|
|
background-color: #cce;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
inset: 0;
|
|||
|
|
width: 80%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 5px;
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layout-json {
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
background-color: #ddd;
|
|||
|
|
border: 1px solid black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.columns {
|
|||
|
|
columns: 120px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remove {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5px;
|
|||
|
|
right: 2px;
|
|||
|
|
width: 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.bind {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
right: -5px;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 16px;
|
|||
|
|
}
|
|||
|
|
.image {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
img {
|
|||
|
|
height: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.el-button {
|
|||
|
|
margin-left: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|